@ebay/ui-core-react 1.0.0

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

@@ -0,0 +1,6 @@
+export { default as EbaySectionTitle } from './section-title';
+export { default as EbaySectionTitleTitle } from './title';
+export { default as EbaySectionTitleSubtitle } from './subtitle';
+export { default as EbaySectionTitleInfo } from './info';
+export { default as EbaySectionTitleOverflow } from './overflow';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-section-title/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAC7D,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,YAAY,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,QAAQ,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,YAAY,CAAA"}

package/ebay-section-title/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var section_title_1 = require("./section-title");
+Object.defineProperty(exports, "EbaySectionTitle", { enumerable: true, get: function () { return section_title_1.default; } });
+var title_1 = require("./title");
+Object.defineProperty(exports, "EbaySectionTitleTitle", { enumerable: true, get: function () { return title_1.default; } });
+var subtitle_1 = require("./subtitle");
+Object.defineProperty(exports, "EbaySectionTitleSubtitle", { enumerable: true, get: function () { return subtitle_1.default; } });
+var info_1 = require("./info");
+Object.defineProperty(exports, "EbaySectionTitleInfo", { enumerable: true, get: function () { return info_1.default; } });
+var overflow_1 = require("./overflow");
+Object.defineProperty(exports, "EbaySectionTitleOverflow", { enumerable: true, get: function () { return overflow_1.default; } });

package/ebay-section-title/info.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps, FC } from 'react';
+declare type Props = ComponentProps<'div'>;
+declare const Info: FC<Props>;
+export default Info;
+//# sourceMappingURL=info.d.ts.map

package/ebay-section-title/info.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"info.d.ts","sourceRoot":"","sources":["../../src/ebay-section-title/info.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAGjD,aAAK,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,CAAA;AAElC,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,KAAK,CAWnB,CAAA;AAED,eAAe,IAAI,CAAA"}

package/ebay-section-title/info.js

@@ -0,0 +1,34 @@
+"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 Info = function (_a) {
+    var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
+    return (react_1.default.createElement("div", __assign({}, rest, { className: classnames_1.default(className, 'section-title__info') }), children));
+};
+exports.default = Info;

package/ebay-section-title/overflow.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps, FC } from 'react';
+declare type Props = ComponentProps<'div'>;
+declare const Overflow: FC<Props>;
+export default Overflow;
+//# sourceMappingURL=overflow.d.ts.map

package/ebay-section-title/overflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflow.d.ts","sourceRoot":"","sources":["../../src/ebay-section-title/overflow.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAGjD,aAAK,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,CAAA;AAElC,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,KAAK,CAWvB,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/ebay-section-title/overflow.js

@@ -0,0 +1,34 @@
+"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 Overflow = function (_a) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (react_1.default.createElement("div", __assign({}, rest, { className: classnames_1.default(className, 'section-title__overflow') }), children));
+};
+exports.default = Overflow;

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

@@ -0,0 +1,9 @@
+import { FC, HTMLProps, ReactNode } from 'react';
+export declare type EbaySectionTitleProps = Omit<HTMLProps<HTMLDivElement>, 'title' | 'size'> & {
+    size?: 'small' | 'large' | 'giant';
+    href?: string;
+    ctaText?: ReactNode;
+};
+declare const EbaySectionTitle: FC<EbaySectionTitleProps>;
+export default EbaySectionTitle;
+//# sourceMappingURL=section-title.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"section-title.d.ts","sourceRoot":"","sources":["../../src/ebay-section-title/section-title.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAWvD,oBAAY,qBAAqB,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,OAAO,GAAC,MAAM,CAAC,GAAG;IACtF,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC;CACnB,CAAA;AAED,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAyB/C,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/ebay-section-title/section-title.js

@@ -0,0 +1,49 @@
+"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 component_utils_1 = require("../common/component-utils");
+var index_1 = require("./index");
+var cta_1 = __importDefault(require("./cta"));
+var EbaySectionTitle = function (_a) {
+    var _b;
+    var href = _a.href, ctaText = _a.ctaText, size = _a.size, className = _a.className, children = _a.children, rest = __rest(_a, ["href", "ctaText", "size", "className", "children"]);
+    var sectionTitleClass = classnames_1.default(className, 'section-title', (_b = {},
+        _b["section-title--" + size] = size,
+        _b));
+    var title = component_utils_1.findComponent(children, index_1.EbaySectionTitleTitle);
+    var subtitle = component_utils_1.findComponent(children, index_1.EbaySectionTitleSubtitle);
+    var info = component_utils_1.findComponent(children, index_1.EbaySectionTitleInfo);
+    var overflow = component_utils_1.findComponent(children, index_1.EbaySectionTitleOverflow);
+    return (react_1.default.createElement("div", __assign({}, rest, { className: sectionTitleClass }),
+        react_1.default.createElement("div", { className: "section-title__title-container" },
+            title || react_1.default.createElement(index_1.EbaySectionTitleTitle, null, children),
+            subtitle),
+        href && react_1.default.createElement(cta_1.default, { href: href, ctaText: ctaText }) || info || overflow));
+};
+exports.default = EbaySectionTitle;

package/ebay-section-title/subtitle.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps, FC } from 'react';
+declare type Props = ComponentProps<'span'>;
+declare const Subtitle: FC<Props>;
+export default Subtitle;
+//# sourceMappingURL=subtitle.d.ts.map

package/ebay-section-title/subtitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"subtitle.d.ts","sourceRoot":"","sources":["../../src/ebay-section-title/subtitle.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAGjD,aAAK,KAAK,GAAG,cAAc,CAAC,MAAM,CAAC,CAAA;AAEnC,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,KAAK,CAWvB,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/ebay-section-title/subtitle.js

@@ -0,0 +1,34 @@
+"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 Subtitle = function (_a) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (react_1.default.createElement("span", __assign({}, rest, { className: classnames_1.default(className, 'section-title__subtitle') }), children));
+};
+exports.default = Subtitle;

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

@@ -0,0 +1,5 @@
+import { ComponentProps, FC } from 'react';
+declare type Props = ComponentProps<'h2'>;
+declare const Title: FC<Props>;
+export default Title;
+//# sourceMappingURL=title.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../src/ebay-section-title/title.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAGjD,aAAK,KAAK,GAAG,cAAc,CAAC,IAAI,CAAC,CAAA;AAEjC,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,KAAK,CAWpB,CAAA;AAED,eAAe,KAAK,CAAA"}

package/ebay-section-title/title.js

@@ -0,0 +1,34 @@
+"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 Title = function (_a) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (react_1.default.createElement("h2", __assign({}, rest, { className: classnames_1.default(className, 'section-title__title') }), children));
+};
+exports.default = Title;

package/ebay-select/README.md

@@ -0,0 +1,62 @@
+# EbaySelect
+This component is used to create a native `<select>` form element with default browser styling.
+
+## Demo
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-select--default)
+
+## Import JS
+```jsx harmony
+import { EbaySelect, EbaySelectOption } from '@ebay/ui-core-react/ebay-select'
+```
+## Import following styles from SKIN
+```jsx harmony
+import '@ebay/skin/select';
+```
+## Import styles using SCSS/CSS
+```jsx harmony
+import '@ebay/skin/select.css'
+```
+
+## Usage
+When no selected option is specified:
+```jsx harmony
+ <EbaySelect name='formSelect'>
+    <EbaySelectOption value='1'>Option 1</EbaySelectOption>
+    <EbaySelectOption value='2'>Option 2</EbaySelectOption>
+    <EbaySelectOption value='3'>Option 3</EbaySelectOption>
+</EbaySelect>
+```
+
+When a selected option is specified:
+```jsx harmony
+<EbaySelect name='formSelect' value='2'>
+    <EbaySelectOption value='1'>Option 1</EbaySelectOption>
+    <EbaySelectOption value='2'>Option 2</EbaySelectOption>
+    <EbaySelectOption value='3'>Option 3</EbaySelectOption>
+</EbaySelect>
+```
+Please look at this documentation as to the recommended way in React to pre-select a value:
+https://reactjs.org/docs/forms.html#the-select-tag. Notice that the selected value is set right in the props of `<EbaySelect/>`.
+
+## EbaySelect Attributes
+
+| Name            | Type     | Required | Description                                                  |
+| --------------- | -------- | -------- | ------------------------------------------------------------ |
+| `name`          | String   | Yes      | passed to the `<select>` element                             |
+| `value`         | String   | No       | Set the value of the `<select>` element. Use this for **controlled component**. |
+| `defaultValue`  | String   | No       | Set the initial value for `<select>` elemtn, only for **uncontrolled  component**. |
+| `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        |
+
+## EbaySelectOption Attributes
+
+| Name    | Type   | Required | Description                      |
+| ------- | ------ | -------- | -------------------------------- |
+| `value` | String | Yes      | passed to the `<option>` element |
+
+It supports all the supported aria attributes (e.g. `aria-label`, `aria-invalid`)

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

@@ -0,0 +1,7 @@
+import { ComponentProps, FC } from 'react';
+declare type OptionProps = ComponentProps<'option'> & {
+    optgroup?: string;
+};
+declare const EbaySelectOption: FC<OptionProps>;
+export default EbaySelectOption;
+//# sourceMappingURL=ebay-select-option.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ebay-select-option.d.ts","sourceRoot":"","sources":["../../src/ebay-select/ebay-select-option.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjD,aAAK,WAAW,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,WAAW,CACG,CAAA;AAEzC,eAAe,gBAAgB,CAAA"}

package/ebay-select/ebay-select-option.js

@@ -0,0 +1,33 @@
+"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 EbaySelectOption = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return react_1.default.createElement("option", __assign({}, rest), children);
+};
+exports.default = EbaySelectOption;

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

@@ -0,0 +1,13 @@
+import { ChangeEvent, ComponentProps, FC } from 'react';
+declare type SelectValue = string | ReadonlyArray<string> | number;
+export declare type EbaySelectProps = ComponentProps<'select'> & {
+    borderless?: boolean;
+    defaultValue?: SelectValue;
+    onChange?: (e: ChangeEvent<HTMLSelectElement>, selectedIndex: number, newValue: SelectValue) => void;
+    floatingLabel?: string;
+    inputSize?: 'default' | 'large';
+    invalid?: boolean;
+};
+declare const EbaySelect: FC<EbaySelectProps>;
+export default EbaySelect;
+//# sourceMappingURL=ebay-select.d.ts.map

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

@@ -0,0 +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,cAAc,CAAC,QAAQ,CAAC,GAAG;IACrD,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"}

package/ebay-select/ebay-select.js

@@ -0,0 +1,137 @@
+"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_select_option_1 = __importDefault(require("./ebay-select-option"));
+var ebay_icon_1 = require("../ebay-icon");
+var component_utils_1 = require("../common/component-utils");
+var hooks_1 = require("../ebay-floating-label/hooks");
+var isControlled = function (value) { return typeof value !== 'undefined'; };
+var EbaySelect = function (_a) {
+    var controlledValue = _a.value, defaultValue = _a.defaultValue, className = _a.className, borderless = _a.borderless, name = _a.name, disabled = _a.disabled, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, _c = _a.onBlur, onBlur = _c === void 0 ? function () { } : _c, _d = _a.onFocus, onFocus = _d === void 0 ? function () { } : _d, floatingLabel = _a.floatingLabel, children = _a.children, inputSize = _a.inputSize, invalid = _a.invalid, rest = __rest(_a, ["value", "defaultValue", "className", "borderless", "name", "disabled", "onChange", "onBlur", "onFocus", "floatingLabel", "children", "inputSize", "invalid"]);
+    var isFieldInvalid = invalid || rest['aria-invalid'] === 'true';
+    var _e = react_1.useState(defaultValue), value = _e[0], setValue = _e[1];
+    var selectRef = react_1.useRef(null);
+    var _f = hooks_1.useFloatingLabel({
+        ref: selectRef,
+        inputId: rest.id,
+        className: className,
+        disabled: disabled,
+        label: floatingLabel,
+        inputValue: controlledValue,
+        inputSize: inputSize,
+        invalid: isFieldInvalid
+    }), label = _f.label, Container = _f.Container, onFloatingLabelBlur = _f.onBlur, onFloatingLabelFocus = _f.onFocus, ref = _f.ref;
+    var handleSelectChange = function (e) {
+        var _a = e.target, newValue = _a.value, selectedIndex = _a.selectedIndex;
+        if (!isControlled(controlledValue)) {
+            setValue(newValue);
+        }
+        onChange(e, selectedIndex, newValue);
+    };
+    var handleBlur = function (event) {
+        onBlur(event);
+        onFloatingLabelBlur();
+    };
+    var handleFocus = function (event) {
+        onFocus(event);
+        onFloatingLabelFocus();
+    };
+    var selectClassName = classnames_1.default('select', className, {
+        'select--borderless': borderless,
+        'select--large': inputSize === "large"
+    });
+    return (react_1.default.createElement(Container, null,
+        label,
+        react_1.default.createElement("span", { className: selectClassName },
+            react_1.default.createElement("select", __assign({}, rest, { name: name, value: isControlled(controlledValue) ? controlledValue : value, disabled: disabled, onChange: handleSelectChange, onBlur: handleBlur, onFocus: handleFocus, ref: ref }), options(children)),
+            react_1.default.createElement(ebay_icon_1.EbayIcon, { name: "dropdown", height: "8", width: "8" }))));
+};
+exports.default = EbaySelect;
+function optionGroups(data) {
+    var optGroups = {};
+    data.forEach(function (opt) {
+        var option = opt.props;
+        if (option.optgroup) {
+            if (!Object.prototype.hasOwnProperty.call(optGroups, option.optgroup)) {
+                optGroups[option.optgroup] = [];
+            }
+            optGroups[option.optgroup].push(option);
+        }
+    });
+    return optGroups;
+}
+function options(children) {
+    var renderedGroups = [];
+    var allOptions = [];
+    var optGroups = {};
+    var withinGroup = false;
+    var childrenOpts = component_utils_1.filterByType(children, ebay_select_option_1.default).map(function (c) { return react_1.cloneElement(c, {}); });
+    if (childrenOpts) {
+        optGroups = optionGroups(childrenOpts);
+        var currentGroupName_1;
+        childrenOpts.forEach(function (option, idx) {
+            var _a = option.props, value = _a.value, optionClassName = _a.optionClassName, optionChildren = _a.children, optgroup = _a.optgroup;
+            withinGroup = optgroup && renderedGroups.indexOf(optgroup) === -1;
+            if (withinGroup) { // This will always be true when the very first group is encountered.
+                currentGroupName_1 = optgroup;
+                var currentGroupOptions = optGroups[currentGroupName_1];
+                var opts = currentGroupOptions.map(function (groupOption) { return (react_1.default.createElement(ebay_select_option_1.default, { key: "opt-" + groupOption.value, value: groupOption.value, className: groupOption.optionClassName }, groupOption.children)); });
+                allOptions.push(react_1.default.createElement("optgroup", { key: idx, label: optgroup }, opts));
+                renderedGroups.push(optgroup);
+            }
+            else if (!optgroup) {
+                /**
+                 * The check below is necessary because we could still be in a group which has already
+                 * been added to the renderedGroups array. In that case it will be skipped.
+                 */
+                allOptions.push(react_1.default.createElement(ebay_select_option_1.default, { key: idx, value: value, className: optionClassName }, optionChildren));
+            }
+        });
+        return allOptions;
+    }
+}

package/ebay-select/index.d.ts

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

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

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

package/ebay-select/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var ebay_select_1 = require("./ebay-select");
+Object.defineProperty(exports, "EbaySelect", { enumerable: true, get: function () { return ebay_select_1.default; } });
+var ebay_select_option_1 = require("./ebay-select-option");
+Object.defineProperty(exports, "EbaySelectOption", { enumerable: true, get: function () { return ebay_select_option_1.default; } });

package/ebay-signal/README.md

@@ -0,0 +1,35 @@
+# ebay-signal
+
+##Description
+Signals are data-backed recommendations to help customers make more informed decisions. There are four signal statuses, each corresponding to a specific color: `trustworthy`, `recent`, `time-sensitive` & `neutral`. Defaults to `neutral` if none specified.
+
+## Demo
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-signal)
+
+## Usage
+```
+yarn add @ebay/ui-core-react
+```
+### Import JS
+```jsx harmony
+import { EbaySignal } from '@ebay/ui-core-react/ebay-signal';
+```
+## Import styles from Skin
+```jsx harmony
+import '@ebay/skin/signal'
+```
+
+## ...or using SCSS/CSS
+```jsx harmony
+import '@ebay/skin/signal.css'
+```
+
+```jsx harmony
+<EbaySignal status="trustworthy">Trustworthy</EbaySignal>
+```
+
+## Attributes
+
+Name | Type | Stateful | Description
+--- | --- | --- | ---
+`status` | String | No | Status of signal; determines color. Possible values: `trustworthy`, `recent`, `time-sensitive` & `neutral` (default)

package/ebay-signal/index.d.ts

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

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

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

package/ebay-signal/index.js

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

package/ebay-signal/signal.d.ts

@@ -0,0 +1,8 @@
+import { FC, ComponentProps } from 'react';
+export declare type SignalStatus = 'neutral' | 'trustworthy' | 'time-sensitive' | 'recent';
+declare type Props = ComponentProps<'span'> & {
+    status?: SignalStatus;
+};
+declare const EbaySignal: FC<Props>;
+export default EbaySignal;
+//# sourceMappingURL=signal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"signal.d.ts","sourceRoot":"","sources":["../../src/ebay-signal/signal.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAGjD,oBAAY,YAAY,GAAG,SAAS,GAAG,aAAa,GAAG,gBAAgB,GAAG,QAAQ,CAAA;AAElF,aAAK,KAAK,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG;IAClC,MAAM,CAAC,EAAE,YAAY,CAAA;CACxB,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,KAAK,CAGzB,CAAA;AAED,eAAe,UAAU,CAAA"}