@ebay/ui-core-react 4.2.6 → 5.0.0

package/ebay-radio/radio.js

@@ -49,10 +49,12 @@ var classnames_1 = __importDefault(require("classnames"));
 var ebay_icon_1 = require("../ebay-icon");
 var ebay_field_1 = require("../ebay-field");
 var EbayRadio = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'default' : _b, checked = _a.checked, defaultChecked = _a.defaultChecked, className = _a.className, style = _a.style, id = _a.id, _c = _a.onChange, onChange = _c === void 0 ? function () { } : _c, children = _a.children, rest = __rest(_a, ["size", "checked", "defaultChecked", "className", "style", "id", "onChange", "children"]);
-    var handleChange = function (e) {
-        var input = e.target;
-        onChange(e, input === null || input === void 0 ? void 0 : input.value);
+    var _b = _a.size, size = _b === void 0 ? 'default' : _b, checked = _a.checked, defaultChecked = _a.defaultChecked, className = _a.className, style = _a.style, id = _a.id, _c = _a.onChange, onChange = _c === void 0 ? function () { } : _c, _d = _a.onFocus, onFocus = _d === void 0 ? function () { } : _d, _e = _a.onKeyDown, onKeyDown = _e === void 0 ? function () { } : _e, children = _a.children, rest = __rest(_a, ["size", "checked", "defaultChecked", "className", "style", "id", "onChange", "onFocus", "onKeyDown", "children"]);
+    var handleChange = function (e) { var _a; return onChange(e, { value: (_a = e.target) === null || _a === void 0 ? void 0 : _a.value }); };
+    var handleFocus = function (e) { var _a; return onFocus(e, { value: (_a = e.target) === null || _a === void 0 ? void 0 : _a.value }); };
+    var handleKeyDown = function (e) {
+        var radioButton = e.target;
+        return onKeyDown(e, { value: radioButton === null || radioButton === void 0 ? void 0 : radioButton.value });
     };
     var containerClass = classnames_1.default('radio', className, { 'radio--large': size === 'large' });
     var iconChecked = size === 'large' ?
@@ -65,7 +67,7 @@ var EbayRadio = function (_a) {
     var ebayLabel = childrenArray.find(function (child) { return child.type === 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: "radio__control", type: "radio", defaultChecked: defaultChecked, checked: checked, onChange: handleChange })),
+            react_1.default.createElement("input", __assign({}, rest, { id: id, className: "radio__control", type: "radio", defaultChecked: defaultChecked, checked: checked, onChange: handleChange, onFocus: handleFocus, onKeyDown: handleKeyDown })),
             react_1.default.createElement("span", { className: "radio__icon", hidden: true },
                 iconChecked,
                 iconUnChecked)),

package/ebay-section-notice/README.md

@@ -45,3 +45,8 @@ import "@ebay/skin/section-notice";
 | `aria-label`           | String                                                               | No       | The description of the notice itself for screen readers. Check out [this issue](https://github.com/eBay/skin/issues/1001) for more context. | -          |
 | `aria-roledescription` | String                                                               | No       | Adds role description attribute to the section notice                                                                                       | `"Notice"` |
 | `children`             | React Node                                                           | No       | The content to be displayed within the notice. **Must have the EbayNoticeContent within the children!**                                     | -          |
+
+## Callbacks
+| Name | Required             | Description       | Arguments |
+|------|----------------------|-------------------|-----------|
+| `onDismiss` | No | Triggered on notice dismiss | (Event)  |

package/ebay-section-notice/index.d.ts

@@ -1,4 +1,4 @@
-export { default as EbaySectionNotice } from './section-notice';
+export { default as EbaySectionNotice, SectionNoticeStatus, Props as EbaySectionNoticeProps } from './section-notice';
 export { default as EbaySectionNoticeTitle } from './section-notice-title';
 export { default as EbaySectionNoticeFooter } from './section-notice-footer';
 export { EbayNoticeContent } from '../ebay-notice-base/components/ebay-notice-content';

package/ebay-section-notice/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-section-notice/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAC/D,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,yBAAyB,CAAA;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-section-notice/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,mBAAmB,EAAE,KAAK,IAAI,sBAAsB,EAAE,MAAM,kBAAkB,CAAA;AACrH,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,yBAAyB,CAAA;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAA"}

package/ebay-section-notice/section-notice.d.ts

@@ -1,9 +1,12 @@
-import React, { FC } from 'react';
-declare type Props = React.HTMLProps<HTMLElement> & {
-    status?: 'general' | 'none' | 'attention' | 'confirmation' | 'information';
+import { ComponentProps, FC, KeyboardEventHandler, MouseEventHandler } from 'react';
+export declare type SectionNoticeStatus = 'general' | 'none' | 'attention' | 'confirmation' | 'information';
+export declare type Props = ComponentProps<'section'> & {
+    status?: SectionNoticeStatus;
     'aria-label'?: string;
     'aria-roledescription'?: string;
     className?: string;
+    a11yDismissText?: string;
+    onDismiss?: MouseEventHandler & KeyboardEventHandler;
 };
 declare const EbaySectionNotice: FC<Props>;
 export default EbaySectionNotice;

package/ebay-section-notice/section-notice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"section-notice.d.ts","sourceRoot":"","sources":["../../src/ebay-section-notice/section-notice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAgB,MAAM,OAAO,CAAA;AAM/C,aAAK,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG;IACxC,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,cAAc,GAAG,aAAa,CAAC;IAC3E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAA;AAED,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,KAAK,CAiChC,CAAA;AAED,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"section-notice.d.ts","sourceRoot":"","sources":["../../src/ebay-section-notice/section-notice.tsx"],"names":[],"mappings":"AAAA,OAAc,EACV,cAAc,EACd,EAAE,EAEF,oBAAoB,EAEpB,iBAAiB,EAEpB,MAAM,OAAO,CAAA;AAOd,oBAAY,mBAAmB,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,cAAc,GAAG,aAAa,CAAA;AACnG,oBAAY,KAAK,GAAG,cAAc,CAAC,SAAS,CAAC,GAAG;IAC5C,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,iBAAiB,GAAG,oBAAoB,CAAC;CACxD,CAAA;AAED,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,KAAK,CAmDhC,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/ebay-section-notice/section-notice.js

@@ -10,6 +10,25 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -25,13 +44,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var ebay_notice_content_1 = require("../ebay-notice-base/components/ebay-notice-content");
 var notice_content_1 = __importDefault(require("../common/notice-utils/notice-content"));
 var ebay_icon_1 = require("../ebay-icon");
+var index_1 = require("./index");
 var EbaySectionNotice = function (_a) {
-    var _b = _a.status, status = _b === void 0 ? 'general' : _b, children = _a.children, className = _a.className, ariaLabel = _a["aria-label"], _c = _a["aria-roledescription"], ariaRoleDescription = _c === void 0 ? 'Notice' : _c, rest = __rest(_a, ["status", "children", "className", 'aria-label', 'aria-roledescription']);
+    var _b = _a.status, status = _b === void 0 ? 'general' : _b, children = _a.children, className = _a.className, ariaLabel = _a["aria-label"], _c = _a["aria-roledescription"], ariaRoleDescription = _c === void 0 ? 'Notice' : _c, a11yDismissText = _a.a11yDismissText, _d = _a.onDismiss, onDismiss = _d === void 0 ? function () { } : _d, rest = __rest(_a, ["status", "children", "className", 'aria-label', 'aria-roledescription', "a11yDismissText", "onDismiss"]);
+    var _e = react_1.useState(false), dismissed = _e[0], setDismissed = _e[1];
     var childrenArray = react_1.default.Children.toArray(children);
     var content = childrenArray.find(function (_a) {
         var type = _a.type;
@@ -41,10 +62,17 @@ var EbaySectionNotice = function (_a) {
     if (!content) {
         throw new Error("EbaySectionNotice: Please use a EbayNoticeContent that defines the content of the notice");
     }
-    return (react_1.default.createElement("section", __assign({}, rest, { className: classnames_1.default(className, "section-notice", hasStatus && "section-notice--" + status), role: "region", "aria-label": !hasStatus ? ariaLabel : null, "aria-labelledby": hasStatus ? "section-notice-" + status : null, "aria-roledescription": ariaRoleDescription }),
+    var handleDismissed = function (event) {
+        setDismissed(true);
+        onDismiss(event);
+    };
+    return dismissed ? null : (react_1.default.createElement("section", __assign({}, rest, { className: classnames_1.default(className, "section-notice", hasStatus && "section-notice--" + status), role: "region", "aria-label": !hasStatus ? ariaLabel : null, "aria-labelledby": hasStatus ? "section-notice-" + status : null, "aria-roledescription": ariaRoleDescription }),
         hasStatus && (react_1.default.createElement("div", { className: "section-notice__header", id: "section-notice-" + status },
             react_1.default.createElement(ebay_icon_1.EbayIcon, { name: status + "Filled16", a11yText: ariaLabel, a11yVariant: "label" }))),
         react_1.default.createElement(notice_content_1.default, __assign({}, content.props, { type: "section" })),
-        children));
+        children,
+        a11yDismissText && (react_1.default.createElement(index_1.EbaySectionNoticeFooter, null,
+            react_1.default.createElement("button", { "aria-label": a11yDismissText, className: "fake-link page-notice__dismiss", onClick: handleDismissed },
+                react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "close16" }))))));
 };
 exports.default = EbaySectionNotice;

package/ebay-select/README.md

@@ -48,11 +48,13 @@ https://reactjs.org/docs/forms.html#the-select-tag. Notice that the selected val
 | `disabled`      | String   | No       | passed to the `<select>` element, default is `false`         |
 | `className`     | String   | No       | passed to the wrapper-element of the `<select>` element      |
 | `borderless`    | String   | No       | whether button has borders, default is `false`               |
-| `onChange`      | Function | No       | { el, index, selected }                                      |
 | `floatingLabel` | String   | No       | Indicates that the select is a floating label type and renders it as a label |
 | `inputSize`     | String   | No       | `default` (default), `large`                                 |
 | `invalid`       | Boolean  | No       | Indicates a field-level error with red border if true        |
 
+## Callbacks
+| `onChange`      | Function | No       | Called on option change with arguments: `(ChangeEvent, { index: number, selected: string[] }`                                      |
+
 ## EbaySelectOption Attributes
 
 | Name    | Type   | Required | Description                      |

package/ebay-select/ebay-select.d.ts

@@ -1,9 +1,14 @@
-import { ChangeEvent, ComponentProps, FC } from 'react';
+import { ComponentProps, FC } from 'react';
+import { EbayChangeEventHandler } from '../common/event-utils/types';
 declare type SelectValue = string | ReadonlyArray<string> | number;
+export declare type ChangeEventProps = {
+    index: number;
+    selected: string[];
+};
 export declare type EbaySelectProps = Omit<ComponentProps<'select'>, 'onChange'> & {
     borderless?: boolean;
     defaultValue?: SelectValue;
-    onChange?: (e: ChangeEvent<HTMLSelectElement>, selectedIndex: number, newValue: SelectValue) => void;
+    onChange?: EbayChangeEventHandler<HTMLSelectElement, ChangeEventProps>;
     floatingLabel?: string;
     inputSize?: 'default' | 'large';
     invalid?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"ebay-select.d.ts","sourceRoot":"","sources":["../../src/ebay-select/ebay-select.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,WAAW,EAAgB,cAAc,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAA;AAS1G,aAAK,WAAW,GAAG,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;AAC3D,oBAAY,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,KAAK,IAAI,CAAC;IACrG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAiFnC,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"ebay-select.d.ts","sourceRoot":"","sources":["../../src/ebay-select/ebay-select.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA6B,cAAc,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAA;AAM1G,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAIpE,aAAK,WAAW,GAAG,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;AAC3D,oBAAY,gBAAgB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,EAAE,CAAA;CAAE,CAAA;AACpE,oBAAY,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,EAAE,sBAAsB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IACvE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAiFnC,CAAA;AAED,eAAe,UAAU,CAAA"}

package/ebay-select/ebay-select.js

@@ -71,7 +71,7 @@ var EbaySelect = function (_a) {
         if (!isControlled(controlledValue)) {
             setValue(newValue);
         }
-        onChange(e, selectedIndex, newValue);
+        onChange(e, { index: selectedIndex, selected: [newValue] });
     };
     var handleBlur = function (event) {
         onBlur(event);

package/ebay-select/index.d.ts

@@ -1,3 +1,3 @@
-export { default as EbaySelect, EbaySelectProps } from './ebay-select';
+export { default as EbaySelect, EbaySelectProps, ChangeEventProps } from './ebay-select';
 export { default as EbaySelectOption } from './ebay-select-option';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,sBAAsB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AACxF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,sBAAsB,CAAA"}

package/ebay-split-button/README.md

@@ -48,5 +48,5 @@ Name | Type    | Stateful | Required | Description | Data
 `onBlur` | Function | - | No | triggered on blur
 `onExpand` | Function | - | No | Called when content is expanded
 `onCollapse` | Function | - | No | Called when content is collapsed
-`onChange` | Function | - | No | Arguments: (index: number, checked: boolean) for type `radio`/`checkbox`
-`onSelect` | Function | - | No | Arguments: (index: number, checked: boolean), not for use with type `radio`/`checkbox`
+`onChange` | Function | - | No | Arguments: (e: event, { index: number, checked: number[], checkedValues: string[] }) for type `radio`/`checkbox`
+`onSelect` | Function | - | No | Arguments: (e: event, { index: number, checked: number[] }), not for use with type `radio`/`checkbox`

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

@@ -36,6 +36,6 @@ var EbaySplitButton = function (_a) {
     var menuItems = component_utils_1.filterByType(children, menuItemComponents);
     return (react_1.default.createElement("span", { className: "split-button" },
         react_1.default.createElement(ebay_button_1.EbayButton, __assign({ "aria-label": bodyState === 'loading' ? a11yButtonLoadingText : undefined }, rest, { split: "start", bodyState: bodyState === 'expand' ? undefined : bodyState }), buttonLabel),
-        react_1.default.createElement(ebay_menu_button_1.EbayMenuButton, { priority: rest.priority, disabled: rest.disabled, transparent: rest.transparent, size: rest.size, type: type, split: "end", reverse: true, a11yText: a11yMenuText, onCollapse: onCollapse, onExpand: onExpand, onChange: onChange, onSelect: onSelect }, menuItems)));
+        react_1.default.createElement(ebay_menu_button_1.EbayMenuButton, { priority: rest.priority, disabled: rest.disabled, transparent: rest.transparent, size: rest.size, type: type, split: "end", reverse: true, a11yText: a11yMenuText, onCollapse: onCollapse, onExpand: onExpand, onSelect: onSelect, onChange: onChange }, menuItems)));
 };
 exports.default = EbaySplitButton;

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

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

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

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

package/ebay-star-rating-select/README.md

@@ -35,3 +35,11 @@ Name | Type | Stateful | Description
 | `a11yText`       | String  | No       | Yes      | container aria-label               |
 | `value`           | String  | No       | Yes      | The amount of stars to be filled. Can be "2-5" for 2 and a half stars.|
 | `disabled` | Boolean | No | Rating stars are disabled or not
+
+## Callbacks
+
+| Name       | Type     | Required | Description               | Data                                 |
+|------------|----------|----------|---------------------------|--------------------------------------|
+| `onChange` | Function | No       | triggered on value change | `(ChangeEvent, { value: number })`   |
+| `onFocus` | Function | No       | triggered on focus        | `(FocusEvent, { value: number })`    |
+| `onKeydown` | Function | No       | triggered on keydown     | `(KeyboardEvent, { value: number })` |

package/ebay-star-rating-select/star-rating-select.d.ts

@@ -1,13 +1,17 @@
-import { ChangeEvent, ComponentProps, FC, MouseEvent } from 'react';
+import { ComponentProps, FC } from 'react';
+import { EbayChangeEventHandler, EbayFocusEventHandler, EbayKeyboardEventHandler } from '../common/event-utils/types';
+export declare type EventProps = {
+    value: number;
+};
 declare type Props = ComponentProps<'div'> & {
     a11yText?: string;
     value?: string;
     a11yStarText?: string[];
     disabled?: boolean;
     name?: string;
-    onKeyDown?: (e: MouseEvent, value: number) => void;
-    onChange?: (event: ChangeEvent<HTMLInputElement>, value: string | number) => void;
-    onFocus?: (event: ChangeEvent<HTMLInputElement>, value: string | number) => void;
+    onKeyDown?: EbayKeyboardEventHandler<HTMLInputElement, EventProps>;
+    onChange?: EbayChangeEventHandler<HTMLInputElement, EventProps>;
+    onFocus?: EbayFocusEventHandler<HTMLInputElement, EventProps>;
 };
 declare const EbayStarRatingSelect: FC<Props>;
 export default EbayStarRatingSelect;

package/ebay-star-rating-select/star-rating-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"star-rating-select.d.ts","sourceRoot":"","sources":["../../src/ebay-star-rating-select/star-rating-select.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,WAAW,EAAE,cAAc,EAAE,EAAE,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAA;AAM/F,aAAK,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAClF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CACpF,CAAA;AASD,QAAA,MAAM,oBAAoB,EAAE,EAAE,CAAC,KAAK,CAgEnC,CAAA;AAED,eAAe,oBAAoB,CAAA"}
+{"version":3,"file":"star-rating-select.d.ts","sourceRoot":"","sources":["../../src/ebay-star-rating-select/star-rating-select.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAA;AAKtE,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAA;AAErH,oBAAY,UAAU,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAC1C,aAAK,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,wBAAwB,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;IACnE,QAAQ,CAAC,EAAE,sBAAsB,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;IAChE,OAAO,CAAC,EAAE,qBAAqB,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;CACjE,CAAA;AASD,QAAA,MAAM,oBAAoB,EAAE,EAAE,CAAC,KAAK,CAgEnC,CAAA;AAED,eAAe,oBAAoB,CAAA"}

package/ebay-star-rating-select/star-rating-select.js

@@ -58,27 +58,27 @@ var getValue = function (val) {
     return value;
 };
 var EbayStarRatingSelect = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? 0 : _b, a11yText = _a.a11yText, className = _a.className, _c = _a.a11yStarText, a11yStarText = _c === void 0 ? [] : _c, disabled = _a.disabled, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, _d = _a.name, name = _d === void 0 ? "star-rating-" + random_id_1.randomId() : _d, rest = __rest(_a, ["value", "a11yText", "className", "a11yStarText", "disabled", "onChange", "onFocus", "onKeyDown", "name"]);
-    var _e = react_1.useState(getValue(value)), checkedValue = _e[0], setChecked = _e[1];
+    var _b = _a.value, value = _b === void 0 ? 0 : _b, a11yText = _a.a11yText, className = _a.className, _c = _a.a11yStarText, a11yStarText = _c === void 0 ? [] : _c, disabled = _a.disabled, _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, _g = _a.name, name = _g === void 0 ? "star-rating-" + random_id_1.randomId() : _g, rest = __rest(_a, ["value", "a11yText", "className", "a11yStarText", "disabled", "onChange", "onFocus", "onKeyDown", "name"]);
+    var _h = react_1.useState(getValue(value)), checkedValue = _h[0], setChecked = _h[1];
     react_1.useEffect(function () {
         setChecked(getValue(value));
     }, [value]);
     var handleKeyDown = function (i) { return function (e) {
-        if (!disabled && onKeyDown) {
+        if (!disabled) {
             setChecked(getValue(i));
-            onKeyDown(e, i);
+            onKeyDown(e, { value: i });
         }
     }; };
     var handleClick = function (i) { return function (e) {
-        if (!disabled && onChange) {
+        if (!disabled) {
             setChecked(getValue(i));
-            onChange(e, i);
+            onChange(e, { value: i });
         }
     }; };
     var handleFocus = function (i) { return function (e) {
-        if (!disabled && onFocus) {
+        if (!disabled) {
             setChecked(getValue(i));
-            onFocus(e, i);
+            onFocus(e, { value: i });
         }
     }; };
     return (react_1.default.createElement("div", __assign({ role: a11yText && 'radiogroup', "aria-label": a11yText, className: classnames_1.default('star-rating-select', className) }, rest), stars.map(function (i) { return (react_1.default.createElement("span", { className: "star-rating-select__radio", key: i },

package/ebay-switch/README.md

@@ -27,7 +27,11 @@ yarn add @ebay/ui-core-react
 Name | Type | Stateful | Description
 --- | --- | --- | ---
 `disabled` | Boolean | No |
-`onChange` | `{ originalEvent, value, checked }` | selected value and checked status
+
+## Callbacks
+Name | Data | Description
+--- | --- | --- | ---
+`onChange` | `(ChangeEvent, { value: string, checked: boolean }` | Triggered on change
 
 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-switch/ebay-switch.d.ts

@@ -1,6 +1,10 @@
-import { FC, ChangeEvent, ComponentProps } from 'react';
-declare type Props = ComponentProps<'input'> & {
-    onChange?: (e: ChangeEvent<HTMLInputElement>, value: string | number, checked: boolean) => void;
+import { FC, ComponentProps } from 'react';
+import { EbayChangeEventHandler } from '../common/event-utils/types';
+declare type Props = Omit<ComponentProps<'input'>, 'onChange'> & {
+    onChange?: EbayChangeEventHandler<HTMLInputElement, {
+        value: string | number;
+        checked: boolean;
+    }>;
 };
 declare const EbaySwitch: FC<Props>;
 export default EbaySwitch;

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

@@ -1 +1 @@
-{"version":3,"file":"ebay-switch.d.ts","sourceRoot":"","sources":["../../src/ebay-switch/ebay-switch.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAuB,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAGnF,aAAK,KAAK,GAAG,cAAc,CAAC,OAAO,CAAC,GAAG;IACnC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACnG,CAAA;AAED,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,KAAK,CAuCzB,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"ebay-switch.d.ts","sourceRoot":"","sources":["../../src/ebay-switch/ebay-switch.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAuB,EAAE,EAAe,cAAc,EAAE,MAAM,OAAO,CAAA;AAEnF,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAEpE,aAAK,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,GAAG;IACrD,QAAQ,CAAC,EAAE,sBAAsB,CAAC,gBAAgB,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CACrG,CAAA;AAED,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,KAAK,CA0CzB,CAAA;AAED,eAAe,UAAU,CAAA"}

package/ebay-switch/ebay-switch.js

@@ -53,9 +53,12 @@ var EbaySwitch = function (_a) {
         setChecked(!!checked);
     }, [checked]);
     var handleChange = function (e) {
-        var input = e.target || {};
-        onChange(e, input.value, input.checked);
-        setChecked(input.checked);
+        var _a = e.target || {}, _b = _a.value, inputValue = _b === void 0 ? '' : _b, _c = _a.checked, inputChecked = _c === void 0 ? false : _c;
+        onChange(e, {
+            value: inputValue,
+            checked: inputChecked
+        });
+        setChecked(inputChecked);
     };
     return (react_1.default.createElement("span", { className: "switch" },
         react_1.default.createElement("input", __assign({}, rest, { className: classnames_1.default('switch__control', className), id: id, role: "switch", type: "checkbox", value: value, "aria-checked": isChecked, checked: isChecked, name: name, onChange: handleChange })),

package/ebay-tabs/README.md

@@ -28,15 +28,17 @@ import '@ebay/skin/tabs';
 
 Name | Type | Stateful | Description
 --- | --- | --- | ---
-`index` |Number | Yes | 0-based index of selected tab heading and panel
+`index` |Number | Yes | Deprecated, use `selectedIndex` instead. 0-based index of selected tab heading and panel
+`selectedIndex` |Number | Yes | 0-based index of selected tab heading and panel
 `activation` | Enum | Yes | whether to use automatic or manual activation when navigating by keyboard, can be `auto` (default) or `manual`
 `size` | Enum | No | Whether to opt into larger font-size for tab headings, can be `medium` (default) or `large`
 
 ## Callbacks
 
-Event | Data | Description
---- | --- | ---
-`onTabSelect` | `{ index }` |
+| Event         | Data                                      | Description                                                                                             |
+|---------------|-------------------------------------------|---------------------------------------------------------------------------------------------------------|
+| `onTabSelect` | `({ index: number })`                     | Triggered on tab selected. Deprecated, use onSelect instead. Will be removed in the next major release. |
+| `onSelect`    | `(ChangeEvent, { selectedIndex:number })` | Triggered on tab selected.                                                                              |
 
 ## EbayTab
 
@@ -44,12 +46,6 @@ Event | Data | Description
 <EbayTab>Tab 1</EbayTab>
 ```
 
-### EbayTab Props
-
-Name | Type | Stateful | Description
---- | --- | --- | ---
-`href` | String | No | For use with `fake` tab component (links instead of real tabs)
-
 ## EbayTabPanel
 ```jsx harmony
 <EbayTabPanel>Panel 1</EbayTabPanel>

package/ebay-tabs/tab-panel.d.ts

@@ -3,7 +3,6 @@ declare type TabPanelProps = ComponentProps<'div'> & {
     index?: number;
     parentId?: string;
     selected?: boolean;
-    fake?: boolean;
 };
 declare const TabPanel: FC<TabPanelProps>;
 export default TabPanel;

package/ebay-tabs/tab-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.d.ts","sourceRoot":"","sources":["../../src/ebay-tabs/tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAGjD,aAAK,aAAa,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB,CAAA;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA0B3B,CAAA;AAEL,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"tab-panel.d.ts","sourceRoot":"","sources":["../../src/ebay-tabs/tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAGjD,aAAK,aAAa,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAA;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAoB/B,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/ebay-tabs/tab-panel.js

@@ -28,8 +28,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var TabPanel = function (_a) {
-    var children = _a.children, index = _a.index, parentId = _a.parentId, selected = _a.selected, fake = _a.fake, className = _a.className, rest = __rest(_a, ["children", "index", "parentId", "selected", "fake", "className"]);
-    return fake ? (react_1.default.createElement("div", __assign({}, rest, { className: classnames_1.default(className, 'fake-tabs__cell') }), children)) : (react_1.default.createElement("div", __assign({}, rest, { "aria-labelledby": "default-tab-" + index, className: classnames_1.default(className, 'tabs__panel'), id: (parentId || 'default') + "-tabpanel-" + index, role: "tabpanel", hidden: !selected }),
+    var children = _a.children, index = _a.index, parentId = _a.parentId, selected = _a.selected, className = _a.className, rest = __rest(_a, ["children", "index", "parentId", "selected", "className"]);
+    return (react_1.default.createElement("div", __assign({}, rest, { "aria-labelledby": "default-tab-" + index, className: classnames_1.default(className, 'tabs__panel'), id: (parentId || 'default') + "-tabpanel-" + index, role: "tabpanel", hidden: !selected }),
         react_1.default.createElement("div", { className: "tabs__cell" }, children)));
 };
 exports.default = TabPanel;

package/ebay-tabs/tab.d.ts

@@ -1,15 +1,9 @@
 import { ComponentProps, FC, RefCallback } from 'react';
-declare type TabProps = ComponentProps<'li'> & ComponentProps<'div'> & {
+declare type TabProps = ComponentProps<'div'> & {
     index?: number;
     parentId?: string;
     selected?: boolean;
     focused?: boolean;
-    /**
-     * @deprecated Use EbayFakeTabs instead
-     */
-    href?: string;
-    onClick?: () => void;
-    onKeyDown?: () => void;
     refCallback?: RefCallback<HTMLElement>;
 };
 declare const Tab: FC<TabProps>;

package/ebay-tabs/tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/ebay-tabs/tab.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAG9D,aAAK,QAAQ,GAAG,cAAc,CAAC,IAAI,CAAC,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;CAC1C,CAAA;AAED,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,CAuCjB,CAAA;AAEL,eAAe,GAAG,CAAA"}
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/ebay-tabs/tab.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAG9D,aAAK,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;CAC1C,CAAA;AAED,QAAA,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,CAwBrB,CAAA;AAED,eAAe,GAAG,CAAA"}

package/ebay-tabs/tab.js

@@ -28,13 +28,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var Tab = function (_a) {
-    var children = _a.children, index = _a.index, parentId = _a.parentId, selected = _a.selected, focused = _a.focused, 
-    /**
-     * @deprecated Use EbayFakeTabs instead
-     */
-    href = _a.href, className = _a.className, refCallback = _a.refCallback, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, _c = _a.onKeyDown, onKeyDown = _c === void 0 ? function () { } : _c, rest = __rest(_a, ["children", "index", "parentId", "selected", "focused", "href", "className", "refCallback", "onClick", "onKeyDown"]);
-    return href ? (react_1.default.createElement("li", __assign({}, rest, { className: classnames_1.default(className, 'fake-tabs__item', { 'fake-tabs__item--current': selected }) }),
-        react_1.default.createElement("a", { href: href, "aria-current": selected ? "page" : null }, children))) : (react_1.default.createElement("div", __assign({}, rest, { ref: refCallback, "aria-controls": (parentId || 'default') + "-tabpanel-" + index, "aria-selected": selected, className: classnames_1.default(className, 'tabs__item'), id: (parentId || 'default') + "-tab-" + index, role: "tab", tabIndex: focused ? 0 : -1, onClick: onClick, onKeyDown: onKeyDown }),
+    var children = _a.children, index = _a.index, parentId = _a.parentId, selected = _a.selected, focused = _a.focused, className = _a.className, refCallback = _a.refCallback, rest = __rest(_a, ["children", "index", "parentId", "selected", "focused", "className", "refCallback"]);
+    return (react_1.default.createElement("div", __assign({}, rest, { ref: refCallback, "aria-controls": (parentId || 'default') + "-tabpanel-" + index, "aria-selected": selected, className: classnames_1.default(className, 'tabs__item'), id: (parentId || 'default') + "-tab-" + index, role: "tab", tabIndex: focused ? 0 : -1 }),
         react_1.default.createElement("span", null, children)));
 };
 exports.default = Tab;

package/ebay-tabs/tabs.d.ts

@@ -1,9 +1,15 @@
 import { ComponentProps, FC } from 'react';
 import { Activation, Size } from './types';
-declare type TabsProps = ComponentProps<'div'> & {
+export declare type TabsProps = ComponentProps<'div'> & {
     index?: number;
     size?: Size;
     activation?: Activation;
+    onSelect?: ({ selectedIndex: number }: {
+        selectedIndex: any;
+    }) => void;
+    /**
+     * @deprecated Use onSelect instead
+     */
     onTabSelect?: (index: number) => void;
 };
 declare const Tabs: FC<TabsProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/ebay-tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAgB,cAAc,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAA;AAMpF,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAG1C,aAAK,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAsGvB,CAAA;AAED,eAAe,IAAI,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/ebay-tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAgB,cAAc,EAAE,EAAE,EAAsC,MAAM,OAAO,CAAA;AAKnG,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAI1C,oBAAY,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE;;KAAA,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CA4FvB,CAAA;AAED,eAAe,IAAI,CAAA"}

package/ebay-tabs/tabs.js

@@ -36,15 +36,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var event_utils_1 = require("../common/event-utils");
+var component_utils_1 = require("../common/component-utils");
 var tab_1 = __importDefault(require("./tab"));
 var tab_panel_1 = __importDefault(require("./tab-panel"));
-var component_utils_1 = require("../common/component-utils");
 var Tabs = function (_a) {
-    var id = _a.id, className = _a.className, _b = _a.index, index = _b === void 0 ? 0 : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.activation, activation = _d === void 0 ? 'auto' : _d, _e = _a.onTabSelect, onTabSelect = _e === void 0 ? function () { } : _e, children = _a.children;
+    var id = _a.id, className = _a.className, _b = _a.index, index = _b === void 0 ? 0 : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.activation, activation = _d === void 0 ? 'auto' : _d, _e = _a.onSelect, onSelect = _e === void 0 ? function () { } : _e, _f = _a.onTabSelect, onTabSelect = _f === void 0 ? function () { } : _f, children = _a.children;
     var headings = [];
-    var _f = react_1.useState(index), selectedIndex = _f[0], setSelectedIndex = _f[1];
-    var _g = react_1.useState(index), focusedIndex = _g[0], setFocusedIndex = _g[1];
-    var onSelect = function (i) {
+    var _g = react_1.useState(index), selectedIndex = _g[0], setSelectedIndex = _g[1];
+    var _h = react_1.useState(index), focusedIndex = _h[0], setFocusedIndex = _h[1];
+    var handleSelect = function (i) {
+        onSelect({ selectedIndex: i });
         onTabSelect(i);
         setSelectedIndex(i);
     };
@@ -56,7 +57,7 @@ var Tabs = function (_a) {
         event_utils_1.handleActionKeydown(ev, function () {
             ev.preventDefault();
             if (activation === 'manual') {
-                onSelect(i);
+                handleSelect(i);
             }
         });
         event_utils_1.handleLeftRightArrowsKeydown(ev, function () {
@@ -69,38 +70,30 @@ var Tabs = function (_a) {
             setFocusedIndex(nextIndex);
             (_a = headings[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
             if (activation !== 'manual') {
-                onSelect(nextIndex);
+                handleSelect(nextIndex);
             }
         });
     };
     react_1.useEffect(function () {
-        onSelect(index);
+        handleSelect(index);
     }, [index]);
-    var isFake = component_utils_1.filterBy(children, function (_a) {
-        var type = _a.type, props = _a.props;
-        return type === tab_1.default && props.href;
-    }).length > 0;
     var isLarge = size === 'large';
     var tabHeadings = component_utils_1.filterByType(children, tab_1.default).map(function (item, i) {
         return react_1.cloneElement(item, __assign(__assign({}, item.props), { refCallback: function (ref) { headings[i] = ref; }, index: i, parentId: id, selected: selectedIndex === i, focused: focusedIndex === i, onClick: function () {
-                onSelect(i);
+                handleSelect(i);
                 setFocusedIndex(i);
             }, onKeyDown: function (e) { onKeyDown(e, i); } }));
     });
     var tabPanels = component_utils_1.filterByType(children, tab_panel_1.default).map(function (item, i) {
-        var content = item.props.children;
         var itemProps = {
             index: i,
             parentId: id,
             selected: selectedIndex === i,
-            fake: isFake,
-            children: content
+            children: item.props.children
         };
         return react_1.cloneElement(item, itemProps);
     });
-    return isFake ? (react_1.default.createElement("div", { id: id, className: classnames_1.default(className, 'fake-tabs') },
-        react_1.default.createElement("ul", { className: classnames_1.default('fake-tabs__items', { 'fake-tabs__items--large': isLarge }) }, tabHeadings),
-        react_1.default.createElement("div", { className: "fake-tabs__content" }, tabPanels))) : (react_1.default.createElement("div", { id: id, className: classnames_1.default(className, 'tabs') },
+    return (react_1.default.createElement("div", { id: id, className: classnames_1.default(className, 'tabs') },
         react_1.default.createElement("div", { className: classnames_1.default('tabs__items', { 'tabs__items--large': isLarge }), role: "tablist" }, tabHeadings),
         react_1.default.createElement("div", { className: "tabs__content" }, tabPanels)));
 };