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

package/dist/cjs/sharedTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/sharedTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { TabTypes } from './utils/constants.js';\nimport type { DSTabsT } from './react-desc-prop-types.js';\n\nexport namespace DSTabsInternalsT {\n  export type TabTypesT = (typeof TabTypes)[keyof typeof TabTypes];\n\n  export interface MobileGradientsT {\n    right: boolean;\n    left: boolean;\n  }\n\n  export interface IndicatorStyleT {\n    left: number;\n    width: number;\n  }\n\n  export interface ShowChevronsT {\n    right: boolean;\n    left: boolean;\n  }\n\n  export interface DSTabsUseTabsContextT {\n    props: DSTabsT.InternalProps;\n    tabsRef: React.MutableRefObject<Record<number, HTMLButtonElement> | null>;\n    focusableTabsRef: React.MutableRefObject<HTMLButtonElement[] | null>;\n    tabsListRef: React.MutableRefObject<HTMLDivElement | null>;\n    tabsRefAsArray: React.MutableRefObject<HTMLButtonElement[] | null>;\n    actualActiveTabRef: React.MutableRefObject<HTMLButtonElement | null>;\n    carouselOnlyListRef: React.MutableRefObject<HTMLDivElement | null>;\n    setInternalActiveTab: React.Dispatch<React.SetStateAction<string>>;\n    actualActiveTab: string;\n  }\n\n  export interface DSTabsUseCrossRefContextT {\n    lastTabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;\n    firstSubtabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  }\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import type { TAB_TYPES } from './constants/index.js';\n\nimport type { DSTabsT } from './react-desc-prop-types.js';\n\nexport namespace DSTabsInternalsT {\n  export type TabTypesT = (typeof TAB_TYPES)[keyof typeof TAB_TYPES];\n\n  export interface MobileGradientsT {\n    right: boolean;\n    left: boolean;\n  }\n\n  export interface IndicatorStyleT {\n    left: number;\n    width: number;\n  }\n\n  export interface ShowChevronsT {\n    right: boolean;\n    left: boolean;\n  }\n\n  export interface DSTabsUseTabsContextT {\n    props: DSTabsT.InternalProps;\n    tabsRef: React.MutableRefObject<Record<number, HTMLButtonElement> | null>;\n    focusableTabsRef: React.MutableRefObject<HTMLButtonElement[] | null>;\n    tabsListRef: React.MutableRefObject<HTMLDivElement | null>;\n    tabsRefAsArray: React.MutableRefObject<HTMLButtonElement[] | null>;\n    actualActiveTabRef: React.MutableRefObject<HTMLButtonElement | null>;\n    carouselOnlyListRef: React.MutableRefObject<HTMLDivElement | null>;\n    setInternalActiveTab: React.Dispatch<React.SetStateAction<string>>;\n    actualActiveTab: string;\n  }\n\n  export interface DSTabsUseCrossRefContextT {\n    lastTabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;\n    firstSubtabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  }\n}\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

package/dist/cjs/typescript-testing/typescript-tabs-valid.js

@@ -55,7 +55,7 @@ const testTabsPartialDefaults = {
   isDSMobile: false,
   onTabChange: (tabId) => {
   },
-  type: import__.TabTypes.NORMAL,
+  type: import__.TAB_TYPES.NORMAL,
   showSeparator: true
 };
 const testTabsProps = {
@@ -87,7 +87,7 @@ const testTabsCompleteDefaults = {
   onTabChange: (tabId) => {
   },
   tabsListAriaLabel: "Tab list",
-  type: import__.TabTypes.NORMAL,
+  type: import__.TAB_TYPES.NORMAL,
   onlyRenderActiveTab: false,
   withCarousel: false,
   isDSMobile: false,
@@ -118,7 +118,7 @@ const testTabsExplicitDefinition = {
   onTabChange: (tabId) => {
   },
   tabsListAriaLabel: "Tab list",
-  type: import__.TabTypes.NORMAL,
+  type: import__.TAB_TYPES.NORMAL,
   onlyRenderActiveTab: false,
   withCarousel: false,
   isDSMobile: false,
@@ -157,7 +157,7 @@ const testTabsInferedTypeCompatibility = {
   onTabChange: (tabId) => {
   },
   tabsListAriaLabel: "Tab list",
-  type: import__.TabTypes.NORMAL,
+  type: import__.TAB_TYPES.NORMAL,
   onlyRenderActiveTab: false,
   withCarousel: false,
   isDSMobile: false,
@@ -182,7 +182,7 @@ const testTabsDefinitionAsConst = {
   onTabChange: (tabId) => {
   },
   tabsListAriaLabel: "Tab list",
-  type: import__.TabTypes.NORMAL,
+  type: import__.TAB_TYPES.NORMAL,
   onlyRenderActiveTab: false,
   withCarousel: false,
   isDSMobile: false,
@@ -244,7 +244,7 @@ const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)
       onTabChange: (tabId) => {
       },
       tabsListAriaLabel: "Tab list",
-      type: import__.TabTypes.NORMAL,
+      type: import__.TAB_TYPES.NORMAL,
       onlyRenderActiveTab: false,
       withCarousel: false,
       isDSMobile: false,

package/dist/cjs/typescript-testing/typescript-tabs-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-tabs-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/jsx-no-duplicate-props */\n/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport React from 'react';\nimport { DSTabs, DSTab, TabTypes } from '../index.js';\nimport type { DSTabsT, DSTabT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForTabs = DSTabsT.Props;\ntype ComponentPropsTabsInternals = DSTabsT.InternalProps;\ntype ComponentPropsTabsDefaultProps = DSTabsT.DefaultProps;\ntype ComponentPropsTabsOptionalProps = DSTabsT.PropsOptional;\n\ntype ComponentPropsForTab = DSTabT.Props;\ntype ComponentPropsTabDefaultProps = DSTabT.DefaultProps;\ntype ComponentPropsTabOptionalProps = DSTabT.PropsOptional;\ntype ComponentPropsTabRequiredProps = DSTabT.PropsRequired;\n\nconst buttonRef = React.createRef() as React.MutableRefObject<HTMLButtonElement>;\nconst divRef = React.createRef() as React.MutableRefObject<HTMLDivElement>;\nconst MockComponent: React.ComponentType = () => <div></div>;\n\n// Tabs\nconst testTabsOptionalProps: ComponentPropsTabsOptionalProps = {\n  activeTab: '',\n  innerRef: divRef,\n  firstSubtabRef: buttonRef,\n  lastTabRef: buttonRef,\n  TabBarExtraContent: MockComponent,\n  tabBarExtraContent: '',\n};\n\n// Tab\nconst testTabRequiredProps: ComponentPropsTabRequiredProps = {\n  children: <div></div>,\n};\n\nconst testTabOptionalProps: ComponentPropsTabOptionalProps = {\n  disabled: false,\n  onClick: () => {},\n  onKeyDown: () => {},\n  ref: buttonRef,\n  required: true,\n  style: {},\n  title: '',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\n\n// Tabs\nconst testTabsPartialDefaults: Partial<ComponentPropsTabsDefaultProps> = {\n  allowTextSelection: false,\n  isDSMobile: false,\n  onTabChange: (tabId: string) => {},\n  type: TabTypes.NORMAL,\n  showSeparator: true,\n};\n\nconst testTabsProps: ComponentPropsForTabs = {\n  ...testTabsOptionalProps,\n  ...testTabsPartialDefaults,\n};\n\nconst testTabsPropsAsSyntax = {\n  ...testTabsOptionalProps,\n  ...testTabsPartialDefaults,\n} as ComponentPropsForTabs;\n\n// Tab\nconst testTabPartialDefaults: Partial<ComponentPropsTabDefaultProps> = {\n  tabId: '',\n};\n\nconst testTabProps: ComponentPropsForTab = {\n  ...testTabRequiredProps,\n  ...testTabOptionalProps,\n  ...testTabPartialDefaults,\n};\n\nconst testTabPropsAsSyntax = {\n  ...testTabRequiredProps,\n  ...testTabOptionalProps,\n  ...testTabPartialDefaults,\n} as ComponentPropsForTab;\n\n// InternalProps requires all defaults to be filled in\n\n// Tabs\nconst testTabsCompleteDefaults: Required<ComponentPropsTabsDefaultProps> = {\n  containerProps: {},\n  animated: true,\n  enableMouseEvents: false,\n  allowTextSelection: false,\n  onTabChange: (tabId: string) => {},\n  tabsListAriaLabel: 'Tab list',\n  type: TabTypes.NORMAL,\n  onlyRenderActiveTab: false,\n  withCarousel: false,\n  isDSMobile: false,\n  showSelectionIndicator: true,\n  children: [],\n  fixedTabsHeaders: false,\n  showSeparator: true,\n  tabPanelsProps: {},\n  swipeableViewsContainerProps: {},\n};\n\nconst testTabsInternalProps: ComponentPropsTabsInternals = {\n  ...testTabsOptionalProps,\n  ...testTabsCompleteDefaults,\n};\n\nconst testTabsInternalPropsAsSyntax = {\n  ...testTabsOptionalProps,\n  ...testTabsCompleteDefaults,\n} as ComponentPropsTabsInternals;\n\n// Tab\nconst testTabCompleteDefaults: Required<ComponentPropsTabDefaultProps> = {\n  tabId: '',\n  applyAriaDisabled: false,\n};\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\n\n// Tabs\nconst testTabsExplicitDefinition: ComponentPropsForTabs = {\n  containerProps: {},\n  animated: true,\n  enableMouseEvents: false,\n  allowTextSelection: false,\n  onTabChange: (tabId: string) => {},\n  tabsListAriaLabel: 'Tab list',\n  type: TabTypes.NORMAL,\n  onlyRenderActiveTab: false,\n  withCarousel: false,\n  isDSMobile: false,\n  showSelectionIndicator: true,\n  children: [],\n  fixedTabsHeaders: false,\n  showSeparator: true,\n  tabPanelsProps: {},\n  swipeableViewsContainerProps: {},\n  activeTab: '',\n  innerRef: divRef,\n  firstSubtabRef: buttonRef,\n  lastTabRef: buttonRef,\n  TabBarExtraContent: MockComponent,\n  tabBarExtraContent: '',\n};\n\n// Tab\nconst testTabExplicitDefinition: ComponentPropsForTab = {\n  children: [],\n  disabled: false,\n  onClick: () => {},\n  onKeyDown: () => {},\n  ref: buttonRef,\n  required: true,\n  style: {},\n  title: '',\n  tabId: '',\n  applyAriaDisabled: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\n\n// Tabs\nconst testTabsInferedTypeCompatibility = {\n  containerProps: {},\n  animated: true,\n  enableMouseEvents: false,\n  allowTextSelection: false,\n  onTabChange: (tabId: string) => {},\n  tabsListAriaLabel: 'Tab list',\n  type: TabTypes.NORMAL,\n  onlyRenderActiveTab: false,\n  withCarousel: false,\n  isDSMobile: false,\n  showSelectionIndicator: true,\n  children: [],\n  fixedTabsHeaders: false,\n  showSeparator: true,\n  tabPanelsProps: {},\n  swipeableViewsContainerProps: {},\n  activeTab: '',\n  innerRef: divRef,\n  firstSubtabRef: buttonRef,\n  lastTabRef: buttonRef,\n  TabBarExtraContent: MockComponent,\n  tabBarExtraContent: '',\n} as ComponentPropsForTabs;\n\nconst testTabsDefinitionAsConst = {\n  containerProps: {},\n  animated: true,\n  enableMouseEvents: false,\n  allowTextSelection: false,\n  onTabChange: (tabId: string) => {},\n  tabsListAriaLabel: 'Tab list',\n  type: TabTypes.NORMAL,\n  onlyRenderActiveTab: false,\n  withCarousel: false,\n  isDSMobile: false,\n  showSelectionIndicator: true,\n  children: [],\n  fixedTabsHeaders: false,\n  showSeparator: true,\n  tabPanelsProps: {},\n  swipeableViewsContainerProps: {},\n  activeTab: '',\n  innerRef: divRef,\n  firstSubtabRef: buttonRef,\n  lastTabRef: buttonRef,\n  TabBarExtraContent: MockComponent,\n  tabBarExtraContent: '',\n} as const;\n\n// Tab\nconst testTabInferedTypeCompatibility = {\n  children: <div></div>,\n  disabled: false,\n  onClick: () => {},\n  onKeyDown: () => {},\n  ref: buttonRef,\n  required: true,\n  style: {},\n  title: '',\n  tabId: '',\n  applyAriaDisabled: false,\n} as ComponentPropsForTab;\n\nconst testTabDefinitionAsConst = {\n  children: <div></div>,\n  disabled: false,\n  onClick: () => {},\n  onKeyDown: () => {},\n  ref: buttonRef,\n  required: true,\n  style: {},\n  title: '',\n  tabId: '',\n  applyAriaDisabled: false,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSTabs {...testTabsExplicitDefinition} />\n    <DSTabs {...testTabsInferedTypeCompatibility}></DSTabs>\n    <DSTabs {...testTabsDefinitionAsConst}></DSTabs>\n\n    <DSTab {...testTabExplicitDefinition} />\n    <DSTab {...testTabInferedTypeCompatibility} />\n    <DSTab {...testTabDefinitionAsConst} />\n\n    {/* works with inline values */}\n    <DSTabs\n      containerProps={{}}\n      animated\n      enableMouseEvents={false}\n      allowTextSelection={false}\n      onTabChange={(tabId: string) => {}}\n      tabsListAriaLabel=\"Tab list\"\n      type={TabTypes.NORMAL}\n      onlyRenderActiveTab={false}\n      withCarousel={false}\n      isDSMobile={false}\n      showSelectionIndicator\n      fixedTabsHeaders={false}\n      showSeparator\n      tabPanelsProps={{}}\n      swipeableViewsContainerProps={{}}\n      activeTab=\"\"\n      innerRef={divRef}\n      firstSubtabRef={buttonRef}\n      lastTabRef={buttonRef}\n      TabBarExtraContent={MockComponent}\n      tabBarExtraContent=\"\"\n    >\n      {[]}\n    </DSTabs>\n\n    <DSTab\n      disabled={false}\n      onClick={() => {}}\n      onKeyDown={() => {}}\n      ref={buttonRef}\n      required\n      style={{}}\n      title=\"\"\n      tabId=\"\"\n      applyAriaDisabled={false}\n    >\n      <div></div>\n    </DSTab>\n  </>\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/jsx-no-duplicate-props */\n/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport React from 'react';\nimport { DSTabs, DSTab, TAB_TYPES } from '../index.js';\nimport type { DSTabsT, DSTabT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForTabs = DSTabsT.Props;\ntype ComponentPropsTabsInternals = DSTabsT.InternalProps;\ntype ComponentPropsTabsDefaultProps = DSTabsT.DefaultProps;\ntype ComponentPropsTabsOptionalProps = DSTabsT.OptionalProps;\n\ntype ComponentPropsForTab = DSTabT.Props;\ntype ComponentPropsTabDefaultProps = DSTabT.DefaultProps;\ntype ComponentPropsTabOptionalProps = DSTabT.OptionalProps;\ntype ComponentPropsTabRequiredProps = DSTabT.RequiredProps;\n\nconst buttonRef = React.createRef() as React.MutableRefObject<HTMLButtonElement>;\nconst divRef = React.createRef() as React.MutableRefObject<HTMLDivElement>;\nconst MockComponent: React.ComponentType = () => <div></div>;\n\n// Tabs\nconst testTabsOptionalProps: ComponentPropsTabsOptionalProps = {\n  activeTab: '',\n  innerRef: divRef,\n  firstSubtabRef: buttonRef,\n  lastTabRef: buttonRef,\n  TabBarExtraContent: MockComponent,\n  tabBarExtraContent: '',\n};\n\n// Tab\nconst testTabRequiredProps: ComponentPropsTabRequiredProps = {\n  children: <div></div>,\n};\n\nconst testTabOptionalProps: ComponentPropsTabOptionalProps = {\n  disabled: false,\n  onClick: () => {},\n  onKeyDown: () => {},\n  ref: buttonRef,\n  required: true,\n  style: {},\n  title: '',\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\n\n// Tabs\nconst testTabsPartialDefaults: Partial<ComponentPropsTabsDefaultProps> = {\n  allowTextSelection: false,\n  isDSMobile: false,\n  onTabChange: (tabId: string) => {},\n  type: TAB_TYPES.NORMAL,\n  showSeparator: true,\n};\n\nconst testTabsProps: ComponentPropsForTabs = {\n  ...testTabsOptionalProps,\n  ...testTabsPartialDefaults,\n};\n\nconst testTabsPropsAsSyntax = {\n  ...testTabsOptionalProps,\n  ...testTabsPartialDefaults,\n} as ComponentPropsForTabs;\n\n// Tab\nconst testTabPartialDefaults: Partial<ComponentPropsTabDefaultProps> = {\n  tabId: '',\n};\n\nconst testTabProps: ComponentPropsForTab = {\n  ...testTabRequiredProps,\n  ...testTabOptionalProps,\n  ...testTabPartialDefaults,\n};\n\nconst testTabPropsAsSyntax = {\n  ...testTabRequiredProps,\n  ...testTabOptionalProps,\n  ...testTabPartialDefaults,\n} as ComponentPropsForTab;\n\n// InternalProps requires all defaults to be filled in\n\n// Tabs\nconst testTabsCompleteDefaults: Required<ComponentPropsTabsDefaultProps> = {\n  containerProps: {},\n  animated: true,\n  enableMouseEvents: false,\n  allowTextSelection: false,\n  onTabChange: (tabId: string) => {},\n  tabsListAriaLabel: 'Tab list',\n  type: TAB_TYPES.NORMAL,\n  onlyRenderActiveTab: false,\n  withCarousel: false,\n  isDSMobile: false,\n  showSelectionIndicator: true,\n  children: [],\n  fixedTabsHeaders: false,\n  showSeparator: true,\n  tabPanelsProps: {},\n  swipeableViewsContainerProps: {},\n};\n\nconst testTabsInternalProps: ComponentPropsTabsInternals = {\n  ...testTabsOptionalProps,\n  ...testTabsCompleteDefaults,\n};\n\nconst testTabsInternalPropsAsSyntax = {\n  ...testTabsOptionalProps,\n  ...testTabsCompleteDefaults,\n} as ComponentPropsTabsInternals;\n\n// Tab\nconst testTabCompleteDefaults: Required<ComponentPropsTabDefaultProps> = {\n  tabId: '',\n  applyAriaDisabled: false,\n};\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\n\n// Tabs\nconst testTabsExplicitDefinition: ComponentPropsForTabs = {\n  containerProps: {},\n  animated: true,\n  enableMouseEvents: false,\n  allowTextSelection: false,\n  onTabChange: (tabId: string) => {},\n  tabsListAriaLabel: 'Tab list',\n  type: TAB_TYPES.NORMAL,\n  onlyRenderActiveTab: false,\n  withCarousel: false,\n  isDSMobile: false,\n  showSelectionIndicator: true,\n  children: [],\n  fixedTabsHeaders: false,\n  showSeparator: true,\n  tabPanelsProps: {},\n  swipeableViewsContainerProps: {},\n  activeTab: '',\n  innerRef: divRef,\n  firstSubtabRef: buttonRef,\n  lastTabRef: buttonRef,\n  TabBarExtraContent: MockComponent,\n  tabBarExtraContent: '',\n};\n\n// Tab\nconst testTabExplicitDefinition: ComponentPropsForTab = {\n  children: [],\n  disabled: false,\n  onClick: () => {},\n  onKeyDown: () => {},\n  ref: buttonRef,\n  required: true,\n  style: {},\n  title: '',\n  tabId: '',\n  applyAriaDisabled: false,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\n\n// Tabs\nconst testTabsInferedTypeCompatibility = {\n  containerProps: {},\n  animated: true,\n  enableMouseEvents: false,\n  allowTextSelection: false,\n  onTabChange: (tabId: string) => {},\n  tabsListAriaLabel: 'Tab list',\n  type: TAB_TYPES.NORMAL,\n  onlyRenderActiveTab: false,\n  withCarousel: false,\n  isDSMobile: false,\n  showSelectionIndicator: true,\n  children: [],\n  fixedTabsHeaders: false,\n  showSeparator: true,\n  tabPanelsProps: {},\n  swipeableViewsContainerProps: {},\n  activeTab: '',\n  innerRef: divRef,\n  firstSubtabRef: buttonRef,\n  lastTabRef: buttonRef,\n  TabBarExtraContent: MockComponent,\n  tabBarExtraContent: '',\n} as ComponentPropsForTabs;\n\nconst testTabsDefinitionAsConst = {\n  containerProps: {},\n  animated: true,\n  enableMouseEvents: false,\n  allowTextSelection: false,\n  onTabChange: (tabId: string) => {},\n  tabsListAriaLabel: 'Tab list',\n  type: TAB_TYPES.NORMAL,\n  onlyRenderActiveTab: false,\n  withCarousel: false,\n  isDSMobile: false,\n  showSelectionIndicator: true,\n  children: [],\n  fixedTabsHeaders: false,\n  showSeparator: true,\n  tabPanelsProps: {},\n  swipeableViewsContainerProps: {},\n  activeTab: '',\n  innerRef: divRef,\n  firstSubtabRef: buttonRef,\n  lastTabRef: buttonRef,\n  TabBarExtraContent: MockComponent,\n  tabBarExtraContent: '',\n} as const;\n\n// Tab\nconst testTabInferedTypeCompatibility = {\n  children: <div></div>,\n  disabled: false,\n  onClick: () => {},\n  onKeyDown: () => {},\n  ref: buttonRef,\n  required: true,\n  style: {},\n  title: '',\n  tabId: '',\n  applyAriaDisabled: false,\n} as ComponentPropsForTab;\n\nconst testTabDefinitionAsConst = {\n  children: <div></div>,\n  disabled: false,\n  onClick: () => {},\n  onKeyDown: () => {},\n  ref: buttonRef,\n  required: true,\n  style: {},\n  title: '',\n  tabId: '',\n  applyAriaDisabled: false,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSTabs {...testTabsExplicitDefinition} />\n    <DSTabs {...testTabsInferedTypeCompatibility}></DSTabs>\n    <DSTabs {...testTabsDefinitionAsConst}></DSTabs>\n\n    <DSTab {...testTabExplicitDefinition} />\n    <DSTab {...testTabInferedTypeCompatibility} />\n    <DSTab {...testTabDefinitionAsConst} />\n\n    {/* works with inline values */}\n    <DSTabs\n      containerProps={{}}\n      animated\n      enableMouseEvents={false}\n      allowTextSelection={false}\n      onTabChange={(tabId: string) => {}}\n      tabsListAriaLabel=\"Tab list\"\n      type={TAB_TYPES.NORMAL}\n      onlyRenderActiveTab={false}\n      withCarousel={false}\n      isDSMobile={false}\n      showSelectionIndicator\n      fixedTabsHeaders={false}\n      showSeparator\n      tabPanelsProps={{}}\n      swipeableViewsContainerProps={{}}\n      activeTab=\"\"\n      innerRef={divRef}\n      firstSubtabRef={buttonRef}\n      lastTabRef={buttonRef}\n      TabBarExtraContent={MockComponent}\n      tabBarExtraContent=\"\"\n    >\n      {[]}\n    </DSTabs>\n\n    <DSTab\n      disabled={false}\n      onClick={() => {}}\n      onKeyDown={() => {}}\n      ref={buttonRef}\n      required\n      style={{}}\n      title=\"\"\n      tabId=\"\"\n      applyAriaDisabled={false}\n    >\n      <div></div>\n    </DSTab>\n  </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACoB0B;AAjBjD,mBAAkB;AAClB,eAAyC;AAczC,MAAM,YAAY,aAAAA,QAAM,UAAU;AAClC,MAAM,SAAS,aAAAA,QAAM,UAAU;AAC/B,MAAM,gBAAqC,MAAM,4CAAC,SAAI;AAGtD,MAAM,wBAAyD;AAAA,EAC7D,WAAW;AAAA,EACX,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,oBAAoB;AACtB;AAGA,MAAM,uBAAuD;AAAA,EAC3D,UAAU,4CAAC,SAAI;AACjB;AAEA,MAAM,uBAAuD;AAAA,EAC3D,UAAU;AAAA,EACV,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB,KAAK;AAAA,EACL,UAAU;AAAA,EACV,OAAO,CAAC;AAAA,EACR,OAAO;AACT;AAMA,MAAM,0BAAmE;AAAA,EACvE,oBAAoB;AAAA,EACpB,YAAY;AAAA,EACZ,aAAa,CAAC,UAAkB;AAAA,EAAC;AAAA,EACjC,MAAM,mBAAU;AAAA,EAChB,eAAe;AACjB;AAEA,MAAM,gBAAuC;AAAA,EAC3C,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,wBAAwB;AAAA,EAC5B,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAAiE;AAAA,EACrE,OAAO;AACT;AAEA,MAAM,eAAqC;AAAA,EACzC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAAuB;AAAA,EAC3B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,2BAAqE;AAAA,EACzE,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,aAAa,CAAC,UAAkB;AAAA,EAAC;AAAA,EACjC,mBAAmB;AAAA,EACnB,MAAM,mBAAU;AAAA,EAChB,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,wBAAwB;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,gBAAgB,CAAC;AAAA,EACjB,8BAA8B,CAAC;AACjC;AAEA,MAAM,wBAAqD;AAAA,EACzD,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,gCAAgC;AAAA,EACpC,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,0BAAmE;AAAA,EACvE,OAAO;AAAA,EACP,mBAAmB;AACrB;AAKA,MAAM,6BAAoD;AAAA,EACxD,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,aAAa,CAAC,UAAkB;AAAA,EAAC;AAAA,EACjC,mBAAmB;AAAA,EACnB,MAAM,mBAAU;AAAA,EAChB,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,wBAAwB;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,gBAAgB,CAAC;AAAA,EACjB,8BAA8B,CAAC;AAAA,EAC/B,WAAW;AAAA,EACX,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,oBAAoB;AACtB;AAGA,MAAM,4BAAkD;AAAA,EACtD,UAAU,CAAC;AAAA,EACX,UAAU;AAAA,EACV,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB,KAAK;AAAA,EACL,UAAU;AAAA,EACV,OAAO,CAAC;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,mBAAmB;AACrB;AAKA,MAAM,mCAAmC;AAAA,EACvC,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,aAAa,CAAC,UAAkB;AAAA,EAAC;AAAA,EACjC,mBAAmB;AAAA,EACnB,MAAM,mBAAU;AAAA,EAChB,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,wBAAwB;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,gBAAgB,CAAC;AAAA,EACjB,8BAA8B,CAAC;AAAA,EAC/B,WAAW;AAAA,EACX,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,oBAAoB;AACtB;AAEA,MAAM,4BAA4B;AAAA,EAChC,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,aAAa,CAAC,UAAkB;AAAA,EAAC;AAAA,EACjC,mBAAmB;AAAA,EACnB,MAAM,mBAAU;AAAA,EAChB,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,wBAAwB;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,gBAAgB,CAAC;AAAA,EACjB,8BAA8B,CAAC;AAAA,EAC/B,WAAW;AAAA,EACX,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,oBAAoB;AACtB;AAGA,MAAM,kCAAkC;AAAA,EACtC,UAAU,4CAAC,SAAI;AAAA,EACf,UAAU;AAAA,EACV,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB,KAAK;AAAA,EACL,UAAU;AAAA,EACV,OAAO,CAAC;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,mBAAmB;AACrB;AAEA,MAAM,2BAA2B;AAAA,EAC/B,UAAU,4CAAC,SAAI;AAAA,EACf,UAAU;AAAA,EACV,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB,KAAK;AAAA,EACL,UAAU;AAAA,EACV,OAAO,CAAC;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,mBAAmB;AACrB;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,mBAAQ,GAAG,4BAA4B;AAAA,EACxC,4CAAC,mBAAQ,GAAG,kCAAkC;AAAA,EAC9C,4CAAC,mBAAQ,GAAG,2BAA2B;AAAA,EAEvC,4CAAC,kBAAO,GAAG,2BAA2B;AAAA,EACtC,4CAAC,kBAAO,GAAG,iCAAiC;AAAA,EAC5C,4CAAC,kBAAO,GAAG,0BAA0B;AAAA,EAGrC;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB,CAAC;AAAA,MACjB,UAAQ;AAAA,MACR,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,aAAa,CAAC,UAAkB;AAAA,MAAC;AAAA,MACjC,mBAAkB;AAAA,MAClB,MAAM,mBAAU;AAAA,MAChB,qBAAqB;AAAA,MACrB,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,wBAAsB;AAAA,MACtB,kBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,gBAAgB,CAAC;AAAA,MACjB,8BAA8B,CAAC;AAAA,MAC/B,WAAU;AAAA,MACV,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,oBAAoB;AAAA,MACpB,oBAAmB;AAAA,MAElB,WAAC;AAAA;AAAA,EACJ;AAAA,EAEA;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,SAAS,MAAM;AAAA,MAAC;AAAA,MAChB,WAAW,MAAM;AAAA,MAAC;AAAA,MAClB,KAAK;AAAA,MACL,UAAQ;AAAA,MACR,OAAO,CAAC;AAAA,MACR,OAAM;AAAA,MACN,OAAM;AAAA,MACN,mBAAmB;AAAA,MAEnB,sDAAC,SAAI;AAAA;AAAA,EACP;AAAA,GACF;",
   "names": ["React"]
 }

package/dist/cjs/utils/helpers.js

@@ -37,7 +37,7 @@ __export(helpers_exports, {
 });
 module.exports = __toCommonJS(helpers_exports);
 var React = __toESM(require("react"));
-var import_constants = require("./constants.js");
+var import_constants = require("../constants/index.js");
 const isElementVisible = (tab, tabList) => {
   const tabDimensions = tab.getBoundingClientRect();
   const tabListDimensions = tabList.getBoundingClientRect();

package/dist/cjs/utils/helpers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/helpers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\nimport { MOBILE_GRADIENT_WIDTH } from './constants.js';\n\ninterface VisibleDimensionsT {\n  width: number;\n  height: number;\n}\n\ninterface CenterTabPropsT {\n  e?: React.MouseEvent | React.FocusEvent;\n  listRef: React.MutableRefObject<HTMLDivElement | null>;\n}\n\nexport const isElementVisible = (tab: HTMLElement, tabList: HTMLElement): boolean => {\n  const tabDimensions = tab.getBoundingClientRect();\n  const tabListDimensions = tabList.getBoundingClientRect();\n\n  return tabDimensions.left <= tabListDimensions.left\n    ? tabListDimensions.left - tabDimensions.left <= tabDimensions.width\n    : tabDimensions.right - tabListDimensions.right <= tabDimensions.width;\n};\n\nexport const isElementVisibleCarousel = (\n  tab: HTMLElement | null,\n  tabContainer: HTMLDivElement | null,\n  firstOrLastItem = true,\n): boolean => {\n  if (tab && tabContainer) {\n    const tabDimensions = tab.getBoundingClientRect();\n    const tabContainerDimensions = tabContainer.getBoundingClientRect();\n\n    const offset = firstOrLastItem ? 16 : 32;\n    const tabDimensionsLeft = Math.floor(tabDimensions.left - offset);\n    const tabDimensionsRight = Math.floor(tabDimensions.right + offset);\n\n    const tabContainerDimensionsLeft = Math.floor(tabContainerDimensions.left);\n    const tabContainerDimensionsRight = Math.floor(tabContainerDimensions.right);\n\n    return tabDimensionsLeft >= tabContainerDimensionsLeft && tabDimensionsRight <= tabContainerDimensionsRight;\n  }\n  return false;\n};\n\nexport const centerTab = ({ e, listRef }: CenterTabPropsT) => {\n  if (listRef.current) {\n    const { offsetLeft } = e?.target as HTMLButtonElement;\n    const { width: tabWidth } = (e?.target as HTMLButtonElement).getBoundingClientRect();\n    const { width: listWidth } = listRef.current.getBoundingClientRect();\n    const extraSideSpace = listWidth - tabWidth;\n    const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;\n    const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;\n    listRef.current.scrollTo({\n      top: 0,\n      left: centeredLeftOffset,\n      behavior: 'smooth',\n    });\n\n    e?.preventDefault();\n  }\n};\n\nexport const getVisibleDimensions = (node: HTMLElement, referenceNode: HTMLElement): VisibleDimensionsT => {\n  const nodeDimensions = node.getBoundingClientRect();\n  const referenceNodeDimensions = referenceNode.getBoundingClientRect();\n\n  return {\n    width: Math.min(\n      node.clientWidth,\n      referenceNodeDimensions.left + referenceNode.clientWidth - nodeDimensions.left,\n      node.clientWidth - (referenceNodeDimensions.left - nodeDimensions.left),\n    ),\n    height: Math.min(\n      node.clientHeight,\n      referenceNodeDimensions.top + referenceNode.clientHeight - nodeDimensions.top,\n      node.clientHeight - (referenceNodeDimensions.top - nodeDimensions.top),\n    ),\n  };\n};\n\nexport const shouldHaveLeftGradient = (scrollLeft: number): boolean => Math.abs(scrollLeft) > MOBILE_GRADIENT_WIDTH;\n\nexport const shouldHaveRightGradient = (scrollLeft: number, clientWidth: number, scrollWidth: number): boolean =>\n  Math.abs(scrollLeft) <= scrollWidth - (clientWidth + MOBILE_GRADIENT_WIDTH);\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import type React from 'react';\nimport { MOBILE_GRADIENT_WIDTH } from '../constants/index.js';\n\ninterface VisibleDimensionsT {\n  width: number;\n  height: number;\n}\n\ninterface CenterTabPropsT {\n  e?: React.MouseEvent | React.FocusEvent;\n  listRef: React.MutableRefObject<HTMLDivElement | null>;\n}\n\nexport const isElementVisible = (tab: HTMLElement, tabList: HTMLElement): boolean => {\n  const tabDimensions = tab.getBoundingClientRect();\n  const tabListDimensions = tabList.getBoundingClientRect();\n\n  return tabDimensions.left <= tabListDimensions.left\n    ? tabListDimensions.left - tabDimensions.left <= tabDimensions.width\n    : tabDimensions.right - tabListDimensions.right <= tabDimensions.width;\n};\n\nexport const isElementVisibleCarousel = (\n  tab: HTMLElement | null,\n  tabContainer: HTMLDivElement | null,\n  firstOrLastItem = true,\n): boolean => {\n  if (tab && tabContainer) {\n    const tabDimensions = tab.getBoundingClientRect();\n    const tabContainerDimensions = tabContainer.getBoundingClientRect();\n\n    const offset = firstOrLastItem ? 16 : 32;\n    const tabDimensionsLeft = Math.floor(tabDimensions.left - offset);\n    const tabDimensionsRight = Math.floor(tabDimensions.right + offset);\n\n    const tabContainerDimensionsLeft = Math.floor(tabContainerDimensions.left);\n    const tabContainerDimensionsRight = Math.floor(tabContainerDimensions.right);\n\n    return tabDimensionsLeft >= tabContainerDimensionsLeft && tabDimensionsRight <= tabContainerDimensionsRight;\n  }\n  return false;\n};\n\nexport const centerTab = ({ e, listRef }: CenterTabPropsT) => {\n  if (listRef.current) {\n    const { offsetLeft } = e?.target as HTMLButtonElement;\n    const { width: tabWidth } = (e?.target as HTMLButtonElement).getBoundingClientRect();\n    const { width: listWidth } = listRef.current.getBoundingClientRect();\n    const extraSideSpace = listWidth - tabWidth;\n    const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;\n    const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;\n    listRef.current.scrollTo({\n      top: 0,\n      left: centeredLeftOffset,\n      behavior: 'smooth',\n    });\n\n    e?.preventDefault();\n  }\n};\n\nexport const getVisibleDimensions = (node: HTMLElement, referenceNode: HTMLElement): VisibleDimensionsT => {\n  const nodeDimensions = node.getBoundingClientRect();\n  const referenceNodeDimensions = referenceNode.getBoundingClientRect();\n\n  return {\n    width: Math.min(\n      node.clientWidth,\n      referenceNodeDimensions.left + referenceNode.clientWidth - nodeDimensions.left,\n      node.clientWidth - (referenceNodeDimensions.left - nodeDimensions.left),\n    ),\n    height: Math.min(\n      node.clientHeight,\n      referenceNodeDimensions.top + referenceNode.clientHeight - nodeDimensions.top,\n      node.clientHeight - (referenceNodeDimensions.top - nodeDimensions.top),\n    ),\n  };\n};\n\nexport const shouldHaveLeftGradient = (scrollLeft: number): boolean => Math.abs(scrollLeft) > MOBILE_GRADIENT_WIDTH;\n\nexport const shouldHaveRightGradient = (scrollLeft: number, clientWidth: number, scrollWidth: number): boolean =>\n  Math.abs(scrollLeft) <= scrollWidth - (clientWidth + MOBILE_GRADIENT_WIDTH);\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAsC;AAY/B,MAAM,mBAAmB,CAAC,KAAkB,YAAkC;AACnF,QAAM,gBAAgB,IAAI,sBAAsB;AAChD,QAAM,oBAAoB,QAAQ,sBAAsB;AAExD,SAAO,cAAc,QAAQ,kBAAkB,OAC3C,kBAAkB,OAAO,cAAc,QAAQ,cAAc,QAC7D,cAAc,QAAQ,kBAAkB,SAAS,cAAc;AACrE;AAEO,MAAM,2BAA2B,CACtC,KACA,cACA,kBAAkB,SACN;AACZ,MAAI,OAAO,cAAc;AACvB,UAAM,gBAAgB,IAAI,sBAAsB;AAChD,UAAM,yBAAyB,aAAa,sBAAsB;AAElE,UAAM,SAAS,kBAAkB,KAAK;AACtC,UAAM,oBAAoB,KAAK,MAAM,cAAc,OAAO,MAAM;AAChE,UAAM,qBAAqB,KAAK,MAAM,cAAc,QAAQ,MAAM;AAElE,UAAM,6BAA6B,KAAK,MAAM,uBAAuB,IAAI;AACzE,UAAM,8BAA8B,KAAK,MAAM,uBAAuB,KAAK;AAE3E,WAAO,qBAAqB,8BAA8B,sBAAsB;AAAA,EAClF;AACA,SAAO;AACT;AAEO,MAAM,YAAY,CAAC,EAAE,GAAG,QAAQ,MAAuB;AAC5D,MAAI,QAAQ,SAAS;AACnB,UAAM,EAAE,WAAW,IAAI,GAAG;AAC1B,UAAM,EAAE,OAAO,SAAS,KAAK,GAAG,QAA6B,sBAAsB;AACnF,UAAM,EAAE,OAAO,UAAU,IAAI,QAAQ,QAAQ,sBAAsB;AACnE,UAAM,iBAAiB,YAAY;AACnC,UAAM,qBAAqB,iBAAiB,IAAI,iBAAiB,IAAI;AACrE,UAAM,qBAAqB,aAAa,qBAAqB,aAAa,qBAAqB;AAC/F,YAAQ,QAAQ,SAAS;AAAA,MACvB,KAAK;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACZ,CAAC;AAED,OAAG,eAAe;AAAA,EACpB;AACF;AAEO,MAAM,uBAAuB,CAAC,MAAmB,kBAAmD;AACzG,QAAM,iBAAiB,KAAK,sBAAsB;AAClD,QAAM,0BAA0B,cAAc,sBAAsB;AAEpE,SAAO;AAAA,IACL,OAAO,KAAK;AAAA,MACV,KAAK;AAAA,MACL,wBAAwB,OAAO,cAAc,cAAc,eAAe;AAAA,MAC1E,KAAK,eAAe,wBAAwB,OAAO,eAAe;AAAA,IACpE;AAAA,IACA,QAAQ,KAAK;AAAA,MACX,KAAK;AAAA,MACL,wBAAwB,MAAM,cAAc,eAAe,eAAe;AAAA,MAC1E,KAAK,gBAAgB,wBAAwB,MAAM,eAAe;AAAA,IACpE;AAAA,EACF;AACF;AAEO,MAAM,yBAAyB,CAAC,eAAgC,KAAK,IAAI,UAAU,IAAI;AAEvF,MAAM,0BAA0B,CAAC,YAAoB,aAAqB,gBAC/E,KAAK,IAAI,UAAU,KAAK,eAAe,cAAc;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/utils/hooks/useTabsCallbacks.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport { centerTab } from '../helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\ninterface UseTabsCallbacksReturnTypeT {\n  handleOnTabChange: (tabId: string, e?: React.MouseEvent) => void;\n  handleOnMouseDown: (e: React.MouseEvent) => void;\n}\n\nexport const useTabsCallbacks = (): UseTabsCallbacksReturnTypeT => {\n  const {\n    setInternalActiveTab,\n    tabsListRef,\n    props: { onTabChange, isDSMobile, allowTextSelection, fixedTabsHeaders },\n  } = useContext(DSTabsContext);\n\n  const handleOnTabChange = useCallback(\n    (tabId: string, e?: React.MouseEvent) => {\n      setInternalActiveTab(tabId);\n      onTabChange(tabId, e);\n      if (isDSMobile && !fixedTabsHeaders && e) {\n        centerTab({ e, listRef: tabsListRef });\n      }\n    },\n    [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef],\n  );\n\n  const handleOnMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      const role = (e.target as HTMLElement).getAttribute('role');\n      if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();\n    },\n    [allowTextSelection],\n  );\n\n  return {\n    handleOnTabChange,\n    handleOnMouseDown,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwC;AACxC,qBAA0B;AAC1B,uBAA8B;AAOvB,MAAM,mBAAmB,MAAmC;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,aAAa,YAAY,oBAAoB,iBAAiB;AAAA,EACzE,QAAI,yBAAW,8BAAa;AAE5B,QAAM,wBAAoB;AAAA,IACxB,CAAC,OAAe,MAAyB;AACvC,2BAAqB,KAAK;AAC1B,kBAAY,OAAO,CAAC;AACpB,UAAI,cAAc,CAAC,oBAAoB,GAAG;AACxC,sCAAU,EAAE,GAAG,SAAS,YAAY,CAAC;AAAA,MACvC;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,YAAY,aAAa,sBAAsB,WAAW;AAAA,EAC/E;AAEA,QAAM,wBAAoB;AAAA,IACxB,CAAC,MAAwB;AACvB,YAAM,OAAQ,EAAE,OAAuB,aAAa,MAAM;AAC1D,UAAI,SAAS,cAAc,mBAAoB,GAAE,gBAAgB;AAAA,IACnE;AAAA,IACA,CAAC,kBAAkB;AAAA,EACrB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport { centerTab } from '../helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\ninterface UseTabsCallbacksReturnTypeT {\n  handleOnTabChange: (tabId: string, e?: React.MouseEvent) => void;\n  handleOnMouseDown: (e: React.MouseEvent) => void;\n}\n\nexport const useTabsCallbacks = (): UseTabsCallbacksReturnTypeT => {\n  const {\n    setInternalActiveTab,\n    tabsListRef,\n    props: { onTabChange, isDSMobile, allowTextSelection, fixedTabsHeaders },\n  } = useContext(DSTabsContext);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Main handler for active tab changes. It is responsible for:\n   * 1. Updating the internal active tab state\n   * 2. Notifying the user through the onTabChange callback\n   * 3. Centering the tab on mobile if needed\n   */\n  const handleOnTabChange = useCallback(\n    (tabId: string, e?: React.MouseEvent) => {\n      setInternalActiveTab(tabId);\n      onTabChange(tabId, e);\n      if (isDSMobile && !fixedTabsHeaders && e) {\n        centerTab({ e, listRef: tabsListRef });\n      }\n    },\n    [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef],\n  );\n\n  const handleOnMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      const role = (e.target as HTMLElement).getAttribute('role');\n      if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();\n    },\n    [allowTextSelection],\n  );\n\n  return {\n    handleOnTabChange,\n    handleOnMouseDown,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwC;AACxC,qBAA0B;AAC1B,uBAA8B;AAOvB,MAAM,mBAAmB,MAAmC;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,aAAa,YAAY,oBAAoB,iBAAiB;AAAA,EACzE,QAAI,yBAAW,8BAAa;AAQ5B,QAAM,wBAAoB;AAAA,IACxB,CAAC,OAAe,MAAyB;AACvC,2BAAqB,KAAK;AAC1B,kBAAY,OAAO,CAAC;AACpB,UAAI,cAAc,CAAC,oBAAoB,GAAG;AACxC,sCAAU,EAAE,GAAG,SAAS,YAAY,CAAC;AAAA,MACvC;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,YAAY,aAAa,sBAAsB,WAAW;AAAA,EAC/E;AAEA,QAAM,wBAAoB;AAAA,IACxB,CAAC,MAAwB;AACvB,YAAM,OAAQ,EAAE,OAAuB,aAAa,MAAM;AAC1D,UAAI,SAAS,cAAc,mBAAoB,GAAE,gBAAgB;AAAA,IACnE;AAAA,IACA,CAAC,kBAAkB;AAAA,EACrB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/DSTabs.js

@@ -1,24 +1,24 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { describe } from "@elliemae/ds-props-helpers";
-import { tabsPropTypes } from "./react-desc-prop-types.js";
+import { DSTabsPropTypes } from "./react-desc-prop-types.js";
 import { DSTabsContext, DSTabsCrossRefContext } from "./DSTabsCTX.js";
 import { TabsContent } from "./parts/tabsContent/TabsContent.js";
 import { useTabs } from "./config/useTabs.js";
 import { useCrossRef } from "./config/useCrossRef.js";
-import { TabTypes } from "./utils/constants.js";
+import { TAB_TYPES } from "./constants/index.js";
 const DSTabs = (props) => {
   const ctx = useTabs(props);
   const crossRefsCtx = useCrossRef();
   const { type } = props;
-  if (type === TabTypes.SUBTABS) {
+  if (type === TAB_TYPES.SUBTABS) {
     return /* @__PURE__ */ jsx(DSTabsContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(TabsContent, {}) });
   }
   return /* @__PURE__ */ jsx(DSTabsCrossRefContext.Provider, { value: crossRefsCtx, children: /* @__PURE__ */ jsx(DSTabsContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(TabsContent, {}) }) });
 };
 DSTabs.displayName = "DSTabs";
 const DSTabsWithSchema = describe(DSTabs);
-DSTabsWithSchema.propTypes = tabsPropTypes;
+DSTabsWithSchema.propTypes = DSTabsPropTypes;
 var DSTabs_default = DSTabs;
 export {
   DSTabs,

package/dist/esm/DSTabs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSTabs.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACmBf;AAlBR,SAAS,gBAAoC;AAC7C,SAAS,qBAAqB;AAC9B,SAAS,eAAe,6BAA6B;AACrD,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AAGzB,MAAM,SAAS,CAAC,UAAsC;AACpD,QAAM,MAAM,QAAQ,KAAK;AACzB,QAAM,eAAe,YAAY;AAEjC,QAAM,EAAE,KAAK,IAAI;AAEjB,MAAI,SAAS,SAAS,SAAS;AAC7B,WACE,oBAAC,cAAc,UAAd,EAAuB,OAAO,KAC7B,8BAAC,eAAY,GACf;AAAA,EAEJ;AAEA,SACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,cACrC,8BAAC,cAAc,UAAd,EAAuB,OAAO,KAC7B,8BAAC,eAAY,GACf,GACF;AAEJ;AAEA,OAAO,cAAc;AACrB,MAAM,mBAAmB,SAAS,MAAM;AACxC,iBAAiB,YAAY;AAG7B,IAAO,iBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACoBf;AAnBR,SAAS,gBAAoC;AAC7C,SAAS,uBAAuB;AAChC,SAAS,eAAe,6BAA6B;AACrD,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAG5B,SAAS,iBAAiB;AAE1B,MAAM,SAAS,CAAC,UAAsC;AACpD,QAAM,MAAM,QAAQ,KAAK;AACzB,QAAM,eAAe,YAAY;AAEjC,QAAM,EAAE,KAAK,IAAI;AAEjB,MAAI,SAAS,UAAU,SAAS;AAC9B,WACE,oBAAC,cAAc,UAAd,EAAuB,OAAO,KAC7B,8BAAC,eAAY,GACf;AAAA,EAEJ;AAEA,SACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,cACrC,8BAAC,cAAc,UAAd,EAAuB,OAAO,KAC7B,8BAAC,eAAY,GACf,GACF;AAEJ;AAEA,OAAO,cAAc;AACrB,MAAM,mBAAmB,SAAS,MAAM;AACxC,iBAAiB,YAAY;AAG7B,IAAO,iBAAQ;",
   "names": []
 }

package/dist/esm/DSTabsCTX.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { createContext, createRef } from "react";
-import { tabsDefaultProps as defaultProps } from "./react-desc-prop-types.js";
+import { DSTabsDefaultProps as defaultProps } from "./react-desc-prop-types.js";
 const noop = () => {
 };
 const defaultContext = {

package/dist/esm/DSTabsCTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSTabsCTX.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe,iBAAiB;AACzC,SAAS,oBAAoB,oBAAoB;AAIjD,MAAM,OAAO,MAAM;AAAC;AAEpB,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,SAAS,UAAoD;AAAA,EAC7D,aAAa,UAAiC;AAAA,EAC9C,qBAAqB,UAAiC;AAAA,EACtD,kBAAkB,UAAsC;AAAA,EACxD,gBAAgB,UAAsC;AAAA,EACtD,oBAAoB,UAAoC;AAAA,EACxD,sBAAsB;AAAA,EACtB,iBAAiB;AACnB;AAEA,MAAM,0BAA0B;AAAA,EAC9B,oBAAoB,UAAoC;AAAA,EACxD,wBAAwB,UAAoC;AAC9D;AAEO,MAAM,gBAAgB,cAAsD,cAAc;AAC1F,MAAM,wBAAwB,cAA0D,uBAAuB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe,iBAAiB;AACzC,SAAS,sBAAsB,oBAAoB;AAInD,MAAM,OAAO,MAAM;AAAC;AAEpB,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,SAAS,UAAoD;AAAA,EAC7D,aAAa,UAAiC;AAAA,EAC9C,qBAAqB,UAAiC;AAAA,EACtD,kBAAkB,UAAsC;AAAA,EACxD,gBAAgB,UAAsC;AAAA,EACtD,oBAAoB,UAAoC;AAAA,EACxD,sBAAsB;AAAA,EACtB,iBAAiB;AACnB;AAEA,MAAM,0BAA0B;AAAA,EAC9B,oBAAoB,UAAoC;AAAA,EACxD,wBAAwB,UAAoC;AAC9D;AAEO,MAAM,gBAAgB,cAAsD,cAAc;AAC1F,MAAM,wBAAwB,cAA0D,uBAAuB;",
   "names": []
 }

package/dist/esm/config/useTabs.js

@@ -1,9 +1,9 @@
 import * as React from "react";
 import React2, { useRef, useState, useMemo, useEffect } from "react";
 import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
-import { tabsDefaultProps } from "../react-desc-prop-types.js";
+import { DSTabsDefaultProps } from "../react-desc-prop-types.js";
 const useTabs = (props) => {
-  const propsWithDefaults = useMemoMergePropsWithDefault(props, tabsDefaultProps);
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, DSTabsDefaultProps);
   const { activeTab, children } = propsWithDefaults;
   const tabsRef = useRef({});
   const tabsRefAsArray = useRef([]);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useTabs.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,QAAQ,UAAU,SAAS,iBAAiB;AAC5D,SAAS,oCAAoC;AAC7C,SAAS,wBAAwB;AAI1B,MAAM,UAAU,CAAC,UAAiE;AACvF,QAAM,oBAAoB,6BAAoD,OAAO,gBAAgB;AAErG,QAAM,EAAE,WAAW,SAAS,IAAI;AAEhC,QAAM,UAAU,OAA0C,CAAC,CAAC;AAC5D,QAAM,iBAAiB,OAA4B,CAAC,CAAC;AACrD,QAAM,mBAAmB,OAA4B,CAAC,CAAC;AACvD,QAAM,sBAAsB,OAA8B,IAAI;AAC9D,QAAM,cAAc,OAA8B,IAAI;AACtD,QAAM,qBAAqB,OAAiC,IAAI;AAGhE,QAAM,sBAAsB,QAAQ,MAAM;AACxC,UAAM,gBAAgBA,OAAM,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,IAAI,SAAiB,mBAAmB;AAEtF,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QAAI,cAAc,OAAW,QAAO;AACpC,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,iBAAiB,CAAC;AAEjC,YAAU,MAAM;AACd,uBAAmB,UAAU,iBAAiB,QAAQ,KAAK,CAAC,OAAO,GAAG,QAAQ,UAAU,eAAe,KAAK;AAAA,EAC9G,GAAG,CAAC,eAAe,CAAC;AAEpB,YAAU,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,MAAM;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 * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,QAAQ,UAAU,SAAS,iBAAiB;AAC5D,SAAS,oCAAoC;AAC7C,SAAS,0BAA0B;AAI5B,MAAM,UAAU,CAAC,UAAiE;AACvF,QAAM,oBAAoB,6BAAoD,OAAO,kBAAkB;AAEvG,QAAM,EAAE,WAAW,SAAS,IAAI;AAEhC,QAAM,UAAU,OAA0C,CAAC,CAAC;AAC5D,QAAM,iBAAiB,OAA4B,CAAC,CAAC;AACrD,QAAM,mBAAmB,OAA4B,CAAC,CAAC;AACvD,QAAM,sBAAsB,OAA8B,IAAI;AAC9D,QAAM,cAAc,OAA8B,IAAI;AACtD,QAAM,qBAAqB,OAAiC,IAAI;AAGhE,QAAM,sBAAsB,QAAQ,MAAM;AACxC,UAAM,gBAAgBA,OAAM,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,IAAI,SAAiB,mBAAmB;AAEtF,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QAAI,cAAc,OAAW,QAAO;AACpC,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,iBAAiB,CAAC;AAEjC,YAAU,MAAM;AACd,uBAAmB,UAAU,iBAAiB,QAAQ,KAAK,CAAC,OAAO,GAAG,QAAQ,UAAU,eAAe,KAAK;AAAA,EAC9G,GAAG,CAAC,eAAe,CAAC;AAEpB,YAAU,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,MAAM;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/esm/constants/index.js

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+const DSTabsName = "DSTabs";
+const TAB_TYPES = {
+  NORMAL: "normal",
+  NORMAL_SMALL: "normal_small",
+  SUBTABS: "subtabs"
+};
+const TAB_TYPES_VALUES_AS_ARRAY = Object.values(TAB_TYPES);
+const MOBILE_GRADIENT_WIDTH = 24;
+const DEFAULT_INDICATOR_STYLES = {
+  left: 0,
+  width: 0
+};
+const GRADIENT_OFFSETS_ACCORDING_TYPE = {
+  NORMAL_SMALL: 14,
+  NORMAL: 16,
+  SUBTABS: 16,
+  FIXED_TABS_HEADERS: 0
+};
+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 = {
+  ...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"
+  }
+};
+export {
+  DEFAULT_INDICATOR_STYLES,
+  DSTabsName,
+  GRADIENT_OFFSETS_ACCORDING_TYPE,
+  MOBILE_GRADIENT_WIDTH,
+  TABS_DATA_TESTID,
+  TABS_SLOTS,
+  TAB_TYPES,
+  TAB_TYPES_VALUES_AS_ARRAY
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;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,GAAI,wBAAwB,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/esm/exported-related/DSTab.js

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { describe } from "@elliemae/ds-props-helpers";
-import { tabPropTypes } from "../react-desc-prop-types.js";
+import { DSTabPropTypes } from "../react-desc-prop-types.js";
 const DSTab = (props) => props.children;
 DSTab.displayName = "DSTab";
 const DSTabWithSchema = describe(DSTab);
-DSTabWithSchema.propTypes = tabPropTypes;
+DSTabWithSchema.propTypes = DSTabPropTypes;
 var DSTab_default = DSTab;
 export {
   DSTab,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/DSTab.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,gBAAoC;AAC7C,SAAS,oBAAoB;AAI7B,MAAM,QAAQ,CAAC,UAAwB,MAAM;AAE7C,MAAM,cAAc;AACpB,MAAM,kBAAkB,SAAS,KAAK;AACtC,gBAAgB,YAAY;AAG5B,IAAO,gBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,gBAAoC;AAC7C,SAAS,sBAAsB;AAI/B,MAAM,QAAQ,CAAC,UAAwB,MAAM;AAE7C,MAAM,cAAc;AACpB,MAAM,kBAAkB,SAAS,KAAK;AACtC,gBAAgB,YAAY;AAG5B,IAAO,gBAAQ;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,9 +1,22 @@
 import * as React from "react";
-export * from "./exported-related/DSTab.js";
-export * from "./DSTabs.js";
-import { TabTypes } from "./utils/constants.js";
-export * from "./DSTabsDatatestid.js";
+import { DSTabs, DSTabsWithSchema } from "./DSTabs.js";
+import {
+  TABS_SLOTS,
+  TABS_DATA_TESTID,
+  TABS_DATA_TESTID as TABS_DATA_TESTID2,
+  TAB_TYPES,
+  TAB_TYPES as TAB_TYPES2
+} from "./constants/index.js";
+import { DSTab, DSTabWithSchema } from "./exported-related/DSTab.js";
 export {
-  TabTypes
+  DSTab,
+  DSTabWithSchema,
+  DSTabs,
+  TABS_DATA_TESTID2 as DSTabsDatatestid,
+  DSTabsWithSchema,
+  TABS_DATA_TESTID,
+  TABS_SLOTS,
+  TAB_TYPES,
+  TAB_TYPES2 as TabTypes
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,SAAS,gBAAgB;AACzB,cAAc;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,wBAAwB;AAEzC;AAAA,EACE;AAAA,EACA;AAAA,EACoB,oBAApBA;AAAA,EACA;AAAA,EACa,aAAbC;AAAA,OACK;AACP,SAAS,OAAO,uBAAuB;",
+  "names": ["TABS_DATA_TESTID", "TAB_TYPES"]
 }

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

@@ -7,7 +7,7 @@ import { ChevronRight, ChevronLeft } from "@elliemae/ds-icons";
 import { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } from "./styles.js";
 import { useCarousel } from "./useCarousel.js";
 import { DSTabsContext } from "../../DSTabsCTX.js";
-import { DSTabsDatatestid } from "../../DSTabsDatatestid.js";
+import { TABS_DATA_TESTID } from "../../constants/index.js";
 const Carousel = ({ children, updateIndicatorStyle }) => {
   const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel({
     updateIndicatorStyle
@@ -23,7 +23,7 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
         size: "s",
         onClick: leftButtonOnClick,
         tabIndex: -1,
-        "data-testid": DSTabsDatatestid.CAROUSEL.BUTTON_LEFT,
+        "data-testid": TABS_DATA_TESTID.CAROUSEL_BUTTON_LEFT,
         buttonType: BUTTON_TYPES.ICON,
         "aria-label": "Scroll Left",
         children: /* @__PURE__ */ jsx(ChevronLeft, { size: DSIconSizes.S })
@@ -35,7 +35,7 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
         size: "s",
         onClick: rightButtonOnClick,
         tabIndex: -1,
-        "data-testid": DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT,
+        "data-testid": TABS_DATA_TESTID.CAROUSEL_BUTTON_RIGHT,
         buttonType: BUTTON_TYPES.ICON,
         "aria-label": "Scroll Right",
         children: /* @__PURE__ */ jsx(ChevronRight, { size: DSIconSizes.S })

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/Carousel.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext } from 'react';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport { 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACyBnB,SAWQ,KAXR;AAzBJ,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,cAAc,mBAAmB;AAC1C,SAAS,mBAAmB,6BAA6B,uBAAuB,0BAA0B;AAC1G,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAO1B,MAAM,WAAW,CAAC,EAAE,UAAU,qBAAqB,MAAmC;AAC3F,QAAM,EAAE,cAAc,mBAAmB,oBAAoB,eAAe,eAAe,IAAI,YAAY;AAAA,IACzG;AAAA,EACF,CAAC;AAED,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,IAAI,WAAW,aAAa;AAE5B,SACE,qBAAC,yBACE;AAAA,iBAAa,QACZ,oBAAC,+BAA4B,SAAS,MACpC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,iBAAiB,SAAS;AAAA,QACvC,YAAY,aAAa;AAAA,QACzB,cAAW;AAAA,QAEX,8BAAC,eAAY,MAAM,YAAY,GAAG;AAAA;AAAA,IACpC,GACF;AAAA,IAED,aAAa,SACZ,oBAAC,+BAA4B,SAAS,MAAM,OAAO,aAAa,OAC9D;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,iBAAiB,SAAS;AAAA,QACvC,YAAY,aAAa;AAAA,QACzB,cAAW;AAAA,QAEX,8BAAC,gBAAa,MAAM,YAAY,GAAG;AAAA;AAAA,IACrC,GACF;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext } from 'react';\nimport { 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACyBnB,SAWQ,KAXR;AAzBJ,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,cAAc,mBAAmB;AAC1C,SAAS,mBAAmB,6BAA6B,uBAAuB,0BAA0B;AAC1G,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAO1B,MAAM,WAAW,CAAC,EAAE,UAAU,qBAAqB,MAAmC;AAC3F,QAAM,EAAE,cAAc,mBAAmB,oBAAoB,eAAe,eAAe,IAAI,YAAY;AAAA,IACzG;AAAA,EACF,CAAC;AAED,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,IAAI,WAAW,aAAa;AAE5B,SACE,qBAAC,yBACE;AAAA,iBAAa,QACZ,oBAAC,+BAA4B,SAAS,MACpC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,iBAAiB;AAAA,QAC9B,YAAY,aAAa;AAAA,QACzB,cAAW;AAAA,QAEX,8BAAC,eAAY,MAAM,YAAY,GAAG;AAAA;AAAA,IACpC,GACF;AAAA,IAED,aAAa,SACZ,oBAAC,+BAA4B,SAAS,MAAM,OAAO,aAAa,OAC9D;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,iBAAiB;AAAA,QAC9B,YAAY,aAAa;AAAA,QACzB,cAAW;AAAA,QAEX,8BAAC,gBAAa,MAAM,YAAY,GAAG;AAAA;AAAA,IACrC,GACF;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { styled } from "@elliemae/ds-system";
 import { DSButtonV2 } from "@elliemae/ds-button-v2";
-import { TabTypes } from "../../utils/constants.js";
+import { TAB_TYPES } from "../../constants/index.js";
 const StyledCarouselBtn = styled(DSButtonV2)`
   margin: 0;
   min-width: ${({ theme }) => theme.space.xs};
@@ -34,10 +34,10 @@ const StyledCarouselButtonWrapper = styled.div`
   z-index: 200;
   ${({ right }) => right ? "right: 0;" : `left: 0;`}
   width: 16px;
-  height: ${({ tabType }) => tabType === TabTypes.NORMAL ? "32px" : "22px"};
-  padding-top: ${({ tabType }) => tabType === TabTypes.NORMAL ? "5px" : "0px"};
+  height: ${({ tabType }) => tabType === TAB_TYPES.NORMAL ? "32px" : "22px"};
+  padding-top: ${({ tabType }) => tabType === TAB_TYPES.NORMAL ? "5px" : "0px"};
   background: white;
-  ${({ theme, tabType }) => tabType === TabTypes.NORMAL ? `
+  ${({ theme, tabType }) => tabType === 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/esm/parts/carousel/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AAQlB,MAAM,oBAAoB,OAAO,UAAU;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,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,EAAE,MAAM,MAAO,QAAQ,cAAc,UAAW;AAAA;AAAA,YAEzC,CAAC,EAAE,QAAQ,MAAO,YAAY,SAAS,SAAS,SAAS,MAAO;AAAA,iBAC3D,CAAC,EAAE,QAAQ,MAAO,YAAY,SAAS,SAAS,QAAQ,KAAM;AAAA;AAAA,IAE3E,CAAC,EAAE,OAAO,QAAQ,MAClB,YAAY,SAAS,SACjB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,GAAG,CAAC,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,KAE1H,EAAE;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAG3B,SAAS,iBAAiB;AAOnB,MAAM,oBAAuC,OAAO,UAAU;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,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,EAAE,MAAM,MAAO,QAAQ,cAAc,UAAW;AAAA;AAAA,YAEzC,CAAC,EAAE,QAAQ,MAAO,YAAY,UAAU,SAAS,SAAS,MAAO;AAAA,iBAC5D,CAAC,EAAE,QAAQ,MAAO,YAAY,UAAU,SAAS,QAAQ,KAAM;AAAA;AAAA,IAE5E,CAAC,EAAE,OAAO,QAAQ,MAClB,YAAY,UAAU,SAClB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,GAAG,CAAC,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,KAE1H,EAAE;AAAA;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/useCarouselCallbacks.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,kBAAkB;AAExC,SAAS,gCAAgC;AACzC,SAAS,qBAAqB;AAcvB,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,MAAmE;AACjE,QAAM,EAAE,kBAAkB,oBAAoB,IAAI,WAAW,aAAa;AAE1E,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAE/C,QAAM,oBAAoB,YAAY,MAAM;AAC1C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAE/C,QAAM,iBAAiB,YAAY,MAAM;AACvC,mBAAe;AACf,QAAI,qBAAsB,sBAAqB;AAAA,EACjD,GAAG,CAAC,gBAAgB,oBAAoB,CAAC;AAEzC,QAAM,gBAAgB;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,CAAC,yBAAyB,WAAW,SAAS,eAAe,KAC7D,qBACA,oBAAoB,SACpB;AACA,gBAAM,iBAAiB,kBAAkB;AACzC,gBAAM,gBAAgB,iBAAiB;AACvC,gBAAM,wBAAwB,oBAAoB,OAAO,kBAAkB;AAC3E,gBAAM,sBAAsB,wBAAwB;AACpD,gBAAM,QAAQ,UAAU,cAAc;AAEtC,cAAI,sBAAsB,eAAe;AACvC,gCAAoB,QAAQ,cAAc,QAAQ,sBAAsB;AAAA,UAC1E,OAAO;AACL,gCAAoB,QAAQ,cAAc,sBAAsB;AAAA,UAClE;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,mBAAmB;AAAA,EACxC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,kBAAkB;AAExC,SAAS,gCAAgC;AACzC,SAAS,qBAAqB;AAcvB,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,MAAmE;AACjE,QAAM,EAAE,kBAAkB,oBAAoB,IAAI,WAAW,aAAa;AAE1E,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAE/C,QAAM,oBAAoB,YAAY,MAAM;AAC1C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAQ/C,QAAM,iBAAiB,YAAY,MAAM;AACvC,mBAAe;AACf,QAAI,qBAAsB,sBAAqB;AAAA,EACjD,GAAG,CAAC,gBAAgB,oBAAoB,CAAC;AASzC,QAAM,gBAAgB;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,CAAC,yBAAyB,WAAW,SAAS,eAAe,KAC7D,qBACA,oBAAoB,SACpB;AACA,gBAAM,iBAAiB,kBAAkB;AACzC,gBAAM,gBAAgB,iBAAiB;AACvC,gBAAM,wBAAwB,oBAAoB,OAAO,kBAAkB;AAC3E,gBAAM,sBAAsB,wBAAwB;AACpD,gBAAM,QAAQ,UAAU,cAAc;AAEtC,cAAI,sBAAsB,eAAe;AACvC,gCAAoB,QAAQ,cAAc,QAAQ,sBAAsB;AAAA,UAC1E,OAAO;AACL,gCAAoB,QAAQ,cAAc,sBAAsB;AAAA,UAClE;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,mBAAmB;AAAA,EACxC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }