@react-md/core 6.5.1 → 7.0.0

package/dist/table/TableContainerProvider.d.ts

@@ -5,7 +5,7 @@ import { type RefObject } from "react";
  */
 export interface TableContainerContext {
     exists: boolean;
-    containerRef: RefObject<HTMLDivElement>;
+    containerRef: RefObject<HTMLDivElement | null>;
 }
 /**
  * **Client Component**

package/dist/table/TableContainerProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableContainerProvider.ts"],"sourcesContent":["\"use client\";\n\nimport { type RefObject, createContext, useContext } from \"react\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface TableContainerContext {\n  exists: boolean;\n  containerRef: RefObject<HTMLDivElement>;\n}\n\nconst context = createContext<Readonly<TableContainerContext>>({\n  exists: false,\n  containerRef: { current: null },\n});\ncontext.displayName = \"TableContainer\";\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport const { Provider: TableContainerProvider } = context;\n\n/**\n * This is used to implement the sticky header and footer intersection observer\n * behavior.\n *\n * @internal\n * @since 6.0.0\n */\nexport function useTableContainer(): Readonly<TableContainerContext> {\n  return useContext(context);\n}\n"],"names":["createContext","useContext","context","exists","containerRef","current","displayName","Provider","TableContainerProvider","useTableContainer"],"mappings":"AAAA;AAEA,SAAyBA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAWlE,MAAMC,UAAUF,cAA+C;IAC7DG,QAAQ;IACRC,cAAc;QAAEC,SAAS;IAAK;AAChC;AACAH,QAAQI,WAAW,GAAG;AAEtB;;;;;CAKC,GACD,OAAO,MAAM,EAAEC,UAAUC,sBAAsB,EAAE,GAAGN,QAAQ;AAE5D;;;;;;CAMC,GACD,OAAO,SAASO;IACd,OAAOR,WAAWC;AACpB"}
+{"version":3,"sources":["../../src/table/TableContainerProvider.ts"],"sourcesContent":["\"use client\";\n\nimport { type RefObject, createContext, useContext } from \"react\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface TableContainerContext {\n  exists: boolean;\n  containerRef: RefObject<HTMLDivElement | null>;\n}\n\nconst context = createContext<Readonly<TableContainerContext>>({\n  exists: false,\n  containerRef: { current: null },\n});\ncontext.displayName = \"TableContainer\";\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport const { Provider: TableContainerProvider } = context;\n\n/**\n * This is used to implement the sticky header and footer intersection observer\n * behavior.\n *\n * @internal\n * @since 6.0.0\n */\nexport function useTableContainer(): Readonly<TableContainerContext> {\n  return useContext(context);\n}\n"],"names":["createContext","useContext","context","exists","containerRef","current","displayName","Provider","TableContainerProvider","useTableContainer"],"mappings":"AAAA;AAEA,SAAyBA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAWlE,MAAMC,UAAUF,cAA+C;IAC7DG,QAAQ;IACRC,cAAc;QAAEC,SAAS;IAAK;AAChC;AACAH,QAAQI,WAAW,GAAG;AAEtB;;;;;CAKC,GACD,OAAO,MAAM,EAAEC,UAAUC,sBAAsB,EAAE,GAAGN,QAAQ;AAE5D;;;;;;CAMC,GACD,OAAO,SAASO;IACd,OAAOR,WAAWC;AACpB"}

package/dist/table/TableFooter.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 import { type TableSectionConfiguration } from "./types.js";
 export interface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement>, TableSectionConfiguration {
+    ref?: Ref<HTMLTableSectionElement>;
     /**
      * NOTE: It is recommended to use the `StickyTableSection` component instead
      * of enabling this prop since it supports dynamically adding styles while the
@@ -22,4 +23,4 @@ export interface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement
  *
  * @see {@link https://react-md.dev/components/table | Table Demos}
  */
-export declare const TableFooter: import("react").ForwardRefExoticComponent<TableFooterProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+export declare function TableFooter(props: TableFooterProps): ReactElement;

package/dist/table/TableFooter.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { TableConfigProvider } from "./TableConfigurationProvider.js";
 import { tableFooter } from "./tableFooterStyles.js";
 import { useTableSectionConfig } from "./useTableSectionConfig.js";
@@ -13,8 +12,8 @@ import { useTableSectionConfig } from "./useTableSectionConfig.js";
  * `disableNoWrap` props.
  *
  * @see {@link https://react-md.dev/components/table | Table Demos}
- */ export const TableFooter = /*#__PURE__*/ forwardRef(function TableFooter(props, propRef) {
-    const { className, hoverable, lineWrap, children, ...remaining } = props;
+ */ export function TableFooter(props) {
+    const { ref, className, hoverable, lineWrap, children, ...remaining } = props;
     const config = useTableSectionConfig({
         type: "footer",
         lineWrap,
@@ -24,13 +23,13 @@ import { useTableSectionConfig } from "./useTableSectionConfig.js";
         value: config,
         children: /*#__PURE__*/ _jsx("tfoot", {
             ...remaining,
-            ref: propRef,
+            ref: ref,
             className: tableFooter({
                 className
             }),
             children: children
         })
     });
-});
+}
 
 //# sourceMappingURL=TableFooter.js.map

package/dist/table/TableFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableFooter.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { TableConfigProvider } from \"./TableConfigurationProvider.js\";\nimport { tableFooter } from \"./tableFooterStyles.js\";\nimport { type TableSectionConfiguration } from \"./types.js\";\nimport { useTableSectionConfig } from \"./useTableSectionConfig.js\";\n\nexport interface TableFooterProps\n  extends HTMLAttributes<HTMLTableSectionElement>, TableSectionConfiguration {\n  /**\n   * NOTE: It is recommended to use the `StickyTableSection` component instead\n   * of enabling this prop since it supports dynamically adding styles while the\n   * header covering table rows.\n   *\n   * Set this to `true` to enable the sticky behavior.\n   *\n   * @defaultValue `false`\n   */\n  sticky?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * Creates a `<tfoot>` element with some basic styles. This component will\n * disable the hover effect and line wrapping by default, but the hover effect\n * and line-wrapping can be re-enabled if desired through the `hoverable` and\n * `disableNoWrap` props.\n *\n * @see {@link https://react-md.dev/components/table | Table Demos}\n */\nexport const TableFooter = forwardRef<\n  HTMLTableSectionElement,\n  TableFooterProps\n>(function TableFooter(props, propRef) {\n  const { className, hoverable, lineWrap, children, ...remaining } = props;\n\n  const config = useTableSectionConfig({\n    type: \"footer\",\n    lineWrap,\n    hoverable,\n  });\n\n  return (\n    <TableConfigProvider value={config}>\n      <tfoot\n        {...remaining}\n        ref={propRef}\n        className={tableFooter({ className })}\n      >\n        {children}\n      </tfoot>\n    </TableConfigProvider>\n  );\n});\n"],"names":["forwardRef","TableConfigProvider","tableFooter","useTableSectionConfig","TableFooter","props","propRef","className","hoverable","lineWrap","children","remaining","config","type","value","tfoot","ref"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,qBAAqB,QAAQ,6BAA6B;AAgBnE;;;;;;;;;CASC,GACD,OAAO,MAAMC,4BAAcJ,WAGzB,SAASI,YAAYC,KAAK,EAAEC,OAAO;IACnC,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGN;IAEnE,MAAMO,SAAST,sBAAsB;QACnCU,MAAM;QACNJ;QACAD;IACF;IAEA,qBACE,KAACP;QAAoBa,OAAOF;kBAC1B,cAAA,KAACG;YACE,GAAGJ,SAAS;YACbK,KAAKV;YACLC,WAAWL,YAAY;gBAAEK;YAAU;sBAElCG;;;AAIT,GAAG"}
+{"version":3,"sources":["../../src/table/TableFooter.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, type ReactElement, type Ref } from \"react\";\n\nimport { TableConfigProvider } from \"./TableConfigurationProvider.js\";\nimport { tableFooter } from \"./tableFooterStyles.js\";\nimport { type TableSectionConfiguration } from \"./types.js\";\nimport { useTableSectionConfig } from \"./useTableSectionConfig.js\";\n\nexport interface TableFooterProps\n  extends HTMLAttributes<HTMLTableSectionElement>, TableSectionConfiguration {\n  ref?: Ref<HTMLTableSectionElement>;\n\n  /**\n   * NOTE: It is recommended to use the `StickyTableSection` component instead\n   * of enabling this prop since it supports dynamically adding styles while the\n   * header covering table rows.\n   *\n   * Set this to `true` to enable the sticky behavior.\n   *\n   * @defaultValue `false`\n   */\n  sticky?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * Creates a `<tfoot>` element with some basic styles. This component will\n * disable the hover effect and line wrapping by default, but the hover effect\n * and line-wrapping can be re-enabled if desired through the `hoverable` and\n * `disableNoWrap` props.\n *\n * @see {@link https://react-md.dev/components/table | Table Demos}\n */\nexport function TableFooter(props: TableFooterProps): ReactElement {\n  const { ref, className, hoverable, lineWrap, children, ...remaining } = props;\n\n  const config = useTableSectionConfig({\n    type: \"footer\",\n    lineWrap,\n    hoverable,\n  });\n\n  return (\n    <TableConfigProvider value={config}>\n      <tfoot {...remaining} ref={ref} className={tableFooter({ className })}>\n        {children}\n      </tfoot>\n    </TableConfigProvider>\n  );\n}\n"],"names":["TableConfigProvider","tableFooter","useTableSectionConfig","TableFooter","props","ref","className","hoverable","lineWrap","children","remaining","config","type","value","tfoot"],"mappings":"AAAA;;AAIA,SAASA,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,qBAAqB,QAAQ,6BAA6B;AAkBnE;;;;;;;;;CASC,GACD,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EAAEC,GAAG,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGN;IAExE,MAAMO,SAAST,sBAAsB;QACnCU,MAAM;QACNJ;QACAD;IACF;IAEA,qBACE,KAACP;QAAoBa,OAAOF;kBAC1B,cAAA,KAACG;YAAO,GAAGJ,SAAS;YAAEL,KAAKA;YAAKC,WAAWL,YAAY;gBAAEK;YAAU;sBAChEG;;;AAIT"}

package/dist/table/TableHeader.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 import { type TableSectionConfiguration } from "./types.js";
 export interface TableHeaderProps extends HTMLAttributes<HTMLTableSectionElement>, TableSectionConfiguration {
+    ref?: Ref<HTMLTableSectionElement>;
     /**
      * NOTE: It is recommended to use the `StickyTableSection` component instead
      * of enabling this prop since it supports dynamically adding styles while the
@@ -24,4 +25,4 @@ export interface TableHeaderProps extends HTMLAttributes<HTMLTableSectionElement
  *
  * @see {@link https://react-md.dev/components/table | Table Demos}
  */
-export declare const TableHeader: import("react").ForwardRefExoticComponent<TableHeaderProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+export declare function TableHeader(props: TableHeaderProps): ReactElement;

package/dist/table/TableHeader.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { TableConfigProvider } from "./TableConfigurationProvider.js";
 import { tableHeader } from "./tableHeaderStyles.js";
 import { useTableSectionConfig } from "./useTableSectionConfig.js";
@@ -15,8 +14,8 @@ import { useTableSectionConfig } from "./useTableSectionConfig.js";
  * `disableNoWrap` props.
  *
  * @see {@link https://react-md.dev/components/table | Table Demos}
- */ export const TableHeader = /*#__PURE__*/ forwardRef(function TableHeader(props, propRef) {
-    const { className, sticky, lineWrap, hoverable, children, ...remaining } = props;
+ */ export function TableHeader(props) {
+    const { ref, className, sticky, lineWrap, hoverable, children, ...remaining } = props;
     const config = useTableSectionConfig({
         type: "header",
         lineWrap,
@@ -27,7 +26,7 @@ import { useTableSectionConfig } from "./useTableSectionConfig.js";
         value: config,
         children: /*#__PURE__*/ _jsx("thead", {
             ...remaining,
-            ref: propRef,
+            ref: ref,
             className: tableHeader({
                 className,
                 dense,
@@ -36,6 +35,6 @@ import { useTableSectionConfig } from "./useTableSectionConfig.js";
             children: children
         })
     });
-});
+}
 
 //# sourceMappingURL=TableHeader.js.map

package/dist/table/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableHeader.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { TableConfigProvider } from \"./TableConfigurationProvider.js\";\nimport { tableHeader } from \"./tableHeaderStyles.js\";\nimport { type TableSectionConfiguration } from \"./types.js\";\nimport { useTableSectionConfig } from \"./useTableSectionConfig.js\";\n\nexport interface TableHeaderProps\n  extends HTMLAttributes<HTMLTableSectionElement>, TableSectionConfiguration {\n  /**\n   * NOTE: It is recommended to use the `StickyTableSection` component instead\n   * of enabling this prop since it supports dynamically adding styles while the\n   * header covering table rows.\n   *\n   * Set this to `true` to enable the sticky behavior.\n   *\n   * @defaultValue `false`\n   */\n  sticky?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * Creates a `<thead>` element with some basic styles. This component will also\n * update the table configuration so that all the `TableCell` children will\n * automatically become `<th>` elements instead of the normal `<td>` as well as\n * disabling the hover effect and line wrapping. The hover effect and\n * line-wrapping can be re-enabled if desired through the `hoverable` and\n * `disableNoWrap` props.\n *\n * @see {@link https://react-md.dev/components/table | Table Demos}\n */\nexport const TableHeader = forwardRef<\n  HTMLTableSectionElement,\n  TableHeaderProps\n>(function TableHeader(props, propRef) {\n  const { className, sticky, lineWrap, hoverable, children, ...remaining } =\n    props;\n\n  const config = useTableSectionConfig({\n    type: \"header\",\n    lineWrap,\n    hoverable,\n  });\n  const { dense } = config;\n\n  return (\n    <TableConfigProvider value={config}>\n      <thead\n        {...remaining}\n        ref={propRef}\n        className={tableHeader({\n          className,\n          dense,\n          sticky,\n        })}\n      >\n        {children}\n      </thead>\n    </TableConfigProvider>\n  );\n});\n"],"names":["forwardRef","TableConfigProvider","tableHeader","useTableSectionConfig","TableHeader","props","propRef","className","sticky","lineWrap","hoverable","children","remaining","config","type","dense","value","thead","ref"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,qBAAqB,QAAQ,6BAA6B;AAgBnE;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,4BAAcJ,WAGzB,SAASI,YAAYC,KAAK,EAAEC,OAAO;IACnC,MAAM,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GACtEP;IAEF,MAAMQ,SAASV,sBAAsB;QACnCW,MAAM;QACNL;QACAC;IACF;IACA,MAAM,EAAEK,KAAK,EAAE,GAAGF;IAElB,qBACE,KAACZ;QAAoBe,OAAOH;kBAC1B,cAAA,KAACI;YACE,GAAGL,SAAS;YACbM,KAAKZ;YACLC,WAAWL,YAAY;gBACrBK;gBACAQ;gBACAP;YACF;sBAECG;;;AAIT,GAAG"}
+{"version":3,"sources":["../../src/table/TableHeader.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, type ReactElement, type Ref } from \"react\";\n\nimport { TableConfigProvider } from \"./TableConfigurationProvider.js\";\nimport { tableHeader } from \"./tableHeaderStyles.js\";\nimport { type TableSectionConfiguration } from \"./types.js\";\nimport { useTableSectionConfig } from \"./useTableSectionConfig.js\";\n\nexport interface TableHeaderProps\n  extends HTMLAttributes<HTMLTableSectionElement>, TableSectionConfiguration {\n  ref?: Ref<HTMLTableSectionElement>;\n\n  /**\n   * NOTE: It is recommended to use the `StickyTableSection` component instead\n   * of enabling this prop since it supports dynamically adding styles while the\n   * header covering table rows.\n   *\n   * Set this to `true` to enable the sticky behavior.\n   *\n   * @defaultValue `false`\n   */\n  sticky?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * Creates a `<thead>` element with some basic styles. This component will also\n * update the table configuration so that all the `TableCell` children will\n * automatically become `<th>` elements instead of the normal `<td>` as well as\n * disabling the hover effect and line wrapping. The hover effect and\n * line-wrapping can be re-enabled if desired through the `hoverable` and\n * `disableNoWrap` props.\n *\n * @see {@link https://react-md.dev/components/table | Table Demos}\n */\nexport function TableHeader(props: TableHeaderProps): ReactElement {\n  const {\n    ref,\n    className,\n    sticky,\n    lineWrap,\n    hoverable,\n    children,\n    ...remaining\n  } = props;\n\n  const config = useTableSectionConfig({\n    type: \"header\",\n    lineWrap,\n    hoverable,\n  });\n  const { dense } = config;\n\n  return (\n    <TableConfigProvider value={config}>\n      <thead\n        {...remaining}\n        ref={ref}\n        className={tableHeader({\n          className,\n          dense,\n          sticky,\n        })}\n      >\n        {children}\n      </thead>\n    </TableConfigProvider>\n  );\n}\n"],"names":["TableConfigProvider","tableHeader","useTableSectionConfig","TableHeader","props","ref","className","sticky","lineWrap","hoverable","children","remaining","config","type","dense","value","thead"],"mappings":"AAAA;;AAIA,SAASA,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,qBAAqB,QAAQ,6BAA6B;AAkBnE;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EACJC,GAAG,EACHC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ,GAAGP;IAEJ,MAAMQ,SAASV,sBAAsB;QACnCW,MAAM;QACNL;QACAC;IACF;IACA,MAAM,EAAEK,KAAK,EAAE,GAAGF;IAElB,qBACE,KAACZ;QAAoBe,OAAOH;kBAC1B,cAAA,KAACI;YACE,GAAGL,SAAS;YACbN,KAAKA;YACLC,WAAWL,YAAY;gBACrBK;gBACAQ;gBACAP;YACF;sBAECG;;;AAIT"}

package/dist/table/TableRadio.d.ts

@@ -1,4 +1,4 @@
-import { type TdHTMLAttributes } from "react";
+import { type ReactElement, type Ref, type TdHTMLAttributes } from "react";
 import { type RadioProps } from "../form/InputToggle.js";
 import { type PropsWithRef } from "../types.js";
 /**
@@ -13,6 +13,7 @@ export type TableRadioSupportedRadioProps = Pick<RadioProps, "name" | "value" |
  * @since 6.0.0
  */
 export interface TableRadioProps extends TableRadioTdHTMLAttributes, TableRadioSupportedRadioProps {
+    ref?: Ref<HTMLTableCellElement>;
     /**
      * @defaultValue `!props["aria-labelledby"] ? "Select Row" : undefined`
      */
@@ -102,4 +103,4 @@ export interface TableRadioProps extends TableRadioTdHTMLAttributes, TableRadioS
  * @see {@link https://react-md.dev/components/table | Table Demos}
  * @since 6.0.0
  */
-export declare const TableRadio: import("react").ForwardRefExoticComponent<TableRadioProps & import("react").RefAttributes<HTMLTableCellElement>>;
+export declare function TableRadio(props: TableRadioProps): ReactElement;

package/dist/table/TableRadio.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { Radio } from "../form/Radio.js";
 import { TableCell } from "./TableCell.js";
 const noop = ()=>{
@@ -71,8 +70,8 @@ const noop = ()=>{
  *
  * @see {@link https://react-md.dev/components/table | Table Demos}
  * @since 6.0.0
- */ export const TableRadio = /*#__PURE__*/ forwardRef(function TableRadio(props, ref) {
-    const { "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel = !ariaLabelledBy ? "Select Row" : undefined, "aria-controls": ariaControls, name, icon, iconProps, iconStyle, iconClassName, checkedIcon, value, checked, onChange, defaultChecked, radioProps, onClick = noop, error, required, onInvalid, ...remaining } = props;
+ */ export function TableRadio(props) {
+    const { ref, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel = !ariaLabelledBy ? "Select Row" : undefined, "aria-controls": ariaControls, name, icon, iconProps, iconStyle, iconClassName, checkedIcon, value, checked, onChange, defaultChecked, radioProps, onClick = noop, error, required, onInvalid, ...remaining } = props;
     return /*#__PURE__*/ _jsx(TableCell, {
         ...remaining,
         ref: ref,
@@ -102,6 +101,6 @@ const noop = ()=>{
             ...radioProps
         })
     });
-});
+}
 
 //# sourceMappingURL=TableRadio.js.map

package/dist/table/TableRadio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableRadio.tsx"],"sourcesContent":["\"use client\";\n\nimport { type TdHTMLAttributes, forwardRef } from \"react\";\n\nimport { type RadioProps } from \"../form/InputToggle.js\";\nimport { Radio } from \"../form/Radio.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TableCell } from \"./TableCell.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type TableRadioTdHTMLAttributes = Omit<\n  TdHTMLAttributes<HTMLTableCellElement>,\n  \"aria-sort\" | \"scope\" | \"onChange\" | \"onInvalid\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type TableRadioSupportedRadioProps = Pick<\n  RadioProps,\n  | \"name\"\n  | \"value\"\n  | \"icon\"\n  | \"iconStyle\"\n  | \"iconClassName\"\n  | \"iconProps\"\n  | \"checkedIcon\"\n  | \"checked\"\n  | \"onChange\"\n  | \"defaultChecked\"\n  | \"error\"\n  | \"required\"\n  | \"onInvalid\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface TableRadioProps\n  extends TableRadioTdHTMLAttributes, TableRadioSupportedRadioProps {\n  /**\n   * @defaultValue `!props[\"aria-labelledby\"] ? \"Select Row\" : undefined`\n   */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `false` */\n  sticky?: boolean;\n\n  /**\n   * This allows you to override any props for the radio that are not\n   * configurable as top-level props.\n   *\n   * @example Simple Example\n   * ```tsx\n   * radioProps={{\n   *   id: \"some-custom-id\",\n   *   ref: radioRef,\n   * }}\n   * ```\n   *\n   * @see {@link TableRadioSupportedRadioProps}\n   * @since 6.0.0\n   */\n  radioProps?: PropsWithRef<RadioProps>;\n}\n\n/**\n * **Client Component**\n * The `TableRadio` is used to render a `Radio` within a `TableCell` by applying\n * some minimal styles.\n *\n * @example Simple Example\n * ```tsx\n * import { useRadioGroup } from \"@react-md/core/form/useRadioGroup\";\n * import { Table } from \"@react-md/core/table/Table\";\n * import { TableBody } from \"@react-md/core/table/TableBody\";\n * import { TableCell } from \"@react-md/core/table/TableCell\";\n * import { TableContainer } from \"@react-md/core/table/TableContainer\";\n * import { TableHeader } from \"@react-md/core/table/TableHeader\";\n * import { TableRadio } from \"@react-md/core/table/TableRadio\";\n * import { TableRow } from \"@react-md/core/table/TableRow\";\n * import type { ReactElement } from \"react\";\n *\n * const rows = [\n *   { name: \"Frozen Yogurt\", type: \"Ice Cream\" },\n *   { name: \"Ice cream sandwich\", type: \"Ice Cream\" },\n *   { name: \"Eclair\", type: \"Pastry\" },\n *   // ...other content\n * ] as const;\n *\n * function Example(): ReactElement {\n *   const { getRadioProps } = useRadioGroup({\n *     name: \"selected\",\n *   });\n *   return (\n *     <TableContainer>\n *       <Table>\n *         <TableHeader>\n *           <TableRow>\n *             <TableCell header={false} />\n *             <TableCell>Name</TableCell>\n *             <TableCell>Type</TableCell>\n *           </TableRow>\n *         </TableHeader>\n *         <TableBody>\n *           {rows.map(({ name, type }) => {\n *             const radioProps = getRadioProps(name);\n *             const { checked, onChange } = radioProps;\n *\n *             return (\n *               <TableRow\n *                 key={name}\n *                 onClick={onChange}\n *                 clickable\n *                 selected={checked}\n *               >\n *                 <TableRadio {...radioProps} />\n *                 <TableCell>{name}</TableCell>\n *                 <TableCell hAlign=\"right\">{type}</TableCell>\n *               </TableRow>\n *             );\n *           })}\n *         </TableBody>\n *       </Table>\n *     </TableContainer>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/table | Table Demos}\n * @since 6.0.0\n */\nexport const TableRadio = forwardRef<HTMLTableCellElement, TableRadioProps>(\n  function TableRadio(props, ref) {\n    const {\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-label\": ariaLabel = !ariaLabelledBy ? \"Select Row\" : undefined,\n      \"aria-controls\": ariaControls,\n      name,\n      icon,\n      iconProps,\n      iconStyle,\n      iconClassName,\n      checkedIcon,\n      value,\n      checked,\n      onChange,\n      defaultChecked,\n      radioProps,\n      onClick = noop,\n      error,\n      required,\n      onInvalid,\n      ...remaining\n    } = props;\n\n    return (\n      <TableCell\n        {...remaining}\n        ref={ref}\n        header={false}\n        inputToggle\n        onClick={(event) => {\n          event.stopPropagation();\n          onClick(event);\n        }}\n      >\n        <Radio\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-controls={ariaControls}\n          name={name}\n          icon={icon}\n          iconProps={iconProps}\n          iconStyle={iconStyle}\n          iconClassName={iconClassName}\n          checkedIcon={checkedIcon}\n          value={value}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          error={error}\n          required={required}\n          onChange={onChange}\n          onInvalid={onInvalid}\n          {...radioProps}\n        />\n      </TableCell>\n    );\n  }\n);\n"],"names":["forwardRef","Radio","TableCell","noop","TableRadio","props","ref","ariaLabelledBy","ariaLabel","undefined","ariaControls","name","icon","iconProps","iconStyle","iconClassName","checkedIcon","value","checked","onChange","defaultChecked","radioProps","onClick","error","required","onInvalid","remaining","header","inputToggle","event","stopPropagation","aria-label","aria-labelledby","aria-controls"],"mappings":"AAAA;;AAEA,SAAgCA,UAAU,QAAQ,QAAQ;AAG1D,SAASC,KAAK,QAAQ,mBAAmB;AAEzC,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,MAAMC,OAAO;AACX,aAAa;AACf;AA6DA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiEC,GACD,OAAO,MAAMC,2BAAaJ,WACxB,SAASI,WAAWC,KAAK,EAAEC,GAAG;IAC5B,MAAM,EACJ,mBAAmBC,cAAc,EACjC,cAAcC,YAAY,CAACD,iBAAiB,eAAeE,SAAS,EACpE,iBAAiBC,YAAY,EAC7BC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,WAAW,EACXC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,cAAc,EACdC,UAAU,EACVC,UAAUnB,IAAI,EACdoB,KAAK,EACLC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACJ,GAAGrB;IAEJ,qBACE,KAACH;QACE,GAAGwB,SAAS;QACbpB,KAAKA;QACLqB,QAAQ;QACRC,WAAW;QACXN,SAAS,CAACO;YACRA,MAAMC,eAAe;YACrBR,QAAQO;QACV;kBAEA,cAAA,KAAC5B;YACC8B,cAAYvB;YACZwB,mBAAiBzB;YACjB0B,iBAAevB;YACfC,MAAMA;YACNC,MAAMA;YACNC,WAAWA;YACXC,WAAWA;YACXC,eAAeA;YACfC,aAAaA;YACbC,OAAOA;YACPC,SAASA;YACTE,gBAAgBA;YAChBG,OAAOA;YACPC,UAAUA;YACVL,UAAUA;YACVM,WAAWA;YACV,GAAGJ,UAAU;;;AAItB,GACA"}
+{"version":3,"sources":["../../src/table/TableRadio.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type Ref, type TdHTMLAttributes } from \"react\";\n\nimport { type RadioProps } from \"../form/InputToggle.js\";\nimport { Radio } from \"../form/Radio.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TableCell } from \"./TableCell.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type TableRadioTdHTMLAttributes = Omit<\n  TdHTMLAttributes<HTMLTableCellElement>,\n  \"aria-sort\" | \"scope\" | \"onChange\" | \"onInvalid\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type TableRadioSupportedRadioProps = Pick<\n  RadioProps,\n  | \"name\"\n  | \"value\"\n  | \"icon\"\n  | \"iconStyle\"\n  | \"iconClassName\"\n  | \"iconProps\"\n  | \"checkedIcon\"\n  | \"checked\"\n  | \"onChange\"\n  | \"defaultChecked\"\n  | \"error\"\n  | \"required\"\n  | \"onInvalid\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface TableRadioProps\n  extends TableRadioTdHTMLAttributes, TableRadioSupportedRadioProps {\n  ref?: Ref<HTMLTableCellElement>;\n\n  /**\n   * @defaultValue `!props[\"aria-labelledby\"] ? \"Select Row\" : undefined`\n   */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `false` */\n  sticky?: boolean;\n\n  /**\n   * This allows you to override any props for the radio that are not\n   * configurable as top-level props.\n   *\n   * @example Simple Example\n   * ```tsx\n   * radioProps={{\n   *   id: \"some-custom-id\",\n   *   ref: radioRef,\n   * }}\n   * ```\n   *\n   * @see {@link TableRadioSupportedRadioProps}\n   * @since 6.0.0\n   */\n  radioProps?: PropsWithRef<RadioProps>;\n}\n\n/**\n * **Client Component**\n * The `TableRadio` is used to render a `Radio` within a `TableCell` by applying\n * some minimal styles.\n *\n * @example Simple Example\n * ```tsx\n * import { useRadioGroup } from \"@react-md/core/form/useRadioGroup\";\n * import { Table } from \"@react-md/core/table/Table\";\n * import { TableBody } from \"@react-md/core/table/TableBody\";\n * import { TableCell } from \"@react-md/core/table/TableCell\";\n * import { TableContainer } from \"@react-md/core/table/TableContainer\";\n * import { TableHeader } from \"@react-md/core/table/TableHeader\";\n * import { TableRadio } from \"@react-md/core/table/TableRadio\";\n * import { TableRow } from \"@react-md/core/table/TableRow\";\n * import type { ReactElement } from \"react\";\n *\n * const rows = [\n *   { name: \"Frozen Yogurt\", type: \"Ice Cream\" },\n *   { name: \"Ice cream sandwich\", type: \"Ice Cream\" },\n *   { name: \"Eclair\", type: \"Pastry\" },\n *   // ...other content\n * ] as const;\n *\n * function Example(): ReactElement {\n *   const { getRadioProps } = useRadioGroup({\n *     name: \"selected\",\n *   });\n *   return (\n *     <TableContainer>\n *       <Table>\n *         <TableHeader>\n *           <TableRow>\n *             <TableCell header={false} />\n *             <TableCell>Name</TableCell>\n *             <TableCell>Type</TableCell>\n *           </TableRow>\n *         </TableHeader>\n *         <TableBody>\n *           {rows.map(({ name, type }) => {\n *             const radioProps = getRadioProps(name);\n *             const { checked, onChange } = radioProps;\n *\n *             return (\n *               <TableRow\n *                 key={name}\n *                 onClick={onChange}\n *                 clickable\n *                 selected={checked}\n *               >\n *                 <TableRadio {...radioProps} />\n *                 <TableCell>{name}</TableCell>\n *                 <TableCell hAlign=\"right\">{type}</TableCell>\n *               </TableRow>\n *             );\n *           })}\n *         </TableBody>\n *       </Table>\n *     </TableContainer>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/table | Table Demos}\n * @since 6.0.0\n */\nexport function TableRadio(props: TableRadioProps): ReactElement {\n  const {\n    ref,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel = !ariaLabelledBy ? \"Select Row\" : undefined,\n    \"aria-controls\": ariaControls,\n    name,\n    icon,\n    iconProps,\n    iconStyle,\n    iconClassName,\n    checkedIcon,\n    value,\n    checked,\n    onChange,\n    defaultChecked,\n    radioProps,\n    onClick = noop,\n    error,\n    required,\n    onInvalid,\n    ...remaining\n  } = props;\n\n  return (\n    <TableCell\n      {...remaining}\n      ref={ref}\n      header={false}\n      inputToggle\n      onClick={(event) => {\n        event.stopPropagation();\n        onClick(event);\n      }}\n    >\n      <Radio\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-controls={ariaControls}\n        name={name}\n        icon={icon}\n        iconProps={iconProps}\n        iconStyle={iconStyle}\n        iconClassName={iconClassName}\n        checkedIcon={checkedIcon}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        error={error}\n        required={required}\n        onChange={onChange}\n        onInvalid={onInvalid}\n        {...radioProps}\n      />\n    </TableCell>\n  );\n}\n"],"names":["Radio","TableCell","noop","TableRadio","props","ref","ariaLabelledBy","ariaLabel","undefined","ariaControls","name","icon","iconProps","iconStyle","iconClassName","checkedIcon","value","checked","onChange","defaultChecked","radioProps","onClick","error","required","onInvalid","remaining","header","inputToggle","event","stopPropagation","aria-label","aria-labelledby","aria-controls"],"mappings":"AAAA;;AAKA,SAASA,KAAK,QAAQ,mBAAmB;AAEzC,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,MAAMC,OAAO;AACX,aAAa;AACf;AA+DA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiEC,GACD,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EACJC,GAAG,EACH,mBAAmBC,cAAc,EACjC,cAAcC,YAAY,CAACD,iBAAiB,eAAeE,SAAS,EACpE,iBAAiBC,YAAY,EAC7BC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,WAAW,EACXC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,cAAc,EACdC,UAAU,EACVC,UAAUnB,IAAI,EACdoB,KAAK,EACLC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACJ,GAAGrB;IAEJ,qBACE,KAACH;QACE,GAAGwB,SAAS;QACbpB,KAAKA;QACLqB,QAAQ;QACRC,WAAW;QACXN,SAAS,CAACO;YACRA,MAAMC,eAAe;YACrBR,QAAQO;QACV;kBAEA,cAAA,KAAC5B;YACC8B,cAAYvB;YACZwB,mBAAiBzB;YACjB0B,iBAAevB;YACfC,MAAMA;YACNC,MAAMA;YACNC,WAAWA;YACXC,WAAWA;YACXC,eAAeA;YACfC,aAAaA;YACbC,OAAOA;YACPC,SAASA;YACTE,gBAAgBA;YAChBG,OAAOA;YACPC,UAAUA;YACVL,UAAUA;YACVM,WAAWA;YACV,GAAGJ,UAAU;;;AAItB"}

package/dist/table/TableRow.d.ts

@@ -1,6 +1,7 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 import { type TableRowConfiguration } from "./types.js";
 export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement>, TableRowConfiguration {
+    ref?: Ref<HTMLTableRowElement>;
     /**
      * Boolean if the current row has been selected and should apply the selected
      * background-color.
@@ -24,4 +25,4 @@ export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement>, Tabl
  *
  * @see {@link https://react-md.dev/components/table | Table Demos}
  */
-export declare const TableRow: import("react").ForwardRefExoticComponent<TableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
+export declare function TableRow(props: TableRowProps): ReactElement;

package/dist/table/TableRow.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { useTableConfig } from "./TableConfigurationProvider.js";
 import { tableRow } from "./tableRowStyles.js";
 /**
@@ -10,8 +9,8 @@ import { tableRow } from "./tableRowStyles.js";
  * base table configuration.
  *
  * @see {@link https://react-md.dev/components/table | Table Demos}
- */ export const TableRow = /*#__PURE__*/ forwardRef(function TableRow(props, ref) {
-    const { className, disableHover: propDisableHover, disableBorders: propDisableBorders, children, selected = false, clickable = false, ...remaining } = props;
+ */ export function TableRow(props) {
+    const { ref, className, disableHover: propDisableHover, disableBorders: propDisableBorders, children, selected = false, clickable = false, ...remaining } = props;
     const { disableHover, disableBorders } = useTableConfig({
         disableHover: propDisableHover,
         disableBorders: propDisableBorders
@@ -28,6 +27,6 @@ import { tableRow } from "./tableRowStyles.js";
         }),
         children: children
     });
-});
+}
 
 //# sourceMappingURL=TableRow.js.map

package/dist/table/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableRow.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { useTableConfig } from \"./TableConfigurationProvider.js\";\nimport { tableRow } from \"./tableRowStyles.js\";\nimport { type TableRowConfiguration } from \"./types.js\";\n\nexport interface TableRowProps\n  extends HTMLAttributes<HTMLTableRowElement>, TableRowConfiguration {\n  /**\n   * Boolean if the current row has been selected and should apply the selected\n   * background-color.\n   *\n   * @defaultValue `false`\n   */\n  selected?: boolean;\n\n  /**\n   * Boolean if the row should be clickable and update the cursor while hovered\n   * to be a pointer.\n   *\n   * @defaultValue `false`\n   */\n  clickable?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * Creates a `<tr>` element with some general styles that are inherited from the\n * base table configuration.\n *\n * @see {@link https://react-md.dev/components/table | Table Demos}\n */\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n  function TableRow(props, ref) {\n    const {\n      className,\n      disableHover: propDisableHover,\n      disableBorders: propDisableBorders,\n      children,\n      selected = false,\n      clickable = false,\n      ...remaining\n    } = props;\n\n    const { disableHover, disableBorders } = useTableConfig({\n      disableHover: propDisableHover,\n      disableBorders: propDisableBorders,\n    });\n\n    return (\n      <tr\n        {...remaining}\n        ref={ref}\n        className={tableRow({\n          selected,\n          clickable,\n          disableHover,\n          disableBorders,\n          className,\n        })}\n      >\n        {children}\n      </tr>\n    );\n  }\n);\n"],"names":["forwardRef","useTableConfig","tableRow","TableRow","props","ref","className","disableHover","propDisableHover","disableBorders","propDisableBorders","children","selected","clickable","remaining","tr"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,cAAc,QAAQ,kCAAkC;AACjE,SAASC,QAAQ,QAAQ,sBAAsB;AAsB/C;;;;;;;CAOC,GACD,OAAO,MAAMC,yBAAWH,WACtB,SAASG,SAASC,KAAK,EAAEC,GAAG;IAC1B,MAAM,EACJC,SAAS,EACTC,cAAcC,gBAAgB,EAC9BC,gBAAgBC,kBAAkB,EAClCC,QAAQ,EACRC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjB,GAAGC,WACJ,GAAGV;IAEJ,MAAM,EAAEG,YAAY,EAAEE,cAAc,EAAE,GAAGR,eAAe;QACtDM,cAAcC;QACdC,gBAAgBC;IAClB;IAEA,qBACE,KAACK;QACE,GAAGD,SAAS;QACbT,KAAKA;QACLC,WAAWJ,SAAS;YAClBU;YACAC;YACAN;YACAE;YACAH;QACF;kBAECK;;AAGP,GACA"}
+{"version":3,"sources":["../../src/table/TableRow.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, type ReactElement, type Ref } from \"react\";\n\nimport { useTableConfig } from \"./TableConfigurationProvider.js\";\nimport { tableRow } from \"./tableRowStyles.js\";\nimport { type TableRowConfiguration } from \"./types.js\";\n\nexport interface TableRowProps\n  extends HTMLAttributes<HTMLTableRowElement>, TableRowConfiguration {\n  ref?: Ref<HTMLTableRowElement>;\n\n  /**\n   * Boolean if the current row has been selected and should apply the selected\n   * background-color.\n   *\n   * @defaultValue `false`\n   */\n  selected?: boolean;\n\n  /**\n   * Boolean if the row should be clickable and update the cursor while hovered\n   * to be a pointer.\n   *\n   * @defaultValue `false`\n   */\n  clickable?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * Creates a `<tr>` element with some general styles that are inherited from the\n * base table configuration.\n *\n * @see {@link https://react-md.dev/components/table | Table Demos}\n */\nexport function TableRow(props: TableRowProps): ReactElement {\n  const {\n    ref,\n    className,\n    disableHover: propDisableHover,\n    disableBorders: propDisableBorders,\n    children,\n    selected = false,\n    clickable = false,\n    ...remaining\n  } = props;\n\n  const { disableHover, disableBorders } = useTableConfig({\n    disableHover: propDisableHover,\n    disableBorders: propDisableBorders,\n  });\n\n  return (\n    <tr\n      {...remaining}\n      ref={ref}\n      className={tableRow({\n        selected,\n        clickable,\n        disableHover,\n        disableBorders,\n        className,\n      })}\n    >\n      {children}\n    </tr>\n  );\n}\n"],"names":["useTableConfig","tableRow","TableRow","props","ref","className","disableHover","propDisableHover","disableBorders","propDisableBorders","children","selected","clickable","remaining","tr"],"mappings":"AAAA;;AAIA,SAASA,cAAc,QAAQ,kCAAkC;AACjE,SAASC,QAAQ,QAAQ,sBAAsB;AAwB/C;;;;;;;CAOC,GACD,OAAO,SAASC,SAASC,KAAoB;IAC3C,MAAM,EACJC,GAAG,EACHC,SAAS,EACTC,cAAcC,gBAAgB,EAC9BC,gBAAgBC,kBAAkB,EAClCC,QAAQ,EACRC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjB,GAAGC,WACJ,GAAGV;IAEJ,MAAM,EAAEG,YAAY,EAAEE,cAAc,EAAE,GAAGR,eAAe;QACtDM,cAAcC;QACdC,gBAAgBC;IAClB;IAEA,qBACE,KAACK;QACE,GAAGD,SAAS;QACbT,KAAKA;QACLC,WAAWJ,SAAS;YAClBU;YACAC;YACAN;YACAE;YACAH;QACF;kBAECK;;AAGP"}

package/dist/tabs/SimpleTabPanel.d.ts

@@ -1,9 +1,10 @@
-import { type HTMLAttributes, type ReactNode } from "react";
+import { type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
 import { type ProvidedTabPanelProps } from "./useTabs.js";
 /**
  * @since 6.0.0
  */
 export interface SimpleTabPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, keyof ProvidedTabPanelProps>, ProvidedTabPanelProps {
+    ref?: Ref<HTMLDivElement>;
     children: ReactNode;
 }
 /**
@@ -16,4 +17,4 @@ export interface SimpleTabPanelProps extends Omit<HTMLAttributes<HTMLDivElement>
  * @see {@link https://react-md.dev/components/tabs#disable-tab-panel-transition|Disable Tab Panel Transition Demo}
  * @since 6.0.0
  */
-export declare const SimpleTabPanel: import("react").ForwardRefExoticComponent<SimpleTabPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function SimpleTabPanel(props: SimpleTabPanelProps): ReactElement;

package/dist/tabs/SimpleTabPanel.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cnb } from "cnbuilder";
-import { forwardRef } from "react";
 import { DISPLAY_NONE_CLASS } from "../utils/isElementVisible.js";
 /**
  * This component can be a replacement for the `Slide` component when animations
@@ -11,13 +10,13 @@ import { DISPLAY_NONE_CLASS } from "../utils/isElementVisible.js";
  * @see {@link https://react-md.dev/components/tabs | Tabs Demos}
  * @see {@link https://react-md.dev/components/tabs#disable-tab-panel-transition|Disable Tab Panel Transition Demo}
  * @since 6.0.0
- */ export const SimpleTabPanel = /*#__PURE__*/ forwardRef(function SimpleTabPanel(props, ref) {
-    const { active, className, ...remaining } = props;
+ */ export function SimpleTabPanel(props) {
+    const { ref, active, className, ...remaining } = props;
     return /*#__PURE__*/ _jsx("div", {
         ref: ref,
         ...remaining,
         className: cnb(!active && DISPLAY_NONE_CLASS, className)
     });
-});
+}
 
 //# sourceMappingURL=SimpleTabPanel.js.map

package/dist/tabs/SimpleTabPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/SimpleTabPanel.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\nimport { type ProvidedTabPanelProps } from \"./useTabs.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SimpleTabPanelProps\n  extends\n    Omit<HTMLAttributes<HTMLDivElement>, keyof ProvidedTabPanelProps>,\n    ProvidedTabPanelProps {\n  children: ReactNode;\n}\n\n/**\n * This component can be a replacement for the `Slide` component when animations\n * are not required for changing the active tab contents.\n *\n * This should generally be used along with the `SimpleTabPanels` component.\n *\n * @see {@link https://react-md.dev/components/tabs | Tabs Demos}\n * @see {@link https://react-md.dev/components/tabs#disable-tab-panel-transition|Disable Tab Panel Transition Demo}\n * @since 6.0.0\n */\nexport const SimpleTabPanel = forwardRef<HTMLDivElement, SimpleTabPanelProps>(\n  function SimpleTabPanel(props, ref) {\n    const { active, className, ...remaining } = props;\n    return (\n      <div\n        ref={ref}\n        {...remaining}\n        className={cnb(!active && DISPLAY_NONE_CLASS, className)}\n      />\n    );\n  }\n);\n"],"names":["cnb","forwardRef","DISPLAY_NONE_CLASS","SimpleTabPanel","props","ref","active","className","remaining","div"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8CC,UAAU,QAAQ,QAAQ;AAExE,SAASC,kBAAkB,QAAQ,+BAA+B;AAalE;;;;;;;;;CASC,GACD,OAAO,MAAMC,+BAAiBF,WAC5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAC5C,qBACE,KAACK;QACCJ,KAAKA;QACJ,GAAGG,SAAS;QACbD,WAAWP,IAAI,CAACM,UAAUJ,oBAAoBK;;AAGpD,GACA"}
+{"version":3,"sources":["../../src/tabs/SimpleTabPanel.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\nimport { type ProvidedTabPanelProps } from \"./useTabs.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SimpleTabPanelProps\n  extends\n    Omit<HTMLAttributes<HTMLDivElement>, keyof ProvidedTabPanelProps>,\n    ProvidedTabPanelProps {\n  ref?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\n/**\n * This component can be a replacement for the `Slide` component when animations\n * are not required for changing the active tab contents.\n *\n * This should generally be used along with the `SimpleTabPanels` component.\n *\n * @see {@link https://react-md.dev/components/tabs | Tabs Demos}\n * @see {@link https://react-md.dev/components/tabs#disable-tab-panel-transition|Disable Tab Panel Transition Demo}\n * @since 6.0.0\n */\nexport function SimpleTabPanel(props: SimpleTabPanelProps): ReactElement {\n  const { ref, active, className, ...remaining } = props;\n\n  return (\n    <div\n      ref={ref}\n      {...remaining}\n      className={cnb(!active && DISPLAY_NONE_CLASS, className)}\n    />\n  );\n}\n"],"names":["cnb","DISPLAY_NONE_CLASS","SimpleTabPanel","props","ref","active","className","remaining","div"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAQhC,SAASC,kBAAkB,QAAQ,+BAA+B;AAclE;;;;;;;;;CASC,GACD,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EAAEC,GAAG,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAEjD,qBACE,KAACK;QACCJ,KAAKA;QACJ,GAAGG,SAAS;QACbD,WAAWN,IAAI,CAACK,UAAUJ,oBAAoBK;;AAGpD"}

package/dist/tabs/SimpleTabPanels.d.ts

@@ -1,9 +1,10 @@
-import { type HTMLAttributes, type ReactNode } from "react";
+import { type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
 import { type ProvidedTabPanelsProps } from "./useTabs.js";
 /**
  * @since 6.0.0
  */
 export interface SimpleTabPanelsProps extends HTMLAttributes<HTMLDivElement>, Omit<ProvidedTabPanelsProps<HTMLDivElement>, "ref"> {
+    ref?: Ref<HTMLDivElement>;
     children: ReactNode;
 }
 /**
@@ -16,4 +17,4 @@ export interface SimpleTabPanelsProps extends HTMLAttributes<HTMLDivElement>, Om
  * @see {@link https://react-md.dev/components/tabs#disable-tab-panel-transition|Disable Tab Panel Transition Demo}
  * @since 6.0.0
  */
-export declare const SimpleTabPanels: import("react").ForwardRefExoticComponent<SimpleTabPanelsProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function SimpleTabPanels(props: SimpleTabPanelsProps): ReactElement;

package/dist/tabs/SimpleTabPanels.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 /**
  * This component can be used as a replacement for the `SlideContainer` when
  * animations are not required for changing the active tab contents.
@@ -9,12 +8,12 @@ import { forwardRef } from "react";
  * @see {@link https://react-md.dev/components/tabs | Tabs Demos}
  * @see {@link https://react-md.dev/components/tabs#disable-tab-panel-transition|Disable Tab Panel Transition Demo}
  * @since 6.0.0
- */ export const SimpleTabPanels = /*#__PURE__*/ forwardRef(function SimpleTabPanels(props, ref) {
-    const { direction: _direction, ...remaining } = props;
+ */ export function SimpleTabPanels(props) {
+    const { ref, direction: _direction, ...remaining } = props;
     return /*#__PURE__*/ _jsx("div", {
         ref: ref,
         ...remaining
     });
-});
+}
 
 //# sourceMappingURL=SimpleTabPanels.js.map

package/dist/tabs/SimpleTabPanels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/SimpleTabPanels.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { type ProvidedTabPanelsProps } from \"./useTabs.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SimpleTabPanelsProps\n  extends\n    HTMLAttributes<HTMLDivElement>,\n    Omit<ProvidedTabPanelsProps<HTMLDivElement>, \"ref\"> {\n  children: ReactNode;\n}\n\n/**\n * This component can be used as a replacement for the `SlideContainer` when\n * animations are not required for changing the active tab contents.\n *\n * This should be normally be used along with the `SimpleTabPanel` component.\n *\n * @see {@link https://react-md.dev/components/tabs | Tabs Demos}\n * @see {@link https://react-md.dev/components/tabs#disable-tab-panel-transition|Disable Tab Panel Transition Demo}\n * @since 6.0.0\n */\nexport const SimpleTabPanels = forwardRef<HTMLDivElement, SimpleTabPanelsProps>(\n  function SimpleTabPanels(props, ref) {\n    const { direction: _direction, ...remaining } = props;\n\n    return <div ref={ref} {...remaining} />;\n  }\n);\n"],"names":["forwardRef","SimpleTabPanels","props","ref","direction","_direction","remaining","div"],"mappings":";AAAA,SAA8CA,UAAU,QAAQ,QAAQ;AAcxE;;;;;;;;;CASC,GACD,OAAO,MAAMC,gCAAkBD,WAC7B,SAASC,gBAAgBC,KAAK,EAAEC,GAAG;IACjC,MAAM,EAAEC,WAAWC,UAAU,EAAE,GAAGC,WAAW,GAAGJ;IAEhD,qBAAO,KAACK;QAAIJ,KAAKA;QAAM,GAAGG,SAAS;;AACrC,GACA"}
+{"version":3,"sources":["../../src/tabs/SimpleTabPanels.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { type ProvidedTabPanelsProps } from \"./useTabs.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SimpleTabPanelsProps\n  extends\n    HTMLAttributes<HTMLDivElement>,\n    Omit<ProvidedTabPanelsProps<HTMLDivElement>, \"ref\"> {\n  ref?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\n/**\n * This component can be used as a replacement for the `SlideContainer` when\n * animations are not required for changing the active tab contents.\n *\n * This should be normally be used along with the `SimpleTabPanel` component.\n *\n * @see {@link https://react-md.dev/components/tabs | Tabs Demos}\n * @see {@link https://react-md.dev/components/tabs#disable-tab-panel-transition|Disable Tab Panel Transition Demo}\n * @since 6.0.0\n */\nexport function SimpleTabPanels(props: SimpleTabPanelsProps): ReactElement {\n  const { ref, direction: _direction, ...remaining } = props;\n\n  return <div ref={ref} {...remaining} />;\n}\n"],"names":["SimpleTabPanels","props","ref","direction","_direction","remaining","div"],"mappings":";AAoBA;;;;;;;;;CASC,GACD,OAAO,SAASA,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,GAAG,EAAEC,WAAWC,UAAU,EAAE,GAAGC,WAAW,GAAGJ;IAErD,qBAAO,KAACK;QAAIJ,KAAKA;QAAM,GAAGG,SAAS;;AACrC"}

package/dist/tabs/TabList.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 import { type BaseTabListScrollButtonProps } from "./TabListScrollButton.js";
 import { type GetTabListScrollToOptions } from "./getTabListScrollToOptions.js";
 import { type TabListClassNameOptions } from "./tabListStyles.js";
@@ -7,6 +7,7 @@ import { type TabListActivationMode, type TabListScrollButtonsBehavior } from ".
  * @since 6.0.0
  */
 export interface TabListProps extends HTMLAttributes<HTMLDivElement>, Omit<TabListClassNameOptions, "animate" | "indicator"> {
+    ref?: Ref<HTMLDivElement>;
     activeIndex: number;
     setActiveIndex: (nextActiveIndex: number) => void;
     /**
@@ -87,4 +88,4 @@ export interface TabListProps extends HTMLAttributes<HTMLDivElement>, Omit<TabLi
  * @see {@link useTabs} for example usage.
  * @since 6.0.0
  */
-export declare const TabList: import("react").ForwardRefExoticComponent<TabListProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function TabList(props: TabListProps): ReactElement;

package/dist/tabs/TabList.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
 import { TabListScrollButton } from "./TabListScrollButton.js";
 import { tabList } from "./tabListStyles.js";
@@ -11,8 +11,8 @@ import { useTabList } from "./useTabList.js";
  * @see {@link https://react-md.dev/components/tabs | Tabs Demos}
  * @see {@link useTabs} for example usage.
  * @since 6.0.0
- */ export const TabList = /*#__PURE__*/ forwardRef(function TabList(props, ref) {
-    const { style, onClick, onFocus, onKeyDown, className, children, activeIndex, setActiveIndex, activationMode = "manual", align = "left", padded = false, inline = false, vertical = false, scrollbar = false, scrollButtons = false, fullWidthTabs, disableTransition = false, transitionDuration = 150, getScrollToOptions, forwardScrollButtonProps, backwardScrollButtonProps, ...remaining } = props;
+ */ export function TabList(props) {
+    const { ref, style, onClick, onFocus, onKeyDown, className, children, activeIndex, setActiveIndex, activationMode = "manual", align = "left", padded = false, inline = false, vertical = false, scrollbar = false, scrollButtons = false, fullWidthTabs, disableTransition = false, transitionDuration = 150, getScrollToOptions, forwardScrollButtonProps, backwardScrollButtonProps, ...remaining } = props;
     const { elementProps, movementContext, backwardProps, forwardProps, showScrollButtons } = useTabList({
         ref,
         style,
@@ -78,6 +78,6 @@ import { useTabList } from "./useTabList.js";
             ]
         })
     });
-});
+}
 
 //# sourceMappingURL=TabList.js.map

package/dist/tabs/TabList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/TabList.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport {\n  type BaseTabListScrollButtonProps,\n  TabListScrollButton,\n} from \"./TabListScrollButton.js\";\nimport { type GetTabListScrollToOptions } from \"./getTabListScrollToOptions.js\";\nimport { type TabListClassNameOptions, tabList } from \"./tabListStyles.js\";\nimport {\n  type TabListActivationMode,\n  type TabListScrollButtonsBehavior,\n} from \"./types.js\";\nimport { useTabList } from \"./useTabList.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useTabs } from \"./useTabs.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface TabListProps\n  extends\n    HTMLAttributes<HTMLDivElement>,\n    Omit<TabListClassNameOptions, \"animate\" | \"indicator\"> {\n  activeIndex: number;\n  setActiveIndex: (nextActiveIndex: number) => void;\n\n  /**\n   * Set this to `true` to show a scrollbar when the number of tabs cause\n   * overflow.\n   *\n   * @see {@link scrollButtons}\n   * @defaultValue `false`\n   */\n  scrollbar?: boolean;\n\n  /**\n   * Set this to `true` to disable the active tab indicator from animating\n   * when a new tab is selected.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * This should be equal to the `$tabs-transition-duration` variable.\n   *\n   * @defaultValue `150`\n   */\n  transitionDuration?: number;\n\n  /**\n   * @defaultValue `\"manual\"`\n   * @see {@link TabListActivationMode}\n   */\n  activationMode?: TabListActivationMode;\n\n  /**\n   * @defaultValue `false`\n   * @see {@link TabListScrollButtonsBehavior}\n   */\n  scrollButtons?: TabListScrollButtonsBehavior;\n\n  /**\n   * A convenience prop for the {@link BaseTabListScrollButtonProps.getScrollToOptions}\n   * on {@link forwardScrollButtonProps} and {@link backwardScrollButtonProps}.\n   */\n  getScrollToOptions?: GetTabListScrollToOptions;\n\n  /**\n   * Any additional props that should be passed to the scroll forward button.\n   *\n   * @example\n   * ```tsx\n   * forwardScrollButtonProps={{\n   *   \"aria-label\": \"Scroll right\",\n   *   theme: \"primary\",\n   *   themeType: \"contained\",\n   *   className: styles.buttonContainer,\n   *   buttonProps: {\n   *     className: styles.button,\n   *   }\n   * }}\n   * ```\n   */\n  forwardScrollButtonProps?: BaseTabListScrollButtonProps;\n\n  /**\n   * Any additional props that should be passed to the scroll backward button.\n   *\n   * @example\n   * ```tsx\n   * forwardScrollButtonProps={{\n   *   \"aria-label\": \"Scroll left\",\n   *   theme: \"primary\",\n   *   themeType: \"contained\",\n   *   className: styles.buttonContainer,\n   *   buttonProps: {\n   *     className: styles.button,\n   *   }\n   * }}\n   * ```\n   */\n  backwardScrollButtonProps?: BaseTabListScrollButtonProps;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link https://react-md.dev/components/tabs | Tabs Demos}\n * @see {@link useTabs} for example usage.\n * @since 6.0.0\n */\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\n  function TabList(props, ref) {\n    const {\n      style,\n      onClick,\n      onFocus,\n      onKeyDown,\n      className,\n      children,\n      activeIndex,\n      setActiveIndex,\n      activationMode = \"manual\",\n      align = \"left\",\n      padded = false,\n      inline = false,\n      vertical = false,\n      scrollbar = false,\n      scrollButtons = false,\n      fullWidthTabs,\n      disableTransition = false,\n      transitionDuration = 150,\n      getScrollToOptions,\n      forwardScrollButtonProps,\n      backwardScrollButtonProps,\n      ...remaining\n    } = props;\n\n    const {\n      elementProps,\n      movementContext,\n      backwardProps,\n      forwardProps,\n      showScrollButtons,\n    } = useTabList({\n      ref,\n      style,\n      onClick,\n      onFocus,\n      onKeyDown,\n      vertical,\n      activeIndex,\n      setActiveIndex,\n      activationMode,\n      scrollButtons,\n      disableTransition,\n    });\n\n    const prevActiveIndex = useRef(activeIndex);\n    const [animate, setAnimate] = useState(false);\n    useEffect(() => {\n      const isSameIndex = activeIndex === prevActiveIndex.current;\n      prevActiveIndex.current = activeIndex;\n      if (disableTransition || isSameIndex) {\n        return;\n      }\n\n      setAnimate(true);\n      const timeout = globalThis.setTimeout(() => {\n        setAnimate(false);\n      }, transitionDuration);\n\n      return () => {\n        globalThis.clearTimeout(timeout);\n      };\n    }, [activeIndex, disableTransition, transitionDuration]);\n\n    return (\n      <KeyboardMovementProvider value={movementContext}>\n        <div\n          {...remaining}\n          {...elementProps}\n          role=\"tablist\"\n          className={tabList({\n            align,\n            padded,\n            inline,\n            animate: !disableTransition && animate,\n            vertical,\n            scrollbar,\n            indicator: !disableTransition,\n            fullWidthTabs,\n            className,\n          })}\n        >\n          {showScrollButtons && (\n            <TabListScrollButton\n              getScrollToOptions={getScrollToOptions}\n              {...backwardScrollButtonProps}\n              {...backwardProps}\n            />\n          )}\n          {children}\n          {showScrollButtons && (\n            <TabListScrollButton\n              getScrollToOptions={getScrollToOptions}\n              {...forwardScrollButtonProps}\n              {...forwardProps}\n            />\n          )}\n        </div>\n      </KeyboardMovementProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useEffect","useRef","useState","KeyboardMovementProvider","TabListScrollButton","tabList","useTabList","TabList","props","ref","style","onClick","onFocus","onKeyDown","className","children","activeIndex","setActiveIndex","activationMode","align","padded","inline","vertical","scrollbar","scrollButtons","fullWidthTabs","disableTransition","transitionDuration","getScrollToOptions","forwardScrollButtonProps","backwardScrollButtonProps","remaining","elementProps","movementContext","backwardProps","forwardProps","showScrollButtons","prevActiveIndex","animate","setAnimate","isSameIndex","current","timeout","globalThis","setTimeout","clearTimeout","value","div","role","indicator"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,wBAAwB,QAAQ,6CAA6C;AACtF,SAEEC,mBAAmB,QACd,2BAA2B;AAElC,SAAuCC,OAAO,QAAQ,qBAAqB;AAK3E,SAASC,UAAU,QAAQ,kBAAkB;AA6F7C;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAUR,WACrB,SAASQ,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EACJC,KAAK,EACLC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,cAAc,EACdC,iBAAiB,QAAQ,EACzBC,QAAQ,MAAM,EACdC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,gBAAgB,KAAK,EACrBC,aAAa,EACbC,oBAAoB,KAAK,EACzBC,qBAAqB,GAAG,EACxBC,kBAAkB,EAClBC,wBAAwB,EACxBC,yBAAyB,EACzB,GAAGC,WACJ,GAAGvB;IAEJ,MAAM,EACJwB,YAAY,EACZC,eAAe,EACfC,aAAa,EACbC,YAAY,EACZC,iBAAiB,EAClB,GAAG9B,WAAW;QACbG;QACAC;QACAC;QACAC;QACAC;QACAS;QACAN;QACAC;QACAC;QACAM;QACAE;IACF;IAEA,MAAMW,kBAAkBpC,OAAOe;IAC/B,MAAM,CAACsB,SAASC,WAAW,GAAGrC,SAAS;IACvCF,UAAU;QACR,MAAMwC,cAAcxB,gBAAgBqB,gBAAgBI,OAAO;QAC3DJ,gBAAgBI,OAAO,GAAGzB;QAC1B,IAAIU,qBAAqBc,aAAa;YACpC;QACF;QAEAD,WAAW;QACX,MAAMG,UAAUC,WAAWC,UAAU,CAAC;YACpCL,WAAW;QACb,GAAGZ;QAEH,OAAO;YACLgB,WAAWE,YAAY,CAACH;QAC1B;IACF,GAAG;QAAC1B;QAAaU;QAAmBC;KAAmB;IAEvD,qBACE,KAACxB;QAAyB2C,OAAOb;kBAC/B,cAAA,MAACc;YACE,GAAGhB,SAAS;YACZ,GAAGC,YAAY;YAChBgB,MAAK;YACLlC,WAAWT,QAAQ;gBACjBc;gBACAC;gBACAC;gBACAiB,SAAS,CAACZ,qBAAqBY;gBAC/BhB;gBACAC;gBACA0B,WAAW,CAACvB;gBACZD;gBACAX;YACF;;gBAECsB,mCACC,KAAChC;oBACCwB,oBAAoBA;oBACnB,GAAGE,yBAAyB;oBAC5B,GAAGI,aAAa;;gBAGpBnB;gBACAqB,mCACC,KAAChC;oBACCwB,oBAAoBA;oBACnB,GAAGC,wBAAwB;oBAC3B,GAAGM,YAAY;;;;;AAM5B,GACA"}
+{"version":3,"sources":["../../src/tabs/TabList.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactElement,\n  type Ref,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport {\n  type BaseTabListScrollButtonProps,\n  TabListScrollButton,\n} from \"./TabListScrollButton.js\";\nimport { type GetTabListScrollToOptions } from \"./getTabListScrollToOptions.js\";\nimport { type TabListClassNameOptions, tabList } from \"./tabListStyles.js\";\nimport {\n  type TabListActivationMode,\n  type TabListScrollButtonsBehavior,\n} from \"./types.js\";\nimport { useTabList } from \"./useTabList.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useTabs } from \"./useTabs.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface TabListProps\n  extends\n    HTMLAttributes<HTMLDivElement>,\n    Omit<TabListClassNameOptions, \"animate\" | \"indicator\"> {\n  ref?: Ref<HTMLDivElement>;\n  activeIndex: number;\n  setActiveIndex: (nextActiveIndex: number) => void;\n\n  /**\n   * Set this to `true` to show a scrollbar when the number of tabs cause\n   * overflow.\n   *\n   * @see {@link scrollButtons}\n   * @defaultValue `false`\n   */\n  scrollbar?: boolean;\n\n  /**\n   * Set this to `true` to disable the active tab indicator from animating\n   * when a new tab is selected.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * This should be equal to the `$tabs-transition-duration` variable.\n   *\n   * @defaultValue `150`\n   */\n  transitionDuration?: number;\n\n  /**\n   * @defaultValue `\"manual\"`\n   * @see {@link TabListActivationMode}\n   */\n  activationMode?: TabListActivationMode;\n\n  /**\n   * @defaultValue `false`\n   * @see {@link TabListScrollButtonsBehavior}\n   */\n  scrollButtons?: TabListScrollButtonsBehavior;\n\n  /**\n   * A convenience prop for the {@link BaseTabListScrollButtonProps.getScrollToOptions}\n   * on {@link forwardScrollButtonProps} and {@link backwardScrollButtonProps}.\n   */\n  getScrollToOptions?: GetTabListScrollToOptions;\n\n  /**\n   * Any additional props that should be passed to the scroll forward button.\n   *\n   * @example\n   * ```tsx\n   * forwardScrollButtonProps={{\n   *   \"aria-label\": \"Scroll right\",\n   *   theme: \"primary\",\n   *   themeType: \"contained\",\n   *   className: styles.buttonContainer,\n   *   buttonProps: {\n   *     className: styles.button,\n   *   }\n   * }}\n   * ```\n   */\n  forwardScrollButtonProps?: BaseTabListScrollButtonProps;\n\n  /**\n   * Any additional props that should be passed to the scroll backward button.\n   *\n   * @example\n   * ```tsx\n   * forwardScrollButtonProps={{\n   *   \"aria-label\": \"Scroll left\",\n   *   theme: \"primary\",\n   *   themeType: \"contained\",\n   *   className: styles.buttonContainer,\n   *   buttonProps: {\n   *     className: styles.button,\n   *   }\n   * }}\n   * ```\n   */\n  backwardScrollButtonProps?: BaseTabListScrollButtonProps;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link https://react-md.dev/components/tabs | Tabs Demos}\n * @see {@link useTabs} for example usage.\n * @since 6.0.0\n */\nexport function TabList(props: TabListProps): ReactElement {\n  const {\n    ref,\n    style,\n    onClick,\n    onFocus,\n    onKeyDown,\n    className,\n    children,\n    activeIndex,\n    setActiveIndex,\n    activationMode = \"manual\",\n    align = \"left\",\n    padded = false,\n    inline = false,\n    vertical = false,\n    scrollbar = false,\n    scrollButtons = false,\n    fullWidthTabs,\n    disableTransition = false,\n    transitionDuration = 150,\n    getScrollToOptions,\n    forwardScrollButtonProps,\n    backwardScrollButtonProps,\n    ...remaining\n  } = props;\n\n  const {\n    elementProps,\n    movementContext,\n    backwardProps,\n    forwardProps,\n    showScrollButtons,\n  } = useTabList({\n    ref,\n    style,\n    onClick,\n    onFocus,\n    onKeyDown,\n    vertical,\n    activeIndex,\n    setActiveIndex,\n    activationMode,\n    scrollButtons,\n    disableTransition,\n  });\n\n  const prevActiveIndex = useRef(activeIndex);\n  const [animate, setAnimate] = useState(false);\n  useEffect(() => {\n    const isSameIndex = activeIndex === prevActiveIndex.current;\n    prevActiveIndex.current = activeIndex;\n    if (disableTransition || isSameIndex) {\n      return;\n    }\n\n    setAnimate(true);\n    const timeout = globalThis.setTimeout(() => {\n      setAnimate(false);\n    }, transitionDuration);\n\n    return () => {\n      globalThis.clearTimeout(timeout);\n    };\n  }, [activeIndex, disableTransition, transitionDuration]);\n\n  return (\n    <KeyboardMovementProvider value={movementContext}>\n      <div\n        {...remaining}\n        {...elementProps}\n        role=\"tablist\"\n        className={tabList({\n          align,\n          padded,\n          inline,\n          animate: !disableTransition && animate,\n          vertical,\n          scrollbar,\n          indicator: !disableTransition,\n          fullWidthTabs,\n          className,\n        })}\n      >\n        {showScrollButtons && (\n          <TabListScrollButton\n            getScrollToOptions={getScrollToOptions}\n            {...backwardScrollButtonProps}\n            {...backwardProps}\n          />\n        )}\n        {children}\n        {showScrollButtons && (\n          <TabListScrollButton\n            getScrollToOptions={getScrollToOptions}\n            {...forwardScrollButtonProps}\n            {...forwardProps}\n          />\n        )}\n      </div>\n    </KeyboardMovementProvider>\n  );\n}\n"],"names":["useEffect","useRef","useState","KeyboardMovementProvider","TabListScrollButton","tabList","useTabList","TabList","props","ref","style","onClick","onFocus","onKeyDown","className","children","activeIndex","setActiveIndex","activationMode","align","padded","inline","vertical","scrollbar","scrollButtons","fullWidthTabs","disableTransition","transitionDuration","getScrollToOptions","forwardScrollButtonProps","backwardScrollButtonProps","remaining","elementProps","movementContext","backwardProps","forwardProps","showScrollButtons","prevActiveIndex","animate","setAnimate","isSameIndex","current","timeout","globalThis","setTimeout","clearTimeout","value","div","role","indicator"],"mappings":"AAAA;;AAEA,SAIEA,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,wBAAwB,QAAQ,6CAA6C;AACtF,SAEEC,mBAAmB,QACd,2BAA2B;AAElC,SAAuCC,OAAO,QAAQ,qBAAqB;AAK3E,SAASC,UAAU,QAAQ,kBAAkB;AA8F7C;;;;;;CAMC,GACD,OAAO,SAASC,QAAQC,KAAmB;IACzC,MAAM,EACJC,GAAG,EACHC,KAAK,EACLC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,cAAc,EACdC,iBAAiB,QAAQ,EACzBC,QAAQ,MAAM,EACdC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,gBAAgB,KAAK,EACrBC,aAAa,EACbC,oBAAoB,KAAK,EACzBC,qBAAqB,GAAG,EACxBC,kBAAkB,EAClBC,wBAAwB,EACxBC,yBAAyB,EACzB,GAAGC,WACJ,GAAGvB;IAEJ,MAAM,EACJwB,YAAY,EACZC,eAAe,EACfC,aAAa,EACbC,YAAY,EACZC,iBAAiB,EAClB,GAAG9B,WAAW;QACbG;QACAC;QACAC;QACAC;QACAC;QACAS;QACAN;QACAC;QACAC;QACAM;QACAE;IACF;IAEA,MAAMW,kBAAkBpC,OAAOe;IAC/B,MAAM,CAACsB,SAASC,WAAW,GAAGrC,SAAS;IACvCF,UAAU;QACR,MAAMwC,cAAcxB,gBAAgBqB,gBAAgBI,OAAO;QAC3DJ,gBAAgBI,OAAO,GAAGzB;QAC1B,IAAIU,qBAAqBc,aAAa;YACpC;QACF;QAEAD,WAAW;QACX,MAAMG,UAAUC,WAAWC,UAAU,CAAC;YACpCL,WAAW;QACb,GAAGZ;QAEH,OAAO;YACLgB,WAAWE,YAAY,CAACH;QAC1B;IACF,GAAG;QAAC1B;QAAaU;QAAmBC;KAAmB;IAEvD,qBACE,KAACxB;QAAyB2C,OAAOb;kBAC/B,cAAA,MAACc;YACE,GAAGhB,SAAS;YACZ,GAAGC,YAAY;YAChBgB,MAAK;YACLlC,WAAWT,QAAQ;gBACjBc;gBACAC;gBACAC;gBACAiB,SAAS,CAACZ,qBAAqBY;gBAC/BhB;gBACAC;gBACA0B,WAAW,CAACvB;gBACZD;gBACAX;YACF;;gBAECsB,mCACC,KAAChC;oBACCwB,oBAAoBA;oBACnB,GAAGE,yBAAyB;oBAC5B,GAAGI,aAAa;;gBAGpBnB;gBACAqB,mCACC,KAAChC;oBACCwB,oBAAoBA;oBACnB,GAAGC,wBAAwB;oBAC3B,GAAGM,YAAY;;;;;AAM5B"}

package/dist/tabs/TabListScrollButton.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactElement, type Ref } from "react";
 import { type ButtonProps } from "../button/Button.js";
 import { type ButtonClassNameThemeOptions } from "../button/styles.js";
 import { type PropsWithRef } from "../types.js";
@@ -19,6 +19,7 @@ export interface BaseTabListScrollButtonProps extends HTMLAttributes<HTMLDivElem
  * @since 6.0.0
  */
 export interface TabListScrollButtonProps extends BaseTabListScrollButtonProps {
+    ref?: Ref<HTMLDivElement>;
     type: "back" | "forward";
     /** @defaultValue `false` */
     vertical?: boolean;
@@ -29,4 +30,4 @@ export interface TabListScrollButtonProps extends BaseTabListScrollButtonProps {
  * @internal
  * @since 6.0.0
  */
-export declare const TabListScrollButton: import("react").ForwardRefExoticComponent<TabListScrollButtonProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function TabListScrollButton(props: TabListScrollButtonProps): ReactElement;

package/dist/tabs/TabListScrollButton.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useCallback, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { Button } from "../button/Button.js";
 import { getIcon } from "../icon/config.js";
 import { useDir } from "../typography/WritingDirectionProvider.js";
@@ -13,8 +13,8 @@ import { tabListScrollButton, tabListScrollButtonContainer } from "./tabListScro
  *
  * @internal
  * @since 6.0.0
- */ export const TabListScrollButton = /*#__PURE__*/ forwardRef(function TabListScrollButton(props, ref) {
-    const { "aria-label": ariaLabel, className, buttonProps, type, theme, themeType, buttonType = "icon", disabled: propDisabled, children: propChildren, getScrollToOptions = getTabListScrollToOptions, vertical = false, disableTransition = false, ...remaining } = props;
+ */ export function TabListScrollButton(props) {
+    const { ref, "aria-label": ariaLabel, className, buttonProps, type, theme, themeType, buttonType = "icon", disabled: propDisabled, children: propChildren, getScrollToOptions = getTabListScrollToOptions, vertical = false, disableTransition = false, ...remaining } = props;
     const forward = type === "forward";
     const iconButton = buttonType === "icon";
     const icon = getIcon(type);
@@ -78,6 +78,6 @@ import { tabListScrollButton, tabListScrollButtonContainer } from "./tabListScro
             })
         ]
     });
-});
+}
 
 //# sourceMappingURL=TabListScrollButton.js.map

package/dist/tabs/TabListScrollButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/TabListScrollButton.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { type ButtonClassNameThemeOptions } from \"../button/styles.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useIntersectionObserver } from \"../useIntersectionObserver.js\";\nimport { applyRef } from \"../utils/applyRef.js\";\nimport {\n  type GetTabListScrollToOptions,\n  getTabListScrollToOptions,\n} from \"./getTabListScrollToOptions.js\";\nimport {\n  tabListScrollButton,\n  tabListScrollButtonContainer,\n} from \"./tabListScrollButtonStyles.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface BaseTabListScrollButtonProps\n  extends HTMLAttributes<HTMLDivElement>, ButtonClassNameThemeOptions {\n  buttonProps?: PropsWithRef<ButtonProps>;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /** @defaultValue {@link getTabListScrollToOptions} */\n  getScrollToOptions?: GetTabListScrollToOptions;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface TabListScrollButtonProps extends BaseTabListScrollButtonProps {\n  type: \"back\" | \"forward\";\n  /** @defaultValue `false` */\n  vertical?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport const TabListScrollButton = forwardRef<\n  HTMLDivElement,\n  TabListScrollButtonProps\n>(function TabListScrollButton(props, ref) {\n  const {\n    \"aria-label\": ariaLabel,\n    className,\n    buttonProps,\n    type,\n    theme,\n    themeType,\n    buttonType = \"icon\",\n    disabled: propDisabled,\n    children: propChildren,\n    getScrollToOptions = getTabListScrollToOptions,\n    vertical = false,\n    disableTransition = false,\n    ...remaining\n  } = props;\n\n  const forward = type === \"forward\";\n  const iconButton = buttonType === \"icon\";\n  const icon = getIcon(type);\n  const children = propChildren || icon;\n\n  const root = useRef<HTMLElement | null>(null);\n  const isRTL = useDir().dir === \"rtl\";\n  const [disabled, setDisabled] = useState(!forward);\n  const nodeRef = useIntersectionObserver({\n    root,\n    rootMargin: \"1px\",\n    onUpdate: useCallback(([entry]) => {\n      setDisabled(entry.intersectionRatio === 1);\n    }, []),\n  });\n\n  return (\n    <>\n      {!forward && <span ref={nodeRef} />}\n      <div\n        {...remaining}\n        ref={(instance) => {\n          applyRef(instance, ref);\n          root.current = instance?.parentElement || null;\n        }}\n        className={tabListScrollButtonContainer({\n          forward,\n          vertical,\n          className,\n        })}\n      >\n        <Button\n          aria-label={ariaLabel || (iconButton ? type : undefined)}\n          theme={theme}\n          themeType={themeType}\n          buttonType={buttonType}\n          disabled={propDisabled || disabled}\n          {...buttonProps}\n          className={tabListScrollButton({\n            className: buttonProps?.className,\n            vertical,\n          })}\n          onClick={(event) => {\n            buttonProps?.onClick?.(event);\n            const container = root.current;\n            if (!container) {\n              return;\n            }\n\n            container.scrollTo(\n              getScrollToOptions({\n                isRTL,\n                animate: !disableTransition,\n                vertical,\n                container,\n                increment: forward,\n              })\n            );\n          }}\n        >\n          {children}\n        </Button>\n      </div>\n      {forward && <span ref={nodeRef} />}\n    </>\n  );\n});\n"],"names":["forwardRef","useCallback","useRef","useState","Button","getIcon","useDir","useIntersectionObserver","applyRef","getTabListScrollToOptions","tabListScrollButton","tabListScrollButtonContainer","TabListScrollButton","props","ref","ariaLabel","className","buttonProps","type","theme","themeType","buttonType","disabled","propDisabled","children","propChildren","getScrollToOptions","vertical","disableTransition","remaining","forward","iconButton","icon","root","isRTL","dir","setDisabled","nodeRef","rootMargin","onUpdate","entry","intersectionRatio","span","div","instance","current","parentElement","aria-label","undefined","onClick","event","container","scrollTo","animate","increment"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,WAAW,EACXC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,MAAM,QAA0B,sBAAsB;AAE/D,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,MAAM,QAAQ,4CAA4C;AACnE,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAEEC,yBAAyB,QACpB,iCAAiC;AACxC,SACEC,mBAAmB,EACnBC,4BAA4B,QACvB,iCAAiC;AA2BxC;;;;;CAKC,GACD,OAAO,MAAMC,oCAAsBZ,WAGjC,SAASY,oBAAoBC,KAAK,EAAEC,GAAG;IACvC,MAAM,EACJ,cAAcC,SAAS,EACvBC,SAAS,EACTC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,SAAS,EACTC,aAAa,MAAM,EACnBC,UAAUC,YAAY,EACtBC,UAAUC,YAAY,EACtBC,qBAAqBjB,yBAAyB,EAC9CkB,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGhB;IAEJ,MAAMiB,UAAUZ,SAAS;IACzB,MAAMa,aAAaV,eAAe;IAClC,MAAMW,OAAO3B,QAAQa;IACrB,MAAMM,WAAWC,gBAAgBO;IAEjC,MAAMC,OAAO/B,OAA2B;IACxC,MAAMgC,QAAQ5B,SAAS6B,GAAG,KAAK;IAC/B,MAAM,CAACb,UAAUc,YAAY,GAAGjC,SAAS,CAAC2B;IAC1C,MAAMO,UAAU9B,wBAAwB;QACtC0B;QACAK,YAAY;QACZC,UAAUtC,YAAY,CAAC,CAACuC,MAAM;YAC5BJ,YAAYI,MAAMC,iBAAiB,KAAK;QAC1C,GAAG,EAAE;IACP;IAEA,qBACE;;YACG,CAACX,yBAAW,KAACY;gBAAK5B,KAAKuB;;0BACxB,KAACM;gBACE,GAAGd,SAAS;gBACbf,KAAK,CAAC8B;oBACJpC,SAASoC,UAAU9B;oBACnBmB,KAAKY,OAAO,GAAGD,UAAUE,iBAAiB;gBAC5C;gBACA9B,WAAWL,6BAA6B;oBACtCmB;oBACAH;oBACAX;gBACF;0BAEA,cAAA,KAACZ;oBACC2C,cAAYhC,aAAcgB,CAAAA,aAAab,OAAO8B,SAAQ;oBACtD7B,OAAOA;oBACPC,WAAWA;oBACXC,YAAYA;oBACZC,UAAUC,gBAAgBD;oBACzB,GAAGL,WAAW;oBACfD,WAAWN,oBAAoB;wBAC7BM,WAAWC,aAAaD;wBACxBW;oBACF;oBACAsB,SAAS,CAACC;wBACRjC,aAAagC,UAAUC;wBACvB,MAAMC,YAAYlB,KAAKY,OAAO;wBAC9B,IAAI,CAACM,WAAW;4BACd;wBACF;wBAEAA,UAAUC,QAAQ,CAChB1B,mBAAmB;4BACjBQ;4BACAmB,SAAS,CAACzB;4BACVD;4BACAwB;4BACAG,WAAWxB;wBACb;oBAEJ;8BAECN;;;YAGJM,yBAAW,KAACY;gBAAK5B,KAAKuB;;;;AAG7B,GAAG"}
+{"version":3,"sources":["../../src/tabs/TabListScrollButton.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  type ReactElement,\n  type Ref,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { type ButtonClassNameThemeOptions } from \"../button/styles.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useIntersectionObserver } from \"../useIntersectionObserver.js\";\nimport { applyRef } from \"../utils/applyRef.js\";\nimport {\n  type GetTabListScrollToOptions,\n  getTabListScrollToOptions,\n} from \"./getTabListScrollToOptions.js\";\nimport {\n  tabListScrollButton,\n  tabListScrollButtonContainer,\n} from \"./tabListScrollButtonStyles.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface BaseTabListScrollButtonProps\n  extends HTMLAttributes<HTMLDivElement>, ButtonClassNameThemeOptions {\n  buttonProps?: PropsWithRef<ButtonProps>;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /** @defaultValue {@link getTabListScrollToOptions} */\n  getScrollToOptions?: GetTabListScrollToOptions;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface TabListScrollButtonProps extends BaseTabListScrollButtonProps {\n  ref?: Ref<HTMLDivElement>;\n\n  type: \"back\" | \"forward\";\n  /** @defaultValue `false` */\n  vertical?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport function TabListScrollButton(\n  props: TabListScrollButtonProps\n): ReactElement {\n  const {\n    ref,\n    \"aria-label\": ariaLabel,\n    className,\n    buttonProps,\n    type,\n    theme,\n    themeType,\n    buttonType = \"icon\",\n    disabled: propDisabled,\n    children: propChildren,\n    getScrollToOptions = getTabListScrollToOptions,\n    vertical = false,\n    disableTransition = false,\n    ...remaining\n  } = props;\n\n  const forward = type === \"forward\";\n  const iconButton = buttonType === \"icon\";\n  const icon = getIcon(type);\n  const children = propChildren || icon;\n\n  const root = useRef<HTMLElement | null>(null);\n  const isRTL = useDir().dir === \"rtl\";\n  const [disabled, setDisabled] = useState(!forward);\n  const nodeRef = useIntersectionObserver({\n    root,\n    rootMargin: \"1px\",\n    onUpdate: useCallback(([entry]) => {\n      setDisabled(entry.intersectionRatio === 1);\n    }, []),\n  });\n\n  return (\n    <>\n      {!forward && <span ref={nodeRef} />}\n      <div\n        {...remaining}\n        ref={(instance) => {\n          applyRef(instance, ref);\n          root.current = instance?.parentElement || null;\n        }}\n        className={tabListScrollButtonContainer({\n          forward,\n          vertical,\n          className,\n        })}\n      >\n        <Button\n          aria-label={ariaLabel || (iconButton ? type : undefined)}\n          theme={theme}\n          themeType={themeType}\n          buttonType={buttonType}\n          disabled={propDisabled || disabled}\n          {...buttonProps}\n          className={tabListScrollButton({\n            className: buttonProps?.className,\n            vertical,\n          })}\n          onClick={(event) => {\n            buttonProps?.onClick?.(event);\n            const container = root.current;\n            if (!container) {\n              return;\n            }\n\n            container.scrollTo(\n              getScrollToOptions({\n                isRTL,\n                animate: !disableTransition,\n                vertical,\n                container,\n                increment: forward,\n              })\n            );\n          }}\n        >\n          {children}\n        </Button>\n      </div>\n      {forward && <span ref={nodeRef} />}\n    </>\n  );\n}\n"],"names":["useCallback","useRef","useState","Button","getIcon","useDir","useIntersectionObserver","applyRef","getTabListScrollToOptions","tabListScrollButton","tabListScrollButtonContainer","TabListScrollButton","props","ref","ariaLabel","className","buttonProps","type","theme","themeType","buttonType","disabled","propDisabled","children","propChildren","getScrollToOptions","vertical","disableTransition","remaining","forward","iconButton","icon","root","isRTL","dir","setDisabled","nodeRef","rootMargin","onUpdate","entry","intersectionRatio","span","div","instance","current","parentElement","aria-label","undefined","onClick","event","container","scrollTo","animate","increment"],"mappings":"AAAA;;AAEA,SAIEA,WAAW,EACXC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,MAAM,QAA0B,sBAAsB;AAE/D,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,MAAM,QAAQ,4CAA4C;AACnE,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAEEC,yBAAyB,QACpB,iCAAiC;AACxC,SACEC,mBAAmB,EACnBC,4BAA4B,QACvB,iCAAiC;AA6BxC;;;;;CAKC,GACD,OAAO,SAASC,oBACdC,KAA+B;IAE/B,MAAM,EACJC,GAAG,EACH,cAAcC,SAAS,EACvBC,SAAS,EACTC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,SAAS,EACTC,aAAa,MAAM,EACnBC,UAAUC,YAAY,EACtBC,UAAUC,YAAY,EACtBC,qBAAqBjB,yBAAyB,EAC9CkB,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGhB;IAEJ,MAAMiB,UAAUZ,SAAS;IACzB,MAAMa,aAAaV,eAAe;IAClC,MAAMW,OAAO3B,QAAQa;IACrB,MAAMM,WAAWC,gBAAgBO;IAEjC,MAAMC,OAAO/B,OAA2B;IACxC,MAAMgC,QAAQ5B,SAAS6B,GAAG,KAAK;IAC/B,MAAM,CAACb,UAAUc,YAAY,GAAGjC,SAAS,CAAC2B;IAC1C,MAAMO,UAAU9B,wBAAwB;QACtC0B;QACAK,YAAY;QACZC,UAAUtC,YAAY,CAAC,CAACuC,MAAM;YAC5BJ,YAAYI,MAAMC,iBAAiB,KAAK;QAC1C,GAAG,EAAE;IACP;IAEA,qBACE;;YACG,CAACX,yBAAW,KAACY;gBAAK5B,KAAKuB;;0BACxB,KAACM;gBACE,GAAGd,SAAS;gBACbf,KAAK,CAAC8B;oBACJpC,SAASoC,UAAU9B;oBACnBmB,KAAKY,OAAO,GAAGD,UAAUE,iBAAiB;gBAC5C;gBACA9B,WAAWL,6BAA6B;oBACtCmB;oBACAH;oBACAX;gBACF;0BAEA,cAAA,KAACZ;oBACC2C,cAAYhC,aAAcgB,CAAAA,aAAab,OAAO8B,SAAQ;oBACtD7B,OAAOA;oBACPC,WAAWA;oBACXC,YAAYA;oBACZC,UAAUC,gBAAgBD;oBACzB,GAAGL,WAAW;oBACfD,WAAWN,oBAAoB;wBAC7BM,WAAWC,aAAaD;wBACxBW;oBACF;oBACAsB,SAAS,CAACC;wBACRjC,aAAagC,UAAUC;wBACvB,MAAMC,YAAYlB,KAAKY,OAAO;wBAC9B,IAAI,CAACM,WAAW;4BACd;wBACF;wBAEAA,UAAUC,QAAQ,CAChB1B,mBAAmB;4BACjBQ;4BACAmB,SAAS,CAACzB;4BACVD;4BACAwB;4BACAG,WAAWxB;wBACb;oBAEJ;8BAECN;;;YAGJM,yBAAW,KAACY;gBAAK5B,KAAKuB;;;;AAG7B"}