@elliemae/ds-tabs 2.2.0 → 2.3.0-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (104) hide show
  1. package/cjs/DSTabs.js +58 -40
  2. package/cjs/DSTabs.js.map +7 -0
  3. package/cjs/DSTabsCTX.js +51 -25
  4. package/cjs/DSTabsCTX.js.map +7 -0
  5. package/cjs/DSTabsDatatestid.js +42 -14
  6. package/cjs/DSTabsDatatestid.js.map +7 -0
  7. package/cjs/DSTabsTypes.js +27 -2
  8. package/cjs/DSTabsTypes.js.map +7 -0
  9. package/cjs/config/useCrossRef.js +38 -11
  10. package/cjs/config/useCrossRef.js.map +7 -0
  11. package/cjs/config/useTabs.js +53 -36
  12. package/cjs/config/useTabs.js.map +7 -0
  13. package/cjs/defaultProps.js +39 -13
  14. package/cjs/defaultProps.js.map +7 -0
  15. package/cjs/exportsRelated/DSTab.js +46 -32
  16. package/cjs/exportsRelated/DSTab.js.map +7 -0
  17. package/cjs/index.js +38 -17
  18. package/cjs/index.js.map +7 -0
  19. package/cjs/parts/carousel/Carousel.js +61 -53
  20. package/cjs/parts/carousel/Carousel.js.map +7 -0
  21. package/cjs/parts/carousel/styles.js +77 -63
  22. package/cjs/parts/carousel/styles.js.map +7 -0
  23. package/cjs/parts/carousel/useCarousel.js +51 -49
  24. package/cjs/parts/carousel/useCarousel.js.map +7 -0
  25. package/cjs/parts/carousel/useCarouselCallbacks.js +53 -36
  26. package/cjs/parts/carousel/useCarouselCallbacks.js.map +7 -0
  27. package/cjs/parts/tabBar/TabBar.js +131 -120
  28. package/cjs/parts/tabBar/TabBar.js.map +7 -0
  29. package/cjs/parts/tabBar/styles.js +289 -195
  30. package/cjs/parts/tabBar/styles.js.map +7 -0
  31. package/cjs/parts/tabBar/useTabBar.js +66 -62
  32. package/cjs/parts/tabBar/useTabBar.js.map +7 -0
  33. package/cjs/parts/tabsContent/TabsContent.js +49 -45
  34. package/cjs/parts/tabsContent/TabsContent.js.map +7 -0
  35. package/cjs/parts/tabsContent/styles.js +39 -15
  36. package/cjs/parts/tabsContent/styles.js.map +7 -0
  37. package/cjs/parts/tabsPanel/TabsPanels.js +60 -58
  38. package/cjs/parts/tabsPanel/TabsPanels.js.map +7 -0
  39. package/cjs/parts/tabsPanel/styles.js +43 -23
  40. package/cjs/parts/tabsPanel/styles.js.map +7 -0
  41. package/cjs/propTypes.js +54 -29
  42. package/cjs/propTypes.js.map +7 -0
  43. package/cjs/utils/constants.js +44 -16
  44. package/cjs/utils/constants.js.map +7 -0
  45. package/cjs/utils/helpers.js +63 -22
  46. package/cjs/utils/helpers.js.map +7 -0
  47. package/cjs/utils/hooks/useKeyboardNavigation.js +59 -43
  48. package/cjs/utils/hooks/useKeyboardNavigation.js.map +7 -0
  49. package/cjs/utils/hooks/useTabsCallbacks.js +46 -45
  50. package/cjs/utils/hooks/useTabsCallbacks.js.map +7 -0
  51. package/esm/DSTabs.js +24 -25
  52. package/esm/DSTabs.js.map +7 -0
  53. package/esm/DSTabsCTX.js +22 -20
  54. package/esm/DSTabsCTX.js.map +7 -0
  55. package/esm/DSTabsDatatestid.js +13 -10
  56. package/esm/DSTabsDatatestid.js.map +7 -0
  57. package/esm/DSTabsTypes.js +2 -1
  58. package/esm/DSTabsTypes.js.map +7 -0
  59. package/esm/config/useCrossRef.js +6 -4
  60. package/esm/config/useCrossRef.js.map +7 -0
  61. package/esm/config/useTabs.js +14 -22
  62. package/esm/config/useTabs.js.map +7 -0
  63. package/esm/defaultProps.js +9 -8
  64. package/esm/defaultProps.js.map +7 -0
  65. package/esm/exportsRelated/DSTab.js +15 -19
  66. package/esm/exportsRelated/DSTab.js.map +7 -0
  67. package/esm/index.js +9 -4
  68. package/esm/index.js.map +7 -0
  69. package/esm/parts/carousel/Carousel.js +25 -38
  70. package/esm/parts/carousel/Carousel.js.map +7 -0
  71. package/esm/parts/carousel/styles.js +48 -52
  72. package/esm/parts/carousel/styles.js.map +7 -0
  73. package/esm/parts/carousel/useCarousel.js +15 -34
  74. package/esm/parts/carousel/useCarousel.js.map +7 -0
  75. package/esm/parts/carousel/useCarouselCallbacks.js +20 -28
  76. package/esm/parts/carousel/useCarouselCallbacks.js.map +7 -0
  77. package/esm/parts/tabBar/TabBar.js +100 -102
  78. package/esm/parts/tabBar/TabBar.js.map +7 -0
  79. package/esm/parts/tabBar/styles.js +262 -183
  80. package/esm/parts/tabBar/styles.js.map +7 -0
  81. package/esm/parts/tabBar/useTabBar.js +27 -44
  82. package/esm/parts/tabBar/useTabBar.js.map +7 -0
  83. package/esm/parts/tabsContent/TabsContent.js +19 -35
  84. package/esm/parts/tabsContent/TabsContent.js.map +7 -0
  85. package/esm/parts/tabsContent/styles.js +10 -7
  86. package/esm/parts/tabsContent/styles.js.map +7 -0
  87. package/esm/parts/tabsPanel/TabsPanels.js +28 -45
  88. package/esm/parts/tabsPanel/TabsPanels.js.map +7 -0
  89. package/esm/parts/tabsPanel/styles.js +14 -15
  90. package/esm/parts/tabsPanel/styles.js.map +7 -0
  91. package/esm/propTypes.js +25 -24
  92. package/esm/propTypes.js.map +7 -0
  93. package/esm/utils/constants.js +15 -8
  94. package/esm/utils/constants.js.map +7 -0
  95. package/esm/utils/helpers.js +33 -11
  96. package/esm/utils/helpers.js.map +7 -0
  97. package/esm/utils/hooks/useKeyboardNavigation.js +30 -39
  98. package/esm/utils/hooks/useKeyboardNavigation.js.map +7 -0
  99. package/esm/utils/hooks/useTabsCallbacks.js +15 -39
  100. package/esm/utils/hooks/useTabsCallbacks.js.map +7 -0
  101. package/package.json +6 -6
  102. package/types/DSTabs.d.ts +2 -2
  103. package/types/DSTabsTypes.d.ts +4 -0
  104. package/types/utils/helpers.d.ts +2 -1
package/cjs/propTypes.js CHANGED
@@ -1,33 +1,58 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var reactDesc = require('react-desc');
6
- var constants = require('./utils/constants.js');
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: reactDesc.PropTypes.string.description('Unique Tab id.').defaultValue(''),
10
- title: reactDesc.PropTypes.string.description('Tab title.').defaultValue(''),
11
- required: reactDesc.PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),
12
- disabled: reactDesc.PropTypes.bool.description('Disables Tab.').defaultValue(false)
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: reactDesc.PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),
16
- enableMouseEvents: reactDesc.PropTypes.bool.description('Enables Tab transition with mouse drag events.').defaultValue(false),
17
- allowTextSelection: reactDesc.PropTypes.bool.description('Allows text selection when mouse drag events are active.').defaultValue(false),
18
- onTabChange: reactDesc.PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),
19
- type: reactDesc.PropTypes.oneOf(constants.TabTypesValuesAsArray).description('Tab type.').defaultValue(constants.TabTypesValuesAsArray[0]),
20
- tabBarExtraContent: reactDesc.PropTypes.element.description('Extra content next to the Tab Bar.').defaultValue(undefined),
21
- onlyRenderActiveTab: reactDesc.PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),
22
- withCarousel: reactDesc.PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),
23
- activeTab: reactDesc.PropTypes.string.description('Passing a value makes DSTabs a controlled component.').defaultValue('First DSTab children.'),
24
- children: reactDesc.PropTypes.node.description('Use DSTab component as children.').isRequired,
25
- tabsListAriaLabel: reactDesc.PropTypes.string.description('Aria label for the list.').defaultValue('Tab list.'),
26
- containerProps: reactDesc.PropTypes.object.description('Additional properties for the container.').defaultValue({}),
27
- innerRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.shape({
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
- exports.tabPropTypes = tabPropTypes;
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
+ }
@@ -1,18 +1,50 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
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: 'normal',
7
- NORMAL_SMALL: 'normal_small',
8
- SUBTABS: '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: '0px',
14
- width: '0px',
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
- exports.MOBILE_GRADIENT_WIDTH = MOBILE_GRADIENT_WIDTH;
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
+ }
@@ -1,17 +1,49 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var constants = require('./constants.js');
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 = function (tab, tabContainer) {
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) > constants.MOBILE_GRADIENT_WIDTH;
39
- const shouldHaveRightGradient = (scrollLeft, clientWidth, scrollWidth) => Math.abs(scrollLeft) <= scrollWidth - (clientWidth + constants.MOBILE_GRADIENT_WIDTH);
40
-
41
- exports.getIdByIndex = getIdByIndex;
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
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var React = require('react');
6
- var DSTabsCTX = require('../../DSTabsCTX.js');
7
-
8
- /* eslint-disable max-statements */
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
- focusableTabsRef
12
- } = React.useContext(DSTabsCTX.DSTabsContext);
13
- const {
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[(focusableTabsRef === null || focusableTabsRef === void 0 ? void 0 : (_focusableTabsRef$cur = focusableTabsRef.current) === null || _focusableTabsRef$cur === void 0 ? void 0 : (_focusableTabsRef$cur2 = _focusableTabsRef$cur.indexOf) === null || _focusableTabsRef$cur2 === void 0 ? void 0 : _focusableTabsRef$cur2.call(_focusableTabsRef$cur, e.target)) + 1];
24
- if (nextTab) nextTab.focus();
25
- if (!nextTab) return;
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[(focusableTabsRef === null || focusableTabsRef === void 0 ? void 0 : (_focusableTabsRef$cur3 = focusableTabsRef.current) === null || _focusableTabsRef$cur3 === void 0 ? void 0 : (_focusableTabsRef$cur4 = _focusableTabsRef$cur3.indexOf) === null || _focusableTabsRef$cur4 === void 0 ? void 0 : _focusableTabsRef$cur4.call(_focusableTabsRef$cur3, e.target)) - 1];
34
- if (prevTab) prevTab.focus();
35
- if (!prevTab) return;
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 = (firstSubtabInternalRef === null || firstSubtabInternalRef === void 0 ? void 0 : firstSubtabInternalRef.current) && (lastTabInternalRef === null || lastTabInternalRef === void 0 ? void 0 : lastTabInternalRef.current);
44
- if (canFocusCrossTabs) (_firstSubtabInternalR = firstSubtabInternalRef.current) === null || _firstSubtabInternalR === void 0 ? void 0 : _firstSubtabInternalR.focus();
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 = (firstSubtabInternalRef === null || firstSubtabInternalRef === void 0 ? void 0 : firstSubtabInternalRef.current) && (lastTabInternalRef === null || lastTabInternalRef === void 0 ? void 0 : lastTabInternalRef.current);
53
- if (canFocusCrossTabs) (_lastTabInternalRef$c = lastTabInternalRef.current) === null || _lastTabInternalRef$c === void 0 ? void 0 : _lastTabInternalRef$c.focus();
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
- exports.useKeyboardNavigation = useKeyboardNavigation;
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
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var React = require('react');
6
- var DSTabsCTX = require('../../DSTabsCTX.js');
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
- onTabChange,
14
- isDSMobile,
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
- centerTabWhenTabChangeMobile(e);
46
+ (0, import_helpers.centerTab)({ e, listRef: tabsListRef });
47
47
  }
48
- }, [centerTabWhenTabChangeMobile, fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab]);
49
- const handleOnMouseDown = React.useCallback(e => {
50
- const role = e.target.getAttribute('role');
51
- if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();
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
- exports.useTabsCallbacks = useTabsCallbacks;
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 _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import { describe } from 'react-desc';
3
- import { tabsPropTypes } from './propTypes.js';
4
- import { DSTabsContext, DSTabsCrossRefContext } from './DSTabsCTX.js';
5
- import { TabsContent } from './parts/tabsContent/TabsContent.js';
6
- import { useTabs } from './config/useTabs.js';
7
- import { useCrossRef } from './config/useCrossRef.js';
8
- import { TabTypes } from './utils/constants.js';
9
-
10
- var _TabsContent, _TabsContent2;
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 /*#__PURE__*/_jsx(DSTabsContext.Provider, {
15
+ return /* @__PURE__ */ React2.createElement(DSTabsContext.Provider, {
21
16
  value: ctx
22
- }, void 0, _TabsContent || (_TabsContent = /*#__PURE__*/_jsx(TabsContent, {})));
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
- }, void 0, /*#__PURE__*/_jsx(DSTabsContext.Provider, {
21
+ }, /* @__PURE__ */ React2.createElement(DSTabsContext.Provider, {
28
22
  value: ctx
29
- }, void 0, _TabsContent2 || (_TabsContent2 = /*#__PURE__*/_jsx(TabsContent, {}))));
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 { DSTabs, DSTabsWithSchema, DSTabs as default };
28
+ var DSTabs_default = DSTabs;
29
+ export {
30
+ DSTabs,
31
+ DSTabsWithSchema,
32
+ DSTabs_default as default
33
+ };
34
+ //# sourceMappingURL=DSTabs.js.map