@elliemae/ds-tabs 3.52.0-rc.9 → 3.52.0

package/dist/cjs/DSTabs.js

@@ -41,18 +41,18 @@ var import_DSTabsCTX = require("./DSTabsCTX.js");
 var import_TabsContent = require("./parts/tabsContent/TabsContent.js");
 var import_useTabs = require("./config/useTabs.js");
 var import_useCrossRef = require("./config/useCrossRef.js");
-var import_constants = require("./utils/constants.js");
+var import_constants = require("./constants/index.js");
 const DSTabs = (props) => {
   const ctx = (0, import_useTabs.useTabs)(props);
   const crossRefsCtx = (0, import_useCrossRef.useCrossRef)();
   const { type } = props;
-  if (type === import_constants.TabTypes.SUBTABS) {
+  if (type === import_constants.TAB_TYPES.SUBTABS) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSTabsCTX.DSTabsContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabsContent.TabsContent, {}) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSTabsCTX.DSTabsCrossRefContext.Provider, { value: crossRefsCtx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSTabsCTX.DSTabsContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabsContent.TabsContent, {}) }) });
 };
 DSTabs.displayName = "DSTabs";
 const DSTabsWithSchema = (0, import_ds_props_helpers.describe)(DSTabs);
-DSTabsWithSchema.propTypes = import_react_desc_prop_types.tabsPropTypes;
+DSTabsWithSchema.propTypes = import_react_desc_prop_types.DSTabsPropTypes;
 var DSTabs_default = DSTabs;
 //# sourceMappingURL=DSTabs.js.map

package/dist/cjs/DSTabs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSTabs.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { tabsPropTypes } from './react-desc-prop-types.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from './DSTabsCTX.js';\nimport { TabsContent } from './parts/tabsContent/TabsContent.js';\nimport { useTabs } from './config/useTabs.js';\nimport { useCrossRef } from './config/useCrossRef.js';\nimport { TabTypes } from './utils/constants.js';\nimport type { DSTabsT } from './react-desc-prop-types.js';\n\nconst DSTabs = (props: DSTabsT.Props): JSX.Element => {\n  const ctx = useTabs(props);\n  const crossRefsCtx = useCrossRef();\n\n  const { type } = props;\n\n  if (type === TabTypes.SUBTABS) {\n    return (\n      <DSTabsContext.Provider value={ctx}>\n        <TabsContent />\n      </DSTabsContext.Provider>\n    );\n  }\n\n  return (\n    <DSTabsCrossRefContext.Provider value={crossRefsCtx}>\n      <DSTabsContext.Provider value={ctx}>\n        <TabsContent />\n      </DSTabsContext.Provider>\n    </DSTabsCrossRefContext.Provider>\n  );\n};\n\nDSTabs.displayName = 'DSTabs';\nconst DSTabsWithSchema = describe(DSTabs);\nDSTabsWithSchema.propTypes = tabsPropTypes as unknown as ValidationMap<DSTabsT.Props>;\n\nexport { DSTabs, DSTabsWithSchema };\nexport default DSTabs;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBf;AAlBR,8BAA6C;AAC7C,mCAA8B;AAC9B,uBAAqD;AACrD,yBAA4B;AAC5B,qBAAwB;AACxB,yBAA4B;AAC5B,uBAAyB;AAGzB,MAAM,SAAS,CAAC,UAAsC;AACpD,QAAM,UAAM,wBAAQ,KAAK;AACzB,QAAM,mBAAe,gCAAY;AAEjC,QAAM,EAAE,KAAK,IAAI;AAEjB,MAAI,SAAS,0BAAS,SAAS;AAC7B,WACE,4CAAC,+BAAc,UAAd,EAAuB,OAAO,KAC7B,sDAAC,kCAAY,GACf;AAAA,EAEJ;AAEA,SACE,4CAAC,uCAAsB,UAAtB,EAA+B,OAAO,cACrC,sDAAC,+BAAc,UAAd,EAAuB,OAAO,KAC7B,sDAAC,kCAAY,GACf,GACF;AAEJ;AAEA,OAAO,cAAc;AACrB,MAAM,uBAAmB,kCAAS,MAAM;AACxC,iBAAiB,YAAY;AAG7B,IAAO,iBAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport { describe, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { DSTabsPropTypes } from './react-desc-prop-types.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from './DSTabsCTX.js';\nimport { TabsContent } from './parts/tabsContent/TabsContent.js';\nimport { useTabs } from './config/useTabs.js';\nimport { useCrossRef } from './config/useCrossRef.js';\n\nimport type { DSTabsT } from './react-desc-prop-types.js';\nimport { TAB_TYPES } from './constants/index.js';\n\nconst DSTabs = (props: DSTabsT.Props): JSX.Element => {\n  const ctx = useTabs(props);\n  const crossRefsCtx = useCrossRef();\n\n  const { type } = props;\n\n  if (type === TAB_TYPES.SUBTABS) {\n    return (\n      <DSTabsContext.Provider value={ctx}>\n        <TabsContent />\n      </DSTabsContext.Provider>\n    );\n  }\n\n  return (\n    <DSTabsCrossRefContext.Provider value={crossRefsCtx}>\n      <DSTabsContext.Provider value={ctx}>\n        <TabsContent />\n      </DSTabsContext.Provider>\n    </DSTabsCrossRefContext.Provider>\n  );\n};\n\nDSTabs.displayName = 'DSTabs';\nconst DSTabsWithSchema = describe(DSTabs);\nDSTabsWithSchema.propTypes = DSTabsPropTypes as unknown as ValidationMap<DSTabsT.Props>;\n\nexport { DSTabs, DSTabsWithSchema };\nexport default DSTabs;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBf;AAnBR,8BAA6C;AAC7C,mCAAgC;AAChC,uBAAqD;AACrD,yBAA4B;AAC5B,qBAAwB;AACxB,yBAA4B;AAG5B,uBAA0B;AAE1B,MAAM,SAAS,CAAC,UAAsC;AACpD,QAAM,UAAM,wBAAQ,KAAK;AACzB,QAAM,mBAAe,gCAAY;AAEjC,QAAM,EAAE,KAAK,IAAI;AAEjB,MAAI,SAAS,2BAAU,SAAS;AAC9B,WACE,4CAAC,+BAAc,UAAd,EAAuB,OAAO,KAC7B,sDAAC,kCAAY,GACf;AAAA,EAEJ;AAEA,SACE,4CAAC,uCAAsB,UAAtB,EAA+B,OAAO,cACrC,sDAAC,+BAAc,UAAd,EAAuB,OAAO,KAC7B,sDAAC,kCAAY,GACf,GACF;AAEJ;AAEA,OAAO,cAAc;AACrB,MAAM,uBAAmB,kCAAS,MAAM;AACxC,iBAAiB,YAAY;AAG7B,IAAO,iBAAQ;",
   "names": []
 }

package/dist/cjs/DSTabsCTX.js

@@ -38,7 +38,7 @@ var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 const noop = () => {
 };
 const defaultContext = {
-  props: import_react_desc_prop_types.tabsDefaultProps,
+  props: import_react_desc_prop_types.DSTabsDefaultProps,
   tabsRef: (0, import_react.createRef)(),
   tabsListRef: (0, import_react.createRef)(),
   carouselOnlyListRef: (0, import_react.createRef)(),

package/dist/cjs/DSTabsCTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSTabsCTX.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { createContext, createRef } from 'react';\nimport { tabsDefaultProps as defaultProps } from './react-desc-prop-types.js';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nconst defaultContext = {\n  props: defaultProps,\n  tabsRef: createRef<Record<number, HTMLButtonElement> | null>(),\n  tabsListRef: createRef<HTMLDivElement | null>(),\n  carouselOnlyListRef: createRef<HTMLDivElement | null>(),\n  focusableTabsRef: createRef<HTMLButtonElement[] | null>(),\n  tabsRefAsArray: createRef<HTMLButtonElement[] | null>(),\n  actualActiveTabRef: createRef<HTMLButtonElement | null>(),\n  setInternalActiveTab: noop,\n  actualActiveTab: '',\n};\n\nconst defaultCrossRefsContext = {\n  lastTabInternalRef: createRef<HTMLButtonElement | null>(),\n  firstSubtabInternalRef: createRef<HTMLButtonElement | null>(),\n};\n\nexport const DSTabsContext = createContext<DSTabsInternalsT.DSTabsUseTabsContextT>(defaultContext);\nexport const DSTabsCrossRefContext = createContext<DSTabsInternalsT.DSTabsUseCrossRefContextT>(defaultCrossRefsContext);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AACzC,mCAAiD;AAIjD,MAAM,OAAO,MAAM;AAAC;AAEpB,MAAM,iBAAiB;AAAA,EACrB,OAAO,6BAAAA;AAAA,EACP,aAAS,wBAAoD;AAAA,EAC7D,iBAAa,wBAAiC;AAAA,EAC9C,yBAAqB,wBAAiC;AAAA,EACtD,sBAAkB,wBAAsC;AAAA,EACxD,oBAAgB,wBAAsC;AAAA,EACtD,wBAAoB,wBAAoC;AAAA,EACxD,sBAAsB;AAAA,EACtB,iBAAiB;AACnB;AAEA,MAAM,0BAA0B;AAAA,EAC9B,wBAAoB,wBAAoC;AAAA,EACxD,4BAAwB,wBAAoC;AAC9D;AAEO,MAAM,oBAAgB,4BAAsD,cAAc;AAC1F,MAAM,4BAAwB,4BAA0D,uBAAuB;",
+  "sourcesContent": ["import { createContext, createRef } from 'react';\nimport { DSTabsDefaultProps as defaultProps } from './react-desc-prop-types.js';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nconst defaultContext = {\n  props: defaultProps,\n  tabsRef: createRef<Record<number, HTMLButtonElement> | null>(),\n  tabsListRef: createRef<HTMLDivElement | null>(),\n  carouselOnlyListRef: createRef<HTMLDivElement | null>(),\n  focusableTabsRef: createRef<HTMLButtonElement[] | null>(),\n  tabsRefAsArray: createRef<HTMLButtonElement[] | null>(),\n  actualActiveTabRef: createRef<HTMLButtonElement | null>(),\n  setInternalActiveTab: noop,\n  actualActiveTab: '',\n};\n\nconst defaultCrossRefsContext = {\n  lastTabInternalRef: createRef<HTMLButtonElement | null>(),\n  firstSubtabInternalRef: createRef<HTMLButtonElement | null>(),\n};\n\nexport const DSTabsContext = createContext<DSTabsInternalsT.DSTabsUseTabsContextT>(defaultContext);\nexport const DSTabsCrossRefContext = createContext<DSTabsInternalsT.DSTabsUseCrossRefContextT>(defaultCrossRefsContext);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AACzC,mCAAmD;AAInD,MAAM,OAAO,MAAM;AAAC;AAEpB,MAAM,iBAAiB;AAAA,EACrB,OAAO,6BAAAA;AAAA,EACP,aAAS,wBAAoD;AAAA,EAC7D,iBAAa,wBAAiC;AAAA,EAC9C,yBAAqB,wBAAiC;AAAA,EACtD,sBAAkB,wBAAsC;AAAA,EACxD,oBAAgB,wBAAsC;AAAA,EACtD,wBAAoB,wBAAoC;AAAA,EACxD,sBAAsB;AAAA,EACtB,iBAAiB;AACnB;AAEA,MAAM,0BAA0B;AAAA,EAC9B,wBAAoB,wBAAoC;AAAA,EACxD,4BAAwB,wBAAoC;AAC9D;AAEO,MAAM,oBAAgB,4BAAsD,cAAc;AAC1F,MAAM,4BAAwB,4BAA0D,uBAAuB;",
   "names": ["defaultProps"]
 }

package/dist/cjs/config/useTabs.js

@@ -36,7 +36,7 @@ var import_react = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react_desc_prop_types = require("../react-desc-prop-types.js");
 const useTabs = (props) => {
-  const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.tabsDefaultProps);
+  const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.DSTabsDefaultProps);
   const { activeTab, children } = propsWithDefaults;
   const tabsRef = (0, import_react.useRef)({});
   const tabsRefAsArray = (0, import_react.useRef)([]);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useTabs.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useRef, useState, useMemo, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { tabsDefaultProps } from '../react-desc-prop-types.js';\nimport type { DSTabsT, DSTabT } from '../react-desc-prop-types.js';\nimport type { DSTabsInternalsT } from '../sharedTypes.js';\n\nexport const useTabs = (props: DSTabsT.Props): DSTabsInternalsT.DSTabsUseTabsContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSTabsT.InternalProps>(props, tabsDefaultProps);\n\n  const { activeTab, children } = 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 ctx = useMemo(\n    () => ({\n      props: propsWithDefaults,\n      tabsRef,\n      focusableTabsRef,\n      tabsListRef,\n      tabsRefAsArray,\n      setInternalActiveTab,\n      actualActiveTab,\n      actualActiveTabRef,\n      carouselOnlyListRef,\n    }),\n    [actualActiveTab, propsWithDefaults],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA4D;AAC5D,8BAA6C;AAC7C,mCAAiC;AAI1B,MAAM,UAAU,CAAC,UAAiE;AACvF,QAAM,wBAAoB,sDAAoD,OAAO,6CAAgB;AAErG,QAAM,EAAE,WAAW,SAAS,IAAI;AAEhC,QAAM,cAAU,qBAA0C,CAAC,CAAC;AAC5D,QAAM,qBAAiB,qBAA4B,CAAC,CAAC;AACrD,QAAM,uBAAmB,qBAA4B,CAAC,CAAC;AACvD,QAAM,0BAAsB,qBAA8B,IAAI;AAC9D,QAAM,kBAAc,qBAA8B,IAAI;AACtD,QAAM,yBAAqB,qBAAiC,IAAI;AAGhE,QAAM,0BAAsB,sBAAQ,MAAM;AACxC,UAAM,gBAAgB,aAAAA,QAAM,SAAS,QAAQ,QAAQ;AACrD,UAAM,oBAAoB,cAAc,OAAO,CAAC,QAAQ,IAAI,MAAM,aAAa,IAAI,EAAE,CAAC;AAEtF,QAAI,sBAAsB,KAAM,QAAO;AACvC,WAAO,kBAAkB,MAAM,SAAS;AAAA,EAC1C,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,uBAAiB,mBAAmB;AAEtF,QAAM,sBAAkB,sBAAQ,MAAM;AACpC,QAAI,cAAc,OAAW,QAAO;AACpC,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,iBAAiB,CAAC;AAEjC,8BAAU,MAAM;AACd,uBAAmB,UAAU,iBAAiB,QAAQ,KAAK,CAAC,OAAO,GAAG,QAAQ,UAAU,eAAe,KAAK;AAAA,EAC9G,GAAG,CAAC,eAAe,CAAC;AAEpB,8BAAU,MAAM;AACd,QAAI,cAAc,QAAW;AAC3B,YAAM,oBAAoB,iBAAiB,QAAQ,KAAK,CAAC,OAAO,GAAG,iBAAiB,MAAM;AAC1F,2BAAqB,mBAAmB,QAAQ,SAAS,EAAE;AAAA,IAC7D;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,iBAAiB;AAAA,EACrC;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import 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';\n\nexport const useTabs = (props: DSTabsT.Props): DSTabsInternalsT.DSTabsUseTabsContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSTabsT.InternalProps>(props, DSTabsDefaultProps);\n\n  const { activeTab, children } = 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 ctx = useMemo(\n    () => ({\n      props: propsWithDefaults,\n      tabsRef,\n      focusableTabsRef,\n      tabsListRef,\n      tabsRefAsArray,\n      setInternalActiveTab,\n      actualActiveTab,\n      actualActiveTabRef,\n      carouselOnlyListRef,\n    }),\n    [actualActiveTab, propsWithDefaults],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA4D;AAC5D,8BAA6C;AAC7C,mCAAmC;AAI5B,MAAM,UAAU,CAAC,UAAiE;AACvF,QAAM,wBAAoB,sDAAoD,OAAO,+CAAkB;AAEvG,QAAM,EAAE,WAAW,SAAS,IAAI;AAEhC,QAAM,cAAU,qBAA0C,CAAC,CAAC;AAC5D,QAAM,qBAAiB,qBAA4B,CAAC,CAAC;AACrD,QAAM,uBAAmB,qBAA4B,CAAC,CAAC;AACvD,QAAM,0BAAsB,qBAA8B,IAAI;AAC9D,QAAM,kBAAc,qBAA8B,IAAI;AACtD,QAAM,yBAAqB,qBAAiC,IAAI;AAGhE,QAAM,0BAAsB,sBAAQ,MAAM;AACxC,UAAM,gBAAgB,aAAAA,QAAM,SAAS,QAAQ,QAAQ;AACrD,UAAM,oBAAoB,cAAc,OAAO,CAAC,QAAQ,IAAI,MAAM,aAAa,IAAI,EAAE,CAAC;AAEtF,QAAI,sBAAsB,KAAM,QAAO;AACvC,WAAO,kBAAkB,MAAM,SAAS;AAAA,EAC1C,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,uBAAiB,mBAAmB;AAEtF,QAAM,sBAAkB,sBAAQ,MAAM;AACpC,QAAI,cAAc,OAAW,QAAO;AACpC,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,iBAAiB,CAAC;AAEjC,8BAAU,MAAM;AACd,uBAAmB,UAAU,iBAAiB,QAAQ,KAAK,CAAC,OAAO,GAAG,QAAQ,UAAU,eAAe,KAAK;AAAA,EAC9G,GAAG,CAAC,eAAe,CAAC;AAEpB,8BAAU,MAAM;AACd,QAAI,cAAc,QAAW;AAC3B,YAAM,oBAAoB,iBAAiB,QAAQ,KAAK,CAAC,OAAO,GAAG,iBAAiB,MAAM;AAC1F,2BAAqB,mBAAmB,QAAQ,SAAS,EAAE;AAAA,IAC7D;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,iBAAiB;AAAA,EACrC;AAEA,SAAO;AACT;",
   "names": ["React"]
 }

package/dist/cjs/{utils/constants.js → constants/index.js}

@@ -28,29 +28,56 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var constants_exports = {};
 __export(constants_exports, {
+  DEFAULT_INDICATOR_STYLES: () => DEFAULT_INDICATOR_STYLES,
+  DSTabsName: () => DSTabsName,
+  GRADIENT_OFFSETS_ACCORDING_TYPE: () => GRADIENT_OFFSETS_ACCORDING_TYPE,
   MOBILE_GRADIENT_WIDTH: () => MOBILE_GRADIENT_WIDTH,
-  TabTypes: () => TabTypes,
-  TabTypesValuesAsArray: () => TabTypesValuesAsArray,
-  defaultIndicatorStyles: () => defaultIndicatorStyles,
-  gradientOffsetsAccordingType: () => gradientOffsetsAccordingType
+  TABS_DATA_TESTID: () => TABS_DATA_TESTID,
+  TABS_SLOTS: () => TABS_SLOTS,
+  TAB_TYPES: () => TAB_TYPES,
+  TAB_TYPES_VALUES_AS_ARRAY: () => TAB_TYPES_VALUES_AS_ARRAY
 });
 module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
-const TabTypes = {
+var import_ds_system = require("@elliemae/ds-system");
+const DSTabsName = "DSTabs";
+const TAB_TYPES = {
   NORMAL: "normal",
   NORMAL_SMALL: "normal_small",
   SUBTABS: "subtabs"
 };
-const TabTypesValuesAsArray = Object.values(TabTypes);
+const TAB_TYPES_VALUES_AS_ARRAY = Object.values(TAB_TYPES);
 const MOBILE_GRADIENT_WIDTH = 24;
-const defaultIndicatorStyles = {
+const DEFAULT_INDICATOR_STYLES = {
   left: 0,
   width: 0
 };
-const gradientOffsetsAccordingType = {
-  normal_small: 14,
-  normal: 16,
-  subtabs: 16,
-  fixedTabsHeaders: 0
+const GRADIENT_OFFSETS_ACCORDING_TYPE = {
+  NORMAL_SMALL: 14,
+  NORMAL: 16,
+  SUBTABS: 16,
+  FIXED_TABS_HEADERS: 0
 };
-//# sourceMappingURL=constants.js.map
+const TABS_SLOTS = {
+  ROOT: "root",
+  TABS_CONTAINER: "container",
+  TAB_BUTTON: "tab-button",
+  SUBTAB_BUTTON: "subtab-button",
+  TAB_PANEL: "tab-panel",
+  SUB_TAB_LIST: "subtabs-list",
+  TAB_LIST: "tab-list",
+  CAROUSEL_BUTTON_RIGHT: "chevron-right",
+  CAROUSEL_BUTTON_LEFT: "chevron-left"
+};
+const TABS_DATA_TESTID = {
+  ...(0, import_ds_system.slotObjectToDataTestIds)(DSTabsName, TABS_SLOTS),
+  SUB_TAB_LIST: "subtabs-list",
+  TAB_LIST: "tab-list",
+  CAROUSEL_BUTTON_RIGHT: "chevron-right",
+  CAROUSEL_BUTTON_LEFT: "chevron-left",
+  CAROUSEL: {
+    BUTTON_RIGHT: "chevron-right",
+    BUTTON_LEFT: "chevron-left"
+  }
+};
+//# sourceMappingURL=index.js.map

package/dist/cjs/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSTabsName = 'DSTabs';\n\nexport const TAB_TYPES = {\n  NORMAL: 'normal' as const,\n  NORMAL_SMALL: 'normal_small' as const,\n  SUBTABS: 'subtabs' as const,\n};\n\nexport const TAB_TYPES_VALUES_AS_ARRAY = Object.values(TAB_TYPES);\n\nexport const MOBILE_GRADIENT_WIDTH = 24;\n\nexport const DEFAULT_INDICATOR_STYLES = {\n  left: 0,\n  width: 0,\n};\n\nexport const GRADIENT_OFFSETS_ACCORDING_TYPE = {\n  NORMAL_SMALL: 14,\n  NORMAL: 16,\n  SUBTABS: 16,\n  FIXED_TABS_HEADERS: 0,\n};\n\nexport const TABS_SLOTS = {\n  ROOT: 'root',\n  TABS_CONTAINER: 'container',\n  TAB_BUTTON: 'tab-button',\n  SUBTAB_BUTTON: 'subtab-button',\n  TAB_PANEL: 'tab-panel',\n  SUB_TAB_LIST: 'subtabs-list',\n  TAB_LIST: 'tab-list',\n  CAROUSEL_BUTTON_RIGHT: 'chevron-right',\n  CAROUSEL_BUTTON_LEFT: 'chevron-left',\n} as const;\n\nexport const TABS_DATA_TESTID = {\n  ...(slotObjectToDataTestIds(DSTabsName, TABS_SLOTS) as Record<keyof typeof TABS_SLOTS, string>),\n  SUB_TAB_LIST: 'subtabs-list',\n  TAB_LIST: 'tab-list',\n  CAROUSEL_BUTTON_RIGHT: 'chevron-right',\n  CAROUSEL_BUTTON_LEFT: 'chevron-left',\n  CAROUSEL: {\n    BUTTON_RIGHT: 'chevron-right',\n    BUTTON_LEFT: 'chevron-left',\n  },\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,aAAa;AAEnB,MAAM,YAAY;AAAA,EACvB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,SAAS;AACX;AAEO,MAAM,4BAA4B,OAAO,OAAO,SAAS;AAEzD,MAAM,wBAAwB;AAE9B,MAAM,2BAA2B;AAAA,EACtC,MAAM;AAAA,EACN,OAAO;AACT;AAEO,MAAM,kCAAkC;AAAA,EAC7C,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,oBAAoB;AACtB;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,WAAW;AAAA,EACX,cAAc;AAAA,EACd,UAAU;AAAA,EACV,uBAAuB;AAAA,EACvB,sBAAsB;AACxB;AAEO,MAAM,mBAAmB;AAAA,EAC9B,OAAI,0CAAwB,YAAY,UAAU;AAAA,EAClD,cAAc;AAAA,EACd,UAAU;AAAA,EACV,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,UAAU;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,EACf;AACF;",
+  "names": []
+}

package/dist/cjs/exported-related/DSTab.js

@@ -39,6 +39,6 @@ var import_react_desc_prop_types = require("../react-desc-prop-types.js");
 const DSTab = (props) => props.children;
 DSTab.displayName = "DSTab";
 const DSTabWithSchema = (0, import_ds_props_helpers.describe)(DSTab);
-DSTabWithSchema.propTypes = import_react_desc_prop_types.tabPropTypes;
+DSTabWithSchema.propTypes = import_react_desc_prop_types.DSTabPropTypes;
 var DSTab_default = DSTab;
 //# sourceMappingURL=DSTab.js.map

package/dist/cjs/exported-related/DSTab.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/exported-related/DSTab.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { describe, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { tabPropTypes } from '../react-desc-prop-types.js';\nimport type { DSTabT } from '../react-desc-prop-types.js';\n\n// const DSTab = (props: DSTabT.Props): JSX.Element => <React.Fragment {...props} />;\nconst DSTab = (props: DSTabT.Props) => props.children;\n\nDSTab.displayName = 'DSTab';\nconst DSTabWithSchema = describe(DSTab);\nDSTabWithSchema.propTypes = tabPropTypes as unknown as ValidationMap<DSTabT.Props>;\n\nexport { DSTab, DSTabWithSchema };\nexport default DSTab;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA6C;AAC7C,mCAA6B;AAI7B,MAAM,QAAQ,CAAC,UAAwB,MAAM;AAE7C,MAAM,cAAc;AACpB,MAAM,sBAAkB,kCAAS,KAAK;AACtC,gBAAgB,YAAY;AAG5B,IAAO,gBAAQ;",
+  "sourcesContent": ["import { describe, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { DSTabPropTypes } from '../react-desc-prop-types.js';\nimport type { DSTabT } from '../react-desc-prop-types.js';\n\n// const DSTab = (props: DSTabT.Props): JSX.Element => <React.Fragment {...props} />;\nconst DSTab = (props: DSTabT.Props) => props.children;\n\nDSTab.displayName = 'DSTab';\nconst DSTabWithSchema = describe(DSTab);\nDSTabWithSchema.propTypes = DSTabPropTypes as unknown as ValidationMap<DSTabT.Props>;\n\nexport { DSTab, DSTabWithSchema };\nexport default DSTab;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA6C;AAC7C,mCAA+B;AAI/B,MAAM,QAAQ,CAAC,UAAwB,MAAM;AAE7C,MAAM,cAAc;AACpB,MAAM,sBAAkB,kCAAS,KAAK;AACtC,gBAAgB,YAAY;AAG5B,IAAO,gBAAQ;",
   "names": []
 }

package/dist/cjs/index.js

@@ -17,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
@@ -29,12 +28,19 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_exports = {};
 __export(index_exports, {
-  TabTypes: () => import_constants.TabTypes
+  DSTab: () => import_DSTab.DSTab,
+  DSTabWithSchema: () => import_DSTab.DSTabWithSchema,
+  DSTabs: () => import_DSTabs.DSTabs,
+  DSTabsDatatestid: () => import_constants.TABS_DATA_TESTID,
+  DSTabsWithSchema: () => import_DSTabs.DSTabsWithSchema,
+  TABS_DATA_TESTID: () => import_constants.TABS_DATA_TESTID,
+  TABS_SLOTS: () => import_constants.TABS_SLOTS,
+  TAB_TYPES: () => import_constants.TAB_TYPES,
+  TabTypes: () => import_constants.TAB_TYPES
 });
 module.exports = __toCommonJS(index_exports);
 var React = __toESM(require("react"));
-__reExport(index_exports, require("./exported-related/DSTab.js"), module.exports);
-__reExport(index_exports, require("./DSTabs.js"), module.exports);
-var import_constants = require("./utils/constants.js");
-__reExport(index_exports, require("./DSTabsDatatestid.js"), module.exports);
+var import_DSTabs = require("./DSTabs.js");
+var import_constants = require("./constants/index.js");
+var import_DSTab = require("./exported-related/DSTab.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './exported-related/DSTab.js';\nexport * from './DSTabs.js';\nexport { TabTypes } from './utils/constants.js';\nexport * from './DSTabsDatatestid.js';\nexport type { DSTabT, DSTabsT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAc,wCAAd;AACA,0BAAc,wBADd;AAEA,uBAAyB;AACzB,0BAAc,kCAHd;",
+  "sourcesContent": ["export { DSTabs, DSTabsWithSchema } from './DSTabs.js';\nexport type { DSTabT, DSTabsT } from './react-desc-prop-types.js';\nexport {\n  TABS_SLOTS,\n  TABS_DATA_TESTID,\n  TABS_DATA_TESTID as DSTabsDatatestid,\n  TAB_TYPES,\n  TAB_TYPES as TabTypes,\n} from './constants/index.js';\nexport { DSTab, DSTabWithSchema } from './exported-related/DSTab.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAAyC;AAEzC,uBAMO;AACP,mBAAuC;",
   "names": []
 }

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

@@ -40,7 +40,7 @@ var import_ds_icons = require("@elliemae/ds-icons");
 var import_styles = require("./styles.js");
 var import_useCarousel = require("./useCarousel.js");
 var import_DSTabsCTX = require("../../DSTabsCTX.js");
-var import_DSTabsDatatestid = require("../../DSTabsDatatestid.js");
+var import_constants = require("../../constants/index.js");
 const Carousel = ({ children, updateIndicatorStyle }) => {
   const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = (0, import_useCarousel.useCarousel)({
     updateIndicatorStyle
@@ -56,7 +56,7 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
         size: "s",
         onClick: leftButtonOnClick,
         tabIndex: -1,
-        "data-testid": import_DSTabsDatatestid.DSTabsDatatestid.CAROUSEL.BUTTON_LEFT,
+        "data-testid": import_constants.TABS_DATA_TESTID.CAROUSEL_BUTTON_LEFT,
         buttonType: import_ds_button_v2.BUTTON_TYPES.ICON,
         "aria-label": "Scroll Left",
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronLeft, { size: import_ds_icon.DSIconSizes.S })
@@ -68,7 +68,7 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
         size: "s",
         onClick: rightButtonOnClick,
         tabIndex: -1,
-        "data-testid": import_DSTabsDatatestid.DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT,
+        "data-testid": import_constants.TABS_DATA_TESTID.CAROUSEL_BUTTON_RIGHT,
         buttonType: import_ds_button_v2.BUTTON_TYPES.ICON,
         "aria-label": "Scroll Right",
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronRight, { size: import_ds_icon.DSIconSizes.S })

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/carousel/Carousel.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useContext } from 'react';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\n\ninterface CarouselPropsT {\n  children: React.ReactNode[];\n  updateIndicatorStyle?: () => void;\n}\n\nexport const Carousel = ({ children, updateIndicatorStyle }: CarouselPropsT): JSX.Element => {\n  const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel({\n    updateIndicatorStyle,\n  });\n\n  const {\n    carouselOnlyListRef,\n    props: { type },\n  } = useContext(DSTabsContext);\n\n  return (\n    <StyledCarouselWrapper>\n      {showChevrons.left && (\n        <StyledCarouselButtonWrapper tabType={type}>\n          <StyledCarouselBtn\n            size=\"s\"\n            onClick={leftButtonOnClick}\n            tabIndex={-1}\n            data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_LEFT}\n            buttonType={BUTTON_TYPES.ICON}\n            aria-label=\"Scroll Left\"\n          >\n            <ChevronLeft size={DSIconSizes.S} />\n          </StyledCarouselBtn>\n        </StyledCarouselButtonWrapper>\n      )}\n      {showChevrons.right && (\n        <StyledCarouselButtonWrapper tabType={type} right={showChevrons.right}>\n          <StyledCarouselBtn\n            size=\"s\"\n            onClick={rightButtonOnClick}\n            tabIndex={-1}\n            data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT}\n            buttonType={BUTTON_TYPES.ICON}\n            aria-label=\"Scroll Right\"\n          >\n            <ChevronRight size={DSIconSizes.S} />\n          </StyledCarouselBtn>\n        </StyledCarouselButtonWrapper>\n      )}\n      <StyledChildrenWrap\n        role=\"tablist\"\n        innerRef={carouselOnlyListRef}\n        onClick={handleOnClick}\n        onScroll={handleOnScroll}\n      >\n        {children}\n      </StyledChildrenWrap>\n    </StyledCarouselWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBnB;AAzBJ,mBAA2B;AAC3B,qBAA4B;AAC5B,0BAA6B;AAC7B,sBAA0C;AAC1C,oBAA0G;AAC1G,yBAA4B;AAC5B,uBAA8B;AAC9B,8BAAiC;AAO1B,MAAM,WAAW,CAAC,EAAE,UAAU,qBAAqB,MAAmC;AAC3F,QAAM,EAAE,cAAc,mBAAmB,oBAAoB,eAAe,eAAe,QAAI,gCAAY;AAAA,IACzG;AAAA,EACF,CAAC;AAED,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,QAAI,yBAAW,8BAAa;AAE5B,SACE,6CAAC,uCACE;AAAA,iBAAa,QACZ,4CAAC,6CAA4B,SAAS,MACpC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,yCAAiB,SAAS;AAAA,QACvC,YAAY,iCAAa;AAAA,QACzB,cAAW;AAAA,QAEX,sDAAC,+BAAY,MAAM,2BAAY,GAAG;AAAA;AAAA,IACpC,GACF;AAAA,IAED,aAAa,SACZ,4CAAC,6CAA4B,SAAS,MAAM,OAAO,aAAa,OAC9D;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,yCAAiB,SAAS;AAAA,QACvC,YAAY,iCAAa;AAAA,QACzB,cAAW;AAAA,QAEX,sDAAC,gCAAa,MAAM,2BAAY,GAAG;AAAA;AAAA,IACrC,GACF;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { useContext } from 'react';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } 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  updateIndicatorStyle?: () => void;\n}\n\nexport const Carousel = ({ children, updateIndicatorStyle }: CarouselPropsT): JSX.Element => {\n  const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel({\n    updateIndicatorStyle,\n  });\n\n  const {\n    carouselOnlyListRef,\n    props: { type },\n  } = useContext(DSTabsContext);\n\n  return (\n    <StyledCarouselWrapper>\n      {showChevrons.left && (\n        <StyledCarouselButtonWrapper tabType={type}>\n          <StyledCarouselBtn\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          >\n            <ChevronLeft size={DSIconSizes.S} />\n          </StyledCarouselBtn>\n        </StyledCarouselButtonWrapper>\n      )}\n      {showChevrons.right && (\n        <StyledCarouselButtonWrapper tabType={type} right={showChevrons.right}>\n          <StyledCarouselBtn\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          >\n            <ChevronRight size={DSIconSizes.S} />\n          </StyledCarouselBtn>\n        </StyledCarouselButtonWrapper>\n      )}\n      <StyledChildrenWrap\n        role=\"tablist\"\n        innerRef={carouselOnlyListRef}\n        onClick={handleOnClick}\n        onScroll={handleOnScroll}\n      >\n        {children}\n      </StyledChildrenWrap>\n    </StyledCarouselWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBnB;AAzBJ,mBAA2B;AAC3B,qBAA4B;AAC5B,0BAA6B;AAC7B,sBAA0C;AAC1C,oBAA0G;AAC1G,yBAA4B;AAC5B,uBAA8B;AAC9B,uBAAiC;AAO1B,MAAM,WAAW,CAAC,EAAE,UAAU,qBAAqB,MAAmC;AAC3F,QAAM,EAAE,cAAc,mBAAmB,oBAAoB,eAAe,eAAe,QAAI,gCAAY;AAAA,IACzG;AAAA,EACF,CAAC;AAED,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,QAAI,yBAAW,8BAAa;AAE5B,SACE,6CAAC,uCACE;AAAA,iBAAa,QACZ,4CAAC,6CAA4B,SAAS,MACpC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,kCAAiB;AAAA,QAC9B,YAAY,iCAAa;AAAA,QACzB,cAAW;AAAA,QAEX,sDAAC,+BAAY,MAAM,2BAAY,GAAG;AAAA;AAAA,IACpC,GACF;AAAA,IAED,aAAa,SACZ,4CAAC,6CAA4B,SAAS,MAAM,OAAO,aAAa,OAC9D;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,kCAAiB;AAAA,QAC9B,YAAY,iCAAa;AAAA,QACzB,cAAW;AAAA,QAEX,sDAAC,gCAAa,MAAM,2BAAY,GAAG;AAAA;AAAA,IACrC,GACF;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;",
   "names": []
 }

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

@@ -37,7 +37,7 @@ module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_button_v2 = require("@elliemae/ds-button-v2");
-var import_constants = require("../../utils/constants.js");
+var import_constants = require("../../constants/index.js");
 const StyledCarouselBtn = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2)`
   margin: 0;
   min-width: ${({ theme }) => theme.space.xs};
@@ -70,10 +70,10 @@ const StyledCarouselButtonWrapper = import_ds_system.styled.div`
   z-index: 200;
   ${({ right }) => right ? "right: 0;" : `left: 0;`}
   width: 16px;
-  height: ${({ tabType }) => tabType === import_constants.TabTypes.NORMAL ? "32px" : "22px"};
-  padding-top: ${({ tabType }) => tabType === import_constants.TabTypes.NORMAL ? "5px" : "0px"};
+  height: ${({ tabType }) => tabType === import_constants.TAB_TYPES.NORMAL ? "32px" : "22px"};
+  padding-top: ${({ tabType }) => tabType === import_constants.TAB_TYPES.NORMAL ? "5px" : "0px"};
   background: white;
-  ${({ theme, tabType }) => tabType === import_constants.TabTypes.NORMAL ? `
+  ${({ theme, tabType }) => tabType === import_constants.TAB_TYPES.NORMAL ? `
       background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );
  ` : ``};
 `;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/carousel/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { TabTypes } from '../../utils/constants.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\n\ninterface StyledCarouselButtonWrapperPropsT {\n  right?: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\nexport const StyledCarouselBtn = styled(DSButtonV2)`\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 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 === TabTypes.NORMAL ? '32px' : '22px')};\n  padding-top: ${({ tabType }) => (tabType === TabTypes.NORMAL ? '5px' : '0px')};\n  background: white;\n  ${({ theme, tabType }) =>\n    tabType === TabTypes.NORMAL\n      ? `\n      background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );\n `\n      : ``};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,0BAA2B;AAC3B,uBAAyB;AAQlB,MAAM,wBAAoB,yBAAO,8BAAU;AAAA;AAAA,eAEnC,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,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,EAAE,MAAM,MAAO,QAAQ,cAAc,UAAW;AAAA;AAAA,YAEzC,CAAC,EAAE,QAAQ,MAAO,YAAY,0BAAS,SAAS,SAAS,MAAO;AAAA,iBAC3D,CAAC,EAAE,QAAQ,MAAO,YAAY,0BAAS,SAAS,QAAQ,KAAM;AAAA;AAAA,IAE3E,CAAC,EAAE,OAAO,QAAQ,MAClB,YAAY,0BAAS,SACjB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,GAAG,CAAC,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,KAE1H,EAAE;AAAA;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\n\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { TAB_TYPES } from '../../constants/index.js';\n\ninterface StyledCarouselButtonWrapperPropsT {\n  right?: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\nexport const StyledCarouselBtn: typeof DSButtonV2 = styled(DSButtonV2)`\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 StyledCarouselWrapper = styled.span`\n  position: relative;\n  width: 100%;\n  display: flex;\n`;\n\nexport const StyledChildrenWrap = styled.div`\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  overflow-x: hidden;\n`;\n\nexport const StyledCarouselButtonWrapper = styled.div<StyledCarouselButtonWrapperPropsT>`\n  max-width: 16px;\n  position: absolute;\n  z-index: 200;\n  ${({ right }) => (right ? 'right: 0;' : `left: 0;`)}\n  width: 16px;\n  height: ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? '32px' : '22px')};\n  padding-top: ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? '5px' : '0px')};\n  background: white;\n  ${({ theme, tabType }) =>\n    tabType === TAB_TYPES.NORMAL\n      ? `\n      background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );\n `\n      : ``};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,0BAA2B;AAG3B,uBAA0B;AAOnB,MAAM,wBAAuC,yBAAO,8BAAU;AAAA;AAAA,eAEtD,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,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,EAAE,MAAM,MAAO,QAAQ,cAAc,UAAW;AAAA;AAAA,YAEzC,CAAC,EAAE,QAAQ,MAAO,YAAY,2BAAU,SAAS,SAAS,MAAO;AAAA,iBAC5D,CAAC,EAAE,QAAQ,MAAO,YAAY,2BAAU,SAAS,QAAQ,KAAM;AAAA;AAAA,IAE5E,CAAC,EAAE,OAAO,QAAQ,MAClB,YAAY,2BAAU,SAClB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,GAAG,CAAC,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,KAE1H,EAAE;AAAA;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/carousel/useCarouselCallbacks.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\nimport { useCallback, useContext } from 'react';\nimport type { MouseEvent } from 'react';\nimport { isElementVisibleCarousel } from '../../utils/helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\ninterface UseCarouselCallbacksPropsT {\n  getVisibleItemsOffset: () => number;\n  recalcChevrons: () => void;\n  updateIndicatorStyle?: () => void;\n}\ninterface UseCarouselCallbacksReturnTypeT {\n  leftButtonOnClick: () => void;\n  rightButtonOnClick: () => void;\n  handleOnClick: (e: React.MouseEvent) => void;\n  handleOnScroll: (e: React.UIEvent) => void;\n}\n\nexport const useCarouselCallbacks = ({\n  getVisibleItemsOffset,\n  updateIndicatorStyle,\n  recalcChevrons,\n}: UseCarouselCallbacksPropsT): UseCarouselCallbacksReturnTypeT => {\n  const { focusableTabsRef, carouselOnlyListRef } = useContext(DSTabsContext);\n\n  const rightButtonOnClick = useCallback(() => {\n    if (carouselOnlyListRef.current) {\n      carouselOnlyListRef.current.scrollLeft += getVisibleItemsOffset();\n    }\n  }, [getVisibleItemsOffset, carouselOnlyListRef]);\n\n  const leftButtonOnClick = useCallback(() => {\n    if (carouselOnlyListRef.current) {\n      carouselOnlyListRef.current.scrollLeft -= getVisibleItemsOffset();\n    }\n  }, [getVisibleItemsOffset, carouselOnlyListRef]);\n\n  const handleOnScroll = useCallback(() => {\n    recalcChevrons();\n    if (updateIndicatorStyle) updateIndicatorStyle();\n  }, [recalcChevrons, updateIndicatorStyle]);\n\n  const handleOnClick = useCallback(\n    ({ target }: 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    rightButtonOnClick,\n    leftButtonOnClick,\n    handleOnScroll,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwC;AAExC,qBAAyC;AACzC,uBAA8B;AAcvB,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,MAAmE;AACjE,QAAM,EAAE,kBAAkB,oBAAoB,QAAI,yBAAW,8BAAa;AAE1E,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAE/C,QAAM,wBAAoB,0BAAY,MAAM;AAC1C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAE/C,QAAM,qBAAiB,0BAAY,MAAM;AACvC,mBAAe;AACf,QAAI,qBAAsB,sBAAqB;AAAA,EACjD,GAAG,CAAC,gBAAgB,oBAAoB,CAAC;AAEzC,QAAM,oBAAgB;AAAA,IACpB,CAAC,EAAE,OAAO,MAAkB;AAC1B,UAAI,iBAAiB,WAAY,OAA6B,aAAa,MAAM,MAAM,OAAO;AAC5F,cAAM,UAAU,oBAAoB;AACpC,cAAM,YAAY;AAClB,cAAM,sBAAsB,UAAU,sBAAsB;AAC5D,cAAM,oBAAoB,SAAS,sBAAsB;AACzD,cAAM,iBAAiB,UAAU,QAAQ;AACzC,cAAM,gBAAgB,iBAAiB,QAAQ,OAAO,SAAS;AAC/D,cAAM,cAAc;AAEpB,cAAM,kBAAkB,mBAAmB,OAAO,mBAAmB;AAErE,YACE,KAAC,yCAAyB,WAAW,SAAS,eAAe,KAC7D,qBACA,oBAAoB,SACpB;AACA,gBAAM,iBAAiB,kBAAkB;AACzC,gBAAM,gBAAgB,iBAAiB;AACvC,gBAAM,wBAAwB,oBAAoB,OAAO,kBAAkB;AAC3E,gBAAM,sBAAsB,wBAAwB;AACpD,gBAAM,QAAQ,UAAU,cAAc;AAEtC,cAAI,sBAAsB,eAAe;AACvC,gCAAoB,QAAQ,cAAc,QAAQ,sBAAsB;AAAA,UAC1E,OAAO;AACL,gCAAoB,QAAQ,cAAc,sBAAsB;AAAA,UAClE;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,mBAAmB;AAAA,EACxC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["/* eslint-disable max-statements */\nimport { useCallback, useContext } from 'react';\nimport type { MouseEvent } from 'react';\nimport { isElementVisibleCarousel } from '../../utils/helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\ninterface UseCarouselCallbacksPropsT {\n  getVisibleItemsOffset: () => number;\n  recalcChevrons: () => void;\n  updateIndicatorStyle?: () => void;\n}\ninterface UseCarouselCallbacksReturnTypeT {\n  leftButtonOnClick: () => void;\n  rightButtonOnClick: () => void;\n  handleOnClick: (e: React.MouseEvent) => void;\n  handleOnScroll: (e: React.UIEvent) => void;\n}\n\nexport const useCarouselCallbacks = ({\n  getVisibleItemsOffset,\n  updateIndicatorStyle,\n  recalcChevrons,\n}: UseCarouselCallbacksPropsT): UseCarouselCallbacksReturnTypeT => {\n  const { focusableTabsRef, carouselOnlyListRef } = useContext(DSTabsContext);\n\n  const rightButtonOnClick = useCallback(() => {\n    if (carouselOnlyListRef.current) {\n      carouselOnlyListRef.current.scrollLeft += getVisibleItemsOffset();\n    }\n  }, [getVisibleItemsOffset, carouselOnlyListRef]);\n\n  const leftButtonOnClick = useCallback(() => {\n    if (carouselOnlyListRef.current) {\n      carouselOnlyListRef.current.scrollLeft -= getVisibleItemsOffset();\n    }\n  }, [getVisibleItemsOffset, carouselOnlyListRef]);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Scroll handler for carousel. It:\n   * 1. Recalculates chevron visibility\n   * 2. Updates indicator style\n   * 3. May cause rerenders on every scroll event\n   */\n  const handleOnScroll = useCallback(() => {\n    recalcChevrons();\n    if (updateIndicatorStyle) updateIndicatorStyle();\n  }, [recalcChevrons, updateIndicatorStyle]);\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 }: 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    rightButtonOnClick,\n    leftButtonOnClick,\n    handleOnScroll,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwC;AAExC,qBAAyC;AACzC,uBAA8B;AAcvB,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,MAAmE;AACjE,QAAM,EAAE,kBAAkB,oBAAoB,QAAI,yBAAW,8BAAa;AAE1E,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAE/C,QAAM,wBAAoB,0BAAY,MAAM;AAC1C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAQ/C,QAAM,qBAAiB,0BAAY,MAAM;AACvC,mBAAe;AACf,QAAI,qBAAsB,sBAAqB;AAAA,EACjD,GAAG,CAAC,gBAAgB,oBAAoB,CAAC;AASzC,QAAM,oBAAgB;AAAA,IACpB,CAAC,EAAE,OAAO,MAAkB;AAC1B,UAAI,iBAAiB,WAAY,OAA6B,aAAa,MAAM,MAAM,OAAO;AAC5F,cAAM,UAAU,oBAAoB;AACpC,cAAM,YAAY;AAClB,cAAM,sBAAsB,UAAU,sBAAsB;AAC5D,cAAM,oBAAoB,SAAS,sBAAsB;AACzD,cAAM,iBAAiB,UAAU,QAAQ;AACzC,cAAM,gBAAgB,iBAAiB,QAAQ,OAAO,SAAS;AAC/D,cAAM,cAAc;AAEpB,cAAM,kBAAkB,mBAAmB,OAAO,mBAAmB;AAErE,YACE,KAAC,yCAAyB,WAAW,SAAS,eAAe,KAC7D,qBACA,oBAAoB,SACpB;AACA,gBAAM,iBAAiB,kBAAkB;AACzC,gBAAM,gBAAgB,iBAAiB;AACvC,gBAAM,wBAAwB,oBAAoB,OAAO,kBAAkB;AAC3E,gBAAM,sBAAsB,wBAAwB;AACpD,gBAAM,QAAQ,UAAU,cAAc;AAEtC,cAAI,sBAAsB,eAAe;AACvC,gCAAoB,QAAQ,cAAc,QAAQ,sBAAsB;AAAA,UAC1E,OAAO;AACL,gCAAoB,QAAQ,cAAc,sBAAsB;AAAA,UAClE;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,mBAAmB;AAAA,EACxC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -33,132 +33,30 @@ __export(TabBar_exports, {
 module.exports = __toCommonJS(TabBar_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_Carousel = require("../carousel/Carousel.js");
 var import_useTabBar = require("./useTabBar.js");
 var import_styles = require("./styles.js");
 var import_DSTabsCTX = require("../../DSTabsCTX.js");
-var import_useKeyboardNavigation = require("../../utils/hooks/useKeyboardNavigation.js");
-var import_helpers = require("../../utils/helpers.js");
-var import_constants = require("../../utils/constants.js");
+var import_constants = require("../../constants/index.js");
+var import_TabBarItemRenderer = require("./TabBarItemRenderer.js");
 var import_useTabsCallbacks = require("../../utils/hooks/useTabsCallbacks.js");
-var import_DSTabsDatatestid = require("../../DSTabsDatatestid.js");
 const TabBar = () => {
   const {
-    tabsRef,
-    focusableTabsRef,
     tabsListRef,
-    tabsRefAsArray,
-    carouselOnlyListRef,
-    actualActiveTab,
-    props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs }
+    props: { type, fixedTabsHeaders, withCarousel, isDSMobile }
   } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
-  const { lastTabInternalRef, firstSubtabInternalRef } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsCrossRefContext);
   const { handleOnTabChange } = (0, import_useTabsCallbacks.useTabsCallbacks)();
-  const { handleOnKeyDown } = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
   const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = (0, import_useTabBar.useTabBar)();
-  const renderTabs = (0, import_react.useMemo)(() => {
-    const availableTabIndexes = [];
-    return import_react.default.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__ */ (0, import_jsx_runtime.jsxs)(
-        import_styles.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 === import_constants.TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {
-                firstSubtabInternalRef.current = tabButtonRef;
-              }
-              if (type !== import_constants.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 !== import_constants.TabTypes.NORMAL,
-          "data-testid": type === import_constants.TabTypes.NORMAL ? import_DSTabsDatatestid.DSTabsDatatestid.TAB_BUTTON : import_DSTabsDatatestid.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) (0, import_helpers.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__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledRequiredMark, { children: "\u25CF" })
-          ]
-        },
-        tabId
-      );
-    });
-  }, [
-    tabs,
-    actualActiveTab,
-    isDSMobile,
-    fixedTabsHeaders,
-    type,
-    withCarousel,
-    showSeparator,
-    tabsRefAsArray,
-    focusableTabsRef,
-    tabsRef,
-    firstSubtabInternalRef,
-    lastTabInternalRef,
-    handleOnTabChange,
-    updateIndicatorStyle,
-    carouselOnlyListRef,
-    handleOnKeyDown
-  ]);
-  if (type === import_constants.TabTypes.SUBTABS && !isDSMobile) {
+  if (type === import_constants.TAB_TYPES.SUBTABS && !isDSMobile) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_styles.StyledSubTabsList,
       {
         withCarousel,
-        "data-testid": import_DSTabsDatatestid.DSTabsDatatestid.SUB_TAB_LIST,
+        "data-testid": import_constants.TABS_DATA_TESTID.SUB_TAB_LIST,
         role: withCarousel ? void 0 : "tablist",
         innerRef: tabsListRef,
-        children: withCarousel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Carousel.Carousel, { children: renderTabs }) : renderTabs
+        children: withCarousel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Carousel.Carousel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabBarItemRenderer.TabBarItemRenderer, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabBarItemRenderer.TabBarItemRenderer, {})
       }
     );
   }
@@ -168,7 +66,7 @@ const TabBar = () => {
       withCarousel,
       role: withCarousel ? void 0 : "tablist",
       innerRef: tabsListRef,
-      "data-testid": import_DSTabsDatatestid.DSTabsDatatestid.TAB_LIST,
+      "data-testid": import_constants.TABS_DATA_TESTID.TAB_LIST,
       isDSMobile,
       fixedTabsHeaders,
       mobileGradients,
@@ -184,7 +82,7 @@ const TabBar = () => {
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTabWrapper, { "data-testid": "tab-wrapper", isDSMobile, fixedTabsHeaders, children: !isDSMobile && withCarousel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Carousel.Carousel, { updateIndicatorStyle, children: renderTabs }) : renderTabs }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTabWrapper, { "data-testid": "tab-wrapper", isDSMobile, fixedTabsHeaders, children: !isDSMobile && withCarousel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Carousel.Carousel, { updateIndicatorStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabBarItemRenderer.TabBarItemRenderer, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabBarItemRenderer.TabBarItemRenderer, {}) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSelectionIndicator, { isDSMobile, tabType: type }),
         isDSMobile && !fixedTabsHeaders && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_styles.StyledMobileGradient,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/tabBar/TabBar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
-  "names": ["React"]
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCX;AApCZ,mBAAkC;AAClC,sBAAyB;AACzB,uBAA0B;AAC1B,oBAMO;AACP,uBAA8B;AAE9B,uBAA4C;AAE5C,gCAAmC;AACnC,8BAAiC;AAE1B,MAAM,SAAS,MAAmB;AACvC,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,MAAM,kBAAkB,cAAc,WAAW;AAAA,EAC5D,QAAI,yBAAW,8BAAa;AAE5B,QAAM,EAAE,kBAAkB,QAAI,0CAAiB;AAC/C,QAAM,EAAE,gBAAgB,iBAAiB,uBAAuB,qBAAqB,QAAI,4BAAU;AAEnG,MAAI,SAAS,2BAAU,WAAW,CAAC,YAAY;AAC7C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa,kCAAiB;AAAA,QAC9B,MAAM,eAAe,SAAY;AAAA,QACjC,UAAU;AAAA,QAET,yBACC,4CAAC,4BACC,sDAAC,gDAAmB,GACtB,IAEA,4CAAC,gDAAmB;AAAA;AAAA,IAExB;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM,eAAe,SAAY;AAAA,MACjC,UAAU;AAAA,MACV,eAAa,kCAAiB;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,oDAAC,kCAAiB,eAAY,eAAc,YAAwB,kBACjE,WAAC,cAAc,eACd,4CAAC,4BAAS,sBACR,sDAAC,gDAAmB,GACtB,IAEA,4CAAC,gDAAmB,GAExB;AAAA,QACA,4CAAC,0CAAyB,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": []
 }