@ebay/ui-core-react 6.2.1 → 6.3.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/common/component-utils/array.polyfill.flat.js +11 -13
- package/common/component-utils/forwardRef.js +4 -17
- package/common/component-utils/usePrevious.js +3 -3
- package/common/component-utils/utils.js +13 -26
- package/common/debounce.js +3 -7
- package/common/event-utils/index.js +8 -11
- package/common/event-utils/use-key-press.js +10 -12
- package/common/event-utils/use-roving-index.js +13 -24
- package/common/floating-label-utils/hooks.js +43 -53
- package/common/notice-utils/notice-content.js +5 -6
- package/common/notice-utils/notice-cta.js +5 -16
- package/common/notice-utils/notice-footer.js +5 -16
- package/common/notice-utils/notice-title.js +6 -17
- package/common/random-id.js +1 -1
- package/common/range.js +1 -4
- package/common/tooltip-utils/tooltip-close-button.js +1 -1
- package/common/tooltip-utils/tooltip-content.js +16 -28
- package/common/tooltip-utils/tooltip-footer.js +3 -6
- package/common/tooltip-utils/tooltip-host.js +5 -16
- package/common/tooltip-utils/tooltip.d.ts +1 -1
- package/common/tooltip-utils/tooltip.js +14 -26
- package/common/tooltip-utils/use-tooltip.js +8 -9
- package/ebay-alert-dialog/alert-dialog.js +11 -22
- package/ebay-badge/badge.js +6 -17
- package/ebay-breadcrumbs/breadcrumb-item.js +7 -18
- package/ebay-breadcrumbs/breadcrumbs.js +19 -30
- package/ebay-button/button-cell.js +5 -16
- package/ebay-button/button-expand.d.ts +4 -2
- package/ebay-button/button-expand.d.ts.map +1 -1
- package/ebay-button/button-expand.js +7 -10
- package/ebay-button/button-loading.js +5 -5
- package/ebay-button/button-text.js +3 -6
- package/ebay-button/button.d.ts +1 -1
- package/ebay-button/button.js +31 -43
- package/ebay-calendar/calendar.js +94 -111
- package/ebay-calendar/date-utils.js +9 -18
- package/ebay-carousel/carousel-control-button.js +9 -10
- package/ebay-carousel/carousel-item.d.ts +1 -1
- package/ebay-carousel/carousel-item.js +14 -25
- package/ebay-carousel/carousel-list.js +21 -22
- package/ebay-carousel/carousel.js +32 -44
- package/ebay-carousel/helpers.js +35 -47
- package/ebay-carousel/scroll-to-transition.js +15 -15
- package/ebay-checkbox/checkbox.js +21 -32
- package/ebay-confirm-dialog/confirm-dialog.js +11 -22
- package/ebay-cta-button/cta-button.d.ts +1 -1
- package/ebay-cta-button/cta-button.js +9 -20
- package/ebay-date-textbox/date-textbox.js +37 -53
- package/ebay-dialog-base/components/animation.d.ts +0 -1
- package/ebay-dialog-base/components/animation.d.ts.map +1 -1
- package/ebay-dialog-base/components/animation.js +25 -28
- package/ebay-dialog-base/components/dialog-actions.js +2 -5
- package/ebay-dialog-base/components/dialog-close-button.d.ts +5 -2
- package/ebay-dialog-base/components/dialog-close-button.d.ts.map +1 -1
- package/ebay-dialog-base/components/dialog-close-button.js +2 -5
- package/ebay-dialog-base/components/dialog-footer.js +2 -5
- package/ebay-dialog-base/components/dialog-header.js +4 -15
- package/ebay-dialog-base/components/dialog-previous-button.js +6 -17
- package/ebay-dialog-base/components/dialogBase.js +40 -51
- package/ebay-dialog-base/dialog-base-with-state.js +22 -35
- package/ebay-drawer-dialog/components/drawer.js +27 -50
- package/ebay-eek/eek-rating.js +8 -10
- package/ebay-eek/eek-util.d.ts +1 -1
- package/ebay-eek/eek-util.d.ts.map +1 -1
- package/ebay-eek/eek-util.js +7 -6
- package/ebay-fake-menu/menu-item-separator.js +5 -16
- package/ebay-fake-menu/menu-item.js +15 -26
- package/ebay-fake-menu/menu.js +11 -22
- package/ebay-fake-menu-button/menu-button-item.js +2 -2
- package/ebay-fake-menu-button/menu-button-label.d.ts +4 -2
- package/ebay-fake-menu-button/menu-button-label.d.ts.map +1 -1
- package/ebay-fake-menu-button/menu-button-label.js +2 -5
- package/ebay-fake-menu-button/menu-button-separator.js +5 -16
- package/ebay-fake-menu-button/menu-button.js +32 -45
- package/ebay-fake-tabs/fake-tabs.js +10 -23
- package/ebay-fake-tabs/tab.js +5 -16
- package/ebay-field/description.js +7 -19
- package/ebay-field/field.js +4 -5
- package/ebay-field/label.js +7 -18
- package/ebay-fullscreen-dialog/fullscreen-dialog.js +7 -18
- package/ebay-icon/icon.d.ts +1 -1
- package/ebay-icon/icon.js +17 -29
- package/ebay-icon-button/icon-button.d.ts +1 -1
- package/ebay-icon-button/icon-button.js +15 -27
- package/ebay-infotip/ebay-infotip-content.js +2 -5
- package/ebay-infotip/ebay-infotip-heading.js +5 -16
- package/ebay-infotip/ebay-infotip-host.d.ts +2 -2
- package/ebay-infotip/ebay-infotip-host.d.ts.map +1 -1
- package/ebay-infotip/ebay-infotip-host.js +10 -24
- package/ebay-infotip/ebay-infotip.d.ts.map +1 -1
- package/ebay-infotip/ebay-infotip.js +23 -34
- package/ebay-inline-notice/inline-notice.js +15 -27
- package/ebay-lightbox-dialog/lightbox-dialog.js +9 -21
- package/ebay-listbox-button/listbox-button-option.js +7 -18
- package/ebay-listbox-button/listbox-button.d.ts.map +1 -1
- package/ebay-listbox-button/listbox-button.js +79 -100
- package/ebay-menu/menu-item-separator.js +5 -16
- package/ebay-menu/menu-item.js +12 -23
- package/ebay-menu/menu.d.ts +1 -1
- package/ebay-menu/menu.js +37 -64
- package/ebay-menu-button/README.md +1 -1
- package/ebay-menu-button/menu-button-item.js +1 -1
- package/ebay-menu-button/menu-button-label.d.ts +4 -2
- package/ebay-menu-button/menu-button-label.d.ts.map +1 -1
- package/ebay-menu-button/menu-button-label.js +2 -5
- package/ebay-menu-button/menu-button-separator.js +5 -16
- package/ebay-menu-button/menu-button.js +46 -60
- package/ebay-notice-base/components/ebay-notice-content/notice-content.js +1 -1
- package/ebay-notice-base/components/ebay-notice-title/notice-title.d.ts +5 -2
- package/ebay-notice-base/components/ebay-notice-title/notice-title.d.ts.map +1 -1
- package/ebay-notice-base/components/ebay-notice-title/notice-title.js +2 -5
- package/ebay-page-notice/page-notice-cta.js +3 -6
- package/ebay-page-notice/page-notice-footer.js +3 -6
- package/ebay-page-notice/page-notice-title.js +5 -16
- package/ebay-page-notice/page-notice.js +16 -27
- package/ebay-pagination/helpers.js +21 -24
- package/ebay-pagination/pagination-item.d.ts +1 -1
- package/ebay-pagination/pagination-item.js +16 -27
- package/ebay-pagination/pagination.js +52 -81
- package/ebay-panel-dialog/panel-dialog.js +9 -21
- package/ebay-progress-bar/progress-bar.js +5 -16
- package/ebay-progress-spinner/progress-spinner.js +7 -18
- package/ebay-progress-stepper/ebay-progress-step.js +14 -25
- package/ebay-progress-stepper/ebay-progress-stepper.js +10 -21
- package/ebay-progress-stepper/ebay-progress-title.js +2 -5
- package/ebay-radio/radio.js +18 -29
- package/ebay-section-notice/section-notice-footer.js +3 -6
- package/ebay-section-notice/section-notice-title.js +5 -16
- package/ebay-section-notice/section-notice.js +24 -39
- package/ebay-section-title/cta.js +5 -16
- package/ebay-section-title/info.js +5 -16
- package/ebay-section-title/overflow.js +5 -16
- package/ebay-section-title/section-title.js +13 -24
- package/ebay-section-title/subtitle.js +5 -16
- package/ebay-section-title/title.js +5 -16
- package/ebay-select/ebay-select-option.js +4 -15
- package/ebay-select/ebay-select.d.ts +1 -1
- package/ebay-select/ebay-select.js +34 -45
- package/ebay-signal/signal.js +6 -17
- package/ebay-snackbar-dialog/components/ebay-snackbar-dialog-action.js +5 -16
- package/ebay-snackbar-dialog/components/ebay-snackbar-dialog.js +27 -38
- package/ebay-split-button/split-button.js +10 -21
- package/ebay-star-rating/star-rating.js +8 -19
- package/ebay-star-rating-select/star-rating-select.js +20 -31
- package/ebay-svg/svg.js +3 -3
- package/ebay-switch/ebay-switch.js +10 -21
- package/ebay-tabs/tab-panel.js +5 -16
- package/ebay-tabs/tab.js +5 -16
- package/ebay-tabs/tabs.js +26 -40
- package/ebay-textbox/postfix-icon.js +7 -18
- package/ebay-textbox/prefix-icon.js +5 -16
- package/ebay-textbox/textbox.d.ts +1 -1
- package/ebay-textbox/textbox.js +42 -53
- package/ebay-toast-dialog/components/toast.js +6 -17
- package/ebay-tooltip/ebay-tooltip-content.js +1 -1
- package/ebay-tooltip/ebay-tooltip-host.js +1 -1
- package/ebay-tooltip/ebay-tooltip.js +21 -32
- package/ebay-tourtip/ebay-tourtip-content.js +1 -1
- package/ebay-tourtip/ebay-tourtip-footer.js +4 -7
- package/ebay-tourtip/ebay-tourtip-heading.js +6 -17
- package/ebay-tourtip/ebay-tourtip-host.js +1 -1
- package/ebay-tourtip/ebay-tourtip.js +22 -33
- package/ebay-video/controls.d.ts.map +1 -1
- package/ebay-video/controls.js +23 -46
- package/ebay-video/reportButton.d.ts +7 -2
- package/ebay-video/reportButton.d.ts.map +1 -1
- package/ebay-video/reportButton.js +5 -8
- package/ebay-video/source.js +3 -14
- package/ebay-video/video.d.ts.map +1 -1
- package/ebay-video/video.js +54 -80
- package/package.json +23 -18
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
3
|
if (k2 === undefined) k2 = k;
|
|
15
4
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -48,27 +37,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
48
37
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
49
38
|
};
|
|
50
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
var
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
40
|
+
const react_1 = __importStar(require("react"));
|
|
41
|
+
const notice_content_1 = __importDefault(require("../common/notice-utils/notice-content"));
|
|
42
|
+
const ebay_notice_content_1 = require("../ebay-notice-base/components/ebay-notice-content");
|
|
43
|
+
const ebay_icon_1 = require("../ebay-icon");
|
|
44
|
+
const index_1 = require("./index");
|
|
45
|
+
const EbayPageNotice = (_a) => {
|
|
46
|
+
var { id, status = 'general', children, a11yDismissText, 'aria-label': ariaLabel, onDismiss = () => { } } = _a, rest = __rest(_a, ["id", "status", "children", "a11yDismissText", 'aria-label', "onDismiss"]);
|
|
47
|
+
const [dismissed, setDismissed] = (0, react_1.useState)(false);
|
|
48
|
+
const childrenArray = react_1.default.Children.toArray(children);
|
|
49
|
+
const content = childrenArray.find((child) => child.type === ebay_notice_content_1.EbayNoticeContent);
|
|
61
50
|
if (!content) {
|
|
62
|
-
throw new Error(
|
|
51
|
+
throw new Error(`EbayPageNotice: Please use a EbayNoticeContent that defines the content of the notice`);
|
|
63
52
|
}
|
|
64
|
-
|
|
53
|
+
const handleDismissed = (event) => {
|
|
65
54
|
setDismissed(true);
|
|
66
55
|
onDismiss(event);
|
|
67
56
|
};
|
|
68
|
-
return dismissed ? null : (react_1.default.createElement("section",
|
|
69
|
-
status !==
|
|
70
|
-
react_1.default.createElement(ebay_icon_1.EbayIcon, { name:
|
|
71
|
-
react_1.default.createElement(notice_content_1.default,
|
|
57
|
+
return dismissed ? null : (react_1.default.createElement("section", Object.assign({}, rest, { "aria-labelledby": id || `${status}-status`, className: `page-notice ${status !== `general` ? `page-notice--${status}` : ``}`, role: "region" }),
|
|
58
|
+
status !== `general` ? (react_1.default.createElement("div", { className: "page-notice__header", id: id || `${status}-status` },
|
|
59
|
+
react_1.default.createElement(ebay_icon_1.EbayIcon, { name: `${status}Filled16`, a11yText: ariaLabel, a11yVariant: "label" }))) : null,
|
|
60
|
+
react_1.default.createElement(notice_content_1.default, Object.assign({}, content.props, { type: "page" })),
|
|
72
61
|
children,
|
|
73
62
|
a11yDismissText && (react_1.default.createElement(index_1.EbayPageNoticeFooter, null,
|
|
74
63
|
react_1.default.createElement("button", { "aria-label": a11yDismissText, className: "fake-link page-notice__dismiss", onClick: handleDismissed },
|
|
@@ -1,21 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.getMaxWidth = exports.calcPageState = exports.pageNumbersAround = void 0;
|
|
4
|
-
|
|
5
|
-
function pageNumbersAround(totalPages, selectedPage, maxVisiblePages, variant) {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
var startIndexWithoutDots = Math.max(0, selectedPage - Math.ceil((visibleItems - 1) / 2));
|
|
12
|
-
var startIndexWithDots = visibleItems < const_1.MIN_VISIBLE_ITEMS ? selectedPage :
|
|
4
|
+
const const_1 = require("./const");
|
|
5
|
+
function pageNumbersAround(totalPages, selectedPage, maxVisiblePages = totalPages, variant = null) {
|
|
6
|
+
const withDots = variant === 'show-last' || (variant === 'overflow' && totalPages > const_1.MAX_PAGES);
|
|
7
|
+
const hasLeadingDots = variant === 'overflow' && totalPages > const_1.MAX_PAGES;
|
|
8
|
+
const visibleItems = Math.min(maxVisiblePages, totalPages);
|
|
9
|
+
const startIndexWithoutDots = Math.max(0, selectedPage - Math.ceil((visibleItems - 1) / 2));
|
|
10
|
+
const startIndexWithDots = visibleItems < const_1.MIN_VISIBLE_ITEMS ? selectedPage :
|
|
13
11
|
Math.max(0, selectedPage - Math.floor((visibleItems - 1) / 2));
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
12
|
+
const endIndex = (withDots ? startIndexWithDots : startIndexWithoutDots) + visibleItems;
|
|
13
|
+
const closeToEnd = endIndex >= totalPages;
|
|
14
|
+
const closeToFront = selectedPage <= const_1.MIN_VISIBLE_ITEMS;
|
|
15
|
+
const visibleRangeWithDots = (start, end) => {
|
|
16
|
+
const items = visibleRange(totalPages, start, end);
|
|
19
17
|
if (visibleItems > 2) {
|
|
20
18
|
items[end - 2] = 'dots';
|
|
21
19
|
items[end - 1] = 'hidden';
|
|
@@ -27,20 +25,20 @@ function pageNumbersAround(totalPages, selectedPage, maxVisiblePages, variant) {
|
|
|
27
25
|
return items;
|
|
28
26
|
};
|
|
29
27
|
// middle show item[1] (...) and item[item.length - 1] (...)
|
|
30
|
-
|
|
28
|
+
const visibleRangeWithOverflowDots = (start, end) => {
|
|
31
29
|
// Following Dot
|
|
32
30
|
if (closeToFront) {
|
|
33
31
|
return visibleRangeWithDots(0, end);
|
|
34
32
|
// Leading Dot
|
|
35
33
|
}
|
|
36
34
|
else if (closeToEnd) {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
return
|
|
35
|
+
const items = visibleRange(totalPages, totalPages - const_1.TRAILING_SPACE_WITH_DOT, totalPages);
|
|
36
|
+
items[0] = 'visible';
|
|
37
|
+
items[1] = 'dots';
|
|
38
|
+
return items;
|
|
41
39
|
}
|
|
42
40
|
// Middle case with Leading & Following Dots
|
|
43
|
-
|
|
41
|
+
const items = visibleRange(totalPages, selectedPage - const_1.LEADING_SPACE_WITH_DOT, selectedPage + const_1.LEADING_SPACE_WITH_DOT + 1);
|
|
44
42
|
items[0] = 'visible';
|
|
45
43
|
items[1] = closeToFront ? 'visible' : 'dots';
|
|
46
44
|
items[totalPages - 2] = 'dots';
|
|
@@ -58,12 +56,11 @@ function pageNumbersAround(totalPages, selectedPage, maxVisiblePages, variant) {
|
|
|
58
56
|
return visibleRange(totalPages, startIndexWithoutDots, endIndex);
|
|
59
57
|
}
|
|
60
58
|
exports.pageNumbersAround = pageNumbersAround;
|
|
61
|
-
function calcPageState(selectedPage, visiblePages, totalPages, variant) {
|
|
62
|
-
if (variant === void 0) { variant = 'show-range'; }
|
|
59
|
+
function calcPageState(selectedPage, visiblePages, totalPages, variant = 'show-range') {
|
|
63
60
|
if (selectedPage === -1) {
|
|
64
61
|
return [];
|
|
65
62
|
}
|
|
66
|
-
|
|
63
|
+
const adjustedNumPages = variant === 'overflow' ? const_1.MAX_PAGES :
|
|
67
64
|
clamp(Math.min(totalPages, visiblePages), const_1.MIN_PAGES, const_1.MAX_PAGES);
|
|
68
65
|
return pageNumbersAround(totalPages, selectedPage - 1, adjustedNumPages, variant);
|
|
69
66
|
}
|
|
@@ -88,7 +85,7 @@ function getMaxWidth(el) {
|
|
|
88
85
|
return 0;
|
|
89
86
|
}
|
|
90
87
|
el.style.width = '100vw';
|
|
91
|
-
|
|
88
|
+
const result = el.offsetWidth;
|
|
92
89
|
el.style.width = null;
|
|
93
90
|
return result;
|
|
94
91
|
}
|
|
@@ -22,6 +22,6 @@ export type PaginationItemProps = HtmlProps & {
|
|
|
22
22
|
forwardedRef?: RefObject<HTMLAnchorElement & HTMLButtonElement>;
|
|
23
23
|
children?: ReactNode;
|
|
24
24
|
};
|
|
25
|
-
declare const _default: React.ForwardRefExoticComponent<
|
|
25
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<PaginationItemProps, "ref"> & React.RefAttributes<React.FC<PaginationItemProps>>>;
|
|
26
26
|
export default _default;
|
|
27
27
|
//# sourceMappingURL=pagination-item.d.ts.map
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
3
|
var t = {};
|
|
15
4
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -25,41 +14,41 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
25
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
15
|
};
|
|
27
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
var
|
|
34
|
-
|
|
17
|
+
const react_1 = __importDefault(require("react"));
|
|
18
|
+
const ebay_icon_1 = require("../ebay-icon");
|
|
19
|
+
const component_utils_1 = require("../common/component-utils");
|
|
20
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
21
|
+
const EbayPaginationItem = (_a) => {
|
|
22
|
+
var { pageIndex = 0, key, current, disabled, type = 'page', href, hide, children, a11yPreviousText = 'Previous page', a11yNextText = 'Next page', onSelect, onNext, onPrevious, className, style, forwardedRef } = _a, rest = __rest(_a, ["pageIndex", "key", "current", "disabled", "type", "href", "hide", "children", "a11yPreviousText", "a11yNextText", "onSelect", "onNext", "onPrevious", "className", "style", "forwardedRef"]);
|
|
23
|
+
const handlePageNumber = (e) => {
|
|
35
24
|
var _a;
|
|
36
25
|
onSelect(e, { value: ((_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.innerText) || '', index: pageIndex });
|
|
37
26
|
};
|
|
38
|
-
|
|
27
|
+
const handleNextPage = (e) => {
|
|
39
28
|
if (!e.currentTarget.getAttribute('aria-disabled')) {
|
|
40
29
|
onNext(e);
|
|
41
30
|
}
|
|
42
31
|
};
|
|
43
|
-
|
|
32
|
+
const handlePreviousPage = (e) => {
|
|
44
33
|
if (!e.currentTarget.getAttribute('aria-disabled')) {
|
|
45
34
|
onPrevious(e);
|
|
46
35
|
}
|
|
47
36
|
};
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
37
|
+
const isAnchor = !!href;
|
|
38
|
+
const ButtonOrAnchor = isAnchor ? 'a' : 'button';
|
|
39
|
+
const iconClassName = isAnchor ? 'icon-link' : 'icon-btn';
|
|
40
|
+
const arrowStyle = Object.assign(Object.assign({}, style), { minWidth: '40px' });
|
|
52
41
|
switch (type) {
|
|
53
42
|
case 'previous':
|
|
54
|
-
return (react_1.default.createElement(ButtonOrAnchor,
|
|
43
|
+
return (react_1.default.createElement(ButtonOrAnchor, Object.assign({}, rest, { ref: forwardedRef, "aria-disabled": disabled ? 'true' : undefined, "aria-label": a11yPreviousText, href: disabled ? undefined : href, className: (0, classnames_1.default)(iconClassName, 'pagination__previous'), style: arrowStyle, onClick: handlePreviousPage }),
|
|
55
44
|
react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "arrowLeft16" })));
|
|
56
45
|
case 'next':
|
|
57
|
-
return (react_1.default.createElement(ButtonOrAnchor,
|
|
46
|
+
return (react_1.default.createElement(ButtonOrAnchor, Object.assign({}, rest, { ref: forwardedRef, "aria-disabled": disabled ? 'true' : undefined, "aria-label": a11yNextText, href: disabled ? undefined : href, className: (0, classnames_1.default)(iconClassName, 'pagination__next'), style: arrowStyle, onClick: handleNextPage }),
|
|
58
47
|
react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "arrowRight16" })));
|
|
59
48
|
case 'separator':
|
|
60
49
|
return (react_1.default.createElement("span", { key: key, style: style, className: "pagination__item", ref: forwardedRef, role: "separator" }, children));
|
|
61
50
|
default:
|
|
62
|
-
return (react_1.default.createElement("li",
|
|
51
|
+
return (react_1.default.createElement("li", Object.assign({}, rest, { hidden: hide }),
|
|
63
52
|
react_1.default.createElement(ButtonOrAnchor, { ref: forwardedRef, "aria-current": current ? 'page' : undefined, href: href, className: "pagination__item", style: style, key: key, onClick: handlePageNumber }, children)));
|
|
64
53
|
}
|
|
65
54
|
};
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
3
|
if (k2 === undefined) k2 = k;
|
|
15
4
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -44,101 +33,83 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
44
33
|
}
|
|
45
34
|
return t;
|
|
46
35
|
};
|
|
47
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
48
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
49
|
-
if (ar || !(i in from)) {
|
|
50
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
51
|
-
ar[i] = from[i];
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
55
|
-
};
|
|
56
36
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
57
37
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
58
38
|
};
|
|
59
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
var
|
|
69
|
-
|
|
70
|
-
|
|
40
|
+
const react_1 = __importStar(require("react"));
|
|
41
|
+
const ebay_fake_menu_button_1 = require("../ebay-fake-menu-button");
|
|
42
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
43
|
+
const debounce_1 = require("../common/debounce");
|
|
44
|
+
const helpers_1 = require("./helpers");
|
|
45
|
+
const component_utils_1 = require("../common/component-utils");
|
|
46
|
+
const ebay_icon_1 = require("../ebay-icon");
|
|
47
|
+
const EbayPagination = (_a) => {
|
|
48
|
+
var { id = 'ebay-pagination', className, a11yCurrentText = 'Pagination - Current Page', a11yPreviousText = 'Previous page', a11yNextText = 'Next page', variant = 'show-range', fluid = false, onPrevious = () => { }, onNext = () => { }, onSelect = () => { }, children } = _a, rest = __rest(_a, ["id", "className", "a11yCurrentText", "a11yPreviousText", "a11yNextText", "variant", "fluid", "onPrevious", "onNext", "onSelect", "children"]);
|
|
49
|
+
const paginationContainerRef = (0, react_1.useRef)(null);
|
|
50
|
+
const childPageRefs = (0, react_1.useRef)([]);
|
|
71
51
|
childPageRefs.current = react_1.Children.map(children, react_1.createRef);
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
var itemWidthRef = (0, react_1.useRef)(0);
|
|
77
|
-
var arrowWidthRef = (0, react_1.useRef)(0);
|
|
78
|
-
var getNumOfVisiblePageItems = function () {
|
|
52
|
+
const totalPages = (0, component_utils_1.filterBy)(children, ({ props }) => props.type === undefined || props.type === 'page').length;
|
|
53
|
+
const itemWidthRef = (0, react_1.useRef)(0);
|
|
54
|
+
const arrowWidthRef = (0, react_1.useRef)(0);
|
|
55
|
+
const getNumOfVisiblePageItems = () => {
|
|
79
56
|
var _a, _b, _c, _d;
|
|
80
|
-
|
|
57
|
+
const pageArrowWidth = arrowWidthRef.current || ((_b = (_a = childPageRefs.current[0]) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.offsetWidth);
|
|
81
58
|
arrowWidthRef.current = pageArrowWidth; // cache arrow width since it should be static
|
|
82
|
-
|
|
59
|
+
const pageItemWidth = itemWidthRef.current || ((_d = (_c = childPageRefs.current[1]) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.offsetWidth);
|
|
83
60
|
itemWidthRef.current = pageItemWidth; // cache item width since it should be static
|
|
84
61
|
return pageItemWidth ?
|
|
85
62
|
Math.floor(((0, helpers_1.getMaxWidth)(paginationContainerRef.current) - pageArrowWidth * 2) / pageItemWidth) :
|
|
86
63
|
0;
|
|
87
64
|
};
|
|
88
|
-
|
|
89
|
-
|
|
65
|
+
const [page, setPage] = (0, react_1.useState)([]);
|
|
66
|
+
const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
|
|
90
67
|
// selectedPageIndexFromDotMenu: override pageIndex on pagination with dot menu value
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
68
|
+
const updatePages = (selectedPageIndexFromDotMenu) => {
|
|
69
|
+
const selectedPageIndex = selectedPageIndexFromDotMenu || childPageRefs.current.findIndex(pageRef => { var _a; return ((_a = pageRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-current')) === 'page'; });
|
|
70
|
+
const visiblePageItems = getNumOfVisiblePageItems();
|
|
71
|
+
const pageState = (0, helpers_1.calcPageState)(selectedPageIndex, visiblePageItems, totalPages, variant);
|
|
95
72
|
setSelectedIndex(selectedPageIndex);
|
|
96
|
-
setPage(
|
|
73
|
+
setPage(['hidden', ...pageState]);
|
|
97
74
|
};
|
|
98
|
-
(0, react_1.useEffect)(
|
|
99
|
-
|
|
75
|
+
(0, react_1.useEffect)(() => {
|
|
76
|
+
const debouncedUpdate = (0, debounce_1.debounce)(updatePages, 16);
|
|
100
77
|
updatePages();
|
|
101
|
-
window.addEventListener('resize',
|
|
102
|
-
return
|
|
103
|
-
window.removeEventListener('resize',
|
|
78
|
+
window.addEventListener('resize', () => debouncedUpdate());
|
|
79
|
+
return () => {
|
|
80
|
+
window.removeEventListener('resize', () => debouncedUpdate());
|
|
104
81
|
};
|
|
105
82
|
}, [children]);
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
return react_1.Children.map(children,
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
current
|
|
121
|
-
disabled: disabled,
|
|
122
|
-
href: href,
|
|
83
|
+
const createChildItems = (itemType) => {
|
|
84
|
+
let pageIndex = 0;
|
|
85
|
+
const firstDotItems = [];
|
|
86
|
+
const secondDotItems = [];
|
|
87
|
+
const allDotItems = [];
|
|
88
|
+
const firstDot = page.indexOf('dots');
|
|
89
|
+
const lastDot = page.lastIndexOf('dots');
|
|
90
|
+
return react_1.Children.map(children, (item, index) => {
|
|
91
|
+
const { type = 'page', current, disabled, href, children: text } = item.props;
|
|
92
|
+
const isDot = page[index] === 'dots';
|
|
93
|
+
const key = `${id}-item-${index}`;
|
|
94
|
+
const hide = page[index] === 'hidden';
|
|
95
|
+
const isSeparator = isDot && type === 'page';
|
|
96
|
+
const newProps = {
|
|
97
|
+
current, disabled, href,
|
|
123
98
|
type: isSeparator ? 'separator' : type,
|
|
124
99
|
children: isDot ? react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "overflowHorizontal24", focusable: false }) : text,
|
|
125
100
|
pageIndex: type === 'page' ? pageIndex++ : undefined,
|
|
126
|
-
key
|
|
127
|
-
hide
|
|
128
|
-
onPrevious
|
|
129
|
-
onNext: onNext,
|
|
130
|
-
onSelect: onSelect,
|
|
131
|
-
a11yPreviousText: a11yPreviousText,
|
|
132
|
-
a11yNextText: a11yNextText,
|
|
101
|
+
key,
|
|
102
|
+
hide,
|
|
103
|
+
onPrevious, onNext, onSelect, a11yPreviousText, a11yNextText,
|
|
133
104
|
ref: childPageRefs.current[index]
|
|
134
105
|
};
|
|
135
106
|
// include hidden numbers & number of (...)itself
|
|
136
107
|
if ((hide || isDot) && type === 'page') {
|
|
137
|
-
|
|
108
|
+
const itemComponent = (react_1.default.createElement(ebay_fake_menu_button_1.EbayFakeMenuButtonItem, { key: key, href: href, onClick: event => {
|
|
138
109
|
if (!href) {
|
|
139
110
|
event.preventDefault();
|
|
140
111
|
}
|
|
141
|
-
|
|
112
|
+
const currentTarget = event.currentTarget;
|
|
142
113
|
onSelect(event, { value: (currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.innerText) || '', index: pageIndex });
|
|
143
114
|
updatePages(Number(currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.innerText));
|
|
144
115
|
} }, text));
|
|
@@ -153,7 +124,7 @@ var EbayPagination = function (_a) {
|
|
|
153
124
|
}
|
|
154
125
|
}
|
|
155
126
|
if (itemType === 'page' && isDot && variant === 'overflow') {
|
|
156
|
-
|
|
127
|
+
let childComponent = allDotItems;
|
|
157
128
|
if (firstDot !== lastDot) {
|
|
158
129
|
childComponent = index === 2 ? firstDotItems : secondDotItems;
|
|
159
130
|
}
|
|
@@ -164,8 +135,8 @@ var EbayPagination = function (_a) {
|
|
|
164
135
|
return itemType === type ? (0, react_1.cloneElement)(item, newProps) : null;
|
|
165
136
|
});
|
|
166
137
|
};
|
|
167
|
-
|
|
168
|
-
return (react_1.default.createElement("nav",
|
|
138
|
+
const headingId = `${id}-pagination-heading`;
|
|
139
|
+
return (react_1.default.createElement("nav", Object.assign({}, rest, { role: "navigation", className: (0, classnames_1.default)(className, 'pagination', { 'pagination--fluid': fluid }), "aria-labelledby": headingId, ref: paginationContainerRef }),
|
|
169
140
|
react_1.default.createElement("span", { "aria-live": "polite", role: "status" },
|
|
170
141
|
react_1.default.createElement("h2", { className: "clipped", id: headingId }, a11yCurrentText)),
|
|
171
142
|
createChildItems('previous'),
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
3
|
var t = {};
|
|
15
4
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -25,15 +14,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
25
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
15
|
};
|
|
27
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
var
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
_c)), open: open })));
|
|
17
|
+
const react_1 = __importDefault(require("react"));
|
|
18
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
19
|
+
const ebay_dialog_base_1 = require("../ebay-dialog-base");
|
|
20
|
+
const classPrefix = 'panel-dialog';
|
|
21
|
+
const EbayPanelDialog = (_a) => {
|
|
22
|
+
var { open, animated, position = 'start', onClose = () => { }, className } = _a, rest = __rest(_a, ["open", "animated", "position", "onClose", "className"]);
|
|
23
|
+
return (react_1.default.createElement(ebay_dialog_base_1.DialogBaseWithState, Object.assign({}, rest, { "aria-label": "Infotip", classPrefix: classPrefix, buttonPosition: "right", onCloseBtnClick: onClose, onBackgroundClick: onClose, animated: animated, className: (0, classnames_1.default)(className, { [`${classPrefix}--mask-fade-slow`]: animated }), windowClass: (0, classnames_1.default)(`${classPrefix}__window--slide`, {
|
|
24
|
+
[`${classPrefix}__window--end`]: position === 'end'
|
|
25
|
+
}), open: open })));
|
|
38
26
|
};
|
|
39
27
|
exports.default = EbayPanelDialog;
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
3
|
var t = {};
|
|
15
4
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -25,10 +14,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
25
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
15
|
};
|
|
27
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
var
|
|
32
|
-
return (react_1.default.createElement("progress",
|
|
17
|
+
const react_1 = __importDefault(require("react"));
|
|
18
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
19
|
+
const EbayProgressBar = (_a) => {
|
|
20
|
+
var { value = 0, max = 100, fluid, className } = _a, rest = __rest(_a, ["value", "max", "fluid", "className"]);
|
|
21
|
+
return (react_1.default.createElement("progress", Object.assign({}, rest, { className: (0, classnames_1.default)('progress-bar', className, { 'progress-bar--fluid': fluid }), value: value, max: max })));
|
|
33
22
|
};
|
|
34
23
|
exports.default = EbayProgressBar;
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
3
|
var t = {};
|
|
15
4
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -25,17 +14,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
25
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
15
|
};
|
|
27
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
17
|
+
const react_1 = __importDefault(require("react"));
|
|
18
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
19
|
+
const ebay_icon_1 = require("../ebay-icon");
|
|
20
|
+
const sizeClass = {
|
|
32
21
|
'default': '',
|
|
33
22
|
'small': 'progress-spinner--small',
|
|
34
23
|
'large': 'progress-spinner--large'
|
|
35
24
|
};
|
|
36
|
-
|
|
37
|
-
var
|
|
38
|
-
return (react_1.default.createElement("span",
|
|
25
|
+
const EbayProgressSpinner = (_a) => {
|
|
26
|
+
var { size = 'default', 'aria-label': ariaLabel = 'Busy', className } = _a, rest = __rest(_a, ["size", 'aria-label', "className"]);
|
|
27
|
+
return (react_1.default.createElement("span", Object.assign({}, rest, { className: (0, classnames_1.default)('progress-spinner', sizeClass[size], className), "aria-label": ariaLabel, role: "img" }),
|
|
39
28
|
react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "spinner24" })));
|
|
40
29
|
};
|
|
41
30
|
exports.default = EbayProgressSpinner;
|