@ebay/ui-core-react 6.2.2-rc.1 → 6.2.3
Sign up to get free protection for your applications and to get access to all the features.
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;
|