Function TabContainer

packages/shared/src/components/tabs/TabContainer.tsx:70–251

({
  children,
  className = {},
  controlledActive,
  onActiveChange,
  renderTab,
  shouldFocusTabOnChange = false,
  shouldMountInactive = false,
  showBorder = true,
  showHeader = true,
  style,
  shallow = false,
  swipeable = false,
  tabListProps = {},
  tabTag,
  extraHeaderContent,
}: TabContainerProps<T>)

}

export function TabContainer<T extends string = string>({
  children,
  className = {},
  controlledActive,
  onActiveChange,
  renderTab,
  shouldFocusTabOnChange = false,
  shouldMountInactive = false,
  showBorder = true,
  showHeader = true,
  style,
  shallow = false,
  swipeable = false,
  tabListProps = {},
  tabTag,
  extraHeaderContent,
}: TabContainerProps<T>): ReactElement {
  const router = useRouter();
  const containerRef = useRef<HTMLDivElement>(null);
  const tabs = useMemo(() => (children ?? []).filter(Boolean), [children]);
  const currentPath = getRouterPathname(router.asPath || router.pathname);

  const [active, setActive] = useState(() => {
    if (!tabs.length) {
      return '' as T;
    }

    const defaultLabel = tabs[0].props.label;

    if (tabs[0].props.url) {
      const matchingChild = tabs.find((c) => c.props.url === currentPath);
      return matchingChild ? matchingChild.props.label : defaultLabel;
    }

    return defaultLabel;
  });

  const currentActive = controlledActive ?? active;

  const navigateToUrl = useCallback(
    (url: string) => {
      router.push(url, undefined, { shallow });
    },
    [router, shallow],
  );

  const onClick: TabListProps['onClick'] = (label, event) => {
    const child = tabs.find((c) => c.props.label === label);
    setActive(label as T);
    const shouldChange = onActiveChange?.(label as T, event);

    // evaluate !== false due to backwards compatibility with implementations that return undefined
    if (shouldChange !== false) {
      setTimeout(() => {
        if (shouldFocusTabOnChange && containerRef?.current) {
          const [firstChild] = containerRef.current.children;
          if (firstChild instanceof HTMLElement) {
            firstChild.focus();