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