@elliemae/ds-tabs 3.53.0-next.11 → 3.53.0-next.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -37,6 +37,7 @@ var import_react = require("react");
37
37
  var import_ds_icon = require("@elliemae/ds-icon");
38
38
  var import_ds_button_v2 = require("@elliemae/ds-button-v2");
39
39
  var import_ds_icons = require("@elliemae/ds-icons");
40
+ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
40
41
  var import_styles = require("./styles.js");
41
42
  var import_useCarousel = require("./useCarousel.js");
42
43
  var import_DSTabsCTX = require("../../DSTabsCTX.js");
@@ -47,11 +48,13 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
47
48
  });
48
49
  const {
49
50
  carouselOnlyListRef,
50
- props: { type, carouselChevronProps }
51
+ props,
52
+ props: { type }
51
53
  } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
54
+ const { getOwnerProps } = (0, import_ds_props_helpers.useOwnerProps)(props);
52
55
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledCarouselWrapper, { children: [
53
56
  showChevrons.left && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCarouselButtonWrapper, { tabType: type, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
54
- import_styles.StyledCarouselBtn,
57
+ import_styles.StyledCarouselBtnLeft,
55
58
  {
56
59
  size: "s",
57
60
  onClick: leftButtonOnClick,
@@ -59,12 +62,12 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
59
62
  "data-testid": import_constants.TABS_DATA_TESTID.CAROUSEL_BUTTON_LEFT,
60
63
  buttonType: import_ds_button_v2.BUTTON_TYPES.ICON,
61
64
  "aria-label": "Scroll Left",
62
- ...carouselChevronProps && carouselChevronProps({ isLeftChevron: true }),
65
+ getOwnerProps,
63
66
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronLeft, { size: import_ds_icon.DSIconSizes.S })
64
67
  }
65
68
  ) }),
66
69
  showChevrons.right && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCarouselButtonWrapper, { tabType: type, right: showChevrons.right, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
67
- import_styles.StyledCarouselBtn,
70
+ import_styles.StyledCarouselBtnRight,
68
71
  {
69
72
  size: "s",
70
73
  onClick: rightButtonOnClick,
@@ -72,7 +75,7 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
72
75
  "data-testid": import_constants.TABS_DATA_TESTID.CAROUSEL_BUTTON_RIGHT,
73
76
  buttonType: import_ds_button_v2.BUTTON_TYPES.ICON,
74
77
  "aria-label": "Scroll Right",
75
- ...carouselChevronProps && carouselChevronProps({ isLeftChevron: false }),
78
+ getOwnerProps,
76
79
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronRight, { size: import_ds_icon.DSIconSizes.S })
77
80
  }
78
81
  ) }),
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/carousel/Carousel.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { useContext } from 'react';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { TABS_DATA_TESTID } from '../../constants/index.js';\n\ninterface CarouselPropsT {\n children: React.ReactNode;\n updateIndicatorStyle?: () => void;\n}\n\nexport const Carousel = ({ children, updateIndicatorStyle }: CarouselPropsT): JSX.Element => {\n const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel({\n updateIndicatorStyle,\n });\n\n const {\n carouselOnlyListRef,\n props: { type, carouselChevronProps },\n } = useContext(DSTabsContext);\n\n return (\n <StyledCarouselWrapper>\n {showChevrons.left && (\n <StyledCarouselButtonWrapper tabType={type}>\n <StyledCarouselBtn\n size=\"s\"\n onClick={leftButtonOnClick}\n tabIndex={-1}\n data-testid={TABS_DATA_TESTID.CAROUSEL_BUTTON_LEFT}\n buttonType={BUTTON_TYPES.ICON}\n aria-label=\"Scroll Left\"\n {...(carouselChevronProps && carouselChevronProps({ isLeftChevron: true }))}\n >\n <ChevronLeft size={DSIconSizes.S} />\n </StyledCarouselBtn>\n </StyledCarouselButtonWrapper>\n )}\n {showChevrons.right && (\n <StyledCarouselButtonWrapper tabType={type} right={showChevrons.right}>\n <StyledCarouselBtn\n size=\"s\"\n onClick={rightButtonOnClick}\n tabIndex={-1}\n data-testid={TABS_DATA_TESTID.CAROUSEL_BUTTON_RIGHT}\n buttonType={BUTTON_TYPES.ICON}\n aria-label=\"Scroll Right\"\n {...(carouselChevronProps && carouselChevronProps({ isLeftChevron: false }))}\n >\n <ChevronRight size={DSIconSizes.S} />\n </StyledCarouselBtn>\n </StyledCarouselButtonWrapper>\n )}\n <StyledChildrenWrap\n role=\"tablist\"\n innerRef={carouselOnlyListRef}\n onClick={handleOnClick}\n onScroll={handleOnScroll}\n >\n {children}\n </StyledChildrenWrap>\n </StyledCarouselWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBnB;AAzBJ,mBAA2B;AAC3B,qBAA4B;AAC5B,0BAA6B;AAC7B,sBAA0C;AAC1C,oBAA0G;AAC1G,yBAA4B;AAC5B,uBAA8B;AAC9B,uBAAiC;AAO1B,MAAM,WAAW,CAAC,EAAE,UAAU,qBAAqB,MAAmC;AAC3F,QAAM,EAAE,cAAc,mBAAmB,oBAAoB,eAAe,eAAe,QAAI,gCAAY;AAAA,IACzG;AAAA,EACF,CAAC;AAED,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,MAAM,qBAAqB;AAAA,EACtC,QAAI,yBAAW,8BAAa;AAE5B,SACE,6CAAC,uCACE;AAAA,iBAAa,QACZ,4CAAC,6CAA4B,SAAS,MACpC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,kCAAiB;AAAA,QAC9B,YAAY,iCAAa;AAAA,QACzB,cAAW;AAAA,QACV,GAAI,wBAAwB,qBAAqB,EAAE,eAAe,KAAK,CAAC;AAAA,QAEzE,sDAAC,+BAAY,MAAM,2BAAY,GAAG;AAAA;AAAA,IACpC,GACF;AAAA,IAED,aAAa,SACZ,4CAAC,6CAA4B,SAAS,MAAM,OAAO,aAAa,OAC9D;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,kCAAiB;AAAA,QAC9B,YAAY,iCAAa;AAAA,QACzB,cAAW;AAAA,QACV,GAAI,wBAAwB,qBAAqB,EAAE,eAAe,MAAM,CAAC;AAAA,QAE1E,sDAAC,gCAAa,MAAM,2BAAY,GAAG;AAAA;AAAA,IACrC,GACF;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;",
4
+ "sourcesContent": ["import { useContext } from 'react';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport {\n StyledCarouselBtnLeft,\n StyledCarouselBtnRight,\n StyledCarouselButtonWrapper,\n StyledCarouselWrapper,\n StyledChildrenWrap,\n} from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { TABS_DATA_TESTID } from '../../constants/index.js';\n\ninterface CarouselPropsT {\n children: React.ReactNode;\n updateIndicatorStyle?: () => void;\n}\n\nexport const Carousel = ({ children, updateIndicatorStyle }: CarouselPropsT): JSX.Element => {\n const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel({\n updateIndicatorStyle,\n });\n\n const {\n carouselOnlyListRef,\n props,\n props: { type },\n } = useContext(DSTabsContext);\n\n const { getOwnerProps } = useOwnerProps(props);\n\n return (\n <StyledCarouselWrapper>\n {showChevrons.left && (\n <StyledCarouselButtonWrapper tabType={type}>\n <StyledCarouselBtnLeft\n size=\"s\"\n onClick={leftButtonOnClick}\n tabIndex={-1}\n data-testid={TABS_DATA_TESTID.CAROUSEL_BUTTON_LEFT}\n buttonType={BUTTON_TYPES.ICON}\n aria-label=\"Scroll Left\"\n getOwnerProps={getOwnerProps}\n >\n <ChevronLeft size={DSIconSizes.S} />\n </StyledCarouselBtnLeft>\n </StyledCarouselButtonWrapper>\n )}\n {showChevrons.right && (\n <StyledCarouselButtonWrapper tabType={type} right={showChevrons.right}>\n <StyledCarouselBtnRight\n size=\"s\"\n onClick={rightButtonOnClick}\n tabIndex={-1}\n data-testid={TABS_DATA_TESTID.CAROUSEL_BUTTON_RIGHT}\n buttonType={BUTTON_TYPES.ICON}\n aria-label=\"Scroll Right\"\n getOwnerProps={getOwnerProps}\n >\n <ChevronRight size={DSIconSizes.S} />\n </StyledCarouselBtnRight>\n </StyledCarouselButtonWrapper>\n )}\n <StyledChildrenWrap\n role=\"tablist\"\n innerRef={carouselOnlyListRef}\n onClick={handleOnClick}\n onScroll={handleOnScroll}\n >\n {children}\n </StyledChildrenWrap>\n </StyledCarouselWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCnB;AAnCJ,mBAA2B;AAC3B,qBAA4B;AAC5B,0BAA6B;AAC7B,sBAA0C;AAC1C,8BAA8B;AAC9B,oBAMO;AACP,yBAA4B;AAC5B,uBAA8B;AAC9B,uBAAiC;AAO1B,MAAM,WAAW,CAAC,EAAE,UAAU,qBAAqB,MAAmC;AAC3F,QAAM,EAAE,cAAc,mBAAmB,oBAAoB,eAAe,eAAe,QAAI,gCAAY;AAAA,IACzG;AAAA,EACF,CAAC;AAED,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,QAAI,yBAAW,8BAAa;AAE5B,QAAM,EAAE,cAAc,QAAI,uCAAc,KAAK;AAE7C,SACE,6CAAC,uCACE;AAAA,iBAAa,QACZ,4CAAC,6CAA4B,SAAS,MACpC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,kCAAiB;AAAA,QAC9B,YAAY,iCAAa;AAAA,QACzB,cAAW;AAAA,QACX;AAAA,QAEA,sDAAC,+BAAY,MAAM,2BAAY,GAAG;AAAA;AAAA,IACpC,GACF;AAAA,IAED,aAAa,SACZ,4CAAC,6CAA4B,SAAS,MAAM,OAAO,aAAa,OAC9D;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,kCAAiB;AAAA,QAC9B,YAAY,iCAAa;AAAA,QACzB,cAAW;AAAA,QACX;AAAA,QAEA,sDAAC,gCAAa,MAAM,2BAAY,GAAG;AAAA;AAAA,IACrC,GACF;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -28,7 +28,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
28
28
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
29
  var styles_exports = {};
30
30
  __export(styles_exports, {
31
- StyledCarouselBtn: () => StyledCarouselBtn,
31
+ StyledCarouselBtnLeft: () => StyledCarouselBtnLeft,
32
+ StyledCarouselBtnRight: () => StyledCarouselBtnRight,
32
33
  StyledCarouselButtonWrapper: () => StyledCarouselButtonWrapper,
33
34
  StyledCarouselWrapper: () => StyledCarouselWrapper,
34
35
  StyledChildrenWrap: () => StyledChildrenWrap
@@ -38,7 +39,7 @@ var React = __toESM(require("react"));
38
39
  var import_ds_system = require("@elliemae/ds-system");
39
40
  var import_ds_button_v2 = require("@elliemae/ds-button-v2");
40
41
  var import_constants = require("../../constants/index.js");
41
- const StyledCarouselBtn = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2)`
42
+ const baseCarouselButtonStyles = import_ds_system.css`
42
43
  margin: 0;
43
44
  min-width: ${({ theme }) => theme.space.xs};
44
45
  width: ${({ theme }) => theme.space.xs};
@@ -53,6 +54,18 @@ const StyledCarouselBtn = (0, import_ds_system.styled)(import_ds_button_v2.DSBut
53
54
  fill: ${({ theme }) => theme.colors.brand[600]};
54
55
  }
55
56
  `;
57
+ const StyledCarouselBtnLeft = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, {
58
+ name: import_constants.DSTabsName,
59
+ slot: import_constants.TABS_SLOTS.CAROUSEL_BUTTON_LEFT
60
+ })`
61
+ ${baseCarouselButtonStyles}
62
+ `;
63
+ const StyledCarouselBtnRight = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, {
64
+ name: import_constants.DSTabsName,
65
+ slot: import_constants.TABS_SLOTS.CAROUSEL_BUTTON_RIGHT
66
+ })`
67
+ ${baseCarouselButtonStyles}
68
+ `;
56
69
  const StyledCarouselWrapper = import_ds_system.styled.span`
57
70
  position: relative;
58
71
  width: 100%;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/carousel/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\n\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { TAB_TYPES } from '../../constants/index.js';\n\ninterface StyledCarouselButtonWrapperPropsT {\n right?: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\nexport const StyledCarouselBtn: typeof DSButtonV2 = styled(DSButtonV2)`\n margin: 0;\n min-width: ${({ theme }) => theme.space.xs};\n width: ${({ theme }) => theme.space.xs};\n\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n background-color: transparent;\n border-radius: 0px;\n\n & .em-ds-icon svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n }\n`;\n\nexport const StyledCarouselWrapper = styled.span`\n position: relative;\n width: 100%;\n display: flex;\n`;\n\nexport const StyledChildrenWrap = styled.div`\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n overflow-x: hidden;\n`;\n\nexport const StyledCarouselButtonWrapper = styled.div<StyledCarouselButtonWrapperPropsT>`\n max-width: 16px;\n position: absolute;\n z-index: 200;\n ${({ right }) => (right ? 'right: 0;' : `left: 0;`)}\n width: 16px;\n height: ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? '32px' : '22px')};\n padding-top: ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? '5px' : '0px')};\n background: white;\n ${({ theme, tabType }) =>\n tabType === TAB_TYPES.NORMAL\n ? `\n background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );\n `\n : ``};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,0BAA2B;AAG3B,uBAA0B;AAOnB,MAAM,wBAAuC,yBAAO,8BAAU;AAAA;AAAA,eAEtD,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,WACjC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAS5B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAI3C,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,EAAE,MAAM,MAAO,QAAQ,cAAc,UAAW;AAAA;AAAA,YAEzC,CAAC,EAAE,QAAQ,MAAO,YAAY,2BAAU,SAAS,SAAS,MAAO;AAAA,iBAC5D,CAAC,EAAE,QAAQ,MAAO,YAAY,2BAAU,SAAS,QAAQ,KAAM;AAAA;AAAA,IAE5E,CAAC,EAAE,OAAO,QAAQ,MAClB,YAAY,2BAAU,SAClB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,GAAG,CAAC,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,KAE1H,EAAE;AAAA;",
4
+ "sourcesContent": ["import { css, styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\n\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES } from '../../constants/index.js';\n\ninterface StyledCarouselButtonWrapperPropsT {\n right?: boolean;\n tabType: DSTabsInternalsT.TabTypesT;\n}\n\nconst baseCarouselButtonStyles = css`\n margin: 0;\n min-width: ${({ theme }) => theme.space.xs};\n width: ${({ theme }) => theme.space.xs};\n\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n background-color: transparent;\n border-radius: 0px;\n\n & .em-ds-icon svg {\n fill: ${({ theme }) => theme.colors.brand[600]};\n }\n`;\n\nexport const StyledCarouselBtnLeft = styled(DSButtonV2, {\n name: DSTabsName,\n slot: TABS_SLOTS.CAROUSEL_BUTTON_LEFT,\n})`\n ${baseCarouselButtonStyles}\n`;\n\nexport const StyledCarouselBtnRight = styled(DSButtonV2, {\n name: DSTabsName,\n slot: TABS_SLOTS.CAROUSEL_BUTTON_RIGHT,\n})`\n ${baseCarouselButtonStyles}\n`;\n\nexport const StyledCarouselWrapper = styled.span`\n position: relative;\n width: 100%;\n display: flex;\n`;\n\nexport const StyledChildrenWrap = styled.div`\n display: flex;\n flex-wrap: nowrap;\n flex: 1;\n overflow-x: hidden;\n`;\n\nexport const StyledCarouselButtonWrapper = styled.div<StyledCarouselButtonWrapperPropsT>`\n max-width: 16px;\n position: absolute;\n z-index: 200;\n ${({ right }) => (right ? 'right: 0;' : `left: 0;`)}\n width: 16px;\n height: ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? '32px' : '22px')};\n padding-top: ${({ tabType }) => (tabType === TAB_TYPES.NORMAL ? '5px' : '0px')};\n background: white;\n ${({ theme, tabType }) =>\n tabType === TAB_TYPES.NORMAL\n ? `\n background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );\n `\n : ``};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,0BAA2B;AAG3B,uBAAkD;AAOlD,MAAM,2BAA2B;AAAA;AAAA,eAElB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA,WACjC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAS5B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAI3C,MAAM,4BAAwB,yBAAO,gCAAY;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;AAAA,IACG,wBAAwB;AAAA;AAGrB,MAAM,6BAAyB,yBAAO,gCAAY;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,4BAAW;AACnB,CAAC;AAAA,IACG,wBAAwB;AAAA;AAGrB,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,EAAE,MAAM,MAAO,QAAQ,cAAc,UAAW;AAAA;AAAA,YAEzC,CAAC,EAAE,QAAQ,MAAO,YAAY,2BAAU,SAAS,SAAS,MAAO;AAAA,iBAC5D,CAAC,EAAE,QAAQ,MAAO,YAAY,2BAAU,SAAS,QAAQ,KAAM;AAAA;AAAA,IAE5E,CAAC,EAAE,OAAO,QAAQ,MAClB,YAAY,2BAAU,SAClB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,GAAG,CAAC,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,KAE1H,EAAE;AAAA;",
6
6
  "names": []
7
7
  }
@@ -79,8 +79,7 @@ const DSTabsPropTypes = {
79
79
  firstSubtabRef: import_ds_props_helpers.PropTypes.shape({ current: import_ds_props_helpers.PropTypes.any }).description("Ref to the first subtab element.").defaultValue(void 0),
80
80
  lastTabRef: import_ds_props_helpers.PropTypes.shape({ current: import_ds_props_helpers.PropTypes.any }).description("Ref to the last tab element.").defaultValue(void 0),
81
81
  TabBarExtraContent: import_ds_props_helpers.PropTypes.element.description("Additional content to display in the tab bar."),
82
- tabBarExtraContent: import_ds_props_helpers.PropTypes.node.description("Additional content to display in the tab bar.").defaultValue(void 0),
83
- carouselChevronProps: import_ds_props_helpers.PropTypes.func.description("Function to get props for the carousel chevron buttons.").defaultValue(() => ({}))
82
+ tabBarExtraContent: import_ds_props_helpers.PropTypes.node.description("Additional content to display in the tab bar.").defaultValue(void 0)
84
83
  };
85
84
  const DSTabsDefaultProps = {
86
85
  containerProps: {},
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { SwipeableViewsProps } from 'react-swipeable-views';\nimport type { DSButtonV2T } from '@elliemae/ds-button-v2';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\n\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES, TAB_TYPES_VALUES_AS_ARRAY } from './constants/index.js';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n export interface DefaultProps {\n tabId: string;\n applyAriaDisabled: boolean;\n }\n\n export interface OptionalProps {\n style?: Record<string, unknown>;\n title?: string;\n required?: boolean;\n disabled?: boolean;\n ref?: React.MutableRefObject<HTMLButtonElement>;\n onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n onKeyDown?: (e: React.KeyboardEvent) => null | void;\n }\n\n export interface RequiredProps {\n children: TypescriptHelpersT.ReactChildrenComplete;\n }\n\n export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n}\n\nexport declare namespace DSTabsT {\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n animated: boolean;\n enableMouseEvents: boolean;\n allowTextSelection: boolean;\n onTabChange: (tabId: string, e?: React.MouseEvent) => void;\n tabsListAriaLabel: string;\n type: DSTabsInternalsT.TabTypesT;\n children: React.ReactElement<DSTabT.Props>[] | readonly React.ReactElement<DSTabT.Props>[];\n onlyRenderActiveTab: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n isDSMobile: boolean;\n showSelectionIndicator: boolean;\n showSeparator: boolean;\n tabPanelsProps: GlobalAttributesT<HTMLDivElement>;\n swipeableViewsContainerProps: SwipeableViewsProps;\n }\n\n export interface OptionalProps {\n firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n lastTabRef?: React.MutableRefObject<HTMLElement>;\n TabBarExtraContent?: React.ComponentType;\n tabBarExtraContent?: React.ReactNode;\n activeTab?: string;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n carouselChevronProps?: ({ isLeftChevron }: { isLeftChevron: boolean }) => Partial<DSButtonV2T.Props>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps {}\n}\n\nexport const DSTabPropTypes: DSPropTypesSchema<DSTabT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n tabId: PropTypes.string.description('Unique Tab id.').defaultValue(''),\n title: PropTypes.string.description('Tab title.').defaultValue(''),\n required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n style: PropTypes.object.description('Custom styles for the tab.').defaultValue({}),\n ref: PropTypes.shape({ current: PropTypes.any }).description('Ref to the tab element.').defaultValue(undefined),\n onClick: PropTypes.func.description('Click handler for the tab.').defaultValue(undefined),\n onKeyDown: PropTypes.func.description('Keydown handler for the tab.').defaultValue(undefined),\n children: PropTypes.node.description('Content of the tab.').isRequired,\n};\n\nexport const DSTabsPropTypes: DSPropTypesSchema<DSTabsT.Props> = {\n ...getPropsPerSlotPropTypes(DSTabsName, TABS_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),\n enableMouseEvents: PropTypes.bool.description('Enables Tab transition with mouse drag events.').defaultValue(false),\n allowTextSelection: PropTypes.bool\n .description('Allows text selection when mouse drag events are active.')\n .defaultValue(false),\n onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n type: PropTypes.oneOf(TAB_TYPES_VALUES_AS_ARRAY).description('Tab type.').defaultValue(TAB_TYPES_VALUES_AS_ARRAY[0]),\n fixedTabsHeaders: PropTypes.bool.description('Fixes the tab headers.').defaultValue(false),\n isDSMobile: PropTypes.bool.description('Indicates if the component is in mobile mode.').defaultValue(false),\n showSelectionIndicator: PropTypes.bool\n .description('Shows the selection indicator for the active tab.')\n .defaultValue(true),\n showSeparator: PropTypes.bool.description('Shows a separator between tabs.').defaultValue(true),\n\n onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),\n activeTab: PropTypes.string\n .description('Passing a value makes DSTabs a controlled component.')\n .defaultValue('First DSTab children.'),\n children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n tabsListAriaLabel: PropTypes.string.description('Aria label for the list.').defaultValue('Tab list.'),\n containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n .description('Ref to the container.')\n .defaultValue(undefined),\n tabPanelsProps: PropTypes.shape(globalAttributesPropTypes)\n .description('Additional properties for the tab container.')\n .defaultValue({}),\n swipeableViewsContainerProps: PropTypes.object\n .description('Additional properties for the swipeable container.')\n .defaultValue({}),\n firstSubtabRef: PropTypes.shape({ current: PropTypes.any })\n .description('Ref to the first subtab element.')\n .defaultValue(undefined),\n lastTabRef: PropTypes.shape({ current: PropTypes.any })\n .description('Ref to the last tab element.')\n .defaultValue(undefined),\n TabBarExtraContent: PropTypes.element.description('Additional content to display in the tab bar.'),\n tabBarExtraContent: PropTypes.node\n .description('Additional content to display in the tab bar.')\n .defaultValue(undefined),\n carouselChevronProps: PropTypes.func\n .description('Function to get props for the carousel chevron buttons.')\n .defaultValue(() => ({})),\n};\n\nexport const DSTabsDefaultProps: DSTabsT.DefaultProps = {\n containerProps: {},\n animated: true,\n enableMouseEvents: false,\n allowTextSelection: false,\n onTabChange: noop,\n tabsListAriaLabel: 'Tab list',\n type: TAB_TYPES.NORMAL,\n onlyRenderActiveTab: false,\n withCarousel: false,\n isDSMobile: false,\n showSelectionIndicator: true,\n children: [],\n fixedTabsHeaders: false,\n showSeparator: true,\n tabPanelsProps: {},\n swipeableViewsContainerProps: {},\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AAMP,uBAA6E;AAE7E,MAAM,OAAO,MAAY;AAAC;AAoEnB,MAAM,iBAAkD;AAAA,EAC7D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,kCAAU,OAAO,YAAY,gBAAgB,EAAE,aAAa,EAAE;AAAA,EACrE,OAAO,kCAAU,OAAO,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EACjE,UAAU,kCAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAClG,UAAU,kCAAU,KAAK,YAAY,eAAe,EAAE,aAAa,KAAK;AAAA,EACxE,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,OAAO,kCAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,CAAC,CAAC;AAAA,EACjF,KAAK,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,EAAE,YAAY,yBAAyB,EAAE,aAAa,MAAS;AAAA,EAC9G,SAAS,kCAAU,KAAK,YAAY,4BAA4B,EAAE,aAAa,MAAS;AAAA,EACxF,WAAW,kCAAU,KAAK,YAAY,8BAA8B,EAAE,aAAa,MAAS;AAAA,EAC5F,UAAU,kCAAU,KAAK,YAAY,qBAAqB,EAAE;AAC9D;AAEO,MAAM,kBAAoD;AAAA,EAC/D,OAAG,kDAAyB,6BAAY,2BAAU;AAAA,EAClD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,YAAY,mDAAmD,EAAE,aAAa,IAAI;AAAA,EAC3G,mBAAmB,kCAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,KAAK;AAAA,EAClH,oBAAoB,kCAAU,KAC3B,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,aAAa,kCAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,UAAU;AAAA,EACjH,MAAM,kCAAU,MAAM,0CAAyB,EAAE,YAAY,WAAW,EAAE,aAAa,2CAA0B,CAAC,CAAC;AAAA,EACnH,kBAAkB,kCAAU,KAAK,YAAY,wBAAwB,EAAE,aAAa,KAAK;AAAA,EACzF,YAAY,kCAAU,KAAK,YAAY,+CAA+C,EAAE,aAAa,KAAK;AAAA,EAC1G,wBAAwB,kCAAU,KAC/B,YAAY,mDAAmD,EAC/D,aAAa,IAAI;AAAA,EACpB,eAAe,kCAAU,KAAK,YAAY,iCAAiC,EAAE,aAAa,IAAI;AAAA,EAE9F,qBAAqB,kCAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAC7G,cAAc,kCAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,KAAK;AAAA,EAC1F,WAAW,kCAAU,OAClB,YAAY,sDAAsD,EAClE,aAAa,uBAAuB;AAAA,EACvC,UAAU,kCAAU,KAAK,YAAY,kCAAkC,EAAE;AAAA,EACzE,mBAAmB,kCAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,WAAW;AAAA,EACpG,gBAAgB,kCAAU,OAAO,YAAY,0CAA0C,EAAE,aAAa,CAAC,CAAC;AAAA,EACxG,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EACxF,YAAY,uBAAuB,EACnC,aAAa,MAAS;AAAA,EACzB,gBAAgB,kCAAU,MAAM,iDAAyB,EACtD,YAAY,8CAA8C,EAC1D,aAAa,CAAC,CAAC;AAAA,EAClB,8BAA8B,kCAAU,OACrC,YAAY,oDAAoD,EAChE,aAAa,CAAC,CAAC;AAAA,EAClB,gBAAgB,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,EACvD,YAAY,kCAAkC,EAC9C,aAAa,MAAS;AAAA,EACzB,YAAY,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,EACnD,YAAY,8BAA8B,EAC1C,aAAa,MAAS;AAAA,EACzB,oBAAoB,kCAAU,QAAQ,YAAY,+CAA+C;AAAA,EACjG,oBAAoB,kCAAU,KAC3B,YAAY,+CAA+C,EAC3D,aAAa,MAAS;AAAA,EACzB,sBAAsB,kCAAU,KAC7B,YAAY,yDAAyD,EACrE,aAAa,OAAO,CAAC,EAAE;AAC5B;AAEO,MAAM,qBAA2C;AAAA,EACtD,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,MAAM,2BAAU;AAAA,EAChB,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,wBAAwB;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,gBAAgB,CAAC;AAAA,EACjB,8BAA8B,CAAC;AACjC;",
4
+ "sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { SwipeableViewsProps } from 'react-swipeable-views';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\n\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES, TAB_TYPES_VALUES_AS_ARRAY } from './constants/index.js';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n export interface DefaultProps {\n tabId: string;\n applyAriaDisabled: boolean;\n }\n\n export interface OptionalProps {\n style?: Record<string, unknown>;\n title?: string;\n required?: boolean;\n disabled?: boolean;\n ref?: React.MutableRefObject<HTMLButtonElement>;\n onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n onKeyDown?: (e: React.KeyboardEvent) => null | void;\n }\n\n export interface RequiredProps {\n children: TypescriptHelpersT.ReactChildrenComplete;\n }\n\n export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n}\n\nexport declare namespace DSTabsT {\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n animated: boolean;\n enableMouseEvents: boolean;\n allowTextSelection: boolean;\n onTabChange: (tabId: string, e?: React.MouseEvent) => void;\n tabsListAriaLabel: string;\n type: DSTabsInternalsT.TabTypesT;\n children: React.ReactElement<DSTabT.Props>[] | readonly React.ReactElement<DSTabT.Props>[];\n onlyRenderActiveTab: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n isDSMobile: boolean;\n showSelectionIndicator: boolean;\n showSeparator: boolean;\n tabPanelsProps: GlobalAttributesT<HTMLDivElement>;\n swipeableViewsContainerProps: SwipeableViewsProps;\n }\n\n export interface OptionalProps {\n firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n lastTabRef?: React.MutableRefObject<HTMLElement>;\n TabBarExtraContent?: React.ComponentType;\n tabBarExtraContent?: React.ReactNode;\n activeTab?: string;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps {}\n}\n\nexport const DSTabPropTypes: DSPropTypesSchema<DSTabT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n tabId: PropTypes.string.description('Unique Tab id.').defaultValue(''),\n title: PropTypes.string.description('Tab title.').defaultValue(''),\n required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n style: PropTypes.object.description('Custom styles for the tab.').defaultValue({}),\n ref: PropTypes.shape({ current: PropTypes.any }).description('Ref to the tab element.').defaultValue(undefined),\n onClick: PropTypes.func.description('Click handler for the tab.').defaultValue(undefined),\n onKeyDown: PropTypes.func.description('Keydown handler for the tab.').defaultValue(undefined),\n children: PropTypes.node.description('Content of the tab.').isRequired,\n};\n\nexport const DSTabsPropTypes: DSPropTypesSchema<DSTabsT.Props> = {\n ...getPropsPerSlotPropTypes(DSTabsName, TABS_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),\n enableMouseEvents: PropTypes.bool.description('Enables Tab transition with mouse drag events.').defaultValue(false),\n allowTextSelection: PropTypes.bool\n .description('Allows text selection when mouse drag events are active.')\n .defaultValue(false),\n onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n type: PropTypes.oneOf(TAB_TYPES_VALUES_AS_ARRAY).description('Tab type.').defaultValue(TAB_TYPES_VALUES_AS_ARRAY[0]),\n fixedTabsHeaders: PropTypes.bool.description('Fixes the tab headers.').defaultValue(false),\n isDSMobile: PropTypes.bool.description('Indicates if the component is in mobile mode.').defaultValue(false),\n showSelectionIndicator: PropTypes.bool\n .description('Shows the selection indicator for the active tab.')\n .defaultValue(true),\n showSeparator: PropTypes.bool.description('Shows a separator between tabs.').defaultValue(true),\n\n onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),\n activeTab: PropTypes.string\n .description('Passing a value makes DSTabs a controlled component.')\n .defaultValue('First DSTab children.'),\n children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n tabsListAriaLabel: PropTypes.string.description('Aria label for the list.').defaultValue('Tab list.'),\n containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n .description('Ref to the container.')\n .defaultValue(undefined),\n tabPanelsProps: PropTypes.shape(globalAttributesPropTypes)\n .description('Additional properties for the tab container.')\n .defaultValue({}),\n swipeableViewsContainerProps: PropTypes.object\n .description('Additional properties for the swipeable container.')\n .defaultValue({}),\n firstSubtabRef: PropTypes.shape({ current: PropTypes.any })\n .description('Ref to the first subtab element.')\n .defaultValue(undefined),\n lastTabRef: PropTypes.shape({ current: PropTypes.any })\n .description('Ref to the last tab element.')\n .defaultValue(undefined),\n TabBarExtraContent: PropTypes.element.description('Additional content to display in the tab bar.'),\n tabBarExtraContent: PropTypes.node\n .description('Additional content to display in the tab bar.')\n .defaultValue(undefined),\n};\n\nexport const DSTabsDefaultProps: DSTabsT.DefaultProps = {\n containerProps: {},\n animated: true,\n enableMouseEvents: false,\n allowTextSelection: false,\n onTabChange: noop,\n tabsListAriaLabel: 'Tab list',\n type: TAB_TYPES.NORMAL,\n onlyRenderActiveTab: false,\n withCarousel: false,\n isDSMobile: false,\n showSelectionIndicator: true,\n children: [],\n fixedTabsHeaders: false,\n showSeparator: true,\n tabPanelsProps: {},\n swipeableViewsContainerProps: {},\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -4,7 +4,14 @@ import { useContext } from "react";
4
4
  import { DSIconSizes } from "@elliemae/ds-icon";
5
5
  import { BUTTON_TYPES } from "@elliemae/ds-button-v2";
6
6
  import { ChevronRight, ChevronLeft } from "@elliemae/ds-icons";
7
- import { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } from "./styles.js";
7
+ import { useOwnerProps } from "@elliemae/ds-props-helpers";
8
+ import {
9
+ StyledCarouselBtnLeft,
10
+ StyledCarouselBtnRight,
11
+ StyledCarouselButtonWrapper,
12
+ StyledCarouselWrapper,
13
+ StyledChildrenWrap
14
+ } from "./styles.js";
8
15
  import { useCarousel } from "./useCarousel.js";
9
16
  import { DSTabsContext } from "../../DSTabsCTX.js";
10
17
  import { TABS_DATA_TESTID } from "../../constants/index.js";
@@ -14,11 +21,13 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
14
21
  });
15
22
  const {
16
23
  carouselOnlyListRef,
17
- props: { type, carouselChevronProps }
24
+ props,
25
+ props: { type }
18
26
  } = useContext(DSTabsContext);
27
+ const { getOwnerProps } = useOwnerProps(props);
19
28
  return /* @__PURE__ */ jsxs(StyledCarouselWrapper, { children: [
20
29
  showChevrons.left && /* @__PURE__ */ jsx(StyledCarouselButtonWrapper, { tabType: type, children: /* @__PURE__ */ jsx(
21
- StyledCarouselBtn,
30
+ StyledCarouselBtnLeft,
22
31
  {
23
32
  size: "s",
24
33
  onClick: leftButtonOnClick,
@@ -26,12 +35,12 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
26
35
  "data-testid": TABS_DATA_TESTID.CAROUSEL_BUTTON_LEFT,
27
36
  buttonType: BUTTON_TYPES.ICON,
28
37
  "aria-label": "Scroll Left",
29
- ...carouselChevronProps && carouselChevronProps({ isLeftChevron: true }),
38
+ getOwnerProps,
30
39
  children: /* @__PURE__ */ jsx(ChevronLeft, { size: DSIconSizes.S })
31
40
  }
32
41
  ) }),
33
42
  showChevrons.right && /* @__PURE__ */ jsx(StyledCarouselButtonWrapper, { tabType: type, right: showChevrons.right, children: /* @__PURE__ */ jsx(
34
- StyledCarouselBtn,
43
+ StyledCarouselBtnRight,
35
44
  {
36
45
  size: "s",
37
46
  onClick: rightButtonOnClick,
@@ -39,7 +48,7 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
39
48
  "data-testid": TABS_DATA_TESTID.CAROUSEL_BUTTON_RIGHT,
40
49
  buttonType: BUTTON_TYPES.ICON,
41
50
  "aria-label": "Scroll Right",
42
- ...carouselChevronProps && carouselChevronProps({ isLeftChevron: false }),
51
+ getOwnerProps,
43
52
  children: /* @__PURE__ */ jsx(ChevronRight, { size: DSIconSizes.S })
44
53
  }
45
54
  ) }),
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/Carousel.tsx"],
4
- "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, carouselChevronProps },\n } = useContext(DSTabsContext);\n\n return (\n <StyledCarouselWrapper>\n {showChevrons.left && (\n <StyledCarouselButtonWrapper tabType={type}>\n <StyledCarouselBtn\n size=\"s\"\n onClick={leftButtonOnClick}\n tabIndex={-1}\n data-testid={TABS_DATA_TESTID.CAROUSEL_BUTTON_LEFT}\n buttonType={BUTTON_TYPES.ICON}\n aria-label=\"Scroll Left\"\n {...(carouselChevronProps && carouselChevronProps({ isLeftChevron: true }))}\n >\n <ChevronLeft size={DSIconSizes.S} />\n </StyledCarouselBtn>\n </StyledCarouselButtonWrapper>\n )}\n {showChevrons.right && (\n <StyledCarouselButtonWrapper tabType={type} right={showChevrons.right}>\n <StyledCarouselBtn\n size=\"s\"\n onClick={rightButtonOnClick}\n tabIndex={-1}\n data-testid={TABS_DATA_TESTID.CAROUSEL_BUTTON_RIGHT}\n buttonType={BUTTON_TYPES.ICON}\n aria-label=\"Scroll Right\"\n {...(carouselChevronProps && carouselChevronProps({ isLeftChevron: false }))}\n >\n <ChevronRight size={DSIconSizes.S} />\n </StyledCarouselBtn>\n </StyledCarouselButtonWrapper>\n )}\n <StyledChildrenWrap\n role=\"tablist\"\n innerRef={carouselOnlyListRef}\n onClick={handleOnClick}\n onScroll={handleOnScroll}\n >\n {children}\n </StyledChildrenWrap>\n </StyledCarouselWrapper>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACyBnB,SAYQ,KAZR;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,MAAM,qBAAqB;AAAA,EACtC,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,QACV,GAAI,wBAAwB,qBAAqB,EAAE,eAAe,KAAK,CAAC;AAAA,QAEzE,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,QACV,GAAI,wBAAwB,qBAAqB,EAAE,eAAe,MAAM,CAAC;AAAA,QAE1E,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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
@@ -1,8 +1,8 @@
1
1
  import * as React from "react";
2
- import { styled } from "@elliemae/ds-system";
2
+ import { css, styled } from "@elliemae/ds-system";
3
3
  import { DSButtonV2 } from "@elliemae/ds-button-v2";
4
- import { TAB_TYPES } from "../../constants/index.js";
5
- const StyledCarouselBtn = styled(DSButtonV2)`
4
+ import { DSTabsName, TABS_SLOTS, TAB_TYPES } from "../../constants/index.js";
5
+ const baseCarouselButtonStyles = css`
6
6
  margin: 0;
7
7
  min-width: ${({ theme }) => theme.space.xs};
8
8
  width: ${({ theme }) => theme.space.xs};
@@ -17,6 +17,18 @@ const StyledCarouselBtn = styled(DSButtonV2)`
17
17
  fill: ${({ theme }) => theme.colors.brand[600]};
18
18
  }
19
19
  `;
20
+ const StyledCarouselBtnLeft = styled(DSButtonV2, {
21
+ name: DSTabsName,
22
+ slot: TABS_SLOTS.CAROUSEL_BUTTON_LEFT
23
+ })`
24
+ ${baseCarouselButtonStyles}
25
+ `;
26
+ const StyledCarouselBtnRight = styled(DSButtonV2, {
27
+ name: DSTabsName,
28
+ slot: TABS_SLOTS.CAROUSEL_BUTTON_RIGHT
29
+ })`
30
+ ${baseCarouselButtonStyles}
31
+ `;
20
32
  const StyledCarouselWrapper = styled.span`
21
33
  position: relative;
22
34
  width: 100%;
@@ -42,7 +54,8 @@ const StyledCarouselButtonWrapper = styled.div`
42
54
  ` : ``};
43
55
  `;
44
56
  export {
45
- StyledCarouselBtn,
57
+ StyledCarouselBtnLeft,
58
+ StyledCarouselBtnRight,
46
59
  StyledCarouselButtonWrapper,
47
60
  StyledCarouselWrapper,
48
61
  StyledChildrenWrap
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/styles.tsx"],
4
- "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"],
5
- "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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": []
7
7
  }
@@ -49,8 +49,7 @@ const DSTabsPropTypes = {
49
49
  firstSubtabRef: PropTypes.shape({ current: PropTypes.any }).description("Ref to the first subtab element.").defaultValue(void 0),
50
50
  lastTabRef: PropTypes.shape({ current: PropTypes.any }).description("Ref to the last tab element.").defaultValue(void 0),
51
51
  TabBarExtraContent: PropTypes.element.description("Additional content to display in the tab bar."),
52
- tabBarExtraContent: PropTypes.node.description("Additional content to display in the tab bar.").defaultValue(void 0),
53
- carouselChevronProps: PropTypes.func.description("Function to get props for the carousel chevron buttons.").defaultValue(() => ({}))
52
+ tabBarExtraContent: PropTypes.node.description("Additional content to display in the tab bar.").defaultValue(void 0)
54
53
  };
55
54
  const DSTabsDefaultProps = {
56
55
  containerProps: {},
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { SwipeableViewsProps } from 'react-swipeable-views';\nimport type { DSButtonV2T } from '@elliemae/ds-button-v2';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\n\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES, TAB_TYPES_VALUES_AS_ARRAY } from './constants/index.js';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n export interface DefaultProps {\n tabId: string;\n applyAriaDisabled: boolean;\n }\n\n export interface OptionalProps {\n style?: Record<string, unknown>;\n title?: string;\n required?: boolean;\n disabled?: boolean;\n ref?: React.MutableRefObject<HTMLButtonElement>;\n onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n onKeyDown?: (e: React.KeyboardEvent) => null | void;\n }\n\n export interface RequiredProps {\n children: TypescriptHelpersT.ReactChildrenComplete;\n }\n\n export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n}\n\nexport declare namespace DSTabsT {\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n animated: boolean;\n enableMouseEvents: boolean;\n allowTextSelection: boolean;\n onTabChange: (tabId: string, e?: React.MouseEvent) => void;\n tabsListAriaLabel: string;\n type: DSTabsInternalsT.TabTypesT;\n children: React.ReactElement<DSTabT.Props>[] | readonly React.ReactElement<DSTabT.Props>[];\n onlyRenderActiveTab: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n isDSMobile: boolean;\n showSelectionIndicator: boolean;\n showSeparator: boolean;\n tabPanelsProps: GlobalAttributesT<HTMLDivElement>;\n swipeableViewsContainerProps: SwipeableViewsProps;\n }\n\n export interface OptionalProps {\n firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n lastTabRef?: React.MutableRefObject<HTMLElement>;\n TabBarExtraContent?: React.ComponentType;\n tabBarExtraContent?: React.ReactNode;\n activeTab?: string;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n carouselChevronProps?: ({ isLeftChevron }: { isLeftChevron: boolean }) => Partial<DSButtonV2T.Props>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps {}\n}\n\nexport const DSTabPropTypes: DSPropTypesSchema<DSTabT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n tabId: PropTypes.string.description('Unique Tab id.').defaultValue(''),\n title: PropTypes.string.description('Tab title.').defaultValue(''),\n required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n style: PropTypes.object.description('Custom styles for the tab.').defaultValue({}),\n ref: PropTypes.shape({ current: PropTypes.any }).description('Ref to the tab element.').defaultValue(undefined),\n onClick: PropTypes.func.description('Click handler for the tab.').defaultValue(undefined),\n onKeyDown: PropTypes.func.description('Keydown handler for the tab.').defaultValue(undefined),\n children: PropTypes.node.description('Content of the tab.').isRequired,\n};\n\nexport const DSTabsPropTypes: DSPropTypesSchema<DSTabsT.Props> = {\n ...getPropsPerSlotPropTypes(DSTabsName, TABS_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),\n enableMouseEvents: PropTypes.bool.description('Enables Tab transition with mouse drag events.').defaultValue(false),\n allowTextSelection: PropTypes.bool\n .description('Allows text selection when mouse drag events are active.')\n .defaultValue(false),\n onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n type: PropTypes.oneOf(TAB_TYPES_VALUES_AS_ARRAY).description('Tab type.').defaultValue(TAB_TYPES_VALUES_AS_ARRAY[0]),\n fixedTabsHeaders: PropTypes.bool.description('Fixes the tab headers.').defaultValue(false),\n isDSMobile: PropTypes.bool.description('Indicates if the component is in mobile mode.').defaultValue(false),\n showSelectionIndicator: PropTypes.bool\n .description('Shows the selection indicator for the active tab.')\n .defaultValue(true),\n showSeparator: PropTypes.bool.description('Shows a separator between tabs.').defaultValue(true),\n\n onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),\n activeTab: PropTypes.string\n .description('Passing a value makes DSTabs a controlled component.')\n .defaultValue('First DSTab children.'),\n children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n tabsListAriaLabel: PropTypes.string.description('Aria label for the list.').defaultValue('Tab list.'),\n containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n .description('Ref to the container.')\n .defaultValue(undefined),\n tabPanelsProps: PropTypes.shape(globalAttributesPropTypes)\n .description('Additional properties for the tab container.')\n .defaultValue({}),\n swipeableViewsContainerProps: PropTypes.object\n .description('Additional properties for the swipeable container.')\n .defaultValue({}),\n firstSubtabRef: PropTypes.shape({ current: PropTypes.any })\n .description('Ref to the first subtab element.')\n .defaultValue(undefined),\n lastTabRef: PropTypes.shape({ current: PropTypes.any })\n .description('Ref to the last tab element.')\n .defaultValue(undefined),\n TabBarExtraContent: PropTypes.element.description('Additional content to display in the tab bar.'),\n tabBarExtraContent: PropTypes.node\n .description('Additional content to display in the tab bar.')\n .defaultValue(undefined),\n carouselChevronProps: PropTypes.func\n .description('Function to get props for the carousel chevron buttons.')\n .defaultValue(() => ({})),\n};\n\nexport const DSTabsDefaultProps: DSTabsT.DefaultProps = {\n containerProps: {},\n animated: true,\n enableMouseEvents: false,\n allowTextSelection: false,\n onTabChange: noop,\n tabsListAriaLabel: 'Tab list',\n type: TAB_TYPES.NORMAL,\n onlyRenderActiveTab: false,\n withCarousel: false,\n isDSMobile: false,\n showSelectionIndicator: true,\n children: [],\n fixedTabsHeaders: false,\n showSeparator: true,\n tabPanelsProps: {},\n swipeableViewsContainerProps: {},\n};\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { SwipeableViewsProps } from 'react-swipeable-views';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\n\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES, TAB_TYPES_VALUES_AS_ARRAY } from './constants/index.js';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n export interface DefaultProps {\n tabId: string;\n applyAriaDisabled: boolean;\n }\n\n export interface OptionalProps {\n style?: Record<string, unknown>;\n title?: string;\n required?: boolean;\n disabled?: boolean;\n ref?: React.MutableRefObject<HTMLButtonElement>;\n onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n onKeyDown?: (e: React.KeyboardEvent) => null | void;\n }\n\n export interface RequiredProps {\n children: TypescriptHelpersT.ReactChildrenComplete;\n }\n\n export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n}\n\nexport declare namespace DSTabsT {\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n animated: boolean;\n enableMouseEvents: boolean;\n allowTextSelection: boolean;\n onTabChange: (tabId: string, e?: React.MouseEvent) => void;\n tabsListAriaLabel: string;\n type: DSTabsInternalsT.TabTypesT;\n children: React.ReactElement<DSTabT.Props>[] | readonly React.ReactElement<DSTabT.Props>[];\n onlyRenderActiveTab: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n isDSMobile: boolean;\n showSelectionIndicator: boolean;\n showSeparator: boolean;\n tabPanelsProps: GlobalAttributesT<HTMLDivElement>;\n swipeableViewsContainerProps: SwipeableViewsProps;\n }\n\n export interface OptionalProps {\n firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n lastTabRef?: React.MutableRefObject<HTMLElement>;\n TabBarExtraContent?: React.ComponentType;\n tabBarExtraContent?: React.ReactNode;\n activeTab?: string;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps {}\n}\n\nexport const DSTabPropTypes: DSPropTypesSchema<DSTabT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n tabId: PropTypes.string.description('Unique Tab id.').defaultValue(''),\n title: PropTypes.string.description('Tab title.').defaultValue(''),\n required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n style: PropTypes.object.description('Custom styles for the tab.').defaultValue({}),\n ref: PropTypes.shape({ current: PropTypes.any }).description('Ref to the tab element.').defaultValue(undefined),\n onClick: PropTypes.func.description('Click handler for the tab.').defaultValue(undefined),\n onKeyDown: PropTypes.func.description('Keydown handler for the tab.').defaultValue(undefined),\n children: PropTypes.node.description('Content of the tab.').isRequired,\n};\n\nexport const DSTabsPropTypes: DSPropTypesSchema<DSTabsT.Props> = {\n ...getPropsPerSlotPropTypes(DSTabsName, TABS_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),\n enableMouseEvents: PropTypes.bool.description('Enables Tab transition with mouse drag events.').defaultValue(false),\n allowTextSelection: PropTypes.bool\n .description('Allows text selection when mouse drag events are active.')\n .defaultValue(false),\n onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n type: PropTypes.oneOf(TAB_TYPES_VALUES_AS_ARRAY).description('Tab type.').defaultValue(TAB_TYPES_VALUES_AS_ARRAY[0]),\n fixedTabsHeaders: PropTypes.bool.description('Fixes the tab headers.').defaultValue(false),\n isDSMobile: PropTypes.bool.description('Indicates if the component is in mobile mode.').defaultValue(false),\n showSelectionIndicator: PropTypes.bool\n .description('Shows the selection indicator for the active tab.')\n .defaultValue(true),\n showSeparator: PropTypes.bool.description('Shows a separator between tabs.').defaultValue(true),\n\n onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),\n activeTab: PropTypes.string\n .description('Passing a value makes DSTabs a controlled component.')\n .defaultValue('First DSTab children.'),\n children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n tabsListAriaLabel: PropTypes.string.description('Aria label for the list.').defaultValue('Tab list.'),\n containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n .description('Ref to the container.')\n .defaultValue(undefined),\n tabPanelsProps: PropTypes.shape(globalAttributesPropTypes)\n .description('Additional properties for the tab container.')\n .defaultValue({}),\n swipeableViewsContainerProps: PropTypes.object\n .description('Additional properties for the swipeable container.')\n .defaultValue({}),\n firstSubtabRef: PropTypes.shape({ current: PropTypes.any })\n .description('Ref to the first subtab element.')\n .defaultValue(undefined),\n lastTabRef: PropTypes.shape({ current: PropTypes.any })\n .description('Ref to the last tab element.')\n .defaultValue(undefined),\n TabBarExtraContent: PropTypes.element.description('Additional content to display in the tab bar.'),\n tabBarExtraContent: PropTypes.node\n .description('Additional content to display in the tab bar.')\n .defaultValue(undefined),\n};\n\nexport const DSTabsDefaultProps: DSTabsT.DefaultProps = {\n containerProps: {},\n animated: true,\n enableMouseEvents: false,\n allowTextSelection: false,\n onTabChange: noop,\n tabsListAriaLabel: 'Tab list',\n type: TAB_TYPES.NORMAL,\n onlyRenderActiveTab: false,\n withCarousel: false,\n isDSMobile: false,\n showSelectionIndicator: true,\n children: [],\n fixedTabsHeaders: false,\n showSeparator: true,\n tabPanelsProps: {},\n swipeableViewsContainerProps: {},\n};\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -1,10 +1,11 @@
1
- import { DSButtonV2 } from '@elliemae/ds-button-v2';
1
+ /// <reference types="react" />
2
2
  import type { DSTabsInternalsT } from '../../sharedTypes.js';
3
3
  interface StyledCarouselButtonWrapperPropsT {
4
4
  right?: boolean;
5
5
  tabType: DSTabsInternalsT.TabTypesT;
6
6
  }
7
- export declare const StyledCarouselBtn: typeof DSButtonV2;
7
+ export declare const StyledCarouselBtnLeft: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>, import("@elliemae/ds-system").Theme, import("styled-components").ThemeProps<import("@xstyled/styled-components").Theme> & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>>, never>;
8
+ export declare const StyledCarouselBtnRight: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>, import("@elliemae/ds-system").Theme, import("styled-components").ThemeProps<import("@xstyled/styled-components").Theme> & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>>, never>;
8
9
  export declare const StyledCarouselWrapper: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
9
10
  export declare const StyledChildrenWrap: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
10
11
  export declare const StyledCarouselButtonWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledCarouselButtonWrapperPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
@@ -2,7 +2,6 @@
2
2
  import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
3
3
  import type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
4
4
  import type { SwipeableViewsProps } from 'react-swipeable-views';
5
- import type { DSButtonV2T } from '@elliemae/ds-button-v2';
6
5
  import type { DSTabsInternalsT } from './sharedTypes.js';
7
6
  export declare namespace DSTabT {
8
7
  interface DefaultProps {
@@ -50,9 +49,6 @@ export declare namespace DSTabsT {
50
49
  tabBarExtraContent?: React.ReactNode;
51
50
  activeTab?: string;
52
51
  innerRef?: React.MutableRefObject<HTMLDivElement>;
53
- carouselChevronProps?: ({ isLeftChevron }: {
54
- isLeftChevron: boolean;
55
- }) => Partial<DSButtonV2T.Props>;
56
52
  }
57
53
  interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>, XstyledProps {
58
54
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-tabs",
3
- "version": "3.53.0-next.11",
3
+ "version": "3.53.0-next.13",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Tabs",
6
6
  "files": [
@@ -38,18 +38,18 @@
38
38
  "dependencies": {
39
39
  "@react-hook/resize-observer": "~1.2.6",
40
40
  "react-swipeable-views": "~0.14.0",
41
- "@elliemae/ds-button-v2": "3.53.0-next.11",
42
- "@elliemae/ds-icon": "3.53.0-next.11",
43
- "@elliemae/ds-props-helpers": "3.53.0-next.11",
44
- "@elliemae/ds-icons": "3.53.0-next.11",
45
- "@elliemae/ds-system": "3.53.0-next.11",
46
- "@elliemae/ds-typescript-helpers": "3.53.0-next.11"
41
+ "@elliemae/ds-button-v2": "3.53.0-next.13",
42
+ "@elliemae/ds-icon": "3.53.0-next.13",
43
+ "@elliemae/ds-icons": "3.53.0-next.13",
44
+ "@elliemae/ds-props-helpers": "3.53.0-next.13",
45
+ "@elliemae/ds-typescript-helpers": "3.53.0-next.13",
46
+ "@elliemae/ds-system": "3.53.0-next.13"
47
47
  },
48
48
  "devDependencies": {
49
49
  "@elliemae/pui-cli": "9.0.0-next.63",
50
50
  "jest": "~29.7.0",
51
51
  "styled-components": "~5.3.9",
52
- "@elliemae/ds-monorepo-devops": "3.53.0-next.11"
52
+ "@elliemae/ds-monorepo-devops": "3.53.0-next.13"
53
53
  },
54
54
  "peerDependencies": {
55
55
  "lodash-es": "^4.17.21",