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

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

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