@elliemae/ds-tabs 3.52.0-rc.2 → 3.52.0-rc.20

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

@@ -1,139 +1,35 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import React2, { useMemo, useContext } from "react";
+import { useContext } from "react";
 import { Carousel } from "../carousel/Carousel.js";
 import { useTabBar } from "./useTabBar.js";
 import {
-  StyledTabButton,
   StyledMobileGradient,
   StyledTabList,
   StyledTabWrapper,
   StyledSelectionIndicator,
-  StyledSubTabsList,
-  StyledRequiredMark
+  StyledSubTabsList
 } from "./styles.js";
-import { DSTabsContext, DSTabsCrossRefContext } from "../../DSTabsCTX.js";
-import { useKeyboardNavigation } from "../../utils/hooks/useKeyboardNavigation.js";
-import { centerTab } from "../../utils/helpers.js";
-import { TabTypes } from "../../utils/constants.js";
+import { DSTabsContext } from "../../DSTabsCTX.js";
+import { TABS_DATA_TESTID, TAB_TYPES } from "../../constants/index.js";
+import { TabBarItemRenderer } from "./TabBarItemRenderer.js";
 import { useTabsCallbacks } from "../../utils/hooks/useTabsCallbacks.js";
-import { DSTabsDatatestid } from "../../DSTabsDatatestid.js";
 const TabBar = () => {
   const {
-    tabsRef,
-    focusableTabsRef,
     tabsListRef,
-    tabsRefAsArray,
-    carouselOnlyListRef,
-    actualActiveTab,
-    props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs }
+    props: { type, fixedTabsHeaders, withCarousel, isDSMobile }
   } = useContext(DSTabsContext);
-  const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);
   const { handleOnTabChange } = useTabsCallbacks();
-  const { handleOnKeyDown } = useKeyboardNavigation();
   const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = useTabBar();
-  const renderTabs = useMemo(() => {
-    const availableTabIndexes = [];
-    return React2.Children.map(tabs, (tab, index) => {
-      const {
-        tabId = "",
-        title = "",
-        style,
-        required = false,
-        disabled = false,
-        applyAriaDisabled = false,
-        ref,
-        onClick,
-        onKeyDown
-      } = tab.props;
-      if (!disabled) availableTabIndexes.push(index);
-      return /* @__PURE__ */ jsxs(
-        StyledTabButton,
-        {
-          role: "tab",
-          innerRef: (tabButtonRef) => {
-            if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {
-              tabsRefAsArray.current[index] = tabButtonRef;
-              if (!disabled && !focusableTabsRef.current.includes(tabButtonRef))
-                focusableTabsRef.current.push(tabButtonRef);
-              tabsRef.current[index] = tabButtonRef;
-              if (type === TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {
-                firstSubtabInternalRef.current = tabButtonRef;
-              }
-              if (type !== TabTypes.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {
-                lastTabInternalRef.current = tabButtonRef;
-              }
-              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: actualActiveTab === tabId,
-          disabled,
-          showSeparator: showSeparator && type !== TabTypes.NORMAL,
-          "data-testid": type === TabTypes.NORMAL ? DSTabsDatatestid.TAB_BUTTON : DSTabsDatatestid.SUBTAB_BUTTON,
-          id: `${tabId}-label`,
-          onClick: (e) => {
-            if (applyAriaDisabled) return;
-            if (!disabled) {
-              handleOnTabChange(tabId, e);
-              updateIndicatorStyle();
-            }
-            if (onClick && !disabled) onClick(tabId, e);
-          },
-          onFocus: (e) => {
-            if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });
-          },
-          onKeyDown: (e) => {
-            if (e.key === "Enter") e.stopPropagation();
-            if (!disabled) handleOnKeyDown(e);
-            if (onKeyDown && !disabled) onKeyDown(e);
-          },
-          style,
-          children: [
-            title,
-            required && /* @__PURE__ */ jsx(StyledRequiredMark, { children: "\u25CF" })
-          ]
-        },
-        tabId
-      );
-    });
-  }, [
-    tabs,
-    actualActiveTab,
-    isDSMobile,
-    fixedTabsHeaders,
-    type,
-    withCarousel,
-    showSeparator,
-    tabsRefAsArray,
-    focusableTabsRef,
-    tabsRef,
-    firstSubtabInternalRef,
-    lastTabInternalRef,
-    handleOnTabChange,
-    updateIndicatorStyle,
-    carouselOnlyListRef,
-    handleOnKeyDown
-  ]);
-  if (type === TabTypes.SUBTABS && !isDSMobile) {
+  if (type === TAB_TYPES.SUBTABS && !isDSMobile) {
     return /* @__PURE__ */ jsx(
       StyledSubTabsList,
       {
         withCarousel,
-        "data-testid": DSTabsDatatestid.SUB_TAB_LIST,
+        "data-testid": TABS_DATA_TESTID.SUB_TAB_LIST,
         role: withCarousel ? void 0 : "tablist",
         innerRef: tabsListRef,
-        children: withCarousel ? /* @__PURE__ */ jsx(Carousel, { children: renderTabs }) : renderTabs
+        children: withCarousel ? /* @__PURE__ */ jsx(Carousel, { children: /* @__PURE__ */ jsx(TabBarItemRenderer, {}) }) : /* @__PURE__ */ jsx(TabBarItemRenderer, {})
       }
     );
   }
@@ -143,7 +39,7 @@ const TabBar = () => {
       withCarousel,
       role: withCarousel ? void 0 : "tablist",
       innerRef: tabsListRef,
-      "data-testid": DSTabsDatatestid.TAB_LIST,
+      "data-testid": TABS_DATA_TESTID.TAB_LIST,
       isDSMobile,
       fixedTabsHeaders,
       mobileGradients,
@@ -159,7 +55,7 @@ const TabBar = () => {
         }
       },
       children: [
-        /* @__PURE__ */ jsx(StyledTabWrapper, { "data-testid": "tab-wrapper", isDSMobile, fixedTabsHeaders, children: !isDSMobile && withCarousel ? /* @__PURE__ */ jsx(Carousel, { updateIndicatorStyle, children: renderTabs }) : renderTabs }),
+        /* @__PURE__ */ jsx(StyledTabWrapper, { "data-testid": "tab-wrapper", isDSMobile, fixedTabsHeaders, children: !isDSMobile && withCarousel ? /* @__PURE__ */ jsx(Carousel, { updateIndicatorStyle, children: /* @__PURE__ */ jsx(TabBarItemRenderer, {}) }) : /* @__PURE__ */ jsx(TabBarItemRenderer, {}) }),
         /* @__PURE__ */ jsx(StyledSelectionIndicator, { isDSMobile, tabType: type }),
         isDSMobile && !fixedTabsHeaders && /* @__PURE__ */ jsx(
           StyledMobileGradient,

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, { useMemo, useContext } from 'react';\nimport { Carousel } from '../carousel/Carousel.js';\nimport { useTabBar } from './useTabBar.js';\nimport {\n  StyledTabButton,\n  StyledMobileGradient,\n  StyledTabList,\n  StyledTabWrapper,\n  StyledSelectionIndicator,\n  StyledSubTabsList,\n  StyledRequiredMark,\n} from './styles.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';\nimport { centerTab } from '../../utils/helpers.js';\nimport { TabTypes } from '../../utils/constants.js';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n\nexport const TabBar = (): JSX.Element => {\n  const {\n    tabsRef,\n    focusableTabsRef,\n    tabsListRef,\n    tabsRefAsArray,\n    carouselOnlyListRef,\n    actualActiveTab,\n    props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },\n  } = useContext(DSTabsContext);\n\n  const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n  const { handleOnTabChange } = useTabsCallbacks();\n  const { handleOnKeyDown } = useKeyboardNavigation();\n\n  const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = useTabBar();\n\n  const renderTabs = useMemo(() => {\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      } = tab.props;\n\n      if (!disabled) availableTabIndexes.push(index);\n      return (\n        <StyledTabButton\n          key={tabId}\n          role=\"tab\"\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 === TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n                firstSubtabInternalRef.current = tabButtonRef;\n              }\n              if (type !== TabTypes.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={actualActiveTab === tabId}\n          disabled={disabled}\n          showSeparator={showSeparator && type !== TabTypes.NORMAL}\n          data-testid={type === TabTypes.NORMAL ? DSTabsDatatestid.TAB_BUTTON : DSTabsDatatestid.SUBTAB_BUTTON}\n          id={`${tabId}-label`}\n          onClick={(e) => {\n            if (applyAriaDisabled) return;\n            if (!disabled) {\n              handleOnTabChange(tabId, e);\n              updateIndicatorStyle();\n            }\n            if (onClick && !disabled) onClick(tabId, e);\n          }}\n          onFocus={(e) => {\n            if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });\n          }}\n          onKeyDown={(e) => {\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 && <StyledRequiredMark>&#9679;</StyledRequiredMark>}\n        </StyledTabButton>\n      );\n    });\n  }, [\n    tabs,\n    actualActiveTab,\n    isDSMobile,\n    fixedTabsHeaders,\n    type,\n    withCarousel,\n    showSeparator,\n    tabsRefAsArray,\n    focusableTabsRef,\n    tabsRef,\n    firstSubtabInternalRef,\n    lastTabInternalRef,\n    handleOnTabChange,\n    updateIndicatorStyle,\n    carouselOnlyListRef,\n    handleOnKeyDown,\n  ]);\n\n  if (type === TabTypes.SUBTABS && !isDSMobile) {\n    return (\n      <StyledSubTabsList\n        withCarousel={withCarousel}\n        data-testid={DSTabsDatatestid.SUB_TAB_LIST}\n        role={withCarousel ? undefined : 'tablist'}\n        innerRef={tabsListRef}\n      >\n        {withCarousel ? <Carousel>{renderTabs}</Carousel> : renderTabs}\n      </StyledSubTabsList>\n    );\n  }\n\n  return (\n    <StyledTabList\n      withCarousel={withCarousel}\n      role={withCarousel ? undefined : 'tablist'}\n      innerRef={tabsListRef}\n      data-testid={DSTabsDatatestid.TAB_LIST}\n      isDSMobile={isDSMobile}\n      fixedTabsHeaders={fixedTabsHeaders}\n      mobileGradients={mobileGradients}\n      onScroll={updateMobileGradients}\n      indicatorStyle={indicatorStyle}\n      tabType={type}\n      onMouseDown={(e) => {\n        /**\n         * [PUI-15396](https://jira.elliemae.io/browse/PUI-15396)\n         * This is a workaround for an issue where clicks on tab buttons within a carousel\n         * sometimes fail to trigger state updates. The problem occurs because:\n         *\n         * 1. When clicking on certain tabs, the click event reaches the tablist\n         *    wrapper instead of the tab button\n         * 2. The carousel's scroll logic interferes with the normal event propagation\n         * 3. This prevents the tab's onClick handler from being called consistently\n         *\n         * By adding an onMouseDown handler at the tablist level, we can:\n         * - Capture the event earlier in the event cycle (before onClick)\n         * - Check if the clicked element has a tab ID (data-tab-id attribute)\n         * - Directly call handleOnTabChange with the appropriate tab ID\n         *\n         * This ensures the tab state updates correctly regardless of event bubbling issues\n         * or interference from the carousel's scroll behavior.\n         */\n        const target = e.target as HTMLElement;\n        const { dataset, ariaDisabled } = target;\n        if (dataset.tabId && ariaDisabled !== 'true') {\n          handleOnTabChange(dataset.tabId, e);\n          updateIndicatorStyle();\n        }\n      }}\n    >\n      <StyledTabWrapper data-testid=\"tab-wrapper\" isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n        {!isDSMobile && withCarousel ? (\n          <Carousel updateIndicatorStyle={updateIndicatorStyle}>{renderTabs}</Carousel>\n        ) : (\n          renderTabs\n        )}\n      </StyledTabWrapper>\n      <StyledSelectionIndicator isDSMobile={isDSMobile} tabType={type} />\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": "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",
-  "names": ["React"]
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Carousel } from '../carousel/Carousel.js';\nimport { useTabBar } from './useTabBar.js';\nimport {\n  StyledMobileGradient,\n  StyledTabList,\n  StyledTabWrapper,\n  StyledSelectionIndicator,\n  StyledSubTabsList,\n} 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';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\n\nexport const TabBar = (): JSX.Element => {\n  const {\n    tabsListRef,\n    props: { type, fixedTabsHeaders, withCarousel, isDSMobile },\n  } = useContext(DSTabsContext);\n\n  const { handleOnTabChange } = useTabsCallbacks();\n  const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = useTabBar();\n\n  if (type === TAB_TYPES.SUBTABS && !isDSMobile) {\n    return (\n      <StyledSubTabsList\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      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      indicatorStyle={indicatorStyle}\n      tabType={type}\n      onMouseDown={(e) => {\n        /**\n         * [PUI-15396](https://jira.elliemae.io/browse/PUI-15396)\n         * This is a workaround for an issue where clicks on tab buttons within a carousel\n         * sometimes fail to trigger state updates. The problem occurs because:\n         *\n         * 1. When clicking on certain tabs, the click event reaches the tablist\n         *    wrapper instead of the tab button\n         * 2. The carousel's scroll logic interferes with the normal event propagation\n         * 3. This prevents the tab's onClick handler from being called consistently\n         *\n         * By adding an onMouseDown handler at the tablist level, we can:\n         * - Capture the event earlier in the event cycle (before onClick)\n         * - Check if the clicked element has a tab ID (data-tab-id attribute)\n         * - Directly call handleOnTabChange with the appropriate tab ID\n         *\n         * This ensures the tab state updates correctly regardless of event bubbling issues\n         * or interference from the carousel's scroll behavior.\n         */\n        const target = e.target as HTMLElement;\n        const { dataset, ariaDisabled } = target;\n        if (dataset.tabId && ariaDisabled !== 'true') {\n          handleOnTabChange(dataset.tabId, e);\n          updateIndicatorStyle();\n        }\n      }}\n    >\n      <StyledTabWrapper data-testid=\"tab-wrapper\" isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n        {!isDSMobile && withCarousel ? (\n          <Carousel updateIndicatorStyle={updateIndicatorStyle}>\n            <TabBarItemRenderer />\n          </Carousel>\n        ) : (\n          <TabBarItemRenderer />\n        )}\n      </StyledTabWrapper>\n      <StyledSelectionIndicator isDSMobile={isDSMobile} tabType={type} />\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;ACqCX,cAUR,YAVQ;AApCZ,SAAgB,kBAAkB;AAClC,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB;AAE9B,SAAS,kBAAkB,iBAAiB;AAE5C,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AAE1B,MAAM,SAAS,MAAmB;AACvC,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,MAAM,kBAAkB,cAAc,WAAW;AAAA,EAC5D,IAAI,WAAW,aAAa;AAE5B,QAAM,EAAE,kBAAkB,IAAI,iBAAiB;AAC/C,QAAM,EAAE,gBAAgB,iBAAiB,uBAAuB,qBAAqB,IAAI,UAAU;AAEnG,MAAI,SAAS,UAAU,WAAW,CAAC,YAAY;AAC7C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;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,MAAM,eAAe,SAAY;AAAA,MACjC,UAAU;AAAA,MACV,eAAa,iBAAiB;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,SAAS;AAAA,MACT,aAAa,CAAC,MAAM;AAmBlB,cAAM,SAAS,EAAE;AACjB,cAAM,EAAE,SAAS,aAAa,IAAI;AAClC,YAAI,QAAQ,SAAS,iBAAiB,QAAQ;AAC5C,4BAAkB,QAAQ,OAAO,CAAC;AAClC,+BAAqB;AAAA,QACvB;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,oBAAiB,eAAY,eAAc,YAAwB,kBACjE,WAAC,cAAc,eACd,oBAAC,YAAS,sBACR,8BAAC,sBAAmB,GACtB,IAEA,oBAAC,sBAAmB,GAExB;AAAA,QACA,oBAAC,4BAAyB,YAAwB,SAAS,MAAM;AAAA,QAChE,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;",
+  "names": []
 }

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

@@ -0,0 +1,106 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import React2, { useContext } from "react";
+import { useTabBar } from "./useTabBar.js";
+import { StyledTabButton, StyledRequiredMark, ScreenReaderOnly } from "./styles.js";
+import { DSTabsContext, DSTabsCrossRefContext } from "../../DSTabsCTX.js";
+import { useKeyboardNavigation } from "../../utils/hooks/useKeyboardNavigation.js";
+import { centerTab } from "../../utils/helpers.js";
+import { useTabsCallbacks } from "../../utils/hooks/useTabsCallbacks.js";
+import { TABS_DATA_TESTID, TAB_TYPES } from "../../constants/index.js";
+const TabBarItemRenderer = React2.memo(() => {
+  const {
+    tabsRef,
+    focusableTabsRef,
+    tabsRefAsArray,
+    carouselOnlyListRef,
+    actualActiveTab,
+    props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs }
+  } = useContext(DSTabsContext);
+  const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);
+  const { handleOnTabChange } = useTabsCallbacks();
+  const { handleOnKeyDown } = useKeyboardNavigation();
+  const { updateIndicatorStyle } = useTabBar();
+  const availableTabIndexes = [];
+  return React2.Children.map(tabs, (tab, index) => {
+    const {
+      tabId = "",
+      title = "",
+      style,
+      required = false,
+      disabled = false,
+      applyAriaDisabled = false,
+      ref,
+      onClick,
+      onKeyDown,
+      ...rest
+    } = tab.props;
+    if (!disabled) availableTabIndexes.push(index);
+    return /* @__PURE__ */ createElement(
+      StyledTabButton,
+      {
+        ...rest,
+        key: tabId,
+        role: "tab",
+        innerRef: (tabButtonRef) => {
+          if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {
+            tabsRefAsArray.current[index] = tabButtonRef;
+            if (!disabled && !focusableTabsRef.current.includes(tabButtonRef))
+              focusableTabsRef.current.push(tabButtonRef);
+            tabsRef.current[index] = tabButtonRef;
+            if (type === TAB_TYPES.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {
+              firstSubtabInternalRef.current = tabButtonRef;
+            }
+            if (type !== TAB_TYPES.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {
+              lastTabInternalRef.current = tabButtonRef;
+            }
+            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: actualActiveTab === tabId,
+        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) => {
+          if (applyAriaDisabled) return;
+          if (!disabled) {
+            handleOnTabChange(tabId, e);
+            updateIndicatorStyle();
+          }
+          if (onClick && !disabled) onClick(tabId, e);
+        },
+        onFocus: (e) => {
+          if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter") e.stopPropagation();
+          if (!disabled) handleOnKeyDown(e);
+          if (onKeyDown && !disabled) onKeyDown(e);
+        },
+        style
+      },
+      title,
+      required && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(StyledRequiredMark, { "aria-hidden": "true", children: "\u25CF" }),
+        /* @__PURE__ */ jsx(ScreenReaderOnly, { children: "Required" })
+      ] })
+    );
+  });
+});
+export {
+  TabBarItemRenderer
+};
+//# sourceMappingURL=TabBarItemRenderer.js.map

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

@@ -0,0 +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';\n\nimport { useTabBar } from './useTabBar.js';\nimport { StyledTabButton, StyledRequiredMark, ScreenReaderOnly } from './styles.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';\nimport { centerTab } from '../../utils/helpers.js';\n\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\n\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  } = useContext(DSTabsContext);\n\n  const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n  const { handleOnTabChange } = useTabsCallbacks();\n  const { handleOnKeyDown } = useKeyboardNavigation();\n\n  const { updateIndicatorStyle } = useTabBar();\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    if (!disabled) availableTabIndexes.push(index);\n    return (\n      <StyledTabButton\n        {...rest}\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={actualActiveTab === tabId}\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            handleOnTabChange(tabId, e);\n            updateIndicatorStyle();\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      </StyledTabButton>\n    );\n  });\n});\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/esm/parts/tabBar/styles.js

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { styled, safariAndFirefoxBold, onlySafariAndFirefox, th } from "@elliemae/ds-system";
-import { TabTypes } from "../../utils/constants.js";
+import { TAB_TYPES } from "../../constants/index.js";
 const StyledSelectionIndicator = styled.div`
   position: absolute;
   height: ${({ isDSMobile }) => isDSMobile ? "2px" : "3px"};
   top: ${({ tabType, isDSMobile }) => {
   if (isDSMobile) return `35px`;
-  if (tabType === TabTypes.NORMAL_SMALL) return `15px`;
+  if (tabType === TAB_TYPES.NORMAL_SMALL) return `15px`;
   return `25px`;
 }};
   z-index: 1;
@@ -52,7 +52,7 @@ const StyledTabButton = styled.button`
   cursor: pointer;
   transition: 100ms cubic-bezier(0, 0, 0.42, 1);
   text-transform: ${({ tabType, isDSMobile }) => {
-  if (tabType === TabTypes.SUBTABS) return "capitalize";
+  if (tabType === TAB_TYPES.SUBTABS) return "capitalize";
   return isDSMobile ? "none" : "uppercase";
 }};
   letter-spacing: 0px;
@@ -73,7 +73,7 @@ const StyledTabButton = styled.button`
   color: ${({ theme }) => theme.colors.neutral[700]};
   ${onlySafariAndFirefox("-webkit-text-stroke: 0.4px transparent;")}
 
-  ${({ tabType }) => tabType === TabTypes.NORMAL ? `height: 32px;` : `height: 22px;`}
+  ${({ tabType }) => tabType === TAB_TYPES.NORMAL ? `height: 32px;` : `height: 22px;`}
 
   ${({ theme, isActive, disabled }) => isActive && !disabled ? `
           font-weight:  ${theme.fontWeights.semibold};
@@ -112,7 +112,7 @@ const StyledTabButton = styled.button`
               right: -16px;
               top: 50%;
               transform: translateY(-50%);
-              height: ${tabType === TabTypes.SUBTABS ? `10px` : `16px`};
+              height: ${tabType === TAB_TYPES.SUBTABS ? `10px` : `16px`};
               background: ${theme.colors.neutral[400]};
             }` : ``}
 
@@ -131,7 +131,7 @@ const StyledTabButton = styled.button`
       border: 2px solid ${theme.colors.brand[700]};
     }
 
-    ${tabType !== TabTypes.SUBTABS && isActive ? `
+    ${tabType !== TAB_TYPES.SUBTABS && isActive ? `
       &:before {
         position: absolute;
         content: '';
@@ -204,7 +204,7 @@ const StyledTabList = styled.div`
   z-index: 0;
   ${({ withCarousel, isDSMobile }) => withCarousel && !isDSMobile ? `max-width: 100%;` : ""}
 
-  ${({ theme, isDSMobile, tabType }) => tabType !== TabTypes.NORMAL_SMALL && !isDSMobile ? `
+  ${({ theme, isDSMobile, tabType }) => tabType !== TAB_TYPES.NORMAL_SMALL && !isDSMobile ? `
   &:after {
     content: '';
     position: absolute;
@@ -262,7 +262,17 @@ const StyledRequiredMark = styled.span`
   position: absolute;
   top: 5px;
 `;
+const ScreenReaderOnly = styled.div`
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`;
 export {
+  ScreenReaderOnly,
   StyledMobileGradient,
   StyledRequiredMark,
   StyledSelectionIndicator,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled, safariAndFirefoxBold, onlySafariAndFirefox, th } from '@elliemae/ds-system';\nimport { TabTypes } from '../../utils/constants.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\n\ninterface StyledSelectionIndicatoPropsT {\n  isDSMobile: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledSubTabsListPropsT {\n  withCarousel: boolean;\n}\n\ninterface StyledTabButtonPropsT {\n  isActive: boolean;\n  disabled: boolean;\n  showSeparator: boolean;\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n  withCarousel: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledTabListPropsT {\n  withCarousel: boolean;\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n  indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledMobileGradientPropsT {\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n  left: number | undefined;\n  width: number | undefined;\n}\n\ninterface StyledTabWrapperPropsT {\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n}\n\nexport const StyledSelectionIndicator = styled.div<StyledSelectionIndicatoPropsT>`\n  position: absolute;\n  height: ${({ isDSMobile }) => (isDSMobile ? '2px' : '3px')};\n  top: ${({ tabType, isDSMobile }) => {\n    if (isDSMobile) return `35px`;\n    if (tabType === TabTypes.NORMAL_SMALL) return `15px`;\n    return `25px`;\n  }};\n  z-index: 1;\n  margin-top: ${({ theme }) => theme.space.xxxs};\n  pointer-events: none;\n  transition: 200ms cubic-bezier(0.36, 0, 1, 1);\n\n  ${({ isDSMobile }) =>\n    isDSMobile\n      ? ` \n  margin-left: 0;\n  margin-top: 3px;\n  `\n      : ``}\n`;\n\nexport const StyledMobileGradient = styled.div.attrs(({ left = 0, width = 0 }: StyledMobileGradientPropsT) => ({\n  style: { left: left - 10, maxWidth: width - left },\n}))<StyledMobileGradientPropsT>`\n  position: fixed;\n  z-index: 15;\n  top: 0;\n  width: calc(100% + 20px);\n  height: 40px;\n  pointer-events: none;\n\n  ${({ mobileGradients: { left, right } }) => {\n    if (right && left)\n      return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n    if (right)\n      return `background: linear-gradient(90deg, #FFFFFF00 0%, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n    if (left) return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 100%);`;\n    return '';\n  }};\n`;\n\n/**  CSS Setters */\n\nexport const StyledTabWrapper = styled.div<StyledTabWrapperPropsT>`\n  display: flex;\n  flex: 1;\n  flex-wrap: nowrap;\n  ${({ fixedTabsHeaders, isDSMobile }) => (!fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;')}\n  ${({ theme, isDSMobile }) => (isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``)}\n`;\n\nexport const StyledTabButton = styled.button<StyledTabButtonPropsT>`\n  position: relative;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  transition: 100ms cubic-bezier(0, 0, 0.42, 1);\n  text-transform: ${({ tabType, isDSMobile }) => {\n    if (tabType === TabTypes.SUBTABS) return 'capitalize';\n    return isDSMobile ? 'none' : 'uppercase';\n  }};\n  letter-spacing: 0px;\n  white-space: nowrap;\n  padding: 2px 0;\n  margin-right: ${({ fixedTabsHeaders, isDSMobile }) => {\n    if (fixedTabsHeaders) return '0px';\n    if (!fixedTabsHeaders && isDSMobile) return '14px';\n    return '16px';\n  }};\n\n  margin-left: ${({ fixedTabsHeaders, isDSMobile }) => {\n    if (fixedTabsHeaders) return '0px';\n    if (!fixedTabsHeaders && isDSMobile) return '14px';\n    return '16px';\n  }};\n\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')}\n\n  ${({ tabType }) => (tabType === TabTypes.NORMAL ? `height: 32px;` : `height: 22px;`)}\n\n  ${({ theme, isActive, disabled }) =>\n    isActive && !disabled\n      ? `\n          font-weight:  ${theme.fontWeights.semibold};\n          ${safariAndFirefoxBold(`#353C46`)}\n\n          &:hover {\n            ${safariAndFirefoxBold(`#1E79C2`)}\n          }\n          \n        `\n      : `\n      \n      `}\n\n  ${({ theme, disabled }) =>\n    disabled\n      ? `\n          color: ${theme.colors.neutral[500]};\n          cursor: not-allowed;\n        `\n      : `\n      &:hover {\n        color: ${theme.colors.brand[600]};\n      }\n          `}\n\n  ${({ theme }) => `\n    &[aria-disabled='true'] {\n      color: ${theme.colors.neutral[500]};\n      cursor: not-allowed;\n    }\n  `}\n\n  ${({ theme, showSeparator, tabType }) =>\n    showSeparator\n      ? `\n          &:not(:last-of-type):before\n            {\n              content: \"\";\n              position: absolute;\n              width: 1px;\n              right: -16px;\n              top: 50%;\n              transform: translateY(-50%);\n              height: ${tabType === TabTypes.SUBTABS ? `10px` : `16px`};\n              background: ${theme.colors.neutral[400]};\n            }`\n      : ``}\n\n  ${({ theme, isDSMobile, tabType, isActive }) =>\n    !isDSMobile\n      ? `\n  &:focus {\n    outline: none;\n    &:after {\n      position: absolute;\n      content: '';\n      top: 0;\n      left: -16px;\n      width: calc(100% + 32px);\n      height: 100%;\n      z-index: 5;\n      border-radius: 2px;\n      border: 2px solid ${theme.colors.brand[700]};\n    }\n\n    ${\n      tabType !== TabTypes.SUBTABS && isActive\n        ? `\n      &:before {\n        position: absolute;\n        content: '';\n        left: -16px;\n        right: 0;\n        top: calc(100% - 2px);\n        transform: none;\n        width: calc(100% + 32px);\n        height: 2px;\n        z-index: 10;\n        background: linear-gradient(to right, transparent 0px, transparent 12px, white 12px, white 16px, transparent 16px,transparent calc(100% - 16px),  white calc(100% - 16px), white calc(100% - 12px),  transparent calc(100% - 12px), transparent 100%);\n      }\n    `\n        : ``\n    }\n  }\n  \n  `\n      : ``}\n\n  \n      \n${({ theme, isActive, disabled, isDSMobile }) =>\n    isDSMobile\n      ? `\n    height:  40px;\n    color: ${disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n    font-weight: ${theme.fontWeights.regular};\n    padding: 0;\n    font-size: 16px;\n    line-height: 1.3;\n    ${String(onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'))} \n\n    &:focus {\n      font-weight: ${theme.fontWeights.regular};\n      ${safariAndFirefoxBold('#006AA9')}\n    }\n\n    ${\n      isActive\n        ? `\n        font-weight: ${theme.fontWeights.regular};\n        ${safariAndFirefoxBold('#006AA9')}\n        `\n        : ``\n    }\n\n    ${\n      isActive && !disabled\n        ? `\n        color:  ${theme.colors.brand[700]};\n        line-height: 1.3;\n        font-weight: ${theme.fontWeights.regular};\n        -webkit-font-smoothing: subpixel-antialiased; \n        -webkit-text-stroke: 0.4px ${theme.colors.brand[700]};`\n        : ``\n    }\n\n    ${\n      !disabled\n        ? `\n        &:hover,\n        &:focus {\n          outline: none;\n          color: ${theme.colors.brand[700]};\n          ${safariAndFirefoxBold('#006AA9')}\n        }`\n        : ``\n    }\n\n    `\n      : ``}\n`;\n\nexport const StyledSubTabsList = styled.div<StyledSubTabsListPropsT>`\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  width: 100%;\n  ${({ withCarousel }) => (withCarousel ? 'max-width: 100%;' : '')}\n`;\n\nexport const StyledTabList = styled.div<StyledTabListPropsT>`\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  width: 100%;\n  z-index: 0;\n  ${({ withCarousel, isDSMobile }) => (withCarousel && !isDSMobile ? `max-width: 100%;` : '')}\n\n  ${({ theme, isDSMobile, tabType }) =>\n    tabType !== TabTypes.NORMAL_SMALL && !isDSMobile\n      ? `\n  &:after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 1px;\n    box-shadow: 0px 0px 0px 1px ${theme.colors.neutral[400]};\n    pointer-events: none;\n    bottom: 0px;\n  }\n  `\n      : ``}\n\n  ${StyledTabButton} {\n    padding-bottom: 0;\n    padding-top: 0;\n  }\n\n  ${({ theme, isDSMobile }) =>\n    isDSMobile\n      ? `\n        \n         background: ${theme.colors.neutral['000']};`\n      : ``}\n\n  ${({ isDSMobile, fixedTabsHeaders }) =>\n    isDSMobile\n      ? `\n      ${\n        !fixedTabsHeaders\n          ? `\n          z-index: 0;\n          overflow-x: auto;\n          overflow-y: hidden;\n          &::-webkit-scrollbar {\n            display: none;\n          }`\n          : `\n         display: flex;\n        ${StyledTabButton} {\n          flex: 1;\n          overflow-x: hidden;\n        }`\n      }`\n      : ``}\n\n  ${StyledSelectionIndicator} {\n    ${({ indicatorStyle }) => `\n      width: ${indicatorStyle.width}px;\n      left: ${indicatorStyle.left}px;\n      `}\n  }\n\n  ${StyledSelectionIndicator} {\n    background: ${(props) => {\n      const { theme, indicatorStyle, isDSMobile } = props;\n      return !isDSMobile\n        ? `linear-gradient(to right, transparent 0px, transparent 16px, ${th.color('brand-600')(\n            props,\n          )} 16px, ${th.color('brand-600')(props)} ${indicatorStyle.width - 16}px, transparent ${\n            indicatorStyle.width - 16\n          }px, transparent ${indicatorStyle.width}px )`\n        : theme.colors.brand[600];\n    }};\n  }\n`;\n\nexport const StyledRequiredMark = styled.span`\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-size: 6px;\n  margin-left: 2px;\n  position: absolute;\n  top: 5px;\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled, safariAndFirefoxBold, onlySafariAndFirefox, th } from '@elliemae/ds-system';\n\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { TAB_TYPES } from '../../constants/index.js';\n\ninterface StyledSelectionIndicatoPropsT {\n  isDSMobile: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledSubTabsListPropsT {\n  withCarousel: boolean;\n}\n\ninterface StyledTabButtonPropsT {\n  isActive: boolean;\n  disabled: boolean;\n  showSeparator: boolean;\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n  withCarousel: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledTabListPropsT {\n  withCarousel: boolean;\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n  indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledMobileGradientPropsT {\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n  left: number | undefined;\n  width: number | undefined;\n}\n\ninterface StyledTabWrapperPropsT {\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n}\n\nexport const StyledSelectionIndicator = styled.div<StyledSelectionIndicatoPropsT>`\n  position: absolute;\n  height: ${({ isDSMobile }) => (isDSMobile ? '2px' : '3px')};\n  top: ${({ tabType, isDSMobile }) => {\n    if (isDSMobile) return `35px`;\n    if (tabType === TAB_TYPES.NORMAL_SMALL) return `15px`;\n    return `25px`;\n  }};\n  z-index: 1;\n  margin-top: ${({ theme }) => theme.space.xxxs};\n  pointer-events: none;\n  transition: 200ms cubic-bezier(0.36, 0, 1, 1);\n\n  ${({ isDSMobile }) =>\n    isDSMobile\n      ? ` \n  margin-left: 0;\n  margin-top: 3px;\n  `\n      : ``}\n`;\n\nexport const StyledMobileGradient = styled.div.attrs(({ left = 0, width = 0 }: StyledMobileGradientPropsT) => ({\n  style: { left: left - 10, maxWidth: width - left },\n}))<StyledMobileGradientPropsT>`\n  position: fixed;\n  z-index: 15;\n  top: 0;\n  width: calc(100% + 20px);\n  height: 40px;\n  pointer-events: none;\n\n  ${({ mobileGradients: { left, right } }) => {\n    if (right && left)\n      return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n    if (right)\n      return `background: linear-gradient(90deg, #FFFFFF00 0%, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n    if (left) return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 100%);`;\n    return '';\n  }};\n`;\n\n/**  CSS Setters */\n\nexport const StyledTabWrapper = styled.div<StyledTabWrapperPropsT>`\n  display: flex;\n  flex: 1;\n  flex-wrap: nowrap;\n  ${({ fixedTabsHeaders, isDSMobile }) => (!fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;')}\n  ${({ theme, isDSMobile }) => (isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``)}\n`;\n\nexport const StyledTabButton = styled.button<StyledTabButtonPropsT>`\n  position: relative;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  transition: 100ms cubic-bezier(0, 0, 0.42, 1);\n  text-transform: ${({ tabType, isDSMobile }) => {\n    if (tabType === TAB_TYPES.SUBTABS) return 'capitalize';\n    return isDSMobile ? 'none' : 'uppercase';\n  }};\n  letter-spacing: 0px;\n  white-space: nowrap;\n  padding: 2px 0;\n  margin-right: ${({ fixedTabsHeaders, isDSMobile }) => {\n    if (fixedTabsHeaders) return '0px';\n    if (!fixedTabsHeaders && isDSMobile) return '14px';\n    return '16px';\n  }};\n\n  margin-left: ${({ fixedTabsHeaders, isDSMobile }) => {\n    if (fixedTabsHeaders) return '0px';\n    if (!fixedTabsHeaders && isDSMobile) return '14px';\n    return '16px';\n  }};\n\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')}\n\n  ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? `height: 32px;` : `height: 22px;`)}\n\n  ${({ theme, isActive, disabled }) =>\n    isActive && !disabled\n      ? `\n          font-weight:  ${theme.fontWeights.semibold};\n          ${safariAndFirefoxBold(`#353C46`)}\n\n          &:hover {\n            ${safariAndFirefoxBold(`#1E79C2`)}\n          }\n          \n        `\n      : `\n      \n      `}\n\n  ${({ theme, disabled }) =>\n    disabled\n      ? `\n          color: ${theme.colors.neutral[500]};\n          cursor: not-allowed;\n        `\n      : `\n      &:hover {\n        color: ${theme.colors.brand[600]};\n      }\n          `}\n\n  ${({ theme }) => `\n    &[aria-disabled='true'] {\n      color: ${theme.colors.neutral[500]};\n      cursor: not-allowed;\n    }\n  `}\n\n  ${({ theme, showSeparator, tabType }) =>\n    showSeparator\n      ? `\n          &:not(:last-of-type):before\n            {\n              content: \"\";\n              position: absolute;\n              width: 1px;\n              right: -16px;\n              top: 50%;\n              transform: translateY(-50%);\n              height: ${tabType === TAB_TYPES.SUBTABS ? `10px` : `16px`};\n              background: ${theme.colors.neutral[400]};\n            }`\n      : ``}\n\n  ${({ theme, isDSMobile, tabType, isActive }) =>\n    !isDSMobile\n      ? `\n  &:focus {\n    outline: none;\n    &:after {\n      position: absolute;\n      content: '';\n      top: 0;\n      left: -16px;\n      width: calc(100% + 32px);\n      height: 100%;\n      z-index: 5;\n      border-radius: 2px;\n      border: 2px solid ${theme.colors.brand[700]};\n    }\n\n    ${\n      tabType !== TAB_TYPES.SUBTABS && isActive\n        ? `\n      &:before {\n        position: absolute;\n        content: '';\n        left: -16px;\n        right: 0;\n        top: calc(100% - 2px);\n        transform: none;\n        width: calc(100% + 32px);\n        height: 2px;\n        z-index: 10;\n        background: linear-gradient(to right, transparent 0px, transparent 12px, white 12px, white 16px, transparent 16px,transparent calc(100% - 16px),  white calc(100% - 16px), white calc(100% - 12px),  transparent calc(100% - 12px), transparent 100%);\n      }\n    `\n        : ``\n    }\n  }\n  \n  `\n      : ``}\n\n  \n      \n${({ theme, isActive, disabled, isDSMobile }) =>\n    isDSMobile\n      ? `\n    height:  40px;\n    color: ${disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n    font-weight: ${theme.fontWeights.regular};\n    padding: 0;\n    font-size: 16px;\n    line-height: 1.3;\n    ${String(onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'))} \n\n    &:focus {\n      font-weight: ${theme.fontWeights.regular};\n      ${safariAndFirefoxBold('#006AA9')}\n    }\n\n    ${\n      isActive\n        ? `\n        font-weight: ${theme.fontWeights.regular};\n        ${safariAndFirefoxBold('#006AA9')}\n        `\n        : ``\n    }\n\n    ${\n      isActive && !disabled\n        ? `\n        color:  ${theme.colors.brand[700]};\n        line-height: 1.3;\n        font-weight: ${theme.fontWeights.regular};\n        -webkit-font-smoothing: subpixel-antialiased; \n        -webkit-text-stroke: 0.4px ${theme.colors.brand[700]};`\n        : ``\n    }\n\n    ${\n      !disabled\n        ? `\n        &:hover,\n        &:focus {\n          outline: none;\n          color: ${theme.colors.brand[700]};\n          ${safariAndFirefoxBold('#006AA9')}\n        }`\n        : ``\n    }\n\n    `\n      : ``}\n`;\n\nexport const StyledSubTabsList = styled.div<StyledSubTabsListPropsT>`\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  width: 100%;\n  ${({ withCarousel }) => (withCarousel ? 'max-width: 100%;' : '')}\n`;\n\nexport const StyledTabList = styled.div<StyledTabListPropsT>`\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  width: 100%;\n  z-index: 0;\n  ${({ withCarousel, isDSMobile }) => (withCarousel && !isDSMobile ? `max-width: 100%;` : '')}\n\n  ${({ theme, isDSMobile, tabType }) =>\n    tabType !== TAB_TYPES.NORMAL_SMALL && !isDSMobile\n      ? `\n  &:after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 1px;\n    box-shadow: 0px 0px 0px 1px ${theme.colors.neutral[400]};\n    pointer-events: none;\n    bottom: 0px;\n  }\n  `\n      : ``}\n\n  ${StyledTabButton} {\n    padding-bottom: 0;\n    padding-top: 0;\n  }\n\n  ${({ theme, isDSMobile }) =>\n    isDSMobile\n      ? `\n        \n         background: ${theme.colors.neutral['000']};`\n      : ``}\n\n  ${({ isDSMobile, fixedTabsHeaders }) =>\n    isDSMobile\n      ? `\n      ${\n        !fixedTabsHeaders\n          ? `\n          z-index: 0;\n          overflow-x: auto;\n          overflow-y: hidden;\n          &::-webkit-scrollbar {\n            display: none;\n          }`\n          : `\n         display: flex;\n        ${StyledTabButton} {\n          flex: 1;\n          overflow-x: hidden;\n        }`\n      }`\n      : ``}\n\n  ${StyledSelectionIndicator} {\n    ${({ indicatorStyle }) => `\n      width: ${indicatorStyle.width}px;\n      left: ${indicatorStyle.left}px;\n      `}\n  }\n\n  ${StyledSelectionIndicator} {\n    background: ${(props) => {\n      const { theme, indicatorStyle, isDSMobile } = props;\n      return !isDSMobile\n        ? `linear-gradient(to right, transparent 0px, transparent 16px, ${th.color('brand-600')(\n            props,\n          )} 16px, ${th.color('brand-600')(props)} ${indicatorStyle.width - 16}px, transparent ${\n            indicatorStyle.width - 16\n          }px, transparent ${indicatorStyle.width}px )`\n        : theme.colors.brand[600];\n    }};\n  }\n`;\n\nexport const StyledRequiredMark = styled.span`\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-size: 6px;\n  margin-left: 2px;\n  position: absolute;\n  top: 5px;\n`;\n\nexport const ScreenReaderOnly = styled.div`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,QAAQ,sBAAsB,sBAAsB,UAAU;AAGvE,SAAS,iBAAiB;AAyCnB,MAAM,2BAA2B,OAAO;AAAA;AAAA,YAEnC,CAAC,EAAE,WAAW,MAAO,aAAa,QAAQ,KAAM;AAAA,SACnD,CAAC,EAAE,SAAS,WAAW,MAAM;AAClC,MAAI,WAAY,QAAO;AACvB,MAAI,YAAY,UAAU,aAAc,QAAO;AAC/C,SAAO;AACT,CAAC;AAAA;AAAA,gBAEa,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA,IAI3C,CAAC,EAAE,WAAW,MACd,aACI;AAAA;AAAA;AAAA,MAIA,EAAE;AAAA;AAGH,MAAM,uBAAuB,OAAO,IAAI,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,EAAE,OAAmC;AAAA,EAC7G,OAAO,EAAE,MAAM,OAAO,IAAI,UAAU,QAAQ,KAAK;AACnD,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQE,CAAC,EAAE,iBAAiB,EAAE,MAAM,MAAM,EAAE,MAAM;AAC1C,MAAI,SAAS;AACX,WAAO;AACT,MAAI;AACF,WAAO;AACT,MAAI,KAAM,QAAO;AACjB,SAAO;AACT,CAAC;AAAA;AAKI,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA,IAInC,CAAC,EAAE,kBAAkB,WAAW,MAAO,CAAC,oBAAoB,aAAa,KAAK,qBAAsB;AAAA,IACpG,CAAC,EAAE,OAAO,WAAW,MAAO,aAAa,4BAA4B,MAAM,OAAO,QAAQ,GAAG,CAAC,MAAM,EAAG;AAAA;AAGpG,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMlB,CAAC,EAAE,SAAS,WAAW,MAAM;AAC7C,MAAI,YAAY,UAAU,QAAS,QAAO;AAC1C,SAAO,aAAa,SAAS;AAC/B,CAAC;AAAA;AAAA;AAAA;AAAA,kBAIe,CAAC,EAAE,kBAAkB,WAAW,MAAM;AACpD,MAAI,iBAAkB,QAAO;AAC7B,MAAI,CAAC,oBAAoB,WAAY,QAAO;AAC5C,SAAO;AACT,CAAC;AAAA;AAAA,iBAEc,CAAC,EAAE,kBAAkB,WAAW,MAAM;AACnD,MAAI,iBAAkB,QAAO;AAC7B,MAAI,CAAC,oBAAoB,WAAY,QAAO;AAC5C,SAAO;AACT,CAAC;AAAA;AAAA,WAEQ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,IAC/C,qBAAqB,yCAAyC,CAAC;AAAA;AAAA,IAE/D,CAAC,EAAE,QAAQ,MAAO,YAAY,UAAU,SAAS,kBAAkB,eAAgB;AAAA;AAAA,IAEnF,CAAC,EAAE,OAAO,UAAU,SAAS,MAC7B,YAAY,CAAC,WACT;AAAA,0BACkB,MAAM,YAAY,QAAQ;AAAA,YACxC,qBAAqB,SAAS,CAAC;AAAA;AAAA;AAAA,cAG7B,qBAAqB,SAAS,CAAC;AAAA;AAAA;AAAA,YAIrC;AAAA;AAAA,OAED;AAAA;AAAA,IAEH,CAAC,EAAE,OAAO,SAAS,MACnB,WACI;AAAA,mBACW,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,YAGpC;AAAA;AAAA,iBAES,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,WAE7B;AAAA;AAAA,IAEP,CAAC,EAAE,MAAM,MAAM;AAAA;AAAA,eAEJ,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA,GAGrC;AAAA;AAAA,IAEC,CAAC,EAAE,OAAO,eAAe,QAAQ,MACjC,gBACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASgB,YAAY,UAAU,UAAU,SAAS,MAAM;AAAA,4BAC3C,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,iBAE7C,EAAE;AAAA;AAAA,IAEN,CAAC,EAAE,OAAO,YAAY,SAAS,SAAS,MACxC,CAAC,aACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAYkB,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,MAI3C,YAAY,UAAU,WAAW,WAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAcA,EACN;AAAA;AAAA;AAAA,MAII,EAAE;AAAA;AAAA;AAAA;AAAA,EAIR,CAAC,EAAE,OAAO,UAAU,UAAU,WAAW,MACvC,aACI;AAAA;AAAA,aAEK,WAAW,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,mBAC1D,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA,MAItC,OAAO,qBAAqB,yCAAyC,CAAC,CAAC;AAAA;AAAA;AAAA,qBAGxD,MAAM,YAAY,OAAO;AAAA,QACtC,qBAAqB,SAAS,CAAC;AAAA;AAAA;AAAA,MAIjC,WACI;AAAA,uBACa,MAAM,YAAY,OAAO;AAAA,UACtC,qBAAqB,SAAS,CAAC;AAAA,YAE/B,EACN;AAAA;AAAA,MAGE,YAAY,CAAC,WACT;AAAA,kBACQ,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,uBAElB,MAAM,YAAY,OAAO;AAAA;AAAA,qCAEX,MAAM,OAAO,MAAM,GAAG,CAAC,MAClD,EACN;AAAA;AAAA,MAGE,CAAC,WACG;AAAA;AAAA;AAAA;AAAA,mBAIS,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,YAC9B,qBAAqB,SAAS,CAAC;AAAA,aAEjC,EACN;AAAA;AAAA,QAGI,EAAE;AAAA;AAGH,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMpC,CAAC,EAAE,aAAa,MAAO,eAAe,qBAAqB,EAAG;AAAA;AAG3D,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhC,CAAC,EAAE,cAAc,WAAW,MAAO,gBAAgB,CAAC,aAAa,qBAAqB,EAAG;AAAA;AAAA,IAEzF,CAAC,EAAE,OAAO,YAAY,QAAQ,MAC9B,YAAY,UAAU,gBAAgB,CAAC,aACnC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kCAM0B,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,MAKnD,EAAE;AAAA;AAAA,IAEN,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,IAKf,CAAC,EAAE,OAAO,WAAW,MACrB,aACI;AAAA;AAAA,uBAEe,MAAM,OAAO,QAAQ,KAAK,CAAC,MAC1C,EAAE;AAAA;AAAA,IAEN,CAAC,EAAE,YAAY,iBAAiB,MAChC,aACI;AAAA,QAEA,CAAC,mBACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOA;AAAA;AAAA,UAEF,eAAe;AAAA;AAAA;AAAA,UAInB,KACE,EAAE;AAAA;AAAA,IAEN,wBAAwB;AAAA,MACtB,CAAC,EAAE,eAAe,MAAM;AAAA,eACf,eAAe,KAAK;AAAA,cACrB,eAAe,IAAI;AAAA,OAC1B;AAAA;AAAA;AAAA,IAGH,wBAAwB;AAAA,kBACV,CAAC,UAAU;AACvB,QAAM,EAAE,OAAO,gBAAgB,WAAW,IAAI;AAC9C,SAAO,CAAC,aACJ,gEAAgE,GAAG,MAAM,WAAW;AAAA,IAClF;AAAA,EACF,CAAC,UAAU,GAAG,MAAM,WAAW,EAAE,KAAK,CAAC,IAAI,eAAe,QAAQ,EAAE,mBAClE,eAAe,QAAQ,EACzB,mBAAmB,eAAe,KAAK,SACvC,MAAM,OAAO,MAAM,GAAG;AAC5B,CAAC;AAAA;AAAA;AAIE,MAAM,qBAAqB,OAAO;AAAA,WAC9B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/parts/tabBar/useTabBar.js

@@ -3,7 +3,7 @@ import { useCallback, useLayoutEffect, useState, useContext } from "react";
 import { useResizeObserver } from "./useResizeObserver.js";
 import { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from "../../utils/helpers.js";
 import { DSTabsContext } from "../../DSTabsCTX.js";
-import { defaultIndicatorStyles } from "../../utils/constants.js";
+import { DEFAULT_INDICATOR_STYLES } from "../../constants/index.js";
 const useTabBar = () => {
   const {
     actualActiveTab,
@@ -15,12 +15,12 @@ const useTabBar = () => {
     left: false,
     right: false
   });
-  const [indicatorStyle, setIndicatorStyle] = useState(defaultIndicatorStyles);
+  const [indicatorStyle, setIndicatorStyle] = useState(DEFAULT_INDICATOR_STYLES);
   const getIndicatorStyles = useCallback(() => {
     if (tabsListRef.current) {
       const tabList = tabsListRef.current;
       const activeTabButton = actualActiveTabRef.current;
-      if (!activeTabButton || !isElementVisible(activeTabButton, tabList)) return defaultIndicatorStyles;
+      if (!activeTabButton || !isElementVisible(activeTabButton, tabList)) return DEFAULT_INDICATOR_STYLES;
       const missingMargins = isDSMobile ? 0 : 16;
       const tabClientWidth = isDSMobile && !fixedTabsHeaders ? activeTabButton.clientWidth : activeTabButton.clientWidth + missingMargins * 2;
       const position = isDSMobile && !fixedTabsHeaders ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;
@@ -29,7 +29,7 @@ const useTabBar = () => {
         width: Math.round(tabClientWidth)
       };
     }
-    return defaultIndicatorStyles;
+    return DEFAULT_INDICATOR_STYLES;
   }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);
   const updateIndicatorStyle = useCallback(
     () => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/useTabBar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport { useCallback, useLayoutEffect, useState, useContext } from 'react';\nimport { useResizeObserver } from './useResizeObserver.js';\nimport { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from '../../utils/helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { defaultIndicatorStyles } from '../../utils/constants.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\n\ninterface UseTabBarReturnTypeT {\n  updateIndicatorStyle: () => void;\n  updateMobileGradients: () => void;\n  setIndicatorStyle: React.Dispatch<React.SetStateAction<DSTabsInternalsT.IndicatorStyleT>>;\n  indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n}\n\nexport const useTabBar = (): UseTabBarReturnTypeT => {\n  const {\n    actualActiveTab,\n    actualActiveTabRef,\n    tabsListRef,\n    props: { showSelectionIndicator, isDSMobile, fixedTabsHeaders },\n  } = useContext(DSTabsContext);\n\n  const [mobileGradients, setMobileGradients] = useState<DSTabsInternalsT.MobileGradientsT>({\n    left: false,\n    right: false,\n  });\n  const [indicatorStyle, setIndicatorStyle] = useState<DSTabsInternalsT.IndicatorStyleT>(defaultIndicatorStyles);\n\n  const getIndicatorStyles = useCallback(() => {\n    if (tabsListRef.current) {\n      const tabList = tabsListRef.current;\n      const activeTabButton = actualActiveTabRef.current;\n\n      if (!activeTabButton || !isElementVisible(activeTabButton, tabList)) return defaultIndicatorStyles;\n\n      // The missingMargins are to make the selection indicator white marks work properly in desktop, we need\n      // the full width of the tab button with margins.\n      const missingMargins = isDSMobile ? 0 : 16;\n\n      const tabClientWidth =\n        isDSMobile && !fixedTabsHeaders\n          ? activeTabButton.clientWidth\n          : activeTabButton.clientWidth + missingMargins * 2;\n\n      // The reason why we use the tabList.scrollLeft is due to the centerOnTabChange (only in Mobile and FlexibleTabs)\n      // behavior that adds scroll to the tabList\n      const position =\n        isDSMobile && !fixedTabsHeaders\n          ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft\n          : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;\n\n      return {\n        left: Math.round(position),\n        width: Math.round(tabClientWidth),\n      };\n    }\n    return defaultIndicatorStyles;\n  }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n  const updateIndicatorStyle = useCallback(\n    () => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100),\n    [getIndicatorStyles, setIndicatorStyle],\n  );\n\n  useResizeObserver(updateIndicatorStyle, tabsListRef.current);\n  useResizeObserver(updateIndicatorStyle, actualActiveTabRef.current);\n\n  const updateMobileGradients = 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  useLayoutEffect(() => {\n    if (showSelectionIndicator) {\n      updateIndicatorStyle();\n    }\n    if (isDSMobile && !fixedTabsHeaders) {\n      updateMobileGradients();\n    }\n  }, [\n    updateMobileGradients,\n    showSelectionIndicator,\n    updateIndicatorStyle,\n    isDSMobile,\n    fixedTabsHeaders,\n    actualActiveTab,\n  ]);\n\n  return {\n    updateIndicatorStyle,\n    setIndicatorStyle,\n    indicatorStyle,\n    mobileGradients,\n    updateMobileGradients,\n  };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,iBAAiB,UAAU,kBAAkB;AACnE,SAAS,yBAAyB;AAClC,SAAS,kBAAkB,wBAAwB,+BAA+B;AAClF,SAAS,qBAAqB;AAC9B,SAAS,8BAA8B;AAWhC,MAAM,YAAY,MAA4B;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,wBAAwB,YAAY,iBAAiB;AAAA,EAChE,IAAI,WAAW,aAAa;AAE5B,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAA4C;AAAA,IACxF,MAAM;AAAA,IACN,OAAO;AAAA,EACT,CAAC;AACD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAA2C,sBAAsB;AAE7G,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,YAAY,SAAS;AACvB,YAAM,UAAU,YAAY;AAC5B,YAAM,kBAAkB,mBAAmB;AAE3C,UAAI,CAAC,mBAAmB,CAAC,iBAAiB,iBAAiB,OAAO,EAAG,QAAO;AAI5E,YAAM,iBAAiB,aAAa,IAAI;AAExC,YAAM,iBACJ,cAAc,CAAC,mBACX,gBAAgB,cAChB,gBAAgB,cAAc,iBAAiB;AAIrD,YAAM,WACJ,cAAc,CAAC,mBACX,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO,QAAQ,aAC9F,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO;AAE5F,aAAO;AAAA,QACL,MAAM,KAAK,MAAM,QAAQ;AAAA,QACzB,OAAO,KAAK,MAAM,cAAc;AAAA,MAClC;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,kBAAkB,YAAY,WAAW,CAAC;AAElE,QAAM,uBAAuB;AAAA,IAC3B,MAAM,WAAW,MAAM,kBAAkB,mBAAmB,CAAC,GAAG,GAAG;AAAA,IACnE,CAAC,oBAAoB,iBAAiB;AAAA,EACxC;AAEA,oBAAkB,sBAAsB,YAAY,OAAO;AAC3D,oBAAkB,sBAAsB,mBAAmB,OAAO;AAElE,QAAM,wBAAwB,YAAY,MAAM;AAC9C,QAAI,YAAY,WAAW,cAAc,CAAC,kBAAkB;AAC1D,YAAM,EAAE,YAAY,aAAa,YAAY,IAAI,YAAY;AAC7D,yBAAmB;AAAA,QACjB,MAAM,uBAAuB,UAAU;AAAA,QACvC,OAAO,wBAAwB,YAAY,aAAa,WAAW;AAAA,MACrE,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,kBAAkB,YAAY,WAAW,CAAC;AAE9C,kBAAgB,MAAM;AACpB,QAAI,wBAAwB;AAC1B,2BAAqB;AAAA,IACvB;AACA,QAAI,cAAc,CAAC,kBAAkB;AACnC,4BAAsB;AAAA,IACxB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;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", "/* eslint-disable max-statements */\nimport { useCallback, useLayoutEffect, useState, useContext } from 'react';\nimport { useResizeObserver } from './useResizeObserver.js';\nimport { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from '../../utils/helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { DEFAULT_INDICATOR_STYLES } from '../../constants/index.js';\n\ninterface UseTabBarReturnTypeT {\n  updateIndicatorStyle: () => void;\n  updateMobileGradients: () => void;\n  setIndicatorStyle: React.Dispatch<React.SetStateAction<DSTabsInternalsT.IndicatorStyleT>>;\n  indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n}\n\nexport const useTabBar = (): UseTabBarReturnTypeT => {\n  const {\n    actualActiveTab,\n    actualActiveTabRef,\n    tabsListRef,\n    props: { showSelectionIndicator, isDSMobile, fixedTabsHeaders },\n  } = useContext(DSTabsContext);\n\n  const [mobileGradients, setMobileGradients] = useState<DSTabsInternalsT.MobileGradientsT>({\n    left: false,\n    right: false,\n  });\n  const [indicatorStyle, setIndicatorStyle] = useState<DSTabsInternalsT.IndicatorStyleT>(DEFAULT_INDICATOR_STYLES);\n\n  const getIndicatorStyles = useCallback(() => {\n    if (tabsListRef.current) {\n      const tabList = tabsListRef.current;\n      const activeTabButton = actualActiveTabRef.current;\n\n      if (!activeTabButton || !isElementVisible(activeTabButton, tabList)) return DEFAULT_INDICATOR_STYLES;\n\n      // The missingMargins are to make the selection indicator white marks work properly in desktop, we need\n      // the full width of the tab button with margins.\n      const missingMargins = isDSMobile ? 0 : 16;\n\n      const tabClientWidth =\n        isDSMobile && !fixedTabsHeaders\n          ? activeTabButton.clientWidth\n          : activeTabButton.clientWidth + missingMargins * 2;\n\n      // The reason why we use the tabList.scrollLeft is due to the centerOnTabChange (only in Mobile and FlexibleTabs)\n      // behavior that adds scroll to the tabList\n      const position =\n        isDSMobile && !fixedTabsHeaders\n          ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft\n          : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;\n\n      return {\n        left: Math.round(position),\n        width: Math.round(tabClientWidth),\n      };\n    }\n    return DEFAULT_INDICATOR_STYLES;\n  }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Updates indicator style with a delay. It:\n   * 1. Uses setTimeout to delay style updates\n   * 2. Called on resize and tab changes\n   */\n  const updateIndicatorStyle = useCallback(\n    () => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100),\n    [getIndicatorStyles, setIndicatorStyle],\n  );\n\n  useResizeObserver(updateIndicatorStyle, tabsListRef.current);\n  useResizeObserver(updateIndicatorStyle, actualActiveTabRef.current);\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 = 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  useLayoutEffect(() => {\n    if (showSelectionIndicator) {\n      updateIndicatorStyle();\n    }\n    if (isDSMobile && !fixedTabsHeaders) {\n      updateMobileGradients();\n    }\n  }, [\n    updateMobileGradients,\n    showSelectionIndicator,\n    updateIndicatorStyle,\n    isDSMobile,\n    fixedTabsHeaders,\n    actualActiveTab,\n  ]);\n\n  return {\n    updateIndicatorStyle,\n    setIndicatorStyle,\n    indicatorStyle,\n    mobileGradients,\n    updateMobileGradients,\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,iBAAiB,UAAU,kBAAkB;AACnE,SAAS,yBAAyB;AAClC,SAAS,kBAAkB,wBAAwB,+BAA+B;AAClF,SAAS,qBAAqB;AAG9B,SAAS,gCAAgC;AAUlC,MAAM,YAAY,MAA4B;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,wBAAwB,YAAY,iBAAiB;AAAA,EAChE,IAAI,WAAW,aAAa;AAE5B,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAA4C;AAAA,IACxF,MAAM;AAAA,IACN,OAAO;AAAA,EACT,CAAC;AACD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAA2C,wBAAwB;AAE/G,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,YAAY,SAAS;AACvB,YAAM,UAAU,YAAY;AAC5B,YAAM,kBAAkB,mBAAmB;AAE3C,UAAI,CAAC,mBAAmB,CAAC,iBAAiB,iBAAiB,OAAO,EAAG,QAAO;AAI5E,YAAM,iBAAiB,aAAa,IAAI;AAExC,YAAM,iBACJ,cAAc,CAAC,mBACX,gBAAgB,cAChB,gBAAgB,cAAc,iBAAiB;AAIrD,YAAM,WACJ,cAAc,CAAC,mBACX,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO,QAAQ,aAC9F,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO;AAE5F,aAAO;AAAA,QACL,MAAM,KAAK,MAAM,QAAQ;AAAA,QACzB,OAAO,KAAK,MAAM,cAAc;AAAA,MAClC;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,kBAAkB,YAAY,WAAW,CAAC;AAOlE,QAAM,uBAAuB;AAAA,IAC3B,MAAM,WAAW,MAAM,kBAAkB,mBAAmB,CAAC,GAAG,GAAG;AAAA,IACnE,CAAC,oBAAoB,iBAAiB;AAAA,EACxC;AAEA,oBAAkB,sBAAsB,YAAY,OAAO;AAC3D,oBAAkB,sBAAsB,mBAAmB,OAAO;AAOlE,QAAM,wBAAwB,YAAY,MAAM;AAC9C,QAAI,YAAY,WAAW,cAAc,CAAC,kBAAkB;AAC1D,YAAM,EAAE,YAAY,aAAa,YAAY,IAAI,YAAY;AAC7D,yBAAmB;AAAA,QACjB,MAAM,uBAAuB,UAAU;AAAA,QACvC,OAAO,wBAAwB,YAAY,aAAa,WAAW;AAAA,MACrE,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,kBAAkB,YAAY,WAAW,CAAC;AAE9C,kBAAgB,MAAM;AACpB,QAAI,wBAAwB;AAC1B,2BAAqB;AAAA,IACvB;AACA,QAAI,cAAc,CAAC,kBAAkB;AACnC,4BAAsB;AAAA,IACxB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/parts/tabsContent/TabsContent.js

@@ -6,7 +6,7 @@ import { TabsPanels } from "../tabsPanel/TabsPanels.js";
 import { TabBar } from "../tabBar/TabBar.js";
 import { StyledTabBarContainer } from "./styles.js";
 import { DSTabsContext } from "../../DSTabsCTX.js";
-import { DSTabsDatatestid } from "../../DSTabsDatatestid.js";
+import { TABS_DATA_TESTID } from "../../constants/index.js";
 const TabsContent = () => {
   const {
     props,
@@ -21,7 +21,7 @@ const TabsContent = () => {
       ...xstyledProps,
       ...containerProps,
       ref: innerRef,
-      "data-testid": DSTabsDatatestid.TABS_CONTAINER,
+      "data-testid": TABS_DATA_TESTID.TABS_CONTAINER,
       children: [
         /* @__PURE__ */ jsxs(StyledTabBarContainer, { "aria-label": tabsListAriaLabel, children: [
           /* @__PURE__ */ jsx(TabBar, {}),

package/dist/esm/parts/tabsContent/TabsContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsContent/TabsContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { TabsPanels } from '../tabsPanel/TabsPanels.js';\nimport { TabBar } from '../tabBar/TabBar.js';\nimport { StyledTabBarContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\n\nexport const TabsContent = (): JSX.Element => {\n  const {\n    props,\n    props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent },\n  } = useContext(DSTabsContext);\n\n  const globalProps = useGetGlobalAttributes(props);\n  const xstyledProps = useGetXstyledProps(props);\n\n  return (\n    <div\n      {...globalProps}\n      {...xstyledProps}\n      {...containerProps}\n      ref={innerRef}\n      data-testid={DSTabsDatatestid.TABS_CONTAINER}\n    >\n      <StyledTabBarContainer aria-label={tabsListAriaLabel}>\n        <TabBar />\n        {TabBarExtraContent ? <TabBarExtraContent /> : null}\n        {tabBarExtraContent || null}\n      </StyledTabBarContainer>\n      <TabsPanels />\n    </div>\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { TabsPanels } from '../tabsPanel/TabsPanels.js';\nimport { TabBar } from '../tabBar/TabBar.js';\nimport { StyledTabBarContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { TABS_DATA_TESTID } from '../../constants/index.js';\n\nexport const TabsContent = (): JSX.Element => {\n  const {\n    props,\n    props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent },\n  } = useContext(DSTabsContext);\n\n  const globalProps = useGetGlobalAttributes(props);\n  const xstyledProps = useGetXstyledProps(props);\n\n  return (\n    <div\n      {...globalProps}\n      {...xstyledProps}\n      {...containerProps}\n      ref={innerRef}\n      data-testid={TABS_DATA_TESTID.TABS_CONTAINER}\n    >\n      <StyledTabBarContainer aria-label={tabsListAriaLabel}>\n        <TabBar />\n        {TabBarExtraContent ? <TabBarExtraContent /> : null}\n        {tabBarExtraContent || null}\n      </StyledTabBarContainer>\n      <TabsPanels />\n    </div>\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACyBjB,SACE,KADF;AAzBN,SAAgB,kBAAkB;AAClC,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,oBAAoB,mBAAmB;AAAA,EAC/F,IAAI,WAAW,aAAa;AAE5B,QAAM,cAAc,uBAAuB,KAAK;AAChD,QAAM,eAAe,mBAAmB,KAAK;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAa,iBAAiB;AAAA,MAE9B;AAAA,6BAAC,yBAAsB,cAAY,mBACjC;AAAA,8BAAC,UAAO;AAAA,UACP,qBAAqB,oBAAC,sBAAmB,IAAK;AAAA,UAC9C,sBAAsB;AAAA,WACzB;AAAA,QACA,oBAAC,cAAW;AAAA;AAAA;AAAA,EACd;AAEJ;",
   "names": []
 }