@react-md/core 1.0.0-next.2 → 1.0.0-next.21

package/dist/tabs/useTabs.d.ts

@@ -1,8 +1,8 @@
-import type { Dispatch, Ref } from "react";
-import type { SlideDirection } from "../transition/SlideContainer.js";
-import type { UseStateInitializer, UseStateSetter } from "../types.js";
+import { type Dispatch, type Ref } from "react";
+import { type SlideDirection } from "../transition/SlideContainer.js";
+import { type UseStateInitializer, type UseStateSetter } from "../types.js";
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface TabsHookOptions<TabValue extends string | number = number> {
     /**
@@ -12,14 +12,6 @@ export interface TabsHookOptions<TabValue extends string | number = number> {
      * @defaultValue `"tab-" + useId()`
      */
     baseId?: string;
-    /**
-     * Set this to `true` if changing active tabs should no longer attempt to
-     * scroll to the top of the tab panels container when using the
-     * {@link TabsImplementation.getTabPanelsProps}.
-     *
-     * @defaultValue `false`
-     */
-    disableScrollFix?: boolean;
     /**
      * Set this to an **ordered** list of tab values when:
      * - using a `string` tab value
@@ -42,24 +34,54 @@ export interface TabsHookOptions<TabValue extends string | number = number> {
      * @defaultValue `0`
      */
     defaultActiveTab?: UseStateInitializer<TabValue>;
+    /** Convenience pass-through prop to {@link TabProps.stacked} */
+    stacked?: boolean;
+    /** Convenience pass-through prop to {@link TabProps.iconAfter} */
+    iconAfter?: boolean;
+    /** Convenience pass-through props to {@link TabListProps.vertical} */
+    vertical?: boolean;
+    /**
+     * Set this to `true` if changing active tabs should no longer attempt to
+     * scroll to the top of the tab panels container when using the
+     * {@link TabsImplementation.getTabPanelsProps}.
+     *
+     * @defaultValue `false`
+     */
+    disableScrollFix?: boolean;
+    /**
+     * Convenience prop to disable all transitions for the
+     * {@link TabsImplementation.getTabProps} and
+     * {@link TabsImplementation.getTabListProps}.
+     */
+    disableTransition?: boolean;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ProvidedTabProps {
     "aria-controls": string;
     id: string;
     active: boolean;
+    /** Convenience pass-through prop from {@link TabsHookOptions.stacked} */
+    stacked?: boolean;
+    /** Convenience pass-through prop from {@link TabsHookOptions.iconAfter} */
+    iconAfter?: boolean;
+    /** Convenience pass-through prop from {@link TabsHookOptions.disableTransition} */
+    activeIndicator?: boolean;
+    /** Convenience pass-through prop from {@link TabsHookOptions.vertical} and {@link TabsHookOptions.disableTransition} */
+    verticalActiveIndicator?: boolean;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ProvidedTabListProps {
     activeIndex: number;
     setActiveIndex: Dispatch<number>;
+    vertical?: boolean;
+    disableTransition?: boolean;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ProvidedTabPanelProps {
     "aria-labelledby": string;
@@ -68,31 +90,36 @@ export interface ProvidedTabPanelProps {
     active: boolean;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface ProvidedTabPanelsProps<E extends HTMLElement> {
     ref: Ref<E>;
     direction: SlideDirection;
 }
 /**
- * @remarks \@since 6.0.0
+ * @since 6.0.0
  */
 export interface TabsImplementation<TabValue extends string | number = number> {
     direction: SlideDirection;
     setDirection: UseStateSetter<SlideDirection>;
     activeTab?: TabValue;
-    setActiveTab?(nextActiveTab: TabValue): void;
-    getTabProps(tabValue: TabValue): ProvidedTabProps;
-    getTabListProps(): ProvidedTabListProps;
-    getTabPanelProps(tabValue: TabValue): ProvidedTabPanelProps;
-    getTabPanelsProps<E extends HTMLElement>(): ProvidedTabPanelsProps<E>;
+    setActiveTab?: (nextActiveTab: TabValue) => void;
+    getTabProps: (tabValue: TabValue) => ProvidedTabProps;
+    getTabListProps: () => ProvidedTabListProps;
+    getTabPanelProps: (tabValue: TabValue) => ProvidedTabPanelProps;
+    getTabPanelsProps: <E extends HTMLElement>(ref?: Ref<E>) => ProvidedTabPanelsProps<E>;
 }
 /**
- * @example
- * Super Simple
+ * @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 {
@@ -123,9 +150,10 @@ export interface TabsImplementation<TabValue extends string | number = number> {
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
+ * @since 6.0.0
  */
-export declare function useTabs(): TabsImplementation<number> & {
+export declare function useTabs(): TabsImplementation & {
     activeTab: number;
     setActiveTab: number;
 };
@@ -133,12 +161,16 @@ export declare function useTabs(): TabsImplementation<number> & {
  * The tab behavior can be controlled by providing the `activeTab` and
  * `setActiveTab` options.
  *
- * @example
- * Controlled
+ * @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);
@@ -172,7 +204,8 @@ export declare function useTabs(): TabsImplementation<number> & {
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
+ * @since 6.0.0
  */
 export declare function useTabs<TabValue extends number>(options: TabsHookOptions<TabValue> & {
     tabs?: readonly TabValue[];
@@ -196,11 +229,16 @@ export declare function useTabs<TabValue extends number>(options: TabsHookOption
  * When using string values, the {@link TabsHookOptions.tabs} option **must** be
  * provided to determine the correct active tab index.
  *
- * @example
- * String Value Simple
+ * @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"];
  *
@@ -233,7 +271,8 @@ export declare function useTabs<TabValue extends number>(options: TabsHookOption
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
+ * @since 6.0.0
  */
 export declare function useTabs<TabValue extends string>(options: TabsHookOptions<TabValue> & {
     tabs: readonly TabValue[];
@@ -248,11 +287,14 @@ export declare function useTabs<TabValue extends string>(options: TabsHookOption
  * When using string values, the {@link TabsHookOptions.tabs} option **must** be
  * provided to determine the correct active tab index.
  *
- * @example
- * String Controlled Simple
+ * @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;
  *
@@ -289,67 +331,30 @@ export declare function useTabs<TabValue extends string>(options: TabsHookOption
  * }
  * ```
  *
- * @example
- * Navigation Tabs
+ * @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"];
  *
@@ -364,9 +369,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>
  *     </>
@@ -374,7 +379,8 @@ export declare function useTabs<TabValue extends string>(options: TabsHookOption
  * }
  * ```
  *
- * @remarks \@since 6.0.0
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
+ * @since 6.0.0
  */
 export declare function useTabs<TabValue extends string>(options: TabsHookOptions<TabValue> & {
     tabs: readonly TabValue[];

package/dist/tabs/useTabs.js

@@ -2,17 +2,19 @@
 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-";
 /**
  * This hook can be uncontrolled/controlled and supports strongly typing the tab
  * values if needed. Check out the overloads for examples.
  *
- * @remarks \@since 6.0.0
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
+ * @since 6.0.0
  */ export function useTabs(options = {}) {
-    const { baseId: propBaseId, disableScrollFix, tabs = EMPTY_LIST, activeTab: propActiveTab, setActiveTab: propSetActiveTab, defaultActiveTab } = options;
+    const { baseId: propBaseId, tabs = EMPTY_LIST, stacked, vertical, iconAfter, activeTab: propActiveTab, setActiveTab: propSetActiveTab, defaultActiveTab, disableScrollFix, disableTransition } = options;
     const baseId = useEnsuredId(propBaseId, "tab");
-    const [direction, setDirection] = useState("left");
+    const [direction, setDirection] = useState("forward");
     const [activeTab, setActiveTab] = useEnsuredState({
         value: propActiveTab,
         setValue: propSetActiveTab,
@@ -41,20 +43,26 @@ const PANEL_PREFIX = "panel-";
             return {
                 "aria-controls": getTabId(tabValue, PANEL_PREFIX),
                 id: getTabId(tabValue),
-                active: tabValue === activeTab
+                active: tabValue === activeTab,
+                stacked,
+                iconAfter,
+                activeIndicator: disableTransition,
+                verticalActiveIndicator: vertical && disableTransition
             };
         },
         getTabListProps () {
             return {
                 activeIndex,
                 setActiveIndex: (nextActiveIndex)=>{
-                    setDirection(activeIndex < nextActiveIndex ? "left" : "right");
+                    setDirection(activeIndex < nextActiveIndex ? "forward" : "backward");
                     if (typeof activeTab === "string" || tabs.length > 0) {
                         setActiveTab(tabs[nextActiveIndex]);
                     } else {
                         setActiveTab(nextActiveIndex);
                     }
-                }
+                },
+                vertical,
+                disableTransition
             };
         },
         getTabPanelProps (tabValue) {
@@ -65,9 +73,12 @@ const PANEL_PREFIX = "panel-";
                 active: tabValue === activeTab
             };
         },
-        getTabPanelsProps () {
+        getTabPanelsProps (ref) {
             return {
-                ref: tabPanelsRef,
+                ref: (instance)=>{
+                    applyRef(instance, ref);
+                    applyRef(instance, tabPanelsRef);
+                },
                 direction
             };
         }

package/dist/tabs/useTabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/useTabs.ts"],"sourcesContent":["\"use client\";\nimport type { Dispatch, Ref, RefObject } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { SlideDirection } from \"../transition/SlideContainer.js\";\nimport type { UseStateInitializer, UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\n\nconst EMPTY_LIST = [] as const;\nconst PANEL_PREFIX = \"panel-\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TabsHookOptions<TabValue extends string | number = number> {\n  /**\n   * This can be used to generate the ids for the different components within\n   * the tab widget.\n   *\n   * @defaultValue `\"tab-\" + useId()`\n   */\n  baseId?: string;\n\n  /**\n   * Set this to `true` if changing active tabs should no longer attempt to\n   * scroll to the top of the tab panels container when using the\n   * {@link TabsImplementation.getTabPanelsProps}.\n   *\n   * @defaultValue `false`\n   */\n  disableScrollFix?: boolean;\n\n  /**\n   * Set this to an **ordered** list of tab values when:\n   * - using a `string` tab value\n   * - using a `number` tab value does not represent a tab index\n   *\n   * See the examples on the {@link useTabs} for usage.\n   */\n  tabs?: readonly TabValue[];\n\n  /**\n   * Provide this value and {@link setActiveTab} to control the active tab\n   * behavior.\n   */\n  activeTab?: TabValue;\n\n  /** @see {@link activeTab} */\n  setActiveTab?: Dispatch<TabValue>;\n\n  /**\n   * Set this to the default tab index when not controlling the active tab value\n   * through {@link activeTab} and {@link setActiveTab}.\n   *\n   * @defaultValue `0`\n   */\n  defaultActiveTab?: UseStateInitializer<TabValue>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ProvidedTabProps {\n  \"aria-controls\": string;\n  id: string;\n  active: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ProvidedTabListProps {\n  activeIndex: number;\n  setActiveIndex: Dispatch<number>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ProvidedTabPanelProps {\n  \"aria-labelledby\": string;\n  id: string;\n  role: \"tabpanel\";\n  active: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ProvidedTabPanelsProps<E extends HTMLElement> {\n  ref: Ref<E>;\n  direction: SlideDirection;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TabsImplementation<TabValue extends string | number = number> {\n  direction: SlideDirection;\n  setDirection: UseStateSetter<SlideDirection>;\n  activeTab?: TabValue;\n  setActiveTab?(nextActiveTab: TabValue): void;\n  getTabProps(tabValue: TabValue): ProvidedTabProps;\n  getTabListProps(): ProvidedTabListProps;\n  getTabPanelProps(tabValue: TabValue): ProvidedTabPanelProps;\n  getTabPanelsProps<E extends HTMLElement>(): ProvidedTabPanelsProps<E>;\n}\n\n/**\n * @example\n * Super Simple\n * ```tsx\n * import { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const {\n *     activeTab,\n *     setActiveTab,\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs();\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 {...getTabPanelsProps()}>\n *         <Slide {...getTabPanelProps(0)}>Tab 1 Content</Slide>\n *         <Slide {...getTabPanelProps(1)}>Tab 2 Content</Slide>\n *         <Slide {...getTabPanelProps(2)}>Tab 3 Content</Slide>\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useTabs(): TabsImplementation<number> & {\n  activeTab: number;\n  setActiveTab: number;\n};\n/**\n * The tab behavior can be controlled by providing the `activeTab` and\n * `setActiveTab` options.\n *\n * @example\n * Controlled\n * ```tsx\n * import { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [activeTab, setActiveTab] = useState(1);\n *\n *   const {\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs({\n *     activeTab,\n *     setActiveTab,\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 {...getTabPanelsProps()}>\n *         <Slide {...getTabPanelProps(0)}>Tab 1 Content</Slide>\n *         <Slide {...getTabPanelProps(1)}>Tab 2 Content</Slide>\n *         <Slide {...getTabPanelProps(2)}>Tab 3 Content</Slide>\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useTabs<TabValue extends number>(\n  options: TabsHookOptions<TabValue> & {\n    tabs?: readonly TabValue[];\n    activeTab: TabValue;\n    setActiveTab: Dispatch<TabValue>;\n    defaultActiveTab?: never;\n  }\n): TabsImplementation<TabValue> & { activeTab?: never; setActiveTab?: never };\nexport function useTabs<TabValue extends number>(\n  options: TabsHookOptions<TabValue> & {\n    tabs?: readonly TabValue[];\n    activeTab?: never;\n    setActiveTab?: never;\n    defaultActiveTab?: UseStateInitializer<TabValue>;\n  }\n): TabsImplementation<TabValue> & {\n  activeTab: TabValue;\n  setActiveTab: Dispatch<TabValue>;\n};\n/**\n * When using string values, the {@link TabsHookOptions.tabs} option **must** be\n * provided to determine the correct active tab index.\n *\n * @example\n * String Value Simple\n * ```tsx\n * import { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * const tabs = [\"value-1\", \"value-2\", \"value-3\"];\n *\n * function Example(): ReactElement {\n *   const {\n *     activeTab,\n *     setActiveTab,\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs({ tabs });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         {tabs.map((value) => (\n *           <Tab key={value} {...getTabProps(value)}>{value}</Tab>\n *         ))}\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *        {tabs.map((value) => (\n *          <Slide key={value}>{value} Content</Slide>\n *        ))}\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useTabs<TabValue extends string>(\n  options: TabsHookOptions<TabValue> & {\n    tabs: readonly TabValue[];\n    activeTab?: never;\n    setActiveTab?: never;\n    defaultActiveTab?: UseStateInitializer<TabValue>;\n  }\n): TabsImplementation<TabValue> & {\n  activeTab: TabValue;\n  setActiveTab: Dispatch<TabValue>;\n};\n/**\n * When using string values, the {@link TabsHookOptions.tabs} option **must** be\n * provided to determine the correct active tab index.\n *\n * @example\n * String Controlled Simple\n * ```tsx\n * import { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * const tabs = [\"value-1\", \"value-2\", \"value-3\"] as const;\n *\n * function Example(): ReactElement {\n *   const [activeTab, setActiveTab] = useState(tabs[0]);\n *\n *   const {\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs({\n *     tabs,\n *     activeTab,\n *     setActiveTab,\n *   });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         {tabs.map((value) => (\n *           <Tab key={value} {...getTabProps(value)}>{value}</Tab>\n *         ))}\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *        {tabs.map((value) => (\n *          <Slide key={value}>{value} Content</Slide>\n *        ))}\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @example\n * Navigation Tabs\n * ```tsx\n * \"use client\";\n * import {\n *   RippleContainer,\n *   Tab,\n *   TabList,\n *   useElementInteraction,\n *   useEnsuredId,\n *   useHigherContrastChildren,\n *   useKeyboardMovementContext,\n *   useTabs,\n * } from \"@react-md/core\";\n * import type { LinkProps } from \"next/link\";\n * import Link from \"next/link\";\n * import type { PropsWithChildren, ReactElement } from \"react\";\n * import { usePathname } from \"next/navigation\";\n *\n * interface TabLinkProps extends LinkProps {\n *   active: boolean;\n * }\n *\n * function TabLink(props: LinkProps): ReactElement {\n *   const {\n *     id: propId,\n *     children: propChildren,\n *     active,\n *     className,\n *     ...remaining,\n *   } = props;\n *\n *   const id = useEnsuredId(propId, \"tab\");\n *   const { activeDescendantId } = useKeyboardMovementContext();\n *   const { handlers, ripples } = useElementInteraction(props);\n *   const children = useHigherContrastChildren(propChildren);\n *\n *   return (\n *     <Link\n *       {...props}\n *       {...handlers}\n *       id={id}\n *       aria-selected={active}\n *       role=\"tab\"\n *       tabIndex={id === activeDescendantId ? 0 : -1}\n *       className={tab({\n *         className,\n *         active,\n *         // stacked,\n *         // reversed,\n *       })}\n *     >\n *       {children}\n *       {ripples}\n *     </Link>\n *   );\n * }\n *\n * const noop = (): void => {\n *  // do nothing\n * };\n *\n * const PATHNAME_TABS = [\"/\", \"/page-1\", \"/page-2\"];\n *\n * function Layout({ children }: PropsWithChildren) {\n *   const pathname = usePathname();\n *   const { getTabListProps, getTabProps } = useTabs({\n *     tabs: PATHNAME_TABS,\n *     activeTab: pathname,\n *     setActiveTab: noop,\n *   });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         <TabLink {...getTabProps(\"/\")} href=\"/\">Home</TabLink>\n *         <TabLink {...getTabProps(\"/page-1\")} href=\"/page-1\">Page 1</TabLink>\n *         <TabLink {...getTabProps(\"/page-2\")} href=\"/page-2\">Page 2</TabLink>\n *       </TabList>\n *       <main>{children}</main>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useTabs<TabValue extends string>(\n  options: TabsHookOptions<TabValue> & {\n    tabs: readonly TabValue[];\n    activeTab: TabValue;\n    setActiveTab: Dispatch<TabValue>;\n    defaultActiveTab?: never;\n  }\n): TabsImplementation<TabValue> & { activeTab?: never; setActiveTab?: never };\n/**\n * This hook can be uncontrolled/controlled and supports strongly typing the tab\n * values if needed. Check out the overloads for examples.\n *\n * @remarks \\@since 6.0.0\n */\nexport function useTabs<TabValue extends string | number>(\n  options: TabsHookOptions<TabValue> = {}\n): TabsImplementation<TabValue> {\n  const {\n    baseId: propBaseId,\n    disableScrollFix,\n    tabs = EMPTY_LIST,\n    activeTab: propActiveTab,\n    setActiveTab: propSetActiveTab,\n    defaultActiveTab,\n  } = options;\n\n  const baseId = useEnsuredId(propBaseId, \"tab\");\n  const [direction, setDirection] = useState<SlideDirection>(\"left\");\n\n  const [activeTab, setActiveTab] = useEnsuredState({\n    value: propActiveTab,\n    setValue: propSetActiveTab,\n    defaultValue: defaultActiveTab ?? (0 as TabValue),\n  });\n\n  const getTabIndex = (tabValue: TabValue): number =>\n    typeof tabValue === \"string\" || tabs.length > 0\n      ? tabs.indexOf(tabValue)\n      : tabValue;\n  const getTabId = (tabValue: TabValue, prefix = \"\"): string =>\n    `${baseId}-${prefix}${getTabIndex(tabValue) + 1}`;\n\n  const activeIndex = getTabIndex(activeTab);\n  const tabPanelsRef = useRef<HTMLElement>(null);\n  useEffect(() => {\n    const container = tabPanelsRef.current;\n    if (!container || disableScrollFix) {\n      return;\n    }\n\n    container.scrollTop = 0;\n  }, [disableScrollFix, activeTab]);\n\n  return {\n    activeTab,\n    setActiveTab,\n    direction,\n    setDirection,\n    getTabProps(tabValue) {\n      return {\n        \"aria-controls\": getTabId(tabValue, PANEL_PREFIX),\n        id: getTabId(tabValue),\n        active: tabValue === activeTab,\n      };\n    },\n    getTabListProps() {\n      return {\n        activeIndex,\n        setActiveIndex: (nextActiveIndex) => {\n          setDirection(activeIndex < nextActiveIndex ? \"left\" : \"right\");\n          if (typeof activeTab === \"string\" || tabs.length > 0) {\n            setActiveTab(tabs[nextActiveIndex]);\n          } else {\n            setActiveTab(nextActiveIndex as TabValue);\n          }\n        },\n      };\n    },\n    getTabPanelProps(tabValue) {\n      return {\n        \"aria-labelledby\": getTabId(tabValue),\n        id: getTabId(tabValue, PANEL_PREFIX),\n        role: \"tabpanel\",\n        active: tabValue === activeTab,\n      };\n    },\n    getTabPanelsProps<E>() {\n      return {\n        ref: tabPanelsRef as RefObject<E>,\n        direction,\n      };\n    },\n  };\n}\n"],"names":["useEffect","useRef","useState","useEnsuredId","useEnsuredState","EMPTY_LIST","PANEL_PREFIX","useTabs","options","baseId","propBaseId","disableScrollFix","tabs","activeTab","propActiveTab","setActiveTab","propSetActiveTab","defaultActiveTab","direction","setDirection","value","setValue","defaultValue","getTabIndex","tabValue","length","indexOf","getTabId","prefix","activeIndex","tabPanelsRef","container","current","scrollTop","getTabProps","id","active","getTabListProps","setActiveIndex","nextActiveIndex","getTabPanelProps","role","getTabPanelsProps","ref"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAGpD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,eAAe,QAAQ,wBAAwB;AAExD,MAAMC,aAAa,EAAE;AACrB,MAAMC,eAAe;AA+YrB;;;;;CAKC,GACD,OAAO,SAASC,QACdC,UAAqC,CAAC,CAAC;IAEvC,MAAM,EACJC,QAAQC,UAAU,EAClBC,gBAAgB,EAChBC,OAAOP,UAAU,EACjBQ,WAAWC,aAAa,EACxBC,cAAcC,gBAAgB,EAC9BC,gBAAgB,EACjB,GAAGT;IAEJ,MAAMC,SAASN,aAAaO,YAAY;IACxC,MAAM,CAACQ,WAAWC,aAAa,GAAGjB,SAAyB;IAE3D,MAAM,CAACW,WAAWE,aAAa,GAAGX,gBAAgB;QAChDgB,OAAON;QACPO,UAAUL;QACVM,cAAcL,oBAAqB;IACrC;IAEA,MAAMM,cAAc,CAACC,WACnB,OAAOA,aAAa,YAAYZ,KAAKa,MAAM,GAAG,IAC1Cb,KAAKc,OAAO,CAACF,YACbA;IACN,MAAMG,WAAW,CAACH,UAAoBI,SAAS,EAAE,GAC/C,CAAC,EAAEnB,OAAO,CAAC,EAAEmB,OAAO,EAAEL,YAAYC,YAAY,EAAE,CAAC;IAEnD,MAAMK,cAAcN,YAAYV;IAChC,MAAMiB,eAAe7B,OAAoB;IACzCD,UAAU;QACR,MAAM+B,YAAYD,aAAaE,OAAO;QACtC,IAAI,CAACD,aAAapB,kBAAkB;YAClC;QACF;QAEAoB,UAAUE,SAAS,GAAG;IACxB,GAAG;QAACtB;QAAkBE;KAAU;IAEhC,OAAO;QACLA;QACAE;QACAG;QACAC;QACAe,aAAYV,QAAQ;YAClB,OAAO;gBACL,iBAAiBG,SAASH,UAAUlB;gBACpC6B,IAAIR,SAASH;gBACbY,QAAQZ,aAAaX;YACvB;QACF;QACAwB;YACE,OAAO;gBACLR;gBACAS,gBAAgB,CAACC;oBACfpB,aAAaU,cAAcU,kBAAkB,SAAS;oBACtD,IAAI,OAAO1B,cAAc,YAAYD,KAAKa,MAAM,GAAG,GAAG;wBACpDV,aAAaH,IAAI,CAAC2B,gBAAgB;oBACpC,OAAO;wBACLxB,aAAawB;oBACf;gBACF;YACF;QACF;QACAC,kBAAiBhB,QAAQ;YACvB,OAAO;gBACL,mBAAmBG,SAASH;gBAC5BW,IAAIR,SAASH,UAAUlB;gBACvBmC,MAAM;gBACNL,QAAQZ,aAAaX;YACvB;QACF;QACA6B;YACE,OAAO;gBACLC,KAAKb;gBACLZ;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/tabs/useTabs.ts"],"sourcesContent":["\"use client\";\n\nimport { type Dispatch, type Ref, useEffect, useRef, useState } from \"react\";\n\nimport { type SlideDirection } from \"../transition/SlideContainer.js\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\nimport { applyRef } from \"../utils/applyRef.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type TabProps } from \"./Tab.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type TabListProps } from \"./TabList.js\";\n\nconst EMPTY_LIST = [] as const;\nconst PANEL_PREFIX = \"panel-\";\n\n/**\n * @since 6.0.0\n */\nexport interface TabsHookOptions<TabValue extends string | number = number> {\n  /**\n   * This can be used to generate the ids for the different components within\n   * the tab widget.\n   *\n   * @defaultValue `\"tab-\" + useId()`\n   */\n  baseId?: string;\n\n  /**\n   * Set this to an **ordered** list of tab values when:\n   * - using a `string` tab value\n   * - using a `number` tab value does not represent a tab index\n   *\n   * See the examples on the {@link useTabs} for usage.\n   */\n  tabs?: readonly TabValue[];\n\n  /**\n   * Provide this value and {@link setActiveTab} to control the active tab\n   * behavior.\n   */\n  activeTab?: TabValue;\n\n  /** @see {@link activeTab} */\n  setActiveTab?: Dispatch<TabValue>;\n\n  /**\n   * Set this to the default tab index when not controlling the active tab value\n   * through {@link activeTab} and {@link setActiveTab}.\n   *\n   * @defaultValue `0`\n   */\n  defaultActiveTab?: UseStateInitializer<TabValue>;\n\n  /** Convenience pass-through prop to {@link TabProps.stacked} */\n  stacked?: boolean;\n  /** Convenience pass-through prop to {@link TabProps.iconAfter} */\n  iconAfter?: boolean;\n\n  /** Convenience pass-through props to {@link TabListProps.vertical} */\n  vertical?: boolean;\n\n  /**\n   * Set this to `true` if changing active tabs should no longer attempt to\n   * scroll to the top of the tab panels container when using the\n   * {@link TabsImplementation.getTabPanelsProps}.\n   *\n   * @defaultValue `false`\n   */\n  disableScrollFix?: boolean;\n\n  /**\n   * Convenience prop to disable all transitions for the\n   * {@link TabsImplementation.getTabProps} and\n   * {@link TabsImplementation.getTabListProps}.\n   */\n  disableTransition?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedTabProps {\n  \"aria-controls\": string;\n  id: string;\n  active: boolean;\n\n  /** Convenience pass-through prop from {@link TabsHookOptions.stacked} */\n  stacked?: boolean;\n  /** Convenience pass-through prop from {@link TabsHookOptions.iconAfter} */\n  iconAfter?: boolean;\n  /** Convenience pass-through prop from {@link TabsHookOptions.disableTransition} */\n  activeIndicator?: boolean;\n  /** Convenience pass-through prop from {@link TabsHookOptions.vertical} and {@link TabsHookOptions.disableTransition} */\n  verticalActiveIndicator?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedTabListProps {\n  activeIndex: number;\n  setActiveIndex: Dispatch<number>;\n  vertical?: boolean;\n  disableTransition?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedTabPanelProps {\n  \"aria-labelledby\": string;\n  id: string;\n  role: \"tabpanel\";\n  active: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedTabPanelsProps<E extends HTMLElement> {\n  ref: Ref<E>;\n  direction: SlideDirection;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabsImplementation<TabValue extends string | number = number> {\n  direction: SlideDirection;\n  setDirection: UseStateSetter<SlideDirection>;\n  activeTab?: TabValue;\n  setActiveTab?: (nextActiveTab: TabValue) => void;\n  getTabProps: (tabValue: TabValue) => ProvidedTabProps;\n  getTabListProps: () => ProvidedTabListProps;\n  getTabPanelProps: (tabValue: TabValue) => ProvidedTabPanelProps;\n  getTabPanelsProps: <E extends HTMLElement>(\n    ref?: Ref<E>\n  ) => ProvidedTabPanelsProps<E>;\n}\n\n/**\n * @example Super Simple\n * ```tsx\n * \"use client\";\n *\n * import { Tab } from \"@react-md/core/tabs/Tab\";\n * import { TabList } from \"@react-md/core/tabs/TabList\";\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 { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const {\n *     activeTab,\n *     setActiveTab,\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs();\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 {...getTabPanelsProps()}>\n *         <Slide {...getTabPanelProps(0)}>Tab 1 Content</Slide>\n *         <Slide {...getTabPanelProps(1)}>Tab 2 Content</Slide>\n *         <Slide {...getTabPanelProps(2)}>Tab 3 Content</Slide>\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}\n * @since 6.0.0\n */\nexport function useTabs(): TabsImplementation & {\n  activeTab: number;\n  setActiveTab: number;\n};\n/**\n * The tab behavior can be controlled by providing the `activeTab` and\n * `setActiveTab` options.\n *\n * @example Controlled\n * ```tsx\n * \"use client\";\n *\n * import { Tab } from \"@react-md/core/tabs/Tab\";\n * import { TabList } from \"@react-md/core/tabs/TabList\";\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 { type ReactElement, useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [activeTab, setActiveTab] = useState(1);\n *\n *   const {\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs({\n *     activeTab,\n *     setActiveTab,\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 {...getTabPanelsProps()}>\n *         <Slide {...getTabPanelProps(0)}>Tab 1 Content</Slide>\n *         <Slide {...getTabPanelProps(1)}>Tab 2 Content</Slide>\n *         <Slide {...getTabPanelProps(2)}>Tab 3 Content</Slide>\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}\n * @since 6.0.0\n */\nexport function useTabs<TabValue extends number>(\n  options: TabsHookOptions<TabValue> & {\n    tabs?: readonly TabValue[];\n    activeTab: TabValue;\n    setActiveTab: Dispatch<TabValue>;\n    defaultActiveTab?: never;\n  }\n): TabsImplementation<TabValue> & { activeTab?: never; setActiveTab?: never };\nexport function useTabs<TabValue extends number>(\n  options: TabsHookOptions<TabValue> & {\n    tabs?: readonly TabValue[];\n    activeTab?: never;\n    setActiveTab?: never;\n    defaultActiveTab?: UseStateInitializer<TabValue>;\n  }\n): TabsImplementation<TabValue> & {\n  activeTab: TabValue;\n  setActiveTab: Dispatch<TabValue>;\n};\n/**\n * When using string values, the {@link TabsHookOptions.tabs} option **must** be\n * provided to determine the correct active tab index.\n *\n * @example String Value Simple\n * ```tsx\n * \"use client\";\n *\n * import { Tab } from \"@react-md/core/tabs/Tab\";\n * import { TabList } from \"@react-md/core/tabs/TabList\";\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 { type ReactElement } from \"react\";\n *\n * const tabs = [\"value-1\", \"value-2\", \"value-3\"];\n *\n * function Example(): ReactElement {\n *   const {\n *     activeTab,\n *     setActiveTab,\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs({ tabs });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         {tabs.map((value) => (\n *           <Tab key={value} {...getTabProps(value)}>{value}</Tab>\n *         ))}\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *        {tabs.map((value) => (\n *          <Slide key={value}>{value} Content</Slide>\n *        ))}\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}\n * @since 6.0.0\n */\nexport function useTabs<TabValue extends string>(\n  options: TabsHookOptions<TabValue> & {\n    tabs: readonly TabValue[];\n    activeTab?: never;\n    setActiveTab?: never;\n    defaultActiveTab?: UseStateInitializer<TabValue>;\n  }\n): TabsImplementation<TabValue> & {\n  activeTab: TabValue;\n  setActiveTab: Dispatch<TabValue>;\n};\n/**\n * When using string values, the {@link TabsHookOptions.tabs} option **must** be\n * provided to determine the correct active tab index.\n *\n * @example String Controlled Simple\n * ```tsx\n * import { Tab } from \"@react-md/core/tabs/Tab\";\n * import { TabList } from \"@react-md/core/tabs/TabList\";\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 { type ReactElement } from \"react\";\n *\n * const tabs = [\"value-1\", \"value-2\", \"value-3\"] as const;\n *\n * function Example(): ReactElement {\n *   const [activeTab, setActiveTab] = useState(tabs[0]);\n *\n *   const {\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs({\n *     tabs,\n *     activeTab,\n *     setActiveTab,\n *   });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         {tabs.map((value) => (\n *           <Tab key={value} {...getTabProps(value)}>{value}</Tab>\n *         ))}\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *        {tabs.map((value) => (\n *          <Slide key={value}>{value} Content</Slide>\n *        ))}\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Navigation Tabs\n * ```tsx\n * \"use client\";\n *\n * import { Tab } from \"@react-md/core/tabs/Tab\";\n * import { TabList } from \"@react-md/core/tabs/TabList\";\n * import { useTabs } from \"@react-md/core/tabs/useTabs\";\n * import Link from \"next/link.js\";\n * import { usePathname } from \"next/navigation.js\";\n * import {\n *   type AnchorHTMLAttributes,\n *   type ReactElement,\n *   forwardRef,\n *   useEffect,\n *   useState,\n * } from \"react\";\n *\n * // this just fixes the `href` type definition causing errors\n * const SimpleLink = forwardRef<\n *   HTMLAnchorElement,\n *   AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }\n * >(function SimpleLink(props, ref) {\n *   return <Link {...props} ref={ref} />;\n * });\n *\n * const PATHNAME_TABS = [\"/\", \"/page-1\", \"/page-2\"];\n *\n * function Layout({ children }: PropsWithChildren) {\n *   const pathname = usePathname();\n *   const { getTabListProps, getTabProps } = useTabs({\n *     tabs: PATHNAME_TABS,\n *     activeTab: pathname,\n *     setActiveTab: noop,\n *   });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         <Tab {...getTabProps(\"/\")} href=\"/\" as={SimpleLink}>Home</Tab>\n *         <Tab {...getTabProps(\"/page-1\")} href=\"/page-1\" as={SimpleLink}>Page 1</Tab>\n *         <Tab {...getTabProps(\"/page-2\")} href=\"/page-2\" as={SimpleLink}>Page 2</Tab>\n *       </TabList>\n *       <main>{children}</main>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}\n * @since 6.0.0\n */\nexport function useTabs<TabValue extends string>(\n  options: TabsHookOptions<TabValue> & {\n    tabs: readonly TabValue[];\n    activeTab: TabValue;\n    setActiveTab: Dispatch<TabValue>;\n    defaultActiveTab?: never;\n  }\n): TabsImplementation<TabValue> & { activeTab?: never; setActiveTab?: never };\n/**\n * This hook can be uncontrolled/controlled and supports strongly typing the tab\n * values if needed. Check out the overloads for examples.\n *\n * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}\n * @since 6.0.0\n */\nexport function useTabs<TabValue extends string | number>(\n  options: TabsHookOptions<TabValue> = {}\n): TabsImplementation<TabValue> {\n  const {\n    baseId: propBaseId,\n    tabs = EMPTY_LIST,\n    stacked,\n    vertical,\n    iconAfter,\n    activeTab: propActiveTab,\n    setActiveTab: propSetActiveTab,\n    defaultActiveTab,\n    disableScrollFix,\n    disableTransition,\n  } = options;\n\n  const baseId = useEnsuredId(propBaseId, \"tab\");\n  const [direction, setDirection] = useState<SlideDirection>(\"forward\");\n\n  const [activeTab, setActiveTab] = useEnsuredState({\n    value: propActiveTab,\n    setValue: propSetActiveTab,\n    defaultValue: defaultActiveTab ?? (0 as TabValue),\n  });\n\n  const getTabIndex = (tabValue: TabValue): number =>\n    typeof tabValue === \"string\" || tabs.length > 0\n      ? tabs.indexOf(tabValue)\n      : tabValue;\n  const getTabId = (tabValue: TabValue, prefix = \"\"): string =>\n    `${baseId}-${prefix}${getTabIndex(tabValue) + 1}`;\n\n  const activeIndex = getTabIndex(activeTab);\n  const tabPanelsRef = useRef<HTMLElement>(null);\n  useEffect(() => {\n    const container = tabPanelsRef.current;\n    if (!container || disableScrollFix) {\n      return;\n    }\n\n    container.scrollTop = 0;\n  }, [disableScrollFix, activeTab]);\n\n  return {\n    activeTab,\n    setActiveTab,\n    direction,\n    setDirection,\n    getTabProps(tabValue) {\n      return {\n        \"aria-controls\": getTabId(tabValue, PANEL_PREFIX),\n        id: getTabId(tabValue),\n        active: tabValue === activeTab,\n        stacked,\n        iconAfter,\n        activeIndicator: disableTransition,\n        verticalActiveIndicator: vertical && disableTransition,\n      };\n    },\n    getTabListProps() {\n      return {\n        activeIndex,\n        setActiveIndex: (nextActiveIndex) => {\n          setDirection(activeIndex < nextActiveIndex ? \"forward\" : \"backward\");\n          if (typeof activeTab === \"string\" || tabs.length > 0) {\n            setActiveTab(tabs[nextActiveIndex]);\n          } else {\n            setActiveTab(nextActiveIndex as TabValue);\n          }\n        },\n        vertical,\n        disableTransition,\n      };\n    },\n    getTabPanelProps(tabValue) {\n      return {\n        \"aria-labelledby\": getTabId(tabValue),\n        id: getTabId(tabValue, PANEL_PREFIX),\n        role: \"tabpanel\",\n        active: tabValue === activeTab,\n      };\n    },\n    getTabPanelsProps(ref) {\n      return {\n        ref: (instance) => {\n          applyRef(instance, ref);\n          applyRef(instance, tabPanelsRef);\n        },\n        direction,\n      };\n    },\n  };\n}\n"],"names":["useEffect","useRef","useState","useEnsuredId","useEnsuredState","applyRef","EMPTY_LIST","PANEL_PREFIX","useTabs","options","baseId","propBaseId","tabs","stacked","vertical","iconAfter","activeTab","propActiveTab","setActiveTab","propSetActiveTab","defaultActiveTab","disableScrollFix","disableTransition","direction","setDirection","value","setValue","defaultValue","getTabIndex","tabValue","length","indexOf","getTabId","prefix","activeIndex","tabPanelsRef","container","current","scrollTop","getTabProps","id","active","activeIndicator","verticalActiveIndicator","getTabListProps","setActiveIndex","nextActiveIndex","getTabPanelProps","role","getTabPanelsProps","ref","instance"],"mappings":"AAAA;AAEA,SAAkCA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAI7E,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,eAAe,QAAQ,wBAAwB;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAMhD,MAAMC,aAAa,EAAE;AACrB,MAAMC,eAAe;AA2ZrB;;;;;;CAMC,GACD,OAAO,SAASC,QACdC,UAAqC,CAAC,CAAC;IAEvC,MAAM,EACJC,QAAQC,UAAU,EAClBC,OAAON,UAAU,EACjBO,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,WAAWC,aAAa,EACxBC,cAAcC,gBAAgB,EAC9BC,gBAAgB,EAChBC,gBAAgB,EAChBC,iBAAiB,EAClB,GAAGb;IAEJ,MAAMC,SAASP,aAAaQ,YAAY;IACxC,MAAM,CAACY,WAAWC,aAAa,GAAGtB,SAAyB;IAE3D,MAAM,CAACc,WAAWE,aAAa,GAAGd,gBAAgB;QAChDqB,OAAOR;QACPS,UAAUP;QACVQ,cAAcP,oBAAqB;IACrC;IAEA,MAAMQ,cAAc,CAACC,WACnB,OAAOA,aAAa,YAAYjB,KAAKkB,MAAM,GAAG,IAC1ClB,KAAKmB,OAAO,CAACF,YACbA;IACN,MAAMG,WAAW,CAACH,UAAoBI,SAAS,EAAE,GAC/C,GAAGvB,OAAO,CAAC,EAAEuB,SAASL,YAAYC,YAAY,GAAG;IAEnD,MAAMK,cAAcN,YAAYZ;IAChC,MAAMmB,eAAelC,OAAoB;IACzCD,UAAU;QACR,MAAMoC,YAAYD,aAAaE,OAAO;QACtC,IAAI,CAACD,aAAaf,kBAAkB;YAClC;QACF;QAEAe,UAAUE,SAAS,GAAG;IACxB,GAAG;QAACjB;QAAkBL;KAAU;IAEhC,OAAO;QACLA;QACAE;QACAK;QACAC;QACAe,aAAYV,QAAQ;YAClB,OAAO;gBACL,iBAAiBG,SAASH,UAAUtB;gBACpCiC,IAAIR,SAASH;gBACbY,QAAQZ,aAAab;gBACrBH;gBACAE;gBACA2B,iBAAiBpB;gBACjBqB,yBAAyB7B,YAAYQ;YACvC;QACF;QACAsB;YACE,OAAO;gBACLV;gBACAW,gBAAgB,CAACC;oBACftB,aAAaU,cAAcY,kBAAkB,YAAY;oBACzD,IAAI,OAAO9B,cAAc,YAAYJ,KAAKkB,MAAM,GAAG,GAAG;wBACpDZ,aAAaN,IAAI,CAACkC,gBAAgB;oBACpC,OAAO;wBACL5B,aAAa4B;oBACf;gBACF;gBACAhC;gBACAQ;YACF;QACF;QACAyB,kBAAiBlB,QAAQ;YACvB,OAAO;gBACL,mBAAmBG,SAASH;gBAC5BW,IAAIR,SAASH,UAAUtB;gBACvByC,MAAM;gBACNP,QAAQZ,aAAab;YACvB;QACF;QACAiC,mBAAkBC,GAAG;YACnB,OAAO;gBACLA,KAAK,CAACC;oBACJ9C,SAAS8C,UAAUD;oBACnB7C,SAAS8C,UAAUhB;gBACrB;gBACAZ;YACF;QACF;IACF;AACF"}

package/dist/tabs/utils.d.ts

@@ -2,6 +2,10 @@
  * @internal
  */
 export declare const getTabRoleOnly: (container: Element) => readonly HTMLElement[];
+/**
+ * @internal
+ */
+export declare const getTabPanelRoleOnly: (container: Element) => readonly HTMLElement[];
 /** @internal */
 interface ScrollOptions {
     container: HTMLElement | null;
@@ -14,22 +18,4 @@ interface ScrollOptions {
  * @internal
  */
 export declare const scrollTabIntoView: (options: ScrollOptions) => void;
-/**
- * @remarks \@since 6.0.0
- */
-export interface TabListScrollToOptions {
-    isRTL: boolean;
-    animate: boolean;
-    vertical: boolean;
-    increment: boolean;
-    container: HTMLElement;
-}
-/**
- * @remarks \@since 6.0.0
- */
-export type GetTabListScrollToOptions = (options: TabListScrollToOptions) => ScrollToOptions | undefined;
-/**
- * @remarks \@since 6.0.0
- */
-export declare const getTabListScrollToOptions: GetTabListScrollToOptions;
 export {};

package/dist/tabs/utils.js

@@ -3,6 +3,11 @@
  */ export const getTabRoleOnly = (container)=>[
         ...container.querySelectorAll('[role="tab"]')
     ];
+/**
+ * @internal
+ */ export const getTabPanelRoleOnly = (container)=>[
+        ...container.querySelectorAll('[role="tabpanel"]')
+    ];
 /**
  * @internal
  */ export const scrollTabIntoView = (options)=>{
@@ -30,20 +35,5 @@
         container[scrollAttribute] = elementStart - firstOffset;
     }
 };
-/**
- * @remarks \@since 6.0.0
- */ export const getTabListScrollToOptions = (options)=>{
-    const { isRTL, animate, vertical, increment, container } = options;
-    const { scrollLeft, scrollTop, scrollWidth, scrollHeight } = container;
-    const currentScroll = vertical ? scrollTop : scrollLeft;
-    const scrollDistance = vertical ? scrollHeight : scrollWidth;
-    const amount = scrollDistance / 10 * (increment ? 1 : -1);
-    const distance = currentScroll + amount * (vertical || !isRTL ? 1 : -1);
-    return {
-        left: vertical ? undefined : distance,
-        top: vertical ? distance : undefined,
-        behavior: animate ? "smooth" : "auto"
-    };
-};
 
 //# sourceMappingURL=utils.js.map

package/dist/tabs/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/utils.ts"],"sourcesContent":["/**\n * @internal\n */\nexport const getTabRoleOnly = (container: Element): readonly HTMLElement[] => [\n  ...container.querySelectorAll<HTMLElement>('[role=\"tab\"]'),\n];\n\n/** @internal */\ninterface ScrollOptions {\n  container: HTMLElement | null;\n  forward: HTMLElement | null;\n  backward: HTMLElement | null;\n  vertical: boolean;\n  activeIndex: number;\n}\n\n/**\n * @internal\n */\nexport const scrollTabIntoView = (options: ScrollOptions): void => {\n  const { container, vertical, forward, backward, activeIndex } = options;\n  if (!container) {\n    return;\n  }\n\n  const activeTab = getTabRoleOnly(container)[activeIndex];\n  if (!activeTab) {\n    return;\n  }\n\n  const sizeAttribute = vertical ? \"offsetHeight\" : \"offsetWidth\";\n  const offsetAttribute = vertical ? \"offsetTop\" : \"offsetLeft\";\n  const scrollAttribute = vertical ? \"scrollTop\" : \"scrollLeft\";\n  const firstOffset = backward?.[sizeAttribute] || 0;\n  const lastOffset = forward?.[sizeAttribute] || 0;\n  const elementStart = activeTab[offsetAttribute];\n  const elementEnd = elementStart + activeTab[sizeAttribute];\n  const containerStart = container[scrollAttribute];\n  const containerEnd = containerStart + container[sizeAttribute] - lastOffset;\n  if (elementEnd > containerEnd) {\n    const containerSize = container[sizeAttribute] - lastOffset;\n    container[scrollAttribute] = elementEnd - containerSize;\n  } else if (elementStart < containerStart + firstOffset) {\n    container[scrollAttribute] = elementStart - firstOffset;\n  }\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TabListScrollToOptions {\n  isRTL: boolean;\n  animate: boolean;\n  vertical: boolean;\n  increment: boolean;\n  container: HTMLElement;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type GetTabListScrollToOptions = (\n  options: TabListScrollToOptions\n) => ScrollToOptions | undefined;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport const getTabListScrollToOptions: GetTabListScrollToOptions = (\n  options\n) => {\n  const { isRTL, animate, vertical, increment, container } = options;\n  const { scrollLeft, scrollTop, scrollWidth, scrollHeight } = container;\n  const currentScroll = vertical ? scrollTop : scrollLeft;\n  const scrollDistance = vertical ? scrollHeight : scrollWidth;\n  const amount = (scrollDistance / 10) * (increment ? 1 : -1);\n  const distance = currentScroll + amount * (vertical || !isRTL ? 1 : -1);\n\n  return {\n    left: vertical ? undefined : distance,\n    top: vertical ? distance : undefined,\n    behavior: animate ? \"smooth\" : \"auto\",\n  };\n};\n"],"names":["getTabRoleOnly","container","querySelectorAll","scrollTabIntoView","options","vertical","forward","backward","activeIndex","activeTab","sizeAttribute","offsetAttribute","scrollAttribute","firstOffset","lastOffset","elementStart","elementEnd","containerStart","containerEnd","containerSize","getTabListScrollToOptions","isRTL","animate","increment","scrollLeft","scrollTop","scrollWidth","scrollHeight","currentScroll","scrollDistance","amount","distance","left","undefined","top","behavior"],"mappings":"AAAA;;CAEC,GACD,OAAO,MAAMA,iBAAiB,CAACC,YAA+C;WACzEA,UAAUC,gBAAgB,CAAc;KAC5C,CAAC;AAWF;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAACC;IAChC,MAAM,EAAEH,SAAS,EAAEI,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGJ;IAChE,IAAI,CAACH,WAAW;QACd;IACF;IAEA,MAAMQ,YAAYT,eAAeC,UAAU,CAACO,YAAY;IACxD,IAAI,CAACC,WAAW;QACd;IACF;IAEA,MAAMC,gBAAgBL,WAAW,iBAAiB;IAClD,MAAMM,kBAAkBN,WAAW,cAAc;IACjD,MAAMO,kBAAkBP,WAAW,cAAc;IACjD,MAAMQ,cAAcN,UAAU,CAACG,cAAc,IAAI;IACjD,MAAMI,aAAaR,SAAS,CAACI,cAAc,IAAI;IAC/C,MAAMK,eAAeN,SAAS,CAACE,gBAAgB;IAC/C,MAAMK,aAAaD,eAAeN,SAAS,CAACC,cAAc;IAC1D,MAAMO,iBAAiBhB,SAAS,CAACW,gBAAgB;IACjD,MAAMM,eAAeD,iBAAiBhB,SAAS,CAACS,cAAc,GAAGI;IACjE,IAAIE,aAAaE,cAAc;QAC7B,MAAMC,gBAAgBlB,SAAS,CAACS,cAAc,GAAGI;QACjDb,SAAS,CAACW,gBAAgB,GAAGI,aAAaG;IAC5C,OAAO,IAAIJ,eAAeE,iBAAiBJ,aAAa;QACtDZ,SAAS,CAACW,gBAAgB,GAAGG,eAAeF;IAC9C;AACF,EAAE;AAoBF;;CAEC,GACD,OAAO,MAAMO,4BAAuD,CAClEhB;IAEA,MAAM,EAAEiB,KAAK,EAAEC,OAAO,EAAEjB,QAAQ,EAAEkB,SAAS,EAAEtB,SAAS,EAAE,GAAGG;IAC3D,MAAM,EAAEoB,UAAU,EAAEC,SAAS,EAAEC,WAAW,EAAEC,YAAY,EAAE,GAAG1B;IAC7D,MAAM2B,gBAAgBvB,WAAWoB,YAAYD;IAC7C,MAAMK,iBAAiBxB,WAAWsB,eAAeD;IACjD,MAAMI,SAAS,AAACD,iBAAiB,KAAON,CAAAA,YAAY,IAAI,CAAC,CAAA;IACzD,MAAMQ,WAAWH,gBAAgBE,SAAUzB,CAAAA,YAAY,CAACgB,QAAQ,IAAI,CAAC,CAAA;IAErE,OAAO;QACLW,MAAM3B,WAAW4B,YAAYF;QAC7BG,KAAK7B,WAAW0B,WAAWE;QAC3BE,UAAUb,UAAU,WAAW;IACjC;AACF,EAAE"}
+{"version":3,"sources":["../../src/tabs/utils.ts"],"sourcesContent":["/**\n * @internal\n */\nexport const getTabRoleOnly = (container: Element): readonly HTMLElement[] => [\n  ...container.querySelectorAll<HTMLElement>('[role=\"tab\"]'),\n];\n\n/**\n * @internal\n */\nexport const getTabPanelRoleOnly = (\n  container: Element\n): readonly HTMLElement[] => [\n  ...container.querySelectorAll<HTMLElement>('[role=\"tabpanel\"]'),\n];\n\n/** @internal */\ninterface ScrollOptions {\n  container: HTMLElement | null;\n  forward: HTMLElement | null;\n  backward: HTMLElement | null;\n  vertical: boolean;\n  activeIndex: number;\n}\n\n/**\n * @internal\n */\nexport const scrollTabIntoView = (options: ScrollOptions): void => {\n  const { container, vertical, forward, backward, activeIndex } = options;\n  if (!container) {\n    return;\n  }\n\n  const activeTab = getTabRoleOnly(container)[activeIndex];\n  if (!activeTab) {\n    return;\n  }\n\n  const sizeAttribute = vertical ? \"offsetHeight\" : \"offsetWidth\";\n  const offsetAttribute = vertical ? \"offsetTop\" : \"offsetLeft\";\n  const scrollAttribute = vertical ? \"scrollTop\" : \"scrollLeft\";\n  const firstOffset = backward?.[sizeAttribute] || 0;\n  const lastOffset = forward?.[sizeAttribute] || 0;\n  const elementStart = activeTab[offsetAttribute];\n  const elementEnd = elementStart + activeTab[sizeAttribute];\n  const containerStart = container[scrollAttribute];\n  const containerEnd = containerStart + container[sizeAttribute] - lastOffset;\n  if (elementEnd > containerEnd) {\n    const containerSize = container[sizeAttribute] - lastOffset;\n    container[scrollAttribute] = elementEnd - containerSize;\n  } else if (elementStart < containerStart + firstOffset) {\n    container[scrollAttribute] = elementStart - firstOffset;\n  }\n};\n"],"names":["getTabRoleOnly","container","querySelectorAll","getTabPanelRoleOnly","scrollTabIntoView","options","vertical","forward","backward","activeIndex","activeTab","sizeAttribute","offsetAttribute","scrollAttribute","firstOffset","lastOffset","elementStart","elementEnd","containerStart","containerEnd","containerSize"],"mappings":"AAAA;;CAEC,GACD,OAAO,MAAMA,iBAAiB,CAACC,YAA+C;WACzEA,UAAUC,gBAAgB,CAAc;KAC5C,CAAC;AAEF;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CACjCF,YAC2B;WACxBA,UAAUC,gBAAgB,CAAc;KAC5C,CAAC;AAWF;;CAEC,GACD,OAAO,MAAME,oBAAoB,CAACC;IAChC,MAAM,EAAEJ,SAAS,EAAEK,QAAQ,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGJ;IAChE,IAAI,CAACJ,WAAW;QACd;IACF;IAEA,MAAMS,YAAYV,eAAeC,UAAU,CAACQ,YAAY;IACxD,IAAI,CAACC,WAAW;QACd;IACF;IAEA,MAAMC,gBAAgBL,WAAW,iBAAiB;IAClD,MAAMM,kBAAkBN,WAAW,cAAc;IACjD,MAAMO,kBAAkBP,WAAW,cAAc;IACjD,MAAMQ,cAAcN,UAAU,CAACG,cAAc,IAAI;IACjD,MAAMI,aAAaR,SAAS,CAACI,cAAc,IAAI;IAC/C,MAAMK,eAAeN,SAAS,CAACE,gBAAgB;IAC/C,MAAMK,aAAaD,eAAeN,SAAS,CAACC,cAAc;IAC1D,MAAMO,iBAAiBjB,SAAS,CAACY,gBAAgB;IACjD,MAAMM,eAAeD,iBAAiBjB,SAAS,CAACU,cAAc,GAAGI;IACjE,IAAIE,aAAaE,cAAc;QAC7B,MAAMC,gBAAgBnB,SAAS,CAACU,cAAc,GAAGI;QACjDd,SAAS,CAACY,gBAAgB,GAAGI,aAAaG;IAC5C,OAAO,IAAIJ,eAAeE,iBAAiBJ,aAAa;QACtDb,SAAS,CAACY,gBAAgB,GAAGG,eAAeF;IAC9C;AACF,EAAE"}

package/dist/test-utils/data-testid.d.ts

@@ -0,0 +1,6 @@
+declare module "react" {
+    interface HTMLAttributes<T> extends React.AriaAttributes, React.DOMAttributes<T> {
+        "data-testid"?: string | number;
+    }
+}
+export {};

package/dist/test-utils/data-testid.js

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 
 //# sourceMappingURL=data-testid.js.map

package/dist/test-utils/data-testid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/test-utils/data-testid.ts"],"names":[],"mappings":""}
+{"version":3,"sources":["../../src/test-utils/data-testid.ts"],"sourcesContent":["/// <reference types=\"react\" />\n\ndeclare module \"react\" {\n  interface HTMLAttributes<T>\n    extends React.AriaAttributes,\n      React.DOMAttributes<T> {\n    \"data-testid\"?: string | number;\n  }\n}\n"],"names":[],"mappings":"AAAA,+BAA+B"}

package/dist/test-utils/drag.d.ts

@@ -0,0 +1,27 @@
+interface XYCoords {
+    x: number;
+    y: number;
+}
+interface BaseDragOptions {
+    to?: XYCoords | Element;
+    from?: XYCoords;
+    delta?: XYCoords;
+    steps?: number;
+    duration?: number;
+}
+type DragOptions = BaseDragOptions & ({
+    to: XYCoords | Element;
+    delta?: never;
+} | {
+    delta: XYCoords;
+    to?: never;
+});
+/**
+ * This is internal for now. No idea if it's actually worthwhile though since
+ * you have to mock the `getBoundingClientRect()` to work.
+ *
+ * @internal
+ * @see https://github.com/testing-library/testing-library-docs/blob/c20f8a8931e9f0a158fda9f01bbea8cb45ed1651/docs/example-drag.mdx
+ */
+export declare function drag(element: Element, options: DragOptions): Promise<void>;
+export {};

package/dist/test-utils/index.d.ts

@@ -0,0 +1,9 @@
+export * from "@testing-library/react";
+export * from "@testing-library/user-event";
+export * from "./mocks/IntersectionObserver.js";
+export * from "./mocks/match-media.js";
+export * from "./mocks/ResizeObserver.js";
+export * from "./queries/index.js";
+export * from "./render.js";
+export * from "./utils/createResizeObserverEntry.js";
+export * from "./utils/createFileList.js";