@ebay/ui-core-react 6.3.0 → 7.0.0

package/ebay-switch/README.md

@@ -1,16 +1,18 @@
-# ebay-switch
+# EbaySwitch
 
 ## Demo
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-switch--default-switch-button)
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/form-input-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
@@ -24,14 +26,14 @@ yarn add @ebay/ui-core-react
 
 ## Attributes
 
-Name | Type | Stateful | Description
---- | --- | --- | ---
-`disabled` | Boolean | No |
+| Name       | Type    | Stateful | Description |
+| ---------- | ------- | -------- | ----------- |
+| `disabled` | Boolean | No       |             |
 
 ## Callbacks
-Name | Data | Description
---- | --- | --- | ---
-`onChange` | `(ChangeEvent, { value: string, checked: boolean }` | Triggered on change
+| Name       | Data                                                | Description |
+| ---------- | --------------------------------------------------- | ----------- |
+| `onChange` | `(ChangeEvent, { value: string, checked: boolean }` | Triggered on change |
 
 Note: For this component, `className`/`style` are applied to the root tag, while all other HTML attributes are applied to the `input` tag.
 

package/ebay-tabs/README.md

@@ -1,7 +1,7 @@
-# ebay-tab
+# EbayTabs
 
 ## Demo
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-tabs--default)
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/navigation-disclosure-ebay-tabs--default-tabs)
 
 ## Import JS
 ```jsx harmony

package/ebay-textbox/README.md

@@ -1,8 +1,7 @@
-# ebay-textbox
+# EbayTextbox
 
 ## Demo
-
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-textbox--default)
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/form-input-ebay-textbox--default-textbox)
 
 ## Usage
 
@@ -36,45 +35,44 @@ import "@ebay/skin/floating-label.css";
 
 ## 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                                                                                                                      |
-| `opaqueLabel`   | Boolean  | No       | No       | Only works with floating label. If set, then background is obscured of the floating label. Used with textarea to prevent label overlap                                                                                                                      |
-| `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                                                                      |
+| 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 |
+| `opaqueLabel`   | Boolean  | No       | No       | Only works with floating label. If set, then background is obscured of the floating label. Used with textarea to prevent label overlap |
+| `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 |
 
 ## Callbacks
-| Name | Required | Description | Arguments |
-|------|----------|-------------|-----------|
-
-| `onChange`      | No       | Triggered when focus leaves and value is changed. | `(ChangeEvent, { value: string })` |                                                                              |
-| `onInputChange`      | No       | Triggered when the value of the input is changed. | `(ChangeEvent, { value: string })` |                                                                              |
-| `onFocus`       | No       | Called when input gets focus | `(FocusEvent, { value: string })`                                                                                 |
-| `onBlur`        | No       | Called when input loses focus | `(FocusEvent, { value: string })`                                                                                |
-| `onKeyPress`        | No       | Called on key press | `(KeyboardEvent, { value: string })`                                                                                |
-| `onKeyUp`        | No       | Called on key up | `(KeyboardEvent, { value: string })`                                                                                |
-| `onKeyDown`        | No       | Called on key down | `(KeyboardEvent, { value: string })`                                                                                |
-| `onInvalid`        | No       | Triggered when value is invalid | `(ChangeEvent, { value: string })`                                                                                |
-| `onFloatingLabelInit`        | No       | Triggered when floating label is initialized | `()`                                                                                |
-| `onButtonClick` | No       | Triggers when clicking on postfix-icon-button. Requires `buttonAriaLabel` to be present in order to attach correctly | `(MouseEvent, { value: string })` |
+| Name                  | Required | Description                                                                                                          | Arguments   |
+| --------------------- | -------- |--------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `onChange`            | No       | Triggered when focus leaves and value is changed.                                                                    | `(ChangeEvent, { value: string })` |
+| `onInputChange`       | No       | Triggered when the value of the input is changed.                                                                    | `(ChangeEvent, { value: string })` |
+| `onFocus`             | No       | Called when input gets focus                                                                                         | `(FocusEvent, { value: string })` |
+| `onBlur`              | No       | Called when input loses focus                                                                                        | `(FocusEvent, { value: string })` |
+| `onKeyPress`          | No       | Called on key press                                                                                                  | `(KeyboardEvent, { value: string })` |
+| `onKeyUp`             | No       | Called on key up                                                                                                     | `(KeyboardEvent, { value: string })` |
+| `onKeyDown`           | No       | Called on key down                                                                                                   | `(KeyboardEvent, { value: string })` |
+| `onInvalid`           | No       | Triggered when value is invalid                                                                                      | `(ChangeEvent, { value: string })` |
+| `onFloatingLabelInit` | No       | Triggered when floating label is initialized                                                                         | `()` |
+| `onButtonClick`       | No       | Triggers when clicking on postfix-icon-button. Requires `buttonAriaLabel` to be present in order to attach correctly | `(MouseEvent, { value: string })` |
 
 It supports all the events supported by an input element (e.g. `onInput`, `onPaste`)
 
 ## EbayTextboxPrefixIcon
-| Name            | Type     | Required | Description                                                                                                                                               |
-| --------------- | -------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `name`         | String  | No       | Name of the icon to show
+| 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                                                                                                                               |
+| 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

package/ebay-textbox/index.d.ts

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

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

@@ -1 +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"}
+{"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,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AAClE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA"}

package/ebay-textbox/index.js

@@ -3,10 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EbayTextboxPostfixIcon = exports.EbayTextboxPrefixIcon = exports.EbayTextbox = void 0;
+exports.EbayTextboxPostfixText = exports.EbayTextboxPostfixIcon = exports.EbayTextboxPrefixText = exports.EbayTextboxPrefixIcon = exports.EbayTextbox = void 0;
 var textbox_1 = require("./textbox");
 Object.defineProperty(exports, "EbayTextbox", { enumerable: true, get: function () { return __importDefault(textbox_1).default; } });
 var prefix_icon_1 = require("./prefix-icon");
 Object.defineProperty(exports, "EbayTextboxPrefixIcon", { enumerable: true, get: function () { return __importDefault(prefix_icon_1).default; } });
+var prefix_text_1 = require("./prefix-text");
+Object.defineProperty(exports, "EbayTextboxPrefixText", { enumerable: true, get: function () { return __importDefault(prefix_text_1).default; } });
 var postfix_icon_1 = require("./postfix-icon");
 Object.defineProperty(exports, "EbayTextboxPostfixIcon", { enumerable: true, get: function () { return __importDefault(postfix_icon_1).default; } });
+var postfix_text_1 = require("./postfix-text");
+Object.defineProperty(exports, "EbayTextboxPostfixText", { enumerable: true, get: function () { return __importDefault(postfix_text_1).default; } });

package/ebay-textbox/postfix-text.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { EbayTextboxPostfixTextProps } from './types';
+declare const EbayTextboxPostfixText: FC<EbayTextboxPostfixTextProps>;
+export default EbayTextboxPostfixText;
+//# sourceMappingURL=postfix-text.d.ts.map

package/ebay-textbox/postfix-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"postfix-text.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/postfix-text.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAA;AAErD,QAAA,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CAE3D,CAAA;AAED,eAAe,sBAAsB,CAAA"}

package/ebay-textbox/postfix-text.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const EbayTextboxPostfixText = (props) => (react_1.default.createElement("span", Object.assign({}, props)));
+exports.default = EbayTextboxPostfixText;

package/ebay-textbox/prefix-text.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { EbayTextboxPrefixTextProps } from './types';
+declare const EbayTextboxPrefixText: FC<EbayTextboxPrefixTextProps>;
+export default EbayTextboxPrefixText;
+//# sourceMappingURL=prefix-text.d.ts.map

package/ebay-textbox/prefix-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prefix-text.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/prefix-text.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAA;AAEpD,QAAA,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAEzD,CAAA;AAED,eAAe,qBAAqB,CAAA"}

package/ebay-textbox/prefix-text.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const EbayTextboxPrefixText = (props) => (react_1.default.createElement("span", Object.assign({}, props)));
+exports.default = EbayTextboxPrefixText;

package/ebay-textbox/textbox.d.ts

@@ -1,6 +1,6 @@
 import React, { ComponentProps, Ref } from 'react';
-import { Size } from './index';
 import { EbayChangeEventHandler, EbayEventHandler, EbayFocusEventHandler, EbayKeyboardEventHandler, EbayMouseEventHandler } from '../common/event-utils/types';
+import type { Size } from './types';
 export declare const isControlled: (value?: unknown) => boolean;
 type TextInputProps = ComponentProps<'input'> & ComponentProps<'textarea'>;
 export type TextboxEventProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"textbox.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/textbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACI,cAAc,EAAM,GAAG,EAGxC,MAAM,OAAO,CAAA;AAGd,OAAO,EAAiD,IAAI,EAAE,MAAM,SAAS,CAAA;AAE7E,OAAO,EACH,sBAAsB,EACtB,gBAAgB,EAChB,qBAAqB,EACrB,wBAAwB,EAAE,qBAAqB,EAClD,MAAM,6BAA6B,CAAA;AAEpC,eAAO,MAAM,YAAY,WAAY,OAAO,KAAG,OAAuC,CAAA;AAEtF,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,CAAC,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;AAE1E,MAAM,MAAM,iBAAiB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AACjD,MAAM,MAAM,gBAAgB,GAAG;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAC7F,aAAa,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAClG,OAAO,CAAC,EAAE,qBAAqB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAC3F,MAAM,CAAC,EAAE,qBAAqB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAC1F,UAAU,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IACjG,OAAO,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAC9F,SAAS,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAChG,SAAS,CAAC,EAAE,gBAAgB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IACxF,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,aAAa,CAAC,EAAE,wBAAwB,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,GACzE,qBAAqB,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAC/D,YAAY,CAAC,EAAE,GAAG,CAAC,mBAAmB,GAAG,gBAAgB,CAAC,CAAC;IAC3D,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC;;AA0JnH,wBAA4D"}
+{"version":3,"file":"textbox.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/textbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACI,cAAc,EAAM,GAAG,EAGxC,MAAM,OAAO,CAAA;AAQd,OAAO,EACH,sBAAsB,EACtB,gBAAgB,EAChB,qBAAqB,EACrB,wBAAwB,EAAE,qBAAqB,EAClD,MAAM,6BAA6B,CAAA;AACpC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAEnC,eAAO,MAAM,YAAY,WAAY,OAAO,KAAG,OAAuC,CAAA;AAEtF,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,CAAC,GAAG,cAAc,CAAC,UAAU,CAAC,CAAA;AAE1E,MAAM,MAAM,iBAAiB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AACjD,MAAM,MAAM,gBAAgB,GAAG;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAC7F,aAAa,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAClG,OAAO,CAAC,EAAE,qBAAqB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAC3F,MAAM,CAAC,EAAE,qBAAqB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAC1F,UAAU,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IACjG,OAAO,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAC9F,SAAS,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAChG,SAAS,CAAC,EAAE,gBAAgB,CAAC,mBAAmB,GAAG,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IACxF,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,aAAa,CAAC,EAAE,wBAAwB,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,GACzE,qBAAqB,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IAC/D,YAAY,CAAC,EAAE,GAAG,CAAC,mBAAmB,GAAG,gBAAgB,CAAC,CAAC;IAC3D,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC;;AAmKnH,wBAA4D"}

package/ebay-textbox/textbox.js

@@ -41,11 +41,15 @@ exports.isControlled = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const component_utils_1 = require("../common/component-utils");
-const index_1 = require("./index");
+const postfix_icon_1 = __importDefault(require("./postfix-icon"));
+const postfix_text_1 = __importDefault(require("./postfix-text"));
+const prefix_icon_1 = __importDefault(require("./prefix-icon"));
+const prefix_text_1 = __importDefault(require("./prefix-text"));
 const hooks_1 = require("../common/floating-label-utils/hooks");
 const isControlled = (value) => typeof value !== 'undefined';
 exports.isControlled = isControlled;
 const EbayTextbox = (_a) => {
+    var _b, _c;
     var { type = 'text', invalid, fluid, multiline, onChange = () => { }, onInputChange = () => { }, onFocus = () => { }, onBlur = () => { }, onKeyPress = () => { }, onKeyUp = () => { }, onKeyDown = () => { }, onInvalid = () => { }, onFloatingLabelInit = () => { }, onButtonClick = () => { }, autoFocus, defaultValue = '', value: controlledValue, forwardedRef, inputSize = 'default', floatingLabel, children, placeholder, opaqueLabel } = _a, rest = __rest(_a, ["type", "invalid", "fluid", "multiline", "onChange", "onInputChange", "onFocus", "onBlur", "onKeyPress", "onKeyUp", "onKeyDown", "onInvalid", "onFloatingLabelInit", "onButtonClick", "autoFocus", "defaultValue", "value", "forwardedRef", "inputSize", "floatingLabel", "children", "placeholder", "opaqueLabel"]);
     const [value, setValue] = (0, react_1.useState)(defaultValue);
     const [inputValue, setInputValue] = (0, react_1.useState)(defaultValue);
@@ -112,20 +116,28 @@ const EbayTextbox = (_a) => {
     };
     const Input = multiline ? 'textarea' : 'input';
     const Wrapper = fluid ? 'div' : 'span';
-    const prefixIcon = (0, component_utils_1.findComponent)(children, index_1.EbayTextboxPrefixIcon);
-    const postfixIcon = (0, component_utils_1.findComponent)(children, index_1.EbayTextboxPostfixIcon);
-    const inputClassName = (0, classnames_1.default)('textbox__control', {
-        'textbox__control--fluid': fluid,
-        'textbox__control--large': inputSize === 'large'
-    });
+    const prefixIcon = (0, component_utils_1.findComponent)(children, prefix_icon_1.default);
+    const prefixText = (0, component_utils_1.findComponent)(children, prefix_text_1.default);
+    const prefixId = (_b = prefixText === null || prefixText === void 0 ? void 0 : prefixText.props) === null || _b === void 0 ? void 0 : _b.id;
+    const postfixIcon = (0, component_utils_1.findComponent)(children, postfix_icon_1.default);
+    const postfixText = (0, component_utils_1.findComponent)(children, postfix_text_1.default);
+    const postfixId = (_c = postfixText === null || postfixText === void 0 ? void 0 : postfixText.props) === null || _c === void 0 ? void 0 : _c.id;
     const wrapperClassName = (0, classnames_1.default)('textbox', rest.className, {
-        'textbox--icon-end': postfixIcon
+        'textbox--fluid': fluid,
+        'textbox--large': inputSize === 'large',
+        /** start remove after `:has` support */
+        'textbox--disabled': rest.disabled,
+        'textbox--invalid': invalid,
+        'textbox--readonly': rest.readOnly
+        /** end remove after `:has` support */
     });
     return (react_1.default.createElement(Container, null,
         label,
         react_1.default.createElement(Wrapper, { className: wrapperClassName },
             prefixIcon,
-            react_1.default.createElement(Input, Object.assign({}, rest, { className: inputClassName, type: type, "aria-invalid": invalid, value: (0, exports.isControlled)(controlledValue) ? controlledValue : inputValue, onChange: handleInputChange, onBlur: handleBlur, onFocus: handleFocus, onKeyPress: handleKeyPress, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onInvalid: handleInvalid, autoFocus: autoFocus, ref: ref, placeholder: floatingLabelPlaceholder })),
+            prefixText,
+            react_1.default.createElement(Input, Object.assign({ "aria-describedby": [prefixId, postfixId].filter(Boolean).join(' ') || undefined }, rest, { className: "textbox__control", type: type, "aria-invalid": invalid, value: (0, exports.isControlled)(controlledValue) ? controlledValue : inputValue, onChange: handleInputChange, onBlur: handleBlur, onFocus: handleFocus, onKeyPress: handleKeyPress, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onInvalid: handleInvalid, autoFocus: autoFocus, ref: ref, placeholder: floatingLabelPlaceholder })),
+            postfixText,
             postfixIcon && (0, react_1.cloneElement)(postfixIcon, Object.assign(Object.assign({}, postfixIcon.props), { onClick: (e) => {
                     const { onClick: iconClick = () => { } } = postfixIcon.props;
                     iconClick(e);

package/ebay-textbox/types.d.ts

@@ -6,4 +6,10 @@ export type EbayTextboxIconProps = ComponentProps<'button'> & ComponentProps<'a'
     buttonAriaLabel?: string;
     onClick?: (e: KeyboardEvent | MouseEvent) => void;
 };
+export type EbayTextboxPrefixTextProps = ComponentProps<'span'> & {
+    id: string;
+};
+export type EbayTextboxPostfixTextProps = ComponentProps<'span'> & {
+    id: string;
+};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAExC,MAAM,MAAM,IAAI,GAAG,SAAS,GAAG,OAAO,CAAA;AAEtC,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG,cAAc,CAAC,GAAG,CAAC,GAAG;IAChF,IAAI,EAAE,IAAI,CAAA;IACV,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,GAAG,UAAU,KAAK,IAAI,CAAA;CACpD,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ebay-textbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAExC,MAAM,MAAM,IAAI,GAAG,SAAS,GAAG,OAAO,CAAA;AAEtC,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG,cAAc,CAAC,GAAG,CAAC,GAAG;IAChF,IAAI,EAAE,IAAI,CAAA;IACV,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,GAAG,UAAU,KAAK,IAAI,CAAA;CACpD,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG;IAC9D,EAAE,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG;IAC/D,EAAE,EAAE,MAAM,CAAA;CACb,CAAA"}

package/ebay-toast-dialog/README.md

@@ -1,8 +1,11 @@
 # EbayToast
 
+## Demo
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/dialogs-ebay-toast-dialog--default)
+
 ## EbayToast Usage
 
-```react
+```jsx
 <EbayToast open a11yClosetext="Close EbayToast">
     <h1>Hello World</h1>
 </EbayToast>
@@ -10,15 +13,15 @@
 
 ## Attributes
 
-Name | Type | Stateful | Required | Description
---- | --- | --- | --- | ---
-`open` | Boolean | Yes | No | Whether drawer is open.
-`a11yCloseText` | String | No | Yes | A11y text for close button and mask.
-`animated` | Boolean | Yes | No | Renders the dialog with an animation. Note that the dialog will always be present in the DOM
+| Name            | Type    | Stateful | Required | Description |
+| --------------- | ------- | -------- | -------- | ----------- |
+| `open`          | Boolean | Yes      | No       | Whether drawer is open. |
+| `a11yCloseText` | String  | No       | Yes      | A11y text for close button and mask. |
+| `animated`      | Boolean | Yes      | No       | Renders the dialog with an animation. Note that the dialog will always be present in the DOM |
 
 ## Events
 
-Event | Data | Description
---- | --- | ---
-`onShow` |  | drawer opened
-`onClose` |  | drawer closed
+| Event     | Data | Description   |
+| --------- | ---- | ------------- |
+| `onShow`  |      | drawer opened |
+| `onClose` |      | drawer closed |

package/ebay-tooltip/README.md

@@ -1,8 +1,7 @@
-# ebay-tooltip
+# EbayTooltip
 
 ## Demo
-
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-tooltip--default-tooltip)
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/notices-tips-ebay-tooltip--default-tooltip)
 
 ## Import JS
 

package/ebay-tourtip/README.md

@@ -1,8 +1,7 @@
-# ebay-tourtip
+# EbayTourtip
 
 ## Demo
-
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-tourtip--default-tourtip)
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/notices-tips-ebay-tourtip--default-tourtip)
 
 ## Import JS
 

package/ebay-video/README.md

@@ -1,7 +1,11 @@
-# ebay-video
+# EbayVideo
+
 Video player. Supports either MPD or M3U8 playlist formats.
 Natively uses `shaka` player under the hood. For resizing, `ebay-video` supports fixed width or variable width. If no width is provided the video tag will resize based on the container size.
 
+## Demo
+[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/media-ebay-video--default)
+
 ## Usage
 ```bash
 yarn add @ebay/ui-core-react shaka-player
@@ -37,6 +41,7 @@ import 'shaka-player/dist/controls.css'
 | a11yPlayText | String   | Yes      | a11y text for the play button                                                                                   |
 | errorText    | String   | Yes      | content for error when an either the library or video cannot load                                               |
 | reportText   | String   | Yes      | text for report button                                                                                          |
+
 ## Callbacks
 | Name           | Required | Description                                                      | Arguments                                   |
 |----------------|----------|------------------------------------------------------------------|---------------------------------------------|
@@ -45,7 +50,6 @@ import 'shaka-player/dist/controls.css'
 | onVolumeChange | No       | triggered when volume is changed                                 | (Event, { volume: number, muted: boolean }) |
 | onReport       | No       | triggered when report button is clicked                          |                                             |
 
-
 ## EbayVideoSource Props
 | Name | Type   | Required | Description                                                                                                     |
 |------|--------|----------|-----------------------------------------------------------------------------------------------------------------|

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebay/ui-core-react",
-  "version": "6.3.0",
+  "version": "7.0.0",
   "description": "Skin components build off React",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -16,6 +16,7 @@
     "storybook": "NODE_OPTIONS=--openssl-legacy-provider storybook dev -p 9001 -c .storybook",
     "storybook-node16": "storybook dev -p 9001 -c .storybook",
     "build-storybook": "storybook build",
+    "storybook:publish": "NODE_OPTIONS=--openssl-legacy-provider yarn build-storybook --output-dir storybook-static/$(git branch --show-current) && gh-pages --add --message=\"Deploying to gh-pages from @ eBay/ebayui-core-react@$(git rev-parse --short HEAD) 🚀\" -d storybook-static",
     "test": "yarn jest",
     "build": "yarn typecheck && yarn tsc",
     "typecheck": "tsc --project tsconfig.typecheck.json",
@@ -43,7 +44,7 @@
   "author": "tmanyanov@ebay.com",
   "license": "ISC",
   "peerDependencies": {
-    "@ebay/skin": "^17.0.0",
+    "@ebay/skin": "^18.0.0",
     "react": ">= 16.0.0",
     "react-dom": ">= 16.0.0",
     "shaka-player": "^4.3.2"
@@ -60,7 +61,7 @@
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@babel/register": "^7.0.0",
-    "@ebay/skin": "^17.0.0",
+    "@ebay/skin": "^18.0.0",
     "@microsoft/eslint-formatter-sarif": "^3.0.0",
     "@storybook/addon-a11y": "^7.6.12",
     "@storybook/addon-essentials": "^7.4.6",
@@ -88,6 +89,7 @@
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.21.5",
+    "gh-pages": "^6.1.1",
     "husky": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",