carbon-react/esm/components/select/filterable-select/filterable-select.component.js

A library of reusable React components for easily building user interfaces.

import{jsx as e,jsxs as t}from"react/jsx-runtime";import n,{useState as r,useRef as o,useCallback as l,useEffect as i}from"react";import a from"invariant";import"../../../style/utils/filter-styled-system-padding-props.js";import s from"../../../style/utils/filter-styled-system-margin-props.js";import c from"../../../style/utils/filter-out-styled-system-spacing-props.js";import u from"../__internal__/select-textbox/select-textbox.component.js";import d from"../../../__internal__/utils/helpers/guid/index.js";import p from"../__internal__/utils/with-filter.hoc.js";import m from"../select.style.js";import f from"../__internal__/select-list/select-list.component.js";import b from"../__internal__/utils/is-expected-option.js";import v from"../__internal__/utils/are-objects-equal.js";import y from"../__internal__/utils/is-navigation-key.js";import{useStableCallback as g}from"../../../hooks/__internal__/useStableCallback/useStableCallback.js";import h from"../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import O from"../../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js";function _(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function j(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){_(e,t,n[t])}))}return e}function w(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const C=p(f),x=n.forwardRef(((p,_)=>{var{"aria-label":x,"aria-labelledby":S,value:L,id:P,name:k,label:A,children:D,onOpen:E,onChange:F,onFilterChange:B,onClick:M,onKeyDown:T,onFocus:I,onBlur:V,openOnFocus:H,noResultsMessage:W,listActionButton:q,listMaxHeight:K,onListAction:R,isLoading:z,disabled:G,readOnly:J,onListScrollBottom:N,tableHeader:Q,multiColumn:U,"data-element":X,"data-role":Y,tooltipPosition:Z,listPlacement:$="bottom",flipEnabled:ee=!0,enableVirtualScroll:te,virtualScrollOverscan:ne,disableDefaultFiltering:re=!1,required:oe,listWidth:le}=p,ie=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(p,["aria-label","aria-labelledby","value","id","name","label","children","onOpen","onChange","onFilterChange","onClick","onKeyDown","onFocus","onBlur","openOnFocus","noResultsMessage","listActionButton","listMaxHeight","onListAction","isLoading","disabled","readOnly","onListScrollBottom","tableHeader","multiColumn","data-element","data-role","tooltipPosition","listPlacement","flipEnabled","enableVirtualScroll","virtualScrollOverscan","disableDefaultFiltering","required","listWidth"]);const[ae,se]=r(""),ce=o(d()),ue=o(null),de=o(null),pe=o(!1),me=o(!1),fe=o(!1),[be,ve]=r(),[ye,ge]=r(!1),[he,Oe]=r(""),[_e,je]=r(L||""),we=o(L),[Ce,xe]=r(""),[Se,Le]=r(""),Pe=o(P||d()),{labelId:ke}=h({id:Pe.current,label:A}),Ae=o(null),De=o(!1),Ee=l(((e,t)=>({target:w(j({},k&&{name:k},P&&{id:P}),{value:e}),selectionConfirmed:t})),[k,P]),Fe=l(((e,t)=>{F&&F(Ee(e,t))}),[F,Ee]),Be=l(((e,t)=>{je((()=>{var r;const o=e.trimStart(),l=(i=o,a=D,n.Children.toArray(a).find((e=>{const{text:t}=e.props;return-1!==(null==t?void 0:t.toLowerCase().indexOf(null==i?void 0:i.toLowerCase()))})));var i,a;const s=t&&!e.length;return!l||s||l.props.disabled?(Oe(e),Fe("",!1),""):(o.length&&Fe(l.props.value,!1),t?(Oe(e),l.props.value):(o.length&&(null===(r=l.props.text)||void 0===r?void 0:r.toLowerCase().startsWith(o.toLowerCase()))?Oe(l.props.text):Oe(e),xe(l.props.value),l.props.value))}))}),[D,Fe]),Me=l(((e,t=!1)=>{var r;const o=n.Children.toArray(D).find((t=>n.isValidElement(t)&&b(t,e)));o&&void 0!==o.props.text?(t||(null===(r=o.props.text)||void 0===r?void 0:r.toLowerCase().startsWith(null==Se?void 0:Se.toLowerCase().trim())))&&Oe(o.props.text):Oe(Se||"")}),[D,Se]),Te=l((e=>{const t=e.target.value,{inputType:n}=e.nativeEvent;Be(t,"deleteContentBackward"===n||"deleteContentForward"===n||"delete"===n),Le(t),ge(!0)}),[Be]),Ie=l((e=>{Le((t=>(null==t?void 0:t.length)===(null==he?void 0:he.length)-1&&e===he.slice(-1)?he:t))}),[he]),Ve=l((e=>{const{key:t}=e;T&&T(e),J||(!e.defaultPrevented&&y(t)&&(e.preventDefault(),ge(!0)),Ie(t))}),[Ie,T,J]),He=l((e=>{const t=ue.current&&!ue.current.contains(e.target),n=de.current&&!de.current.contains(e.target);pe.current=!1,t&&n&&(Me(L,!0),ge(!1))}),[Me,L]);i((()=>{je((e=>(L&&e!==L&&Me(L),L))),xe(L)}),[L,F,D]);const We=g(E);i((()=>{ye?We&&We():Le("")}),[We,ye]),i((()=>{const e=void 0!==q;a(!e||e&&R,"onListAction prop required when using listActionButton prop")}),[q,R]);const qe=o(!0);i((()=>{qe.current&&Me(_e),"object"==typeof L&&"object"==typeof we.current?v(L,we.current)||(Me(L),we.current=L):Me(L)}),[L,D]);const Ke=g(B);i((()=>{Ke&&!qe.current&&Ke(Se)}),[Ke,Se]),i((()=>{qe.current=!1}),[]),i((()=>{const e="click";return window.addEventListener(e,He),function(){window.removeEventListener(e,He)}}),[He]),i((()=>{const e=null==Se?void 0:Se.trimStart(),t=null==he?void 0:he.toLowerCase().startsWith(e.toLowerCase());!G&&!J&&be&&e.length&&(null==he?void 0:he.length)>e.length&&t&&(be.selectionStart=e.length)}),[he,Se,be,G,J]);const Re=l((e=>{const{id:t,text:n,value:r,selectionType:o,selectionConfirmed:l}=e;Oe(n),Fe(r,!!l),se(t),"navigationKey"!==o&&(De.current=!!H,ge(!1),null==be||be.focus(),null==be||be.select(),De.current=!1)}),[be,Fe,H]),ze=l((()=>{ge(!1),Me(_e,!0)}),[_e,Me]);function Ge(e){pe.current=!0,"input"===e.target.dataset.element&&(fe.current=!0)}i((()=>()=>{Ae.current&&clearTimeout(Ae.current)}),[]),O((()=>ge(!1)));const Je=l((e=>{e&&(ve(e),_&&("function"==typeof _?_(e):_.current=e))}),[_]);let Ne;switch($){case"top":Ne="top-end";break;case"bottom":Ne="bottom-end";break;default:Ne=$}const Qe={ref:de,id:ce.current,labelId:ke,anchorElement:(null==be?void 0:be.parentElement)||void 0,onSelect:Re,onSelectListClose:ze,onMouseDown:function(){pe.current=!0},filterText:Se.trim(),highlightedValue:Ce,noResultsMessage:W,listActionButton:q,listMaxHeight:K,onListAction:function(){ge(!1),null==R||R()},isLoading:z,onListScrollBottom:N,tableHeader:Q,multiColumn:U,listPlacement:void 0!==le?Ne:$,flipEnabled:ee,isOpen:ye,enableVirtualScroll:te,virtualScrollOverscan:ne,listWidth:le},Ue=e(re?f:C,w(j({},Qe),{children:D})),Xe=s(ie);return t(m,w(j({hasTextCursor:!0,readOnly:J,disabled:G,"data-component":"filterable-select","data-role":Y,"data-element":X,isOpen:ye},Xe),{children:[e("div",{ref:ue,children:e(u,w(j({ref:Je,activeDescendantId:ae,ariaLabel:x,ariaLabelledby:S,labelId:A?ke:void 0,"aria-controls":ce.current,isOpen:ye,hasTextCursor:!0},w(j({id:Pe.current,name:k,label:A,disabled:G,readOnly:J,selectedValue:_e,formattedValue:he,onClick:function(e){pe.current=!1,M&&M(e),ge(!0)},iconOnClick:function(e){pe.current=!1,M&&M(e),ge((e=>!e))},iconOnMouseDown:Ge,onFocus:function(e){const t=()=>null==I?void 0:I(e);if(H){if(Ae.current&&clearTimeout(Ae.current),De.current)return;Ae.current=setTimeout((()=>{ge((e=>!(!e&&(I&&!me.current&&(t(),me.current=!0),pe.current&&!fe.current))))}))}else I&&!me.current&&(t(),me.current=!0)},onBlur:function(e){fe.current=!1,pe.current||(me.current=!1,V&&V(e))},onKeyDown:Ve,onChange:Te,onMouseDown:Ge,tooltipPosition:Z,required:oe},c(ie)),{"data-component":void 0})),{onChange:Te,value:he}))}),Ue]}))}));export{x as FilterableSelect,x as default};