@ebay/ui-core-react 7.3.5 → 7.4.0-alpha.0

package/ebay-listbox/README.md

@@ -0,0 +1,100 @@
+# EbayListbox
+
+## Demo
+
+[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.                                                                           |
+
+### 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>
+```

package/ebay-listbox/index.d.ts

@@ -0,0 +1,4 @@
+export * from './listbox';
+export * from './listbox-option';
+export * from './listbox-option-description';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,8BAA8B,CAAA"}

package/ebay-listbox/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../listbox-Bq3f2oxx.js");exports.EbayListbox=t.EbayListbox;exports.EbayListboxOption=t.EbayListboxOption;exports.EbayListboxOptionDescription=t.EbayListboxOptionDescription;

package/ebay-listbox/listbox-option-description.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps, FC } from 'react';
+export type EbayListboxOptionDescriptionProps = ComponentProps<'div'>;
+export declare const EbayListboxOptionDescription: FC<EbayListboxOptionDescriptionProps>;
+//# sourceMappingURL=listbox-option-description.d.ts.map

package/ebay-listbox/listbox-option-description.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox-option-description.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox/listbox-option-description.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAGjD,MAAM,MAAM,iCAAiC,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAEtE,eAAO,MAAM,4BAA4B,EAAE,EAAE,CAAC,iCAAiC,CACc,CAAA"}

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

@@ -0,0 +1,10 @@
+import { ComponentProps, FC, ReactElement } from 'react';
+export type EbayListboxOptionProps = ComponentProps<'div'> & {
+    icon?: ReactElement;
+    text?: string;
+    value: string;
+    disabled?: boolean;
+    selected?: boolean;
+};
+export declare const EbayListboxOption: FC<EbayListboxOptionProps>;
+//# sourceMappingURL=listbox-option.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"listbox-option.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox/listbox-option.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAM/D,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACzD,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAoCxD,CAAA"}

package/ebay-listbox/listbox.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import { EbayChangeEventHandler } from '../events';
+export type ChangeEventProps = {
+    index: number;
+    selected: string[];
+    wasClicked: boolean;
+};
+export type EbayListboxProps = Omit<ComponentProps<'div'>, 'onChange'> & {
+    name?: string;
+    disabled?: boolean;
+    children: ReactNode;
+    listSelection?: 'auto' | 'manual';
+    typeaheadTimeoutLength?: number;
+    maxHeight?: string | number;
+    selectClassName?: string;
+    onChange?: EbayChangeEventHandler<HTMLSpanElement, ChangeEventProps>;
+    onEscape?: () => void;
+};
+export declare const EbayListbox: FC<EbayListboxProps>;
+//# sourceMappingURL=listbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox/listbox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA6B,EAAE,EAA4B,MAAM,OAAO,CAAA;AAItF,OAAO,EAAE,cAAc,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAA;AAInE,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AAIlD,MAAM,MAAM,gBAAgB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACvB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAClC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,sBAAsB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;IACrE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA0L5C,CAAA"}

package/ebay-listbox-button/index.d.ts

@@ -1,3 +1,2 @@
-export { default as EbayListboxButton } from './listbox-button';
-export { default as EbayListboxButtonOption } from './listbox-button-option';
+export * from './listbox-button';
 //# sourceMappingURL=index.d.ts.map

package/ebay-listbox-button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAC/D,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,yBAAyB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox-button/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA"}

package/ebay-listbox-button/index.js

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),w=require("classnames"),V=require("../icon-TuxfQndO.js"),be=require("../common/component-utils/utils/index.js"),F=({value:b,children:y,selected:i,onClick:v,index:m,innerRef:g,className:k,id:h,...f})=>{const x=w("listbox-button__option",k,{"listbox-button__option--active":i});return o.createElement("div",{...f,className:x,role:"option",id:h||`listbox_btn_${b}_${m}`,"aria-selected":i,ref:g,onClick:u=>{v(u,b,m)}},o.createElement("span",{className:"listbox-button__value"},y),o.createElement(V.EbayIcon,{name:"tick16"}))},me=({children:b,name:y,value:i,selected:v,borderless:m,fluid:g,className:k,maxHeight:h,prefixId:f,prefixLabel:x,floatingLabel:u,unselectedText:j="-",onChange:O=()=>{},onCollapse:W=()=>{},onExpand:z=()=>{},...G})=>{const a=o.useRef(null),S=o.useRef(),B=o.useRef(new Map),E=o.useRef(),l=be.filterByType(b,F);if(!l.length)throw new Error(`EbayListboxButton: Please use a
-        EbayListboxButtonOption that defines the options of the listbox`);const J=()=>{const e=v!==void 0?v:l.findIndex(({props:s})=>i!==void 0&&s.value===i),t=e>-1||u?e:void 0;return{option:l[t],index:t}},{option:N,index:T}=J(),[c,d]=o.useState(N),[n,C]=o.useState(T),[_,D]=o.useState(),[Q,X]=o.useState(!1),[A,L]=o.useState();o.useEffect(()=>{d(N)},[i]);const r=o.Children.toArray(b),I=e=>r[e].props.value,Y=o.useCallback(e=>r.findIndex(({props:t})=>t.value===e),[r]),R=e=>B.current.get(e),H=e=>{const t=a.current;t==null||t.setAttribute("aria-activedescendant",R(e).id)},p=()=>{D(!1),W()},Z=()=>{D(!0),z()},ee=()=>{_?p():Z()},P=(e,t)=>{d(r[t]),C(t),p(),H(t),E.current.focus(),O(e,{index:t,selected:[I(t)],wasClicked:A}),L(!1)},te=()=>{p(),d(r[T])},oe=e=>{const t=a.current.children[e];t.setAttribute("aria-selected","true"),t.classList.add("listbox-button__option--active")},ne=e=>{const t=a.current.children[e];t.setAttribute("aria-selected","false"),t.classList.remove("listbox-button__option--active")},se=e=>{const t=S.current,s=R(e);if(t.scrollHeight>t.clientHeight){const pe=t.clientHeight+t.scrollTop,$=s.offsetTop+s.offsetHeight;$>pe?t.scrollTop=$-t.clientHeight:s.offsetTop<t.scrollTop&&(t.scrollTop=s.offsetTop)}},U=e=>{oe(n===void 0||e===-1?0:e),ne(n===void 0||n===-1?0:n),se(e),H(e),C(e),d(r[e])},q=e=>setTimeout(()=>{var t;return(t=a==null?void 0:a.current)==null?void 0:t.focus(e)},0),ce=()=>{ee(),X(!0),q({preventScroll:!0})},ae=e=>{switch(e.key){case"Escape":p();break;case"Enter":q();break}},le=e=>{switch(e.key){case" ":case"PageUp":case"PageDown":case"Home":case"End":e.preventDefault();break;case"Down":case"ArrowDown":e.preventDefault(),n!==l.length-1&&U(n<l.length-1?n+1:0);break;case"Up":case"ArrowUp":e.preventDefault(),n!==0&&U(n>0?n-1:l.length-1);break;case"Enter":p(),setTimeout(()=>d(r[n])),setTimeout(()=>E.current.focus(),0),O(e,{index:n,selected:[I(n)],wasClicked:A});break;case"Esc":case"Escape":te();break}},K=l.map((e,t)=>o.cloneElement(e,{index:t,key:t,selected:c&&e.props.value===c.props.value,onClick:s=>P(s,t),innerRef:s=>s?B.current.set(t,s):B.current.delete(t)})),re=w("listbox-button",k,{"listbox-button--fluid":g}),ie=w("btn",{"btn--form":!m,"btn--borderless":m,"btn--floating-label":u&&c}),M=f&&"expand-btn-text",ue=o.createElement(o.Fragment,null,u&&o.createElement("span",{className:"btn__floating-label"},u),x&&o.createElement("span",{className:"btn__label"},x),o.createElement("span",{className:"btn__text",id:M},(c==null?void 0:c.props.children)||j));return o.createElement("span",{className:re},o.createElement("button",{...G,type:"button",className:ie,"aria-expanded":!!_,"aria-haspopup":"listbox","aria-labelledby":f&&`${f} ${M}`,onClick:ce,onMouseDown:e=>e.preventDefault(),onKeyUp:ae,ref:E},o.createElement("span",{className:"btn__cell"},ue,o.createElement(V.EbayIcon,{name:"chevronDown12"}))),(_||Q)&&o.createElement("div",{className:"listbox-button__listbox",ref:S,style:{maxHeight:h}},o.createElement("div",{className:"listbox-button__options",role:"listbox",tabIndex:_?0:-1,ref:a,onKeyDown:e=>le(e),onMouseDown:e=>{e.preventDefault(),L(!0)},onBlur:()=>{p(),setTimeout(()=>E.current.focus(),0)}},K)),o.createElement("select",{hidden:!0,className:"listbox-button__native",name:y,onChange:e=>P(e,Y(e.target.value)),value:c?c==null?void 0:c.props.value:""},K.map((e,t)=>o.createElement("option",{value:e.props.value,key:t}))))};exports.EbayListboxButton=me;exports.EbayListboxButtonOption=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),W=require("makeup-expander"),X=require("makeup-prevent-scroll-keys"),N=require("classnames"),E=require("../listbox-Bq3f2oxx.js"),Y=require("../common/component-utils/utils/index.js"),Z=require("../icon-TuxfQndO.js");function ee(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(r,n,o.get?o:{enumerable:!0,get:()=>t[n]})}}return r.default=t,Object.freeze(r)}const P=ee(X),$=({alwaysDisplay:t,icon:r,labelId:n,text:o,unselectedText:_,postfixLabel:m})=>{if(r)return e.createElement("span",{id:n,className:"btn__text"},r);if(o||t){const i=o||_;return e.createElement("span",{id:n,className:"btn__text"},i,m&&e.createElement("span",{className:"btn__postfix-label"},m))}};function k({selected:t,value:r,options:n}){return t!==void 0?t:r!==void 0?n.findIndex(o=>o.props.value===r):n.findIndex(o=>o.props.selected)}const te=E.EbayListboxOption,ne=({"aria-invalid":t,a11yIconPrefixText:r,borderless:n,children:o,className:_,collapseOnSelect:m,disabled:i,floatingLabel:y,fluid:S,hasError:h,listSelection:F,maxHeight:M,name:K,postfixLabel:q,prefixId:C,prefixLabel:L,selected:v,split:I,truncate:R,unselectedText:T="-",value:g,variant:z,onChange:A=()=>{},onExpand:U=()=>{},onCollapse:V=()=>{},...G})=>{const a=e.useRef(),u=e.useRef(),l=e.useRef(),b=Y.filterByType(o,E.EbayListboxOption),[j,w]=e.useState(k({selected:v,value:g,options:b})),p=b[j],d=p&&(p.props.text||p.props.children),O=p&&p.props.icon,B=O&&d,f=C&&"expand-btn-text";e.useEffect(()=>{w(k({selected:v,value:g,options:b}))},[g,v]),e.useEffect(()=>{function c(){var x,D;(D=(x=a.current)==null?void 0:x.querySelector(".listbox-button__listbox"))==null||D.scroll(),U()}function s(){requestAnimationFrame(()=>{var x;(x=u.current)==null||x.focus()}),V()}return b.length&&!i&&(l.current=new W(a.current,{alwaysDoFocusManagement:!0,autoCollapse:!0,expandOnClick:!0,simulateSpacebarClick:!0,contentSelector:".listbox-button__listbox",hostSelector:".listbox-button__control",expandedClass:"listbox-button--expanded",focusManagement:"content"}),a.current.addEventListener("expander-expand",c),a.current.addEventListener("expander-collapse",s)),P.add(u.current),()=>{l.current&&(l.current.destroy(),l.current=void 0),a.current&&(a.current.removeEventListener("expander-expand",c),a.current.removeEventListener("expander-collapse",s)),u.current&&P.remove(u.current)}},[i]);function H(c,s){m!==!1&&(l.current.expanded=!1),w(s.index),A(c,s)}function J(){l.current.expanded=!1}const Q=R&&!S?"div":"span";return e.createElement(Q,{ref:a,className:N("listbox-button",_,{"listbox-button--fluid":S,"listbox-button--form":z==="form","listbox-button--error":t||h})},e.createElement("button",{...G,disabled:i,ref:u,className:N("listbox-button__control","btn",{[`btn--split-${I}`]:I,"btn--borderless":n,"btn--form":!n,"btn--truncated":R,"btn--floating-label":y}),"aria-label":B&&`${r}: ${B}`,value:d,type:"button","aria-haspopup":"listbox","aria-labelledby":f&&`${C} ${f}`,"aria-invalid":t||h},e.createElement("span",{className:"btn__cell"},y?e.createElement(e.Fragment,null,e.createElement("span",{className:N("btn__floating-label","btn__floating-label--animate",!d&&"btn__floating-label--inline")},y),e.createElement($,{icon:O,labelId:f,text:d,unselectedText:T,postfixLabel:q})):e.createElement(e.Fragment,null,L?e.createElement("span",{className:"btn__label"},L):null,e.createElement($,{alwaysDisplay:!0,icon:O,labelId:f,text:d,unselectedText:T,postfixLabel:q})),e.createElement(Z.EbayIcon,{name:"chevronDown12"}))),e.createElement(E.EbayListbox,{className:"listbox-button__listbox",selectClassName:"listbox-button__native",tabIndex:-1,listSelection:F,name:K,maxHeight:M,onChange:H,onEscape:J},b.map((c,s)=>e.createElement(E.EbayListboxOption,{key:c.props.value||s,selected:s===j,...c.props}))))};exports.EbayListboxButton=ne;exports.EbayListboxButtonOption=te;

package/ebay-listbox-button/listbox-button.d.ts

@@ -1,11 +1,13 @@
-import { ComponentProps, FC } from 'react';
-import { EbayChangeEventHandler } from '../common/event-utils/types';
+import React, { ComponentProps, FC } from 'react';
+import { EbayListboxProps } from '../ebay-listbox/';
+import { EbayChangeEventHandler } from '../events';
+import { EbayButtonProps } from '../ebay-button';
 export type ChangeEventProps = {
     index: number;
     selected: string[];
     wasClicked: boolean;
 };
-export type EbayListboxButtonProps = Omit<ComponentProps<'input'>, 'onChange'> & {
+export type EbayListboxButtonProps = Omit<ComponentProps<'button'>, 'onChange'> & {
     selected?: number;
     borderless?: boolean;
     fluid?: boolean;
@@ -14,10 +16,18 @@ export type EbayListboxButtonProps = Omit<ComponentProps<'input'>, 'onChange'> &
     prefixLabel?: string;
     floatingLabel?: string;
     unselectedText?: string;
-    onChange?: EbayChangeEventHandler<HTMLButtonElement, ChangeEventProps>;
+    a11yIconPrefixText?: string;
+    collapseOnSelect?: boolean;
+    hasError?: boolean;
+    listSelection?: EbayListboxProps['listSelection'];
+    postfixLabel?: string;
+    split?: EbayButtonProps['split'];
+    truncate?: EbayButtonProps['truncate'];
+    variant?: 'form';
+    onChange?: EbayChangeEventHandler<HTMLSpanElement, ChangeEventProps>;
     onCollapse?: () => void;
     onExpand?: () => void;
 };
-declare const ListboxButton: FC<EbayListboxButtonProps>;
-export default ListboxButton;
+export declare const EbayListboxButtonOption: React.FC<import("../ebay-listbox/listbox-option").EbayListboxOptionProps>;
+export declare const EbayListboxButton: FC<EbayListboxButtonProps>;
 //# sourceMappingURL=listbox-button.d.ts.map

package/ebay-listbox-button/listbox-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"listbox-button.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox-button/listbox-button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEV,cAAc,EAAE,EAAE,EACrB,MAAM,OAAO,CAAA;AAGd,OAAO,EAAE,sBAAsB,EAAO,MAAM,6BAA6B,CAAA;AAIzE,MAAM,MAAM,gBAAgB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACvB,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,sBAAsB,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IACvE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAA;AAED,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,sBAAsB,CA+R7C,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"listbox-button.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox-button/listbox-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEV,cAAc,EACd,EAAE,EAKL,MAAM,OAAO,CAAA;AAOd,OAAO,EAAe,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAiDhD,MAAM,MAAM,gBAAgB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACvB,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,sBAAsB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;IACrE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAA;AAED,eAAO,MAAM,uBAAuB,2EAAoB,CAAA;AAExD,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA6LxD,CAAA"}

package/listbox-Bq3f2oxx.js

@@ -0,0 +1 @@
+"use strict";const e=require("react"),H=require("makeup-active-descendant"),A=require("makeup-typeahead"),v=require("classnames"),L=require("./common/component-utils/utils/index.js"),B=require("./icon-TuxfQndO.js");function M(s){if(!s)return;const o=s.parentElement,l=s.offsetTop+s.offsetHeight,d=o.scrollTop+o.offsetHeight;s.offsetTop<o.scrollTop?o.scrollTop=s.offsetTop:l>d&&(o.scrollTop=l-o.offsetHeight)}const k=({children:s,className:o,...l})=>e.createElement("div",{className:v("listbox__description",o),...l},s),I=({className:s,icon:o,text:l,children:d,disabled:b,tabIndex:i,selected:h,...x})=>{const r=L.filterByType(d,k),m=l||(r!=null&&r.length?"":d);return e.createElement("div",{...x,tabIndex:b?-1:i,className:v("listbox__option",s),"aria-disabled":b,"aria-selected":h,role:"option"},o?e.createElement("span",{className:"listbox__value"},o,m?e.createElement("span",null,m):null,r!=null&&r.length?r:null):e.createElement(e.Fragment,null,e.createElement("span",{className:"listbox__value"},m),r!=null&&r.length?r:null),e.createElement(B.EbayIcon,{name:"tick16"}))},F=1300,K=({name:s,className:o,disabled:l,children:d,tabIndex:b=0,listSelection:i,maxHeight:h,typeaheadTimeoutLength:x,selectClassName:r,onChange:m=()=>{},onEscape:R=()=>{},...N})=>{var D;const u=L.filterByType(d,I),_=u.findIndex(t=>t.props.selected),[p,T]=e.useState(u.findIndex(t=>t.props.selected));e.useEffect(()=>{_!==p&&T(_)},[_]);const c=e.useRef(),f=e.useRef(),E=e.useRef(),y=e.useRef(!1);function g(t,n,a){n===p||u[n].props.disabled||(T(n),m(t,{index:n,selected:[u[n].props.value],wasClicked:a}))}function q(t){switch(t.code){case"Esc":case"Escape":R();break;case"Space":case"Enter":g(t,f.current.index,!1);break;default:return}const n=E.current.getIndex(c.current.children,t.key,x||F);if(n!==-1){f.current.index=n;const a=c.current.querySelectorAll("[role=option]")[n];c.current.scrollTop=a.offsetTop-c.current.offsetHeight/2}}function w(){y.current=!0}return e.useEffect(()=>{const t=n=>{const a=parseInt(n.detail.toIndex,10),C=c.current?c.current.querySelectorAll("[role=option]")[p]:null,O=y.current;M(C),y.current&&(y.current=!1),g(n,a,O)};if(u.length&&!l){const n=c.current,a=c.current;f.current=H.createLinear(n,a,a,".listbox__option[role=option]",{activeDescendantClassName:"listbox__option--active",autoInit:p,autoReset:null,autoScroll:i!=="auto"}),E.current=A()}return i==="auto"&&c.current.addEventListener("activeDescendantChange",t),()=>{f.current&&(f.current.reset(),f.current.destroy(),f.current=void 0),E.current&&(E.current.destroy(),E.current=void 0),c.current&&c.current.removeEventListener("activeDescendantChange",t)}},[p,l,i]),e.createElement(e.Fragment,null,e.createElement("div",{...N,tabIndex:b,ref:c,role:"listbox",onKeyDown:i!=="auto"?q:void 0,className:v("listbox__options",o),style:{maxHeight:h}},u.map((t,n)=>e.cloneElement(t,{key:t.props.value||n,...t.props,onMouseDown:i==="auto"?w:void 0,onClick:a=>{i!=="auto"&&g(a,n,!0)},selected:n===p}))),e.createElement("select",{hidden:!0,className:v("listbox__native",r),name:s,value:(D=u[p])==null?void 0:D.props.value,onChange:()=>{}},u.map((t,n)=>e.createElement("option",{key:t.props.value||n,value:t.props.value,disabled:t.props.disabled}))))};exports.EbayListbox=K;exports.EbayListboxOption=I;exports.EbayListboxOptionDescription=k;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebay/ui-core-react",
-  "version": "7.3.5",
+  "version": "7.4.0-alpha.0",
   "description": "Skin components build off React",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -128,9 +128,12 @@
   },
   "dependencies": {
     "classnames": "^2.2.6",
-    "makeup-expander": "^0.10.1",
+    "makeup-active-descendant": "^0.7.3",
+    "makeup-expander": "^0.11.3",
     "makeup-keyboard-trap": "^0.4.1",
+    "makeup-prevent-scroll-keys": "^0.3.2",
     "makeup-screenreader-trap": "^0.4.1",
+    "makeup-typeahead": "^0.3.2",
     "react-remove-scroll": "^2.2.0"
   },
   "devDependencies": {

package/utils/scroll.d.ts

@@ -0,0 +1,2 @@
+export declare function scroll(el?: HTMLElement): void;
+//# sourceMappingURL=scroll.d.ts.map

package/utils/scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../src/utils/scroll.ts"],"names":[],"mappings":"AAAA,wBAAgB,MAAM,CAAC,EAAE,CAAC,EAAE,WAAW,GAAG,IAAI,CAc7C"}

package/ebay-listbox-button/listbox-button-option.d.ts

@@ -1,10 +0,0 @@
-import { ComponentProps, FC, MouseEvent, RefObject } from 'react';
-type EbayListboxButtonOptionProps = ComponentProps<'input'> & {
-    selected?: boolean;
-    index?: number;
-    onClick?: (event: MouseEvent<HTMLDivElement>, value: any, index: number) => void;
-    innerRef?: RefObject<HTMLDivElement>;
-};
-declare const ListboxOption: FC<EbayListboxButtonOptionProps>;
-export default ListboxOption;
-//# sourceMappingURL=listbox-button-option.d.ts.map

package/ebay-listbox-button/listbox-button-option.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"listbox-button-option.d.ts","sourceRoot":"","sources":["../../src/ebay-listbox-button/listbox-button-option.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIxE,KAAK,4BAA4B,GAAG,cAAc,CAAC,OAAO,CAAC,GAAG;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjF,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACxC,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,4BAA4B,CA0BnD,CAAA;AAED,eAAe,aAAa,CAAA"}