@ebay/ui-core-react 6.2.0 → 6.2.2-rc.1
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.d.ts +2 -2
- package/ebay-badge/badge.d.ts.map +1 -1
- 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-date-textbox/index.d.ts +1 -1
- package/ebay-date-textbox/index.d.ts.map +1 -1
- 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
|
@@ -14,19 +14,17 @@ 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
|
-
|
|
28
|
-
});
|
|
29
|
-
};
|
|
17
|
+
const depthArg = typeof d === 'undefined' ? 1 : Number(d) || 0;
|
|
18
|
+
const result = [];
|
|
19
|
+
const forEach = result.forEach;
|
|
20
|
+
const flatDeep = (arr, depth) => forEach.call(arr, val => {
|
|
21
|
+
if (depth > 0 && Array.isArray(val)) {
|
|
22
|
+
flatDeep(val, depth - 1);
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
result.push(val);
|
|
26
|
+
}
|
|
27
|
+
});
|
|
30
28
|
flatDeep(this, depthArg);
|
|
31
29
|
return result;
|
|
32
30
|
}
|
|
@@ -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);
|
|
@@ -35,15 +24,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
35
24
|
};
|
|
36
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
26
|
exports.withForwardRef = void 0;
|
|
38
|
-
|
|
39
|
-
|
|
27
|
+
const react_1 = __importStar(require("react"));
|
|
28
|
+
const getDisplayName = (Component) => Component.displayName || Component.name || 'Component';
|
|
40
29
|
// Typescript will automatically find the return type crom forwardRef() function
|
|
41
30
|
// Disabling eslint for this use case
|
|
42
31
|
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
return react_1.default.createElement(Component, __assign({}, props, { forwardedRef: ref }));
|
|
46
|
-
});
|
|
32
|
+
const withForwardRef = (Component) => {
|
|
33
|
+
const ForwardRef = (0, react_1.forwardRef)((props, ref) => react_1.default.createElement(Component, Object.assign({}, props, { forwardedRef: ref })));
|
|
47
34
|
ForwardRef.displayName = getDisplayName(Component);
|
|
48
35
|
return ForwardRef;
|
|
49
36
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.usePrevious = void 0;
|
|
4
|
-
|
|
4
|
+
const react_1 = require("react");
|
|
5
5
|
function usePrevious(value) {
|
|
6
|
-
|
|
7
|
-
(0, react_1.useEffect)(
|
|
6
|
+
const ref = (0, react_1.useRef)();
|
|
7
|
+
(0, react_1.useEffect)(() => {
|
|
8
8
|
ref.current = value;
|
|
9
9
|
}, [value]);
|
|
10
10
|
return ref.current;
|
|
@@ -1,39 +1,26 @@
|
|
|
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
|
+
const react_1 = require("react");
|
|
5
5
|
require("./array.polyfill.flat"); // for Mobile Safari 11
|
|
6
|
-
function findComponent(nodes, componentType) {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
return elements.find(function (_a) {
|
|
10
|
-
var type = _a.type;
|
|
11
|
-
return type === componentType;
|
|
12
|
-
}) || null;
|
|
6
|
+
function findComponent(nodes = [], componentType) {
|
|
7
|
+
const elements = react_1.Children.toArray(nodes);
|
|
8
|
+
return elements.find(({ type }) => type === componentType) || null;
|
|
13
9
|
}
|
|
14
10
|
exports.findComponent = findComponent;
|
|
15
|
-
function excludeComponent(nodes, componentType) {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
return elements.filter(function (_a) {
|
|
19
|
-
var type = _a.type;
|
|
20
|
-
return type !== componentType;
|
|
21
|
-
});
|
|
11
|
+
function excludeComponent(nodes = [], componentType) {
|
|
12
|
+
const elements = react_1.Children.toArray(nodes);
|
|
13
|
+
return elements.filter(({ type }) => type !== componentType);
|
|
22
14
|
}
|
|
23
15
|
exports.excludeComponent = excludeComponent;
|
|
24
|
-
function filterByType(nodes, componentType) {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
return elements.filter(function (_a) {
|
|
29
|
-
var type = _a.type;
|
|
30
|
-
return types.includes(type);
|
|
31
|
-
});
|
|
16
|
+
function filterByType(nodes = [], componentType) {
|
|
17
|
+
const elements = react_1.Children.toArray(nodes);
|
|
18
|
+
const types = [componentType].flat();
|
|
19
|
+
return elements.filter(({ type }) => types.includes(type));
|
|
32
20
|
}
|
|
33
21
|
exports.filterByType = filterByType;
|
|
34
|
-
function filterBy(nodes, predicate) {
|
|
35
|
-
|
|
36
|
-
var elements = react_1.Children.toArray(nodes);
|
|
22
|
+
function filterBy(nodes = [], predicate) {
|
|
23
|
+
const elements = react_1.Children.toArray(nodes);
|
|
37
24
|
return elements.filter(predicate);
|
|
38
25
|
}
|
|
39
26
|
exports.filterBy = filterBy;
|
package/common/debounce.js
CHANGED
|
@@ -2,14 +2,10 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.debounce = void 0;
|
|
4
4
|
function debounce(fn, ms) {
|
|
5
|
-
|
|
6
|
-
return
|
|
7
|
-
var args = [];
|
|
8
|
-
for (var _i = 0; _i < arguments.length; _i++) {
|
|
9
|
-
args[_i] = arguments[_i];
|
|
10
|
-
}
|
|
5
|
+
let timer;
|
|
6
|
+
return (...args) => {
|
|
11
7
|
clearTimeout(timer);
|
|
12
|
-
timer = setTimeout(
|
|
8
|
+
timer = setTimeout(() => fn(...args), ms);
|
|
13
9
|
};
|
|
14
10
|
}
|
|
15
11
|
exports.debounce = debounce;
|
|
@@ -10,15 +10,13 @@ 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) {
|
|
14
|
-
if (callback === void 0) { callback = function () { }; }
|
|
13
|
+
function handleKeydown(keyList, e, callback = () => { }) {
|
|
15
14
|
if (keyList.includes(e.key)) {
|
|
16
15
|
callback();
|
|
17
16
|
}
|
|
18
17
|
}
|
|
19
18
|
// inverse of found keys
|
|
20
|
-
function handleNotKeydown(keyList, e, callback) {
|
|
21
|
-
if (callback === void 0) { callback = function () { }; }
|
|
19
|
+
function handleNotKeydown(keyList, e, callback = () => { }) {
|
|
22
20
|
if (!keyList.includes(e.key)) {
|
|
23
21
|
callback();
|
|
24
22
|
}
|
|
@@ -53,7 +51,7 @@ function handleLeftRightArrowsKeydown(e, callback) {
|
|
|
53
51
|
exports.handleLeftRightArrowsKeydown = handleLeftRightArrowsKeydown;
|
|
54
52
|
// only fire for character input, not modifier/meta keys (enter, escape, backspace, tab, etc.)
|
|
55
53
|
function handleTextInput(e, callback) {
|
|
56
|
-
|
|
54
|
+
const keyList = [
|
|
57
55
|
// Edge
|
|
58
56
|
'Esc',
|
|
59
57
|
'Left',
|
|
@@ -83,7 +81,7 @@ function preventDefaultIfHijax(e, hijax) {
|
|
|
83
81
|
}
|
|
84
82
|
}
|
|
85
83
|
exports.preventDefaultIfHijax = preventDefaultIfHijax;
|
|
86
|
-
|
|
84
|
+
const handlers = [];
|
|
87
85
|
function addEventListener(_, handler) {
|
|
88
86
|
if (handlers.length === 0) {
|
|
89
87
|
window.addEventListener('resize', handleResize);
|
|
@@ -100,9 +98,9 @@ function removeEventListener(_, handler) {
|
|
|
100
98
|
exports.removeEventListener = removeEventListener;
|
|
101
99
|
function handleResize(e) {
|
|
102
100
|
window.removeEventListener('resize', handleResize);
|
|
103
|
-
|
|
101
|
+
const callback = () => {
|
|
104
102
|
if (handlers.length) {
|
|
105
|
-
handlers.forEach(
|
|
103
|
+
handlers.forEach(handler => handler(e));
|
|
106
104
|
window.addEventListener('resize', handleResize);
|
|
107
105
|
}
|
|
108
106
|
};
|
|
@@ -114,9 +112,8 @@ function handleResize(e) {
|
|
|
114
112
|
}
|
|
115
113
|
}
|
|
116
114
|
exports.handleResize = handleResize;
|
|
117
|
-
function wrapEvent(parentEventHandler, localEventHandler) {
|
|
118
|
-
|
|
119
|
-
return function (e) {
|
|
115
|
+
function wrapEvent(parentEventHandler = () => { }, localEventHandler) {
|
|
116
|
+
return (e) => {
|
|
120
117
|
parentEventHandler(e);
|
|
121
118
|
if (!e.defaultPrevented) {
|
|
122
119
|
return localEventHandler(e);
|
|
@@ -1,31 +1,29 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
var fn = {
|
|
3
|
+
const react_1 = require("react");
|
|
4
|
+
const useKeyPress = () => {
|
|
5
|
+
const [arrowUpPressed, setArrowUpPressed] = (0, react_1.useState)(false);
|
|
6
|
+
const [arrowDownPressed, setArrowDownPressed] = (0, react_1.useState)(false);
|
|
7
|
+
const upHandler = ({ key }) => {
|
|
8
|
+
const fn = {
|
|
10
9
|
ArrowUp: setArrowUpPressed,
|
|
11
10
|
ArrowDown: setArrowDownPressed
|
|
12
11
|
}[key];
|
|
13
12
|
if (fn)
|
|
14
13
|
fn(false);
|
|
15
14
|
};
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
var fn = {
|
|
15
|
+
const downHandler = ({ key }) => {
|
|
16
|
+
const fn = {
|
|
19
17
|
ArrowUp: setArrowUpPressed,
|
|
20
18
|
ArrowDown: setArrowDownPressed
|
|
21
19
|
}[key];
|
|
22
20
|
if (fn)
|
|
23
21
|
fn(true);
|
|
24
22
|
};
|
|
25
|
-
(0, react_1.useEffect)(
|
|
23
|
+
(0, react_1.useEffect)(() => {
|
|
26
24
|
window.addEventListener('keydown', downHandler);
|
|
27
25
|
window.addEventListener('keyup', upHandler);
|
|
28
|
-
return
|
|
26
|
+
return () => {
|
|
29
27
|
window.removeEventListener('keydown', downHandler);
|
|
30
28
|
window.removeEventListener('keyup', upHandler);
|
|
31
29
|
};
|
|
@@ -1,41 +1,30 @@
|
|
|
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
|
-
};
|
|
11
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
12
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
13
4
|
};
|
|
14
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
6
|
+
const react_1 = require("react");
|
|
7
|
+
const use_key_press_1 = __importDefault(require("./use-key-press"));
|
|
8
|
+
const useRovingIndex = (children, FocusableType, defaultValue) => {
|
|
9
|
+
const [rovingIndex, setRovingIndex] = (0, react_1.useState)(defaultValue);
|
|
10
|
+
const [arrowUpPressed, arrowDownPressed] = (0, use_key_press_1.default)();
|
|
11
|
+
const rovingIndexArray = react_1.Children
|
|
21
12
|
.toArray(children)
|
|
22
|
-
.reduce(
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
var currentIndex = rovingIndexArray.indexOf(rovingIndex);
|
|
26
|
-
var previousOrCurrent = function () {
|
|
13
|
+
.reduce((focusables, child, i) => child.type === FocusableType ? [...focusables, i] : focusables, []);
|
|
14
|
+
const currentIndex = rovingIndexArray.indexOf(rovingIndex);
|
|
15
|
+
const previousOrCurrent = () => {
|
|
27
16
|
if (currentIndex === -1)
|
|
28
17
|
return rovingIndex;
|
|
29
|
-
|
|
18
|
+
const previousRovingIndex = rovingIndexArray[currentIndex - 1];
|
|
30
19
|
return previousRovingIndex === undefined ? rovingIndex : previousRovingIndex;
|
|
31
20
|
};
|
|
32
|
-
|
|
21
|
+
const nextOrCurrent = () => {
|
|
33
22
|
if (currentIndex === -1)
|
|
34
23
|
return rovingIndex;
|
|
35
|
-
|
|
24
|
+
const nextRovingIndex = rovingIndexArray[currentIndex + 1];
|
|
36
25
|
return nextRovingIndex === undefined ? rovingIndex : nextRovingIndex;
|
|
37
26
|
};
|
|
38
|
-
(0, react_1.useEffect)(
|
|
27
|
+
(0, react_1.useEffect)(() => {
|
|
39
28
|
if (arrowUpPressed)
|
|
40
29
|
setRovingIndex(previousOrCurrent());
|
|
41
30
|
if (arrowDownPressed)
|
|
@@ -27,114 +27,104 @@ 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
|
+
const react_1 = __importStar(require("react"));
|
|
31
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
32
|
+
const classPrefix = 'floating-label__label';
|
|
33
33
|
// input background in Skin 12, used for autofill detection
|
|
34
|
-
|
|
34
|
+
const 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
|
-
|
|
44
|
-
var isSelect = function (element) { return (element === null || element === void 0 ? void 0 : element.tagName) === "SELECT"; };
|
|
45
|
-
var setPlaceholder = function (element, value) {
|
|
40
|
+
const isAutofilled = (input) => input && !textboxElementBackgroundRGB.includes(getComputedStyle(input).backgroundColor);
|
|
41
|
+
const hasValue = (input) => { var _a; return ((_a = input === null || input === void 0 ? void 0 : input.value) === null || _a === void 0 ? void 0 : _a.length) > 0; };
|
|
42
|
+
const isSelect = (element) => (element === null || element === void 0 ? void 0 : element.tagName) === `SELECT`;
|
|
43
|
+
const setPlaceholder = (element, value) => {
|
|
46
44
|
// For select elements we need to temporary remove the text of the first option
|
|
47
45
|
// when the element is not focused, so only the label is shown. We still need to
|
|
48
46
|
// maintain the width of the input so we manually change the "min-width"
|
|
49
47
|
// Inspired by the marko implementation: https://github.com/makeup/makeup-js/blob/master/packages/makeup-floating-label/src/index.js
|
|
50
|
-
if (isSelect(element) && !hasValue(element.querySelector(
|
|
48
|
+
if (isSelect(element) && !hasValue(element.querySelector(`option`))) {
|
|
51
49
|
element.style['min-width'] = '';
|
|
52
|
-
|
|
53
|
-
element.querySelector(
|
|
50
|
+
const beforeWidth = element.offsetWidth;
|
|
51
|
+
element.querySelector(`option`).text = value;
|
|
54
52
|
if (!value && beforeWidth > element.offsetWidth) {
|
|
55
|
-
element.style['min-width'] =
|
|
53
|
+
element.style['min-width'] = `${beforeWidth}px`;
|
|
56
54
|
}
|
|
57
55
|
}
|
|
58
56
|
};
|
|
59
|
-
|
|
57
|
+
const getPlaceholder = (element) => {
|
|
60
58
|
if (isSelect(element)) {
|
|
61
|
-
return element.querySelector(
|
|
59
|
+
return element.querySelector(`option`).text;
|
|
62
60
|
}
|
|
63
61
|
return element === null || element === void 0 ? void 0 : element.placeholder;
|
|
64
62
|
};
|
|
65
|
-
function useFloatingLabel(
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
var selectFirstOptionText = (0, react_1.useRef)("");
|
|
74
|
-
var onBlur = function () {
|
|
63
|
+
function useFloatingLabel({ ref, inputId, className, disabled, label, inputSize, inputValue, placeholder, invalid, opaqueLabel, type, onMount = () => { } }) {
|
|
64
|
+
const _internalInputRef = (0, react_1.useRef)(null);
|
|
65
|
+
const inputRef = () => ref || _internalInputRef;
|
|
66
|
+
const [isFloating, setFloating] = (0, react_1.useState)(Boolean(inputValue));
|
|
67
|
+
const [shouldAnimate, setAnimate] = (0, react_1.useState)(false);
|
|
68
|
+
const [isFocused, setFocused] = (0, react_1.useState)(false);
|
|
69
|
+
const selectFirstOptionText = (0, react_1.useRef)(``);
|
|
70
|
+
const onBlur = () => {
|
|
75
71
|
var _a;
|
|
76
72
|
setAnimate(true);
|
|
77
73
|
setFloating(hasValue((_a = inputRef()) === null || _a === void 0 ? void 0 : _a.current));
|
|
78
74
|
setFocused(false);
|
|
79
|
-
setPlaceholder(inputRef().current,
|
|
75
|
+
setPlaceholder(inputRef().current, ``);
|
|
80
76
|
};
|
|
81
|
-
|
|
77
|
+
const onFocus = () => {
|
|
82
78
|
var _a;
|
|
83
79
|
setAnimate(true);
|
|
84
80
|
setFloating(true);
|
|
85
81
|
setFocused(true);
|
|
86
82
|
setPlaceholder((_a = inputRef()) === null || _a === void 0 ? void 0 : _a.current, selectFirstOptionText.current);
|
|
87
83
|
};
|
|
88
|
-
(0, react_1.useEffect)(
|
|
84
|
+
(0, react_1.useEffect)(() => {
|
|
89
85
|
var _a, _b;
|
|
90
86
|
if (!label) {
|
|
91
87
|
return;
|
|
92
88
|
}
|
|
93
89
|
selectFirstOptionText.current = getPlaceholder((_a = inputRef()) === null || _a === void 0 ? void 0 : _a.current);
|
|
94
|
-
setPlaceholder((_b = inputRef()) === null || _b === void 0 ? void 0 : _b.current,
|
|
90
|
+
setPlaceholder((_b = inputRef()) === null || _b === void 0 ? void 0 : _b.current, ``);
|
|
95
91
|
onMount();
|
|
96
92
|
}, []);
|
|
97
|
-
(0, react_1.useEffect)(
|
|
93
|
+
(0, react_1.useEffect)(() => {
|
|
98
94
|
var _a, _b;
|
|
99
95
|
if (!label) {
|
|
100
96
|
return;
|
|
101
97
|
}
|
|
102
98
|
setFloating(isFocused || hasValue((_a = inputRef()) === null || _a === void 0 ? void 0 : _a.current) || isAutofilled((_b = inputRef()) === null || _b === void 0 ? void 0 : _b.current));
|
|
103
99
|
}, [isFocused, inputValue]);
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
'floating-label--large': inputSize ===
|
|
100
|
+
const labelClassName = (0, classnames_1.default)(className, classPrefix, {
|
|
101
|
+
[`${classPrefix}--disabled`]: disabled,
|
|
102
|
+
[`${classPrefix}--animate`]: shouldAnimate,
|
|
103
|
+
[`${classPrefix}--inline`]: !isFloating && type !== 'date',
|
|
104
|
+
[`${classPrefix}--invalid`]: invalid
|
|
105
|
+
});
|
|
106
|
+
const floatingLabelClassName = (0, classnames_1.default)(`floating-label`, {
|
|
107
|
+
'floating-label--large': inputSize === `large`,
|
|
112
108
|
'floating-label--opaque': opaqueLabel
|
|
113
109
|
});
|
|
114
|
-
|
|
115
|
-
|
|
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]);
|
|
110
|
+
const FragmentContainer = (0, react_1.useCallback)(({ children }) => react_1.default.createElement(react_1.default.Fragment, null, children), []);
|
|
111
|
+
const FloatingLabelContainer = (0, react_1.useCallback)(({ children }) => react_1.default.createElement("span", { className: floatingLabelClassName }, children), [floatingLabelClassName]);
|
|
122
112
|
if (!label) {
|
|
123
113
|
return {
|
|
124
114
|
label: null,
|
|
125
115
|
Container: FragmentContainer,
|
|
126
|
-
onBlur:
|
|
127
|
-
onFocus:
|
|
116
|
+
onBlur: () => { },
|
|
117
|
+
onFocus: () => { },
|
|
128
118
|
ref: inputRef(),
|
|
129
|
-
placeholder
|
|
119
|
+
placeholder
|
|
130
120
|
};
|
|
131
121
|
}
|
|
132
|
-
|
|
122
|
+
const labelElement = react_1.default.createElement("label", { htmlFor: inputId, className: labelClassName }, label);
|
|
133
123
|
return {
|
|
134
124
|
label: labelElement,
|
|
135
125
|
Container: FloatingLabelContainer,
|
|
136
|
-
onBlur
|
|
137
|
-
onFocus
|
|
126
|
+
onBlur,
|
|
127
|
+
onFocus,
|
|
138
128
|
ref: inputRef(),
|
|
139
129
|
placeholder: !isFloating ? null : placeholder
|
|
140
130
|
};
|
|
@@ -3,11 +3,10 @@ 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
|
-
|
|
11
|
-
return (react_1.default.createElement(ContentTag, { className: (0, classnames_1.default)(className, "".concat(type, "-notice__main")) }, children));
|
|
6
|
+
const react_1 = __importDefault(require("react"));
|
|
7
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
8
|
+
const NoticeContent = ({ className, type, children }) => {
|
|
9
|
+
const ContentTag = type === 'inline' ? 'span' : 'div';
|
|
10
|
+
return (react_1.default.createElement(ContentTag, { className: (0, classnames_1.default)(className, `${type}-notice__main`) }, children));
|
|
12
11
|
};
|
|
13
12
|
exports.default = NoticeContent;
|
|
@@ -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("p",
|
|
17
|
+
const react_1 = __importDefault(require("react"));
|
|
18
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
19
|
+
const NoticeCTA = (_a) => {
|
|
20
|
+
var { className, type, children } = _a, rest = __rest(_a, ["className", "type", "children"]);
|
|
21
|
+
return (react_1.default.createElement("p", Object.assign({ className: (0, classnames_1.default)(className, `${type}-notice__cta`) }, rest), children));
|
|
33
22
|
};
|
|
34
23
|
exports.default = NoticeCTA;
|
|
@@ -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("div",
|
|
17
|
+
const react_1 = __importDefault(require("react"));
|
|
18
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
19
|
+
const NoticeFooter = (_a) => {
|
|
20
|
+
var { className, type, children } = _a, rest = __rest(_a, ["className", "type", "children"]);
|
|
21
|
+
return (react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(className, `${type}-notice__footer`) }, rest), children));
|
|
33
22
|
};
|
|
34
23
|
exports.default = NoticeFooter;
|
|
@@ -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,11 +14,11 @@ 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
|
-
|
|
33
|
-
return (react_1.default.createElement(HeadingTag,
|
|
17
|
+
const react_1 = __importDefault(require("react"));
|
|
18
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
19
|
+
const NoticeTitle = (_a) => {
|
|
20
|
+
var { className, type, as, children } = _a, rest = __rest(_a, ["className", "type", "as", "children"]);
|
|
21
|
+
const HeadingTag = as || `h2`;
|
|
22
|
+
return (react_1.default.createElement(HeadingTag, Object.assign({ className: (0, classnames_1.default)(className, `${type}-notice__title`) }, rest), children));
|
|
34
23
|
};
|
|
35
24
|
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
|
+
const randomId = () => Math.random().toString(16).slice(-4);
|
|
5
5
|
exports.randomId = randomId;
|
package/common/range.js
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.range = void 0;
|
|
4
|
-
|
|
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
|
-
};
|
|
4
|
+
const range = (start, stop, step = 1) => Array(Math.ceil(((stop + 1) - start) / step)).fill(start).map((x, y) => x + y * step);
|
|
8
5
|
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
|
+
const TooltipCloseButton = () => null;
|
|
8
8
|
exports.default = TooltipCloseButton;
|