@elliemae/ds-tabs 3.53.0-next.9 → 3.54.0-beta.1

package/dist/cjs/DSTabsCTX.js

@@ -46,7 +46,13 @@ const defaultContext = {
   tabsRefAsArray: (0, import_react.createRef)(),
   actualActiveTabRef: (0, import_react.createRef)(),
   setInternalActiveTab: noop,
-  actualActiveTab: ""
+  actualActiveTab: "",
+  globalClickHandler: noop,
+  updateIndicatorStyle: noop,
+  updateMobileGradients: noop,
+  setIndicatorStyle: noop,
+  indicatorStyle: { left: 0, width: 0 },
+  mobileGradients: { right: false, left: false }
 };
 const defaultCrossRefsContext = {
   lastTabInternalRef: (0, import_react.createRef)(),

package/dist/cjs/DSTabsCTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSTabsCTX.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { createContext, createRef } from 'react';\nimport { 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;",
+  "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  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>(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;AAAA,EACjB,oBAAoB;AAAA,EACpB,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB,mBAAmB;AAAA,EACnB,gBAAgB,EAAE,MAAM,GAAG,OAAO,EAAE;AAAA,EACpC,iBAAiB,EAAE,OAAO,OAAO,MAAM,MAAM;AAC/C;AAEA,MAAM,0BAA0B;AAAA,EAC9B,wBAAoB,wBAAoC;AAAA,EACxD,4BAAwB,wBAAoC;AAC9D;AAEO,MAAM,oBAAgB,4BAAsD,cAAc;AAC1F,MAAM,4BAAwB,4BAA0D,uBAAuB;",
   "names": ["defaultProps"]
 }

package/dist/cjs/{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,89 @@ 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 handleOnTabChange = import_react.default.useCallback(
+    (tabId, e) => {
+      setInternalActiveTab(tabId);
+      onTabChange(tabId, e);
+      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") {
+          handleOnTabChange(dataset.tabId, data.event);
+        }
+      }
+      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]
+  );
   const ctx = (0, import_react.useMemo)(
     () => ({
       props: propsWithDefaults,
@@ -74,9 +160,25 @@ const useTabs = (props) => {
       setInternalActiveTab,
       actualActiveTab,
       actualActiveTabRef,
-      carouselOnlyListRef
+      carouselOnlyListRef,
+      globalClickHandler,
+      updateIndicatorStyle,
+      setIndicatorStyle,
+      indicatorStyle,
+      mobileGradients,
+      updateMobileGradients,
+      handleOnTabChange
     }),
-    [actualActiveTab, propsWithDefaults]
+    [
+      propsWithDefaults,
+      actualActiveTab,
+      globalClickHandler,
+      updateIndicatorStyle,
+      indicatorStyle,
+      mobileGradients,
+      updateMobileGradients,
+      handleOnTabChange
+    ]
   );
   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  const handleOnTabChange = React.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 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        }\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],\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    }),\n    [\n      propsWithDefaults,\n      actualActiveTab,\n      globalClickHandler,\n      updateIndicatorStyle,\n      indicatorStyle,\n      mobileGradients,\n      updateMobileGradients,\n      handleOnTabChange,\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/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: { type, carouselChevronProps }
+    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,12 +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",
-        ...carouselChevronProps && carouselChevronProps({ isLeftChevron: true }),
+        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,
@@ -72,7 +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",
-        ...carouselChevronProps && carouselChevronProps({ isLeftChevron: false }),
+        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, carouselChevronProps },\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            {...(carouselChevronProps && carouselChevronProps({ isLeftChevron: true }))}\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            {...(carouselChevronProps && carouselChevronProps({ isLeftChevron: false }))}\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,MAAM,qBAAqB;AAAA,EACtC,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,QACV,GAAI,wBAAwB,qBAAqB,EAAE,eAAe,KAAK,CAAC;AAAA,QAEzE,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,QACV,GAAI,wBAAwB,qBAAqB,EAAE,eAAe,MAAM,CAAC;AAAA,QAE1E,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

@@ -36,20 +36,21 @@ 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,
-    props: { type, fixedTabsHeaders, withCarousel, isDSMobile }
+    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)(
@@ -80,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 { useOwnerProps } from '@elliemae/ds-props-helpers';\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,\n    props: { type, fixedTabsHeaders, withCarousel, isDSMobile },\n  } = useContext(DSTabsContext);\n\n  const { handleOnTabChange } = useTabsCallbacks();\n  const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = useTabBar();\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      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;AD0CX;AAzCZ,mBAAkC;AAClC,8BAA8B;AAC9B,sBAAyB;AACzB,uBAA0B;AAC1B,oBAMO;AACP,uBAA8B;AAE9B,uBAA4C;AAE5C,gCAAmC;AACnC,8BAAiC;AAE1B,MAAM,SAAS,MAAmB;AACvC,QAAM;AAAA,IACJ;AAAA,IACA;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;AACnG,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,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 {
@@ -115,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);
         },

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/tabBar/TabBarItemRenderer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\n\nimport { useTabBar } from './useTabBar.js';\nimport { StyledTabButton, StyledRequiredMark, ScreenReaderOnly, StyledSubTabButton } from './styles.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';\nimport { centerTab } from '../../utils/helpers.js';\n\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\n\nimport type { DSTabT } from '../../react-desc-prop-types.js';\nimport { TABS_DATA_TESTID, TAB_TYPES } from '../../constants/index.js';\n\nexport const TabBarItemRenderer: React.ComponentType<Record<never, never>> = React.memo(() => {\n  const {\n    tabsRef,\n    focusableTabsRef,\n    tabsRefAsArray,\n    carouselOnlyListRef,\n    actualActiveTab,\n    props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },\n  } = useContext(DSTabsContext);\n\n  const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n  const { handleOnTabChange } = useTabsCallbacks();\n  const { handleOnKeyDown } = useKeyboardNavigation();\n\n  const { updateIndicatorStyle } = useTabBar();\n  const availableTabIndexes: number[] = [];\n\n  return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index) => {\n    const {\n      tabId = '',\n      title = '',\n      style,\n      required = false,\n      disabled = false,\n      applyAriaDisabled = false,\n      ref,\n      onClick,\n      onKeyDown,\n      ...rest\n    } = tab.props;\n    const getOwnerProps = () => tab.props;\n    const getOwnerPropsArguments = () => ({ tabId });\n\n    if (!disabled) availableTabIndexes.push(index);\n    const ButtonComponent = type === TAB_TYPES.SUBTABS ? StyledSubTabButton : StyledTabButton;\n\n    return (\n      <ButtonComponent\n        {...rest}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        key={tabId}\n        role=\"tab\"\n        // eslint-disable-next-line complexity\n        innerRef={(tabButtonRef: HTMLButtonElement) => {\n          if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {\n            tabsRefAsArray.current[index] = tabButtonRef;\n            if (!disabled && !focusableTabsRef.current.includes(tabButtonRef))\n              focusableTabsRef.current.push(tabButtonRef);\n            tabsRef.current[index] = tabButtonRef;\n            if (type === TAB_TYPES.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n              firstSubtabInternalRef.current = tabButtonRef;\n            }\n            if (type !== TAB_TYPES.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {\n              lastTabInternalRef.current = tabButtonRef;\n            }\n            if (ref) ref.current = tabButtonRef;\n          }\n        }}\n        type=\"button\"\n        aria-controls={tabId}\n        aria-selected={actualActiveTab === tabId && !applyAriaDisabled}\n        aria-disabled={disabled || applyAriaDisabled}\n        isDSMobile={isDSMobile}\n        fixedTabsHeaders={fixedTabsHeaders}\n        tabType={type}\n        data-required={required}\n        data-tab-id={tabId}\n        data-index={index}\n        withCarousel={withCarousel}\n        isActive={actualActiveTab === tabId}\n        disabled={disabled}\n        showSeparator={showSeparator && type !== TAB_TYPES.NORMAL}\n        data-testid={type === TAB_TYPES.NORMAL ? TABS_DATA_TESTID.TAB_BUTTON : TABS_DATA_TESTID.SUBTAB_BUTTON}\n        id={`${tabId}-label`}\n        onClick={(e) => {\n          /** [PUI-15772] - Tabs Pre Refactor\n           * Click handler for tab buttons. It:\n           * 1. Prevents tab change if aria-disabled is true\n           * 2. Updates active tab and indicator style if not disabled\n           * 3. Calls the user's onClick callback if provided\n           */\n          if (applyAriaDisabled) return;\n          if (!disabled) {\n            handleOnTabChange(tabId, e);\n            updateIndicatorStyle();\n          }\n          if (onClick && !disabled) onClick(tabId, e);\n        }}\n        onFocus={(e) => {\n          /** [PUI-15772] - Tabs Pre Refactor\n           * Focus handler for carousel tabs. It:\n           * 1. Centers the focused tab in the carousel viewport\n           * 2. Only applies when withCarousel prop is true\n           */\n          if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });\n        }}\n        onKeyDown={(e) => {\n          /** [PUI-15772] - Tabs Pre Refactor\n           * Keyboard navigation handler. It:\n           * 1. Prevents Enter key propagation\n           * 2. Handles keyboard navigation if not disabled\n           * 3. Calls the user's onKeyDown callback if provided\n           */\n          if (e.key === 'Enter') e.stopPropagation();\n          if (!disabled) handleOnKeyDown(e);\n          if (onKeyDown && !disabled) onKeyDown(e);\n        }}\n        style={style}\n      >\n        {title}\n        {required && (\n          <>\n            <StyledRequiredMark aria-hidden=\"true\">&#9679;</StyledRequiredMark>\n            <ScreenReaderOnly>Required</ScreenReaderOnly>\n          </>\n        )}\n      </ButtonComponent>\n    );\n  });\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { StyledTabButton, StyledRequiredMark, ScreenReaderOnly, StyledSubTabButton } from './styles.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';\nimport { centerTab } from '../../utils/helpers.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\nimport { TABS_DATA_TESTID, TAB_TYPES } from '../../constants/index.js';\n\nexport const TabBarItemRenderer: React.ComponentType<Record<never, never>> = React.memo(() => {\n  const {\n    tabsRef,\n    focusableTabsRef,\n    tabsRefAsArray,\n    carouselOnlyListRef,\n    actualActiveTab,\n    props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },\n    globalClickHandler,\n  } = useContext(DSTabsContext);\n\n  const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n  const { handleOnKeyDown } = useKeyboardNavigation();\n\n  const availableTabIndexes: number[] = [];\n\n  return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index) => {\n    const {\n      tabId = '',\n      title = '',\n      style,\n      required = false,\n      disabled = false,\n      applyAriaDisabled = false,\n      ref,\n      onClick,\n      onKeyDown,\n      ...rest\n    } = tab.props;\n    const getOwnerProps = () => tab.props;\n    const getOwnerPropsArguments = () => ({ tabId });\n\n    if (!disabled) availableTabIndexes.push(index);\n    const ButtonComponent = type === TAB_TYPES.SUBTABS ? StyledSubTabButton : StyledTabButton;\n\n    return (\n      <ButtonComponent\n        {...rest}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        key={tabId}\n        role=\"tab\"\n        // eslint-disable-next-line complexity\n        innerRef={(tabButtonRef: HTMLButtonElement) => {\n          if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {\n            tabsRefAsArray.current[index] = tabButtonRef;\n            if (!disabled && !focusableTabsRef.current.includes(tabButtonRef))\n              focusableTabsRef.current.push(tabButtonRef);\n            tabsRef.current[index] = tabButtonRef;\n            if (type === TAB_TYPES.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n              firstSubtabInternalRef.current = tabButtonRef;\n            }\n            if (type !== TAB_TYPES.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {\n              lastTabInternalRef.current = tabButtonRef;\n            }\n            if (ref) ref.current = tabButtonRef;\n          }\n        }}\n        type=\"button\"\n        aria-controls={tabId}\n        aria-selected={actualActiveTab === tabId && !applyAriaDisabled}\n        aria-disabled={disabled || applyAriaDisabled}\n        isDSMobile={isDSMobile}\n        fixedTabsHeaders={fixedTabsHeaders}\n        tabType={type}\n        data-required={required}\n        data-tab-id={tabId}\n        data-index={index}\n        withCarousel={withCarousel}\n        isActive={actualActiveTab === tabId}\n        disabled={disabled}\n        showSeparator={showSeparator && type !== TAB_TYPES.NORMAL}\n        data-testid={type === TAB_TYPES.NORMAL ? TABS_DATA_TESTID.TAB_BUTTON : TABS_DATA_TESTID.SUBTAB_BUTTON}\n        id={`${tabId}-label`}\n        onClick={(e) => {\n          /** [PUI-15772] - Tabs Pre Refactor\n           * Click handler for tab buttons. It:\n           * 1. Prevents tab change if aria-disabled is true\n           * 2. Updates active tab and indicator style if not disabled\n           * 3. Calls the user's onClick callback if provided\n           */\n          if (applyAriaDisabled) return;\n          if (!disabled) {\n            globalClickHandler({ event: e, target: 'tabItem', tabId });\n          }\n          if (onClick && !disabled) onClick(tabId, e);\n        }}\n        onFocus={(e) => {\n          /** [PUI-15772] - Tabs Pre Refactor\n           * Focus handler for carousel tabs. It:\n           * 1. Centers the focused tab in the carousel viewport\n           * 2. Only applies when withCarousel prop is true\n           */\n          if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });\n        }}\n        onKeyDown={(e) => {\n          /** [PUI-15772] - Tabs Pre Refactor\n           * Keyboard navigation handler. It:\n           * 1. Prevents Enter key propagation\n           * 2. Handles keyboard navigation if not disabled\n           * 3. Calls the user's onKeyDown callback if provided\n           */\n          if (e.key === 'Enter') e.stopPropagation();\n          if (!disabled) handleOnKeyDown(e);\n          if (onKeyDown && !disabled) onKeyDown(e);\n        }}\n        style={style}\n      >\n        {title}\n        {required && (\n          <>\n            <StyledRequiredMark aria-hidden=\"true\">&#9679;</StyledRequiredMark>\n            <ScreenReaderOnly>Required</ScreenReaderOnly>\n          </>\n        )}\n      </ButtonComponent>\n    );\n  });\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsHb;AA1EJ;AA5CN,IAAAA,gBAAkC;AAClC,oBAA0F;AAC1F,uBAAqD;AACrD,mCAAsC;AACtC,qBAA0B;AAE1B,uBAA4C;AAErC,MAAM,qBAAgE,cAAAC,QAAM,KAAK,MAAM;AAC5F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM,kBAAkB,cAAc,YAAY,eAAe,UAAU,KAAK;AAAA,IACzF;AAAA,EACF,QAAI,0BAAW,8BAAa;AAE5B,QAAM,EAAE,oBAAoB,uBAAuB,QAAI,0BAAW,sCAAqB;AACvF,QAAM,EAAE,gBAAgB,QAAI,oDAAsB;AAElD,QAAM,sBAAgC,CAAC;AAEvC,SAAO,cAAAA,QAAM,SAAS,IAAI,MAAM,CAAC,KAAuC,UAAU;AAChF,UAAM;AAAA,MACJ,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX,oBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,IAAI;AACR,UAAM,gBAAgB,MAAM,IAAI;AAChC,UAAM,yBAAyB,OAAO,EAAE,MAAM;AAE9C,QAAI,CAAC,SAAU,qBAAoB,KAAK,KAAK;AAC7C,UAAM,kBAAkB,SAAS,2BAAU,UAAU,mCAAqB;AAE1E,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA,KAAK;AAAA,QACL,MAAK;AAAA,QAEL,UAAU,CAAC,iBAAoC;AAC7C,cAAI,gBAAgB,eAAe,WAAW,iBAAiB,WAAW,QAAQ,SAAS;AACzF,2BAAe,QAAQ,KAAK,IAAI;AAChC,gBAAI,CAAC,YAAY,CAAC,iBAAiB,QAAQ,SAAS,YAAY;AAC9D,+BAAiB,QAAQ,KAAK,YAAY;AAC5C,oBAAQ,QAAQ,KAAK,IAAI;AACzB,gBAAI,SAAS,2BAAU,WAAW,0BAA0B,UAAU,oBAAoB,CAAC,GAAG;AAC5F,qCAAuB,UAAU;AAAA,YACnC;AACA,gBAAI,SAAS,2BAAU,WAAW,UAAU,oBAAoB,oBAAoB,SAAS,CAAC,GAAG;AAC/F,iCAAmB,UAAU;AAAA,YAC/B;AACA,gBAAI,IAAK,KAAI,UAAU;AAAA,UACzB;AAAA,QACF;AAAA,QACA,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe,oBAAoB,SAAS,CAAC;AAAA,QAC7C,iBAAe,YAAY;AAAA,QAC3B;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,iBAAe;AAAA,QACf,eAAa;AAAA,QACb,cAAY;AAAA,QACZ;AAAA,QACA,UAAU,oBAAoB;AAAA,QAC9B;AAAA,QACA,eAAe,iBAAiB,SAAS,2BAAU;AAAA,QACnD,eAAa,SAAS,2BAAU,SAAS,kCAAiB,aAAa,kCAAiB;AAAA,QACxF,IAAI,GAAG,KAAK;AAAA,QACZ,SAAS,CAAC,MAAM;AAOd,cAAI,kBAAmB;AACvB,cAAI,CAAC,UAAU;AACb,+BAAmB,EAAE,OAAO,GAAG,QAAQ,WAAW,MAAM,CAAC;AAAA,UAC3D;AACA,cAAI,WAAW,CAAC,SAAU,SAAQ,OAAO,CAAC;AAAA,QAC5C;AAAA,QACA,SAAS,CAAC,MAAM;AAMd,cAAI,aAAc,+BAAU,EAAE,GAAG,SAAS,oBAAoB,CAAC;AAAA,QACjE;AAAA,QACA,WAAW,CAAC,MAAM;AAOhB,cAAI,EAAE,QAAQ,QAAS,GAAE,gBAAgB;AACzC,cAAI,CAAC,SAAU,iBAAgB,CAAC;AAChC,cAAI,aAAa,CAAC,SAAU,WAAU,CAAC;AAAA,QACzC;AAAA,QACA;AAAA;AAAA,MAEC;AAAA,MACA,YACC,4EACE;AAAA,oDAAC,oCAAmB,eAAY,QAAO,oBAAO;AAAA,QAC9C,4CAAC,kCAAiB,sBAAQ;AAAA,SAC5B;AAAA,IAEJ;AAAA,EAEJ,CAAC;AACH,CAAC;",
   "names": ["import_react", "React"]
 }

package/dist/cjs/parts/tabsPanel/TabsPanels.js

@@ -38,7 +38,6 @@ var import_react2 = __toESM(require("react"));
 var import_react_swipeable_views = __toESM(require("react-swipeable-views"));
 var import_styles = require("./styles.js");
 var import_DSTabsCTX = require("../../DSTabsCTX.js");
-var import_useTabsCallbacks = require("../../utils/hooks/useTabsCallbacks.js");
 const TabsPanels = () => {
   const {
     actualActiveTab,
@@ -51,9 +50,9 @@ const TabsPanels = () => {
       isDSMobile,
       tabPanelsProps,
       swipeableViewsContainerProps
-    }
+    },
+    globalClickHandler
   } = (0, import_react2.useContext)(import_DSTabsCTX.DSTabsContext);
-  const { handleOnTabChange, handleOnMouseDown } = (0, import_useTabsCallbacks.useTabsCallbacks)();
   const handleOnChangeIndex = (0, import_react2.useCallback)(
     (index, indexLatest) => {
       if (!focusableTabsRef.current) return;
@@ -63,16 +62,20 @@ const TabsPanels = () => {
         const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;
         if (newFocusableIndex < 0 || newFocusableIndex > focusableTabsRef.current?.length || !focusableTabsRef.current?.[newFocusableIndex])
           return;
-        handleOnTabChange(focusableTabsRef.current[newFocusableIndex].dataset?.tabId);
+        globalClickHandler({
+          event: { type: "click" },
+          target: "swipeableViews",
+          tabId: focusableTabsRef.current[newFocusableIndex].dataset.tabId
+        });
         focusableTabsRef.current[newFocusableIndex].click();
       }
     },
-    [actualActiveTab, focusableTabsRef, handleOnTabChange]
+    [actualActiveTab, focusableTabsRef, globalClickHandler]
   );
   const panels = (0, import_react2.useMemo)(() => {
     const emptyPanelRender = animated ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}) : null;
     return import_react2.default.Children.map(tabs, (tab) => {
-      const { tabId: panelId = "", style, children: content, disabled } = tab.props;
+      const { tabId: panelId = "", style, children: content, disabled, applyAriaDisabled } = tab.props;
       const isActive = actualActiveTab === panelId;
       const shouldRender = !onlyRenderActiveTab || isActive;
       const getOwnerProps = () => tab.props;
@@ -88,11 +91,11 @@ const TabsPanels = () => {
           key: panelId,
           id: panelId,
           "aria-labelledby": `${panelId}-label`,
-          "aria-hidden": !isActive,
+          "aria-hidden": !isActive || !!applyAriaDisabled,
           "data-panel-id": panelId,
           "data-testid": "ds-tabs-tab-panel",
           hide: !isActive,
-          onMouseDown: handleOnMouseDown,
+          onClick: (event) => globalClickHandler({ event, target: "panel" }),
           role: "tabpanel",
           style: {
             ...tabPanelsProps?.style || {},
@@ -103,7 +106,7 @@ const TabsPanels = () => {
         content
       );
     });
-  }, [animated, tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, handleOnMouseDown, isDSMobile]);
+  }, [animated, tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, globalClickHandler, isDSMobile]);
   const indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull = (0, import_react2.useMemo)(() => {
     const childrenArray = import_react2.default.Children.toArray(tabs);
     const index = childrenArray.findIndex((tab) => tab.props.tabId === actualActiveTab);