@ebay/ui-core-react 4.0.5 → 4.1.0

package/ebay-menu/index.d.ts

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

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

@@ -1 +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,aAAa,EAAE,MAAM,aAAa,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACpE,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA"}
+{"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,aAAa,EAAE,MAAM,aAAa,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACpE,cAAc,SAAS,CAAA"}

package/ebay-menu/index.js

@@ -1,4 +1,14 @@
 "use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var menu_1 = require("./menu");
 Object.defineProperty(exports, "EbayMenu", { enumerable: true, get: function () { return menu_1.default; } });
@@ -6,3 +16,4 @@ 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; } });
+__exportStar(require("./types"), exports);

package/ebay-menu/menu.d.ts

@@ -1,11 +1,15 @@
 import { ComponentProps, FC } from 'react';
 import { EbayMenuType, EbayMenuPriority } from './index';
-declare type SpanProps = Omit<ComponentProps<'span'>, 'onKeyDown' | 'onChange'>;
+declare type ContainerDivProps = Omit<ComponentProps<'div'>, 'onKeyDown' | 'onChange'>;
+declare type ContainerSpanProps = Omit<ComponentProps<'span'>, 'onKeyDown' | 'onChange'>;
 declare type Callback = (i: number, checked: boolean) => void;
-declare type Props = SpanProps & {
-    type?: EbayMenuType;
-    priority?: EbayMenuPriority;
+declare type Props = ContainerDivProps & ContainerSpanProps & {
+    autofocus?: boolean;
+    baseEl?: 'div' | 'span';
     checked?: number;
+    className?: string;
+    priority?: EbayMenuPriority;
+    type?: EbayMenuType;
     onKeyDown?: Callback;
     onSelect?: Callback;
     onChange?: Callback;

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

@@ -1 +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,CAoGvB,CAAA;AAED,eAAe,QAAQ,CAAA"}
+{"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,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC,CAAA;AAC9E,aAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC,CAAA;AAEhF,aAAK,QAAQ,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;AACrD,aAAK,KAAK,GAAG,iBAAiB,GAAG,kBAAkB,GAAG;IAClD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,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,CAqGvB,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/ebay-menu/menu.js

@@ -52,10 +52,10 @@ 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 _b = _a.baseEl, Container = _b === void 0 ? 'span' : _b, type = _a.type, _c = _a.priority, priority = _c === void 0 ? 'secondary' : _c, checked = _a.checked, className = _a.className, _d = _a.onKeyDown, onKeyDown = _d === void 0 ? function () { } : _d, _e = _a.onChange, onChange = _e === void 0 ? function () { } : _e, _f = _a.onSelect, onSelect = _f === void 0 ? function () { } : _f, children = _a.children, rest = __rest(_a, ["baseEl", "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 _g = use_roving_index_1.default(children, index_1.EbayMenuItem), focusedIndex = _g[0], setFocusedIndex = _g[1];
+    var _h = react_1.useState(childrenArray.map(function () { return false; })), checkedIndexes = _h[0], setCheckedIndexes = _h[1];
     var updateIndex = function (index, value, resetOthers) {
         if (resetOthers === void 0) { resetOthers = false; }
         setCheckedIndexes(function (prevCheckedIndexes) {
@@ -106,7 +106,7 @@ var EbayMenu = function (_a) {
             }
         }
     }, [checkedIndexes]);
-    return (react_1.default.createElement("span", __assign({}, rest, { className: classnames_1.default(className, 'menu') }),
+    return (react_1.default.createElement(Container, __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), { type: type, focused: i === focusedIndex, tabIndex: focusedIndex === undefined ? 0 : -1, checked: checkedIndexes[i], onFocus: function (e) {

package/ebay-menu-button/README.md

@@ -0,0 +1,69 @@
+# ebay-menu-button
+
+## Demo
+[Storybook](https://pages.github.corp.ebay.com/React/ebayui-core-react/master/?path=/story/ebay-menu-button--default)
+
+## Install
+```
+yarn add ebayui-core-react
+```
+
+## Usage
+```jsx harmony
+import {
+    EbayMenuButton,
+    EbayMenuButtonItem as Item,
+    EbayMenuButtonSeparator as Separator,
+    EbayMenuButtonLabel as Label
+} from 'ebayui-core-react/ebay-menu-button';
+import '@ebay/skin/menu-button';
+<EbayMenuButton text="Menu">
+    <Item>Item 1</Item>
+    <Item>Item 2</Item>
+    <Item>Item 3</Item>
+    <Separator />
+    <Item>Log in</Item>
+</EbayMenuButton>
+// With a complext label
+<EbayMenuButton a11yText="Menu">
+    <Label><img src="menu-logo.svg" /></Label>
+    <Item>Item 1</Item>
+    <Item>Item 2</Item>
+</EbayMenuButton>
+```
+
+## EbayMenuButton Attributes
+
+Name | Type     | Required | Description
+--- |----------| --- | ---
+`text` | String   | No | button label text
+`a11yText` | String   | Only without a text label | a11y text for the button
+`noToggleIcon` | Boolean  | No | whether to hide the chevron toggle icon
+`expanded` | Boolean  | No | whether content is expanded
+`type` | String   | No | can be `radio` or `checkbox`
+`reverse` | Boolean  | No | expand menu flyout to the left
+`fixWidth` | Boolean  | No | Constrain items container width to button width
+`borderless` | Boolean  | No | Whether button has borders
+`size` | String   | No | button size: `large` or `regular` (default)
+`priority` | String   | No | button size: `primary`, `secondary` (default), `tertiary`, `none`
+`checked` | Number   | No | will set the corresponding index item to checked state and use the `aria-checked` attribute in markup
+`disabled` | Boolean  | No | will disable the entire dropdown (disables the ebay-button label) if set to true
+`variant` | String   | No | will change the button style: `overflow`, `form` or `button`
+`collapseOnSelect` | Boolean  | No | Will collapse whole menu when an item is selected in menu. Typically used in type=`radio`
+`prefixId` | String   | No | The id of an external element to use as the prefix label for the menu button. Cannot be used with `prefix-label` (NOT YET IMPLEMENTED)
+`prefixLabel` | String   | No |The label to add before each selected item on the button. Cannot be used with `prefix-id` (NOT YET IMPLEMENTED)
+`onExpand` | Function | No | Called when content is expanded
+`onCollapse` | Function | No | Called when content is collapsed
+`onSelect` | Function | No | props: ( index: number ), triggered on item clicked (not for type `radio`/`checkbox`)
+`onChange` | Function | No | props: (index: number, checked: number[], checkedValues: string[]), triggered on item `checked` change, (for type `radio`/`checkbox` only)
+
+## EbayMenuButtonItem Attributes
+
+Name | Type | Required | Description
+--- | --- | --- | ---
+`value` | String | No | for type `radio`, `checkbox`: the value to use with callbacks for `checkedValues[]`
+`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
+`badgeAriaLabel` | Number | No | used as the number to be placed in the badge (NOT YET IMPLEMENTED)
+`onClick` | Function | No | For a non-link menu item, with param `{ originalEvent }`

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

@@ -0,0 +1,6 @@
+export { default as EbayMenuButton, EbayMenuButtonProps } from './menu-button';
+export { default as EbayMenuButtonItem } from './menu-button-item';
+export { default as EbayMenuButtonSeparator } from './menu-button-separator';
+export { default as EbayMenuButtonLabel } from './menu-button-label';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-menu-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA;AAC9E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,yBAAyB,CAAA;AAC5E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpE,cAAc,SAAS,CAAA"}

package/ebay-menu-button/index.js

@@ -0,0 +1,21 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var menu_button_1 = require("./menu-button");
+Object.defineProperty(exports, "EbayMenuButton", { enumerable: true, get: function () { return menu_button_1.default; } });
+var menu_button_item_1 = require("./menu-button-item");
+Object.defineProperty(exports, "EbayMenuButtonItem", { enumerable: true, get: function () { return menu_button_item_1.default; } });
+var menu_button_separator_1 = require("./menu-button-separator");
+Object.defineProperty(exports, "EbayMenuButtonSeparator", { enumerable: true, get: function () { return menu_button_separator_1.default; } });
+var menu_button_label_1 = require("./menu-button-label");
+Object.defineProperty(exports, "EbayMenuButtonLabel", { enumerable: true, get: function () { return menu_button_label_1.default; } });
+__exportStar(require("./types"), exports);

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

@@ -0,0 +1,3 @@
+import { EbayMenuItem } from '../ebay-menu';
+export default EbayMenuItem;
+//# sourceMappingURL=menu-button-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-button-item.d.ts","sourceRoot":"","sources":["../../src/ebay-menu-button/menu-button-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAG3C,eAAe,YAAY,CAAA"}

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var ebay_menu_1 = require("../ebay-menu");
+// We do this for useRovingIndex to work
+exports.default = ebay_menu_1.EbayMenuItem;

package/ebay-menu-button/menu-button-label.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+declare const EbayMenuButtonLabel: FC;
+export default EbayMenuButtonLabel;
+//# sourceMappingURL=menu-button-label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-button-label.d.ts","sourceRoot":"","sources":["../../src/ebay-menu-button/menu-button-label.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC,QAAA,MAAM,mBAAmB,EAAE,EAAsC,CAAA;AAEjE,eAAe,mBAAmB,CAAA"}

package/ebay-menu-button/menu-button-label.js

@@ -0,0 +1,11 @@
+"use strict";
+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 EbayMenuButtonLabel = function (_a) {
+    var children = _a.children;
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+};
+exports.default = EbayMenuButtonLabel;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-button-separator.d.ts","sourceRoot":"","sources":["../../src/ebay-menu-button/menu-button-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,uBAAuB,EAAE,EAAE,CAAC,KAAK,CAStC,CAAA;AAED,eAAe,uBAAuB,CAAA"}

package/ebay-menu-button/menu-button-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 EbayMenuButtonSeparator = function (_a) {
+    var className = _a.className, rest = __rest(_a, ["className"]);
+    return (react_1.default.createElement("hr", __assign({}, rest, { className: classnames_1.default(className, 'menu-button__separator'), role: "separator" })));
+};
+exports.default = EbayMenuButtonSeparator;

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

@@ -0,0 +1,28 @@
+import { ComponentProps, FC } from 'react';
+import { EbayMenuType } from '../ebay-menu';
+import { EbayButtonProps } from '../ebay-button';
+import { EbayMenuButtonVariant } from './index';
+export declare type EbayMenuButtonProps = {
+    a11yText?: string;
+    className?: string;
+    fixWidth?: boolean;
+    reverse?: boolean;
+    text?: string;
+    type?: EbayMenuType;
+    variant?: EbayMenuButtonVariant;
+    onCollapse?: () => void;
+    onExpand?: () => void;
+    onChange?: () => void;
+    onSelect?: () => void;
+    expanded?: boolean;
+    noToggleIcon?: boolean;
+    checked?: number;
+    collapseOnSelect?: boolean;
+    prefixId?: string;
+    prefixLabel?: string;
+};
+declare type MenuEvents = 'onSelect' | 'onChange';
+declare type Props = Omit<EbayButtonProps, 'type' | 'variant' | 'onKeyDown'> & Omit<ComponentProps<'button'>, 'type' | MenuEvents> & Omit<ComponentProps<'a'>, MenuEvents> & EbayMenuButtonProps;
+declare const EbayMenuButton: FC<Props>;
+export default EbayMenuButton;
+//# sourceMappingURL=menu-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-button.d.ts","sourceRoot":"","sources":["../../src/ebay-menu-button/menu-button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAgB,cAAc,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAA;AAM5F,OAAO,EAAY,YAAY,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,EAAc,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAG5D,OAAO,EAAoE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAEjH,oBAAY,mBAAmB,GAAG;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB,CAAA;AAED,aAAK,UAAU,GAAG,UAAU,GAAG,UAAU,CAAA;AACzC,aAAK,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,CAAC,GAChE,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC,GACnD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GACrC,mBAAmB,CAAA;AAEvB,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,KAAK,CA4H7B,CAAA;AAaD,eAAe,cAAc,CAAA"}

package/ebay-menu-button/menu-button.js

@@ -0,0 +1,129 @@
+"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 component_utils_1 = require("../common/component-utils");
+var event_utils_1 = require("../common/event-utils");
+var random_id_1 = require("../common/random-id");
+var ebay_menu_1 = require("../ebay-menu");
+var ebay_button_1 = require("../ebay-button");
+var ebay_icon_button_1 = require("../ebay-icon-button");
+var ebay_icon_1 = require("../ebay-icon");
+var index_1 = require("./index");
+var EbayMenuButton = function (_a) {
+    var type = _a.type, _b = _a.variant, variant = _b === void 0 ? 'button' : _b, className = _a.className, _c = _a.text, text = _c === void 0 ? '' : _c, fixWidth = _a.fixWidth, reverse = _a.reverse, defaultExpanded = _a.expanded, noToggleIcon = _a.noToggleIcon, checked = _a.checked, collapseOnSelect = _a.collapseOnSelect, a11yText = _a.a11yText, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _e = _a.onExpand, onExpand = _e === void 0 ? function () { } : _e, _f = _a.onCollapse, onCollapse = _f === void 0 ? function () { } : _f, _g = _a.onChange, onChange = _g === void 0 ? function () { } : _g, _h = _a.onSelect, onSelect = _h === void 0 ? function () { } : _h, children = _a.children, rest = __rest(_a, ["type", "variant", "className", "text", "fixWidth", "reverse", "expanded", "noToggleIcon", "checked", "collapseOnSelect", "a11yText", "onClick", "onExpand", "onCollapse", "onChange", "onSelect", "children"]);
+    var _j = react_1.useState(defaultExpanded), expanded = _j[0], setExpanded = _j[1];
+    var _k = react_1.useState(), menuId = _k[0], setMenuId = _k[1];
+    var buttonRef = react_1.useRef(null);
+    var menuRef = react_1.useRef();
+    var menuItems = component_utils_1.filterByType(children, [index_1.EbayMenuButtonItem, index_1.EbayMenuButtonSeparator]);
+    var menuButtonLabel = component_utils_1.findComponent(children, index_1.EbayMenuButtonLabel);
+    var icon = component_utils_1.findComponent(children, ebay_icon_1.EbayIcon);
+    var textLabel = text ? react_1.default.createElement("span", null, text) : null;
+    var label = labelWithIcon(menuButtonLabel || textLabel, icon);
+    var wrapperClasses = classnames_1.default('menu-button', className, expanded && 'menu-button--expanded');
+    var menuClasses = classnames_1.default('menu-button__menu', {
+        'menu-button__menu--fix-width': fixWidth,
+        'menu-button__menu--reverse': reverse
+    });
+    react_1.useEffect(function () {
+        var handleBackgroundClick = function (e) {
+            var menuEl = menuRef.current;
+            var menuClicked = menuEl && menuEl.contains(e.target);
+            if (collapseOnSelect || !menuClicked) {
+                setExpanded(false);
+            }
+        };
+        if (expanded) {
+            onExpand();
+            // On React 18 useEffect hooks runs synchronous instead of asynchronous as React 17 or prior
+            // causing the event listener to be attached to the document at the same time that the dialog
+            // opens. Adding a timeout so the event is attached after the click event that opened the modal
+            // is finished.
+            setTimeout(function () {
+                document.addEventListener('click', handleBackgroundClick, false);
+            });
+        }
+        else if (expanded === false) {
+            onCollapse();
+        }
+        return function () { return document.removeEventListener('click', handleBackgroundClick, false); };
+    }, [expanded]);
+    react_1.useEffect(function () {
+        setMenuId(random_id_1.randomId());
+    }, []);
+    var handleMenuKeydown = function (e) {
+        event_utils_1.handleEscapeKeydown(e, function () {
+            var _a;
+            setExpanded(false);
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    };
+    var buttonProps = __assign({ ref: buttonRef, className: 'menu-button__button', 'aria-expanded': !!expanded, 'aria-haspopup': true, 'aria-label': a11yText, 'aria-controls': menuId, onClick: function (e) {
+            setExpanded(!expanded);
+            onClick(e);
+        } }, rest);
+    return (react_1.default.createElement("span", { className: wrapperClasses },
+        variant === 'overflow' ?
+            react_1.default.createElement(ebay_icon_button_1.EbayIconButton, __assign({ icon: "overflowVertical16" }, buttonProps)) :
+            react_1.default.createElement(ebay_button_1.EbayButton, __assign({ variant: variant === 'form' ? 'form' : undefined, bodyState: noToggleIcon ? undefined : 'expand' }, buttonProps), label),
+        react_1.default.createElement(ebay_menu_1.EbayMenu, { baseEl: "div", ref: menuRef, type: type, className: menuClasses, tabIndex: -1, id: menuId, autofocus: true, checked: checked, onKeyDown: handleMenuKeydown, onChange: onChange, onSelect: onSelect }, menuItems.map(function (item, i) {
+            return react_1.cloneElement(item, __assign(__assign({}, item.props), { className: classnames_1.default(item.props.className, 'menu-button__item'), key: i }));
+        }))));
+};
+function labelWithIcon(label, icon) {
+    if (!icon) {
+        return label;
+    }
+    if (!label) {
+        return icon;
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null,
+        icon,
+        label);
+}
+exports.default = EbayMenuButton;

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

@@ -0,0 +1,2 @@
+export declare type EbayMenuButtonVariant = 'overflow' | 'form' | 'button';
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-menu-button/types.ts"],"names":[],"mappings":"AAAA,oBAAY,qBAAqB,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAA"}

package/ebay-menu-button/types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebay/ui-core-react",
-  "version": "4.0.5",
+  "version": "4.1.0",
   "description": "Skin components build off React",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"