@react-md/core 1.0.0-next.19 → 1.0.0-next.20

package/dist/tabs/types.js

@@ -0,0 +1,24 @@
+/**
+ * Set this to `"automatic"` to make it so focusing tabs with a keyboard
+ * automatically selects them instead of requiring another click. Set this to
+ * `"manual"` if it should require another click before selecting the tab.
+ *
+ * @since 6.0.0
+ */ /**
+ * Set this to `true` to always render buttons that can scroll forwards or
+ * backwards (or upwards and downwards while vertical) within the tab list when
+ * there is overflow.
+ *
+ * Set this to `"tablet-or-above"` to only render the buttons when the
+ * app size is at least a tablet's width.
+ *
+ * Set this to `"auto"` to only render the buttons when there is overflow in
+ * the tab list.
+ *
+ * Set this to `"auto-tablet-or-above"` to only render the buttons when there is
+ * overflow in the tab list and the app size is at least a tablet's width
+ *
+ * @since 6.0.0
+ */ export { };
+
+//# sourceMappingURL=types.js.map

package/dist/tabs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tabs/types.ts"],"sourcesContent":["/**\n * Set this to `\"automatic\"` to make it so focusing tabs with a keyboard\n * automatically selects them instead of requiring another click. Set this to\n * `\"manual\"` if it should require another click before selecting the tab.\n *\n * @since 6.0.0\n */\nexport type TabListActivationMode = \"manual\" | \"automatic\";\n\n/**\n * Set this to `true` to always render buttons that can scroll forwards or\n * backwards (or upwards and downwards while vertical) within the tab list when\n * there is overflow.\n *\n * Set this to `\"tablet-or-above\"` to only render the buttons when the\n * app size is at least a tablet's width.\n *\n * Set this to `\"auto\"` to only render the buttons when there is overflow in\n * the tab list.\n *\n * Set this to `\"auto-tablet-or-above\"` to only render the buttons when there is\n * overflow in the tab list and the app size is at least a tablet's width\n *\n * @since 6.0.0\n */\nexport type TabListScrollButtonsBehavior =\n  | boolean\n  | \"tablet-or-above\"\n  | \"auto\"\n  | \"auto-tablet-or-above\";\n"],"names":[],"mappings":"AAAA;;;;;;CAMC,GAGD;;;;;;;;;;;;;;;CAeC,GACD,WAI2B"}

package/dist/tabs/useMaxTabPanelHeight.d.ts

@@ -0,0 +1,82 @@
+import { type CSSProperties, type Ref } from "react";
+import { type UseStateInitializer } from "../types.js";
+import { type ProvidedTabPanelsProps, type TabsImplementation } from "./useTabs.js";
+/**
+ * @since 6.0.0
+ */
+export interface MaxTabPanelHeightOptions<E extends HTMLElement> extends Pick<TabsImplementation, "getTabPanelsProps"> {
+    ref?: Ref<E>;
+    style?: CSSProperties;
+    /**
+     * @defaultValue `undefined`
+     */
+    defaultHeight?: UseStateInitializer<string | number>;
+}
+/**
+ * @since 6.0.0
+ */
+export interface ProvidedMaxTabPanelsHeightProps<E extends HTMLElement> extends ProvidedTabPanelsProps<E> {
+    style: CSSProperties;
+}
+/**
+ * @since 6.0.0
+ */
+export interface MaxTabPanelHeightImplementation<E extends HTMLElement> {
+    getMaxTabPanelHeightProps: (style?: CSSProperties) => ProvidedMaxTabPanelsHeightProps<E>;
+}
+/**
+ * The `useMaxTabPanelHeight` hook can be used to enforce the tab panels to
+ * have the same height so content does not shift below the tab panels by
+ * calculating the height of all tabs and setting the height to the largest
+ * value.
+ *
+ * If a maximum height should be used, set it through CSS and scrollbars will
+ * appear in each tab panel.
+ *
+ * @example Main Usage
+ * ```tsx
+ * 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>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * NOTE: This will **not work** when dynamically rendering the active tab panel
+ * by enabling the `temporary` prop on the `Slide` or custom behavior.
+ *
+ * @since 6.0.0
+ */
+export declare function useMaxTabPanelHeight<E extends HTMLElement = HTMLDivElement>(options: MaxTabPanelHeightOptions<E>): MaxTabPanelHeightImplementation<E>;

package/dist/tabs/useMaxTabPanelHeight.js

@@ -0,0 +1,95 @@
+import { useCallback, useState } from "react";
+import { useResizeObserver } from "../useResizeObserver.js";
+import { DISPLAY_NONE_CLASS } from "../utils/isElementVisible.js";
+import { getTabPanelRoleOnly } from "./utils.js";
+/**
+ * The `useMaxTabPanelHeight` hook can be used to enforce the tab panels to
+ * have the same height so content does not shift below the tab panels by
+ * calculating the height of all tabs and setting the height to the largest
+ * value.
+ *
+ * If a maximum height should be used, set it through CSS and scrollbars will
+ * appear in each tab panel.
+ *
+ * @example Main Usage
+ * ```tsx
+ * 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>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * NOTE: This will **not work** when dynamically rendering the active tab panel
+ * by enabling the `temporary` prop on the `Slide` or custom behavior.
+ *
+ * @since 6.0.0
+ */ export function useMaxTabPanelHeight(options) {
+    const { ref, style, defaultHeight, getTabPanelsProps } = options;
+    const [height, setHeight] = useState(defaultHeight);
+    const panelRef = useResizeObserver({
+        ref,
+        onUpdate: useCallback((entry)=>{
+            const element = entry.target;
+            const { height } = element.style;
+            element.style.height = "";
+            const panels = getTabPanelRoleOnly(element);
+            const maxHeight = panels.reduce((maxHeight, panel)=>{
+                let { scrollHeight } = panel;
+                if (panel.classList.contains(DISPLAY_NONE_CLASS)) {
+                    panel.classList.toggle(DISPLAY_NONE_CLASS);
+                    ({ scrollHeight } = panel);
+                    panel.classList.toggle(DISPLAY_NONE_CLASS);
+                }
+                return Math.max(maxHeight, scrollHeight);
+            }, 0);
+            element.style.height = height;
+            // don't set the height to 0 since it usually means a calculation issue
+            setHeight((prevHeight)=>maxHeight <= 0 ? prevHeight : maxHeight);
+        }, [])
+    });
+    return {
+        getMaxTabPanelHeightProps: (moreStyle)=>({
+                ...getTabPanelsProps(panelRef),
+                style: {
+                    height,
+                    ...style,
+                    ...moreStyle
+                }
+            })
+    };
+}
+
+//# sourceMappingURL=useMaxTabPanelHeight.js.map

package/dist/tabs/useMaxTabPanelHeight.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tabs/useMaxTabPanelHeight.ts"],"sourcesContent":["import { type CSSProperties, type Ref, useCallback, useState } from \"react\";\n\nimport { type UseStateInitializer } from \"../types.js\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\nimport {\n  type ProvidedTabPanelsProps,\n  type TabsImplementation,\n} from \"./useTabs.js\";\nimport { getTabPanelRoleOnly } from \"./utils.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface MaxTabPanelHeightOptions<E extends HTMLElement>\n  extends Pick<TabsImplementation, \"getTabPanelsProps\"> {\n  ref?: Ref<E>;\n  style?: CSSProperties;\n\n  /**\n   * @defaultValue `undefined`\n   */\n  defaultHeight?: UseStateInitializer<string | number>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedMaxTabPanelsHeightProps<E extends HTMLElement>\n  extends ProvidedTabPanelsProps<E> {\n  style: CSSProperties;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface MaxTabPanelHeightImplementation<E extends HTMLElement> {\n  getMaxTabPanelHeightProps: (\n    style?: CSSProperties\n  ) => ProvidedMaxTabPanelsHeightProps<E>;\n}\n\n/**\n * The `useMaxTabPanelHeight` hook can be used to enforce the tab panels to\n * have the same height so content does not shift below the tab panels by\n * calculating the height of all tabs and setting the height to the largest\n * value.\n *\n * If a maximum height should be used, set it through CSS and scrollbars will\n * appear in each tab panel.\n *\n * @example Main Usage\n * ```tsx\n * import { Tab } from \"@react-md/core/tabs/Tab\";\n * import { TabList } from \"@react-md/core/tabs/TabList\";\n * import { useMaxTabPanelHeight } from \"@react-md/core/tabs/useMaxTabPanelHeight\";\n * import { useTabs } from \"@react-md/core/tabs/useTabs\";\n * import { Slide } from \"@react-md/core/transition/Slide\";\n * import { SlideContainer } from \"@react-md/core/transition/SlideContainer\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { getTabProps, getTabListProps, getTabPanelProps, getTabPanelsProps } =\n *     useTabs();\n *   const { getMaxTabPanelHeightProps } = useMaxTabPanelHeight({\n *     getTabPanelsProps,\n *   });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         <Tab {...getTabProps(0)}>Tab 1</Tab>\n *         <Tab {...getTabProps(1)}>Tab 2</Tab>\n *         <Tab {...getTabProps(2)}>Tab 3</Tab>\n *       </TabList>\n *       <SlideContainer {...getMaxTabPanelHeightProps()}>\n *         <Slide {...getTabPanelProps(0)}>\n *           <Tab1Content />\n *         </Slide>\n *         <Slide {...getTabPanelProps(1)}>\n *           <Tab2Content />\n *         </Slide>\n *         <Slide {...getTabPanelProps(2)}>\n *           <Tab3Content />\n *         </Slide>\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * NOTE: This will **not work** when dynamically rendering the active tab panel\n * by enabling the `temporary` prop on the `Slide` or custom behavior.\n *\n * @since 6.0.0\n */\nexport function useMaxTabPanelHeight<E extends HTMLElement = HTMLDivElement>(\n  options: MaxTabPanelHeightOptions<E>\n): MaxTabPanelHeightImplementation<E> {\n  const { ref, style, defaultHeight, getTabPanelsProps } = options;\n\n  const [height, setHeight] = useState(defaultHeight);\n  const panelRef = useResizeObserver({\n    ref,\n    onUpdate: useCallback((entry) => {\n      const element = entry.target as HTMLElement;\n      const { height } = element.style;\n      element.style.height = \"\";\n      const panels = getTabPanelRoleOnly(element);\n      const maxHeight = panels.reduce((maxHeight, panel) => {\n        let { scrollHeight } = panel;\n        if (panel.classList.contains(DISPLAY_NONE_CLASS)) {\n          panel.classList.toggle(DISPLAY_NONE_CLASS);\n          ({ scrollHeight } = panel);\n          panel.classList.toggle(DISPLAY_NONE_CLASS);\n        }\n\n        return Math.max(maxHeight, scrollHeight);\n      }, 0);\n      element.style.height = height;\n\n      // don't set the height to 0 since it usually means a calculation issue\n      setHeight((prevHeight) => (maxHeight <= 0 ? prevHeight : maxHeight));\n    }, []),\n  });\n\n  return {\n    getMaxTabPanelHeightProps: (moreStyle) => ({\n      ...getTabPanelsProps(panelRef),\n      style: {\n        height,\n        ...style,\n        ...moreStyle,\n      },\n    }),\n  };\n}\n"],"names":["useCallback","useState","useResizeObserver","DISPLAY_NONE_CLASS","getTabPanelRoleOnly","useMaxTabPanelHeight","options","ref","style","defaultHeight","getTabPanelsProps","height","setHeight","panelRef","onUpdate","entry","element","target","panels","maxHeight","reduce","panel","scrollHeight","classList","contains","toggle","Math","max","prevHeight","getMaxTabPanelHeightProps","moreStyle"],"mappings":"AAAA,SAAuCA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAG5E,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,kBAAkB,QAAQ,+BAA+B;AAKlE,SAASC,mBAAmB,QAAQ,aAAa;AAiCjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDC,GACD,OAAO,SAASC,qBACdC,OAAoC;IAEpC,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,aAAa,EAAEC,iBAAiB,EAAE,GAAGJ;IAEzD,MAAM,CAACK,QAAQC,UAAU,GAAGX,SAASQ;IACrC,MAAMI,WAAWX,kBAAkB;QACjCK;QACAO,UAAUd,YAAY,CAACe;YACrB,MAAMC,UAAUD,MAAME,MAAM;YAC5B,MAAM,EAAEN,MAAM,EAAE,GAAGK,QAAQR,KAAK;YAChCQ,QAAQR,KAAK,CAACG,MAAM,GAAG;YACvB,MAAMO,SAASd,oBAAoBY;YACnC,MAAMG,YAAYD,OAAOE,MAAM,CAAC,CAACD,WAAWE;gBAC1C,IAAI,EAAEC,YAAY,EAAE,GAAGD;gBACvB,IAAIA,MAAME,SAAS,CAACC,QAAQ,CAACrB,qBAAqB;oBAChDkB,MAAME,SAAS,CAACE,MAAM,CAACtB;oBACtB,CAAA,EAAEmB,YAAY,EAAE,GAAGD,KAAI;oBACxBA,MAAME,SAAS,CAACE,MAAM,CAACtB;gBACzB;gBAEA,OAAOuB,KAAKC,GAAG,CAACR,WAAWG;YAC7B,GAAG;YACHN,QAAQR,KAAK,CAACG,MAAM,GAAGA;YAEvB,uEAAuE;YACvEC,UAAU,CAACgB,aAAgBT,aAAa,IAAIS,aAAaT;QAC3D,GAAG,EAAE;IACP;IAEA,OAAO;QACLU,2BAA2B,CAACC,YAAe,CAAA;gBACzC,GAAGpB,kBAAkBG,SAAS;gBAC9BL,OAAO;oBACLG;oBACA,GAAGH,KAAK;oBACR,GAAGsB,SAAS;gBACd;YACF,CAAA;IACF;AACF"}

package/dist/tabs/useTabList.d.ts

@@ -1,5 +1,6 @@
 import type { CSSProperties, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, Ref, RefObject } from "react";
 import type { KeyboardMovementContext, KeyboardMovementProps } from "../movement/types.js";
+import { type TabListActivationMode, type TabListScrollButtonsBehavior } from "./types.js";
 declare const TAB_SIZE_VAR = "--rmd-tab-size";
 declare const TAB_OFFSET_VAR = "--rmd-tab-offset";
 export type TabWidthVar = typeof TAB_SIZE_VAR;
@@ -10,8 +11,8 @@ export interface TabListHookOptions {
     style: CSSProperties | undefined;
     activeIndex: number;
     setActiveIndex: (nextActiveIndex: number) => void;
-    scrollButtons: boolean;
-    activationMode: "manual" | "automatic";
+    scrollButtons: TabListScrollButtonsBehavior;
+    activationMode: TabListActivationMode;
     vertical: boolean;
     onClick: MouseEventHandler<HTMLDivElement> | undefined;
     onFocus: FocusEventHandler<HTMLDivElement> | undefined;
@@ -38,6 +39,7 @@ export interface TabListHookReturnValue {
         vertical: boolean;
         disableTransition?: boolean;
     };
+    showScrollButtons: boolean;
 }
 /**
  * @internal

package/dist/tabs/useTabList.js

@@ -1,5 +1,6 @@
 "use client";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useAppSize } from "../media-queries/AppSizeProvider.js";
 import { useKeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
 import { useDir } from "../typography/WritingDirectionProvider.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
@@ -15,6 +16,10 @@ const noop = ()=>{
  */ export function useTabList(options) {
     const { ref: propRef, style, activeIndex, scrollButtons, onClick = noop, onFocus, onKeyDown, activationMode, vertical, setActiveIndex, disableTransition } = options;
     const isRTL = useDir().dir === "rtl";
+    const { isPhone } = useAppSize();
+    const isScrollObserverEnabled = scrollButtons === "auto" || scrollButtons === "auto-tablet-or-above" && !isPhone;
+    const [autoScrollButtons, setAutoScrollButtons] = useState(false);
+    const showScrollButtons = scrollButtons === true || scrollButtons === "tablet-or-above" && !isPhone || isScrollObserverEnabled && autoScrollButtons;
     const [indicatorStyles, setIndicatorStyles] = useState(()=>{
         const tabWidth = `${100 / 3}%`;
         return {
@@ -25,15 +30,23 @@ const noop = ()=>{
     const [nodeRef, ref] = useEnsuredRef(propRef);
     const tabListRef = useResizeObserver({
         ref,
-        disabled: disableTransition,
+        disabled: disableTransition && !isScrollObserverEnabled,
+        disableHeight: disableTransition && !isScrollObserverEnabled && !vertical,
+        disableWidth: disableTransition && !isScrollObserverEnabled && vertical,
         onUpdate: useCallback((entry)=>{
-            // this is kind of hacky -- the styles should update when switching between
-            // RTL, but the RTL state isn't required for any styles. Just reference it
-            // so that the hooks eslint rule doesn't show a warning...
+            // this is kind of hacky -- the styles should update when switching
+            // between RTL or when the scroll buttons appear, but they aren't
+            // required for any styles. Just reference them so that the hooks
+            // eslint rule doesn't show a warning...
             // eslint-disable-next-line @typescript-eslint/no-unused-expressions
             isRTL;
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+            showScrollButtons;
+            if (isScrollObserverEnabled && nodeRef.current) {
+                setAutoScrollButtons(nodeRef.current.scrollWidth > nodeRef.current.offsetWidth);
+            }
             const activeTab = getTabRoleOnly(entry.target)[activeIndex];
-            if (!activeTab) {
+            if (!activeTab || disableTransition) {
                 return;
             }
             const size = vertical ? activeTab.offsetHeight : activeTab.offsetWidth;
@@ -50,7 +63,11 @@ const noop = ()=>{
             });
         }, [
             activeIndex,
+            disableTransition,
             isRTL,
+            isScrollObserverEnabled,
+            nodeRef,
+            showScrollButtons,
             vertical
         ])
     });
@@ -127,7 +144,8 @@ const noop = ()=>{
             vertical,
             disableTransition
         },
-        movementContext
+        movementContext,
+        showScrollButtons
     };
 }
 

package/dist/tabs/useTabList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/useTabList.ts"],"sourcesContent":["\"use client\";\nimport type {\n  CSSProperties,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  Ref,\n  RefObject,\n} from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type {\n  KeyboardMovementContext,\n  KeyboardMovementProps,\n} from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\nimport { getTabRoleOnly, scrollTabIntoView } from \"./utils.js\";\n\nconst TAB_SIZE_VAR = \"--rmd-tab-size\";\nconst TAB_OFFSET_VAR = \"--rmd-tab-offset\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nexport type TabWidthVar = typeof TAB_SIZE_VAR;\nexport type TabOffsetVar = typeof TAB_OFFSET_VAR;\n\nexport type IndicatorCSSProperties = CSSProperties &\n  Record<TabWidthVar | TabOffsetVar, string>;\n\nexport interface TabListHookOptions {\n  ref: Ref<HTMLDivElement> | undefined;\n  style: CSSProperties | undefined;\n  activeIndex: number;\n  setActiveIndex: (nextActiveIndex: number) => void;\n  scrollButtons: boolean;\n  activationMode: \"manual\" | \"automatic\";\n  vertical: boolean;\n  onClick: MouseEventHandler<HTMLDivElement> | undefined;\n  onFocus: FocusEventHandler<HTMLDivElement> | undefined;\n  onKeyDown: KeyboardEventHandler<HTMLDivElement> | undefined;\n  disableTransition: boolean;\n}\n\nexport interface TabListHookReturnValue {\n  elementProps: KeyboardMovementProps<HTMLDivElement> & {\n    \"aria-orientation\": \"horizontal\" | \"vertical\";\n    style: CSSProperties;\n    ref: Ref<HTMLDivElement>;\n    onClick: MouseEventHandler<HTMLDivElement>;\n  };\n  movementContext: KeyboardMovementContext;\n  backwardProps: {\n    ref: RefObject<HTMLDivElement>;\n    type: \"back\";\n    vertical: boolean;\n    disableTransition?: boolean;\n  };\n  forwardProps: {\n    ref: RefObject<HTMLDivElement>;\n    type: \"forward\";\n    vertical: boolean;\n    disableTransition?: boolean;\n  };\n}\n\n/**\n * @internal\n */\nexport function useTabList(\n  options: TabListHookOptions\n): TabListHookReturnValue {\n  const {\n    ref: propRef,\n    style,\n    activeIndex,\n    scrollButtons,\n    onClick = noop,\n    onFocus,\n    onKeyDown,\n    activationMode,\n    vertical,\n    setActiveIndex,\n    disableTransition,\n  } = options;\n\n  const isRTL = useDir().dir === \"rtl\";\n\n  const [indicatorStyles, setIndicatorStyles] =\n    useState<IndicatorCSSProperties>(() => {\n      const tabWidth = `${100 / 3}%`;\n      return {\n        [TAB_SIZE_VAR]: tabWidth,\n        [TAB_OFFSET_VAR]: \"0px\",\n      };\n    });\n\n  const [nodeRef, ref] = useEnsuredRef(propRef);\n  const tabListRef = useResizeObserver({\n    ref,\n    disabled: disableTransition,\n    onUpdate: useCallback(\n      (entry) => {\n        // this is kind of hacky -- the styles should update when switching between\n        // RTL, but the RTL state isn't required for any styles. Just reference it\n        // so that the hooks eslint rule doesn't show a warning...\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n        isRTL;\n\n        const activeTab = getTabRoleOnly(entry.target)[activeIndex];\n        if (!activeTab) {\n          return;\n        }\n\n        const size = vertical ? activeTab.offsetHeight : activeTab.offsetWidth;\n        const offset = vertical ? activeTab.offsetTop : activeTab.offsetLeft;\n        const cssVars: IndicatorCSSProperties = {\n          [TAB_SIZE_VAR]: `${size}px`,\n          [TAB_OFFSET_VAR]: `${offset}px`,\n        };\n\n        setIndicatorStyles((prevStyles) => {\n          if (\n            prevStyles &&\n            prevStyles[TAB_SIZE_VAR] === cssVars[TAB_SIZE_VAR] &&\n            prevStyles[TAB_OFFSET_VAR] === cssVars[TAB_OFFSET_VAR]\n          ) {\n            return prevStyles;\n          }\n\n          return cssVars;\n        });\n      },\n      [activeIndex, isRTL, vertical]\n    ),\n  });\n  const forwardRef = useRef<HTMLDivElement>(null);\n  const backwardRef = useRef<HTMLDivElement>(null);\n  const { movementProps, movementContext } = useKeyboardMovementProvider({\n    onClick(event) {\n      onClick(event);\n      if (event.isPropagationStopped() || !(event.target instanceof Element)) {\n        return;\n      }\n\n      const clickedTab = event.target.closest(\"[role='tab']\");\n      const tabs = getTabRoleOnly(event.currentTarget);\n      const i = tabs.findIndex((tab) => tab === clickedTab);\n      if (i !== -1) {\n        setActiveIndex(i);\n      }\n    },\n    onFocus,\n    onKeyDown,\n    onFocusChange(event) {\n      const { index } = event;\n      if (activationMode === \"automatic\") {\n        setActiveIndex(index);\n      } else if (scrollButtons) {\n        scrollTabIntoView({\n          activeIndex: index,\n          backward: backwardRef.current,\n          container: nodeRef.current,\n          forward: forwardRef.current,\n          vertical,\n        });\n      }\n    },\n    loopable: true,\n    searchable: true,\n    horizontal: !vertical,\n    includeDisabled: true,\n    tabIndexBehavior: \"roving\",\n    getFocusableElements: getTabRoleOnly,\n  });\n\n  useEffect(() => {\n    scrollTabIntoView({\n      activeIndex,\n      backward: backwardRef.current,\n      container: nodeRef.current,\n      forward: forwardRef.current,\n      vertical,\n    });\n  }, [activeIndex, nodeRef, vertical]);\n\n  return {\n    elementProps: {\n      \"aria-orientation\": vertical ? \"vertical\" : \"horizontal\",\n      ref: tabListRef,\n      style: {\n        ...style,\n        ...(disableTransition ? undefined : indicatorStyles),\n      },\n      ...movementProps,\n    },\n    backwardProps: {\n      ref: backwardRef,\n      type: \"back\",\n      vertical,\n      disableTransition,\n    },\n    forwardProps: {\n      ref: forwardRef,\n      type: \"forward\",\n      vertical,\n      disableTransition,\n    },\n    movementContext,\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useKeyboardMovementProvider","useDir","useEnsuredRef","useResizeObserver","getTabRoleOnly","scrollTabIntoView","TAB_SIZE_VAR","TAB_OFFSET_VAR","noop","useTabList","options","ref","propRef","style","activeIndex","scrollButtons","onClick","onFocus","onKeyDown","activationMode","vertical","setActiveIndex","disableTransition","isRTL","dir","indicatorStyles","setIndicatorStyles","tabWidth","nodeRef","tabListRef","disabled","onUpdate","entry","activeTab","target","size","offsetHeight","offsetWidth","offset","offsetTop","offsetLeft","cssVars","prevStyles","forwardRef","backwardRef","movementProps","movementContext","event","isPropagationStopped","Element","clickedTab","closest","tabs","currentTarget","i","findIndex","tab","onFocusChange","index","backward","current","container","forward","loopable","searchable","horizontal","includeDisabled","tabIndexBehavior","getFocusableElements","elementProps","undefined","backwardProps","type","forwardProps"],"mappings":"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"}
+{"version":3,"sources":["../../src/tabs/useTabList.ts"],"sourcesContent":["\"use client\";\n\nimport type {\n  CSSProperties,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  Ref,\n  RefObject,\n} from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport type {\n  KeyboardMovementContext,\n  KeyboardMovementProps,\n} from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\nimport {\n  type TabListActivationMode,\n  type TabListScrollButtonsBehavior,\n} from \"./types.js\";\nimport { getTabRoleOnly, scrollTabIntoView } from \"./utils.js\";\n\nconst TAB_SIZE_VAR = \"--rmd-tab-size\";\nconst TAB_OFFSET_VAR = \"--rmd-tab-offset\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nexport type TabWidthVar = typeof TAB_SIZE_VAR;\nexport type TabOffsetVar = typeof TAB_OFFSET_VAR;\n\nexport type IndicatorCSSProperties = CSSProperties &\n  Record<TabWidthVar | TabOffsetVar, string>;\n\nexport interface TabListHookOptions {\n  ref: Ref<HTMLDivElement> | undefined;\n  style: CSSProperties | undefined;\n  activeIndex: number;\n  setActiveIndex: (nextActiveIndex: number) => void;\n  scrollButtons: TabListScrollButtonsBehavior;\n  activationMode: TabListActivationMode;\n  vertical: boolean;\n  onClick: MouseEventHandler<HTMLDivElement> | undefined;\n  onFocus: FocusEventHandler<HTMLDivElement> | undefined;\n  onKeyDown: KeyboardEventHandler<HTMLDivElement> | undefined;\n  disableTransition: boolean;\n}\n\nexport interface TabListHookReturnValue {\n  elementProps: KeyboardMovementProps<HTMLDivElement> & {\n    \"aria-orientation\": \"horizontal\" | \"vertical\";\n    style: CSSProperties;\n    ref: Ref<HTMLDivElement>;\n    onClick: MouseEventHandler<HTMLDivElement>;\n  };\n  movementContext: KeyboardMovementContext;\n  backwardProps: {\n    ref: RefObject<HTMLDivElement>;\n    type: \"back\";\n    vertical: boolean;\n    disableTransition?: boolean;\n  };\n  forwardProps: {\n    ref: RefObject<HTMLDivElement>;\n    type: \"forward\";\n    vertical: boolean;\n    disableTransition?: boolean;\n  };\n  showScrollButtons: boolean;\n}\n\n/**\n * @internal\n */\nexport function useTabList(\n  options: TabListHookOptions\n): TabListHookReturnValue {\n  const {\n    ref: propRef,\n    style,\n    activeIndex,\n    scrollButtons,\n    onClick = noop,\n    onFocus,\n    onKeyDown,\n    activationMode,\n    vertical,\n    setActiveIndex,\n    disableTransition,\n  } = options;\n\n  const isRTL = useDir().dir === \"rtl\";\n  const { isPhone } = useAppSize();\n  const isScrollObserverEnabled =\n    scrollButtons === \"auto\" ||\n    (scrollButtons === \"auto-tablet-or-above\" && !isPhone);\n  const [autoScrollButtons, setAutoScrollButtons] = useState(false);\n  const showScrollButtons =\n    scrollButtons === true ||\n    (scrollButtons === \"tablet-or-above\" && !isPhone) ||\n    (isScrollObserverEnabled && autoScrollButtons);\n\n  const [indicatorStyles, setIndicatorStyles] =\n    useState<IndicatorCSSProperties>(() => {\n      const tabWidth = `${100 / 3}%`;\n      return {\n        [TAB_SIZE_VAR]: tabWidth,\n        [TAB_OFFSET_VAR]: \"0px\",\n      };\n    });\n\n  const [nodeRef, ref] = useEnsuredRef(propRef);\n  const tabListRef = useResizeObserver({\n    ref,\n    disabled: disableTransition && !isScrollObserverEnabled,\n    disableHeight: disableTransition && !isScrollObserverEnabled && !vertical,\n    disableWidth: disableTransition && !isScrollObserverEnabled && vertical,\n    onUpdate: useCallback(\n      (entry) => {\n        // this is kind of hacky -- the styles should update when switching\n        // between RTL or when the scroll buttons appear, but they aren't\n        // required for any styles. Just reference them so that the hooks\n        // eslint rule doesn't show a warning...\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n        isRTL;\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n        showScrollButtons;\n\n        if (isScrollObserverEnabled && nodeRef.current) {\n          setAutoScrollButtons(\n            nodeRef.current.scrollWidth > nodeRef.current.offsetWidth\n          );\n        }\n\n        const activeTab = getTabRoleOnly(entry.target)[activeIndex];\n        if (!activeTab || disableTransition) {\n          return;\n        }\n\n        const size = vertical ? activeTab.offsetHeight : activeTab.offsetWidth;\n        const offset = vertical ? activeTab.offsetTop : activeTab.offsetLeft;\n        const cssVars: IndicatorCSSProperties = {\n          [TAB_SIZE_VAR]: `${size}px`,\n          [TAB_OFFSET_VAR]: `${offset}px`,\n        };\n\n        setIndicatorStyles((prevStyles) => {\n          if (\n            prevStyles &&\n            prevStyles[TAB_SIZE_VAR] === cssVars[TAB_SIZE_VAR] &&\n            prevStyles[TAB_OFFSET_VAR] === cssVars[TAB_OFFSET_VAR]\n          ) {\n            return prevStyles;\n          }\n\n          return cssVars;\n        });\n      },\n      [\n        activeIndex,\n        disableTransition,\n        isRTL,\n        isScrollObserverEnabled,\n        nodeRef,\n        showScrollButtons,\n        vertical,\n      ]\n    ),\n  });\n  const forwardRef = useRef<HTMLDivElement>(null);\n  const backwardRef = useRef<HTMLDivElement>(null);\n  const { movementProps, movementContext } = useKeyboardMovementProvider({\n    onClick(event) {\n      onClick(event);\n      if (event.isPropagationStopped() || !(event.target instanceof Element)) {\n        return;\n      }\n\n      const clickedTab = event.target.closest(\"[role='tab']\");\n      const tabs = getTabRoleOnly(event.currentTarget);\n      const i = tabs.findIndex((tab) => tab === clickedTab);\n      if (i !== -1) {\n        setActiveIndex(i);\n      }\n    },\n    onFocus,\n    onKeyDown,\n    onFocusChange(event) {\n      const { index } = event;\n      if (activationMode === \"automatic\") {\n        setActiveIndex(index);\n      } else if (scrollButtons) {\n        scrollTabIntoView({\n          activeIndex: index,\n          backward: backwardRef.current,\n          container: nodeRef.current,\n          forward: forwardRef.current,\n          vertical,\n        });\n      }\n    },\n    loopable: true,\n    searchable: true,\n    horizontal: !vertical,\n    includeDisabled: true,\n    tabIndexBehavior: \"roving\",\n    getFocusableElements: getTabRoleOnly,\n  });\n\n  useEffect(() => {\n    scrollTabIntoView({\n      activeIndex,\n      backward: backwardRef.current,\n      container: nodeRef.current,\n      forward: forwardRef.current,\n      vertical,\n    });\n  }, [activeIndex, nodeRef, vertical]);\n\n  return {\n    elementProps: {\n      \"aria-orientation\": vertical ? \"vertical\" : \"horizontal\",\n      ref: tabListRef,\n      style: {\n        ...style,\n        ...(disableTransition ? undefined : indicatorStyles),\n      },\n      ...movementProps,\n    },\n    backwardProps: {\n      ref: backwardRef,\n      type: \"back\",\n      vertical,\n      disableTransition,\n    },\n    forwardProps: {\n      ref: forwardRef,\n      type: \"forward\",\n      vertical,\n      disableTransition,\n    },\n    movementContext,\n    showScrollButtons,\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useAppSize","useKeyboardMovementProvider","useDir","useEnsuredRef","useResizeObserver","getTabRoleOnly","scrollTabIntoView","TAB_SIZE_VAR","TAB_OFFSET_VAR","noop","useTabList","options","ref","propRef","style","activeIndex","scrollButtons","onClick","onFocus","onKeyDown","activationMode","vertical","setActiveIndex","disableTransition","isRTL","dir","isPhone","isScrollObserverEnabled","autoScrollButtons","setAutoScrollButtons","showScrollButtons","indicatorStyles","setIndicatorStyles","tabWidth","nodeRef","tabListRef","disabled","disableHeight","disableWidth","onUpdate","entry","current","scrollWidth","offsetWidth","activeTab","target","size","offsetHeight","offset","offsetTop","offsetLeft","cssVars","prevStyles","forwardRef","backwardRef","movementProps","movementContext","event","isPropagationStopped","Element","clickedTab","closest","tabs","currentTarget","i","findIndex","tab","onFocusChange","index","backward","container","forward","loopable","searchable","horizontal","includeDisabled","tabIndexBehavior","getFocusableElements","elementProps","undefined","backwardProps","type","forwardProps"],"mappings":"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"}

package/dist/tabs/useTabs.d.ts

@@ -107,13 +107,19 @@ export interface TabsImplementation<TabValue extends string | number = number> {
     getTabProps: (tabValue: TabValue) => ProvidedTabProps;
     getTabListProps: () => ProvidedTabListProps;
     getTabPanelProps: (tabValue: TabValue) => ProvidedTabPanelProps;
-    getTabPanelsProps: <E extends HTMLElement>() => ProvidedTabPanelsProps<E>;
+    getTabPanelsProps: <E extends HTMLElement>(ref?: Ref<E>) => ProvidedTabPanelsProps<E>;
 }
 /**
  * @example Super Simple
  * ```tsx
- * import { TabList, Tab, SlideContainer, Slide, useTabs } from "@react-md/core";
- * import type { ReactElement } from "react";
+ * "use client";
+ *
+ * import { Tab } from "@react-md/core/tabs/Tab";
+ * import { TabList } from "@react-md/core/tabs/TabList";
+ * 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 { type ReactElement } from "react";
  *
  * function Example(): ReactElement {
  *   const {
@@ -156,9 +162,14 @@ export declare function useTabs(): TabsImplementation & {
  *
  * @example Controlled
  * ```tsx
- * import { TabList, Tab, SlideContainer, Slide, useTabs } from "@react-md/core";
- * import type { ReactElement } from "react";
- * import { useState } from "react";
+ * "use client";
+ *
+ * import { Tab } from "@react-md/core/tabs/Tab";
+ * import { TabList } from "@react-md/core/tabs/TabList";
+ * 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 { type ReactElement, useState } from "react";
  *
  * function Example(): ReactElement {
  *   const [activeTab, setActiveTab] = useState(1);
@@ -218,8 +229,14 @@ export declare function useTabs<TabValue extends number>(options: TabsHookOption
  *
  * @example String Value Simple
  * ```tsx
- * import { TabList, Tab, SlideContainer, Slide, useTabs } from "@react-md/core";
- * import type { ReactElement } from "react";
+ * "use client";
+ *
+ * import { Tab } from "@react-md/core/tabs/Tab";
+ * import { TabList } from "@react-md/core/tabs/TabList";
+ * 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 { type ReactElement } from "react";
  *
  * const tabs = ["value-1", "value-2", "value-3"];
  *
@@ -269,8 +286,12 @@ export declare function useTabs<TabValue extends string>(options: TabsHookOption
  *
  * @example String Controlled Simple
  * ```tsx
- * import { TabList, Tab, SlideContainer, Slide, useTabs } from "@react-md/core";
- * import type { ReactElement } from "react";
+ * import { Tab } from "@react-md/core/tabs/Tab";
+ * import { TabList } from "@react-md/core/tabs/TabList";
+ * 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 { type ReactElement } from "react";
  *
  * const tabs = ["value-1", "value-2", "value-3"] as const;
  *
@@ -310,63 +331,27 @@ export declare function useTabs<TabValue extends string>(options: TabsHookOption
  * @example Navigation Tabs
  * ```tsx
  * "use client";
- * import {
- *   RippleContainer,
- *   Tab,
- *   TabList,
- *   useElementInteraction,
- *   useEnsuredId,
- *   useHigherContrastChildren,
- *   useKeyboardMovementContext,
- *   useTabs,
- * } from "@react-md/core";
- * import type { LinkProps } from "next/link";
- * import Link from "next/link";
- * import type { PropsWithChildren, ReactElement } from "react";
- * import { usePathname } from "next/navigation";
- *
- * interface TabLinkProps extends LinkProps {
- *   active: boolean;
- * }
- *
- * function TabLink(props: LinkProps): ReactElement {
- *   const {
- *     id: propId,
- *     children: propChildren,
- *     active,
- *     className,
- *     ...remaining,
- *   } = props;
- *
- *   const id = useEnsuredId(propId, "tab");
- *   const { activeDescendantId } = useKeyboardMovementContext();
- *   const { handlers, ripples } = useElementInteraction(props);
- *   const children = useHigherContrastChildren(propChildren);
  *
- *   return (
- *     <Link
- *       {...props}
- *       {...handlers}
- *       id={id}
- *       aria-selected={active}
- *       role="tab"
- *       tabIndex={id === activeDescendantId ? 0 : -1}
- *       className={tab({
- *         className,
- *         active,
- *         // stacked,
- *         // reversed,
- *       })}
- *     >
- *       {children}
- *       {ripples}
- *     </Link>
- *   );
- * }
+ * import { Tab } from "@react-md/core/tabs/Tab";
+ * import { TabList } from "@react-md/core/tabs/TabList";
+ * import { useTabs } from "@react-md/core/tabs/useTabs";
+ * import Link from "next/link.js";
+ * import { usePathname } from "next/navigation.js";
+ * import {
+ *   type AnchorHTMLAttributes,
+ *   type ReactElement,
+ *   forwardRef,
+ *   useEffect,
+ *   useState,
+ * } from "react";
  *
- * const noop = (): void => {
- *  // do nothing
- * };
+ * // this just fixes the `href` type definition causing errors
+ * const SimpleLink = forwardRef<
+ *   HTMLAnchorElement,
+ *   AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }
+ * >(function SimpleLink(props, ref) {
+ *   return <Link {...props} ref={ref} />;
+ * });
  *
  * const PATHNAME_TABS = ["/", "/page-1", "/page-2"];
  *
@@ -381,9 +366,9 @@ export declare function useTabs<TabValue extends string>(options: TabsHookOption
  *   return (
  *     <>
  *       <TabList {...getTabListProps()}>
- *         <TabLink {...getTabProps("/")} href="/">Home</TabLink>
- *         <TabLink {...getTabProps("/page-1")} href="/page-1">Page 1</TabLink>
- *         <TabLink {...getTabProps("/page-2")} href="/page-2">Page 2</TabLink>
+ *         <Tab {...getTabProps("/")} href="/" as={SimpleLink}>Home</Tab>
+ *         <Tab {...getTabProps("/page-1")} href="/page-1" as={SimpleLink}>Page 1</Tab>
+ *         <Tab {...getTabProps("/page-2")} href="/page-2" as={SimpleLink}>Page 2</Tab>
  *       </TabList>
  *       <main>{children}</main>
  *     </>

package/dist/tabs/useTabs.js

@@ -2,6 +2,7 @@
 import { useEffect, useRef, useState } from "react";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useEnsuredState } from "../useEnsuredState.js";
+import { applyRef } from "../utils/applyRef.js";
 const EMPTY_LIST = [];
 const PANEL_PREFIX = "panel-";
 /**
@@ -71,9 +72,12 @@ const PANEL_PREFIX = "panel-";
                 active: tabValue === activeTab
             };
         },
-        getTabPanelsProps () {
+        getTabPanelsProps (ref) {
             return {
-                ref: tabPanelsRef,
+                ref: (instance)=>{
+                    applyRef(instance, ref);
+                    applyRef(instance, tabPanelsRef);
+                },
                 direction
             };
         }