@elliemae/ds-tabs 2.2.0-alpha.2 → 2.2.0-beta.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/cjs/DSTabs.js +40 -58
- package/cjs/DSTabsCTX.js +25 -51
- package/cjs/DSTabsDatatestid.js +14 -42
- package/cjs/DSTabsTypes.js +2 -27
- package/cjs/config/useCrossRef.js +11 -38
- package/cjs/config/useTabs.js +36 -53
- package/cjs/defaultProps.js +13 -39
- package/cjs/exportsRelated/DSTab.js +32 -46
- package/cjs/index.js +17 -38
- package/cjs/parts/carousel/Carousel.js +53 -61
- package/cjs/parts/carousel/styles.js +63 -77
- package/cjs/parts/carousel/useCarousel.js +49 -51
- package/cjs/parts/carousel/useCarouselCallbacks.js +36 -53
- package/cjs/parts/tabBar/TabBar.js +120 -124
- package/cjs/parts/tabBar/styles.js +195 -289
- package/cjs/parts/tabBar/useTabBar.js +55 -67
- package/cjs/parts/tabsContent/TabsContent.js +45 -49
- package/cjs/parts/tabsContent/styles.js +15 -39
- package/cjs/parts/tabsPanel/TabsPanels.js +58 -60
- package/cjs/parts/tabsPanel/styles.js +23 -43
- package/cjs/propTypes.js +29 -54
- package/cjs/utils/constants.js +16 -44
- package/cjs/utils/helpers.js +22 -46
- package/cjs/utils/hooks/useKeyboardNavigation.js +43 -59
- package/cjs/utils/hooks/useTabsCallbacks.js +33 -49
- package/esm/DSTabs.js +25 -24
- package/esm/DSTabsCTX.js +20 -22
- package/esm/DSTabsDatatestid.js +10 -13
- package/esm/DSTabsTypes.js +1 -2
- package/esm/config/useCrossRef.js +4 -6
- package/esm/config/useTabs.js +22 -14
- package/esm/defaultProps.js +8 -9
- package/esm/exportsRelated/DSTab.js +19 -15
- package/esm/index.js +4 -9
- package/esm/parts/carousel/Carousel.js +38 -25
- package/esm/parts/carousel/styles.js +52 -48
- package/esm/parts/carousel/useCarousel.js +34 -15
- package/esm/parts/carousel/useCarouselCallbacks.js +28 -20
- package/esm/parts/tabBar/TabBar.js +102 -93
- package/esm/parts/tabBar/styles.js +183 -262
- package/esm/parts/tabBar/useTabBar.js +36 -27
- package/esm/parts/tabsContent/TabsContent.js +35 -19
- package/esm/parts/tabsContent/styles.js +7 -10
- package/esm/parts/tabsPanel/TabsPanels.js +45 -28
- package/esm/parts/tabsPanel/styles.js +15 -14
- package/esm/propTypes.js +24 -25
- package/esm/utils/constants.js +8 -15
- package/esm/utils/helpers.js +11 -16
- package/esm/utils/hooks/useKeyboardNavigation.js +39 -30
- package/esm/utils/hooks/useTabsCallbacks.js +27 -18
- package/package.json +6 -6
- package/types/DSTabs.d.ts +2 -2
- package/cjs/DSTabs.js.map +0 -7
- package/cjs/DSTabsCTX.js.map +0 -7
- package/cjs/DSTabsDatatestid.js.map +0 -7
- package/cjs/DSTabsTypes.js.map +0 -7
- package/cjs/config/useCrossRef.js.map +0 -7
- package/cjs/config/useTabs.js.map +0 -7
- package/cjs/defaultProps.js.map +0 -7
- package/cjs/exportsRelated/DSTab.js.map +0 -7
- package/cjs/index.js.map +0 -7
- package/cjs/parts/carousel/Carousel.js.map +0 -7
- package/cjs/parts/carousel/styles.js.map +0 -7
- package/cjs/parts/carousel/useCarousel.js.map +0 -7
- package/cjs/parts/carousel/useCarouselCallbacks.js.map +0 -7
- package/cjs/parts/tabBar/TabBar.js.map +0 -7
- package/cjs/parts/tabBar/styles.js.map +0 -7
- package/cjs/parts/tabBar/useTabBar.js.map +0 -7
- package/cjs/parts/tabsContent/TabsContent.js.map +0 -7
- package/cjs/parts/tabsContent/styles.js.map +0 -7
- package/cjs/parts/tabsPanel/TabsPanels.js.map +0 -7
- package/cjs/parts/tabsPanel/styles.js.map +0 -7
- package/cjs/propTypes.js.map +0 -7
- package/cjs/utils/constants.js.map +0 -7
- package/cjs/utils/helpers.js.map +0 -7
- package/cjs/utils/hooks/useKeyboardNavigation.js.map +0 -7
- package/cjs/utils/hooks/useTabsCallbacks.js.map +0 -7
- package/esm/DSTabs.js.map +0 -7
- package/esm/DSTabsCTX.js.map +0 -7
- package/esm/DSTabsDatatestid.js.map +0 -7
- package/esm/DSTabsTypes.js.map +0 -7
- package/esm/config/useCrossRef.js.map +0 -7
- package/esm/config/useTabs.js.map +0 -7
- package/esm/defaultProps.js.map +0 -7
- package/esm/exportsRelated/DSTab.js.map +0 -7
- package/esm/index.js.map +0 -7
- package/esm/parts/carousel/Carousel.js.map +0 -7
- package/esm/parts/carousel/styles.js.map +0 -7
- package/esm/parts/carousel/useCarousel.js.map +0 -7
- package/esm/parts/carousel/useCarouselCallbacks.js.map +0 -7
- package/esm/parts/tabBar/TabBar.js.map +0 -7
- package/esm/parts/tabBar/styles.js.map +0 -7
- package/esm/parts/tabBar/useTabBar.js.map +0 -7
- package/esm/parts/tabsContent/TabsContent.js.map +0 -7
- package/esm/parts/tabsContent/styles.js.map +0 -7
- package/esm/parts/tabsPanel/TabsPanels.js.map +0 -7
- package/esm/parts/tabsPanel/styles.js.map +0 -7
- package/esm/propTypes.js.map +0 -7
- package/esm/utils/constants.js.map +0 -7
- package/esm/utils/helpers.js.map +0 -7
- package/esm/utils/hooks/useKeyboardNavigation.js.map +0 -7
- package/esm/utils/hooks/useTabsCallbacks.js.map +0 -7
package/cjs/index.js
CHANGED
|
@@ -1,38 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (module2, isNodeMode) => {
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var src_exports = {};
|
|
29
|
-
__export(src_exports, {
|
|
30
|
-
TabTypes: () => import_constants.TabTypes
|
|
31
|
-
});
|
|
32
|
-
var React = __toESM(require("react"));
|
|
33
|
-
__reExport(src_exports, __toESM(require("./exportsRelated/DSTab")));
|
|
34
|
-
__reExport(src_exports, __toESM(require("./DSTabs")));
|
|
35
|
-
var import_constants = __toESM(require("./utils/constants"));
|
|
36
|
-
__reExport(src_exports, __toESM(require("./DSTabsDatatestid")));
|
|
37
|
-
module.exports = __toCommonJS(src_exports);
|
|
38
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var DSTab = require('./exportsRelated/DSTab.js');
|
|
6
|
+
var DSTabs = require('./DSTabs.js');
|
|
7
|
+
var constants = require('./utils/constants.js');
|
|
8
|
+
var DSTabsDatatestid = require('./DSTabsDatatestid.js');
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
exports.DSTab = DSTab.DSTab;
|
|
13
|
+
exports.DSTabWithSchema = DSTab.DSTabWithSchema;
|
|
14
|
+
exports.DSTabs = DSTabs.DSTabs;
|
|
15
|
+
exports.DSTabsWithSchema = DSTabs.DSTabsWithSchema;
|
|
16
|
+
exports.TabTypes = constants.TabTypes;
|
|
17
|
+
exports.DSTabsDatatestid = DSTabsDatatestid.DSTabsDatatestid;
|
|
@@ -1,77 +1,69 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}
|
|
32
|
-
var React = __toESM(require("react"));
|
|
33
|
-
var import_react = __toESM(require("react"));
|
|
34
|
-
var import_ds_icon = __toESM(require("@elliemae/ds-icon"));
|
|
35
|
-
var import_ds_button = __toESM(require("@elliemae/ds-button"));
|
|
36
|
-
var import_ds_icons = __toESM(require("@elliemae/ds-icons"));
|
|
37
|
-
var import_styles = __toESM(require("./styles"));
|
|
38
|
-
var import_useCarousel = __toESM(require("./useCarousel"));
|
|
39
|
-
var import_DSTabsCTX = __toESM(require("../../DSTabsCTX"));
|
|
40
|
-
var import_DSTabsDatatestid = __toESM(require("../../DSTabsDatatestid"));
|
|
41
|
-
const Carousel = ({ children, updateIndicatorStyle }) => {
|
|
42
|
-
const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = (0, import_useCarousel.useCarousel)({
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var dsIcon = require('@elliemae/ds-icon');
|
|
8
|
+
var dsButton = require('@elliemae/ds-button');
|
|
9
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
10
|
+
var styles = require('./styles.js');
|
|
11
|
+
var useCarousel = require('./useCarousel.js');
|
|
12
|
+
var DSTabsCTX = require('../../DSTabsCTX.js');
|
|
13
|
+
var DSTabsDatatestid = require('../../DSTabsDatatestid.js');
|
|
14
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
15
|
+
|
|
16
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
17
|
+
|
|
18
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
19
|
+
|
|
20
|
+
const Carousel = _ref => {
|
|
21
|
+
let {
|
|
22
|
+
children,
|
|
23
|
+
updateIndicatorStyle
|
|
24
|
+
} = _ref;
|
|
25
|
+
const {
|
|
26
|
+
showChevrons,
|
|
27
|
+
leftButtonOnClick,
|
|
28
|
+
rightButtonOnClick,
|
|
29
|
+
handleOnClick,
|
|
30
|
+
handleOnScroll
|
|
31
|
+
} = useCarousel.useCarousel({
|
|
43
32
|
updateIndicatorStyle
|
|
44
33
|
});
|
|
45
34
|
const {
|
|
46
35
|
carouselOnlyListRef,
|
|
47
|
-
props: {
|
|
48
|
-
|
|
49
|
-
|
|
36
|
+
props: {
|
|
37
|
+
type
|
|
38
|
+
}
|
|
39
|
+
} = React.useContext(DSTabsCTX.DSTabsContext);
|
|
40
|
+
return /*#__PURE__*/_jsx__default["default"](styles.StyledCarouselWrapper, {}, void 0, showChevrons.left && /*#__PURE__*/_jsx__default["default"](styles.StyledCarouselButtonWrapper, {
|
|
50
41
|
tabType: type
|
|
51
|
-
},
|
|
42
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledCarouselBtn, {
|
|
52
43
|
size: "s",
|
|
53
44
|
onClick: leftButtonOnClick,
|
|
54
45
|
tabIndex: -1,
|
|
55
|
-
"data-testid":
|
|
56
|
-
buttonType:
|
|
57
|
-
},
|
|
58
|
-
size:
|
|
59
|
-
}))), showChevrons.right &&
|
|
46
|
+
"data-testid": DSTabsDatatestid.DSTabsDatatestid.CAROUSEL.BUTTON_LEFT,
|
|
47
|
+
buttonType: dsButton.BUTTON_TYPES.ICON
|
|
48
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronLeft, {
|
|
49
|
+
size: dsIcon.DSIconSizes.S
|
|
50
|
+
}))), showChevrons.right && /*#__PURE__*/_jsx__default["default"](styles.StyledCarouselButtonWrapper, {
|
|
60
51
|
tabType: type,
|
|
61
52
|
right: showChevrons.right
|
|
62
|
-
},
|
|
53
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledCarouselBtn, {
|
|
63
54
|
size: "s",
|
|
64
55
|
onClick: rightButtonOnClick,
|
|
65
56
|
tabIndex: -1,
|
|
66
|
-
"data-testid":
|
|
67
|
-
buttonType:
|
|
68
|
-
},
|
|
69
|
-
size:
|
|
70
|
-
}))),
|
|
57
|
+
"data-testid": DSTabsDatatestid.DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT,
|
|
58
|
+
buttonType: dsButton.BUTTON_TYPES.ICON
|
|
59
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronRight, {
|
|
60
|
+
size: dsIcon.DSIconSizes.S
|
|
61
|
+
}))), /*#__PURE__*/jsxRuntime.jsx(styles.StyledChildrenWrap, {
|
|
71
62
|
ref: carouselOnlyListRef,
|
|
72
63
|
onClick: handleOnClick,
|
|
73
|
-
onScroll: handleOnScroll
|
|
74
|
-
|
|
64
|
+
onScroll: handleOnScroll,
|
|
65
|
+
children: children
|
|
66
|
+
}));
|
|
75
67
|
};
|
|
76
|
-
|
|
77
|
-
|
|
68
|
+
|
|
69
|
+
exports.Carousel = Carousel;
|
|
@@ -1,79 +1,65 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
-
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(module2))
|
|
15
|
-
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (module2, isNodeMode) => {
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var styles_exports = {};
|
|
29
|
-
__export(styles_exports, {
|
|
30
|
-
StyledCarouselBtn: () => StyledCarouselBtn,
|
|
31
|
-
StyledCarouselButtonWrapper: () => StyledCarouselButtonWrapper,
|
|
32
|
-
StyledCarouselWrapper: () => StyledCarouselWrapper,
|
|
33
|
-
StyledChildrenWrap: () => StyledChildrenWrap
|
|
34
|
-
});
|
|
35
|
-
var React = __toESM(require("react"));
|
|
36
|
-
var import_styled_components = __toESM(require("styled-components"));
|
|
37
|
-
var import_ds_button = __toESM(require("@elliemae/ds-button"));
|
|
38
|
-
var import_constants = __toESM(require("../../utils/constants"));
|
|
39
|
-
const StyledCarouselBtn = (0, import_styled_components.default)(import_ds_button.DSButtonV2)`
|
|
40
|
-
margin: 0;
|
|
41
|
-
min-width: ${({ theme }) => theme.space.xs};
|
|
42
|
-
width: ${({ theme }) => theme.space.xs};
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var styled = require('styled-components');
|
|
6
|
+
var dsButton = require('@elliemae/ds-button');
|
|
7
|
+
var constants = require('../../utils/constants.js');
|
|
8
|
+
|
|
9
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
43
10
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
11
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
12
|
+
|
|
13
|
+
const StyledCarouselBtn = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
|
|
14
|
+
componentId: "sc-prv5a7-0"
|
|
15
|
+
})(["margin:0;min-width:", ";width:", ";&:hover:not(:disabled){background-color:transparent;}background-color:transparent;border-radius:0px;& .em-ds-icon svg{fill:", ";}"], _ref => {
|
|
16
|
+
let {
|
|
17
|
+
theme
|
|
18
|
+
} = _ref;
|
|
19
|
+
return theme.space.xs;
|
|
20
|
+
}, _ref2 => {
|
|
21
|
+
let {
|
|
22
|
+
theme
|
|
23
|
+
} = _ref2;
|
|
24
|
+
return theme.space.xs;
|
|
25
|
+
}, _ref3 => {
|
|
26
|
+
let {
|
|
27
|
+
theme
|
|
28
|
+
} = _ref3;
|
|
29
|
+
return theme.colors.brand[600];
|
|
30
|
+
});
|
|
31
|
+
const StyledCarouselWrapper = /*#__PURE__*/styled__default["default"].span.withConfig({
|
|
32
|
+
componentId: "sc-prv5a7-1"
|
|
33
|
+
})(["position:relative;width:100%;display:flex;"]);
|
|
34
|
+
const StyledChildrenWrap = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
35
|
+
componentId: "sc-prv5a7-2"
|
|
36
|
+
})(["display:flex;flex-wrap:nowrap;flex:1;overflow-x:hidden;"]);
|
|
37
|
+
const StyledCarouselButtonWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
38
|
+
componentId: "sc-prv5a7-3"
|
|
39
|
+
})(["max-width:16px;position:absolute;z-index:200;", " width:16px;height:", ";padding-top:", ";background:white;", ";"], _ref4 => {
|
|
40
|
+
let {
|
|
41
|
+
right
|
|
42
|
+
} = _ref4;
|
|
43
|
+
return right ? 'right: 0;' : "left: 0;";
|
|
44
|
+
}, _ref5 => {
|
|
45
|
+
let {
|
|
46
|
+
tabType
|
|
47
|
+
} = _ref5;
|
|
48
|
+
return tabType === constants.TabTypes.NORMAL ? '32px' : '22px';
|
|
49
|
+
}, _ref6 => {
|
|
50
|
+
let {
|
|
51
|
+
tabType
|
|
52
|
+
} = _ref6;
|
|
53
|
+
return tabType === constants.TabTypes.NORMAL ? '5px' : '0px';
|
|
54
|
+
}, _ref7 => {
|
|
55
|
+
let {
|
|
56
|
+
theme,
|
|
57
|
+
tabType
|
|
58
|
+
} = _ref7;
|
|
59
|
+
return tabType === constants.TabTypes.NORMAL ? "\n background: linear-gradient(to bottom, white 0px, white 30px, ".concat(theme.colors.neutral[400], " 30px, ").concat(theme.colors.neutral[400], " 31px, white 31px , white 32px );\n ") : "";
|
|
60
|
+
});
|
|
49
61
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
const StyledCarouselWrapper = import_styled_components.default.span`
|
|
55
|
-
position: relative;
|
|
56
|
-
width: 100%;
|
|
57
|
-
display: flex;
|
|
58
|
-
`;
|
|
59
|
-
const StyledChildrenWrap = import_styled_components.default.div`
|
|
60
|
-
display: flex;
|
|
61
|
-
flex-wrap: nowrap;
|
|
62
|
-
flex: 1;
|
|
63
|
-
overflow-x: hidden;
|
|
64
|
-
`;
|
|
65
|
-
const StyledCarouselButtonWrapper = import_styled_components.default.div`
|
|
66
|
-
max-width: 16px;
|
|
67
|
-
position: absolute;
|
|
68
|
-
z-index: 200;
|
|
69
|
-
${({ right }) => right ? "right: 0;" : `left: 0;`}
|
|
70
|
-
width: 16px;
|
|
71
|
-
height: ${({ tabType }) => tabType === import_constants.TabTypes.NORMAL ? "32px" : "22px"};
|
|
72
|
-
padding-top: ${({ tabType }) => tabType === import_constants.TabTypes.NORMAL ? "5px" : "0px"};
|
|
73
|
-
background: white;
|
|
74
|
-
${({ theme, tabType }) => tabType === import_constants.TabTypes.NORMAL ? `
|
|
75
|
-
background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );
|
|
76
|
-
` : ``};
|
|
77
|
-
`;
|
|
78
|
-
module.exports = __toCommonJS(styles_exports);
|
|
79
|
-
//# sourceMappingURL=styles.js.map
|
|
62
|
+
exports.StyledCarouselBtn = StyledCarouselBtn;
|
|
63
|
+
exports.StyledCarouselButtonWrapper = StyledCarouselButtonWrapper;
|
|
64
|
+
exports.StyledCarouselWrapper = StyledCarouselWrapper;
|
|
65
|
+
exports.StyledChildrenWrap = StyledChildrenWrap;
|
|
@@ -1,69 +1,67 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var useCarousel_exports = {};
|
|
29
|
-
__export(useCarousel_exports, {
|
|
30
|
-
useCarousel: () => useCarousel
|
|
31
|
-
});
|
|
32
|
-
var React = __toESM(require("react"));
|
|
33
|
-
var import_react = __toESM(require("react"));
|
|
34
|
-
var import_resize_observer = __toESM(require("@react-hook/resize-observer"));
|
|
35
|
-
var import_DSTabsCTX = __toESM(require("../../DSTabsCTX"));
|
|
36
|
-
var import_helpers = __toESM(require("../../utils/helpers"));
|
|
37
|
-
var import_useCarouselCallbacks = __toESM(require("./useCarouselCallbacks"));
|
|
38
|
-
const useCarousel = ({ updateIndicatorStyle }) => {
|
|
39
|
-
const { carouselOnlyListRef } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
|
|
40
|
-
const [showChevrons, setShowChevrons] = (0, import_react.useState)({
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
6
|
+
require('core-js/modules/esnext.async-iterator.reduce.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.reduce.js');
|
|
9
|
+
var React = require('react');
|
|
10
|
+
var useResizeObserver = require('@react-hook/resize-observer');
|
|
11
|
+
var DSTabsCTX = require('../../DSTabsCTX.js');
|
|
12
|
+
var helpers = require('../../utils/helpers.js');
|
|
13
|
+
var useCarouselCallbacks = require('./useCarouselCallbacks.js');
|
|
14
|
+
|
|
15
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
|
+
|
|
17
|
+
var useResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(useResizeObserver);
|
|
18
|
+
|
|
19
|
+
const useCarousel = _ref => {
|
|
20
|
+
let {
|
|
21
|
+
updateIndicatorStyle
|
|
22
|
+
} = _ref;
|
|
23
|
+
const {
|
|
24
|
+
carouselOnlyListRef
|
|
25
|
+
} = React.useContext(DSTabsCTX.DSTabsContext);
|
|
26
|
+
const [showChevrons, setShowChevrons] = React.useState({
|
|
41
27
|
right: false,
|
|
42
28
|
left: false
|
|
43
29
|
});
|
|
44
|
-
const {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
const
|
|
48
|
-
|
|
30
|
+
const {
|
|
31
|
+
tabsRefAsArray
|
|
32
|
+
} = React.useContext(DSTabsCTX.DSTabsContext);
|
|
33
|
+
const shouldShowLeft = React.useCallback(() => carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft > 0 : false, [carouselOnlyListRef]);
|
|
34
|
+
const shouldShowRight = React.useCallback(() => carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft < carouselOnlyListRef.current.scrollWidth - carouselOnlyListRef.current.clientWidth : false, [carouselOnlyListRef]);
|
|
35
|
+
const recalcChevrons = React.useCallback(() => {
|
|
36
|
+
setShowChevrons({
|
|
37
|
+
right: shouldShowRight(),
|
|
38
|
+
left: shouldShowLeft()
|
|
39
|
+
});
|
|
49
40
|
}, [shouldShowLeft, shouldShowRight]);
|
|
50
|
-
const getVisibleItemsOffset =
|
|
41
|
+
const getVisibleItemsOffset = React.useCallback(() => {
|
|
51
42
|
if (tabsRefAsArray.current) {
|
|
52
43
|
const scroll = tabsRefAsArray.current.reduce((acc, c) => {
|
|
53
|
-
if (
|
|
44
|
+
if (helpers.isElementVisibleCarousel(c, carouselOnlyListRef.current)) {
|
|
54
45
|
const styles = window.getComputedStyle(c);
|
|
55
46
|
const width = c.clientWidth;
|
|
56
47
|
const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
|
|
57
48
|
return acc + (width + margin);
|
|
58
49
|
}
|
|
50
|
+
|
|
59
51
|
return acc;
|
|
60
52
|
}, 0);
|
|
61
53
|
return scroll - 16;
|
|
62
54
|
}
|
|
55
|
+
|
|
63
56
|
return 0;
|
|
64
57
|
}, [tabsRefAsArray, carouselOnlyListRef]);
|
|
65
|
-
|
|
66
|
-
const {
|
|
58
|
+
useResizeObserver__default["default"](carouselOnlyListRef, recalcChevrons);
|
|
59
|
+
const {
|
|
60
|
+
leftButtonOnClick,
|
|
61
|
+
rightButtonOnClick,
|
|
62
|
+
handleOnClick,
|
|
63
|
+
handleOnScroll
|
|
64
|
+
} = useCarouselCallbacks.useCarouselCallbacks({
|
|
67
65
|
getVisibleItemsOffset,
|
|
68
66
|
recalcChevrons,
|
|
69
67
|
updateIndicatorStyle
|
|
@@ -76,5 +74,5 @@ const useCarousel = ({ updateIndicatorStyle }) => {
|
|
|
76
74
|
handleOnScroll
|
|
77
75
|
};
|
|
78
76
|
};
|
|
79
|
-
|
|
80
|
-
|
|
77
|
+
|
|
78
|
+
exports.useCarousel = useCarousel;
|
|
@@ -1,75 +1,58 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var useCarouselCallbacks_exports = {};
|
|
29
|
-
__export(useCarouselCallbacks_exports, {
|
|
30
|
-
useCarouselCallbacks: () => useCarouselCallbacks
|
|
31
|
-
});
|
|
32
|
-
var React = __toESM(require("react"));
|
|
33
|
-
var import_react = __toESM(require("react"));
|
|
34
|
-
var import_helpers = __toESM(require("../../utils/helpers"));
|
|
35
|
-
var import_DSTabsCTX = __toESM(require("../../DSTabsCTX"));
|
|
36
|
-
const useCarouselCallbacks = ({
|
|
37
|
-
getVisibleItemsOffset,
|
|
38
|
-
updateIndicatorStyle,
|
|
39
|
-
recalcChevrons
|
|
40
|
-
}) => {
|
|
41
|
-
const { focusableTabsRef, carouselOnlyListRef } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
|
|
42
|
-
const rightButtonOnClick = (0, import_react.useCallback)(() => {
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var helpers = require('../../utils/helpers.js');
|
|
7
|
+
var DSTabsCTX = require('../../DSTabsCTX.js');
|
|
8
|
+
|
|
9
|
+
/* eslint-disable max-statements */
|
|
10
|
+
const useCarouselCallbacks = _ref => {
|
|
11
|
+
let {
|
|
12
|
+
getVisibleItemsOffset,
|
|
13
|
+
updateIndicatorStyle,
|
|
14
|
+
recalcChevrons
|
|
15
|
+
} = _ref;
|
|
16
|
+
const {
|
|
17
|
+
focusableTabsRef,
|
|
18
|
+
carouselOnlyListRef
|
|
19
|
+
} = React.useContext(DSTabsCTX.DSTabsContext);
|
|
20
|
+
const rightButtonOnClick = React.useCallback(() => {
|
|
43
21
|
if (carouselOnlyListRef.current) {
|
|
44
22
|
carouselOnlyListRef.current.scrollLeft += getVisibleItemsOffset();
|
|
45
23
|
}
|
|
46
24
|
}, [getVisibleItemsOffset, carouselOnlyListRef]);
|
|
47
|
-
const leftButtonOnClick =
|
|
25
|
+
const leftButtonOnClick = React.useCallback(() => {
|
|
48
26
|
if (carouselOnlyListRef.current) {
|
|
49
27
|
carouselOnlyListRef.current.scrollLeft -= getVisibleItemsOffset();
|
|
50
28
|
}
|
|
51
29
|
}, [getVisibleItemsOffset, carouselOnlyListRef]);
|
|
52
|
-
const handleOnScroll =
|
|
30
|
+
const handleOnScroll = React.useCallback(() => {
|
|
53
31
|
recalcChevrons();
|
|
54
|
-
if (updateIndicatorStyle)
|
|
55
|
-
updateIndicatorStyle();
|
|
32
|
+
if (updateIndicatorStyle) updateIndicatorStyle();
|
|
56
33
|
}, [recalcChevrons, updateIndicatorStyle]);
|
|
57
|
-
const handleOnClick =
|
|
58
|
-
|
|
34
|
+
const handleOnClick = React.useCallback(_ref2 => {
|
|
35
|
+
let {
|
|
36
|
+
target
|
|
37
|
+
} = _ref2;
|
|
38
|
+
|
|
39
|
+
if (focusableTabsRef.current && target.getAttribute('role') === 'tab') {
|
|
59
40
|
const tabList = carouselOnlyListRef.current;
|
|
60
41
|
const tabButton = target;
|
|
61
42
|
const tabButtonDimensions = tabButton.getBoundingClientRect();
|
|
62
|
-
const tabListDimensions = tabList
|
|
43
|
+
const tabListDimensions = tabList === null || tabList === void 0 ? void 0 : tabList.getBoundingClientRect();
|
|
63
44
|
const tabButtonIndex = tabButton.dataset.index;
|
|
64
45
|
const lastItemIndex = focusableTabsRef.current.length.toString();
|
|
65
46
|
const magicNumber = 34;
|
|
66
|
-
const firstOrLastItem = tabButtonIndex ===
|
|
67
|
-
|
|
47
|
+
const firstOrLastItem = tabButtonIndex === '0' || tabButtonIndex === lastItemIndex;
|
|
48
|
+
|
|
49
|
+
if (!helpers.isElementVisibleCarousel(tabButton, tabList, firstOrLastItem) && tabListDimensions && carouselOnlyListRef.current) {
|
|
68
50
|
const containerWidth = tabListDimensions.width;
|
|
69
51
|
const halfContainer = containerWidth / 2;
|
|
70
52
|
const elementScrollPosition = tabButtonDimensions.left - tabListDimensions.left;
|
|
71
53
|
const positionInContainer = elementScrollPosition % containerWidth;
|
|
72
54
|
const width = tabButton.offsetWidth + magicNumber;
|
|
55
|
+
|
|
73
56
|
if (positionInContainer > halfContainer) {
|
|
74
57
|
carouselOnlyListRef.current.scrollLeft += width + positionInContainer - containerWidth;
|
|
75
58
|
} else {
|
|
@@ -85,5 +68,5 @@ const useCarouselCallbacks = ({
|
|
|
85
68
|
handleOnScroll
|
|
86
69
|
};
|
|
87
70
|
};
|
|
88
|
-
|
|
89
|
-
|
|
71
|
+
|
|
72
|
+
exports.useCarouselCallbacks = useCarouselCallbacks;
|