@ebay/ui-core-react 9.4.0 → 9.5.0

package/ebay-list/README.md

@@ -1,149 +1,5 @@
 # EbayList
 
-A versatile list component for displaying items with optional leading and trailing content.
+## Documentation
 
-## Demo
-
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/docs/building-blocks-ebay-list--docs)
-
-## Usage
-
-### Import JS
-
-```jsx
-import { EbayList, EbayListItem, EbayListItemLeading, EbayListItemTrailing } from "@ebay/ui-core-react/ebay-list";
-```
-
-### Import following styles from SKIN
-
-```jsx harmony
-import "@ebay/skin/list";
-```
-
-### If tokens haven't been added to the project at a higher level, make sure to import
-
-```jsx harmony
-import "@ebay/skin/tokens";
-```
-
-### Or import styles using SCSS/CSS
-
-```jsx harmony
-import "@ebay/skin/list.css";
-```
-
-## Examples
-
-### Basic List
-
-```jsx
-<EbayList>
-    <EbayListItem>Item 1</EbayListItem>
-    <EbayListItem>Item 2</EbayListItem>
-    <EbayListItem>Item 3</EbayListItem>
-</EbayList>
-```
-
-### List with Leading and Trailing Content (Method 1 - Using Components)
-
-```jsx
-<EbayList>
-    <EbayListItem>
-        <EbayListItemLeading>
-            <EbayIconFolder16 />
-        </EbayListItemLeading>
-        Item 1
-    </EbayListItem>
-    <EbayListItem>
-        <EbayListItemLeading>
-            <EbayIconLamp16 />
-        </EbayListItemLeading>
-        Item 2
-        <EbayListItemTrailing>
-            <EbayIconChevronRight16 />
-        </EbayListItemTrailing>
-    </EbayListItem>
-</EbayList>
-```
-
-### Interactive List Items
-
-```jsx
-<EbayList onButtonClick={(event, { index }) => console.log(`Button ${index} clicked`)}>
-    <EbayListItem as="button">Clickable Button Item</EbayListItem>
-    <EbayListItem as="a" href="https://www.ebay.com">
-        Link Item
-        <EbayListItemTrailing>
-            <EbayIconChevronRight16 />
-        </EbayListItemTrailing>
-    </EbayListItem>
-    <EbayListItem id="switch-item">
-        Item with Switch
-        <EbayListItemTrailing>
-            <EbaySwitch aria-labelledby="switch-item" />
-        </EbayListItemTrailing>
-    </EbayListItem>
-</EbayList>
-```
-
-### List with Separators
-
-```jsx
-<EbayList>
-    <EbayListItem>Item 1</EbayListItem>
-    <EbayListItem separator />
-    <EbayListItem>Item 2</EbayListItem>
-    <EbayListItem>Item 3</EbayListItem>
-    <EbayListItem separator />
-    <EbayListItem>Item 4</EbayListItem>
-</EbayList>
-```
-
-## Components
-
-### EbayList
-
-The main container component that wraps a list of EbayListItem components.
-
-### EbayListItem
-
-Individual list items that can be rendered as different elements (div, button, a) and can contain leading and trailing content.
-
-### EbayListItemLeading
-
-Component for adding leading content to a list item.
-
-### EbayListItemTrailing
-
-Component for adding trailing content to a list item.
-
-## Attributes
-
-### EbayList Attributes
-
-| Name            | Type     | Required | Description                                                                                   |
-| --------------- | -------- | -------- | --------------------------------------------------------------------------------------------- |
-| `onButtonClick` | Function | No       | Called when a list item with `as="button"` is clicked. Callback receives `(event, { index })` |
-| `className`     | String   | No       | Custom class name                                                                             |
-| `style`         | Object   | No       | Custom styles                                                                                 |
-
-### EbayListItem Attributes
-
-| Name        | Type     | Required | Description                                                                          |
-| ----------- | -------- | -------- | ------------------------------------------------------------------------------------ |
-| `as`        | String   | No       | The element to render the item as. Can be 'div', 'button', or 'a'. Default is 'div'. |
-| `separator` | Boolean  | No       | If true, will render the current item as a separator                                 |
-| `onClick`   | Function | No       | Called when the list item is clicked                                                 |
-| `className` | String   | No       | Custom class name                                                                    |
-
-### EbayListItemLeading Attributes
-
-| Name       | Type      | Required | Description                               |
-| ---------- | --------- | -------- | ----------------------------------------- |
-| `children` | ReactNode | Yes      | Content to display in the leading section |
-
-### EbayListItemTrailing Attributes
-
-| Name       | Type      | Required | Description                                |
-| ---------- | --------- | -------- | ------------------------------------------ |
-| `children` | ReactNode | Yes      | Content to display in the trailing section |
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/building-blocks-ebay-list--docs)

package/ebay-list/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("../tslib.es6-C4EgNkz1.js"),e=require("react"),p=require("classnames"),s=require("../utils-C9NL3q0j.js"),u=({children:t})=>e.createElement("div",{className:"list__leading"},t),E=({children:t})=>e.createElement("div",{className:"list__trailing"},t),g=t=>{var{className:i,as:a="div",separator:r,children:n,onClick:c}=t,o=C.__rest(t,["className","as","separator","children","onClick"]);if(r)return e.createElement("hr",null);const l=s.findComponent(n,u),m=s.findComponent(n,E),d=s.excludeComponent(s.excludeComponent(n,u),E);return e.createElement("li",null,e.createElement(a,Object.assign({className:p("list__body",i),onClick:c},o),l,e.createElement("div",{className:"list__body"},d),m))},L=t=>{var{className:i,style:a,children:r,onButtonClick:n=()=>{}}=t,c=C.__rest(t,["className","style","children","onButtonClick"]);const o=s.filterByType(r,g);return e.createElement("div",Object.assign({className:p("list",i),style:a},c),e.createElement("ul",null,e.Children.map(o,(l,m)=>{const{as:d,onClick:b}=l.props,_=d==="button"?{onClick:y=>{b&&b(y),n(y,{index:m})}}:{};return e.cloneElement(l,_)})))};exports.EbayList=L;exports.EbayListItem=g;exports.EbayListItemLeading=u;exports.EbayListItemTrailing=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("../tslib.es6-BW4cJBUu.js"),e=require("react"),p=require("classnames"),s=require("../utils-C9NL3q0j.js"),u=({children:t})=>e.createElement("div",{className:"list__leading"},t),E=({children:t})=>e.createElement("div",{className:"list__trailing"},t),g=t=>{var{className:i,as:a="div",separator:r,children:n,onClick:c}=t,o=C.__rest(t,["className","as","separator","children","onClick"]);if(r)return e.createElement("hr",null);const l=s.findComponent(n,u),m=s.findComponent(n,E),d=s.excludeComponent(s.excludeComponent(n,u),E);return e.createElement("li",null,e.createElement(a,Object.assign({className:p("list__body",i),onClick:c},o),l,e.createElement("div",{className:"list__body"},d),m))},L=t=>{var{className:i,style:a,children:r,onButtonClick:n=()=>{}}=t,c=C.__rest(t,["className","style","children","onButtonClick"]);const o=s.filterByType(r,g);return e.createElement("div",Object.assign({className:p("list",i),style:a},c),e.createElement("ul",null,e.Children.map(o,(l,m)=>{const{as:d,onClick:b}=l.props,_=d==="button"?{onClick:y=>{b&&b(y),n(y,{index:m})}}:{};return e.cloneElement(l,_)})))};exports.EbayList=L;exports.EbayListItem=g;exports.EbayListItemLeading=u;exports.EbayListItemTrailing=E;

package/ebay-listbox/README.md

@@ -1,91 +1,5 @@
 # EbayListbox
 
-## Demo
+## Documentation
 
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/docs/building-blocks-ebay-listbox--docs)
-
-## Import JS
-
-```jsx harmony
-import { EbayListbox, EbayListboxOption, EbayListboxOptionDescription } from "@ebay/ui-core-react/ebay-listbox";
-```
-
-## Import following styles from SKIN
-
-```js
-import "@ebay/skin/listbox";
-```
-
-## Import styles using SCSS/CSS
-
-```js
-import "@ebay/skin/listbox.css";
-```
-
-## Usage
-
-```jsx
-<EbayListbox>
-    <EbayListboxOption value="AA" text="Option 1" />
-    <EbayListboxOption value="BB" text="Option 2" />
-    <EbayListboxOption value="CC" text="Option 3" />
-</EbayListbox>
-```
-
-## Attributes
-
-### EbayListbox
-
-| Name                     | Type    | Required | Description                                                                                                                                                   |
-| ------------------------ | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `name`                   | string  | No       | Used for the name attribute of the native `<select>`.                                                                                                         |
-| `disabled`               | boolean | No       | Set to true if the field is disabled.                                                                                                                         |
-| `listSelection`          | string  | No       | If `manual`, the user will need to press enter to select an item using the keyboard. Otherwise, `auto` will automatically select as the user presses up/down. |
-| `typeaheadTimeoutLength` | number  | No       | Timeout length to pass to typeahead.                                                                                                                          |
-| `maxHeight`              | string  | No       | Example: 100px, 200px, 10rem.                                                                                                                                 |
-| `a11ySelectedText`       | string  | No       | Accessible text for selected option. Default is "selected".                                                                                                   |
-
-### EbayListboxOption
-
-| Name       | Type         | Required | Description                                            |
-| ---------- | ------------ | -------- | ------------------------------------------------------ |
-| `icon`     | ReactElement | No       | An optional icon to display alongside the option text. |
-| `text`     | string       | No       | The text to display for the option.                    |
-| `value`    | string       | Yes      | The value of the option.                               |
-| `disabled` | boolean      | No       | Set to true if the option is disabled.                 |
-| `selected` | boolean      | No       | Set to true if the option is selected by default.      |
-
-## Callbacks
-
-| Name       | Type     | Required | Description                    | Data                                                                         |
-| ---------- | -------- | -------- | ------------------------------ | ---------------------------------------------------------------------------- |
-| `onChange` | Function | No       | triggered on change            | `(ChangeEvent, { index: number, selected: string[] , wasClicked: boolean })` |
-| `onEscape` | Function | No       | triggered on typing Escape key | `()`                                                                         |
-
-## Examples
-
-### Default
-
-```jsx
-<EbayListbox>
-    <EbayListboxOption value="AA" text="Option 1" />
-    <EbayListboxOption value="BB" text="Option 2" />
-    <EbayListboxOption value="CC" text="Option 3" />
-</EbayListbox>
-```
-
-### With Description
-
-```jsx
-<EbayListbox>
-    <EbayListboxOption value="AA" text="Option 1">
-        <EbayListboxOptionDescription>Option 1 extra info</EbayListboxOptionDescription>
-    </EbayListboxOption>
-    <EbayListboxOption value="BB" text="Option 2">
-        <EbayListboxOptionDescription>Option 2 extra info</EbayListboxOptionDescription>
-    </EbayListboxOption>
-    <EbayListboxOption value="CC" text="Option 3">
-        <EbayListboxOptionDescription>Option 3 extra info</EbayListboxOptionDescription>
-    </EbayListboxOption>
-</EbayListbox>
-```
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/building-blocks-ebay-listbox--docs)

package/ebay-listbox/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("../tslib.es6-C4EgNkz1.js"),e=require("react"),H=require("makeup-active-descendant"),K=require("makeup-prevent-scroll-keys"),x=require("makeup-typeahead"),_=require("classnames"),S=require("../utils-C9NL3q0j.js"),B=require("../scroll-OgAngNzq.js"),F=require("../icons/ebay-icon-tick-16/index.js");function z(s){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const l in s)if(l!=="default"){const u=Object.getOwnPropertyDescriptor(s,l);Object.defineProperty(a,l,u.get?u:{enumerable:!0,get:()=>s[l]})}}return a.default=s,Object.freeze(a)}const L=z(K),k=s=>{var{children:a,className:l}=s,u=I.__rest(s,["children","className"]);return e.createElement("div",Object.assign({className:_("listbox__description",l)},u),a)},j=s=>{var{className:a,icon:l,text:u,children:m,disabled:y,tabIndex:g,selected:o,a11ySelectedText:E="selected"}=s,N=I.__rest(s,["className","icon","text","children","disabled","tabIndex","selected","a11ySelectedText"]);const r=S.filterByType(m,k),f=u||(r?.length?"":m);return e.createElement("div",Object.assign({},N,{tabIndex:y?-1:g,className:_("listbox__option",a),"aria-disabled":y,"aria-selected":o,role:"option"}),l?e.createElement("span",{className:"listbox__value"},l,f?e.createElement("span",null,f):null,r?.length?r:null,o&&e.createElement("span",{className:"clipped"},E)):e.createElement(e.Fragment,null,e.createElement("span",{className:"listbox__value"},f,o&&e.createElement("span",{className:"clipped"},E)),r?.length?r:null),e.createElement(F.EbayIconTick16,null))},{default:G=x}=x?.default?.__esModule?x.default:x,U=1300,Y=s=>{var a,{name:l,className:u,disabled:m,children:y,tabIndex:g=0,listSelection:o,maxHeight:E,typeaheadTimeoutLength:N,selectClassName:r,a11ySelectedText:f,onChange:q=()=>{},onEscape:R=()=>{}}=s,w=I.__rest(s,["name","className","disabled","children","tabIndex","listSelection","maxHeight","typeaheadTimeoutLength","selectClassName","a11ySelectedText","onChange","onEscape"]);const d=S.filterByType(y,j),T=d.findIndex(n=>n.props.selected),[p,C]=e.useState(d.findIndex(n=>n.props.selected));e.useEffect(()=>{T!==p&&C(T)},[T]);const c=e.useRef(null),b=e.useRef(null),v=e.useRef(null),h=e.useRef(!1);function O(n,t,i){t===p||d[t].props.disabled||(C(t),q(n,{index:t,selected:[d[t].props.value],wasClicked:i}))}function M(n){switch(n.code){case"Esc":case"Escape":R();break;case"Space":case"Enter":O(n,b.current.index,!1);break}const t=v.current.getIndex(c.current.children,n.key,N||U);if(t!==-1){b.current.index=t;const i=c.current.querySelectorAll("[role=option]")[t];c.current.scrollTop=i.offsetTop-c.current.offsetHeight/2}}function P(){h.current=!0}return e.useEffect(()=>{const n=t=>{const i=parseInt(t.detail.toIndex,10),D=c.current?c.current.querySelectorAll("[role=option]")[p]:null,A=h.current;B.scroll(D),h.current&&(h.current=!1),O(t,i,A)};if(d.length&&!m){const t=c.current,i=c.current;b.current=H.createLinear(t,i,i,".listbox__option[role=option]",{activeDescendantClassName:"listbox__option--active",autoInit:p,autoReset:null,autoScroll:o!=="auto"}),L.add(t),v.current=G()}return o==="auto"&&c.current.addEventListener("activeDescendantChange",n),()=>{b.current&&(b.current.reset(),b.current.destroy(),b.current=void 0),v.current&&(v.current.destroy(),v.current=void 0),c.current&&(c.current.removeEventListener("activeDescendantChange",n),L.remove(c.current))}},[p,m,o]),e.createElement(e.Fragment,null,e.createElement("div",Object.assign({},w,{tabIndex:g,ref:c,role:"listbox",onKeyDown:o!=="auto"?M:void 0,className:_("listbox__options",u),style:{maxHeight:E}}),d.map((n,t)=>e.cloneElement(n,Object.assign(Object.assign({key:n.props.value||t},n.props),{onMouseDown:o==="auto"?P:void 0,onClick:i=>{o!=="auto"&&O(i,t,!0)},selected:t===p,a11ySelectedText:f})))),e.createElement("select",{hidden:!0,className:_("listbox__native",r),name:l,disabled:m,value:(a=d[p])===null||a===void 0?void 0:a.props.value,onChange:(()=>{})},d.map((n,t)=>e.createElement("option",{key:n.props.value||t,value:n.props.value,disabled:n.props.disabled}))))};exports.EbayListbox=Y;exports.EbayListboxOption=j;exports.EbayListboxOptionDescription=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("../tslib.es6-BW4cJBUu.js"),e=require("react"),H=require("makeup-active-descendant"),K=require("makeup-prevent-scroll-keys"),x=require("makeup-typeahead"),_=require("classnames"),S=require("../utils-C9NL3q0j.js"),B=require("../scroll-OgAngNzq.js"),F=require("../icons/ebay-icon-tick-16/index.js");function z(s){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const l in s)if(l!=="default"){const u=Object.getOwnPropertyDescriptor(s,l);Object.defineProperty(a,l,u.get?u:{enumerable:!0,get:()=>s[l]})}}return a.default=s,Object.freeze(a)}const L=z(K),k=s=>{var{children:a,className:l}=s,u=I.__rest(s,["children","className"]);return e.createElement("div",Object.assign({className:_("listbox__description",l)},u),a)},j=s=>{var{className:a,icon:l,text:u,children:m,disabled:y,tabIndex:g,selected:o,a11ySelectedText:E="selected"}=s,N=I.__rest(s,["className","icon","text","children","disabled","tabIndex","selected","a11ySelectedText"]);const r=S.filterByType(m,k),f=u||(r?.length?"":m);return e.createElement("div",Object.assign({},N,{tabIndex:y?-1:g,className:_("listbox__option",a),"aria-disabled":y,"aria-selected":o,role:"option"}),l?e.createElement("span",{className:"listbox__value"},l,f?e.createElement("span",null,f):null,r?.length?r:null,o&&e.createElement("span",{className:"clipped"},E)):e.createElement(e.Fragment,null,e.createElement("span",{className:"listbox__value"},f,o&&e.createElement("span",{className:"clipped"},E)),r?.length?r:null),e.createElement(F.EbayIconTick16,null))},{default:G=x}=x?.default?.__esModule?x.default:x,U=1300,Y=s=>{var a,{name:l,className:u,disabled:m,children:y,tabIndex:g=0,listSelection:o,maxHeight:E,typeaheadTimeoutLength:N,selectClassName:r,a11ySelectedText:f,onChange:q=()=>{},onEscape:R=()=>{}}=s,w=I.__rest(s,["name","className","disabled","children","tabIndex","listSelection","maxHeight","typeaheadTimeoutLength","selectClassName","a11ySelectedText","onChange","onEscape"]);const d=S.filterByType(y,j),T=d.findIndex(n=>n.props.selected),[p,C]=e.useState(d.findIndex(n=>n.props.selected));e.useEffect(()=>{T!==p&&C(T)},[T]);const c=e.useRef(null),b=e.useRef(null),v=e.useRef(null),h=e.useRef(!1);function O(n,t,i){t===p||d[t].props.disabled||(C(t),q(n,{index:t,selected:[d[t].props.value],wasClicked:i}))}function M(n){switch(n.code){case"Esc":case"Escape":R();break;case"Space":case"Enter":O(n,b.current.index,!1);break}const t=v.current.getIndex(c.current.children,n.key,N||U);if(t!==-1){b.current.index=t;const i=c.current.querySelectorAll("[role=option]")[t];c.current.scrollTop=i.offsetTop-c.current.offsetHeight/2}}function P(){h.current=!0}return e.useEffect(()=>{const n=t=>{const i=parseInt(t.detail.toIndex,10),D=c.current?c.current.querySelectorAll("[role=option]")[p]:null,A=h.current;B.scroll(D),h.current&&(h.current=!1),O(t,i,A)};if(d.length&&!m){const t=c.current,i=c.current;b.current=H.createLinear(t,i,i,".listbox__option[role=option]",{activeDescendantClassName:"listbox__option--active",autoInit:p,autoReset:null,autoScroll:o!=="auto"}),L.add(t),v.current=G()}return o==="auto"&&c.current.addEventListener("activeDescendantChange",n),()=>{b.current&&(b.current.reset(),b.current.destroy(),b.current=void 0),v.current&&(v.current.destroy(),v.current=void 0),c.current&&(c.current.removeEventListener("activeDescendantChange",n),L.remove(c.current))}},[p,m,o]),e.createElement(e.Fragment,null,e.createElement("div",Object.assign({},w,{tabIndex:g,ref:c,role:"listbox",onKeyDown:o!=="auto"?M:void 0,className:_("listbox__options",u),style:{maxHeight:E}}),d.map((n,t)=>e.cloneElement(n,Object.assign(Object.assign({key:n.props.value||t},n.props),{onMouseDown:o==="auto"?P:void 0,onClick:i=>{o!=="auto"&&O(i,t,!0)},selected:t===p,a11ySelectedText:f})))),e.createElement("select",{hidden:!0,className:_("listbox__native",r),name:l,disabled:m,value:(a=d[p])===null||a===void 0?void 0:a.props.value,onChange:(()=>{})},d.map((n,t)=>e.createElement("option",{key:n.props.value||t,value:n.props.value,disabled:n.props.disabled}))))};exports.EbayListbox=Y;exports.EbayListboxOption=j;exports.EbayListboxOptionDescription=k;

package/ebay-listbox-button/README.md

@@ -1,69 +1,5 @@
 # EbayListboxButton
 
-## Demo
+## Documentation
 
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/buttons-ebay-listbox-button--default)
-
-## Import JS
-
-```jsx harmony
-import { EbayListboxButton, EbayListboxButtonOption } from "@ebay/ui-core-react/ebay-listbox-button";
-```
-
-## Import following styles from SKIN
-
-```jsx harmony
-import "@ebay/skin/listbox-button";
-
-// Add if you're using floating labels
-import "@ebay/skin/floating-label";
-```
-
-## Import styles using SCSS/CSS
-
-```jsx harmony
-import "@ebay/skin/listbox-button.css";
-
-// Add if you're using floating labels
-import "@ebay/skin/floating-label.css";
-```
-
-## Usage
-
-```
-yarn add @ebay/ui-core-react
-```
-
-```jsx harmony
-<EbayListboxButton defaultValue="BB" onSelect={action(`onSelect triggered`)} fluid borderless>
-    <EbayListboxButtonOption value="AA">Option 1</EbayListboxButtonOption>
-    <EbayListboxButtonOption value="BB">Option 2</EbayListboxButtonOption>
-    <EbayListboxButtonOption value="CC">Option 3</EbayListboxButtonOption>
-</EbayListboxButton>
-```
-
-## Attributes
-
-| Name               | Type    | Required | Description                                                                                                                                                          |
-| ------------------ | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `value`            | string  | No       | Allows you to set the selected option to the one with `value`                                                                                                        |
-| `selected`         | number  | No       | Allows you to set the selected index option to `selected`                                                                                                            |
-| `aria-disabled`    | boolean | No       | Set to true if the field is disabled                                                                                                                                 |
-| `aria-invalid`     | boolean | No       | Set to true if the field is invalid                                                                                                                                  |
-| `fluid`            | boolean | No       | To make the listbox fluid                                                                                                                                            |
-| `borderless`       | boolean | No       | To make the listbox borderless                                                                                                                                       |
-| `maxHeight`        | string  | No       | example: 100px, 200px, 10rem                                                                                                                                         |
-| `prefixId`         | string  | No       | The id of an external element to use as the a11y prefix label for the listbox button.                                                                                |
-| `prefixLabel`      | string  | No       | The label to add before selected option on the button. Cannot be used with `prefixId`                                                                                |
-| `floatingLabel`    | string  | No       | Indicates that the listbox is a floating label type and renders it with a label                                                                                      |
-| `unselectedText`   | string  | No       | The text to be shown when no options are selected. Default is '-'. Cannot be used with `floating-label`                                                              |
-| `strategy`         | string  | No       | Swap between `fixed` and `absolute` positioning strategy. Use `fixed` when dropdown is in contained in an overflow and needs to be visible as you scroll the screen. |
-| `a11ySelectedText` | string  | No       | Accessible text for selected option. Default is "selected".                                                                                                          |
-
-## Callbacks
-
-| Name         | Type     | Required | Description           | Data                                                                         |
-| ------------ | -------- | -------- | --------------------- | ---------------------------------------------------------------------------- |
-| `onChange`   | Function | No       | triggered on change   | `(ChangeEvent, { index: number, selected: string[] , wasClicked: boolean })` |
-| `onCollapse` | Function | No       | triggered on collapse | `()`                                                                         |
-| `onExpand`   | Function | No       | triggered on expand   | `()`                                                                         |
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/buttons-ebay-listbox-button--docs)

package/ebay-listbox-button/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../listbox-button-sULPe7qi.js");exports.EbayListboxButton=t.ListboxButton;exports.EbayListboxButtonOption=t.ListboxOption;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../listbox-button-CF98dSd8.js");exports.EbayListboxButton=t.ListboxButton;exports.EbayListboxButtonOption=t.ListboxOption;

package/ebay-menu/README.md

@@ -1,64 +1,5 @@
 # EbayMenu
 
-## Demo
+## Documentation
 
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/building-blocks-ebay-menu--default)
-
-## Install
-
-```
-yarn add @ebay/ui-core-react
-```
-
-## Usage
-
-```jsx harmony
-import { EbayMenu, EbayMenuItem as Item } from "@ebay/ui-core-react/ebay-menu";
-import "@ebay/skin/menu";
-
-<EbayMenu>
-    <Item>item 1</Item>
-    <Item>item 2</Item>
-    <Item>item 3</Item>
-</EbayMenu>;
-```
-
-## EbayMenu Props
-
-| Name          | Type     | Required | Description                                                                                                                                                          |
-| ------------- | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type`        | String   | No       | Can be `radio`/`checkbox`                                                                                                                                            |
-| `checked`     | Number   | No       | when used with `radio` type will check the item with the corresponding index                                                                                         |
-| `baseEl`      | String   | No       | Container can be `span` (default) or `div`                                                                                                                           |
-| `onKeydown`   | Function | No       | props: (e: event, { index: number, checked: number[], checkedValues?: string[] })                                                                                    |
-| `onSelect`    | Function | No       | props: (e: event, { index: number }), triggered on item clicked (not for type `radio`/`checkbox`)                                                                    |
-| `onChange`    | Function | No       | props: (e: event, { index: number, checked: number[], checkedValues: string[]), triggered on item `checked` change, (for type `radio`/`checkbox` only)               |
-| `classPrefix` | String   | No       | class prefix for the component, defaults to `menu`                                                                                                                   |
-| `reverse`     | Boolean  | No       | reverse the menu item layout, so that the badge is on the left and the text on the right (default: false)                                                            |
-| `fixWidth`    | Boolean  | No       | makes the menu width the same as its parent                                                                                                                          |
-| `fixed`       | Boolean  | No       | Swap between `fixed` and `absolute` positioning strategy. Use `fixed` when dropdown is in contained in an overflow and needs to be visible as you scroll the screen. |
-
-## EbayMenuItem Props
-
-| Name             | Type    | Required                                                                         | Description                                                                         |
-| ---------------- | ------- | -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
-| `value`          | String  | No                                                                               | for type `radio`, `checkbox`: the value to use with callbacks for `checkedValues[]` |
-| `checked`        | Boolean | No                                                                               | for type `radio`, `checkbox`: whether or not the item is checked                    |
-| `disabled`       | Boolean | No                                                                               | makes the menu item disabled                                                        |
-| `badgeNumber`    | Number  | No                                                                               | used as the number to be placed in the badge                                        |
-| `badgeAriaLabel` | String  | Only if `badgeNumber` provided, passed as the `aria-label` directly to the badge |
-
-## EbayMenuSeparator
-
-Example:
-
-```jsx
-import { EbayMenu, EbayMenuItem as Item, EbayMenuSeparator as Separator } from "@ebay/ui-core-react/ebay-menu";
-
-<EbayMenu>
-    <Item>item 1</Item>
-    <Item>item 2</Item>
-    <Separator />
-    <Item>item 3</Item>
-</EbayMenu>;
-```
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/building-blocks-ebay-menu--docs)

package/ebay-menu/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../menu-Bvnencku.js"),n=require("../tslib.es6-C4EgNkz1.js"),u=require("react"),c=require("classnames"),b=e=>{var{className:s,baseClass:r="menu"}=e,t=n.__rest(e,["className","baseClass"]);return u.createElement("hr",Object.assign({},t,{className:c(s,`${r}__separator`)}))};exports.EbayMenu=a.EbayMenu;exports.EbayMenuItem=a.EbayMenuItem;exports.EbayMenuSeparator=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../menu-A2rDgu5k.js"),n=require("../tslib.es6-BW4cJBUu.js"),u=require("react"),c=require("classnames"),b=e=>{var{className:s,baseClass:r="menu"}=e,t=n.__rest(e,["className","baseClass"]);return u.createElement("hr",Object.assign({},t,{className:c(s,`${r}__separator`)}))};exports.EbayMenu=a.EbayMenu;exports.EbayMenuItem=a.EbayMenuItem;exports.EbayMenuSeparator=b;

package/ebay-menu-button/README.md

@@ -1,73 +1,5 @@
 # EbayMenuButton
 
-## Demo
+## Documentation
 
-[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/buttons-ebay-menu-button--default)
-
-## Install
-
-```
-yarn add @ebay/ui-core-react
-```
-
-## Usage
-
-```jsx harmony
-import {
-    EbayMenuButton,
-    EbayMenuButtonItem as Item,
-    EbayMenuButtonSeparator as Separator,
-    EbayMenuButtonLabel as Label
-} from 'ebayui-core-react/ebay-menu-button';
-import '@ebay/skin/menu-button';
-<EbayMenuButton text="Menu">
-    <Item>Item 1</Item>
-    <Item>Item 2</Item>
-    <Item>Item 3</Item>
-    <Separator />
-    <Item>Log in</Item>
-</EbayMenuButton>
-// With a complext label
-<EbayMenuButton a11yText="Menu">
-    <Label><img src="menu-logo.svg" /></Label>
-    <Item>Item 1</Item>
-    <Item>Item 2</Item>
-</EbayMenuButton>
-```
-
-## EbayMenuButton Attributes
-
-| Name               | Type     | Required                  | Description                                                                                                                                                          |
-| ------------------ | -------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `text`             | String   | No                        | button label text                                                                                                                                                    |
-| `a11yText`         | String   | Only without a text label | a11y text for the button                                                                                                                                             |
-| `noToggleIcon`     | Boolean  | No                        | whether to hide the chevron toggle icon                                                                                                                              |
-| `expanded`         | Boolean  | No                        | whether content is expanded                                                                                                                                          |
-| `type`             | String   | No                        | can be `radio` or `checkbox`                                                                                                                                         |
-| `reverse`          | Boolean  | No                        | expand menu flyout to the left                                                                                                                                       |
-| `fixWidth`         | Boolean  | No                        | Constrain items container width to button width                                                                                                                      |
-| `borderless`       | Boolean  | No                        | Whether button has borders                                                                                                                                           |
-| `size`             | String   | No                        | button size: `small` or `large`                                                                                                                                      |
-| `priority`         | String   | No                        | button size: `primary`, `secondary` (default), `tertiary`, `none`                                                                                                    |
-| `checked`          | Number   | No                        | will set the corresponding index item to checked state and use the `aria-checked` attribute in markup                                                                |
-| `disabled`         | Boolean  | No                        | will disable the entire dropdown (disables the ebay-button label) if set to true                                                                                     |
-| `variant`          | String   | No                        | will change the button style: `overflow`, `form` or `button`                                                                                                         |
-| `collapseOnSelect` | Boolean  | No                        | Will collapse whole menu when an item is selected in menu. Typically used in type=`radio`                                                                            |
-| `prefixId`         | String   | No                        | The id of an external element to use as the prefix label for the menu button. Cannot be used with `prefix-label`                                                     |
-| `prefixLabel`      | String   | No                        | The label to add before each selected item on the button. Cannot be used with `prefix-id` (NOT YET IMPLEMENTED)                                                      |
-| `onExpand`         | Function | No                        | Called when content is expanded                                                                                                                                      |
-| `onCollapse`       | Function | No                        | Called when content is collapsed                                                                                                                                     |
-| `onSelect`         | Function | No                        | props: (e: event, { index: number }), triggered on item clicked (not for type `radio`/`checkbox`)                                                                    |
-| `onChange`         | Function | No                        | props: (e: event, { index: number, checked: number[], checkedValues: string[] }), triggered on item `checked` change, (for type `radio`/`checkbox` only)             |
-| `strategy`         | string   | No                        | Swap between `fixed` and `absolute` positioning strategy. Use `fixed` when dropdown is in contained in an overflow and needs to be visible as you scroll the screen. |
-
-## EbayMenuButtonItem Attributes
-
-| Name             | Type     | Required | Description                                                                         |
-| ---------------- | -------- | -------- | ----------------------------------------------------------------------------------- |
-| `value`          | String   | No       | for type `radio`, `checkbox`: the value to use with callbacks for `checkedValues[]` |
-| `checked`        | Boolean  | No       | for type `radio`, `checkbox`: whether or not the item is checked                    |
-| `disabled`       | Boolean  | No       | makes the menu item disabled                                                        |
-| `badgeNumber`    | Number   | No       | used as the number to be placed in the badge                                        |
-| `badgeAriaLabel` | Number   | No       | used as the number to be placed in the badge (NOT YET IMPLEMENTED)                  |
-| `onClick`        | Function | No       | For a non-link menu item, with param `{ originalEvent }`                            |
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/buttons-ebay-menu-button--docs)

package/ebay-menu-button/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../menu-button-Cw_SMZjv.js"),t=require("../menu-Bvnencku.js");require("react");require("classnames");exports.EbayMenuButton=e.EbayMenuButton;exports.EbayMenuButtonLabel=e.EbayMenuButtonLabel;exports.EbayMenuButtonSeparator=e.EbayMenuButtonSeparator;exports.EbayMenuButtonItem=t.EbayMenuItem;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../menu-button-BPwZtkuk.js"),t=require("../menu-A2rDgu5k.js");require("react");require("classnames");exports.EbayMenuButton=e.EbayMenuButton;exports.EbayMenuButtonLabel=e.EbayMenuButtonLabel;exports.EbayMenuButtonSeparator=e.EbayMenuButtonSeparator;exports.EbayMenuButtonItem=t.EbayMenuItem;

package/ebay-number-input/README.md

@@ -1,69 +1,5 @@
-# ebay-number-input
+# EbayNumberInput
 
-The `EbayNumberInput` component provides a numeric input field with increment and decrement buttons. It allows users to easily adjust numeric values within defined boundaries.
+## Documentation
 
-## Usage
-
-```jsx
-import { EbayNumberInput } from '@ebay/ebayui-core-react';
-
-// Basic usage
-<EbayNumberInput />
-
-// With custom min/max values
-<EbayNumberInput min={1} max={10} value={5} />
-
-// With a label
-<EbayNumberInput label="Quantity" />
-
-// With delete functionality
-<EbayNumberInput a11yDeleteText="Delete item" />
-
-// With event handlers
-<EbayNumberInput
-  onChange={(e, { value }) => console.log('Value changed:', value)}
-  onIncrement={(e, { value }) => console.log('Incremented to:', value)}
-  onDecrement={(e, { value }) => console.log('Decremented to:', value)}
-/>
-```
-
-## Props
-
-The `EbayNumberInput` component extends most of the props from `EbayTextbox` with some modifications and additions:
-
-| Name             | Type       | Required | Default    | Description                                                                                                                                            |
-| ---------------- | ---------- | -------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `value`          | `number`   | No       | `1`        | The current value of the input                                                                                                                         |
-| `min`            | `number`   | No       | `1`        | The minimum allowed value                                                                                                                              |
-| `max`            | `number`   | No       | `Infinity` | The maximum allowed value                                                                                                                              |
-| `label`          | `string`   | No       | `''`       | Label text to display with the input                                                                                                                   |
-| `a11yDeleteText` | `string`   | No       | `''`       | Accessibility text for the delete button. When provided, the decrement button will be replaced with a delete button when the value reaches the minimum |
-| `onChange`       | `Function` | No       | `() => {}` | Called when the value changes (either through direct input or button clicks)                                                                           |
-| `onInputChange`  | `Function` | No       | `() => {}` | Called when the input value changes directly                                                                                                           |
-| `onFocus`        | `Function` | No       | `() => {}` | Called when the input receives focus                                                                                                                   |
-| `onBlur`         | `Function` | No       | `() => {}` | Called when the input loses focus                                                                                                                      |
-| `onKeyDown`      | `Function` | No       | `() => {}` | Called on keydown event                                                                                                                                |
-| `onKeyPress`     | `Function` | No       | `() => {}` | Called on keypress event                                                                                                                               |
-| `onKeyUp`        | `Function` | No       | `() => {}` | Called on keyup event                                                                                                                                  |
-| `onDeleteClick`  | `Function` | No       | `() => {}` | Called when the delete button is clicked (only visible when `a11yDeleteText` is provided and value is at minimum)                                      |
-| `onIncrement`    | `Function` | No       | `() => {}` | Called when the increment button is clicked                                                                                                            |
-| `onDecrement`    | `Function` | No       | `() => {}` | Called when the decrement button is clicked                                                                                                            |
-
-Additionally, this component inherits all other props from the `EbayTextbox` component except those explicitly overridden above.
-
-## Event Handlers
-
-All event handlers receive two arguments:
-
-1. The original event object
-2. An object with a `value` property containing the current numeric value
-
-Example:
-
-```jsx
-<EbayNumberInput
-    onChange={(event, { value }) => {
-        console.log("New value:", value);
-    }}
-/>
-```
+[Storybook](https://opensource.ebay.com/evo-web/ebayui-core-react/main/?path=/docs/form-input-ebay-number-input--docs)

package/ebay-number-input/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("../tslib.es6-C4EgNkz1.js"),t=require("react"),M=require("classnames"),d=require("../textbox-DAip4ToD.js"),y=require("../icon-button-AJ6dtyvc.js"),S=require("../icons/ebay-icon-remove-24/index.js"),j=require("../icons/ebay-icon-delete-24/index.js"),O=require("../icons/ebay-icon-add-24/index.js"),W=v=>{const{className:x="",value:c=1,min:o=1,max:r=1/0,label:p="",a11yDeleteText:u="",onChange:I=()=>{},onInputChange:N=()=>{},onFocus:f=()=>{},onBlur:D=()=>{},onKeyDown:C=()=>{},onKeyPress:K=()=>{},onKeyUp:_=()=>{},onDeleteClick:g=()=>{},onIncrement:w=()=>{},onDecrement:B=()=>{}}=v,s=A.__rest(v,["className","value","min","max","label","a11yDeleteText","onChange","onInputChange","onFocus","onBlur","onKeyDown","onKeyPress","onKeyUp","onDeleteClick","onIncrement","onDecrement"]),q=u?1:0,[a,i]=t.useState(c??q),m=t.useRef(null),b=(n,e=0)=>{const z=u?1:0;let l=parseInt(n,10)+e;return isNaN(l)?l=z:l>r?l=r:l<o&&(l=o),l},h=n=>{if(!m.current)return;const e=m.current;e.classList.remove("number-input--increment"),e.classList.remove("number-input--decrement"),e.classList.remove("number-input--increment-disabled"),e.classList.remove("number-input--decrement-disabled"),e.offsetWidth,e.classList.add(`number-input--${n}`)},k=n=>{const e=b(a,1);h(e>=r?"increment-disabled":"increment"),i(e),w(n,{value:e}),I(n,{value:e})},P=n=>{const e=b(a,-1);h(e<=o?"decrement-disabled":"decrement"),i(e),B(n,{value:e}),I(n,{value:e})},E=n=>{const e=b(n.target.value,0);i(e),N(n,{value:e})},T=(n,e)=>{f(n,{value:Number(e.value)})},V=(n,e)=>{D(n,{value:Number(e.value)})},F=(n,e)=>{C(n,{value:Number(e.value)})},L=(n,e)=>{K(n,{value:Number(e.value)})},R=(n,e)=>{_(n,{value:Number(e.value)})},U=n=>{g(n,{value:a})};return t.createElement("span",{ref:m,className:M("number-input",u&&a===1&&"number-input--show-delete",x)},t.createElement(d.EbayTextbox,Object.assign({},s,{max:r,min:o,onBlur:V,onChange:E,onFocus:T,onInputChange:E,onKeyDown:F,onKeyPress:L,onKeyUp:R,type:"number",value:a}),t.createElement(d.EbayTextboxPrefixIcon,null,p&&t.createElement("label",{htmlFor:s?.id||"number-input"},p),t.createElement(y.EbayIconButton,{"aria-hidden":!0,className:"number-input__decrement",disabled:a<=o,icon:t.createElement(S.EbayIconRemove24,null),onClick:P,size:"small",tabIndex:-1,transparent:!0})),t.createElement(d.EbayTextboxPostfixIcon,null,u&&t.createElement(y.EbayIconButton,{"aria-label":u,className:"number-input__delete",icon:t.createElement(j.EbayIconDelete24,null),onClick:U,size:"small",transparent:!0}),t.createElement(y.EbayIconButton,{"aria-hidden":!0,className:"number-input__increment",disabled:a>=r,icon:t.createElement(O.EbayIconAdd24,null),onClick:k,size:"small",tabIndex:-1,transparent:!0}))))};exports.EbayNumberInput=W;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("../tslib.es6-BW4cJBUu.js"),t=require("react"),M=require("classnames"),d=require("../textbox-HffvptHx.js"),y=require("../icon-button-E_6JKTh3.js"),S=require("../icons/ebay-icon-remove-24/index.js"),j=require("../icons/ebay-icon-delete-24/index.js"),O=require("../icons/ebay-icon-add-24/index.js"),W=v=>{const{className:x="",value:c=1,min:o=1,max:r=1/0,label:p="",a11yDeleteText:u="",onChange:I=()=>{},onInputChange:N=()=>{},onFocus:f=()=>{},onBlur:D=()=>{},onKeyDown:C=()=>{},onKeyPress:K=()=>{},onKeyUp:_=()=>{},onDeleteClick:g=()=>{},onIncrement:w=()=>{},onDecrement:B=()=>{}}=v,s=A.__rest(v,["className","value","min","max","label","a11yDeleteText","onChange","onInputChange","onFocus","onBlur","onKeyDown","onKeyPress","onKeyUp","onDeleteClick","onIncrement","onDecrement"]),q=u?1:0,[a,i]=t.useState(c??q),m=t.useRef(null),b=(n,e=0)=>{const z=u?1:0;let l=parseInt(n,10)+e;return isNaN(l)?l=z:l>r?l=r:l<o&&(l=o),l},h=n=>{if(!m.current)return;const e=m.current;e.classList.remove("number-input--increment"),e.classList.remove("number-input--decrement"),e.classList.remove("number-input--increment-disabled"),e.classList.remove("number-input--decrement-disabled"),e.offsetWidth,e.classList.add(`number-input--${n}`)},k=n=>{const e=b(a,1);h(e>=r?"increment-disabled":"increment"),i(e),w(n,{value:e}),I(n,{value:e})},P=n=>{const e=b(a,-1);h(e<=o?"decrement-disabled":"decrement"),i(e),B(n,{value:e}),I(n,{value:e})},E=n=>{const e=b(n.target.value,0);i(e),N(n,{value:e})},T=(n,e)=>{f(n,{value:Number(e.value)})},V=(n,e)=>{D(n,{value:Number(e.value)})},F=(n,e)=>{C(n,{value:Number(e.value)})},L=(n,e)=>{K(n,{value:Number(e.value)})},R=(n,e)=>{_(n,{value:Number(e.value)})},U=n=>{g(n,{value:a})};return t.createElement("span",{ref:m,className:M("number-input",u&&a===1&&"number-input--show-delete",x)},t.createElement(d.EbayTextbox,Object.assign({},s,{max:r,min:o,onBlur:V,onChange:E,onFocus:T,onInputChange:E,onKeyDown:F,onKeyPress:L,onKeyUp:R,type:"number",value:a}),t.createElement(d.EbayTextboxPrefixIcon,null,p&&t.createElement("label",{htmlFor:s?.id||"number-input"},p),t.createElement(y.EbayIconButton,{"aria-hidden":!0,className:"number-input__decrement",disabled:a<=o,icon:t.createElement(S.EbayIconRemove24,null),onClick:P,size:"small",tabIndex:-1,transparent:!0})),t.createElement(d.EbayTextboxPostfixIcon,null,u&&t.createElement(y.EbayIconButton,{"aria-label":u,className:"number-input__delete",icon:t.createElement(j.EbayIconDelete24,null),onClick:U,size:"small",transparent:!0}),t.createElement(y.EbayIconButton,{"aria-hidden":!0,className:"number-input__increment",disabled:a>=r,icon:t.createElement(O.EbayIconAdd24,null),onClick:k,size:"small",tabIndex:-1,transparent:!0}))))};exports.EbayNumberInput=W;