@ebay/ui-core-react 7.4.0-alpha.9 → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (215) hide show
  1. package/README.md +2 -5
  2. package/array.polyfill.flat-5BAolFdk.js +1 -0
  3. package/badge-CoHKfiPt.js +1 -0
  4. package/button-6S4U-4HH.js +1 -0
  5. package/calendar-hBaLhOjI.js +1 -0
  6. package/common/dropdown.d.ts +20 -0
  7. package/common/dropdown.d.ts.map +1 -0
  8. package/common/floating-label-utils/hooks.d.ts.map +1 -1
  9. package/debounce-BQsYxxOL.js +1 -0
  10. package/dialog-previous-button-B-fysL3O.js +1 -0
  11. package/dropdown-pp-aluo7.js +1 -0
  12. package/ebay-accordion/README.md +61 -0
  13. package/ebay-accordion/accordion.d.ts +16 -0
  14. package/ebay-accordion/accordion.d.ts.map +1 -0
  15. package/ebay-accordion/index.d.ts +3 -0
  16. package/ebay-accordion/index.d.ts.map +1 -0
  17. package/ebay-accordion/index.js +2 -0
  18. package/ebay-alert-dialog/index.js +1 -26
  19. package/ebay-badge/index.js +1 -4
  20. package/ebay-breadcrumbs/index.js +1 -47
  21. package/ebay-button/README.md +1 -1
  22. package/ebay-button/button.d.ts.map +1 -1
  23. package/ebay-button/index.js +1 -5
  24. package/ebay-button/types.d.ts +1 -1
  25. package/ebay-button/types.d.ts.map +1 -1
  26. package/ebay-calendar/index.js +1 -4
  27. package/ebay-carousel/index.js +1 -345
  28. package/ebay-checkbox/index.js +1 -52
  29. package/ebay-confirm-dialog/index.js +1 -28
  30. package/ebay-cta-button/index.js +1 -22
  31. package/ebay-date-textbox/date-textbox.d.ts.map +1 -1
  32. package/ebay-date-textbox/index.js +1 -140
  33. package/ebay-details/README.md +51 -0
  34. package/ebay-details/ebay-details.d.ts +17 -0
  35. package/ebay-details/ebay-details.d.ts.map +1 -0
  36. package/ebay-details/index.d.ts +2 -0
  37. package/ebay-details/index.d.ts.map +1 -0
  38. package/ebay-details/index.js +1 -0
  39. package/ebay-details-q_d7qlcN.js +1 -0
  40. package/ebay-dialog-base/index.js +1 -13
  41. package/{ebay-drawer-dialog → ebay-drawer-dialog-deprecated}/README.md +9 -8
  42. package/{ebay-drawer-dialog → ebay-drawer-dialog-deprecated}/components/drawer.d.ts +2 -6
  43. package/ebay-drawer-dialog-deprecated/components/drawer.d.ts.map +1 -0
  44. package/ebay-drawer-dialog-deprecated/index.d.ts +2 -0
  45. package/ebay-drawer-dialog-deprecated/index.d.ts.map +1 -0
  46. package/ebay-drawer-dialog-deprecated/index.js +1 -0
  47. package/ebay-eek/index.js +1 -54
  48. package/ebay-fake-menu/index.js +1 -10
  49. package/ebay-fake-menu/menu.d.ts +4 -3
  50. package/ebay-fake-menu/menu.d.ts.map +1 -1
  51. package/ebay-fake-menu-button/README.md +1 -1
  52. package/ebay-fake-menu-button/index.js +1 -7
  53. package/ebay-fake-menu-button/menu-button.d.ts.map +1 -1
  54. package/ebay-fake-tabs/index.js +1 -30
  55. package/ebay-field/index.js +1 -21
  56. package/{ebay-fullscreen-dialog → ebay-fullscreen-dialog-deprecated}/README.md +6 -4
  57. package/{ebay-fullscreen-dialog → ebay-fullscreen-dialog-deprecated}/fullscreen-dialog.d.ts +2 -2
  58. package/ebay-fullscreen-dialog-deprecated/fullscreen-dialog.d.ts.map +1 -0
  59. package/ebay-fullscreen-dialog-deprecated/index.d.ts +2 -0
  60. package/ebay-fullscreen-dialog-deprecated/index.d.ts.map +1 -0
  61. package/ebay-fullscreen-dialog-deprecated/index.js +1 -0
  62. package/ebay-icon/README.md +1 -1
  63. package/ebay-icon/index.js +1 -4
  64. package/ebay-icon/types.d.ts +1 -1
  65. package/ebay-icon/types.d.ts.map +1 -1
  66. package/ebay-icon-button/index.js +1 -4
  67. package/ebay-infotip/README.md +0 -2
  68. package/ebay-infotip/ebay-infotip.d.ts +0 -2
  69. package/ebay-infotip/ebay-infotip.d.ts.map +1 -1
  70. package/ebay-infotip/index.js +1 -76
  71. package/ebay-inline-notice/index.js +1 -36
  72. package/ebay-lightbox-dialog/README.md +2 -0
  73. package/ebay-lightbox-dialog/index.js +1 -12
  74. package/ebay-lightbox-dialog/lightbox-dialog.d.ts +3 -1
  75. package/ebay-lightbox-dialog/lightbox-dialog.d.ts.map +1 -1
  76. package/ebay-listbox/README.md +1 -1
  77. package/ebay-listbox/index.js +1 -6
  78. package/ebay-listbox/listbox.d.ts +0 -1
  79. package/ebay-listbox/listbox.d.ts.map +1 -1
  80. package/ebay-listbox-button/index.d.ts +2 -1
  81. package/ebay-listbox-button/index.d.ts.map +1 -1
  82. package/ebay-listbox-button/index.js +2 -151
  83. package/ebay-listbox-button/listbox-button-option.d.ts +10 -0
  84. package/ebay-listbox-button/listbox-button-option.d.ts.map +1 -0
  85. package/ebay-listbox-button/listbox-button.d.ts +5 -15
  86. package/ebay-listbox-button/listbox-button.d.ts.map +1 -1
  87. package/ebay-menu/index.js +1 -9
  88. package/ebay-menu/menu.d.ts.map +1 -1
  89. package/ebay-menu/types.d.ts +2 -1
  90. package/ebay-menu/types.d.ts.map +1 -1
  91. package/ebay-menu-button/README.md +1 -1
  92. package/ebay-menu-button/index.js +1 -113
  93. package/ebay-menu-button/menu-button.d.ts.map +1 -1
  94. package/ebay-notice-base/index.js +1 -7
  95. package/ebay-page-notice/index.js +1 -50
  96. package/ebay-pagination/index.js +1 -244
  97. package/ebay-panel-dialog/index.js +1 -12
  98. package/ebay-progress-bar/index.js +1 -6
  99. package/ebay-progress-spinner/index.js +1 -4
  100. package/ebay-progress-stepper/index.js +1 -72
  101. package/ebay-radio/index.js +1 -4
  102. package/ebay-section-notice/index.js +1 -69
  103. package/ebay-section-title/index.js +1 -38
  104. package/ebay-segmented-buttons/index.js +1 -46
  105. package/ebay-select/index.js +1 -98
  106. package/ebay-signal/index.js +1 -9
  107. package/ebay-snackbar-dialog/index.js +1 -81
  108. package/ebay-split-button/README.md +1 -1
  109. package/ebay-split-button/index.js +1 -22
  110. package/ebay-star-rating/index.js +1 -9
  111. package/ebay-star-rating-select/index.js +1 -55
  112. package/ebay-svg/index.js +1 -5189
  113. package/ebay-svg/symbols.d.ts.map +1 -1
  114. package/ebay-switch/index.js +1 -27
  115. package/ebay-tabs/README.md +1 -3
  116. package/ebay-tabs/index.js +1 -88
  117. package/ebay-tabs/tabs.d.ts.map +1 -1
  118. package/ebay-tabs/types.d.ts +2 -6
  119. package/ebay-tabs/types.d.ts.map +1 -1
  120. package/ebay-textbox/index.js +1 -10
  121. package/ebay-toast-dialog/README.md +3 -3
  122. package/ebay-toast-dialog/index.js +1 -9
  123. package/ebay-toggle-button/README.md +39 -0
  124. package/ebay-toggle-button/index.d.ts +3 -0
  125. package/ebay-toggle-button/index.d.ts.map +1 -0
  126. package/ebay-toggle-button/index.js +1 -0
  127. package/ebay-toggle-button/toggle-button.d.ts +5 -0
  128. package/ebay-toggle-button/toggle-button.d.ts.map +1 -0
  129. package/ebay-toggle-button/types.d.ts +23 -0
  130. package/ebay-toggle-button/types.d.ts.map +1 -0
  131. package/ebay-toggle-button-group/README.md +56 -0
  132. package/ebay-toggle-button-group/index.d.ts +3 -0
  133. package/ebay-toggle-button-group/index.d.ts.map +1 -0
  134. package/ebay-toggle-button-group/index.js +1 -0
  135. package/ebay-toggle-button-group/toggle-button-group.d.ts +5 -0
  136. package/ebay-toggle-button-group/toggle-button-group.d.ts.map +1 -0
  137. package/ebay-toggle-button-group/types.d.ts +20 -0
  138. package/ebay-toggle-button-group/types.d.ts.map +1 -0
  139. package/ebay-tooltip/index.js +1 -64
  140. package/ebay-tourtip/index.js +1 -54
  141. package/ebay-video/index.js +1 -229
  142. package/events/index.js +1 -18
  143. package/forwardRef-fPwzYd82.js +1 -0
  144. package/hooks-5qES90Sx.js +1 -0
  145. package/icon-D4RDqpD4.js +1 -0
  146. package/icon-button-Bjjvld0a.js +1 -0
  147. package/index-Bsb1LHpi.js +1 -0
  148. package/label-CnrpYJ-g.js +1 -0
  149. package/lightbox-dialog-Il3dBNcR.js +1 -0
  150. package/menu-DAOhKkcI.js +1 -0
  151. package/menu-button-label-DJq794te.js +1 -0
  152. package/menu-button-label-D_04ZC3p.js +1 -0
  153. package/menu-item-Cf-tQ72X.js +1 -0
  154. package/notice-content-9iF4T8uB.js +1 -0
  155. package/notice-content-C0ZStfuX.js +1 -0
  156. package/notice-cta-FAd6zCdx.js +1 -0
  157. package/package.json +19 -84
  158. package/progress-spinner-CF3qoWE3.js +1 -0
  159. package/range-DOsPN0h5.js +1 -0
  160. package/scroll-OgAngNzq.js +1 -0
  161. package/textbox-DZRVQetR.js +1 -0
  162. package/toggle-button-CFPnYlex.js +1 -0
  163. package/use-roving-index-DoAVBgsp.js +1 -0
  164. package/use-tooltip-BEiQpMDa.js +1 -0
  165. package/utils/index.d.ts +1 -0
  166. package/utils/index.d.ts.map +1 -1
  167. package/utils/index.js +1 -13
  168. package/utils-C9NL3q0j.js +1 -0
  169. package/array.polyfill.flat-DyxysTxZ.js +0 -21
  170. package/badge-CR5t7-2L.js +0 -8
  171. package/button-B4bZIgwB.js +0 -83
  172. package/calendar-D-DWjrMU.js +0 -333
  173. package/common/component-utils/forwardRef/index.js +0 -10
  174. package/common/component-utils/index.js +0 -9
  175. package/common/component-utils/utils/index.js +0 -25
  176. package/common/event-utils/index.js +0 -113
  177. package/common/floating-label-utils/hooks/index.js +0 -106
  178. package/common/notice-utils/notice-cta/index.js +0 -5
  179. package/common/random-id/index.js +0 -13
  180. package/common/tooltip-utils/constants/index.js +0 -97
  181. package/common/tooltip-utils/index.js +0 -11
  182. package/debounce-v8bWAUnY.js +0 -9
  183. package/dialog-previous-button-EC_Y6KaT.js +0 -370
  184. package/drawer-DBDktEBZ.js +0 -69
  185. package/ebay-dialog-base/components/animation/index.js +0 -92
  186. package/ebay-dialog-base/components/dialog-footer/index.js +0 -4
  187. package/ebay-dialog-base/components/dialog-header/index.js +0 -4
  188. package/ebay-drawer-dialog/components/drawer.d.ts.map +0 -1
  189. package/ebay-drawer-dialog/index.d.ts +0 -2
  190. package/ebay-drawer-dialog/index.d.ts.map +0 -1
  191. package/ebay-drawer-dialog/index.js +0 -4
  192. package/ebay-fake-menu/menu-item/index.js +0 -49
  193. package/ebay-fake-menu-button/menu-button/index.js +0 -12
  194. package/ebay-fullscreen-dialog/fullscreen-dialog.d.ts.map +0 -1
  195. package/ebay-fullscreen-dialog/index.d.ts +0 -2
  196. package/ebay-fullscreen-dialog/index.d.ts.map +0 -1
  197. package/ebay-fullscreen-dialog/index.js +0 -10
  198. package/ebay-radio/radio/index.js +0 -48
  199. package/icon-B17Di3YL.js +0 -56
  200. package/icon-button-BQWoMgX1.js +0 -31
  201. package/index-BXizW4ue.js +0 -89
  202. package/index-DcH7Tjjd.js +0 -272
  203. package/label-C0AS4fnO.js +0 -19
  204. package/listbox-DfOw_fJc.js +0 -662
  205. package/menu-Bsy48CE1.js +0 -163
  206. package/menu-button-CKGsgg6G.js +0 -89
  207. package/menu-fCOy6wBS.js +0 -29
  208. package/notice-content-BTXVxttv.js +0 -8
  209. package/notice-content-BhUeK1pd.js +0 -3
  210. package/notice-footer-CIQ8SM6N.js +0 -10
  211. package/progress-spinner-DOFKRtuu.js +0 -20
  212. package/range-C5qzyhg4.js +0 -3
  213. package/textbox-J291yCpJ.js +0 -136
  214. package/use-roving-index-CEM_UsCH.js +0 -58
  215. package/use-tooltip-7JxcZHJn.js +0 -92
@@ -1,13 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const React = require("react");
4
- const randomId = () => Math.random().toString(16).slice(-4);
5
- const useRandomId = () => {
6
- const [id, setId] = React.useState("");
7
- React.useEffect(() => {
8
- setId(randomId());
9
- }, []);
10
- return id;
11
- };
12
- exports.randomId = randomId;
13
- exports.useRandomId = useRandomId;
@@ -1,97 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const DEFAULT_POINTER_DIRECTION = "bottom";
4
- const TYPE_ROLES = {
5
- tooltip: "tooltip",
6
- tourtip: "region",
7
- infotip: ""
8
- };
9
- const POINTER_STYLES = {
10
- left: {
11
- transform: "translateX(16px) translateY(-50%) scale3d(1,1,1)",
12
- left: "100%",
13
- right: "auto",
14
- top: "-6px",
15
- bottom: "auto"
16
- },
17
- "left-top": {
18
- transform: "translateX(16px) scale3d(1,1,1)",
19
- left: "100%",
20
- right: "auto",
21
- top: "-100%",
22
- bottom: "auto"
23
- },
24
- "left-bottom": {
25
- transform: "translateX(16px) scale3d(1,1,1)",
26
- left: "100%",
27
- right: "auto",
28
- top: "auto",
29
- bottom: "-10px"
30
- },
31
- right: {
32
- transform: "translateX(-16px) translateY(-50%) scale3d(1,1,1)",
33
- left: "auto",
34
- right: "100%",
35
- top: "-6px",
36
- bottom: "auto"
37
- },
38
- "right-top": {
39
- transform: "translateX(-16px) scale3d(1,1,1)",
40
- left: "auto",
41
- right: "100%",
42
- top: "-100%",
43
- bottom: "auto"
44
- },
45
- "right-bottom": {
46
- transform: "translateX(-16px) scale3d(1,1,1)",
47
- left: "auto",
48
- right: "100%",
49
- top: "auto",
50
- bottom: "-50%"
51
- },
52
- top: {
53
- transform: "translateX(-50%) scale3d(1,1,1)",
54
- left: "50%",
55
- right: "auto",
56
- top: "calc(100% + 2px)",
57
- bottom: "auto"
58
- },
59
- "top-left": {
60
- transform: "scale3d(1,1,1)",
61
- left: "-10px",
62
- right: "auto",
63
- top: "calc(100% + 2px)",
64
- bottom: "auto"
65
- },
66
- "top-right": {
67
- transform: "scale3d(1,1,1)",
68
- left: "auto",
69
- right: "-10px",
70
- top: "calc(100% + 2px)",
71
- bottom: "auto"
72
- },
73
- "bottom-right": {
74
- transform: "scale3d(1,1,1)",
75
- left: "auto",
76
- right: "-10px",
77
- top: "auto",
78
- bottom: "calc(100% + 12px)"
79
- },
80
- "bottom-left": {
81
- transform: "scale3d(1,1,1)",
82
- left: "-10px",
83
- right: "auto",
84
- top: "auto",
85
- bottom: "calc(100% + 12px)"
86
- },
87
- bottom: {
88
- transform: "translateX(-50%) scale3d(1,1,1)",
89
- left: "50%",
90
- right: "auto",
91
- top: "auto",
92
- bottom: "calc(100% + 12px)"
93
- }
94
- };
95
- exports.DEFAULT_POINTER_DIRECTION = DEFAULT_POINTER_DIRECTION;
96
- exports.POINTER_STYLES = POINTER_STYLES;
97
- exports.TYPE_ROLES = TYPE_ROLES;
@@ -1,11 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const useTooltip = require("../../use-tooltip-7JxcZHJn.js");
4
- const common_tooltipUtils_constants = require("./constants/index.js");
5
- exports.Tooltip = useTooltip.Tooltip;
6
- exports.TooltipContent = useTooltip.TooltipContent;
7
- exports.TooltipFooter = useTooltip.TooltipFooter;
8
- exports.TooltipHost = useTooltip.TooltipHost;
9
- exports.useTooltip = useTooltip.useTooltip;
10
- exports.DEFAULT_POINTER_DIRECTION = common_tooltipUtils_constants.DEFAULT_POINTER_DIRECTION;
11
- exports.POINTER_STYLES = common_tooltipUtils_constants.POINTER_STYLES;
@@ -1,9 +0,0 @@
1
- "use strict";
2
- function debounce(fn, ms) {
3
- let timer;
4
- return (...args) => {
5
- clearTimeout(timer);
6
- timer = setTimeout(() => fn(...args), ms);
7
- };
8
- }
9
- exports.debounce = debounce;
@@ -1,370 +0,0 @@
1
- "use strict";
2
- const React = require("react");
3
- const reactRemoveScroll = require("react-remove-scroll");
4
- const classNames = require("classnames");
5
- const icon = require("./icon-B17Di3YL.js");
6
- const common_randomId = require("./common/random-id/index.js");
7
- const ebayDialogBase_components_animation = require("./ebay-dialog-base/components/animation/index.js");
8
- const ebayDialogBase_components_dialogHeader = require("./ebay-dialog-base/components/dialog-header/index.js");
9
- const ebayDialogBase_components_dialogFooter = require("./ebay-dialog-base/components/dialog-footer/index.js");
10
- const iconButton = require("./icon-button-BQWoMgX1.js");
11
- const EbayDialogCloseButton = ({ children }) => React.createElement(React.Fragment, null, children);
12
- const filterAncestor = (item) => item.nodeType === 1 && item.tagName.toLowerCase() !== "body" && item.tagName.toLowerCase() !== "html";
13
- const filterSibling = (item) => item.nodeType === 1 && item.tagName.toLowerCase() !== "script";
14
- const flattenArrays = (a, b) => a.concat(b);
15
- function getPreviousSiblings(el, siblings = []) {
16
- const previousSibling = el.previousSibling;
17
- if (!previousSibling) {
18
- return siblings;
19
- }
20
- siblings.push(previousSibling);
21
- return getPreviousSiblings(previousSibling, siblings);
22
- }
23
- function getNextSiblings(el, siblings = []) {
24
- const nextSibling = el.nextSibling;
25
- if (!nextSibling) {
26
- return siblings;
27
- }
28
- siblings.push(nextSibling);
29
- return getNextSiblings(nextSibling, siblings);
30
- }
31
- function getSiblings(el) {
32
- const allSiblings = getPreviousSiblings(el).concat(getNextSiblings(el));
33
- return allSiblings.filter(filterSibling);
34
- }
35
- function getAllAncestors(el, ancestors = []) {
36
- const nextAncestor = el.parentNode;
37
- if (!nextAncestor) {
38
- return ancestors;
39
- }
40
- ancestors.push(nextAncestor);
41
- return getAllAncestors(nextAncestor, ancestors);
42
- }
43
- function getAncestors(el) {
44
- return getAllAncestors(el).filter(filterAncestor);
45
- }
46
- function getSiblingsOfAncestors(el) {
47
- return getAncestors(el).map((item) => getSiblings(item)).reduce(flattenArrays, []);
48
- }
49
- let mainEl;
50
- let trappedEl$1;
51
- let dirtyObjects;
52
- const filterSvg = (item) => item.tagName.toLowerCase() !== "svg";
53
- function showElementPrep(el, useHiddenProperty) {
54
- let preparedElement;
55
- if (useHiddenProperty === false) {
56
- preparedElement = prepareElement(el, "aria-hidden", "false");
57
- } else {
58
- preparedElement = prepareElement(el, "hidden", false);
59
- }
60
- return preparedElement;
61
- }
62
- function hideElementPrep(el, useHiddenProperty) {
63
- let preparedElement;
64
- if (useHiddenProperty === false) {
65
- preparedElement = prepareElement(el, "aria-hidden", "true");
66
- } else {
67
- preparedElement = prepareElement(el, "hidden", true);
68
- }
69
- return preparedElement;
70
- }
71
- function prepareElement(el, attributeName, dirtyValue) {
72
- const isProperty = typeof dirtyValue === "boolean";
73
- return {
74
- el,
75
- attributeName,
76
- cleanValue: isProperty ? el[attributeName] : el.getAttribute(attributeName),
77
- dirtyValue,
78
- isProperty
79
- };
80
- }
81
- function dirtyElement(preparedObj) {
82
- if (preparedObj.isProperty === true) {
83
- preparedObj.el[preparedObj.attributeName] = preparedObj.dirtyValue;
84
- } else {
85
- preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.dirtyValue);
86
- }
87
- }
88
- function cleanElement(preparedObj) {
89
- if (preparedObj.cleanValue) {
90
- if (preparedObj.isProperty === true) {
91
- preparedObj.el[preparedObj.attributeName] = preparedObj.cleanValue;
92
- } else {
93
- preparedObj.el.setAttribute(preparedObj.attributeName, preparedObj.cleanValue);
94
- }
95
- } else {
96
- preparedObj.el.removeAttribute(preparedObj.attributeName);
97
- }
98
- }
99
- function untrap$1() {
100
- if (trappedEl$1) {
101
- dirtyObjects.forEach((item) => cleanElement(item));
102
- dirtyObjects = [];
103
- if (mainEl) {
104
- mainEl.setAttribute("role", "main");
105
- }
106
- trappedEl$1.dispatchEvent(new CustomEvent("screenreaderUntrap", { bubbles: true }));
107
- trappedEl$1 = null;
108
- }
109
- }
110
- const defaultOptions = {
111
- useHiddenProperty: false
112
- };
113
- function trap$1(el, selectedOptions) {
114
- untrap$1();
115
- const options = Object.assign({}, defaultOptions, selectedOptions);
116
- trappedEl$1 = el;
117
- mainEl = document.querySelector('main, [role="main"]');
118
- if (mainEl) {
119
- mainEl.setAttribute("role", "presentation");
120
- }
121
- const ancestors = getAncestors(trappedEl$1);
122
- let siblings = getSiblings(trappedEl$1);
123
- let siblingsOfAncestors = getSiblingsOfAncestors(trappedEl$1);
124
- if (options.useHiddenProperty === true) {
125
- siblings = siblings.filter(filterSvg);
126
- siblingsOfAncestors = siblingsOfAncestors.filter(filterSvg);
127
- }
128
- dirtyObjects = [showElementPrep(trappedEl$1, options.useHiddenProperty)].concat(ancestors.map((item) => showElementPrep(item, options.useHiddenProperty))).concat(siblings.map((item) => hideElementPrep(item, options.useHiddenProperty))).concat(siblingsOfAncestors.map((item) => hideElementPrep(item, options.useHiddenProperty)));
129
- dirtyObjects.forEach((item) => dirtyElement(item));
130
- trappedEl$1.dispatchEvent(new CustomEvent("screenreaderTrap", { bubbles: true }));
131
- }
132
- const focusableElList = [
133
- "a[href]",
134
- "area[href]",
135
- "button:not([disabled])",
136
- "embed",
137
- "iframe",
138
- "input:not([disabled])",
139
- "object",
140
- "select:not([disabled])",
141
- "textarea:not([disabled])",
142
- "*[tabindex]",
143
- "*[contenteditable]"
144
- ];
145
- const focusableElSelector = focusableElList.join();
146
- function src_default(el, keyboardOnly = false, callback) {
147
- return getFocusables(el, keyboardOnly);
148
- }
149
- function getFocusables(el, keyboardOnly = false) {
150
- let focusableEls = Array.prototype.slice.call(el.querySelectorAll(focusableElSelector));
151
- focusableEls = focusableEls.filter(function(focusableEl) {
152
- return window.getComputedStyle(focusableEl).display !== "none";
153
- });
154
- if (keyboardOnly === true) {
155
- focusableEls = focusableEls.filter(function(focusableEl) {
156
- return focusableEl.getAttribute("tabindex") !== "-1";
157
- });
158
- }
159
- return focusableEls;
160
- }
161
- let trappedEl;
162
- let topTrap;
163
- let outerTrapBefore;
164
- let innerTrapBefore;
165
- let innerTrapAfter;
166
- let outerTrapAfter;
167
- let botTrap;
168
- let firstFocusableElement;
169
- let lastFocusableElement;
170
- function createTrapBoundary() {
171
- const trapBoundary = document.createElement("div");
172
- trapBoundary.setAttribute("aria-hidden", "true");
173
- trapBoundary.setAttribute("tabindex", "0");
174
- trapBoundary.className = "keyboard-trap-boundary";
175
- return trapBoundary;
176
- }
177
- function setFocusToFirstFocusableElement() {
178
- firstFocusableElement.focus();
179
- }
180
- function setFocusToLastFocusableElement() {
181
- lastFocusableElement.focus();
182
- }
183
- function createTraps() {
184
- topTrap = createTrapBoundary();
185
- outerTrapBefore = topTrap.cloneNode();
186
- innerTrapBefore = topTrap.cloneNode();
187
- innerTrapAfter = topTrap.cloneNode();
188
- outerTrapAfter = topTrap.cloneNode();
189
- botTrap = topTrap.cloneNode();
190
- topTrap.addEventListener("focus", setFocusToFirstFocusableElement);
191
- outerTrapBefore.addEventListener("focus", setFocusToFirstFocusableElement);
192
- innerTrapBefore.addEventListener("focus", setFocusToLastFocusableElement);
193
- innerTrapAfter.addEventListener("focus", setFocusToFirstFocusableElement);
194
- outerTrapAfter.addEventListener("focus", setFocusToLastFocusableElement);
195
- botTrap.addEventListener("focus", setFocusToLastFocusableElement);
196
- }
197
- function untrap() {
198
- if (trappedEl) {
199
- topTrap = safeDetach(topTrap);
200
- outerTrapBefore = safeDetach(outerTrapBefore);
201
- innerTrapBefore = safeDetach(innerTrapBefore);
202
- innerTrapAfter = safeDetach(innerTrapAfter);
203
- outerTrapAfter = safeDetach(outerTrapAfter);
204
- botTrap = safeDetach(botTrap);
205
- trappedEl.classList.remove("keyboard-trap--active");
206
- trappedEl.dispatchEvent(new CustomEvent("keyboardUntrap", { bubbles: true }));
207
- trappedEl = null;
208
- }
209
- return trappedEl;
210
- }
211
- function safeDetach(el) {
212
- const parent = el.parentNode;
213
- return parent ? parent.removeChild(el) : el;
214
- }
215
- function trap(el) {
216
- if (!topTrap) {
217
- createTraps();
218
- } else {
219
- untrap();
220
- }
221
- trappedEl = el;
222
- const body = typeof document === "undefined" ? null : document.body;
223
- const focusableElements = src_default(trappedEl, true);
224
- firstFocusableElement = focusableElements[0];
225
- lastFocusableElement = focusableElements[focusableElements.length - 1];
226
- body.insertBefore(topTrap, body.childNodes[0]);
227
- trappedEl.parentNode.insertBefore(outerTrapBefore, trappedEl);
228
- trappedEl.insertBefore(innerTrapBefore, trappedEl.childNodes[0]);
229
- trappedEl.appendChild(innerTrapAfter);
230
- trappedEl.parentNode.insertBefore(outerTrapAfter, trappedEl.nextElementSibling);
231
- body.appendChild(botTrap);
232
- trappedEl.dispatchEvent(new CustomEvent("keyboardTrap", { bubbles: true }));
233
- trappedEl.classList.add("keyboard-trap--active");
234
- return trappedEl;
235
- }
236
- const DialogBase = ({ baseEl: Container = "div", classPrefix = "drawer-dialog", windowClass, windowType, mainId, top, header, buttonPosition = "right", children, ariaLabelledby, a11yCloseText, onCloseBtnClick = () => {
237
- }, footer, actions, onScroll, open = false, onOpen = () => {
238
- }, onBackgroundClick = () => {
239
- }, ignoreEscape, closeButton, previousButton, isModal, role = "dialog", focus, transitionElement, animated, closeButtonClass, ...props }) => {
240
- var _a;
241
- const dialogRef = React.useRef(null);
242
- const drawerBaseEl = React.useRef(null);
243
- const closeButtonRef = React.useRef(null);
244
- const [rId, setRandomId] = React.useState("");
245
- React.useEffect(() => {
246
- setRandomId(common_randomId.randomId());
247
- }, []);
248
- React.useEffect(() => {
249
- let timeout;
250
- const handleBackgroundClick = (e) => {
251
- if (drawerBaseEl.current && !drawerBaseEl.current.contains(e.target)) {
252
- onBackgroundClick(e);
253
- }
254
- };
255
- if (open && buttonPosition !== "hidden") {
256
- timeout = window.setTimeout(() => {
257
- document.addEventListener("click", handleBackgroundClick, false);
258
- });
259
- }
260
- return () => {
261
- clearTimeout(timeout);
262
- document.removeEventListener("click", handleBackgroundClick, false);
263
- };
264
- }, [onBackgroundClick, open]);
265
- React.useEffect(() => {
266
- if (open && isModal) {
267
- trap$1(drawerBaseEl.current);
268
- trap(drawerBaseEl.current);
269
- } else {
270
- untrap$1();
271
- untrap();
272
- }
273
- return () => {
274
- untrap$1();
275
- untrap();
276
- };
277
- }, [open, isModal]);
278
- ebayDialogBase_components_animation.useDialogAnimation({
279
- open,
280
- classPrefix,
281
- transitionElement,
282
- dialogRef,
283
- dialogWindowRef: drawerBaseEl,
284
- enabled: animated,
285
- onTransitionEnd: () => handleFocus(open)
286
- });
287
- const onKeyDown = (event) => {
288
- if (!ignoreEscape && event.key === "Escape") {
289
- event.stopPropagation();
290
- onCloseBtnClick(event);
291
- }
292
- };
293
- React.useEffect(() => {
294
- if (!animated) {
295
- handleFocus(open);
296
- }
297
- if (open) {
298
- onOpen();
299
- }
300
- }, [open]);
301
- function handleFocus(isOpen) {
302
- var _a2, _b;
303
- if (isOpen) {
304
- if (focus) {
305
- (_a2 = focus.current) == null ? void 0 : _a2.focus();
306
- } else if (isModal) {
307
- (_b = closeButtonRef.current) == null ? void 0 : _b.focus();
308
- }
309
- document.addEventListener("keydown", onKeyDown, false);
310
- return () => document.removeEventListener("keydown", onKeyDown, false);
311
- }
312
- }
313
- const closeButtonContent = buttonPosition !== "hidden" && React.createElement("button", { ref: closeButtonRef, className: classNames(`icon-btn`, closeButtonClass, `${classPrefix}__close`, {
314
- "icon-btn--transparent": classPrefix === `toast-dialog`
315
- }), type: "button", "aria-label": a11yCloseText, onClick: onCloseBtnClick }, closeButton || React.createElement(icon.EbayIcon, { name: "close16" }));
316
- const windowClassName = windowType ? `${classPrefix}__${windowType}-window` : `${classPrefix}__window`;
317
- const dialogTitleId = ((_a = header == null ? void 0 : header.props) == null ? void 0 : _a.id) || `dialog-title-${rId}`;
318
- const dialogLabelledBy = ariaLabelledby || dialogTitleId;
319
- const dialogHeader = header ? React.cloneElement(header, { ...header.props, id: dialogTitleId }) : null;
320
- return React.createElement(
321
- Container,
322
- { ...props, "aria-labelledby": dialogLabelledBy, "aria-modal": "true", role, hidden: !open, className: classNames(classPrefix, props.className), "aria-live": !isModal ? "polite" : void 0, ref: dialogRef, onKeyDown },
323
- React.createElement(
324
- "div",
325
- { className: classNames(windowClassName, windowClass), ref: drawerBaseEl },
326
- top,
327
- dialogHeader && React.createElement(
328
- "div",
329
- { className: `${classPrefix}__header` },
330
- previousButton,
331
- buttonPosition === "right" && dialogHeader,
332
- buttonPosition !== "bottom" && closeButtonContent,
333
- (buttonPosition === "left" || buttonPosition === "hidden") && dialogHeader
334
- ),
335
- React.createElement("div", { id: mainId, className: `${classPrefix}__main`, onScroll }, children),
336
- actions ? React.createElement("div", { className: `${classPrefix}__actions` }, actions) : null,
337
- footer || buttonPosition === "bottom" ? React.createElement(
338
- "div",
339
- { className: `${classPrefix}__footer` },
340
- footer,
341
- buttonPosition === "bottom" && closeButtonContent
342
- ) : null
343
- )
344
- );
345
- };
346
- const DialogBaseWithState = ({ isModal, open, children, animated = true, ...rest }) => {
347
- const shouldRenderModal = isModal !== false;
348
- const childrenArray = React.Children.toArray(children);
349
- const header = childrenArray.find((child) => child.type === ebayDialogBase_components_dialogHeader);
350
- const footer = childrenArray.find((child) => child.type === ebayDialogBase_components_dialogFooter);
351
- const actions = childrenArray.find((child) => child.type === EbayDialogActions);
352
- const closeButton = childrenArray.find((child) => child.type === EbayDialogCloseButton);
353
- const previousButton = childrenArray.find((child) => child.type === EbayDialogPreviousButton);
354
- const content = childrenArray.filter((child) => ![
355
- ebayDialogBase_components_dialogHeader,
356
- ebayDialogBase_components_dialogFooter,
357
- EbayDialogCloseButton,
358
- EbayDialogActions,
359
- EbayDialogPreviousButton
360
- ].some((c) => c === child.type));
361
- const dialogBase = React.createElement(DialogBase, { ...rest, open, isModal: shouldRenderModal, header, footer, actions, closeButton, previousButton, animated }, content);
362
- const renderOverLay = () => shouldRenderModal ? React.createElement(reactRemoveScroll.RemoveScroll, { enabled: open }, dialogBase) : dialogBase;
363
- return animated || open ? renderOverLay() : null;
364
- };
365
- const EbayDialogActions = ({ children }) => React.createElement(React.Fragment, null, children);
366
- const EbayDialogPreviousButton = ({ className, icon: icon2, ...rest }) => React.createElement(iconButton.EbayIconButton, { ...rest, icon: icon2 || "chevronLeft16", className: classNames(className, "lightbox-dialog__prev") });
367
- exports.DialogBaseWithState = DialogBaseWithState;
368
- exports.EbayDialogActions = EbayDialogActions;
369
- exports.EbayDialogCloseButton = EbayDialogCloseButton;
370
- exports.EbayDialogPreviousButton = EbayDialogPreviousButton;
@@ -1,69 +0,0 @@
1
- "use strict";
2
- const React = require("react");
3
- const classNames = require("classnames");
4
- const ebayDialogBase_components_dialogHeader = require("./ebay-dialog-base/components/dialog-header/index.js");
5
- const dialogPreviousButton = require("./dialog-previous-button-EC_Y6KaT.js");
6
- require("./icon-button-BQWoMgX1.js");
7
- const THRESHOLD_TOUCH = 30;
8
- const classPrefix = "drawer-dialog";
9
- const EbayDrawerDialog = ({ expanded: controlledExpanded = false, noHandle, onClose = () => {
10
- }, onCollapsed = () => {
11
- }, onExpanded = () => {
12
- }, a11yMaximizeText, a11yMinimizeText, children, ...rest }) => {
13
- let touches = [];
14
- const [expanded, setExpanded] = React.useState(controlledExpanded);
15
- React.useEffect(() => {
16
- setExpanded(controlledExpanded);
17
- }, [controlledExpanded]);
18
- const setExpandedState = (expand) => {
19
- setExpanded(expand);
20
- if (expand) {
21
- onExpanded();
22
- } else {
23
- onCollapsed();
24
- }
25
- };
26
- const handleTouchStart = (e) => {
27
- touches = Array.from(e.changedTouches).map(({ identifier, pageY }) => ({ identifier, pageY }));
28
- };
29
- const handleTouchEnd = (e) => {
30
- Array.from(e.changedTouches).forEach(({ identifier }) => {
31
- const idx = touches.findIndex((touch) => touch.identifier === identifier);
32
- if (idx > -1) {
33
- touches.splice(idx, 1);
34
- }
35
- });
36
- };
37
- const handleTouchMove = (e) => {
38
- if (touches.length) {
39
- Array.from(e.changedTouches).forEach(({ identifier, pageY }) => {
40
- const compare = touches.findIndex((touch) => touch.identifier === identifier);
41
- const diff = pageY - touches[compare].pageY;
42
- if (diff > THRESHOLD_TOUCH) {
43
- if (expanded) {
44
- setExpandedState(false);
45
- } else {
46
- onClose();
47
- }
48
- handleTouchEnd(e);
49
- } else if (diff < -THRESHOLD_TOUCH) {
50
- setExpandedState(true);
51
- handleTouchEnd(e);
52
- }
53
- });
54
- }
55
- };
56
- const handle = noHandle ? null : React.createElement("button", { "aria-label": expanded ? a11yMinimizeText : a11yMaximizeText, className: `${classPrefix}__handle`, onClick: () => setExpandedState(!expanded), onScroll: () => setExpandedState(true), onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, type: "button" });
57
- const childrenArray = React.Children.toArray(children);
58
- const header = childrenArray.find(({ type }) => type === ebayDialogBase_components_dialogHeader);
59
- const withoutHeader = childrenArray.filter(({ type }) => type !== ebayDialogBase_components_dialogHeader);
60
- return React.createElement(
61
- dialogPreviousButton.DialogBaseWithState,
62
- { ...rest, classPrefix, onCloseBtnClick: onClose, className: classNames(rest.className, `${classPrefix}--mask-fade-slow`), windowClass: classNames(rest.windowClass, `${classPrefix}__window`, `${classPrefix}__window--slide`, {
63
- [`${classPrefix}__window--expanded`]: expanded
64
- }), onBackgroundClick: onClose, top: handle },
65
- header || React.createElement(ebayDialogBase_components_dialogHeader, null),
66
- withoutHeader
67
- );
68
- };
69
- exports.EbayDrawerDialog = EbayDrawerDialog;
@@ -1,92 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const React = require("react");
4
- function useDialogAnimation({ open, classPrefix, transitionElement, dialogRef, dialogWindowRef, enabled, onTransitionEnd }) {
5
- const previousOpenValue = React.useRef(open);
6
- React.useLayoutEffect(() => {
7
- if (!enabled) {
8
- return;
9
- }
10
- let transitionElements = [dialogWindowRef, dialogRef];
11
- if (transitionElement === "window") {
12
- transitionElements = [dialogWindowRef];
13
- } else if (transitionElement === "root") {
14
- transitionElements = [dialogRef];
15
- }
16
- let cancelCurrentAnimation;
17
- if (open) {
18
- cancelCurrentAnimation = showAnimation({
19
- dialog: dialogRef,
20
- waitFor: transitionElements,
21
- classPrefix,
22
- onTransitionEnd
23
- });
24
- } else if (previousOpenValue.current !== open) {
25
- cancelCurrentAnimation = hideAnimation({
26
- dialog: dialogRef,
27
- waitFor: transitionElements,
28
- classPrefix,
29
- onTransitionEnd
30
- });
31
- }
32
- previousOpenValue.current = open;
33
- return () => {
34
- if (cancelCurrentAnimation) {
35
- cancelCurrentAnimation();
36
- }
37
- };
38
- }, [open, enabled]);
39
- }
40
- function showAnimation({ dialog, waitFor, classPrefix, onTransitionEnd }) {
41
- return transition(dialog, waitFor, `${classPrefix}--show`, onTransitionEnd);
42
- }
43
- function hideAnimation({ dialog, waitFor, classPrefix, onTransitionEnd }) {
44
- return transition(dialog, waitFor, `${classPrefix}--hide`, onTransitionEnd);
45
- }
46
- function transition(element, waitFor, className, onTransitionEnd) {
47
- if (!element.current || !className) {
48
- return;
49
- }
50
- let ran = 0;
51
- const pending = waitFor ? waitFor.length : 0;
52
- const initClass = `${className}-init`;
53
- element.current.classList.add(initClass);
54
- return nextFrame(() => {
55
- if (!element.current) {
56
- return;
57
- }
58
- element.current.classList.add(className);
59
- element.current.classList.remove(initClass);
60
- waitFor.forEach((ref) => {
61
- const listener = () => {
62
- var _a, _b;
63
- if (++ran === pending) {
64
- (_a = element.current) == null ? void 0 : _a.classList.remove(className);
65
- onTransitionEnd();
66
- (_b = ref.current) == null ? void 0 : _b.removeEventListener("transitionend", listener);
67
- }
68
- };
69
- ref.current.addEventListener("transitionend", listener, { once: true });
70
- });
71
- });
72
- }
73
- function nextFrame(callback) {
74
- let frame;
75
- let cancelFrame;
76
- if (window.requestAnimationFrame) {
77
- frame = window.requestAnimationFrame(() => {
78
- frame = window.requestAnimationFrame(callback);
79
- });
80
- cancelFrame = window.cancelAnimationFrame;
81
- } else {
82
- frame = window.setTimeout(callback, 26);
83
- cancelFrame = window.clearTimeout;
84
- }
85
- return () => {
86
- if (frame) {
87
- cancelFrame(frame);
88
- frame = void 0;
89
- }
90
- };
91
- }
92
- exports.useDialogAnimation = useDialogAnimation;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- const React = require("react");
3
- const EbayDialogFooter = ({ children }) => React.createElement(React.Fragment, null, children);
4
- module.exports = EbayDialogFooter;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- const React = require("react");
3
- const EbayDialogHeader = ({ children, ...rest }) => React.createElement("h2", { ...rest }, children);
4
- module.exports = EbayDialogHeader;
@@ -1 +0,0 @@
1
- {"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/ebay-drawer-dialog/components/drawer.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAY,EAAE,EAAgB,SAAS,EAA0C,MAAM,OAAO,CAAA;AAE5G,OAAO,EAAE,eAAe,EAAyC,MAAM,wBAAwB,CAAA;AAK/F,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,CA8F9C,CAAA;AAED,eAAe,gBAAgB,CAAA"}
@@ -1,2 +0,0 @@
1
- export { default as EbayDrawerDialog } from './components/drawer';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-drawer-dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,qBAAqB,CAAA"}