@ebay/ui-core-react/listbox-button-Dx-GGxsh.js

Skin components build off React

"use strict";const V=require("./tslib.es6-C4EgNkz1.js"),n=require("react"),O=require("classnames"),ge=require("./utils-C9NL3q0j.js"),_e=require("./icons/ebay-icon-tick-16/index.js"),ye=require("./dropdown-B6wMNyjP.js"),Ee=require("./icons/ebay-icon-chevron-down-16/index.js"),W=p=>{var{value:d,children:g,selected:b,onClick:f,index:_,icon:y,innerRef:k,className:C,a11ySelectedText:T="selected"}=p,v=V.__rest(p,["value","children","selected","onClick","index","icon","innerRef","className","a11ySelectedText"]);const E=O("listbox-button__option",C,{"listbox-button__option--active":b});return n.createElement("div",Object.assign({},v,{className:E,role:"option","aria-selected":b,ref:k,onClick:i=>{f(i,d,_)}}),n.createElement("span",{className:"listbox-button__value"},y,g,b&&n.createElement("span",{className:"clipped"},T)),n.createElement(_e.EbayIconTick16,null))},he=p=>{var d,{children:g,name:b,value:f,selected:_,borderless:y,fluid:k,className:C,maxHeight:T,prefixId:v,prefixLabel:E,floatingLabel:i,strategy:L,split:w,unselectedText:z="-",a11ySelectedText:G,onChange:I=()=>{},onCollapse:J=()=>{},onExpand:Q=()=>{}}=p,X=V.__rest(p,["children","name","value","selected","borderless","fluid","className","maxHeight","prefixId","prefixLabel","floatingLabel","strategy","split","unselectedText","a11ySelectedText","onChange","onCollapse","onExpand"]);const r=n.useRef(null),S=n.useRef(new Map),a=ge.filterByType(g,W);if(!a.length)throw new Error(`EbayListboxButton: Please use a
        EbayListboxButtonOption that defines the options of the listbox`);const Y=()=>{const e=_!==void 0?_:a.findIndex(({props:l})=>f!==void 0&&l.value===f||l.selected),t=e>-1||i?e:void 0;return{option:a[t],index:t}},{option:D,index:R}=Y(),[s,m]=n.useState(D),[o,H]=n.useState(R),[x,A]=n.useState(),[Z,ee]=n.useState(!1),[q,$]=n.useState(),{overlayStyles:te,refs:h}=ye.useFloatingDropdown({open:x,options:{strategy:L}}),N=h.host,ne=h.overlay;n.useEffect(()=>{m(D)},[f]);const c=n.Children.toArray(g),j=e=>c[e].props.value,oe=n.useCallback(e=>c.findIndex(({props:t})=>t.value===e),[c]),se=e=>S.current.get(e),u=()=>{A(!1),J()},le=()=>{A(!0),Q()},ae=()=>{x?u():le()},F=(e,t)=>{m(c[t]),H(t),u(),N.current.focus(),I(e,{index:t,selected:[String(j(t))],wasClicked:q}),$(!1)},ce=()=>{u(),m(c[R])},ie=e=>{const t=r.current.children[e];t.setAttribute("aria-selected","true"),t.classList.add("listbox-button__option--active")},re=e=>{const t=r.current.children[e];t.setAttribute("aria-selected","false"),t.classList.remove("listbox-button__option--active")},ue=e=>{const t=ne.current,l=se(e);if(t.scrollHeight>t.clientHeight){const xe=t.clientHeight+t.scrollTop,M=l.offsetTop+l.offsetHeight;M>xe?t.scrollTop=M-t.clientHeight:l.offsetTop<t.scrollTop&&(t.scrollTop=l.offsetTop)}},K=e=>{ie(o===void 0||e===-1?0:e),re(o===void 0||o===-1?0:o),ue(e),H(e),m(c[e])},P=e=>setTimeout(()=>{var t;return(t=r?.current)===null||t===void 0?void 0:t.focus(e)},0),pe=()=>{ae(),P({preventScroll:!0})},de=e=>{switch(e.key){case"Escape":u();break;case"Enter":P();break}},be=e=>{switch(e.key){case" ":case"PageUp":case"PageDown":case"Home":case"End":e.preventDefault();break;case"Down":case"ArrowDown":e.preventDefault(),o!==a.length-1&&K(o<a.length-1?o+1:0);break;case"Up":case"ArrowUp":e.preventDefault(),o!==0&&K(o>0?o-1:a.length-1);break;case"Enter":u(),setTimeout(()=>m(c[o])),setTimeout(()=>N.current.focus(),0),I(e,{index:o,selected:[String(j(o))],wasClicked:q});break;case"Esc":case"Escape":ce();break}},B=a.map((e,t)=>n.cloneElement(e,{index:t,key:t,selected:s&&e.props.value===s.props.value,id:e.props.id||`listbox_btn_${e.props.value}_${t}`,onClick:l=>F(l,t),innerRef:l=>{l?S.current.set(t,l):S.current.delete(t)},a11ySelectedText:G})),fe=O("listbox-button",C,{"listbox-button--fluid":k}),ve=O("btn",{"btn--form":!y,"btn--borderless":y,"btn--floating-label":i&&s,[`btn--split-${w}`]:w&&w!=="none"}),U=v&&"expand-btn-text",me=n.createElement(n.Fragment,null,i&&n.createElement("span",{className:"btn__floating-label"},i),E&&n.createElement("span",{className:"btn__label"},E),n.createElement("span",{className:"btn__text",id:U},s?.props.icon||s?.props.children||z));return n.createElement("span",{className:fe},n.createElement("button",Object.assign({},X,{onFocus:()=>ee(!0),type:"button",className:ve,"aria-expanded":!!x,"aria-haspopup":"listbox","aria-labelledby":v&&`${v} ${U}`,onClick:pe,onMouseDown:e=>e.preventDefault(),onKeyUp:de,ref:h.setHost}),n.createElement("span",{className:"btn__cell"},me,n.createElement(Ee.EbayIconChevronDown16,null))),(x||Z)&&n.createElement("div",{className:O("listbox-button__listbox",{"listbox-button__listbox--fixed":L==="fixed"}),ref:h.setOverlay,style:Object.assign(Object.assign({},te),{maxHeight:T})},n.createElement("div",{className:"listbox-button__options",role:"listbox",tabIndex:x?0:-1,ref:r,"aria-activedescendant":(d=B[o])===null||d===void 0?void 0:d.props.id,onKeyDown:e=>be(e),onMouseDown:e=>{e.preventDefault(),$(!0)},onBlur:()=>{u(),setTimeout(()=>N.current.focus(),0)}},B)),n.createElement("select",{hidden:!0,className:"listbox-button__native",name:b,onChange:e=>F(e,oe(e.target.value)),value:s?s?.props.value:""},B.map((e,t)=>n.createElement("option",{value:e.props.value,key:t}))))};exports.ListboxButton=he;exports.ListboxOption=W;