@ebay/ui-core-react/combobox-DOcuo_sc.js

Skin components build off React

"use strict";const V=require("./tslib.es6-C4EgNkz1.js"),t=require("react"),x=require("classnames"),be=require("./hooks-uidlIIid.js"),M=require("./utils-C9NL3q0j.js"),I=require("./dropdown-B2vObM4k.js"),K=s=>{var{className:p}=s,d=V.__rest(s,["className"]);return t.createElement("button",Object.assign({className:x("icon-btn","icon-btn--transparent",p)},d))},T=s=>{var{text:p,className:d,selected:C}=s,c=V.__rest(s,["text","className","selected"]);return t.createElement("div",Object.assign({},c,{role:"option",className:x("combobox__option",d),tabIndex:-1,"aria-selected":C}),p)},fe=s=>{var{className:p,floatingLabel:d,fluid:C,expanded:c,borderless:j,autocomplete:v="none",listSelection:k="automatic",defaultValue:A="",value:h,placeholder:H,opaqueLabel:U,children:D,dropdownRef:Y,onFocus:z=()=>{},onClick:G=()=>{},onExpand:J=()=>{},onCollapse:P=()=>{},onInputChange:L=()=>{},onFloatingLabelInit:Q=()=>{},onChange:W=()=>{},onSelect:X=()=>{},onKeyDown:Z=()=>{}}=s,g=V.__rest(s,["className","floatingLabel","fluid","expanded","borderless","autocomplete","listSelection","defaultValue","value","placeholder","opaqueLabel","children","dropdownRef","onFocus","onClick","onExpand","onCollapse","onInputChange","onFloatingLabelInit","onChange","onSelect","onKeyDown"]);const l=M.findComponent(D,K),y=M.filterByType(D,T),E=t.useRef(null),r=t.useRef(null),N=t.useRef(null);function $(){return v==="none"?y||[]:y.filter(e=>{var o,n;return(o=e.props.text)===null||o===void 0?void 0:o.toLowerCase().includes((n=u?.trim())===null||n===void 0?void 0:n.toLowerCase())})}const[ee,O]=t.useState(A||""),u=typeof h<"u"?h:ee;typeof h>"u"&&!L&&console.warn("EbayCombobox: You provided a value prop without an onInputChange handler.This will render a read-only input field. If you want the input to be editable, provide an onInputChange handler.");const a=t.useMemo(()=>$(),[v,u,y]),f=I.useExpander({ref:a.length?Y||E:null,expanded:c,options:{autoCollapse:c,expandOnFocus:!0,collapseOnFocusOut:!c&&!!l,contentSelector:'[role="listbox"]',hostSelector:'[role="combobox"]',expandedClass:"combobox--expanded",simulateSpacebarClick:!0},onExpand:J,onCollapse:P},[c,a.length>0]),{overlayStyles:oe,refs:R}=I.useFloatingDropdown({open:f.isExpanded}),_=(e,o)=>{u!==o&&(O(o),r.current&&(r.current.selectionStart=r.current.selectionEnd=o.length,r.current.focus()),X(e,b({currentInputValue:o})))},ne=t.useCallback((e,{toIndex:o})=>{if(k==="automatic"){const n=a[o];n&&r.current&&(r.current.value=n.props.text)}},[k,a]),te=I.useActiveDescendant({ref:E,focusElementRef:r,itemContainerRef:N,disabled:!a.length,onChange:ne,options:{activeDescendantClassName:"combobox__option--active",autoInit:-1,autoReset:-1,autoScroll:!0,axis:"y"}}),S=C?"div":"span",F=be.useFloatingLabel({text:d,disabled:g.disabled,containerTagName:S,opaqueLabel:U,onMount:Q}),le=d?F.Container:S,m=t.useRef(!1),ae=e=>{var o,n;m.current=!0,(n=l==null?void 0:(o=l.props).onClick)===null||n===void 0||n.call(o,e)},se=e=>{var o,n;m.current=!0,(n=l==null?void 0:(o=l.props).onMouseDown)===null||n===void 0||n.call(o,e)};function w(){f.collapse()}function q(){f.expand()}function re(e){const o=a.find(n=>n.props.text===e);return o?{text:o.props.text,value:o.props.value}:{}}function b(e){return{currentInputValue:e.currentInputValue,selectedOption:re(e.currentInputValue)}}const ce=e=>{const o=e.target.value;O(e.target.value),L(e,b({currentInputValue:o}))},B=t.useRef(""),ue=e=>{m.current||w(),m.current=!1;const o=e.target.value;o!==B.current&&(B.current=o,W(e,b({currentInputValue:o})))},ie=e=>{const o=e.target;o===document.activeElement&&q(),G(e,b({currentInputValue:o.value}))},de=e=>{z(e,b({currentInputValue:e.target.value}))},pe=e=>{if(e.key==="ArrowDown")q();else if(e.key==="Escape")w();else if(e.key==="Enter"&&f.isExpanded){const o=te.getIndex();o!==-1&&_(e,a[o].props.text),c||w()}Z(e)};return t.createElement(le,{ref:E,className:x("combobox",p)},t.createElement(F.Label,{htmlFor:g.id}),t.createElement("span",{className:x("combobox__control",{"combobox__control--actionable":l,"combobox__control--borderless":j})},t.createElement("input",Object.assign({},g,{ref:e=>{R.setHost(e),r.current=e},type:"text",role:"combobox",value:u,"aria-autocomplete":v,"aria-haspopup":"listbox",autoComplete:"off","aria-expanded":"false",onChange:ce,onBlur:ue,onClick:ie,onFocus:de,onKeyDown:pe,placeholder:H})),l?t.cloneElement(l,{onClick:ae,onMouseDown:se}):null),a.length>0&&t.createElement("div",{role:"listbox",className:"combobox__listbox",ref:e=>{R.setOverlay(e),N.current=e},style:oe},a.map(e=>t.cloneElement(e,{selected:(e.props.value||e.props.text)===u,onClick:o=>{var n,i;_(o,e.props.text),(i=(n=e.props).onClick)===null||i===void 0||i.call(n,o)},onMouseDown:o=>{var n,i;_(o,e.props.text),(i=(n=e.props).onMouseDown)===null||i===void 0||i.call(n,o)}}))))};exports.EbayCombobox=fe;exports.EbayComboboxButton=K;exports.EbayComboboxOption=T;