@elliemae/ds-tabs 2.2.1 → 2.3.0-alpha.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.
- package/cjs/DSTabs.js +58 -40
- package/cjs/DSTabs.js.map +7 -0
- package/cjs/DSTabsCTX.js +51 -25
- package/cjs/DSTabsCTX.js.map +7 -0
- package/cjs/DSTabsDatatestid.js +42 -14
- package/cjs/DSTabsDatatestid.js.map +7 -0
- package/cjs/DSTabsTypes.js +27 -2
- package/cjs/DSTabsTypes.js.map +7 -0
- package/cjs/config/useCrossRef.js +38 -11
- package/cjs/config/useCrossRef.js.map +7 -0
- package/cjs/config/useTabs.js +53 -36
- package/cjs/config/useTabs.js.map +7 -0
- package/cjs/defaultProps.js +39 -13
- package/cjs/defaultProps.js.map +7 -0
- package/cjs/exportsRelated/DSTab.js +46 -32
- package/cjs/exportsRelated/DSTab.js.map +7 -0
- package/cjs/index.js +38 -17
- package/cjs/index.js.map +7 -0
- package/cjs/parts/carousel/Carousel.js +61 -53
- package/cjs/parts/carousel/Carousel.js.map +7 -0
- package/cjs/parts/carousel/styles.js +77 -63
- package/cjs/parts/carousel/styles.js.map +7 -0
- package/cjs/parts/carousel/useCarousel.js +51 -49
- package/cjs/parts/carousel/useCarousel.js.map +7 -0
- package/cjs/parts/carousel/useCarouselCallbacks.js +53 -36
- package/cjs/parts/carousel/useCarouselCallbacks.js.map +7 -0
- package/cjs/parts/tabBar/TabBar.js +131 -120
- package/cjs/parts/tabBar/TabBar.js.map +7 -0
- package/cjs/parts/tabBar/styles.js +289 -195
- package/cjs/parts/tabBar/styles.js.map +7 -0
- package/cjs/parts/tabBar/useTabBar.js +66 -62
- package/cjs/parts/tabBar/useTabBar.js.map +7 -0
- package/cjs/parts/tabsContent/TabsContent.js +49 -45
- package/cjs/parts/tabsContent/TabsContent.js.map +7 -0
- package/cjs/parts/tabsContent/styles.js +39 -15
- package/cjs/parts/tabsContent/styles.js.map +7 -0
- package/cjs/parts/tabsPanel/TabsPanels.js +60 -58
- package/cjs/parts/tabsPanel/TabsPanels.js.map +7 -0
- package/cjs/parts/tabsPanel/styles.js +43 -23
- package/cjs/parts/tabsPanel/styles.js.map +7 -0
- package/cjs/propTypes.js +54 -29
- package/cjs/propTypes.js.map +7 -0
- package/cjs/utils/constants.js +44 -16
- package/cjs/utils/constants.js.map +7 -0
- package/cjs/utils/helpers.js +63 -22
- package/cjs/utils/helpers.js.map +7 -0
- package/cjs/utils/hooks/useKeyboardNavigation.js +59 -43
- package/cjs/utils/hooks/useKeyboardNavigation.js.map +7 -0
- package/cjs/utils/hooks/useTabsCallbacks.js +46 -45
- package/cjs/utils/hooks/useTabsCallbacks.js.map +7 -0
- package/esm/DSTabs.js +24 -25
- package/esm/DSTabs.js.map +7 -0
- package/esm/DSTabsCTX.js +22 -20
- package/esm/DSTabsCTX.js.map +7 -0
- package/esm/DSTabsDatatestid.js +13 -10
- package/esm/DSTabsDatatestid.js.map +7 -0
- package/esm/DSTabsTypes.js +2 -1
- package/esm/DSTabsTypes.js.map +7 -0
- package/esm/config/useCrossRef.js +6 -4
- package/esm/config/useCrossRef.js.map +7 -0
- package/esm/config/useTabs.js +14 -22
- package/esm/config/useTabs.js.map +7 -0
- package/esm/defaultProps.js +9 -8
- package/esm/defaultProps.js.map +7 -0
- package/esm/exportsRelated/DSTab.js +15 -19
- package/esm/exportsRelated/DSTab.js.map +7 -0
- package/esm/index.js +9 -4
- package/esm/index.js.map +7 -0
- package/esm/parts/carousel/Carousel.js +25 -38
- package/esm/parts/carousel/Carousel.js.map +7 -0
- package/esm/parts/carousel/styles.js +48 -52
- package/esm/parts/carousel/styles.js.map +7 -0
- package/esm/parts/carousel/useCarousel.js +15 -34
- package/esm/parts/carousel/useCarousel.js.map +7 -0
- package/esm/parts/carousel/useCarouselCallbacks.js +20 -28
- package/esm/parts/carousel/useCarouselCallbacks.js.map +7 -0
- package/esm/parts/tabBar/TabBar.js +100 -102
- package/esm/parts/tabBar/TabBar.js.map +7 -0
- package/esm/parts/tabBar/styles.js +262 -183
- package/esm/parts/tabBar/styles.js.map +7 -0
- package/esm/parts/tabBar/useTabBar.js +27 -44
- package/esm/parts/tabBar/useTabBar.js.map +7 -0
- package/esm/parts/tabsContent/TabsContent.js +19 -35
- package/esm/parts/tabsContent/TabsContent.js.map +7 -0
- package/esm/parts/tabsContent/styles.js +10 -7
- package/esm/parts/tabsContent/styles.js.map +7 -0
- package/esm/parts/tabsPanel/TabsPanels.js +28 -45
- package/esm/parts/tabsPanel/TabsPanels.js.map +7 -0
- package/esm/parts/tabsPanel/styles.js +14 -15
- package/esm/parts/tabsPanel/styles.js.map +7 -0
- package/esm/propTypes.js +25 -24
- package/esm/propTypes.js.map +7 -0
- package/esm/utils/constants.js +15 -8
- package/esm/utils/constants.js.map +7 -0
- package/esm/utils/helpers.js +33 -11
- package/esm/utils/helpers.js.map +7 -0
- package/esm/utils/hooks/useKeyboardNavigation.js +30 -39
- package/esm/utils/hooks/useKeyboardNavigation.js.map +7 -0
- package/esm/utils/hooks/useTabsCallbacks.js +15 -39
- package/esm/utils/hooks/useTabsCallbacks.js.map +7 -0
- package/package.json +6 -6
- package/types/DSTabs.d.ts +2 -2
- package/types/DSTabsTypes.d.ts +4 -0
- package/types/utils/helpers.d.ts +2 -1
package/cjs/propTypes.js
CHANGED
|
@@ -1,33 +1,58 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
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 propTypes_exports = {};
|
|
29
|
+
__export(propTypes_exports, {
|
|
30
|
+
tabPropTypes: () => tabPropTypes,
|
|
31
|
+
tabsPropTypes: () => tabsPropTypes
|
|
32
|
+
});
|
|
33
|
+
var React = __toESM(require("react"));
|
|
34
|
+
var import_react_desc = require("react-desc");
|
|
35
|
+
var import_constants = require("./utils/constants");
|
|
8
36
|
const tabPropTypes = {
|
|
9
|
-
tabId:
|
|
10
|
-
title:
|
|
11
|
-
required:
|
|
12
|
-
disabled:
|
|
37
|
+
tabId: import_react_desc.PropTypes.string.description("Unique Tab id.").defaultValue(""),
|
|
38
|
+
title: import_react_desc.PropTypes.string.description("Tab title.").defaultValue(""),
|
|
39
|
+
required: import_react_desc.PropTypes.bool.description("Show a required mark next to the title.").defaultValue(false),
|
|
40
|
+
disabled: import_react_desc.PropTypes.bool.description("Disables Tab.").defaultValue(false)
|
|
13
41
|
};
|
|
14
42
|
const tabsPropTypes = {
|
|
15
|
-
animated:
|
|
16
|
-
enableMouseEvents:
|
|
17
|
-
allowTextSelection:
|
|
18
|
-
onTabChange:
|
|
19
|
-
type:
|
|
20
|
-
tabBarExtraContent:
|
|
21
|
-
onlyRenderActiveTab:
|
|
22
|
-
withCarousel:
|
|
23
|
-
activeTab:
|
|
24
|
-
children:
|
|
25
|
-
tabsListAriaLabel:
|
|
26
|
-
containerProps:
|
|
27
|
-
innerRef:
|
|
28
|
-
current: reactDesc.PropTypes.any
|
|
29
|
-
})]).description('Ref to the container.').defaultValue(undefined)
|
|
43
|
+
animated: import_react_desc.PropTypes.bool.description("Whether the Tab transition should animate or not.").defaultValue(true),
|
|
44
|
+
enableMouseEvents: import_react_desc.PropTypes.bool.description("Enables Tab transition with mouse drag events.").defaultValue(false),
|
|
45
|
+
allowTextSelection: import_react_desc.PropTypes.bool.description("Allows text selection when mouse drag events are active.").defaultValue(false),
|
|
46
|
+
onTabChange: import_react_desc.PropTypes.func.description("Handler when a user clicks on a different Tab.").defaultValue("() => {}"),
|
|
47
|
+
type: import_react_desc.PropTypes.oneOf(import_constants.TabTypesValuesAsArray).description("Tab type.").defaultValue(import_constants.TabTypesValuesAsArray[0]),
|
|
48
|
+
tabBarExtraContent: import_react_desc.PropTypes.element.description("Extra content next to the Tab Bar.").defaultValue(void 0),
|
|
49
|
+
onlyRenderActiveTab: import_react_desc.PropTypes.bool.description("Only renders the active Tab in the DOM.").defaultValue(false),
|
|
50
|
+
withCarousel: import_react_desc.PropTypes.bool.description("Activate carousel behavior.").defaultValue(false),
|
|
51
|
+
activeTab: import_react_desc.PropTypes.string.description("Passing a value makes DSTabs a controlled component.").defaultValue("First DSTab children."),
|
|
52
|
+
children: import_react_desc.PropTypes.node.description("Use DSTab component as children.").isRequired,
|
|
53
|
+
tabsListAriaLabel: import_react_desc.PropTypes.string.description("Aria label for the list.").defaultValue("Tab list."),
|
|
54
|
+
containerProps: import_react_desc.PropTypes.object.description("Additional properties for the container.").defaultValue({}),
|
|
55
|
+
innerRef: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.func, import_react_desc.PropTypes.shape({ current: import_react_desc.PropTypes.any })]).description("Ref to the container.").defaultValue(void 0)
|
|
30
56
|
};
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
exports.tabsPropTypes = tabsPropTypes;
|
|
57
|
+
module.exports = __toCommonJS(propTypes_exports);
|
|
58
|
+
//# sourceMappingURL=propTypes.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import { PropTypes } from 'react-desc';\nimport { TabTypesValuesAsArray } from './utils/constants';\n\nexport const tabPropTypes = {\n tabId: PropTypes.string.description('Unique Tab id.').defaultValue(''),\n title: PropTypes.string.description('Tab title.').defaultValue(''),\n required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n};\n\nexport const tabsPropTypes = {\n animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),\n enableMouseEvents: PropTypes.bool.description('Enables Tab transition with mouse drag events.').defaultValue(false),\n allowTextSelection: PropTypes.bool\n .description('Allows text selection when mouse drag events are active.')\n .defaultValue(false),\n onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n type: PropTypes.oneOf(TabTypesValuesAsArray).description('Tab type.').defaultValue(TabTypesValuesAsArray[0]),\n tabBarExtraContent: PropTypes.element.description('Extra content next to the Tab Bar.').defaultValue(undefined),\n onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),\n activeTab: PropTypes.string\n .description('Passing a value makes DSTabs a controlled component.')\n .defaultValue('First DSTab children.'),\n children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n tabsListAriaLabel: PropTypes.string.description('Aria label for the list.').defaultValue('Tab list.'),\n containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n .description('Ref to the container.')\n .defaultValue(undefined),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAC1B,uBAAsC;AAE/B,MAAM,eAAe;AAAA,EAC1B,OAAO,4BAAU,OAAO,YAAY,kBAAkB,aAAa;AAAA,EACnE,OAAO,4BAAU,OAAO,YAAY,cAAc,aAAa;AAAA,EAC/D,UAAU,4BAAU,KAAK,YAAY,2CAA2C,aAAa;AAAA,EAC7F,UAAU,4BAAU,KAAK,YAAY,iBAAiB,aAAa;AAAA;AAG9D,MAAM,gBAAgB;AAAA,EAC3B,UAAU,4BAAU,KAAK,YAAY,qDAAqD,aAAa;AAAA,EACvG,mBAAmB,4BAAU,KAAK,YAAY,kDAAkD,aAAa;AAAA,EAC7G,oBAAoB,4BAAU,KAC3B,YAAY,4DACZ,aAAa;AAAA,EAChB,aAAa,4BAAU,KAAK,YAAY,kDAAkD,aAAa;AAAA,EACvG,MAAM,4BAAU,MAAM,wCAAuB,YAAY,aAAa,aAAa,uCAAsB;AAAA,EACzG,oBAAoB,4BAAU,QAAQ,YAAY,sCAAsC,aAAa;AAAA,EACrG,qBAAqB,4BAAU,KAAK,YAAY,2CAA2C,aAAa;AAAA,EACxG,cAAc,4BAAU,KAAK,YAAY,+BAA+B,aAAa;AAAA,EACrF,WAAW,4BAAU,OAClB,YAAY,wDACZ,aAAa;AAAA,EAChB,UAAU,4BAAU,KAAK,YAAY,oCAAoC;AAAA,EACzE,mBAAmB,4BAAU,OAAO,YAAY,4BAA4B,aAAa;AAAA,EACzF,gBAAgB,4BAAU,OAAO,YAAY,4CAA4C,aAAa;AAAA,EACtG,UAAU,4BAAU,UAAU,CAAC,4BAAU,MAAM,4BAAU,MAAM,EAAE,SAAS,4BAAU,SACjF,YAAY,yBACZ,aAAa;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/cjs/utils/constants.js
CHANGED
|
@@ -1,18 +1,50 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
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 constants_exports = {};
|
|
29
|
+
__export(constants_exports, {
|
|
30
|
+
MOBILE_GRADIENT_WIDTH: () => MOBILE_GRADIENT_WIDTH,
|
|
31
|
+
TabTypes: () => TabTypes,
|
|
32
|
+
TabTypesValuesAsArray: () => TabTypesValuesAsArray,
|
|
33
|
+
defaultIndicatorStyles: () => defaultIndicatorStyles,
|
|
34
|
+
gradientOffsetsAccordingType: () => gradientOffsetsAccordingType
|
|
35
|
+
});
|
|
36
|
+
var React = __toESM(require("react"));
|
|
5
37
|
const TabTypes = {
|
|
6
|
-
NORMAL:
|
|
7
|
-
NORMAL_SMALL:
|
|
8
|
-
SUBTABS:
|
|
38
|
+
NORMAL: "normal",
|
|
39
|
+
NORMAL_SMALL: "normal_small",
|
|
40
|
+
SUBTABS: "subtabs"
|
|
9
41
|
};
|
|
10
42
|
const TabTypesValuesAsArray = Object.values(TabTypes);
|
|
11
43
|
const MOBILE_GRADIENT_WIDTH = 24;
|
|
12
44
|
const defaultIndicatorStyles = {
|
|
13
|
-
left:
|
|
14
|
-
width:
|
|
15
|
-
backgroundWithTransparent:
|
|
45
|
+
left: "0px",
|
|
46
|
+
width: "0px",
|
|
47
|
+
backgroundWithTransparent: ""
|
|
16
48
|
};
|
|
17
49
|
const gradientOffsetsAccordingType = {
|
|
18
50
|
normal_small: 14,
|
|
@@ -20,9 +52,5 @@ const gradientOffsetsAccordingType = {
|
|
|
20
52
|
subtabs: 16,
|
|
21
53
|
fixedTabsHeaders: 0
|
|
22
54
|
};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
exports.TabTypes = TabTypes;
|
|
26
|
-
exports.TabTypesValuesAsArray = TabTypesValuesAsArray;
|
|
27
|
-
exports.defaultIndicatorStyles = defaultIndicatorStyles;
|
|
28
|
-
exports.gradientOffsetsAccordingType = gradientOffsetsAccordingType;
|
|
55
|
+
module.exports = __toCommonJS(constants_exports);
|
|
56
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/utils/constants.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["export const TabTypes = {\n NORMAL: 'normal' as const,\n NORMAL_SMALL: 'normal_small' as const,\n SUBTABS: 'subtabs' as const,\n};\n\nexport const TabTypesValuesAsArray = Object.values(TabTypes);\n\nexport const MOBILE_GRADIENT_WIDTH = 24;\n\nexport const defaultIndicatorStyles = {\n left: '0px',\n width: '0px',\n backgroundWithTransparent: '',\n};\n\nexport const gradientOffsetsAccordingType = {\n normal_small: 14,\n normal: 16,\n subtabs: 16,\n fixedTabsHeaders: 0,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,WAAW;AAAA,EACtB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,SAAS;AAAA;AAGJ,MAAM,wBAAwB,OAAO,OAAO;AAE5C,MAAM,wBAAwB;AAE9B,MAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,2BAA2B;AAAA;AAGtB,MAAM,+BAA+B;AAAA,EAC1C,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,kBAAkB;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/cjs/utils/helpers.js
CHANGED
|
@@ -1,17 +1,49 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
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 helpers_exports = {};
|
|
29
|
+
__export(helpers_exports, {
|
|
30
|
+
centerTab: () => centerTab,
|
|
31
|
+
getIdByIndex: () => getIdByIndex,
|
|
32
|
+
getIndexById: () => getIndexById,
|
|
33
|
+
getVisibleDimensions: () => getVisibleDimensions,
|
|
34
|
+
isElementVisible: () => isElementVisible,
|
|
35
|
+
isElementVisibleCarousel: () => isElementVisibleCarousel,
|
|
36
|
+
shouldHaveLeftGradient: () => shouldHaveLeftGradient,
|
|
37
|
+
shouldHaveRightGradient: () => shouldHaveRightGradient
|
|
38
|
+
});
|
|
39
|
+
var React = __toESM(require("react"));
|
|
40
|
+
var import_constants = require("./constants");
|
|
7
41
|
const isElementVisible = (tab, tabList) => {
|
|
8
42
|
const tabDimensions = tab.getBoundingClientRect();
|
|
9
43
|
const tabListDimensions = tabList.getBoundingClientRect();
|
|
10
44
|
return tabDimensions.left <= tabListDimensions.left ? tabListDimensions.left - tabDimensions.left <= tabDimensions.width : tabDimensions.right - tabListDimensions.right <= tabDimensions.width;
|
|
11
45
|
};
|
|
12
|
-
const isElementVisibleCarousel =
|
|
13
|
-
let firstOrLastItem = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
14
|
-
|
|
46
|
+
const isElementVisibleCarousel = (tab, tabContainer, firstOrLastItem = true) => {
|
|
15
47
|
if (tab && tabContainer) {
|
|
16
48
|
const tabDimensions = tab.getBoundingClientRect();
|
|
17
49
|
const tabContainerDimensions = tabContainer.getBoundingClientRect();
|
|
@@ -22,9 +54,24 @@ const isElementVisibleCarousel = function (tab, tabContainer) {
|
|
|
22
54
|
const tabContainerDimensionsRight = Math.floor(tabContainerDimensions.right);
|
|
23
55
|
return tabDimensionsLeft >= tabContainerDimensionsLeft && tabDimensionsRight <= tabContainerDimensionsRight;
|
|
24
56
|
}
|
|
25
|
-
|
|
26
57
|
return false;
|
|
27
58
|
};
|
|
59
|
+
const centerTab = ({ e, listRef }) => {
|
|
60
|
+
if (listRef.current) {
|
|
61
|
+
const { offsetLeft } = e?.target;
|
|
62
|
+
const { width: tabWidth } = (e?.target).getBoundingClientRect();
|
|
63
|
+
const { width: listWidth } = listRef.current.getBoundingClientRect();
|
|
64
|
+
const extraSideSpace = listWidth - tabWidth;
|
|
65
|
+
const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;
|
|
66
|
+
const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;
|
|
67
|
+
listRef.current.scrollTo({
|
|
68
|
+
top: 0,
|
|
69
|
+
left: centeredLeftOffset,
|
|
70
|
+
behavior: "smooth"
|
|
71
|
+
});
|
|
72
|
+
e?.preventDefault();
|
|
73
|
+
}
|
|
74
|
+
};
|
|
28
75
|
const getVisibleDimensions = (node, referenceNode) => {
|
|
29
76
|
const nodeDimensions = node.getBoundingClientRect();
|
|
30
77
|
const referenceNodeDimensions = referenceNode.getBoundingClientRect();
|
|
@@ -33,15 +80,9 @@ const getVisibleDimensions = (node, referenceNode) => {
|
|
|
33
80
|
height: Math.min(node.clientHeight, referenceNodeDimensions.top + referenceNode.clientHeight - nodeDimensions.top, node.clientHeight - (referenceNodeDimensions.top - nodeDimensions.top))
|
|
34
81
|
};
|
|
35
82
|
};
|
|
36
|
-
const getIndexById = (children, activeId) => children && children.findIndex(item => item.props.tabId === activeId);
|
|
37
|
-
const getIdByIndex = (children, index) => children && children[index].props.tabId ||
|
|
38
|
-
const shouldHaveLeftGradient = scrollLeft => Math.abs(scrollLeft) >
|
|
39
|
-
const shouldHaveRightGradient = (scrollLeft, clientWidth, scrollWidth) => Math.abs(scrollLeft) <= scrollWidth - (clientWidth +
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
exports.getIndexById = getIndexById;
|
|
43
|
-
exports.getVisibleDimensions = getVisibleDimensions;
|
|
44
|
-
exports.isElementVisible = isElementVisible;
|
|
45
|
-
exports.isElementVisibleCarousel = isElementVisibleCarousel;
|
|
46
|
-
exports.shouldHaveLeftGradient = shouldHaveLeftGradient;
|
|
47
|
-
exports.shouldHaveRightGradient = shouldHaveRightGradient;
|
|
83
|
+
const getIndexById = (children, activeId) => children && children.findIndex((item) => item.props.tabId === activeId);
|
|
84
|
+
const getIdByIndex = (children, index) => children && children[index].props.tabId || "";
|
|
85
|
+
const shouldHaveLeftGradient = (scrollLeft) => Math.abs(scrollLeft) > import_constants.MOBILE_GRADIENT_WIDTH;
|
|
86
|
+
const shouldHaveRightGradient = (scrollLeft, clientWidth, scrollWidth) => Math.abs(scrollLeft) <= scrollWidth - (clientWidth + import_constants.MOBILE_GRADIENT_WIDTH);
|
|
87
|
+
module.exports = __toCommonJS(helpers_exports);
|
|
88
|
+
//# sourceMappingURL=helpers.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/utils/helpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import type { CenterTabPropsT, DSTabPropsWithDefaultT, VisibleDimensionsT } from '../DSTabsTypes';\nimport { MOBILE_GRADIENT_WIDTH } from './constants';\n\nexport const isElementVisible = (tab: HTMLElement, tabList: HTMLElement): boolean => {\n const tabDimensions = tab.getBoundingClientRect();\n const tabListDimensions = tabList.getBoundingClientRect();\n\n return tabDimensions.left <= tabListDimensions.left\n ? tabListDimensions.left - tabDimensions.left <= tabDimensions.width\n : tabDimensions.right - tabListDimensions.right <= tabDimensions.width;\n};\n\nexport const isElementVisibleCarousel = (\n tab: HTMLElement | null,\n tabContainer: HTMLDivElement | null,\n firstOrLastItem = true,\n): boolean => {\n if (tab && tabContainer) {\n const tabDimensions = tab.getBoundingClientRect();\n const tabContainerDimensions = tabContainer.getBoundingClientRect();\n\n const offset = firstOrLastItem ? 16 : 32;\n const tabDimensionsLeft = Math.floor(tabDimensions.left - offset);\n const tabDimensionsRight = Math.floor(tabDimensions.right + offset);\n\n const tabContainerDimensionsLeft = Math.floor(tabContainerDimensions.left);\n const tabContainerDimensionsRight = Math.floor(tabContainerDimensions.right);\n\n return tabDimensionsLeft >= tabContainerDimensionsLeft && tabDimensionsRight <= tabContainerDimensionsRight;\n }\n return false;\n};\n\nexport const centerTab = ({ e, listRef }: CenterTabPropsT) => {\n if (listRef.current) {\n const { offsetLeft } = e?.target as HTMLButtonElement;\n const { width: tabWidth } = (e?.target as HTMLButtonElement).getBoundingClientRect();\n const { width: listWidth } = listRef.current.getBoundingClientRect();\n const extraSideSpace = listWidth - tabWidth;\n const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;\n const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;\n listRef.current.scrollTo({\n top: 0,\n left: centeredLeftOffset,\n behavior: 'smooth',\n });\n\n e?.preventDefault();\n }\n};\n\nexport const getVisibleDimensions = (node: HTMLElement, referenceNode: HTMLElement): VisibleDimensionsT => {\n const nodeDimensions = node.getBoundingClientRect();\n const referenceNodeDimensions = referenceNode.getBoundingClientRect();\n\n return {\n width: Math.min(\n node.clientWidth,\n referenceNodeDimensions.left + referenceNode.clientWidth - nodeDimensions.left,\n node.clientWidth - (referenceNodeDimensions.left - nodeDimensions.left),\n ),\n height: Math.min(\n node.clientHeight,\n referenceNodeDimensions.top + referenceNode.clientHeight - nodeDimensions.top,\n node.clientHeight - (referenceNodeDimensions.top - nodeDimensions.top),\n ),\n };\n};\n\nexport const getIndexById = (children: React.ReactElement<DSTabPropsWithDefaultT>[], activeId?: string): number =>\n children && children.findIndex((item: React.ReactElement<DSTabPropsWithDefaultT>) => item.props.tabId === activeId);\n\nexport const getIdByIndex = (children: React.ReactElement<DSTabPropsWithDefaultT>[], index: number): string =>\n (children && children[index].props.tabId) || '';\n\nexport const shouldHaveLeftGradient = (scrollLeft: number): boolean => Math.abs(scrollLeft) > MOBILE_GRADIENT_WIDTH;\n\nexport const shouldHaveRightGradient = (scrollLeft: number, clientWidth: number, scrollWidth: number): boolean =>\n Math.abs(scrollLeft) <= scrollWidth - (clientWidth + MOBILE_GRADIENT_WIDTH);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAsC;AAE/B,MAAM,mBAAmB,CAAC,KAAkB,YAAkC;AACnF,QAAM,gBAAgB,IAAI;AAC1B,QAAM,oBAAoB,QAAQ;AAElC,SAAO,cAAc,QAAQ,kBAAkB,OAC3C,kBAAkB,OAAO,cAAc,QAAQ,cAAc,QAC7D,cAAc,QAAQ,kBAAkB,SAAS,cAAc;AAAA;AAG9D,MAAM,2BAA2B,CACtC,KACA,cACA,kBAAkB,SACN;AACZ,MAAI,OAAO,cAAc;AACvB,UAAM,gBAAgB,IAAI;AAC1B,UAAM,yBAAyB,aAAa;AAE5C,UAAM,SAAS,kBAAkB,KAAK;AACtC,UAAM,oBAAoB,KAAK,MAAM,cAAc,OAAO;AAC1D,UAAM,qBAAqB,KAAK,MAAM,cAAc,QAAQ;AAE5D,UAAM,6BAA6B,KAAK,MAAM,uBAAuB;AACrE,UAAM,8BAA8B,KAAK,MAAM,uBAAuB;AAEtE,WAAO,qBAAqB,8BAA8B,sBAAsB;AAAA;AAElF,SAAO;AAAA;AAGF,MAAM,YAAY,CAAC,EAAE,GAAG,cAA+B;AAC5D,MAAI,QAAQ,SAAS;AACnB,UAAM,EAAE,eAAe,GAAG;AAC1B,UAAM,EAAE,OAAO,aAAc,IAAG,QAA6B;AAC7D,UAAM,EAAE,OAAO,cAAc,QAAQ,QAAQ;AAC7C,UAAM,iBAAiB,YAAY;AACnC,UAAM,qBAAqB,iBAAiB,IAAI,iBAAiB,IAAI;AACrE,UAAM,qBAAqB,aAAa,qBAAqB,aAAa,qBAAqB;AAC/F,YAAQ,QAAQ,SAAS;AAAA,MACvB,KAAK;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;AAGZ,OAAG;AAAA;AAAA;AAIA,MAAM,uBAAuB,CAAC,MAAmB,kBAAmD;AACzG,QAAM,iBAAiB,KAAK;AAC5B,QAAM,0BAA0B,cAAc;AAE9C,SAAO;AAAA,IACL,OAAO,KAAK,IACV,KAAK,aACL,wBAAwB,OAAO,cAAc,cAAc,eAAe,MAC1E,KAAK,cAAe,yBAAwB,OAAO,eAAe;AAAA,IAEpE,QAAQ,KAAK,IACX,KAAK,cACL,wBAAwB,MAAM,cAAc,eAAe,eAAe,KAC1E,KAAK,eAAgB,yBAAwB,MAAM,eAAe;AAAA;AAAA;AAKjE,MAAM,eAAe,CAAC,UAAwD,aACnF,YAAY,SAAS,UAAU,CAAC,SAAqD,KAAK,MAAM,UAAU;AAErG,MAAM,eAAe,CAAC,UAAwD,UAClF,YAAY,SAAS,OAAO,MAAM,SAAU;AAExC,MAAM,yBAAyB,CAAC,eAAgC,KAAK,IAAI,cAAc;AAEvF,MAAM,0BAA0B,CAAC,YAAoB,aAAqB,gBAC/E,KAAK,IAAI,eAAe,cAAe,eAAc;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,61 +1,77 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
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 useKeyboardNavigation_exports = {};
|
|
29
|
+
__export(useKeyboardNavigation_exports, {
|
|
30
|
+
useKeyboardNavigation: () => useKeyboardNavigation
|
|
31
|
+
});
|
|
32
|
+
var React = __toESM(require("react"));
|
|
33
|
+
var import_react = require("react");
|
|
34
|
+
var import_DSTabsCTX = require("../../DSTabsCTX");
|
|
9
35
|
const useKeyboardNavigation = () => {
|
|
10
|
-
const {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
firstSubtabInternalRef,
|
|
15
|
-
lastTabInternalRef
|
|
16
|
-
} = React.useContext(DSTabsCTX.DSTabsCrossRefContext);
|
|
17
|
-
const handleOnKeyDown = React.useCallback(e => {
|
|
18
|
-
if (e.key === 'ArrowRight' && focusableTabsRef.current) {
|
|
19
|
-
var _focusableTabsRef$cur, _focusableTabsRef$cur2;
|
|
20
|
-
|
|
36
|
+
const { focusableTabsRef } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
|
|
37
|
+
const { firstSubtabInternalRef, lastTabInternalRef } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsCrossRefContext);
|
|
38
|
+
const handleOnKeyDown = (0, import_react.useCallback)((e) => {
|
|
39
|
+
if (e.key === "ArrowRight" && focusableTabsRef.current) {
|
|
21
40
|
e.preventDefault();
|
|
22
41
|
e.stopPropagation();
|
|
23
|
-
const nextTab = focusableTabsRef.current[
|
|
24
|
-
if (nextTab)
|
|
25
|
-
|
|
42
|
+
const nextTab = focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target) + 1];
|
|
43
|
+
if (nextTab)
|
|
44
|
+
nextTab.focus();
|
|
45
|
+
if (!nextTab)
|
|
46
|
+
return;
|
|
26
47
|
}
|
|
27
|
-
|
|
28
|
-
if (e.key === 'ArrowLeft' && focusableTabsRef.current) {
|
|
29
|
-
var _focusableTabsRef$cur3, _focusableTabsRef$cur4;
|
|
30
|
-
|
|
48
|
+
if (e.key === "ArrowLeft" && focusableTabsRef.current) {
|
|
31
49
|
e.preventDefault();
|
|
32
50
|
e.stopPropagation();
|
|
33
|
-
const prevTab = focusableTabsRef.current[
|
|
34
|
-
if (prevTab)
|
|
35
|
-
|
|
51
|
+
const prevTab = focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target) - 1];
|
|
52
|
+
if (prevTab)
|
|
53
|
+
prevTab.focus();
|
|
54
|
+
if (!prevTab)
|
|
55
|
+
return;
|
|
36
56
|
}
|
|
37
|
-
|
|
38
|
-
if (e.key === 'ArrowDown') {
|
|
39
|
-
var _firstSubtabInternalR;
|
|
40
|
-
|
|
57
|
+
if (e.key === "ArrowDown") {
|
|
41
58
|
e.preventDefault();
|
|
42
59
|
e.stopPropagation();
|
|
43
|
-
const canFocusCrossTabs =
|
|
44
|
-
if (canFocusCrossTabs)
|
|
60
|
+
const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;
|
|
61
|
+
if (canFocusCrossTabs)
|
|
62
|
+
firstSubtabInternalRef.current?.focus();
|
|
45
63
|
}
|
|
46
|
-
|
|
47
|
-
if (e.key === 'ArrowUp') {
|
|
48
|
-
var _lastTabInternalRef$c;
|
|
49
|
-
|
|
64
|
+
if (e.key === "ArrowUp") {
|
|
50
65
|
e.preventDefault();
|
|
51
66
|
e.stopPropagation();
|
|
52
|
-
const canFocusCrossTabs =
|
|
53
|
-
if (canFocusCrossTabs)
|
|
67
|
+
const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;
|
|
68
|
+
if (canFocusCrossTabs)
|
|
69
|
+
lastTabInternalRef.current?.focus();
|
|
54
70
|
}
|
|
55
71
|
}, [firstSubtabInternalRef, lastTabInternalRef, focusableTabsRef]);
|
|
56
72
|
return {
|
|
57
73
|
handleOnKeyDown
|
|
58
74
|
};
|
|
59
75
|
};
|
|
60
|
-
|
|
61
|
-
|
|
76
|
+
module.exports = __toCommonJS(useKeyboardNavigation_exports);
|
|
77
|
+
//# sourceMappingURL=useKeyboardNavigation.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/utils/hooks/useKeyboardNavigation.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX';\nimport type { UseKeyboardNavigationReturnTypeT } from '../../DSTabsTypes';\n\nexport const useKeyboardNavigation = (): UseKeyboardNavigationReturnTypeT => {\n const { focusableTabsRef } = useContext(DSTabsContext);\n const { firstSubtabInternalRef, lastTabInternalRef } = useContext(DSTabsCrossRefContext);\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'ArrowRight' && focusableTabsRef.current) {\n e.preventDefault();\n e.stopPropagation();\n const nextTab =\n focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target as HTMLButtonElement) + 1];\n if (nextTab) nextTab.focus();\n if (!nextTab) return;\n }\n\n if (e.key === 'ArrowLeft' && focusableTabsRef.current) {\n e.preventDefault();\n e.stopPropagation();\n const prevTab =\n focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target as HTMLButtonElement) - 1];\n if (prevTab) prevTab.focus();\n if (!prevTab) return;\n }\n\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n e.stopPropagation();\n const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;\n if (canFocusCrossTabs) firstSubtabInternalRef.current?.focus();\n }\n\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n e.stopPropagation();\n const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;\n if (canFocusCrossTabs) lastTabInternalRef.current?.focus();\n }\n },\n [firstSubtabInternalRef, lastTabInternalRef, focusableTabsRef],\n );\n\n return {\n handleOnKeyDown,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA+C;AAC/C,uBAAqD;AAG9C,MAAM,wBAAwB,MAAwC;AAC3E,QAAM,EAAE,qBAAqB,6BAAW;AACxC,QAAM,EAAE,wBAAwB,uBAAuB,6BAAW;AAElE,QAAM,kBAAkB,8BACtB,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ,gBAAgB,iBAAiB,SAAS;AACtD,QAAE;AACF,QAAE;AACF,YAAM,UACJ,iBAAiB,QAAQ,kBAAkB,SAAS,UAAU,EAAE,UAA+B;AACjG,UAAI;AAAS,gBAAQ;AACrB,UAAI,CAAC;AAAS;AAAA;AAGhB,QAAI,EAAE,QAAQ,eAAe,iBAAiB,SAAS;AACrD,QAAE;AACF,QAAE;AACF,YAAM,UACJ,iBAAiB,QAAQ,kBAAkB,SAAS,UAAU,EAAE,UAA+B;AACjG,UAAI;AAAS,gBAAQ;AACrB,UAAI,CAAC;AAAS;AAAA;AAGhB,QAAI,EAAE,QAAQ,aAAa;AACzB,QAAE;AACF,QAAE;AACF,YAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,UAAI;AAAmB,+BAAuB,SAAS;AAAA;AAGzD,QAAI,EAAE,QAAQ,WAAW;AACvB,QAAE;AACF,QAAE;AACF,YAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,UAAI;AAAmB,2BAAmB,SAAS;AAAA;AAAA,KAGvD,CAAC,wBAAwB,oBAAoB;AAG/C,SAAO;AAAA,IACL;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,59 +1,60 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
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 useTabsCallbacks_exports = {};
|
|
29
|
+
__export(useTabsCallbacks_exports, {
|
|
30
|
+
useTabsCallbacks: () => useTabsCallbacks
|
|
31
|
+
});
|
|
32
|
+
var React = __toESM(require("react"));
|
|
33
|
+
var import_react = require("react");
|
|
34
|
+
var import_helpers = require("../helpers");
|
|
35
|
+
var import_DSTabsCTX = require("../../DSTabsCTX");
|
|
8
36
|
const useTabsCallbacks = () => {
|
|
9
37
|
const {
|
|
10
38
|
setInternalActiveTab,
|
|
11
39
|
tabsListRef,
|
|
12
|
-
props: {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
allowTextSelection,
|
|
16
|
-
fixedTabsHeaders
|
|
17
|
-
}
|
|
18
|
-
} = React.useContext(DSTabsCTX.DSTabsContext);
|
|
19
|
-
const centerTabWhenTabChangeMobile = React.useCallback(e => {
|
|
20
|
-
if (tabsListRef.current) {
|
|
21
|
-
const {
|
|
22
|
-
offsetLeft
|
|
23
|
-
} = e === null || e === void 0 ? void 0 : e.target;
|
|
24
|
-
const {
|
|
25
|
-
width: tabWidth
|
|
26
|
-
} = (e === null || e === void 0 ? void 0 : e.target).getBoundingClientRect();
|
|
27
|
-
const {
|
|
28
|
-
width: listWidth
|
|
29
|
-
} = tabsListRef.current.getBoundingClientRect();
|
|
30
|
-
const extraSideSpace = listWidth - tabWidth;
|
|
31
|
-
const leftOffsetToCenter = extraSideSpace > 0 ? extraSideSpace / 2 : 0;
|
|
32
|
-
const centeredLeftOffset = offsetLeft > leftOffsetToCenter ? offsetLeft - leftOffsetToCenter : 0;
|
|
33
|
-
tabsListRef.current.scrollTo({
|
|
34
|
-
top: 0,
|
|
35
|
-
left: centeredLeftOffset,
|
|
36
|
-
behavior: 'smooth'
|
|
37
|
-
});
|
|
38
|
-
e === null || e === void 0 ? void 0 : e.preventDefault();
|
|
39
|
-
}
|
|
40
|
-
}, [tabsListRef]);
|
|
41
|
-
const handleOnTabChange = React.useCallback((tabId, e) => {
|
|
40
|
+
props: { onTabChange, isDSMobile, allowTextSelection, fixedTabsHeaders }
|
|
41
|
+
} = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
|
|
42
|
+
const handleOnTabChange = (0, import_react.useCallback)((tabId, e) => {
|
|
42
43
|
setInternalActiveTab(tabId);
|
|
43
44
|
onTabChange(tabId, e);
|
|
44
|
-
|
|
45
45
|
if (isDSMobile && !fixedTabsHeaders && e) {
|
|
46
|
-
|
|
46
|
+
(0, import_helpers.centerTab)({ e, listRef: tabsListRef });
|
|
47
47
|
}
|
|
48
|
-
}, [
|
|
49
|
-
const handleOnMouseDown =
|
|
50
|
-
const role = e.target.getAttribute(
|
|
51
|
-
if (role !==
|
|
48
|
+
}, [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef]);
|
|
49
|
+
const handleOnMouseDown = (0, import_react.useCallback)((e) => {
|
|
50
|
+
const role = e.target.getAttribute("role");
|
|
51
|
+
if (role !== "tabpanel" && allowTextSelection)
|
|
52
|
+
e.stopPropagation();
|
|
52
53
|
}, [allowTextSelection]);
|
|
53
54
|
return {
|
|
54
55
|
handleOnTabChange,
|
|
55
56
|
handleOnMouseDown
|
|
56
57
|
};
|
|
57
58
|
};
|
|
58
|
-
|
|
59
|
-
|
|
59
|
+
module.exports = __toCommonJS(useTabsCallbacks_exports);
|
|
60
|
+
//# sourceMappingURL=useTabsCallbacks.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/utils/hooks/useTabsCallbacks.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useContext } from 'react';\nimport { centerTab } from '../helpers';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport type { UseTabsCallbacksReturnTypeT } from '../../DSTabsTypes';\n\nexport const useTabsCallbacks = (): UseTabsCallbacksReturnTypeT => {\n const {\n setInternalActiveTab,\n tabsListRef,\n props: { onTabChange, isDSMobile, allowTextSelection, fixedTabsHeaders },\n } = useContext(DSTabsContext);\n\n const handleOnTabChange = useCallback(\n (tabId: string, e?: React.MouseEvent) => {\n setInternalActiveTab(tabId);\n onTabChange(tabId, e);\n if (isDSMobile && !fixedTabsHeaders && e) {\n centerTab({ e, listRef: tabsListRef });\n }\n },\n [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef],\n );\n\n const handleOnMouseDown = useCallback(\n (e: React.MouseEvent) => {\n const role = (e.target as HTMLElement).getAttribute('role');\n if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();\n },\n [allowTextSelection],\n );\n\n return {\n handleOnTabChange,\n handleOnMouseDown,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+C;AAC/C,qBAA0B;AAC1B,uBAA8B;AAGvB,MAAM,mBAAmB,MAAmC;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,aAAa,YAAY,oBAAoB;AAAA,MACpD,6BAAW;AAEf,QAAM,oBAAoB,8BACxB,CAAC,OAAe,MAAyB;AACvC,yBAAqB;AACrB,gBAAY,OAAO;AACnB,QAAI,cAAc,CAAC,oBAAoB,GAAG;AACxC,oCAAU,EAAE,GAAG,SAAS;AAAA;AAAA,KAG5B,CAAC,kBAAkB,YAAY,aAAa,sBAAsB;AAGpE,QAAM,oBAAoB,8BACxB,CAAC,MAAwB;AACvB,UAAM,OAAQ,EAAE,OAAuB,aAAa;AACpD,QAAI,SAAS,cAAc;AAAoB,QAAE;AAAA,KAEnD,CAAC;AAGH,SAAO;AAAA,IACL;AAAA,IACA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/DSTabs.js
CHANGED
|
@@ -1,35 +1,34 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
const DSTabs = props => {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import { describe } from "react-desc";
|
|
4
|
+
import { tabsPropTypes } from "./propTypes";
|
|
5
|
+
import { DSTabsContext, DSTabsCrossRefContext } from "./DSTabsCTX";
|
|
6
|
+
import { TabsContent } from "./parts/tabsContent/TabsContent";
|
|
7
|
+
import { useTabs } from "./config/useTabs";
|
|
8
|
+
import { useCrossRef } from "./config/useCrossRef";
|
|
9
|
+
import { TabTypes } from "./utils/constants";
|
|
10
|
+
const DSTabs = (props) => {
|
|
13
11
|
const ctx = useTabs(props);
|
|
14
12
|
const crossRefsCtx = useCrossRef();
|
|
15
|
-
const {
|
|
16
|
-
type
|
|
17
|
-
} = props;
|
|
18
|
-
|
|
13
|
+
const { type } = props;
|
|
19
14
|
if (type === TabTypes.SUBTABS) {
|
|
20
|
-
return
|
|
15
|
+
return /* @__PURE__ */ React2.createElement(DSTabsContext.Provider, {
|
|
21
16
|
value: ctx
|
|
22
|
-
},
|
|
17
|
+
}, /* @__PURE__ */ React2.createElement(TabsContent, null));
|
|
23
18
|
}
|
|
24
|
-
|
|
25
|
-
return /*#__PURE__*/_jsx(DSTabsCrossRefContext.Provider, {
|
|
19
|
+
return /* @__PURE__ */ React2.createElement(DSTabsCrossRefContext.Provider, {
|
|
26
20
|
value: crossRefsCtx
|
|
27
|
-
},
|
|
21
|
+
}, /* @__PURE__ */ React2.createElement(DSTabsContext.Provider, {
|
|
28
22
|
value: ctx
|
|
29
|
-
},
|
|
23
|
+
}, /* @__PURE__ */ React2.createElement(TabsContent, null)));
|
|
30
24
|
};
|
|
31
|
-
|
|
25
|
+
DSTabs.propTypes = tabsPropTypes;
|
|
32
26
|
const DSTabsWithSchema = describe(DSTabs);
|
|
33
27
|
DSTabsWithSchema.propTypes = tabsPropTypes;
|
|
34
|
-
|
|
35
|
-
export {
|
|
28
|
+
var DSTabs_default = DSTabs;
|
|
29
|
+
export {
|
|
30
|
+
DSTabs,
|
|
31
|
+
DSTabsWithSchema,
|
|
32
|
+
DSTabs_default as default
|
|
33
|
+
};
|
|
34
|
+
//# sourceMappingURL=DSTabs.js.map
|