@elliemae/ds-tabs 3.5.0-rc.7 → 3.5.1-next.0
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.
- package/dist/cjs/DSTabs.js +12 -9
- package/dist/cjs/DSTabs.js.map +2 -2
- package/dist/cjs/exported-related/DSTab.js +2 -1
- package/dist/cjs/exported-related/DSTab.js.map +1 -1
- package/dist/cjs/parts/carousel/Carousel.js +38 -26
- package/dist/cjs/parts/carousel/Carousel.js.map +1 -1
- package/dist/cjs/parts/tabBar/TabBar.js +38 -22
- package/dist/cjs/parts/tabBar/TabBar.js.map +1 -1
- package/dist/cjs/parts/tabsContent/TabsContent.js +16 -7
- package/dist/cjs/parts/tabsContent/TabsContent.js.map +2 -2
- package/dist/cjs/parts/tabsPanel/TabsPanels.js +12 -8
- package/dist/cjs/parts/tabsPanel/TabsPanels.js.map +1 -1
- package/dist/esm/DSTabs.js +12 -9
- package/dist/esm/DSTabs.js.map +2 -2
- package/dist/esm/exported-related/DSTab.js +2 -1
- package/dist/esm/exported-related/DSTab.js.map +1 -1
- package/dist/esm/parts/carousel/Carousel.js +38 -26
- package/dist/esm/parts/carousel/Carousel.js.map +1 -1
- package/dist/esm/parts/tabBar/TabBar.js +38 -22
- package/dist/esm/parts/tabBar/TabBar.js.map +1 -1
- package/dist/esm/parts/tabsContent/TabsContent.js +16 -7
- package/dist/esm/parts/tabsContent/TabsContent.js.map +2 -2
- package/dist/esm/parts/tabsPanel/TabsPanels.js +12 -8
- package/dist/esm/parts/tabsPanel/TabsPanels.js.map +1 -1
- package/package.json +6 -6
package/dist/cjs/DSTabs.js
CHANGED
|
@@ -30,7 +30,7 @@ __export(DSTabs_exports, {
|
|
|
30
30
|
});
|
|
31
31
|
module.exports = __toCommonJS(DSTabs_exports);
|
|
32
32
|
var React = __toESM(require("react"));
|
|
33
|
-
var
|
|
33
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
34
34
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
35
35
|
var import_propTypes = require("./propTypes");
|
|
36
36
|
var import_DSTabsCTX = require("./DSTabsCTX");
|
|
@@ -43,15 +43,18 @@ 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__ */
|
|
47
|
-
value: ctx
|
|
48
|
-
|
|
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
|
+
});
|
|
49
50
|
}
|
|
50
|
-
return /* @__PURE__ */
|
|
51
|
-
value: crossRefsCtx
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
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
|
+
});
|
|
55
58
|
};
|
|
56
59
|
DSTabs.propTypes = import_propTypes.tabsPropTypes;
|
|
57
60
|
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;ADAvB
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,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;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -30,10 +30,11 @@ __export(DSTab_exports, {
|
|
|
30
30
|
});
|
|
31
31
|
module.exports = __toCommonJS(DSTab_exports);
|
|
32
32
|
var React = __toESM(require("react"));
|
|
33
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
34
|
var import_react = __toESM(require("react"));
|
|
34
35
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
35
36
|
var import_propTypes = require("../propTypes");
|
|
36
|
-
const DSTab = (props) => /* @__PURE__ */
|
|
37
|
+
const DSTab = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, {
|
|
37
38
|
...props
|
|
38
39
|
});
|
|
39
40
|
DSTab.propTypes = import_propTypes.tabPropTypes;
|
|
@@ -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;ADAvB,mBAAkB;AAElB,0BAAyB;AACzB,uBAA6B;AAG7B,MAAM,QAAQ,CAAC,UAAqC,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,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;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -28,6 +28,7 @@ __export(Carousel_exports, {
|
|
|
28
28
|
});
|
|
29
29
|
module.exports = __toCommonJS(Carousel_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
31
32
|
var import_react = require("react");
|
|
32
33
|
var import_ds_icon = require("@elliemae/ds-icon");
|
|
33
34
|
var import_ds_button = require("@elliemae/ds-button");
|
|
@@ -44,31 +45,42 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
|
|
|
44
45
|
carouselOnlyListRef,
|
|
45
46
|
props: { type }
|
|
46
47
|
} = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
|
|
47
|
-
return /* @__PURE__ */
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
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
|
+
});
|
|
73
85
|
};
|
|
74
86
|
//# sourceMappingURL=Carousel.js.map
|
|
@@ -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;ADAvB,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,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -28,6 +28,7 @@ __export(TabBar_exports, {
|
|
|
28
28
|
});
|
|
29
29
|
module.exports = __toCommonJS(TabBar_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
31
32
|
var import_react = __toESM(require("react"));
|
|
32
33
|
var import_Carousel = require("../carousel/Carousel");
|
|
33
34
|
var import_useTabBar = require("./useTabBar");
|
|
@@ -58,8 +59,7 @@ const TabBar = () => {
|
|
|
58
59
|
const { tabId = "", title = "", style, required = false, disabled = false, ref, onClick, onKeyDown } = tab.props;
|
|
59
60
|
if (!disabled)
|
|
60
61
|
availableTabIndexes.push(index);
|
|
61
|
-
return /* @__PURE__ */
|
|
62
|
-
key: tabId,
|
|
62
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledTabButton, {
|
|
63
63
|
role: "tab",
|
|
64
64
|
ref: (tabButtonRef) => {
|
|
65
65
|
if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {
|
|
@@ -115,8 +115,14 @@ const TabBar = () => {
|
|
|
115
115
|
if (onKeyDown && !disabled)
|
|
116
116
|
onKeyDown(e);
|
|
117
117
|
},
|
|
118
|
-
style
|
|
119
|
-
|
|
118
|
+
style,
|
|
119
|
+
children: [
|
|
120
|
+
title,
|
|
121
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledRequiredMark, {
|
|
122
|
+
children: "\u25CF"
|
|
123
|
+
})
|
|
124
|
+
]
|
|
125
|
+
}, tabId);
|
|
120
126
|
});
|
|
121
127
|
}, [
|
|
122
128
|
tabs,
|
|
@@ -137,14 +143,17 @@ const TabBar = () => {
|
|
|
137
143
|
handleOnKeyDown
|
|
138
144
|
]);
|
|
139
145
|
if (type === import_constants.TabTypes.SUBTABS && !isDSMobile) {
|
|
140
|
-
return /* @__PURE__ */
|
|
146
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSubTabsList, {
|
|
141
147
|
withCarousel,
|
|
142
148
|
"data-testid": import_DSTabsDatatestid.DSTabsDatatestid.SUB_TAB_LIST,
|
|
143
149
|
ref: tabsListRef,
|
|
144
|
-
role: "tablist"
|
|
145
|
-
|
|
150
|
+
role: "tablist",
|
|
151
|
+
children: withCarousel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Carousel.Carousel, {
|
|
152
|
+
children: renderTabs
|
|
153
|
+
}) : renderTabs
|
|
154
|
+
});
|
|
146
155
|
}
|
|
147
|
-
return /* @__PURE__ */
|
|
156
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledTabList, {
|
|
148
157
|
withCarousel,
|
|
149
158
|
ref: tabsListRef,
|
|
150
159
|
role: "tablist",
|
|
@@ -154,19 +163,26 @@ const TabBar = () => {
|
|
|
154
163
|
mobileGradients,
|
|
155
164
|
onScroll: updateMobileGradients,
|
|
156
165
|
indicatorStyle,
|
|
157
|
-
tabType: type
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
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
|
+
});
|
|
171
187
|
};
|
|
172
188
|
//# sourceMappingURL=TabBar.js.map
|
|
@@ -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>●</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": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -28,7 +28,8 @@ __export(TabsContent_exports, {
|
|
|
28
28
|
});
|
|
29
29
|
module.exports = __toCommonJS(TabsContent_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
|
-
var
|
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
|
+
var import_react = require("react");
|
|
32
33
|
var import_TabsPanels = require("../tabsPanel/TabsPanels");
|
|
33
34
|
var import_TabBar = require("../tabBar/TabBar");
|
|
34
35
|
var import_styles = require("./styles");
|
|
@@ -38,13 +39,21 @@ const TabsContent = () => {
|
|
|
38
39
|
const {
|
|
39
40
|
props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent }
|
|
40
41
|
} = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
|
|
41
|
-
return /* @__PURE__ */
|
|
42
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
42
43
|
...containerProps,
|
|
43
44
|
ref: innerRef,
|
|
44
|
-
"data-testid": import_DSTabsDatatestid.DSTabsDatatestid.TABS_CONTAINER
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
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
|
+
});
|
|
49
58
|
};
|
|
50
59
|
//# sourceMappingURL=TabsContent.js.map
|
|
@@ -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;ADAvB,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,
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,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;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -28,6 +28,7 @@ __export(TabsPanels_exports, {
|
|
|
28
28
|
});
|
|
29
29
|
module.exports = __toCommonJS(TabsPanels_exports);
|
|
30
30
|
var React = __toESM(require("react"));
|
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
31
32
|
var import_react = __toESM(require("react"));
|
|
32
33
|
var import_react_swipeable_views = __toESM(require("react-swipeable-views"));
|
|
33
34
|
var import_styles = require("./styles");
|
|
@@ -70,8 +71,7 @@ const TabsPanels = () => {
|
|
|
70
71
|
const shouldRender = !onlyRenderActiveTab || isActive;
|
|
71
72
|
if (disabled)
|
|
72
73
|
return null;
|
|
73
|
-
return shouldRender && /* @__PURE__ */
|
|
74
|
-
key: panelId,
|
|
74
|
+
return shouldRender && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledPanelContainer, {
|
|
75
75
|
id: panelId,
|
|
76
76
|
"aria-labelledby": `${panelId}-label`,
|
|
77
77
|
"aria-hidden": !isActive,
|
|
@@ -81,18 +81,22 @@ const TabsPanels = () => {
|
|
|
81
81
|
onMouseDown: handleOnMouseDown,
|
|
82
82
|
role: "tabpanel",
|
|
83
83
|
style,
|
|
84
|
-
isDSMobile
|
|
85
|
-
|
|
84
|
+
isDSMobile,
|
|
85
|
+
children: content
|
|
86
|
+
}, panelId);
|
|
86
87
|
}),
|
|
87
88
|
[actualActiveTab, handleOnMouseDown, isDSMobile, onlyRenderActiveTab, tabs]
|
|
88
89
|
);
|
|
89
90
|
if (animated) {
|
|
90
|
-
return /* @__PURE__ */
|
|
91
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_swipeable_views.default, {
|
|
91
92
|
enableMouseEvents,
|
|
92
93
|
index: firstSlideToShow,
|
|
93
|
-
onChangeIndex: handleOnChangeIndex
|
|
94
|
-
|
|
94
|
+
onChangeIndex: handleOnChangeIndex,
|
|
95
|
+
children: panels
|
|
96
|
+
});
|
|
95
97
|
}
|
|
96
|
-
return /* @__PURE__ */
|
|
98
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
|
|
99
|
+
children: panels
|
|
100
|
+
});
|
|
97
101
|
};
|
|
98
102
|
//# sourceMappingURL=TabsPanels.js.map
|
|
@@ -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;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,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;",
|
|
6
6
|
"names": ["React", "SwipeableViews"]
|
|
7
7
|
}
|
package/dist/esm/DSTabs.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { describe } from "@elliemae/ds-utilities";
|
|
4
4
|
import { tabsPropTypes } from "./propTypes";
|
|
5
5
|
import { DSTabsContext, DSTabsCrossRefContext } from "./DSTabsCTX";
|
|
@@ -12,15 +12,18 @@ const DSTabs = (props) => {
|
|
|
12
12
|
const crossRefsCtx = useCrossRef();
|
|
13
13
|
const { type } = props;
|
|
14
14
|
if (type === TabTypes.SUBTABS) {
|
|
15
|
-
return /* @__PURE__ */
|
|
16
|
-
value: ctx
|
|
17
|
-
|
|
15
|
+
return /* @__PURE__ */ jsx(DSTabsContext.Provider, {
|
|
16
|
+
value: ctx,
|
|
17
|
+
children: /* @__PURE__ */ jsx(TabsContent, {})
|
|
18
|
+
});
|
|
18
19
|
}
|
|
19
|
-
return /* @__PURE__ */
|
|
20
|
-
value: crossRefsCtx
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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
|
+
});
|
|
24
27
|
};
|
|
25
28
|
DSTabs.propTypes = tabsPropTypes;
|
|
26
29
|
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;ACAvB
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,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;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
3
|
import React2 from "react";
|
|
3
4
|
import { describe } from "@elliemae/ds-utilities";
|
|
4
5
|
import { tabPropTypes } from "../propTypes";
|
|
5
|
-
const DSTab = (props) => /* @__PURE__ */
|
|
6
|
+
const DSTab = (props) => /* @__PURE__ */ jsx(React2.Fragment, {
|
|
6
7
|
...props
|
|
7
8
|
});
|
|
8
9
|
DSTab.propTypes = tabPropTypes;
|
|
@@ -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;ACAvB,OAAOA,YAAW;AAElB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAG7B,MAAM,QAAQ,CAAC,UAAqC,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,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;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
3
|
import { useContext } from "react";
|
|
3
4
|
import { DSIconSizes } from "@elliemae/ds-icon";
|
|
4
5
|
import { BUTTON_TYPES } from "@elliemae/ds-button";
|
|
@@ -15,32 +16,43 @@ const Carousel = ({ children, updateIndicatorStyle }) => {
|
|
|
15
16
|
carouselOnlyListRef,
|
|
16
17
|
props: { type }
|
|
17
18
|
} = useContext(DSTabsContext);
|
|
18
|
-
return /* @__PURE__ */
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
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
|
+
});
|
|
44
56
|
};
|
|
45
57
|
export {
|
|
46
58
|
Carousel
|
|
@@ -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;ACAvB,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,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
3
|
import React2, { useMemo, useContext } from "react";
|
|
3
4
|
import { Carousel } from "../carousel/Carousel";
|
|
4
5
|
import { useTabBar } from "./useTabBar";
|
|
@@ -37,8 +38,7 @@ const TabBar = () => {
|
|
|
37
38
|
const { tabId = "", title = "", style, required = false, disabled = false, ref, onClick, onKeyDown } = tab.props;
|
|
38
39
|
if (!disabled)
|
|
39
40
|
availableTabIndexes.push(index);
|
|
40
|
-
return /* @__PURE__ */
|
|
41
|
-
key: tabId,
|
|
41
|
+
return /* @__PURE__ */ jsxs(StyledTabButton, {
|
|
42
42
|
role: "tab",
|
|
43
43
|
ref: (tabButtonRef) => {
|
|
44
44
|
if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {
|
|
@@ -94,8 +94,14 @@ const TabBar = () => {
|
|
|
94
94
|
if (onKeyDown && !disabled)
|
|
95
95
|
onKeyDown(e);
|
|
96
96
|
},
|
|
97
|
-
style
|
|
98
|
-
|
|
97
|
+
style,
|
|
98
|
+
children: [
|
|
99
|
+
title,
|
|
100
|
+
required && /* @__PURE__ */ jsx(StyledRequiredMark, {
|
|
101
|
+
children: "\u25CF"
|
|
102
|
+
})
|
|
103
|
+
]
|
|
104
|
+
}, tabId);
|
|
99
105
|
});
|
|
100
106
|
}, [
|
|
101
107
|
tabs,
|
|
@@ -116,14 +122,17 @@ const TabBar = () => {
|
|
|
116
122
|
handleOnKeyDown
|
|
117
123
|
]);
|
|
118
124
|
if (type === TabTypes.SUBTABS && !isDSMobile) {
|
|
119
|
-
return /* @__PURE__ */
|
|
125
|
+
return /* @__PURE__ */ jsx(StyledSubTabsList, {
|
|
120
126
|
withCarousel,
|
|
121
127
|
"data-testid": DSTabsDatatestid.SUB_TAB_LIST,
|
|
122
128
|
ref: tabsListRef,
|
|
123
|
-
role: "tablist"
|
|
124
|
-
|
|
129
|
+
role: "tablist",
|
|
130
|
+
children: withCarousel ? /* @__PURE__ */ jsx(Carousel, {
|
|
131
|
+
children: renderTabs
|
|
132
|
+
}) : renderTabs
|
|
133
|
+
});
|
|
125
134
|
}
|
|
126
|
-
return /* @__PURE__ */
|
|
135
|
+
return /* @__PURE__ */ jsxs(StyledTabList, {
|
|
127
136
|
withCarousel,
|
|
128
137
|
ref: tabsListRef,
|
|
129
138
|
role: "tablist",
|
|
@@ -133,20 +142,27 @@ const TabBar = () => {
|
|
|
133
142
|
mobileGradients,
|
|
134
143
|
onScroll: updateMobileGradients,
|
|
135
144
|
indicatorStyle,
|
|
136
|
-
tabType: type
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
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
|
+
});
|
|
150
166
|
};
|
|
151
167
|
export {
|
|
152
168
|
TabBar
|
|
@@ -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>●</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": "AAAA,YAAY,WAAW;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useContext } from "react";
|
|
3
4
|
import { TabsPanels } from "../tabsPanel/TabsPanels";
|
|
4
5
|
import { TabBar } from "../tabBar/TabBar";
|
|
5
6
|
import { StyledTabBarContainer } from "./styles";
|
|
@@ -9,14 +10,22 @@ const TabsContent = () => {
|
|
|
9
10
|
const {
|
|
10
11
|
props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent }
|
|
11
12
|
} = useContext(DSTabsContext);
|
|
12
|
-
return /* @__PURE__ */
|
|
13
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
13
14
|
...containerProps,
|
|
14
15
|
ref: innerRef,
|
|
15
|
-
"data-testid": DSTabsDatatestid.TABS_CONTAINER
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
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
|
+
});
|
|
20
29
|
};
|
|
21
30
|
export {
|
|
22
31
|
TabsContent
|
|
@@ -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;ACAvB,
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,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;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { Fragment, jsx } from "react/jsx-runtime";
|
|
2
3
|
import React2, { useMemo, useContext, useCallback } from "react";
|
|
3
4
|
import SwipeableViews from "react-swipeable-views";
|
|
4
5
|
import { StyledPanelContainer } from "./styles";
|
|
@@ -41,8 +42,7 @@ const TabsPanels = () => {
|
|
|
41
42
|
const shouldRender = !onlyRenderActiveTab || isActive;
|
|
42
43
|
if (disabled)
|
|
43
44
|
return null;
|
|
44
|
-
return shouldRender && /* @__PURE__ */
|
|
45
|
-
key: panelId,
|
|
45
|
+
return shouldRender && /* @__PURE__ */ jsx(StyledPanelContainer, {
|
|
46
46
|
id: panelId,
|
|
47
47
|
"aria-labelledby": `${panelId}-label`,
|
|
48
48
|
"aria-hidden": !isActive,
|
|
@@ -52,19 +52,23 @@ const TabsPanels = () => {
|
|
|
52
52
|
onMouseDown: handleOnMouseDown,
|
|
53
53
|
role: "tabpanel",
|
|
54
54
|
style,
|
|
55
|
-
isDSMobile
|
|
56
|
-
|
|
55
|
+
isDSMobile,
|
|
56
|
+
children: content
|
|
57
|
+
}, panelId);
|
|
57
58
|
}),
|
|
58
59
|
[actualActiveTab, handleOnMouseDown, isDSMobile, onlyRenderActiveTab, tabs]
|
|
59
60
|
);
|
|
60
61
|
if (animated) {
|
|
61
|
-
return /* @__PURE__ */
|
|
62
|
+
return /* @__PURE__ */ jsx(SwipeableViews, {
|
|
62
63
|
enableMouseEvents,
|
|
63
64
|
index: firstSlideToShow,
|
|
64
|
-
onChangeIndex: handleOnChangeIndex
|
|
65
|
-
|
|
65
|
+
onChangeIndex: handleOnChangeIndex,
|
|
66
|
+
children: panels
|
|
67
|
+
});
|
|
66
68
|
}
|
|
67
|
-
return /* @__PURE__ */
|
|
69
|
+
return /* @__PURE__ */ jsx(Fragment, {
|
|
70
|
+
children: panels
|
|
71
|
+
});
|
|
68
72
|
};
|
|
69
73
|
export {
|
|
70
74
|
TabsPanels
|
|
@@ -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;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,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;",
|
|
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.5.
|
|
3
|
+
"version": "3.5.1-next.0",
|
|
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.5.
|
|
135
|
-
"@elliemae/ds-icon": "3.5.
|
|
136
|
-
"@elliemae/ds-icons": "3.5.
|
|
137
|
-
"@elliemae/ds-system": "3.5.
|
|
138
|
-
"@elliemae/ds-utilities": "3.5.
|
|
134
|
+
"@elliemae/ds-button": "3.5.1-next.0",
|
|
135
|
+
"@elliemae/ds-icon": "3.5.1-next.0",
|
|
136
|
+
"@elliemae/ds-icons": "3.5.1-next.0",
|
|
137
|
+
"@elliemae/ds-system": "3.5.1-next.0",
|
|
138
|
+
"@elliemae/ds-utilities": "3.5.1-next.0",
|
|
139
139
|
"@react-hook/resize-observer": "~1.2.5",
|
|
140
140
|
"react-swipeable-views": "~0.14.0"
|
|
141
141
|
},
|