@react-md/core 1.0.0-next.15 → 1.0.0-next.17

package/dist/tabs/TabListScrollButton.d.ts

@@ -2,7 +2,7 @@ import { type HTMLAttributes } from "react";
 import { type ButtonProps } from "../button/Button.js";
 import { type ButtonClassNameThemeOptions } from "../button/buttonStyles.js";
 import { type PropsWithRef } from "../types.js";
-import { type GetTabListScrollToOptions } from "./utils.js";
+import { type GetTabListScrollToOptions } from "./getTabListScrollToOptions.js";
 /**
  * @internal
  * @since 6.0.0

package/dist/tabs/TabListScrollButton.js

@@ -6,8 +6,8 @@ import { getIcon } from "../icon/iconConfig.js";
 import { useDir } from "../typography/WritingDirectionProvider.js";
 import { useIntersectionObserver } from "../useIntersectionObserver.js";
 import { applyRef } from "../utils/applyRef.js";
+import { getTabListScrollToOptions } from "./getTabListScrollToOptions.js";
 import { tabListScrollButton, tabListScrollButtonContainer } from "./tabListScrollButtonStyles.js";
-import { getTabListScrollToOptions } from "./utils.js";
 /**
  * **Client Component**
  *
@@ -41,6 +41,7 @@ import { getTabListScrollToOptions } from "./utils.js";
                 },
                 className: tabListScrollButtonContainer({
                     forward,
+                    vertical,
                     className
                 }),
                 children: /*#__PURE__*/ _jsx(Button, {
@@ -50,7 +51,10 @@ import { getTabListScrollToOptions } from "./utils.js";
                     buttonType: buttonType,
                     disabled: propDisabled || disabled,
                     ...buttonProps,
-                    className: tabListScrollButton(buttonProps),
+                    className: tabListScrollButton({
+                        className: buttonProps?.className,
+                        vertical
+                    }),
                     onClick: (event)=>{
                         buttonProps?.onClick?.(event);
                         const container = root.current;

package/dist/tabs/TabListScrollButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/TabListScrollButton.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from \"react\";\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { type ButtonClassNameThemeOptions } from \"../button/buttonStyles.js\";\nimport { getIcon } from \"../icon/iconConfig.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  tabListScrollButton,\n  tabListScrollButtonContainer,\n} from \"./tabListScrollButtonStyles.js\";\nimport {\n  getTabListScrollToOptions,\n  type GetTabListScrollToOptions,\n} from \"./utils.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface BaseTabListScrollButtonProps\n  extends HTMLAttributes<HTMLDivElement>,\n    ButtonClassNameThemeOptions {\n  buttonProps?: PropsWithRef<ButtonProps, HTMLButtonElement>;\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    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({ forward, className })}\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(buttonProps)}\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","tabListScrollButton","tabListScrollButtonContainer","getTabListScrollToOptions","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","onUpdate","entry","intersectionRatio","span","div","instance","current","parentElement","aria-label","undefined","onClick","event","container","scrollTo","animate","increment"],"mappings":"AAAA;;AACA,SACEA,UAAU,EACVC,WAAW,EACXC,MAAM,EACNC,QAAQ,QAEH,QAAQ;AACf,SAASC,MAAM,QAA0B,sBAAsB;AAE/D,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,MAAM,QAAQ,4CAA4C;AACnE,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SACEC,mBAAmB,EACnBC,4BAA4B,QACvB,iCAAiC;AACxC,SACEC,yBAAyB,QAEpB,aAAa;AA4BpB;;;;;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,qBAAqBf,yBAAyB,EAC9CgB,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,UAAUrC,YAAY,CAAC,CAACsC,MAAM;YAC5BH,YAAYG,MAAMC,iBAAiB,KAAK;QAC1C,GAAG,EAAE;IACP;IAEA,qBACE;;YACG,CAACV,yBAAW,KAACW;gBAAK3B,KAAKuB;;0BACxB,KAACK;gBACE,GAAGb,SAAS;gBACbf,KAAK,CAAC6B;oBACJnC,SAASmC,UAAU7B;oBACnBmB,KAAKW,OAAO,GAAGD,UAAUE,iBAAiB;gBAC5C;gBACA7B,WAAWN,6BAA6B;oBAAEoB;oBAASd;gBAAU;0BAE7D,cAAA,KAACZ;oBACC0C,cAAY/B,aAAcgB,CAAAA,aAAab,OAAO6B,SAAQ;oBACtD5B,OAAOA;oBACPC,WAAWA;oBACXC,YAAYA;oBACZC,UAAUC,gBAAgBD;oBACzB,GAAGL,WAAW;oBACfD,WAAWP,oBAAoBQ;oBAC/B+B,SAAS,CAACC;wBACRhC,aAAa+B,UAAUC;wBACvB,MAAMC,YAAYjB,KAAKW,OAAO;wBAC9B,IAAI,CAACM,WAAW;4BACd;wBACF;wBAEAA,UAAUC,QAAQ,CAChBzB,mBAAmB;4BACjBQ;4BACAkB,SAAS,CAACxB;4BACVD;4BACAuB;4BACAG,WAAWvB;wBACb;oBAEJ;8BAECN;;;YAGJM,yBAAW,KAACW;gBAAK3B,KAAKuB;;;;AAG7B,GAAG"}
+{"version":3,"sources":["../../src/tabs/TabListScrollButton.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from \"react\";\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { type ButtonClassNameThemeOptions } from \"../button/buttonStyles.js\";\nimport { getIcon } from \"../icon/iconConfig.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  getTabListScrollToOptions,\n  type 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>,\n    ButtonClassNameThemeOptions {\n  buttonProps?: PropsWithRef<ButtonProps, HTMLButtonElement>;\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    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","onUpdate","entry","intersectionRatio","span","div","instance","current","parentElement","aria-label","undefined","onClick","event","container","scrollTo","animate","increment"],"mappings":"AAAA;;AACA,SACEA,UAAU,EACVC,WAAW,EACXC,MAAM,EACNC,QAAQ,QAEH,QAAQ;AACf,SAASC,MAAM,QAA0B,sBAAsB;AAE/D,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,MAAM,QAAQ,4CAA4C;AACnE,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SACEC,yBAAyB,QAEpB,iCAAiC;AACxC,SACEC,mBAAmB,EACnBC,4BAA4B,QACvB,iCAAiC;AA4BxC;;;;;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,UAAUrC,YAAY,CAAC,CAACsC,MAAM;YAC5BH,YAAYG,MAAMC,iBAAiB,KAAK;QAC1C,GAAG,EAAE;IACP;IAEA,qBACE;;YACG,CAACV,yBAAW,KAACW;gBAAK3B,KAAKuB;;0BACxB,KAACK;gBACE,GAAGb,SAAS;gBACbf,KAAK,CAAC6B;oBACJnC,SAASmC,UAAU7B;oBACnBmB,KAAKW,OAAO,GAAGD,UAAUE,iBAAiB;gBAC5C;gBACA7B,WAAWL,6BAA6B;oBACtCmB;oBACAH;oBACAX;gBACF;0BAEA,cAAA,KAACZ;oBACC0C,cAAY/B,aAAcgB,CAAAA,aAAab,OAAO6B,SAAQ;oBACtD5B,OAAOA;oBACPC,WAAWA;oBACXC,YAAYA;oBACZC,UAAUC,gBAAgBD;oBACzB,GAAGL,WAAW;oBACfD,WAAWN,oBAAoB;wBAC7BM,WAAWC,aAAaD;wBACxBW;oBACF;oBACAqB,SAAS,CAACC;wBACRhC,aAAa+B,UAAUC;wBACvB,MAAMC,YAAYjB,KAAKW,OAAO;wBAC9B,IAAI,CAACM,WAAW;4BACd;wBACF;wBAEAA,UAAUC,QAAQ,CAChBzB,mBAAmB;4BACjBQ;4BACAkB,SAAS,CAACxB;4BACVD;4BACAuB;4BACAG,WAAWvB;wBACb;oBAEJ;8BAECN;;;YAGJM,yBAAW,KAACW;gBAAK3B,KAAKuB;;;;AAG7B,GAAG"}

package/dist/tabs/_tabs.scss

@@ -17,8 +17,9 @@ $disable-tablist-indicator: false !default;
 $disable-tablist-hidden-scrollbar: false !default;
 $disable-tablist-scroll-button: false !default;
 $disable-tablist-active-indicator-transition: false !default;
+$disable-tablist-scroll-button-vertical: $disable-tablist-vertical !default;
 $disable-indicator: false !default;
-$disable-indicator-vertical: false !default;
+$disable-indicator-vertical: $disable-tablist-vertical !default;
 
 $typography: map.remove(typography.$button-styles, line-height) !default;
 $gap: icon.$spacing !default;
@@ -90,11 +91,15 @@ $variables: (
 
     @if not $disable-indicator-vertical {
       &--v::after {
-        @include utils.auto-rtl(left, $tablist-vertical-indicator-left);
-
         height: 100%;
+        left: $tablist-vertical-indicator-left;
         top: 0;
         width: $indicator-height;
+
+        @include utils.rtl {
+          left: auto;
+          right: $tablist-vertical-indicator-left;
+        }
       }
     }
 
@@ -133,7 +138,7 @@ $variables: (
     // make sure it can enable scrollbars in flex/grid containers
     max-width: 100%;
     outline: none;
-    overflow-x: auto;
+    overflow: auto;
     position: relative;
 
     &--full-width {
@@ -155,7 +160,12 @@ $variables: (
 
     @if not $disable-tablist-padded {
       &--padded {
-        @include utils.auto-rtl(padding-left, $tablist-padding-left);
+        padding-left: $tablist-padding-left;
+
+        @include utils.rtl {
+          padding-left: 0;
+          padding-right: $tablist-padding-left;
+        }
       }
     }
 
@@ -172,19 +182,48 @@ $variables: (
     display: inline-flex;
     flex-shrink: 0;
     justify-content: center;
+    max-width: $max-width;
     position: sticky;
     z-index: $tablist-scroller-z-index;
 
     &--left {
-      @include utils.auto-rtl(left, 0);
+      left: 0;
     }
 
     &--right {
-      @include utils.auto-rtl(right, 0);
+      right: 0;
+    }
+
+    @if not $disable-tablist-scroll-button-vertical {
+      &--above {
+        top: 0;
+      }
+
+      &--below {
+        bottom: 0;
+      }
     }
 
     &__button {
-      @include utils.rtl {
+      @if not $disable-tablist-scroll-button-vertical {
+        &--v {
+          transform: rotate(90deg);
+        }
+      }
+    }
+
+    @include utils.rtl {
+      &--left {
+        left: auto;
+        right: 0;
+      }
+
+      &--right {
+        left: 0;
+        right: auto;
+      }
+
+      &__button {
         transform: rotate(180deg);
       }
     }
@@ -205,9 +244,9 @@ $variables: (
     display: inline-flex;
     flex: 1 1 auto;
     gap: $gap;
-    height: $height;
     justify-content: center;
     max-width: $max-width;
+    min-height: $height;
     min-width: $min-width;
     padding: 0 $horizontal-padding;
     transition: color $transition-duration $transition-timing-function;

package/dist/tabs/getTabListScrollToOptions.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @since 6.0.0
+ */
+export interface TabListScrollToOptions {
+    isRTL: boolean;
+    animate: boolean;
+    vertical: boolean;
+    increment: boolean;
+    container: HTMLElement;
+}
+/**
+ * @since 6.0.0
+ */
+export type GetTabListScrollToOptions = (options: TabListScrollToOptions) => ScrollToOptions | undefined;
+/**
+ * @since 6.0.0
+ */
+export declare const getTabListScrollToOptions: GetTabListScrollToOptions;

package/dist/tabs/getTabListScrollToOptions.js

@@ -0,0 +1,19 @@
+/**
+ * @since 6.0.0
+ */ /**
+ * @since 6.0.0
+ */ export const getTabListScrollToOptions = (options)=>{
+    const { isRTL, animate, vertical, increment, container } = options;
+    const { scrollLeft, scrollTop, scrollWidth, scrollHeight } = container;
+    const currentScroll = vertical ? scrollTop : scrollLeft;
+    const scrollDistance = vertical ? scrollHeight : scrollWidth;
+    const amount = scrollDistance / 10 * (increment ? 1 : -1);
+    const distance = currentScroll + amount * (vertical || !isRTL ? 1 : -1);
+    return {
+        left: vertical ? undefined : distance,
+        top: vertical ? distance : undefined,
+        behavior: animate ? "smooth" : "auto"
+    };
+};
+
+//# sourceMappingURL=getTabListScrollToOptions.js.map

package/dist/tabs/getTabListScrollToOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tabs/getTabListScrollToOptions.ts"],"sourcesContent":["/**\n * @since 6.0.0\n */\nexport interface TabListScrollToOptions {\n  isRTL: boolean;\n  animate: boolean;\n  vertical: boolean;\n  increment: boolean;\n  container: HTMLElement;\n}\n\n/**\n * @since 6.0.0\n */\nexport type GetTabListScrollToOptions = (\n  options: TabListScrollToOptions\n) => ScrollToOptions | undefined;\n\n/**\n * @since 6.0.0\n */\nexport const getTabListScrollToOptions: GetTabListScrollToOptions = (\n  options\n) => {\n  const { isRTL, animate, vertical, increment, container } = options;\n  const { scrollLeft, scrollTop, scrollWidth, scrollHeight } = container;\n  const currentScroll = vertical ? scrollTop : scrollLeft;\n  const scrollDistance = vertical ? scrollHeight : scrollWidth;\n  const amount = (scrollDistance / 10) * (increment ? 1 : -1);\n  const distance = currentScroll + amount * (vertical || !isRTL ? 1 : -1);\n\n  return {\n    left: vertical ? undefined : distance,\n    top: vertical ? distance : undefined,\n    behavior: animate ? \"smooth\" : \"auto\",\n  };\n};\n"],"names":["getTabListScrollToOptions","options","isRTL","animate","vertical","increment","container","scrollLeft","scrollTop","scrollWidth","scrollHeight","currentScroll","scrollDistance","amount","distance","left","undefined","top","behavior"],"mappings":"AAAA;;CAEC,GAgBD;;CAEC,GACD,OAAO,MAAMA,4BAAuD,CAClEC;IAEA,MAAM,EAAEC,KAAK,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGL;IAC3D,MAAM,EAAEM,UAAU,EAAEC,SAAS,EAAEC,WAAW,EAAEC,YAAY,EAAE,GAAGJ;IAC7D,MAAMK,gBAAgBP,WAAWI,YAAYD;IAC7C,MAAMK,iBAAiBR,WAAWM,eAAeD;IACjD,MAAMI,SAAS,AAACD,iBAAiB,KAAOP,CAAAA,YAAY,IAAI,CAAC,CAAA;IACzD,MAAMS,WAAWH,gBAAgBE,SAAUT,CAAAA,YAAY,CAACF,QAAQ,IAAI,CAAC,CAAA;IAErE,OAAO;QACLa,MAAMX,WAAWY,YAAYF;QAC7BG,KAAKb,WAAWU,WAAWE;QAC3BE,UAAUf,UAAU,WAAW;IACjC;AACF,EAAE"}

package/dist/tabs/tabListScrollButtonStyles.d.ts

@@ -4,6 +4,7 @@
 export interface TabListScrollButtonContainerClassNameOptions {
     className?: string;
     forward: boolean;
+    vertical?: boolean;
 }
 /**
  * @since 6.0.0
@@ -14,6 +15,7 @@ export declare function tabListScrollButtonContainer(options: TabListScrollButto
  */
 export interface TabListScrollButtonClassNameOptions {
     className?: string;
+    vertical?: boolean;
 }
 /**
  * @since 6.0.0

package/dist/tabs/tabListScrollButtonStyles.js

@@ -4,17 +4,21 @@ const styles = bem("rmd-tablist-button");
 /**
  * @since 6.0.0
  */ export function tabListScrollButtonContainer(options) {
-    const { forward, className } = options;
+    const { forward, vertical, className } = options;
     return cnb(styles({
-        left: !forward,
-        right: forward
+        left: !vertical && !forward,
+        right: !vertical && forward,
+        above: vertical && !forward,
+        below: vertical && forward
     }), className);
 }
 /**
  * @since 6.0.0
  */ export function tabListScrollButton(options = {}) {
-    const { className } = options;
-    return cnb(styles("button"), className);
+    const { className, vertical } = options;
+    return cnb(styles("button", {
+        v: vertical
+    }), className);
 }
 
 //# sourceMappingURL=tabListScrollButtonStyles.js.map

package/dist/tabs/tabListScrollButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/tabListScrollButtonStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-tablist-button\");\n\n/**\n * @since 6.0.0\n */\nexport interface TabListScrollButtonContainerClassNameOptions {\n  className?: string;\n  forward: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tabListScrollButtonContainer(\n  options: TabListScrollButtonContainerClassNameOptions\n): string {\n  const { forward, className } = options;\n\n  return cnb(\n    styles({\n      left: !forward,\n      right: forward,\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabListScrollButtonClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tabListScrollButton(\n  options: TabListScrollButtonClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"button\"), className);\n}\n"],"names":["cnb","bem","styles","tabListScrollButtonContainer","options","forward","className","left","right","tabListScrollButton"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAUnB;;CAEC,GACD,OAAO,SAASE,6BACdC,OAAqD;IAErD,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGF;IAE/B,OAAOJ,IACLE,OAAO;QACLK,MAAM,CAACF;QACPG,OAAOH;IACT,IACAC;AAEJ;AASA;;CAEC,GACD,OAAO,SAASG,oBACdL,UAA+C,CAAC,CAAC;IAEjD,MAAM,EAAEE,SAAS,EAAE,GAAGF;IAEtB,OAAOJ,IAAIE,OAAO,WAAWI;AAC/B"}
+{"version":3,"sources":["../../src/tabs/tabListScrollButtonStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-tablist-button\");\n\n/**\n * @since 6.0.0\n */\nexport interface TabListScrollButtonContainerClassNameOptions {\n  className?: string;\n  forward: boolean;\n  vertical?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tabListScrollButtonContainer(\n  options: TabListScrollButtonContainerClassNameOptions\n): string {\n  const { forward, vertical, className } = options;\n\n  return cnb(\n    styles({\n      left: !vertical && !forward,\n      right: !vertical && forward,\n      above: vertical && !forward,\n      below: vertical && forward,\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabListScrollButtonClassNameOptions {\n  className?: string;\n  vertical?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tabListScrollButton(\n  options: TabListScrollButtonClassNameOptions = {}\n): string {\n  const { className, vertical } = options;\n\n  return cnb(styles(\"button\", { v: vertical }), className);\n}\n"],"names":["cnb","bem","styles","tabListScrollButtonContainer","options","forward","vertical","className","left","right","above","below","tabListScrollButton","v"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAWnB;;CAEC,GACD,OAAO,SAASE,6BACdC,OAAqD;IAErD,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGH;IAEzC,OAAOJ,IACLE,OAAO;QACLM,MAAM,CAACF,YAAY,CAACD;QACpBI,OAAO,CAACH,YAAYD;QACpBK,OAAOJ,YAAY,CAACD;QACpBM,OAAOL,YAAYD;IACrB,IACAE;AAEJ;AAUA;;CAEC,GACD,OAAO,SAASK,oBACdR,UAA+C,CAAC,CAAC;IAEjD,MAAM,EAAEG,SAAS,EAAED,QAAQ,EAAE,GAAGF;IAEhC,OAAOJ,IAAIE,OAAO,UAAU;QAAEW,GAAGP;IAAS,IAAIC;AAChD"}

package/dist/tabs/tabStyles.d.ts

@@ -4,6 +4,9 @@ declare module "react" {
         "--rmd-tab-active-color"?: string;
         "--rmd-tab-inactive-color"?: string;
         "--rmd-tab-disabled-color"?: string;
+        "--rmd-tab-size"?: string;
+        "--rmd-tab-offset"?: string | number;
+        "--rmd-tab-indicator-background"?: string;
     }
 }
 /**

package/dist/tabs/tabStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/tabStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { tabIndicator } from \"./tabIndicatorStyles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tab-color\"?: string;\n    \"--rmd-tab-active-color\"?: string;\n    \"--rmd-tab-inactive-color\"?: string;\n    \"--rmd-tab-disabled-color\"?: string;\n  }\n}\n\nconst styles = bem(\"rmd-tab\");\n\n/**\n * @since 6.0.0\n */\nexport interface TabClassNameOptions {\n  className?: string;\n  active?: boolean;\n  isLink?: boolean;\n  activeIndicator?: boolean;\n  verticalActiveIndicator?: boolean;\n  stacked?: boolean;\n  reversed?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tab(options: TabClassNameOptions = {}): string {\n  const {\n    className,\n    active,\n    isLink,\n    stacked,\n    reversed,\n    disabled,\n    activeIndicator,\n    verticalActiveIndicator,\n  } = options;\n\n  return cnb(\n    styles({\n      active,\n      reversed: reversed && !stacked,\n      stacked,\n      \"stacked-reversed\": stacked && reversed,\n      disabled,\n    }),\n    active &&\n      activeIndicator &&\n      tabIndicator({ vertical: verticalActiveIndicator }),\n    cssUtils({ surface: true, textDecoration: isLink ? \"none\" : undefined }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","tabIndicator","styles","tab","options","className","active","isLink","stacked","reversed","disabled","activeIndicator","verticalActiveIndicator","vertical","surface","textDecoration","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,YAAY,QAAQ,0BAA0B;AAWvD,MAAMC,SAASF,IAAI;AAgBnB;;CAEC,GACD,OAAO,SAASG,IAAIC,UAA+B,CAAC,CAAC;IACnD,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,eAAe,EACfC,uBAAuB,EACxB,GAAGR;IAEJ,OAAON,IACLI,OAAO;QACLI;QACAG,UAAUA,YAAY,CAACD;QACvBA;QACA,oBAAoBA,WAAWC;QAC/BC;IACF,IACAJ,UACEK,mBACAV,aAAa;QAAEY,UAAUD;IAAwB,IACnDb,SAAS;QAAEe,SAAS;QAAMC,gBAAgBR,SAAS,SAASS;IAAU,IACtEX;AAEJ"}
+{"version":3,"sources":["../../src/tabs/tabStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { tabIndicator } from \"./tabIndicatorStyles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tab-color\"?: string;\n    \"--rmd-tab-active-color\"?: string;\n    \"--rmd-tab-inactive-color\"?: string;\n    \"--rmd-tab-disabled-color\"?: string;\n\n    \"--rmd-tab-size\"?: string;\n    \"--rmd-tab-offset\"?: string | number;\n    \"--rmd-tab-indicator-background\"?: string;\n  }\n}\n\nconst styles = bem(\"rmd-tab\");\n\n/**\n * @since 6.0.0\n */\nexport interface TabClassNameOptions {\n  className?: string;\n  active?: boolean;\n  isLink?: boolean;\n  activeIndicator?: boolean;\n  verticalActiveIndicator?: boolean;\n  stacked?: boolean;\n  reversed?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tab(options: TabClassNameOptions = {}): string {\n  const {\n    className,\n    active,\n    isLink,\n    stacked,\n    reversed,\n    disabled,\n    activeIndicator,\n    verticalActiveIndicator,\n  } = options;\n\n  return cnb(\n    styles({\n      active,\n      reversed: reversed && !stacked,\n      stacked,\n      \"stacked-reversed\": stacked && reversed,\n      disabled,\n    }),\n    active &&\n      activeIndicator &&\n      tabIndicator({ vertical: verticalActiveIndicator }),\n    cssUtils({ surface: true, textDecoration: isLink ? \"none\" : undefined }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","tabIndicator","styles","tab","options","className","active","isLink","stacked","reversed","disabled","activeIndicator","verticalActiveIndicator","vertical","surface","textDecoration","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,YAAY,QAAQ,0BAA0B;AAevD,MAAMC,SAASF,IAAI;AAgBnB;;CAEC,GACD,OAAO,SAASG,IAAIC,UAA+B,CAAC,CAAC;IACnD,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,eAAe,EACfC,uBAAuB,EACxB,GAAGR;IAEJ,OAAON,IACLI,OAAO;QACLI;QACAG,UAAUA,YAAY,CAACD;QACvBA;QACA,oBAAoBA,WAAWC;QAC/BC;IACF,IACAJ,UACEK,mBACAV,aAAa;QAAEY,UAAUD;IAAwB,IACnDb,SAAS;QAAEe,SAAS;QAAMC,gBAAgBR,SAAS,SAASS;IAAU,IACtEX;AAEJ"}

package/dist/tabs/useTabList.d.ts

@@ -1,12 +1,5 @@
 import type { CSSProperties, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, Ref, RefObject } from "react";
 import type { KeyboardMovementContext, KeyboardMovementProps } from "../movement/types.js";
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-tab-size"?: string;
-        "--rmd-tab-offset"?: string | number;
-        "--rmd-tab-indicator-background"?: string;
-    }
-}
 declare const TAB_SIZE_VAR = "--rmd-tab-size";
 declare const TAB_OFFSET_VAR = "--rmd-tab-offset";
 export type TabWidthVar = typeof TAB_SIZE_VAR;
@@ -16,7 +9,7 @@ export interface TabListHookOptions {
     ref: Ref<HTMLDivElement> | undefined;
     style: CSSProperties | undefined;
     activeIndex: number;
-    setActiveIndex(nextActiveIndex: number): void;
+    setActiveIndex: (nextActiveIndex: number) => void;
     scrollButtons: boolean;
     activationMode: "manual" | "automatic";
     vertical: boolean;
@@ -37,11 +30,13 @@ export interface TabListHookReturnValue {
         ref: RefObject<HTMLDivElement>;
         type: "back";
         vertical: boolean;
+        disableTransition?: boolean;
     };
     forwardProps: {
         ref: RefObject<HTMLDivElement>;
         type: "forward";
         vertical: boolean;
+        disableTransition?: boolean;
     };
 }
 /**

package/dist/tabs/useTabList.js

@@ -30,6 +30,7 @@ const noop = ()=>{
             // this is kind of hacky -- the styles should update when switching between
             // RTL, but the RTL state isn't required for any styles. Just reference it
             // so that the hooks eslint rule doesn't show a warning...
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
             isRTL;
             const activeTab = getTabRoleOnly(entry.target)[activeIndex];
             if (!activeTab) {
@@ -117,12 +118,14 @@ const noop = ()=>{
         backwardProps: {
             ref: backwardRef,
             type: "back",
-            vertical
+            vertical,
+            disableTransition
         },
         forwardProps: {
             ref: forwardRef,
             type: "forward",
-            vertical
+            vertical,
+            disableTransition
         },
         movementContext
     };

package/dist/tabs/useTabList.js.map

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

package/dist/tabs/useTabs.d.ts

@@ -1,6 +1,6 @@
-import type { Dispatch, Ref } from "react";
-import type { SlideDirection } from "../transition/SlideContainer.js";
-import type { UseStateInitializer, UseStateSetter } from "../types.js";
+import { type Dispatch, type Ref } from "react";
+import { type SlideDirection } from "../transition/SlideContainer.js";
+import { type UseStateInitializer, type UseStateSetter } from "../types.js";
 /**
  * @since 6.0.0
  */
@@ -12,14 +12,6 @@ export interface TabsHookOptions<TabValue extends string | number = number> {
      * @defaultValue `"tab-" + useId()`
      */
     baseId?: string;
-    /**
-     * Set this to `true` if changing active tabs should no longer attempt to
-     * scroll to the top of the tab panels container when using the
-     * {@link TabsImplementation.getTabPanelsProps}.
-     *
-     * @defaultValue `false`
-     */
-    disableScrollFix?: boolean;
     /**
      * Set this to an **ordered** list of tab values when:
      * - using a `string` tab value
@@ -42,6 +34,26 @@ export interface TabsHookOptions<TabValue extends string | number = number> {
      * @defaultValue `0`
      */
     defaultActiveTab?: UseStateInitializer<TabValue>;
+    /** Convenience pass-through prop to {@link TabProps.stacked} */
+    stacked?: boolean;
+    /** Convenience pass-through prop to {@link TabProps.iconAfter} */
+    iconAfter?: boolean;
+    /** Convenience pass-through props to {@link TabListProps.vertical} */
+    vertical?: boolean;
+    /**
+     * Set this to `true` if changing active tabs should no longer attempt to
+     * scroll to the top of the tab panels container when using the
+     * {@link TabsImplementation.getTabPanelsProps}.
+     *
+     * @defaultValue `false`
+     */
+    disableScrollFix?: boolean;
+    /**
+     * Convenience prop to disable all transitions for the
+     * {@link TabsImplementation.getTabProps} and
+     * {@link TabsImplementation.getTabListProps}.
+     */
+    disableTransition?: boolean;
 }
 /**
  * @since 6.0.0
@@ -50,6 +62,14 @@ export interface ProvidedTabProps {
     "aria-controls": string;
     id: string;
     active: boolean;
+    /** Convenience pass-through prop from {@link TabsHookOptions.stacked} */
+    stacked?: boolean;
+    /** Convenience pass-through prop from {@link TabsHookOptions.iconAfter} */
+    iconAfter?: boolean;
+    /** Convenience pass-through prop from {@link TabsHookOptions.disableTransition} */
+    activeIndicator?: boolean;
+    /** Convenience pass-through prop from {@link TabsHookOptions.vertical} and {@link TabsHookOptions.disableTransition} */
+    verticalActiveIndicator?: boolean;
 }
 /**
  * @since 6.0.0
@@ -57,6 +77,8 @@ export interface ProvidedTabProps {
 export interface ProvidedTabListProps {
     activeIndex: number;
     setActiveIndex: Dispatch<number>;
+    vertical?: boolean;
+    disableTransition?: boolean;
 }
 /**
  * @since 6.0.0
@@ -81,11 +103,11 @@ export interface TabsImplementation<TabValue extends string | number = number> {
     direction: SlideDirection;
     setDirection: UseStateSetter<SlideDirection>;
     activeTab?: TabValue;
-    setActiveTab?(nextActiveTab: TabValue): void;
-    getTabProps(tabValue: TabValue): ProvidedTabProps;
-    getTabListProps(): ProvidedTabListProps;
-    getTabPanelProps(tabValue: TabValue): ProvidedTabPanelProps;
-    getTabPanelsProps<E extends HTMLElement>(): ProvidedTabPanelsProps<E>;
+    setActiveTab?: (nextActiveTab: TabValue) => void;
+    getTabProps: (tabValue: TabValue) => ProvidedTabProps;
+    getTabListProps: () => ProvidedTabListProps;
+    getTabPanelProps: (tabValue: TabValue) => ProvidedTabPanelProps;
+    getTabPanelsProps: <E extends HTMLElement>() => ProvidedTabPanelsProps<E>;
 }
 /**
  * @example Super Simple
@@ -124,7 +146,7 @@ export interface TabsImplementation<TabValue extends string | number = number> {
  *
  * @since 6.0.0
  */
-export declare function useTabs(): TabsImplementation<number> & {
+export declare function useTabs(): TabsImplementation & {
     activeTab: number;
     setActiveTab: number;
 };

package/dist/tabs/useTabs.js

@@ -10,7 +10,7 @@ const PANEL_PREFIX = "panel-";
  *
  * @since 6.0.0
  */ export function useTabs(options = {}) {
-    const { baseId: propBaseId, disableScrollFix, tabs = EMPTY_LIST, activeTab: propActiveTab, setActiveTab: propSetActiveTab, defaultActiveTab } = options;
+    const { baseId: propBaseId, tabs = EMPTY_LIST, stacked, vertical, iconAfter, activeTab: propActiveTab, setActiveTab: propSetActiveTab, defaultActiveTab, disableScrollFix, disableTransition } = options;
     const baseId = useEnsuredId(propBaseId, "tab");
     const [direction, setDirection] = useState("left");
     const [activeTab, setActiveTab] = useEnsuredState({
@@ -41,7 +41,11 @@ const PANEL_PREFIX = "panel-";
             return {
                 "aria-controls": getTabId(tabValue, PANEL_PREFIX),
                 id: getTabId(tabValue),
-                active: tabValue === activeTab
+                active: tabValue === activeTab,
+                stacked,
+                iconAfter,
+                activeIndicator: disableTransition,
+                verticalActiveIndicator: vertical && disableTransition
             };
         },
         getTabListProps () {
@@ -54,7 +58,9 @@ const PANEL_PREFIX = "panel-";
                     } else {
                         setActiveTab(nextActiveIndex);
                     }
-                }
+                },
+                vertical,
+                disableTransition
             };
         },
         getTabPanelProps (tabValue) {