@elliemae/ds-tabs 3.60.0-next.9 → 3.70.0-next.1

package/dist/cjs/utils/hooks/useKeyboardNavigation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/utils/hooks/useKeyboardNavigation.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\n\ninterface UseKeyboardNavigationReturnTypeT {\n  handleOnKeyDown: (e: React.KeyboardEvent) => void;\n}\n\nexport const useKeyboardNavigation = (): UseKeyboardNavigationReturnTypeT => {\n  const { focusableTabsRef } = useContext(DSTabsContext);\n  const { firstSubtabInternalRef, lastTabInternalRef } = useContext(DSTabsCrossRefContext);\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'ArrowRight' && focusableTabsRef.current) {\n        e.preventDefault();\n        e.stopPropagation();\n        const nextTab =\n          focusableTabsRef.current[(focusableTabsRef?.current?.indexOf?.(e.target as HTMLButtonElement) ?? 0) + 1];\n        if (nextTab) nextTab.focus();\n        if (!nextTab) return;\n      }\n\n      if (e.key === 'ArrowLeft' && focusableTabsRef.current) {\n        e.preventDefault();\n        e.stopPropagation();\n        const prevTab =\n          focusableTabsRef.current[(focusableTabsRef?.current?.indexOf?.(e.target as HTMLButtonElement) ?? 0) - 1];\n        if (prevTab) prevTab.focus();\n        if (!prevTab) return;\n      }\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        e.stopPropagation();\n        const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;\n        if (canFocusCrossTabs) firstSubtabInternalRef.current?.focus();\n      }\n\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        e.stopPropagation();\n        const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;\n        if (canFocusCrossTabs) lastTabInternalRef.current?.focus();\n      }\n    },\n    [firstSubtabInternalRef, lastTabInternalRef, focusableTabsRef],\n  );\n\n  return {\n    handleOnKeyDown,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAwC;AACxC,uBAAqD;AAM9C,MAAM,wBAAwB,MAAwC;AAC3E,QAAM,EAAE,iBAAiB,QAAI,yBAAW,8BAAa;AACrD,QAAM,EAAE,wBAAwB,mBAAmB,QAAI,yBAAW,sCAAqB;AAEvF,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,gBAAgB,iBAAiB,SAAS;AACtD,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,UACJ,iBAAiB,SAAS,kBAAkB,SAAS,UAAU,EAAE,MAA2B,KAAK,KAAK,CAAC;AACzG,YAAI,QAAS,SAAQ,MAAM;AAC3B,YAAI,CAAC,QAAS;AAAA,MAChB;AAEA,UAAI,EAAE,QAAQ,eAAe,iBAAiB,SAAS;AACrD,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,UACJ,iBAAiB,SAAS,kBAAkB,SAAS,UAAU,EAAE,MAA2B,KAAK,KAAK,CAAC;AACzG,YAAI,QAAS,SAAQ,MAAM;AAC3B,YAAI,CAAC,QAAS;AAAA,MAChB;AAEA,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,YAAI,kBAAmB,wBAAuB,SAAS,MAAM;AAAA,MAC/D;AAEA,UAAI,EAAE,QAAQ,WAAW;AACvB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,YAAI,kBAAmB,oBAAmB,SAAS,MAAM;AAAA,MAC3D;AAAA,IACF;AAAA,IACA,CAAC,wBAAwB,oBAAoB,gBAAgB;AAAA,EAC/D;AAEA,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\n\ninterface UseKeyboardNavigationReturnTypeT {\n  handleOnKeyDown: (e: React.KeyboardEvent) => void;\n}\n\nexport const useKeyboardNavigation = (): UseKeyboardNavigationReturnTypeT => {\n  const { focusableTabsRef, setFocusedTabId } = useContext(DSTabsContext);\n  const { firstSubtabInternalRef, lastTabInternalRef } = useContext(DSTabsCrossRefContext);\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'ArrowRight' && focusableTabsRef.current) {\n        e.preventDefault();\n        e.stopPropagation();\n        const nextTab =\n          focusableTabsRef.current[(focusableTabsRef?.current?.indexOf?.(e.target as HTMLButtonElement) ?? 0) + 1];\n        if (nextTab) {\n          nextTab.focus();\n          setFocusedTabId(nextTab.dataset.tabId || '');\n        }\n        if (!nextTab) return;\n      }\n\n      if (e.key === 'ArrowLeft' && focusableTabsRef.current) {\n        e.preventDefault();\n        e.stopPropagation();\n        const prevTab =\n          focusableTabsRef.current[(focusableTabsRef?.current?.indexOf?.(e.target as HTMLButtonElement) ?? 0) - 1];\n        if (prevTab) {\n          prevTab.focus();\n          setFocusedTabId(prevTab.dataset.tabId || '');\n        }\n        if (!prevTab) return;\n      }\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        e.stopPropagation();\n        const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;\n        if (canFocusCrossTabs) firstSubtabInternalRef.current?.focus();\n      }\n\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        e.stopPropagation();\n        const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;\n        if (canFocusCrossTabs) lastTabInternalRef.current?.focus();\n      }\n    },\n    [firstSubtabInternalRef, lastTabInternalRef, focusableTabsRef, setFocusedTabId],\n  );\n\n  return {\n    handleOnKeyDown,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAwC;AACxC,uBAAqD;AAM9C,MAAM,wBAAwB,MAAwC;AAC3E,QAAM,EAAE,kBAAkB,gBAAgB,QAAI,yBAAW,8BAAa;AACtE,QAAM,EAAE,wBAAwB,mBAAmB,QAAI,yBAAW,sCAAqB;AAEvF,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,gBAAgB,iBAAiB,SAAS;AACtD,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,UACJ,iBAAiB,SAAS,kBAAkB,SAAS,UAAU,EAAE,MAA2B,KAAK,KAAK,CAAC;AACzG,YAAI,SAAS;AACX,kBAAQ,MAAM;AACd,0BAAgB,QAAQ,QAAQ,SAAS,EAAE;AAAA,QAC7C;AACA,YAAI,CAAC,QAAS;AAAA,MAChB;AAEA,UAAI,EAAE,QAAQ,eAAe,iBAAiB,SAAS;AACrD,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,UACJ,iBAAiB,SAAS,kBAAkB,SAAS,UAAU,EAAE,MAA2B,KAAK,KAAK,CAAC;AACzG,YAAI,SAAS;AACX,kBAAQ,MAAM;AACd,0BAAgB,QAAQ,QAAQ,SAAS,EAAE;AAAA,QAC7C;AACA,YAAI,CAAC,QAAS;AAAA,MAChB;AAEA,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,YAAI,kBAAmB,wBAAuB,SAAS,MAAM;AAAA,MAC/D;AAEA,UAAI,EAAE,QAAQ,WAAW;AACvB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,YAAI,kBAAmB,oBAAmB,SAAS,MAAM;AAAA,MAC3D;AAAA,IACF;AAAA,IACA,CAAC,wBAAwB,oBAAoB,kBAAkB,eAAe;AAAA,EAChF;AAEA,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/config/useTabs.js

@@ -15,10 +15,16 @@ const useTabs = (props) => {
   const firstActivableTabId = useMemo(() => {
     const childrenArray = React2.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] = useState(firstActivableTabId);
+  const [focusedTabId, setFocusedTabId] = useState(firstActivableTabId);
+  useEffect(() => {
+    if (activeTab !== void 0) {
+      setFocusedTabId(activeTab);
+    }
+  }, [activeTab]);
   const actualActiveTab = useMemo(() => {
     if (activeTab !== void 0) return activeTab;
     return internalActiveTab;
@@ -102,7 +108,10 @@ const useTabs = (props) => {
       mobileGradients,
       updateMobileGradients,
       handleOnTabChange,
-      userDidChangeTabAtleastOnceRef
+      userDidChangeTabAtleastOnceRef,
+      firstActivableTabId,
+      focusedTabId,
+      setFocusedTabId
     }),
     [
       propsWithDefaults,
@@ -111,7 +120,9 @@ const useTabs = (props) => {
       mobileGradients,
       updateMobileGradients,
       handleOnTabChange,
-      userDidChangeTabAtleastOnceRef
+      userDidChangeTabAtleastOnceRef,
+      firstActivableTabId,
+      focusedTabId
     ]
   );
   return ctx;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useTabs.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -1,66 +1,25 @@
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
-import { DSIconSizes } from "@elliemae/ds-icon";
-import { BUTTON_TYPES } from "@elliemae/ds-button-v2";
-import { ChevronRight, ChevronLeft } from "@elliemae/ds-icons";
 import { useOwnerProps } from "@elliemae/ds-props-helpers";
-import {
-  StyledCarouselBtnLeft,
-  StyledCarouselBtnRight,
-  StyledCarouselButtonWrapper,
-  StyledCarouselWrapper,
-  StyledChildrenWrap
-} from "./styles.js";
+import { StyledCarouselWrapper, StyledChildrenWrap } from "./styles.js";
 import { useCarousel } from "./useCarousel.js";
 import { DSTabsContext } from "../../DSTabsCTX.js";
-import { TABS_DATA_TESTID } from "../../constants/index.js";
 const Carousel = ({ children }) => {
-  const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel();
-  const {
-    carouselOnlyListRef,
-    props,
-    props: { type }
-  } = useContext(DSTabsContext);
-  const { getOwnerProps } = useOwnerProps(props);
-  return /* @__PURE__ */ jsxs(StyledCarouselWrapper, { children: [
-    showChevrons.left && /* @__PURE__ */ jsx(StyledCarouselButtonWrapper, { tabType: type, children: /* @__PURE__ */ jsx(
-      StyledCarouselBtnLeft,
-      {
-        size: "s",
-        onClick: leftButtonOnClick,
-        tabIndex: -1,
-        "data-testid": TABS_DATA_TESTID.CAROUSEL_BUTTON_LEFT,
-        buttonType: BUTTON_TYPES.ICON,
-        "aria-label": "Scroll Left",
-        getOwnerProps,
-        children: /* @__PURE__ */ jsx(ChevronLeft, { size: DSIconSizes.S })
-      }
-    ) }),
-    showChevrons.right && /* @__PURE__ */ jsx(StyledCarouselButtonWrapper, { tabType: type, right: showChevrons.right, children: /* @__PURE__ */ jsx(
-      StyledCarouselBtnRight,
-      {
-        size: "s",
-        onClick: rightButtonOnClick,
-        tabIndex: -1,
-        "data-testid": TABS_DATA_TESTID.CAROUSEL_BUTTON_RIGHT,
-        buttonType: BUTTON_TYPES.ICON,
-        "aria-label": "Scroll Right",
-        getOwnerProps,
-        children: /* @__PURE__ */ jsx(ChevronRight, { size: DSIconSizes.S })
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      StyledChildrenWrap,
-      {
-        role: "tablist",
-        innerRef: carouselOnlyListRef,
-        onClick: handleOnClick,
-        onScroll: handleOnScroll,
-        children
-      }
-    )
-  ] });
+  const { handleOnClick } = useCarousel();
+  const { carouselOnlyListRef, props } = useContext(DSTabsContext);
+  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);
+  return /* @__PURE__ */ jsx(StyledCarouselWrapper, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ jsx(
+    StyledChildrenWrap,
+    {
+      role: "tablist",
+      innerRef: carouselOnlyListRef,
+      onClick: handleOnClick,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children
+    }
+  ) });
 };
 export {
   Carousel

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/Carousel.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACgCnB,SAYQ,KAZR;AAhCJ,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,cAAc,mBAAmB;AAC1C,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAM1B,MAAM,WAAW,CAAC,EAAE,SAAS,MAAmC;AACrE,QAAM,EAAE,cAAc,mBAAmB,oBAAoB,eAAe,eAAe,IAAI,YAAY;AAE3G,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,IAAI,WAAW,aAAa;AAE5B,QAAM,EAAE,cAAc,IAAI,cAAc,KAAK;AAE7C,SACE,qBAAC,yBACE;AAAA,iBAAa,QACZ,oBAAC,+BAA4B,SAAS,MACpC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,iBAAiB;AAAA,QAC9B,YAAY,aAAa;AAAA,QACzB,cAAW;AAAA,QACX;AAAA,QAEA,8BAAC,eAAY,MAAM,YAAY,GAAG;AAAA;AAAA,IACpC,GACF;AAAA,IAED,aAAa,SACZ,oBAAC,+BAA4B,SAAS,MAAM,OAAO,aAAa,OAC9D;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,iBAAiB;AAAA,QAC9B,YAAY,aAAa;AAAA,QACzB,cAAW;AAAA,QACX;AAAA,QAEA,8BAAC,gBAAa,MAAM,YAAY,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 * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACmBjB;AAnBN,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB,0BAA0B;AAC1D,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAMvB,MAAM,WAAW,CAAC,EAAE,SAAS,MAAmC;AACrE,QAAM,EAAE,cAAc,IAAI,YAAY;AAEtC,QAAM,EAAE,qBAAqB,MAAM,IAAI,WAAW,aAAa;AAE/D,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,KAAK;AAErE,SACE,oBAAC,yBAAsB,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/esm/parts/carousel/styles.js

@@ -38,7 +38,13 @@ const StyledChildrenWrap = 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 = styled.div`
   max-width: 16px;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,KAAK,cAAc;AAC5B,SAAS,kBAAkB;AAG3B,SAAS,YAAY,YAAY,iBAAiB;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,wBAAwB,OAAO,YAAY;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,WAAW;AACnB,CAAC;AAAA,IACG,wBAAwB;AAAA;AAGrB,MAAM,yBAAyB,OAAO,YAAY;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,WAAW;AACnB,CAAC;AAAA,IACG,wBAAwB;AAAA;AAGrB,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,EAAE,MAAM,MAAO,QAAQ,cAAc,UAAW;AAAA;AAAA,YAEzC,CAAC,EAAE,QAAQ,MAAO,YAAY,UAAU,SAAS,SAAS,MAAO;AAAA,iBAC5D,CAAC,EAAE,QAAQ,MAAO,YAAY,UAAU,SAAS,QAAQ,KAAM;AAAA;AAAA,IAE5E,CAAC,EAAE,OAAO,QAAQ,MAClB,YAAY,UAAU,SAClB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,GAAG,CAAC,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,KAE1H,EAAE;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,KAAK,cAAc;AAC5B,SAAS,kBAAkB;AAG3B,SAAS,YAAY,YAAY,iBAAiB;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,wBAAwB,OAAO,YAAY;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,WAAW;AACnB,CAAC;AAAA,IACG,wBAAwB;AAAA;AAGrB,MAAM,yBAAyB,OAAO,YAAY;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,WAAW;AACnB,CAAC;AAAA,IACG,wBAAwB;AAAA;AAGrB,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAQhB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAKxD,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,EAAE,MAAM,MAAO,QAAQ,cAAc,UAAW;AAAA;AAAA,YAEzC,CAAC,EAAE,QAAQ,MAAO,YAAY,UAAU,SAAS,SAAS,MAAO;AAAA,iBAC5D,CAAC,EAAE,QAAQ,MAAO,YAAY,UAAU,SAAS,QAAQ,KAAM;AAAA;AAAA,IAE5E,CAAC,EAAE,OAAO,QAAQ,MAClB,YAAY,UAAU,SAClB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,GAAG,CAAC,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,KAE1H,EAAE;AAAA;",
   "names": []
 }

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

@@ -1,53 +1,38 @@
 import * as React from "react";
-import { useCallback, useState, useContext } from "react";
-import useResizeObserver from "@react-hook/resize-observer";
+import { useCallback, useContext } from "react";
 import { DSTabsContext } from "../../DSTabsCTX.js";
 import { isElementVisibleCarousel } from "../../utils/helpers.js";
-import { useCarouselCallbacks } from "./useCarouselCallbacks.js";
 const useCarousel = () => {
-  const { carouselOnlyListRef } = useContext(DSTabsContext);
-  const [showChevrons, setShowChevrons] = useState({
-    right: false,
-    left: false
-  });
-  const { tabsRefAsArray } = useContext(DSTabsContext);
-  const shouldShowLeft = useCallback(
-    () => carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft > 0 : false,
-    [carouselOnlyListRef]
-  );
-  const shouldShowRight = useCallback(
-    () => carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft < carouselOnlyListRef.current.scrollWidth - carouselOnlyListRef.current.clientWidth : false,
-    [carouselOnlyListRef]
-  );
-  const recalcChevrons = useCallback(() => {
-    setShowChevrons({ right: shouldShowRight(), left: shouldShowLeft() });
-  }, [shouldShowLeft, shouldShowRight]);
-  const getVisibleItemsOffset = useCallback(() => {
-    if (tabsRefAsArray.current) {
-      const scroll = tabsRefAsArray.current.reduce((acc, c) => {
-        if (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 } = useContext(DSTabsContext);
+  const handleOnClick = 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 (!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]);
-  useResizeObserver(carouselOnlyListRef, recalcChevrons);
-  const { leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarouselCallbacks({
-    getVisibleItemsOffset,
-    recalcChevrons
-  });
+      }
+    },
+    [focusableTabsRef, carouselOnlyListRef]
+  );
   return {
-    showChevrons,
-    leftButtonOnClick,
-    rightButtonOnClick,
-    handleOnClick,
-    handleOnScroll
+    handleOnClick
   };
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/useCarousel.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,UAAU,kBAAkB;AAClD,OAAO,uBAAuB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AAW9B,MAAM,cAAc,MAA8B;AACvD,QAAM,EAAE,oBAAoB,IAAI,WAAW,aAAa;AAExD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAyC;AAAA,IAC/E,OAAO;AAAA,IACP,MAAM;AAAA,EACR,CAAC;AAED,QAAM,EAAE,eAAe,IAAI,WAAW,aAAa;AAEnD,QAAM,iBAAiB;AAAA,IACrB,MAAO,oBAAoB,UAAU,oBAAoB,QAAQ,aAAa,IAAI;AAAA,IAElF,CAAC,mBAAmB;AAAA,EACtB;AAEA,QAAM,kBAAkB;AAAA,IACtB,MACE,oBAAoB,UAChB,oBAAoB,QAAQ,aAC5B,oBAAoB,QAAQ,cAAc,oBAAoB,QAAQ,cACtE;AAAA,IACN,CAAC,mBAAmB;AAAA,EACtB;AAEA,QAAM,iBAAiB,YAAY,MAAM;AACvC,oBAAgB,EAAE,OAAO,gBAAgB,GAAG,MAAM,eAAe,EAAE,CAAC;AAAA,EACtE,GAAG,CAAC,gBAAgB,eAAe,CAAC;AAEpC,QAAM,wBAAwB,YAAY,MAAM;AAC9C,QAAI,eAAe,SAAS;AAC1B,YAAM,SAAS,eAAe,QAAQ,OAAO,CAAC,KAAK,MAAM;AACvD,YAAI,yBAAyB,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,oBAAkB,qBAAqB,cAAc;AAErD,QAAM,EAAE,mBAAmB,oBAAoB,eAAe,eAAe,IAAI,qBAAqB;AAAA,IACpG;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,kBAAkB;AACxC,SAAS,qBAAqB;AAC9B,SAAS,gCAAgC;AAMlC,MAAM,cAAc,MAA8B;AACvD,QAAM,EAAE,qBAAqB,iBAAiB,IAAI,WAAW,aAAa;AAS1E,QAAM,gBAAgB;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,CAAC,yBAAyB,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/esm/parts/tabBar/TabBar.js

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/TabBar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACkCX,cAUR,YAVQ;AAjCZ,SAAgB,kBAAkB;AAClC,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,sBAAsB,eAAe,kBAAkB,yBAAyB;AACzF,SAAS,qBAAqB;AAE9B,SAAS,kBAAkB,iBAAiB;AAE5C,SAAS,0BAA0B;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,IAAI,WAAW,aAAa;AAC5B,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,KAAK;AAErE,MAAI,SAAS,UAAU,WAAW,CAAC,YAAY;AAC7C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa,iBAAiB;AAAA,QAC9B,MAAM,eAAe,SAAY;AAAA,QACjC,UAAU;AAAA,QAET,yBACC,oBAAC,YACC,8BAAC,sBAAmB,GACtB,IAEA,oBAAC,sBAAmB;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,iBAAiB;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,4BAAC,oBAAiB,eAAY,eAAc,YAAwB,kBACjE,WAAC,cAAc,eACd,oBAAC,YACC,8BAAC,sBAAmB,GACtB,IAEA,oBAAC,sBAAmB,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": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACkCX,cAUR,YAVQ;AAjCZ,SAAgB,kBAAkB;AAClC,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,sBAAsB,eAAe,kBAAkB,yBAAyB;AACzF,SAAS,qBAAqB;AAE9B,SAAS,kBAAkB,iBAAiB;AAE5C,SAAS,0BAA0B;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,IAAI,WAAW,aAAa;AAC5B,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,KAAK;AAErE,MAAI,SAAS,UAAU,WAAW,CAAC,YAAY;AAC7C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa,iBAAiB;AAAA,QAC9B,MAAM,eAAe,SAAY;AAAA,QACjC,UAAU;AAAA,QAET,yBACC,oBAAC,YACC,8BAAC,sBAAmB,GACtB,IAEA,oBAAC,sBAAmB;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,iBAAiB;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,4BAAC,oBAAiB,eAAY,eAAc,YAAwB,kBACjE,WAAC,cAAc,eACd,oBAAC,YACC,8BAAC,sBAAmB,GACtB,IAEA,oBAAC,sBAAmB,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/esm/parts/tabBar/TabBarItemRenderer.js

@@ -1,18 +1,17 @@
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { createElement } from "react";
 import React2, { useContext } from "react";
-import {
-  StyledTabButton,
-  StyledRequiredMark,
-  ScreenReaderOnly,
-  StyledSubTabButton,
-  StyledSelectionIndicator
-} from "./styles.js";
+import { StyledTabButton, StyledSubTabButton } from "./styles.js";
 import { DSTabsContext, DSTabsCrossRefContext } from "../../DSTabsCTX.js";
 import { useKeyboardNavigation } from "../../utils/hooks/useKeyboardNavigation.js";
 import { centerTab } from "../../utils/helpers.js";
 import { TABS_DATA_TESTID, TAB_TYPES } from "../../constants/index.js";
+const TAB_TYPE_TO_VARIANT = {
+  [TAB_TYPES.NORMAL]: "primary",
+  [TAB_TYPES.NORMAL_SMALL]: "primary-small",
+  [TAB_TYPES.SUBTABS]: "secondary"
+};
 const TabBarItemRenderer = React2.memo(() => {
   const {
     tabsRef,
@@ -20,12 +19,14 @@ const TabBarItemRenderer = React2.memo(() => {
     tabsRefAsArray,
     carouselOnlyListRef,
     actualActiveTab,
-    props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },
+    focusedTabId,
+    props: { type, withCarousel, isDSMobile, showSeparator, children: tabs },
     globalClickHandler
   } = useContext(DSTabsContext);
   const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);
   const { handleOnKeyDown } = useKeyboardNavigation();
   const availableTabIndexes = [];
+  const size = tabs.length || 0;
   return React2.Children.map(tabs, (tab, index) => {
     const {
       tabId = "",
@@ -34,24 +35,34 @@ const TabBarItemRenderer = React2.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 === TAB_TYPES.SUBTABS ? StyledSubTabButton : StyledTabButton;
     const isActive = actualActiveTab === tabId;
+    const variant = TAB_TYPE_TO_VARIANT[type] ?? "primary";
+    const isLastItem = index === size - 1;
+    const ButtonComponent = type === TAB_TYPES.SUBTABS ? StyledSubTabButton : StyledTabButton;
     return /* @__PURE__ */ 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;
@@ -67,20 +78,11 @@ const TabBarItemRenderer = React2.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 !== TAB_TYPES.NORMAL,
         "data-testid": type === TAB_TYPES.NORMAL ? TABS_DATA_TESTID.TAB_BUTTON : TABS_DATA_TESTID.SUBTAB_BUTTON,
         id: `${tabId}-label`,
         onClick: (e) => {
@@ -98,14 +100,14 @@ const TabBarItemRenderer = React2.memo(() => {
           if (!disabled) handleOnKeyDown(e);
           if (onKeyDown && !disabled) onKeyDown(e);
         },
-        style
+        style,
+        showSeparator: showSeparator && type !== TAB_TYPES.NORMAL && !isLastItem,
+        isDSMobile,
+        tabType: type,
+        getOwnerProps,
+        getOwnerPropsArguments
       },
-      title,
-      required && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(StyledRequiredMark, { "aria-hidden": "true", children: "\u25CF" }),
-        /* @__PURE__ */ jsx(ScreenReaderOnly, { children: "Required" })
-      ] }),
-      isActive && type !== TAB_TYPES.SUBTABS ? /* @__PURE__ */ jsx(StyledSelectionIndicator, { "aria-hidden": "true", isDSMobile, tabType: type }) : null
+      RenderBadge ? /* @__PURE__ */ jsx(RenderBadge, {}) : null
     );
   });
 });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/TabBarItemRenderer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "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",
   "names": ["React"]
 }