@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"),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;