@ebay/ui-core-react 4.2.5 → 5.0.0

package/README.md

@@ -6,7 +6,7 @@ eBayUI React components
 
 ### Requirements
 
-* [Node.js](https://nodejs.org/en/) (v16.14+)
+* [Node.js](https://nodejs.org/en/) (v18.13)
 * [React](https://reactjs.org/) (v16.8+)
 * [eBay Skin](https://ebay.github.io/skin/) (v16)
 
@@ -125,11 +125,13 @@ But we suggest to use polyfills automatically by editing your `.babelrc`:
                 "useBuiltIns": "usage",
                 "corejs": "3",
                 "targets": {
-                    "chrome": "63",
-                    "safari": "12",
-                    "ios": "12",
-                    "edge": "18",
-                    "ie": "11"
+                    "Chrome": 87,
+                    "Firefox": 78,
+                    "Safari": 11,
+                    "Edge": 103,
+                    "Opera": 89,
+                    "ChromeAndroid": 83,
+                    "ios_saf": 12
                 }
             }
         ]

package/common/event-utils/index.d.ts

@@ -1,11 +1,14 @@
+import React from 'react';
+import { Key } from './types';
 declare type Callback = () => void;
-export declare function handleEnterKeydown(e: KeyboardEvent, callback: Callback): void;
-export declare function handleActionKeydown(e: KeyboardEvent, callback: Callback): void;
-export declare function handleEscapeKeydown(e: KeyboardEvent, callback: Callback): void;
-export declare function handleUpDownArrowsKeydown(e: KeyboardEvent, callback: Callback): void;
-export declare function handleLeftRightArrowsKeydown(e: KeyboardEvent, callback: Callback): void;
-export declare function handleTextInput(e: KeyboardEvent, callback: Callback): void;
-export declare function preventDefaultIfHijax(e: KeyboardEvent, hijax: boolean): void;
+export declare function handleEnterKeydown(e: React.KeyboardEvent, callback: Callback): void;
+export declare function handleActionKeydown(e: React.KeyboardEvent, callback: Callback): void;
+export declare function isActionKey(key: Key): boolean;
+export declare function handleEscapeKeydown(e: React.KeyboardEvent, callback: Callback): void;
+export declare function handleUpDownArrowsKeydown(e: React.KeyboardEvent, callback: Callback): void;
+export declare function handleLeftRightArrowsKeydown(e: React.KeyboardEvent, callback: Callback): void;
+export declare function handleTextInput(e: React.KeyboardEvent, callback: Callback): void;
+export declare function preventDefaultIfHijax(e: React.KeyboardEvent, hijax: boolean): void;
 declare type Handler = (e: KeyboardEvent) => void;
 export declare function addEventListener(_: unknown, handler: Handler): void;
 export declare function removeEventListener(_: unknown, handler: Handler): void;

package/common/event-utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/common/event-utils/index.ts"],"names":[],"mappings":"AAMA,aAAK,QAAQ,GAAG,MAAM,IAAI,CAAA;AAqB1B,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAE7E;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAE9E;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAE9E;AAED,wBAAgB,yBAAyB,CAAC,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAEpF;AAED,wBAAgB,4BAA4B,CAAC,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAEvF;AAGD,wBAAgB,eAAe,CAAC,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAwB1E;AAED,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAI5E;AAED,aAAK,OAAO,GAAG,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAA;AAIzC,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAKnE;AACD,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAKtE;AACD,wBAAgB,YAAY,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI,CAanD;AAED,wBAAgB,SAAS,CAAC,kBAAkB,EAAE,OAAkB,EAAE,iBAAiB,EAAE,OAAO,OAC7E,aAAa,KAAG,IAAI,CAMlC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/common/event-utils/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,GAAG,EAAE,MAAM,SAAS,CAAA;AAE7B,aAAK,QAAQ,GAAG,MAAM,IAAI,CAAA;AAqB1B,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAInF;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAIpF;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,CAE7C;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAEpF;AAED,wBAAgB,yBAAyB,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAE1F;AAED,wBAAgB,4BAA4B,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAE7F;AAGD,wBAAgB,eAAe,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAwBhF;AAED,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAIlF;AAED,aAAK,OAAO,GAAG,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAA;AAIzC,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAKnE;AACD,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAKtE;AACD,wBAAgB,YAAY,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI,CAanD;AAED,wBAAgB,SAAS,CAAC,kBAAkB,EAAE,OAAkB,EAAE,iBAAiB,EAAE,OAAO,OAC7E,aAAa,KAAG,IAAI,CAMlC"}

package/common/event-utils/index.js

@@ -3,7 +3,7 @@
 * Based on https://github.com/eBay/ebayui-core/edit/master/src/common/event-utils/index.js
 */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.wrapEvent = exports.handleResize = exports.removeEventListener = exports.addEventListener = exports.preventDefaultIfHijax = exports.handleTextInput = exports.handleLeftRightArrowsKeydown = exports.handleUpDownArrowsKeydown = exports.handleEscapeKeydown = exports.handleActionKeydown = exports.handleEnterKeydown = void 0;
+exports.wrapEvent = exports.handleResize = exports.removeEventListener = exports.addEventListener = exports.preventDefaultIfHijax = exports.handleTextInput = exports.handleLeftRightArrowsKeydown = exports.handleUpDownArrowsKeydown = exports.handleEscapeKeydown = exports.isActionKey = exports.handleActionKeydown = exports.handleEnterKeydown = void 0;
 /**
  * Generic keydown handler used by more specific cases
  * @param {Array} keyList: List of acceptable keys
@@ -24,13 +24,21 @@ function handleNotKeydown(keyList, e, callback) {
     }
 }
 function handleEnterKeydown(e, callback) {
-    handleKeydown(['Enter'], e, callback);
+    if (e.key === 'Enter') {
+        callback();
+    }
 }
 exports.handleEnterKeydown = handleEnterKeydown;
 function handleActionKeydown(e, callback) {
-    handleKeydown([' ', 'Enter'], e, callback);
+    if (isActionKey(e.key)) {
+        callback();
+    }
 }
 exports.handleActionKeydown = handleActionKeydown;
+function isActionKey(key) {
+    return [' ', 'Enter'].includes(key);
+}
+exports.isActionKey = isActionKey;
 function handleEscapeKeydown(e, callback) {
     handleKeydown(['Esc', 'Escape'], e, callback);
 }

package/common/event-utils/types.d.ts

@@ -1,6 +1,13 @@
+import { ChangeEvent, KeyboardEvent, MouseEvent, FocusEvent, SyntheticEvent } from 'react';
 declare type ModifierKeys = 'Alt' | 'AltGraph' | 'Control' | 'Shift' | 'CapsLock' | 'Meta';
 declare type NavigationKeys = 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'Enter' | 'Tab' | ' ' | 'Escape' | 'End' | 'Home' | 'PageDown' | 'PageUp';
 declare type NavigationKeysEdge = 'Down' | 'Left' | 'Right' | 'Up' | 'Esc';
 export declare type Key = ModifierKeys | NavigationKeys | NavigationKeysEdge;
+declare type BaseEventHandler<E extends SyntheticEvent<any>, P> = (event: E, props?: P) => void;
+export declare type EbayEventHandler<ElementType = Element, PropsObject = Record<string, any>> = BaseEventHandler<SyntheticEvent<ElementType>, PropsObject>;
+export declare type EbayMouseEventHandler<ElementType = Element, PropsObject = Record<string, any>> = BaseEventHandler<MouseEvent<ElementType>, PropsObject>;
+export declare type EbayKeyboardEventHandler<ElementType = Element, PropsObject = Record<string, any>> = BaseEventHandler<KeyboardEvent<ElementType>, PropsObject>;
+export declare type EbayChangeEventHandler<ElementType = Element, PropsObject = Record<string, any>> = BaseEventHandler<ChangeEvent<ElementType>, PropsObject>;
+export declare type EbayFocusEventHandler<ElementType = Element, PropsObject = Record<string, any>> = BaseEventHandler<FocusEvent<ElementType>, PropsObject>;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/common/event-utils/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/common/event-utils/types.ts"],"names":[],"mappings":"AAAA,aAAK,YAAY,GAAG,KAAK,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,CAAA;AAElF,aAAK,cAAc,GAAG,WAAW,GAAG,WAAW,GAAG,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,GAAG,GAAG,QAAQ,GACvG,KAAK,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAA;AAC5C,aAAK,kBAAkB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,KAAK,CAAA;AAMlE,oBAAY,GAAG,GAAG,YAAY,GAAG,cAAc,GAAG,kBAAkB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/common/event-utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE1F,aAAK,YAAY,GAAG,KAAK,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,CAAA;AAElF,aAAK,cAAc,GAAG,WAAW,GAAG,WAAW,GAAG,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,GAAG,GAAG,QAAQ,GACvG,KAAK,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAA;AAC5C,aAAK,kBAAkB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,KAAK,CAAA;AAMlE,oBAAY,GAAG,GAAG,YAAY,GAAG,cAAc,GAAG,kBAAkB,CAAA;AAEpE,aAAK,gBAAgB,CAAC,CAAC,SAAS,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;AAExF,oBAAY,gBAAgB,CAAC,WAAW,GAAG,OAAO,EAAE,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IACjF,gBAAgB,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC;AAC/D,oBAAY,qBAAqB,CAAC,WAAW,GAAG,OAAO,EAAE,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IACtF,gBAAgB,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC;AAC3D,oBAAY,wBAAwB,CAAC,WAAW,GAAG,OAAO,EAAE,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IACzF,gBAAgB,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC;AAC9D,oBAAY,sBAAsB,CAAC,WAAW,GAAG,OAAO,EAAE,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IACvF,gBAAgB,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC;AAC5D,oBAAY,qBAAqB,CAAC,WAAW,GAAG,OAAO,EAAE,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IACtF,gBAAgB,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC"}

package/common/event-utils/types.js

@@ -1,2 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+/*
+    type ClipboardEventHandler<T = Element> = EventHandler<ClipboardEvent<T>>;
+    type CompositionEventHandler<T = Element> = EventHandler<CompositionEvent<T>>;
+    type DragEventHandler<T = Element> = EventHandler<DragEvent<T>>;
+    type FormEventHandler<T = Element> = EventHandler<FormEvent<T>>;
+    type TouchEventHandler<T = Element> = EventHandler<TouchEvent<T>>;
+    type PointerEventHandler<T = Element> = EventHandler<PointerEvent<T>>;
+    type UIEventHandler<T = Element> = EventHandler<UIEvent<T>>;
+    type WheelEventHandler<T = Element> = EventHandler<WheelEvent<T>>;
+    type AnimationEventHandler<T = Element> = EventHandler<AnimationEvent<T>>;
+    type TransitionEventHandler<T = Element> = EventHandler<TransitionEvent<T>>;
+*/

package/common/floating-label-utils/hooks.d.ts

@@ -10,6 +10,7 @@ declare type FloatingLabelHookProps = {
     className?: string;
     placeholder?: string;
     invalid?: boolean;
+    onMount?: () => void;
 };
 declare type FloatingLabelHookReturn = {
     label: ReactNode;
@@ -21,6 +22,6 @@ declare type FloatingLabelHookReturn = {
     ref: InputRef;
     placeholder: string;
 };
-export declare function useFloatingLabel({ ref, inputId, className, disabled, label, inputSize, inputValue, placeholder, invalid }: FloatingLabelHookProps): FloatingLabelHookReturn;
+export declare function useFloatingLabel({ ref, inputId, className, disabled, label, inputSize, inputValue, placeholder, invalid, onMount }: FloatingLabelHookProps): FloatingLabelHookReturn;
 export {};
 //# sourceMappingURL=hooks.d.ts.map

package/common/floating-label-utils/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/common/floating-label-utils/hooks.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA+B,EAAE,EAAE,SAAS,EAAe,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAGjH,aAAK,QAAQ,GAAG,SAAS,CAAC,iBAAiB,GAAG,mBAAmB,GAAG,gBAAgB,CAAC,GAAG,GAAG,CAAA;AAC3F,aAAK,sBAAsB,GAAG;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAChC,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAA;AAED,aAAK,uBAAuB,GAAG;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,EAAE,CAAC;QAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IACxC,GAAG,EAAE,QAAQ,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACvB,CAAA;AA4CD,wBAAgB,gBAAgB,CAAC,EAC7B,GAAG,EACH,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAK,EACL,SAAS,EACT,UAAU,EACV,WAAW,EACX,OAAO,EACV,EAAG,sBAAsB,GAAG,uBAAuB,CA2EnD"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/common/floating-label-utils/hooks.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA+B,EAAE,EAAE,SAAS,EAAe,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAGjH,aAAK,QAAQ,GAAG,SAAS,CAAC,iBAAiB,GAAG,mBAAmB,GAAG,gBAAgB,CAAC,GAAG,GAAG,CAAA;AAC3F,aAAK,sBAAsB,GAAG;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAChC,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAA;AAED,aAAK,uBAAuB,GAAG;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,EAAE,CAAC;QAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IACxC,GAAG,EAAE,QAAQ,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACvB,CAAA;AA4CD,wBAAgB,gBAAgB,CAAC,EAC7B,GAAG,EACH,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAK,EACL,SAAS,EACT,UAAU,EACV,WAAW,EACX,OAAO,EACP,OAAkB,EACrB,EAAG,sBAAsB,GAAG,uBAAuB,CA4EnD"}

package/common/floating-label-utils/hooks.js

@@ -60,12 +60,12 @@ var getPlaceholder = function (element) {
 };
 function useFloatingLabel(_a) {
     var _b;
-    var ref = _a.ref, inputId = _a.inputId, className = _a.className, disabled = _a.disabled, label = _a.label, inputSize = _a.inputSize, inputValue = _a.inputValue, placeholder = _a.placeholder, invalid = _a.invalid;
+    var ref = _a.ref, inputId = _a.inputId, className = _a.className, disabled = _a.disabled, label = _a.label, inputSize = _a.inputSize, inputValue = _a.inputValue, placeholder = _a.placeholder, invalid = _a.invalid, _c = _a.onMount, onMount = _c === void 0 ? function () { } : _c;
     var _internalInputRef = react_1.useRef(null);
     var inputRef = function () { return ref || _internalInputRef; };
-    var _c = react_1.useState(Boolean(inputValue)), isFloating = _c[0], setFloating = _c[1];
-    var _d = react_1.useState(false), shouldAnimate = _d[0], setAnimate = _d[1];
-    var _e = react_1.useState(false), isFocused = _e[0], setFocused = _e[1];
+    var _d = react_1.useState(Boolean(inputValue)), isFloating = _d[0], setFloating = _d[1];
+    var _e = react_1.useState(false), shouldAnimate = _e[0], setAnimate = _e[1];
+    var _f = react_1.useState(false), isFocused = _f[0], setFocused = _f[1];
     var selectFirstOptionText = react_1.useRef("");
     var onBlur = function () {
         setAnimate(true);
@@ -87,6 +87,7 @@ function useFloatingLabel(_a) {
         }
         selectFirstOptionText.current = getPlaceholder((_a = inputRef()) === null || _a === void 0 ? void 0 : _a.current);
         setPlaceholder((_b = inputRef()) === null || _b === void 0 ? void 0 : _b.current, "");
+        onMount();
     }, []);
     react_1.useEffect(function () {
         var _a, _b;

package/ebay-alert-dialog/README.md

@@ -22,8 +22,9 @@ Name | Type | Stateful | Required | Description
 ## Events
 
 Event | Data | Description
---- | --- | ---
-`onConfirm` |  | triggered when confirm button is clicked
+--- |------| ---
+`onOpen` | () | triggered when dialog is opened
+`onConfirm` | () | triggered when confirm button is clicked
 
 ## EbayDialogHeader
 Will render a header content for the dialog. Will always render the header element even if this is not present

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../src/ebay-alert-dialog/alert-dialog.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAU,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,eAAe,EAAyC,MAAM,qBAAqB,CAAA;AAK5F,MAAM,WAAW,KAAK,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,KAAK,CAsC9B,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../src/ebay-alert-dialog/alert-dialog.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAU,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,eAAe,EAAyC,MAAM,qBAAqB,CAAA;AAK5F,MAAM,WAAW,KAAK,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,KAAK,CAqC9B,CAAA;AAED,eAAe,eAAe,CAAA"}

package/ebay-alert-dialog/alert-dialog.js

@@ -50,7 +50,7 @@ var ebay_dialog_base_1 = require("../ebay-dialog-base");
 var ebay_button_1 = require("../ebay-button");
 var classPrefix = 'alert-dialog';
 var EbayAlertDialog = function (_a) {
-    var _b = _a.a11yCloseText, a11yCloseText = _b === void 0 ? 'Close Dialog' : _b, confirmText = _a.confirmText, _c = _a.onOpen, onOpen = _c === void 0 ? function () { } : _c, _d = _a.onConfirm, onConfirm = _d === void 0 ? function () { } : _d, rest = __rest(_a, ["a11yCloseText", "confirmText", "onOpen", "onConfirm"]);
+    var _b = _a.a11yCloseText, a11yCloseText = _b === void 0 ? 'Close Dialog' : _b, confirmText = _a.confirmText, _c = _a.onConfirm, onConfirm = _c === void 0 ? function () { } : _c, rest = __rest(_a, ["a11yCloseText", "confirmText", "onConfirm"]);
     var confirmBtnRef = react_1.useRef(null);
     var confirmId = 'alert-dialog-confirm';
     var mainId = 'alert-dialog-main';

package/ebay-breadcrumbs/README.md

@@ -33,7 +33,7 @@ Name | Type | Stateful | Description | Data
 --- | --- | --- | --- | ---
 `a11yHeadingText` | String | No | heading for breadcrumb which will be clipped (default: 'Page navigation')
 `a11yHeadingTag` | String | No | heading tag for breadcrumb (default: `h2`)
-`onSelect` | Function | No | click breadcrumb items | `{ originalEvent, el }`
+`onSelect` | Function | No | click breadcrumb items | `(event: MouseEvent | KeyboardEvent)`
 
 All other props will be applied to the main wrapper (`nav`) element.
 

package/ebay-breadcrumbs/breadcrumbs.d.ts

@@ -1,5 +1,6 @@
 import { ComponentProps, FC, ReactNode } from 'react';
-declare type BreadcrumbProps = ComponentProps<'div'> & {
+import { EbayEventHandler } from '../common/event-utils/types';
+declare type BreadcrumbProps = Omit<ComponentProps<'div'>, 'onSelect'> & {
     /**
      * Breadcrumbs expects `<EbayBreadcrumbItem/>` as children.
      * Other elements will not work.
@@ -10,7 +11,7 @@ declare type BreadcrumbProps = ComponentProps<'div'> & {
     id?: string;
     a11yHeadingTag?: keyof JSX.IntrinsicElements;
     a11yHeadingText?: string;
-    onSelect?: (event: MouseEvent | KeyboardEvent, target: HTMLElement) => void;
+    onSelect?: EbayEventHandler<HTMLElement>;
 };
 declare const Breadcrumbs: FC<BreadcrumbProps>;
 export default Breadcrumbs;

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/ebay-breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA0B,cAAc,EAAE,EAAE,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAA;AAGlG,aAAK,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3C;;;;;OAKG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;IAC7C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,aAAa,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC/E,CAAA;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,eAAe,CAwCpC,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/ebay-breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA0B,cAAc,EAAE,EAAE,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAA;AAElG,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAE9D,aAAK,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7D;;;;;OAKG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;IAC7C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;CAC5C,CAAA;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,eAAe,CAwCpC,CAAA;AAED,eAAe,WAAW,CAAA"}

package/ebay-breadcrumbs/breadcrumbs.js

@@ -63,7 +63,7 @@ var Breadcrumbs = function (_a) {
                 isLastItem: isLastItem,
                 href: href,
                 children: children,
-                onClick: function (event) { return onSelect(event, event.target); }
+                onClick: function (event) { return onSelect(event); }
             };
             return react_1.cloneElement(item, itemProps);
         }))));

package/ebay-button/README.md

@@ -56,7 +56,7 @@ Name | Type | Stateful | Required | Description | Data
 `truncate` | Boolean | No | No | will truncate the text of the button onto a single line, and adds an ellipsis, when the button's text overflows
 `borderless` | Boolean | No | No | shows button without border
 `fixedHeight` | Boolean | No | No | fixes the height based on `size`
-`onClick` | Function | - | No | click or action key pressed (`Space` / `Enter`)
-`onEscape` | Function | - | No | `Esc`-key pressed
-`onFocus` | Function | - | No | triggered on focus
-`onBlur` | Function | - | No | triggered on blur
+`onClick` | Function | - | No | click or action key pressed (`Space` / `Enter`) | `(event: MouseEvent | KeyboardEvent)`
+`onEscape` | Function | - | No | `Esc`-key pressed | `(event: KeyboardEvent)`
+`onFocus` | Function | - | No | triggered on focus | `(event: FocusEvent)`
+`onBlur` | Function | - | No | triggered on blur | `(event: FocusEvent)`

package/ebay-carousel/carousel.js

@@ -52,7 +52,7 @@ var helpers_1 = require("./helpers");
 var debounce_1 = require("../common/debounce");
 // TO-DO:
 // Image slides
-// Auto play
+// Auto play (+ onPlay/onPause callbacks)
 var EbayCarousel = function (_a) {
     var _b = _a.gap, gap = _b === void 0 ? 16 : _b, _c = _a.index, index = _c === void 0 ? 0 : _c, _itemsPerSlide = _a.itemsPerSlide, a11yPreviousText = _a.a11yPreviousText, a11yNextText = _a.a11yNextText, _d = _a.onScroll, onScroll = _d === void 0 ? function () { } : _d, _e = _a.onNext, onNext = _e === void 0 ? function () { } : _e, _f = _a.onPrevious, onPrevious = _f === void 0 ? function () { } : _f, _g = _a.onSlide, onSlide = _g === void 0 ? function () { } : _g, className = _a.className, children = _a.children, rest = __rest(_a, ["gap", "index", "itemsPerSlide", "a11yPreviousText", "a11yNextText", "onScroll", "onNext", "onPrevious", "onSlide", "className", "children"]);
     var _h = react_1.useState(index), activeIndex = _h[0], setActiveIndex = _h[1];

package/ebay-checkbox/README.md

@@ -32,15 +32,16 @@ import { EbayLabel } from '@ebay/ui-core-react/ebay-field';
 
 ## Attributes
 
-Name | Type | Stateful | Description
---- | --- | --- | ---
-`size` | String | No | No | Either `large` or `regular` (default). Sets the checkbox icon size. For mweb this should be set to `large`. (Note: The dimensions of the radio will not change, but only the icon)
-`disabled` | Boolean | No |
-`checked` | Boolean | No | No | indicates the checked value of the input element, required for a controlled component.
-`defaultChecked` | Boolean | No | No | indicates the default checked input element value. Use when the component is not controlled.
-`onChange` | Function | Callback fired when `checked` is changed, with param `{ originalEvent, value }`
-`onFocus` | Function | Callback fired when button is focused, with param `{ originalEvent, value }`
-
-It supports all the events supported by an input element (e.g. `onChange`)
+| Name             | Type     | Stateful | Description                                                                                                                                                                        | Data                                                          |
+|------------------|----------|----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------|
+| `size`           | String   | No       | Either `large` or `regular` (default). Sets the checkbox icon size. For mweb this should be set to `large`. (Note: The dimensions of the radio will not change, but only the icon) |
+| `disabled`       | Boolean  | No       |                                                                                                                                                                                    |
+| `checked`        | Boolean  | No       | indicates the checked value of the input element, required for a controlled component.                                                                                             |
+| `defaultChecked` | Boolean  | No       | indicates the default checked input element value. Use when the component is not controlled.                                                                                       |
+| `onChange`       | Function | -        | Callback fired on change                                                                                                                                                           | `(event: ChangeEvent, { value: string, checked: Boolean })`   |                                                                                                                                                                                    |
+| `onFocus`        | Function | -        | Callback fired when button is focused                                                                                                                                              | `(event: FocusEvent, { value: string, checked: Boolean })`    |                                                                                                                                                                                    |
+| `onKeyDown`      | Function | -        | Callback fired when key is pressed                                                                                                                                                 | `(event: KeyboardEvent, { value: string, checked: Boolean })` |                                                                                                                                                                                    |
+
+It supports all the events supported by an input element (e.g. `onClick`)
 Note: For this component, `className`/`style` are applied to the root tag, while all other HTML attributes are applied to the `input` tag.
 

package/ebay-checkbox/checkbox.d.ts

@@ -1,9 +1,21 @@
-import React, { FC, ChangeEvent, ComponentProps } from 'react';
+import React, { ComponentProps, FC } from 'react';
+import { EbayChangeEventHandler, EbayFocusEventHandler, EbayKeyboardEventHandler } from '../common/event-utils/types';
 declare type Size = 'default' | 'large';
-declare type InputProps = Omit<ComponentProps<'input'>, 'size' | 'onChange'>;
+declare type InputProps = Omit<ComponentProps<'input'>, 'size' | 'onChange' | 'onFocus' | 'onKeyDown'>;
 declare type EbayCheckboxProps = {
     size?: Size;
-    onChange?: (e: ChangeEvent<HTMLInputElement>, value: string | number, checked: boolean) => void;
+    onChange?: EbayChangeEventHandler<HTMLInputElement, {
+        value: string | number;
+        checked: boolean;
+    }>;
+    onFocus?: EbayFocusEventHandler<HTMLInputElement, {
+        value: string | number;
+        checked: boolean;
+    }>;
+    onKeyDown?: EbayKeyboardEventHandler<HTMLInputElement, {
+        value: string | number;
+        checked: boolean;
+    }>;
     inputRef?: React.LegacyRef<HTMLInputElement>;
 };
 declare const EbayCheckbox: FC<InputProps & EbayCheckboxProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/ebay-checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAY,WAAW,EAAE,cAAc,EAAgB,MAAM,OAAO,CAAA;AAMtF,aAAK,IAAI,GAAG,SAAS,GAAG,OAAO,CAAA;AAC/B,aAAK,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC,CAAA;AACpE,aAAK,iBAAiB,GAAG;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;CAChD,CAAA;AAID,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,UAAU,GAAG,iBAAiB,CAwDpD,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/ebay-checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA6B,cAAc,EAAE,EAAE,EAAuC,MAAM,OAAO,CAAA;AAKjH,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAA;AAErH,aAAK,IAAI,GAAG,SAAS,GAAG,OAAO,CAAA;AAC/B,aAAK,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,CAAC,CAAA;AAC9F,aAAK,iBAAiB,GAAG;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,sBAAsB,CAAC,gBAAgB,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAClG,OAAO,CAAC,EAAE,qBAAqB,CAAC,gBAAgB,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAChG,SAAS,CAAC,EAAE,wBAAwB,CAAC,gBAAgB,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IACrG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;CAChD,CAAA;AAID,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,UAAU,GAAG,iBAAiB,CAmEpD,CAAA;AAED,eAAe,YAAY,CAAA"}

package/ebay-checkbox/checkbox.js

@@ -51,13 +51,18 @@ var ebay_field_1 = require("../ebay-field");
 var component_utils_1 = require("../common/component-utils");
 var isControlled = function (checked) { return typeof checked !== 'undefined'; };
 var EbayCheckbox = function (_a) {
-    var id = _a.id, _b = _a.size, size = _b === void 0 ? 'default' : _b, className = _a.className, style = _a.style, checked = _a.checked, _c = _a.defaultChecked, defaultChecked = _c === void 0 ? false : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, children = _a.children, inputRef = _a.inputRef, rest = __rest(_a, ["id", "size", "className", "style", "checked", "defaultChecked", "onChange", "children", "inputRef"]);
-    var _e = react_1.useState(defaultChecked), isChecked = _e[0], setChecked = _e[1];
+    var id = _a.id, _b = _a.size, size = _b === void 0 ? 'default' : _b, className = _a.className, style = _a.style, checked = _a.checked, _c = _a.defaultChecked, defaultChecked = _c === void 0 ? false : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, _e = _a.onFocus, onFocus = _e === void 0 ? function () { } : _e, _f = _a.onKeyDown, onKeyDown = _f === void 0 ? function () { } : _f, children = _a.children, inputRef = _a.inputRef, rest = __rest(_a, ["id", "size", "className", "style", "checked", "defaultChecked", "onChange", "onFocus", "onKeyDown", "children", "inputRef"]);
+    var _g = react_1.useState(defaultChecked), isChecked = _g[0], setChecked = _g[1];
     var handleChange = function (e) {
         var input = e.target;
-        onChange(e, input === null || input === void 0 ? void 0 : input.value, input === null || input === void 0 ? void 0 : input.checked);
+        onChange(e, { value: input === null || input === void 0 ? void 0 : input.value, checked: Boolean(input === null || input === void 0 ? void 0 : input.checked) });
         setChecked(input === null || input === void 0 ? void 0 : input.checked);
     };
+    var handleFocus = function (e) { var _a, _b; return onFocus(e, { value: (_a = e.target) === null || _a === void 0 ? void 0 : _a.value, checked: Boolean((_b = e.target) === null || _b === void 0 ? void 0 : _b.checked) }); };
+    var handleKeyDown = function (e) {
+        var input = e.target;
+        onKeyDown(e, { value: input.value, checked: Boolean(input.checked) });
+    };
     var containerClass = classnames_1.default('checkbox', className, { 'checkbox--large': size === 'large' });
     var iconChecked = size === 'large' ?
         react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "checkboxChecked24", className: "checkbox__checked" }) :
@@ -68,7 +73,7 @@ var EbayCheckbox = function (_a) {
     var ebayLabel = component_utils_1.findComponent(children, ebay_field_1.EbayLabel);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("span", { className: containerClass, style: __assign(__assign({}, style), { alignItems: 'center' }) },
-            react_1.default.createElement("input", __assign({}, rest, { id: id, className: "checkbox__control", type: "checkbox", checked: isControlled(checked) ? checked : isChecked, onChange: handleChange, ref: inputRef })),
+            react_1.default.createElement("input", __assign({}, rest, { id: id, className: "checkbox__control", type: "checkbox", checked: isControlled(checked) ? checked : isChecked, onChange: handleChange, onFocus: handleFocus, onKeyDown: handleKeyDown, ref: inputRef })),
             react_1.default.createElement("span", { className: "checkbox__icon", hidden: true },
                 iconChecked,
                 iconUnChecked)),

package/ebay-confirm-dialog/README.md

@@ -20,12 +20,12 @@ Name | Type | Stateful | Required | Description
 `rejectText`  | String  | No       | Yes      | Text for reject button  |
 `animated` | Boolean | Yes | No | Renders the dialog with an animation. Note that the dialog will always be present in the DOM
 
-## Events
-
-Event | Data | Description
---- | --- | ---
-`onConfirm` |  | Triggered when confirm button is clicked
-`onReject` |  | Trigered when reject button is clicked
+## Callbacks
+Event | Arguments | Description
+--- |-----------| ---
+`onOpen` | (Event)   | Triggered when dialog is opened
+`onConfirm` | (Event)   | Triggered when confirm button is clicked
+`onReject` | (Event)   | Trigered when reject button is clicked
 
 ## EbayDialogHeader
 Will render a header content for the dialog. Will always render the header element even if this is not present

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

@@ -4,7 +4,6 @@ export interface Props<T = any> extends DialogBaseProps<T> {
     open?: boolean;
     confirmText: string;
     rejectText: string;
-    onOpen?: () => void;
     onReject?: () => void;
     onConfirm?: () => void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"confirm-dialog.d.ts","sourceRoot":"","sources":["../../src/ebay-confirm-dialog/confirm-dialog.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAU,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,eAAe,EAAyC,MAAM,qBAAqB,CAAA;AAK5F,MAAM,WAAW,KAAK,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACtD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,KAAK,CA8ChC,CAAA;AAED,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"confirm-dialog.d.ts","sourceRoot":"","sources":["../../src/ebay-confirm-dialog/confirm-dialog.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAU,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,eAAe,EAAyC,MAAM,qBAAqB,CAAA;AAK5F,MAAM,WAAW,KAAK,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACtD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,KAAK,CA6ChC,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/ebay-confirm-dialog/confirm-dialog.js

@@ -50,7 +50,7 @@ var ebay_dialog_base_1 = require("../ebay-dialog-base");
 var ebay_button_1 = require("../ebay-button");
 var classPrefix = 'confirm-dialog';
 var EbayConfirmDialog = function (_a) {
-    var _b = _a.a11yCloseText, a11yCloseText = _b === void 0 ? 'Close Dialog' : _b, confirmText = _a.confirmText, rejectText = _a.rejectText, _c = _a.onOpen, onOpen = _c === void 0 ? function () { } : _c, _d = _a.onReject, onReject = _d === void 0 ? function () { } : _d, _e = _a.onConfirm, onConfirm = _e === void 0 ? function () { } : _e, rest = __rest(_a, ["a11yCloseText", "confirmText", "rejectText", "onOpen", "onReject", "onConfirm"]);
+    var _b = _a.a11yCloseText, a11yCloseText = _b === void 0 ? 'Close Dialog' : _b, confirmText = _a.confirmText, rejectText = _a.rejectText, _c = _a.onReject, onReject = _c === void 0 ? function () { } : _c, _d = _a.onConfirm, onConfirm = _d === void 0 ? function () { } : _d, rest = __rest(_a, ["a11yCloseText", "confirmText", "rejectText", "onReject", "onConfirm"]);
     var confirmBtnRef = react_1.useRef(null);
     var confirmId = 'confirm-dialog-confirm';
     var mainId = 'confirm-dialog-main';

package/ebay-dialog-base/components/dialogBase.d.ts

@@ -1,4 +1,4 @@
-import { FC, HTMLProps, RefObject, ReactElement, MouseEventHandler, ReactNode } from 'react';
+import { FC, HTMLProps, RefObject, ReactElement, MouseEventHandler, ReactNode, KeyboardEventHandler } from 'react';
 import { TransitionElement } from './animation';
 export declare type WindowType = 'compact';
 declare type ClassPrefix = 'fullscreen-dialog' | 'lightbox-dialog' | 'panel-dialog' | 'drawer-dialog' | 'toast-dialog' | 'alert-dialog' | 'confirm-dialog' | 'snackbar-dialog';
@@ -17,7 +17,8 @@ export interface DialogBaseProps<T> extends HTMLProps<T> {
     buttonPosition?: ButtonPosition;
     ariaLabelledby?: string;
     a11yCloseText?: string;
-    onCloseBtnClick?: MouseEventHandler;
+    onOpen?: () => void;
+    onCloseBtnClick?: MouseEventHandler & KeyboardEventHandler;
     onBackgroundClick?: MouseEventHandler;
     mainId?: string;
     ignoreEscape?: boolean;

package/ebay-dialog-base/components/dialogBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialogBase.d.ts","sourceRoot":"","sources":["../../../src/ebay-dialog-base/components/dialogBase.tsx"],"names":[],"mappings":"AAAA,OAAc,EACV,EAAE,EACF,SAAS,EACT,SAAS,EAIT,YAAY,EAEZ,iBAAiB,EACjB,SAAS,EACZ,MAAM,OAAO,CAAA;AAMd,OAAO,EAAsB,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAEnE,oBAAY,UAAU,GAAG,SAAS,CAAA;AAClC,aAAK,WAAW,GAAG,mBAAmB,GAAG,iBAAiB,GAAG,cAAc,GACrE,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,gBAAgB,GACpE,iBAAiB,CAAA;AACvB,aAAK,cAAc,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAA;AAGpE,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,iBAAiB,CAAC;IACpC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAAC,WAAW,CAAC,CAmKvD,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"dialogBase.d.ts","sourceRoot":"","sources":["../../../src/ebay-dialog-base/components/dialogBase.tsx"],"names":[],"mappings":"AAAA,OAAc,EACV,EAAE,EACF,SAAS,EACT,SAAS,EAIT,YAAY,EAEZ,iBAAiB,EACjB,SAAS,EAET,oBAAoB,EACvB,MAAM,OAAO,CAAA;AAMd,OAAO,EAAsB,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAGnE,oBAAY,UAAU,GAAG,SAAS,CAAA;AAClC,aAAK,WAAW,GAAG,mBAAmB,GAAG,iBAAiB,GAAG,cAAc,GACrE,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,gBAAgB,GACpE,iBAAiB,CAAA;AACvB,aAAK,cAAc,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAA;AAGpE,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,CAAC,EAAE,iBAAiB,GAAG,oBAAoB,CAAC;IAC3D,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAAC,WAAW,CAAC,CAuKvD,CAAA;AAED,eAAe,UAAU,CAAA"}

package/ebay-dialog-base/components/dialogBase.js

@@ -54,11 +54,11 @@ var random_id_1 = require("../../common/random-id");
 var animation_1 = require("./animation");
 exports.DialogBase = function (_a) {
     var _b;
-    var _c = _a.baseEl, Container = _c === void 0 ? 'div' : _c, _d = _a.classPrefix, classPrefix = _d === void 0 ? 'drawer-dialog' : _d, windowClass = _a.windowClass, windowType = _a.windowType, mainId = _a.mainId, top = _a.top, header = _a.header, _e = _a.buttonPosition, buttonPosition = _e === void 0 ? 'right' : _e, children = _a.children, ariaLabelledby = _a.ariaLabelledby, a11yCloseText = _a.a11yCloseText, _f = _a.onCloseBtnClick, onCloseBtnClick = _f === void 0 ? function () { } : _f, footer = _a.footer, actions = _a.actions, onScroll = _a.onScroll, _g = _a.open, open = _g === void 0 ? false : _g, _h = _a.onBackgroundClick, onBackgroundClick = _h === void 0 ? function () { } : _h, ignoreEscape = _a.ignoreEscape, closeButton = _a.closeButton, isModal = _a.isModal, _j = _a.role, role = _j === void 0 ? 'dialog' : _j, focus = _a.focus, transitionElement = _a.transitionElement, animated = _a.animated, props = __rest(_a, ["baseEl", "classPrefix", "windowClass", "windowType", "mainId", "top", "header", "buttonPosition", "children", "ariaLabelledby", "a11yCloseText", "onCloseBtnClick", "footer", "actions", "onScroll", "open", "onBackgroundClick", "ignoreEscape", "closeButton", "isModal", "role", "focus", "transitionElement", "animated"]);
+    var _c = _a.baseEl, Container = _c === void 0 ? 'div' : _c, _d = _a.classPrefix, classPrefix = _d === void 0 ? 'drawer-dialog' : _d, windowClass = _a.windowClass, windowType = _a.windowType, mainId = _a.mainId, top = _a.top, header = _a.header, _e = _a.buttonPosition, buttonPosition = _e === void 0 ? 'right' : _e, children = _a.children, ariaLabelledby = _a.ariaLabelledby, a11yCloseText = _a.a11yCloseText, _f = _a.onCloseBtnClick, onCloseBtnClick = _f === void 0 ? function () { } : _f, footer = _a.footer, actions = _a.actions, onScroll = _a.onScroll, _g = _a.open, open = _g === void 0 ? false : _g, _h = _a.onOpen, onOpen = _h === void 0 ? function () { } : _h, _j = _a.onBackgroundClick, onBackgroundClick = _j === void 0 ? function () { } : _j, ignoreEscape = _a.ignoreEscape, closeButton = _a.closeButton, isModal = _a.isModal, _k = _a.role, role = _k === void 0 ? 'dialog' : _k, focus = _a.focus, transitionElement = _a.transitionElement, animated = _a.animated, props = __rest(_a, ["baseEl", "classPrefix", "windowClass", "windowType", "mainId", "top", "header", "buttonPosition", "children", "ariaLabelledby", "a11yCloseText", "onCloseBtnClick", "footer", "actions", "onScroll", "open", "onOpen", "onBackgroundClick", "ignoreEscape", "closeButton", "isModal", "role", "focus", "transitionElement", "animated"]);
     var dialogRef = react_1.useRef(null);
     var drawerBaseEl = react_1.useRef(null);
     var closeButtonRef = react_1.useRef(null);
-    var _k = react_1.useState(''), rId = _k[0], setRandomId = _k[1];
+    var _l = react_1.useState(''), rId = _l[0], setRandomId = _l[1];
     react_1.useEffect(function () {
         setRandomId(random_id_1.randomId());
     }, []);
@@ -105,7 +105,7 @@ exports.DialogBase = function (_a) {
     var onKeyDown = function (event) {
         if (!ignoreEscape && event.key === 'Escape') {
             event.stopPropagation();
-            onCloseBtnClick(undefined);
+            onCloseBtnClick(event);
         }
     };
     react_1.useEffect(function () {
@@ -113,6 +113,9 @@ exports.DialogBase = function (_a) {
         if (!animated) {
             handleFocus(open);
         }
+        if (open) {
+            onOpen();
+        }
     }, [open]);
     function handleFocus(isOpen) {
         var _a, _b;

package/ebay-drawer-dialog/README.md

@@ -36,12 +36,13 @@ import '@ebay/skin/drawer-dialog.css'
 
 ## Events
 
-| Event         | Data | Description                                                                                                                                                    |
-|---------------|------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `onShow`      |      | drawer opened                                                                                                                                                  |
-| `onClose`     |      | drawer closed. Triggered also when user drags down on handle (touch only) when dialog is not expanded                                                          |
-| `onExpanded`  |      | drawer expanded to full page height. Event is triggered on drag up of handle (touch only), clicks, or when user scrolls in content when dialog is not expanded |
-| `onCollapsed` |      | drawer collapsed back to max 50%. Event is triggered on drags do                                                                                               |
+| Event         | Data             | Description                                                                                                                                                    |
+|---------------|------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `onShow`      | `(event: Event)` | Deprecated, use `onOpen` instead. drawer opened                                                                                                                |
+| `onOpen`      | `(event: Event)` | drawer opened                                                                                                                                                  |
+| `onClose`     | `(event: Event)` | drawer closed. Triggered also when user drags down on handle (touch only) when dialog is not expanded                                                          |
+| `onExpanded`  | `(event: Event)` | drawer expanded to full page height. Event is triggered on drag up of handle (touch only), clicks, or when user scrolls in content when dialog is not expanded |
+| `onCollapsed` | `(event: Event)` | drawer collapsed back to max 50%. Event is triggered on drags do                                                                                               |
 
 ## Child components
 

package/ebay-drawer-dialog/components/drawer.d.ts

@@ -7,6 +7,9 @@ export interface EbayDrawerProps<T> extends DialogBaseProps<T> {
     focus?: RefObject<HTMLAnchorElement & HTMLButtonElement>;
     a11yMinimizeText?: string;
     a11yMaximizeText?: string;
+    /**
+     * @deprecated Use onOpen instead
+     */
     onShow?: () => void;
     onClose?: () => void;
     onExpanded?: () => void;

package/ebay-drawer-dialog/components/drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/ebay-drawer-dialog/components/drawer.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAY,EAAE,EAAgB,SAAS,EAA0C,MAAM,OAAO,CAAA;AAE5G,OAAO,EAAE,eAAe,EAAyC,MAAM,wBAAwB,CAAA;AAK/F,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,CA8F9C,CAAA;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/ebay-drawer-dialog/components/drawer.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAY,EAAE,EAAgB,SAAS,EAA0C,MAAM,OAAO,CAAA;AAE5G,OAAO,EAAE,eAAe,EAAyC,MAAM,wBAAwB,CAAA;AAK/F,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,CA8F9C,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/ebay-fake-menu/README.md

@@ -21,11 +21,11 @@ import '@ebay/skin/menu';
 
 ## EbayFakeMenu Props
 
-Name | Type | Required | Description
---- | --- | --- | ---
-itemMatchesUrl | Boolean | No | used in conjunction with `current` -- This determines whether aria-current will be `page` or `true` -- Defaults to `true` which gives `aria-current` a value of `page`
-`onKeydown` | Function | No | Arguments: (index: number, checked: boolean)
-`onSelect` | Function | No | For using with keyboard navigation, arguments: (index: number, checked: boolean)
+| Name           | Type     | Required | Description                                                                                                                                                            | Data            |
+|----------------|----------|----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------|
+| itemMatchesUrl | Boolean  | No       | used in conjunction with `current` -- This determines whether aria-current will be `page` or `true` -- Defaults to `true` which gives `aria-current` a value of `page` |                 |
+| `onKeyDown`    | Function | No       | triggered on key down                                                                                                                                                  | `(KeyboardEvent |MouseEvent, { index: number })` |
+| `onSelect`     | Function | No       | For using with keyboard navigation                                                                                                                                     | `(KeyboardEvent  |MouseEvent, { index: number })`                                     |
 
 ## EbayFakeMenuItem Props
 

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

@@ -1,5 +1,5 @@
 import { ComponentProps, FC } from 'react';
-export declare type EbayFakeMenuItemProps = Omit<ComponentProps<'a'>, 'onKeyDown'> & {
+export declare type EbayFakeMenuItemProps = Omit<ComponentProps<'a'>, 'onKeyDown' | 'onMouseDown'> & {
     current?: boolean;
     disabled?: boolean;
     autoFocus?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../src/ebay-fake-menu/menu-item.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAqB,MAAM,OAAO,CAAA;AAIpE,oBAAY,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,WAAW,CAAC,GAAG;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,qBAAqB,CA6B3C,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../src/ebay-fake-menu/menu-item.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAqB,MAAM,OAAO,CAAA;AAIpE,oBAAY,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,WAAW,GAAG,aAAa,CAAC,GAAG;IACzF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,qBAAqB,CA6B3C,CAAA;AAED,eAAe,YAAY,CAAA"}