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

package/dist/tabs/useTabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/useTabs.ts"],"sourcesContent":["\"use client\";\nimport {\n  type Dispatch,\n  type Ref,\n  type RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\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\";\n\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>() => ProvidedTabPanelsProps<E>;\n}\n\n/**\n * @example 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 * @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 * 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 * @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 * 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 * @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 { 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 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 * @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 * @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>(\"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        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 ? \"left\" : \"right\");\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<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","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"],"mappings":"AAAA;AACA,SAIEA,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,eAAe,QAAQ,wBAAwB;AAOxD,MAAMC,aAAa,EAAE;AACrB,MAAMC,eAAe;AAoarB;;;;;CAKC,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,SAASN,aAAaO,YAAY;IACxC,MAAM,CAACY,WAAWC,aAAa,GAAGrB,SAAyB;IAE3D,MAAM,CAACa,WAAWE,aAAa,GAAGb,gBAAgB;QAChDoB,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,eAAejC,OAAoB;IACzCD,UAAU;QACR,MAAMmC,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,SAAS;oBACtD,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;YACE,OAAO;gBACLC,KAAKf;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 * @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 * @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 * @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 * @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 * @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>(\"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        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 ? \"left\" : \"right\");\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;AAuZrB;;;;;CAKC,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,SAAS;oBACtD,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;

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)=>{

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"],"names":["getTabRoleOnly","container","querySelectorAll","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;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"}
+{"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/drag.d.ts

@@ -4,6 +4,7 @@ interface XYCoords {
 }
 interface BaseDragOptions {
     to?: XYCoords | Element;
+    from?: XYCoords;
     delta?: XYCoords;
     steps?: number;
     duration?: number;

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

@@ -1,7 +1,9 @@
 export * from "@testing-library/react";
 export * from "@testing-library/user-event";
-export * from "./IntersectionObserver.js";
-export * from "./ResizeObserver.js";
-export * from "./matchMedia.js";
+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 "./timers.js";
+export * from "./utils/createResizeObserverEntry.js";
+export * from "./utils/createFileList.js";

package/dist/test-utils/index.js

@@ -1,9 +1,11 @@
 export * from "@testing-library/react";
 export * from "@testing-library/user-event";
-export * from "./IntersectionObserver.js";
-export * from "./ResizeObserver.js";
-export * from "./matchMedia.js";
+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 "./timers.js";
+export * from "./utils/createResizeObserverEntry.js";
+export * from "./utils/createFileList.js";
 
 //# sourceMappingURL=index.js.map

package/dist/test-utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/test-utils/index.ts"],"sourcesContent":["export * from \"@testing-library/react\";\nexport * from \"@testing-library/user-event\";\n\nexport * from \"./IntersectionObserver.js\";\nexport * from \"./ResizeObserver.js\";\nexport * from \"./matchMedia.js\";\nexport * from \"./render.js\";\nexport * from \"./timers.js\";\n"],"names":[],"mappings":"AAAA,cAAc,yBAAyB;AACvC,cAAc,8BAA8B;AAE5C,cAAc,4BAA4B;AAC1C,cAAc,sBAAsB;AACpC,cAAc,kBAAkB;AAChC,cAAc,cAAc;AAC5B,cAAc,cAAc"}
+{"version":3,"sources":["../../src/test-utils/index.ts"],"sourcesContent":["export * from \"@testing-library/react\";\nexport * from \"@testing-library/user-event\";\nexport * from \"./mocks/IntersectionObserver.js\";\nexport * from \"./mocks/match-media.js\";\nexport * from \"./mocks/ResizeObserver.js\";\nexport * from \"./queries/index.js\";\nexport * from \"./render.js\";\nexport * from \"./utils/createResizeObserverEntry.js\";\nexport * from \"./utils/createFileList.js\";\n"],"names":[],"mappings":"AAAA,cAAc,yBAAyB;AACvC,cAAc,8BAA8B;AAC5C,cAAc,kCAAkC;AAChD,cAAc,yBAAyB;AACvC,cAAc,4BAA4B;AAC1C,cAAc,qBAAqB;AACnC,cAAc,cAAc;AAC5B,cAAc,uCAAuC;AACrD,cAAc,4BAA4B"}

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

@@ -0,0 +1,4 @@
+export * from "./match-media.js";
+export * from "./timers.js";
+export * from "./uploadMenuItemFileInput.js";
+export * from "./resize-observer.js";

package/dist/test-utils/jest-globals/index.js

@@ -0,0 +1,6 @@
+export * from "./match-media.js";
+export * from "./timers.js";
+export * from "./uploadMenuItemFileInput.js";
+export * from "./resize-observer.js";
+
+//# sourceMappingURL=index.js.map

package/dist/test-utils/jest-globals/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/test-utils/jest-globals/index.ts"],"sourcesContent":["export * from \"./match-media.js\";\nexport * from \"./timers.js\";\nexport * from \"./uploadMenuItemFileInput.js\";\nexport * from \"./resize-observer.js\";\n"],"names":[],"mappings":"AAAA,cAAc,mBAAmB;AACjC,cAAc,cAAc;AAC5B,cAAc,+BAA+B;AAC7C,cAAc,uBAAuB"}

package/dist/test-utils/jest-globals/match-media.d.ts

@@ -0,0 +1,32 @@
+import { jest } from "@jest/globals";
+import { type MatchMediaChangeViewport } from "../mocks/match-media-implementation.js";
+import { type MatchMediaMatcher } from "../mocks/match-media.js";
+/**
+ * @example Default Behavior
+ * ```tsx
+ * import { matchPhone, render } from "@react-md/core/test-utils";
+ * import { spyOnMatchMedia } from "@react-md/core/test-utils/jest-globals";
+ *
+ * const matchMedia = spyOnMatchMedia();
+ * render(<Test />);
+ *
+ * // expect desktop results
+ *
+ * matchMedia.changeViewport(matchPhone);
+ * // expect phone results
+ * ```
+ *
+ * @example Set Default Media
+ * ```tsx
+ * import { matchPhone, render } from "@react-md/core/test-utils";
+ * import { spyOnMatchMedia } from "@react-md/core/test-utils/jest-globals";
+ *
+ * const matchMedia = spyOnMatchMedia(matchPhone);
+ * render(<Test />);
+ *
+ * // expect phone results
+ * ```
+ *
+ * @since 6.0.0
+ */
+export declare function spyOnMatchMedia(defaultMatch?: MatchMediaMatcher): jest.SpiedFunction<typeof window.matchMedia> & MatchMediaChangeViewport;

package/dist/test-utils/jest-globals/match-media.js

@@ -0,0 +1,35 @@
+import { jest } from "@jest/globals";
+import { createMatchMediaSpy } from "../mocks/match-media-implementation.js";
+import { matchDesktop } from "../mocks/match-media.js";
+/**
+ * @example Default Behavior
+ * ```tsx
+ * import { matchPhone, render } from "@react-md/core/test-utils";
+ * import { spyOnMatchMedia } from "@react-md/core/test-utils/jest-globals";
+ *
+ * const matchMedia = spyOnMatchMedia();
+ * render(<Test />);
+ *
+ * // expect desktop results
+ *
+ * matchMedia.changeViewport(matchPhone);
+ * // expect phone results
+ * ```
+ *
+ * @example Set Default Media
+ * ```tsx
+ * import { matchPhone, render } from "@react-md/core/test-utils";
+ * import { spyOnMatchMedia } from "@react-md/core/test-utils/jest-globals";
+ *
+ * const matchMedia = spyOnMatchMedia(matchPhone);
+ * render(<Test />);
+ *
+ * // expect phone results
+ * ```
+ *
+ * @since 6.0.0
+ */ export function spyOnMatchMedia(defaultMatch = matchDesktop) {
+    return createMatchMediaSpy(jest.spyOn(window, "matchMedia"), defaultMatch);
+}
+
+//# sourceMappingURL=match-media.js.map

package/dist/test-utils/jest-globals/match-media.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/test-utils/jest-globals/match-media.ts"],"sourcesContent":["import { jest } from \"@jest/globals\";\n\nimport {\n  type MatchMediaChangeViewport,\n  createMatchMediaSpy,\n} from \"../mocks/match-media-implementation.js\";\nimport { type MatchMediaMatcher, matchDesktop } from \"../mocks/match-media.js\";\n\n/**\n * @example Default Behavior\n * ```tsx\n * import { matchPhone, render } from \"@react-md/core/test-utils\";\n * import { spyOnMatchMedia } from \"@react-md/core/test-utils/jest-globals\";\n *\n * const matchMedia = spyOnMatchMedia();\n * render(<Test />);\n *\n * // expect desktop results\n *\n * matchMedia.changeViewport(matchPhone);\n * // expect phone results\n * ```\n *\n * @example Set Default Media\n * ```tsx\n * import { matchPhone, render } from \"@react-md/core/test-utils\";\n * import { spyOnMatchMedia } from \"@react-md/core/test-utils/jest-globals\";\n *\n * const matchMedia = spyOnMatchMedia(matchPhone);\n * render(<Test />);\n *\n * // expect phone results\n * ```\n *\n * @since 6.0.0\n */\nexport function spyOnMatchMedia(\n  defaultMatch: MatchMediaMatcher = matchDesktop\n): jest.SpiedFunction<typeof window.matchMedia> & MatchMediaChangeViewport {\n  return createMatchMediaSpy(jest.spyOn(window, \"matchMedia\"), defaultMatch);\n}\n"],"names":["jest","createMatchMediaSpy","matchDesktop","spyOnMatchMedia","defaultMatch","spyOn","window"],"mappings":"AAAA,SAASA,IAAI,QAAQ,gBAAgB;AAErC,SAEEC,mBAAmB,QACd,yCAAyC;AAChD,SAAiCC,YAAY,QAAQ,0BAA0B;AAE/E;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,SAASC,gBACdC,eAAkCF,YAAY;IAE9C,OAAOD,oBAAoBD,KAAKK,KAAK,CAACC,QAAQ,eAAeF;AAC/D"}

package/dist/test-utils/jest-globals/resize-observer.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @param restoreAllMocks - Set to `false` to prevent `jest.restoreAllMocks()` from being
+ * called.
+ */
+export declare function cleanupResizeObserverAfterEach(restoreAllMocks?: boolean): void;

package/dist/test-utils/jest-globals/resize-observer.js

@@ -0,0 +1,10 @@
+import { afterEach, jest } from "@jest/globals";
+import { cleanupResizeObserverAfterEach as cleanup } from "../mocks/ResizeObserver.js";
+/**
+ * @param restoreAllMocks - Set to `false` to prevent `jest.restoreAllMocks()` from being
+ * called.
+ */ export function cleanupResizeObserverAfterEach(restoreAllMocks = true) {
+    cleanup(afterEach, restoreAllMocks ? jest.restoreAllMocks : undefined);
+}
+
+//# sourceMappingURL=resize-observer.js.map

package/dist/test-utils/jest-globals/resize-observer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/test-utils/jest-globals/resize-observer.ts"],"sourcesContent":["import { afterEach, jest } from \"@jest/globals\";\n\nimport { cleanupResizeObserverAfterEach as cleanup } from \"../mocks/ResizeObserver.js\";\n\n/**\n * @param restoreAllMocks - Set to `false` to prevent `jest.restoreAllMocks()` from being\n * called.\n */\nexport function cleanupResizeObserverAfterEach(restoreAllMocks = true): void {\n  cleanup(afterEach, restoreAllMocks ? jest.restoreAllMocks : undefined);\n}\n"],"names":["afterEach","jest","cleanupResizeObserverAfterEach","cleanup","restoreAllMocks","undefined"],"mappings":"AAAA,SAASA,SAAS,EAAEC,IAAI,QAAQ,gBAAgB;AAEhD,SAASC,kCAAkCC,OAAO,QAAQ,6BAA6B;AAEvF;;;CAGC,GACD,OAAO,SAASD,+BAA+BE,kBAAkB,IAAI;IACnED,QAAQH,WAAWI,kBAAkBH,KAAKG,eAAe,GAAGC;AAC9D"}

package/dist/test-utils/jest-globals/setup.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/jest-globals";

package/dist/test-utils/{jest-setup.js → jest-globals/setup.js}

@@ -1,6 +1,7 @@
 import { beforeEach } from "@jest/globals";
-import { INTERACTION_CONFIG } from "../interaction/config.js";
-import { TRANSITION_CONFIG } from "../transition/config.js";
+import "@testing-library/jest-dom/jest-globals";
+import { INTERACTION_CONFIG } from "../../interaction/config.js";
+import { TRANSITION_CONFIG } from "../../transition/config.js";
 beforeEach(()=>{
     // set the mode to `none` in tests since ripples require
     // `getBoundingClientRect()` to create correct CSS. You'll either see warnings
@@ -10,4 +11,4 @@ beforeEach(()=>{
     TRANSITION_CONFIG.disabled = true;
 });
 
-//# sourceMappingURL=jest-setup.js.map
+//# sourceMappingURL=setup.js.map

package/dist/test-utils/jest-globals/setup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/test-utils/jest-globals/setup.ts"],"sourcesContent":["import { beforeEach } from \"@jest/globals\";\nimport \"@testing-library/jest-dom/jest-globals\";\n\nimport { INTERACTION_CONFIG } from \"../../interaction/config.js\";\nimport { TRANSITION_CONFIG } from \"../../transition/config.js\";\n\nbeforeEach(() => {\n  // set the mode to `none` in tests since ripples require\n  // `getBoundingClientRect()` to create correct CSS. You'll either see warnings\n  // in the console around invalid css values or `NaN`.\n  INTERACTION_CONFIG.mode = \"none\";\n\n  // disable transitions in tests since it just makes it more difficult\n  TRANSITION_CONFIG.disabled = true;\n});\n"],"names":["beforeEach","INTERACTION_CONFIG","TRANSITION_CONFIG","mode","disabled"],"mappings":"AAAA,SAASA,UAAU,QAAQ,gBAAgB;AAC3C,OAAO,yCAAyC;AAEhD,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,iBAAiB,QAAQ,6BAA6B;AAE/DF,WAAW;IACT,wDAAwD;IACxD,8EAA8E;IAC9E,qDAAqD;IACrDC,mBAAmBE,IAAI,GAAG;IAE1B,qEAAqE;IACrED,kBAAkBE,QAAQ,GAAG;AAC/B"}

package/dist/test-utils/{timers.d.ts → jest-globals/timers.d.ts}

@@ -6,7 +6,7 @@ export type RafSpy = jest.SpiedFunction<typeof requestAnimationFrame>;
 /**
  * @example
  * ```ts
- * import { testImmediateRaf } from "@react-md/core/test-utils";
+ * import { testImmediateRaf } from "@react-md/core/test-utils/jest-globals";
  *
  * describe("some test suite", () => {
  *   it("should test something with requestAnimationFrame", () => {
@@ -22,7 +22,7 @@ export type RafSpy = jest.SpiedFunction<typeof requestAnimationFrame>;
  *
  * @example Automatic Cleanup
  * ```ts
- * import { testImmediateRaf } from "@react-md/core/test-utils";
+ * import { testImmediateRaf } from "@react-md/core/test-utils/jest-globals";
  *
  * afterEach(() => {
  *   jest.restoreAllMocks();

package/dist/test-utils/{timers.js → jest-globals/timers.js}

@@ -2,7 +2,7 @@ import { jest } from "@jest/globals";
 /**
  * @example
  * ```ts
- * import { testImmediateRaf } from "@react-md/core/test-utils";
+ * import { testImmediateRaf } from "@react-md/core/test-utils/jest-globals";
  *
  * describe("some test suite", () => {
  *   it("should test something with requestAnimationFrame", () => {
@@ -18,7 +18,7 @@ import { jest } from "@jest/globals";
  *
  * @example Automatic Cleanup
  * ```ts
- * import { testImmediateRaf } from "@react-md/core/test-utils";
+ * import { testImmediateRaf } from "@react-md/core/test-utils/jest-globals";
  *
  * afterEach(() => {
  *   jest.restoreAllMocks();

package/dist/test-utils/jest-globals/timers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/test-utils/jest-globals/timers.ts"],"sourcesContent":["import { jest } from \"@jest/globals\";\n\n/**\n * @since 6.0.0\n */\nexport type RafSpy = jest.SpiedFunction<typeof requestAnimationFrame>;\n\n/**\n * @example\n * ```ts\n * import { testImmediateRaf } from \"@react-md/core/test-utils/jest-globals\";\n *\n * describe(\"some test suite\", () => {\n *   it(\"should test something with requestAnimationFrame\", () => {\n *     const raf = testImmediateRaf();\n *\n *     // do some testing with requestAnimationFrame\n *\n *     // reset to original at the end of the test\n *     raf.mockRestore()\n *   });\n * });\n * ```\n *\n * @example Automatic Cleanup\n * ```ts\n * import { testImmediateRaf } from \"@react-md/core/test-utils/jest-globals\";\n *\n * afterEach(() => {\n *   jest.restoreAllMocks();\n * });\n *\n * describe(\"some test suite\", () => {\n *   it(\"should test something with requestAnimationFrame\", () => {\n *     const raf = testImmediateRaf();\n *\n *     // do some testing with requestAnimationFrame\n *   });\n * });\n * ```\n *\n * @since 6.0.0\n */\nexport const testImmediateRaf = (): RafSpy =>\n  jest.spyOn(window, \"requestAnimationFrame\").mockImplementation((cb) => {\n    cb(0);\n    return 0;\n  });\n"],"names":["jest","testImmediateRaf","spyOn","window","mockImplementation","cb"],"mappings":"AAAA,SAASA,IAAI,QAAQ,gBAAgB;AAOrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCC,GACD,OAAO,MAAMC,mBAAmB,IAC9BD,KAAKE,KAAK,CAACC,QAAQ,yBAAyBC,kBAAkB,CAAC,CAACC;QAC9DA,GAAG;QACH,OAAO;IACT,GAAG"}

package/dist/test-utils/jest-globals/uploadMenuItemFileInput.d.ts

@@ -0,0 +1,32 @@
+import { type UserEvent } from "@testing-library/user-event";
+/**
+ * @since 6.0.0
+ */
+export interface UploadMenuItemFileUploadOptions {
+    user: UserEvent;
+    files: File | readonly File[];
+    menuItem: HTMLElement;
+}
+/**
+ * @example Main Example
+ * ```tsx
+ * const user = userEvent.setup()
+ * render(<Test />);
+ *
+ * await user.click(screen.getByRole("button", { name: "Dropdown Menu" }));
+ *
+ * const menuItem = screen.getByRole("menuitem", { name: "Upload" });
+ * const file = new File(["pretend-bytes"], "README.txt");
+ * await uploadMenuItemFileUpload({
+ *   user,
+ *   // can be a single file or multiple
+ *   files: file,
+ *   menuItem,
+ * });
+ *
+ * // expect something with uploaded file
+ * ```
+ *
+ * @since 6.0.0
+ */
+export declare function uploadMenuItemFileUpload(options: UploadMenuItemFileUploadOptions): Promise<void>;

package/dist/test-utils/jest-globals/uploadMenuItemFileInput.js

@@ -0,0 +1,39 @@
+import { jest } from "@jest/globals";
+import { fireEvent } from "@testing-library/dom";
+import { createFileList } from "../utils/createFileList.js";
+/**
+ * @example Main Example
+ * ```tsx
+ * const user = userEvent.setup()
+ * render(<Test />);
+ *
+ * await user.click(screen.getByRole("button", { name: "Dropdown Menu" }));
+ *
+ * const menuItem = screen.getByRole("menuitem", { name: "Upload" });
+ * const file = new File(["pretend-bytes"], "README.txt");
+ * await uploadMenuItemFileUpload({
+ *   user,
+ *   // can be a single file or multiple
+ *   files: file,
+ *   menuItem,
+ * });
+ *
+ * // expect something with uploaded file
+ * ```
+ *
+ * @since 6.0.0
+ */ export async function uploadMenuItemFileUpload(options) {
+    const { user, files, menuItem } = options;
+    const input = document.createElement("input");
+    jest.spyOn(document, "createElement").mockReturnValueOnce(input);
+    jest.spyOn(input, "click").mockImplementationOnce(()=>{
+        fireEvent.change(input, {
+            target: {
+                files: createFileList(window, files)
+            }
+        });
+    });
+    await user.click(menuItem);
+}
+
+//# sourceMappingURL=uploadMenuItemFileInput.js.map

package/dist/test-utils/jest-globals/uploadMenuItemFileInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/test-utils/jest-globals/uploadMenuItemFileInput.ts"],"sourcesContent":["import { jest } from \"@jest/globals\";\nimport { fireEvent } from \"@testing-library/dom\";\nimport { type UserEvent } from \"@testing-library/user-event\";\n\nimport { createFileList } from \"../utils/createFileList.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface UploadMenuItemFileUploadOptions {\n  user: UserEvent;\n  files: File | readonly File[];\n  menuItem: HTMLElement;\n}\n\n/**\n * @example Main Example\n * ```tsx\n * const user = userEvent.setup()\n * render(<Test />);\n *\n * await user.click(screen.getByRole(\"button\", { name: \"Dropdown Menu\" }));\n *\n * const menuItem = screen.getByRole(\"menuitem\", { name: \"Upload\" });\n * const file = new File([\"pretend-bytes\"], \"README.txt\");\n * await uploadMenuItemFileUpload({\n *   user,\n *   // can be a single file or multiple\n *   files: file,\n *   menuItem,\n * });\n *\n * // expect something with uploaded file\n * ```\n *\n * @since 6.0.0\n */\nexport async function uploadMenuItemFileUpload(\n  options: UploadMenuItemFileUploadOptions\n): Promise<void> {\n  const { user, files, menuItem } = options;\n\n  const input = document.createElement(\"input\");\n  jest.spyOn(document, \"createElement\").mockReturnValueOnce(input);\n  jest.spyOn(input, \"click\").mockImplementationOnce(() => {\n    fireEvent.change(input, {\n      target: { files: createFileList(window, files) },\n    });\n  });\n\n  await user.click(menuItem);\n}\n"],"names":["jest","fireEvent","createFileList","uploadMenuItemFileUpload","options","user","files","menuItem","input","document","createElement","spyOn","mockReturnValueOnce","mockImplementationOnce","change","target","window","click"],"mappings":"AAAA,SAASA,IAAI,QAAQ,gBAAgB;AACrC,SAASC,SAAS,QAAQ,uBAAuB;AAGjD,SAASC,cAAc,QAAQ,6BAA6B;AAW5D;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,eAAeC,yBACpBC,OAAwC;IAExC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGH;IAElC,MAAMI,QAAQC,SAASC,aAAa,CAAC;IACrCV,KAAKW,KAAK,CAACF,UAAU,iBAAiBG,mBAAmB,CAACJ;IAC1DR,KAAKW,KAAK,CAACH,OAAO,SAASK,sBAAsB,CAAC;QAChDZ,UAAUa,MAAM,CAACN,OAAO;YACtBO,QAAQ;gBAAET,OAAOJ,eAAec,QAAQV;YAAO;QACjD;IACF;IAEA,MAAMD,KAAKY,KAAK,CAACV;AACnB"}

package/dist/test-utils/mocks/IntersectionObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/test-utils/mocks/IntersectionObserver.ts"],"sourcesContent":["export class IntersectionObserverMock implements IntersectionObserver {\n  root: Document | Element | null;\n  rootMargin: string;\n  thresholds: readonly number[];\n\n  elements: Set<Element>;\n\n  constructor(\n    public callback: IntersectionObserverCallback,\n    options: IntersectionObserverInit = {}\n  ) {\n    this.root = options.root || null;\n    this.rootMargin = options.rootMargin || \"\";\n    this.thresholds =\n      typeof options.threshold === \"number\"\n        ? [options.threshold]\n        : (options.threshold ?? []);\n\n    this.elements = new Set();\n  }\n\n  observe(target: Element): void {\n    this.elements.add(target);\n\n    this.callback(this.takeRecords(), this);\n  }\n\n  unobserve(target: Element): void {\n    this.elements.delete(target);\n  }\n\n  takeRecords(): IntersectionObserverEntry[] {\n    return [...this.elements].map<IntersectionObserverEntry>((target) => ({\n      time: Date.now(),\n      target,\n      boundingClientRect: target.getBoundingClientRect(),\n      intersectionRatio: 0,\n      intersectionRect: target.getBoundingClientRect(),\n      isIntersecting: false,\n      rootBounds:\n        this.root && \"getBoundingClientRect\" in this.root\n          ? this.root.getBoundingClientRect()\n          : null,\n    }));\n  }\n\n  disconnect(): void {\n    this.elements.clear();\n  }\n}\n"],"names":["IntersectionObserverMock","observe","target","elements","add","callback","takeRecords","unobserve","delete","map","time","Date","now","boundingClientRect","getBoundingClientRect","intersectionRatio","intersectionRect","isIntersecting","rootBounds","root","disconnect","clear","constructor","options","rootMargin","thresholds","threshold","Set"],"mappings":";;;;;;;;;;;;;AAAA,OAAO,MAAMA;IAqBXC,QAAQC,MAAe,EAAQ;QAC7B,IAAI,CAACC,QAAQ,CAACC,GAAG,CAACF;QAElB,IAAI,CAACG,QAAQ,CAAC,IAAI,CAACC,WAAW,IAAI,IAAI;IACxC;IAEAC,UAAUL,MAAe,EAAQ;QAC/B,IAAI,CAACC,QAAQ,CAACK,MAAM,CAACN;IACvB;IAEAI,cAA2C;QACzC,OAAO;eAAI,IAAI,CAACH,QAAQ;SAAC,CAACM,GAAG,CAA4B,CAACP,SAAY,CAAA;gBACpEQ,MAAMC,KAAKC,GAAG;gBACdV;gBACAW,oBAAoBX,OAAOY,qBAAqB;gBAChDC,mBAAmB;gBACnBC,kBAAkBd,OAAOY,qBAAqB;gBAC9CG,gBAAgB;gBAChBC,YACE,IAAI,CAACC,IAAI,IAAI,2BAA2B,IAAI,CAACA,IAAI,GAC7C,IAAI,CAACA,IAAI,CAACL,qBAAqB,KAC/B;YACR,CAAA;IACF;IAEAM,aAAmB;QACjB,IAAI,CAACjB,QAAQ,CAACkB,KAAK;IACrB;IAzCAC,YACE,AAAOjB,QAAsC,EAC7CkB,UAAoC,CAAC,CAAC,CACtC;;QATFJ,uBAAAA,QAAAA,KAAAA;QACAK,uBAAAA,cAAAA,KAAAA;QACAC,uBAAAA,cAAAA,KAAAA;QAEAtB,uBAAAA,YAAAA,KAAAA;aAGSE,WAAAA;QAGP,IAAI,CAACc,IAAI,GAAGI,QAAQJ,IAAI,IAAI;QAC5B,IAAI,CAACK,UAAU,GAAGD,QAAQC,UAAU,IAAI;QACxC,IAAI,CAACC,UAAU,GACb,OAAOF,QAAQG,SAAS,KAAK,WACzB;YAACH,QAAQG,SAAS;SAAC,GAClBH,QAAQG,SAAS,IAAI,EAAE;QAE9B,IAAI,CAACvB,QAAQ,GAAG,IAAIwB;IACtB;AA8BF"}

package/dist/test-utils/{ResizeObserver.d.ts → mocks/ResizeObserver.d.ts}

@@ -1,22 +1,5 @@
-import { type ResizeObserverManager } from "../useResizeObserver.js";
-/**
- * @since 6.0.0
- */
-export interface ResizeObserverEntrySize {
-    height?: number;
-    width?: number;
-}
-/**
- * @since 6.0.0
- */
-export type GetResizeObserverEntryMock = (target: Element, size?: ResizeObserverEntrySize) => ResizeObserverEntry;
-/**
- * This is mostly an internal function to be used with the {@link ResizeObserverMock}
- * and {@link setupResizeObserverMock}
- *
- * @since 6.0.0
- */
-export declare const createResizeObserverEntry: GetResizeObserverEntryMock;
+import { type ResizeObserverManager } from "../../useResizeObserver.js";
+import { type GetResizeObserverEntryMock, type ResizeObserverEntrySize } from "../utils/createResizeObserverEntry.js";
 /**
  * This is the default ResizeObserver implementation if it does not already
  * exist in jsdom. You normally should not use this directly and instead use the
@@ -44,7 +27,12 @@ export declare class ResizeObserverMock implements ResizeObserver {
      * import { useResizeObserver } from "@react-md/core";
      * import { ExampleComponent } from "../ExampleComponent.js";
      *
-     * cleanupResizeObserverAfterEach();
+     * // choose your test framework
+     * import { afterEach, jest } from "@jest/globals";
+     * cleanupResizeObserverAfterEach(afterEach, jest.restoreAllMocks);
+     *
+     * import { afterEach, vitest } from "vitest";
+     * cleanupResizeObserverAfterEach(afterEach, vitest.restoreAllMocks);
      *
      * describe("ExampleComponent", () => {
      *   it("should do stuff", () => {
@@ -148,6 +136,13 @@ export interface SetupResizeObserverMockOptions {
  * import { useResizeObserver } from "@react-md/core/useResizeObserver";
  * import { useCallback, useState } from "react";
  *
+ * // choose your test framework
+ * import { afterEach, jest } from "@jest/globals";
+ * cleanupResizeObserverAfterEach(afterEach, jest.restoreAllMocks);
+ *
+ * import { afterEach, vitest } from "vitest";
+ * cleanupResizeObserverAfterEach(afterEach, vitest.restoreAllMocks);
+ *
  * function ExampleComponent() {
  *   const [size, setSize] = useState({ height: 0, width: 0 });
  *   const ref = useResizeObserver({
@@ -167,8 +162,6 @@ export interface SetupResizeObserverMockOptions {
  *   );
  * }
  *
- * cleanupResizeObserverAfterEach();
- *
  * describe("ExampleComponent", () => {
  *   it("should do stuff", () => {
  *     const observer = setupResizeObserverMock();
@@ -208,4 +201,4 @@ export declare function setupResizeObserverMock(options?: SetupResizeObserverMoc
  * @see {@link setupResizeObserverMock}
  * @since 6.0.0
  */
-export declare function cleanupResizeObserverAfterEach(restoreAllMocks?: boolean): void;
+export declare function cleanupResizeObserverAfterEach(afterEach: (callback: () => void) => void, restoreAllMocks?: () => void): void;

package/dist/test-utils/{ResizeObserver.js → mocks/ResizeObserver.js}

@@ -11,37 +11,8 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
-import { afterEach, jest } from "@jest/globals";
-import { resizeObserverManager } from "../useResizeObserver.js";
-/**
- * This is mostly an internal function to be used with the {@link ResizeObserverMock}
- * and {@link setupResizeObserverMock}
- *
- * @since 6.0.0
- */ export const createResizeObserverEntry = (target, size)=>{
-    const contentRect = target.getBoundingClientRect();
-    if (typeof size?.height === "number") {
-        contentRect.height = size.height;
-    }
-    if (typeof size?.width === "number") {
-        contentRect.width = size.width;
-    }
-    const boxSize = {
-        blockSize: contentRect.height,
-        inlineSize: contentRect.width
-    };
-    return {
-        target,
-        contentRect,
-        borderBoxSize: [
-            boxSize
-        ],
-        contentBoxSize: [
-            boxSize
-        ],
-        devicePixelContentBoxSize: []
-    };
-};
+import { resizeObserverManager } from "../../useResizeObserver.js";
+import { createResizeObserverEntry } from "../utils/createResizeObserverEntry.js";
 /**
  * This is the default ResizeObserver implementation if it does not already
  * exist in jsdom. You normally should not use this directly and instead use the
@@ -68,7 +39,12 @@ import { resizeObserverManager } from "../useResizeObserver.js";
    * import { useResizeObserver } from "@react-md/core";
    * import { ExampleComponent } from "../ExampleComponent.js";
    *
-   * cleanupResizeObserverAfterEach();
+   * // choose your test framework
+   * import { afterEach, jest } from "@jest/globals";
+   * cleanupResizeObserverAfterEach(afterEach, jest.restoreAllMocks);
+   *
+   * import { afterEach, vitest } from "vitest";
+   * cleanupResizeObserverAfterEach(afterEach, vitest.restoreAllMocks);
    *
    * describe("ExampleComponent", () => {
    *   it("should do stuff", () => {
@@ -183,6 +159,13 @@ import { resizeObserverManager } from "../useResizeObserver.js";
  * import { useResizeObserver } from "@react-md/core/useResizeObserver";
  * import { useCallback, useState } from "react";
  *
+ * // choose your test framework
+ * import { afterEach, jest } from "@jest/globals";
+ * cleanupResizeObserverAfterEach(afterEach, jest.restoreAllMocks);
+ *
+ * import { afterEach, vitest } from "vitest";
+ * cleanupResizeObserverAfterEach(afterEach, vitest.restoreAllMocks);
+ *
  * function ExampleComponent() {
  *   const [size, setSize] = useState({ height: 0, width: 0 });
  *   const ref = useResizeObserver({
@@ -202,8 +185,6 @@ import { resizeObserverManager } from "../useResizeObserver.js";
  *   );
  * }
  *
- * cleanupResizeObserverAfterEach();
- *
  * describe("ExampleComponent", () => {
  *   it("should do stuff", () => {
  *     const observer = setupResizeObserverMock();
@@ -255,14 +236,12 @@ import { resizeObserverManager } from "../useResizeObserver.js";
 /**
  * @see {@link setupResizeObserverMock}
  * @since 6.0.0
- */ export function cleanupResizeObserverAfterEach(restoreAllMocks = true) {
+ */ export function cleanupResizeObserverAfterEach(afterEach, restoreAllMocks = ()=>{}) {
     afterEach(()=>{
         resizeObserverManager.frame = 0;
         resizeObserverManager.subscriptions = new Map();
         resizeObserverManager.sharedObserver = undefined;
-        if (restoreAllMocks) {
-            jest.restoreAllMocks();
-        }
+        restoreAllMocks();
     });
 }