@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,113 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const React = require("react");
|
|
4
|
-
const classNames = require("classnames");
|
|
5
|
-
const common_componentUtils_utils = require("../common/component-utils/utils/index.js");
|
|
6
|
-
const menu = require("../menu-Bsy48CE1.js");
|
|
7
|
-
const button = require("../button-B4bZIgwB.js");
|
|
8
|
-
const iconButton = require("../icon-button-BQWoMgX1.js");
|
|
9
|
-
const icon = require("../icon-B17Di3YL.js");
|
|
10
|
-
const common_randomId = require("../common/random-id/index.js");
|
|
11
|
-
const common_eventUtils = require("../common/event-utils/index.js");
|
|
12
|
-
const EbayMenuButton = ({ type, variant = "button", className, text = "", fixWidth, reverse, expanded: defaultExpanded, noToggleIcon, checked, collapseOnSelect, a11yText, prefixId, prefixLabel, onClick = () => {
|
|
13
|
-
}, onExpand = () => {
|
|
14
|
-
}, onCollapse = () => {
|
|
15
|
-
}, onChange = () => {
|
|
16
|
-
}, onSelect = () => {
|
|
17
|
-
}, children, ...rest }) => {
|
|
18
|
-
const [expanded, setExpanded] = React.useState(defaultExpanded);
|
|
19
|
-
const [menuId, setMenuId] = React.useState();
|
|
20
|
-
const buttonRef = React.useRef(null);
|
|
21
|
-
const menuRef = React.useRef();
|
|
22
|
-
const menuItems = common_componentUtils_utils.filterByType(children, [menu.EbayMenuItem, EbayMenuButtonSeparator]);
|
|
23
|
-
const defaultIndexes = menuItems.map((item) => Boolean(item.props.checked));
|
|
24
|
-
const [checkedIndexes, setCheckedIndexes] = React.useState(defaultIndexes);
|
|
25
|
-
const menuButtonLabel = common_componentUtils_utils.findComponent(children, EbayMenuButtonLabel);
|
|
26
|
-
const icon$1 = common_componentUtils_utils.findComponent(children, icon.EbayIcon);
|
|
27
|
-
const label = labelWithPrefixAndIcon({ text, prefixId, prefixLabel, menuButtonLabel, icon: icon$1 });
|
|
28
|
-
const wrapperClasses = classNames("menu-button", className);
|
|
29
|
-
const menuClasses = classNames("menu-button__menu", {
|
|
30
|
-
"menu-button__menu--fix-width": fixWidth,
|
|
31
|
-
"menu-button__menu--reverse": reverse
|
|
32
|
-
});
|
|
33
|
-
React.useEffect(() => {
|
|
34
|
-
const handleBackgroundClick = (e) => {
|
|
35
|
-
const menuEl = menuRef.current;
|
|
36
|
-
const menuClicked = menuEl && menuEl.contains(e.target);
|
|
37
|
-
if (collapseOnSelect || !menuClicked) {
|
|
38
|
-
setExpanded(false);
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
if (expanded) {
|
|
42
|
-
onExpand();
|
|
43
|
-
setTimeout(() => {
|
|
44
|
-
document.addEventListener("click", handleBackgroundClick, false);
|
|
45
|
-
});
|
|
46
|
-
} else if (expanded === false) {
|
|
47
|
-
onCollapse();
|
|
48
|
-
}
|
|
49
|
-
return () => document.removeEventListener("click", handleBackgroundClick, false);
|
|
50
|
-
}, [expanded]);
|
|
51
|
-
React.useEffect(() => {
|
|
52
|
-
setMenuId(common_randomId.randomId());
|
|
53
|
-
}, []);
|
|
54
|
-
const handleMenuKeydown = (e) => {
|
|
55
|
-
common_eventUtils.handleEscapeKeydown(e, () => {
|
|
56
|
-
var _a;
|
|
57
|
-
setExpanded(false);
|
|
58
|
-
(_a = buttonRef.current) == null ? void 0 : _a.focus();
|
|
59
|
-
});
|
|
60
|
-
};
|
|
61
|
-
const buttonProps = {
|
|
62
|
-
ref: buttonRef,
|
|
63
|
-
className: "menu-button__button",
|
|
64
|
-
"aria-expanded": !!expanded,
|
|
65
|
-
"aria-haspopup": true,
|
|
66
|
-
"aria-label": a11yText,
|
|
67
|
-
"aria-controls": menuId,
|
|
68
|
-
"aria-labelledby": prefixId,
|
|
69
|
-
onClick: (e) => {
|
|
70
|
-
setExpanded(!expanded);
|
|
71
|
-
onClick(e);
|
|
72
|
-
},
|
|
73
|
-
...rest
|
|
74
|
-
};
|
|
75
|
-
const handleOnChange = (e, eventProps) => {
|
|
76
|
-
if (type === "radio" || type === "checkbox") {
|
|
77
|
-
const newCheckedIndexes = checkedIndexes.map((_, i) => eventProps.indexes.includes(i));
|
|
78
|
-
setCheckedIndexes(newCheckedIndexes);
|
|
79
|
-
}
|
|
80
|
-
onChange(e, eventProps);
|
|
81
|
-
};
|
|
82
|
-
const checkedIndex = () => {
|
|
83
|
-
const index = checkedIndexes.findIndex(Boolean);
|
|
84
|
-
return index > -1 ? index : checked;
|
|
85
|
-
};
|
|
86
|
-
return React.createElement(
|
|
87
|
-
"span",
|
|
88
|
-
{ className: wrapperClasses },
|
|
89
|
-
variant === "overflow" ? React.createElement(iconButton.EbayIconButton, { icon: "overflowVertical16", ...buttonProps }) : React.createElement(button.EbayButton, { variant: variant === "form" ? "form" : void 0, bodyState: noToggleIcon ? void 0 : "expand", ...buttonProps }, label),
|
|
90
|
-
expanded && React.createElement(menu.EbayMenu, { baseEl: "div", ref: menuRef, type, className: menuClasses, tabIndex: -1, id: menuId, autofocus: true, checked: checkedIndex(), onKeyDown: handleMenuKeydown, onChange: handleOnChange, onSelect }, menuItems.map((item, i) => React.cloneElement(item, {
|
|
91
|
-
...item.props,
|
|
92
|
-
className: classNames(item.props.className, "menu-button__item"),
|
|
93
|
-
key: i,
|
|
94
|
-
checked: checkedIndexes[i]
|
|
95
|
-
})))
|
|
96
|
-
);
|
|
97
|
-
};
|
|
98
|
-
function labelWithPrefixAndIcon({ text, prefixId, prefixLabel, menuButtonLabel, icon: icon2 }) {
|
|
99
|
-
const textLabelElement = text.length ? React.createElement("span", null, text) : null;
|
|
100
|
-
const prefixLabelElement = !prefixId && prefixLabel && [
|
|
101
|
-
React.createElement("span", { className: "menu-button-prefix-label" }, prefixLabel),
|
|
102
|
-
React.createElement(React.Fragment, null, " ")
|
|
103
|
-
];
|
|
104
|
-
const labelWithPrefix = [prefixLabelElement, menuButtonLabel || textLabelElement];
|
|
105
|
-
const labelArray = [icon2, labelWithPrefix].flat().filter(Boolean);
|
|
106
|
-
return labelArray.length ? labelArray : null;
|
|
107
|
-
}
|
|
108
|
-
const EbayMenuButtonSeparator = ({ className, ...rest }) => React.createElement("hr", { ...rest, className: classNames(className, "menu-button__separator"), role: "separator" });
|
|
109
|
-
const EbayMenuButtonLabel = ({ children }) => React.createElement(React.Fragment, null, children);
|
|
110
|
-
exports.EbayMenuButtonItem = menu.EbayMenuItem;
|
|
111
|
-
exports.EbayMenuButton = EbayMenuButton;
|
|
112
|
-
exports.EbayMenuButtonLabel = EbayMenuButtonLabel;
|
|
113
|
-
exports.EbayMenuButtonSeparator = EbayMenuButtonSeparator;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../menu-button-label-D_04ZC3p.js"),t=require("../menu-DAOhKkcI.js");require("react");require("classnames");exports.EbayMenuButton=e.EbayMenuButton;exports.EbayMenuButtonLabel=e.EbayMenuButtonLabel;exports.EbayMenuButtonSeparator=e.EbayMenuButtonSeparator;exports.EbayMenuButtonItem=t.EbayMenuItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-button.d.ts","sourceRoot":"","sources":["../../src/ebay-menu-button/menu-button.tsx"],"names":[],"mappings":"AAAA,OAAc,
|
|
1
|
+
{"version":3,"file":"menu-button.d.ts","sourceRoot":"","sources":["../../src/ebay-menu-button/menu-button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAgC,EAAE,EAAuB,MAAM,OAAO,CAAA;AAQpF,OAAO,EAAgF,eAAe,EAAE,MAAM,SAAS,CAAA;AASvH,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,eAAe,CAqJvC,CAAA;AAUD,eAAe,cAAc,CAAA"}
|
|
@@ -1,7 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const React = require("react");
|
|
4
|
-
const noticeContent = require("../notice-content-BhUeK1pd.js");
|
|
5
|
-
const EbayNoticeTitle = ({ children }) => React.createElement("span", { className: "page-notice__title" }, children);
|
|
6
|
-
exports.EbayNoticeContent = noticeContent.EbayNoticeContent;
|
|
7
|
-
exports.EbayNoticeTitle = EbayNoticeTitle;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),o=require("../notice-content-C0ZStfuX.js"),n=({children:e})=>t.createElement("span",{className:"page-notice__title"},e);exports.EbayNoticeContent=o.EbayNoticeContent;exports.EbayNoticeTitle=n;
|
|
@@ -1,50 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const React = require("react");
|
|
4
|
-
const noticeContent$1 = require("../notice-content-BTXVxttv.js");
|
|
5
|
-
const noticeContent = require("../notice-content-BhUeK1pd.js");
|
|
6
|
-
const icon = require("../icon-B17Di3YL.js");
|
|
7
|
-
require("classnames");
|
|
8
|
-
const noticeFooter = require("../notice-footer-CIQ8SM6N.js");
|
|
9
|
-
const common_noticeUtils_noticeCta = require("../common/notice-utils/notice-cta/index.js");
|
|
10
|
-
const EbayPageNotice = ({ id, status = "general", children, a11yDismissText, "aria-label": ariaLabel, onDismiss = () => {
|
|
11
|
-
}, ...rest }) => {
|
|
12
|
-
const [dismissed, setDismissed] = React.useState(false);
|
|
13
|
-
const childrenArray = React.Children.toArray(children);
|
|
14
|
-
const content = childrenArray.find((child) => child.type === noticeContent.EbayNoticeContent);
|
|
15
|
-
if (!content) {
|
|
16
|
-
throw new Error(`EbayPageNotice: Please use a EbayNoticeContent that defines the content of the notice`);
|
|
17
|
-
}
|
|
18
|
-
const handleDismissed = (event) => {
|
|
19
|
-
setDismissed(true);
|
|
20
|
-
onDismiss(event);
|
|
21
|
-
};
|
|
22
|
-
return dismissed ? null : React.createElement(
|
|
23
|
-
"section",
|
|
24
|
-
{ ...rest, "aria-labelledby": id || `${status}-status`, className: `page-notice ${status !== `general` ? `page-notice--${status}` : ``}`, role: "region" },
|
|
25
|
-
status !== `general` ? React.createElement(
|
|
26
|
-
"div",
|
|
27
|
-
{ className: "page-notice__header", id: id || `${status}-status` },
|
|
28
|
-
React.createElement(icon.EbayIcon, { name: `${status}Filled16`, a11yText: ariaLabel, a11yVariant: "label" })
|
|
29
|
-
) : null,
|
|
30
|
-
React.createElement(noticeContent$1.NoticeContent, { ...content.props, type: "page" }),
|
|
31
|
-
children,
|
|
32
|
-
a11yDismissText && React.createElement(
|
|
33
|
-
EbayPageNoticeFooter,
|
|
34
|
-
null,
|
|
35
|
-
React.createElement(
|
|
36
|
-
"button",
|
|
37
|
-
{ "aria-label": a11yDismissText, className: "fake-link page-notice__dismiss", onClick: handleDismissed },
|
|
38
|
-
React.createElement(icon.EbayIcon, { name: "close16" })
|
|
39
|
-
)
|
|
40
|
-
)
|
|
41
|
-
);
|
|
42
|
-
};
|
|
43
|
-
const EbayPageNoticeTitle = ({ className, as, children, ...rest }) => React.createElement(noticeFooter.NoticeTitle, { ...rest, className, as, type: "page" }, children);
|
|
44
|
-
const EbayPageNoticeFooter = ({ className, children }) => React.createElement(noticeFooter.NoticeFooter, { className, type: "page" }, children);
|
|
45
|
-
const EbayPageNoticeCTA = ({ className, children }) => React.createElement(common_noticeUtils_noticeCta, { className, type: "page" }, children);
|
|
46
|
-
exports.EbayNoticeContent = noticeContent.EbayNoticeContent;
|
|
47
|
-
exports.EbayPageNotice = EbayPageNotice;
|
|
48
|
-
exports.EbayPageNoticeCTA = EbayPageNoticeCTA;
|
|
49
|
-
exports.EbayPageNoticeFooter = EbayPageNoticeFooter;
|
|
50
|
-
exports.EbayPageNoticeTitle = EbayPageNoticeTitle;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),p=require("../notice-content-9iF4T8uB.js"),s=require("../notice-content-C0ZStfuX.js"),l=require("../icon-D4RDqpD4.js");require("classnames");const i=require("../notice-cta-FAd6zCdx.js"),u=({id:a,status:e="general",children:n,a11yDismissText:o,"aria-label":E,onDismiss:b=()=>{},...g})=>{const[N,m]=t.useState(!1),r=t.Children.toArray(n).find(c=>c.type===s.EbayNoticeContent);if(!r)throw new Error("EbayPageNotice: Please use a EbayNoticeContent that defines the content of the notice");const d=c=>{m(!0),b(c)};return N?null:t.createElement("section",{...g,"aria-labelledby":a||`${e}-status`,className:`page-notice ${e!=="general"?`page-notice--${e}`:""}`,role:"region"},e!=="general"?t.createElement("div",{className:"page-notice__header",id:a||`${e}-status`},t.createElement(l.EbayIcon,{name:`${e}Filled16`,a11yText:E,a11yVariant:"label"})):null,t.createElement(p.NoticeContent,{...r.props,type:"page"}),n,o&&t.createElement(y,null,t.createElement("button",{"aria-label":o,className:"fake-link page-notice__dismiss",onClick:d},t.createElement(l.EbayIcon,{name:"close16"}))))},C=({className:a,as:e,children:n,...o})=>t.createElement(i.NoticeTitle,{...o,className:a,as:e,type:"page"},n),y=({className:a,children:e})=>t.createElement(i.NoticeFooter,{className:a,type:"page"},e),P=({className:a,children:e})=>t.createElement(i.NoticeCTA,{className:a,type:"page"},e);exports.EbayNoticeContent=s.EbayNoticeContent;exports.EbayPageNotice=u;exports.EbayPageNoticeCTA=P;exports.EbayPageNoticeFooter=y;exports.EbayPageNoticeTitle=C;
|
package/ebay-pagination/index.js
CHANGED
|
@@ -1,244 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const React = require("react");
|
|
4
|
-
const ebayFakeMenuButton_menuButton = require("../menu-button-CKGsgg6G.js");
|
|
5
|
-
const classNames = require("classnames");
|
|
6
|
-
const debounce = require("../debounce-v8bWAUnY.js");
|
|
7
|
-
const common_componentUtils_utils = require("../common/component-utils/utils/index.js");
|
|
8
|
-
const icon = require("../icon-B17Di3YL.js");
|
|
9
|
-
const common_componentUtils_forwardRef = require("../common/component-utils/forwardRef/index.js");
|
|
10
|
-
require("../array.polyfill.flat-DyxysTxZ.js");
|
|
11
|
-
const MIN_PAGES = 1;
|
|
12
|
-
const MAX_PAGES = 9;
|
|
13
|
-
const MIN_VISIBLE_ITEMS = 4;
|
|
14
|
-
const LEADING_SPACE_WITH_DOT = 2;
|
|
15
|
-
const TRAILING_SPACE_WITH_DOT = MAX_PAGES - LEADING_SPACE_WITH_DOT;
|
|
16
|
-
function pageNumbersAround(totalPages, selectedPage, maxVisiblePages = totalPages, variant = null) {
|
|
17
|
-
const withDots = variant === "show-last" || variant === "overflow" && totalPages > MAX_PAGES;
|
|
18
|
-
const hasLeadingDots = variant === "overflow" && totalPages > MAX_PAGES;
|
|
19
|
-
const visibleItems = Math.min(maxVisiblePages, totalPages);
|
|
20
|
-
const startIndexWithoutDots = Math.max(0, selectedPage - Math.ceil((visibleItems - 1) / 2));
|
|
21
|
-
const startIndexWithDots = visibleItems < MIN_VISIBLE_ITEMS ? selectedPage : Math.max(0, selectedPage - Math.floor((visibleItems - 1) / 2));
|
|
22
|
-
const endIndex = (withDots ? startIndexWithDots : startIndexWithoutDots) + visibleItems;
|
|
23
|
-
const closeToEnd = endIndex >= totalPages;
|
|
24
|
-
const closeToFront = selectedPage <= MIN_VISIBLE_ITEMS;
|
|
25
|
-
const visibleRangeWithDots = (start, end) => {
|
|
26
|
-
const items = visibleRange(totalPages, start, end);
|
|
27
|
-
if (visibleItems > 2) {
|
|
28
|
-
items[end - 2] = "dots";
|
|
29
|
-
items[end - 1] = "hidden";
|
|
30
|
-
items[totalPages - 1] = "visible";
|
|
31
|
-
} else if (visibleItems > 1) {
|
|
32
|
-
items[end - 1] = "dots";
|
|
33
|
-
}
|
|
34
|
-
return items;
|
|
35
|
-
};
|
|
36
|
-
const visibleRangeWithOverflowDots = (start, end) => {
|
|
37
|
-
if (closeToFront) {
|
|
38
|
-
return visibleRangeWithDots(0, end);
|
|
39
|
-
} else if (closeToEnd) {
|
|
40
|
-
const items2 = visibleRange(totalPages, totalPages - TRAILING_SPACE_WITH_DOT, totalPages);
|
|
41
|
-
items2[0] = "visible";
|
|
42
|
-
items2[1] = "dots";
|
|
43
|
-
return items2;
|
|
44
|
-
}
|
|
45
|
-
const items = visibleRange(totalPages, selectedPage - LEADING_SPACE_WITH_DOT, selectedPage + LEADING_SPACE_WITH_DOT + 1);
|
|
46
|
-
items[0] = "visible";
|
|
47
|
-
items[1] = closeToFront ? "visible" : "dots";
|
|
48
|
-
items[totalPages - 2] = "dots";
|
|
49
|
-
items[totalPages - 1] = "visible";
|
|
50
|
-
return items;
|
|
51
|
-
};
|
|
52
|
-
if (closeToEnd && totalPages <= MAX_PAGES) {
|
|
53
|
-
return visibleRange(totalPages, totalPages - visibleItems);
|
|
54
|
-
}
|
|
55
|
-
if (withDots) {
|
|
56
|
-
return hasLeadingDots ? visibleRangeWithOverflowDots(startIndexWithDots, endIndex) : visibleRangeWithDots(startIndexWithDots, endIndex);
|
|
57
|
-
}
|
|
58
|
-
return visibleRange(totalPages, startIndexWithoutDots, endIndex);
|
|
59
|
-
}
|
|
60
|
-
function calcPageState(selectedPage, visiblePages, totalPages, variant = "show-range") {
|
|
61
|
-
if (selectedPage === -1) {
|
|
62
|
-
return [];
|
|
63
|
-
}
|
|
64
|
-
const adjustedNumPages = variant === "overflow" ? MAX_PAGES : clamp(Math.min(totalPages, visiblePages), MIN_PAGES, MAX_PAGES);
|
|
65
|
-
return pageNumbersAround(totalPages, selectedPage - 1, adjustedNumPages, variant);
|
|
66
|
-
}
|
|
67
|
-
function clamp(n, min, max) {
|
|
68
|
-
return n <= min ? min : n >= max ? max : n;
|
|
69
|
-
}
|
|
70
|
-
function visibleRange(totalItems, start, end) {
|
|
71
|
-
return Array(totalItems).fill("hidden").fill("visible", start, end);
|
|
72
|
-
}
|
|
73
|
-
function getMaxWidth(el) {
|
|
74
|
-
if (!el) {
|
|
75
|
-
return 0;
|
|
76
|
-
}
|
|
77
|
-
el.style.width = "100vw";
|
|
78
|
-
const result = el.offsetWidth;
|
|
79
|
-
el.style.width = null;
|
|
80
|
-
return result;
|
|
81
|
-
}
|
|
82
|
-
const EbayPagination = ({ id = "ebay-pagination", className, a11yCurrentText = "Pagination - Current Page", a11yPreviousText = "Previous page", a11yNextText = "Next page", variant = "show-range", fluid = false, onPrevious = () => {
|
|
83
|
-
}, onNext = () => {
|
|
84
|
-
}, onSelect = () => {
|
|
85
|
-
}, children, ...rest }) => {
|
|
86
|
-
const paginationContainerRef = React.useRef(null);
|
|
87
|
-
const childPageRefs = React.useRef([]);
|
|
88
|
-
childPageRefs.current = React.Children.map(children, React.createRef);
|
|
89
|
-
const totalPages = common_componentUtils_utils.filterBy(children, ({ props }) => props.type === void 0 || props.type === "page").length;
|
|
90
|
-
const itemWidthRef = React.useRef(0);
|
|
91
|
-
const arrowWidthRef = React.useRef(0);
|
|
92
|
-
const getNumOfVisiblePageItems = () => {
|
|
93
|
-
var _a, _b, _c, _d;
|
|
94
|
-
const pageArrowWidth = arrowWidthRef.current || ((_b = (_a = childPageRefs.current[0]) == null ? void 0 : _a.current) == null ? void 0 : _b.offsetWidth);
|
|
95
|
-
arrowWidthRef.current = pageArrowWidth;
|
|
96
|
-
const pageItemWidth = itemWidthRef.current || ((_d = (_c = childPageRefs.current[1]) == null ? void 0 : _c.current) == null ? void 0 : _d.offsetWidth);
|
|
97
|
-
itemWidthRef.current = pageItemWidth;
|
|
98
|
-
return pageItemWidth ? Math.floor((getMaxWidth(paginationContainerRef.current) - pageArrowWidth * 2) / pageItemWidth) : 0;
|
|
99
|
-
};
|
|
100
|
-
const [page, setPage] = React.useState([]);
|
|
101
|
-
const [selectedIndex, setSelectedIndex] = React.useState(0);
|
|
102
|
-
const updatePages = (selectedPageIndexFromDotMenu) => {
|
|
103
|
-
const selectedPageIndex = selectedPageIndexFromDotMenu || childPageRefs.current.findIndex((pageRef) => {
|
|
104
|
-
var _a;
|
|
105
|
-
return ((_a = pageRef.current) == null ? void 0 : _a.getAttribute("aria-current")) === "page";
|
|
106
|
-
});
|
|
107
|
-
const visiblePageItems = getNumOfVisiblePageItems();
|
|
108
|
-
const pageState = calcPageState(selectedPageIndex, visiblePageItems, totalPages, variant);
|
|
109
|
-
setSelectedIndex(selectedPageIndex);
|
|
110
|
-
setPage(["hidden", ...pageState]);
|
|
111
|
-
};
|
|
112
|
-
React.useEffect(() => {
|
|
113
|
-
const debouncedUpdate = debounce.debounce(updatePages, 16);
|
|
114
|
-
updatePages();
|
|
115
|
-
window.addEventListener("resize", () => debouncedUpdate());
|
|
116
|
-
return () => {
|
|
117
|
-
window.removeEventListener("resize", () => debouncedUpdate());
|
|
118
|
-
};
|
|
119
|
-
}, [children]);
|
|
120
|
-
const createChildItems = (itemType) => {
|
|
121
|
-
let pageIndex = 0;
|
|
122
|
-
const firstDotItems = [];
|
|
123
|
-
const secondDotItems = [];
|
|
124
|
-
const allDotItems = [];
|
|
125
|
-
const firstDot = page.indexOf("dots");
|
|
126
|
-
const lastDot = page.lastIndexOf("dots");
|
|
127
|
-
return React.Children.map(children, (item, index) => {
|
|
128
|
-
const { type = "page", current, disabled, href, children: text } = item.props;
|
|
129
|
-
const isDot = page[index] === "dots";
|
|
130
|
-
const key = `${id}-item-${index}`;
|
|
131
|
-
const hide = page[index] === "hidden";
|
|
132
|
-
const isSeparator = isDot && type === "page";
|
|
133
|
-
const newProps = {
|
|
134
|
-
current,
|
|
135
|
-
disabled,
|
|
136
|
-
href,
|
|
137
|
-
type: isSeparator ? "separator" : type,
|
|
138
|
-
children: isDot ? React.createElement(icon.EbayIcon, { name: "overflowHorizontal24", focusable: false }) : text,
|
|
139
|
-
pageIndex: type === "page" ? pageIndex++ : void 0,
|
|
140
|
-
key,
|
|
141
|
-
hide,
|
|
142
|
-
onPrevious,
|
|
143
|
-
onNext,
|
|
144
|
-
onSelect,
|
|
145
|
-
a11yPreviousText,
|
|
146
|
-
a11yNextText,
|
|
147
|
-
ref: childPageRefs.current[index]
|
|
148
|
-
};
|
|
149
|
-
if ((hide || isDot) && type === "page") {
|
|
150
|
-
const itemComponent = React.createElement(ebayFakeMenuButton_menuButton.EbayFakeMenuButtonItem, { key, href, onClick: (event) => {
|
|
151
|
-
if (!href) {
|
|
152
|
-
event.preventDefault();
|
|
153
|
-
}
|
|
154
|
-
const currentTarget = event.currentTarget;
|
|
155
|
-
onSelect(event, { value: (currentTarget == null ? void 0 : currentTarget.innerText) || "", index: pageIndex });
|
|
156
|
-
updatePages(Number(currentTarget == null ? void 0 : currentTarget.innerText));
|
|
157
|
-
} }, text);
|
|
158
|
-
if (firstDot === lastDot) {
|
|
159
|
-
allDotItems.push(itemComponent);
|
|
160
|
-
}
|
|
161
|
-
if (selectedIndex - 2 > firstDot && index < selectedIndex) {
|
|
162
|
-
firstDotItems.push(itemComponent);
|
|
163
|
-
}
|
|
164
|
-
if (selectedIndex + 2 < lastDot && index > selectedIndex) {
|
|
165
|
-
secondDotItems.push(itemComponent);
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
if (itemType === "page" && isDot && variant === "overflow") {
|
|
169
|
-
let childComponent = allDotItems;
|
|
170
|
-
if (firstDot !== lastDot) {
|
|
171
|
-
childComponent = index === 2 ? firstDotItems : secondDotItems;
|
|
172
|
-
}
|
|
173
|
-
return React.createElement(
|
|
174
|
-
"li",
|
|
175
|
-
{ key },
|
|
176
|
-
React.createElement(
|
|
177
|
-
"span",
|
|
178
|
-
{ className: "pagination__item", role: "separator" },
|
|
179
|
-
React.createElement(ebayFakeMenuButton_menuButton.EbayMenuButton, { a11yText: "Menu", borderless: true, variant: "overflow", noToggleIcon: true }, childComponent)
|
|
180
|
-
)
|
|
181
|
-
);
|
|
182
|
-
}
|
|
183
|
-
return itemType === type ? React.cloneElement(item, newProps) : null;
|
|
184
|
-
});
|
|
185
|
-
};
|
|
186
|
-
const headingId = `${id}-pagination-heading`;
|
|
187
|
-
return React.createElement(
|
|
188
|
-
"nav",
|
|
189
|
-
{ ...rest, role: "navigation", className: classNames(className, "pagination", { "pagination--fluid": fluid }), "aria-labelledby": headingId, ref: paginationContainerRef },
|
|
190
|
-
React.createElement(
|
|
191
|
-
"span",
|
|
192
|
-
{ "aria-live": "polite", role: "status" },
|
|
193
|
-
React.createElement("h2", { className: "clipped", id: headingId }, a11yCurrentText)
|
|
194
|
-
),
|
|
195
|
-
createChildItems("previous"),
|
|
196
|
-
React.createElement("ol", { className: "pagination__items" }, createChildItems("page")),
|
|
197
|
-
createChildItems("next")
|
|
198
|
-
);
|
|
199
|
-
};
|
|
200
|
-
const EbayPaginationItem = ({ pageIndex = 0, key, current, disabled, type = "page", href, hide, children, a11yPreviousText = "Previous page", a11yNextText = "Next page", onSelect, onNext, onPrevious, className, style, forwardedRef, ...rest }) => {
|
|
201
|
-
const handlePageNumber = (e) => {
|
|
202
|
-
var _a;
|
|
203
|
-
onSelect(e, { value: ((_a = e.currentTarget) == null ? void 0 : _a.innerText) || "", index: pageIndex });
|
|
204
|
-
};
|
|
205
|
-
const handleNextPage = (e) => {
|
|
206
|
-
if (!e.currentTarget.getAttribute("aria-disabled")) {
|
|
207
|
-
onNext(e);
|
|
208
|
-
}
|
|
209
|
-
};
|
|
210
|
-
const handlePreviousPage = (e) => {
|
|
211
|
-
if (!e.currentTarget.getAttribute("aria-disabled")) {
|
|
212
|
-
onPrevious(e);
|
|
213
|
-
}
|
|
214
|
-
};
|
|
215
|
-
const isAnchor = !!href;
|
|
216
|
-
const ButtonOrAnchor = isAnchor ? "a" : "button";
|
|
217
|
-
const iconClassName = isAnchor ? "icon-link" : "icon-btn";
|
|
218
|
-
const arrowStyle = { ...style, minWidth: "40px" };
|
|
219
|
-
switch (type) {
|
|
220
|
-
case "previous":
|
|
221
|
-
return React.createElement(
|
|
222
|
-
ButtonOrAnchor,
|
|
223
|
-
{ ...rest, ref: forwardedRef, "aria-disabled": disabled ? "true" : void 0, "aria-label": a11yPreviousText, href: disabled ? void 0 : href, className: classNames(iconClassName, "pagination__previous"), style: arrowStyle, onClick: handlePreviousPage },
|
|
224
|
-
React.createElement(icon.EbayIcon, { name: "arrowLeft16" })
|
|
225
|
-
);
|
|
226
|
-
case "next":
|
|
227
|
-
return React.createElement(
|
|
228
|
-
ButtonOrAnchor,
|
|
229
|
-
{ ...rest, ref: forwardedRef, "aria-disabled": disabled ? "true" : void 0, "aria-label": a11yNextText, href: disabled ? void 0 : href, className: classNames(iconClassName, "pagination__next"), style: arrowStyle, onClick: handleNextPage },
|
|
230
|
-
React.createElement(icon.EbayIcon, { name: "arrowRight16" })
|
|
231
|
-
);
|
|
232
|
-
case "separator":
|
|
233
|
-
return React.createElement("span", { key, style, className: "pagination__item", ref: forwardedRef, role: "separator" }, children);
|
|
234
|
-
default:
|
|
235
|
-
return React.createElement(
|
|
236
|
-
"li",
|
|
237
|
-
{ ...rest, hidden: hide },
|
|
238
|
-
React.createElement(ButtonOrAnchor, { ref: forwardedRef, "aria-current": current ? "page" : void 0, href, className: "pagination__item", style, key, onClick: handlePageNumber }, children)
|
|
239
|
-
);
|
|
240
|
-
}
|
|
241
|
-
};
|
|
242
|
-
const paginationItem = common_componentUtils_forwardRef.withForwardRef(EbayPaginationItem);
|
|
243
|
-
exports.EbayPagination = EbayPagination;
|
|
244
|
-
exports.EbayPaginationItem = paginationItem;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),J=require("../menu-button-label-DJq794te.js"),H=require("classnames"),ee=require("../debounce-BQsYxxOL.js"),te=require("../utils-C9NL3q0j.js"),$=require("../icon-D4RDqpD4.js"),ne=require("../forwardRef-fPwzYd82.js");require("../array.polyfill.flat-5BAolFdk.js");const re=1,T=9,K=4,j=2,oe=T-j;function ie(e,n,a=e,s=null){const h=s==="show-last"||s==="overflow"&&e>T,l=s==="overflow"&&e>T,c=Math.min(a,e),v=Math.max(0,n-Math.ceil((c-1)/2)),E=c<K?n:Math.max(0,n-Math.floor((c-1)/2)),d=(h?E:v)+c,f=d>=e,M=n<=K,I=(b,i)=>{const r=O(e,b,i);return c>2?(r[i-2]="dots",r[i-1]="hidden",r[e-1]="visible"):c>1&&(r[i-1]="dots"),r},g=(b,i)=>{if(M)return I(0,i);if(f){const w=O(e,e-oe,e);return w[0]="visible",w[1]="dots",w}const r=O(e,n-j,n+j+1);return r[0]="visible",r[1]=M?"visible":"dots",r[e-2]="dots",r[e-1]="visible",r};return f&&e<=T?O(e,e-c):h?l?g(E,d):I(E,d):O(e,v,d)}function ae(e,n,a,s="show-range"){if(e===-1)return[];const h=s==="overflow"?T:se(Math.min(a,n),re,T);return ie(a,e-1,h,s)}function se(e,n,a){return e<=n?n:e>=a?a:e}function O(e,n,a){return Array(e).fill("hidden").fill("visible",n,a)}function ce(e){if(!e)return 0;e.style.width="100vw";const n=e.offsetWidth;return e.style.width=null,n}const ue=({id:e="ebay-pagination",className:n,a11yCurrentText:a="Pagination - Current Page",a11yPreviousText:s="Previous page",a11yNextText:h="Next page",variant:l="show-range",fluid:c=!1,onPrevious:v=()=>{},onNext:E=()=>{},onSelect:d=()=>{},children:f,...M})=>{const I=t.useRef(null),g=t.useRef([]);g.current=t.Children.map(f,t.createRef);const b=te.filterBy(f,({props:o})=>o.type===void 0||o.type==="page").length,i=t.useRef(0),r=t.useRef(0),w=()=>{var y,_,x,p;const o=r.current||((_=(y=g.current[0])==null?void 0:y.current)==null?void 0:_.offsetWidth);r.current=o;const m=i.current||((p=(x=g.current[1])==null?void 0:x.current)==null?void 0:p.offsetWidth);return i.current=m,m?Math.floor((ce(I.current)-o*2)/m):0},[A,B]=t.useState([]),[N,q]=t.useState(0),S=o=>{const m=o||g.current.findIndex(x=>{var p;return((p=x.current)==null?void 0:p.getAttribute("aria-current"))==="page"}),y=w(),_=ae(m,y,b,l);q(m),B(["hidden",..._])};t.useEffect(()=>{const o=ee.debounce(S,16);return S(),window.addEventListener("resize",()=>o()),()=>{window.removeEventListener("resize",()=>o())}},[f]);const W=o=>{let m=0;const y=[],_=[],x=[],p=A.indexOf("dots"),G=A.lastIndexOf("dots");return t.Children.map(f,(V,D)=>{const{type:L="page",current:Q,disabled:Y,href:P,children:U}=V.props,k=A[D]==="dots",z=`${e}-item-${D}`,X=A[D]==="hidden",Z={current:Q,disabled:Y,href:P,type:k&&L==="page"?"separator":L,children:k?t.createElement($.EbayIcon,{name:"overflowHorizontal24",focusable:!1}):U,pageIndex:L==="page"?m++:void 0,key:z,hide:X,onPrevious:v,onNext:E,onSelect:d,a11yPreviousText:s,a11yNextText:h,ref:g.current[D]};if((X||k)&&L==="page"){const C=t.createElement(J.EbayFakeMenuButtonItem,{key:z,href:P,onClick:F=>{P||F.preventDefault();const R=F.currentTarget;d(F,{value:(R==null?void 0:R.innerText)||"",index:m}),S(Number(R==null?void 0:R.innerText))}},U);p===G&&x.push(C),N-2>p&&D<N&&y.push(C),N+2<G&&D>N&&_.push(C)}if(o==="page"&&k&&l==="overflow"){let C=x;return p!==G&&(C=D===2?y:_),t.createElement("li",{key:z},t.createElement("span",{className:"pagination__item",role:"separator"},t.createElement(J.EbayMenuButton,{a11yText:"Menu",borderless:!0,variant:"overflow",noToggleIcon:!0},C)))}return o===L?t.cloneElement(V,Z):null})},u=`${e}-pagination-heading`;return t.createElement("nav",{...M,role:"navigation",className:H(n,"pagination",{"pagination--fluid":c}),"aria-labelledby":u,ref:I},t.createElement("span",{"aria-live":"polite",role:"status"},t.createElement("h2",{className:"clipped",id:u},a)),W("previous"),t.createElement("ol",{className:"pagination__items"},W("page")),W("next"))},le=({pageIndex:e=0,key:n,current:a,disabled:s,type:h="page",href:l,hide:c,children:v,a11yPreviousText:E="Previous page",a11yNextText:d="Next page",onSelect:f,onNext:M,onPrevious:I,className:g,style:b,forwardedRef:i,...r})=>{const w=u=>{var o;f(u,{value:((o=u.currentTarget)==null?void 0:o.innerText)||"",index:e})},A=u=>{u.currentTarget.getAttribute("aria-disabled")||M(u)},B=u=>{u.currentTarget.getAttribute("aria-disabled")||I(u)},N=!!l,q=N?"a":"button",S=N?"icon-link":"icon-btn",W={...b,minWidth:"40px"};switch(h){case"previous":return t.createElement(q,{...r,ref:i,"aria-disabled":s?"true":void 0,"aria-label":E,href:s?void 0:l,className:H(S,"pagination__previous"),style:W,onClick:B},t.createElement($.EbayIcon,{name:"arrowLeft16"}));case"next":return t.createElement(q,{...r,ref:i,"aria-disabled":s?"true":void 0,"aria-label":d,href:s?void 0:l,className:H(S,"pagination__next"),style:W,onClick:A},t.createElement($.EbayIcon,{name:"arrowRight16"}));case"separator":return t.createElement("span",{key:n,style:b,className:"pagination__item",ref:i,role:"separator"},v);default:return t.createElement("li",{...r,hidden:c},t.createElement(q,{ref:i,"aria-current":a?"page":void 0,href:l,className:"pagination__item",style:b,key:n,onClick:w},v))}},de=ne.withForwardRef(le);exports.EbayPagination=ue;exports.EbayPaginationItem=de;
|
|
@@ -1,12 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const React = require("react");
|
|
4
|
-
const classNames = require("classnames");
|
|
5
|
-
const dialogPreviousButton = require("../dialog-previous-button-EC_Y6KaT.js");
|
|
6
|
-
require("../icon-button-BQWoMgX1.js");
|
|
7
|
-
const classPrefix = "panel-dialog";
|
|
8
|
-
const EbayPanelDialog = ({ open, animated, position = "start", onClose = () => {
|
|
9
|
-
}, className, ...rest }) => React.createElement(dialogPreviousButton.DialogBaseWithState, { ...rest, "aria-label": "Infotip", classPrefix, buttonPosition: "right", onCloseBtnClick: onClose, onBackgroundClick: onClose, animated, className: classNames(className, { [`${classPrefix}--mask-fade-slow`]: animated }), windowClass: classNames(`${classPrefix}__window--slide`, {
|
|
10
|
-
[`${classPrefix}__window--end`]: position === "end"
|
|
11
|
-
}), open });
|
|
12
|
-
exports.EbayPanelDialog = EbayPanelDialog;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),t=require("classnames"),c=require("../dialog-previous-button-B-fysL3O.js");require("../icon-button-Bjjvld0a.js");const e="panel-dialog",d=({open:i,animated:a,position:s="start",onClose:o=()=>{},className:l,...n})=>r.createElement(c.DialogBaseWithState,{...n,"aria-label":"Infotip",classPrefix:e,buttonPosition:"right",onCloseBtnClick:o,onBackgroundClick:o,animated:a,className:t(l,{[`${e}--mask-fade-slow`]:a}),windowClass:t(`${e}__window--slide`,{[`${e}__window--end`]:s==="end"}),open:i});exports.EbayPanelDialog=d;
|
|
@@ -1,6 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const React = require("react");
|
|
4
|
-
const classNames = require("classnames");
|
|
5
|
-
const EbayProgressBar = ({ value = 0, max = 100, fluid, className, ...rest }) => React.createElement("progress", { ...rest, className: classNames("progress-bar", className, { "progress-bar--fluid": fluid }), value, max });
|
|
6
|
-
exports.EbayProgressBar = EbayProgressBar;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),c=require("classnames"),g=({value:e=0,max:r=100,fluid:s,className:a,...o})=>t.createElement("progress",{...o,className:c("progress-bar",a,{"progress-bar--fluid":s}),value:e,max:r});exports.EbayProgressBar=g;
|
|
@@ -1,4 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const progressSpinner = require("../progress-spinner-DOFKRtuu.js");
|
|
4
|
-
exports.EbayProgressSpinner = progressSpinner.EbayProgressSpinner;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../progress-spinner-CF3qoWE3.js");exports.EbayProgressSpinner=e.EbayProgressSpinner;
|
|
@@ -1,72 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const React = require("react");
|
|
4
|
-
const classNames = require("classnames");
|
|
5
|
-
const icon = require("../icon-B17Di3YL.js");
|
|
6
|
-
const EbayProgressStepper = ({ direction = "row", defaultState = "active", children, className, ...rest }) => {
|
|
7
|
-
const childrenArray = React.Children.toArray(children);
|
|
8
|
-
const currentIndex = currentIndexByDefaultState(childrenArray, defaultState);
|
|
9
|
-
return React.createElement(
|
|
10
|
-
"div",
|
|
11
|
-
{ ...rest, className: classNames(className, "progress-stepper", {
|
|
12
|
-
"progress-stepper--vertical": direction === "column"
|
|
13
|
-
}) },
|
|
14
|
-
React.createElement("div", { role: "list", className: "progress-stepper__items" }, childrenArray.map((child, index) => React.createElement(
|
|
15
|
-
React.Fragment,
|
|
16
|
-
{ key: index },
|
|
17
|
-
index > 0 && React.createElement("hr", { className: "progress-stepper__separator", role: "presentation" }),
|
|
18
|
-
React.cloneElement(child, {
|
|
19
|
-
state: stepState(index, currentIndex),
|
|
20
|
-
...child.props,
|
|
21
|
-
current: currentIndex === index
|
|
22
|
-
})
|
|
23
|
-
)))
|
|
24
|
-
);
|
|
25
|
-
};
|
|
26
|
-
function currentIndexByDefaultState(steps, defaultState) {
|
|
27
|
-
const foundCurrentIndex = steps.findIndex((child) => child.props.current);
|
|
28
|
-
if (foundCurrentIndex === -1) {
|
|
29
|
-
switch (defaultState) {
|
|
30
|
-
case "complete":
|
|
31
|
-
return steps.length - 1;
|
|
32
|
-
case "upcoming":
|
|
33
|
-
return 0;
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
return foundCurrentIndex;
|
|
37
|
-
}
|
|
38
|
-
function stepState(stepIndex, currentIndex) {
|
|
39
|
-
if (stepIndex <= currentIndex)
|
|
40
|
-
return "complete";
|
|
41
|
-
if (stepIndex > currentIndex)
|
|
42
|
-
return "upcoming";
|
|
43
|
-
}
|
|
44
|
-
const typeIcons = {
|
|
45
|
-
complete: "stepperConfirmation24",
|
|
46
|
-
attention: "stepperAttention24",
|
|
47
|
-
upcoming: "stepperUpcoming24",
|
|
48
|
-
active: "stepperConfirmation24"
|
|
49
|
-
};
|
|
50
|
-
const EbayProgressStep = ({ current, state = "complete", children, className, ...rest }) => {
|
|
51
|
-
const childrenArray = React.Children.toArray(children);
|
|
52
|
-
const title = childrenArray.find((child) => child.type === EbayProgressTitle);
|
|
53
|
-
const text = childrenArray.filter((child) => child.type !== EbayProgressTitle);
|
|
54
|
-
const stepClassNames = classNames(className, "progress-stepper__item", { "progress-stepper__item--attention": state === "attention" });
|
|
55
|
-
const icon$1 = typeIcons[state];
|
|
56
|
-
const ariaLabel = current ? "current" : state;
|
|
57
|
-
return React.createElement(
|
|
58
|
-
"div",
|
|
59
|
-
{ ...rest, className: stepClassNames, role: "listitem", "aria-current": current ? "step" : void 0 },
|
|
60
|
-
React.createElement("div", { className: "progress-stepper__icon" }, icon$1 && React.createElement(icon.EbayIcon, { name: icon$1, "aria-label": ariaLabel })),
|
|
61
|
-
React.createElement(
|
|
62
|
-
"div",
|
|
63
|
-
{ className: "progress-stepper__text" },
|
|
64
|
-
title,
|
|
65
|
-
text
|
|
66
|
-
)
|
|
67
|
-
);
|
|
68
|
-
};
|
|
69
|
-
const EbayProgressTitle = ({ as: TitleComponent = "h4", children }) => React.createElement(TitleComponent, {}, children);
|
|
70
|
-
exports.EbayProgressStep = EbayProgressStep;
|
|
71
|
-
exports.EbayProgressStepper = EbayProgressStepper;
|
|
72
|
-
exports.EbayProgressTitle = EbayProgressTitle;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),g=require("classnames"),E=require("../icon-D4RDqpD4.js"),d=({direction:t="row",defaultState:r="active",children:s,className:o,...i})=>{const a=e.Children.toArray(s),c=f(a,r);return e.createElement("div",{...i,className:g(o,"progress-stepper",{"progress-stepper--vertical":t==="column"})},e.createElement("div",{role:"list",className:"progress-stepper__items"},a.map((p,n)=>e.createElement(e.Fragment,{key:n},n>0&&e.createElement("hr",{className:"progress-stepper__separator",role:"presentation"}),e.cloneElement(p,{state:_(n,c),...p.props,current:c===n})))))};function f(t,r){const s=t.findIndex(o=>o.props.current);if(s===-1)switch(r){case"complete":return t.length-1;case"upcoming":return 0}return s}function _(t,r){if(t<=r)return"complete";if(t>r)return"upcoming"}const b={complete:"stepperConfirmation24",attention:"stepperAttention24",upcoming:"stepperUpcoming24",active:"stepperConfirmation24"},v=({current:t,state:r="complete",children:s,className:o,...i})=>{const a=e.Children.toArray(s),c=a.find(l=>l.type===m),p=a.filter(l=>l.type!==m),n=g(o,"progress-stepper__item",{"progress-stepper__item--attention":r==="attention"}),u=b[r],y=t?"current":r;return e.createElement("div",{...i,className:n,role:"listitem","aria-current":t?"step":void 0},e.createElement("div",{className:"progress-stepper__icon"},u&&e.createElement(E.EbayIcon,{name:u,"aria-label":y})),e.createElement("div",{className:"progress-stepper__text"},c,p))},m=({as:t="h4",children:r})=>e.createElement(t,{},r);exports.EbayProgressStep=v;exports.EbayProgressStepper=d;exports.EbayProgressTitle=m;
|
package/ebay-radio/index.js
CHANGED
|
@@ -1,4 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const ebayRadio_radio = require("./radio/index.js");
|
|
4
|
-
exports.EbayRadio = ebayRadio_radio;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),N=require("classnames"),c=require("../icon-D4RDqpD4.js"),v=require("../label-CnrpYJ-g.js"),I=({size:r="default",checked:s,defaultChecked:d,className:i,style:m,id:o,onChange:u=()=>{},onFocus:h=()=>{},onKeyDown:y=()=>{},children:l,...E})=>{const g=a=>{var n;return u(a,{value:(n=a.target)==null?void 0:n.value})},b=a=>{var n;return h(a,{value:(n=a.target)==null?void 0:n.value})},_=a=>{const n=a.target;return y(a,{value:n==null?void 0:n.value})},k=N("radio",i,{"radio--large":r==="large"}),p=r==="large"?e.createElement(c.EbayIcon,{name:"radioChecked24",className:"radio__checked"}):e.createElement(c.EbayIcon,{name:"radioChecked18",className:"radio__checked"}),C=r==="large"?e.createElement(c.EbayIcon,{name:"radioUnchecked24",className:"radio__unchecked"}):e.createElement(c.EbayIcon,{name:"radioUnchecked18",className:"radio__unchecked"}),t=e.Children.toArray(l).find(a=>a.type===v.Label);return e.createElement(e.Fragment,null,e.createElement("span",{className:k,style:{...m,alignItems:"center"}},e.createElement("input",{...E,id:o,className:"radio__control",type:"radio",defaultChecked:d,checked:s,onChange:g,onFocus:b,onKeyDown:_}),e.createElement("span",{className:"radio__icon",hidden:!0},p,C)),t?e.cloneElement(t,{...t.props,position:"end",htmlFor:o}):l)};exports.EbayRadio=I;
|
|
@@ -1,69 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const React = require("react");
|
|
4
|
-
const classNames = require("classnames");
|
|
5
|
-
const noticeContent = require("../notice-content-BhUeK1pd.js");
|
|
6
|
-
const noticeContent$1 = require("../notice-content-BTXVxttv.js");
|
|
7
|
-
const icon = require("../icon-B17Di3YL.js");
|
|
8
|
-
const common_randomId = require("../common/random-id/index.js");
|
|
9
|
-
const noticeFooter = require("../notice-footer-CIQ8SM6N.js");
|
|
10
|
-
const common_noticeUtils_noticeCta = require("../common/notice-utils/notice-cta/index.js");
|
|
11
|
-
const EbaySectionNotice = ({ status = "general", children, className, "aria-label": ariaLabel, "aria-roledescription": ariaRoleDescription = "Notice", a11yDismissText, educationIcon, iconClass, prominent, onDismiss = () => {
|
|
12
|
-
}, ...rest }) => {
|
|
13
|
-
const [dismissed, setDismissed] = React.useState(false);
|
|
14
|
-
const [rId, setRandomId] = React.useState("");
|
|
15
|
-
React.useEffect(() => {
|
|
16
|
-
setRandomId(common_randomId.randomId());
|
|
17
|
-
}, []);
|
|
18
|
-
const childrenArray = React.Children.toArray(children);
|
|
19
|
-
const content = childrenArray.find(({ type }) => type === noticeContent.EbayNoticeContent);
|
|
20
|
-
const hasStatus = status !== "general" && status !== "none";
|
|
21
|
-
const isEducational = status === "education";
|
|
22
|
-
let iconName = null;
|
|
23
|
-
if (hasStatus) {
|
|
24
|
-
if (isEducational) {
|
|
25
|
-
iconName = educationIcon || "lightbulb24";
|
|
26
|
-
} else {
|
|
27
|
-
iconName = `${status}Filled16`;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
if (!content) {
|
|
31
|
-
throw new Error(`EbaySectionNotice: Please use a EbayNoticeContent that defines the content of the notice`);
|
|
32
|
-
}
|
|
33
|
-
const handleDismissed = (event) => {
|
|
34
|
-
setDismissed(true);
|
|
35
|
-
onDismiss(event);
|
|
36
|
-
};
|
|
37
|
-
return dismissed ? null : React.createElement(
|
|
38
|
-
"section",
|
|
39
|
-
{ ...rest, className: classNames(className, `section-notice`, {
|
|
40
|
-
[`section-notice--${status}`]: hasStatus,
|
|
41
|
-
"section-notice--education": isEducational && prominent,
|
|
42
|
-
"section-notice--large-icon": isEducational
|
|
43
|
-
}), role: "region", "aria-label": !hasStatus ? ariaLabel : null, "aria-labelledby": hasStatus ? `section-notice-${status}-${rId}` : null, "aria-roledescription": ariaRoleDescription },
|
|
44
|
-
iconName && React.createElement(
|
|
45
|
-
"div",
|
|
46
|
-
{ className: "section-notice__header", id: `section-notice-${status}-${rId}` },
|
|
47
|
-
React.createElement(icon.EbayIcon, { className: iconClass, name: iconName, a11yText: ariaLabel, a11yVariant: "label" })
|
|
48
|
-
),
|
|
49
|
-
React.createElement(noticeContent$1.NoticeContent, { ...content.props, type: "section" }),
|
|
50
|
-
children,
|
|
51
|
-
a11yDismissText && React.createElement(
|
|
52
|
-
EbaySectionNoticeFooter,
|
|
53
|
-
null,
|
|
54
|
-
React.createElement(
|
|
55
|
-
"button",
|
|
56
|
-
{ "aria-label": a11yDismissText, className: "fake-link page-notice__dismiss", onClick: handleDismissed },
|
|
57
|
-
React.createElement(icon.EbayIcon, { name: "close16" })
|
|
58
|
-
)
|
|
59
|
-
)
|
|
60
|
-
);
|
|
61
|
-
};
|
|
62
|
-
const EbaySectionNoticeTitle = ({ className, as, children, ...rest }) => React.createElement(noticeFooter.NoticeTitle, { ...rest, className, as, type: "section" }, children);
|
|
63
|
-
const EbaySectionNoticeFooter = ({ className, children }) => React.createElement(noticeFooter.NoticeFooter, { className, type: "section" }, children);
|
|
64
|
-
const EbaySectionNoticeCTA = ({ className, children }) => React.createElement(common_noticeUtils_noticeCta, { className, type: "section" }, children);
|
|
65
|
-
exports.EbayNoticeContent = noticeContent.EbayNoticeContent;
|
|
66
|
-
exports.EbaySectionNotice = EbaySectionNotice;
|
|
67
|
-
exports.EbaySectionNoticeCTA = EbaySectionNoticeCTA;
|
|
68
|
-
exports.EbaySectionNoticeFooter = EbaySectionNoticeFooter;
|
|
69
|
-
exports.EbaySectionNoticeTitle = EbaySectionNoticeTitle;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),A=require("classnames"),m=require("../notice-content-C0ZStfuX.js"),I=require("../notice-content-9iF4T8uB.js"),b=require("../icon-D4RDqpD4.js"),F=require("../forwardRef-fPwzYd82.js"),s=require("../notice-cta-FAd6zCdx.js"),_=({status:t="general",children:n,className:a,"aria-label":o,"aria-roledescription":u="Notice",a11yDismissText:d,educationIcon:S,iconClass:f,prominent:C,onDismiss:h=()=>{},...p})=>{const[g,q]=e.useState(!1),[E,T]=e.useState("");e.useEffect(()=>{T(F.randomId())},[]);const y=e.Children.toArray(n).find(({type:l})=>l===m.EbayNoticeContent),c=t!=="general"&&t!=="none",r=t==="education";let i=null;if(c&&(r?i=S||"lightbulb24":i=`${t}Filled16`),!y)throw new Error("EbaySectionNotice: Please use a EbayNoticeContent that defines the content of the notice");const $=l=>{q(!0),h(l)};return g?null:e.createElement("section",{...p,className:A(a,"section-notice",{[`section-notice--${t}`]:c,"section-notice--education":r&&C,"section-notice--large-icon":r}),role:"region","aria-label":c?null:o,"aria-labelledby":c?`section-notice-${t}-${E}`:null,"aria-roledescription":u},i&&e.createElement("div",{className:"section-notice__header",id:`section-notice-${t}-${E}`},e.createElement(b.EbayIcon,{className:f,name:i,a11yText:o,a11yVariant:"label"})),e.createElement(I.NoticeContent,{...y.props,type:"section"}),n,d&&e.createElement(N,null,e.createElement("button",{"aria-label":d,className:"fake-link page-notice__dismiss",onClick:$},e.createElement(b.EbayIcon,{name:"close16"}))))},k=({className:t,as:n,children:a,...o})=>e.createElement(s.NoticeTitle,{...o,className:t,as:n,type:"section"},a),N=({className:t,children:n})=>e.createElement(s.NoticeFooter,{className:t,type:"section"},n),w=({className:t,children:n})=>e.createElement(s.NoticeCTA,{className:t,type:"section"},n);exports.EbayNoticeContent=m.EbayNoticeContent;exports.EbaySectionNotice=_;exports.EbaySectionNoticeCTA=w;exports.EbaySectionNoticeFooter=N;exports.EbaySectionNoticeTitle=k;
|