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