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

Skin components build off React

"use strict";const V=require("./tslib.es6-C4EgNkz1.js"),t=require("react"),x=require("classnames"),be=require("./hooks-B4eFIQlH.js"),M=require("./utils-C9NL3q0j.js"),I=require("./dropdown-BGdrijmi.js"),K=a=>{var{className:p}=a,d=V.__rest(a,["className"]);return t.createElement("button",Object.assign({className:x("icon-btn","icon-btn--transparent",p)},d))},T=a=>{var{text:p,className:d,selected:C}=a,r=V.__rest(a,["text","className","selected"]);return t.createElement("div",Object.assign({},r,{role:"option",className:x("combobox__option",d),tabIndex:-1,"aria-selected":C}),p)},fe=a=>{var{className:p,floatingLabel:d,fluid:C,expanded:r,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=()=>{}}=a,g=V.__rest(a,["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),s=t.useRef(null),N=t.useRef(null),f=I.useExpander({ref:Y||E,expanded:r,options:{autoCollapse:r,expandOnFocus:!0,collapseOnFocusOut:!r&&!!l,contentSelector:'[role="listbox"]',hostSelector:'[role="combobox"]',expandedClass:"combobox--expanded",simulateSpacebarClick:!0},onExpand:J,onCollapse:P},[r]),{overlayStyles:$,refs:O}=I.useFloatingDropdown({open:f.isExpanded}),[ee,R]=t.useState(A||""),c=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 _=(e,o)=>{c!==o&&(R(o),s.current&&(s.current.selectionStart=s.current.selectionEnd=o.length,s.current.focus()),X(e,b({currentInputValue:o})))};function oe(){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=c==null?void 0:c.trim())===null||n===void 0?void 0:n.toLowerCase())})}const u=t.useMemo(()=>oe(),[v,c,y]),ne=t.useCallback((e,{toIndex:o})=>{if(k==="automatic"){const n=u[o];n&&s.current&&(s.current.value=n.props.text)}},[k,u]),te=I.useActiveDescendant({ref:E,focusElementRef:s,itemContainerRef:N,disabled:!u.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=u.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;R(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,u[o].props.text),r||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=>{O.setHost(e),s.current=e},type:"text",role:"combobox",value:c,"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),u.length>0&&t.createElement("div",{role:"listbox",className:"combobox__listbox",ref:e=>{O.setOverlay(e),N.current=e},style:$},u.map(e=>t.cloneElement(e,{selected:(e.props.value||e.props.text)===c,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;