<StatefulTabs /> (motion) crashes if any child is null or falsey

[Nathan-Fenner]

<StatefulTabs /> (motion) will crash if a tab is rendered conditionally as one of its children, while <Tabs /> doesn't have the same limitation.

• Desired <Tabs /> codesandbox

export default () => {
  const [activeKey, setActiveKey] = React.useState("0");
  return (
    <Tabs
      activeKey={activeKey}
      onChange={({ activeKey }) => {
        setActiveKey(activeKey);
      }}
      activateOnFocus
    >
      {null}
      <Tab key="0" title="First">
        Content 1
      </Tab>
      <Tab key="1" title="Second">
        Content 2
      </Tab>
      <Tab key="2" title="Third">
        Content 3
      </Tab>
    </Tabs>
  );
};

• Buggy <StatefulTabs /> codesandbox

export default () => {
  return (
  //TypeError
  // Cannot read properties of null (reading 'key')
  // eval
  // eval
  // mapIntoArray
  // mapIntoArray
  // Object.mapChildren [as map]
    <StatefulTabs activateOnFocus>
      {null}
      <Tab key="0" title="First">
        Content 1
      </Tab>
      <Tab key="1" title="Second">
        Content 2
      </Tab>
      <Tab key="2" title="Third">
        Content 3
      </Tab>
    </StatefulTabs>
  );
};

Current Behavior

If a Tab child is rendered conditionally in a StatefulTabs, so that the child is null or false (at least on initial render) then an error is thrown:

function Example({ details }) {
  return <StatefulTabs>
    {details && (
      <Tab title="Details">
        <ShowDetails details={details} />
      </Tab>
    )}
    <Tab title="Always">
      <SomethingAlwaysThere />
    </Tab>
  </StatefulTabs>
}

error:

TypeError: Cannot read properties of null (reading 'key')
at StatefulTabs (webpack-internal:///../../node_modules/baseui/esm/tabs-motion/stateful-tabs.js:137:24)

Tabs does not throw an error in this case.

Expected Behavior

StatefulTabs should skip falsey children like null or false in the same way that Tabs does, so that conditional rendering can work as expected.

Your Environment

Tech	Version
Base UI	v10.12.1
React	18.0.0
browser	Chrome

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

[chasestarr]

I believe the error originates from this line https://github.com/uber/baseweb/blob/master/src/tabs-motion/stateful-tabs.js#L20 Would you like to look into a fix?