@elliemae/ds-tabs 3.60.0-next.4 → 3.60.0-next.41

package/dist/cjs/config/useTabs.js

@@ -48,10 +48,16 @@ const useTabs = (props) => {
   const firstActivableTabId = (0, import_react.useMemo)(() => {
     const childrenArray = import_react.default.Children.toArray(children);
     const firstActivableTab = childrenArray.filter((tab) => tab.props.disabled !== true)[0];
-    if (firstActivableTab === null) return "";
+    if (!firstActivableTab) return "";
     return firstActivableTab.props.tabId ?? "";
   }, [children]);
   const [internalActiveTab, setInternalActiveTab] = (0, import_react.useState)(firstActivableTabId);
+  const [focusedTabId, setFocusedTabId] = (0, import_react.useState)(firstActivableTabId);
+  (0, import_react.useEffect)(() => {
+    if (activeTab !== void 0) {
+      setFocusedTabId(activeTab);
+    }
+  }, [activeTab]);
   const actualActiveTab = (0, import_react.useMemo)(() => {
     if (activeTab !== void 0) return activeTab;
     return internalActiveTab;
@@ -135,7 +141,10 @@ const useTabs = (props) => {
       mobileGradients,
       updateMobileGradients,
       handleOnTabChange,
-      userDidChangeTabAtleastOnceRef
+      userDidChangeTabAtleastOnceRef,
+      firstActivableTabId,
+      focusedTabId,
+      setFocusedTabId
     }),
     [
       propsWithDefaults,
@@ -144,7 +153,9 @@ const useTabs = (props) => {
       mobileGradients,
       updateMobileGradients,
       handleOnTabChange,
-      userDidChangeTabAtleastOnceRef
+      userDidChangeTabAtleastOnceRef,
+      firstActivableTabId,
+      focusedTabId
     ]
   );
   return ctx;

package/dist/cjs/config/useTabs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useTabs.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport React, { useRef, useState, useMemo, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTabsDefaultProps } from '../react-desc-prop-types.js';\nimport type { DSTabsT, DSTabT } from '../react-desc-prop-types.js';\nimport type { DSTabsInternalsT } from '../sharedTypes.js';\nimport { centerTab, shouldHaveLeftGradient, shouldHaveRightGradient } from '../utils/helpers.js';\n\nexport const useTabs = (props: DSTabsT.Props): DSTabsInternalsT.DSTabsUseTabsContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSTabsT.InternalProps>(props, DSTabsDefaultProps);\n\n  const { activeTab, children, onTabChange, isDSMobile, fixedTabsHeaders } = propsWithDefaults;\n\n  const tabsRef = useRef<Record<number, HTMLButtonElement>>({});\n  const tabsRefAsArray = useRef<HTMLButtonElement[]>([]);\n  const focusableTabsRef = useRef<HTMLButtonElement[]>([]);\n  const carouselOnlyListRef = useRef<HTMLDivElement | null>(null);\n  const tabsListRef = useRef<HTMLDivElement | null>(null);\n  const actualActiveTabRef = useRef<HTMLButtonElement | null>(null);\n\n  // we can't activate disabled tabs, we search for the first activable tab\n  const firstActivableTabId = useMemo(() => {\n    const childrenArray = React.Children.toArray(children) as React.ReactElement<DSTabT.Props>[];\n    const firstActivableTab = childrenArray.filter((tab) => tab.props.disabled !== true)[0];\n\n    if (firstActivableTab === null) return '';\n    return firstActivableTab.props.tabId ?? '';\n  }, [children]);\n\n  const [internalActiveTab, setInternalActiveTab] = useState<string>(firstActivableTabId);\n\n  const actualActiveTab = useMemo(() => {\n    if (activeTab !== undefined) return activeTab;\n    return internalActiveTab;\n  }, [activeTab, internalActiveTab]);\n\n  useEffect(() => {\n    actualActiveTabRef.current = focusableTabsRef.current.find((el) => el.dataset.tabId === actualActiveTab) ?? null;\n  }, [actualActiveTab]);\n\n  useEffect(() => {\n    if (activeTab === undefined) {\n      const firstAvailableTab = focusableTabsRef.current.find((el) => el.ariaDisabled !== 'true');\n      setInternalActiveTab(firstAvailableTab?.dataset.tabId || '');\n    }\n  }, [activeTab]);\n\n  const [mobileGradients, setMobileGradients] = useState<DSTabsInternalsT.MobileGradientsT>({\n    left: false,\n    right: false,\n  });\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Updates mobile gradient visibility. It:\n   * 1. Calculates scroll position\n   * 2. Updates gradient visibility based on scroll\n   */\n  const updateMobileGradients = React.useCallback(() => {\n    if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {\n      const { scrollLeft, scrollWidth, clientWidth } = tabsListRef.current;\n      setMobileGradients({\n        left: shouldHaveLeftGradient(scrollLeft),\n        right: shouldHaveRightGradient(scrollLeft, clientWidth, scrollWidth),\n      });\n    }\n  }, [fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n  React.useLayoutEffect(() => {\n    if (isDSMobile && !fixedTabsHeaders) {\n      updateMobileGradients();\n    }\n  }, [updateMobileGradients, isDSMobile, fixedTabsHeaders, actualActiveTab]);\n\n  // due to a bunch of reasons and the component being biting more than it can chew\n  //  optimizing renders to make the swipe-card work \"as expected\"(not animating on first render)\n  //  simply isn't feasible at this time.\n  // how do we fix this anyway?\n  //   we track the first time a tab change triggered by the user happens\n  //   after the first user interaction we enable animations,\n  //     after that we give the animation handling control back to the swipe-card.\n  const userDidChangeTabAtleastOnceRef = useRef(false);\n\n  const handleOnTabChange = React.useCallback(\n    (tabId: string, e?: React.MouseEvent) => {\n      setInternalActiveTab(tabId);\n      onTabChange(tabId, e);\n      userDidChangeTabAtleastOnceRef.current = true;\n      if (isDSMobile && !fixedTabsHeaders && e) {\n        centerTab({ e, listRef: tabsListRef });\n      }\n    },\n    [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef],\n  );\n\n  const globalClickHandler = React.useCallback(\n    (data: DSTabsInternalsT.GlobalClickHandlerT): void => {\n      if (data.target === 'panel') {\n        // we need to allow the text selection in the panel\n        // this enters on conflict with the SwipeableViews component\n        if (propsWithDefaults.allowTextSelection) {\n          data.event.stopPropagation();\n        }\n      }\n\n      if (data.target === 'tabsList') {\n        const target = data.event.target as HTMLButtonElement;\n        const { dataset, ariaDisabled } = target;\n        if (dataset.tabId && ariaDisabled !== 'true') {\n          // handleOnTabChange(dataset.tabId, data.event);\n          if (isDSMobile && !fixedTabsHeaders && data.event) {\n            centerTab({ e: data.event, listRef: tabsListRef });\n          }\n        }\n      }\n      if (data.target === 'swipeableViews') {\n        handleOnTabChange(data.tabId!);\n      }\n      if (data.target === 'tabItem' && data.tabId && !(data.event.currentTarget as HTMLButtonElement).disabled) {\n        handleOnTabChange(data.tabId, data.event);\n      }\n    },\n    [propsWithDefaults.allowTextSelection, handleOnTabChange, tabsListRef, fixedTabsHeaders, isDSMobile],\n  );\n  const ctx = useMemo(\n    () => ({\n      props: propsWithDefaults,\n      tabsRef,\n      focusableTabsRef,\n      tabsListRef,\n      tabsRefAsArray,\n      setInternalActiveTab,\n      actualActiveTab,\n      actualActiveTabRef,\n      carouselOnlyListRef,\n      globalClickHandler,\n      mobileGradients,\n      updateMobileGradients,\n      handleOnTabChange,\n      userDidChangeTabAtleastOnceRef,\n    }),\n    [\n      propsWithDefaults,\n      actualActiveTab,\n      globalClickHandler,\n      mobileGradients,\n      updateMobileGradients,\n      handleOnTabChange,\n      userDidChangeTabAtleastOnceRef,\n    ],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport React, { useRef, useState, useMemo, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTabsDefaultProps } from '../react-desc-prop-types.js';\nimport type { DSTabsT, DSTabT } from '../react-desc-prop-types.js';\nimport type { DSTabsInternalsT } from '../sharedTypes.js';\nimport { centerTab, shouldHaveLeftGradient, shouldHaveRightGradient } from '../utils/helpers.js';\n\nexport const useTabs = (props: DSTabsT.Props): DSTabsInternalsT.DSTabsUseTabsContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSTabsT.InternalProps>(props, DSTabsDefaultProps);\n\n  const { activeTab, children, onTabChange, isDSMobile, fixedTabsHeaders } = propsWithDefaults;\n\n  const tabsRef = useRef<Record<number, HTMLButtonElement>>({});\n  const tabsRefAsArray = useRef<HTMLButtonElement[]>([]);\n  const focusableTabsRef = useRef<HTMLButtonElement[]>([]);\n  const carouselOnlyListRef = useRef<HTMLDivElement | null>(null);\n  const tabsListRef = useRef<HTMLDivElement | null>(null);\n  const actualActiveTabRef = useRef<HTMLButtonElement | null>(null);\n\n  // we can't activate disabled tabs, we search for the first activable tab\n  const firstActivableTabId = useMemo(() => {\n    const childrenArray = React.Children.toArray(children) as React.ReactElement<DSTabT.Props>[];\n    const firstActivableTab = childrenArray.filter((tab) => tab.props.disabled !== true)[0];\n\n    if (!firstActivableTab) return '';\n    return firstActivableTab.props.tabId ?? '';\n  }, [children]);\n\n  const [internalActiveTab, setInternalActiveTab] = useState<string>(firstActivableTabId);\n  const [focusedTabId, setFocusedTabId] = useState<string>(firstActivableTabId);\n\n  useEffect(() => {\n    if (activeTab !== undefined) {\n      setFocusedTabId(activeTab);\n    }\n  }, [activeTab]);\n\n  const actualActiveTab = useMemo(() => {\n    if (activeTab !== undefined) return activeTab;\n    return internalActiveTab;\n  }, [activeTab, internalActiveTab]);\n\n  useEffect(() => {\n    actualActiveTabRef.current = focusableTabsRef.current.find((el) => el.dataset.tabId === actualActiveTab) ?? null;\n  }, [actualActiveTab]);\n\n  useEffect(() => {\n    if (activeTab === undefined) {\n      const firstAvailableTab = focusableTabsRef.current.find((el) => el.ariaDisabled !== 'true');\n      setInternalActiveTab(firstAvailableTab?.dataset.tabId || '');\n    }\n  }, [activeTab]);\n\n  const [mobileGradients, setMobileGradients] = useState<DSTabsInternalsT.MobileGradientsT>({\n    left: false,\n    right: false,\n  });\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Updates mobile gradient visibility. It:\n   * 1. Calculates scroll position\n   * 2. Updates gradient visibility based on scroll\n   */\n  const updateMobileGradients = React.useCallback(() => {\n    if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {\n      const { scrollLeft, scrollWidth, clientWidth } = tabsListRef.current;\n      setMobileGradients({\n        left: shouldHaveLeftGradient(scrollLeft),\n        right: shouldHaveRightGradient(scrollLeft, clientWidth, scrollWidth),\n      });\n    }\n  }, [fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n  React.useLayoutEffect(() => {\n    if (isDSMobile && !fixedTabsHeaders) {\n      updateMobileGradients();\n    }\n  }, [updateMobileGradients, isDSMobile, fixedTabsHeaders, actualActiveTab]);\n\n  // due to a bunch of reasons and the component being biting more than it can chew\n  //  optimizing renders to make the swipe-card work \"as expected\"(not animating on first render)\n  //  simply isn't feasible at this time.\n  // how do we fix this anyway?\n  //   we track the first time a tab change triggered by the user happens\n  //   after the first user interaction we enable animations,\n  //     after that we give the animation handling control back to the swipe-card.\n  const userDidChangeTabAtleastOnceRef = useRef(false);\n\n  const handleOnTabChange = React.useCallback(\n    (tabId: string, e?: React.MouseEvent) => {\n      setInternalActiveTab(tabId);\n      onTabChange(tabId, e);\n      userDidChangeTabAtleastOnceRef.current = true;\n      if (isDSMobile && !fixedTabsHeaders && e) {\n        centerTab({ e, listRef: tabsListRef });\n      }\n    },\n    [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef],\n  );\n\n  const globalClickHandler = React.useCallback(\n    (data: DSTabsInternalsT.GlobalClickHandlerT): void => {\n      if (data.target === 'panel') {\n        // we need to allow the text selection in the panel\n        // this enters on conflict with the SwipeableViews component\n        if (propsWithDefaults.allowTextSelection) {\n          data.event.stopPropagation();\n        }\n      }\n\n      if (data.target === 'tabsList') {\n        const target = data.event.target as HTMLButtonElement;\n        const { dataset, ariaDisabled } = target;\n        if (dataset.tabId && ariaDisabled !== 'true') {\n          // handleOnTabChange(dataset.tabId, data.event);\n          if (isDSMobile && !fixedTabsHeaders && data.event) {\n            centerTab({ e: data.event, listRef: tabsListRef });\n          }\n        }\n      }\n      if (data.target === 'swipeableViews') {\n        handleOnTabChange(data.tabId!);\n      }\n      if (data.target === 'tabItem' && data.tabId && !(data.event.currentTarget as HTMLButtonElement).disabled) {\n        handleOnTabChange(data.tabId, data.event);\n      }\n    },\n    [propsWithDefaults.allowTextSelection, handleOnTabChange, tabsListRef, fixedTabsHeaders, isDSMobile],\n  );\n  const ctx = useMemo(\n    () => ({\n      props: propsWithDefaults,\n      tabsRef,\n      focusableTabsRef,\n      tabsListRef,\n      tabsRefAsArray,\n      setInternalActiveTab,\n      actualActiveTab,\n      actualActiveTabRef,\n      carouselOnlyListRef,\n      globalClickHandler,\n      mobileGradients,\n      updateMobileGradients,\n      handleOnTabChange,\n      userDidChangeTabAtleastOnceRef,\n      firstActivableTabId,\n      focusedTabId,\n      setFocusedTabId,\n    }),\n    [\n      propsWithDefaults,\n      actualActiveTab,\n      globalClickHandler,\n      mobileGradients,\n      updateMobileGradients,\n      handleOnTabChange,\n      userDidChangeTabAtleastOnceRef,\n      firstActivableTabId,\n      focusedTabId,\n    ],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/cjs/parts/carousel/Carousel.js

@@ -34,59 +34,24 @@ module.exports = __toCommonJS(Carousel_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_ds_icon = require("@elliemae/ds-icon");
-var import_ds_button_v2 = require("@elliemae/ds-button-v2");
-var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_styles = require("./styles.js");
 var import_useCarousel = require("./useCarousel.js");
 var import_DSTabsCTX = require("../../DSTabsCTX.js");
-var import_constants = require("../../constants/index.js");
 const Carousel = ({ children }) => {
-  const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = (0, import_useCarousel.useCarousel)();
-  const {
-    carouselOnlyListRef,
-    props,
-    props: { type }
-  } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
-  const { getOwnerProps } = (0, import_ds_props_helpers.useOwnerProps)(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledCarouselWrapper, { children: [
-    showChevrons.left && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCarouselButtonWrapper, { tabType: type, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_styles.StyledCarouselBtnLeft,
-      {
-        size: "s",
-        onClick: leftButtonOnClick,
-        tabIndex: -1,
-        "data-testid": import_constants.TABS_DATA_TESTID.CAROUSEL_BUTTON_LEFT,
-        buttonType: import_ds_button_v2.BUTTON_TYPES.ICON,
-        "aria-label": "Scroll Left",
-        getOwnerProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronLeft, { size: import_ds_icon.DSIconSizes.S })
-      }
-    ) }),
-    showChevrons.right && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCarouselButtonWrapper, { tabType: type, right: showChevrons.right, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_styles.StyledCarouselBtnRight,
-      {
-        size: "s",
-        onClick: rightButtonOnClick,
-        tabIndex: -1,
-        "data-testid": import_constants.TABS_DATA_TESTID.CAROUSEL_BUTTON_RIGHT,
-        buttonType: import_ds_button_v2.BUTTON_TYPES.ICON,
-        "aria-label": "Scroll Right",
-        getOwnerProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronRight, { size: import_ds_icon.DSIconSizes.S })
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_styles.StyledChildrenWrap,
-      {
-        role: "tablist",
-        innerRef: carouselOnlyListRef,
-        onClick: handleOnClick,
-        onScroll: handleOnScroll,
-        children
-      }
-    )
-  ] });
+  const { handleOnClick } = (0, import_useCarousel.useCarousel)();
+  const { carouselOnlyListRef, props } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
+  const { getOwnerProps, getOwnerPropsArguments } = (0, import_ds_props_helpers.useOwnerProps)(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCarouselWrapper, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styles.StyledChildrenWrap,
+    {
+      role: "tablist",
+      innerRef: carouselOnlyListRef,
+      onClick: handleOnClick,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children
+    }
+  ) });
 };
 //# sourceMappingURL=Carousel.js.map

package/dist/cjs/parts/carousel/Carousel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/carousel/Carousel.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useContext } from 'react';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport {\n  StyledCarouselBtnLeft,\n  StyledCarouselBtnRight,\n  StyledCarouselButtonWrapper,\n  StyledCarouselWrapper,\n  StyledChildrenWrap,\n} from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { TABS_DATA_TESTID } from '../../constants/index.js';\n\ninterface CarouselPropsT {\n  children: React.ReactNode;\n}\n\nexport const Carousel = ({ children }: CarouselPropsT): JSX.Element => {\n  const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel();\n\n  const {\n    carouselOnlyListRef,\n    props,\n    props: { type },\n  } = useContext(DSTabsContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n\n  return (\n    <StyledCarouselWrapper>\n      {showChevrons.left && (\n        <StyledCarouselButtonWrapper tabType={type}>\n          <StyledCarouselBtnLeft\n            size=\"s\"\n            onClick={leftButtonOnClick}\n            tabIndex={-1}\n            data-testid={TABS_DATA_TESTID.CAROUSEL_BUTTON_LEFT}\n            buttonType={BUTTON_TYPES.ICON}\n            aria-label=\"Scroll Left\"\n            getOwnerProps={getOwnerProps}\n          >\n            <ChevronLeft size={DSIconSizes.S} />\n          </StyledCarouselBtnLeft>\n        </StyledCarouselButtonWrapper>\n      )}\n      {showChevrons.right && (\n        <StyledCarouselButtonWrapper tabType={type} right={showChevrons.right}>\n          <StyledCarouselBtnRight\n            size=\"s\"\n            onClick={rightButtonOnClick}\n            tabIndex={-1}\n            data-testid={TABS_DATA_TESTID.CAROUSEL_BUTTON_RIGHT}\n            buttonType={BUTTON_TYPES.ICON}\n            aria-label=\"Scroll Right\"\n            getOwnerProps={getOwnerProps}\n          >\n            <ChevronRight size={DSIconSizes.S} />\n          </StyledCarouselBtnRight>\n        </StyledCarouselButtonWrapper>\n      )}\n      <StyledChildrenWrap\n        role=\"tablist\"\n        innerRef={carouselOnlyListRef}\n        onClick={handleOnClick}\n        onScroll={handleOnScroll}\n      >\n        {children}\n      </StyledChildrenWrap>\n    </StyledCarouselWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCnB;AAhCJ,mBAA2B;AAC3B,qBAA4B;AAC5B,0BAA6B;AAC7B,sBAA0C;AAC1C,8BAA8B;AAC9B,oBAMO;AACP,yBAA4B;AAC5B,uBAA8B;AAC9B,uBAAiC;AAM1B,MAAM,WAAW,CAAC,EAAE,SAAS,MAAmC;AACrE,QAAM,EAAE,cAAc,mBAAmB,oBAAoB,eAAe,eAAe,QAAI,gCAAY;AAE3G,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,QAAI,yBAAW,8BAAa;AAE5B,QAAM,EAAE,cAAc,QAAI,uCAAc,KAAK;AAE7C,SACE,6CAAC,uCACE;AAAA,iBAAa,QACZ,4CAAC,6CAA4B,SAAS,MACpC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,kCAAiB;AAAA,QAC9B,YAAY,iCAAa;AAAA,QACzB,cAAW;AAAA,QACX;AAAA,QAEA,sDAAC,+BAAY,MAAM,2BAAY,GAAG;AAAA;AAAA,IACpC,GACF;AAAA,IAED,aAAa,SACZ,4CAAC,6CAA4B,SAAS,MAAM,OAAO,aAAa,OAC9D;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,kCAAiB;AAAA,QAC9B,YAAY,iCAAa;AAAA,QACzB,cAAW;AAAA,QACX;AAAA,QAEA,sDAAC,gCAAa,MAAM,2BAAY,GAAG;AAAA;AAAA,IACrC,GACF;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { useContext } from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledCarouselWrapper, StyledChildrenWrap } from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\ninterface CarouselPropsT {\n  children: React.ReactNode;\n}\n\nexport const Carousel = ({ children }: CarouselPropsT): JSX.Element => {\n  const { handleOnClick } = useCarousel();\n\n  const { carouselOnlyListRef, props } = useContext(DSTabsContext);\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  return (\n    <StyledCarouselWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n      <StyledChildrenWrap\n        role=\"tablist\"\n        innerRef={carouselOnlyListRef}\n        onClick={handleOnClick}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {children}\n      </StyledChildrenWrap>\n    </StyledCarouselWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBjB;AAnBN,mBAA2B;AAC3B,8BAA8B;AAC9B,oBAA0D;AAC1D,yBAA4B;AAC5B,uBAA8B;AAMvB,MAAM,WAAW,CAAC,EAAE,SAAS,MAAmC;AACrE,QAAM,EAAE,cAAc,QAAI,gCAAY;AAEtC,QAAM,EAAE,qBAAqB,MAAM,QAAI,yBAAW,8BAAa;AAE/D,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,SACE,4CAAC,uCAAsB,eAA8B,wBACnD;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/carousel/styles.js

@@ -75,7 +75,13 @@ const StyledChildrenWrap = import_ds_system.styled.div`
   display: flex;
   flex-wrap: nowrap;
   flex: 1;
-  overflow-x: hidden;
+  overflow-x: auto;
+  scrollbar-gutter: stable;
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};
+    outline-offset: -2px;
+  }
 `;
 const StyledCarouselButtonWrapper = import_ds_system.styled.div`
   max-width: 16px;

package/dist/cjs/parts/carousel/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/carousel/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { css, styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\n\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES } from '../../constants/index.js';\n\ninterface StyledCarouselButtonWrapperPropsT {\n  right?: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\nconst baseCarouselButtonStyles = css`\n  margin: 0;\n  min-width: ${({ theme }) => theme.space.xs};\n  width: ${({ theme }) => theme.space.xs};\n\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n  background-color: transparent;\n  border-radius: 0px;\n\n  & .em-ds-icon svg {\n    fill: ${({ theme }) => theme.colors.brand[600]};\n  }\n`;\n\nexport const StyledCarouselBtnLeft = styled(DSButtonV2, {\n  name: DSTabsName,\n  slot: TABS_SLOTS.CAROUSEL_BUTTON_LEFT,\n})`\n  ${baseCarouselButtonStyles}\n`;\n\nexport const StyledCarouselBtnRight = styled(DSButtonV2, {\n  name: DSTabsName,\n  slot: TABS_SLOTS.CAROUSEL_BUTTON_RIGHT,\n})`\n  ${baseCarouselButtonStyles}\n`;\n\nexport const StyledCarouselWrapper = styled.span`\n  position: relative;\n  width: 100%;\n  display: flex;\n`;\n\nexport const StyledChildrenWrap = styled.div`\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  overflow-x: hidden;\n`;\n\nexport const StyledCarouselButtonWrapper = styled.div<StyledCarouselButtonWrapperPropsT>`\n  max-width: 16px;\n  position: absolute;\n  z-index: 200;\n  ${({ right }) => (right ? 'right: 0;' : `left: 0;`)}\n  width: 16px;\n  height: ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? '32px' : '22px')};\n  padding-top: ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? '5px' : '0px')};\n  background: white;\n  ${({ theme, tabType }) =>\n    tabType === TAB_TYPES.NORMAL\n      ? `\n      background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );\n `\n      : ``};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,0BAA2B;AAG3B,uBAAkD;AAOlD,MAAM,2BAA2B;AAAA;AAAA,eAElB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,WACjC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAS5B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAI3C,MAAM,4BAAwB,yBAAO,gCAAY;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;AAAA,IACG,wBAAwB;AAAA;AAGrB,MAAM,6BAAyB,yBAAO,gCAAY;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;AAAA,IACG,wBAAwB;AAAA;AAGrB,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,EAAE,MAAM,MAAO,QAAQ,cAAc,UAAW;AAAA;AAAA,YAEzC,CAAC,EAAE,QAAQ,MAAO,YAAY,2BAAU,SAAS,SAAS,MAAO;AAAA,iBAC5D,CAAC,EAAE,QAAQ,MAAO,YAAY,2BAAU,SAAS,QAAQ,KAAM;AAAA;AAAA,IAE5E,CAAC,EAAE,OAAO,QAAQ,MAClB,YAAY,2BAAU,SAClB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,GAAG,CAAC,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,KAE1H,EAAE;AAAA;",
+  "sourcesContent": ["import { css, styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\n\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES } from '../../constants/index.js';\n\ninterface StyledCarouselButtonWrapperPropsT {\n  right?: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\nconst baseCarouselButtonStyles = css`\n  margin: 0;\n  min-width: ${({ theme }) => theme.space.xs};\n  width: ${({ theme }) => theme.space.xs};\n\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n  background-color: transparent;\n  border-radius: 0px;\n\n  & .em-ds-icon svg {\n    fill: ${({ theme }) => theme.colors.brand[600]};\n  }\n`;\n\nexport const StyledCarouselBtnLeft = styled(DSButtonV2, {\n  name: DSTabsName,\n  slot: TABS_SLOTS.CAROUSEL_BUTTON_LEFT,\n})`\n  ${baseCarouselButtonStyles}\n`;\n\nexport const StyledCarouselBtnRight = styled(DSButtonV2, {\n  name: DSTabsName,\n  slot: TABS_SLOTS.CAROUSEL_BUTTON_RIGHT,\n})`\n  ${baseCarouselButtonStyles}\n`;\n\nexport const StyledCarouselWrapper = styled.span`\n  position: relative;\n  width: 100%;\n  display: flex;\n`;\n\nexport const StyledChildrenWrap = styled.div`\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  overflow-x: auto;\n  scrollbar-gutter: stable;\n\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    outline-offset: -2px;\n  }\n`;\n\nexport const StyledCarouselButtonWrapper = styled.div<StyledCarouselButtonWrapperPropsT>`\n  max-width: 16px;\n  position: absolute;\n  z-index: 200;\n  ${({ right }) => (right ? 'right: 0;' : `left: 0;`)}\n  width: 16px;\n  height: ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? '32px' : '22px')};\n  padding-top: ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? '5px' : '0px')};\n  background: white;\n  ${({ theme, tabType }) =>\n    tabType === TAB_TYPES.NORMAL\n      ? `\n      background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );\n `\n      : ``};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,0BAA2B;AAG3B,uBAAkD;AAOlD,MAAM,2BAA2B;AAAA;AAAA,eAElB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,WACjC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAS5B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAI3C,MAAM,4BAAwB,yBAAO,gCAAY;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;AAAA,IACG,wBAAwB;AAAA;AAGrB,MAAM,6BAAyB,yBAAO,gCAAY;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;AAAA,IACG,wBAAwB;AAAA;AAGrB,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAQhB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAKxD,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,EAAE,MAAM,MAAO,QAAQ,cAAc,UAAW;AAAA;AAAA,YAEzC,CAAC,EAAE,QAAQ,MAAO,YAAY,2BAAU,SAAS,SAAS,MAAO;AAAA,iBAC5D,CAAC,EAAE,QAAQ,MAAO,YAAY,2BAAU,SAAS,QAAQ,KAAM;AAAA;AAAA,IAE5E,CAAC,EAAE,OAAO,QAAQ,MAClB,YAAY,2BAAU,SAClB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,GAAG,CAAC,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,KAE1H,EAAE;AAAA;",
   "names": []
 }

package/dist/cjs/parts/carousel/useCarousel.js

@@ -33,54 +33,39 @@ __export(useCarousel_exports, {
 module.exports = __toCommonJS(useCarousel_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_resize_observer = __toESM(require("@react-hook/resize-observer"));
 var import_DSTabsCTX = require("../../DSTabsCTX.js");
 var import_helpers = require("../../utils/helpers.js");
-var import_useCarouselCallbacks = require("./useCarouselCallbacks.js");
 const useCarousel = () => {
-  const { carouselOnlyListRef } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
-  const [showChevrons, setShowChevrons] = (0, import_react.useState)({
-    right: false,
-    left: false
-  });
-  const { tabsRefAsArray } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
-  const shouldShowLeft = (0, import_react.useCallback)(
-    () => carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft > 0 : false,
-    [carouselOnlyListRef]
-  );
-  const shouldShowRight = (0, import_react.useCallback)(
-    () => carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft < carouselOnlyListRef.current.scrollWidth - carouselOnlyListRef.current.clientWidth : false,
-    [carouselOnlyListRef]
-  );
-  const recalcChevrons = (0, import_react.useCallback)(() => {
-    setShowChevrons({ right: shouldShowRight(), left: shouldShowLeft() });
-  }, [shouldShowLeft, shouldShowRight]);
-  const getVisibleItemsOffset = (0, import_react.useCallback)(() => {
-    if (tabsRefAsArray.current) {
-      const scroll = tabsRefAsArray.current.reduce((acc, c) => {
-        if ((0, import_helpers.isElementVisibleCarousel)(c, carouselOnlyListRef.current)) {
-          const styles = window.getComputedStyle(c);
-          const width = c.clientWidth;
-          const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
-          return acc + (width + margin);
+  const { carouselOnlyListRef, focusableTabsRef } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
+  const handleOnClick = (0, import_react.useCallback)(
+    ({ target }) => {
+      if (focusableTabsRef.current && target.getAttribute("role") === "tab") {
+        const tabList = carouselOnlyListRef.current;
+        const tabButton = target;
+        const tabButtonDimensions = tabButton.getBoundingClientRect();
+        const tabListDimensions = tabList?.getBoundingClientRect();
+        const tabButtonIndex = tabButton.dataset.index;
+        const lastItemIndex = focusableTabsRef.current.length.toString();
+        const magicNumber = 34;
+        const firstOrLastItem = tabButtonIndex === "0" || tabButtonIndex === lastItemIndex;
+        if (!(0, import_helpers.isElementVisibleCarousel)(tabButton, tabList, firstOrLastItem) && tabListDimensions && carouselOnlyListRef.current) {
+          const containerWidth = tabListDimensions.width;
+          const halfContainer = containerWidth / 2;
+          const elementScrollPosition = tabButtonDimensions.left - tabListDimensions.left;
+          const positionInContainer = elementScrollPosition % containerWidth;
+          const width = tabButton.offsetWidth + magicNumber;
+          if (positionInContainer > halfContainer) {
+            carouselOnlyListRef.current.scrollLeft += width + positionInContainer - containerWidth;
+          } else {
+            carouselOnlyListRef.current.scrollLeft += positionInContainer - magicNumber;
+          }
         }
-        return acc;
-      }, 0);
-      return scroll - 16;
-    }
-    return 0;
-  }, [tabsRefAsArray, carouselOnlyListRef]);
-  (0, import_resize_observer.default)(carouselOnlyListRef, recalcChevrons);
-  const { leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = (0, import_useCarouselCallbacks.useCarouselCallbacks)({
-    getVisibleItemsOffset,
-    recalcChevrons
-  });
+      }
+    },
+    [focusableTabsRef, carouselOnlyListRef]
+  );
   return {
-    showChevrons,
-    leftButtonOnClick,
-    rightButtonOnClick,
-    handleOnClick,
-    handleOnScroll
+    handleOnClick
   };
 };
 //# sourceMappingURL=useCarousel.js.map

package/dist/cjs/parts/carousel/useCarousel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/carousel/useCarousel.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useCallback, useState, useContext } from 'react';\nimport useResizeObserver from '@react-hook/resize-observer';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { isElementVisibleCarousel } from '../../utils/helpers.js';\nimport { useCarouselCallbacks } from './useCarouselCallbacks.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\n\ninterface UseCarouselReturnTypeT {\n  showChevrons: DSTabsInternalsT.ShowChevronsT;\n  leftButtonOnClick: () => void;\n  rightButtonOnClick: () => void;\n  handleOnClick: (e: React.MouseEvent) => void;\n  handleOnScroll: (e: React.UIEvent) => void;\n}\n\nexport const useCarousel = (): UseCarouselReturnTypeT => {\n  const { carouselOnlyListRef } = useContext(DSTabsContext);\n\n  const [showChevrons, setShowChevrons] = useState<DSTabsInternalsT.ShowChevronsT>({\n    right: false,\n    left: false,\n  });\n\n  const { tabsRefAsArray } = useContext(DSTabsContext);\n\n  const shouldShowLeft = useCallback(\n    () => (carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft > 0 : false),\n\n    [carouselOnlyListRef],\n  );\n\n  const shouldShowRight = useCallback(\n    () =>\n      carouselOnlyListRef.current\n        ? carouselOnlyListRef.current.scrollLeft <\n          carouselOnlyListRef.current.scrollWidth - carouselOnlyListRef.current.clientWidth\n        : false,\n    [carouselOnlyListRef],\n  );\n\n  const recalcChevrons = useCallback(() => {\n    setShowChevrons({ right: shouldShowRight(), left: shouldShowLeft() });\n  }, [shouldShowLeft, shouldShowRight]);\n\n  const getVisibleItemsOffset = useCallback(() => {\n    if (tabsRefAsArray.current) {\n      const scroll = tabsRefAsArray.current.reduce((acc, c) => {\n        if (isElementVisibleCarousel(c, carouselOnlyListRef.current)) {\n          const styles = window.getComputedStyle(c);\n          const width = c.clientWidth;\n          const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);\n\n          return acc + (width + margin);\n        }\n        return acc;\n      }, 0);\n\n      return scroll - 16;\n    }\n    return 0;\n  }, [tabsRefAsArray, carouselOnlyListRef]);\n\n  useResizeObserver(carouselOnlyListRef, recalcChevrons);\n\n  const { leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarouselCallbacks({\n    getVisibleItemsOffset,\n    recalcChevrons,\n  });\n\n  return {\n    showChevrons,\n    leftButtonOnClick,\n    rightButtonOnClick,\n    handleOnClick,\n    handleOnScroll,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkD;AAClD,6BAA8B;AAC9B,uBAA8B;AAC9B,qBAAyC;AACzC,kCAAqC;AAW9B,MAAM,cAAc,MAA8B;AACvD,QAAM,EAAE,oBAAoB,QAAI,yBAAW,8BAAa;AAExD,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAyC;AAAA,IAC/E,OAAO;AAAA,IACP,MAAM;AAAA,EACR,CAAC;AAED,QAAM,EAAE,eAAe,QAAI,yBAAW,8BAAa;AAEnD,QAAM,qBAAiB;AAAA,IACrB,MAAO,oBAAoB,UAAU,oBAAoB,QAAQ,aAAa,IAAI;AAAA,IAElF,CAAC,mBAAmB;AAAA,EACtB;AAEA,QAAM,sBAAkB;AAAA,IACtB,MACE,oBAAoB,UAChB,oBAAoB,QAAQ,aAC5B,oBAAoB,QAAQ,cAAc,oBAAoB,QAAQ,cACtE;AAAA,IACN,CAAC,mBAAmB;AAAA,EACtB;AAEA,QAAM,qBAAiB,0BAAY,MAAM;AACvC,oBAAgB,EAAE,OAAO,gBAAgB,GAAG,MAAM,eAAe,EAAE,CAAC;AAAA,EACtE,GAAG,CAAC,gBAAgB,eAAe,CAAC;AAEpC,QAAM,4BAAwB,0BAAY,MAAM;AAC9C,QAAI,eAAe,SAAS;AAC1B,YAAM,SAAS,eAAe,QAAQ,OAAO,CAAC,KAAK,MAAM;AACvD,gBAAI,yCAAyB,GAAG,oBAAoB,OAAO,GAAG;AAC5D,gBAAM,SAAS,OAAO,iBAAiB,CAAC;AACxC,gBAAM,QAAQ,EAAE;AAChB,gBAAM,SAAS,WAAW,OAAO,UAAU,IAAI,WAAW,OAAO,WAAW;AAE5E,iBAAO,OAAO,QAAQ;AAAA,QACxB;AACA,eAAO;AAAA,MACT,GAAG,CAAC;AAEJ,aAAO,SAAS;AAAA,IAClB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,mBAAmB,CAAC;AAExC,6BAAAA,SAAkB,qBAAqB,cAAc;AAErD,QAAM,EAAE,mBAAmB,oBAAoB,eAAe,eAAe,QAAI,kDAAqB;AAAA,IACpG;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
-  "names": ["useResizeObserver"]
+  "sourcesContent": ["import { useCallback, useContext } from 'react';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { isElementVisibleCarousel } from '../../utils/helpers.js';\n\ninterface UseCarouselReturnTypeT {\n  handleOnClick: (e: React.MouseEvent) => void;\n}\n\nexport const useCarousel = (): UseCarouselReturnTypeT => {\n  const { carouselOnlyListRef, focusableTabsRef } = useContext(DSTabsContext);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Click handler for carousel tabs. It:\n   * 1. Checks if clicked element is a tab\n   * 2. Calculates scroll position to center the tab\n   * 3. Updates scroll position with magic number adjustments\n   * 4. May cause rerenders due to scroll position updates\n   */\n  const handleOnClick = useCallback(\n    ({ target }: React.MouseEvent) => {\n      if (focusableTabsRef.current && (target as HTMLButtonElement).getAttribute('role') === 'tab') {\n        const tabList = carouselOnlyListRef.current;\n        const tabButton = target as HTMLButtonElement;\n        const tabButtonDimensions = tabButton.getBoundingClientRect();\n        const tabListDimensions = tabList?.getBoundingClientRect();\n        const tabButtonIndex = tabButton.dataset.index as string;\n        const lastItemIndex = focusableTabsRef.current.length.toString();\n        const magicNumber = 34;\n\n        const firstOrLastItem = tabButtonIndex === '0' || tabButtonIndex === lastItemIndex;\n\n        if (\n          !isElementVisibleCarousel(tabButton, tabList, firstOrLastItem) &&\n          tabListDimensions &&\n          carouselOnlyListRef.current\n        ) {\n          const containerWidth = tabListDimensions.width;\n          const halfContainer = containerWidth / 2;\n          const elementScrollPosition = tabButtonDimensions.left - tabListDimensions.left;\n          const positionInContainer = elementScrollPosition % containerWidth;\n          const width = tabButton.offsetWidth + magicNumber;\n\n          if (positionInContainer > halfContainer) {\n            carouselOnlyListRef.current.scrollLeft += width + positionInContainer - containerWidth;\n          } else {\n            carouselOnlyListRef.current.scrollLeft += positionInContainer - magicNumber;\n          }\n        }\n      }\n    },\n    [focusableTabsRef, carouselOnlyListRef],\n  );\n\n  return {\n    handleOnClick,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,uBAA8B;AAC9B,qBAAyC;AAMlC,MAAM,cAAc,MAA8B;AACvD,QAAM,EAAE,qBAAqB,iBAAiB,QAAI,yBAAW,8BAAa;AAS1E,QAAM,oBAAgB;AAAA,IACpB,CAAC,EAAE,OAAO,MAAwB;AAChC,UAAI,iBAAiB,WAAY,OAA6B,aAAa,MAAM,MAAM,OAAO;AAC5F,cAAM,UAAU,oBAAoB;AACpC,cAAM,YAAY;AAClB,cAAM,sBAAsB,UAAU,sBAAsB;AAC5D,cAAM,oBAAoB,SAAS,sBAAsB;AACzD,cAAM,iBAAiB,UAAU,QAAQ;AACzC,cAAM,gBAAgB,iBAAiB,QAAQ,OAAO,SAAS;AAC/D,cAAM,cAAc;AAEpB,cAAM,kBAAkB,mBAAmB,OAAO,mBAAmB;AAErE,YACE,KAAC,yCAAyB,WAAW,SAAS,eAAe,KAC7D,qBACA,oBAAoB,SACpB;AACA,gBAAM,iBAAiB,kBAAkB;AACzC,gBAAM,gBAAgB,iBAAiB;AACvC,gBAAM,wBAAwB,oBAAoB,OAAO,kBAAkB;AAC3E,gBAAM,sBAAsB,wBAAwB;AACpD,gBAAM,QAAQ,UAAU,cAAc;AAEtC,cAAI,sBAAsB,eAAe;AACvC,gCAAoB,QAAQ,cAAc,QAAQ,sBAAsB;AAAA,UAC1E,OAAO;AACL,gCAAoB,QAAQ,cAAc,sBAAsB;AAAA,UAClE;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,mBAAmB;AAAA,EACxC;AAEA,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
+  "names": []
 }

package/dist/cjs/parts/tabBar/TabBar.js

@@ -88,7 +88,9 @@ const TabBar = () => {
           {
             mobileGradients,
             left: tabsListRef.current?.scrollLeft,
-            width: tabsListRef.current?.scrollWidth
+            width: tabsListRef.current?.scrollWidth,
+            getOwnerProps,
+            getOwnerPropsArguments
           }
         )
       ]

package/dist/cjs/parts/tabBar/TabBar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/tabBar/TabBar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { Carousel } from '../carousel/Carousel.js';\nimport { StyledMobileGradient, StyledTabList, StyledTabWrapper, StyledSubTabsList } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\nimport { TABS_DATA_TESTID, TAB_TYPES } from '../../constants/index.js';\n\nimport { TabBarItemRenderer } from './TabBarItemRenderer.js';\n\nexport const TabBar = (): JSX.Element => {\n  const {\n    tabsListRef,\n    props,\n    props: { type, fixedTabsHeaders, withCarousel, isDSMobile },\n    globalClickHandler,\n    mobileGradients,\n    updateMobileGradients,\n  } = useContext(DSTabsContext);\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  if (type === TAB_TYPES.SUBTABS && !isDSMobile) {\n    return (\n      <StyledSubTabsList\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        withCarousel={withCarousel}\n        data-testid={TABS_DATA_TESTID.SUB_TAB_LIST}\n        role={withCarousel ? undefined : 'tablist'}\n        innerRef={tabsListRef}\n      >\n        {withCarousel ? (\n          <Carousel>\n            <TabBarItemRenderer />\n          </Carousel>\n        ) : (\n          <TabBarItemRenderer />\n        )}\n      </StyledSubTabsList>\n    );\n  }\n\n  return (\n    <StyledTabList\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      withCarousel={withCarousel}\n      role={withCarousel ? undefined : 'tablist'}\n      innerRef={tabsListRef}\n      data-testid={TABS_DATA_TESTID.TAB_LIST}\n      isDSMobile={isDSMobile}\n      fixedTabsHeaders={fixedTabsHeaders}\n      mobileGradients={mobileGradients}\n      onScroll={updateMobileGradients}\n      tabType={type}\n      onClick={(e) => {\n        globalClickHandler({ event: e, target: 'tabsList' });\n      }}\n    >\n      <StyledTabWrapper data-testid=\"tab-wrapper\" isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n        {!isDSMobile && withCarousel ? (\n          <Carousel>\n            <TabBarItemRenderer />\n          </Carousel>\n        ) : (\n          <TabBarItemRenderer />\n        )}\n      </StyledTabWrapper>\n      {isDSMobile && !fixedTabsHeaders && (\n        <StyledMobileGradient\n          mobileGradients={mobileGradients}\n          left={tabsListRef.current?.scrollLeft}\n          width={tabsListRef.current?.scrollWidth}\n        />\n      )}\n    </StyledTabList>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCX;AAjCZ,mBAAkC;AAClC,8BAA8B;AAC9B,sBAAyB;AACzB,oBAAyF;AACzF,uBAA8B;AAE9B,uBAA4C;AAE5C,gCAAmC;AAE5B,MAAM,SAAS,MAAmB;AACvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM,kBAAkB,cAAc,WAAW;AAAA,IAC1D;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,8BAAa;AAC5B,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,MAAI,SAAS,2BAAU,WAAW,CAAC,YAAY;AAC7C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa,kCAAiB;AAAA,QAC9B,MAAM,eAAe,SAAY;AAAA,QACjC,UAAU;AAAA,QAET,yBACC,4CAAC,4BACC,sDAAC,gDAAmB,GACtB,IAEA,4CAAC,gDAAmB;AAAA;AAAA,IAExB;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,eAAe,SAAY;AAAA,MACjC,UAAU;AAAA,MACV,eAAa,kCAAiB;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,SAAS;AAAA,MACT,SAAS,CAAC,MAAM;AACd,2BAAmB,EAAE,OAAO,GAAG,QAAQ,WAAW,CAAC;AAAA,MACrD;AAAA,MAEA;AAAA,oDAAC,kCAAiB,eAAY,eAAc,YAAwB,kBACjE,WAAC,cAAc,eACd,4CAAC,4BACC,sDAAC,gDAAmB,GACtB,IAEA,4CAAC,gDAAmB,GAExB;AAAA,QACC,cAAc,CAAC,oBACd;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,MAAM,YAAY,SAAS;AAAA,YAC3B,OAAO,YAAY,SAAS;AAAA;AAAA,QAC9B;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { Carousel } from '../carousel/Carousel.js';\nimport { StyledMobileGradient, StyledTabList, StyledTabWrapper, StyledSubTabsList } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\nimport { TABS_DATA_TESTID, TAB_TYPES } from '../../constants/index.js';\n\nimport { TabBarItemRenderer } from './TabBarItemRenderer.js';\n\nexport const TabBar = (): JSX.Element => {\n  const {\n    tabsListRef,\n    props,\n    props: { type, fixedTabsHeaders, withCarousel, isDSMobile },\n    globalClickHandler,\n    mobileGradients,\n    updateMobileGradients,\n  } = useContext(DSTabsContext);\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  if (type === TAB_TYPES.SUBTABS && !isDSMobile) {\n    return (\n      <StyledSubTabsList\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        withCarousel={withCarousel}\n        data-testid={TABS_DATA_TESTID.SUB_TAB_LIST}\n        role={withCarousel ? undefined : 'tablist'}\n        innerRef={tabsListRef}\n      >\n        {withCarousel ? (\n          <Carousel>\n            <TabBarItemRenderer />\n          </Carousel>\n        ) : (\n          <TabBarItemRenderer />\n        )}\n      </StyledSubTabsList>\n    );\n  }\n\n  return (\n    <StyledTabList\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      withCarousel={withCarousel}\n      role={withCarousel ? undefined : 'tablist'}\n      innerRef={tabsListRef}\n      data-testid={TABS_DATA_TESTID.TAB_LIST}\n      isDSMobile={isDSMobile}\n      fixedTabsHeaders={fixedTabsHeaders}\n      mobileGradients={mobileGradients}\n      onScroll={updateMobileGradients}\n      tabType={type}\n      onClick={(e) => {\n        globalClickHandler({ event: e, target: 'tabsList' });\n      }}\n    >\n      <StyledTabWrapper data-testid=\"tab-wrapper\" isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n        {!isDSMobile && withCarousel ? (\n          <Carousel>\n            <TabBarItemRenderer />\n          </Carousel>\n        ) : (\n          <TabBarItemRenderer />\n        )}\n      </StyledTabWrapper>\n      {isDSMobile && !fixedTabsHeaders && (\n        <StyledMobileGradient\n          mobileGradients={mobileGradients}\n          left={tabsListRef.current?.scrollLeft}\n          width={tabsListRef.current?.scrollWidth}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        />\n      )}\n    </StyledTabList>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCX;AAjCZ,mBAAkC;AAClC,8BAA8B;AAC9B,sBAAyB;AACzB,oBAAyF;AACzF,uBAA8B;AAE9B,uBAA4C;AAE5C,gCAAmC;AAE5B,MAAM,SAAS,MAAmB;AACvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM,kBAAkB,cAAc,WAAW;AAAA,IAC1D;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,8BAAa;AAC5B,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,MAAI,SAAS,2BAAU,WAAW,CAAC,YAAY;AAC7C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa,kCAAiB;AAAA,QAC9B,MAAM,eAAe,SAAY;AAAA,QACjC,UAAU;AAAA,QAET,yBACC,4CAAC,4BACC,sDAAC,gDAAmB,GACtB,IAEA,4CAAC,gDAAmB;AAAA;AAAA,IAExB;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,eAAe,SAAY;AAAA,MACjC,UAAU;AAAA,MACV,eAAa,kCAAiB;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,SAAS;AAAA,MACT,SAAS,CAAC,MAAM;AACd,2BAAmB,EAAE,OAAO,GAAG,QAAQ,WAAW,CAAC;AAAA,MACrD;AAAA,MAEA;AAAA,oDAAC,kCAAiB,eAAY,eAAc,YAAwB,kBACjE,WAAC,cAAc,eACd,4CAAC,4BACC,sDAAC,gDAAmB,GACtB,IAEA,4CAAC,gDAAmB,GAExB;AAAA,QACC,cAAc,CAAC,oBACd;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,MAAM,YAAY,SAAS;AAAA,YAC3B,OAAO,YAAY,SAAS;AAAA,YAC5B;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/tabBar/TabBarItemRenderer.js

@@ -40,6 +40,11 @@ var import_DSTabsCTX = require("../../DSTabsCTX.js");
 var import_useKeyboardNavigation = require("../../utils/hooks/useKeyboardNavigation.js");
 var import_helpers = require("../../utils/helpers.js");
 var import_constants = require("../../constants/index.js");
+const TAB_TYPE_TO_VARIANT = {
+  [import_constants.TAB_TYPES.NORMAL]: "primary",
+  [import_constants.TAB_TYPES.NORMAL_SMALL]: "primary-small",
+  [import_constants.TAB_TYPES.SUBTABS]: "secondary"
+};
 const TabBarItemRenderer = import_react2.default.memo(() => {
   const {
     tabsRef,
@@ -47,12 +52,14 @@ const TabBarItemRenderer = import_react2.default.memo(() => {
     tabsRefAsArray,
     carouselOnlyListRef,
     actualActiveTab,
-    props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },
+    focusedTabId,
+    props: { type, withCarousel, isDSMobile, showSeparator, children: tabs },
     globalClickHandler
   } = (0, import_react2.useContext)(import_DSTabsCTX.DSTabsContext);
   const { lastTabInternalRef, firstSubtabInternalRef } = (0, import_react2.useContext)(import_DSTabsCTX.DSTabsCrossRefContext);
   const { handleOnKeyDown } = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
   const availableTabIndexes = [];
+  const size = tabs.length || 0;
   return import_react2.default.Children.map(tabs, (tab, index) => {
     const {
       tabId = "",
@@ -61,24 +68,34 @@ const TabBarItemRenderer = import_react2.default.memo(() => {
       required = false,
       disabled = false,
       applyAriaDisabled = false,
+      RenderBadge,
       ref,
       onClick,
       onKeyDown,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      children: _panelContent,
       ...rest
     } = tab.props;
     const getOwnerProps = () => tab.props;
     const getOwnerPropsArguments = () => ({ tabId });
     if (!disabled) availableTabIndexes.push(index);
-    const ButtonComponent = type === import_constants.TAB_TYPES.SUBTABS ? import_styles.StyledSubTabButton : import_styles.StyledTabButton;
     const isActive = actualActiveTab === tabId;
+    const variant = TAB_TYPE_TO_VARIANT[type] ?? "primary";
+    const isLastItem = index === size - 1;
+    const ButtonComponent = type === import_constants.TAB_TYPES.SUBTABS ? import_styles.StyledSubTabButton : import_styles.StyledTabButton;
     return /* @__PURE__ */ (0, import_react.createElement)(
       ButtonComponent,
       {
+        tabIndex: focusedTabId === tabId ? 0 : -1,
         ...rest,
-        getOwnerProps,
-        getOwnerPropsArguments,
         key: tabId,
         role: "tab",
+        label: title,
+        variant,
+        isSelected: isActive,
+        disabled,
+        applyAriaDisabled,
+        required,
         innerRef: (tabButtonRef) => {
           if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {
             tabsRefAsArray.current[index] = tabButtonRef;
@@ -94,20 +111,11 @@ const TabBarItemRenderer = import_react2.default.memo(() => {
             if (ref) ref.current = tabButtonRef;
           }
         },
-        type: "button",
         "aria-controls": tabId,
         "aria-selected": actualActiveTab === tabId && !applyAriaDisabled,
-        "aria-disabled": disabled || applyAriaDisabled,
-        isDSMobile,
-        fixedTabsHeaders,
-        tabType: type,
         "data-required": required,
         "data-tab-id": tabId,
         "data-index": index,
-        withCarousel,
-        isActive,
-        disabled,
-        showSeparator: showSeparator && type !== import_constants.TAB_TYPES.NORMAL,
         "data-testid": type === import_constants.TAB_TYPES.NORMAL ? import_constants.TABS_DATA_TESTID.TAB_BUTTON : import_constants.TABS_DATA_TESTID.SUBTAB_BUTTON,
         id: `${tabId}-label`,
         onClick: (e) => {
@@ -125,14 +133,14 @@ const TabBarItemRenderer = import_react2.default.memo(() => {
           if (!disabled) handleOnKeyDown(e);
           if (onKeyDown && !disabled) onKeyDown(e);
         },
-        style
+        style,
+        showSeparator: showSeparator && type !== import_constants.TAB_TYPES.NORMAL && !isLastItem,
+        isDSMobile,
+        tabType: type,
+        getOwnerProps,
+        getOwnerPropsArguments
       },
-      title,
-      required && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledRequiredMark, { "aria-hidden": "true", children: "\u25CF" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.ScreenReaderOnly, { children: "Required" })
-      ] }),
-      isActive && type !== import_constants.TAB_TYPES.SUBTABS ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSelectionIndicator, { "aria-hidden": "true", isDSMobile, tabType: type }) : null
+      RenderBadge ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RenderBadge, {}) : null
     );
   });
 });

package/dist/cjs/parts/tabBar/TabBarItemRenderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/tabBar/TabBarItemRenderer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport {\n  StyledTabButton,\n  StyledRequiredMark,\n  ScreenReaderOnly,\n  StyledSubTabButton,\n  StyledSelectionIndicator,\n} from './styles.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';\nimport { centerTab } from '../../utils/helpers.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\nimport { TABS_DATA_TESTID, TAB_TYPES } from '../../constants/index.js';\n\nexport const TabBarItemRenderer: React.ComponentType<Record<never, never>> = React.memo(() => {\n  const {\n    tabsRef,\n    focusableTabsRef,\n    tabsRefAsArray,\n    carouselOnlyListRef,\n    actualActiveTab,\n    props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },\n    globalClickHandler,\n  } = useContext(DSTabsContext);\n\n  const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n  const { handleOnKeyDown } = useKeyboardNavigation();\n\n  const availableTabIndexes: number[] = [];\n\n  return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index) => {\n    const {\n      tabId = '',\n      title = '',\n      style,\n      required = false,\n      disabled = false,\n      applyAriaDisabled = false,\n      ref,\n      onClick,\n      onKeyDown,\n      ...rest\n    } = tab.props;\n    const getOwnerProps = () => tab.props;\n    const getOwnerPropsArguments = () => ({ tabId });\n\n    if (!disabled) availableTabIndexes.push(index);\n    const ButtonComponent = type === TAB_TYPES.SUBTABS ? StyledSubTabButton : StyledTabButton;\n\n    const isActive = actualActiveTab === tabId;\n\n    return (\n      <ButtonComponent\n        {...rest}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        key={tabId}\n        role=\"tab\"\n        // eslint-disable-next-line complexity\n        innerRef={(tabButtonRef: HTMLButtonElement) => {\n          if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {\n            tabsRefAsArray.current[index] = tabButtonRef;\n            if (!disabled && !focusableTabsRef.current.includes(tabButtonRef))\n              focusableTabsRef.current.push(tabButtonRef);\n            tabsRef.current[index] = tabButtonRef;\n            if (type === TAB_TYPES.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n              firstSubtabInternalRef.current = tabButtonRef;\n            }\n            if (type !== TAB_TYPES.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {\n              lastTabInternalRef.current = tabButtonRef;\n            }\n            if (ref) ref.current = tabButtonRef;\n          }\n        }}\n        type=\"button\"\n        aria-controls={tabId}\n        aria-selected={actualActiveTab === tabId && !applyAriaDisabled}\n        aria-disabled={disabled || applyAriaDisabled}\n        isDSMobile={isDSMobile}\n        fixedTabsHeaders={fixedTabsHeaders}\n        tabType={type}\n        data-required={required}\n        data-tab-id={tabId}\n        data-index={index}\n        withCarousel={withCarousel}\n        isActive={isActive}\n        disabled={disabled}\n        showSeparator={showSeparator && type !== TAB_TYPES.NORMAL}\n        data-testid={type === TAB_TYPES.NORMAL ? TABS_DATA_TESTID.TAB_BUTTON : TABS_DATA_TESTID.SUBTAB_BUTTON}\n        id={`${tabId}-label`}\n        onClick={(e) => {\n          /** [PUI-15772] - Tabs Pre Refactor\n           * Click handler for tab buttons. It:\n           * 1. Prevents tab change if aria-disabled is true\n           * 2. Updates active tab and indicator style if not disabled\n           * 3. Calls the user's onClick callback if provided\n           */\n          if (applyAriaDisabled) return;\n          if (!disabled) {\n            globalClickHandler({ event: e, target: 'tabItem', tabId });\n          }\n          if (onClick && !disabled) onClick(tabId, e);\n        }}\n        onFocus={(e) => {\n          /** [PUI-15772] - Tabs Pre Refactor\n           * Focus handler for carousel tabs. It:\n           * 1. Centers the focused tab in the carousel viewport\n           * 2. Only applies when withCarousel prop is true\n           */\n          if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });\n        }}\n        onKeyDown={(e) => {\n          /** [PUI-15772] - Tabs Pre Refactor\n           * Keyboard navigation handler. It:\n           * 1. Prevents Enter key propagation\n           * 2. Handles keyboard navigation if not disabled\n           * 3. Calls the user's onKeyDown callback if provided\n           */\n          if (e.key === 'Enter') e.stopPropagation();\n          if (!disabled) handleOnKeyDown(e);\n          if (onKeyDown && !disabled) onKeyDown(e);\n        }}\n        style={style}\n      >\n        {title}\n        {required && (\n          <>\n            <StyledRequiredMark aria-hidden=\"true\">&#9679;</StyledRequiredMark>\n            <ScreenReaderOnly>Required</ScreenReaderOnly>\n          </>\n        )}\n        {isActive && type !== TAB_TYPES.SUBTABS ? (\n          <StyledSelectionIndicator aria-hidden=\"true\" isDSMobile={isDSMobile} tabType={type} />\n        ) : null}\n      </ButtonComponent>\n    );\n  });\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { StyledTabButton, StyledSubTabButton } from './styles.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';\nimport { centerTab } from '../../utils/helpers.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\nimport { TABS_DATA_TESTID, TAB_TYPES } from '../../constants/index.js';\n\n/**\n * Maps ds-tabs TAB_TYPES to ds-tab-button variant strings.\n * NORMAL \u2192 'primary', NORMAL_SMALL \u2192 'primary-small', SUBTABS \u2192 'secondary'\n */\nconst TAB_TYPE_TO_VARIANT = {\n  [TAB_TYPES.NORMAL]: 'primary',\n  [TAB_TYPES.NORMAL_SMALL]: 'primary-small',\n  [TAB_TYPES.SUBTABS]: 'secondary',\n} as const;\n\nexport const TabBarItemRenderer: React.ComponentType<Record<never, never>> = React.memo(() => {\n  const {\n    tabsRef,\n    focusableTabsRef,\n    tabsRefAsArray,\n    carouselOnlyListRef,\n    actualActiveTab,\n    focusedTabId,\n    props: { type, withCarousel, isDSMobile, showSeparator, children: tabs },\n    globalClickHandler,\n  } = useContext(DSTabsContext);\n\n  const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n  const { handleOnKeyDown } = useKeyboardNavigation();\n\n  const availableTabIndexes: number[] = [];\n  const size = tabs.length || 0;\n\n  return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index) => {\n    const {\n      tabId = '',\n      title = '',\n      style,\n      required = false,\n      disabled = false,\n      applyAriaDisabled = false,\n      RenderBadge,\n      ref,\n      onClick,\n      onKeyDown,\n      // eslint-disable-next-line @typescript-eslint/naming-convention\n      children: _panelContent,\n      ...rest\n    } = tab.props;\n    const getOwnerProps = () => tab.props;\n    const getOwnerPropsArguments = () => ({ tabId });\n\n    if (!disabled) availableTabIndexes.push(index);\n\n    const isActive = actualActiveTab === tabId;\n    const variant = TAB_TYPE_TO_VARIANT[type] ?? 'primary';\n    const isLastItem = index === size - 1;\n    const ButtonComponent = type === TAB_TYPES.SUBTABS ? StyledSubTabButton : StyledTabButton;\n\n    return (\n      <ButtonComponent\n        tabIndex={focusedTabId === tabId ? 0 : -1}\n        {...rest}\n        key={tabId}\n        role=\"tab\"\n        label={title}\n        variant={variant}\n        isSelected={isActive}\n        disabled={disabled}\n        applyAriaDisabled={applyAriaDisabled}\n        required={required}\n        innerRef={(tabButtonRef: HTMLButtonElement) => {\n          if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {\n            tabsRefAsArray.current[index] = tabButtonRef;\n            if (!disabled && !focusableTabsRef.current.includes(tabButtonRef))\n              focusableTabsRef.current.push(tabButtonRef);\n            tabsRef.current[index] = tabButtonRef;\n            if (type === TAB_TYPES.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n              firstSubtabInternalRef.current = tabButtonRef;\n            }\n            if (type !== TAB_TYPES.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {\n              lastTabInternalRef.current = tabButtonRef;\n            }\n            if (ref) ref.current = tabButtonRef;\n          }\n        }}\n        aria-controls={tabId}\n        aria-selected={actualActiveTab === tabId && !applyAriaDisabled}\n        data-required={required}\n        data-tab-id={tabId}\n        data-index={index}\n        data-testid={type === TAB_TYPES.NORMAL ? TABS_DATA_TESTID.TAB_BUTTON : TABS_DATA_TESTID.SUBTAB_BUTTON}\n        id={`${tabId}-label`}\n        onClick={(e: React.MouseEvent) => {\n          /** [PUI-15772] - Tabs Pre Refactor\n           * Click handler for tab buttons. It:\n           * 1. Prevents tab change if aria-disabled is true\n           * 2. Updates active tab and indicator style if not disabled\n           * 3. Calls the user's onClick callback if provided\n           */\n          if (applyAriaDisabled) return;\n          if (!disabled) {\n            globalClickHandler({ event: e, target: 'tabItem', tabId });\n          }\n          if (onClick && !disabled) onClick(tabId, e);\n        }}\n        onFocus={(e: React.FocusEvent) => {\n          /** [PUI-15772] - Tabs Pre Refactor\n           * Focus handler for carousel tabs. It:\n           * 1. Centers the focused tab in the carousel viewport\n           * 2. Only applies when withCarousel prop is true\n           */\n          if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });\n        }}\n        onKeyDown={(e: React.KeyboardEvent) => {\n          /** [PUI-15772] - Tabs Pre Refactor\n           * Keyboard navigation handler. It:\n           * 1. Prevents Enter key propagation\n           * 2. Handles keyboard navigation if not disabled\n           * 3. Calls the user's onKeyDown callback if provided\n           */\n          if (e.key === 'Enter') e.stopPropagation();\n          if (!disabled) handleOnKeyDown(e);\n          if (onKeyDown && !disabled) onKeyDown(e);\n        }}\n        style={style}\n        showSeparator={showSeparator && type !== TAB_TYPES.NORMAL && !isLastItem}\n        isDSMobile={isDSMobile}\n        tabType={type}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {RenderBadge ? <RenderBadge /> : null}\n      </ButtonComponent>\n    );\n  });\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["import_react", "React"]
 }