@elliemae/ds-tabs 3.12.0-rc.2 → 3.12.0-rc.4

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.
Files changed (25) hide show
  1. package/dist/cjs/DSTabs.js +2 -11
  2. package/dist/cjs/DSTabs.js.map +1 -1
  3. package/dist/cjs/exported-related/DSTab.js +1 -3
  4. package/dist/cjs/exported-related/DSTab.js.map +1 -1
  5. package/dist/cjs/parts/carousel/Carousel.js +25 -37
  6. package/dist/cjs/parts/carousel/Carousel.js.map +1 -1
  7. package/dist/cjs/parts/tabBar/TabBar.js +98 -99
  8. package/dist/cjs/parts/tabBar/TabBar.js.map +1 -1
  9. package/dist/cjs/parts/tabsContent/TabsContent.js +7 -16
  10. package/dist/cjs/parts/tabsContent/TabsContent.js.map +1 -1
  11. package/dist/cjs/parts/tabsPanel/TabsPanels.js +27 -22
  12. package/dist/cjs/parts/tabsPanel/TabsPanels.js.map +1 -1
  13. package/dist/esm/DSTabs.js +2 -11
  14. package/dist/esm/DSTabs.js.map +1 -1
  15. package/dist/esm/exported-related/DSTab.js +1 -3
  16. package/dist/esm/exported-related/DSTab.js.map +1 -1
  17. package/dist/esm/parts/carousel/Carousel.js +25 -37
  18. package/dist/esm/parts/carousel/Carousel.js.map +1 -1
  19. package/dist/esm/parts/tabBar/TabBar.js +98 -99
  20. package/dist/esm/parts/tabBar/TabBar.js.map +1 -1
  21. package/dist/esm/parts/tabsContent/TabsContent.js +7 -16
  22. package/dist/esm/parts/tabsContent/TabsContent.js.map +1 -1
  23. package/dist/esm/parts/tabsPanel/TabsPanels.js +27 -22
  24. package/dist/esm/parts/tabsPanel/TabsPanels.js.map +1 -1
  25. package/package.json +6 -6
package/dist/cjs/DSTabs.js CHANGED
@@ -43,18 +43,9 @@ const DSTabs = (props) => {
43
43
  const crossRefsCtx = (0, import_useCrossRef.useCrossRef)();
44
44
  const { type } = props;
45
45
  if (type === import_constants.TabTypes.SUBTABS) {
46
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSTabsCTX.DSTabsContext.Provider, {
47
- value: ctx,
48
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabsContent.TabsContent, {})
49
- });
46
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSTabsCTX.DSTabsContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabsContent.TabsContent, {}) });
50
47
  }
51
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSTabsCTX.DSTabsCrossRefContext.Provider, {
52
- value: crossRefsCtx,
53
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSTabsCTX.DSTabsContext.Provider, {
54
- value: ctx,
55
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabsContent.TabsContent, {})
56
- })
57
- });
48
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSTabsCTX.DSTabsCrossRefContext.Provider, { value: crossRefsCtx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSTabsCTX.DSTabsContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabsContent.TabsContent, {}) }) });
58
49
  };
59
50
  DSTabs.propTypes = import_propTypes.tabsPropTypes;
60
51
  const DSTabsWithSchema = (0, import_ds_utilities.describe)(DSTabs);
package/dist/cjs/DSTabs.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/DSTabs.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { tabsPropTypes } from './propTypes';\nimport { DSTabsContext, DSTabsCrossRefContext } from './DSTabsCTX';\nimport { TabsContent } from './parts/tabsContent/TabsContent';\nimport { useTabs } from './config/useTabs';\nimport { useCrossRef } from './config/useCrossRef';\nimport { TabTypes } from './utils/constants';\nimport type { DSTabsT } from './propTypes';\n\nconst DSTabs = (props: DSTabsT.Props): JSX.Element => {\n const ctx = useTabs(props);\n const crossRefsCtx = useCrossRef();\n\n const { type } = props;\n\n if (type === TabTypes.SUBTABS) {\n return (\n <DSTabsContext.Provider value={ctx}>\n <TabsContent />\n </DSTabsContext.Provider>\n );\n }\n\n return (\n <DSTabsCrossRefContext.Provider value={crossRefsCtx}>\n <DSTabsContext.Provider value={ctx}>\n <TabsContent />\n </DSTabsContext.Provider>\n </DSTabsCrossRefContext.Provider>\n );\n};\n\nDSTabs.propTypes = tabsPropTypes as WeakValidationMap<unknown>;\nconst DSTabsWithSchema = describe<DSTabsT.Props>(DSTabs);\nDSTabsWithSchema.propTypes = tabsPropTypes;\n\nexport { DSTabs, DSTabsWithSchema };\nexport default DSTabs;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBf;AAlBR,0BAAyB;AACzB,uBAA8B;AAC9B,uBAAqD;AACrD,yBAA4B;AAC5B,qBAAwB;AACxB,yBAA4B;AAC5B,uBAAyB;AAGzB,MAAM,SAAS,CAAC,UAAsC;AACpD,QAAM,UAAM,wBAAQ,KAAK;AACzB,QAAM,mBAAe,gCAAY;AAEjC,QAAM,EAAE,KAAK,IAAI;AAEjB,MAAI,SAAS,0BAAS,SAAS;AAC7B,WACE,4CAAC,+BAAc,UAAd;AAAA,MAAuB,OAAO;AAAA,MAC7B,sDAAC,kCAAY;AAAA,KACf;AAAA,EAEJ;AAEA,SACE,4CAAC,uCAAsB,UAAtB;AAAA,IAA+B,OAAO;AAAA,IACrC,sDAAC,+BAAc,UAAd;AAAA,MAAuB,OAAO;AAAA,MAC7B,sDAAC,kCAAY;AAAA,KACf;AAAA,GACF;AAEJ;AAEA,OAAO,YAAY;AACnB,MAAM,uBAAmB,8BAAwB,MAAM;AACvD,iBAAiB,YAAY;AAG7B,IAAO,iBAAQ;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBf;AAlBR,0BAAyB;AACzB,uBAA8B;AAC9B,uBAAqD;AACrD,yBAA4B;AAC5B,qBAAwB;AACxB,yBAA4B;AAC5B,uBAAyB;AAGzB,MAAM,SAAS,CAAC,UAAsC;AACpD,QAAM,UAAM,wBAAQ,KAAK;AACzB,QAAM,mBAAe,gCAAY;AAEjC,QAAM,EAAE,KAAK,IAAI;AAEjB,MAAI,SAAS,0BAAS,SAAS;AAC7B,WACE,4CAAC,+BAAc,UAAd,EAAuB,OAAO,KAC7B,sDAAC,kCAAY,GACf;AAAA,EAEJ;AAEA,SACE,4CAAC,uCAAsB,UAAtB,EAA+B,OAAO,cACrC,sDAAC,+BAAc,UAAd,EAAuB,OAAO,KAC7B,sDAAC,kCAAY,GACf,GACF;AAEJ;AAEA,OAAO,YAAY;AACnB,MAAM,uBAAmB,8BAAwB,MAAM;AACvD,iBAAiB,YAAY;AAG7B,IAAO,iBAAQ;",
6
6
  "names": []
7
7
  }
package/dist/cjs/exported-related/DSTab.js CHANGED
@@ -34,9 +34,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
34
34
  var import_react = __toESM(require("react"));
35
35
  var import_ds_utilities = require("@elliemae/ds-utilities");
36
36
  var import_propTypes = require("../propTypes");
37
- const DSTab = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, {
38
- ...props
39
- });
37
+ const DSTab = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, { ...props });
40
38
  DSTab.propTypes = import_propTypes.tabPropTypes;
41
39
  const DSTabWithSchema = (0, import_ds_utilities.describe)(DSTab);
42
40
  DSTabWithSchema.propTypes = import_propTypes.tabPropTypes;
package/dist/cjs/exported-related/DSTab.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../src/exported-related/DSTab.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { tabPropTypes } from '../propTypes';\nimport type { DSTabT } from '../propTypes';\n\nconst DSTab = (props: DSTabT.Props): JSX.Element => <React.Fragment {...props} />;\n\nDSTab.propTypes = tabPropTypes as WeakValidationMap<unknown>;\nconst DSTabWithSchema = describe<DSTabT.Props>(DSTab);\nDSTabWithSchema.propTypes = tabPropTypes;\n\nexport { DSTab, DSTabWithSchema };\nexport default DSTab;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADM6B;AANpD,mBAAkB;AAElB,0BAAyB;AACzB,uBAA6B;AAG7B,MAAM,QAAQ,CAAC,UAAqC,4CAAC,aAAAA,QAAM,UAAN;AAAA,EAAgB,GAAG;AAAA,CAAO;AAE/E,MAAM,YAAY;AAClB,MAAM,sBAAkB,8BAAuB,KAAK;AACpD,gBAAgB,YAAY;AAG5B,IAAO,gBAAQ;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADM6B;AANpD,mBAAkB;AAElB,0BAAyB;AACzB,uBAA6B;AAG7B,MAAM,QAAQ,CAAC,UAAqC,4CAAC,aAAAA,QAAM,UAAN,EAAgB,GAAG,OAAO;AAE/E,MAAM,YAAY;AAClB,MAAM,sBAAkB,8BAAuB,KAAK;AACpD,gBAAgB,YAAY;AAG5B,IAAO,gBAAQ;",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/parts/carousel/Carousel.js CHANGED
@@ -45,42 +45,30 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
45
45
  carouselOnlyListRef,
46
46
  props: { type }
47
47
  } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
48
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledCarouselWrapper, {
49
- children: [
50
- showChevrons.left && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCarouselButtonWrapper, {
51
- tabType: type,
52
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCarouselBtn, {
53
- size: "s",
54
- onClick: leftButtonOnClick,
55
- tabIndex: -1,
56
- "data-testid": import_DSTabsDatatestid.DSTabsDatatestid.CAROUSEL.BUTTON_LEFT,
57
- buttonType: import_ds_button.BUTTON_TYPES.ICON,
58
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronLeft, {
59
- size: import_ds_icon.DSIconSizes.S
60
- })
61
- })
62
- }),
63
- showChevrons.right && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCarouselButtonWrapper, {
64
- tabType: type,
65
- right: showChevrons.right,
66
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCarouselBtn, {
67
- size: "s",
68
- onClick: rightButtonOnClick,
69
- tabIndex: -1,
70
- "data-testid": import_DSTabsDatatestid.DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT,
71
- buttonType: import_ds_button.BUTTON_TYPES.ICON,
72
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronRight, {
73
- size: import_ds_icon.DSIconSizes.S
74
- })
75
- })
76
- }),
77
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledChildrenWrap, {
78
- ref: carouselOnlyListRef,
79
- onClick: handleOnClick,
80
- onScroll: handleOnScroll,
81
- children
82
- })
83
- ]
84
- });
48
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledCarouselWrapper, { children: [
49
+ showChevrons.left && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCarouselButtonWrapper, { tabType: type, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
50
+ import_styles.StyledCarouselBtn,
51
+ {
52
+ size: "s",
53
+ onClick: leftButtonOnClick,
54
+ tabIndex: -1,
55
+ "data-testid": import_DSTabsDatatestid.DSTabsDatatestid.CAROUSEL.BUTTON_LEFT,
56
+ buttonType: import_ds_button.BUTTON_TYPES.ICON,
57
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronLeft, { size: import_ds_icon.DSIconSizes.S })
58
+ }
59
+ ) }),
60
+ showChevrons.right && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCarouselButtonWrapper, { tabType: type, right: showChevrons.right, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
61
+ import_styles.StyledCarouselBtn,
62
+ {
63
+ size: "s",
64
+ onClick: rightButtonOnClick,
65
+ tabIndex: -1,
66
+ "data-testid": import_DSTabsDatatestid.DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT,
67
+ buttonType: import_ds_button.BUTTON_TYPES.ICON,
68
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronRight, { size: import_ds_icon.DSIconSizes.S })
69
+ }
70
+ ) }),
71
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledChildrenWrap, { ref: carouselOnlyListRef, onClick: handleOnClick, onScroll: handleOnScroll, children })
72
+ ] });
85
73
  };
86
74
  //# sourceMappingURL=Carousel.js.map
package/dist/cjs/parts/carousel/Carousel.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/carousel/Carousel.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import { useContext } from 'react';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { BUTTON_TYPES } from '@elliemae/ds-button';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } from './styles';\nimport { useCarousel } from './useCarousel';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid';\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={DSTabsDatatestid.CAROUSEL.BUTTON_LEFT}\n buttonType={BUTTON_TYPES.ICON}\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={DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT}\n buttonType={BUTTON_TYPES.ICON}\n >\n <ChevronRight size={DSIconSizes.S} />\n </StyledCarouselBtn>\n </StyledCarouselButtonWrapper>\n )}\n <StyledChildrenWrap ref={carouselOnlyListRef} onClick={handleOnClick} onScroll={handleOnScroll}>\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,uBAA6B;AAC7B,sBAA0C;AAC1C,oBAA0G;AAC1G,yBAA4B;AAC5B,uBAA8B;AAC9B,8BAAiC;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,KAAK;AAAA,EAChB,QAAI,yBAAW,8BAAa;AAE5B,SACE,6CAAC;AAAA,IACE;AAAA,mBAAa,QACZ,4CAAC;AAAA,QAA4B,SAAS;AAAA,QACpC,sDAAC;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,UAAU;AAAA,UACV,eAAa,yCAAiB,SAAS;AAAA,UACvC,YAAY,8BAAa;AAAA,UAEzB,sDAAC;AAAA,YAAY,MAAM,2BAAY;AAAA,WAAG;AAAA,SACpC;AAAA,OACF;AAAA,MAED,aAAa,SACZ,4CAAC;AAAA,QAA4B,SAAS;AAAA,QAAM,OAAO,aAAa;AAAA,QAC9D,sDAAC;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,UAAU;AAAA,UACV,eAAa,yCAAiB,SAAS;AAAA,UACvC,YAAY,8BAAa;AAAA,UAEzB,sDAAC;AAAA,YAAa,MAAM,2BAAY;AAAA,WAAG;AAAA,SACrC;AAAA,OACF;AAAA,MAEF,4CAAC;AAAA,QAAmB,KAAK;AAAA,QAAqB,SAAS;AAAA,QAAe,UAAU;AAAA,QAC7E;AAAA,OACH;AAAA;AAAA,GACF;AAEJ;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBnB;AAzBJ,mBAA2B;AAC3B,qBAA4B;AAC5B,uBAA6B;AAC7B,sBAA0C;AAC1C,oBAA0G;AAC1G,yBAA4B;AAC5B,uBAA8B;AAC9B,8BAAiC;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,KAAK;AAAA,EAChB,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,yCAAiB,SAAS;AAAA,QACvC,YAAY,8BAAa;AAAA,QAEzB,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,yCAAiB,SAAS;AAAA,QACvC,YAAY,8BAAa;AAAA,QAEzB,sDAAC,gCAAa,MAAM,2BAAY,GAAG;AAAA;AAAA,IACrC,GACF;AAAA,IAEF,4CAAC,oCAAmB,KAAK,qBAAqB,SAAS,eAAe,UAAU,gBAC7E,UACH;AAAA,KACF;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/tabBar/TabBar.js CHANGED
@@ -59,70 +59,72 @@ const TabBar = () => {
59
59
  const { tabId = "", title = "", style, required = false, disabled = false, ref, onClick, onKeyDown } = tab.props;
60
60
  if (!disabled)
61
61
  availableTabIndexes.push(index);
62
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledTabButton, {
63
- role: "tab",
64
- ref: (tabButtonRef) => {
65
- if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {
66
- tabsRefAsArray.current[index] = tabButtonRef;
67
- if (!disabled && !focusableTabsRef.current.includes(tabButtonRef))
68
- focusableTabsRef.current.push(tabButtonRef);
69
- tabsRef.current[index] = tabButtonRef;
70
- if (type === import_constants.TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {
71
- firstSubtabInternalRef.current = tabButtonRef;
62
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
63
+ import_styles.StyledTabButton,
64
+ {
65
+ role: "tab",
66
+ ref: (tabButtonRef) => {
67
+ if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {
68
+ tabsRefAsArray.current[index] = tabButtonRef;
69
+ if (!disabled && !focusableTabsRef.current.includes(tabButtonRef))
70
+ focusableTabsRef.current.push(tabButtonRef);
71
+ tabsRef.current[index] = tabButtonRef;
72
+ if (type === import_constants.TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {
73
+ firstSubtabInternalRef.current = tabButtonRef;
74
+ }
75
+ if (type !== import_constants.TabTypes.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {
76
+ lastTabInternalRef.current = tabButtonRef;
77
+ }
78
+ if (ref)
79
+ ref.current = tabButtonRef;
72
80
  }
73
- if (type !== import_constants.TabTypes.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {
74
- lastTabInternalRef.current = tabButtonRef;
81
+ },
82
+ type: "button",
83
+ "aria-controls": tabId,
84
+ "aria-selected": actualActiveTab === tabId,
85
+ "aria-disabled": disabled,
86
+ "aria-labelledby": `${tabId}-label`,
87
+ isDSMobile,
88
+ fixedTabsHeaders,
89
+ tabType: type,
90
+ title,
91
+ "data-required": required,
92
+ "data-tab-id": tabId,
93
+ "data-index": index,
94
+ withCarousel,
95
+ isActive: actualActiveTab === tabId,
96
+ disabled,
97
+ showSeparator: showSeparator && type !== import_constants.TabTypes.NORMAL,
98
+ "data-testid": type === import_constants.TabTypes.NORMAL ? import_DSTabsDatatestid.DSTabsDatatestid.TAB_BUTTON : import_DSTabsDatatestid.DSTabsDatatestid.SUBTAB_BUTTON,
99
+ id: `${tabId}-label`,
100
+ onClick: (e) => {
101
+ if (!disabled) {
102
+ handleOnTabChange(tabId, e);
103
+ updateIndicatorStyle();
75
104
  }
76
- if (ref)
77
- ref.current = tabButtonRef;
78
- }
79
- },
80
- type: "button",
81
- "aria-controls": tabId,
82
- "aria-selected": actualActiveTab === tabId,
83
- "aria-disabled": disabled,
84
- "aria-labelledby": `${tabId}-label`,
85
- isDSMobile,
86
- fixedTabsHeaders,
87
- tabType: type,
88
- title,
89
- "data-required": required,
90
- "data-tab-id": tabId,
91
- "data-index": index,
92
- withCarousel,
93
- isActive: actualActiveTab === tabId,
94
- disabled,
95
- showSeparator: showSeparator && type !== import_constants.TabTypes.NORMAL,
96
- "data-testid": type === import_constants.TabTypes.NORMAL ? import_DSTabsDatatestid.DSTabsDatatestid.TAB_BUTTON : import_DSTabsDatatestid.DSTabsDatatestid.SUBTAB_BUTTON,
97
- id: `${tabId}-label`,
98
- onClick: (e) => {
99
- if (!disabled) {
100
- handleOnTabChange(tabId, e);
101
- updateIndicatorStyle();
102
- }
103
- if (onClick && !disabled)
104
- onClick(tabId, e);
105
- },
106
- onFocus: (e) => {
107
- if (withCarousel)
108
- (0, import_helpers.centerTab)({ e, listRef: carouselOnlyListRef });
105
+ if (onClick && !disabled)
106
+ onClick(tabId, e);
107
+ },
108
+ onFocus: (e) => {
109
+ if (withCarousel)
110
+ (0, import_helpers.centerTab)({ e, listRef: carouselOnlyListRef });
111
+ },
112
+ onKeyDown: (e) => {
113
+ if (e.key === "Enter")
114
+ e.stopPropagation();
115
+ if (!disabled)
116
+ handleOnKeyDown(e);
117
+ if (onKeyDown && !disabled)
118
+ onKeyDown(e);
119
+ },
120
+ style,
121
+ children: [
122
+ title,
123
+ required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledRequiredMark, { children: "\u25CF" })
124
+ ]
109
125
  },
110
- onKeyDown: (e) => {
111
- if (e.key === "Enter")
112
- e.stopPropagation();
113
- if (!disabled)
114
- handleOnKeyDown(e);
115
- if (onKeyDown && !disabled)
116
- onKeyDown(e);
117
- },
118
- style,
119
- children: [
120
- title,
121
- required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledRequiredMark, {
122
- children: "\u25CF"
123
- })
124
- ]
125
- }, tabId);
126
+ tabId
127
+ );
126
128
  });
127
129
  }, [
128
130
  tabs,
@@ -143,46 +145,43 @@ const TabBar = () => {
143
145
  handleOnKeyDown
144
146
  ]);
145
147
  if (type === import_constants.TabTypes.SUBTABS && !isDSMobile) {
146
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSubTabsList, {
148
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
149
+ import_styles.StyledSubTabsList,
150
+ {
151
+ withCarousel,
152
+ "data-testid": import_DSTabsDatatestid.DSTabsDatatestid.SUB_TAB_LIST,
153
+ ref: tabsListRef,
154
+ role: "tablist",
155
+ children: withCarousel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Carousel.Carousel, { children: renderTabs }) : renderTabs
156
+ }
157
+ );
158
+ }
159
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
160
+ import_styles.StyledTabList,
161
+ {
147
162
  withCarousel,
148
- "data-testid": import_DSTabsDatatestid.DSTabsDatatestid.SUB_TAB_LIST,
149
163
  ref: tabsListRef,
150
164
  role: "tablist",
151
- children: withCarousel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Carousel.Carousel, {
152
- children: renderTabs
153
- }) : renderTabs
154
- });
155
- }
156
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledTabList, {
157
- withCarousel,
158
- ref: tabsListRef,
159
- role: "tablist",
160
- "data-testid": import_DSTabsDatatestid.DSTabsDatatestid.TAB_LIST,
161
- isDSMobile,
162
- fixedTabsHeaders,
163
- mobileGradients,
164
- onScroll: updateMobileGradients,
165
- indicatorStyle,
166
- tabType: type,
167
- children: [
168
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTabWrapper, {
169
- isDSMobile,
170
- fixedTabsHeaders,
171
- children: !isDSMobile && withCarousel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Carousel.Carousel, {
172
- updateIndicatorStyle,
173
- children: renderTabs
174
- }) : renderTabs
175
- }),
176
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSelectionIndicator, {
177
- isDSMobile,
178
- tabType: type
179
- }),
180
- isDSMobile && !fixedTabsHeaders && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledMobileGradient, {
181
- mobileGradients,
182
- left: tabsListRef.current?.scrollLeft,
183
- width: tabsListRef.current?.scrollWidth
184
- })
185
- ]
186
- });
165
+ "data-testid": import_DSTabsDatatestid.DSTabsDatatestid.TAB_LIST,
166
+ isDSMobile,
167
+ fixedTabsHeaders,
168
+ mobileGradients,
169
+ onScroll: updateMobileGradients,
170
+ indicatorStyle,
171
+ tabType: type,
172
+ children: [
173
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTabWrapper, { isDSMobile, fixedTabsHeaders, children: !isDSMobile && withCarousel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Carousel.Carousel, { updateIndicatorStyle, children: renderTabs }) : renderTabs }),
174
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSelectionIndicator, { isDSMobile, tabType: type }),
175
+ isDSMobile && !fixedTabsHeaders && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
176
+ import_styles.StyledMobileGradient,
177
+ {
178
+ mobileGradients,
179
+ left: tabsListRef.current?.scrollLeft,
180
+ width: tabsListRef.current?.scrollWidth
181
+ }
182
+ )
183
+ ]
184
+ }
185
+ );
187
186
  };
188
187
  //# sourceMappingURL=TabBar.js.map
package/dist/cjs/parts/tabBar/TabBar.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/tabBar/TabBar.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Carousel } from '../carousel/Carousel';\nimport { useTabBar } from './useTabBar';\nimport {\n StyledTabButton,\n StyledMobileGradient,\n StyledTabList,\n StyledTabWrapper,\n StyledSelectionIndicator,\n StyledSubTabsList,\n StyledRequiredMark,\n} from './styles';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation';\nimport { centerTab } from '../../utils/helpers';\nimport { TabTypes } from '../../utils/constants';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid';\nimport type { DSTabT } from '../../propTypes';\n\nexport const TabBar = (): JSX.Element => {\n const {\n tabsRef,\n focusableTabsRef,\n tabsListRef,\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 { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = useTabBar();\n\n const renderTabs = useMemo(() => {\n const availableTabIndexes: number[] = [];\n\n return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index) => {\n const { tabId = '', title = '', style, required = false, disabled = false, ref, onClick, onKeyDown } = tab.props;\n if (!disabled) availableTabIndexes.push(index);\n return (\n <StyledTabButton\n key={tabId}\n role=\"tab\"\n ref={(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 === TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n firstSubtabInternalRef.current = tabButtonRef;\n }\n if (type !== TabTypes.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}\n aria-disabled={disabled}\n aria-labelledby={`${tabId}-label`}\n isDSMobile={isDSMobile}\n fixedTabsHeaders={fixedTabsHeaders}\n tabType={type}\n title={title}\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 !== TabTypes.NORMAL}\n data-testid={type === TabTypes.NORMAL ? DSTabsDatatestid.TAB_BUTTON : DSTabsDatatestid.SUBTAB_BUTTON}\n id={`${tabId}-label`}\n onClick={(e) => {\n if (!disabled) {\n handleOnTabChange(tabId, e);\n updateIndicatorStyle();\n }\n if (onClick && !disabled) onClick(tabId, e);\n }}\n onFocus={(e) => {\n if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });\n }}\n onKeyDown={(e) => {\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 && <StyledRequiredMark>&#9679;</StyledRequiredMark>}\n </StyledTabButton>\n );\n });\n }, [\n tabs,\n actualActiveTab,\n isDSMobile,\n fixedTabsHeaders,\n type,\n withCarousel,\n showSeparator,\n tabsRefAsArray,\n focusableTabsRef,\n tabsRef,\n firstSubtabInternalRef,\n lastTabInternalRef,\n handleOnTabChange,\n updateIndicatorStyle,\n carouselOnlyListRef,\n handleOnKeyDown,\n ]);\n\n if (type === TabTypes.SUBTABS && !isDSMobile) {\n return (\n <StyledSubTabsList\n withCarousel={withCarousel}\n data-testid={DSTabsDatatestid.SUB_TAB_LIST}\n ref={tabsListRef}\n role=\"tablist\"\n >\n {withCarousel ? <Carousel>{renderTabs}</Carousel> : renderTabs}\n </StyledSubTabsList>\n );\n }\n\n return (\n <StyledTabList\n withCarousel={withCarousel}\n ref={tabsListRef}\n role=\"tablist\"\n data-testid={DSTabsDatatestid.TAB_LIST}\n isDSMobile={isDSMobile}\n fixedTabsHeaders={fixedTabsHeaders}\n mobileGradients={mobileGradients}\n onScroll={updateMobileGradients}\n indicatorStyle={indicatorStyle}\n tabType={type}\n >\n <StyledTabWrapper isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n {!isDSMobile && withCarousel ? (\n <Carousel updateIndicatorStyle={updateIndicatorStyle}>{renderTabs}</Carousel>\n ) : (\n renderTabs\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", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
5
+ "mappings": "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",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/parts/tabsContent/TabsContent.js CHANGED
@@ -39,21 +39,12 @@ const TabsContent = () => {
39
39
  const {
40
40
  props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent }
41
41
  } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
42
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
43
- ...containerProps,
44
- ref: innerRef,
45
- "data-testid": import_DSTabsDatatestid.DSTabsDatatestid.TABS_CONTAINER,
46
- children: [
47
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledTabBarContainer, {
48
- "aria-label": tabsListAriaLabel,
49
- role: "tablist",
50
- children: [
51
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabBar.TabBar, {}),
52
- tabBarExtraContent
53
- ]
54
- }),
55
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabsPanels.TabsPanels, {})
56
- ]
57
- });
42
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...containerProps, ref: innerRef, "data-testid": import_DSTabsDatatestid.DSTabsDatatestid.TABS_CONTAINER, children: [
43
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledTabBarContainer, { "aria-label": tabsListAriaLabel, role: "tablist", children: [
44
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabBar.TabBar, {}),
45
+ tabBarExtraContent
46
+ ] }),
47
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabsPanels.TabsPanels, {})
48
+ ] });
58
49
  };
59
50
  //# sourceMappingURL=TabsContent.js.map
package/dist/cjs/parts/tabsContent/TabsContent.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/tabsContent/TabsContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React, { useContext } from 'react';\nimport { TabsPanels } from '../tabsPanel/TabsPanels';\nimport { TabBar } from '../tabBar/TabBar';\nimport { StyledTabBarContainer } from './styles';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid';\n\nexport const TabsContent = (): JSX.Element => {\n const {\n props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent },\n } = useContext(DSTabsContext);\n\n return (\n <div {...containerProps} ref={innerRef} data-testid={DSTabsDatatestid.TABS_CONTAINER}>\n <StyledTabBarContainer aria-label={tabsListAriaLabel} role=\"tablist\">\n <TabBar />\n {tabBarExtraContent}\n </StyledTabBarContainer>\n <TabsPanels />\n </div>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcjB;AAdN,mBAAkC;AAClC,wBAA2B;AAC3B,oBAAuB;AACvB,oBAAsC;AACtC,uBAA8B;AAC9B,8BAAiC;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,mBAAmB;AAAA,EAC3E,QAAI,yBAAW,8BAAa;AAE5B,SACE,6CAAC;AAAA,IAAK,GAAG;AAAA,IAAgB,KAAK;AAAA,IAAU,eAAa,yCAAiB;AAAA,IACpE;AAAA,mDAAC;AAAA,QAAsB,cAAY;AAAA,QAAmB,MAAK;AAAA,QACzD;AAAA,sDAAC,wBAAO;AAAA,UACP;AAAA;AAAA,OACH;AAAA,MACA,4CAAC,gCAAW;AAAA;AAAA,GACd;AAEJ;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcjB;AAdN,mBAAkC;AAClC,wBAA2B;AAC3B,oBAAuB;AACvB,oBAAsC;AACtC,uBAA8B;AAC9B,8BAAiC;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,mBAAmB;AAAA,EAC3E,QAAI,yBAAW,8BAAa;AAE5B,SACE,6CAAC,SAAK,GAAG,gBAAgB,KAAK,UAAU,eAAa,yCAAiB,gBACpE;AAAA,iDAAC,uCAAsB,cAAY,mBAAmB,MAAK,WACzD;AAAA,kDAAC,wBAAO;AAAA,MACP;AAAA,OACH;AAAA,IACA,4CAAC,gCAAW;AAAA,KACd;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/tabsPanel/TabsPanels.js CHANGED
@@ -71,32 +71,37 @@ const TabsPanels = () => {
71
71
  const shouldRender = !onlyRenderActiveTab || isActive;
72
72
  if (disabled)
73
73
  return null;
74
- return shouldRender && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledPanelContainer, {
75
- id: panelId,
76
- "aria-labelledby": `${panelId}-label`,
77
- "aria-hidden": !isActive,
78
- "data-panel-id": panelId,
79
- "data-testid": "ds-tabs-tab-panel",
80
- hidden: !isActive,
81
- onMouseDown: handleOnMouseDown,
82
- role: "tabpanel",
83
- style,
84
- isDSMobile,
85
- children: content
86
- }, panelId);
74
+ return shouldRender && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
75
+ import_styles.StyledPanelContainer,
76
+ {
77
+ id: panelId,
78
+ "aria-labelledby": `${panelId}-label`,
79
+ "aria-hidden": !isActive,
80
+ "data-panel-id": panelId,
81
+ "data-testid": "ds-tabs-tab-panel",
82
+ hidden: !isActive,
83
+ onMouseDown: handleOnMouseDown,
84
+ role: "tabpanel",
85
+ style,
86
+ isDSMobile,
87
+ children: content
88
+ },
89
+ panelId
90
+ );
87
91
  }),
88
92
  [actualActiveTab, handleOnMouseDown, isDSMobile, onlyRenderActiveTab, tabs]
89
93
  );
90
94
  if (animated) {
91
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_swipeable_views.default, {
92
- enableMouseEvents,
93
- index: firstSlideToShow,
94
- onChangeIndex: handleOnChangeIndex,
95
- children: panels
96
- });
95
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
96
+ import_react_swipeable_views.default,
97
+ {
98
+ enableMouseEvents,
99
+ index: firstSlideToShow,
100
+ onChangeIndex: handleOnChangeIndex,
101
+ children: panels
102
+ }
103
+ );
97
104
  }
98
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
99
- children: panels
100
- });
105
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: panels });
101
106
  };
102
107
  //# sourceMappingURL=TabsPanels.js.map
package/dist/cjs/parts/tabsPanel/TabsPanels.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/tabsPanel/TabsPanels.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport SwipeableViews from 'react-swipeable-views';\nimport { StyledPanelContainer } from './styles';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks';\nimport type { DSTabT } from '../../propTypes';\n\nexport const TabsPanels = (): JSX.Element => {\n const {\n actualActiveTab,\n focusableTabsRef,\n props: { animated, enableMouseEvents, onlyRenderActiveTab, children: tabs, isDSMobile },\n } = useContext(DSTabsContext);\n\n const { handleOnTabChange, handleOnMouseDown } = useTabsCallbacks();\n\n const handleOnChangeIndex = useCallback(\n (index: number, indexLatest: number) => {\n if (!focusableTabsRef.current) return;\n\n const offset = index - indexLatest;\n\n if (focusableTabsRef.current) {\n const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);\n\n const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;\n\n if (\n newFocusableIndex < 0 ||\n newFocusableIndex > focusableTabsRef.current?.length ||\n !focusableTabsRef.current?.[newFocusableIndex]\n )\n return;\n handleOnTabChange(focusableTabsRef.current[newFocusableIndex].dataset?.tabId as string);\n\n // swiping does not trigger centerTab function inside handleOnTabChange because there is no event\n // by clicking we are manually forcing to center the tab\n\n focusableTabsRef.current[newFocusableIndex].click();\n }\n },\n [actualActiveTab, focusableTabsRef, handleOnTabChange],\n );\n\n const firstSlideToShow = useMemo(() => {\n const childrenArray = React.Children.toArray(tabs) as React.ReactElement<DSTabT.Props>[];\n const index = childrenArray\n .filter((tab) => tab.props.disabled !== true)\n .findIndex((tab) => tab.props.tabId === actualActiveTab);\n\n if (index === -1) return 0;\n return index;\n }, [actualActiveTab, tabs]);\n\n const panels = useMemo(\n () =>\n React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>) => {\n const { tabId: panelId = '', style, children: content, disabled } = tab.props;\n const isActive = actualActiveTab === panelId;\n const shouldRender = !onlyRenderActiveTab || isActive;\n\n if (disabled) return null;\n return (\n shouldRender && (\n <StyledPanelContainer\n key={panelId}\n id={panelId}\n aria-labelledby={`${panelId}-label`}\n aria-hidden={!isActive}\n data-panel-id={panelId}\n data-testid=\"ds-tabs-tab-panel\"\n hidden={!isActive}\n onMouseDown={handleOnMouseDown}\n role=\"tabpanel\"\n style={style}\n isDSMobile={isDSMobile}\n >\n {content}\n </StyledPanelContainer>\n )\n );\n }),\n [actualActiveTab, handleOnMouseDown, isDSMobile, onlyRenderActiveTab, tabs],\n );\n\n if (animated) {\n return (\n <SwipeableViews\n enableMouseEvents={enableMouseEvents}\n index={firstSlideToShow}\n onChangeIndex={handleOnChangeIndex}\n >\n {panels}\n </SwipeableViews>\n );\n }\n\n return <>{panels}</>;\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiEX;AAhEZ,mBAAwD;AACxD,mCAA2B;AAC3B,oBAAqC;AACrC,uBAA8B;AAC9B,8BAAiC;AAG1B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,mBAAmB,qBAAqB,UAAU,MAAM,WAAW;AAAA,EACxF,QAAI,yBAAW,8BAAa;AAE5B,QAAM,EAAE,mBAAmB,kBAAkB,QAAI,0CAAiB;AAElE,QAAM,0BAAsB;AAAA,IAC1B,CAAC,OAAe,gBAAwB;AACtC,UAAI,CAAC,iBAAiB;AAAS;AAE/B,YAAM,SAAS,QAAQ;AAEvB,UAAI,iBAAiB,SAAS;AAC5B,cAAM,wBAAwB,iBAAiB,SAAS,UAAU,CAAC,OAAO,GAAG,QAAQ,UAAU,eAAe;AAE9G,cAAM,oBAAoB,yBAAyB,IAAI,wBAAwB,SAAS;AAExF,YACE,oBAAoB,KACpB,oBAAoB,iBAAiB,SAAS,UAC9C,CAAC,iBAAiB,UAAU;AAE5B;AACF,0BAAkB,iBAAiB,QAAQ,mBAAmB,SAAS,KAAe;AAKtF,yBAAiB,QAAQ,mBAAmB,MAAM;AAAA,MACpD;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,kBAAkB,iBAAiB;AAAA,EACvD;AAEA,QAAM,uBAAmB,sBAAQ,MAAM;AACrC,UAAM,gBAAgB,aAAAA,QAAM,SAAS,QAAQ,IAAI;AACjD,UAAM,QAAQ,cACX,OAAO,CAAC,QAAQ,IAAI,MAAM,aAAa,IAAI,EAC3C,UAAU,CAAC,QAAQ,IAAI,MAAM,UAAU,eAAe;AAEzD,QAAI,UAAU;AAAI,aAAO;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,IAAI,CAAC;AAE1B,QAAM,aAAS;AAAA,IACb,MACE,aAAAA,QAAM,SAAS,IAAI,MAAM,CAAC,QAA0C;AAClE,YAAM,EAAE,OAAO,UAAU,IAAI,OAAO,UAAU,SAAS,SAAS,IAAI,IAAI;AACxE,YAAM,WAAW,oBAAoB;AACrC,YAAM,eAAe,CAAC,uBAAuB;AAE7C,UAAI;AAAU,eAAO;AACrB,aACE,gBACE,4CAAC;AAAA,QAEC,IAAI;AAAA,QACJ,mBAAiB,GAAG;AAAA,QACpB,eAAa,CAAC;AAAA,QACd,iBAAe;AAAA,QACf,eAAY;AAAA,QACZ,QAAQ,CAAC;AAAA,QACT,aAAa;AAAA,QACb,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QAEC;AAAA,SAZI,OAaP;AAAA,IAGN,CAAC;AAAA,IACH,CAAC,iBAAiB,mBAAmB,YAAY,qBAAqB,IAAI;AAAA,EAC5E;AAEA,MAAI,UAAU;AACZ,WACE,4CAAC,6BAAAC,SAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACP,eAAe;AAAA,MAEd;AAAA,KACH;AAAA,EAEJ;AAEA,SAAO;AAAA,IAAG;AAAA,GAAO;AACnB;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiEX;AAhEZ,mBAAwD;AACxD,mCAA2B;AAC3B,oBAAqC;AACrC,uBAA8B;AAC9B,8BAAiC;AAG1B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,mBAAmB,qBAAqB,UAAU,MAAM,WAAW;AAAA,EACxF,QAAI,yBAAW,8BAAa;AAE5B,QAAM,EAAE,mBAAmB,kBAAkB,QAAI,0CAAiB;AAElE,QAAM,0BAAsB;AAAA,IAC1B,CAAC,OAAe,gBAAwB;AACtC,UAAI,CAAC,iBAAiB;AAAS;AAE/B,YAAM,SAAS,QAAQ;AAEvB,UAAI,iBAAiB,SAAS;AAC5B,cAAM,wBAAwB,iBAAiB,SAAS,UAAU,CAAC,OAAO,GAAG,QAAQ,UAAU,eAAe;AAE9G,cAAM,oBAAoB,yBAAyB,IAAI,wBAAwB,SAAS;AAExF,YACE,oBAAoB,KACpB,oBAAoB,iBAAiB,SAAS,UAC9C,CAAC,iBAAiB,UAAU;AAE5B;AACF,0BAAkB,iBAAiB,QAAQ,mBAAmB,SAAS,KAAe;AAKtF,yBAAiB,QAAQ,mBAAmB,MAAM;AAAA,MACpD;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,kBAAkB,iBAAiB;AAAA,EACvD;AAEA,QAAM,uBAAmB,sBAAQ,MAAM;AACrC,UAAM,gBAAgB,aAAAA,QAAM,SAAS,QAAQ,IAAI;AACjD,UAAM,QAAQ,cACX,OAAO,CAAC,QAAQ,IAAI,MAAM,aAAa,IAAI,EAC3C,UAAU,CAAC,QAAQ,IAAI,MAAM,UAAU,eAAe;AAEzD,QAAI,UAAU;AAAI,aAAO;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,IAAI,CAAC;AAE1B,QAAM,aAAS;AAAA,IACb,MACE,aAAAA,QAAM,SAAS,IAAI,MAAM,CAAC,QAA0C;AAClE,YAAM,EAAE,OAAO,UAAU,IAAI,OAAO,UAAU,SAAS,SAAS,IAAI,IAAI;AACxE,YAAM,WAAW,oBAAoB;AACrC,YAAM,eAAe,CAAC,uBAAuB;AAE7C,UAAI;AAAU,eAAO;AACrB,aACE,gBACE;AAAA,QAAC;AAAA;AAAA,UAEC,IAAI;AAAA,UACJ,mBAAiB,GAAG;AAAA,UACpB,eAAa,CAAC;AAAA,UACd,iBAAe;AAAA,UACf,eAAY;AAAA,UACZ,QAAQ,CAAC;AAAA,UACT,aAAa;AAAA,UACb,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UAEC;AAAA;AAAA,QAZI;AAAA,MAaP;AAAA,IAGN,CAAC;AAAA,IACH,CAAC,iBAAiB,mBAAmB,YAAY,qBAAqB,IAAI;AAAA,EAC5E;AAEA,MAAI,UAAU;AACZ,WACE;AAAA,MAAC,6BAAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP,eAAe;AAAA,QAEd;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SAAO,2EAAG,kBAAO;AACnB;",
6
6
  "names": ["React", "SwipeableViews"]
7
7
  }
package/dist/esm/DSTabs.js CHANGED
@@ -12,18 +12,9 @@ const DSTabs = (props) => {
12
12
  const crossRefsCtx = useCrossRef();
13
13
  const { type } = props;
14
14
  if (type === TabTypes.SUBTABS) {
15
- return /* @__PURE__ */ jsx(DSTabsContext.Provider, {
16
- value: ctx,
17
- children: /* @__PURE__ */ jsx(TabsContent, {})
18
- });
15
+ return /* @__PURE__ */ jsx(DSTabsContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(TabsContent, {}) });
19
16
  }
20
- return /* @__PURE__ */ jsx(DSTabsCrossRefContext.Provider, {
21
- value: crossRefsCtx,
22
- children: /* @__PURE__ */ jsx(DSTabsContext.Provider, {
23
- value: ctx,
24
- children: /* @__PURE__ */ jsx(TabsContent, {})
25
- })
26
- });
17
+ return /* @__PURE__ */ jsx(DSTabsCrossRefContext.Provider, { value: crossRefsCtx, children: /* @__PURE__ */ jsx(DSTabsContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(TabsContent, {}) }) });
27
18
  };
28
19
  DSTabs.propTypes = tabsPropTypes;
29
20
  const DSTabsWithSchema = describe(DSTabs);
package/dist/esm/DSTabs.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSTabs.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { tabsPropTypes } from './propTypes';\nimport { DSTabsContext, DSTabsCrossRefContext } from './DSTabsCTX';\nimport { TabsContent } from './parts/tabsContent/TabsContent';\nimport { useTabs } from './config/useTabs';\nimport { useCrossRef } from './config/useCrossRef';\nimport { TabTypes } from './utils/constants';\nimport type { DSTabsT } from './propTypes';\n\nconst DSTabs = (props: DSTabsT.Props): JSX.Element => {\n const ctx = useTabs(props);\n const crossRefsCtx = useCrossRef();\n\n const { type } = props;\n\n if (type === TabTypes.SUBTABS) {\n return (\n <DSTabsContext.Provider value={ctx}>\n <TabsContent />\n </DSTabsContext.Provider>\n );\n }\n\n return (\n <DSTabsCrossRefContext.Provider value={crossRefsCtx}>\n <DSTabsContext.Provider value={ctx}>\n <TabsContent />\n </DSTabsContext.Provider>\n </DSTabsCrossRefContext.Provider>\n );\n};\n\nDSTabs.propTypes = tabsPropTypes as WeakValidationMap<unknown>;\nconst DSTabsWithSchema = describe<DSTabsT.Props>(DSTabs);\nDSTabsWithSchema.propTypes = tabsPropTypes;\n\nexport { DSTabs, DSTabsWithSchema };\nexport default DSTabs;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACoBf;AAlBR,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,eAAe,6BAA6B;AACrD,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AAGzB,MAAM,SAAS,CAAC,UAAsC;AACpD,QAAM,MAAM,QAAQ,KAAK;AACzB,QAAM,eAAe,YAAY;AAEjC,QAAM,EAAE,KAAK,IAAI;AAEjB,MAAI,SAAS,SAAS,SAAS;AAC7B,WACE,oBAAC,cAAc,UAAd;AAAA,MAAuB,OAAO;AAAA,MAC7B,8BAAC,eAAY;AAAA,KACf;AAAA,EAEJ;AAEA,SACE,oBAAC,sBAAsB,UAAtB;AAAA,IAA+B,OAAO;AAAA,IACrC,8BAAC,cAAc,UAAd;AAAA,MAAuB,OAAO;AAAA,MAC7B,8BAAC,eAAY;AAAA,KACf;AAAA,GACF;AAEJ;AAEA,OAAO,YAAY;AACnB,MAAM,mBAAmB,SAAwB,MAAM;AACvD,iBAAiB,YAAY;AAG7B,IAAO,iBAAQ;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACoBf;AAlBR,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,eAAe,6BAA6B;AACrD,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AAGzB,MAAM,SAAS,CAAC,UAAsC;AACpD,QAAM,MAAM,QAAQ,KAAK;AACzB,QAAM,eAAe,YAAY;AAEjC,QAAM,EAAE,KAAK,IAAI;AAEjB,MAAI,SAAS,SAAS,SAAS;AAC7B,WACE,oBAAC,cAAc,UAAd,EAAuB,OAAO,KAC7B,8BAAC,eAAY,GACf;AAAA,EAEJ;AAEA,SACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,cACrC,8BAAC,cAAc,UAAd,EAAuB,OAAO,KAC7B,8BAAC,eAAY,GACf,GACF;AAEJ;AAEA,OAAO,YAAY;AACnB,MAAM,mBAAmB,SAAwB,MAAM;AACvD,iBAAiB,YAAY;AAG7B,IAAO,iBAAQ;",
6
6
  "names": []
7
7
  }
package/dist/esm/exported-related/DSTab.js CHANGED
@@ -3,9 +3,7 @@ import { jsx } from "react/jsx-runtime";
3
3
  import React2 from "react";
4
4
  import { describe } from "@elliemae/ds-utilities";
5
5
  import { tabPropTypes } from "../propTypes";
6
- const DSTab = (props) => /* @__PURE__ */ jsx(React2.Fragment, {
7
- ...props
8
- });
6
+ const DSTab = (props) => /* @__PURE__ */ jsx(React2.Fragment, { ...props });
9
7
  DSTab.propTypes = tabPropTypes;
10
8
  const DSTabWithSchema = describe(DSTab);
11
9
  DSTabWithSchema.propTypes = tabPropTypes;
package/dist/esm/exported-related/DSTab.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/DSTab.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { tabPropTypes } from '../propTypes';\nimport type { DSTabT } from '../propTypes';\n\nconst DSTab = (props: DSTabT.Props): JSX.Element => <React.Fragment {...props} />;\n\nDSTab.propTypes = tabPropTypes as WeakValidationMap<unknown>;\nconst DSTabWithSchema = describe<DSTabT.Props>(DSTab);\nDSTabWithSchema.propTypes = tabPropTypes;\n\nexport { DSTab, DSTabWithSchema };\nexport default DSTab;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACM6B;AANpD,OAAOA,YAAW;AAElB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAG7B,MAAM,QAAQ,CAAC,UAAqC,oBAACA,OAAM,UAAN;AAAA,EAAgB,GAAG;AAAA,CAAO;AAE/E,MAAM,YAAY;AAClB,MAAM,kBAAkB,SAAuB,KAAK;AACpD,gBAAgB,YAAY;AAG5B,IAAO,gBAAQ;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACM6B;AANpD,OAAOA,YAAW;AAElB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAG7B,MAAM,QAAQ,CAAC,UAAqC,oBAACA,OAAM,UAAN,EAAgB,GAAG,OAAO;AAE/E,MAAM,YAAY;AAClB,MAAM,kBAAkB,SAAuB,KAAK;AACpD,gBAAgB,YAAY;AAG5B,IAAO,gBAAQ;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/parts/carousel/Carousel.js CHANGED
@@ -16,43 +16,31 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
16
16
  carouselOnlyListRef,
17
17
  props: { type }
18
18
  } = useContext(DSTabsContext);
19
- return /* @__PURE__ */ jsxs(StyledCarouselWrapper, {
20
- children: [
21
- showChevrons.left && /* @__PURE__ */ jsx(StyledCarouselButtonWrapper, {
22
- tabType: type,
23
- children: /* @__PURE__ */ jsx(StyledCarouselBtn, {
24
- size: "s",
25
- onClick: leftButtonOnClick,
26
- tabIndex: -1,
27
- "data-testid": DSTabsDatatestid.CAROUSEL.BUTTON_LEFT,
28
- buttonType: BUTTON_TYPES.ICON,
29
- children: /* @__PURE__ */ jsx(ChevronLeft, {
30
- size: DSIconSizes.S
31
- })
32
- })
33
- }),
34
- showChevrons.right && /* @__PURE__ */ jsx(StyledCarouselButtonWrapper, {
35
- tabType: type,
36
- right: showChevrons.right,
37
- children: /* @__PURE__ */ jsx(StyledCarouselBtn, {
38
- size: "s",
39
- onClick: rightButtonOnClick,
40
- tabIndex: -1,
41
- "data-testid": DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT,
42
- buttonType: BUTTON_TYPES.ICON,
43
- children: /* @__PURE__ */ jsx(ChevronRight, {
44
- size: DSIconSizes.S
45
- })
46
- })
47
- }),
48
- /* @__PURE__ */ jsx(StyledChildrenWrap, {
49
- ref: carouselOnlyListRef,
50
- onClick: handleOnClick,
51
- onScroll: handleOnScroll,
52
- children
53
- })
54
- ]
55
- });
19
+ return /* @__PURE__ */ jsxs(StyledCarouselWrapper, { children: [
20
+ showChevrons.left && /* @__PURE__ */ jsx(StyledCarouselButtonWrapper, { tabType: type, children: /* @__PURE__ */ jsx(
21
+ StyledCarouselBtn,
22
+ {
23
+ size: "s",
24
+ onClick: leftButtonOnClick,
25
+ tabIndex: -1,
26
+ "data-testid": DSTabsDatatestid.CAROUSEL.BUTTON_LEFT,
27
+ buttonType: BUTTON_TYPES.ICON,
28
+ children: /* @__PURE__ */ jsx(ChevronLeft, { size: DSIconSizes.S })
29
+ }
30
+ ) }),
31
+ showChevrons.right && /* @__PURE__ */ jsx(StyledCarouselButtonWrapper, { tabType: type, right: showChevrons.right, children: /* @__PURE__ */ jsx(
32
+ StyledCarouselBtn,
33
+ {
34
+ size: "s",
35
+ onClick: rightButtonOnClick,
36
+ tabIndex: -1,
37
+ "data-testid": DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT,
38
+ buttonType: BUTTON_TYPES.ICON,
39
+ children: /* @__PURE__ */ jsx(ChevronRight, { size: DSIconSizes.S })
40
+ }
41
+ ) }),
42
+ /* @__PURE__ */ jsx(StyledChildrenWrap, { ref: carouselOnlyListRef, onClick: handleOnClick, onScroll: handleOnScroll, children })
43
+ ] });
56
44
  };
57
45
  export {
58
46
  Carousel
package/dist/esm/parts/carousel/Carousel.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/Carousel.tsx"],
4
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';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } from './styles';\nimport { useCarousel } from './useCarousel';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid';\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={DSTabsDatatestid.CAROUSEL.BUTTON_LEFT}\n buttonType={BUTTON_TYPES.ICON}\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={DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT}\n buttonType={BUTTON_TYPES.ICON}\n >\n <ChevronRight size={DSIconSizes.S} />\n </StyledCarouselBtn>\n </StyledCarouselButtonWrapper>\n )}\n <StyledChildrenWrap ref={carouselOnlyListRef} onClick={handleOnClick} onScroll={handleOnScroll}>\n {children}\n </StyledChildrenWrap>\n </StyledCarouselWrapper>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACyBnB,SAUQ,KAVR;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;AAAA,IACE;AAAA,mBAAa,QACZ,oBAAC;AAAA,QAA4B,SAAS;AAAA,QACpC,8BAAC;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,UAAU;AAAA,UACV,eAAa,iBAAiB,SAAS;AAAA,UACvC,YAAY,aAAa;AAAA,UAEzB,8BAAC;AAAA,YAAY,MAAM,YAAY;AAAA,WAAG;AAAA,SACpC;AAAA,OACF;AAAA,MAED,aAAa,SACZ,oBAAC;AAAA,QAA4B,SAAS;AAAA,QAAM,OAAO,aAAa;AAAA,QAC9D,8BAAC;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,UAAU;AAAA,UACV,eAAa,iBAAiB,SAAS;AAAA,UACvC,YAAY,aAAa;AAAA,UAEzB,8BAAC;AAAA,YAAa,MAAM,YAAY;AAAA,WAAG;AAAA,SACrC;AAAA,OACF;AAAA,MAEF,oBAAC;AAAA,QAAmB,KAAK;AAAA,QAAqB,SAAS;AAAA,QAAe,UAAU;AAAA,QAC7E;AAAA,OACH;AAAA;AAAA,GACF;AAEJ;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACyBnB,SAUQ,KAVR;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,SAAS;AAAA,QACvC,YAAY,aAAa;AAAA,QAEzB,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,SAAS;AAAA,QACvC,YAAY,aAAa;AAAA,QAEzB,8BAAC,gBAAa,MAAM,YAAY,GAAG;AAAA;AAAA,IACrC,GACF;AAAA,IAEF,oBAAC,sBAAmB,KAAK,qBAAqB,SAAS,eAAe,UAAU,gBAC7E,UACH;AAAA,KACF;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/tabBar/TabBar.js CHANGED
@@ -38,70 +38,72 @@ const TabBar = () => {
38
38
  const { tabId = "", title = "", style, required = false, disabled = false, ref, onClick, onKeyDown } = tab.props;
39
39
  if (!disabled)
40
40
  availableTabIndexes.push(index);
41
- return /* @__PURE__ */ jsxs(StyledTabButton, {
42
- role: "tab",
43
- ref: (tabButtonRef) => {
44
- if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {
45
- tabsRefAsArray.current[index] = tabButtonRef;
46
- if (!disabled && !focusableTabsRef.current.includes(tabButtonRef))
47
- focusableTabsRef.current.push(tabButtonRef);
48
- tabsRef.current[index] = tabButtonRef;
49
- if (type === TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {
50
- firstSubtabInternalRef.current = tabButtonRef;
41
+ return /* @__PURE__ */ jsxs(
42
+ StyledTabButton,
43
+ {
44
+ role: "tab",
45
+ ref: (tabButtonRef) => {
46
+ if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {
47
+ tabsRefAsArray.current[index] = tabButtonRef;
48
+ if (!disabled && !focusableTabsRef.current.includes(tabButtonRef))
49
+ focusableTabsRef.current.push(tabButtonRef);
50
+ tabsRef.current[index] = tabButtonRef;
51
+ if (type === TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {
52
+ firstSubtabInternalRef.current = tabButtonRef;
53
+ }
54
+ if (type !== TabTypes.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {
55
+ lastTabInternalRef.current = tabButtonRef;
56
+ }
57
+ if (ref)
58
+ ref.current = tabButtonRef;
51
59
  }
52
- if (type !== TabTypes.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {
53
- lastTabInternalRef.current = tabButtonRef;
60
+ },
61
+ type: "button",
62
+ "aria-controls": tabId,
63
+ "aria-selected": actualActiveTab === tabId,
64
+ "aria-disabled": disabled,
65
+ "aria-labelledby": `${tabId}-label`,
66
+ isDSMobile,
67
+ fixedTabsHeaders,
68
+ tabType: type,
69
+ title,
70
+ "data-required": required,
71
+ "data-tab-id": tabId,
72
+ "data-index": index,
73
+ withCarousel,
74
+ isActive: actualActiveTab === tabId,
75
+ disabled,
76
+ showSeparator: showSeparator && type !== TabTypes.NORMAL,
77
+ "data-testid": type === TabTypes.NORMAL ? DSTabsDatatestid.TAB_BUTTON : DSTabsDatatestid.SUBTAB_BUTTON,
78
+ id: `${tabId}-label`,
79
+ onClick: (e) => {
80
+ if (!disabled) {
81
+ handleOnTabChange(tabId, e);
82
+ updateIndicatorStyle();
54
83
  }
55
- if (ref)
56
- ref.current = tabButtonRef;
57
- }
58
- },
59
- type: "button",
60
- "aria-controls": tabId,
61
- "aria-selected": actualActiveTab === tabId,
62
- "aria-disabled": disabled,
63
- "aria-labelledby": `${tabId}-label`,
64
- isDSMobile,
65
- fixedTabsHeaders,
66
- tabType: type,
67
- title,
68
- "data-required": required,
69
- "data-tab-id": tabId,
70
- "data-index": index,
71
- withCarousel,
72
- isActive: actualActiveTab === tabId,
73
- disabled,
74
- showSeparator: showSeparator && type !== TabTypes.NORMAL,
75
- "data-testid": type === TabTypes.NORMAL ? DSTabsDatatestid.TAB_BUTTON : DSTabsDatatestid.SUBTAB_BUTTON,
76
- id: `${tabId}-label`,
77
- onClick: (e) => {
78
- if (!disabled) {
79
- handleOnTabChange(tabId, e);
80
- updateIndicatorStyle();
81
- }
82
- if (onClick && !disabled)
83
- onClick(tabId, e);
84
- },
85
- onFocus: (e) => {
86
- if (withCarousel)
87
- centerTab({ e, listRef: carouselOnlyListRef });
84
+ if (onClick && !disabled)
85
+ onClick(tabId, e);
86
+ },
87
+ onFocus: (e) => {
88
+ if (withCarousel)
89
+ centerTab({ e, listRef: carouselOnlyListRef });
90
+ },
91
+ onKeyDown: (e) => {
92
+ if (e.key === "Enter")
93
+ e.stopPropagation();
94
+ if (!disabled)
95
+ handleOnKeyDown(e);
96
+ if (onKeyDown && !disabled)
97
+ onKeyDown(e);
98
+ },
99
+ style,
100
+ children: [
101
+ title,
102
+ required && /* @__PURE__ */ jsx(StyledRequiredMark, { children: "\u25CF" })
103
+ ]
88
104
  },
89
- onKeyDown: (e) => {
90
- if (e.key === "Enter")
91
- e.stopPropagation();
92
- if (!disabled)
93
- handleOnKeyDown(e);
94
- if (onKeyDown && !disabled)
95
- onKeyDown(e);
96
- },
97
- style,
98
- children: [
99
- title,
100
- required && /* @__PURE__ */ jsx(StyledRequiredMark, {
101
- children: "\u25CF"
102
- })
103
- ]
104
- }, tabId);
105
+ tabId
106
+ );
105
107
  });
106
108
  }, [
107
109
  tabs,
@@ -122,47 +124,44 @@ const TabBar = () => {
122
124
  handleOnKeyDown
123
125
  ]);
124
126
  if (type === TabTypes.SUBTABS && !isDSMobile) {
125
- return /* @__PURE__ */ jsx(StyledSubTabsList, {
127
+ return /* @__PURE__ */ jsx(
128
+ StyledSubTabsList,
129
+ {
130
+ withCarousel,
131
+ "data-testid": DSTabsDatatestid.SUB_TAB_LIST,
132
+ ref: tabsListRef,
133
+ role: "tablist",
134
+ children: withCarousel ? /* @__PURE__ */ jsx(Carousel, { children: renderTabs }) : renderTabs
135
+ }
136
+ );
137
+ }
138
+ return /* @__PURE__ */ jsxs(
139
+ StyledTabList,
140
+ {
126
141
  withCarousel,
127
- "data-testid": DSTabsDatatestid.SUB_TAB_LIST,
128
142
  ref: tabsListRef,
129
143
  role: "tablist",
130
- children: withCarousel ? /* @__PURE__ */ jsx(Carousel, {
131
- children: renderTabs
132
- }) : renderTabs
133
- });
134
- }
135
- return /* @__PURE__ */ jsxs(StyledTabList, {
136
- withCarousel,
137
- ref: tabsListRef,
138
- role: "tablist",
139
- "data-testid": DSTabsDatatestid.TAB_LIST,
140
- isDSMobile,
141
- fixedTabsHeaders,
142
- mobileGradients,
143
- onScroll: updateMobileGradients,
144
- indicatorStyle,
145
- tabType: type,
146
- children: [
147
- /* @__PURE__ */ jsx(StyledTabWrapper, {
148
- isDSMobile,
149
- fixedTabsHeaders,
150
- children: !isDSMobile && withCarousel ? /* @__PURE__ */ jsx(Carousel, {
151
- updateIndicatorStyle,
152
- children: renderTabs
153
- }) : renderTabs
154
- }),
155
- /* @__PURE__ */ jsx(StyledSelectionIndicator, {
156
- isDSMobile,
157
- tabType: type
158
- }),
159
- isDSMobile && !fixedTabsHeaders && /* @__PURE__ */ jsx(StyledMobileGradient, {
160
- mobileGradients,
161
- left: tabsListRef.current?.scrollLeft,
162
- width: tabsListRef.current?.scrollWidth
163
- })
164
- ]
165
- });
144
+ "data-testid": DSTabsDatatestid.TAB_LIST,
145
+ isDSMobile,
146
+ fixedTabsHeaders,
147
+ mobileGradients,
148
+ onScroll: updateMobileGradients,
149
+ indicatorStyle,
150
+ tabType: type,
151
+ children: [
152
+ /* @__PURE__ */ jsx(StyledTabWrapper, { isDSMobile, fixedTabsHeaders, children: !isDSMobile && withCarousel ? /* @__PURE__ */ jsx(Carousel, { updateIndicatorStyle, children: renderTabs }) : renderTabs }),
153
+ /* @__PURE__ */ jsx(StyledSelectionIndicator, { isDSMobile, tabType: type }),
154
+ isDSMobile && !fixedTabsHeaders && /* @__PURE__ */ jsx(
155
+ StyledMobileGradient,
156
+ {
157
+ mobileGradients,
158
+ left: tabsListRef.current?.scrollLeft,
159
+ width: tabsListRef.current?.scrollWidth
160
+ }
161
+ )
162
+ ]
163
+ }
164
+ );
166
165
  };
167
166
  export {
168
167
  TabBar
package/dist/esm/parts/tabBar/TabBar.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/TabBar.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Carousel } from '../carousel/Carousel';\nimport { useTabBar } from './useTabBar';\nimport {\n StyledTabButton,\n StyledMobileGradient,\n StyledTabList,\n StyledTabWrapper,\n StyledSelectionIndicator,\n StyledSubTabsList,\n StyledRequiredMark,\n} from './styles';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation';\nimport { centerTab } from '../../utils/helpers';\nimport { TabTypes } from '../../utils/constants';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid';\nimport type { DSTabT } from '../../propTypes';\n\nexport const TabBar = (): JSX.Element => {\n const {\n tabsRef,\n focusableTabsRef,\n tabsListRef,\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 { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = useTabBar();\n\n const renderTabs = useMemo(() => {\n const availableTabIndexes: number[] = [];\n\n return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index) => {\n const { tabId = '', title = '', style, required = false, disabled = false, ref, onClick, onKeyDown } = tab.props;\n if (!disabled) availableTabIndexes.push(index);\n return (\n <StyledTabButton\n key={tabId}\n role=\"tab\"\n ref={(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 === TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n firstSubtabInternalRef.current = tabButtonRef;\n }\n if (type !== TabTypes.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}\n aria-disabled={disabled}\n aria-labelledby={`${tabId}-label`}\n isDSMobile={isDSMobile}\n fixedTabsHeaders={fixedTabsHeaders}\n tabType={type}\n title={title}\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 !== TabTypes.NORMAL}\n data-testid={type === TabTypes.NORMAL ? DSTabsDatatestid.TAB_BUTTON : DSTabsDatatestid.SUBTAB_BUTTON}\n id={`${tabId}-label`}\n onClick={(e) => {\n if (!disabled) {\n handleOnTabChange(tabId, e);\n updateIndicatorStyle();\n }\n if (onClick && !disabled) onClick(tabId, e);\n }}\n onFocus={(e) => {\n if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });\n }}\n onKeyDown={(e) => {\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 && <StyledRequiredMark>&#9679;</StyledRequiredMark>}\n </StyledTabButton>\n );\n });\n }, [\n tabs,\n actualActiveTab,\n isDSMobile,\n fixedTabsHeaders,\n type,\n withCarousel,\n showSeparator,\n tabsRefAsArray,\n focusableTabsRef,\n tabsRef,\n firstSubtabInternalRef,\n lastTabInternalRef,\n handleOnTabChange,\n updateIndicatorStyle,\n carouselOnlyListRef,\n handleOnKeyDown,\n ]);\n\n if (type === TabTypes.SUBTABS && !isDSMobile) {\n return (\n <StyledSubTabsList\n withCarousel={withCarousel}\n data-testid={DSTabsDatatestid.SUB_TAB_LIST}\n ref={tabsListRef}\n role=\"tablist\"\n >\n {withCarousel ? <Carousel>{renderTabs}</Carousel> : renderTabs}\n </StyledSubTabsList>\n );\n }\n\n return (\n <StyledTabList\n withCarousel={withCarousel}\n ref={tabsListRef}\n role=\"tablist\"\n data-testid={DSTabsDatatestid.TAB_LIST}\n isDSMobile={isDSMobile}\n fixedTabsHeaders={fixedTabsHeaders}\n mobileGradients={mobileGradients}\n onScroll={updateMobileGradients}\n indicatorStyle={indicatorStyle}\n tabType={type}\n >\n <StyledTabWrapper isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n {!isDSMobile && withCarousel ? (\n <Carousel updateIndicatorStyle={updateIndicatorStyle}>{renderTabs}</Carousel>\n ) : (\n renderTabs\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"],
5
- "mappings": "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",
5
+ "mappings": "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",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/parts/tabsContent/TabsContent.js CHANGED
@@ -10,22 +10,13 @@ const TabsContent = () => {
10
10
  const {
11
11
  props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent }
12
12
  } = useContext(DSTabsContext);
13
- return /* @__PURE__ */ jsxs("div", {
14
- ...containerProps,
15
- ref: innerRef,
16
- "data-testid": DSTabsDatatestid.TABS_CONTAINER,
17
- children: [
18
- /* @__PURE__ */ jsxs(StyledTabBarContainer, {
19
- "aria-label": tabsListAriaLabel,
20
- role: "tablist",
21
- children: [
22
- /* @__PURE__ */ jsx(TabBar, {}),
23
- tabBarExtraContent
24
- ]
25
- }),
26
- /* @__PURE__ */ jsx(TabsPanels, {})
27
- ]
28
- });
13
+ return /* @__PURE__ */ jsxs("div", { ...containerProps, ref: innerRef, "data-testid": DSTabsDatatestid.TABS_CONTAINER, children: [
14
+ /* @__PURE__ */ jsxs(StyledTabBarContainer, { "aria-label": tabsListAriaLabel, role: "tablist", children: [
15
+ /* @__PURE__ */ jsx(TabBar, {}),
16
+ tabBarExtraContent
17
+ ] }),
18
+ /* @__PURE__ */ jsx(TabsPanels, {})
19
+ ] });
29
20
  };
30
21
  export {
31
22
  TabsContent
package/dist/esm/parts/tabsContent/TabsContent.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsContent/TabsContent.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { TabsPanels } from '../tabsPanel/TabsPanels';\nimport { TabBar } from '../tabBar/TabBar';\nimport { StyledTabBarContainer } from './styles';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid';\n\nexport const TabsContent = (): JSX.Element => {\n const {\n props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent },\n } = useContext(DSTabsContext);\n\n return (\n <div {...containerProps} ref={innerRef} data-testid={DSTabsDatatestid.TABS_CONTAINER}>\n <StyledTabBarContainer aria-label={tabsListAriaLabel} role=\"tablist\">\n <TabBar />\n {tabBarExtraContent}\n </StyledTabBarContainer>\n <TabsPanels />\n </div>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACcjB,SACE,KADF;AAdN,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,mBAAmB;AAAA,EAC3E,IAAI,WAAW,aAAa;AAE5B,SACE,qBAAC;AAAA,IAAK,GAAG;AAAA,IAAgB,KAAK;AAAA,IAAU,eAAa,iBAAiB;AAAA,IACpE;AAAA,2BAAC;AAAA,QAAsB,cAAY;AAAA,QAAmB,MAAK;AAAA,QACzD;AAAA,8BAAC,UAAO;AAAA,UACP;AAAA;AAAA,OACH;AAAA,MACA,oBAAC,cAAW;AAAA;AAAA,GACd;AAEJ;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACcjB,SACE,KADF;AAdN,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,mBAAmB;AAAA,EAC3E,IAAI,WAAW,aAAa;AAE5B,SACE,qBAAC,SAAK,GAAG,gBAAgB,KAAK,UAAU,eAAa,iBAAiB,gBACpE;AAAA,yBAAC,yBAAsB,cAAY,mBAAmB,MAAK,WACzD;AAAA,0BAAC,UAAO;AAAA,MACP;AAAA,OACH;AAAA,IACA,oBAAC,cAAW;AAAA,KACd;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/tabsPanel/TabsPanels.js CHANGED
@@ -42,33 +42,38 @@ const TabsPanels = () => {
42
42
  const shouldRender = !onlyRenderActiveTab || isActive;
43
43
  if (disabled)
44
44
  return null;
45
- return shouldRender && /* @__PURE__ */ jsx(StyledPanelContainer, {
46
- id: panelId,
47
- "aria-labelledby": `${panelId}-label`,
48
- "aria-hidden": !isActive,
49
- "data-panel-id": panelId,
50
- "data-testid": "ds-tabs-tab-panel",
51
- hidden: !isActive,
52
- onMouseDown: handleOnMouseDown,
53
- role: "tabpanel",
54
- style,
55
- isDSMobile,
56
- children: content
57
- }, panelId);
45
+ return shouldRender && /* @__PURE__ */ jsx(
46
+ StyledPanelContainer,
47
+ {
48
+ id: panelId,
49
+ "aria-labelledby": `${panelId}-label`,
50
+ "aria-hidden": !isActive,
51
+ "data-panel-id": panelId,
52
+ "data-testid": "ds-tabs-tab-panel",
53
+ hidden: !isActive,
54
+ onMouseDown: handleOnMouseDown,
55
+ role: "tabpanel",
56
+ style,
57
+ isDSMobile,
58
+ children: content
59
+ },
60
+ panelId
61
+ );
58
62
  }),
59
63
  [actualActiveTab, handleOnMouseDown, isDSMobile, onlyRenderActiveTab, tabs]
60
64
  );
61
65
  if (animated) {
62
- return /* @__PURE__ */ jsx(SwipeableViews, {
63
- enableMouseEvents,
64
- index: firstSlideToShow,
65
- onChangeIndex: handleOnChangeIndex,
66
- children: panels
67
- });
66
+ return /* @__PURE__ */ jsx(
67
+ SwipeableViews,
68
+ {
69
+ enableMouseEvents,
70
+ index: firstSlideToShow,
71
+ onChangeIndex: handleOnChangeIndex,
72
+ children: panels
73
+ }
74
+ );
68
75
  }
69
- return /* @__PURE__ */ jsx(Fragment, {
70
- children: panels
71
- });
76
+ return /* @__PURE__ */ jsx(Fragment, { children: panels });
72
77
  };
73
78
  export {
74
79
  TabsPanels
package/dist/esm/parts/tabsPanel/TabsPanels.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsPanel/TabsPanels.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport SwipeableViews from 'react-swipeable-views';\nimport { StyledPanelContainer } from './styles';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks';\nimport type { DSTabT } from '../../propTypes';\n\nexport const TabsPanels = (): JSX.Element => {\n const {\n actualActiveTab,\n focusableTabsRef,\n props: { animated, enableMouseEvents, onlyRenderActiveTab, children: tabs, isDSMobile },\n } = useContext(DSTabsContext);\n\n const { handleOnTabChange, handleOnMouseDown } = useTabsCallbacks();\n\n const handleOnChangeIndex = useCallback(\n (index: number, indexLatest: number) => {\n if (!focusableTabsRef.current) return;\n\n const offset = index - indexLatest;\n\n if (focusableTabsRef.current) {\n const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);\n\n const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;\n\n if (\n newFocusableIndex < 0 ||\n newFocusableIndex > focusableTabsRef.current?.length ||\n !focusableTabsRef.current?.[newFocusableIndex]\n )\n return;\n handleOnTabChange(focusableTabsRef.current[newFocusableIndex].dataset?.tabId as string);\n\n // swiping does not trigger centerTab function inside handleOnTabChange because there is no event\n // by clicking we are manually forcing to center the tab\n\n focusableTabsRef.current[newFocusableIndex].click();\n }\n },\n [actualActiveTab, focusableTabsRef, handleOnTabChange],\n );\n\n const firstSlideToShow = useMemo(() => {\n const childrenArray = React.Children.toArray(tabs) as React.ReactElement<DSTabT.Props>[];\n const index = childrenArray\n .filter((tab) => tab.props.disabled !== true)\n .findIndex((tab) => tab.props.tabId === actualActiveTab);\n\n if (index === -1) return 0;\n return index;\n }, [actualActiveTab, tabs]);\n\n const panels = useMemo(\n () =>\n React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>) => {\n const { tabId: panelId = '', style, children: content, disabled } = tab.props;\n const isActive = actualActiveTab === panelId;\n const shouldRender = !onlyRenderActiveTab || isActive;\n\n if (disabled) return null;\n return (\n shouldRender && (\n <StyledPanelContainer\n key={panelId}\n id={panelId}\n aria-labelledby={`${panelId}-label`}\n aria-hidden={!isActive}\n data-panel-id={panelId}\n data-testid=\"ds-tabs-tab-panel\"\n hidden={!isActive}\n onMouseDown={handleOnMouseDown}\n role=\"tabpanel\"\n style={style}\n isDSMobile={isDSMobile}\n >\n {content}\n </StyledPanelContainer>\n )\n );\n }),\n [actualActiveTab, handleOnMouseDown, isDSMobile, onlyRenderActiveTab, tabs],\n );\n\n if (animated) {\n return (\n <SwipeableViews\n enableMouseEvents={enableMouseEvents}\n index={firstSlideToShow}\n onChangeIndex={handleOnChangeIndex}\n >\n {panels}\n </SwipeableViews>\n );\n }\n\n return <>{panels}</>;\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACiEX,SAiCH,UAjCG;AAhEZ,OAAOA,UAAS,SAAS,YAAY,mBAAmB;AACxD,OAAO,oBAAoB;AAC3B,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAG1B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,mBAAmB,qBAAqB,UAAU,MAAM,WAAW;AAAA,EACxF,IAAI,WAAW,aAAa;AAE5B,QAAM,EAAE,mBAAmB,kBAAkB,IAAI,iBAAiB;AAElE,QAAM,sBAAsB;AAAA,IAC1B,CAAC,OAAe,gBAAwB;AACtC,UAAI,CAAC,iBAAiB;AAAS;AAE/B,YAAM,SAAS,QAAQ;AAEvB,UAAI,iBAAiB,SAAS;AAC5B,cAAM,wBAAwB,iBAAiB,SAAS,UAAU,CAAC,OAAO,GAAG,QAAQ,UAAU,eAAe;AAE9G,cAAM,oBAAoB,yBAAyB,IAAI,wBAAwB,SAAS;AAExF,YACE,oBAAoB,KACpB,oBAAoB,iBAAiB,SAAS,UAC9C,CAAC,iBAAiB,UAAU;AAE5B;AACF,0BAAkB,iBAAiB,QAAQ,mBAAmB,SAAS,KAAe;AAKtF,yBAAiB,QAAQ,mBAAmB,MAAM;AAAA,MACpD;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,kBAAkB,iBAAiB;AAAA,EACvD;AAEA,QAAM,mBAAmB,QAAQ,MAAM;AACrC,UAAM,gBAAgBA,OAAM,SAAS,QAAQ,IAAI;AACjD,UAAM,QAAQ,cACX,OAAO,CAAC,QAAQ,IAAI,MAAM,aAAa,IAAI,EAC3C,UAAU,CAAC,QAAQ,IAAI,MAAM,UAAU,eAAe;AAEzD,QAAI,UAAU;AAAI,aAAO;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,IAAI,CAAC;AAE1B,QAAM,SAAS;AAAA,IACb,MACEA,OAAM,SAAS,IAAI,MAAM,CAAC,QAA0C;AAClE,YAAM,EAAE,OAAO,UAAU,IAAI,OAAO,UAAU,SAAS,SAAS,IAAI,IAAI;AACxE,YAAM,WAAW,oBAAoB;AACrC,YAAM,eAAe,CAAC,uBAAuB;AAE7C,UAAI;AAAU,eAAO;AACrB,aACE,gBACE,oBAAC;AAAA,QAEC,IAAI;AAAA,QACJ,mBAAiB,GAAG;AAAA,QACpB,eAAa,CAAC;AAAA,QACd,iBAAe;AAAA,QACf,eAAY;AAAA,QACZ,QAAQ,CAAC;AAAA,QACT,aAAa;AAAA,QACb,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QAEC;AAAA,SAZI,OAaP;AAAA,IAGN,CAAC;AAAA,IACH,CAAC,iBAAiB,mBAAmB,YAAY,qBAAqB,IAAI;AAAA,EAC5E;AAEA,MAAI,UAAU;AACZ,WACE,oBAAC;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACP,eAAe;AAAA,MAEd;AAAA,KACH;AAAA,EAEJ;AAEA,SAAO;AAAA,IAAG;AAAA,GAAO;AACnB;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACiEX,SAiCH,UAjCG;AAhEZ,OAAOA,UAAS,SAAS,YAAY,mBAAmB;AACxD,OAAO,oBAAoB;AAC3B,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAG1B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,mBAAmB,qBAAqB,UAAU,MAAM,WAAW;AAAA,EACxF,IAAI,WAAW,aAAa;AAE5B,QAAM,EAAE,mBAAmB,kBAAkB,IAAI,iBAAiB;AAElE,QAAM,sBAAsB;AAAA,IAC1B,CAAC,OAAe,gBAAwB;AACtC,UAAI,CAAC,iBAAiB;AAAS;AAE/B,YAAM,SAAS,QAAQ;AAEvB,UAAI,iBAAiB,SAAS;AAC5B,cAAM,wBAAwB,iBAAiB,SAAS,UAAU,CAAC,OAAO,GAAG,QAAQ,UAAU,eAAe;AAE9G,cAAM,oBAAoB,yBAAyB,IAAI,wBAAwB,SAAS;AAExF,YACE,oBAAoB,KACpB,oBAAoB,iBAAiB,SAAS,UAC9C,CAAC,iBAAiB,UAAU;AAE5B;AACF,0BAAkB,iBAAiB,QAAQ,mBAAmB,SAAS,KAAe;AAKtF,yBAAiB,QAAQ,mBAAmB,MAAM;AAAA,MACpD;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,kBAAkB,iBAAiB;AAAA,EACvD;AAEA,QAAM,mBAAmB,QAAQ,MAAM;AACrC,UAAM,gBAAgBA,OAAM,SAAS,QAAQ,IAAI;AACjD,UAAM,QAAQ,cACX,OAAO,CAAC,QAAQ,IAAI,MAAM,aAAa,IAAI,EAC3C,UAAU,CAAC,QAAQ,IAAI,MAAM,UAAU,eAAe;AAEzD,QAAI,UAAU;AAAI,aAAO;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,IAAI,CAAC;AAE1B,QAAM,SAAS;AAAA,IACb,MACEA,OAAM,SAAS,IAAI,MAAM,CAAC,QAA0C;AAClE,YAAM,EAAE,OAAO,UAAU,IAAI,OAAO,UAAU,SAAS,SAAS,IAAI,IAAI;AACxE,YAAM,WAAW,oBAAoB;AACrC,YAAM,eAAe,CAAC,uBAAuB;AAE7C,UAAI;AAAU,eAAO;AACrB,aACE,gBACE;AAAA,QAAC;AAAA;AAAA,UAEC,IAAI;AAAA,UACJ,mBAAiB,GAAG;AAAA,UACpB,eAAa,CAAC;AAAA,UACd,iBAAe;AAAA,UACf,eAAY;AAAA,UACZ,QAAQ,CAAC;AAAA,UACT,aAAa;AAAA,UACb,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UAEC;AAAA;AAAA,QAZI;AAAA,MAaP;AAAA,IAGN,CAAC;AAAA,IACH,CAAC,iBAAiB,mBAAmB,YAAY,qBAAqB,IAAI;AAAA,EAC5E;AAEA,MAAI,UAAU;AACZ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP,eAAe;AAAA,QAEd;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SAAO,gCAAG,kBAAO;AACnB;",
6
6
  "names": ["React"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-tabs",
3
- "version": "3.12.0-rc.2",
3
+ "version": "3.12.0-rc.4",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Tabs",
6
6
  "files": [
@@ -131,11 +131,11 @@
131
131
  "indent": 4
132
132
  },
133
133
  "dependencies": {
134
- "@elliemae/ds-button": "3.12.0-rc.2",
135
- "@elliemae/ds-icon": "3.12.0-rc.2",
136
- "@elliemae/ds-icons": "3.12.0-rc.2",
137
- "@elliemae/ds-system": "3.12.0-rc.2",
138
- "@elliemae/ds-utilities": "3.12.0-rc.2",
134
+ "@elliemae/ds-button": "3.12.0-rc.4",
135
+ "@elliemae/ds-icon": "3.12.0-rc.4",
136
+ "@elliemae/ds-icons": "3.12.0-rc.4",
137
+ "@elliemae/ds-system": "3.12.0-rc.4",
138
+ "@elliemae/ds-utilities": "3.12.0-rc.4",
139
139
  "@react-hook/resize-observer": "~1.2.5",
140
140
  "react-swipeable-views": "~0.14.0"
141
141
  },