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

Skin components build off React

"use strict";const I=require("./tslib.es6-BW4cJBUu.js"),t=require("react"),C=require("classnames"),pe=require("./hooks-BZOKHA9o.js"),B=require("./utils-C9NL3q0j.js"),M=require("./dropdown-B-M6HUau.js"),fe=require("./floating-ui-BLTkNeJp.js"),K=s=>{var{className:b}=s,d=I.__rest(s,["className"]);return t.createElement("button",Object.assign({className:C("icon-btn","icon-btn--transparent",b)},d))},T=s=>{var{text:b,className:d,selected:f}=s,c=I.__rest(s,["text","className","selected"]);return t.createElement("div",Object.assign({},c,{role:"option",className:C("combobox__option",d),tabIndex:-1,"aria-selected":f}),b)},me=s=>{var{className:b,floatingLabel:d,fluid:f,expanded:c,borderless:j,autocomplete:v="none",listSelection:V="automatic",defaultValue:A="",value:h,placeholder:U,opaqueLabel:H,children:k,dropdownRef:Y,onFocus:z=()=>{},onClick:G=()=>{},onExpand:J=()=>{},onCollapse:P=()=>{},onInputChange:D=()=>{},onFloatingLabelInit:Q=()=>{},onChange:W=()=>{},onSelect:X=()=>{},onKeyDown:Z=()=>{}}=s,g=I.__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=B.findComponent(k,K),y=B.filterByType(k,T),E=t.useRef(null),r=t.useRef(null),L=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,N]=t.useState(A||""),u=typeof h<"u"?h:ee;typeof h>"u"&&!D&&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]),m=M.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:O}=fe.useFloatingDropdown({open:m.isExpanded}),_=(e,o)=>{u!==o&&(N(o),r.current&&(r.current.selectionStart=r.current.selectionEnd=o.length,r.current.focus()),X(e,p({currentInputValue:o})))},ne=t.useCallback((e,{toIndex:o})=>{if(V==="automatic"){const n=a[o];n&&r.current&&(r.current.value=n.props.text)}},[V,a]),te=M.useActiveDescendant({ref:E,focusElementRef:r,itemContainerRef:L,disabled:!a.length,onChange:ne,options:{activeDescendantClassName:"combobox__option--active",autoInit:-1,autoReset:-1,autoScroll:!0,axis:"y"}}),R=f?"div":"span",S=pe.useFloatingLabel({text:d,disabled:g.disabled,containerTagName:R,opaqueLabel:H,onMount:Q}),le=d?S.Container:R,x=t.useRef(!1),ae=e=>{var o,n;x.current=!0,(n=l==null?void 0:(o=l.props).onClick)===null||n===void 0||n.call(o,e)},se=e=>{var o,n;x.current=!0,(n=l==null?void 0:(o=l.props).onMouseDown)===null||n===void 0||n.call(o,e)};function w(){m.collapse()}function F(){m.expand()}function re(e){const o=a.find(n=>n.props.text===e);return o?{text:o.props.text,value:o.props.value}:{}}function p(e){return{currentInputValue:e.currentInputValue,selectedOption:re(e.currentInputValue)}}const ce=e=>{const o=e.target.value;N(e.target.value),D(e,p({currentInputValue:o}))},q=t.useRef(""),ue=e=>{x.current||w(),x.current=!1;const o=e.target.value;o!==q.current&&(q.current=o,W(e,p({currentInputValue:o})))},ie=e=>{const o=e.target;o===document.activeElement&&F(),G(e,p({currentInputValue:o.value}))},de=e=>{z(e,p({currentInputValue:e.target.value}))},be=e=>{if(e.key==="ArrowDown")F();else if(e.key==="Escape")w();else if(e.key==="Enter"&&m.isExpanded){const o=te.getIndex();o!==-1&&_(e,a[o].props.text),c||w()}Z(e)};return t.createElement(le,{ref:E,className:C("combobox",{"combobox--fluid":f},b)},t.createElement(S.Label,{htmlFor:g.id}),t.createElement("span",{className:C("combobox__control",{"combobox__control--actionable":l,"combobox__control--borderless":j})},t.createElement("input",Object.assign({},g,{ref:e=>{O.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:be,placeholder:U})),l?t.cloneElement(l,{onClick:ae,onMouseDown:se}):null),a.length>0&&t.createElement("div",{role:"listbox",className:"combobox__listbox",ref:e=>{O.setOverlay(e),L.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=me;exports.EbayComboboxButton=K;exports.EbayComboboxOption=T;