@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.
- package/README.md +2 -5
- package/array.polyfill.flat-5BAolFdk.js +1 -0
- package/badge-CoHKfiPt.js +1 -0
- package/button-6S4U-4HH.js +1 -0
- package/calendar-hBaLhOjI.js +1 -0
- package/common/dropdown.d.ts +20 -0
- package/common/dropdown.d.ts.map +1 -0
- package/common/floating-label-utils/hooks.d.ts.map +1 -1
- package/debounce-BQsYxxOL.js +1 -0
- package/dialog-previous-button-B-fysL3O.js +1 -0
- package/dropdown-pp-aluo7.js +1 -0
- package/ebay-accordion/README.md +61 -0
- package/ebay-accordion/accordion.d.ts +16 -0
- package/ebay-accordion/accordion.d.ts.map +1 -0
- package/ebay-accordion/index.d.ts +3 -0
- package/ebay-accordion/index.d.ts.map +1 -0
- package/ebay-accordion/index.js +2 -0
- package/ebay-alert-dialog/index.js +1 -26
- package/ebay-badge/index.js +1 -4
- package/ebay-breadcrumbs/index.js +1 -47
- package/ebay-button/README.md +1 -1
- package/ebay-button/button.d.ts.map +1 -1
- package/ebay-button/index.js +1 -5
- package/ebay-button/types.d.ts +1 -1
- package/ebay-button/types.d.ts.map +1 -1
- package/ebay-calendar/index.js +1 -4
- package/ebay-carousel/index.js +1 -345
- package/ebay-checkbox/index.js +1 -52
- package/ebay-confirm-dialog/index.js +1 -28
- package/ebay-cta-button/index.js +1 -22
- package/ebay-date-textbox/date-textbox.d.ts.map +1 -1
- package/ebay-date-textbox/index.js +1 -140
- package/ebay-details/README.md +51 -0
- package/ebay-details/ebay-details.d.ts +17 -0
- package/ebay-details/ebay-details.d.ts.map +1 -0
- package/ebay-details/index.d.ts +2 -0
- package/ebay-details/index.d.ts.map +1 -0
- package/ebay-details/index.js +1 -0
- package/ebay-details-q_d7qlcN.js +1 -0
- package/ebay-dialog-base/index.js +1 -13
- package/{ebay-drawer-dialog → ebay-drawer-dialog-deprecated}/README.md +9 -8
- package/{ebay-drawer-dialog → ebay-drawer-dialog-deprecated}/components/drawer.d.ts +2 -6
- package/ebay-drawer-dialog-deprecated/components/drawer.d.ts.map +1 -0
- package/ebay-drawer-dialog-deprecated/index.d.ts +2 -0
- package/ebay-drawer-dialog-deprecated/index.d.ts.map +1 -0
- package/ebay-drawer-dialog-deprecated/index.js +1 -0
- package/ebay-eek/index.js +1 -54
- package/ebay-fake-menu/index.js +1 -10
- package/ebay-fake-menu/menu.d.ts +4 -3
- package/ebay-fake-menu/menu.d.ts.map +1 -1
- package/ebay-fake-menu-button/README.md +1 -1
- package/ebay-fake-menu-button/index.js +1 -7
- package/ebay-fake-menu-button/menu-button.d.ts.map +1 -1
- package/ebay-fake-tabs/index.js +1 -30
- package/ebay-field/index.js +1 -21
- package/{ebay-fullscreen-dialog → ebay-fullscreen-dialog-deprecated}/README.md +6 -4
- package/{ebay-fullscreen-dialog → ebay-fullscreen-dialog-deprecated}/fullscreen-dialog.d.ts +2 -2
- package/ebay-fullscreen-dialog-deprecated/fullscreen-dialog.d.ts.map +1 -0
- package/ebay-fullscreen-dialog-deprecated/index.d.ts +2 -0
- package/ebay-fullscreen-dialog-deprecated/index.d.ts.map +1 -0
- package/ebay-fullscreen-dialog-deprecated/index.js +1 -0
- package/ebay-icon/README.md +1 -1
- package/ebay-icon/index.js +1 -4
- package/ebay-icon/types.d.ts +1 -1
- package/ebay-icon/types.d.ts.map +1 -1
- package/ebay-icon-button/index.js +1 -4
- package/ebay-infotip/README.md +0 -2
- package/ebay-infotip/ebay-infotip.d.ts +0 -2
- package/ebay-infotip/ebay-infotip.d.ts.map +1 -1
- package/ebay-infotip/index.js +1 -76
- package/ebay-inline-notice/index.js +1 -36
- package/ebay-lightbox-dialog/README.md +2 -0
- package/ebay-lightbox-dialog/index.js +1 -12
- package/ebay-lightbox-dialog/lightbox-dialog.d.ts +3 -1
- package/ebay-lightbox-dialog/lightbox-dialog.d.ts.map +1 -1
- package/ebay-listbox/README.md +1 -1
- package/ebay-listbox/index.js +1 -6
- package/ebay-listbox/listbox.d.ts +0 -1
- package/ebay-listbox/listbox.d.ts.map +1 -1
- package/ebay-listbox-button/index.d.ts +2 -1
- package/ebay-listbox-button/index.d.ts.map +1 -1
- package/ebay-listbox-button/index.js +2 -151
- package/ebay-listbox-button/listbox-button-option.d.ts +10 -0
- package/ebay-listbox-button/listbox-button-option.d.ts.map +1 -0
- package/ebay-listbox-button/listbox-button.d.ts +5 -15
- package/ebay-listbox-button/listbox-button.d.ts.map +1 -1
- package/ebay-menu/index.js +1 -9
- package/ebay-menu/menu.d.ts.map +1 -1
- package/ebay-menu/types.d.ts +2 -1
- package/ebay-menu/types.d.ts.map +1 -1
- package/ebay-menu-button/README.md +1 -1
- package/ebay-menu-button/index.js +1 -113
- package/ebay-menu-button/menu-button.d.ts.map +1 -1
- package/ebay-notice-base/index.js +1 -7
- package/ebay-page-notice/index.js +1 -50
- package/ebay-pagination/index.js +1 -244
- package/ebay-panel-dialog/index.js +1 -12
- package/ebay-progress-bar/index.js +1 -6
- package/ebay-progress-spinner/index.js +1 -4
- package/ebay-progress-stepper/index.js +1 -72
- package/ebay-radio/index.js +1 -4
- package/ebay-section-notice/index.js +1 -69
- package/ebay-section-title/index.js +1 -38
- package/ebay-segmented-buttons/index.js +1 -46
- package/ebay-select/index.js +1 -98
- package/ebay-signal/index.js +1 -9
- package/ebay-snackbar-dialog/index.js +1 -81
- package/ebay-split-button/README.md +1 -1
- package/ebay-split-button/index.js +1 -22
- package/ebay-star-rating/index.js +1 -9
- package/ebay-star-rating-select/index.js +1 -55
- package/ebay-svg/index.js +1 -5189
- package/ebay-svg/symbols.d.ts.map +1 -1
- package/ebay-switch/index.js +1 -27
- package/ebay-tabs/README.md +1 -3
- package/ebay-tabs/index.js +1 -88
- package/ebay-tabs/tabs.d.ts.map +1 -1
- package/ebay-tabs/types.d.ts +2 -6
- package/ebay-tabs/types.d.ts.map +1 -1
- package/ebay-textbox/index.js +1 -10
- package/ebay-toast-dialog/README.md +3 -3
- package/ebay-toast-dialog/index.js +1 -9
- package/ebay-toggle-button/README.md +39 -0
- package/ebay-toggle-button/index.d.ts +3 -0
- package/ebay-toggle-button/index.d.ts.map +1 -0
- package/ebay-toggle-button/index.js +1 -0
- package/ebay-toggle-button/toggle-button.d.ts +5 -0
- package/ebay-toggle-button/toggle-button.d.ts.map +1 -0
- package/ebay-toggle-button/types.d.ts +23 -0
- package/ebay-toggle-button/types.d.ts.map +1 -0
- package/ebay-toggle-button-group/README.md +56 -0
- package/ebay-toggle-button-group/index.d.ts +3 -0
- package/ebay-toggle-button-group/index.d.ts.map +1 -0
- package/ebay-toggle-button-group/index.js +1 -0
- package/ebay-toggle-button-group/toggle-button-group.d.ts +5 -0
- package/ebay-toggle-button-group/toggle-button-group.d.ts.map +1 -0
- package/ebay-toggle-button-group/types.d.ts +20 -0
- package/ebay-toggle-button-group/types.d.ts.map +1 -0
- package/ebay-tooltip/index.js +1 -64
- package/ebay-tourtip/index.js +1 -54
- package/ebay-video/index.js +1 -229
- package/events/index.js +1 -18
- package/forwardRef-fPwzYd82.js +1 -0
- package/hooks-5qES90Sx.js +1 -0
- package/icon-D4RDqpD4.js +1 -0
- package/icon-button-Bjjvld0a.js +1 -0
- package/index-Bsb1LHpi.js +1 -0
- package/label-CnrpYJ-g.js +1 -0
- package/lightbox-dialog-Il3dBNcR.js +1 -0
- package/menu-DAOhKkcI.js +1 -0
- package/menu-button-label-DJq794te.js +1 -0
- package/menu-button-label-D_04ZC3p.js +1 -0
- package/menu-item-Cf-tQ72X.js +1 -0
- package/notice-content-9iF4T8uB.js +1 -0
- package/notice-content-C0ZStfuX.js +1 -0
- package/notice-cta-FAd6zCdx.js +1 -0
- package/package.json +19 -84
- package/progress-spinner-CF3qoWE3.js +1 -0
- package/range-DOsPN0h5.js +1 -0
- package/scroll-OgAngNzq.js +1 -0
- package/textbox-DZRVQetR.js +1 -0
- package/toggle-button-CFPnYlex.js +1 -0
- package/use-roving-index-DoAVBgsp.js +1 -0
- package/use-tooltip-BEiQpMDa.js +1 -0
- package/utils/index.d.ts +1 -0
- package/utils/index.d.ts.map +1 -1
- package/utils/index.js +1 -13
- package/utils-C9NL3q0j.js +1 -0
- package/array.polyfill.flat-DyxysTxZ.js +0 -21
- package/badge-CR5t7-2L.js +0 -8
- package/button-B4bZIgwB.js +0 -83
- package/calendar-D-DWjrMU.js +0 -333
- package/common/component-utils/forwardRef/index.js +0 -10
- package/common/component-utils/index.js +0 -9
- package/common/component-utils/utils/index.js +0 -25
- package/common/event-utils/index.js +0 -113
- package/common/floating-label-utils/hooks/index.js +0 -106
- package/common/notice-utils/notice-cta/index.js +0 -5
- package/common/random-id/index.js +0 -13
- package/common/tooltip-utils/constants/index.js +0 -97
- package/common/tooltip-utils/index.js +0 -11
- package/debounce-v8bWAUnY.js +0 -9
- package/dialog-previous-button-EC_Y6KaT.js +0 -370
- package/drawer-DBDktEBZ.js +0 -69
- package/ebay-dialog-base/components/animation/index.js +0 -92
- package/ebay-dialog-base/components/dialog-footer/index.js +0 -4
- package/ebay-dialog-base/components/dialog-header/index.js +0 -4
- package/ebay-drawer-dialog/components/drawer.d.ts.map +0 -1
- package/ebay-drawer-dialog/index.d.ts +0 -2
- package/ebay-drawer-dialog/index.d.ts.map +0 -1
- package/ebay-drawer-dialog/index.js +0 -4
- package/ebay-fake-menu/menu-item/index.js +0 -49
- package/ebay-fake-menu-button/menu-button/index.js +0 -12
- package/ebay-fullscreen-dialog/fullscreen-dialog.d.ts.map +0 -1
- package/ebay-fullscreen-dialog/index.d.ts +0 -2
- package/ebay-fullscreen-dialog/index.d.ts.map +0 -1
- package/ebay-fullscreen-dialog/index.js +0 -10
- package/ebay-radio/radio/index.js +0 -48
- package/icon-B17Di3YL.js +0 -56
- package/icon-button-BQWoMgX1.js +0 -31
- package/index-BXizW4ue.js +0 -89
- package/index-DcH7Tjjd.js +0 -272
- package/label-C0AS4fnO.js +0 -19
- package/listbox-DfOw_fJc.js +0 -662
- package/menu-Bsy48CE1.js +0 -163
- package/menu-button-CKGsgg6G.js +0 -89
- package/menu-fCOy6wBS.js +0 -29
- package/notice-content-BTXVxttv.js +0 -8
- package/notice-content-BhUeK1pd.js +0 -3
- package/notice-footer-CIQ8SM6N.js +0 -10
- package/progress-spinner-DOFKRtuu.js +0 -20
- package/range-C5qzyhg4.js +0 -3
- package/textbox-J291yCpJ.js +0 -136
- package/use-roving-index-CEM_UsCH.js +0 -58
- 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;
|
package/debounce-v8bWAUnY.js
DELETED
|
@@ -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;
|
package/drawer-DBDktEBZ.js
DELETED
|
@@ -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 +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 +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"}
|