@ebay/ui-core-react/ebay-listbox/index.js

Skin components build off React

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