@ebay/ui-core-react 4.2.5 → 5.0.0

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

@@ -1,10 +1,14 @@
-import { ComponentProps, FC, KeyboardEvent, MouseEvent } from 'react';
-declare type SpanProps = Omit<ComponentProps<'div'>, 'onKeyDown'>;
-declare type Callback = (event: KeyboardEvent | MouseEvent, i: number) => void;
+import { ComponentProps, FC } from 'react';
+import { EbayKeyboardEventHandler, EbayMouseEventHandler } from '../common/event-utils/types';
+declare type SpanProps = Omit<ComponentProps<'div'>, 'onKeyDown' | 'onSelect'>;
 declare type Props = SpanProps & {
     itemMatchesUrl?: boolean;
-    onKeyDown?: Callback;
-    onSelect?: Callback;
+    onKeyDown?: EbayKeyboardEventHandler<HTMLElement, {
+        index: number;
+    }>;
+    onSelect?: EbayMouseEventHandler<HTMLAnchorElement, {
+        index: number;
+    }>;
 };
 declare const EbayFakeMenu: FC<Props>;
 export default EbayFakeMenu;

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

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/ebay-fake-menu/menu.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEV,cAAc,EAAE,EAAE,EAAgB,aAAa,EAAE,UAAU,EAC9D,MAAM,OAAO,CAAA;AAId,aAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,CAAA;AACzD,aAAK,QAAQ,GAAG,CAAC,KAAK,EAAE,aAAa,GAAG,UAAU,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;AACtE,aAAK,KAAK,GAAG,SAAS,GAAG;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACvB,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,KAAK,CAwC3B,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/ebay-fake-menu/menu.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEV,cAAc,EAAE,EAAE,EACrB,MAAM,OAAO,CAAA;AAGd,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAE7F,aAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC,CAAA;AACtE,aAAK,KAAK,GAAG,SAAS,GAAG;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,wBAAwB,CAAC,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACrE,QAAQ,CAAC,EAAE,qBAAqB,CAAC,iBAAiB,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC1E,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,KAAK,CAwC3B,CAAA;AAED,eAAe,YAAY,CAAA"}

package/ebay-fake-menu/menu.js

@@ -54,10 +54,10 @@ var EbayFakeMenu = function (_a) {
         react_1.default.createElement("ul", { className: "fake-menu__items", tabIndex: -1 }, childrenArray.map(function (child, i) {
             var _a = child.props, current = _a.current, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, itemRest = __rest(_a, ["current", "onClick"]);
             return (react_1.default.createElement("li", { key: i }, react_1.cloneElement(child, __assign(__assign({}, itemRest), { 'aria-current': current ? defaultAriaCurrent : undefined, onClick: function (e) {
-                    onSelect(e, i);
+                    onSelect(e, { index: i });
                     onClick(e);
                 }, onKeyDown: function (e) {
-                    onKeyDown(e, i);
+                    onKeyDown(e, { index: i });
                 } }))));
         }))));
 };

package/ebay-fake-menu-button/README.md

@@ -50,10 +50,6 @@ Name | Type | Required | Description
 `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)
-`onExpand` | Function | No | Triggered on menu expand
-`onCollapse` | Function | No | Triggered on menu collapse
-`onChange` | Function | No | Not yet implemented
-`onSelect` | Function | No | Not yet implemented
 
 ## EbayFakeMenuButtonItem Attributes
 
@@ -67,3 +63,12 @@ Name | Type | Required | Description
 `badge-number` | Number | No | Not yet implemented
 `badge-aria-label` | String | Yes (if `badge-number` provided) | Not yet implemented
 `onClick` | Function | No | For a non-link menu item, with param `{ originalEvent }`
+
+## Callbacks
+| Name          | Required             | Description                          | Arguments                          |
+|---------------|----------------------|--------------------------------------|------------------------------------|
+ `onKeyDown`   | No | Triggered on key down                | `(KeyboardEvent)`                  |
+ `onMouseDown` | No | Triggered on mouse down on menu item | `(MouseEvent, { index: number })`  |
+ `onCollapse`  | No | Triggered on menu collapse           | `()`                               |
+ `onExpand`    | No | Triggered on menu expand             | `()`                               |
+ `onSelect`    | No | Not yet implemented                  | `(ChangeEvent, { index: number })` |

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

@@ -1,4 +1,5 @@
 import { ComponentProps, FC } from 'react';
+import { EbayKeyboardEventHandler, EbayMouseEventHandler } from '../common/event-utils/types';
 import { EbayButtonProps } from '../ebay-button';
 export declare type EbayFakeMenuButtonVariant = 'overflow' | 'form' | 'button';
 export declare type EbayFakeMenuButtonProps = {
@@ -12,9 +13,15 @@ export declare type EbayFakeMenuButtonProps = {
     onCollapse?: () => void;
     onExpand?: () => void;
     text?: string;
-    type?: 'radio' | 'checkbox';
+    onSelect?: EbayMouseEventHandler<HTMLAnchorElement, {
+        index: number;
+    }>;
+    onKeyDown?: EbayKeyboardEventHandler<HTMLElement>;
+    onMouseDown?: EbayMouseEventHandler<HTMLAnchorElement, {
+        index: number;
+    }>;
 };
-declare type ButtonProps = Omit<EbayButtonProps, 'variant'> & Omit<ComponentProps<'button'>, 'type'> & ComponentProps<'a'>;
+declare type ButtonProps = Omit<EbayButtonProps, 'variant' | 'onKeyDown' | 'onMouseDown'> & Omit<ComponentProps<'button'>, 'onKeyDown' | 'onMouseDown' | 'onSelect'> & Omit<ComponentProps<'a'>, 'onKeyDown' | 'onMouseDown' | 'onSelect'>;
 declare type Props = ButtonProps & EbayFakeMenuButtonProps;
 declare const EbayMenuButton: FC<Props>;
 export default EbayMenuButton;

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

@@ -1 +1 @@
-{"version":3,"file":"menu-button.d.ts","sourceRoot":"","sources":["../../src/ebay-fake-menu-button/menu-button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAgB,cAAc,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAA;AAM5F,OAAO,EAAc,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAM5D,oBAAY,yBAAyB,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAA;AAEtE,oBAAY,uBAAuB,GAAG;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CAC/B,CAAA;AAED,aAAK,WAAW,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,GAC/C,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GACtC,cAAc,CAAC,GAAG,CAAC,CAAA;AACvB,aAAK,KAAK,GAAG,WAAW,GAAG,uBAAuB,CAAA;AAElD,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,KAAK,CAsG7B,CAAA;AAED,eAAe,cAAc,CAAA"}
+{"version":3,"file":"menu-button.d.ts","sourceRoot":"","sources":["../../src/ebay-fake-menu-button/menu-button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAgB,cAAc,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAA;AAK5F,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAE7F,OAAO,EAAc,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAM5D,oBAAY,yBAAyB,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAA;AAEtE,oBAAY,uBAAuB,GAAG;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,qBAAqB,CAAC,iBAAiB,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACvE,SAAS,CAAC,EAAE,wBAAwB,CAAC,WAAW,CAAC,CAAC;IAClD,WAAW,CAAC,EAAE,qBAAqB,CAAC,iBAAiB,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC7E,CAAA;AAED,aAAK,WAAW,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,WAAW,GAAG,aAAa,CAAC,GAC7E,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,WAAW,GAAG,aAAa,GAAG,UAAU,CAAC,GACxE,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,WAAW,GAAG,aAAa,GAAG,UAAU,CAAC,CAAA;AACvE,aAAK,KAAK,GAAG,WAAW,GAAG,uBAAuB,CAAA;AAElD,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,KAAK,CA4G7B,CAAA;AAED,eAAe,cAAc,CAAA"}

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

@@ -55,9 +55,9 @@ var ebay_icon_button_1 = require("../ebay-icon-button");
 var ebay_fake_menu_1 = require("../ebay-fake-menu");
 var _1 = require(".");
 var EbayMenuButton = function (_a) {
-    var a11yText = _a.a11yText, noToggleIcon = _a.noToggleIcon, fixWidth = _a.fixWidth, reverse = _a.reverse, variant = _a.variant, _b = _a.expanded, defaultExpanded = _b === void 0 ? false : _b, className = _a.className, _c = _a.onCollapse, onCollapse = _c === void 0 ? function () { } : _c, _d = _a.onExpand, onExpand = _d === void 0 ? function () { } : _d, _e = _a.text, text = _e === void 0 ? '' : _e, children = _a.children, rest = __rest(_a, ["a11yText", "noToggleIcon", "fixWidth", "reverse", "variant", "expanded", "className", "onCollapse", "onExpand", "text", "children"]);
-    var _f = react_1.useState(defaultExpanded), expanded = _f[0], setExpanded = _f[1];
-    var _g = react_1.useState(), menuId = _g[0], setMenuId = _g[1];
+    var a11yText = _a.a11yText, noToggleIcon = _a.noToggleIcon, fixWidth = _a.fixWidth, reverse = _a.reverse, variant = _a.variant, _b = _a.expanded, defaultExpanded = _b === void 0 ? false : _b, className = _a.className, _c = _a.onCollapse, onCollapse = _c === void 0 ? function () { } : _c, _d = _a.onExpand, onExpand = _d === void 0 ? function () { } : _d, _e = _a.onMouseDown, onMouseDown = _e === void 0 ? function () { } : _e, _f = _a.onSelect, onSelect = _f === void 0 ? function () { } : _f, _g = _a.text, text = _g === void 0 ? '' : _g, children = _a.children, rest = __rest(_a, ["a11yText", "noToggleIcon", "fixWidth", "reverse", "variant", "expanded", "className", "onCollapse", "onExpand", "onMouseDown", "onSelect", "text", "children"]);
+    var _h = react_1.useState(defaultExpanded), expanded = _h[0], setExpanded = _h[1];
+    var _j = react_1.useState(), menuId = _j[0], setMenuId = _j[1];
     var ref = react_1.useRef();
     var icon = component_utils_1.findComponent(children, ebay_icon_1.EbayIcon);
     var label = component_utils_1.findComponent(children, _1.EbayFakeMenuButtonLabel) || (icon ? react_1.default.createElement("span", null, text) : text);
@@ -105,8 +105,10 @@ var EbayMenuButton = function (_a) {
                 icon,
                 label),
         expanded &&
-            react_1.default.createElement(ebay_fake_menu_1.EbayFakeMenu, { className: menuClasses, id: menuId, tabIndex: -1, onKeyDown: handleMenuKeydown }, menuItems.map(function (item, i) {
-                return react_1.cloneElement(item, __assign(__assign({}, item.props), { className: classnames_1.default(item.props.className, 'fake-menu-button__item'), key: i, autoFocus: i === 0 }));
+            react_1.default.createElement(ebay_fake_menu_1.EbayFakeMenu, { className: menuClasses, id: menuId, tabIndex: -1, onKeyDown: handleMenuKeydown, onSelect: onSelect }, menuItems.map(function (item, i) {
+                return react_1.cloneElement(item, __assign(__assign({}, item.props), { onMouseDown: function (e) {
+                        onMouseDown(e, { index: i });
+                    }, className: classnames_1.default(item.props.className, 'fake-menu-button__item'), key: i, autoFocus: i === 0 }));
             }))));
 };
 exports.default = EbayMenuButton;

package/ebay-fullscreen-dialog/fullscreen-dialog.d.ts

@@ -2,7 +2,6 @@ import { FC } from 'react';
 import { DialogBaseProps } from '../ebay-dialog-base';
 export interface Props<T = any> extends DialogBaseProps<T> {
     open?: boolean;
-    onOpen?: () => void;
     onClose?: () => void;
 }
 declare const EbayFullscreenDialog: FC<Props>;

package/ebay-fullscreen-dialog/fullscreen-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-dialog.d.ts","sourceRoot":"","sources":["../../src/ebay-fullscreen-dialog/fullscreen-dialog.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,eAAe,EAAuB,MAAM,qBAAqB,CAAA;AAI1E,MAAM,WAAW,KAAK,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,oBAAoB,EAAE,EAAE,CAAC,KAAK,CAmBnC,CAAA;AAED,eAAe,oBAAoB,CAAA"}
+{"version":3,"file":"fullscreen-dialog.d.ts","sourceRoot":"","sources":["../../src/ebay-fullscreen-dialog/fullscreen-dialog.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,eAAe,EAAuB,MAAM,qBAAqB,CAAA;AAI1E,MAAM,WAAW,KAAK,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,oBAAoB,EAAE,EAAE,CAAC,KAAK,CAkBnC,CAAA;AAED,eAAe,oBAAoB,CAAA"}

package/ebay-fullscreen-dialog/fullscreen-dialog.js

@@ -30,7 +30,7 @@ var classnames_1 = __importDefault(require("classnames"));
 var ebay_dialog_base_1 = require("../ebay-dialog-base");
 var classPrefix = 'fullscreen-dialog';
 var EbayFullscreenDialog = function (_a) {
-    var open = _a.open, _b = _a.onClose, onClose = _b === void 0 ? function () { } : _b, _c = _a.onOpen, onOpen = _c === void 0 ? function () { } : _c, className = _a.className, animated = _a.animated, rest = __rest(_a, ["open", "onClose", "onOpen", "className", "animated"]);
+    var open = _a.open, _b = _a.onClose, onClose = _b === void 0 ? function () { } : _b, className = _a.className, animated = _a.animated, rest = __rest(_a, ["open", "onClose", "className", "animated"]);
     return (react_1.default.createElement(ebay_dialog_base_1.DialogBaseWithState, __assign({}, rest, { classPrefix: classPrefix, buttonPosition: "left", onCloseBtnClick: onClose, transitionElement: "window", animated: animated, className: classnames_1.default(className, classPrefix + "--mask-fade-slow"), windowClass: classnames_1.default(classPrefix + "__window", classPrefix + "__window--slide"), open: open })));
 };
 exports.default = EbayFullscreenDialog;

package/ebay-icon-button/README.md

@@ -39,3 +39,12 @@ Name | Type | Stateful | Required | Description | Data
 `bageNumber` | Number | No | No | number on the badge
 `bageAriaLabel` | String | No | No | aria label of the badge
 `transparent` | Boolean | No | No | for transparent background
+
+## Callbacks
+
+| Name       | Type     | Required | Description                 | Data              |
+|------------|----------|----------|-----------------------------|-------------------|
+| `onClick`  | Function | No       | triggered on click          | `(MouseEvent)`    |
+| `onEscape` | Function | No       | triggered on Esc key press  | `(KeyboardEvent)` |
+| `onFocus`  | Function | No       | triggered on keyboard focus | `(FocusEvent)`    |
+| `onBlur`   | Function | No       | triggered on focus lost     | `(FocusEvent)` |

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

@@ -1,5 +1,6 @@
 import React, { ComponentProps, RefObject } from 'react';
 import { Icon } from '../ebay-icon';
+import { EbayKeyboardEventHandler } from '../common/event-utils/types';
 export declare type EbayIconButtonProps = {
     href?: string;
     icon: Icon;
@@ -7,10 +8,11 @@ export declare type EbayIconButtonProps = {
     badgeAriaLabel?: string;
     transparent?: boolean;
     forwardedRef?: RefObject<HTMLAnchorElement & HTMLButtonElement>;
+    onEscape?: EbayKeyboardEventHandler;
 };
 declare type HTMLButtonProps = ComponentProps<'button'>;
 declare type HTMLAnchorProps = ComponentProps<'a'>;
 declare type Props = EbayIconButtonProps & HTMLButtonProps & HTMLAnchorProps;
-declare const _default: React.ForwardRefExoticComponent<Pick<Props, "form" | "slot" | "style" | "title" | "type" | "key" | "value" | "className" | "disabled" | "placeholder" | "children" | "dir" | "autoFocus" | "download" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "href" | "hrefLang" | "media" | "name" | "rel" | "target" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "forwardedRef" | "transparent" | "ping" | "referrerPolicy" | "icon" | "badgeNumber" | "badgeAriaLabel"> & React.RefAttributes<React.FC<Props>>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "form" | "slot" | "style" | "title" | "type" | "key" | "value" | "className" | "disabled" | "placeholder" | "children" | "dir" | "autoFocus" | "download" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "href" | "hrefLang" | "media" | "name" | "rel" | "target" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "forwardedRef" | "transparent" | "onEscape" | "ping" | "referrerPolicy" | "icon" | "badgeNumber" | "badgeAriaLabel"> & React.RefAttributes<React.FC<Props>>>;
 export default _default;
 //# sourceMappingURL=icon-button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../src/ebay-icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAM,SAAS,EAAE,MAAM,OAAO,CAAA;AAE5D,OAAO,EAAY,IAAI,EAAE,MAAM,cAAc,CAAA;AAI7C,oBAAY,mBAAmB,GAAG;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CACnE,CAAA;AAED,aAAK,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;AAChD,aAAK,eAAe,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;AAC3C,aAAK,KAAK,GAAG,mBAAmB,GAAG,eAAe,GAAG,eAAe,CAAC;;AAiDrE,wBAA6C"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../src/ebay-icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3E,OAAO,EAAY,IAAI,EAAE,MAAM,cAAc,CAAA;AAG7C,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAA;AAEtE,oBAAY,mBAAmB,GAAG;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IAChE,QAAQ,CAAC,EAAE,wBAAwB,CAAC;CACvC,CAAA;AAED,aAAK,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;AAChD,aAAK,eAAe,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;AAC3C,aAAK,KAAK,GAAG,mBAAmB,GAAG,eAAe,GAAG,eAAe,CAAC;;AA4DrE,wBAA6C"}

package/ebay-icon-button/icon-button.js

@@ -32,7 +32,7 @@ var ebay_badge_1 = require("../ebay-badge");
 var component_utils_1 = require("../common/component-utils");
 var EbayIconButton = function (_a) {
     var _b;
-    var href = _a.href, icon = _a.icon, badgeNumber = _a.badgeNumber, badgeAriaLabel = _a.badgeAriaLabel, transparent = _a.transparent, extraClasses = _a.className, forwardedRef = _a.forwardedRef, rest = __rest(_a, ["href", "icon", "badgeNumber", "badgeAriaLabel", "transparent", "className", "forwardedRef"]);
+    var href = _a.href, icon = _a.icon, badgeNumber = _a.badgeNumber, badgeAriaLabel = _a.badgeAriaLabel, transparent = _a.transparent, extraClasses = _a.className, forwardedRef = _a.forwardedRef, _c = _a.onEscape, onEscape = _c === void 0 ? function () { } : _c, _d = _a.onKeyDown, onKeyDown = _d === void 0 ? function () { } : _d, rest = __rest(_a, ["href", "icon", "badgeNumber", "badgeAriaLabel", "transparent", "className", "forwardedRef", "onEscape", "onKeyDown"]);
     var classPrefix = href ? 'icon-link' : 'icon-btn';
     var className = classnames_1.default(extraClasses, classPrefix, (_b = {},
         _b[classPrefix + "--badged"] = badgeNumber,
@@ -41,6 +41,12 @@ var EbayIconButton = function (_a) {
     var children = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(ebay_icon_1.EbayIcon, { name: icon }),
         badgeNumber && react_1.default.createElement(ebay_badge_1.EbayBadge, { type: "icon", number: badgeNumber, "aria-label": badgeAriaLabel })));
-    return href ? (react_1.default.createElement("a", __assign({ ref: forwardedRef, className: className, href: href }, rest), children)) : (react_1.default.createElement("button", __assign({ ref: forwardedRef, type: "button", className: className }, rest), children));
+    var keyDownHandler = function (e) {
+        if (e.key === 'Escape' || e.key === 'Esc') {
+            onEscape(e);
+        }
+        onKeyDown(e);
+    };
+    return href ? (react_1.default.createElement("a", __assign({ ref: forwardedRef, className: className, href: href, onKeyDown: keyDownHandler }, rest), children)) : (react_1.default.createElement("button", __assign({ ref: forwardedRef, type: "button", className: className, onKeyDown: keyDownHandler }, rest), children));
 };
 exports.default = component_utils_1.withForwardRef(EbayIconButton);

package/ebay-lightbox-dialog/lightbox-dialog.d.ts

@@ -4,7 +4,6 @@ declare type Mode = 'default' | 'mini';
 export interface Props<T = any> extends DialogBaseProps<T> {
     open?: boolean;
     mode?: Mode;
-    onOpen?: () => void;
     onClose?: () => void;
 }
 declare const EbayLightboxDialog: FC<Props>;

package/ebay-lightbox-dialog/lightbox-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lightbox-dialog.d.ts","sourceRoot":"","sources":["../../src/ebay-lightbox-dialog/lightbox-dialog.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,eAAe,EAAuB,MAAM,qBAAqB,CAAA;AAI1E,aAAK,IAAI,GAAG,SAAS,GAAG,MAAM,CAAA;AAE9B,MAAM,WAAW,KAAK,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,KAAK,CAmBjC,CAAA;AAED,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"lightbox-dialog.d.ts","sourceRoot":"","sources":["../../src/ebay-lightbox-dialog/lightbox-dialog.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,eAAe,EAAuB,MAAM,qBAAqB,CAAA;AAI1E,aAAK,IAAI,GAAG,SAAS,GAAG,MAAM,CAAA;AAE9B,MAAM,WAAW,KAAK,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,KAAK,CAkBjC,CAAA;AAED,eAAe,kBAAkB,CAAA"}

package/ebay-lightbox-dialog/lightbox-dialog.js

@@ -31,7 +31,7 @@ var ebay_dialog_base_1 = require("../ebay-dialog-base");
 var classPrefix = 'lightbox-dialog';
 var EbayLightboxDialog = function (_a) {
     var _b;
-    var open = _a.open, mode = _a.mode, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, _d = _a.onOpen, onOpen = _d === void 0 ? function () { } : _d, rest = __rest(_a, ["open", "mode", "onClose", "onOpen"]);
+    var open = _a.open, mode = _a.mode, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, rest = __rest(_a, ["open", "mode", "onClose"]);
     return (react_1.default.createElement(ebay_dialog_base_1.DialogBaseWithState, __assign({ buttonPosition: "right" }, rest, { classPrefix: classPrefix, onCloseBtnClick: onClose, onBackgroundClick: onClose, className: classnames_1.default(rest.className, classPrefix + "--mask-fade"), windowClass: classnames_1.default('lightbox-dialog__window--fade', (_b = {},
             _b[classPrefix + "__window--mini"] = mode === 'mini',
             _b)), open: open })));

package/ebay-listbox-button/README.md

@@ -28,7 +28,6 @@ yarn add @ebay/ui-core-react
 Name | Type | Stateful | Description
 --- | --- | --- | ---
 `value` | String | No |
-`onSelect` | `{ originalEvent, value, index }` | selected value and the index
 `aria-disabled` | boolean | No | Set to true if the field is disabled
 `aria-invalid` | boolean | No | Set to true if the field is invalid
 `fluid` | boolean | No | To make the listbox fluid
@@ -36,3 +35,11 @@ Name | Type | Stateful | Description
 `maxHeight` | string | No | example: 100px, 200px, 10rem
 `prefixId` | string | No | The id of an external element to use as the a11y prefix label for the listbox button.
 `floatingLabel` | string | No | Indicates that the listbox is a floating label type and renders it with a label
+
+## Callbacks
+
+| Name       | Type     | Required | Description           | Data                                                                         |
+|------------|----------|----------|-----------------------|------------------------------------------------------------------------------|
+| `onChange`  | Function | No       | triggered on change   | `(ChangeEvent, { index: number, selected: string[] , wasClicked: boolean })` |
+| `onCollapse` | Function | No       | triggered on collapse | `()`                                                            |
+| `onExpand`  | Function | No       | triggered on expand   | `()`                                                               |

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

@@ -1,11 +1,19 @@
-import { ComponentProps, FC, KeyboardEvent } from 'react';
-declare type EbayListboxButtonProps = Omit<ComponentProps<'input'>, 'onSelect'> & {
+import { ComponentProps, FC } from 'react';
+import { EbayChangeEventHandler } from '../common/event-utils/types';
+export declare type ChangeEventProps = {
+    index: number;
+    selected: string[];
+    wasClicked: boolean;
+};
+export declare type EbayListboxButtonProps = Omit<ComponentProps<'input'>, 'onChange'> & {
     borderless?: boolean;
     fluid?: boolean;
     maxHeight?: string;
     prefixId?: string;
     floatingLabel?: string;
-    onSelect?: (e: MouseEvent | KeyboardEvent, value: any, index: number) => void;
+    onChange?: EbayChangeEventHandler<HTMLButtonElement, ChangeEventProps>;
+    onCollapse?: () => void;
+    onExpand?: () => void;
 };
 declare const ListboxButton: FC<EbayListboxButtonProps>;
 export default ListboxButton;

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

@@ -1 +1 @@
-{"version":3,"file":"listbox-button.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox-button/listbox-button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEV,cAAc,EAAE,EAAE,EAAE,aAAa,EACpC,MAAM,OAAO,CAAA;AAOd,aAAK,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,GAAG;IACtE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACjF,CAAA;AAED,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,sBAAsB,CAgP7C,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"listbox-button.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox-button/listbox-button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEV,cAAc,EAAE,EAAE,EACrB,MAAM,OAAO,CAAA;AAGd,OAAO,EAAE,sBAAsB,EAAO,MAAM,6BAA6B,CAAA;AAIzE,oBAAY,gBAAgB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACvB,CAAA;AAED,oBAAY,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,sBAAsB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IACvE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAA;AAED,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,sBAAsB,CA6Q7C,CAAA;AAED,eAAe,aAAa,CAAA"}

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

@@ -50,7 +50,7 @@ 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 children = _a.children, name = _a.name, value = _a.value, borderless = _a.borderless, fluid = _a.fluid, className = _a.className, maxHeight = _a.maxHeight, prefixId = _a.prefixId, floatingLabel = _a.floatingLabel, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, _c = _a.onCollapse, onCollapse = _c === void 0 ? function () { } : _c, _d = _a.onExpand, onExpand = _d === void 0 ? function () { } : _d, rest = __rest(_a, ["children", "name", "value", "borderless", "fluid", "className", "maxHeight", "prefixId", "floatingLabel", "onChange", "onCollapse", "onExpand"]);
     var optionsContainerRef = react_1.useRef(null);
     var optionsParentContainerRef = react_1.useRef();
     var optionsByIndexRef = react_1.useRef(new Map());
@@ -71,14 +71,15 @@ var ListboxButton = function (_a) {
         };
     };
     // Get the default Selected value and set it in the state
-    var _c = getInitialSelectedOption(), selectedOptionFromValue = _c.option, initialSelectedOptionIndex = _c.index;
+    var _e = getInitialSelectedOption(), selectedOptionFromValue = _e.option, initialSelectedOptionIndex = _e.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];
+    var _f = react_1.useState(selectedOptionFromValue), selectedOption = _f[0], setSelectedOption = _f[1];
+    var _g = react_1.useState(initialSelectedOptionIndex), selectedIndex = _g[0], setSelectedIndex = _g[1];
     // Update the expanded status to the state
-    var _f = react_1.useState(false), expanded = _f[0], setExpanded = _f[1];
+    var _h = react_1.useState(), expanded = _h[0], setExpanded = _h[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];
+    var _j = react_1.useState(false), optionsOpened = _j[0], setOptionsOpened = _j[1];
+    var _k = react_1.useState(), wasClicked = _k[0], setWasClicked = _k[1];
     react_1.useEffect(function () {
         setSelectedOption(selectedOptionFromValue);
     }, [value]);
@@ -89,17 +90,34 @@ var ListboxButton = function (_a) {
         var optionsContainerEle = optionsContainerRef.current;
         optionsContainerEle.setAttribute("aria-activedescendant", getSelectedOption(index).id);
     };
+    var collapseListbox = function () {
+        setExpanded(false);
+        onCollapse();
+    };
+    var expandListbox = function () {
+        setExpanded(true);
+        onExpand();
+    };
+    var toggleListbox = function () {
+        if (expanded) {
+            collapseListbox();
+        }
+        else {
+            expandListbox();
+        }
+    };
     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);
+        collapseListbox();
         setActiveDescendant(index);
         buttonRef.current.focus();
-        onSelect(e, optionValue, index);
+        onChange(e, { index: index, selected: [getSelectedValueByIndex(selectedIndex)], wasClicked: wasClicked });
+        setWasClicked(false);
     };
     var reset = function () {
-        setExpanded(false);
+        collapseListbox();
         setSelectedOption(childrenArray[initialSelectedOptionIndex]);
     };
     var makeOptionActive = function (index) {
@@ -140,14 +158,14 @@ var ListboxButton = function (_a) {
         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);
+        toggleListbox();
         setOptionsOpened(true);
         focusOptionsContainer({ preventScroll: true });
     };
     var onButtonKeyup = function (e) {
         switch (e.key) {
             case 'Escape':
-                setExpanded(false);
+                collapseListbox();
                 break;
             case 'Enter':
                 focusOptionsContainer();
@@ -180,10 +198,14 @@ var ListboxButton = function (_a) {
                 }
                 break;
             case 'Enter':
-                setExpanded(false);
+                collapseListbox();
                 setTimeout(function () { return setSelectedOption(childrenArray[selectedIndex]); });
                 setTimeout(function () { return buttonRef.current.focus(); }, 0);
-                onSelect(e, getSelectedValueByIndex(selectedIndex), selectedIndex);
+                onChange(e, {
+                    index: selectedIndex,
+                    selected: [getSelectedValueByIndex(selectedIndex)],
+                    wasClicked: wasClicked
+                });
                 break;
             case 'Esc':
             case 'Escape':
@@ -212,7 +234,7 @@ var ListboxButton = function (_a) {
     });
     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, 
+        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: "btn__cell" },
@@ -224,8 +246,11 @@ var ListboxButton = function (_a) {
                 react_1.default.createElement("div", { className: "listbox-button__options", role: "listbox", tabIndex: expanded ? 0 : -1, 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);
+                    onMouseDown: function (e) {
+                        e.preventDefault();
+                        setWasClicked(true);
+                    }, onBlur: function () {
+                        collapseListbox();
                         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) {

package/ebay-menu/README.md

@@ -26,15 +26,16 @@ 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`
+`baseEl` | String | No | Container can be `span` (default) or `div`
+`onKeydown` | Function | No | props: (e: event, { index: number, checked: number[], checkedValues?: string[] })
+`onSelect` | Function | No | props: (e: event, { index: number }), triggered on item clicked (not for type `radio`/`checkbox`)
+`onChange` | Function | No | props: (e: event, { index: number, checked: number[], checkedValues: string[]), triggered on item `checked` change, (for type `radio`/`checkbox` only)
 
 ## EbayMenuItem Props
 
 Name | Type | Required | Description
 --- | --- | --- | ---
-`value` | String | No | for type `radio`, `checkbox`: the value to use with callbacks for `checked[]`
+`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

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

@@ -1,6 +1,6 @@
 import { ComponentProps, FC } from 'react';
 import { EbayMenuType } from './types';
-export declare type MenuItemProps = Omit<ComponentProps<'div'>, 'onKeyDown'> & {
+export declare type MenuItemProps = ComponentProps<'div'> & {
     type?: EbayMenuType;
     focused?: boolean;
     tabIndex?: number;

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

@@ -1 +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;AAIpE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEtC,oBAAY,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,GAAG;IACnE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,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;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,aAAa,CAyCnC,CAAA;AAUD,eAAe,YAAY,CAAA"}
+{"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;AAIpE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEtC,oBAAY,aAAa,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAChD,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,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;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,aAAa,CAyCnC,CAAA;AAUD,eAAe,YAAY,CAAA"}

package/ebay-menu/menu.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { MenuProps } from './index';
-declare const EbayMenu: FC<MenuProps>;
-export default EbayMenu;
+import React from 'react';
+import { EbayMenuProps } from './index';
+declare const _default: React.ForwardRefExoticComponent<Pick<EbayMenuProps, "slot" | "style" | "title" | "type" | "key" | "className" | "placeholder" | "children" | "dir" | "checked" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "forwardedRef" | "baseEl" | "priority" | "autofocus"> & React.RefAttributes<React.FC<EbayMenuProps>>>;
+export default _default;
 //# 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,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"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/ebay-menu/menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAA;AAKd,OAAO,EAA+B,aAAa,EAAE,MAAM,SAAS,CAAA;;AA8JpE,wBAAuC"}