@ebay/ui-core-react 1.3.0 → 1.4.2

package/common/range.d.ts

@@ -0,0 +1,2 @@
+export declare const range: (start: number, stop: number, step?: number) => number[];
+//# sourceMappingURL=range.d.ts.map

package/common/range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"range.d.ts","sourceRoot":"","sources":["../../src/common/range.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,UAAU,MAAM,QAAO,MAAM,oBAAY,MAAM,EACwB,CAAA"}

package/common/range.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.range = void 0;
+exports.range = function (start, stop, step) {
+    if (step === void 0) { step = 1; }
+    return Array(Math.ceil(((stop + 1) - start) / step)).fill(start).map(function (x, y) { return x + y * step; });
+};

package/ebay-dialog-base/dialog-base-with-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-base-with-state.d.ts","sourceRoot":"","sources":["../../src/ebay-dialog-base/dialog-base-with-state.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAY,YAAY,EAAE,MAAM,OAAO,CAAA;AAGrD,OAAO,EAAc,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAGrE,eAAO,MAAM,mBAAmB,mDAM7B,eAAe,CAAC,WAAW,CAAC,KAAG,YAiCjC,CAAA;AAED,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"dialog-base-with-state.d.ts","sourceRoot":"","sources":["../../src/ebay-dialog-base/dialog-base-with-state.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAY,YAAY,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,EAAc,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAGrE,eAAO,MAAM,mBAAmB,mDAM7B,eAAe,CAAC,WAAW,CAAC,KAAG,YA+BjC,CAAA;AAED,eAAe,mBAAmB,CAAA"}

package/ebay-dialog-base/dialog-base-with-state.js

@@ -40,13 +40,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogBaseWithState = void 0;
 var react_1 = __importStar(require("react"));
-var react_focus_lock_1 = __importDefault(require("react-focus-lock"));
 var react_remove_scroll_1 = require("react-remove-scroll");
 var dialogBase_1 = require("./components/dialogBase");
 var index_1 = require("./index");
@@ -61,8 +57,7 @@ exports.DialogBaseWithState = function (_a) {
         return ![index_1.EbayDialogHeader, index_1.EbayDialogFooter, index_1.EbayDialogCloseButton].some(function (c) { return c === child.type; });
     });
     var dialogBase = (react_1.default.createElement(dialogBase_1.DialogBase, __assign({}, rest, { open: open, isModal: shouldRenderModal, header: header, footer: footer, closeButton: closeButton, animated: animated }), content));
-    var renderOverLay = function () { return shouldRenderModal ? (react_1.default.createElement(react_focus_lock_1.default, { returnFocus: { preventScroll: false } },
-        react_1.default.createElement(react_remove_scroll_1.RemoveScroll, { enabled: open }, dialogBase))) : dialogBase; };
+    var renderOverLay = function () { return shouldRenderModal ? (react_1.default.createElement(react_remove_scroll_1.RemoveScroll, { enabled: open }, dialogBase)) : dialogBase; };
     return animated || open ? renderOverLay() : null;
 };
 exports.default = exports.DialogBaseWithState;

package/ebay-star-rating/README.md

@@ -0,0 +1,36 @@
+# ebay-star-rating
+For full stars use (rating from 0-5): ebay-star-rating-{rating} For half stars use: ebay-star-rating-{rating}-5 DS v1.0.0
+## Demo
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-star-rating--dynamic-stars)
+
+## Usage
+```
+yarn add @ebay/ui-core-react
+```
+
+### Import JS
+```jsx harmony
+import { EbayStarRating } from '@ebay/ui-core-react/ebay-star-rating'
+```
+
+## Import following styles from Skin
+```jsx harmony
+import '@ebay/skin/star-rating'
+```
+
+## ...or using SCSS/CSS
+```jsx harmony
+import '@ebay/skin/star-rating.css'
+```
+
+```jsx harmony
+<EbayStarRating aria-label="Star Rating" value="1"/>
+<EbayStarRating aria-label="Star Rating" value="0-5"/>
+```
+
+## Attributes
+
+Name | Type | Stateful | Description
+--- | --- | --- | ---
+| `a11yText`       | String  | No       | Yes      | text for non-decorative inline icon; icon is assumed to be decorative if this is not passed                  |
+| `value`           | String  | No       | Yes      | The amount of stars to be filled. Can be "2-5" for 2 and a half stars. |

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

@@ -0,0 +1,3 @@
+export { default as EbayStarRating } from './star-rating';
+export * from './star-rating';
+//# sourceMappingURL=index.d.ts.map

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

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

package/ebay-star-rating/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var star_rating_1 = require("./star-rating");
+Object.defineProperty(exports, "EbayStarRating", { enumerable: true, get: function () { return star_rating_1.default; } });
+__exportStar(require("./star-rating"), exports);

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

@@ -0,0 +1,8 @@
+import { ComponentProps, FC } from 'react';
+declare type Props = ComponentProps<'div'> & {
+    a11yText?: string;
+    value?: string;
+};
+declare const EbayStarRating: FC<Props>;
+export default EbayStarRating;
+//# sourceMappingURL=star-rating.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"star-rating.d.ts","sourceRoot":"","sources":["../../src/ebay-star-rating/star-rating.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAKjD,aAAK,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAA;AAED,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,KAAK,CAe7B,CAAA;AAGD,eAAe,cAAc,CAAA"}

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

@@ -0,0 +1,37 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var ebay_icon_1 = require("../ebay-icon");
+var range_1 = require("../common/range");
+var stars = range_1.range(1, 5);
+var EbayStarRating = function (_a) {
+    var value = _a.value, a11yText = _a.a11yText, className = _a.className, rest = __rest(_a, ["value", "a11yText", "className"]);
+    return (react_1.default.createElement("div", __assign({ role: "img", "aria-label": a11yText, className: classnames_1.default('star-rating', className), "data-stars": value }, rest), stars.map(function (i) { return (react_1.default.createElement(ebay_icon_1.EbayIcon, { key: i, className: "star-rating__icon", name: "starDynamic" })); })));
+};
+exports.default = EbayStarRating;

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

@@ -0,0 +1,37 @@
+# ebay-star-rating-select
+use (rating from 0-5)
+## Demo
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-star-rating-select--isolated)
+
+## Usage
+```
+yarn add @ebay/ui-core-react
+```
+
+### Import JS
+```jsx harmony
+import { EbayStarRatingSelect } from '@ebay/ui-core-react/ebay-star-rating-select'
+```
+
+## Import following styles from Skin
+```jsx harmony
+import '@ebay/skin/star-rating-select'
+```
+
+## ...or using SCSS/CSS
+```jsx harmony
+import '@ebay/skin/star-rating.css'
+```
+
+```jsx harmony
+<EbayStarRatingSelect value={1}>
+```
+
+## Attributes
+
+Name | Type | Stateful | Description
+--- | --- | --- | ---
+| `a11yStarText`       | array  | No       | Yes      | array of strings for star inputs              |
+| `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

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

@@ -0,0 +1,3 @@
+export { default as EbayStarRatingSelect } from './star-rating-select';
+export * from './star-rating-select';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-star-rating-select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AACtE,cAAc,sBAAsB,CAAA"}

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

@@ -0,0 +1,15 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var star_rating_select_1 = require("./star-rating-select");
+Object.defineProperty(exports, "EbayStarRatingSelect", { enumerable: true, get: function () { return star_rating_select_1.default; } });
+__exportStar(require("./star-rating-select"), exports);

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

@@ -0,0 +1,14 @@
+import { ChangeEvent, ComponentProps, FC, MouseEvent } from 'react';
+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;
+};
+declare const EbayStarRatingSelect: FC<Props>;
+export default EbayStarRatingSelect;
+//# sourceMappingURL=star-rating-select.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,89 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var ebay_icon_1 = require("../ebay-icon");
+var range_1 = require("../common/range");
+var random_id_1 = require("../common/random-id");
+var stars = range_1.range(1, 5);
+var getValue = function (val) {
+    var value = parseInt(val, 0) || 0;
+    if (value > 5) {
+        value = 0;
+    }
+    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];
+    react_1.useEffect(function () {
+        setChecked(getValue(value));
+    }, [value]);
+    var handleKeyDown = function (i) { return function (e) {
+        if (!disabled && onKeyDown) {
+            setChecked(getValue(i));
+            onKeyDown(e, i);
+        }
+    }; };
+    var handleClick = function (i) { return function (e) {
+        if (!disabled && onChange) {
+            setChecked(getValue(i));
+            onChange(e, i);
+        }
+    }; };
+    var handleFocus = function (i) { return function (e) {
+        if (!disabled && onFocus) {
+            setChecked(getValue(i));
+            onFocus(e, 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 },
+        react_1.default.createElement("input", { "aria-label": a11yStarText === null || a11yStarText === void 0 ? void 0 : a11yStarText[i - 1], className: classnames_1.default('star-rating-select__control', { 'star-rating-select__control--filled': i <= checkedValue }), type: "radio", name: name, value: i, disabled: disabled, defaultChecked: checkedValue === i, onClick: handleClick(i), onFocus: handleFocus(i), onKeyDown: handleKeyDown(i) }),
+        react_1.default.createElement("span", { className: "star-rating-select__radio-icon" },
+            react_1.default.createElement(ebay_icon_1.EbayIcon, { className: "star-rating__icon", name: "starDynamic" })))); })));
+};
+exports.default = EbayStarRatingSelect;

package/ebay-tabs/tabs.d.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentProps, ReactElement } from 'react';
+import { ComponentProps, FC } from 'react';
 import { Activation, Size } from './types';
 declare type TabsProps = ComponentProps<'div'> & {
     index?: number;
@@ -8,21 +8,6 @@ declare type TabsProps = ComponentProps<'div'> & {
     activation?: Activation;
     onTabSelect?: (index: number) => void;
 };
-declare type State = {
-    selectedIndex: number;
-    focusedIndex: number;
-};
-declare class Tabs extends Component<TabsProps, State> {
-    headings: HTMLElement[];
-    constructor(props: TabsProps);
-    componentDidUpdate(prevProps: TabsProps): void;
-    onTabSelect(i: number): void;
-    /**
-     * Handle a11y for heading
-     * https://ebay.gitbooks.io/mindpatterns/content/disclosure/tabs.html
-     */
-    onTabKeyDown(ev: KeyboardEvent, index: number): void;
-    render(): ReactElement;
-}
+declare const Tabs: FC<TabsProps>;
 export default Tabs;
 //# sourceMappingURL=tabs.d.ts.map

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,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAItE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAI1C,aAAK,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAE9D,IAAI,CAAC,EAAE,OAAO,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,aAAK,KAAK,GAAG;IACT,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;CACxB,CAAA;AAGD,cAAM,IAAK,SAAQ,SAAS,CAAC,SAAS,EAAE,KAAK,CAAC;IAC1C,QAAQ,EAAE,WAAW,EAAE,CAAC;gBAEZ,KAAK,EAAE,SAAS;IAc5B,kBAAkB,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI;IAO9C,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAU5B;;;OAGG;IACH,YAAY,CAAC,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAyBpD,MAAM,IAAI,YAAY;CA2DzB;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,EAAuB,MAAM,OAAO,CAAA;AAIpF,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAI1C,aAAK,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAE9D,IAAI,CAAC,EAAE,OAAO,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,CA0GvB,CAAA;AAED,eAAe,IAAI,CAAA"}

package/ebay-tabs/tabs.js

@@ -1,17 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 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]; } });
@@ -41,99 +28,79 @@ var tab_1 = __importDefault(require("./tab"));
 var tab_panel_1 = __importDefault(require("./tab-panel"));
 var component_utils_1 = require("../common/component-utils");
 var classnames_1 = __importDefault(require("classnames"));
-// todo: convert to hooks
-var Tabs = /** @class */ (function (_super) {
-    __extends(Tabs, _super);
-    function Tabs(props) {
-        var _this = _super.call(this, props) || this;
-        var _a = props.index, index = _a === void 0 ? 0 : _a;
-        _this.onTabSelect = _this.onTabSelect.bind(_this);
-        _this.headings = [];
-        _this.state = {
-            selectedIndex: index,
-            focusedIndex: index
-        };
-        return _this;
-    }
-    Tabs.prototype.componentDidUpdate = function (prevProps) {
-        var _a;
-        if (this.props.index !== prevProps.index) {
-            this.onTabSelect(this.props.index);
-        }
-        (_a = this.headings[this.state.focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    Tabs.prototype.onTabSelect = function (i) {
-        if (this.props.onTabSelect) {
-            this.props.onTabSelect(i);
-        }
-        this.setState({
-            selectedIndex: i,
-            focusedIndex: i
-        });
+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 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) {
+        onTabSelect(i);
+        setSelectedIndex(i);
+        setFocusedIndex(i);
     };
     /**
      * Handle a11y for heading
      * https://ebay.gitbooks.io/mindpatterns/content/disclosure/tabs.html
      */
-    Tabs.prototype.onTabKeyDown = function (ev, index) {
-        var _this = this;
-        var _a = this.props, _b = _a.activation, activation = _b === void 0 ? 'auto' : _b, children = _a.children;
+    var onKeyDown = function (ev, i) {
         event_utils_1.handleActionKeydown(ev, function () {
             ev.preventDefault();
             if (activation === 'manual') {
-                _this.onTabSelect(index);
+                onSelect(i);
             }
         });
         event_utils_1.handleLeftRightArrowsKeydown(ev, function () {
             ev.preventDefault();
             var len = component_utils_1.filterByType(children, tab_1.default).length;
             var direction = ['Left', 'ArrowLeft'].includes(ev.key) ? -1 : 1;
-            var nextIndex = (_this.state.focusedIndex + len + direction) % len;
-            _this.setState({ focusedIndex: nextIndex });
+            var nextIndex = (focusedIndex + len + direction) % len;
+            setFocusedIndex(nextIndex);
             if (activation !== 'manual') {
-                _this.onTabSelect(nextIndex);
+                onSelect(nextIndex);
             }
         });
     };
-    Tabs.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, id = _a.id, className = _a.className, _b = _a.size, size = _b === void 0 ? 'medium' : _b, children = _a.children;
-        var fake = component_utils_1.filterBy(children, function (_a) {
-            var type = _a.type, props = _a.props;
-            return type === tab_1.default && props.href;
-        }).length > 0;
-        var large = size === 'large';
-        var tabHeadings = component_utils_1.filterByType(children, tab_1.default).map(function (item, i) {
-            var _a = item.props, href = _a.href, content = _a.children;
-            var itemProps = {
-                refCallback: function (ref) { _this.headings[i] = ref; },
-                index: i,
-                parentId: id,
-                selected: _this.state.selectedIndex === i,
-                href: href,
-                children: content,
-                onClick: function () { _this.onTabSelect(i); },
-                onKeyDown: function (e) { _this.onTabKeyDown(e, i); }
-            };
-            return react_1.default.cloneElement(item, itemProps);
-        });
-        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: _this.state.selectedIndex === i,
-                fake: fake,
-                children: content
-            };
-            return react_1.default.cloneElement(item, itemProps);
-        });
-        return fake ? (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': large }) }, tabHeadings),
-            react_1.default.createElement("div", { className: "fake-tabs__content" }, tabPanels))) : (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': large }), role: "tablist" }, tabHeadings),
-            react_1.default.createElement("div", { className: "tabs__content" }, tabPanels)));
-    };
-    return Tabs;
-}(react_1.Component));
+    react_1.useEffect(function () {
+        onSelect(index);
+    }, [index]);
+    react_1.useEffect(function () {
+        var _a;
+        (_a = headings[focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [focusedIndex]);
+    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) {
+        var _a = item.props, href = _a.href, content = _a.children;
+        var itemProps = {
+            refCallback: function (ref) { headings[i] = ref; },
+            index: i,
+            parentId: id,
+            selected: selectedIndex === i,
+            href: href,
+            children: content,
+            onClick: function () { onSelect(i); },
+            onKeyDown: function (e) { onKeyDown(e, i); }
+        };
+        return react_1.cloneElement(item, itemProps);
+    });
+    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
+        };
+        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') },
+        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)));
+};
 exports.default = Tabs;

package/index.d.ts

@@ -14,6 +14,8 @@ export { EbayProgressBar, EbayProgressBarProps } from './ebay-progress-bar';
 export { EbayRadio } from './ebay-radio';
 export { EbayBadge } from './ebay-badge';
 export { EbaySignal, SignalStatus } from './ebay-signal';
+export { EbayStarRating } from './ebay-star-rating';
+export { EbayStarRatingSelect } from './ebay-star-rating-select';
 export { EbaySwitch } from './ebay-switch';
 export { EbayCheckbox } from './ebay-checkbox';
 export { EbayBreadcrumbs, EbayBreadcrumbItem } from './ebay-breadcrumbs';

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/index.js

@@ -44,6 +44,10 @@ var ebay_badge_1 = require("./ebay-badge");
 Object.defineProperty(exports, "EbayBadge", { enumerable: true, get: function () { return ebay_badge_1.EbayBadge; } });
 var ebay_signal_1 = require("./ebay-signal");
 Object.defineProperty(exports, "EbaySignal", { enumerable: true, get: function () { return ebay_signal_1.EbaySignal; } });
+var ebay_star_rating_1 = require("./ebay-star-rating");
+Object.defineProperty(exports, "EbayStarRating", { enumerable: true, get: function () { return ebay_star_rating_1.EbayStarRating; } });
+var ebay_star_rating_select_1 = require("./ebay-star-rating-select");
+Object.defineProperty(exports, "EbayStarRatingSelect", { enumerable: true, get: function () { return ebay_star_rating_select_1.EbayStarRatingSelect; } });
 var ebay_switch_1 = require("./ebay-switch");
 Object.defineProperty(exports, "EbaySwitch", { enumerable: true, get: function () { return ebay_switch_1.EbaySwitch; } });
 var ebay_checkbox_1 = require("./ebay-checkbox");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebay/ui-core-react",
-  "version": "1.3.0",
+  "version": "1.4.2",
   "description": "Skin components build off React",
   "main": "index.js",
   "types": "index.d.ts",
@@ -49,7 +49,6 @@
     "classnames": "^2.2.6",
     "makeup-keyboard-trap": "^0.4.1",
     "makeup-screenreader-trap": "^0.4.1",
-    "react-focus-lock": "^2.9.1",
     "react-remove-scroll": "^2.2.0"
   },
   "devDependencies": {