@ebay/ui-core-react 6.2.2-rc.1 → 6.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Potentially problematic release.
This version of @ebay/ui-core-react might be problematic. Click here for more details.
- package/common/component-utils/array.polyfill.flat.js +13 -11
- package/common/component-utils/forwardRef.js +17 -4
- package/common/component-utils/usePrevious.js +3 -3
- package/common/component-utils/utils.js +26 -13
- package/common/debounce.js +7 -3
- package/common/event-utils/index.js +11 -8
- package/common/event-utils/use-key-press.js +12 -10
- package/common/event-utils/use-roving-index.js +24 -13
- package/common/floating-label-utils/hooks.js +53 -43
- package/common/notice-utils/notice-content.js +6 -5
- package/common/notice-utils/notice-cta.js +16 -5
- package/common/notice-utils/notice-footer.js +16 -5
- package/common/notice-utils/notice-title.js +17 -6
- package/common/random-id.js +1 -1
- package/common/range.js +4 -1
- package/common/tooltip-utils/tooltip-close-button.js +1 -1
- package/common/tooltip-utils/tooltip-content.js +28 -16
- package/common/tooltip-utils/tooltip-footer.js +6 -3
- package/common/tooltip-utils/tooltip-host.js +16 -5
- package/common/tooltip-utils/tooltip.d.ts +1 -1
- package/common/tooltip-utils/tooltip.js +26 -14
- package/common/tooltip-utils/use-tooltip.js +9 -8
- package/ebay-alert-dialog/alert-dialog.js +22 -11
- package/ebay-badge/badge.js +17 -6
- package/ebay-breadcrumbs/breadcrumb-item.js +18 -7
- package/ebay-breadcrumbs/breadcrumbs.js +30 -19
- package/ebay-button/button-cell.js +16 -5
- package/ebay-button/button-expand.d.ts +2 -4
- package/ebay-button/button-expand.d.ts.map +1 -1
- package/ebay-button/button-expand.js +10 -7
- package/ebay-button/button-loading.js +5 -5
- package/ebay-button/button-text.js +6 -3
- package/ebay-button/button.d.ts +1 -1
- package/ebay-button/button.js +43 -31
- package/ebay-calendar/calendar.js +111 -94
- package/ebay-calendar/date-utils.js +18 -9
- package/ebay-carousel/carousel-control-button.js +10 -9
- package/ebay-carousel/carousel-item.d.ts +1 -1
- package/ebay-carousel/carousel-item.js +25 -14
- package/ebay-carousel/carousel-list.js +22 -21
- package/ebay-carousel/carousel.js +44 -32
- package/ebay-carousel/helpers.js +47 -35
- package/ebay-carousel/scroll-to-transition.js +15 -15
- package/ebay-checkbox/checkbox.js +32 -21
- package/ebay-confirm-dialog/confirm-dialog.js +22 -11
- package/ebay-cta-button/cta-button.d.ts +1 -1
- package/ebay-cta-button/cta-button.js +20 -9
- package/ebay-date-textbox/date-textbox.js +53 -37
- package/ebay-dialog-base/components/animation.d.ts +1 -0
- package/ebay-dialog-base/components/animation.d.ts.map +1 -1
- package/ebay-dialog-base/components/animation.js +28 -25
- package/ebay-dialog-base/components/dialog-actions.js +5 -2
- package/ebay-dialog-base/components/dialog-close-button.d.ts +2 -5
- package/ebay-dialog-base/components/dialog-close-button.d.ts.map +1 -1
- package/ebay-dialog-base/components/dialog-close-button.js +5 -2
- package/ebay-dialog-base/components/dialog-footer.js +5 -2
- package/ebay-dialog-base/components/dialog-header.js +15 -4
- package/ebay-dialog-base/components/dialog-previous-button.js +17 -6
- package/ebay-dialog-base/components/dialogBase.js +51 -40
- package/ebay-dialog-base/dialog-base-with-state.js +35 -22
- package/ebay-drawer-dialog/components/drawer.js +50 -27
- package/ebay-eek/eek-rating.js +10 -8
- 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 +6 -7
- package/ebay-fake-menu/menu-item-separator.js +16 -5
- package/ebay-fake-menu/menu-item.js +26 -15
- package/ebay-fake-menu/menu.js +22 -11
- package/ebay-fake-menu-button/menu-button-item.js +2 -2
- package/ebay-fake-menu-button/menu-button-label.d.ts +2 -4
- package/ebay-fake-menu-button/menu-button-label.d.ts.map +1 -1
- package/ebay-fake-menu-button/menu-button-label.js +5 -2
- package/ebay-fake-menu-button/menu-button-separator.js +16 -5
- package/ebay-fake-menu-button/menu-button.js +45 -32
- package/ebay-fake-tabs/fake-tabs.js +23 -10
- package/ebay-fake-tabs/tab.js +16 -5
- package/ebay-field/description.js +19 -7
- package/ebay-field/field.js +5 -4
- package/ebay-field/label.js +18 -7
- package/ebay-fullscreen-dialog/fullscreen-dialog.js +18 -7
- package/ebay-icon/icon.d.ts +1 -1
- package/ebay-icon/icon.js +29 -17
- package/ebay-icon-button/icon-button.d.ts +1 -1
- package/ebay-icon-button/icon-button.js +27 -15
- package/ebay-infotip/ebay-infotip-content.js +5 -2
- package/ebay-infotip/ebay-infotip-heading.js +16 -5
- 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 +24 -10
- package/ebay-infotip/ebay-infotip.d.ts.map +1 -1
- package/ebay-infotip/ebay-infotip.js +34 -23
- package/ebay-inline-notice/inline-notice.js +27 -15
- package/ebay-lightbox-dialog/lightbox-dialog.js +21 -9
- package/ebay-listbox-button/listbox-button-option.js +18 -7
- package/ebay-listbox-button/listbox-button.d.ts.map +1 -1
- package/ebay-listbox-button/listbox-button.js +100 -79
- package/ebay-menu/menu-item-separator.js +16 -5
- package/ebay-menu/menu-item.js +23 -12
- package/ebay-menu/menu.d.ts +1 -1
- package/ebay-menu/menu.js +64 -37
- 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 +2 -4
- package/ebay-menu-button/menu-button-label.d.ts.map +1 -1
- package/ebay-menu-button/menu-button-label.js +5 -2
- package/ebay-menu-button/menu-button-separator.js +16 -5
- package/ebay-menu-button/menu-button.js +60 -46
- 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 +2 -5
- 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 +5 -2
- package/ebay-page-notice/page-notice-cta.js +6 -3
- package/ebay-page-notice/page-notice-footer.js +6 -3
- package/ebay-page-notice/page-notice-title.js +16 -5
- package/ebay-page-notice/page-notice.js +27 -16
- package/ebay-pagination/helpers.js +24 -21
- package/ebay-pagination/pagination-item.d.ts +1 -1
- package/ebay-pagination/pagination-item.js +27 -16
- package/ebay-pagination/pagination.js +81 -52
- package/ebay-panel-dialog/panel-dialog.js +21 -9
- package/ebay-progress-bar/progress-bar.js +16 -5
- package/ebay-progress-spinner/progress-spinner.js +18 -7
- package/ebay-progress-stepper/ebay-progress-step.js +25 -14
- package/ebay-progress-stepper/ebay-progress-stepper.js +21 -10
- package/ebay-progress-stepper/ebay-progress-title.js +5 -2
- package/ebay-radio/radio.js +29 -18
- package/ebay-section-notice/section-notice-footer.js +6 -3
- package/ebay-section-notice/section-notice-title.js +16 -5
- package/ebay-section-notice/section-notice.js +39 -24
- package/ebay-section-title/cta.js +16 -5
- package/ebay-section-title/info.js +16 -5
- package/ebay-section-title/overflow.js +16 -5
- package/ebay-section-title/section-title.js +24 -13
- package/ebay-section-title/subtitle.js +16 -5
- package/ebay-section-title/title.js +16 -5
- package/ebay-select/ebay-select-option.js +15 -4
- package/ebay-select/ebay-select.d.ts +1 -1
- package/ebay-select/ebay-select.js +45 -34
- package/ebay-signal/signal.js +17 -6
- package/ebay-snackbar-dialog/components/ebay-snackbar-dialog-action.js +16 -5
- package/ebay-snackbar-dialog/components/ebay-snackbar-dialog.js +38 -27
- package/ebay-split-button/split-button.js +21 -10
- package/ebay-star-rating/star-rating.js +19 -8
- package/ebay-star-rating-select/star-rating-select.js +31 -20
- package/ebay-svg/svg.js +3 -3
- package/ebay-switch/ebay-switch.js +21 -10
- package/ebay-tabs/tab-panel.js +16 -5
- package/ebay-tabs/tab.js +16 -5
- package/ebay-tabs/tabs.js +40 -26
- package/ebay-textbox/postfix-icon.js +18 -7
- package/ebay-textbox/prefix-icon.js +16 -5
- package/ebay-textbox/textbox.d.ts +1 -1
- package/ebay-textbox/textbox.js +53 -42
- package/ebay-toast-dialog/components/toast.js +17 -6
- package/ebay-tooltip/ebay-tooltip-content.js +1 -1
- package/ebay-tooltip/ebay-tooltip-host.js +1 -1
- package/ebay-tooltip/ebay-tooltip.js +32 -21
- package/ebay-tourtip/ebay-tourtip-content.js +1 -1
- package/ebay-tourtip/ebay-tourtip-footer.js +7 -4
- package/ebay-tourtip/ebay-tourtip-heading.js +17 -6
- package/ebay-tourtip/ebay-tourtip-host.js +1 -1
- package/ebay-tourtip/ebay-tourtip.js +33 -22
- package/ebay-video/controls.d.ts.map +1 -1
- package/ebay-video/controls.js +46 -23
- package/ebay-video/reportButton.d.ts +2 -7
- package/ebay-video/reportButton.d.ts.map +1 -1
- package/ebay-video/reportButton.js +8 -5
- package/ebay-video/source.js +14 -3
- package/ebay-video/video.d.ts.map +1 -1
- package/ebay-video/video.js +80 -54
- package/package.json +19 -23
|
@@ -14,17 +14,19 @@ if (!Array.prototype.flat) {
|
|
|
14
14
|
configurable: true,
|
|
15
15
|
writable: true,
|
|
16
16
|
value: function (d) {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
17
|
+
var depthArg = typeof d === 'undefined' ? 1 : Number(d) || 0;
|
|
18
|
+
var result = [];
|
|
19
|
+
var forEach = result.forEach;
|
|
20
|
+
var flatDeep = function (arr, depth) {
|
|
21
|
+
return forEach.call(arr, function (val) {
|
|
22
|
+
if (depth > 0 && Array.isArray(val)) {
|
|
23
|
+
flatDeep(val, depth - 1);
|
|
24
|
+
}
|
|
25
|
+
else {
|
|
26
|
+
result.push(val);
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
};
|
|
28
30
|
flatDeep(this, depthArg);
|
|
29
31
|
return result;
|
|
30
32
|
}
|
|
@@ -1,4 +1,15 @@
|
|
|
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
|
+
};
|
|
2
13
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
14
|
if (k2 === undefined) k2 = k;
|
|
4
15
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -24,13 +35,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
24
35
|
};
|
|
25
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
37
|
exports.withForwardRef = void 0;
|
|
27
|
-
|
|
28
|
-
|
|
38
|
+
var react_1 = __importStar(require("react"));
|
|
39
|
+
var getDisplayName = function (Component) { return Component.displayName || Component.name || 'Component'; };
|
|
29
40
|
// Typescript will automatically find the return type crom forwardRef() function
|
|
30
41
|
// Disabling eslint for this use case
|
|
31
42
|
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
|
32
|
-
|
|
33
|
-
|
|
43
|
+
var withForwardRef = function (Component) {
|
|
44
|
+
var ForwardRef = (0, react_1.forwardRef)(function (props, ref) {
|
|
45
|
+
return react_1.default.createElement(Component, __assign({}, props, { forwardedRef: ref }));
|
|
46
|
+
});
|
|
34
47
|
ForwardRef.displayName = getDisplayName(Component);
|
|
35
48
|
return ForwardRef;
|
|
36
49
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.usePrevious = void 0;
|
|
4
|
-
|
|
4
|
+
var react_1 = require("react");
|
|
5
5
|
function usePrevious(value) {
|
|
6
|
-
|
|
7
|
-
(0, react_1.useEffect)(()
|
|
6
|
+
var ref = (0, react_1.useRef)();
|
|
7
|
+
(0, react_1.useEffect)(function () {
|
|
8
8
|
ref.current = value;
|
|
9
9
|
}, [value]);
|
|
10
10
|
return ref.current;
|
|
@@ -1,26 +1,39 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.filterBy = exports.filterByType = exports.excludeComponent = exports.findComponent = void 0;
|
|
4
|
-
|
|
4
|
+
var react_1 = require("react");
|
|
5
5
|
require("./array.polyfill.flat"); // for Mobile Safari 11
|
|
6
|
-
function findComponent(nodes
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
function findComponent(nodes, componentType) {
|
|
7
|
+
if (nodes === void 0) { nodes = []; }
|
|
8
|
+
var elements = react_1.Children.toArray(nodes);
|
|
9
|
+
return elements.find(function (_a) {
|
|
10
|
+
var type = _a.type;
|
|
11
|
+
return type === componentType;
|
|
12
|
+
}) || null;
|
|
9
13
|
}
|
|
10
14
|
exports.findComponent = findComponent;
|
|
11
|
-
function excludeComponent(nodes
|
|
12
|
-
|
|
13
|
-
|
|
15
|
+
function excludeComponent(nodes, componentType) {
|
|
16
|
+
if (nodes === void 0) { nodes = []; }
|
|
17
|
+
var elements = react_1.Children.toArray(nodes);
|
|
18
|
+
return elements.filter(function (_a) {
|
|
19
|
+
var type = _a.type;
|
|
20
|
+
return type !== componentType;
|
|
21
|
+
});
|
|
14
22
|
}
|
|
15
23
|
exports.excludeComponent = excludeComponent;
|
|
16
|
-
function filterByType(nodes
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
24
|
+
function filterByType(nodes, componentType) {
|
|
25
|
+
if (nodes === void 0) { nodes = []; }
|
|
26
|
+
var elements = react_1.Children.toArray(nodes);
|
|
27
|
+
var types = [componentType].flat();
|
|
28
|
+
return elements.filter(function (_a) {
|
|
29
|
+
var type = _a.type;
|
|
30
|
+
return types.includes(type);
|
|
31
|
+
});
|
|
20
32
|
}
|
|
21
33
|
exports.filterByType = filterByType;
|
|
22
|
-
function filterBy(nodes
|
|
23
|
-
|
|
34
|
+
function filterBy(nodes, predicate) {
|
|
35
|
+
if (nodes === void 0) { nodes = []; }
|
|
36
|
+
var elements = react_1.Children.toArray(nodes);
|
|
24
37
|
return elements.filter(predicate);
|
|
25
38
|
}
|
|
26
39
|
exports.filterBy = filterBy;
|
package/common/debounce.js
CHANGED
|
@@ -2,10 +2,14 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.debounce = void 0;
|
|
4
4
|
function debounce(fn, ms) {
|
|
5
|
-
|
|
6
|
-
return (
|
|
5
|
+
var timer;
|
|
6
|
+
return function () {
|
|
7
|
+
var args = [];
|
|
8
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
9
|
+
args[_i] = arguments[_i];
|
|
10
|
+
}
|
|
7
11
|
clearTimeout(timer);
|
|
8
|
-
timer = setTimeout(()
|
|
12
|
+
timer = setTimeout(function () { return fn.apply(void 0, args); }, ms);
|
|
9
13
|
};
|
|
10
14
|
}
|
|
11
15
|
exports.debounce = debounce;
|
|
@@ -10,13 +10,15 @@ exports.wrapEvent = exports.handleResize = exports.removeEventListener = exports
|
|
|
10
10
|
* @param {KeyboardEvent} e
|
|
11
11
|
* @param {Function} callback
|
|
12
12
|
*/
|
|
13
|
-
function handleKeydown(keyList, e, callback
|
|
13
|
+
function handleKeydown(keyList, e, callback) {
|
|
14
|
+
if (callback === void 0) { callback = function () { }; }
|
|
14
15
|
if (keyList.includes(e.key)) {
|
|
15
16
|
callback();
|
|
16
17
|
}
|
|
17
18
|
}
|
|
18
19
|
// inverse of found keys
|
|
19
|
-
function handleNotKeydown(keyList, e, callback
|
|
20
|
+
function handleNotKeydown(keyList, e, callback) {
|
|
21
|
+
if (callback === void 0) { callback = function () { }; }
|
|
20
22
|
if (!keyList.includes(e.key)) {
|
|
21
23
|
callback();
|
|
22
24
|
}
|
|
@@ -51,7 +53,7 @@ function handleLeftRightArrowsKeydown(e, callback) {
|
|
|
51
53
|
exports.handleLeftRightArrowsKeydown = handleLeftRightArrowsKeydown;
|
|
52
54
|
// only fire for character input, not modifier/meta keys (enter, escape, backspace, tab, etc.)
|
|
53
55
|
function handleTextInput(e, callback) {
|
|
54
|
-
|
|
56
|
+
var keyList = [
|
|
55
57
|
// Edge
|
|
56
58
|
'Esc',
|
|
57
59
|
'Left',
|
|
@@ -81,7 +83,7 @@ function preventDefaultIfHijax(e, hijax) {
|
|
|
81
83
|
}
|
|
82
84
|
}
|
|
83
85
|
exports.preventDefaultIfHijax = preventDefaultIfHijax;
|
|
84
|
-
|
|
86
|
+
var handlers = [];
|
|
85
87
|
function addEventListener(_, handler) {
|
|
86
88
|
if (handlers.length === 0) {
|
|
87
89
|
window.addEventListener('resize', handleResize);
|
|
@@ -98,9 +100,9 @@ function removeEventListener(_, handler) {
|
|
|
98
100
|
exports.removeEventListener = removeEventListener;
|
|
99
101
|
function handleResize(e) {
|
|
100
102
|
window.removeEventListener('resize', handleResize);
|
|
101
|
-
|
|
103
|
+
var callback = function () {
|
|
102
104
|
if (handlers.length) {
|
|
103
|
-
handlers.forEach(handler
|
|
105
|
+
handlers.forEach(function (handler) { return handler(e); });
|
|
104
106
|
window.addEventListener('resize', handleResize);
|
|
105
107
|
}
|
|
106
108
|
};
|
|
@@ -112,8 +114,9 @@ function handleResize(e) {
|
|
|
112
114
|
}
|
|
113
115
|
}
|
|
114
116
|
exports.handleResize = handleResize;
|
|
115
|
-
function wrapEvent(parentEventHandler
|
|
116
|
-
|
|
117
|
+
function wrapEvent(parentEventHandler, localEventHandler) {
|
|
118
|
+
if (parentEventHandler === void 0) { parentEventHandler = function () { }; }
|
|
119
|
+
return function (e) {
|
|
117
120
|
parentEventHandler(e);
|
|
118
121
|
if (!e.defaultPrevented) {
|
|
119
122
|
return localEventHandler(e);
|
|
@@ -1,29 +1,31 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
3
|
+
var react_1 = require("react");
|
|
4
|
+
var useKeyPress = function () {
|
|
5
|
+
var _a = (0, react_1.useState)(false), arrowUpPressed = _a[0], setArrowUpPressed = _a[1];
|
|
6
|
+
var _b = (0, react_1.useState)(false), arrowDownPressed = _b[0], setArrowDownPressed = _b[1];
|
|
7
|
+
var upHandler = function (_a) {
|
|
8
|
+
var key = _a.key;
|
|
9
|
+
var fn = {
|
|
9
10
|
ArrowUp: setArrowUpPressed,
|
|
10
11
|
ArrowDown: setArrowDownPressed
|
|
11
12
|
}[key];
|
|
12
13
|
if (fn)
|
|
13
14
|
fn(false);
|
|
14
15
|
};
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
var downHandler = function (_a) {
|
|
17
|
+
var key = _a.key;
|
|
18
|
+
var fn = {
|
|
17
19
|
ArrowUp: setArrowUpPressed,
|
|
18
20
|
ArrowDown: setArrowDownPressed
|
|
19
21
|
}[key];
|
|
20
22
|
if (fn)
|
|
21
23
|
fn(true);
|
|
22
24
|
};
|
|
23
|
-
(0, react_1.useEffect)(()
|
|
25
|
+
(0, react_1.useEffect)(function () {
|
|
24
26
|
window.addEventListener('keydown', downHandler);
|
|
25
27
|
window.addEventListener('keyup', upHandler);
|
|
26
|
-
return ()
|
|
28
|
+
return function () {
|
|
27
29
|
window.removeEventListener('keydown', downHandler);
|
|
28
30
|
window.removeEventListener('keyup', upHandler);
|
|
29
31
|
};
|
|
@@ -1,30 +1,41 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
3
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
4
|
+
if (ar || !(i in from)) {
|
|
5
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
6
|
+
ar[i] = from[i];
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
10
|
+
};
|
|
2
11
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
12
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
13
|
};
|
|
5
14
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
15
|
+
var react_1 = require("react");
|
|
16
|
+
var use_key_press_1 = __importDefault(require("./use-key-press"));
|
|
17
|
+
var useRovingIndex = function (children, FocusableType, defaultValue) {
|
|
18
|
+
var _a = (0, react_1.useState)(defaultValue), rovingIndex = _a[0], setRovingIndex = _a[1];
|
|
19
|
+
var _b = (0, use_key_press_1.default)(), arrowUpPressed = _b[0], arrowDownPressed = _b[1];
|
|
20
|
+
var rovingIndexArray = react_1.Children
|
|
12
21
|
.toArray(children)
|
|
13
|
-
.reduce((focusables, child, i)
|
|
14
|
-
|
|
15
|
-
|
|
22
|
+
.reduce(function (focusables, child, i) {
|
|
23
|
+
return child.type === FocusableType ? __spreadArray(__spreadArray([], focusables, true), [i], false) : focusables;
|
|
24
|
+
}, []);
|
|
25
|
+
var currentIndex = rovingIndexArray.indexOf(rovingIndex);
|
|
26
|
+
var previousOrCurrent = function () {
|
|
16
27
|
if (currentIndex === -1)
|
|
17
28
|
return rovingIndex;
|
|
18
|
-
|
|
29
|
+
var previousRovingIndex = rovingIndexArray[currentIndex - 1];
|
|
19
30
|
return previousRovingIndex === undefined ? rovingIndex : previousRovingIndex;
|
|
20
31
|
};
|
|
21
|
-
|
|
32
|
+
var nextOrCurrent = function () {
|
|
22
33
|
if (currentIndex === -1)
|
|
23
34
|
return rovingIndex;
|
|
24
|
-
|
|
35
|
+
var nextRovingIndex = rovingIndexArray[currentIndex + 1];
|
|
25
36
|
return nextRovingIndex === undefined ? rovingIndex : nextRovingIndex;
|
|
26
37
|
};
|
|
27
|
-
(0, react_1.useEffect)(()
|
|
38
|
+
(0, react_1.useEffect)(function () {
|
|
28
39
|
if (arrowUpPressed)
|
|
29
40
|
setRovingIndex(previousOrCurrent());
|
|
30
41
|
if (arrowDownPressed)
|
|
@@ -27,104 +27,114 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
27
27
|
};
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
exports.useFloatingLabel = void 0;
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
var react_1 = __importStar(require("react"));
|
|
31
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
32
|
+
var classPrefix = 'floating-label__label';
|
|
33
33
|
// input background in Skin 12, used for autofill detection
|
|
34
|
-
|
|
34
|
+
var textboxElementBackgroundRGB = [
|
|
35
35
|
'rgb(245, 245, 245)',
|
|
36
36
|
'rgb(247, 247, 247)' // From skin version 12.6.0
|
|
37
37
|
];
|
|
38
38
|
// check for computed background color because of Chrome autofill bug
|
|
39
39
|
// https://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password/35783761#35783761
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
40
|
+
var isAutofilled = function (input) {
|
|
41
|
+
return input && !textboxElementBackgroundRGB.includes(getComputedStyle(input).backgroundColor);
|
|
42
|
+
};
|
|
43
|
+
var hasValue = function (input) { var _a; return ((_a = input === null || input === void 0 ? void 0 : input.value) === null || _a === void 0 ? void 0 : _a.length) > 0; };
|
|
44
|
+
var isSelect = function (element) { return (element === null || element === void 0 ? void 0 : element.tagName) === "SELECT"; };
|
|
45
|
+
var setPlaceholder = function (element, value) {
|
|
44
46
|
// For select elements we need to temporary remove the text of the first option
|
|
45
47
|
// when the element is not focused, so only the label is shown. We still need to
|
|
46
48
|
// maintain the width of the input so we manually change the "min-width"
|
|
47
49
|
// Inspired by the marko implementation: https://github.com/makeup/makeup-js/blob/master/packages/makeup-floating-label/src/index.js
|
|
48
|
-
if (isSelect(element) && !hasValue(element.querySelector(
|
|
50
|
+
if (isSelect(element) && !hasValue(element.querySelector("option"))) {
|
|
49
51
|
element.style['min-width'] = '';
|
|
50
|
-
|
|
51
|
-
element.querySelector(
|
|
52
|
+
var beforeWidth = element.offsetWidth;
|
|
53
|
+
element.querySelector("option").text = value;
|
|
52
54
|
if (!value && beforeWidth > element.offsetWidth) {
|
|
53
|
-
element.style['min-width'] =
|
|
55
|
+
element.style['min-width'] = "".concat(beforeWidth, "px");
|
|
54
56
|
}
|
|
55
57
|
}
|
|
56
58
|
};
|
|
57
|
-
|
|
59
|
+
var getPlaceholder = function (element) {
|
|
58
60
|
if (isSelect(element)) {
|
|
59
|
-
return element.querySelector(
|
|
61
|
+
return element.querySelector("option").text;
|
|
60
62
|
}
|
|
61
63
|
return element === null || element === void 0 ? void 0 : element.placeholder;
|
|
62
64
|
};
|
|
63
|
-
function useFloatingLabel(
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
65
|
+
function useFloatingLabel(_a) {
|
|
66
|
+
var _b;
|
|
67
|
+
var ref = _a.ref, inputId = _a.inputId, className = _a.className, disabled = _a.disabled, label = _a.label, inputSize = _a.inputSize, inputValue = _a.inputValue, placeholder = _a.placeholder, invalid = _a.invalid, opaqueLabel = _a.opaqueLabel, type = _a.type, _c = _a.onMount, onMount = _c === void 0 ? function () { } : _c;
|
|
68
|
+
var _internalInputRef = (0, react_1.useRef)(null);
|
|
69
|
+
var inputRef = function () { return ref || _internalInputRef; };
|
|
70
|
+
var _d = (0, react_1.useState)(Boolean(inputValue)), isFloating = _d[0], setFloating = _d[1];
|
|
71
|
+
var _e = (0, react_1.useState)(false), shouldAnimate = _e[0], setAnimate = _e[1];
|
|
72
|
+
var _f = (0, react_1.useState)(false), isFocused = _f[0], setFocused = _f[1];
|
|
73
|
+
var selectFirstOptionText = (0, react_1.useRef)("");
|
|
74
|
+
var onBlur = function () {
|
|
71
75
|
var _a;
|
|
72
76
|
setAnimate(true);
|
|
73
77
|
setFloating(hasValue((_a = inputRef()) === null || _a === void 0 ? void 0 : _a.current));
|
|
74
78
|
setFocused(false);
|
|
75
|
-
setPlaceholder(inputRef().current,
|
|
79
|
+
setPlaceholder(inputRef().current, "");
|
|
76
80
|
};
|
|
77
|
-
|
|
81
|
+
var onFocus = function () {
|
|
78
82
|
var _a;
|
|
79
83
|
setAnimate(true);
|
|
80
84
|
setFloating(true);
|
|
81
85
|
setFocused(true);
|
|
82
86
|
setPlaceholder((_a = inputRef()) === null || _a === void 0 ? void 0 : _a.current, selectFirstOptionText.current);
|
|
83
87
|
};
|
|
84
|
-
(0, react_1.useEffect)(()
|
|
88
|
+
(0, react_1.useEffect)(function () {
|
|
85
89
|
var _a, _b;
|
|
86
90
|
if (!label) {
|
|
87
91
|
return;
|
|
88
92
|
}
|
|
89
93
|
selectFirstOptionText.current = getPlaceholder((_a = inputRef()) === null || _a === void 0 ? void 0 : _a.current);
|
|
90
|
-
setPlaceholder((_b = inputRef()) === null || _b === void 0 ? void 0 : _b.current,
|
|
94
|
+
setPlaceholder((_b = inputRef()) === null || _b === void 0 ? void 0 : _b.current, "");
|
|
91
95
|
onMount();
|
|
92
96
|
}, []);
|
|
93
|
-
(0, react_1.useEffect)(()
|
|
97
|
+
(0, react_1.useEffect)(function () {
|
|
94
98
|
var _a, _b;
|
|
95
99
|
if (!label) {
|
|
96
100
|
return;
|
|
97
101
|
}
|
|
98
102
|
setFloating(isFocused || hasValue((_a = inputRef()) === null || _a === void 0 ? void 0 : _a.current) || isAutofilled((_b = inputRef()) === null || _b === void 0 ? void 0 : _b.current));
|
|
99
103
|
}, [isFocused, inputValue]);
|
|
100
|
-
|
|
101
|
-
[
|
|
102
|
-
[
|
|
103
|
-
[
|
|
104
|
-
[
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
'floating-label--large': inputSize ===
|
|
104
|
+
var labelClassName = (0, classnames_1.default)(className, classPrefix, (_b = {},
|
|
105
|
+
_b["".concat(classPrefix, "--disabled")] = disabled,
|
|
106
|
+
_b["".concat(classPrefix, "--animate")] = shouldAnimate,
|
|
107
|
+
_b["".concat(classPrefix, "--inline")] = !isFloating && type !== 'date',
|
|
108
|
+
_b["".concat(classPrefix, "--invalid")] = invalid,
|
|
109
|
+
_b));
|
|
110
|
+
var floatingLabelClassName = (0, classnames_1.default)("floating-label", {
|
|
111
|
+
'floating-label--large': inputSize === "large",
|
|
108
112
|
'floating-label--opaque': opaqueLabel
|
|
109
113
|
});
|
|
110
|
-
|
|
111
|
-
|
|
114
|
+
var FragmentContainer = (0, react_1.useCallback)(function (_a) {
|
|
115
|
+
var children = _a.children;
|
|
116
|
+
return react_1.default.createElement(react_1.default.Fragment, null, children);
|
|
117
|
+
}, []);
|
|
118
|
+
var FloatingLabelContainer = (0, react_1.useCallback)(function (_a) {
|
|
119
|
+
var children = _a.children;
|
|
120
|
+
return react_1.default.createElement("span", { className: floatingLabelClassName }, children);
|
|
121
|
+
}, [floatingLabelClassName]);
|
|
112
122
|
if (!label) {
|
|
113
123
|
return {
|
|
114
124
|
label: null,
|
|
115
125
|
Container: FragmentContainer,
|
|
116
|
-
onBlur: ()
|
|
117
|
-
onFocus: ()
|
|
126
|
+
onBlur: function () { },
|
|
127
|
+
onFocus: function () { },
|
|
118
128
|
ref: inputRef(),
|
|
119
|
-
placeholder
|
|
129
|
+
placeholder: placeholder
|
|
120
130
|
};
|
|
121
131
|
}
|
|
122
|
-
|
|
132
|
+
var labelElement = react_1.default.createElement("label", { htmlFor: inputId, className: labelClassName }, label);
|
|
123
133
|
return {
|
|
124
134
|
label: labelElement,
|
|
125
135
|
Container: FloatingLabelContainer,
|
|
126
|
-
onBlur,
|
|
127
|
-
onFocus,
|
|
136
|
+
onBlur: onBlur,
|
|
137
|
+
onFocus: onFocus,
|
|
128
138
|
ref: inputRef(),
|
|
129
139
|
placeholder: !isFloating ? null : placeholder
|
|
130
140
|
};
|
|
@@ -3,10 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
var react_1 = __importDefault(require("react"));
|
|
7
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
8
|
+
var NoticeContent = function (_a) {
|
|
9
|
+
var className = _a.className, type = _a.type, children = _a.children;
|
|
10
|
+
var ContentTag = type === 'inline' ? 'span' : 'div';
|
|
11
|
+
return (react_1.default.createElement(ContentTag, { className: (0, classnames_1.default)(className, "".concat(type, "-notice__main")) }, children));
|
|
11
12
|
};
|
|
12
13
|
exports.default = NoticeContent;
|
|
@@ -1,4 +1,15 @@
|
|
|
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
|
+
};
|
|
2
13
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
14
|
var t = {};
|
|
4
15
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -14,10 +25,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
25
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
26
|
};
|
|
16
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
return (react_1.default.createElement("p",
|
|
28
|
+
var react_1 = __importDefault(require("react"));
|
|
29
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
30
|
+
var NoticeCTA = function (_a) {
|
|
31
|
+
var className = _a.className, type = _a.type, children = _a.children, rest = __rest(_a, ["className", "type", "children"]);
|
|
32
|
+
return (react_1.default.createElement("p", __assign({ className: (0, classnames_1.default)(className, "".concat(type, "-notice__cta")) }, rest), children));
|
|
22
33
|
};
|
|
23
34
|
exports.default = NoticeCTA;
|
|
@@ -1,4 +1,15 @@
|
|
|
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
|
+
};
|
|
2
13
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
14
|
var t = {};
|
|
4
15
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -14,10 +25,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
25
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
26
|
};
|
|
16
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
return (react_1.default.createElement("div",
|
|
28
|
+
var react_1 = __importDefault(require("react"));
|
|
29
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
30
|
+
var NoticeFooter = function (_a) {
|
|
31
|
+
var className = _a.className, type = _a.type, children = _a.children, rest = __rest(_a, ["className", "type", "children"]);
|
|
32
|
+
return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)(className, "".concat(type, "-notice__footer")) }, rest), children));
|
|
22
33
|
};
|
|
23
34
|
exports.default = NoticeFooter;
|
|
@@ -1,4 +1,15 @@
|
|
|
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
|
+
};
|
|
2
13
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
14
|
var t = {};
|
|
4
15
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -14,11 +25,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
25
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
26
|
};
|
|
16
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
return (react_1.default.createElement(HeadingTag,
|
|
28
|
+
var react_1 = __importDefault(require("react"));
|
|
29
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
30
|
+
var NoticeTitle = function (_a) {
|
|
31
|
+
var className = _a.className, type = _a.type, as = _a.as, children = _a.children, rest = __rest(_a, ["className", "type", "as", "children"]);
|
|
32
|
+
var HeadingTag = as || "h2";
|
|
33
|
+
return (react_1.default.createElement(HeadingTag, __assign({ className: (0, classnames_1.default)(className, "".concat(type, "-notice__title")) }, rest), children));
|
|
23
34
|
};
|
|
24
35
|
exports.default = NoticeTitle;
|
package/common/random-id.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.randomId = void 0;
|
|
4
|
-
|
|
4
|
+
var randomId = function () { return Math.random().toString(16).slice(-4); };
|
|
5
5
|
exports.randomId = randomId;
|
package/common/range.js
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.range = void 0;
|
|
4
|
-
|
|
4
|
+
var range = function (start, stop, step) {
|
|
5
|
+
if (step === void 0) { step = 1; }
|
|
6
|
+
return Array(Math.ceil(((stop + 1) - start) / step)).fill(start).map(function (x, y) { return x + y * step; });
|
|
7
|
+
};
|
|
5
8
|
exports.range = range;
|
|
@@ -4,5 +4,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
4
4
|
* This is an empty component just to get extra property
|
|
5
5
|
* for the button used in the EbayInfotipContent
|
|
6
6
|
*/
|
|
7
|
-
|
|
7
|
+
var TooltipCloseButton = function () { return null; };
|
|
8
8
|
exports.default = TooltipCloseButton;
|