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

Skin components build off React

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