@elliemae/ds-tabs 3.56.0-rc.1 → 3.57.0-next.2

package/dist/cjs/DSTabsCTX.js

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

package/dist/cjs/DSTabsCTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSTabsCTX.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { createContext, createRef } from 'react';\nimport { DSTabsDefaultProps as defaultProps } from './react-desc-prop-types.js';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nconst defaultContext = {\n  props: defaultProps,\n  tabsRef: createRef<Record<number, HTMLButtonElement> | null>(),\n  tabsListRef: createRef<HTMLDivElement | null>(),\n  carouselOnlyListRef: createRef<HTMLDivElement | null>(),\n  focusableTabsRef: createRef<HTMLButtonElement[] | null>(),\n  tabsRefAsArray: createRef<HTMLButtonElement[] | null>(),\n  actualActiveTabRef: createRef<HTMLButtonElement | null>(),\n  setInternalActiveTab: noop,\n  actualActiveTab: '',\n  globalClickHandler: noop,\n  updateIndicatorStyle: noop,\n  updateMobileGradients: noop,\n  setIndicatorStyle: noop,\n  indicatorStyle: { left: 0, width: 0 },\n  mobileGradients: { right: false, left: false },\n} as DSTabsInternalsT.DSTabsUseTabsContextT;\n\nconst defaultCrossRefsContext = {\n  lastTabInternalRef: createRef<HTMLButtonElement | null>(),\n  firstSubtabInternalRef: createRef<HTMLButtonElement | null>(),\n};\n\nexport const DSTabsContext = createContext<DSTabsInternalsT.DSTabsUseTabsContextT>(defaultContext);\nexport const DSTabsCrossRefContext = createContext<DSTabsInternalsT.DSTabsUseCrossRefContextT>(defaultCrossRefsContext);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AACzC,mCAAmD;AAInD,MAAM,OAAO,MAAM;AAAC;AAEpB,MAAM,iBAAiB;AAAA,EACrB,OAAO,6BAAAA;AAAA,EACP,aAAS,wBAAoD;AAAA,EAC7D,iBAAa,wBAAiC;AAAA,EAC9C,yBAAqB,wBAAiC;AAAA,EACtD,sBAAkB,wBAAsC;AAAA,EACxD,oBAAgB,wBAAsC;AAAA,EACtD,wBAAoB,wBAAoC;AAAA,EACxD,sBAAsB;AAAA,EACtB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB,mBAAmB;AAAA,EACnB,gBAAgB,EAAE,MAAM,GAAG,OAAO,EAAE;AAAA,EACpC,iBAAiB,EAAE,OAAO,OAAO,MAAM,MAAM;AAC/C;AAEA,MAAM,0BAA0B;AAAA,EAC9B,wBAAoB,wBAAoC;AAAA,EACxD,4BAAwB,wBAAoC;AAC9D;AAEO,MAAM,oBAAgB,4BAAsD,cAAc;AAC1F,MAAM,4BAAwB,4BAA0D,uBAAuB;",
-  "names": ["defaultProps"]
+  "sourcesContent": ["import { createContext, createRef } from 'react';\n// import { DSTabsDefaultProps as defaultProps } from './react-desc-prop-types.js';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\n// const noop = () => {};\n\n// const defaultContext = {\n//   props: defaultProps,\n//   tabsRef: createRef<Record<number, HTMLButtonElement> | null>(),\n//   tabsListRef: createRef<HTMLDivElement | null>(),\n//   carouselOnlyListRef: createRef<HTMLDivElement | null>(),\n//   focusableTabsRef: createRef<HTMLButtonElement[] | null>(),\n//   tabsRefAsArray: createRef<HTMLButtonElement[] | null>(),\n//   actualActiveTabRef: createRef<HTMLButtonElement | null>(),\n//   userDidChangeTabAtleastOnceRef: createRef<{ current: boolean }>(false),\n//   setInternalActiveTab: noop,\n//   actualActiveTab: '',\n//   globalClickHandler: noop,\n//   updateIndicatorStyle: noop,\n//   updateMobileGradients: noop,\n//   setIndicatorStyle: noop,\n//   indicatorStyle: { left: 0, width: 0 },\n//   mobileGradients: { right: false, left: false },\n// } as DSTabsInternalsT.DSTabsUseTabsContextT;\n\nconst defaultCrossRefsContext = {\n  lastTabInternalRef: createRef<HTMLButtonElement | null>(),\n  firstSubtabInternalRef: createRef<HTMLButtonElement | null>(),\n};\n\nexport const DSTabsContext = createContext<DSTabsInternalsT.DSTabsUseTabsContextT>(\n  {} as unknown as DSTabsInternalsT.DSTabsUseTabsContextT,\n);\nexport const DSTabsCrossRefContext = createContext<DSTabsInternalsT.DSTabsUseCrossRefContextT>(defaultCrossRefsContext);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AA0BzC,MAAM,0BAA0B;AAAA,EAC9B,wBAAoB,wBAAoC;AAAA,EACxD,4BAAwB,wBAAoC;AAC9D;AAEO,MAAM,oBAAgB;AAAA,EAC3B,CAAC;AACH;AACO,MAAM,4BAAwB,4BAA0D,uBAAuB;",
+  "names": []
 }

package/dist/cjs/config/useTabs.js

@@ -117,10 +117,12 @@ const useTabs = (props) => {
     actualActiveTab,
     showSelectionIndicator
   ]);
+  const userDidChangeTabAtleastOnceRef = (0, import_react.useRef)(false);
   const handleOnTabChange = import_react.default.useCallback(
     (tabId, e) => {
       setInternalActiveTab(tabId);
       onTabChange(tabId, e);
+      userDidChangeTabAtleastOnceRef.current = true;
       if (isDSMobile && !fixedTabsHeaders && e) {
         (0, import_helpers.centerTab)({ e, listRef: tabsListRef });
       }
@@ -138,7 +140,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 +152,7 @@ const useTabs = (props) => {
         handleOnTabChange(data.tabId, data.event);
       }
     },
-    [propsWithDefaults.allowTextSelection, handleOnTabChange]
+    [propsWithDefaults.allowTextSelection, handleOnTabChange, tabsListRef, fixedTabsHeaders, isDSMobile]
   );
   const ctx = (0, import_react.useMemo)(
     () => ({
@@ -167,7 +171,8 @@ const useTabs = (props) => {
       indicatorStyle,
       mobileGradients,
       updateMobileGradients,
-      handleOnTabChange
+      handleOnTabChange,
+      userDidChangeTabAtleastOnceRef
     }),
     [
       propsWithDefaults,
@@ -177,7 +182,8 @@ const useTabs = (props) => {
       indicatorStyle,
       mobileGradients,
       updateMobileGradients,
-      handleOnTabChange
+      handleOnTabChange,
+      userDidChangeTabAtleastOnceRef
     ]
   );
   return ctx;

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

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

package/dist/cjs/constants/index.js

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

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

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

package/dist/cjs/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,27 +33,37 @@ __export(TabsPanels_exports, {
 module.exports = __toCommonJS(TabsPanels_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_react2 = __toESM(require("react"));
-var import_react_swipeable_views = __toESM(require("react-swipeable-views"));
-var import_styles = require("./styles.js");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_react = __toESM(require("react"));
 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)(
+    import_styles.StyledPanelContainer,
+    {
+      id: tabId,
+      ...tabPanelsProps,
+      ...rest,
+      isDSMobile,
+      hide,
+      style,
+      role,
+      children: content
+    }
+  );
+};
 const TabsPanels = () => {
   const {
     actualActiveTab,
     focusableTabsRef,
-    props: {
-      animated,
-      enableMouseEvents,
-      onlyRenderActiveTab,
-      children: tabs,
-      isDSMobile,
-      tabPanelsProps,
-      swipeableViewsContainerProps
-    },
-    globalClickHandler
-  } = (0, import_react2.useContext)(import_DSTabsCTX.DSTabsContext);
-  const handleOnChangeIndex = (0, import_react2.useCallback)(
+    props,
+    props: { onlyRenderActiveTab, children: tabs, isDSMobile, tabPanelsProps, animated },
+    globalClickHandler,
+    userDidChangeTabAtleastOnceRef
+  } = (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;
       const offset = index - indexLatest;
@@ -72,65 +82,57 @@ const TabsPanels = () => {
     },
     [actualActiveTab, focusableTabsRef, globalClickHandler]
   );
-  const panels = (0, import_react2.useMemo)(() => {
-    const emptyPanelRender = animated ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}) : null;
-    return import_react2.default.Children.map(tabs, (tab) => {
+  const panels = (0, import_react.useMemo)(() => {
+    const mapResult = import_react.default.Children.map(tabs, (tab, index) => {
       const { tabId: panelId = "", style, children: content, disabled, applyAriaDisabled } = tab.props;
       const isActive = actualActiveTab === panelId;
       const shouldRender = !onlyRenderActiveTab || isActive;
       const getOwnerProps = () => tab.props;
       const getOwnerPropsArguments = () => ({ panelId });
-      if (disabled) return emptyPanelRender;
-      if (!shouldRender) return emptyPanelRender;
-      return /* @__PURE__ */ (0, import_react.createElement)(
-        import_styles.StyledPanelContainer,
-        {
-          ...tabPanelsProps,
-          getOwnerProps,
-          getOwnerPropsArguments,
-          key: panelId,
-          id: panelId,
-          "aria-labelledby": `${panelId}-label`,
-          "aria-hidden": !isActive || !!applyAriaDisabled,
-          "data-panel-id": panelId,
-          "data-testid": "ds-tabs-tab-panel",
-          hide: !isActive,
-          onClick: (event) => globalClickHandler({ event, target: "panel" }),
-          role: "tabpanel",
-          style: {
-            ...tabPanelsProps?.style || {},
-            ...style || {}
-          },
-          isDSMobile
-        },
-        content
-      );
-    });
-  }, [animated, tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, globalClickHandler, isDSMobile]);
-  const indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull = (0, import_react2.useMemo)(() => {
-    const childrenArray = import_react2.default.Children.toArray(tabs);
-    const index = childrenArray.findIndex((tab) => tab.props.tabId === actualActiveTab);
-    if (index === -1) return 0;
-    return index;
-  }, [actualActiveTab, tabs]);
-  if (animated) {
-    const Comp = import_react_swipeable_views.default?.default ?? import_react_swipeable_views.default;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      Comp,
-      {
-        ...swipeableViewsContainerProps,
+      const baseDescriptor = {
+        index,
+        tabId: panelId,
+        isActive: Boolean(isActive),
+        isDSMobile: Boolean(isDSMobile),
+        content: shouldRender && !disabled ? content : null,
         style: {
-          overflow: "hidden",
-          // https://jira.elliemae.io/browse/PUI-9906
-          ...swipeableViewsContainerProps?.style || {}
+          ...tabPanelsProps?.style || {},
+          ...style || {}
         },
-        enableMouseEvents,
-        index: indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull,
-        onChangeIndex: handleOnChangeIndex,
-        children: panels
-      }
-    );
-  }
-  return panels;
+        tabPanelsProps,
+        "aria-hidden": !(isActive && !applyAriaDisabled),
+        "data-panel-id": panelId,
+        "data-testid": "ds-tabs-tab-panel",
+        hide: !isActive,
+        onClick: (event) => globalClickHandler({ event, target: "panel" }),
+        role: "tabpanel",
+        getOwnerProps,
+        getOwnerPropsArguments
+      };
+      return baseDescriptor;
+    });
+    return mapResult || [];
+  }, [tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, globalClickHandler, isDSMobile]);
+  const idx = panels.findIndex((panel) => panel.isActive);
+  const activeSlide = idx >= 0 ? idx : 0;
+  const handleOnSlide = import_react.default.useCallback(
+    (index) => {
+      handleOnChangeIndex(index, activeSlide);
+    },
+    [handleOnChangeIndex, activeSlide]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styles.StyledDSSwipeCard,
+    {
+      activeSlide,
+      onSwipe: handleOnSlide,
+      enableTouch: true,
+      enableAnimation: userDidChangeTabAtleastOnceRef.current && animated,
+      CardRender,
+      slidesProps: panels,
+      getOwnerProps: getTabPanelsOwnerProps,
+      getOwnerPropsArguments: getTabPanelsOwnerPropsArguments
+    }
+  );
 };
 //# sourceMappingURL=TabsPanels.js.map

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 SwipeableViews from 'react-swipeable-views';\nimport { StyledPanelContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n\nexport const TabsPanels = (): JSX.Element | JSX.Element[] => {\n  const {\n    actualActiveTab,\n    focusableTabsRef,\n    props: {\n      animated,\n      enableMouseEvents,\n      onlyRenderActiveTab,\n      children: tabs,\n      isDSMobile,\n      tabPanelsProps,\n      swipeableViewsContainerProps,\n    },\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 = 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    const emptyPanelRender = animated ? <div /> : null;\n    return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>) => {\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      if (disabled) return emptyPanelRender;\n      if (!shouldRender) return emptyPanelRender;\n      return (\n        <StyledPanelContainer\n          {...tabPanelsProps}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          key={panelId}\n          id={panelId}\n          aria-labelledby={`${panelId}-label`}\n          aria-hidden={!isActive || !!applyAriaDisabled}\n          data-panel-id={panelId}\n          data-testid=\"ds-tabs-tab-panel\"\n          hide={!isActive}\n          onClick={(event) => globalClickHandler({ event, target: 'panel' })}\n          role=\"tabpanel\"\n          style={{\n            ...(tabPanelsProps?.style || {}),\n            ...(style || {}),\n          }}\n          isDSMobile={isDSMobile}\n        >\n          {content}\n        </StyledPanelContainer>\n      );\n    });\n  }, [animated, tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, globalClickHandler, isDSMobile]);\n\n  const indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull = useMemo(() => {\n    const childrenArray = React.Children.toArray(tabs) as React.ReactElement<DSTabT.Props>[];\n    const index = childrenArray.findIndex((tab) => tab.props.tabId === actualActiveTab);\n\n    if (index === -1) return 0;\n    return index;\n  }, [actualActiveTab, tabs]);\n\n  if (animated) {\n    // Ignore ts errors on the next line because the 'react-swipeable-views' package does not export a type for the SwipeableViews component\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment\n    const Comp = (SwipeableViews as any)?.default ?? SwipeableViews;\n    return (\n      <Comp\n        {...swipeableViewsContainerProps}\n        style={{\n          overflow: 'hidden', // https://jira.elliemae.io/browse/PUI-9906\n          ...(swipeableViewsContainerProps?.style || {}),\n        }}\n        enableMouseEvents={enableMouseEvents}\n        index={indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull}\n        onChangeIndex={handleOnChangeIndex}\n      >\n        {panels}\n      </Comp>\n    );\n  }\n\n  return panels;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
-  "names": ["import_react", "React", "SwipeableViews"]
+  "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    userDidChangeTabAtleastOnceRef,\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    // 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 idx = panels.findIndex((panel) => panel.isActive);\n  const activeSlide = idx >= 0 ? idx : 0;\n  const handleOnSlide = React.useCallback(\n    (index: number) => {\n      handleOnChangeIndex(index, activeSlide);\n    },\n    [handleOnChangeIndex, activeSlide],\n  );\n\n  return (\n    <StyledDSSwipeCard\n      activeSlide={activeSlide}\n      onSwipe={handleOnSlide}\n      enableTouch\n      enableAnimation={userDidChangeTabAtleastOnceRef.current && 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,23 +28,29 @@ 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;
   }
 
-  ${({ hide }) => hide ? "visibility: hidden; position: absolute;" : ""}
-
   ${({ 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  ${({ hide }) => (hide ? 'visibility: hidden; position: absolute;' : '')}\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,KAAK,MAAO,OAAO,4CAA4C,EAAG;AAAA;AAAA,IAErE,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/cjs/react-desc-prop-types.js

@@ -59,7 +59,7 @@ const DSTabsPropTypes = {
   ...import_ds_props_helpers.globalAttributesPropTypes,
   ...import_ds_props_helpers.xstyledPropTypes,
   animated: import_ds_props_helpers.PropTypes.bool.description("Whether the Tab transition should animate or not.").defaultValue(true),
-  enableMouseEvents: import_ds_props_helpers.PropTypes.bool.description("Enables Tab transition with mouse drag events.").defaultValue(false),
+  enableMouseEvents: import_ds_props_helpers.PropTypes.bool.description("Enables Tab transition with mouse drag events.").defaultValue(false).deprecated({ version: "3.55.x", message: "This prop is no longer supported." }),
   allowTextSelection: import_ds_props_helpers.PropTypes.bool.description("Allows text selection when mouse drag events are active.").defaultValue(false),
   onTabChange: import_ds_props_helpers.PropTypes.func.description("Handler when a user clicks on a different Tab.").defaultValue("() => {}"),
   type: import_ds_props_helpers.PropTypes.oneOf(import_constants.TAB_TYPES_VALUES_AS_ARRAY).description("Tab type.").defaultValue(import_constants.TAB_TYPES_VALUES_AS_ARRAY[0]),
@@ -75,7 +75,7 @@ const DSTabsPropTypes = {
   containerProps: import_ds_props_helpers.PropTypes.object.description("Additional properties for the container.").defaultValue({}),
   innerRef: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.func, import_ds_props_helpers.PropTypes.shape({ current: import_ds_props_helpers.PropTypes.any })]).description("Ref to the container.").defaultValue(void 0),
   tabPanelsProps: import_ds_props_helpers.PropTypes.shape(import_ds_props_helpers.globalAttributesPropTypes).description("Additional properties for the tab container.").defaultValue({}),
-  swipeableViewsContainerProps: import_ds_props_helpers.PropTypes.object.description("Additional properties for the swipeable container.").defaultValue({}),
+  swipeableViewsContainerProps: import_ds_props_helpers.PropTypes.object.description("Additional properties for the swipeable container.").defaultValue(void 0).deprecated({ version: "3.55.x", message: "This prop is no longer supported." }),
   firstSubtabRef: import_ds_props_helpers.PropTypes.shape({ current: import_ds_props_helpers.PropTypes.any }).description("Ref to the first subtab element.").defaultValue(void 0),
   lastTabRef: import_ds_props_helpers.PropTypes.shape({ current: import_ds_props_helpers.PropTypes.any }).description("Ref to the last tab element.").defaultValue(void 0),
   TabBarExtraContent: import_ds_props_helpers.PropTypes.element.description("Additional content to display in the tab bar."),

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { SwipeableViewsProps } from 'react-swipeable-views';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\n\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES, TAB_TYPES_VALUES_AS_ARRAY } from './constants/index.js';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n  export interface DefaultProps {\n    tabId: string;\n    applyAriaDisabled: boolean;\n  }\n\n  export interface OptionalProps {\n    style?: Record<string, unknown>;\n    title?: string;\n    required?: boolean;\n    disabled?: boolean;\n    ref?: React.MutableRefObject<HTMLButtonElement>;\n    onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n    onKeyDown?: (e: React.KeyboardEvent) => null | void;\n  }\n\n  export interface RequiredProps {\n    children: TypescriptHelpersT.ReactChildrenComplete;\n  }\n\n  export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n}\n\nexport declare namespace DSTabsT {\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    animated: boolean;\n    enableMouseEvents: boolean;\n    allowTextSelection: boolean;\n    onTabChange: (tabId: string, e?: React.MouseEvent) => void;\n    tabsListAriaLabel: string;\n    type: DSTabsInternalsT.TabTypesT;\n    children: React.ReactElement<DSTabT.Props>[] | readonly React.ReactElement<DSTabT.Props>[];\n    onlyRenderActiveTab: boolean;\n    fixedTabsHeaders: boolean;\n    withCarousel: boolean;\n    isDSMobile: boolean;\n    showSelectionIndicator: boolean;\n    showSeparator: boolean;\n    tabPanelsProps: GlobalAttributesT<HTMLDivElement>;\n    swipeableViewsContainerProps: SwipeableViewsProps;\n  }\n\n  export interface OptionalProps {\n    firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n    lastTabRef?: React.MutableRefObject<HTMLElement>;\n    TabBarExtraContent?: React.ComponentType;\n    tabBarExtraContent?: React.ReactNode;\n    activeTab?: string;\n    innerRef?: React.MutableRefObject<HTMLDivElement>;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps {}\n}\n\nexport const DSTabPropTypes: DSPropTypesSchema<DSTabT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  tabId: PropTypes.string.description('Unique Tab id.').defaultValue(''),\n  title: PropTypes.string.description('Tab title.').defaultValue(''),\n  required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n  disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n  style: PropTypes.object.description('Custom styles for the tab.').defaultValue({}),\n  ref: PropTypes.shape({ current: PropTypes.any }).description('Ref to the tab element.').defaultValue(undefined),\n  onClick: PropTypes.func.description('Click handler for the tab.').defaultValue(undefined),\n  onKeyDown: PropTypes.func.description('Keydown handler for the tab.').defaultValue(undefined),\n  children: PropTypes.node.description('Content of the tab.').isRequired,\n};\n\nexport const DSTabsPropTypes: DSPropTypesSchema<DSTabsT.Props> = {\n  ...getPropsPerSlotPropTypes(DSTabsName, TABS_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),\n  enableMouseEvents: PropTypes.bool.description('Enables Tab transition with mouse drag events.').defaultValue(false),\n  allowTextSelection: PropTypes.bool\n    .description('Allows text selection when mouse drag events are active.')\n    .defaultValue(false),\n  onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n  type: PropTypes.oneOf(TAB_TYPES_VALUES_AS_ARRAY).description('Tab type.').defaultValue(TAB_TYPES_VALUES_AS_ARRAY[0]),\n  fixedTabsHeaders: PropTypes.bool.description('Fixes the tab headers.').defaultValue(false),\n  isDSMobile: PropTypes.bool.description('Indicates if the component is in mobile mode.').defaultValue(false),\n  showSelectionIndicator: PropTypes.bool\n    .description('Shows the selection indicator for the active tab.')\n    .defaultValue(true),\n  showSeparator: PropTypes.bool.description('Shows a separator between tabs.').defaultValue(true),\n\n  onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n  withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),\n  activeTab: PropTypes.string\n    .description('Passing a value makes DSTabs a controlled component.')\n    .defaultValue('First DSTab children.'),\n  children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n  tabsListAriaLabel: PropTypes.string.description('Aria label for the list.').defaultValue('Tab list.'),\n  containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n    .description('Ref to the container.')\n    .defaultValue(undefined),\n  tabPanelsProps: PropTypes.shape(globalAttributesPropTypes)\n    .description('Additional properties for the tab container.')\n    .defaultValue({}),\n  swipeableViewsContainerProps: PropTypes.object\n    .description('Additional properties for the swipeable container.')\n    .defaultValue({}),\n  firstSubtabRef: PropTypes.shape({ current: PropTypes.any })\n    .description('Ref to the first subtab element.')\n    .defaultValue(undefined),\n  lastTabRef: PropTypes.shape({ current: PropTypes.any })\n    .description('Ref to the last tab element.')\n    .defaultValue(undefined),\n  TabBarExtraContent: PropTypes.element.description('Additional content to display in the tab bar.'),\n  tabBarExtraContent: PropTypes.node\n    .description('Additional content to display in the tab bar.')\n    .defaultValue(undefined),\n};\n\nexport const DSTabsDefaultProps: DSTabsT.DefaultProps = {\n  containerProps: {},\n  animated: true,\n  enableMouseEvents: false,\n  allowTextSelection: false,\n  onTabChange: noop,\n  tabsListAriaLabel: 'Tab list',\n  type: TAB_TYPES.NORMAL,\n  onlyRenderActiveTab: false,\n  withCarousel: false,\n  isDSMobile: false,\n  showSelectionIndicator: true,\n  children: [],\n  fixedTabsHeaders: false,\n  showSeparator: true,\n  tabPanelsProps: {},\n  swipeableViewsContainerProps: {},\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AAKP,uBAA6E;AAE7E,MAAM,OAAO,MAAY;AAAC;AAmEnB,MAAM,iBAAkD;AAAA,EAC7D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,kCAAU,OAAO,YAAY,gBAAgB,EAAE,aAAa,EAAE;AAAA,EACrE,OAAO,kCAAU,OAAO,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EACjE,UAAU,kCAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAClG,UAAU,kCAAU,KAAK,YAAY,eAAe,EAAE,aAAa,KAAK;AAAA,EACxE,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,OAAO,kCAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,CAAC,CAAC;AAAA,EACjF,KAAK,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,EAAE,YAAY,yBAAyB,EAAE,aAAa,MAAS;AAAA,EAC9G,SAAS,kCAAU,KAAK,YAAY,4BAA4B,EAAE,aAAa,MAAS;AAAA,EACxF,WAAW,kCAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,MAAS;AAAA,EAC5F,UAAU,kCAAU,KAAK,YAAY,qBAAqB,EAAE;AAC9D;AAEO,MAAM,kBAAoD;AAAA,EAC/D,OAAG,kDAAyB,6BAAY,2BAAU;AAAA,EAClD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,YAAY,mDAAmD,EAAE,aAAa,IAAI;AAAA,EAC3G,mBAAmB,kCAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,KAAK;AAAA,EAClH,oBAAoB,kCAAU,KAC3B,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,aAAa,kCAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,UAAU;AAAA,EACjH,MAAM,kCAAU,MAAM,0CAAyB,EAAE,YAAY,WAAW,EAAE,aAAa,2CAA0B,CAAC,CAAC;AAAA,EACnH,kBAAkB,kCAAU,KAAK,YAAY,wBAAwB,EAAE,aAAa,KAAK;AAAA,EACzF,YAAY,kCAAU,KAAK,YAAY,+CAA+C,EAAE,aAAa,KAAK;AAAA,EAC1G,wBAAwB,kCAAU,KAC/B,YAAY,mDAAmD,EAC/D,aAAa,IAAI;AAAA,EACpB,eAAe,kCAAU,KAAK,YAAY,iCAAiC,EAAE,aAAa,IAAI;AAAA,EAE9F,qBAAqB,kCAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAC7G,cAAc,kCAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,KAAK;AAAA,EAC1F,WAAW,kCAAU,OAClB,YAAY,sDAAsD,EAClE,aAAa,uBAAuB;AAAA,EACvC,UAAU,kCAAU,KAAK,YAAY,kCAAkC,EAAE;AAAA,EACzE,mBAAmB,kCAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,WAAW;AAAA,EACpG,gBAAgB,kCAAU,OAAO,YAAY,0CAA0C,EAAE,aAAa,CAAC,CAAC;AAAA,EACxG,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EACxF,YAAY,uBAAuB,EACnC,aAAa,MAAS;AAAA,EACzB,gBAAgB,kCAAU,MAAM,iDAAyB,EACtD,YAAY,8CAA8C,EAC1D,aAAa,CAAC,CAAC;AAAA,EAClB,8BAA8B,kCAAU,OACrC,YAAY,oDAAoD,EAChE,aAAa,CAAC,CAAC;AAAA,EAClB,gBAAgB,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,EACvD,YAAY,kCAAkC,EAC9C,aAAa,MAAS;AAAA,EACzB,YAAY,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,EACnD,YAAY,8BAA8B,EAC1C,aAAa,MAAS;AAAA,EACzB,oBAAoB,kCAAU,QAAQ,YAAY,+CAA+C;AAAA,EACjG,oBAAoB,kCAAU,KAC3B,YAAY,+CAA+C,EAC3D,aAAa,MAAS;AAC3B;AAEO,MAAM,qBAA2C;AAAA,EACtD,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,MAAM,2BAAU;AAAA,EAChB,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,wBAAwB;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,gBAAgB,CAAC;AAAA,EACjB,8BAA8B,CAAC;AACjC;",
+  "sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\n\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES, TAB_TYPES_VALUES_AS_ARRAY } from './constants/index.js';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n  export interface DefaultProps {\n    tabId: string;\n    applyAriaDisabled: boolean;\n  }\n\n  export interface OptionalProps {\n    style?: Record<string, unknown>;\n    title?: string;\n    required?: boolean;\n    disabled?: boolean;\n    ref?: React.MutableRefObject<HTMLButtonElement>;\n    onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n    onKeyDown?: (e: React.KeyboardEvent) => null | void;\n  }\n\n  export interface RequiredProps {\n    children: TypescriptHelpersT.ReactChildrenComplete;\n  }\n\n  export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n}\n\nexport declare namespace DSTabsT {\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    animated: boolean;\n    enableMouseEvents: boolean;\n    allowTextSelection: boolean;\n    onTabChange: (tabId: string, e?: React.MouseEvent) => void;\n    tabsListAriaLabel: string;\n    type: DSTabsInternalsT.TabTypesT;\n    children: React.ReactElement<DSTabT.Props>[] | readonly React.ReactElement<DSTabT.Props>[];\n    onlyRenderActiveTab: boolean;\n    fixedTabsHeaders: boolean;\n    withCarousel: boolean;\n    isDSMobile: boolean;\n    showSelectionIndicator: boolean;\n    showSeparator: boolean;\n    tabPanelsProps: GlobalAttributesT<HTMLDivElement>;\n    swipeableViewsContainerProps: object;\n  }\n\n  export interface OptionalProps {\n    firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n    lastTabRef?: React.MutableRefObject<HTMLElement>;\n    TabBarExtraContent?: React.ComponentType;\n    tabBarExtraContent?: React.ReactNode;\n    activeTab?: string;\n    innerRef?: React.MutableRefObject<HTMLDivElement>;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps {}\n}\n\nexport const DSTabPropTypes: DSPropTypesSchema<DSTabT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  tabId: PropTypes.string.description('Unique Tab id.').defaultValue(''),\n  title: PropTypes.string.description('Tab title.').defaultValue(''),\n  required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n  disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue(false),\n  style: PropTypes.object.description('Custom styles for the tab.').defaultValue({}),\n  ref: PropTypes.shape({ current: PropTypes.any }).description('Ref to the tab element.').defaultValue(undefined),\n  onClick: PropTypes.func.description('Click handler for the tab.').defaultValue(undefined),\n  onKeyDown: PropTypes.func.description('Keydown handler for the tab.').defaultValue(undefined),\n  children: PropTypes.node.description('Content of the tab.').isRequired,\n};\n\nexport const DSTabsPropTypes: DSPropTypesSchema<DSTabsT.Props> = {\n  ...getPropsPerSlotPropTypes(DSTabsName, TABS_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),\n  enableMouseEvents: PropTypes.bool\n    .description('Enables Tab transition with mouse drag events.')\n    .defaultValue(false)\n    .deprecated({ version: '3.55.x', message: 'This prop is no longer supported.' }),\n  allowTextSelection: PropTypes.bool\n    .description('Allows text selection when mouse drag events are active.')\n    .defaultValue(false),\n  onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n  type: PropTypes.oneOf(TAB_TYPES_VALUES_AS_ARRAY).description('Tab type.').defaultValue(TAB_TYPES_VALUES_AS_ARRAY[0]),\n  fixedTabsHeaders: PropTypes.bool.description('Fixes the tab headers.').defaultValue(false),\n  isDSMobile: PropTypes.bool.description('Indicates if the component is in mobile mode.').defaultValue(false),\n  showSelectionIndicator: PropTypes.bool\n    .description('Shows the selection indicator for the active tab.')\n    .defaultValue(true),\n  showSeparator: PropTypes.bool.description('Shows a separator between tabs.').defaultValue(true),\n\n  onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n  withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),\n  activeTab: PropTypes.string\n    .description('Passing a value makes DSTabs a controlled component.')\n    .defaultValue('First DSTab children.'),\n  children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n  tabsListAriaLabel: PropTypes.string.description('Aria label for the list.').defaultValue('Tab list.'),\n  containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n    .description('Ref to the container.')\n    .defaultValue(undefined),\n  tabPanelsProps: PropTypes.shape(globalAttributesPropTypes)\n    .description('Additional properties for the tab container.')\n    .defaultValue({}),\n  swipeableViewsContainerProps: PropTypes.object\n    .description('Additional properties for the swipeable container.')\n    .defaultValue(undefined)\n    .deprecated({ version: '3.55.x', message: 'This prop is no longer supported.' }),\n  firstSubtabRef: PropTypes.shape({ current: PropTypes.any })\n    .description('Ref to the first subtab element.')\n    .defaultValue(undefined),\n  lastTabRef: PropTypes.shape({ current: PropTypes.any })\n    .description('Ref to the last tab element.')\n    .defaultValue(undefined),\n  TabBarExtraContent: PropTypes.element.description('Additional content to display in the tab bar.'),\n  tabBarExtraContent: PropTypes.node\n    .description('Additional content to display in the tab bar.')\n    .defaultValue(undefined),\n};\n\nexport const DSTabsDefaultProps: DSTabsT.DefaultProps = {\n  containerProps: {},\n  animated: true,\n  enableMouseEvents: false,\n  allowTextSelection: false,\n  onTabChange: noop,\n  tabsListAriaLabel: 'Tab list',\n  type: TAB_TYPES.NORMAL,\n  onlyRenderActiveTab: false,\n  withCarousel: false,\n  isDSMobile: false,\n  showSelectionIndicator: true,\n  children: [],\n  fixedTabsHeaders: false,\n  showSeparator: true,\n  tabPanelsProps: {},\n  swipeableViewsContainerProps: {},\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/sharedTypes.js.map

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