useMaxTabPanelHeight

function useMaxTabPanelHeight<E extends HTMLElement = HTMLDivElement>(
  options: MaxTabPanelHeightOptions<E>
): MaxTabPanelHeightImplementation<E>;

import { Tab } from "@react-md/core/tabs/Tab";
import { TabList } from "@react-md/core/tabs/TabList";
import { useMaxTabPanelHeight } from "@react-md/core/tabs/useMaxTabPanelHeight";
import { useTabs } from "@react-md/core/tabs/useTabs";
import { Slide } from "@react-md/core/transition/Slide";
import { SlideContainer } from "@react-md/core/transition/SlideContainer";
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";

function Example(): ReactElement {
  const { getTabProps, getTabListProps, getTabPanelProps, getTabPanelsProps } =
    useTabs();
  const { getMaxTabPanelHeightProps } = useMaxTabPanelHeight({
    getTabPanelsProps,
  });

  return (
    <>
      <TabList {...getTabListProps()}>
        <Tab {...getTabProps(0)}>Tab 1</Tab>
        <Tab {...getTabProps(1)}>Tab 2</Tab>
        <Tab {...getTabProps(2)}>Tab 3</Tab>
      </TabList>
      <SlideContainer {...getMaxTabPanelHeightProps()}>
        <Slide {...getTabPanelProps(0)}>
          <Tab1Content />
        </Slide>
        <Slide {...getTabPanelProps(1)}>
          <Tab2Content />
        </Slide>
        <Slide {...getTabPanelProps(2)}>
          <Tab3Content />
        </Slide>
      </SlideContainer>
    </>
  );
}

export interface MaxTabPanelHeightOptions<E extends HTMLElement> extends Pick<
  TabsImplementation,
  "getTabPanelsProps"
> {
  ref?: Ref<E>;
  style?: CSSProperties;

  /**
   * @defaultValue `undefined`
   */
  defaultHeight?: UseStateInitializer<string | number>;
}

export interface MaxTabPanelHeightImplementation<E extends HTMLElement> {
  getMaxTabPanelHeightProps: (
    style?: CSSProperties
  ) => ProvidedMaxTabPanelsHeightProps<E>;
}

export interface ProvidedMaxTabPanelsHeightProps<E extends HTMLElement> {
  ref: Ref<E>;
  direction: SlideDirection;
  style: CSSProperties;
}