@elliemae/ds-tabs 3.53.1-rc.0 → 3.54.0-next.2

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

@@ -4,7 +4,14 @@ import { useContext } from "react";
 import { DSIconSizes } from "@elliemae/ds-icon";
 import { BUTTON_TYPES } from "@elliemae/ds-button-v2";
 import { ChevronRight, ChevronLeft } from "@elliemae/ds-icons";
-import { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } from "./styles.js";
+import { useOwnerProps } from "@elliemae/ds-props-helpers";
+import {
+  StyledCarouselBtnLeft,
+  StyledCarouselBtnRight,
+  StyledCarouselButtonWrapper,
+  StyledCarouselWrapper,
+  StyledChildrenWrap
+} from "./styles.js";
 import { useCarousel } from "./useCarousel.js";
 import { DSTabsContext } from "../../DSTabsCTX.js";
 import { TABS_DATA_TESTID } from "../../constants/index.js";
@@ -14,11 +21,13 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
   });
   const {
     carouselOnlyListRef,
+    props,
     props: { type }
   } = useContext(DSTabsContext);
+  const { getOwnerProps } = useOwnerProps(props);
   return /* @__PURE__ */ jsxs(StyledCarouselWrapper, { children: [
     showChevrons.left && /* @__PURE__ */ jsx(StyledCarouselButtonWrapper, { tabType: type, children: /* @__PURE__ */ jsx(
-      StyledCarouselBtn,
+      StyledCarouselBtnLeft,
       {
         size: "s",
         onClick: leftButtonOnClick,
@@ -26,11 +35,12 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
         "data-testid": TABS_DATA_TESTID.CAROUSEL_BUTTON_LEFT,
         buttonType: BUTTON_TYPES.ICON,
         "aria-label": "Scroll Left",
+        getOwnerProps,
         children: /* @__PURE__ */ jsx(ChevronLeft, { size: DSIconSizes.S })
       }
     ) }),
     showChevrons.right && /* @__PURE__ */ jsx(StyledCarouselButtonWrapper, { tabType: type, right: showChevrons.right, children: /* @__PURE__ */ jsx(
-      StyledCarouselBtn,
+      StyledCarouselBtnRight,
       {
         size: "s",
         onClick: rightButtonOnClick,
@@ -38,6 +48,7 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
         "data-testid": TABS_DATA_TESTID.CAROUSEL_BUTTON_RIGHT,
         buttonType: BUTTON_TYPES.ICON,
         "aria-label": "Scroll Right",
+        getOwnerProps,
         children: /* @__PURE__ */ jsx(ChevronRight, { size: DSIconSizes.S })
       }
     ) }),

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 { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { TABS_DATA_TESTID } from '../../constants/index.js';\n\ninterface CarouselPropsT {\n  children: React.ReactNode;\n  updateIndicatorStyle?: () => void;\n}\n\nexport const Carousel = ({ children, updateIndicatorStyle }: CarouselPropsT): JSX.Element => {\n  const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel({\n    updateIndicatorStyle,\n  });\n\n  const {\n    carouselOnlyListRef,\n    props: { type },\n  } = useContext(DSTabsContext);\n\n  return (\n    <StyledCarouselWrapper>\n      {showChevrons.left && (\n        <StyledCarouselButtonWrapper tabType={type}>\n          <StyledCarouselBtn\n            size=\"s\"\n            onClick={leftButtonOnClick}\n            tabIndex={-1}\n            data-testid={TABS_DATA_TESTID.CAROUSEL_BUTTON_LEFT}\n            buttonType={BUTTON_TYPES.ICON}\n            aria-label=\"Scroll Left\"\n          >\n            <ChevronLeft size={DSIconSizes.S} />\n          </StyledCarouselBtn>\n        </StyledCarouselButtonWrapper>\n      )}\n      {showChevrons.right && (\n        <StyledCarouselButtonWrapper tabType={type} right={showChevrons.right}>\n          <StyledCarouselBtn\n            size=\"s\"\n            onClick={rightButtonOnClick}\n            tabIndex={-1}\n            data-testid={TABS_DATA_TESTID.CAROUSEL_BUTTON_RIGHT}\n            buttonType={BUTTON_TYPES.ICON}\n            aria-label=\"Scroll Right\"\n          >\n            <ChevronRight size={DSIconSizes.S} />\n          </StyledCarouselBtn>\n        </StyledCarouselButtonWrapper>\n      )}\n      <StyledChildrenWrap\n        role=\"tablist\"\n        innerRef={carouselOnlyListRef}\n        onClick={handleOnClick}\n        onScroll={handleOnScroll}\n      >\n        {children}\n      </StyledChildrenWrap>\n    </StyledCarouselWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACyBnB,SAWQ,KAXR;AAzBJ,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,cAAc,mBAAmB;AAC1C,SAAS,mBAAmB,6BAA6B,uBAAuB,0BAA0B;AAC1G,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAO1B,MAAM,WAAW,CAAC,EAAE,UAAU,qBAAqB,MAAmC;AAC3F,QAAM,EAAE,cAAc,mBAAmB,oBAAoB,eAAe,eAAe,IAAI,YAAY;AAAA,IACzG;AAAA,EACF,CAAC;AAED,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,IAAI,WAAW,aAAa;AAE5B,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,QAEX,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,QAEX,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 { DSIconSizes } from '@elliemae/ds-icon';\nimport { BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport {\n  StyledCarouselBtnLeft,\n  StyledCarouselBtnRight,\n  StyledCarouselButtonWrapper,\n  StyledCarouselWrapper,\n  StyledChildrenWrap,\n} from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { TABS_DATA_TESTID } from '../../constants/index.js';\n\ninterface CarouselPropsT {\n  children: React.ReactNode;\n  updateIndicatorStyle?: () => void;\n}\n\nexport const Carousel = ({ children, updateIndicatorStyle }: CarouselPropsT): JSX.Element => {\n  const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel({\n    updateIndicatorStyle,\n  });\n\n  const {\n    carouselOnlyListRef,\n    props,\n    props: { type },\n  } = useContext(DSTabsContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n\n  return (\n    <StyledCarouselWrapper>\n      {showChevrons.left && (\n        <StyledCarouselButtonWrapper tabType={type}>\n          <StyledCarouselBtnLeft\n            size=\"s\"\n            onClick={leftButtonOnClick}\n            tabIndex={-1}\n            data-testid={TABS_DATA_TESTID.CAROUSEL_BUTTON_LEFT}\n            buttonType={BUTTON_TYPES.ICON}\n            aria-label=\"Scroll Left\"\n            getOwnerProps={getOwnerProps}\n          >\n            <ChevronLeft size={DSIconSizes.S} />\n          </StyledCarouselBtnLeft>\n        </StyledCarouselButtonWrapper>\n      )}\n      {showChevrons.right && (\n        <StyledCarouselButtonWrapper tabType={type} right={showChevrons.right}>\n          <StyledCarouselBtnRight\n            size=\"s\"\n            onClick={rightButtonOnClick}\n            tabIndex={-1}\n            data-testid={TABS_DATA_TESTID.CAROUSEL_BUTTON_RIGHT}\n            buttonType={BUTTON_TYPES.ICON}\n            aria-label=\"Scroll Right\"\n            getOwnerProps={getOwnerProps}\n          >\n            <ChevronRight size={DSIconSizes.S} />\n          </StyledCarouselBtnRight>\n        </StyledCarouselButtonWrapper>\n      )}\n      <StyledChildrenWrap\n        role=\"tablist\"\n        innerRef={carouselOnlyListRef}\n        onClick={handleOnClick}\n        onScroll={handleOnScroll}\n      >\n        {children}\n      </StyledChildrenWrap>\n    </StyledCarouselWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmCnB,SAYQ,KAZR;AAnCJ,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;AAO1B,MAAM,WAAW,CAAC,EAAE,UAAU,qBAAqB,MAAmC;AAC3F,QAAM,EAAE,cAAc,mBAAmB,oBAAoB,eAAe,eAAe,IAAI,YAAY;AAAA,IACzG;AAAA,EACF,CAAC;AAED,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;",
   "names": []
 }

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

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { styled } from "@elliemae/ds-system";
+import { css, styled } from "@elliemae/ds-system";
 import { DSButtonV2 } from "@elliemae/ds-button-v2";
-import { TAB_TYPES } from "../../constants/index.js";
-const StyledCarouselBtn = styled(DSButtonV2)`
+import { DSTabsName, TABS_SLOTS, TAB_TYPES } from "../../constants/index.js";
+const baseCarouselButtonStyles = css`
   margin: 0;
   min-width: ${({ theme }) => theme.space.xs};
   width: ${({ theme }) => theme.space.xs};
@@ -17,6 +17,18 @@ const StyledCarouselBtn = styled(DSButtonV2)`
     fill: ${({ theme }) => theme.colors.brand[600]};
   }
 `;
+const StyledCarouselBtnLeft = styled(DSButtonV2, {
+  name: DSTabsName,
+  slot: TABS_SLOTS.CAROUSEL_BUTTON_LEFT
+})`
+  ${baseCarouselButtonStyles}
+`;
+const StyledCarouselBtnRight = styled(DSButtonV2, {
+  name: DSTabsName,
+  slot: TABS_SLOTS.CAROUSEL_BUTTON_RIGHT
+})`
+  ${baseCarouselButtonStyles}
+`;
 const StyledCarouselWrapper = styled.span`
   position: relative;
   width: 100%;
@@ -42,7 +54,8 @@ const StyledCarouselButtonWrapper = styled.div`
  ` : ``};
 `;
 export {
-  StyledCarouselBtn,
+  StyledCarouselBtnLeft,
+  StyledCarouselBtnRight,
   StyledCarouselButtonWrapper,
   StyledCarouselWrapper,
   StyledChildrenWrap

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 { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\n\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { TAB_TYPES } from '../../constants/index.js';\n\ninterface StyledCarouselButtonWrapperPropsT {\n  right?: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\nexport const StyledCarouselBtn: typeof DSButtonV2 = styled(DSButtonV2)`\n  margin: 0;\n  min-width: ${({ theme }) => theme.space.xs};\n  width: ${({ theme }) => theme.space.xs};\n\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n  background-color: transparent;\n  border-radius: 0px;\n\n  & .em-ds-icon svg {\n    fill: ${({ theme }) => theme.colors.brand[600]};\n  }\n`;\n\nexport const StyledCarouselWrapper = styled.span`\n  position: relative;\n  width: 100%;\n  display: flex;\n`;\n\nexport const StyledChildrenWrap = styled.div`\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  overflow-x: hidden;\n`;\n\nexport const StyledCarouselButtonWrapper = styled.div<StyledCarouselButtonWrapperPropsT>`\n  max-width: 16px;\n  position: absolute;\n  z-index: 200;\n  ${({ right }) => (right ? 'right: 0;' : `left: 0;`)}\n  width: 16px;\n  height: ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? '32px' : '22px')};\n  padding-top: ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? '5px' : '0px')};\n  background: white;\n  ${({ theme, tabType }) =>\n    tabType === TAB_TYPES.NORMAL\n      ? `\n      background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );\n `\n      : ``};\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAG3B,SAAS,iBAAiB;AAOnB,MAAM,oBAAuC,OAAO,UAAU;AAAA;AAAA,eAEtD,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,WACjC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAS5B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAI3C,MAAM,wBAAwB,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;",
+  "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"],
+  "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/tabBar/TabBar.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
+import { useOwnerProps } from "@elliemae/ds-props-helpers";
 import { Carousel } from "../carousel/Carousel.js";
-import { useTabBar } from "./useTabBar.js";
 import {
   StyledMobileGradient,
   StyledTabList,
@@ -13,18 +13,24 @@ import {
 import { DSTabsContext } from "../../DSTabsCTX.js";
 import { TABS_DATA_TESTID, TAB_TYPES } from "../../constants/index.js";
 import { TabBarItemRenderer } from "./TabBarItemRenderer.js";
-import { useTabsCallbacks } from "../../utils/hooks/useTabsCallbacks.js";
 const TabBar = () => {
   const {
     tabsListRef,
-    props: { type, fixedTabsHeaders, withCarousel, isDSMobile }
+    props,
+    props: { type, fixedTabsHeaders, withCarousel, isDSMobile },
+    globalClickHandler,
+    indicatorStyle,
+    mobileGradients,
+    updateMobileGradients,
+    updateIndicatorStyle
   } = useContext(DSTabsContext);
-  const { handleOnTabChange } = useTabsCallbacks();
-  const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = useTabBar();
+  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);
   if (type === TAB_TYPES.SUBTABS && !isDSMobile) {
     return /* @__PURE__ */ jsx(
       StyledSubTabsList,
       {
+        getOwnerProps,
+        getOwnerPropsArguments,
         withCarousel,
         "data-testid": TABS_DATA_TESTID.SUB_TAB_LIST,
         role: withCarousel ? void 0 : "tablist",
@@ -36,6 +42,8 @@ const TabBar = () => {
   return /* @__PURE__ */ jsxs(
     StyledTabList,
     {
+      getOwnerProps,
+      getOwnerPropsArguments,
       withCarousel,
       role: withCarousel ? void 0 : "tablist",
       innerRef: tabsListRef,
@@ -46,13 +54,8 @@ const TabBar = () => {
       onScroll: updateMobileGradients,
       indicatorStyle,
       tabType: type,
-      onMouseDown: (e) => {
-        const target = e.target;
-        const { dataset, ariaDisabled } = target;
-        if (dataset.tabId && ariaDisabled !== "true") {
-          handleOnTabChange(dataset.tabId, e);
-          updateIndicatorStyle();
-        }
+      onClick: (e) => {
+        globalClickHandler({ event: e, target: "tabsList" });
       },
       children: [
         /* @__PURE__ */ jsx(StyledTabWrapper, { "data-testid": "tab-wrapper", isDSMobile, fixedTabsHeaders, children: !isDSMobile && withCarousel ? /* @__PURE__ */ jsx(Carousel, { updateIndicatorStyle, children: /* @__PURE__ */ jsx(TabBarItemRenderer, {}) }) : /* @__PURE__ */ jsx(TabBarItemRenderer, {}) }),

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 { Carousel } from '../carousel/Carousel.js';\nimport { useTabBar } from './useTabBar.js';\nimport {\n  StyledMobileGradient,\n  StyledTabList,\n  StyledTabWrapper,\n  StyledSelectionIndicator,\n  StyledSubTabsList,\n} from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\nimport { TABS_DATA_TESTID, TAB_TYPES } from '../../constants/index.js';\n\nimport { TabBarItemRenderer } from './TabBarItemRenderer.js';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\n\nexport const TabBar = (): JSX.Element => {\n  const {\n    tabsListRef,\n    props: { type, fixedTabsHeaders, withCarousel, isDSMobile },\n  } = useContext(DSTabsContext);\n\n  const { handleOnTabChange } = useTabsCallbacks();\n  const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = useTabBar();\n\n  if (type === TAB_TYPES.SUBTABS && !isDSMobile) {\n    return (\n      <StyledSubTabsList\n        withCarousel={withCarousel}\n        data-testid={TABS_DATA_TESTID.SUB_TAB_LIST}\n        role={withCarousel ? undefined : 'tablist'}\n        innerRef={tabsListRef}\n      >\n        {withCarousel ? (\n          <Carousel>\n            <TabBarItemRenderer />\n          </Carousel>\n        ) : (\n          <TabBarItemRenderer />\n        )}\n      </StyledSubTabsList>\n    );\n  }\n\n  return (\n    <StyledTabList\n      withCarousel={withCarousel}\n      role={withCarousel ? undefined : 'tablist'}\n      innerRef={tabsListRef}\n      data-testid={TABS_DATA_TESTID.TAB_LIST}\n      isDSMobile={isDSMobile}\n      fixedTabsHeaders={fixedTabsHeaders}\n      mobileGradients={mobileGradients}\n      onScroll={updateMobileGradients}\n      indicatorStyle={indicatorStyle}\n      tabType={type}\n      onMouseDown={(e) => {\n        /**\n         * [PUI-15396](https://jira.elliemae.io/browse/PUI-15396)\n         * This is a workaround for an issue where clicks on tab buttons within a carousel\n         * sometimes fail to trigger state updates. The problem occurs because:\n         *\n         * 1. When clicking on certain tabs, the click event reaches the tablist\n         *    wrapper instead of the tab button\n         * 2. The carousel's scroll logic interferes with the normal event propagation\n         * 3. This prevents the tab's onClick handler from being called consistently\n         *\n         * By adding an onMouseDown handler at the tablist level, we can:\n         * - Capture the event earlier in the event cycle (before onClick)\n         * - Check if the clicked element has a tab ID (data-tab-id attribute)\n         * - Directly call handleOnTabChange with the appropriate tab ID\n         *\n         * This ensures the tab state updates correctly regardless of event bubbling issues\n         * or interference from the carousel's scroll behavior.\n         */\n        const target = e.target as HTMLElement;\n        const { dataset, ariaDisabled } = target;\n        if (dataset.tabId && ariaDisabled !== 'true') {\n          handleOnTabChange(dataset.tabId, e);\n          updateIndicatorStyle();\n        }\n      }}\n    >\n      <StyledTabWrapper data-testid=\"tab-wrapper\" isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n        {!isDSMobile && withCarousel ? (\n          <Carousel updateIndicatorStyle={updateIndicatorStyle}>\n            <TabBarItemRenderer />\n          </Carousel>\n        ) : (\n          <TabBarItemRenderer />\n        )}\n      </StyledTabWrapper>\n      <StyledSelectionIndicator isDSMobile={isDSMobile} tabType={type} />\n      {isDSMobile && !fixedTabsHeaders && (\n        <StyledMobileGradient\n          mobileGradients={mobileGradients}\n          left={tabsListRef.current?.scrollLeft}\n          width={tabsListRef.current?.scrollWidth}\n        />\n      )}\n    </StyledTabList>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACqCX,cAUR,YAVQ;AApCZ,SAAgB,kBAAkB;AAClC,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB;AAE9B,SAAS,kBAAkB,iBAAiB;AAE5C,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AAE1B,MAAM,SAAS,MAAmB;AACvC,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,MAAM,kBAAkB,cAAc,WAAW;AAAA,EAC5D,IAAI,WAAW,aAAa;AAE5B,QAAM,EAAE,kBAAkB,IAAI,iBAAiB;AAC/C,QAAM,EAAE,gBAAgB,iBAAiB,uBAAuB,qBAAqB,IAAI,UAAU;AAEnG,MAAI,SAAS,UAAU,WAAW,CAAC,YAAY;AAC7C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;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,MAAM,eAAe,SAAY;AAAA,MACjC,UAAU;AAAA,MACV,eAAa,iBAAiB;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,SAAS;AAAA,MACT,aAAa,CAAC,MAAM;AAmBlB,cAAM,SAAS,EAAE;AACjB,cAAM,EAAE,SAAS,aAAa,IAAI;AAClC,YAAI,QAAQ,SAAS,iBAAiB,QAAQ;AAC5C,4BAAkB,QAAQ,OAAO,CAAC;AAClC,+BAAqB;AAAA,QACvB;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,oBAAiB,eAAY,eAAc,YAAwB,kBACjE,WAAC,cAAc,eACd,oBAAC,YAAS,sBACR,8BAAC,sBAAmB,GACtB,IAEA,oBAAC,sBAAmB,GAExB;AAAA,QACA,oBAAC,4BAAyB,YAAwB,SAAS,MAAM;AAAA,QAChE,cAAc,CAAC,oBACd;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,MAAM,YAAY,SAAS;AAAA,YAC3B,OAAO,YAAY,SAAS;AAAA;AAAA,QAC9B;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
+  "sourcesContent": ["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 {\n  StyledMobileGradient,\n  StyledTabList,\n  StyledTabWrapper,\n  StyledSelectionIndicator,\n  StyledSubTabsList,\n} from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\nimport { TABS_DATA_TESTID, TAB_TYPES } from '../../constants/index.js';\n\nimport { TabBarItemRenderer } from './TabBarItemRenderer.js';\n\nexport const TabBar = (): JSX.Element => {\n  const {\n    tabsListRef,\n    props,\n    props: { type, fixedTabsHeaders, withCarousel, isDSMobile },\n    globalClickHandler,\n    indicatorStyle,\n    mobileGradients,\n    updateMobileGradients,\n    updateIndicatorStyle,\n  } = useContext(DSTabsContext);\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  if (type === TAB_TYPES.SUBTABS && !isDSMobile) {\n    return (\n      <StyledSubTabsList\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        withCarousel={withCarousel}\n        data-testid={TABS_DATA_TESTID.SUB_TAB_LIST}\n        role={withCarousel ? undefined : 'tablist'}\n        innerRef={tabsListRef}\n      >\n        {withCarousel ? (\n          <Carousel>\n            <TabBarItemRenderer />\n          </Carousel>\n        ) : (\n          <TabBarItemRenderer />\n        )}\n      </StyledSubTabsList>\n    );\n  }\n\n  return (\n    <StyledTabList\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      withCarousel={withCarousel}\n      role={withCarousel ? undefined : 'tablist'}\n      innerRef={tabsListRef}\n      data-testid={TABS_DATA_TESTID.TAB_LIST}\n      isDSMobile={isDSMobile}\n      fixedTabsHeaders={fixedTabsHeaders}\n      mobileGradients={mobileGradients}\n      onScroll={updateMobileGradients}\n      indicatorStyle={indicatorStyle}\n      tabType={type}\n      onClick={(e) => {\n        globalClickHandler({ event: e, target: 'tabsList' });\n      }}\n    >\n      <StyledTabWrapper data-testid=\"tab-wrapper\" isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n        {!isDSMobile && withCarousel ? (\n          <Carousel updateIndicatorStyle={updateIndicatorStyle}>\n            <TabBarItemRenderer />\n          </Carousel>\n        ) : (\n          <TabBarItemRenderer />\n        )}\n      </StyledTabWrapper>\n      <StyledSelectionIndicator isDSMobile={isDSMobile} tabType={type} />\n      {isDSMobile && !fixedTabsHeaders && (\n        <StyledMobileGradient\n          mobileGradients={mobileGradients}\n          left={tabsListRef.current?.scrollLeft}\n          width={tabsListRef.current?.scrollWidth}\n        />\n      )}\n    </StyledTabList>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0CX,cAUR,YAVQ;AAzCZ,SAAgB,kBAAkB;AAClC,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,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,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;AAAA,MACA,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,YAAS,sBACR,8BAAC,sBAAmB,GACtB,IAEA,oBAAC,sBAAmB,GAExB;AAAA,QACA,oBAAC,4BAAyB,YAAwB,SAAS,MAAM;AAAA,QAChE,cAAc,CAAC,oBACd;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,MAAM,YAAY,SAAS;AAAA,YAC3B,OAAO,YAAY,SAAS;AAAA;AAAA,QAC9B;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
   "names": []
 }

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

@@ -2,12 +2,10 @@ import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
 import React2, { useContext } from "react";
-import { useTabBar } from "./useTabBar.js";
-import { StyledTabButton, StyledRequiredMark, ScreenReaderOnly } from "./styles.js";
+import { StyledTabButton, StyledRequiredMark, ScreenReaderOnly, StyledSubTabButton } from "./styles.js";
 import { DSTabsContext, DSTabsCrossRefContext } from "../../DSTabsCTX.js";
 import { useKeyboardNavigation } from "../../utils/hooks/useKeyboardNavigation.js";
 import { centerTab } from "../../utils/helpers.js";
-import { useTabsCallbacks } from "../../utils/hooks/useTabsCallbacks.js";
 import { TABS_DATA_TESTID, TAB_TYPES } from "../../constants/index.js";
 const TabBarItemRenderer = React2.memo(() => {
   const {
@@ -16,12 +14,11 @@ const TabBarItemRenderer = React2.memo(() => {
     tabsRefAsArray,
     carouselOnlyListRef,
     actualActiveTab,
-    props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs }
+    props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },
+    globalClickHandler
   } = useContext(DSTabsContext);
   const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);
-  const { handleOnTabChange } = useTabsCallbacks();
   const { handleOnKeyDown } = useKeyboardNavigation();
-  const { updateIndicatorStyle } = useTabBar();
   const availableTabIndexes = [];
   return React2.Children.map(tabs, (tab, index) => {
     const {
@@ -36,11 +33,16 @@ const TabBarItemRenderer = React2.memo(() => {
       onKeyDown,
       ...rest
     } = tab.props;
+    const getOwnerProps = () => tab.props;
+    const getOwnerPropsArguments = () => ({ tabId });
     if (!disabled) availableTabIndexes.push(index);
+    const ButtonComponent = type === TAB_TYPES.SUBTABS ? StyledSubTabButton : StyledTabButton;
     return /* @__PURE__ */ createElement(
-      StyledTabButton,
+      ButtonComponent,
       {
         ...rest,
+        getOwnerProps,
+        getOwnerPropsArguments,
         key: tabId,
         role: "tab",
         innerRef: (tabButtonRef) => {
@@ -77,8 +79,7 @@ const TabBarItemRenderer = React2.memo(() => {
         onClick: (e) => {
           if (applyAriaDisabled) return;
           if (!disabled) {
-            handleOnTabChange(tabId, e);
-            updateIndicatorStyle();
+            globalClickHandler({ event: e, target: "tabItem", tabId });
           }
           if (onClick && !disabled) onClick(tabId, e);
         },

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

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

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { styled, safariAndFirefoxBold, onlySafariAndFirefox, th } from "@elliemae/ds-system";
-import { TAB_TYPES } from "../../constants/index.js";
+import { styled, safariAndFirefoxBold, onlySafariAndFirefox, th, css } from "@elliemae/ds-system";
+import { DSTabsName, TABS_SLOTS, TAB_TYPES } from "../../constants/index.js";
 const StyledSelectionIndicator = styled.div`
   position: absolute;
   height: ${({ isDSMobile }) => isDSMobile ? "2px" : "3px"};
@@ -45,7 +45,7 @@ const StyledTabWrapper = styled.div`
   ${({ fixedTabsHeaders, isDSMobile }) => !fixedTabsHeaders && isDSMobile ? "" : "overflow-x: hidden;"}
   ${({ theme, isDSMobile }) => isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``}
 `;
-const StyledTabButton = styled.button`
+const baseButtonStyles = css`
   position: relative;
   background-color: transparent;
   border: none;
@@ -187,7 +187,22 @@ ${({ theme, isActive, disabled, isDSMobile }) => isDSMobile ? `
 
     ` : ``}
 `;
-const StyledSubTabsList = styled.div`
+const StyledTabButton = styled("button", {
+  name: DSTabsName,
+  slot: TABS_SLOTS.TAB_BUTTON
+})`
+  ${baseButtonStyles}
+`;
+const StyledSubTabButton = styled("button", {
+  name: DSTabsName,
+  slot: TABS_SLOTS.SUBTAB_BUTTON
+})`
+  ${baseButtonStyles}
+`;
+const StyledSubTabsList = styled("div", {
+  name: DSTabsName,
+  slot: TABS_SLOTS.SUB_TAB_LIST
+})`
   position: relative;
   display: flex;
   flex-wrap: nowrap;
@@ -195,7 +210,7 @@ const StyledSubTabsList = styled.div`
   width: 100%;
   ${({ withCarousel }) => withCarousel ? "max-width: 100%;" : ""}
 `;
-const StyledTabList = styled.div`
+const StyledTabList = styled("div", { name: DSTabsName, slot: TABS_SLOTS.TAB_LIST })`
   position: relative;
   display: flex;
   flex-wrap: nowrap;
@@ -276,6 +291,7 @@ export {
   StyledMobileGradient,
   StyledRequiredMark,
   StyledSelectionIndicator,
+  StyledSubTabButton,
   StyledSubTabsList,
   StyledTabButton,
   StyledTabList,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled, safariAndFirefoxBold, onlySafariAndFirefox, th } from '@elliemae/ds-system';\n\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { TAB_TYPES } from '../../constants/index.js';\n\ninterface StyledSelectionIndicatoPropsT {\n  isDSMobile: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledSubTabsListPropsT {\n  withCarousel: boolean;\n}\n\ninterface StyledTabButtonPropsT {\n  isActive: boolean;\n  disabled: boolean;\n  showSeparator: boolean;\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n  withCarousel: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledTabListPropsT {\n  withCarousel: boolean;\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n  indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledMobileGradientPropsT {\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n  left: number | undefined;\n  width: number | undefined;\n}\n\ninterface StyledTabWrapperPropsT {\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n}\n\nexport const StyledSelectionIndicator = styled.div<StyledSelectionIndicatoPropsT>`\n  position: absolute;\n  height: ${({ isDSMobile }) => (isDSMobile ? '2px' : '3px')};\n  top: ${({ tabType, isDSMobile }) => {\n    if (isDSMobile) return `35px`;\n    if (tabType === TAB_TYPES.NORMAL_SMALL) return `15px`;\n    return `25px`;\n  }};\n  z-index: 1;\n  margin-top: ${({ theme }) => theme.space.xxxs};\n  pointer-events: none;\n  transition: 200ms cubic-bezier(0.36, 0, 1, 1);\n\n  ${({ isDSMobile }) =>\n    isDSMobile\n      ? ` \n  margin-left: 0;\n  margin-top: 3px;\n  `\n      : ``}\n`;\n\nexport const StyledMobileGradient = styled.div.attrs(({ left = 0, width = 0 }: StyledMobileGradientPropsT) => ({\n  style: { left: left - 10, maxWidth: width - left },\n}))<StyledMobileGradientPropsT>`\n  position: fixed;\n  z-index: 15;\n  top: 0;\n  width: calc(100% + 20px);\n  height: 40px;\n  pointer-events: none;\n\n  ${({ mobileGradients: { left, right } }) => {\n    if (right && left)\n      return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n    if (right)\n      return `background: linear-gradient(90deg, #FFFFFF00 0%, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n    if (left) return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 100%);`;\n    return '';\n  }};\n`;\n\n/**  CSS Setters */\n\nexport const StyledTabWrapper = styled.div<StyledTabWrapperPropsT>`\n  display: flex;\n  flex: 1;\n  flex-wrap: nowrap;\n  ${({ fixedTabsHeaders, isDSMobile }) => (!fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;')}\n  ${({ theme, isDSMobile }) => (isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``)}\n`;\n\nexport const StyledTabButton = styled.button<StyledTabButtonPropsT>`\n  position: relative;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  transition: 100ms cubic-bezier(0, 0, 0.42, 1);\n  text-transform: ${({ tabType, isDSMobile }) => {\n    if (tabType === TAB_TYPES.SUBTABS) return 'capitalize';\n    return isDSMobile ? 'none' : 'uppercase';\n  }};\n  letter-spacing: 0px;\n  white-space: nowrap;\n  padding: 2px 0;\n  margin-right: ${({ fixedTabsHeaders, isDSMobile }) => {\n    if (fixedTabsHeaders) return '0px';\n    if (!fixedTabsHeaders && isDSMobile) return '14px';\n    return '16px';\n  }};\n\n  margin-left: ${({ fixedTabsHeaders, isDSMobile }) => {\n    if (fixedTabsHeaders) return '0px';\n    if (!fixedTabsHeaders && isDSMobile) return '14px';\n    return '16px';\n  }};\n\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')}\n\n  ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? `height: 32px;` : `height: 22px;`)}\n\n  ${({ theme, isActive, disabled }) =>\n    isActive && !disabled\n      ? `\n          font-weight:  ${theme.fontWeights.semibold};\n          ${safariAndFirefoxBold(`#353C46`)}\n\n          &:hover {\n            ${safariAndFirefoxBold(`#1E79C2`)}\n          }\n          \n        `\n      : `\n      \n      `}\n\n  ${({ theme, disabled }) =>\n    disabled\n      ? `\n          color: ${theme.colors.neutral[500]};\n          cursor: not-allowed;\n        `\n      : `\n      &:hover {\n        color: ${theme.colors.brand[600]};\n      }\n          `}\n\n  ${({ theme }) => `\n    &[aria-disabled='true'] {\n      color: ${theme.colors.neutral[500]};\n      cursor: not-allowed;\n    }\n  `}\n\n  ${({ theme, showSeparator, tabType }) =>\n    showSeparator\n      ? `\n          &:not(:last-of-type):before\n            {\n              content: \"\";\n              position: absolute;\n              width: 1px;\n              right: -16px;\n              top: 50%;\n              transform: translateY(-50%);\n              height: ${tabType === TAB_TYPES.SUBTABS ? `10px` : `16px`};\n              background: ${theme.colors.neutral[400]};\n            }`\n      : ``}\n\n  ${({ theme, isDSMobile, tabType, isActive }) =>\n    !isDSMobile\n      ? `\n  &:focus {\n    outline: none;\n    &:after {\n      position: absolute;\n      content: '';\n      top: 0;\n      left: -16px;\n      width: calc(100% + 32px);\n      height: 100%;\n      z-index: 5;\n      border-radius: 2px;\n      border: 2px solid ${theme.colors.brand[700]};\n    }\n\n    ${\n      tabType !== TAB_TYPES.SUBTABS && isActive\n        ? `\n      &:before {\n        position: absolute;\n        content: '';\n        left: -16px;\n        right: 0;\n        top: calc(100% - 2px);\n        transform: none;\n        width: calc(100% + 32px);\n        height: 2px;\n        z-index: 10;\n        background: linear-gradient(to right, transparent 0px, transparent 12px, white 12px, white 16px, transparent 16px,transparent calc(100% - 16px),  white calc(100% - 16px), white calc(100% - 12px),  transparent calc(100% - 12px), transparent 100%);\n      }\n    `\n        : ``\n    }\n  }\n  \n  `\n      : ``}\n\n  \n      \n${({ theme, isActive, disabled, isDSMobile }) =>\n    isDSMobile\n      ? `\n    height:  40px;\n    color: ${disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n    font-weight: ${theme.fontWeights.regular};\n    padding: 0;\n    font-size: 16px;\n    line-height: 1.3;\n    ${String(onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'))} \n\n    &:focus {\n      font-weight: ${theme.fontWeights.regular};\n      ${safariAndFirefoxBold('#006AA9')}\n    }\n\n    ${\n      isActive\n        ? `\n        font-weight: ${theme.fontWeights.regular};\n        ${safariAndFirefoxBold('#006AA9')}\n        `\n        : ``\n    }\n\n    ${\n      isActive && !disabled\n        ? `\n        color:  ${theme.colors.brand[700]};\n        line-height: 1.3;\n        font-weight: ${theme.fontWeights.regular};\n        -webkit-font-smoothing: subpixel-antialiased; \n        -webkit-text-stroke: 0.4px ${theme.colors.brand[700]};`\n        : ``\n    }\n\n    ${\n      !disabled\n        ? `\n        &:hover,\n        &:focus {\n          outline: none;\n          color: ${theme.colors.brand[700]};\n          ${safariAndFirefoxBold('#006AA9')}\n        }`\n        : ``\n    }\n\n    `\n      : ``}\n`;\n\nexport const StyledSubTabsList = styled.div<StyledSubTabsListPropsT>`\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  width: 100%;\n  ${({ withCarousel }) => (withCarousel ? 'max-width: 100%;' : '')}\n`;\n\nexport const StyledTabList = styled.div<StyledTabListPropsT>`\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  width: 100%;\n  z-index: 0;\n  ${({ withCarousel, isDSMobile }) => (withCarousel && !isDSMobile ? `max-width: 100%;` : '')}\n\n  ${({ theme, isDSMobile, tabType }) =>\n    tabType !== TAB_TYPES.NORMAL_SMALL && !isDSMobile\n      ? `\n  &:after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 1px;\n    box-shadow: 0px 0px 0px 1px ${theme.colors.neutral[400]};\n    pointer-events: none;\n    bottom: 0px;\n  }\n  `\n      : ``}\n\n  ${StyledTabButton} {\n    padding-bottom: 0;\n    padding-top: 0;\n  }\n\n  ${({ theme, isDSMobile }) =>\n    isDSMobile\n      ? `\n        \n         background: ${theme.colors.neutral['000']};`\n      : ``}\n\n  ${({ isDSMobile, fixedTabsHeaders }) =>\n    isDSMobile\n      ? `\n      ${\n        !fixedTabsHeaders\n          ? `\n          z-index: 0;\n          overflow-x: auto;\n          overflow-y: hidden;\n          &::-webkit-scrollbar {\n            display: none;\n          }`\n          : `\n         display: flex;\n        ${StyledTabButton} {\n          flex: 1;\n          overflow-x: hidden;\n        }`\n      }`\n      : ``}\n\n  ${StyledSelectionIndicator} {\n    ${({ indicatorStyle }) => `\n      width: ${indicatorStyle.width}px;\n      left: ${indicatorStyle.left}px;\n      `}\n  }\n\n  ${StyledSelectionIndicator} {\n    background: ${(props) => {\n      const { theme, indicatorStyle, isDSMobile } = props;\n      return !isDSMobile\n        ? `linear-gradient(to right, transparent 0px, transparent 16px, ${th.color('brand-600')(\n            props,\n          )} 16px, ${th.color('brand-600')(props)} ${indicatorStyle.width - 16}px, transparent ${\n            indicatorStyle.width - 16\n          }px, transparent ${indicatorStyle.width}px )`\n        : theme.colors.brand[600];\n    }};\n  }\n`;\n\nexport const StyledRequiredMark = styled.span`\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-size: 6px;\n  margin-left: 2px;\n  position: absolute;\n  top: 5px;\n`;\n\nexport const ScreenReaderOnly = styled.div`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,QAAQ,sBAAsB,sBAAsB,UAAU;AAGvE,SAAS,iBAAiB;AAyCnB,MAAM,2BAA2B,OAAO;AAAA;AAAA,YAEnC,CAAC,EAAE,WAAW,MAAO,aAAa,QAAQ,KAAM;AAAA,SACnD,CAAC,EAAE,SAAS,WAAW,MAAM;AAClC,MAAI,WAAY,QAAO;AACvB,MAAI,YAAY,UAAU,aAAc,QAAO;AAC/C,SAAO;AACT,CAAC;AAAA;AAAA,gBAEa,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA,IAI3C,CAAC,EAAE,WAAW,MACd,aACI;AAAA;AAAA;AAAA,MAIA,EAAE;AAAA;AAGH,MAAM,uBAAuB,OAAO,IAAI,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,EAAE,OAAmC;AAAA,EAC7G,OAAO,EAAE,MAAM,OAAO,IAAI,UAAU,QAAQ,KAAK;AACnD,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQE,CAAC,EAAE,iBAAiB,EAAE,MAAM,MAAM,EAAE,MAAM;AAC1C,MAAI,SAAS;AACX,WAAO;AACT,MAAI;AACF,WAAO;AACT,MAAI,KAAM,QAAO;AACjB,SAAO;AACT,CAAC;AAAA;AAKI,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA,IAInC,CAAC,EAAE,kBAAkB,WAAW,MAAO,CAAC,oBAAoB,aAAa,KAAK,qBAAsB;AAAA,IACpG,CAAC,EAAE,OAAO,WAAW,MAAO,aAAa,4BAA4B,MAAM,OAAO,QAAQ,GAAG,CAAC,MAAM,EAAG;AAAA;AAGpG,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMlB,CAAC,EAAE,SAAS,WAAW,MAAM;AAC7C,MAAI,YAAY,UAAU,QAAS,QAAO;AAC1C,SAAO,aAAa,SAAS;AAC/B,CAAC;AAAA;AAAA;AAAA;AAAA,kBAIe,CAAC,EAAE,kBAAkB,WAAW,MAAM;AACpD,MAAI,iBAAkB,QAAO;AAC7B,MAAI,CAAC,oBAAoB,WAAY,QAAO;AAC5C,SAAO;AACT,CAAC;AAAA;AAAA,iBAEc,CAAC,EAAE,kBAAkB,WAAW,MAAM;AACnD,MAAI,iBAAkB,QAAO;AAC7B,MAAI,CAAC,oBAAoB,WAAY,QAAO;AAC5C,SAAO;AACT,CAAC;AAAA;AAAA,WAEQ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,IAC/C,qBAAqB,yCAAyC,CAAC;AAAA;AAAA,IAE/D,CAAC,EAAE,QAAQ,MAAO,YAAY,UAAU,SAAS,kBAAkB,eAAgB;AAAA;AAAA,IAEnF,CAAC,EAAE,OAAO,UAAU,SAAS,MAC7B,YAAY,CAAC,WACT;AAAA,0BACkB,MAAM,YAAY,QAAQ;AAAA,YACxC,qBAAqB,SAAS,CAAC;AAAA;AAAA;AAAA,cAG7B,qBAAqB,SAAS,CAAC;AAAA;AAAA;AAAA,YAIrC;AAAA;AAAA,OAED;AAAA;AAAA,IAEH,CAAC,EAAE,OAAO,SAAS,MACnB,WACI;AAAA,mBACW,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,YAGpC;AAAA;AAAA,iBAES,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,WAE7B;AAAA;AAAA,IAEP,CAAC,EAAE,MAAM,MAAM;AAAA;AAAA,eAEJ,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA,GAGrC;AAAA;AAAA,IAEC,CAAC,EAAE,OAAO,eAAe,QAAQ,MACjC,gBACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASgB,YAAY,UAAU,UAAU,SAAS,MAAM;AAAA,4BAC3C,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,iBAE7C,EAAE;AAAA;AAAA,IAEN,CAAC,EAAE,OAAO,YAAY,SAAS,SAAS,MACxC,CAAC,aACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAYkB,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,MAI3C,YAAY,UAAU,WAAW,WAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAcA,EACN;AAAA;AAAA;AAAA,MAII,EAAE;AAAA;AAAA;AAAA;AAAA,EAIR,CAAC,EAAE,OAAO,UAAU,UAAU,WAAW,MACvC,aACI;AAAA;AAAA,aAEK,WAAW,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,mBAC1D,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA,MAItC,OAAO,qBAAqB,yCAAyC,CAAC,CAAC;AAAA;AAAA;AAAA,qBAGxD,MAAM,YAAY,OAAO;AAAA,QACtC,qBAAqB,SAAS,CAAC;AAAA;AAAA;AAAA,MAIjC,WACI;AAAA,uBACa,MAAM,YAAY,OAAO;AAAA,UACtC,qBAAqB,SAAS,CAAC;AAAA,YAE/B,EACN;AAAA;AAAA,MAGE,YAAY,CAAC,WACT;AAAA,kBACQ,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,uBAElB,MAAM,YAAY,OAAO;AAAA;AAAA,qCAEX,MAAM,OAAO,MAAM,GAAG,CAAC,MAClD,EACN;AAAA;AAAA,MAGE,CAAC,WACG;AAAA;AAAA;AAAA;AAAA,mBAIS,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,YAC9B,qBAAqB,SAAS,CAAC;AAAA,aAEjC,EACN;AAAA;AAAA,QAGI,EAAE;AAAA;AAGH,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMpC,CAAC,EAAE,aAAa,MAAO,eAAe,qBAAqB,EAAG;AAAA;AAG3D,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhC,CAAC,EAAE,cAAc,WAAW,MAAO,gBAAgB,CAAC,aAAa,qBAAqB,EAAG;AAAA;AAAA,IAEzF,CAAC,EAAE,OAAO,YAAY,QAAQ,MAC9B,YAAY,UAAU,gBAAgB,CAAC,aACnC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kCAM0B,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,MAKnD,EAAE;AAAA;AAAA,IAEN,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,IAKf,CAAC,EAAE,OAAO,WAAW,MACrB,aACI;AAAA;AAAA,uBAEe,MAAM,OAAO,QAAQ,KAAK,CAAC,MAC1C,EAAE;AAAA;AAAA,IAEN,CAAC,EAAE,YAAY,iBAAiB,MAChC,aACI;AAAA,QAEA,CAAC,mBACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOA;AAAA;AAAA,UAEF,eAAe;AAAA;AAAA;AAAA,UAInB,KACE,EAAE;AAAA;AAAA,IAEN,wBAAwB;AAAA,MACtB,CAAC,EAAE,eAAe,MAAM;AAAA,eACf,eAAe,KAAK;AAAA,cACrB,eAAe,IAAI;AAAA,OAC1B;AAAA;AAAA;AAAA,IAGH,wBAAwB;AAAA,kBACV,CAAC,UAAU;AACvB,QAAM,EAAE,OAAO,gBAAgB,WAAW,IAAI;AAC9C,SAAO,CAAC,aACJ,gEAAgE,GAAG,MAAM,WAAW;AAAA,IAClF;AAAA,EACF,CAAC,UAAU,GAAG,MAAM,WAAW,EAAE,KAAK,CAAC,IAAI,eAAe,QAAQ,EAAE,mBAClE,eAAe,QAAQ,EACzB,mBAAmB,eAAe,KAAK,SACvC,MAAM,OAAO,MAAM,GAAG;AAC5B,CAAC;AAAA;AAAA;AAIE,MAAM,qBAAqB,OAAO;AAAA,WAC9B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled, safariAndFirefoxBold, onlySafariAndFirefox, th, css } from '@elliemae/ds-system';\n\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES } from '../../constants/index.js';\n\ninterface StyledSelectionIndicatoPropsT {\n  isDSMobile: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledSubTabsListPropsT {\n  withCarousel: boolean;\n}\n\ninterface StyledTabButtonPropsT {\n  isActive: boolean;\n  disabled: boolean;\n  showSeparator: boolean;\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n  withCarousel: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledTabListPropsT {\n  withCarousel: boolean;\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n  indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledMobileGradientPropsT {\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n  left: number | undefined;\n  width: number | undefined;\n}\n\ninterface StyledTabWrapperPropsT {\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n}\n\nexport const StyledSelectionIndicator = styled.div<StyledSelectionIndicatoPropsT>`\n  position: absolute;\n  height: ${({ isDSMobile }) => (isDSMobile ? '2px' : '3px')};\n  top: ${({ tabType, isDSMobile }) => {\n    if (isDSMobile) return `35px`;\n    if (tabType === TAB_TYPES.NORMAL_SMALL) return `15px`;\n    return `25px`;\n  }};\n  z-index: 1;\n  margin-top: ${({ theme }) => theme.space.xxxs};\n  pointer-events: none;\n  transition: 200ms cubic-bezier(0.36, 0, 1, 1);\n\n  ${({ isDSMobile }) =>\n    isDSMobile\n      ? ` \n  margin-left: 0;\n  margin-top: 3px;\n  `\n      : ``}\n`;\n\nexport const StyledMobileGradient = styled.div.attrs(({ left = 0, width = 0 }: StyledMobileGradientPropsT) => ({\n  style: { left: left - 10, maxWidth: width - left },\n}))<StyledMobileGradientPropsT>`\n  position: fixed;\n  z-index: 15;\n  top: 0;\n  width: calc(100% + 20px);\n  height: 40px;\n  pointer-events: none;\n\n  ${({ mobileGradients: { left, right } }) => {\n    if (right && left)\n      return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n    if (right)\n      return `background: linear-gradient(90deg, #FFFFFF00 0%, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n    if (left) return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 100%);`;\n    return '';\n  }};\n`;\n\n/**  CSS Setters */\n\nexport const StyledTabWrapper = styled.div<StyledTabWrapperPropsT>`\n  display: flex;\n  flex: 1;\n  flex-wrap: nowrap;\n  ${({ fixedTabsHeaders, isDSMobile }) => (!fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;')}\n  ${({ theme, isDSMobile }) => (isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``)}\n`;\n\nconst baseButtonStyles = css<StyledTabButtonPropsT>`\n  position: relative;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  transition: 100ms cubic-bezier(0, 0, 0.42, 1);\n  text-transform: ${({ tabType, isDSMobile }) => {\n    if (tabType === TAB_TYPES.SUBTABS) return 'capitalize';\n    return isDSMobile ? 'none' : 'uppercase';\n  }};\n  letter-spacing: 0px;\n  white-space: nowrap;\n  padding: 2px 0;\n  margin-right: ${({ fixedTabsHeaders, isDSMobile }) => {\n    if (fixedTabsHeaders) return '0px';\n    if (!fixedTabsHeaders && isDSMobile) return '14px';\n    return '16px';\n  }};\n\n  margin-left: ${({ fixedTabsHeaders, isDSMobile }) => {\n    if (fixedTabsHeaders) return '0px';\n    if (!fixedTabsHeaders && isDSMobile) return '14px';\n    return '16px';\n  }};\n\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')}\n\n  ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? `height: 32px;` : `height: 22px;`)}\n\n  ${({ theme, isActive, disabled }) =>\n    isActive && !disabled\n      ? `\n          font-weight:  ${theme.fontWeights.semibold};\n          ${safariAndFirefoxBold(`#353C46`)}\n\n          &:hover {\n            ${safariAndFirefoxBold(`#1E79C2`)}\n          }\n          \n        `\n      : `\n      \n      `}\n\n  ${({ theme, disabled }) =>\n    disabled\n      ? `\n          color: ${theme.colors.neutral[500]};\n          cursor: not-allowed;\n        `\n      : `\n      &:hover {\n        color: ${theme.colors.brand[600]};\n      }\n          `}\n\n  ${({ theme }) => `\n    &[aria-disabled='true'] {\n      color: ${theme.colors.neutral[500]};\n      cursor: not-allowed;\n    }\n  `}\n\n  ${({ theme, showSeparator, tabType }) =>\n    showSeparator\n      ? `\n          &:not(:last-of-type):before\n            {\n              content: \"\";\n              position: absolute;\n              width: 1px;\n              right: -16px;\n              top: 50%;\n              transform: translateY(-50%);\n              height: ${tabType === TAB_TYPES.SUBTABS ? `10px` : `16px`};\n              background: ${theme.colors.neutral[400]};\n            }`\n      : ``}\n\n  ${({ theme, isDSMobile, tabType, isActive }) =>\n    !isDSMobile\n      ? `\n  &:focus {\n    outline: none;\n    &:after {\n      position: absolute;\n      content: '';\n      top: 0;\n      left: -16px;\n      width: calc(100% + 32px);\n      height: 100%;\n      z-index: 5;\n      border-radius: 2px;\n      border: 2px solid ${theme.colors.brand[700]};\n    }\n\n    ${\n      tabType !== TAB_TYPES.SUBTABS && isActive\n        ? `\n      &:before {\n        position: absolute;\n        content: '';\n        left: -16px;\n        right: 0;\n        top: calc(100% - 2px);\n        transform: none;\n        width: calc(100% + 32px);\n        height: 2px;\n        z-index: 10;\n        background: linear-gradient(to right, transparent 0px, transparent 12px, white 12px, white 16px, transparent 16px,transparent calc(100% - 16px),  white calc(100% - 16px), white calc(100% - 12px),  transparent calc(100% - 12px), transparent 100%);\n      }\n    `\n        : ``\n    }\n  }\n  \n  `\n      : ``}\n\n  \n      \n${({ theme, isActive, disabled, isDSMobile }) =>\n    isDSMobile\n      ? `\n    height:  40px;\n    color: ${disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n    font-weight: ${theme.fontWeights.regular};\n    padding: 0;\n    font-size: 16px;\n    line-height: 1.3;\n    ${String(onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'))} \n\n    &:focus {\n      font-weight: ${theme.fontWeights.regular};\n      ${safariAndFirefoxBold('#006AA9')}\n    }\n\n    ${\n      isActive\n        ? `\n        font-weight: ${theme.fontWeights.regular};\n        ${safariAndFirefoxBold('#006AA9')}\n        `\n        : ``\n    }\n\n    ${\n      isActive && !disabled\n        ? `\n        color:  ${theme.colors.brand[700]};\n        line-height: 1.3;\n        font-weight: ${theme.fontWeights.regular};\n        -webkit-font-smoothing: subpixel-antialiased; \n        -webkit-text-stroke: 0.4px ${theme.colors.brand[700]};`\n        : ``\n    }\n\n    ${\n      !disabled\n        ? `\n        &:hover,\n        &:focus {\n          outline: none;\n          color: ${theme.colors.brand[700]};\n          ${safariAndFirefoxBold('#006AA9')}\n        }`\n        : ``\n    }\n\n    `\n      : ``}\n`;\n\nexport const StyledTabButton = styled('button', {\n  name: DSTabsName,\n  slot: TABS_SLOTS.TAB_BUTTON,\n})<StyledTabButtonPropsT>`\n  ${baseButtonStyles}\n`;\nexport const StyledSubTabButton = styled('button', {\n  name: DSTabsName,\n  slot: TABS_SLOTS.SUBTAB_BUTTON,\n})<StyledTabButtonPropsT>`\n  ${baseButtonStyles}\n`;\n\nexport const StyledSubTabsList = styled('div', {\n  name: DSTabsName,\n  slot: TABS_SLOTS.SUB_TAB_LIST,\n})<StyledSubTabsListPropsT>`\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  width: 100%;\n  ${({ withCarousel }) => (withCarousel ? 'max-width: 100%;' : '')}\n`;\n\nexport const StyledTabList = styled('div', { name: DSTabsName, slot: TABS_SLOTS.TAB_LIST })<StyledTabListPropsT>`\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  width: 100%;\n  z-index: 0;\n  ${({ withCarousel, isDSMobile }) => (withCarousel && !isDSMobile ? `max-width: 100%;` : '')}\n\n  ${({ theme, isDSMobile, tabType }) =>\n    tabType !== TAB_TYPES.NORMAL_SMALL && !isDSMobile\n      ? `\n  &:after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 1px;\n    box-shadow: 0px 0px 0px 1px ${theme.colors.neutral[400]};\n    pointer-events: none;\n    bottom: 0px;\n  }\n  `\n      : ``}\n\n  ${StyledTabButton} {\n    padding-bottom: 0;\n    padding-top: 0;\n  }\n\n  ${({ theme, isDSMobile }) =>\n    isDSMobile\n      ? `\n        \n         background: ${theme.colors.neutral['000']};`\n      : ``}\n\n  ${({ isDSMobile, fixedTabsHeaders }) =>\n    isDSMobile\n      ? `\n      ${\n        !fixedTabsHeaders\n          ? `\n          z-index: 0;\n          overflow-x: auto;\n          overflow-y: hidden;\n          &::-webkit-scrollbar {\n            display: none;\n          }`\n          : `\n         display: flex;\n        ${StyledTabButton} {\n          flex: 1;\n          overflow-x: hidden;\n        }`\n      }`\n      : ``}\n\n  ${StyledSelectionIndicator} {\n    ${({ indicatorStyle }) => `\n      width: ${indicatorStyle.width}px;\n      left: ${indicatorStyle.left}px;\n      `}\n  }\n\n  ${StyledSelectionIndicator} {\n    background: ${(props) => {\n      const { theme, indicatorStyle, isDSMobile } = props;\n      return !isDSMobile\n        ? `linear-gradient(to right, transparent 0px, transparent 16px, ${th.color('brand-600')(\n            props,\n          )} 16px, ${th.color('brand-600')(props)} ${indicatorStyle.width - 16}px, transparent ${\n            indicatorStyle.width - 16\n          }px, transparent ${indicatorStyle.width}px )`\n        : theme.colors.brand[600];\n    }};\n  }\n`;\n\nexport const StyledRequiredMark = styled.span`\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-size: 6px;\n  margin-left: 2px;\n  position: absolute;\n  top: 5px;\n`;\n\nexport const ScreenReaderOnly = styled.div`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,12 +1,11 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
-import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
+import { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from "@elliemae/ds-props-helpers";
 import { TabsPanels } from "../tabsPanel/TabsPanels.js";
 import { TabBar } from "../tabBar/TabBar.js";
-import { StyledTabBarContainer } from "./styles.js";
+import { StyledTabBarContainer, StyledTabsContainer } from "./styles.js";
 import { DSTabsContext } from "../../DSTabsCTX.js";
-import { TABS_DATA_TESTID } from "../../constants/index.js";
 const TabsContent = () => {
   const {
     props,
@@ -14,14 +13,16 @@ const TabsContent = () => {
   } = useContext(DSTabsContext);
   const globalProps = useGetGlobalAttributes(props);
   const xstyledProps = useGetXstyledProps(props);
+  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);
   return /* @__PURE__ */ jsxs(
-    "div",
+    StyledTabsContainer,
     {
       ...globalProps,
       ...xstyledProps,
       ...containerProps,
-      ref: innerRef,
-      "data-testid": TABS_DATA_TESTID.TABS_CONTAINER,
+      innerRef,
+      getOwnerProps,
+      getOwnerPropsArguments,
       children: [
         /* @__PURE__ */ jsxs(StyledTabBarContainer, { "aria-label": tabsListAriaLabel, children: [
           /* @__PURE__ */ jsx(TabBar, {}),

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 } from '@elliemae/ds-props-helpers';\nimport { TabsPanels } from '../tabsPanel/TabsPanels.js';\nimport { TabBar } from '../tabBar/TabBar.js';\nimport { StyledTabBarContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { TABS_DATA_TESTID } from '../../constants/index.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\n  return (\n    <div\n      {...globalProps}\n      {...xstyledProps}\n      {...containerProps}\n      ref={innerRef}\n      data-testid={TABS_DATA_TESTID.TABS_CONTAINER}\n    >\n      <StyledTabBarContainer aria-label={tabsListAriaLabel}>\n        <TabBar />\n        {TabBarExtraContent ? <TabBarExtraContent /> : null}\n        {tabBarExtraContent || null}\n      </StyledTabBarContainer>\n      <TabsPanels />\n    </div>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACyBjB,SACE,KADF;AAzBN,SAAgB,kBAAkB;AAClC,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAE1B,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;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAa,iBAAiB;AAAA,MAE9B;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 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;",
   "names": []
 }

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

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

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

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