@ebay/ui-core-react 1.0.0

package/ebay-switch/README.md

@@ -0,0 +1,33 @@
+# ebay-switch
+
+## Demo
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-switch--default-switch-button)
+
+## Import JS
+```jsx harmony
+import { EbaySwitch } from '@ebay/ui-core-react/ebay-switch';
+```
+## Import following styles from SKIN
+```jsx harmony
+import '@ebay/skin/switch';
+```
+## Usage
+```
+yarn add @ebay/ui-core-react
+```
+```jsx harmony
+<span className="field">
+    <EbaySwitch value="123" id="switch-1" />
+    <label className="field__label field__label--end" htmlFor="switch-1">Remember me</label>
+</span>
+```
+
+## Attributes
+
+Name | Type | Stateful | Description
+--- | --- | --- | ---
+`disabled` | Boolean | No |
+`onChange` | `{ originalEvent, value, checked }` | selected value and checked status
+
+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

@@ -0,0 +1,7 @@
+import { FC, ChangeEvent, ComponentProps } from 'react';
+declare type Props = ComponentProps<'input'> & {
+    onChange?: (e: ChangeEvent<HTMLInputElement>, value: string | number, checked: boolean) => void;
+};
+declare const EbaySwitch: FC<Props>;
+export default EbaySwitch;
+//# sourceMappingURL=ebay-switch.d.ts.map

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

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

package/ebay-switch/ebay-switch.js

@@ -0,0 +1,64 @@
+"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 EbaySwitch = function (_a) {
+    var id = _a.id, value = _a.value, name = _a.name, className = _a.className, checked = _a.checked, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, rest = __rest(_a, ["id", "value", "name", "className", "checked", "onChange"]);
+    var _c = react_1.useState(!!checked), isChecked = _c[0], setChecked = _c[1];
+    react_1.useEffect(function () {
+        setChecked(!!checked);
+    }, [checked]);
+    var handleChange = function (e) {
+        var input = e.target || {};
+        onChange(e, input.value, input.checked);
+        setChecked(input.checked);
+    };
+    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 })),
+        react_1.default.createElement("span", { className: "switch__button" })));
+};
+exports.default = EbaySwitch;

package/ebay-switch/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EbaySwitch } from './ebay-switch';
+//# sourceMappingURL=index.d.ts.map

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

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

package/ebay-switch/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var ebay_switch_1 = require("./ebay-switch");
+Object.defineProperty(exports, "EbaySwitch", { enumerable: true, get: function () { return ebay_switch_1.default; } });

package/ebay-tab/README.md

@@ -0,0 +1 @@
+# Deprecated, use [EbayTabs](../ebay-tabs) instead.

package/ebay-tab/enums.d.ts

@@ -0,0 +1,14 @@
+import { Activation, Size } from '../ebay-tabs';
+/**
+ * @deprecated Use Activation union type instead
+ */
+export declare const activations: {
+    [key: string]: Activation;
+};
+/**
+ * @deprecated Use Size union type instead
+ */
+export declare const sizes: {
+    [key: string]: Size;
+};
+//# sourceMappingURL=enums.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"enums.d.ts","sourceRoot":"","sources":["../../src/ebay-tab/enums.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAE/C;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAA;CAGpD,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;CAGxC,CAAA"}

package/ebay-tab/enums.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sizes = exports.activations = void 0;
+/**
+ * @deprecated Use Activation union type instead
+ */
+exports.activations = {
+    AUTO: "auto",
+    MANUAL: "manual"
+};
+/**
+ * @deprecated Use Size union type instead
+ */
+exports.sizes = {
+    MEDIUM: "medium",
+    LARGE: "large"
+};

package/ebay-tab/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @deprecated Use EbayTabs instead
+ */
+export { EbayTabs as EbayTab, EbayTab as EbayTabHeading, EbayTabPanel } from '../ebay-tabs';
+export { activations, sizes } from './enums';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-tab/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAC3F,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA"}

package/ebay-tab/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * @deprecated Use EbayTabs instead
+ */
+var ebay_tabs_1 = require("../ebay-tabs");
+Object.defineProperty(exports, "EbayTab", { enumerable: true, get: function () { return ebay_tabs_1.EbayTabs; } });
+Object.defineProperty(exports, "EbayTabHeading", { enumerable: true, get: function () { return ebay_tabs_1.EbayTab; } });
+Object.defineProperty(exports, "EbayTabPanel", { enumerable: true, get: function () { return ebay_tabs_1.EbayTabPanel; } });
+var enums_1 = require("./enums");
+Object.defineProperty(exports, "activations", { enumerable: true, get: function () { return enums_1.activations; } });
+Object.defineProperty(exports, "sizes", { enumerable: true, get: function () { return enums_1.sizes; } });

package/ebay-tabs/README.md

@@ -0,0 +1,59 @@
+# ebay-tab
+
+## Demo
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-tabs--default)
+
+## Import JS
+```jsx harmony
+import { EbayTab, EbayTabHeading, EbayTabPanel } from '@ebay/ui-core-react/ebay-tabs'
+```
+## Import following styles from SKIN
+```jsx harmony
+import '@ebay/skin/tabs.css';
+```
+
+## Usage
+```jsx harmony
+<EbayTabs>
+    <EbayTabHeading>Tab 1</EbayTabHeading>
+    <EbayTabHeading>Tab 2</EbayTabHeading>
+    <EbayTabHeading>Tab 3</EbayTabHeading>
+    <EbayTabPanel>Panel 1</EbayTabPanel>
+    <EbayTabPanel>Panel 2</EbayTabPanel>
+    <EbayTabPanel>Panel 3</EbayTabPanel>
+</EbayTabs>
+```
+
+## Props
+
+Name | Type | Stateful | Description
+--- | --- | --- | ---
+`index` |Number | Yes | 0-based index of selected tab heading and panel
+`fake` | Boolean | No | Whether to use link behavior for tab headings (DEPRECATED, works automatically)
+`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 }` |
+
+## EbayTabHeading
+
+### EbayTabHeading Usage
+
+```jsx harmony
+<EbayTabHeading>Tab 1</EbayTabHeading>
+```
+
+## EbayTabHeading Attributes
+
+Name | Type | Stateful | Description
+--- | --- | --- | ---
+`href` | String | No | For use with `fake` tab component (links instead of real tabs)
+
+## EbayTabPanel usage
+```jsx harmony
+<EbayTabPanel>Panel 1</EbayTabPanel>
+```

package/ebay-tabs/index.d.ts

@@ -0,0 +1,5 @@
+export { default as EbayTabs } from './tabs';
+export { default as EbayTab } from './tab';
+export { default as EbayTabPanel } from './tab-panel';
+export { Activation, Size } from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAC5C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,aAAa,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA"}

package/ebay-tabs/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tabs_1 = require("./tabs");
+Object.defineProperty(exports, "EbayTabs", { enumerable: true, get: function () { return tabs_1.default; } });
+var tab_1 = require("./tab");
+Object.defineProperty(exports, "EbayTab", { enumerable: true, get: function () { return tab_1.default; } });
+var tab_panel_1 = require("./tab-panel");
+Object.defineProperty(exports, "EbayTabPanel", { enumerable: true, get: function () { return tab_panel_1.default; } });

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

@@ -0,0 +1,9 @@
+import { ComponentProps, FC } from 'react';
+declare type TabPanelProps = ComponentProps<'div'> & {
+    index?: number;
+    selected?: boolean;
+    fake?: boolean;
+};
+declare const TabPanel: FC<TabPanelProps>;
+export default TabPanel;
+//# sourceMappingURL=tab-panel.d.ts.map

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

@@ -0,0 +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,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB,CAAA;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAyB3B,CAAA;AAEL,eAAe,QAAQ,CAAA"}

package/ebay-tabs/tab-panel.js

@@ -0,0 +1,35 @@
+"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 TabPanel = function (_a) {
+    var children = _a.children, index = _a.index, selected = _a.selected, fake = _a.fake, className = _a.className, rest = __rest(_a, ["children", "index", "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: "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

@@ -0,0 +1,12 @@
+import { ComponentProps, FC } from 'react';
+declare type TabProps = ComponentProps<'li'> & ComponentProps<'div'> & {
+    index?: number;
+    selected?: boolean;
+    href?: string;
+    onClick?: () => void;
+    onKeyDown?: () => void;
+    refCallback?: () => void;
+};
+declare const Tab: FC<TabProps>;
+export default Tab;
+//# sourceMappingURL=tab.d.ts.map

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

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

package/ebay-tabs/tab.js

@@ -0,0 +1,36 @@
+"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 Tab = function (_a) {
+    var children = _a.children, index = _a.index, selected = _a.selected, 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", "selected", "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": "default-tabpanel-" + index, "aria-selected": selected, className: classnames_1.default(className, 'tabs__item'), id: "default-tab-" + index, role: "tab", tabIndex: selected ? 0 : -1, onClick: onClick, onKeyDown: onKeyDown }),
+        react_1.default.createElement("span", null, children)));
+};
+exports.default = Tab;

package/ebay-tabs/tabs.d.ts

@@ -0,0 +1,28 @@
+import { Component, ComponentProps, ReactElement } from 'react';
+import { Activation, Size } from './types';
+declare type TabsProps = ComponentProps<'div'> & {
+    index?: number;
+    /** @deprecated Kept for backward-compatibility with eBayUI */
+    fake?: boolean;
+    size?: Size;
+    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;
+}
+export default Tabs;
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +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;CAwDzB;AAED,eAAe,IAAI,CAAA"}

package/ebay-tabs/tabs.js

@@ -0,0 +1,137 @@
+"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]; } });
+}) : (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 __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 event_utils_1 = require("../common/event-utils");
+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
+        });
+    };
+    /**
+     * 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;
+        event_utils_1.handleActionKeydown(ev, function () {
+            ev.preventDefault();
+            if (activation === 'manual') {
+                _this.onTabSelect(index);
+            }
+        });
+        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 });
+            if (activation !== 'manual') {
+                _this.onTabSelect(nextIndex);
+            }
+        });
+    };
+    Tabs.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, 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,
+                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,
+                selected: _this.state.selectedIndex === i,
+                fake: fake,
+                children: content
+            };
+            return react_1.default.cloneElement(item, itemProps);
+        });
+        return fake ? (react_1.default.createElement("div", { 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", { 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));
+exports.default = Tabs;

package/ebay-tabs/types.d.ts

@@ -0,0 +1,3 @@
+export declare type Activation = 'auto' | 'manual';
+export declare type Size = 'medium' | 'large';
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-tabs/types.ts"],"names":[],"mappings":"AAAA,oBAAY,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAA;AAC1C,oBAAY,IAAI,GAAG,QAAQ,GAAG,OAAO,CAAA"}

package/ebay-tabs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ebay-textbox/README.md

@@ -0,0 +1,72 @@
+# ebay-textbox
+
+## Demo
+
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-textbox--default)
+
+## Usage
+
+```
+yarn add @ebay/ui-core-react
+```
+
+### Import JS
+
+```jsx harmony
+import { EbayTextbox } from '@ebay/ui-core-react/ebay-textbox'
+```
+
+### Import following styles from SKIN
+
+```jsx harmony
+import "@ebay/skin/textbox";
+```
+
+### or if using CSS/SCSS
+
+```jsx
+import "@ebay/skin/textbox.css";
+```
+
+```jsx harmony
+<EbayTextbox value="Search for anything" />
+```
+
+## Props
+
+| Name            | Type     | Stateful | Required | Description                                                                                                                                               |
+| --------------- | -------- | -------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `fluid`         | Boolean  | No       | No       | Takes the full width of the container
+| `multiline`     | Boolean  | No       | No       | Renders a multi-line textbox if true                                                                                                                      |
+| `invalid`       | Boolean  | No       | No       | Indicates a field-level error with red border if true                                                                                                     |
+| `type`          | String   | No       | No       | Default: `text`, can be `password` if needed                                                                                                              |
+| `value`         | String   | No       | No       | Indicates the value of the input element, required for a controlled component.                                                                            |
+| `defaultValue`  | String   | No       | No       | Indicates the default input element value. Use when the component is not controlled.                                                                      |
+| `inputSize`     | String   | No       | No       | `default` (default), `large`                                                                                                                              |
+| `floatingLabel`  | String   | No       | No       | Indicates that the input is a floating label type and renders it as a label                                                                      |
+| `onFocus`       | Function | No       | No       | Called when input gets focus, parameters passed: `originalEvent`, `value`                                                                                 |
+| `onBlur`        | Function | No       | No       | Called when input loses focus, parameters passed: `originalEvent`, `value`                                                                                |
+| `onChange`      | Function | No       | No       | Called when input changes value, parameters passed: `originalEvent`, `value`                                                                              |
+| `onButtonClick` | Function | No       | No       | Triggers when clicking on postfix-icon-button. Requires `buttonAriaLabel` to be present in order to attach correctly                                                                              |
+
+It supports all the events supported by an input element (e.g. `onInput`, `onKeyDown`, `onKeyUp`)
+
+## EbayTextboxPrefixIcon
+| Name            | Type     | Required | Description                                                                                                                                               |
+| --------------- | -------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `name`         | String  | No       | Name of the icon to show
+
+## EbayTextboxPostfixIcon
+| Name            | Type     | Required | Description                                                                                                                                               |
+| --------------- | -------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `name`         | String  | No       | Name of the icon to show
+| `buttonAriaLabel`| String   | No    | Aria-label for postfix icon/button. Required in order to render postfix button                                                                                                                               |
+
+### EbayTextboxPrefixIcon example
+```jsx
+import { EbayTextbox, EbayTextboxPrefixIcon } from '@ebay/ui-core-react/ebay-textbox'
+
+<EbayTextbox placeholder="email">
+    <EbayTextboxPrefixIcon name="messages" />
+</EbayTextbox>
+```

package/ebay-textbox/index.d.ts

@@ -0,0 +1,5 @@
+export { default as EbayTextbox, EbayTextboxProps } from './textbox';
+export { default as EbayTextboxPrefixIcon } from './prefix-icon';
+export { default as EbayTextboxPostfixIcon } from './postfix-icon';
+export { Size } from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA"}