@elliemae/ds-tabs 3.60.0-next.1 → 3.60.0-next.11

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/Carousel.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext } from 'react';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport {\n  StyledCarouselBtnLeft,\n  StyledCarouselBtnRight,\n  StyledCarouselButtonWrapper,\n  StyledCarouselWrapper,\n  StyledChildrenWrap,\n} from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { TABS_DATA_TESTID } from '../../constants/index.js';\n\ninterface CarouselPropsT {\n  children: React.ReactNode;\n}\n\nexport const Carousel = ({ children }: CarouselPropsT): JSX.Element => {\n  const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel();\n\n  const {\n    carouselOnlyListRef,\n    props,\n    props: { type },\n  } = useContext(DSTabsContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n\n  return (\n    <StyledCarouselWrapper>\n      {showChevrons.left && (\n        <StyledCarouselButtonWrapper tabType={type}>\n          <StyledCarouselBtnLeft\n            size=\"s\"\n            onClick={leftButtonOnClick}\n            tabIndex={-1}\n            data-testid={TABS_DATA_TESTID.CAROUSEL_BUTTON_LEFT}\n            buttonType={BUTTON_TYPES.ICON}\n            aria-label=\"Scroll Left\"\n            getOwnerProps={getOwnerProps}\n          >\n            <ChevronLeft size={DSIconSizes.S} />\n          </StyledCarouselBtnLeft>\n        </StyledCarouselButtonWrapper>\n      )}\n      {showChevrons.right && (\n        <StyledCarouselButtonWrapper tabType={type} right={showChevrons.right}>\n          <StyledCarouselBtnRight\n            size=\"s\"\n            onClick={rightButtonOnClick}\n            tabIndex={-1}\n            data-testid={TABS_DATA_TESTID.CAROUSEL_BUTTON_RIGHT}\n            buttonType={BUTTON_TYPES.ICON}\n            aria-label=\"Scroll Right\"\n            getOwnerProps={getOwnerProps}\n          >\n            <ChevronRight size={DSIconSizes.S} />\n          </StyledCarouselBtnRight>\n        </StyledCarouselButtonWrapper>\n      )}\n      <StyledChildrenWrap\n        role=\"tablist\"\n        innerRef={carouselOnlyListRef}\n        onClick={handleOnClick}\n        onScroll={handleOnScroll}\n      >\n        {children}\n      </StyledChildrenWrap>\n    </StyledCarouselWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgCnB,SAYQ,KAZR;AAhCJ,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,cAAc,mBAAmB;AAC1C,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAM1B,MAAM,WAAW,CAAC,EAAE,SAAS,MAAmC;AACrE,QAAM,EAAE,cAAc,mBAAmB,oBAAoB,eAAe,eAAe,IAAI,YAAY;AAE3G,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,IAAI,WAAW,aAAa;AAE5B,QAAM,EAAE,cAAc,IAAI,cAAc,KAAK;AAE7C,SACE,qBAAC,yBACE;AAAA,iBAAa,QACZ,oBAAC,+BAA4B,SAAS,MACpC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,iBAAiB;AAAA,QAC9B,YAAY,aAAa;AAAA,QACzB,cAAW;AAAA,QACX;AAAA,QAEA,8BAAC,eAAY,MAAM,YAAY,GAAG;AAAA;AAAA,IACpC,GACF;AAAA,IAED,aAAa,SACZ,oBAAC,+BAA4B,SAAS,MAAM,OAAO,aAAa,OAC9D;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,iBAAiB;AAAA,QAC9B,YAAY,aAAa;AAAA,QACzB,cAAW;AAAA,QACX;AAAA,QAEA,8BAAC,gBAAa,MAAM,YAAY,GAAG;AAAA;AAAA,IACrC,GACF;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext } from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledCarouselWrapper, StyledChildrenWrap } from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\ninterface CarouselPropsT {\n  children: React.ReactNode;\n}\n\nexport const Carousel = ({ children }: CarouselPropsT): JSX.Element => {\n  const { handleOnClick } = useCarousel();\n\n  const { carouselOnlyListRef, props } = useContext(DSTabsContext);\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  return (\n    <StyledCarouselWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n      <StyledChildrenWrap\n        role=\"tablist\"\n        innerRef={carouselOnlyListRef}\n        onClick={handleOnClick}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {children}\n      </StyledChildrenWrap>\n    </StyledCarouselWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmBjB;AAnBN,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB,0BAA0B;AAC1D,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAMvB,MAAM,WAAW,CAAC,EAAE,SAAS,MAAmC;AACrE,QAAM,EAAE,cAAc,IAAI,YAAY;AAEtC,QAAM,EAAE,qBAAqB,MAAM,IAAI,WAAW,aAAa;AAE/D,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,KAAK;AAErE,SACE,oBAAC,yBAAsB,eAA8B,wBACnD;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;",
   "names": []
 }

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

@@ -38,7 +38,7 @@ const StyledChildrenWrap = styled.div`
   display: flex;
   flex-wrap: nowrap;
   flex: 1;
-  overflow-x: hidden;
+  overflow-x: auto;
 `;
 const StyledCarouselButtonWrapper = styled.div`
   max-width: 16px;

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

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

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

@@ -1,53 +1,38 @@
 import * as React from "react";
-import { useCallback, useState, useContext } from "react";
-import useResizeObserver from "@react-hook/resize-observer";
+import { useCallback, useContext } from "react";
 import { DSTabsContext } from "../../DSTabsCTX.js";
 import { isElementVisibleCarousel } from "../../utils/helpers.js";
-import { useCarouselCallbacks } from "./useCarouselCallbacks.js";
 const useCarousel = () => {
-  const { carouselOnlyListRef } = useContext(DSTabsContext);
-  const [showChevrons, setShowChevrons] = useState({
-    right: false,
-    left: false
-  });
-  const { tabsRefAsArray } = useContext(DSTabsContext);
-  const shouldShowLeft = useCallback(
-    () => carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft > 0 : false,
-    [carouselOnlyListRef]
-  );
-  const shouldShowRight = useCallback(
-    () => carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft < carouselOnlyListRef.current.scrollWidth - carouselOnlyListRef.current.clientWidth : false,
-    [carouselOnlyListRef]
-  );
-  const recalcChevrons = useCallback(() => {
-    setShowChevrons({ right: shouldShowRight(), left: shouldShowLeft() });
-  }, [shouldShowLeft, shouldShowRight]);
-  const getVisibleItemsOffset = useCallback(() => {
-    if (tabsRefAsArray.current) {
-      const scroll = tabsRefAsArray.current.reduce((acc, c) => {
-        if (isElementVisibleCarousel(c, carouselOnlyListRef.current)) {
-          const styles = window.getComputedStyle(c);
-          const width = c.clientWidth;
-          const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
-          return acc + (width + margin);
+  const { carouselOnlyListRef, focusableTabsRef } = useContext(DSTabsContext);
+  const handleOnClick = useCallback(
+    ({ target }) => {
+      if (focusableTabsRef.current && target.getAttribute("role") === "tab") {
+        const tabList = carouselOnlyListRef.current;
+        const tabButton = target;
+        const tabButtonDimensions = tabButton.getBoundingClientRect();
+        const tabListDimensions = tabList?.getBoundingClientRect();
+        const tabButtonIndex = tabButton.dataset.index;
+        const lastItemIndex = focusableTabsRef.current.length.toString();
+        const magicNumber = 34;
+        const firstOrLastItem = tabButtonIndex === "0" || tabButtonIndex === lastItemIndex;
+        if (!isElementVisibleCarousel(tabButton, tabList, firstOrLastItem) && tabListDimensions && carouselOnlyListRef.current) {
+          const containerWidth = tabListDimensions.width;
+          const halfContainer = containerWidth / 2;
+          const elementScrollPosition = tabButtonDimensions.left - tabListDimensions.left;
+          const positionInContainer = elementScrollPosition % containerWidth;
+          const width = tabButton.offsetWidth + magicNumber;
+          if (positionInContainer > halfContainer) {
+            carouselOnlyListRef.current.scrollLeft += width + positionInContainer - containerWidth;
+          } else {
+            carouselOnlyListRef.current.scrollLeft += positionInContainer - magicNumber;
+          }
         }
-        return acc;
-      }, 0);
-      return scroll - 16;
-    }
-    return 0;
-  }, [tabsRefAsArray, carouselOnlyListRef]);
-  useResizeObserver(carouselOnlyListRef, recalcChevrons);
-  const { leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarouselCallbacks({
-    getVisibleItemsOffset,
-    recalcChevrons
-  });
+      }
+    },
+    [focusableTabsRef, carouselOnlyListRef]
+  );
   return {
-    showChevrons,
-    leftButtonOnClick,
-    rightButtonOnClick,
-    handleOnClick,
-    handleOnScroll
+    handleOnClick
   };
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/useCarousel.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useState, useContext } from 'react';\nimport useResizeObserver from '@react-hook/resize-observer';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { isElementVisibleCarousel } from '../../utils/helpers.js';\nimport { useCarouselCallbacks } from './useCarouselCallbacks.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\n\ninterface UseCarouselReturnTypeT {\n  showChevrons: DSTabsInternalsT.ShowChevronsT;\n  leftButtonOnClick: () => void;\n  rightButtonOnClick: () => void;\n  handleOnClick: (e: React.MouseEvent) => void;\n  handleOnScroll: (e: React.UIEvent) => void;\n}\n\nexport const useCarousel = (): UseCarouselReturnTypeT => {\n  const { carouselOnlyListRef } = useContext(DSTabsContext);\n\n  const [showChevrons, setShowChevrons] = useState<DSTabsInternalsT.ShowChevronsT>({\n    right: false,\n    left: false,\n  });\n\n  const { tabsRefAsArray } = useContext(DSTabsContext);\n\n  const shouldShowLeft = useCallback(\n    () => (carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft > 0 : false),\n\n    [carouselOnlyListRef],\n  );\n\n  const shouldShowRight = useCallback(\n    () =>\n      carouselOnlyListRef.current\n        ? carouselOnlyListRef.current.scrollLeft <\n          carouselOnlyListRef.current.scrollWidth - carouselOnlyListRef.current.clientWidth\n        : false,\n    [carouselOnlyListRef],\n  );\n\n  const recalcChevrons = useCallback(() => {\n    setShowChevrons({ right: shouldShowRight(), left: shouldShowLeft() });\n  }, [shouldShowLeft, shouldShowRight]);\n\n  const getVisibleItemsOffset = useCallback(() => {\n    if (tabsRefAsArray.current) {\n      const scroll = tabsRefAsArray.current.reduce((acc, c) => {\n        if (isElementVisibleCarousel(c, carouselOnlyListRef.current)) {\n          const styles = window.getComputedStyle(c);\n          const width = c.clientWidth;\n          const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);\n\n          return acc + (width + margin);\n        }\n        return acc;\n      }, 0);\n\n      return scroll - 16;\n    }\n    return 0;\n  }, [tabsRefAsArray, carouselOnlyListRef]);\n\n  useResizeObserver(carouselOnlyListRef, recalcChevrons);\n\n  const { leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarouselCallbacks({\n    getVisibleItemsOffset,\n    recalcChevrons,\n  });\n\n  return {\n    showChevrons,\n    leftButtonOnClick,\n    rightButtonOnClick,\n    handleOnClick,\n    handleOnScroll,\n  };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,UAAU,kBAAkB;AAClD,OAAO,uBAAuB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AAW9B,MAAM,cAAc,MAA8B;AACvD,QAAM,EAAE,oBAAoB,IAAI,WAAW,aAAa;AAExD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAyC;AAAA,IAC/E,OAAO;AAAA,IACP,MAAM;AAAA,EACR,CAAC;AAED,QAAM,EAAE,eAAe,IAAI,WAAW,aAAa;AAEnD,QAAM,iBAAiB;AAAA,IACrB,MAAO,oBAAoB,UAAU,oBAAoB,QAAQ,aAAa,IAAI;AAAA,IAElF,CAAC,mBAAmB;AAAA,EACtB;AAEA,QAAM,kBAAkB;AAAA,IACtB,MACE,oBAAoB,UAChB,oBAAoB,QAAQ,aAC5B,oBAAoB,QAAQ,cAAc,oBAAoB,QAAQ,cACtE;AAAA,IACN,CAAC,mBAAmB;AAAA,EACtB;AAEA,QAAM,iBAAiB,YAAY,MAAM;AACvC,oBAAgB,EAAE,OAAO,gBAAgB,GAAG,MAAM,eAAe,EAAE,CAAC;AAAA,EACtE,GAAG,CAAC,gBAAgB,eAAe,CAAC;AAEpC,QAAM,wBAAwB,YAAY,MAAM;AAC9C,QAAI,eAAe,SAAS;AAC1B,YAAM,SAAS,eAAe,QAAQ,OAAO,CAAC,KAAK,MAAM;AACvD,YAAI,yBAAyB,GAAG,oBAAoB,OAAO,GAAG;AAC5D,gBAAM,SAAS,OAAO,iBAAiB,CAAC;AACxC,gBAAM,QAAQ,EAAE;AAChB,gBAAM,SAAS,WAAW,OAAO,UAAU,IAAI,WAAW,OAAO,WAAW;AAE5E,iBAAO,OAAO,QAAQ;AAAA,QACxB;AACA,eAAO;AAAA,MACT,GAAG,CAAC;AAEJ,aAAO,SAAS;AAAA,IAClB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,mBAAmB,CAAC;AAExC,oBAAkB,qBAAqB,cAAc;AAErD,QAAM,EAAE,mBAAmB,oBAAoB,eAAe,eAAe,IAAI,qBAAqB;AAAA,IACpG;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useContext } from 'react';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { isElementVisibleCarousel } from '../../utils/helpers.js';\n\ninterface UseCarouselReturnTypeT {\n  handleOnClick: (e: React.MouseEvent) => void;\n}\n\nexport const useCarousel = (): UseCarouselReturnTypeT => {\n  const { carouselOnlyListRef, focusableTabsRef } = useContext(DSTabsContext);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Click handler for carousel tabs. It:\n   * 1. Checks if clicked element is a tab\n   * 2. Calculates scroll position to center the tab\n   * 3. Updates scroll position with magic number adjustments\n   * 4. May cause rerenders due to scroll position updates\n   */\n  const handleOnClick = useCallback(\n    ({ target }: React.MouseEvent) => {\n      if (focusableTabsRef.current && (target as HTMLButtonElement).getAttribute('role') === 'tab') {\n        const tabList = carouselOnlyListRef.current;\n        const tabButton = target as HTMLButtonElement;\n        const tabButtonDimensions = tabButton.getBoundingClientRect();\n        const tabListDimensions = tabList?.getBoundingClientRect();\n        const tabButtonIndex = tabButton.dataset.index as string;\n        const lastItemIndex = focusableTabsRef.current.length.toString();\n        const magicNumber = 34;\n\n        const firstOrLastItem = tabButtonIndex === '0' || tabButtonIndex === lastItemIndex;\n\n        if (\n          !isElementVisibleCarousel(tabButton, tabList, firstOrLastItem) &&\n          tabListDimensions &&\n          carouselOnlyListRef.current\n        ) {\n          const containerWidth = tabListDimensions.width;\n          const halfContainer = containerWidth / 2;\n          const elementScrollPosition = tabButtonDimensions.left - tabListDimensions.left;\n          const positionInContainer = elementScrollPosition % containerWidth;\n          const width = tabButton.offsetWidth + magicNumber;\n\n          if (positionInContainer > halfContainer) {\n            carouselOnlyListRef.current.scrollLeft += width + positionInContainer - containerWidth;\n          } else {\n            carouselOnlyListRef.current.scrollLeft += positionInContainer - magicNumber;\n          }\n        }\n      }\n    },\n    [focusableTabsRef, carouselOnlyListRef],\n  );\n\n  return {\n    handleOnClick,\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,kBAAkB;AACxC,SAAS,qBAAqB;AAC9B,SAAS,gCAAgC;AAMlC,MAAM,cAAc,MAA8B;AACvD,QAAM,EAAE,qBAAqB,iBAAiB,IAAI,WAAW,aAAa;AAS1E,QAAM,gBAAgB;AAAA,IACpB,CAAC,EAAE,OAAO,MAAwB;AAChC,UAAI,iBAAiB,WAAY,OAA6B,aAAa,MAAM,MAAM,OAAO;AAC5F,cAAM,UAAU,oBAAoB;AACpC,cAAM,YAAY;AAClB,cAAM,sBAAsB,UAAU,sBAAsB;AAC5D,cAAM,oBAAoB,SAAS,sBAAsB;AACzD,cAAM,iBAAiB,UAAU,QAAQ;AACzC,cAAM,gBAAgB,iBAAiB,QAAQ,OAAO,SAAS;AAC/D,cAAM,cAAc;AAEpB,cAAM,kBAAkB,mBAAmB,OAAO,mBAAmB;AAErE,YACE,CAAC,yBAAyB,WAAW,SAAS,eAAe,KAC7D,qBACA,oBAAoB,SACpB;AACA,gBAAM,iBAAiB,kBAAkB;AACzC,gBAAM,gBAAgB,iBAAiB;AACvC,gBAAM,wBAAwB,oBAAoB,OAAO,kBAAkB;AAC3E,gBAAM,sBAAsB,wBAAwB;AACpD,gBAAM,QAAQ,UAAU,cAAc;AAEtC,cAAI,sBAAsB,eAAe;AACvC,gCAAoB,QAAQ,cAAc,QAAQ,sBAAsB;AAAA,UAC1E,OAAO;AACL,gCAAoB,QAAQ,cAAc,sBAAsB;AAAA,UAClE;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,mBAAmB;AAAA,EACxC;AAEA,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -55,7 +55,9 @@ const TabBar = () => {
           {
             mobileGradients,
             left: tabsListRef.current?.scrollLeft,
-            width: tabsListRef.current?.scrollWidth
+            width: tabsListRef.current?.scrollWidth,
+            getOwnerProps,
+            getOwnerPropsArguments
           }
         )
       ]

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/TabBar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { Carousel } from '../carousel/Carousel.js';\nimport { StyledMobileGradient, StyledTabList, StyledTabWrapper, StyledSubTabsList } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\nimport { TABS_DATA_TESTID, TAB_TYPES } from '../../constants/index.js';\n\nimport { TabBarItemRenderer } from './TabBarItemRenderer.js';\n\nexport const TabBar = (): JSX.Element => {\n  const {\n    tabsListRef,\n    props,\n    props: { type, fixedTabsHeaders, withCarousel, isDSMobile },\n    globalClickHandler,\n    mobileGradients,\n    updateMobileGradients,\n  } = useContext(DSTabsContext);\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  if (type === TAB_TYPES.SUBTABS && !isDSMobile) {\n    return (\n      <StyledSubTabsList\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        withCarousel={withCarousel}\n        data-testid={TABS_DATA_TESTID.SUB_TAB_LIST}\n        role={withCarousel ? undefined : 'tablist'}\n        innerRef={tabsListRef}\n      >\n        {withCarousel ? (\n          <Carousel>\n            <TabBarItemRenderer />\n          </Carousel>\n        ) : (\n          <TabBarItemRenderer />\n        )}\n      </StyledSubTabsList>\n    );\n  }\n\n  return (\n    <StyledTabList\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      withCarousel={withCarousel}\n      role={withCarousel ? undefined : 'tablist'}\n      innerRef={tabsListRef}\n      data-testid={TABS_DATA_TESTID.TAB_LIST}\n      isDSMobile={isDSMobile}\n      fixedTabsHeaders={fixedTabsHeaders}\n      mobileGradients={mobileGradients}\n      onScroll={updateMobileGradients}\n      tabType={type}\n      onClick={(e) => {\n        globalClickHandler({ event: e, target: 'tabsList' });\n      }}\n    >\n      <StyledTabWrapper data-testid=\"tab-wrapper\" isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n        {!isDSMobile && withCarousel ? (\n          <Carousel>\n            <TabBarItemRenderer />\n          </Carousel>\n        ) : (\n          <TabBarItemRenderer />\n        )}\n      </StyledTabWrapper>\n      {isDSMobile && !fixedTabsHeaders && (\n        <StyledMobileGradient\n          mobileGradients={mobileGradients}\n          left={tabsListRef.current?.scrollLeft}\n          width={tabsListRef.current?.scrollWidth}\n        />\n      )}\n    </StyledTabList>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkCX,cAUR,YAVQ;AAjCZ,SAAgB,kBAAkB;AAClC,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,sBAAsB,eAAe,kBAAkB,yBAAyB;AACzF,SAAS,qBAAqB;AAE9B,SAAS,kBAAkB,iBAAiB;AAE5C,SAAS,0BAA0B;AAE5B,MAAM,SAAS,MAAmB;AACvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM,kBAAkB,cAAc,WAAW;AAAA,IAC1D;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,aAAa;AAC5B,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,KAAK;AAErE,MAAI,SAAS,UAAU,WAAW,CAAC,YAAY;AAC7C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa,iBAAiB;AAAA,QAC9B,MAAM,eAAe,SAAY;AAAA,QACjC,UAAU;AAAA,QAET,yBACC,oBAAC,YACC,8BAAC,sBAAmB,GACtB,IAEA,oBAAC,sBAAmB;AAAA;AAAA,IAExB;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,eAAe,SAAY;AAAA,MACjC,UAAU;AAAA,MACV,eAAa,iBAAiB;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,SAAS;AAAA,MACT,SAAS,CAAC,MAAM;AACd,2BAAmB,EAAE,OAAO,GAAG,QAAQ,WAAW,CAAC;AAAA,MACrD;AAAA,MAEA;AAAA,4BAAC,oBAAiB,eAAY,eAAc,YAAwB,kBACjE,WAAC,cAAc,eACd,oBAAC,YACC,8BAAC,sBAAmB,GACtB,IAEA,oBAAC,sBAAmB,GAExB;AAAA,QACC,cAAc,CAAC,oBACd;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,MAAM,YAAY,SAAS;AAAA,YAC3B,OAAO,YAAY,SAAS;AAAA;AAAA,QAC9B;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { Carousel } from '../carousel/Carousel.js';\nimport { StyledMobileGradient, StyledTabList, StyledTabWrapper, StyledSubTabsList } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\nimport { TABS_DATA_TESTID, TAB_TYPES } from '../../constants/index.js';\n\nimport { TabBarItemRenderer } from './TabBarItemRenderer.js';\n\nexport const TabBar = (): JSX.Element => {\n  const {\n    tabsListRef,\n    props,\n    props: { type, fixedTabsHeaders, withCarousel, isDSMobile },\n    globalClickHandler,\n    mobileGradients,\n    updateMobileGradients,\n  } = useContext(DSTabsContext);\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  if (type === TAB_TYPES.SUBTABS && !isDSMobile) {\n    return (\n      <StyledSubTabsList\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        withCarousel={withCarousel}\n        data-testid={TABS_DATA_TESTID.SUB_TAB_LIST}\n        role={withCarousel ? undefined : 'tablist'}\n        innerRef={tabsListRef}\n      >\n        {withCarousel ? (\n          <Carousel>\n            <TabBarItemRenderer />\n          </Carousel>\n        ) : (\n          <TabBarItemRenderer />\n        )}\n      </StyledSubTabsList>\n    );\n  }\n\n  return (\n    <StyledTabList\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      withCarousel={withCarousel}\n      role={withCarousel ? undefined : 'tablist'}\n      innerRef={tabsListRef}\n      data-testid={TABS_DATA_TESTID.TAB_LIST}\n      isDSMobile={isDSMobile}\n      fixedTabsHeaders={fixedTabsHeaders}\n      mobileGradients={mobileGradients}\n      onScroll={updateMobileGradients}\n      tabType={type}\n      onClick={(e) => {\n        globalClickHandler({ event: e, target: 'tabsList' });\n      }}\n    >\n      <StyledTabWrapper data-testid=\"tab-wrapper\" isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n        {!isDSMobile && withCarousel ? (\n          <Carousel>\n            <TabBarItemRenderer />\n          </Carousel>\n        ) : (\n          <TabBarItemRenderer />\n        )}\n      </StyledTabWrapper>\n      {isDSMobile && !fixedTabsHeaders && (\n        <StyledMobileGradient\n          mobileGradients={mobileGradients}\n          left={tabsListRef.current?.scrollLeft}\n          width={tabsListRef.current?.scrollWidth}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        />\n      )}\n    </StyledTabList>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkCX,cAUR,YAVQ;AAjCZ,SAAgB,kBAAkB;AAClC,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,sBAAsB,eAAe,kBAAkB,yBAAyB;AACzF,SAAS,qBAAqB;AAE9B,SAAS,kBAAkB,iBAAiB;AAE5C,SAAS,0BAA0B;AAE5B,MAAM,SAAS,MAAmB;AACvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM,kBAAkB,cAAc,WAAW;AAAA,IAC1D;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,aAAa;AAC5B,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,KAAK;AAErE,MAAI,SAAS,UAAU,WAAW,CAAC,YAAY;AAC7C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa,iBAAiB;AAAA,QAC9B,MAAM,eAAe,SAAY;AAAA,QACjC,UAAU;AAAA,QAET,yBACC,oBAAC,YACC,8BAAC,sBAAmB,GACtB,IAEA,oBAAC,sBAAmB;AAAA;AAAA,IAExB;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,eAAe,SAAY;AAAA,MACjC,UAAU;AAAA,MACV,eAAa,iBAAiB;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,SAAS;AAAA,MACT,SAAS,CAAC,MAAM;AACd,2BAAmB,EAAE,OAAO,GAAG,QAAQ,WAAW,CAAC;AAAA,MACrD;AAAA,MAEA;AAAA,4BAAC,oBAAiB,eAAY,eAAc,YAAwB,kBACjE,WAAC,cAAc,eACd,oBAAC,YACC,8BAAC,sBAAmB,GACtB,IAEA,oBAAC,sBAAmB,GAExB;AAAA,QACC,cAAc,CAAC,oBACd;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,MAAM,YAAY,SAAS;AAAA,YAC3B,OAAO,YAAY,SAAS;AAAA,YAC5B;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
   "names": []
 }

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

@@ -102,10 +102,27 @@ const TabBarItemRenderer = React2.memo(() => {
       },
       title,
       required && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(StyledRequiredMark, { "aria-hidden": "true", children: "\u25CF" }),
-        /* @__PURE__ */ jsx(ScreenReaderOnly, { children: "Required" })
+        /* @__PURE__ */ jsx(
+          StyledRequiredMark,
+          {
+            "aria-hidden": "true",
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: "\u25CF"
+          }
+        ),
+        /* @__PURE__ */ jsx(ScreenReaderOnly, { getOwnerProps, getOwnerPropsArguments, children: "Required" })
       ] }),
-      isActive && type !== TAB_TYPES.SUBTABS ? /* @__PURE__ */ jsx(StyledSelectionIndicator, { "aria-hidden": "true", isDSMobile, tabType: type }) : null
+      isActive && type !== TAB_TYPES.SUBTABS ? /* @__PURE__ */ jsx(
+        StyledSelectionIndicator,
+        {
+          "aria-hidden": "true",
+          isDSMobile,
+          tabType: type,
+          getOwnerProps,
+          getOwnerPropsArguments
+        }
+      ) : null
     );
   });
 });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/TabBarItemRenderer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport {\n  StyledTabButton,\n  StyledRequiredMark,\n  ScreenReaderOnly,\n  StyledSubTabButton,\n  StyledSelectionIndicator,\n} from './styles.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';\nimport { centerTab } from '../../utils/helpers.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\nimport { TABS_DATA_TESTID, TAB_TYPES } from '../../constants/index.js';\n\nexport const TabBarItemRenderer: React.ComponentType<Record<never, never>> = React.memo(() => {\n  const {\n    tabsRef,\n    focusableTabsRef,\n    tabsRefAsArray,\n    carouselOnlyListRef,\n    actualActiveTab,\n    props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },\n    globalClickHandler,\n  } = useContext(DSTabsContext);\n\n  const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n  const { handleOnKeyDown } = useKeyboardNavigation();\n\n  const availableTabIndexes: number[] = [];\n\n  return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index) => {\n    const {\n      tabId = '',\n      title = '',\n      style,\n      required = false,\n      disabled = false,\n      applyAriaDisabled = false,\n      ref,\n      onClick,\n      onKeyDown,\n      ...rest\n    } = tab.props;\n    const getOwnerProps = () => tab.props;\n    const getOwnerPropsArguments = () => ({ tabId });\n\n    if (!disabled) availableTabIndexes.push(index);\n    const ButtonComponent = type === TAB_TYPES.SUBTABS ? StyledSubTabButton : StyledTabButton;\n\n    const isActive = actualActiveTab === tabId;\n\n    return (\n      <ButtonComponent\n        {...rest}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        key={tabId}\n        role=\"tab\"\n        // eslint-disable-next-line complexity\n        innerRef={(tabButtonRef: HTMLButtonElement) => {\n          if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {\n            tabsRefAsArray.current[index] = tabButtonRef;\n            if (!disabled && !focusableTabsRef.current.includes(tabButtonRef))\n              focusableTabsRef.current.push(tabButtonRef);\n            tabsRef.current[index] = tabButtonRef;\n            if (type === TAB_TYPES.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n              firstSubtabInternalRef.current = tabButtonRef;\n            }\n            if (type !== TAB_TYPES.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {\n              lastTabInternalRef.current = tabButtonRef;\n            }\n            if (ref) ref.current = tabButtonRef;\n          }\n        }}\n        type=\"button\"\n        aria-controls={tabId}\n        aria-selected={actualActiveTab === tabId && !applyAriaDisabled}\n        aria-disabled={disabled || applyAriaDisabled}\n        isDSMobile={isDSMobile}\n        fixedTabsHeaders={fixedTabsHeaders}\n        tabType={type}\n        data-required={required}\n        data-tab-id={tabId}\n        data-index={index}\n        withCarousel={withCarousel}\n        isActive={isActive}\n        disabled={disabled}\n        showSeparator={showSeparator && type !== TAB_TYPES.NORMAL}\n        data-testid={type === TAB_TYPES.NORMAL ? TABS_DATA_TESTID.TAB_BUTTON : TABS_DATA_TESTID.SUBTAB_BUTTON}\n        id={`${tabId}-label`}\n        onClick={(e) => {\n          /** [PUI-15772] - Tabs Pre Refactor\n           * Click handler for tab buttons. It:\n           * 1. Prevents tab change if aria-disabled is true\n           * 2. Updates active tab and indicator style if not disabled\n           * 3. Calls the user's onClick callback if provided\n           */\n          if (applyAriaDisabled) return;\n          if (!disabled) {\n            globalClickHandler({ event: e, target: 'tabItem', tabId });\n          }\n          if (onClick && !disabled) onClick(tabId, e);\n        }}\n        onFocus={(e) => {\n          /** [PUI-15772] - Tabs Pre Refactor\n           * Focus handler for carousel tabs. It:\n           * 1. Centers the focused tab in the carousel viewport\n           * 2. Only applies when withCarousel prop is true\n           */\n          if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });\n        }}\n        onKeyDown={(e) => {\n          /** [PUI-15772] - Tabs Pre Refactor\n           * Keyboard navigation handler. It:\n           * 1. Prevents Enter key propagation\n           * 2. Handles keyboard navigation if not disabled\n           * 3. Calls the user's onKeyDown callback if provided\n           */\n          if (e.key === 'Enter') e.stopPropagation();\n          if (!disabled) handleOnKeyDown(e);\n          if (onKeyDown && !disabled) onKeyDown(e);\n        }}\n        style={style}\n      >\n        {title}\n        {required && (\n          <>\n            <StyledRequiredMark aria-hidden=\"true\">&#9679;</StyledRequiredMark>\n            <ScreenReaderOnly>Required</ScreenReaderOnly>\n          </>\n        )}\n        {isActive && type !== TAB_TYPES.SUBTABS ? (\n          <StyledSelectionIndicator aria-hidden=\"true\" isDSMobile={isDSMobile} tabType={type} />\n        ) : null}\n      </ButtonComponent>\n    );\n  });\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport {\n  StyledTabButton,\n  StyledRequiredMark,\n  ScreenReaderOnly,\n  StyledSubTabButton,\n  StyledSelectionIndicator,\n} from './styles.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';\nimport { centerTab } from '../../utils/helpers.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\nimport { TABS_DATA_TESTID, TAB_TYPES } from '../../constants/index.js';\n\nexport const TabBarItemRenderer: React.ComponentType<Record<never, never>> = React.memo(() => {\n  const {\n    tabsRef,\n    focusableTabsRef,\n    tabsRefAsArray,\n    carouselOnlyListRef,\n    actualActiveTab,\n    props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },\n    globalClickHandler,\n  } = useContext(DSTabsContext);\n\n  const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n  const { handleOnKeyDown } = useKeyboardNavigation();\n\n  const availableTabIndexes: number[] = [];\n\n  return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index) => {\n    const {\n      tabId = '',\n      title = '',\n      style,\n      required = false,\n      disabled = false,\n      applyAriaDisabled = false,\n      ref,\n      onClick,\n      onKeyDown,\n      ...rest\n    } = tab.props;\n    const getOwnerProps = () => tab.props;\n    const getOwnerPropsArguments = () => ({ tabId });\n\n    if (!disabled) availableTabIndexes.push(index);\n    const ButtonComponent = type === TAB_TYPES.SUBTABS ? StyledSubTabButton : StyledTabButton;\n\n    const isActive = actualActiveTab === tabId;\n\n    return (\n      <ButtonComponent\n        {...rest}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        key={tabId}\n        role=\"tab\"\n        // eslint-disable-next-line complexity\n        innerRef={(tabButtonRef: HTMLButtonElement) => {\n          if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {\n            tabsRefAsArray.current[index] = tabButtonRef;\n            if (!disabled && !focusableTabsRef.current.includes(tabButtonRef))\n              focusableTabsRef.current.push(tabButtonRef);\n            tabsRef.current[index] = tabButtonRef;\n            if (type === TAB_TYPES.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n              firstSubtabInternalRef.current = tabButtonRef;\n            }\n            if (type !== TAB_TYPES.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {\n              lastTabInternalRef.current = tabButtonRef;\n            }\n            if (ref) ref.current = tabButtonRef;\n          }\n        }}\n        type=\"button\"\n        aria-controls={tabId}\n        aria-selected={actualActiveTab === tabId && !applyAriaDisabled}\n        aria-disabled={disabled || applyAriaDisabled}\n        isDSMobile={isDSMobile}\n        fixedTabsHeaders={fixedTabsHeaders}\n        tabType={type}\n        data-required={required}\n        data-tab-id={tabId}\n        data-index={index}\n        withCarousel={withCarousel}\n        isActive={isActive}\n        disabled={disabled}\n        showSeparator={showSeparator && type !== TAB_TYPES.NORMAL}\n        data-testid={type === TAB_TYPES.NORMAL ? TABS_DATA_TESTID.TAB_BUTTON : TABS_DATA_TESTID.SUBTAB_BUTTON}\n        id={`${tabId}-label`}\n        onClick={(e) => {\n          /** [PUI-15772] - Tabs Pre Refactor\n           * Click handler for tab buttons. It:\n           * 1. Prevents tab change if aria-disabled is true\n           * 2. Updates active tab and indicator style if not disabled\n           * 3. Calls the user's onClick callback if provided\n           */\n          if (applyAriaDisabled) return;\n          if (!disabled) {\n            globalClickHandler({ event: e, target: 'tabItem', tabId });\n          }\n          if (onClick && !disabled) onClick(tabId, e);\n        }}\n        onFocus={(e) => {\n          /** [PUI-15772] - Tabs Pre Refactor\n           * Focus handler for carousel tabs. It:\n           * 1. Centers the focused tab in the carousel viewport\n           * 2. Only applies when withCarousel prop is true\n           */\n          if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });\n        }}\n        onKeyDown={(e) => {\n          /** [PUI-15772] - Tabs Pre Refactor\n           * Keyboard navigation handler. It:\n           * 1. Prevents Enter key propagation\n           * 2. Handles keyboard navigation if not disabled\n           * 3. Calls the user's onKeyDown callback if provided\n           */\n          if (e.key === 'Enter') e.stopPropagation();\n          if (!disabled) handleOnKeyDown(e);\n          if (onKeyDown && !disabled) onKeyDown(e);\n        }}\n        style={style}\n      >\n        {title}\n        {required && (\n          <>\n            <StyledRequiredMark\n              aria-hidden=\"true\"\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            >\n              &#9679;\n            </StyledRequiredMark>\n            <ScreenReaderOnly getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n              Required\n            </ScreenReaderOnly>\n          </>\n        )}\n        {isActive && type !== TAB_TYPES.SUBTABS ? (\n          <StyledSelectionIndicator\n            aria-hidden=\"true\"\n            isDSMobile={isDSMobile}\n            tabType={type}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        ) : null}\n      </ButtonComponent>\n    );\n  });\n});\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -24,11 +24,19 @@ const TabsContent = () => {
       getOwnerProps,
       getOwnerPropsArguments,
       children: [
-        /* @__PURE__ */ jsxs(StyledTabBarContainer, { "aria-label": tabsListAriaLabel, children: [
-          /* @__PURE__ */ jsx(TabBar, {}),
-          TabBarExtraContent ? /* @__PURE__ */ jsx(TabBarExtraContent, {}) : null,
-          tabBarExtraContent || null
-        ] }),
+        /* @__PURE__ */ jsxs(
+          StyledTabBarContainer,
+          {
+            "aria-label": tabsListAriaLabel,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: [
+              /* @__PURE__ */ jsx(TabBar, {}),
+              TabBarExtraContent ? /* @__PURE__ */ jsx(TabBarExtraContent, {}) : null,
+              tabBarExtraContent || null
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(TabsPanels, {})
       ]
     }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsContent/TabsContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TabsPanels } from '../tabsPanel/TabsPanels.js';\nimport { TabBar } from '../tabBar/TabBar.js';\nimport { StyledTabBarContainer, StyledTabsContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\nexport const TabsContent = (): JSX.Element => {\n  const {\n    props,\n    props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent },\n  } = useContext(DSTabsContext);\n\n  const globalProps = useGetGlobalAttributes(props);\n  const xstyledProps = useGetXstyledProps(props);\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  return (\n    <StyledTabsContainer\n      {...globalProps}\n      {...xstyledProps}\n      {...containerProps}\n      innerRef={innerRef}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledTabBarContainer aria-label={tabsListAriaLabel}>\n        <TabBar />\n        {TabBarExtraContent ? <TabBarExtraContent /> : null}\n        {tabBarExtraContent || null}\n      </StyledTabBarContainer>\n      <TabsPanels />\n    </StyledTabsContainer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC0BjB,SACE,KADF;AA1BN,SAAgB,kBAAkB;AAClC,SAAS,wBAAwB,oBAAoB,qBAAqB;AAC1E,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,uBAAuB,2BAA2B;AAC3D,SAAS,qBAAqB;AAEvB,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,oBAAoB,mBAAmB;AAAA,EAC/F,IAAI,WAAW,aAAa;AAE5B,QAAM,cAAc,uBAAuB,KAAK;AAChD,QAAM,eAAe,mBAAmB,KAAK;AAC7C,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,KAAK;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,6BAAC,yBAAsB,cAAY,mBACjC;AAAA,8BAAC,UAAO;AAAA,UACP,qBAAqB,oBAAC,sBAAmB,IAAK;AAAA,UAC9C,sBAAsB;AAAA,WACzB;AAAA,QACA,oBAAC,cAAW;AAAA;AAAA;AAAA,EACd;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TabsPanels } from '../tabsPanel/TabsPanels.js';\nimport { TabBar } from '../tabBar/TabBar.js';\nimport { StyledTabBarContainer, StyledTabsContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\nexport const TabsContent = (): JSX.Element => {\n  const {\n    props,\n    props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent },\n  } = useContext(DSTabsContext);\n\n  const globalProps = useGetGlobalAttributes(props);\n  const xstyledProps = useGetXstyledProps(props);\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  return (\n    <StyledTabsContainer\n      {...globalProps}\n      {...xstyledProps}\n      {...containerProps}\n      innerRef={innerRef}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledTabBarContainer\n        aria-label={tabsListAriaLabel}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <TabBar />\n        {TabBarExtraContent ? <TabBarExtraContent /> : null}\n        {tabBarExtraContent || null}\n      </StyledTabBarContainer>\n      <TabsPanels />\n    </StyledTabsContainer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0BjB,SAKE,KALF;AA1BN,SAAgB,kBAAkB;AAClC,SAAS,wBAAwB,oBAAoB,qBAAqB;AAC1E,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,uBAAuB,2BAA2B;AAC3D,SAAS,qBAAqB;AAEvB,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,oBAAoB,mBAAmB;AAAA,EAC/F,IAAI,WAAW,aAAa;AAE5B,QAAM,cAAc,uBAAuB,KAAK;AAChD,QAAM,eAAe,mBAAmB,KAAK;AAC7C,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,KAAK;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,cAAY;AAAA,YACZ;AAAA,YACA;AAAA,YAEA;AAAA,kCAAC,UAAO;AAAA,cACP,qBAAqB,oBAAC,sBAAmB,IAAK;AAAA,cAC9C,sBAAsB;AAAA;AAAA;AAAA,QACzB;AAAA,QACA,oBAAC,cAAW;AAAA;AAAA;AAAA,EACd;AAEJ;",
   "names": []
 }

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

@@ -5,7 +5,19 @@ 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;
+  const {
+    content,
+    tabPanelsProps,
+    isDSMobile,
+    hide,
+    style,
+    role,
+    tabId,
+    renderKey,
+    getOwnerProps,
+    getOwnerPropsArguments,
+    ...rest
+  } = props;
   return /* @__PURE__ */ jsx(
     StyledPanelContainer,
     {
@@ -16,6 +28,8 @@ const CardRender = (props) => {
       hide,
       style,
       role,
+      getOwnerProps,
+      getOwnerPropsArguments,
       children: content
     }
   );

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 { 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"],
-  "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 {\n    content,\n    tabPanelsProps,\n    isDSMobile,\n    hide,\n    style,\n    role,\n    tabId,\n    renderKey,\n    getOwnerProps,\n    getOwnerPropsArguments,\n    ...rest\n  } = props;\n\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      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\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"],
+  "mappings": "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",
   "names": ["React"]
 }

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 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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { GlobalAttributesT, useOwnerProps } 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';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n\ninterface StyledPanelContainerPropsT {\n  hide: boolean;\n  isDSMobile: boolean;\n}\nexport interface PanelDescriptor extends Record<string, unknown>, ReturnType<typeof useOwnerProps<DSTabT.Props>> {\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;AAuBhC,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/parts/carousel/useCarousel.d.ts

@@ -1,10 +1,5 @@
-import type { DSTabsInternalsT } from '../../sharedTypes.js';
 interface UseCarouselReturnTypeT {
-    showChevrons: DSTabsInternalsT.ShowChevronsT;
-    leftButtonOnClick: () => void;
-    rightButtonOnClick: () => void;
     handleOnClick: (e: React.MouseEvent) => void;
-    handleOnScroll: (e: React.UIEvent) => void;
 }
 export declare const useCarousel: () => UseCarouselReturnTypeT;
 export {};

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

@@ -1,9 +1,10 @@
-import type { GlobalAttributesT } from '@elliemae/ds-props-helpers';
+import type { GlobalAttributesT, useOwnerProps } from '@elliemae/ds-props-helpers';
+import type { DSTabT } from '../../react-desc-prop-types.js';
 interface StyledPanelContainerPropsT {
     hide: boolean;
     isDSMobile: boolean;
 }
-export interface PanelDescriptor extends Record<string, unknown> {
+export interface PanelDescriptor extends Record<string, unknown>, ReturnType<typeof useOwnerProps<DSTabT.Props>> {
     index: number;
     tabId: string;
     isActive: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-tabs",
-  "version": "3.60.0-next.1",
+  "version": "3.60.0-next.11",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tabs",
   "files": [
@@ -45,18 +45,18 @@
     "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
   },
   "dependencies": {
-    "@elliemae/ds-button-v2": "3.60.0-next.1",
-    "@elliemae/ds-icon": "3.60.0-next.1",
-    "@elliemae/ds-icons": "3.60.0-next.1",
-    "@elliemae/ds-props-helpers": "3.60.0-next.1",
-    "@elliemae/ds-swipe-card": "3.60.0-next.1",
-    "@elliemae/ds-system": "3.60.0-next.1",
-    "@elliemae/ds-typescript-helpers": "3.60.0-next.1",
+    "@elliemae/ds-button-v2": "3.60.0-next.11",
+    "@elliemae/ds-icon": "3.60.0-next.11",
+    "@elliemae/ds-icons": "3.60.0-next.11",
+    "@elliemae/ds-props-helpers": "3.60.0-next.11",
+    "@elliemae/ds-swipe-card": "3.60.0-next.11",
+    "@elliemae/ds-system": "3.60.0-next.11",
+    "@elliemae/ds-typescript-helpers": "3.60.0-next.11",
     "@react-hook/resize-observer": "catalog:"
   },
   "devDependencies": {
-    "@elliemae/ds-monorepo-devops": "3.60.0-next.1",
-    "@elliemae/ds-test-utils": "3.60.0-next.1",
+    "@elliemae/ds-monorepo-devops": "3.60.0-next.11",
+    "@elliemae/ds-test-utils": "3.60.0-next.11",
     "@elliemae/pui-cli": "catalog:",
     "jest": "catalog:",
     "styled-components": "catalog:"
@@ -71,5 +71,5 @@
     "access": "public",
     "typeSafety": true
   },
-  "gitHead": "23a80089f975851ff0ad0dff64b4540edb1717bf"
+  "gitHead": "647d9d23c1622e940c76adafbf80cf6c3b4a210c"
 }

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

@@ -1,89 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var useCarouselCallbacks_exports = {};
-__export(useCarouselCallbacks_exports, {
-  useCarouselCallbacks: () => useCarouselCallbacks
-});
-module.exports = __toCommonJS(useCarouselCallbacks_exports);
-var React = __toESM(require("react"));
-var import_react = require("react");
-var import_lodash_es = require("lodash-es");
-var import_helpers = require("../../utils/helpers.js");
-var import_DSTabsCTX = require("../../DSTabsCTX.js");
-const useCarouselCallbacks = ({
-  getVisibleItemsOffset,
-  recalcChevrons
-}) => {
-  const { focusableTabsRef, carouselOnlyListRef } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
-  const rightButtonOnClick = (0, import_react.useCallback)(() => {
-    if (carouselOnlyListRef.current) {
-      carouselOnlyListRef.current.scrollLeft += getVisibleItemsOffset();
-    }
-  }, [getVisibleItemsOffset, carouselOnlyListRef]);
-  const leftButtonOnClick = (0, import_react.useCallback)(() => {
-    if (carouselOnlyListRef.current) {
-      carouselOnlyListRef.current.scrollLeft -= getVisibleItemsOffset();
-    }
-  }, [getVisibleItemsOffset, carouselOnlyListRef]);
-  const handleOnScroll = (0, import_react.useMemo)(() => (0, import_lodash_es.debounce)(recalcChevrons, 200), [recalcChevrons]);
-  const handleOnClick = (0, import_react.useCallback)(
-    ({ target }) => {
-      if (focusableTabsRef.current && target.getAttribute("role") === "tab") {
-        const tabList = carouselOnlyListRef.current;
-        const tabButton = target;
-        const tabButtonDimensions = tabButton.getBoundingClientRect();
-        const tabListDimensions = tabList?.getBoundingClientRect();
-        const tabButtonIndex = tabButton.dataset.index;
-        const lastItemIndex = focusableTabsRef.current.length.toString();
-        const magicNumber = 34;
-        const firstOrLastItem = tabButtonIndex === "0" || tabButtonIndex === lastItemIndex;
-        if (!(0, import_helpers.isElementVisibleCarousel)(tabButton, tabList, firstOrLastItem) && tabListDimensions && carouselOnlyListRef.current) {
-          const containerWidth = tabListDimensions.width;
-          const halfContainer = containerWidth / 2;
-          const elementScrollPosition = tabButtonDimensions.left - tabListDimensions.left;
-          const positionInContainer = elementScrollPosition % containerWidth;
-          const width = tabButton.offsetWidth + magicNumber;
-          if (positionInContainer > halfContainer) {
-            carouselOnlyListRef.current.scrollLeft += width + positionInContainer - containerWidth;
-          } else {
-            carouselOnlyListRef.current.scrollLeft += positionInContainer - magicNumber;
-          }
-        }
-      }
-    },
-    [focusableTabsRef, carouselOnlyListRef]
-  );
-  return {
-    handleOnClick,
-    rightButtonOnClick,
-    leftButtonOnClick,
-    handleOnScroll
-  };
-};
-//# sourceMappingURL=useCarouselCallbacks.js.map