@elliemae/ds-tabs 3.55.0-next.12 → 3.55.0-next.14

package/dist/cjs/config/useTabs.js

@@ -138,7 +138,9 @@ const useTabs = (props) => {
         const target = data.event.target;
         const { dataset, ariaDisabled } = target;
         if (dataset.tabId && ariaDisabled !== "true") {
-          handleOnTabChange(dataset.tabId, data.event);
+          if (isDSMobile && !fixedTabsHeaders && data.event) {
+            (0, import_helpers.centerTab)({ e: data.event, listRef: tabsListRef });
+          }
         }
       }
       if (data.target === "swipeableViews") {
@@ -148,7 +150,7 @@ const useTabs = (props) => {
         handleOnTabChange(data.tabId, data.event);
       }
     },
-    [propsWithDefaults.allowTextSelection, handleOnTabChange]
+    [propsWithDefaults.allowTextSelection, handleOnTabChange, tabsListRef, fixedTabsHeaders, isDSMobile]
   );
   const ctx = (0, import_react.useMemo)(
     () => ({

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": ["/* 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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA4D;AAC5D,8BAA6C;AAC7C,mCAAmC;AAGnC,qBAA6F;AAC7F,+BAAkC;AAClC,uBAAyC;AAElC,MAAM,UAAU,CAAC,UAAiE;AACvF,QAAM,wBAAoB,sDAAoD,OAAO,+CAAkB;AAEvG,QAAM,EAAE,WAAW,UAAU,aAAa,YAAY,kBAAkB,uBAAuB,IAAI;AAEnG,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,CAAC,iBAAiB,kBAAkB,QAAI,uBAA4C;AAAA,IACxF,MAAM;AAAA,IACN,OAAO;AAAA,EACT,CAAC;AACD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAA2C,yCAAwB;AAE/G,QAAM,qBAAqB,aAAAA,QAAM,YAAY,MAAM;AACjD,QAAI,YAAY,SAAS;AACvB,YAAM,UAAU,YAAY;AAC5B,YAAM,kBAAkB,mBAAmB;AAE3C,UAAI,CAAC,mBAAmB,KAAC,iCAAiB,iBAAiB,OAAO,EAAG,QAAO;AAI5E,YAAM,iBAAiB,aAAa,IAAI;AAExC,YAAM,iBACJ,cAAc,CAAC,mBACX,gBAAgB,cAChB,gBAAgB,cAAc,iBAAiB;AAIrD,YAAM,WACJ,cAAc,CAAC,mBACX,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO,QAAQ,aAC9F,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO;AAE5F,aAAO;AAAA,QACL,MAAM,KAAK,MAAM,QAAQ;AAAA,QACzB,OAAO,KAAK,MAAM,cAAc;AAAA,MAClC;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,kBAAkB,YAAY,WAAW,CAAC;AAOlE,QAAM,uBAAuB,aAAAA,QAAM;AAAA,IACjC,MAAM,WAAW,MAAM,kBAAkB,mBAAmB,CAAC,GAAG,GAAG;AAAA,IACnE,CAAC,oBAAoB,iBAAiB;AAAA,EACxC;AAEA,kDAAkB,sBAAsB,YAAY,OAAO;AAC3D,kDAAkB,sBAAsB,mBAAmB,OAAO;AAOlE,QAAM,wBAAwB,aAAAA,QAAM,YAAY,MAAM;AACpD,QAAI,YAAY,WAAW,cAAc,CAAC,kBAAkB;AAC1D,YAAM,EAAE,YAAY,aAAa,YAAY,IAAI,YAAY;AAC7D,yBAAmB;AAAA,QACjB,UAAM,uCAAuB,UAAU;AAAA,QACvC,WAAO,wCAAwB,YAAY,aAAa,WAAW;AAAA,MACrE,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,kBAAkB,YAAY,WAAW,CAAC;AAE9C,eAAAA,QAAM,gBAAgB,MAAM;AAC1B,QAAI,wBAAwB;AAC1B,2BAAqB;AAAA,IACvB;AACA,QAAI,cAAc,CAAC,kBAAkB;AACnC,4BAAsB;AAAA,IACxB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,oBAAoB,aAAAA,QAAM;AAAA,IAC9B,CAAC,OAAe,MAAyB;AACvC,2BAAqB,KAAK;AAC1B,kBAAY,OAAO,CAAC;AACpB,UAAI,cAAc,CAAC,oBAAoB,GAAG;AACxC,sCAAU,EAAE,GAAG,SAAS,YAAY,CAAC;AAAA,MACvC;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,YAAY,aAAa,sBAAsB,WAAW;AAAA,EAC/E;AAEA,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,SAAqD;AACpD,UAAI,KAAK,WAAW,SAAS;AAG3B,YAAI,kBAAkB,oBAAoB;AACxC,eAAK,MAAM,gBAAgB;AAAA,QAC7B;AAAA,MACF;AAEA,UAAI,KAAK,WAAW,YAAY;AAC9B,cAAM,SAAS,KAAK,MAAM;AAC1B,cAAM,EAAE,SAAS,aAAa,IAAI;AAClC,YAAI,QAAQ,SAAS,iBAAiB,QAAQ;AAC5C,4BAAkB,QAAQ,OAAO,KAAK,KAAK;AAAA,QAC7C;AAAA,MACF;AACA,UAAI,KAAK,WAAW,kBAAkB;AACpC,0BAAkB,KAAK,KAAM;AAAA,MAC/B;AACA,UAAI,KAAK,WAAW,aAAa,KAAK,SAAS,CAAE,KAAK,MAAM,cAAoC,UAAU;AACxG,0BAAkB,KAAK,OAAO,KAAK,KAAK;AAAA,MAC1C;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,oBAAoB,iBAAiB;AAAA,EAC1D;AACA,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,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;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          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    }),\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/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/parts/tabsContent/styles.js

@@ -35,9 +35,13 @@ module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_constants = require("../../constants/index.js");
-const StyledTabsContainer = (0, import_ds_system.styled)("div", { name: import_constants.DSTabsName, slot: import_constants.TABS_SLOTS.TABS_CONTAINER })``;
+const StyledTabsContainer = (0, import_ds_system.styled)("div", { name: import_constants.DSTabsName, slot: import_constants.TABS_SLOTS.TABS_CONTAINER })`
+  display: flex;
+  flex-direction: column;
+`;
 const StyledTabBarContainer = import_ds_system.styled.div`
   display: flex;
+  flex: 0 0 auto;
   overflow-x: hidden;
 `;
 //# sourceMappingURL=styles.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/tabsContent/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSTabsName, TABS_SLOTS } from '../../constants/index.js';\n\nexport const StyledTabsContainer = styled('div', { name: DSTabsName, slot: TABS_SLOTS.TABS_CONTAINER })``;\nexport const StyledTabBarContainer = styled.div`\n  display: flex;\n  overflow-x: hidden;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAAuC;AAEhC,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,6BAAY,MAAM,4BAAW,eAAe,CAAC;AAC/F,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSTabsName, TABS_SLOTS } from '../../constants/index.js';\n\nexport const StyledTabsContainer = styled('div', { name: DSTabsName, slot: TABS_SLOTS.TABS_CONTAINER })`\n  display: flex;\n  flex-direction: column;\n`;\nexport const StyledTabBarContainer = styled.div`\n  display: flex;\n  flex: 0 0 auto;\n  overflow-x: hidden;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAAuC;AAEhC,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,6BAAY,MAAM,4BAAW,eAAe,CAAC;AAAA;AAAA;AAAA;AAI/F,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -33,10 +33,10 @@ __export(TabsPanels_exports, {
 module.exports = __toCommonJS(TabsPanels_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react = __toESM(require("react"));
-var import_ds_swipe_card = require("@elliemae/ds-swipe-card");
-var import_styles = require("./styles.js");
 var import_DSTabsCTX = require("../../DSTabsCTX.js");
+var import_styles = require("./styles.js");
 const CardRender = (props) => {
   const { content, tabPanelsProps, isDSMobile, hide, style, role, tabId, renderKey, ...rest } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -57,9 +57,11 @@ const TabsPanels = () => {
   const {
     actualActiveTab,
     focusableTabsRef,
+    props,
     props: { onlyRenderActiveTab, children: tabs, isDSMobile, tabPanelsProps, animated },
     globalClickHandler
   } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
+  const { getOwnerProps: getTabPanelsOwnerProps, getOwnerPropsArguments: getTabPanelsOwnerPropsArguments } = (0, import_ds_props_helpers.useOwnerProps)(props);
   const handleOnChangeIndex = (0, import_react.useCallback)(
     (index, indexLatest) => {
       if (!focusableTabsRef.current) return;
@@ -115,14 +117,16 @@ const TabsPanels = () => {
     return idx >= 0 ? idx : 0;
   })();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_ds_swipe_card.DSSwipeCard,
+    import_styles.StyledDSSwipeCard,
     {
       activeSlide,
       onSwipe: (i) => handleOnChangeIndex(i, activeSlide),
       enableTouch: true,
       enableAnimation: animated,
       CardRender,
-      slidesProps: panels
+      slidesProps: panels,
+      getOwnerProps: getTabPanelsOwnerProps,
+      getOwnerPropsArguments: getTabPanelsOwnerPropsArguments
     }
   );
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/tabsPanel/TabsPanels.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { DSSwipeCard } from '@elliemae/ds-swipe-card';\nimport type { DSSwipeCardT } from '@elliemae/ds-swipe-card/src/react-desc-prop-types.js';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { StyledPanelContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n/**\n * Describes the data needed to render a single Tab panel slide.\n */\ninterface PanelDescriptor extends Record<string, unknown> {\n  index: number;\n  tabId: string;\n  isActive: boolean;\n  isDSMobile: boolean;\n  content: React.ReactNode;\n  style: React.CSSProperties;\n  tabPanelsProps?: GlobalAttributesT<HTMLDivElement>;\n  'aria-hidden': boolean;\n  'data-panel-id': string;\n  'data-testid': string;\n  hide: boolean;\n  onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n  role: 'tabpanel';\n}\n\n/**\n * Responsible for rendering a single slide using the provided panel descriptor.\n * Receives a `dsIndex` prop from DSSwipeCard which indicates the slide position.\n */\nconst CardRender: React.ComponentType<DSSwipeCardT.CardRenderProps<PanelDescriptor>> = (props) => {\n  const { content, tabPanelsProps, isDSMobile, hide, style, role, tabId, renderKey, ...rest } = props;\n  // We pass through all attributes, including accessibility and dataset attributes.\n  return (\n    <StyledPanelContainer\n      id={tabId}\n      {...tabPanelsProps}\n      {...rest}\n      // Styled component specific props\n      isDSMobile={isDSMobile}\n      hide={hide}\n      style={style}\n      role={role}\n    >\n      {content}\n    </StyledPanelContainer>\n  );\n};\n\nexport const TabsPanels = (): JSX.Element => {\n  const {\n    actualActiveTab,\n    focusableTabsRef,\n    props: { onlyRenderActiveTab, children: tabs, isDSMobile, tabPanelsProps, animated },\n    globalClickHandler,\n  } = useContext(DSTabsContext);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Handler for swipe gestures and tab index changes. It:\n   * 1. Calculates the offset between current and new tab index\n   * 2. Finds the new focusable tab based on the offset\n   * 3. Updates the active tab and forces a click event\n   * 4. May cause unnecessary rerenders due to forced click events\n   */\n  const handleOnChangeIndex = useCallback(\n    (index: number, indexLatest: number) => {\n      if (!focusableTabsRef.current) return;\n\n      const offset = index - indexLatest;\n\n      if (focusableTabsRef.current) {\n        const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);\n\n        const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;\n\n        if (\n          newFocusableIndex < 0 ||\n          newFocusableIndex > focusableTabsRef.current?.length ||\n          !focusableTabsRef.current?.[newFocusableIndex]\n        )\n          return;\n        globalClickHandler({\n          event: { type: 'click' } as React.MouseEvent<HTMLDivElement>,\n          target: 'swipeableViews',\n          tabId: focusableTabsRef.current[newFocusableIndex].dataset.tabId,\n        });\n\n        // swiping does not trigger centerTab function inside handleOnTabChange because there is no event\n        // by clicking we are manually forcing to center the tab\n\n        focusableTabsRef.current[newFocusableIndex].click();\n      }\n    },\n    [actualActiveTab, focusableTabsRef, globalClickHandler],\n  );\n\n  const panels: PanelDescriptor[] = useMemo(() => {\n    // this component is based on React.children, swipeable views want an index in the array, not a tabId\n    // two bad patterns relying on each others results in:\n    //   - because of react.children,\n    //       to guarantee predictability in finding the index based on tabId we should never return \"null\" which is not part of React.Children.toArray\n    //\n    //  when not using swipeable views, we don't need to find the index based on tabId\n    //    so even if we return null the variable\n    //    indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull\n    //      (which will be calculating the wrong index)\n    //    will have no impact on the rendering\n    // https://react.dev/reference/react/Children#children-toarray-caveats\n    // Caveats\n    // Empty nodes (null, undefined, and Booleans) will be omitted in the returned array.\n    //\n    // So, long story short,\n    //  1 - do not remove next line, keep the <div /> instead of null when \"animated\"\n    //  2 - NEVER EVER BUILD API BASED ON REACT.CHILDREN (if you are writing code post 2022 and you are not working on a legacy codebase)\n    // To preserve indices for swipe behavior, we return a fully-typed placeholder panel\n    // instead of null when a panel should not be rendered. This keeps array length stable.\n    const mapResult = React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index: number) => {\n      const { tabId: panelId = '', style, children: content, disabled, applyAriaDisabled } = tab.props;\n      const isActive = actualActiveTab === panelId;\n      const shouldRender = !onlyRenderActiveTab || isActive;\n      const getOwnerProps = () => tab.props;\n      const getOwnerPropsArguments = () => ({ panelId });\n\n      const baseDescriptor: PanelDescriptor = {\n        index,\n        tabId: panelId,\n        isActive: Boolean(isActive),\n        isDSMobile: Boolean(isDSMobile),\n        content: shouldRender && !disabled ? content : null,\n        style: {\n          ...(tabPanelsProps?.style || {}),\n          ...(style || {}),\n        } as React.CSSProperties,\n        tabPanelsProps,\n        'aria-hidden': !(isActive && !applyAriaDisabled),\n        'data-panel-id': panelId,\n        'data-testid': 'ds-tabs-tab-panel',\n        hide: !isActive,\n        onClick: (event: React.MouseEvent<HTMLDivElement>) => globalClickHandler({ event, target: 'panel' }),\n        role: 'tabpanel',\n        getOwnerProps,\n        getOwnerPropsArguments,\n      };\n\n      return baseDescriptor;\n    });\n\n    // Children.map can return null if there are no children; ensure an array is returned\n    return mapResult || [];\n  }, [tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, globalClickHandler, isDSMobile]);\n\n  // Safely compute the active slide index. Default to 0 when none found.\n  const activeSlide = (() => {\n    const idx = panels.findIndex((panel) => panel.isActive);\n    return idx >= 0 ? idx : 0;\n  })();\n\n  return (\n    <DSSwipeCard<PanelDescriptor>\n      activeSlide={activeSlide}\n      onSwipe={(i) => handleOnChangeIndex(i, activeSlide)}\n      enableTouch\n      enableAnimation={animated}\n      CardRender={CardRender}\n      slidesProps={panels}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport type { DSSwipeCardT } from '@elliemae/ds-swipe-card/src/react-desc-prop-types.js';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\nimport type { PanelDescriptor } from './styles.js';\nimport { StyledDSSwipeCard, StyledPanelContainer } from './styles.js';\n/**\n * Describes the data needed to render a single Tab panel slide.\n */\n\n/**\n * Responsible for rendering a single slide using the provided panel descriptor.\n * Receives a `dsIndex` prop from DSSwipeCard which indicates the slide position.\n */\nconst CardRender: React.ComponentType<DSSwipeCardT.CardRenderProps<PanelDescriptor>> = (props) => {\n  const { content, tabPanelsProps, isDSMobile, hide, style, role, tabId, renderKey, ...rest } = props;\n  // We pass through all attributes, including accessibility and dataset attributes.\n  return (\n    <StyledPanelContainer\n      id={tabId}\n      {...tabPanelsProps}\n      {...rest}\n      // Styled component specific props\n      isDSMobile={isDSMobile}\n      hide={hide}\n      style={style}\n      role={role}\n    >\n      {content}\n    </StyledPanelContainer>\n  );\n};\n\nexport const TabsPanels = (): JSX.Element => {\n  const {\n    actualActiveTab,\n    focusableTabsRef,\n    props,\n    props: { onlyRenderActiveTab, children: tabs, isDSMobile, tabPanelsProps, animated },\n    globalClickHandler,\n  } = useContext(DSTabsContext);\n\n  const { getOwnerProps: getTabPanelsOwnerProps, getOwnerPropsArguments: getTabPanelsOwnerPropsArguments } =\n    useOwnerProps(props);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Handler for swipe gestures and tab index changes. It:\n   * 1. Calculates the offset between current and new tab index\n   * 2. Finds the new focusable tab based on the offset\n   * 3. Updates the active tab and forces a click event\n   * 4. May cause unnecessary rerenders due to forced click events\n   */\n  const handleOnChangeIndex = useCallback(\n    (index: number, indexLatest: number) => {\n      if (!focusableTabsRef.current) return;\n\n      const offset = index - indexLatest;\n\n      if (focusableTabsRef.current) {\n        const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);\n\n        const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;\n\n        if (\n          newFocusableIndex < 0 ||\n          newFocusableIndex > focusableTabsRef.current?.length ||\n          !focusableTabsRef.current?.[newFocusableIndex]\n        )\n          return;\n        globalClickHandler({\n          event: { type: 'click' } as React.MouseEvent<HTMLDivElement>,\n          target: 'swipeableViews',\n          tabId: focusableTabsRef.current[newFocusableIndex].dataset.tabId,\n        });\n\n        // swiping does not trigger centerTab function inside handleOnTabChange because there is no event\n        // by clicking we are manually forcing to center the tab\n\n        focusableTabsRef.current[newFocusableIndex].click();\n      }\n    },\n    [actualActiveTab, focusableTabsRef, globalClickHandler],\n  );\n\n  const panels: PanelDescriptor[] = useMemo(() => {\n    // this component is based on React.children, swipeable views want an index in the array, not a tabId\n    // two bad patterns relying on each others results in:\n    //   - because of react.children,\n    //       to guarantee predictability in finding the index based on tabId we should never return \"null\" which is not part of React.Children.toArray\n    //\n    //  when not using swipeable views, we don't need to find the index based on tabId\n    //    so even if we return null the variable\n    //    indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull\n    //      (which will be calculating the wrong index)\n    //    will have no impact on the rendering\n    // https://react.dev/reference/react/Children#children-toarray-caveats\n    // Caveats\n    // Empty nodes (null, undefined, and Booleans) will be omitted in the returned array.\n    //\n    // So, long story short,\n    //  1 - do not remove next line, keep the <div /> instead of null when \"animated\"\n    //  2 - NEVER EVER BUILD API BASED ON REACT.CHILDREN (if you are writing code post 2022 and you are not working on a legacy codebase)\n    // To preserve indices for swipe behavior, we return a fully-typed placeholder panel\n    // instead of null when a panel should not be rendered. This keeps array length stable.\n    const mapResult = React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index: number) => {\n      const { tabId: panelId = '', style, children: content, disabled, applyAriaDisabled } = tab.props;\n      const isActive = actualActiveTab === panelId;\n      const shouldRender = !onlyRenderActiveTab || isActive;\n      const getOwnerProps = () => tab.props;\n      const getOwnerPropsArguments = () => ({ panelId });\n\n      const baseDescriptor: PanelDescriptor = {\n        index,\n        tabId: panelId,\n        isActive: Boolean(isActive),\n        isDSMobile: Boolean(isDSMobile),\n        content: shouldRender && !disabled ? content : null,\n        style: {\n          ...(tabPanelsProps?.style || {}),\n          ...(style || {}),\n        } as React.CSSProperties,\n        tabPanelsProps,\n        'aria-hidden': !(isActive && !applyAriaDisabled),\n        'data-panel-id': panelId,\n        'data-testid': 'ds-tabs-tab-panel',\n        hide: !isActive,\n        onClick: (event: React.MouseEvent<HTMLDivElement>) => globalClickHandler({ event, target: 'panel' }),\n        role: 'tabpanel',\n        getOwnerProps,\n        getOwnerPropsArguments,\n      };\n\n      return baseDescriptor;\n    });\n\n    // Children.map can return null if there are no children; ensure an array is returned\n    return mapResult || [];\n  }, [tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, globalClickHandler, isDSMobile]);\n\n  // Safely compute the active slide index. Default to 0 when none found.\n  const activeSlide = (() => {\n    const idx = panels.findIndex((panel) => panel.isActive);\n    return idx >= 0 ? idx : 0;\n  })();\n\n  return (\n    <StyledDSSwipeCard\n      activeSlide={activeSlide}\n      onSwipe={(i) => handleOnChangeIndex(i, activeSlide)}\n      enableTouch\n      enableAnimation={animated}\n      CardRender={CardRender}\n      slidesProps={panels}\n      getOwnerProps={getTabPanelsOwnerProps}\n      getOwnerPropsArguments={getTabPanelsOwnerPropsArguments}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -28,16 +28,20 @@ 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, {
+  StyledDSSwipeCard: () => StyledDSSwipeCard,
   StyledPanelContainer: () => StyledPanelContainer
 });
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
+var import_ds_swipe_card = require("@elliemae/ds-swipe-card");
 var import_ds_system = require("@elliemae/ds-system");
 var import_constants = require("../../constants/index.js");
 const StyledPanelContainer = (0, import_ds_system.styled)("div", {
   name: import_constants.DSTabsName,
   slot: import_constants.TABS_SLOTS.TAB_PANEL
 })`
+  flex: 1 1 auto;
+  min-height: 0;
   padding-top: 8px;
   &:focus {
     outline: none;
@@ -45,4 +49,8 @@ const StyledPanelContainer = (0, import_ds_system.styled)("div", {
 
   ${({ isDSMobile }) => isDSMobile ? `padding-top: 0;` : ``}
 `;
+const StyledDSSwipeCard = (0, import_ds_system.styled)(import_ds_swipe_card.DSSwipeCard, {
+  name: import_constants.DSTabsName,
+  slot: import_constants.TABS_SLOTS.TABS_SWIPE_CARD
+})``;
 //# sourceMappingURL=styles.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/tabsPanel/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { TABS_SLOTS, DSTabsName } from '../../constants/index.js';\n\ninterface StyledPanelContainerPropsT {\n  hide: boolean;\n  isDSMobile: boolean;\n}\n\nexport const StyledPanelContainer = styled('div', {\n  name: DSTabsName,\n  slot: TABS_SLOTS.TAB_PANEL,\n})<StyledPanelContainerPropsT>`\n  padding-top: 8px;\n  &:focus {\n    outline: none;\n  }\n\n  ${({ isDSMobile }) => (isDSMobile ? `padding-top: 0;` : ``)}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAAuC;AAOhC,MAAM,2BAAuB,yBAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMG,CAAC,EAAE,WAAW,MAAO,aAAa,oBAAoB,EAAG;AAAA;",
+  "sourcesContent": ["import type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { DSSwipeCard } from '@elliemae/ds-swipe-card';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTabsName, TABS_SLOTS } from '../../constants/index.js';\n\ninterface StyledPanelContainerPropsT {\n  hide: boolean;\n  isDSMobile: boolean;\n}\nexport interface PanelDescriptor extends Record<string, unknown> {\n  index: number;\n  tabId: string;\n  isActive: boolean;\n  isDSMobile: boolean;\n  content: React.ReactNode;\n  style: React.CSSProperties;\n  tabPanelsProps?: GlobalAttributesT<HTMLDivElement>;\n  'aria-hidden': boolean;\n  'data-panel-id': string;\n  'data-testid': string;\n  hide: boolean;\n  onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n  role: 'tabpanel';\n}\n\nexport const StyledPanelContainer = styled('div', {\n  name: DSTabsName,\n  slot: TABS_SLOTS.TAB_PANEL,\n})<StyledPanelContainerPropsT>`\n  flex: 1 1 auto;\n  min-height: 0;\n  padding-top: 8px;\n  &:focus {\n    outline: none;\n  }\n\n  ${({ isDSMobile }) => (isDSMobile ? `padding-top: 0;` : ``)}\n`;\n\nexport const StyledDSSwipeCard = styled(DSSwipeCard<PanelDescriptor>, {\n  name: DSTabsName,\n  slot: TABS_SLOTS.TABS_SWIPE_CARD,\n})``;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,2BAA4B;AAC5B,uBAAuB;AACvB,uBAAuC;AAsBhC,MAAM,2BAAuB,yBAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQG,CAAC,EAAE,WAAW,MAAO,aAAa,oBAAoB,EAAG;AAAA;AAGtD,MAAM,wBAAoB,yBAAO,kCAA8B;AAAA,EACpE,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;",
   "names": []
 }

package/dist/esm/config/useTabs.js

@@ -105,7 +105,9 @@ const useTabs = (props) => {
         const target = data.event.target;
         const { dataset, ariaDisabled } = target;
         if (dataset.tabId && ariaDisabled !== "true") {
-          handleOnTabChange(dataset.tabId, data.event);
+          if (isDSMobile && !fixedTabsHeaders && data.event) {
+            centerTab({ e: data.event, listRef: tabsListRef });
+          }
         }
       }
       if (data.target === "swipeableViews") {
@@ -115,7 +117,7 @@ const useTabs = (props) => {
         handleOnTabChange(data.tabId, data.event);
       }
     },
-    [propsWithDefaults.allowTextSelection, handleOnTabChange]
+    [propsWithDefaults.allowTextSelection, handleOnTabChange, tabsListRef, fixedTabsHeaders, isDSMobile]
   );
   const ctx = useMemo(
     () => ({

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useTabs.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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          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    }),\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"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/constants/index.js

@@ -27,7 +27,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 = {
   ...slotObjectToDataTestIds(DSTabsName, TABS_SLOTS),

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

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

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

@@ -1,9 +1,13 @@
 import * as React from "react";
 import { styled } from "@elliemae/ds-system";
 import { DSTabsName, TABS_SLOTS } from "../../constants/index.js";
-const StyledTabsContainer = styled("div", { name: DSTabsName, slot: TABS_SLOTS.TABS_CONTAINER })``;
+const StyledTabsContainer = styled("div", { name: DSTabsName, slot: TABS_SLOTS.TABS_CONTAINER })`
+  display: flex;
+  flex-direction: column;
+`;
 const StyledTabBarContainer = styled.div`
   display: flex;
+  flex: 0 0 auto;
   overflow-x: hidden;
 `;
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsContent/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSTabsName, TABS_SLOTS } from '../../constants/index.js';\n\nexport const StyledTabsContainer = styled('div', { name: DSTabsName, slot: TABS_SLOTS.TABS_CONTAINER })``;\nexport const StyledTabBarContainer = styled.div`\n  display: flex;\n  overflow-x: hidden;\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY,kBAAkB;AAEhC,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,YAAY,MAAM,WAAW,eAAe,CAAC;AAC/F,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSTabsName, TABS_SLOTS } from '../../constants/index.js';\n\nexport const StyledTabsContainer = styled('div', { name: DSTabsName, slot: TABS_SLOTS.TABS_CONTAINER })`\n  display: flex;\n  flex-direction: column;\n`;\nexport const StyledTabBarContainer = styled.div`\n  display: flex;\n  flex: 0 0 auto;\n  overflow-x: hidden;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY,kBAAkB;AAEhC,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,YAAY,MAAM,WAAW,eAAe,CAAC;AAAA;AAAA;AAAA;AAI/F,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import React2, { useMemo, useContext, useCallback } from "react";
-import { DSSwipeCard } from "@elliemae/ds-swipe-card";
-import { StyledPanelContainer } from "./styles.js";
+import { useOwnerProps } from "@elliemae/ds-props-helpers";
+import React2, { useCallback, useContext, useMemo } from "react";
 import { DSTabsContext } from "../../DSTabsCTX.js";
+import { StyledDSSwipeCard, StyledPanelContainer } from "./styles.js";
 const CardRender = (props) => {
   const { content, tabPanelsProps, isDSMobile, hide, style, role, tabId, renderKey, ...rest } = props;
   return /* @__PURE__ */ jsx(
@@ -24,9 +24,11 @@ const TabsPanels = () => {
   const {
     actualActiveTab,
     focusableTabsRef,
+    props,
     props: { onlyRenderActiveTab, children: tabs, isDSMobile, tabPanelsProps, animated },
     globalClickHandler
   } = useContext(DSTabsContext);
+  const { getOwnerProps: getTabPanelsOwnerProps, getOwnerPropsArguments: getTabPanelsOwnerPropsArguments } = useOwnerProps(props);
   const handleOnChangeIndex = useCallback(
     (index, indexLatest) => {
       if (!focusableTabsRef.current) return;
@@ -82,14 +84,16 @@ const TabsPanels = () => {
     return idx >= 0 ? idx : 0;
   })();
   return /* @__PURE__ */ jsx(
-    DSSwipeCard,
+    StyledDSSwipeCard,
     {
       activeSlide,
       onSwipe: (i) => handleOnChangeIndex(i, activeSlide),
       enableTouch: true,
       enableAnimation: animated,
       CardRender,
-      slidesProps: panels
+      slidesProps: panels,
+      getOwnerProps: getTabPanelsOwnerProps,
+      getOwnerPropsArguments: getTabPanelsOwnerPropsArguments
     }
   );
 };

package/dist/esm/parts/tabsPanel/TabsPanels.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsPanel/TabsPanels.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { DSSwipeCard } from '@elliemae/ds-swipe-card';\nimport type { DSSwipeCardT } from '@elliemae/ds-swipe-card/src/react-desc-prop-types.js';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { StyledPanelContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n/**\n * Describes the data needed to render a single Tab panel slide.\n */\ninterface PanelDescriptor extends Record<string, unknown> {\n  index: number;\n  tabId: string;\n  isActive: boolean;\n  isDSMobile: boolean;\n  content: React.ReactNode;\n  style: React.CSSProperties;\n  tabPanelsProps?: GlobalAttributesT<HTMLDivElement>;\n  'aria-hidden': boolean;\n  'data-panel-id': string;\n  'data-testid': string;\n  hide: boolean;\n  onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n  role: 'tabpanel';\n}\n\n/**\n * Responsible for rendering a single slide using the provided panel descriptor.\n * Receives a `dsIndex` prop from DSSwipeCard which indicates the slide position.\n */\nconst CardRender: React.ComponentType<DSSwipeCardT.CardRenderProps<PanelDescriptor>> = (props) => {\n  const { content, tabPanelsProps, isDSMobile, hide, style, role, tabId, renderKey, ...rest } = props;\n  // We pass through all attributes, including accessibility and dataset attributes.\n  return (\n    <StyledPanelContainer\n      id={tabId}\n      {...tabPanelsProps}\n      {...rest}\n      // Styled component specific props\n      isDSMobile={isDSMobile}\n      hide={hide}\n      style={style}\n      role={role}\n    >\n      {content}\n    </StyledPanelContainer>\n  );\n};\n\nexport const TabsPanels = (): JSX.Element => {\n  const {\n    actualActiveTab,\n    focusableTabsRef,\n    props: { onlyRenderActiveTab, children: tabs, isDSMobile, tabPanelsProps, animated },\n    globalClickHandler,\n  } = useContext(DSTabsContext);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Handler for swipe gestures and tab index changes. It:\n   * 1. Calculates the offset between current and new tab index\n   * 2. Finds the new focusable tab based on the offset\n   * 3. Updates the active tab and forces a click event\n   * 4. May cause unnecessary rerenders due to forced click events\n   */\n  const handleOnChangeIndex = useCallback(\n    (index: number, indexLatest: number) => {\n      if (!focusableTabsRef.current) return;\n\n      const offset = index - indexLatest;\n\n      if (focusableTabsRef.current) {\n        const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);\n\n        const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;\n\n        if (\n          newFocusableIndex < 0 ||\n          newFocusableIndex > focusableTabsRef.current?.length ||\n          !focusableTabsRef.current?.[newFocusableIndex]\n        )\n          return;\n        globalClickHandler({\n          event: { type: 'click' } as React.MouseEvent<HTMLDivElement>,\n          target: 'swipeableViews',\n          tabId: focusableTabsRef.current[newFocusableIndex].dataset.tabId,\n        });\n\n        // swiping does not trigger centerTab function inside handleOnTabChange because there is no event\n        // by clicking we are manually forcing to center the tab\n\n        focusableTabsRef.current[newFocusableIndex].click();\n      }\n    },\n    [actualActiveTab, focusableTabsRef, globalClickHandler],\n  );\n\n  const panels: PanelDescriptor[] = useMemo(() => {\n    // this component is based on React.children, swipeable views want an index in the array, not a tabId\n    // two bad patterns relying on each others results in:\n    //   - because of react.children,\n    //       to guarantee predictability in finding the index based on tabId we should never return \"null\" which is not part of React.Children.toArray\n    //\n    //  when not using swipeable views, we don't need to find the index based on tabId\n    //    so even if we return null the variable\n    //    indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull\n    //      (which will be calculating the wrong index)\n    //    will have no impact on the rendering\n    // https://react.dev/reference/react/Children#children-toarray-caveats\n    // Caveats\n    // Empty nodes (null, undefined, and Booleans) will be omitted in the returned array.\n    //\n    // So, long story short,\n    //  1 - do not remove next line, keep the <div /> instead of null when \"animated\"\n    //  2 - NEVER EVER BUILD API BASED ON REACT.CHILDREN (if you are writing code post 2022 and you are not working on a legacy codebase)\n    // To preserve indices for swipe behavior, we return a fully-typed placeholder panel\n    // instead of null when a panel should not be rendered. This keeps array length stable.\n    const mapResult = React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index: number) => {\n      const { tabId: panelId = '', style, children: content, disabled, applyAriaDisabled } = tab.props;\n      const isActive = actualActiveTab === panelId;\n      const shouldRender = !onlyRenderActiveTab || isActive;\n      const getOwnerProps = () => tab.props;\n      const getOwnerPropsArguments = () => ({ panelId });\n\n      const baseDescriptor: PanelDescriptor = {\n        index,\n        tabId: panelId,\n        isActive: Boolean(isActive),\n        isDSMobile: Boolean(isDSMobile),\n        content: shouldRender && !disabled ? content : null,\n        style: {\n          ...(tabPanelsProps?.style || {}),\n          ...(style || {}),\n        } as React.CSSProperties,\n        tabPanelsProps,\n        'aria-hidden': !(isActive && !applyAriaDisabled),\n        'data-panel-id': panelId,\n        'data-testid': 'ds-tabs-tab-panel',\n        hide: !isActive,\n        onClick: (event: React.MouseEvent<HTMLDivElement>) => globalClickHandler({ event, target: 'panel' }),\n        role: 'tabpanel',\n        getOwnerProps,\n        getOwnerPropsArguments,\n      };\n\n      return baseDescriptor;\n    });\n\n    // Children.map can return null if there are no children; ensure an array is returned\n    return mapResult || [];\n  }, [tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, globalClickHandler, isDSMobile]);\n\n  // Safely compute the active slide index. Default to 0 when none found.\n  const activeSlide = (() => {\n    const idx = panels.findIndex((panel) => panel.isActive);\n    return idx >= 0 ? idx : 0;\n  })();\n\n  return (\n    <DSSwipeCard<PanelDescriptor>\n      activeSlide={activeSlide}\n      onSwipe={(i) => handleOnChangeIndex(i, activeSlide)}\n      enableTouch\n      enableAnimation={animated}\n      CardRender={CardRender}\n      slidesProps={panels}\n    />\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport type { DSSwipeCardT } from '@elliemae/ds-swipe-card/src/react-desc-prop-types.js';\nimport React, { useCallback, useContext, useMemo } from 'react';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\nimport type { PanelDescriptor } from './styles.js';\nimport { StyledDSSwipeCard, StyledPanelContainer } from './styles.js';\n/**\n * Describes the data needed to render a single Tab panel slide.\n */\n\n/**\n * Responsible for rendering a single slide using the provided panel descriptor.\n * Receives a `dsIndex` prop from DSSwipeCard which indicates the slide position.\n */\nconst CardRender: React.ComponentType<DSSwipeCardT.CardRenderProps<PanelDescriptor>> = (props) => {\n  const { content, tabPanelsProps, isDSMobile, hide, style, role, tabId, renderKey, ...rest } = props;\n  // We pass through all attributes, including accessibility and dataset attributes.\n  return (\n    <StyledPanelContainer\n      id={tabId}\n      {...tabPanelsProps}\n      {...rest}\n      // Styled component specific props\n      isDSMobile={isDSMobile}\n      hide={hide}\n      style={style}\n      role={role}\n    >\n      {content}\n    </StyledPanelContainer>\n  );\n};\n\nexport const TabsPanels = (): JSX.Element => {\n  const {\n    actualActiveTab,\n    focusableTabsRef,\n    props,\n    props: { onlyRenderActiveTab, children: tabs, isDSMobile, tabPanelsProps, animated },\n    globalClickHandler,\n  } = useContext(DSTabsContext);\n\n  const { getOwnerProps: getTabPanelsOwnerProps, getOwnerPropsArguments: getTabPanelsOwnerPropsArguments } =\n    useOwnerProps(props);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Handler for swipe gestures and tab index changes. It:\n   * 1. Calculates the offset between current and new tab index\n   * 2. Finds the new focusable tab based on the offset\n   * 3. Updates the active tab and forces a click event\n   * 4. May cause unnecessary rerenders due to forced click events\n   */\n  const handleOnChangeIndex = useCallback(\n    (index: number, indexLatest: number) => {\n      if (!focusableTabsRef.current) return;\n\n      const offset = index - indexLatest;\n\n      if (focusableTabsRef.current) {\n        const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);\n\n        const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;\n\n        if (\n          newFocusableIndex < 0 ||\n          newFocusableIndex > focusableTabsRef.current?.length ||\n          !focusableTabsRef.current?.[newFocusableIndex]\n        )\n          return;\n        globalClickHandler({\n          event: { type: 'click' } as React.MouseEvent<HTMLDivElement>,\n          target: 'swipeableViews',\n          tabId: focusableTabsRef.current[newFocusableIndex].dataset.tabId,\n        });\n\n        // swiping does not trigger centerTab function inside handleOnTabChange because there is no event\n        // by clicking we are manually forcing to center the tab\n\n        focusableTabsRef.current[newFocusableIndex].click();\n      }\n    },\n    [actualActiveTab, focusableTabsRef, globalClickHandler],\n  );\n\n  const panels: PanelDescriptor[] = useMemo(() => {\n    // this component is based on React.children, swipeable views want an index in the array, not a tabId\n    // two bad patterns relying on each others results in:\n    //   - because of react.children,\n    //       to guarantee predictability in finding the index based on tabId we should never return \"null\" which is not part of React.Children.toArray\n    //\n    //  when not using swipeable views, we don't need to find the index based on tabId\n    //    so even if we return null the variable\n    //    indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull\n    //      (which will be calculating the wrong index)\n    //    will have no impact on the rendering\n    // https://react.dev/reference/react/Children#children-toarray-caveats\n    // Caveats\n    // Empty nodes (null, undefined, and Booleans) will be omitted in the returned array.\n    //\n    // So, long story short,\n    //  1 - do not remove next line, keep the <div /> instead of null when \"animated\"\n    //  2 - NEVER EVER BUILD API BASED ON REACT.CHILDREN (if you are writing code post 2022 and you are not working on a legacy codebase)\n    // To preserve indices for swipe behavior, we return a fully-typed placeholder panel\n    // instead of null when a panel should not be rendered. This keeps array length stable.\n    const mapResult = React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index: number) => {\n      const { tabId: panelId = '', style, children: content, disabled, applyAriaDisabled } = tab.props;\n      const isActive = actualActiveTab === panelId;\n      const shouldRender = !onlyRenderActiveTab || isActive;\n      const getOwnerProps = () => tab.props;\n      const getOwnerPropsArguments = () => ({ panelId });\n\n      const baseDescriptor: PanelDescriptor = {\n        index,\n        tabId: panelId,\n        isActive: Boolean(isActive),\n        isDSMobile: Boolean(isDSMobile),\n        content: shouldRender && !disabled ? content : null,\n        style: {\n          ...(tabPanelsProps?.style || {}),\n          ...(style || {}),\n        } as React.CSSProperties,\n        tabPanelsProps,\n        'aria-hidden': !(isActive && !applyAriaDisabled),\n        'data-panel-id': panelId,\n        'data-testid': 'ds-tabs-tab-panel',\n        hide: !isActive,\n        onClick: (event: React.MouseEvent<HTMLDivElement>) => globalClickHandler({ event, target: 'panel' }),\n        role: 'tabpanel',\n        getOwnerProps,\n        getOwnerPropsArguments,\n      };\n\n      return baseDescriptor;\n    });\n\n    // Children.map can return null if there are no children; ensure an array is returned\n    return mapResult || [];\n  }, [tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, globalClickHandler, isDSMobile]);\n\n  // Safely compute the active slide index. Default to 0 when none found.\n  const activeSlide = (() => {\n    const idx = panels.findIndex((panel) => panel.isActive);\n    return idx >= 0 ? idx : 0;\n  })();\n\n  return (\n    <StyledDSSwipeCard\n      activeSlide={activeSlide}\n      onSwipe={(i) => handleOnChangeIndex(i, activeSlide)}\n      enableTouch\n      enableAnimation={animated}\n      CardRender={CardRender}\n      slidesProps={panels}\n      getOwnerProps={getTabPanelsOwnerProps}\n      getOwnerPropsArguments={getTabPanelsOwnerPropsArguments}\n    />\n  );\n};\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -1,10 +1,13 @@
 import * as React from "react";
+import { DSSwipeCard } from "@elliemae/ds-swipe-card";
 import { styled } from "@elliemae/ds-system";
-import { TABS_SLOTS, DSTabsName } from "../../constants/index.js";
+import { DSTabsName, TABS_SLOTS } from "../../constants/index.js";
 const StyledPanelContainer = styled("div", {
   name: DSTabsName,
   slot: TABS_SLOTS.TAB_PANEL
 })`
+  flex: 1 1 auto;
+  min-height: 0;
   padding-top: 8px;
   &:focus {
     outline: none;
@@ -12,7 +15,12 @@ const StyledPanelContainer = styled("div", {
 
   ${({ isDSMobile }) => isDSMobile ? `padding-top: 0;` : ``}
 `;
+const StyledDSSwipeCard = styled(DSSwipeCard, {
+  name: DSTabsName,
+  slot: TABS_SLOTS.TABS_SWIPE_CARD
+})``;
 export {
+  StyledDSSwipeCard,
   StyledPanelContainer
 };
 //# sourceMappingURL=styles.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsPanel/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { TABS_SLOTS, DSTabsName } from '../../constants/index.js';\n\ninterface StyledPanelContainerPropsT {\n  hide: boolean;\n  isDSMobile: boolean;\n}\n\nexport const StyledPanelContainer = styled('div', {\n  name: DSTabsName,\n  slot: TABS_SLOTS.TAB_PANEL,\n})<StyledPanelContainerPropsT>`\n  padding-top: 8px;\n  &:focus {\n    outline: none;\n  }\n\n  ${({ isDSMobile }) => (isDSMobile ? `padding-top: 0;` : ``)}\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY,kBAAkB;AAOhC,MAAM,uBAAuB,OAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,WAAW;AACnB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMG,CAAC,EAAE,WAAW,MAAO,aAAa,oBAAoB,EAAG;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { DSSwipeCard } from '@elliemae/ds-swipe-card';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTabsName, TABS_SLOTS } from '../../constants/index.js';\n\ninterface StyledPanelContainerPropsT {\n  hide: boolean;\n  isDSMobile: boolean;\n}\nexport interface PanelDescriptor extends Record<string, unknown> {\n  index: number;\n  tabId: string;\n  isActive: boolean;\n  isDSMobile: boolean;\n  content: React.ReactNode;\n  style: React.CSSProperties;\n  tabPanelsProps?: GlobalAttributesT<HTMLDivElement>;\n  'aria-hidden': boolean;\n  'data-panel-id': string;\n  'data-testid': string;\n  hide: boolean;\n  onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n  role: 'tabpanel';\n}\n\nexport const StyledPanelContainer = styled('div', {\n  name: DSTabsName,\n  slot: TABS_SLOTS.TAB_PANEL,\n})<StyledPanelContainerPropsT>`\n  flex: 1 1 auto;\n  min-height: 0;\n  padding-top: 8px;\n  &:focus {\n    outline: none;\n  }\n\n  ${({ isDSMobile }) => (isDSMobile ? `padding-top: 0;` : ``)}\n`;\n\nexport const StyledDSSwipeCard = styled(DSSwipeCard<PanelDescriptor>, {\n  name: DSTabsName,\n  slot: TABS_SLOTS.TABS_SWIPE_CARD,\n})``;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,YAAY,kBAAkB;AAsBhC,MAAM,uBAAuB,OAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,WAAW;AACnB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQG,CAAC,EAAE,WAAW,MAAO,aAAa,oBAAoB,EAAG;AAAA;AAGtD,MAAM,oBAAoB,OAAO,aAA8B;AAAA,EACpE,MAAM;AAAA,EACN,MAAM,WAAW;AACnB,CAAC;",
   "names": []
 }

package/dist/types/constants/index.d.ts

@@ -26,6 +26,7 @@ export declare const TABS_SLOTS: {
     readonly TAB_LIST: "tab-list";
     readonly CAROUSEL_BUTTON_RIGHT: "chevron-right";
     readonly CAROUSEL_BUTTON_LEFT: "chevron-left";
+    readonly TABS_SWIPE_CARD: "tabs-swipe-card";
 };
 export declare const TABS_DATA_TESTID: {
     SUB_TAB_LIST: string;
@@ -41,4 +42,5 @@ export declare const TABS_DATA_TESTID: {
     TAB_BUTTON: string;
     SUBTAB_BUTTON: string;
     TAB_PANEL: string;
+    TABS_SWIPE_CARD: string;
 };

package/dist/types/parts/tabsPanel/styles.d.ts

@@ -1,6 +1,29 @@
+import type { GlobalAttributesT } from '@elliemae/ds-props-helpers';
 interface StyledPanelContainerPropsT {
     hide: boolean;
     isDSMobile: boolean;
 }
+export interface PanelDescriptor extends Record<string, unknown> {
+    index: number;
+    tabId: string;
+    isActive: boolean;
+    isDSMobile: boolean;
+    content: React.ReactNode;
+    style: React.CSSProperties;
+    tabPanelsProps?: GlobalAttributesT<HTMLDivElement>;
+    'aria-hidden': boolean;
+    'data-panel-id': string;
+    'data-testid': string;
+    hide: boolean;
+    onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+    role: 'tabpanel';
+}
 export declare const StyledPanelContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledPanelContainerPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledDSSwipeCard: import("styled-components").StyledComponent<{
+    (props: import("@elliemae/ds-swipe-card").DSSwipeCardT.Props<PanelDescriptor>): import("react/jsx-runtime.js").JSX.Element;
+    displayName: string;
+}, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<{
+    (props: import("@elliemae/ds-swipe-card").DSSwipeCardT.Props<PanelDescriptor>): import("react/jsx-runtime.js").JSX.Element;
+    displayName: string;
+}>, never>;
 export {};

package/dist/types/tests/DSTabs.get-owner-props.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-tabs",
-  "version": "3.55.0-next.12",
+  "version": "3.55.0-next.14",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tabs",
   "files": [
@@ -37,20 +37,20 @@
   },
   "dependencies": {
     "@react-hook/resize-observer": "~1.2.6",
-    "@elliemae/ds-button-v2": "3.55.0-next.12",
-    "@elliemae/ds-icon": "3.55.0-next.12",
-    "@elliemae/ds-swipe-card": "3.55.0-next.12",
-    "@elliemae/ds-icons": "3.55.0-next.12",
-    "@elliemae/ds-props-helpers": "3.55.0-next.12",
-    "@elliemae/ds-system": "3.55.0-next.12",
-    "@elliemae/ds-typescript-helpers": "3.55.0-next.12"
+    "@elliemae/ds-button-v2": "3.55.0-next.14",
+    "@elliemae/ds-icon": "3.55.0-next.14",
+    "@elliemae/ds-props-helpers": "3.55.0-next.14",
+    "@elliemae/ds-icons": "3.55.0-next.14",
+    "@elliemae/ds-swipe-card": "3.55.0-next.14",
+    "@elliemae/ds-system": "3.55.0-next.14",
+    "@elliemae/ds-typescript-helpers": "3.55.0-next.14"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.65",
     "jest": "~29.7.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-test-utils": "3.55.0-next.12",
-    "@elliemae/ds-monorepo-devops": "3.55.0-next.12"
+    "@elliemae/ds-monorepo-devops": "3.55.0-next.14",
+    "@elliemae/ds-test-utils": "3.55.0-next.14"
   },
   "peerDependencies": {
     "lodash-es": "^4.17.21",