@ebay/ui-core-react 4.0.5 → 4.2.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,15 +1,5 @@
-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>;
+import { FC } from 'react';
+import { MenuProps } from './index';
+declare const EbayMenu: FC<MenuProps>;
 export default EbayMenu;
 //# sourceMappingURL=menu.d.ts.map

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,EAAE,EACL,MAAM,OAAO,CAAA;AAOd,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAKnC,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,SAAS,CAqG3B,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/types.d.ts

@@ -1,3 +1,21 @@
+import { ComponentProps } from 'react';
 export declare type EbayMenuType = 'radio' | 'checkbox';
 export declare type EbayMenuPriority = 'primary' | 'secondary' | 'none';
+declare type ContainerDivProps = Omit<ComponentProps<'div'>, 'onKeyDown' | 'onChange' | 'onSelect'>;
+declare type ContainerSpanProps = Omit<ComponentProps<'span'>, 'onKeyDown' | 'onChange' | 'onSelect'>;
+export declare type SelectCallback = (i: number, checked: boolean) => void;
+export declare type ChangeCallback = (i: number, checked: boolean) => void;
+export declare type KeyDownCallback = (i: number, checked: boolean) => void;
+export declare type MenuProps = ContainerDivProps & ContainerSpanProps & {
+    autofocus?: boolean;
+    baseEl?: 'div' | 'span';
+    checked?: number;
+    className?: string;
+    priority?: EbayMenuPriority;
+    type?: EbayMenuType;
+    onKeyDown?: KeyDownCallback;
+    onSelect?: SelectCallback;
+    onChange?: ChangeCallback;
+};
+export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,oBAAY,YAAY,GAAG,OAAO,GAAG,UAAU,CAAA;AAC/C,oBAAY,gBAAgB,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,CAAA;AAE/D,aAAK,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC,CAAA;AAC3F,aAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC,CAAA;AAE7F,oBAAY,cAAc,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;AAClE,oBAAY,cAAc,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;AAClE,oBAAY,eAAe,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;AAEnE,oBAAY,SAAS,GAAG,iBAAiB,GAAG,kBAAkB,GAAG;IAC7D,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,eAAe,CAAC;IAC5B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC7B,CAAA"}

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 { ChangeCallback, EbayMenuType, SelectCallback } 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?: ChangeCallback;
+    onSelect?: SelectCallback;
+    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,EAAE,cAAc,EAAY,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AACrF,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,cAAc,CAAC;IAC1B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,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/ebay-split-button/README.md

@@ -0,0 +1,52 @@
+# EbaySplitButton
+
+## Demo
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-split-button--default)
+
+## Usage
+
+### Import JS
+```jsx harmony
+import { EbaySplitButton } from '@ebay/ui-core-react/ebay-split-button'
+```
+
+### Import following styles from SKIN
+```jsx harmony
+import "@ebay/skin/split-button"
+```
+
+### Or import styles using SCSS/CSS
+```jsx harmony
+import '@ebay/skin/split-button.css'
+```
+
+### Icon button
+```jsx harmony
+<EbaySplitButton a11yMenuText="Show save options">
+    Save document
+    <Item>Save as...</Item>
+    <Item>Export</Item>
+</EbaySplitButton>
+```
+
+## Props
+Name | Type    | Stateful | Required | Description | Data
+--- |---------| -- | --- | --- | ---
+`a11yMenuText` | String  | No | Yes | aria label for menu button part
+`href` | String  | No | No | url for link behaviour (switches to anchor tag)
+`size` | String | No | No | button size: `regular` (default) or `large`
+`priority` | String  | No | No | `primary`, `secondary` (default), `tertiary`, `none`
+`bodyState` | String  | No | No | `loading` adds progress spinner, when user interacts with button, `reset` should be called to reset `aria-live` state, default is `none`
+`a11yButtonLoadingText` | String  | No | No | `aria-label` for button when `bodyState` is `loading`
+`type` | String  | No | No | menu items type: `radio` or `checkbox`
+`transparent` | Boolean | No | No | for transparent background
+`disabled` | Boolean | Yes | No
+`partiallyDisabled` | Boolean | No | No | sets `aria-disabled` but not `disabled` prop
+`onClick` | Function | - | No | click or action key pressed (`Space` or `Enter`)
+`onEscape` | Function | - | No | `Esc`-key pressed
+`onFocus` | Function | - | No | triggered on focus
+`onBlur` | Function | - | No | triggered on blur
+`onExpand` | Function | - | No | Called when content is expanded
+`onCollapse` | Function | - | No | Called when content is collapsed
+`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`

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

@@ -0,0 +1,3 @@
+export { default as EbaySplitButton } from './split-button';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-split-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAC3D,cAAc,SAAS,CAAA"}

package/ebay-split-button/index.js

@@ -0,0 +1,15 @@
+"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 split_button_1 = require("./split-button");
+Object.defineProperty(exports, "EbaySplitButton", { enumerable: true, get: function () { return split_button_1.default; } });
+__exportStar(require("./types"), exports);

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

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { Props } from './types';
+declare const EbaySplitButton: FC<Props>;
+export default EbaySplitButton;
+//# sourceMappingURL=split-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../src/ebay-split-button/split-button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,KAAK,CA6C9B,CAAA;AAED,eAAe,eAAe,CAAA"}

package/ebay-split-button/split-button.js

@@ -0,0 +1,41 @@
+"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 component_utils_1 = require("../common/component-utils");
+var ebay_button_1 = require("../ebay-button");
+var ebay_menu_button_1 = require("../ebay-menu-button");
+var EbaySplitButton = function (_a) {
+    var a11yMenuText = _a.a11yMenuText, children = _a.children, type = _a.type, bodyState = _a.bodyState, a11yButtonLoadingText = _a.a11yButtonLoadingText, onCollapse = _a.onCollapse, onExpand = _a.onExpand, _b = _a.onSelect, onSelect = _b === void 0 ? function () { } : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { } : _c, ref = _a.ref, rest = __rest(_a, ["a11yMenuText", "children", "type", "bodyState", "a11yButtonLoadingText", "onCollapse", "onExpand", "onSelect", "onChange", "ref"]);
+    var menuItemComponents = [ebay_menu_button_1.EbayMenuButtonItem, ebay_menu_button_1.EbayMenuButtonSeparator];
+    var buttonLabel = component_utils_1.filterBy(children, function (el) { return !menuItemComponents.includes(el.type); });
+    var menuItems = component_utils_1.filterByType(children, menuItemComponents);
+    return (react_1.default.createElement("span", { className: "split-button" },
+        react_1.default.createElement(ebay_button_1.EbayButton, __assign({ "aria-label": bodyState === 'loading' ? a11yButtonLoadingText : undefined }, rest, { split: "start", bodyState: bodyState === 'expand' ? undefined : bodyState }), buttonLabel),
+        react_1.default.createElement(ebay_menu_button_1.EbayMenuButton, { priority: rest.priority, disabled: rest.disabled, transparent: rest.transparent, size: rest.size, type: type, split: "end", reverse: true, a11yText: a11yMenuText, onCollapse: onCollapse, onExpand: onExpand, onChange: onChange, onSelect: onSelect }, menuItems)));
+};
+exports.default = EbaySplitButton;

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

@@ -0,0 +1,14 @@
+import { ComponentProps } from 'react';
+import { EbayButtonProps } from '../ebay-button';
+import { MenuProps } from '../ebay-menu';
+import { EbayMenuButtonProps } from '../ebay-menu-button';
+export declare type EbaySplitButtonProps = {
+    a11yMenuText?: string;
+    a11yButtonLoadingText?: string;
+    onCollapse?: () => void;
+    onExpand?: () => void;
+};
+declare type MenuEvents = 'onSelect' | 'onChange';
+export declare type Props = EbaySplitButtonProps & Omit<EbayButtonProps, 'ref'> & Omit<ComponentProps<'button'>, 'type' | MenuEvents> & Omit<ComponentProps<'a'>, MenuEvents> & Omit<MenuProps, 'priority'> & EbayMenuButtonProps;
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-split-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAEzD,oBAAY,oBAAoB,GAAG;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAA;AAED,aAAK,UAAU,GAAG,UAAU,GAAG,UAAU,CAAA;AAEzC,oBAAY,KAAK,GACb,oBAAoB,GACpB,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC,GAC5B,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC,GACnD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GACrC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAC3B,mBAAmB,CAAC"}

package/ebay-split-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.2.0",
   "description": "Skin components build off React",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"