@ebay/ui-core-react 7.0.2 → 7.1.0-alpha.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.
- package/array.polyfill.flat-5BAolFdk.js +1 -0
- package/badge-CoHKfiPt.js +1 -0
- package/button-o4ao46WM.js +1 -0
- package/calendar-CPKqwJVQ.js +1 -0
- package/debounce-BQsYxxOL.js +1 -0
- package/dialog-previous-button-7ePoYWyj.js +1 -0
- package/drawer-BxxlJwkZ.js +1 -0
- package/ebay-alert-dialog.js +1 -0
- package/ebay-badge.js +1 -0
- package/ebay-breadcrumbs.js +1 -0
- package/ebay-button.js +1 -0
- package/ebay-calendar.js +1 -0
- package/ebay-carousel.js +1 -0
- package/ebay-checkbox.js +1 -0
- package/ebay-confirm-dialog.js +1 -0
- package/ebay-cta-button.js +1 -0
- package/ebay-date-textbox.js +1 -0
- package/ebay-dialog-base.js +1 -0
- package/ebay-drawer-dialog.js +1 -0
- package/ebay-eek.js +1 -0
- package/ebay-fake-menu-button.js +1 -0
- package/ebay-fake-menu.js +1 -0
- package/ebay-fake-tabs.js +1 -0
- package/ebay-field.js +1 -0
- package/ebay-fullscreen-dialog.js +1 -0
- package/ebay-icon-button.js +1 -0
- package/ebay-icon.js +1 -0
- package/ebay-infotip.js +1 -0
- package/ebay-inline-notice.js +1 -0
- package/ebay-lightbox-dialog.js +1 -0
- package/ebay-listbox-button.js +2 -0
- package/ebay-menu/menu.d.ts +1 -1
- package/ebay-menu/menu.d.ts.map +1 -1
- package/ebay-menu-button.js +1 -0
- package/ebay-menu.js +1 -0
- package/ebay-notice-base.js +1 -0
- package/ebay-page-notice.js +1 -0
- package/ebay-pagination.js +1 -0
- package/ebay-panel-dialog.js +1 -0
- package/ebay-progress-bar.js +1 -0
- package/ebay-progress-spinner.js +1 -0
- package/ebay-progress-stepper.js +1 -0
- package/ebay-radio.js +1 -0
- package/ebay-section-notice.js +1 -0
- package/ebay-section-title/index.d.ts.map +1 -1
- package/ebay-section-title.js +1 -0
- package/ebay-select.js +1 -0
- package/ebay-signal.js +1 -0
- package/ebay-snackbar-dialog.js +1 -0
- package/ebay-split-button.js +1 -0
- package/ebay-star-rating-select.js +1 -0
- package/ebay-star-rating.js +1 -0
- package/ebay-svg.js +1 -0
- package/ebay-switch.js +1 -0
- package/ebay-tabs.js +1 -0
- package/ebay-textbox.js +1 -0
- package/ebay-toast-dialog.js +1 -0
- package/ebay-tooltip.js +1 -0
- package/ebay-tourtip.js +1 -0
- package/ebay-video.js +1 -0
- package/hooks-Ctier7Yv.js +1 -0
- package/icon-DK6eEQD8.js +1 -0
- package/icon-button-BB6GFLm7.js +1 -0
- package/index-DbjwTbDP.js +1 -0
- package/label-CnrpYJ-g.js +1 -0
- package/menu-DZU8jEPV.js +1 -0
- package/menu-button-label-BcgasGA4.js +1 -0
- package/menu-item-DBi1NcrM.js +1 -0
- package/notice-content-9iF4T8uB.js +1 -0
- package/notice-content-C0ZStfuX.js +1 -0
- package/notice-footer-Cw1DMzoB.js +1 -0
- package/package.json +19 -8
- package/progress-spinner-CDgxI8R_.js +1 -0
- package/range-DOsPN0h5.js +1 -0
- package/textbox-WnB-9F4y.js +1 -0
- package/use-tooltip-BavqG36Z.js +1 -0
- package/utils-C9NL3q0j.js +1 -0
- package/common/component-utils/array.polyfill.flat.js +0 -32
- package/common/component-utils/forwardRef.js +0 -37
- package/common/component-utils/index.js +0 -18
- package/common/component-utils/usePrevious.js +0 -12
- package/common/component-utils/utils.js +0 -26
- package/common/debounce.js +0 -11
- package/common/event-utils/index.js +0 -123
- package/common/event-utils/types.js +0 -14
- package/common/event-utils/use-key-press.js +0 -33
- package/common/event-utils/use-roving-index.js +0 -35
- package/common/floating-label-utils/hooks.js +0 -133
- package/common/notice-utils/notice-content.js +0 -12
- package/common/notice-utils/notice-cta.js +0 -23
- package/common/notice-utils/notice-footer.js +0 -23
- package/common/notice-utils/notice-title.js +0 -24
- package/common/random-id.js +0 -5
- package/common/range.js +0 -5
- package/common/tooltip-utils/constants.js +0 -95
- package/common/tooltip-utils/index.js +0 -19
- package/common/tooltip-utils/tooltip-close-button.js +0 -8
- package/common/tooltip-utils/tooltip-content.js +0 -25
- package/common/tooltip-utils/tooltip-footer.js +0 -9
- package/common/tooltip-utils/tooltip-host.js +0 -24
- package/common/tooltip-utils/tooltip.js +0 -60
- package/common/tooltip-utils/types.js +0 -2
- package/common/tooltip-utils/use-tooltip.js +0 -27
- package/ebay-alert-dialog/alert-dialog.js +0 -55
- package/ebay-alert-dialog/index.js +0 -8
- package/ebay-badge/badge.js +0 -25
- package/ebay-badge/index.js +0 -8
- package/ebay-breadcrumbs/breadcrumb-item.js +0 -27
- package/ebay-breadcrumbs/breadcrumbs.js +0 -64
- package/ebay-breadcrumbs/index.js +0 -10
- package/ebay-button/button-cell.js +0 -29
- package/ebay-button/button-expand.js +0 -13
- package/ebay-button/button-loading.js +0 -11
- package/ebay-button/button-text.js +0 -9
- package/ebay-button/button.js +0 -95
- package/ebay-button/index.js +0 -10
- package/ebay-button/types.js +0 -2
- package/ebay-calendar/calendar.js +0 -306
- package/ebay-calendar/date-utils.js +0 -58
- package/ebay-calendar/index.js +0 -8
- package/ebay-carousel/carousel-control-button.js +0 -24
- package/ebay-carousel/carousel-item.js +0 -59
- package/ebay-carousel/carousel-list.js +0 -81
- package/ebay-carousel/carousel.js +0 -109
- package/ebay-carousel/helpers.js +0 -123
- package/ebay-carousel/index.js +0 -10
- package/ebay-carousel/scroll-to-transition.js +0 -102
- package/ebay-carousel/types.js +0 -2
- package/ebay-checkbox/checkbox.js +0 -77
- package/ebay-checkbox/index.js +0 -8
- package/ebay-confirm-dialog/confirm-dialog.js +0 -56
- package/ebay-confirm-dialog/index.js +0 -8
- package/ebay-cta-button/cta-button.js +0 -30
- package/ebay-cta-button/index.js +0 -8
- package/ebay-date-textbox/date-textbox.js +0 -179
- package/ebay-date-textbox/index.js +0 -8
- package/ebay-dialog-base/components/animation.js +0 -96
- package/ebay-dialog-base/components/dialog-actions.js +0 -8
- package/ebay-dialog-base/components/dialog-close-button.js +0 -8
- package/ebay-dialog-base/components/dialog-footer.js +0 -8
- package/ebay-dialog-base/components/dialog-header.js +0 -22
- package/ebay-dialog-base/components/dialog-previous-button.js +0 -24
- package/ebay-dialog-base/components/dialogBase.js +0 -152
- package/ebay-dialog-base/dialog-base-with-state.js +0 -63
- package/ebay-dialog-base/index.js +0 -18
- package/ebay-drawer-dialog/components/drawer.js +0 -104
- package/ebay-drawer-dialog/index.js +0 -8
- package/ebay-eek/eek-rating.js +0 -23
- package/ebay-eek/eek-util.js +0 -34
- package/ebay-eek/index.js +0 -8
- package/ebay-fake-menu/index.js +0 -12
- package/ebay-fake-menu/menu-item-separator.js +0 -23
- package/ebay-fake-menu/menu-item.js +0 -72
- package/ebay-fake-menu/menu.js +0 -57
- package/ebay-fake-menu-button/index.js +0 -14
- package/ebay-fake-menu-button/menu-button-item.js +0 -5
- package/ebay-fake-menu-button/menu-button-label.js +0 -8
- package/ebay-fake-menu-button/menu-button-separator.js +0 -23
- package/ebay-fake-menu-button/menu-button.js +0 -105
- package/ebay-fake-tabs/fake-tabs.js +0 -54
- package/ebay-fake-tabs/index.js +0 -10
- package/ebay-fake-tabs/tab.js +0 -24
- package/ebay-field/description.js +0 -26
- package/ebay-field/field.js +0 -12
- package/ebay-field/index.js +0 -12
- package/ebay-field/label.js +0 -29
- package/ebay-field/types.js +0 -2
- package/ebay-fullscreen-dialog/fullscreen-dialog.js +0 -25
- package/ebay-fullscreen-dialog/index.js +0 -8
- package/ebay-icon/icon.js +0 -98
- package/ebay-icon/index.js +0 -8
- package/ebay-icon/types.js +0 -3
- package/ebay-icon-button/icon-button.js +0 -40
- package/ebay-icon-button/index.js +0 -8
- package/ebay-infotip/ebay-infotip-content.js +0 -12
- package/ebay-infotip/ebay-infotip-heading.js +0 -23
- package/ebay-infotip/ebay-infotip-host.js +0 -28
- package/ebay-infotip/ebay-infotip.js +0 -79
- package/ebay-infotip/index.js +0 -14
- package/ebay-infotip/types.js +0 -2
- package/ebay-inline-notice/index.js +0 -10
- package/ebay-inline-notice/inline-notice.js +0 -66
- package/ebay-inline-notice/types.js +0 -2
- package/ebay-lightbox-dialog/index.js +0 -8
- package/ebay-lightbox-dialog/lightbox-dialog.js +0 -27
- package/ebay-listbox-button/index.js +0 -10
- package/ebay-listbox-button/listbox-button-option.js +0 -27
- package/ebay-listbox-button/listbox-button.js +0 -252
- package/ebay-menu/index.js +0 -27
- package/ebay-menu/menu-item-separator.js +0 -23
- package/ebay-menu/menu-item.js +0 -67
- package/ebay-menu/menu.js +0 -149
- package/ebay-menu/types.js +0 -2
- package/ebay-menu-button/index.js +0 -29
- package/ebay-menu-button/menu-button-item.js +0 -5
- package/ebay-menu-button/menu-button-label.js +0 -8
- package/ebay-menu-button/menu-button-separator.js +0 -23
- package/ebay-menu-button/menu-button.js +0 -132
- package/ebay-menu-button/types.js +0 -2
- package/ebay-notice-base/components/ebay-notice-content/index.js +0 -8
- package/ebay-notice-base/components/ebay-notice-content/notice-content.js +0 -4
- package/ebay-notice-base/components/ebay-notice-title/index.js +0 -8
- package/ebay-notice-base/components/ebay-notice-title/notice-title.js +0 -8
- package/ebay-notice-base/index.js +0 -7
- package/ebay-page-notice/index.js +0 -16
- package/ebay-page-notice/page-notice-cta.js +0 -9
- package/ebay-page-notice/page-notice-footer.js +0 -9
- package/ebay-page-notice/page-notice-title.js +0 -23
- package/ebay-page-notice/page-notice.js +0 -66
- package/ebay-pagination/const.js +0 -8
- package/ebay-pagination/helpers.js +0 -92
- package/ebay-pagination/index.js +0 -10
- package/ebay-pagination/pagination-item.js +0 -55
- package/ebay-pagination/pagination.js +0 -146
- package/ebay-pagination/types.js +0 -2
- package/ebay-panel-dialog/index.js +0 -8
- package/ebay-panel-dialog/panel-dialog.js +0 -27
- package/ebay-progress-bar/index.js +0 -8
- package/ebay-progress-bar/progress-bar.js +0 -23
- package/ebay-progress-spinner/index.js +0 -8
- package/ebay-progress-spinner/progress-spinner.js +0 -35
- package/ebay-progress-stepper/ebay-progress-step.js +0 -64
- package/ebay-progress-stepper/ebay-progress-stepper.js +0 -70
- package/ebay-progress-stepper/ebay-progress-title.js +0 -5
- package/ebay-progress-stepper/index.js +0 -12
- package/ebay-progress-stepper/types.js +0 -2
- package/ebay-radio/index.js +0 -8
- package/ebay-radio/radio.js +0 -71
- package/ebay-section-notice/index.js +0 -14
- package/ebay-section-notice/section-notice-footer.js +0 -9
- package/ebay-section-notice/section-notice-title.js +0 -23
- package/ebay-section-notice/section-notice.js +0 -82
- package/ebay-section-title/cta.js +0 -26
- package/ebay-section-title/index.js +0 -16
- package/ebay-section-title/info.js +0 -23
- package/ebay-section-title/overflow.js +0 -23
- package/ebay-section-title/section-title.js +0 -35
- package/ebay-section-title/subtitle.js +0 -23
- package/ebay-section-title/title.js +0 -23
- package/ebay-select/ebay-select-option.js +0 -22
- package/ebay-select/ebay-select.js +0 -129
- package/ebay-select/index.js +0 -10
- package/ebay-signal/index.js +0 -8
- package/ebay-signal/signal.js +0 -24
- package/ebay-snackbar-dialog/components/ebay-snackbar-dialog-action.js +0 -24
- package/ebay-snackbar-dialog/components/ebay-snackbar-dialog.js +0 -122
- package/ebay-snackbar-dialog/index.js +0 -7
- package/ebay-split-button/index.js +0 -23
- package/ebay-split-button/split-button.js +0 -30
- package/ebay-split-button/types.js +0 -2
- package/ebay-star-rating/index.js +0 -23
- package/ebay-star-rating/star-rating.js +0 -26
- package/ebay-star-rating-select/index.js +0 -23
- package/ebay-star-rating-select/star-rating-select.js +0 -82
- package/ebay-svg/index.js +0 -8
- package/ebay-svg/svg.js +0 -2548
- package/ebay-switch/ebay-switch.js +0 -61
- package/ebay-switch/index.js +0 -8
- package/ebay-tabs/index.js +0 -12
- package/ebay-tabs/tab-panel.js +0 -24
- package/ebay-tabs/tab.js +0 -24
- package/ebay-tabs/tabs.js +0 -90
- package/ebay-tabs/types.js +0 -2
- package/ebay-textbox/index.js +0 -16
- package/ebay-textbox/postfix-icon.js +0 -26
- package/ebay-textbox/postfix-text.js +0 -8
- package/ebay-textbox/prefix-icon.js +0 -23
- package/ebay-textbox/prefix-text.js +0 -8
- package/ebay-textbox/textbox.js +0 -147
- package/ebay-textbox/types.js +0 -2
- package/ebay-toast-dialog/components/toast.js +0 -26
- package/ebay-toast-dialog/index.js +0 -8
- package/ebay-tooltip/ebay-tooltip-content.js +0 -8
- package/ebay-tooltip/ebay-tooltip-host.js +0 -8
- package/ebay-tooltip/ebay-tooltip.js +0 -85
- package/ebay-tooltip/index.js +0 -14
- package/ebay-tourtip/ebay-tourtip-content.js +0 -8
- package/ebay-tourtip/ebay-tourtip-footer.js +0 -10
- package/ebay-tourtip/ebay-tourtip-heading.js +0 -24
- package/ebay-tourtip/ebay-tourtip-host.js +0 -8
- package/ebay-tourtip/ebay-tourtip.js +0 -70
- package/ebay-tourtip/index.js +0 -18
- package/ebay-video/const.js +0 -19
- package/ebay-video/controls.js +0 -40
- package/ebay-video/index.js +0 -25
- package/ebay-video/reportButton.js +0 -12
- package/ebay-video/source.js +0 -22
- package/ebay-video/types.js +0 -2
- package/ebay-video/video.js +0 -210
|
@@ -1,252 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
26
|
-
var t = {};
|
|
27
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
28
|
-
t[p] = s[p];
|
|
29
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
30
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
31
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
32
|
-
t[p[i]] = s[p[i]];
|
|
33
|
-
}
|
|
34
|
-
return t;
|
|
35
|
-
};
|
|
36
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
|
-
};
|
|
39
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
-
const react_1 = __importStar(require("react"));
|
|
41
|
-
const classnames_1 = __importDefault(require("classnames"));
|
|
42
|
-
const ebay_icon_1 = require("../ebay-icon");
|
|
43
|
-
const component_utils_1 = require("../common/component-utils");
|
|
44
|
-
const listbox_button_option_1 = __importDefault(require("./listbox-button-option"));
|
|
45
|
-
const ListboxButton = (_a) => {
|
|
46
|
-
var { children, name, value, selected, borderless, fluid, className, maxHeight, prefixId, prefixLabel, floatingLabel, unselectedText = '-', onChange = () => { }, onCollapse = () => { }, onExpand = () => { } } = _a, rest = __rest(_a, ["children", "name", "value", "selected", "borderless", "fluid", "className", "maxHeight", "prefixId", "prefixLabel", "floatingLabel", "unselectedText", "onChange", "onCollapse", "onExpand"]);
|
|
47
|
-
const optionsContainerRef = (0, react_1.useRef)(null);
|
|
48
|
-
const optionsParentContainerRef = (0, react_1.useRef)();
|
|
49
|
-
const optionsByIndexRef = (0, react_1.useRef)(new Map());
|
|
50
|
-
const buttonRef = (0, react_1.useRef)();
|
|
51
|
-
const listBoxButtonOptions = (0, component_utils_1.filterByType)(children, listbox_button_option_1.default);
|
|
52
|
-
if (!listBoxButtonOptions.length) {
|
|
53
|
-
throw new Error(`EbayListboxButton: Please use a
|
|
54
|
-
EbayListboxButtonOption that defines the options of the listbox`);
|
|
55
|
-
}
|
|
56
|
-
const getInitialSelectedOption = () => {
|
|
57
|
-
const selectedIndex = selected !== undefined ? selected : listBoxButtonOptions.findIndex(({ props }) => value !== undefined && props.value === value);
|
|
58
|
-
const index = selectedIndex > -1 || floatingLabel ? selectedIndex : undefined;
|
|
59
|
-
return {
|
|
60
|
-
option: listBoxButtonOptions[index],
|
|
61
|
-
index
|
|
62
|
-
};
|
|
63
|
-
};
|
|
64
|
-
// Get the default Selected value and set it in the state
|
|
65
|
-
const { option: selectedOptionFromValue, index: initialSelectedOptionIndex } = getInitialSelectedOption();
|
|
66
|
-
// Update the selected option to the state
|
|
67
|
-
const [selectedOption, setSelectedOption] = (0, react_1.useState)(selectedOptionFromValue);
|
|
68
|
-
const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(initialSelectedOptionIndex);
|
|
69
|
-
// Update the expanded status to the state
|
|
70
|
-
const [expanded, setExpanded] = (0, react_1.useState)();
|
|
71
|
-
// Additional flag to avoid multiple re-render when users tries to open and close
|
|
72
|
-
const [optionsOpened, setOptionsOpened] = (0, react_1.useState)(false);
|
|
73
|
-
const [wasClicked, setWasClicked] = (0, react_1.useState)();
|
|
74
|
-
(0, react_1.useEffect)(() => {
|
|
75
|
-
setSelectedOption(selectedOptionFromValue);
|
|
76
|
-
}, [value]);
|
|
77
|
-
const childrenArray = react_1.Children.toArray(children);
|
|
78
|
-
const getSelectedValueByIndex = (index) => childrenArray[index].props.value;
|
|
79
|
-
const getIndexByValue = (0, react_1.useCallback)((selectedValue) => childrenArray.findIndex(({ props }) => props.value === selectedValue), [childrenArray]);
|
|
80
|
-
const getSelectedOption = (currentIndex) => optionsByIndexRef.current.get(currentIndex);
|
|
81
|
-
const setActiveDescendant = (index) => {
|
|
82
|
-
const optionsContainerEle = optionsContainerRef.current;
|
|
83
|
-
optionsContainerEle === null || optionsContainerEle === void 0 ? void 0 : optionsContainerEle.setAttribute(`aria-activedescendant`, getSelectedOption(index).id);
|
|
84
|
-
};
|
|
85
|
-
const collapseListbox = () => {
|
|
86
|
-
setExpanded(false);
|
|
87
|
-
onCollapse();
|
|
88
|
-
};
|
|
89
|
-
const expandListbox = () => {
|
|
90
|
-
setExpanded(true);
|
|
91
|
-
onExpand();
|
|
92
|
-
};
|
|
93
|
-
const toggleListbox = () => {
|
|
94
|
-
if (expanded) {
|
|
95
|
-
collapseListbox();
|
|
96
|
-
}
|
|
97
|
-
else {
|
|
98
|
-
expandListbox();
|
|
99
|
-
}
|
|
100
|
-
};
|
|
101
|
-
const onOptionsSelect = (e, index) => {
|
|
102
|
-
// OnSelect set the selectedValue to the state and expanded to false to close the list box
|
|
103
|
-
setSelectedOption(childrenArray[index]);
|
|
104
|
-
setSelectedIndex(index);
|
|
105
|
-
collapseListbox();
|
|
106
|
-
setActiveDescendant(index);
|
|
107
|
-
buttonRef.current.focus();
|
|
108
|
-
onChange(e, { index, selected: [getSelectedValueByIndex(index)], wasClicked });
|
|
109
|
-
setWasClicked(false);
|
|
110
|
-
};
|
|
111
|
-
const reset = () => {
|
|
112
|
-
collapseListbox();
|
|
113
|
-
setSelectedOption(childrenArray[initialSelectedOptionIndex]);
|
|
114
|
-
};
|
|
115
|
-
const makeOptionActive = (index) => {
|
|
116
|
-
const optionEle = optionsContainerRef.current.children[index];
|
|
117
|
-
optionEle.setAttribute(`aria-selected`, 'true');
|
|
118
|
-
optionEle.classList.add(`listbox-button__option--active`);
|
|
119
|
-
};
|
|
120
|
-
const makeOptionInActive = (index) => {
|
|
121
|
-
const optionEle = optionsContainerRef.current.children[index];
|
|
122
|
-
optionEle.setAttribute(`aria-selected`, 'false');
|
|
123
|
-
optionEle.classList.remove(`listbox-button__option--active`);
|
|
124
|
-
};
|
|
125
|
-
// Followed the implementation from W3
|
|
126
|
-
// https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
|
|
127
|
-
const scrollOptions = (index) => {
|
|
128
|
-
const listboxOptionsContainerNode = optionsParentContainerRef.current;
|
|
129
|
-
const currentTarget = getSelectedOption(index);
|
|
130
|
-
if (listboxOptionsContainerNode.scrollHeight > listboxOptionsContainerNode.clientHeight) {
|
|
131
|
-
const scrollBottom = listboxOptionsContainerNode.clientHeight + listboxOptionsContainerNode.scrollTop;
|
|
132
|
-
const elementBottom = currentTarget.offsetTop + currentTarget.offsetHeight;
|
|
133
|
-
if (elementBottom > scrollBottom) {
|
|
134
|
-
listboxOptionsContainerNode.scrollTop = elementBottom - listboxOptionsContainerNode.clientHeight;
|
|
135
|
-
}
|
|
136
|
-
else if (currentTarget.offsetTop < listboxOptionsContainerNode.scrollTop) {
|
|
137
|
-
listboxOptionsContainerNode.scrollTop = currentTarget.offsetTop;
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
};
|
|
141
|
-
const makeSelections = (updatedIndex) => {
|
|
142
|
-
makeOptionActive(selectedIndex === undefined || updatedIndex === -1 ? 0 : updatedIndex);
|
|
143
|
-
makeOptionInActive(selectedIndex === undefined || selectedIndex === -1 ? 0 : selectedIndex);
|
|
144
|
-
scrollOptions(updatedIndex);
|
|
145
|
-
setActiveDescendant(updatedIndex);
|
|
146
|
-
setSelectedIndex(updatedIndex);
|
|
147
|
-
setSelectedOption(childrenArray[updatedIndex]);
|
|
148
|
-
};
|
|
149
|
-
const focusOptionsContainer = (focusOptions) => setTimeout(() => { var _a; return (_a = optionsContainerRef === null || optionsContainerRef === void 0 ? void 0 : optionsContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus(focusOptions); }, 0);
|
|
150
|
-
const onButtonClick = () => {
|
|
151
|
-
toggleListbox();
|
|
152
|
-
setOptionsOpened(true);
|
|
153
|
-
focusOptionsContainer({ preventScroll: true });
|
|
154
|
-
};
|
|
155
|
-
const onButtonKeyup = (e) => {
|
|
156
|
-
switch (e.key) {
|
|
157
|
-
case 'Escape':
|
|
158
|
-
collapseListbox();
|
|
159
|
-
break;
|
|
160
|
-
case 'Enter':
|
|
161
|
-
focusOptionsContainer();
|
|
162
|
-
break;
|
|
163
|
-
default:
|
|
164
|
-
break;
|
|
165
|
-
}
|
|
166
|
-
};
|
|
167
|
-
const onOptionContainerKeydown = (e) => {
|
|
168
|
-
switch (e.key) {
|
|
169
|
-
case ' ':
|
|
170
|
-
case 'PageUp':
|
|
171
|
-
case 'PageDown':
|
|
172
|
-
case 'Home':
|
|
173
|
-
case 'End':
|
|
174
|
-
e.preventDefault();
|
|
175
|
-
break;
|
|
176
|
-
case 'Down':
|
|
177
|
-
case 'ArrowDown':
|
|
178
|
-
e.preventDefault();
|
|
179
|
-
if (selectedIndex !== listBoxButtonOptions.length - 1) {
|
|
180
|
-
makeSelections(selectedIndex < listBoxButtonOptions.length - 1 ? selectedIndex + 1 : 0);
|
|
181
|
-
}
|
|
182
|
-
break;
|
|
183
|
-
case 'Up':
|
|
184
|
-
case 'ArrowUp':
|
|
185
|
-
e.preventDefault();
|
|
186
|
-
if (selectedIndex !== 0) {
|
|
187
|
-
makeSelections(selectedIndex > 0 ? selectedIndex - 1 : listBoxButtonOptions.length - 1);
|
|
188
|
-
}
|
|
189
|
-
break;
|
|
190
|
-
case 'Enter':
|
|
191
|
-
collapseListbox();
|
|
192
|
-
setTimeout(() => setSelectedOption(childrenArray[selectedIndex]));
|
|
193
|
-
setTimeout(() => buttonRef.current.focus(), 0);
|
|
194
|
-
onChange(e, {
|
|
195
|
-
index: selectedIndex,
|
|
196
|
-
selected: [getSelectedValueByIndex(selectedIndex)],
|
|
197
|
-
wasClicked
|
|
198
|
-
});
|
|
199
|
-
break;
|
|
200
|
-
case 'Esc':
|
|
201
|
-
case 'Escape':
|
|
202
|
-
reset();
|
|
203
|
-
break;
|
|
204
|
-
default:
|
|
205
|
-
break;
|
|
206
|
-
}
|
|
207
|
-
};
|
|
208
|
-
// We want to mimic the select box behavior, so we take the onSelect that passed
|
|
209
|
-
// at the parent level and use it for the OnClick on the list box since it is a fake dropdown
|
|
210
|
-
const updateListBoxButtonOptions = listBoxButtonOptions
|
|
211
|
-
.map((child, index) => (0, react_1.cloneElement)(child, {
|
|
212
|
-
index,
|
|
213
|
-
key: index,
|
|
214
|
-
selected: selectedOption && child.props.value === selectedOption.props.value,
|
|
215
|
-
onClick: (e) => onOptionsSelect(e, index),
|
|
216
|
-
innerRef: optionNode => !optionNode
|
|
217
|
-
? optionsByIndexRef.current.delete(index)
|
|
218
|
-
: optionsByIndexRef.current.set(index, optionNode)
|
|
219
|
-
}));
|
|
220
|
-
const wrapperClassName = (0, classnames_1.default)('listbox-button', className, { 'listbox-button--fluid': fluid });
|
|
221
|
-
const buttonClassName = (0, classnames_1.default)('btn', {
|
|
222
|
-
'btn--form': !borderless,
|
|
223
|
-
'btn--borderless': borderless,
|
|
224
|
-
'btn--floating-label': floatingLabel && selectedOption
|
|
225
|
-
});
|
|
226
|
-
const expandBtnTextId = prefixId && 'expand-btn-text';
|
|
227
|
-
const buttonLabel = (react_1.default.createElement(react_1.default.Fragment, null,
|
|
228
|
-
floatingLabel && react_1.default.createElement("span", { className: "btn__floating-label" }, floatingLabel),
|
|
229
|
-
prefixLabel && react_1.default.createElement("span", { className: "btn__label" }, prefixLabel),
|
|
230
|
-
react_1.default.createElement("span", { className: "btn__text", id: expandBtnTextId }, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.props.children) || unselectedText)));
|
|
231
|
-
return (react_1.default.createElement("span", { className: wrapperClassName },
|
|
232
|
-
react_1.default.createElement("button", Object.assign({}, rest, { type: "button", className: buttonClassName, "aria-expanded": !!expanded, "aria-haspopup": "listbox", "aria-labelledby": prefixId && `${prefixId} ${expandBtnTextId}`, onClick: onButtonClick,
|
|
233
|
-
// https://stackoverflow.com/questions/17769005/onclick-and-onblur-ordering-issue
|
|
234
|
-
onMouseDown: (e) => e.preventDefault(), onKeyUp: onButtonKeyup, ref: buttonRef }),
|
|
235
|
-
react_1.default.createElement("span", { className: "btn__cell" },
|
|
236
|
-
buttonLabel,
|
|
237
|
-
react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "chevronDown12" }))),
|
|
238
|
-
(expanded || optionsOpened) &&
|
|
239
|
-
react_1.default.createElement("div", { className: "listbox-button__listbox", ref: optionsParentContainerRef, style: { maxHeight: maxHeight } },
|
|
240
|
-
react_1.default.createElement("div", { className: "listbox-button__options", role: "listbox", tabIndex: expanded ? 0 : -1, ref: optionsContainerRef, onKeyDown: (e) => onOptionContainerKeydown(e),
|
|
241
|
-
// adding onMouseDown preventDefault b/c on IE the onClick event is not being fired on each
|
|
242
|
-
// option https://stackoverflow.com/questions/17769005/onclick-and-onblur-ordering-issue
|
|
243
|
-
onMouseDown: (e) => {
|
|
244
|
-
e.preventDefault();
|
|
245
|
-
setWasClicked(true);
|
|
246
|
-
}, onBlur: () => {
|
|
247
|
-
collapseListbox();
|
|
248
|
-
setTimeout(() => buttonRef.current.focus(), 0);
|
|
249
|
-
} }, updateListBoxButtonOptions)),
|
|
250
|
-
react_1.default.createElement("select", { hidden: true, className: "listbox-button__native", name: name, onChange: (e) => onOptionsSelect(e, getIndexByValue(e.target.value)), value: selectedOption ? selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.props.value : '' }, updateListBoxButtonOptions.map((option, i) => react_1.default.createElement("option", { value: option.props.value, key: i })))));
|
|
251
|
-
};
|
|
252
|
-
exports.default = ListboxButton;
|
package/ebay-menu/index.js
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
17
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
18
|
-
};
|
|
19
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
20
|
-
exports.EbayMenuSeparator = exports.EbayMenuItem = exports.EbayMenu = void 0;
|
|
21
|
-
var menu_1 = require("./menu");
|
|
22
|
-
Object.defineProperty(exports, "EbayMenu", { enumerable: true, get: function () { return __importDefault(menu_1).default; } });
|
|
23
|
-
var menu_item_1 = require("./menu-item");
|
|
24
|
-
Object.defineProperty(exports, "EbayMenuItem", { enumerable: true, get: function () { return __importDefault(menu_item_1).default; } });
|
|
25
|
-
var menu_item_separator_1 = require("./menu-item-separator");
|
|
26
|
-
Object.defineProperty(exports, "EbayMenuSeparator", { enumerable: true, get: function () { return __importDefault(menu_item_separator_1).default; } });
|
|
27
|
-
__exportStar(require("./types"), exports);
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
const react_1 = __importDefault(require("react"));
|
|
18
|
-
const classnames_1 = __importDefault(require("classnames"));
|
|
19
|
-
const EbayMenuItemSeparator = (_a) => {
|
|
20
|
-
var { className } = _a, rest = __rest(_a, ["className"]);
|
|
21
|
-
return (react_1.default.createElement("hr", Object.assign({}, rest, { className: (0, classnames_1.default)(className, 'menu__separator'), role: "separator" })));
|
|
22
|
-
};
|
|
23
|
-
exports.default = EbayMenuItemSeparator;
|
package/ebay-menu/menu-item.js
DELETED
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
26
|
-
var t = {};
|
|
27
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
28
|
-
t[p] = s[p];
|
|
29
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
30
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
31
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
32
|
-
t[p[i]] = s[p[i]];
|
|
33
|
-
}
|
|
34
|
-
return t;
|
|
35
|
-
};
|
|
36
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
|
-
};
|
|
39
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
-
const react_1 = __importStar(require("react"));
|
|
41
|
-
const classnames_1 = __importDefault(require("classnames"));
|
|
42
|
-
const ebay_badge_1 = require("../ebay-badge");
|
|
43
|
-
const ebay_icon_1 = require("../ebay-icon");
|
|
44
|
-
const EbayMenuItem = (_a) => {
|
|
45
|
-
var { className, checked, type, focused = false, tabIndex, disabled, badgeNumber, badgeAriaLabel, children } = _a, rest = __rest(_a, ["className", "checked", "type", "focused", "tabIndex", "disabled", "badgeNumber", "badgeAriaLabel", "children"]);
|
|
46
|
-
const ref = (0, react_1.useRef)(null);
|
|
47
|
-
const hasBadge = badgeNumber !== undefined;
|
|
48
|
-
(0, react_1.useEffect)(() => {
|
|
49
|
-
if (ref.current && focused) {
|
|
50
|
-
ref.current.focus();
|
|
51
|
-
}
|
|
52
|
-
}, [ref, focused]);
|
|
53
|
-
const checkable = ['radio', 'checkbox'];
|
|
54
|
-
return (react_1.default.createElement("div", Object.assign({ "aria-label": badgeAriaLabel }, rest, { ref: ref, className: (0, classnames_1.default)(className, 'menu__item', hasBadge && 'menu__item--badged'), role: roleFromType(type), "aria-checked": checkable.includes(type) ? checked : undefined, "aria-disabled": disabled, tabIndex: focused ? 0 : tabIndex }),
|
|
55
|
-
react_1.default.createElement("span", { "aria-hidden": hasBadge },
|
|
56
|
-
children,
|
|
57
|
-
hasBadge && react_1.default.createElement(ebay_badge_1.EbayBadge, { type: "menu", number: badgeNumber })),
|
|
58
|
-
react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "tick16" })));
|
|
59
|
-
};
|
|
60
|
-
function roleFromType(type) {
|
|
61
|
-
const roles = {
|
|
62
|
-
radio: 'menuitemradio',
|
|
63
|
-
checkbox: 'menuitemcheckbox'
|
|
64
|
-
};
|
|
65
|
-
return roles[type] || 'menuitem';
|
|
66
|
-
}
|
|
67
|
-
exports.default = EbayMenuItem;
|
package/ebay-menu/menu.js
DELETED
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
26
|
-
var t = {};
|
|
27
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
28
|
-
t[p] = s[p];
|
|
29
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
30
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
31
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
32
|
-
t[p[i]] = s[p[i]];
|
|
33
|
-
}
|
|
34
|
-
return t;
|
|
35
|
-
};
|
|
36
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
|
-
};
|
|
39
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
-
const react_1 = __importStar(require("react"));
|
|
41
|
-
const classnames_1 = __importDefault(require("classnames"));
|
|
42
|
-
const use_roving_index_1 = __importDefault(require("../common/event-utils/use-roving-index"));
|
|
43
|
-
const event_utils_1 = require("../common/event-utils");
|
|
44
|
-
const component_utils_1 = require("../common/component-utils");
|
|
45
|
-
const index_1 = require("./index");
|
|
46
|
-
const EbayMenu = (_a) => {
|
|
47
|
-
var { baseEl: Container = 'span', type, priority = 'secondary', checked, className, autofocus, onClick = () => { }, onKeyDown = () => { }, onChange = () => { }, onSelect = () => { }, forwardedRef, children } = _a, rest = __rest(_a, ["baseEl", "type", "priority", "checked", "className", "autofocus", "onClick", "onKeyDown", "onChange", "onSelect", "forwardedRef", "children"]);
|
|
48
|
-
const childrenArray = react_1.Children.toArray(children);
|
|
49
|
-
const [focusedIndex, setFocusedIndex] = (0, use_roving_index_1.default)(children, index_1.EbayMenuItem, autofocus === true ? 0 : undefined);
|
|
50
|
-
const [checkedIndexes, setCheckedIndexes] = (0, react_1.useState)(childrenArray.map(() => false));
|
|
51
|
-
const valuesFromChecked = (indexes) => childrenArray.reduce((values, item, i) => indexes[i] ? [...values, item.props.value] : values, []);
|
|
52
|
-
const indexesFromChecked = (indexes) => indexes.reduce((all, value, i) => value ? [...all, i] : all, []);
|
|
53
|
-
const eventProps = (index, indexes) => ({
|
|
54
|
-
index,
|
|
55
|
-
checked: indexesFromChecked(indexes)
|
|
56
|
-
});
|
|
57
|
-
const checkboxEventProps = (index, indexes) => (Object.assign(Object.assign({}, eventProps(index, indexes)), { indexes: indexesFromChecked(indexes), checkedValues: valuesFromChecked(indexes) }));
|
|
58
|
-
const updateIndex = (index, value, resetOthers = false) => {
|
|
59
|
-
let anyChanges = false;
|
|
60
|
-
const newValues = checkedIndexes.map((indexChecked, i) => {
|
|
61
|
-
const defaultValue = resetOthers ? false : indexChecked;
|
|
62
|
-
if (index === i) {
|
|
63
|
-
if (indexChecked !== value) {
|
|
64
|
-
anyChanges = true;
|
|
65
|
-
}
|
|
66
|
-
return value;
|
|
67
|
-
}
|
|
68
|
-
return defaultValue;
|
|
69
|
-
});
|
|
70
|
-
if (anyChanges) {
|
|
71
|
-
setCheckedIndexes(newValues);
|
|
72
|
-
return newValues;
|
|
73
|
-
}
|
|
74
|
-
};
|
|
75
|
-
const selectIndex = (index) => {
|
|
76
|
-
switch (type) {
|
|
77
|
-
case 'radio':
|
|
78
|
-
return updateIndex(index, true, true);
|
|
79
|
-
case 'checkbox':
|
|
80
|
-
return updateIndex(index, !checkedIndexes[index], false);
|
|
81
|
-
default:
|
|
82
|
-
return checkedIndexes.map((_, i) => i === index);
|
|
83
|
-
}
|
|
84
|
-
};
|
|
85
|
-
(0, react_1.useEffect)(() => {
|
|
86
|
-
if (type === 'radio') {
|
|
87
|
-
if (checked === undefined) {
|
|
88
|
-
const checkedIndex = childrenArray.findIndex(child => child.props.checked);
|
|
89
|
-
if (checkedIndex > -1) {
|
|
90
|
-
selectIndex(checkedIndex);
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
else {
|
|
94
|
-
selectIndex(checked);
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
else if (type === 'checkbox') {
|
|
98
|
-
setCheckedIndexes(childrenArray.map(child => Boolean(child.props.checked)));
|
|
99
|
-
}
|
|
100
|
-
}, []);
|
|
101
|
-
const handleChange = (e, index, newValues) => {
|
|
102
|
-
switch (type) {
|
|
103
|
-
case 'radio':
|
|
104
|
-
case 'checkbox':
|
|
105
|
-
return onChange(e, checkboxEventProps(index, newValues));
|
|
106
|
-
default:
|
|
107
|
-
return onSelect(e, eventProps(index, newValues));
|
|
108
|
-
}
|
|
109
|
-
};
|
|
110
|
-
const handleKeyDown = (e, index) => {
|
|
111
|
-
let newValues;
|
|
112
|
-
if ((0, event_utils_1.isActionKey)(e.key)) {
|
|
113
|
-
newValues = selectIndex(index);
|
|
114
|
-
if (newValues) {
|
|
115
|
-
handleChange(e, index, newValues);
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
switch (type) {
|
|
119
|
-
case 'radio':
|
|
120
|
-
case 'checkbox':
|
|
121
|
-
return onKeyDown(e, checkboxEventProps(index, newValues || checkedIndexes));
|
|
122
|
-
default:
|
|
123
|
-
return onKeyDown(e, eventProps(index, newValues || checkedIndexes));
|
|
124
|
-
}
|
|
125
|
-
};
|
|
126
|
-
const handleClick = (e, index) => {
|
|
127
|
-
setFocusedIndex(index);
|
|
128
|
-
const newValues = selectIndex(index);
|
|
129
|
-
if (newValues) {
|
|
130
|
-
handleChange(e, index, newValues);
|
|
131
|
-
}
|
|
132
|
-
};
|
|
133
|
-
return (react_1.default.createElement(Container, Object.assign({}, rest, { className: (0, classnames_1.default)(className, 'menu') }),
|
|
134
|
-
react_1.default.createElement("div", { className: "menu__items", role: "menu", ref: forwardedRef }, childrenArray.map((child, i) => {
|
|
135
|
-
const _a = child.props, { onClick: onItemClick = () => { }, onFocus: onItemFocus = () => { }, onKeyDown: onItemKeyDown = () => { } } = _a, itemRest = __rest(_a, ["onClick", "onFocus", "onKeyDown"]);
|
|
136
|
-
return (0, react_1.cloneElement)(child, Object.assign(Object.assign({}, itemRest), { type, focused: i === focusedIndex, tabIndex: focusedIndex === undefined ? 0 : -1, checked: checkedIndexes[i], onFocus: e => {
|
|
137
|
-
setFocusedIndex(i);
|
|
138
|
-
onItemFocus(e);
|
|
139
|
-
}, onClick: e => {
|
|
140
|
-
handleClick(e, i);
|
|
141
|
-
onItemClick(e);
|
|
142
|
-
onClick(e);
|
|
143
|
-
}, onKeyDown: e => {
|
|
144
|
-
handleKeyDown(e, i);
|
|
145
|
-
onItemKeyDown(e);
|
|
146
|
-
} }));
|
|
147
|
-
}))));
|
|
148
|
-
};
|
|
149
|
-
exports.default = (0, component_utils_1.withForwardRef)(EbayMenu);
|
package/ebay-menu/types.js
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
17
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
18
|
-
};
|
|
19
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
20
|
-
exports.EbayMenuButtonLabel = exports.EbayMenuButtonSeparator = exports.EbayMenuButtonItem = exports.EbayMenuButton = void 0;
|
|
21
|
-
var menu_button_1 = require("./menu-button");
|
|
22
|
-
Object.defineProperty(exports, "EbayMenuButton", { enumerable: true, get: function () { return __importDefault(menu_button_1).default; } });
|
|
23
|
-
var menu_button_item_1 = require("./menu-button-item");
|
|
24
|
-
Object.defineProperty(exports, "EbayMenuButtonItem", { enumerable: true, get: function () { return __importDefault(menu_button_item_1).default; } });
|
|
25
|
-
var menu_button_separator_1 = require("./menu-button-separator");
|
|
26
|
-
Object.defineProperty(exports, "EbayMenuButtonSeparator", { enumerable: true, get: function () { return __importDefault(menu_button_separator_1).default; } });
|
|
27
|
-
var menu_button_label_1 = require("./menu-button-label");
|
|
28
|
-
Object.defineProperty(exports, "EbayMenuButtonLabel", { enumerable: true, get: function () { return __importDefault(menu_button_label_1).default; } });
|
|
29
|
-
__exportStar(require("./types"), exports);
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const react_1 = __importDefault(require("react"));
|
|
7
|
-
const EbayMenuButtonLabel = ({ children }) => react_1.default.createElement(react_1.default.Fragment, null, children);
|
|
8
|
-
exports.default = EbayMenuButtonLabel;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
const react_1 = __importDefault(require("react"));
|
|
18
|
-
const classnames_1 = __importDefault(require("classnames"));
|
|
19
|
-
const EbayMenuButtonSeparator = (_a) => {
|
|
20
|
-
var { className } = _a, rest = __rest(_a, ["className"]);
|
|
21
|
-
return (react_1.default.createElement("hr", Object.assign({}, rest, { className: (0, classnames_1.default)(className, 'menu-button__separator'), role: "separator" })));
|
|
22
|
-
};
|
|
23
|
-
exports.default = EbayMenuButtonSeparator;
|