[Tabs][base] Expose valueToIndex from useTabsList in mui/base

[SuperAL]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

Right now valueToIndex is created inside processChildren(inside useTabsList) and not being exposed.

const processChildren = React.useCallback(() => {
    const valueToIndex = new Map(); // 👈
    let childIndex = 0;
    const processedChildren = React.Children.map(children, child => {
      // ...
      const childValue = child.props.value === undefined ? childIndex : child.props.value;
      valueToIndex.set(childValue, childIndex); // 👈
      childIndex += 1;
      return /*#__PURE__*/React.cloneElement(child, _extends({
        value: childValue
      }, childIndex === 1 && value === false && !child.props.tabIndex || value === childValue ? {
        tabIndex: 0
      } : {
        tabIndex: -1
      }));
    });
    return processedChildren;
  }, [children, value]);

I hope I can get valueToIndex from useTabsList

const { valueToIndex } = useTabsList({
   ...props,
   ref,
});

Examples 🌈

No response

Motivation 🔦

I wish to use valueToIndex to help implement the tab indicator, right now I need to forEach another time in TabList component.

      const valueToIndex = new Map();  
      let childIndex = 0;
      Children.forEach(children, (child) => {
        if (!isValidElement(child)) {
          return null;
        }
        const childValue =
          child?.props?.value === undefined ? childIndex : child?.props?.value;
        valueToIndex.set(childValue, childIndex); 
        childIndex += 1;
      });

[michaldudak]

Thanks for your input. The internals (and a bit of the API surface area) of the tabs will likely change. We'd like to move away from cloneElement and instead use context for cases like this. We will then expose all the necessary data to render a tab in this context.

I can't commit to any timeframe, though. I'll keep this issue open so that we're aware of the use cases required by the community.

[SuperAL]

@michaldudak Could you also leave a comment here when the changes you said about Tabs are implemented? Then I know I need to update my component when upgrade @mui/base.

[michaldudak]

Sure. We'll also include the proper note in the changelog as it'll likely be a breaking change.