@ebay/ui-core-react 1.0.0

package/ebay-listbox-button/listbox-button.js

@@ -0,0 +1,235 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var ebay_icon_1 = require("../ebay-icon");
+var component_utils_1 = require("../common/component-utils");
+var listbox_button_option_1 = __importDefault(require("./listbox-button-option"));
+var ListboxButton = function (_a) {
+    var children = _a.children, name = _a.name, _b = _a.onSelect, onSelect = _b === void 0 ? function () { } : _b, value = _a.value, borderless = _a.borderless, fluid = _a.fluid, className = _a.className, maxHeight = _a.maxHeight, prefixId = _a.prefixId, floatingLabel = _a.floatingLabel, rest = __rest(_a, ["children", "name", "onSelect", "value", "borderless", "fluid", "className", "maxHeight", "prefixId", "floatingLabel"]);
+    var optionsContainerRef = react_1.useRef(null);
+    var optionsParentContainerRef = react_1.useRef();
+    var optionsByIndexRef = react_1.useRef(new Map());
+    var buttonRef = react_1.useRef();
+    var listBoxButtonOptions = component_utils_1.filterByType(children, listbox_button_option_1.default);
+    if (!listBoxButtonOptions.length) {
+        throw new Error("EbayListboxButton: Please use a\n        EbayListboxButtonOption that defines the options of the listbox");
+    }
+    var getInitialSelectedOption = function () {
+        var selectedIndex = listBoxButtonOptions.findIndex(function (_a) {
+            var props = _a.props;
+            return props.value === value;
+        });
+        var index = selectedIndex > -1 ? selectedIndex : 0;
+        return {
+            option: listBoxButtonOptions[index],
+            index: index
+        };
+    };
+    // Get the default Selected value and set it in the state
+    var _c = getInitialSelectedOption(), selectedOptionFromValue = _c.option, initialSelectedOptionIndex = _c.index;
+    // Update the selected option to the state
+    var _d = react_1.useState(selectedOptionFromValue), selectedOption = _d[0], setSelectedOption = _d[1];
+    var _e = react_1.useState(initialSelectedOptionIndex), selectedIndex = _e[0], setSelectedIndex = _e[1];
+    // Update the expanded status to the state
+    var _f = react_1.useState(false), expanded = _f[0], setExpanded = _f[1];
+    // Additional flag to avoid multiple re-render when users tries to open and close
+    var _g = react_1.useState(false), optionsOpened = _g[0], setOptionsOpened = _g[1];
+    react_1.useEffect(function () {
+        setSelectedOption(selectedOptionFromValue);
+    }, [value]);
+    var childrenArray = react_1.Children.toArray(children);
+    var getSelectedValueByIndex = function (index) { return childrenArray[index].props.value; };
+    var getSelectedOption = function (currentIndex) { return optionsByIndexRef.current.get(currentIndex); };
+    var setActiveDescendant = function (index) {
+        var optionsContainerEle = optionsContainerRef.current;
+        optionsContainerEle.setAttribute("aria-activedescendant", getSelectedOption(index).id);
+    };
+    var onOptionsSelect = function (e, optionValue, index) {
+        // OnSelect set the selectedValue to the state and expanded to false to close the list box
+        setSelectedOption(childrenArray[index]);
+        setSelectedIndex(index);
+        setExpanded(false);
+        setActiveDescendant(index);
+        buttonRef.current.focus();
+        onSelect(e, optionValue, index);
+    };
+    var reset = function () {
+        setExpanded(false);
+        setSelectedOption(childrenArray[initialSelectedOptionIndex]);
+    };
+    var makeOptionActive = function (index) {
+        var optionEle = optionsContainerRef.current.children[index];
+        optionEle.setAttribute("aria-selected", 'true');
+        optionEle.classList.add("listbox-button__option--active");
+    };
+    var makeOptionInActive = function (index) {
+        var optionEle = optionsContainerRef.current.children[index];
+        optionEle.setAttribute("aria-selected", 'false');
+        optionEle.classList.remove("listbox-button__option--active");
+    };
+    // Followed the implementation from W3
+    // https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
+    var scrollOptions = function (index) {
+        var listboxOptionsContainerNode = optionsParentContainerRef.current;
+        var currentTarget = getSelectedOption(index);
+        if (listboxOptionsContainerNode.scrollHeight > listboxOptionsContainerNode.clientHeight) {
+            var scrollBottom = listboxOptionsContainerNode.clientHeight + listboxOptionsContainerNode.scrollTop;
+            var elementBottom = currentTarget.offsetTop + currentTarget.offsetHeight;
+            if (elementBottom > scrollBottom) {
+                listboxOptionsContainerNode.scrollTop = elementBottom - listboxOptionsContainerNode.clientHeight;
+            }
+            else if (currentTarget.offsetTop < listboxOptionsContainerNode.scrollTop) {
+                listboxOptionsContainerNode.scrollTop = currentTarget.offsetTop;
+            }
+        }
+    };
+    var makeSelections = function (updatedIndex) {
+        makeOptionActive(updatedIndex);
+        makeOptionInActive(selectedIndex);
+        scrollOptions(updatedIndex);
+        setActiveDescendant(updatedIndex);
+        setSelectedIndex(updatedIndex);
+        setSelectedOption(childrenArray[updatedIndex]);
+    };
+    var focusOptionsContainer = function (focusOptions) {
+        return setTimeout(function () { var _a; return (_a = optionsContainerRef === null || optionsContainerRef === void 0 ? void 0 : optionsContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus(focusOptions); }, 0);
+    };
+    var onButtonClick = function () {
+        setExpanded(!expanded);
+        setOptionsOpened(true);
+        focusOptionsContainer({ preventScroll: true });
+    };
+    var onButtonKeyup = function (e) {
+        switch (e.key) {
+            case 'Escape':
+                setExpanded(false);
+                break;
+            case 'Enter':
+                focusOptionsContainer();
+                break;
+            default:
+                break;
+        }
+    };
+    var onOptionContainerKeydown = function (e) {
+        switch (e.key) {
+            case ' ':
+            case 'PageUp':
+            case 'PageDown':
+            case 'Home':
+            case 'End':
+                e.preventDefault();
+                break;
+            case 'Down':
+            case 'ArrowDown':
+                e.preventDefault();
+                if (selectedIndex !== listBoxButtonOptions.length - 1) {
+                    makeSelections(selectedIndex < listBoxButtonOptions.length - 1 ? selectedIndex + 1 : 0);
+                }
+                break;
+            case 'Up':
+            case 'ArrowUp':
+                e.preventDefault();
+                if (selectedIndex !== 0) {
+                    makeSelections(selectedIndex > 0 ? selectedIndex - 1 : listBoxButtonOptions.length - 1);
+                }
+                break;
+            case 'Enter':
+                setExpanded(false);
+                setTimeout(function () { return setSelectedOption(childrenArray[selectedIndex]); });
+                setTimeout(function () { return buttonRef.current.focus(); }, 0);
+                onSelect(e, getSelectedValueByIndex(selectedIndex), selectedIndex);
+                break;
+            case 'Esc':
+            case 'Escape':
+                reset();
+                break;
+            default:
+                break;
+        }
+    };
+    // We want to minic the select box behavior so we take the onSelect that passed
+    // at the parent level and use it for the OnClick on the list box since its a fake dropdown
+    var updatelistBoxButtonOptions = listBoxButtonOptions
+        .map(function (child, index) { return react_1.cloneElement(child, {
+        index: index,
+        key: index,
+        selected: child.props.value === selectedOption.props.value,
+        onClick: function (e, optionValue) { return onOptionsSelect(e, optionValue, index); },
+        innerRef: function (optionNode) { return !optionNode
+            ? optionsByIndexRef.current.delete(index)
+            : optionsByIndexRef.current.set(index, optionNode); }
+    }); });
+    var wrapperClassName = classnames_1.default('listbox-button', className, { 'listbox-button--fluid': fluid });
+    var buttonClassName = classnames_1.default('expand-btn', {
+        'expand-btn--borderless': borderless,
+        'expand-btn--floating-label': floatingLabel
+    });
+    var expandBtnTextId = prefixId && 'expand-btn-text';
+    return (react_1.default.createElement("span", { className: wrapperClassName },
+        react_1.default.createElement("button", __assign({}, rest, { type: "button", className: buttonClassName, "aria-expanded": expanded, "aria-haspopup": "listbox", "aria-labelledby": prefixId && prefixId + " " + expandBtnTextId, onClick: onButtonClick, 
+            // https://stackoverflow.com/questions/17769005/onclick-and-onblur-ordering-issue
+            onMouseDown: function (e) { return e.preventDefault(); }, onKeyUp: onButtonKeyup, ref: buttonRef }),
+            react_1.default.createElement("span", { className: "expand-btn__cell" },
+                floatingLabel ? (react_1.default.createElement("span", { className: "expand-btn__floating-label" }, floatingLabel)) : null,
+                react_1.default.createElement("span", { className: "expand-btn__text", id: expandBtnTextId }, selectedOption.props.children),
+                react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "dropdown" }))),
+        (expanded || optionsOpened) &&
+            react_1.default.createElement("div", { className: "listbox-button__listbox", ref: optionsParentContainerRef, style: { maxHeight: maxHeight } },
+                react_1.default.createElement("div", { className: "listbox-button__options", role: "listbox", tabIndex: 0, ref: optionsContainerRef, onKeyDown: function (e) { return onOptionContainerKeydown(e); }, 
+                    // adding onMouseDown preventDefault b/c on IE the onClick event is not being fired on each
+                    // option https://stackoverflow.com/questions/17769005/onclick-and-onblur-ordering-issue
+                    onMouseDown: function (e) { return e.preventDefault(); }, onBlur: function () {
+                        setExpanded(false);
+                        setTimeout(function () { return buttonRef.current.focus(); }, 0);
+                    } }, updatelistBoxButtonOptions)),
+        react_1.default.createElement("select", { hidden: true, className: "listbox-button__native", name: name, value: selectedOption.props.value }, updatelistBoxButtonOptions.map(function (option, i) {
+            return react_1.default.createElement("option", { value: option.props.value, key: i });
+        }))));
+};
+exports.default = ListboxButton;

package/ebay-menu/README.md

@@ -0,0 +1,54 @@
+# ebay-menu
+
+## Demo
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-menu--default)
+
+## Install
+```
+yarn add @ebay/ui-core-react
+```
+
+## Usage
+```jsx harmony
+import { EbayMenu, EbayMenuItem as Item } from '@ebay/ui-core-react/ebay-menu';
+import '@ebay/skin/menu';
+
+<EbayMenu>
+    <Item>item 1</Item>
+    <Item>item 2</Item>
+    <Item>item 3</Item>
+</EbayMenu>
+```
+
+## EbayMenu Props
+
+Name | Type | Required | Description
+--- | --- | --- | ---
+`type` | String | No | Can be `radio`/`checkbox`
+`checked` | Number | No | when used with `radio` type will check the item with the corresponding index
+`onKeydown` | Function | No | arguments: (index: number, checked: boolean)
+`onChange` | Function | No | arguments: (index: number, checked: boolean) for type `radio`/`checkbox`
+`onSelect` | Function | No | arguments: (index: number, checked: boolean), not for use with type `radio`/`checkbox`
+
+## EbayMenuItem Props
+
+Name | Type | Required | Description
+--- | --- | --- | ---
+`value` | String | No | for type `radio`, `checkbox`: the value to use with callbacks for `checked[]`
+`checked` | Boolean | No | for type `radio`, `checkbox`: whether or not the item is checked
+`disabled` | Boolean | No | makes the menu item disabled
+`badgeNumber` | Number | No | used as the number to be placed in the badge
+
+## EbayMenuSeparator
+Example:
+
+```jsx
+import { EbayMenu, EbayMenuItem as Item, EbayMenuSeparator as Separator } from '@ebay/ui-core-react/ebay-menu';
+
+<EbayMenu>
+    <Item>item 1</Item>
+    <Item>item 2</Item>
+    <Separator />
+    <Item>item 3</Item>
+</EbayMenu>
+```

package/ebay-menu/index.d.ts

@@ -0,0 +1,5 @@
+export { default as EbayMenu } from './menu';
+export { default as EbayMenuItem } from './menu-item';
+export { default as EbayMenuSeparator } from './menu-item-separator';
+export { EbayMenuType, EbayMenuPriority } from './types';
+//# sourceMappingURL=index.d.ts.map

package/ebay-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAC5C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,aAAa,CAAA;AACrD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACpE,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA"}

package/ebay-menu/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var menu_1 = require("./menu");
+Object.defineProperty(exports, "EbayMenu", { enumerable: true, get: function () { return menu_1.default; } });
+var menu_item_1 = require("./menu-item");
+Object.defineProperty(exports, "EbayMenuItem", { enumerable: true, get: function () { return menu_item_1.default; } });
+var menu_item_separator_1 = require("./menu-item-separator");
+Object.defineProperty(exports, "EbayMenuSeparator", { enumerable: true, get: function () { return menu_item_separator_1.default; } });

package/ebay-menu/menu-item-separator.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps, FC } from 'react';
+declare type Props = ComponentProps<'hr'>;
+declare const EbayMenuItemSeparator: FC<Props>;
+export default EbayMenuItemSeparator;
+//# sourceMappingURL=menu-item-separator.d.ts.map

package/ebay-menu/menu-item-separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-separator.d.ts","sourceRoot":"","sources":["../../src/ebay-menu/menu-item-separator.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAGjD,aAAK,KAAK,GAAG,cAAc,CAAC,IAAI,CAAC,CAAA;AAEjC,QAAA,MAAM,qBAAqB,EAAE,EAAE,CAAC,KAAK,CASpC,CAAA;AAED,eAAe,qBAAqB,CAAA"}

package/ebay-menu/menu-item-separator.js

@@ -0,0 +1,34 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var EbayMenuItemSeparator = function (_a) {
+    var className = _a.className, rest = __rest(_a, ["className"]);
+    return (react_1.default.createElement("hr", __assign({}, rest, { className: classnames_1.default(className, 'menu__separator'), role: "separator" })));
+};
+exports.default = EbayMenuItemSeparator;

package/ebay-menu/menu-item.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps, FC } from 'react';
+export declare type MenuItemProps = Omit<ComponentProps<'div'>, 'onKeyDown'> & {
+    focused?: boolean;
+    tabIndex?: number;
+    checked?: boolean;
+    value?: string;
+    disabled?: boolean;
+    badgeNumber?: number;
+};
+declare const EbayMenuItem: FC<MenuItemProps>;
+export default EbayMenuItem;
+//# sourceMappingURL=menu-item.d.ts.map

package/ebay-menu/menu-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../src/ebay-menu/menu-item.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAqB,MAAM,OAAO,CAAA;AAKpE,oBAAY,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,GAAG;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,aAAa,CAoCnC,CAAA;AAED,eAAe,YAAY,CAAA"}

package/ebay-menu/menu-item.js

@@ -0,0 +1,65 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var ebay_badge_1 = require("../ebay-badge");
+var ebay_icon_1 = require("../ebay-icon");
+var EbayMenuItem = function (_a) {
+    var className = _a.className, checked = _a.checked, _b = _a.focused, focused = _b === void 0 ? false : _b, tabIndex = _a.tabIndex, disabled = _a.disabled, badgeNumber = _a.badgeNumber, children = _a.children, rest = __rest(_a, ["className", "checked", "focused", "tabIndex", "disabled", "badgeNumber", "children"]);
+    var ref = react_1.useRef(null);
+    react_1.useEffect(function () {
+        if (ref.current && focused) {
+            ref.current.focus();
+        }
+    }, [ref, focused]);
+    return (react_1.default.createElement("div", __assign({}, rest, { ref: ref, className: classnames_1.default(className, 'menu__item'), role: "menuitem", "aria-checked": checked, "aria-disabled": disabled, "aria-hidden": badgeNumber !== undefined, tabIndex: focused ? 0 : tabIndex }),
+        react_1.default.createElement("span", null,
+            children,
+            badgeNumber !== undefined && react_1.default.createElement(ebay_badge_1.EbayBadge, { type: "menu", number: badgeNumber })),
+        react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "tickSmall" })));
+};
+exports.default = EbayMenuItem;

package/ebay-menu/menu.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps, FC } from 'react';
+import { EbayMenuType, EbayMenuPriority } from './index';
+declare type SpanProps = Omit<ComponentProps<'span'>, 'onKeyDown' | 'onChange'>;
+declare type Callback = (i: number, checked: boolean) => void;
+declare type Props = SpanProps & {
+    type?: EbayMenuType;
+    priority?: EbayMenuPriority;
+    checked?: number;
+    onKeyDown?: Callback;
+    onSelect?: Callback;
+    onChange?: Callback;
+};
+declare const EbayMenu: FC<Props>;
+export default EbayMenu;
+//# sourceMappingURL=menu.d.ts.map

package/ebay-menu/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/ebay-menu/menu.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEV,cAAc,EAAE,EAAE,EACrB,MAAM,OAAO,CAAA;AAMd,OAAO,EAAgB,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAEtE,aAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC,CAAA;AACvE,aAAK,QAAQ,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;AACrD,aAAK,KAAK,GAAG,SAAS,GAAG;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACvB,CAAA;AAID,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,KAAK,CAmGvB,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/ebay-menu/menu.js

@@ -0,0 +1,127 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var use_roving_index_1 = __importDefault(require("../common/event-utils/use-roving-index"));
+var usePrevious_1 = require("../common/component-utils/usePrevious");
+var event_utils_1 = require("../common/event-utils");
+var index_1 = require("./index");
+var changedIndex = function (arr1, arr2) { return arr1.findIndex(function (x, i) { return arr2[i] !== x; }); };
+var EbayMenu = function (_a) {
+    var type = _a.type, _b = _a.priority, priority = _b === void 0 ? 'secondary' : _b, checked = _a.checked, className = _a.className, _c = _a.onKeyDown, onKeyDown = _c === void 0 ? function () { } : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, _e = _a.onSelect, onSelect = _e === void 0 ? function () { } : _e, children = _a.children, rest = __rest(_a, ["type", "priority", "checked", "className", "onKeyDown", "onChange", "onSelect", "children"]);
+    var childrenArray = react_1.Children.toArray(children);
+    var _f = use_roving_index_1.default(children, index_1.EbayMenuItem), focusedIndex = _f[0], setFocusedIndex = _f[1];
+    var _g = react_1.useState(childrenArray.map(function () { return false; })), checkedIndexes = _g[0], setCheckedIndexes = _g[1];
+    var updateIndex = function (index, value, resetOthers) {
+        if (resetOthers === void 0) { resetOthers = false; }
+        setCheckedIndexes(function (prevCheckedIndexes) {
+            return prevCheckedIndexes.map(function (indexChecked, i) {
+                var defaultValue = resetOthers ? false : indexChecked;
+                return index === i ? value : defaultValue;
+            });
+        });
+    };
+    var selectIndex = function (index) {
+        switch (type) {
+            case 'radio':
+                return updateIndex(index, true, true);
+            case 'checkbox':
+                return updateIndex(index, !checkedIndexes[index]);
+            default:
+                return;
+        }
+    };
+    react_1.useEffect(function () {
+        if (type === 'radio') {
+            if (checked !== undefined) {
+                selectIndex(checked);
+            }
+            var checkedIndex = childrenArray.findIndex(function (child) { return child.props.checked; });
+            if (checkedIndex > -1) {
+                selectIndex(checkedIndex);
+            }
+        }
+        else if (type === 'checkbox') {
+            setCheckedIndexes(childrenArray.map(function (child) { return child.props.checked; }));
+        }
+    }, []);
+    var prevCheckedIndexes = usePrevious_1.usePrevious(checkedIndexes);
+    react_1.useEffect(function () {
+        if (type === 'radio') {
+            var checkedIndex = checkedIndexes.findIndex(Boolean);
+            if (checkedIndex > -1) {
+                onChange(checkedIndex, true);
+                onSelect(checkedIndex, true);
+            }
+        }
+        else if (type === 'checkbox') {
+            if (prevCheckedIndexes) {
+                var index = changedIndex(prevCheckedIndexes, checkedIndexes);
+                onChange(index, checkedIndexes[index]);
+                onSelect(index, checkedIndexes[index]);
+            }
+        }
+    }, [checkedIndexes]);
+    return (react_1.default.createElement("span", __assign({}, rest, { className: classnames_1.default(className, 'menu') }),
+        react_1.default.createElement("div", { className: "menu__items", role: "menu" }, childrenArray.map(function (child, i) {
+            var _a = child.props, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, _c = _a.onFocus, onFocus = _c === void 0 ? function () { } : _c, itemRest = __rest(_a, ["onClick", "onFocus"]);
+            return react_1.cloneElement(child, __assign(__assign({}, itemRest), { focused: i === focusedIndex, tabIndex: focusedIndex === undefined ? 0 : -1, checked: checkedIndexes[i], onFocus: function (e) {
+                    setFocusedIndex(i);
+                    onFocus(e);
+                }, onClick: function (e) {
+                    setFocusedIndex(i);
+                    selectIndex(i);
+                    onClick(e);
+                }, onKeyDown: function (e) {
+                    event_utils_1.handleActionKeydown(e, function () {
+                        selectIndex(i);
+                    });
+                    onKeyDown(i, checkedIndexes[i]);
+                } }));
+        }))));
+};
+exports.default = EbayMenu;

package/ebay-menu/types.d.ts

@@ -0,0 +1,3 @@
+export declare type EbayMenuType = 'radio' | 'checkbox';
+export declare type EbayMenuPriority = 'primary' | 'secondary' | 'none';
+//# sourceMappingURL=types.d.ts.map

package/ebay-menu/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-menu/types.ts"],"names":[],"mappings":"AAAA,oBAAY,YAAY,GAAG,OAAO,GAAG,UAAU,CAAA;AAC/C,oBAAY,gBAAgB,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,CAAA"}

package/ebay-menu/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ebay-notice-base/components/ebay-notice-content/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EbayNoticeContent } from './notice-content';
+//# sourceMappingURL=index.d.ts.map

package/ebay-notice-base/components/ebay-notice-content/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ebay-notice-base/components/ebay-notice-content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,kBAAkB,CAAA"}

package/ebay-notice-base/components/ebay-notice-content/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var notice_content_1 = require("./notice-content");
+Object.defineProperty(exports, "EbayNoticeContent", { enumerable: true, get: function () { return notice_content_1.default; } });

package/ebay-notice-base/components/ebay-notice-content/notice-content.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This Component is used only for finding it as a child of EbayInlineNotice, EbaySectionNotice, or EbayPageNotice
+ * and pass the properties to NoticeContent
+ */
+import { FC } from 'react';
+declare const EbayNoticeContent: FC;
+export default EbayNoticeContent;
+//# sourceMappingURL=notice-content.d.ts.map

package/ebay-notice-base/components/ebay-notice-content/notice-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice-content.d.ts","sourceRoot":"","sources":["../../../../src/ebay-notice-base/components/ebay-notice-content/notice-content.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAE1B,QAAA,MAAM,iBAAiB,EAAE,EAAe,CAAA;AAExC,eAAe,iBAAiB,CAAA"}

package/ebay-notice-base/components/ebay-notice-content/notice-content.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var EbayNoticeContent = function () { return null; };
+exports.default = EbayNoticeContent;

package/ebay-notice-base/components/ebay-notice-title/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EbayNoticeTitle } from './notice-title';
+//# sourceMappingURL=index.d.ts.map

package/ebay-notice-base/components/ebay-notice-title/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ebay-notice-base/components/ebay-notice-title/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,gBAAgB,CAAA"}

package/ebay-notice-base/components/ebay-notice-title/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var notice_title_1 = require("./notice-title");
+Object.defineProperty(exports, "EbayNoticeTitle", { enumerable: true, get: function () { return notice_title_1.default; } });