carbon-react/esm/components/select/multi-select/multi-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 r,{useState as n,useRef as l,useCallback as o,useMemo as i,useEffect as a}from"react";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"../__internal__/select-list/select-list.component.js";import{StyledSelectPillContainer as f,StyledSelectMultiSelect as b,StyledAccessibilityLabelContainer as v}from"./multi-select.style.js";import{Pill as y}from"../../pill/pill.component.js";import h from"../__internal__/utils/is-expected-option.js";import g from"../__internal__/utils/is-expected-value.js";import O from"../__internal__/utils/is-navigation-key.js";import{useStableCallback as _}from"../../../hooks/__internal__/useStableCallback/useStableCallback.js";import j from"../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import w from"../../../hooks/__internal__/useAdaptiveSidebarModalFocus/useAdaptiveSidebarModalFocus.js";function C(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function x(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){C(e,t,r[t])}))}return e}function P(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 r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const S=p(m),k=r.forwardRef(((p,m)=>{var{"aria-label":C,"aria-labelledby":k,value:D,id:L,label:E,name:M,disabled:V,readOnly:F,children:I,onOpen:T,onFilterChange:B,onChange:A,onClick:H,onFocus:z,onBlur:K,onKeyDown:R,openOnFocus:q=!1,noResultsMessage:W,placeholder:$,isLoading:G,onListScrollBottom:J,tableHeader:N,multiColumn:Q,tooltipPosition:U,size:X="medium","data-element":Y,"data-role":Z,listPlacement:ee="bottom",listMaxHeight:te,flipEnabled:re=!0,wrapPillText:ne=!0,enableVirtualScroll:le,virtualScrollOverscan:oe,required:ie,listWidth:ae}=p,se=function(e,t){if(null==e)return{};var r,n,l=function(e,t){if(null==e)return{};var r,n,l={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(l[r]=e[r]);return l}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(l[r]=e[r])}return l}(p,["aria-label","aria-labelledby","value","id","label","name","disabled","readOnly","children","onOpen","onFilterChange","onChange","onClick","onFocus","onBlur","onKeyDown","openOnFocus","noResultsMessage","placeholder","isLoading","onListScrollBottom","tableHeader","multiColumn","tooltipPosition","size","data-element","data-role","listPlacement","listMaxHeight","flipEnabled","wrapPillText","enableVirtualScroll","virtualScrollOverscan","required","listWidth"]);const[ce,ue]=n(""),de=l(d()),pe=l(d()),me=l(null),fe=l(null),be=l(!1),ve=l(!1),ye=l(!1),he=l(!1),ge=l(!1),[Oe,_e]=n(),[je,we]=n(!1),[Ce,xe]=n(""),[Pe,Se]=n(""),[ke,De]=n(""),[Le,Ee]=n(),Me=l(L||d()),{labelId:Ve}=j({id:Me.current,label:E}),Fe=l(null),Ie=o((()=>{we((e=>(!e&&T&&T(),!0)))}),[T]),Te=o(((e,t)=>({target:P(x({},M&&{name:M},L&&{id:L}),{value:e}),selectionConfirmed:t})),[M,L]),Be=o(((e,t)=>{const r=e(D);r.length!==(null==D?void 0:D.length)&&A(Te(r,t))}),[Te,A,D]),Ae=o((e=>{const t=e.target.value,n=(l=t,o=I,r.Children.toArray(o).find((e=>{const{text:t}=e.props;return-1!==(null==t?void 0:t.toLowerCase().indexOf(null==l?void 0:l.toLowerCase()))})));var l,o;n&&Se(n.props.value),De(t),xe(t),Ie()}),[I,Ie]),He=o((e=>{ve.current=!0,Be((t=>{if(!t.length)return t;const r=t.slice();return r.splice(e,1),r}),!0)}),[Be]),ze=o((e=>{const{key:t}=e,r="Backspace"===t||"Delete"===t;R&&R(e),F||(!e.defaultPrevented&&O(t)&&(e.preventDefault(),Ie()),!r||""!==ke&&""!==Ce||He(-1))}),[R,F,ke,Ce,Ie,He]),Ke=i((()=>{var e;return D&&D.length?null===(e=r.Children.map(I,(e=>!(!r.isValidElement(e)||!D.includes(e.props.value))&&e.props.text)))||void 0===e?void 0:e.filter((e=>e)).reduce(((e,t)=>e?`${e}, ${t}`:t),""):null}),[I,D]),Re=o((e=>{if(ye.current=!1,!je)return;const t=me.current&&!me.current.contains(e.target),r=fe.current&&!fe.current.contains(e.target);t&&r&&!ve.current&&(xe(""),De(""),Se(""),we(!1)),ve.current=!1}),[je]),qe=i((()=>{const t=!V&&!F;let n;return(null==D?void 0:D.length)?D.map(((l,o)=>{const i=r.Children.toArray(I).find((e=>r.isValidElement(e)&&h(e,l)));let a={};if(!i)return null;var s,c;r.isValidElement(i)&&(n=void 0!==(null==i||null===(s=i.props.value)||void 0===s?void 0:s.value)?null==i||null===(c=i.props.value)||void 0===c?void 0:c.value:null==i?void 0:i.props.value,a={title:i.props.text,fill:i.props.fill,borderColor:i.props.borderColor});const u=a.title||"",d=u+n||o;return e(f,{children:e(y,P(x({onDelete:t?()=>He(o):void 0,wrapText:ne},a),{children:u}))},d)})):""}),[I,V,F,D]);a((()=>{const e=null==D?void 0:D.length;Ee(e?" ":$)}),[D,$]),a((()=>{const e="click";return window.addEventListener(e,Re),function(){window.removeEventListener(e,Re)}}),[Re]);const We=_(B),$e=l(!0);function Ge(e){if(ye.current=!1,H&&H(e),!q||q&&!ge.current){if(je)return De(""),void we(!1);null==T||T(),we(!0)}else ge.current=!1}function Je(e){ye.current=!1,H&&H(e),we((e=>e?(De(""),!1):(T&&T(),!0)))}function Ne(e){he.current=!1,ye.current||(be.current=!1,K&&K(e))}function Qe(e){ye.current=!0,"input"===e.target.dataset.element&&(he.current=!0)}function Ue(e){const t=()=>null==z?void 0:z(e);q?(Fe.current&&clearTimeout(Fe.current),Fe.current=setTimeout((()=>{we((e=>!!e||(T&&T(),z&&!be.current&&(t(),be.current=!0),ye.current&&!he.current?(ge.current=!1,!1):(he.current&&(ge.current=!0),!0))))}))):z&&!be.current&&(t(),be.current=!0)}a((()=>{We&&!$e.current&&We(ke)}),[We,ke]),a((()=>{$e.current=!1}),[]),w((()=>we(!1)));const Xe=o((e=>{const{value:t,selectionType:r,id:n,selectionConfirmed:l}=e;if("navigationKey"===r)return Se(t),void ue(n);"click"===r&&(ve.current=!0),xe("");const o=-1!==(null==D?void 0:D.findIndex((e=>g(e,t))));null==Oe||Oe.focus(),ye.current=!1,Be((e=>o?e:[...e,t]),l)}),[Oe,D,Be]),Ye=o((()=>{we(!1),De("")}),[]),Ze=o((e=>{e&&(_e(e),m&&("function"==typeof m?m(e):m.current=e))}),[m]);function et(){return P(x({id:Me.current,name:M,disabled:V,label:E,readOnly:F,placeholder:Le,leftChildren:qe,formattedValue:Ce,selectedValue:D,onClick:Ge,onMouseDown:Qe,onFocus:Ue,onBlur:Ne,iconOnClick:Je,iconOnMouseDown:Qe,onKeyDown:ze,onChange:Ae,tooltipPosition:U,size:X,required:ie},c(se)),{"data-component":void 0})}let tt;switch(ee){case"top":tt="top-end";break;case"bottom":tt="bottom-end";break;default:tt=ee}const rt=e(S,{ref:fe,id:de.current,labelId:Ve,anchorElement:(null==Oe?void 0:Oe.parentElement)||void 0,onSelect:Xe,onSelectListClose:Ye,onMouseDown:function(){ye.current=!0},filterText:ke.trim(),highlightedValue:Pe,noResultsMessage:W,isLoading:G,onListScrollBottom:J,tableHeader:N,multiColumn:Q,listPlacement:void 0!==ae?tt:ee,listMaxHeight:te,flipEnabled:re,multiselectValues:D,isOpen:je,enableVirtualScroll:le,virtualScrollOverscan:oe,listWidth:ae,children:I}),nt=s(se);return t(b,P(x({disabled:V,readOnly:F,hasTextCursor:!0,size:X,"data-component":"multiselect","data-role":Z,"data-element":Y,isOpen:je},nt),{children:[t("div",{ref:me,children:[e(v,{"data-element":"accessibility-label",id:pe.current,children:Ke}),e(u,x({ref:Ze,accessibilityLabelId:pe.current,activeDescendantId:ce,"aria-controls":de.current,ariaLabel:C,ariaLabelledby:k,hasTextCursor:!0,isOpen:je,labelId:Ve,value:et().formattedValue},et()))]}),rt]}))}));export{k as MultiSelect,k as default};