@elliemae/ds-tabs 3.52.1 → 3.53.0-alpha.2

package/dist/cjs/DSTabsCTX.js

@@ -34,24 +34,12 @@ __export(DSTabsCTX_exports, {
 module.exports = __toCommonJS(DSTabsCTX_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_react_desc_prop_types = require("./react-desc-prop-types.js");
-const noop = () => {
-};
-const defaultContext = {
-  props: import_react_desc_prop_types.DSTabsDefaultProps,
-  tabsRef: (0, import_react.createRef)(),
-  tabsListRef: (0, import_react.createRef)(),
-  carouselOnlyListRef: (0, import_react.createRef)(),
-  focusableTabsRef: (0, import_react.createRef)(),
-  tabsRefAsArray: (0, import_react.createRef)(),
-  actualActiveTabRef: (0, import_react.createRef)(),
-  setInternalActiveTab: noop,
-  actualActiveTab: ""
-};
 const defaultCrossRefsContext = {
   lastTabInternalRef: (0, import_react.createRef)(),
   firstSubtabInternalRef: (0, import_react.createRef)()
 };
-const DSTabsContext = (0, import_react.createContext)(defaultContext);
+const DSTabsContext = (0, import_react.createContext)(
+  {}
+);
 const DSTabsCrossRefContext = (0, import_react.createContext)(defaultCrossRefsContext);
 //# sourceMappingURL=DSTabsCTX.js.map

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 { 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"]
+  "sourcesContent": ["import { createContext, createRef } from 'react';\n// import { 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\n// const noop = () => {};\n\n// const 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//   userDidChangeTabAtleastOnceRef: createRef<{ current: boolean }>(false),\n//   setInternalActiveTab: noop,\n//   actualActiveTab: '',\n//   globalClickHandler: noop,\n//   updateIndicatorStyle: noop,\n//   updateMobileGradients: noop,\n//   setIndicatorStyle: noop,\n//   indicatorStyle: { left: 0, width: 0 },\n//   mobileGradients: { right: false, left: false },\n// } as DSTabsInternalsT.DSTabsUseTabsContextT;\n\nconst defaultCrossRefsContext = {\n  lastTabInternalRef: createRef<HTMLButtonElement | null>(),\n  firstSubtabInternalRef: createRef<HTMLButtonElement | null>(),\n};\n\nexport const DSTabsContext = createContext<DSTabsInternalsT.DSTabsUseTabsContextT>(\n  {} as unknown as DSTabsInternalsT.DSTabsUseTabsContextT,\n);\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;AA0BzC,MAAM,0BAA0B;AAAA,EAC9B,wBAAoB,wBAAoC;AAAA,EACxD,4BAAwB,wBAAoC;AAC9D;AAEO,MAAM,oBAAgB;AAAA,EAC3B,CAAC;AACH;AACO,MAAM,4BAAwB,4BAA0D,uBAAuB;",
+  "names": []
 }

package/dist/cjs/{parts/tabBar → config}/useResizeObserver.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/parts/tabBar/useResizeObserver.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../src/config/useResizeObserver.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { useEffect, useMemo, useState } from 'react';\nimport raf from 'raf';\nimport ResizeObserver from 'resize-observer-polyfill';\n\ntype HandlerT = (measures: { width: number; height: number }, element: Element) => void;\n\nexport const useResizeObserver = (handler: HandlerT, el: HTMLElement | null) => {\n  const [node, setRef] = useState(el);\n\n  const resizeObserver = useMemo(\n    () =>\n      new ResizeObserver((entries) => {\n        if (!Array.isArray(entries)) return;\n        if (!entries.length) return;\n        const entry = entries[0];\n\n        // execute on the next animation frame\n        raf(() =>\n          handler(\n            {\n              width: (entry.target as HTMLElement).offsetWidth,\n              height: (entry.target as HTMLElement).offsetHeight,\n            },\n            entry.target,\n          ),\n        );\n      }),\n    [handler],\n  );\n\n  const htmlEl = el || node;\n\n  useEffect(() => {\n    if (htmlEl) resizeObserver.observe(htmlEl);\n    return () => {\n      if (htmlEl) resizeObserver.unobserve(htmlEl);\n    };\n  }, [htmlEl, resizeObserver]);\n\n  return [setRef];\n};\n\nexport default useResizeObserver;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA6C;AAC7C,iBAAgB;AAChB,sCAA2B;AAIpB,MAAM,oBAAoB,CAAC,SAAmB,OAA2B;AAC9E,QAAM,CAAC,MAAM,MAAM,QAAI,uBAAS,EAAE;AAElC,QAAM,qBAAiB;AAAA,IACrB,MACE,IAAI,gCAAAA,QAAe,CAAC,YAAY;AAC9B,UAAI,CAAC,MAAM,QAAQ,OAAO,EAAG;AAC7B,UAAI,CAAC,QAAQ,OAAQ;AACrB,YAAM,QAAQ,QAAQ,CAAC;AAGvB,qBAAAC;AAAA,QAAI,MACF;AAAA,UACE;AAAA,YACE,OAAQ,MAAM,OAAuB;AAAA,YACrC,QAAS,MAAM,OAAuB;AAAA,UACxC;AAAA,UACA,MAAM;AAAA,QACR;AAAA,MACF;AAAA,IACF,CAAC;AAAA,IACH,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,SAAS,MAAM;AAErB,8BAAU,MAAM;AACd,QAAI,OAAQ,gBAAe,QAAQ,MAAM;AACzC,WAAO,MAAM;AACX,UAAI,OAAQ,gBAAe,UAAU,MAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,QAAQ,cAAc,CAAC;AAE3B,SAAO,CAAC,MAAM;AAChB;AAEA,IAAO,4BAAQ;",
   "names": ["ResizeObserver", "raf"]

package/dist/cjs/config/useTabs.js

@@ -35,9 +35,12 @@ var React = __toESM(require("react"));
 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");
+var import_helpers = require("../utils/helpers.js");
+var import_useResizeObserver = require("./useResizeObserver.js");
+var import_constants = require("../constants/index.js");
 const useTabs = (props) => {
   const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.DSTabsDefaultProps);
-  const { activeTab, children } = propsWithDefaults;
+  const { activeTab, children, onTabChange, isDSMobile, fixedTabsHeaders, showSelectionIndicator } = propsWithDefaults;
   const tabsRef = (0, import_react.useRef)({});
   const tabsRefAsArray = (0, import_react.useRef)([]);
   const focusableTabsRef = (0, import_react.useRef)([]);
@@ -64,6 +67,93 @@ const useTabs = (props) => {
       setInternalActiveTab(firstAvailableTab?.dataset.tabId || "");
     }
   }, [activeTab]);
+  const [mobileGradients, setMobileGradients] = (0, import_react.useState)({
+    left: false,
+    right: false
+  });
+  const [indicatorStyle, setIndicatorStyle] = (0, import_react.useState)(import_constants.DEFAULT_INDICATOR_STYLES);
+  const getIndicatorStyles = import_react.default.useCallback(() => {
+    if (tabsListRef.current) {
+      const tabList = tabsListRef.current;
+      const activeTabButton = actualActiveTabRef.current;
+      if (!activeTabButton || !(0, import_helpers.isElementVisible)(activeTabButton, tabList)) return import_constants.DEFAULT_INDICATOR_STYLES;
+      const missingMargins = isDSMobile ? 0 : 16;
+      const tabClientWidth = isDSMobile && !fixedTabsHeaders ? activeTabButton.clientWidth : activeTabButton.clientWidth + missingMargins * 2;
+      const position = isDSMobile && !fixedTabsHeaders ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;
+      return {
+        left: Math.round(position),
+        width: Math.round(tabClientWidth)
+      };
+    }
+    return import_constants.DEFAULT_INDICATOR_STYLES;
+  }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);
+  const updateIndicatorStyle = import_react.default.useCallback(
+    () => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100),
+    [getIndicatorStyles, setIndicatorStyle]
+  );
+  (0, import_useResizeObserver.useResizeObserver)(updateIndicatorStyle, tabsListRef.current);
+  (0, import_useResizeObserver.useResizeObserver)(updateIndicatorStyle, actualActiveTabRef.current);
+  const updateMobileGradients = import_react.default.useCallback(() => {
+    if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {
+      const { scrollLeft, scrollWidth, clientWidth } = tabsListRef.current;
+      setMobileGradients({
+        left: (0, import_helpers.shouldHaveLeftGradient)(scrollLeft),
+        right: (0, import_helpers.shouldHaveRightGradient)(scrollLeft, clientWidth, scrollWidth)
+      });
+    }
+  }, [fixedTabsHeaders, isDSMobile, tabsListRef]);
+  import_react.default.useLayoutEffect(() => {
+    if (showSelectionIndicator) {
+      updateIndicatorStyle();
+    }
+    if (isDSMobile && !fixedTabsHeaders) {
+      updateMobileGradients();
+    }
+  }, [
+    updateMobileGradients,
+    updateIndicatorStyle,
+    isDSMobile,
+    fixedTabsHeaders,
+    actualActiveTab,
+    showSelectionIndicator
+  ]);
+  const userDidChangeTabAtleastOnceRef = (0, import_react.useRef)(false);
+  const handleOnTabChange = import_react.default.useCallback(
+    (tabId, e) => {
+      setInternalActiveTab(tabId);
+      onTabChange(tabId, e);
+      userDidChangeTabAtleastOnceRef.current = true;
+      if (isDSMobile && !fixedTabsHeaders && e) {
+        (0, import_helpers.centerTab)({ e, listRef: tabsListRef });
+      }
+    },
+    [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef]
+  );
+  const globalClickHandler = import_react.default.useCallback(
+    (data) => {
+      if (data.target === "panel") {
+        if (propsWithDefaults.allowTextSelection) {
+          data.event.stopPropagation();
+        }
+      }
+      if (data.target === "tabsList") {
+        const target = data.event.target;
+        const { dataset, ariaDisabled } = target;
+        if (dataset.tabId && ariaDisabled !== "true") {
+          if (isDSMobile && !fixedTabsHeaders && data.event) {
+            (0, import_helpers.centerTab)({ e: data.event, listRef: tabsListRef });
+          }
+        }
+      }
+      if (data.target === "swipeableViews") {
+        handleOnTabChange(data.tabId);
+      }
+      if (data.target === "tabItem" && data.tabId && !data.event.currentTarget.disabled) {
+        handleOnTabChange(data.tabId, data.event);
+      }
+    },
+    [propsWithDefaults.allowTextSelection, handleOnTabChange, tabsListRef, fixedTabsHeaders, isDSMobile]
+  );
   const ctx = (0, import_react.useMemo)(
     () => ({
       props: propsWithDefaults,
@@ -74,9 +164,27 @@ const useTabs = (props) => {
       setInternalActiveTab,
       actualActiveTab,
       actualActiveTabRef,
-      carouselOnlyListRef
+      carouselOnlyListRef,
+      globalClickHandler,
+      updateIndicatorStyle,
+      setIndicatorStyle,
+      indicatorStyle,
+      mobileGradients,
+      updateMobileGradients,
+      handleOnTabChange,
+      userDidChangeTabAtleastOnceRef
     }),
-    [actualActiveTab, propsWithDefaults]
+    [
+      propsWithDefaults,
+      actualActiveTab,
+      globalClickHandler,
+      updateIndicatorStyle,
+      indicatorStyle,
+      mobileGradients,
+      updateMobileGradients,
+      handleOnTabChange,
+      userDidChangeTabAtleastOnceRef
+    ]
   );
   return ctx;
 };

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

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

package/dist/cjs/constants/index.js

@@ -67,7 +67,8 @@ const TABS_SLOTS = {
   SUB_TAB_LIST: "subtabs-list",
   TAB_LIST: "tab-list",
   CAROUSEL_BUTTON_RIGHT: "chevron-right",
-  CAROUSEL_BUTTON_LEFT: "chevron-left"
+  CAROUSEL_BUTTON_LEFT: "chevron-left",
+  TABS_SWIPE_CARD: "tabs-swipe-card"
 };
 const TABS_DATA_TESTID = {
   ...(0, import_ds_system.slotObjectToDataTestIds)(DSTabsName, TABS_SLOTS),

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

@@ -1,7 +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;",
+  "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  TABS_SWIPE_CARD: 'tabs-swipe-card',\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;AAAA,EACtB,iBAAiB;AACnB;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/index.js

@@ -32,6 +32,7 @@ __export(index_exports, {
   DSTabWithSchema: () => import_DSTab.DSTabWithSchema,
   DSTabs: () => import_DSTabs.DSTabs,
   DSTabsDatatestid: () => import_constants.TABS_DATA_TESTID,
+  DSTabsName: () => import_constants.DSTabsName,
   DSTabsWithSchema: () => import_DSTabs.DSTabsWithSchema,
   TABS_DATA_TESTID: () => import_constants.TABS_DATA_TESTID,
   TABS_SLOTS: () => import_constants.TABS_SLOTS,

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "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;",
+  "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  DSTabsName,\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;AAAA;ACAA,YAAuB;ADAvB,oBAAyC;AAEzC,uBAOO;AACP,mBAAuC;",
   "names": []
 }

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

@@ -37,6 +37,7 @@ var import_react = require("react");
 var import_ds_icon = require("@elliemae/ds-icon");
 var import_ds_button_v2 = require("@elliemae/ds-button-v2");
 var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_styles = require("./styles.js");
 var import_useCarousel = require("./useCarousel.js");
 var import_DSTabsCTX = require("../../DSTabsCTX.js");
@@ -47,11 +48,13 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
   });
   const {
     carouselOnlyListRef,
+    props,
     props: { type }
   } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
+  const { getOwnerProps } = (0, import_ds_props_helpers.useOwnerProps)(props);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledCarouselWrapper, { children: [
     showChevrons.left && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCarouselButtonWrapper, { tabType: type, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_styles.StyledCarouselBtn,
+      import_styles.StyledCarouselBtnLeft,
       {
         size: "s",
         onClick: leftButtonOnClick,
@@ -59,11 +62,12 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
         "data-testid": import_constants.TABS_DATA_TESTID.CAROUSEL_BUTTON_LEFT,
         buttonType: import_ds_button_v2.BUTTON_TYPES.ICON,
         "aria-label": "Scroll Left",
+        getOwnerProps,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronLeft, { size: import_ds_icon.DSIconSizes.S })
       }
     ) }),
     showChevrons.right && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCarouselButtonWrapper, { tabType: type, right: showChevrons.right, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_styles.StyledCarouselBtn,
+      import_styles.StyledCarouselBtnRight,
       {
         size: "s",
         onClick: rightButtonOnClick,
@@ -71,6 +75,7 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
         "data-testid": import_constants.TABS_DATA_TESTID.CAROUSEL_BUTTON_RIGHT,
         buttonType: import_ds_button_v2.BUTTON_TYPES.ICON,
         "aria-label": "Scroll Right",
+        getOwnerProps,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronRight, { size: import_ds_icon.DSIconSizes.S })
       }
     ) }),

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 { 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;",
+  "sourcesContent": ["import { useContext } from 'react';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport {\n  StyledCarouselBtnLeft,\n  StyledCarouselBtnRight,\n  StyledCarouselButtonWrapper,\n  StyledCarouselWrapper,\n  StyledChildrenWrap,\n} from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { TABS_DATA_TESTID } from '../../constants/index.js';\n\ninterface CarouselPropsT {\n  children: React.ReactNode;\n  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,\n    props: { type },\n  } = useContext(DSTabsContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n\n  return (\n    <StyledCarouselWrapper>\n      {showChevrons.left && (\n        <StyledCarouselButtonWrapper tabType={type}>\n          <StyledCarouselBtnLeft\n            size=\"s\"\n            onClick={leftButtonOnClick}\n            tabIndex={-1}\n            data-testid={TABS_DATA_TESTID.CAROUSEL_BUTTON_LEFT}\n            buttonType={BUTTON_TYPES.ICON}\n            aria-label=\"Scroll Left\"\n            getOwnerProps={getOwnerProps}\n          >\n            <ChevronLeft size={DSIconSizes.S} />\n          </StyledCarouselBtnLeft>\n        </StyledCarouselButtonWrapper>\n      )}\n      {showChevrons.right && (\n        <StyledCarouselButtonWrapper tabType={type} right={showChevrons.right}>\n          <StyledCarouselBtnRight\n            size=\"s\"\n            onClick={rightButtonOnClick}\n            tabIndex={-1}\n            data-testid={TABS_DATA_TESTID.CAROUSEL_BUTTON_RIGHT}\n            buttonType={BUTTON_TYPES.ICON}\n            aria-label=\"Scroll Right\"\n            getOwnerProps={getOwnerProps}\n          >\n            <ChevronRight size={DSIconSizes.S} />\n          </StyledCarouselBtnRight>\n        </StyledCarouselButtonWrapper>\n      )}\n      <StyledChildrenWrap\n        role=\"tablist\"\n        innerRef={carouselOnlyListRef}\n        onClick={handleOnClick}\n        onScroll={handleOnScroll}\n      >\n        {children}\n      </StyledChildrenWrap>\n    </StyledCarouselWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCnB;AAnCJ,mBAA2B;AAC3B,qBAA4B;AAC5B,0BAA6B;AAC7B,sBAA0C;AAC1C,8BAA8B;AAC9B,oBAMO;AACP,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;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,QAAI,yBAAW,8BAAa;AAE5B,QAAM,EAAE,cAAc,QAAI,uCAAc,KAAK;AAE7C,SACE,6CAAC,uCACE;AAAA,iBAAa,QACZ,4CAAC,6CAA4B,SAAS,MACpC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,kCAAiB;AAAA,QAC9B,YAAY,iCAAa;AAAA,QACzB,cAAW;AAAA,QACX;AAAA,QAEA,sDAAC,+BAAY,MAAM,2BAAY,GAAG;AAAA;AAAA,IACpC,GACF;AAAA,IAED,aAAa,SACZ,4CAAC,6CAA4B,SAAS,MAAM,OAAO,aAAa,OAC9D;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,kCAAiB;AAAA,QAC9B,YAAY,iCAAa;AAAA,QACzB,cAAW;AAAA,QACX;AAAA,QAEA,sDAAC,gCAAa,MAAM,2BAAY,GAAG;AAAA;AAAA,IACrC,GACF;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;",
   "names": []
 }

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

@@ -28,7 +28,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styles_exports = {};
 __export(styles_exports, {
-  StyledCarouselBtn: () => StyledCarouselBtn,
+  StyledCarouselBtnLeft: () => StyledCarouselBtnLeft,
+  StyledCarouselBtnRight: () => StyledCarouselBtnRight,
   StyledCarouselButtonWrapper: () => StyledCarouselButtonWrapper,
   StyledCarouselWrapper: () => StyledCarouselWrapper,
   StyledChildrenWrap: () => StyledChildrenWrap
@@ -38,7 +39,7 @@ 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("../../constants/index.js");
-const StyledCarouselBtn = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2)`
+const baseCarouselButtonStyles = import_ds_system.css`
   margin: 0;
   min-width: ${({ theme }) => theme.space.xs};
   width: ${({ theme }) => theme.space.xs};
@@ -53,6 +54,18 @@ const StyledCarouselBtn = (0, import_ds_system.styled)(import_ds_button_v2.DSBut
     fill: ${({ theme }) => theme.colors.brand[600]};
   }
 `;
+const StyledCarouselBtnLeft = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, {
+  name: import_constants.DSTabsName,
+  slot: import_constants.TABS_SLOTS.CAROUSEL_BUTTON_LEFT
+})`
+  ${baseCarouselButtonStyles}
+`;
+const StyledCarouselBtnRight = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, {
+  name: import_constants.DSTabsName,
+  slot: import_constants.TABS_SLOTS.CAROUSEL_BUTTON_RIGHT
+})`
+  ${baseCarouselButtonStyles}
+`;
 const StyledCarouselWrapper = import_ds_system.styled.span`
   position: relative;
   width: 100%;

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

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

@@ -34,24 +34,30 @@ module.exports = __toCommonJS(TabBar_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 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_constants = require("../../constants/index.js");
 var import_TabBarItemRenderer = require("./TabBarItemRenderer.js");
-var import_useTabsCallbacks = require("../../utils/hooks/useTabsCallbacks.js");
 const TabBar = () => {
   const {
     tabsListRef,
-    props: { type, fixedTabsHeaders, withCarousel, isDSMobile }
+    props,
+    props: { type, fixedTabsHeaders, withCarousel, isDSMobile },
+    globalClickHandler,
+    indicatorStyle,
+    mobileGradients,
+    updateMobileGradients,
+    updateIndicatorStyle
   } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
-  const { handleOnTabChange } = (0, import_useTabsCallbacks.useTabsCallbacks)();
-  const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = (0, import_useTabBar.useTabBar)();
+  const { getOwnerProps, getOwnerPropsArguments } = (0, import_ds_props_helpers.useOwnerProps)(props);
   if (type === import_constants.TAB_TYPES.SUBTABS && !isDSMobile) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_styles.StyledSubTabsList,
       {
+        getOwnerProps,
+        getOwnerPropsArguments,
         withCarousel,
         "data-testid": import_constants.TABS_DATA_TESTID.SUB_TAB_LIST,
         role: withCarousel ? void 0 : "tablist",
@@ -63,6 +69,8 @@ const TabBar = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_styles.StyledTabList,
     {
+      getOwnerProps,
+      getOwnerPropsArguments,
       withCarousel,
       role: withCarousel ? void 0 : "tablist",
       innerRef: tabsListRef,
@@ -73,13 +81,8 @@ const TabBar = () => {
       onScroll: updateMobileGradients,
       indicatorStyle,
       tabType: type,
-      onMouseDown: (e) => {
-        const target = e.target;
-        const { dataset, ariaDisabled } = target;
-        if (dataset.tabId && ariaDisabled !== "true") {
-          handleOnTabChange(dataset.tabId, e);
-          updateIndicatorStyle();
-        }
+      onClick: (e) => {
+        globalClickHandler({ event: e, target: "tabsList" });
       },
       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: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabBarItemRenderer.TabBarItemRenderer, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabBarItemRenderer.TabBarItemRenderer, {}) }),

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

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

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

@@ -35,12 +35,10 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react2 = __toESM(require("react"));
-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_useTabsCallbacks = require("../../utils/hooks/useTabsCallbacks.js");
 var import_constants = require("../../constants/index.js");
 const TabBarItemRenderer = import_react2.default.memo(() => {
   const {
@@ -49,12 +47,11 @@ const TabBarItemRenderer = import_react2.default.memo(() => {
     tabsRefAsArray,
     carouselOnlyListRef,
     actualActiveTab,
-    props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs }
+    props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },
+    globalClickHandler
   } = (0, import_react2.useContext)(import_DSTabsCTX.DSTabsContext);
   const { lastTabInternalRef, firstSubtabInternalRef } = (0, import_react2.useContext)(import_DSTabsCTX.DSTabsCrossRefContext);
-  const { handleOnTabChange } = (0, import_useTabsCallbacks.useTabsCallbacks)();
   const { handleOnKeyDown } = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
-  const { updateIndicatorStyle } = (0, import_useTabBar.useTabBar)();
   const availableTabIndexes = [];
   return import_react2.default.Children.map(tabs, (tab, index) => {
     const {
@@ -69,11 +66,16 @@ const TabBarItemRenderer = import_react2.default.memo(() => {
       onKeyDown,
       ...rest
     } = tab.props;
+    const getOwnerProps = () => tab.props;
+    const getOwnerPropsArguments = () => ({ tabId });
     if (!disabled) availableTabIndexes.push(index);
+    const ButtonComponent = type === import_constants.TAB_TYPES.SUBTABS ? import_styles.StyledSubTabButton : import_styles.StyledTabButton;
     return /* @__PURE__ */ (0, import_react.createElement)(
-      import_styles.StyledTabButton,
+      ButtonComponent,
       {
         ...rest,
+        getOwnerProps,
+        getOwnerPropsArguments,
         key: tabId,
         role: "tab",
         innerRef: (tabButtonRef) => {
@@ -110,8 +112,7 @@ const TabBarItemRenderer = import_react2.default.memo(() => {
         onClick: (e) => {
           if (applyAriaDisabled) return;
           if (!disabled) {
-            handleOnTabChange(tabId, e);
-            updateIndicatorStyle();
+            globalClickHandler({ event: e, target: "tabItem", tabId });
           }
           if (onClick && !disabled) onClick(tabId, e);
         },