carbon-react/esm/components/select/__internal__/select-list/select-list.component.js

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

import{jsxs as e,jsx as t}from"react/jsx-runtime";import l,{useState as n,useRef as r,useEffect as o,useMemo as i,useCallback as s,useLayoutEffect as c}from"react";import{offset as a,size as u,flip as d}from"@floating-ui/dom";import{useVirtualizer as p,defaultRangeExtractor as m}from"@tanstack/react-virtual";import f from"lodash/findLastIndex";import v from"lodash/debounce";import b from"../../../../hooks/__internal__/useScrollBlock/useScrollBlock.js";import y from"../../../../hooks/__internal__/useModalManager/useModalManager.js";import{StyledSelectListTable as h,StyledSelectListTableHeader as g,StyledSelectListTableBody as O,StyledSelectListContainer as x,StyledScrollableContainer as j,StyledSelectList as w,StyledSelectLoaderContainer as E}from"./select-list.style.js";import S from"../../../../__internal__/popover/popover.component.js";import k from"../../option-row/option-row.component.js";import P from"../utils/get-next-child-by-text.js";import L from"../utils/get-next-index-by-key.js";import T from"../utils/is-navigation-key.js";import C from"../list-action-button/list-action-button.component.js";import{Loader as V}from"../../../loader/loader.component.js";import I from"../../option/option.component.js";import _ from"./select-list.context.js";function B(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function H(e){for(var t=1;t<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{},n=Object.keys(l);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(l).filter((function(e){return Object.getOwnPropertyDescriptor(l,e).enumerable})))),n.forEach((function(t){B(e,t,l[t])}))}return e}function A(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 l=Object.getOwnPropertySymbols(e);t.push.apply(t,l)}return t}(Object(t)).forEach((function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(t,l))})),e}const M={behavior:"auto",align:"end"},D=l.forwardRef(((B,D)=>{var{listMaxHeight:W=180,listActionButton:z,id:K,labelId:R,children:$,onSelect:F,onSelectListClose:N,filterText:U,anchorElement:Y,highlightedValue:q,onListAction:G,isLoading:J,onListScrollBottom:Q,multiColumn:X,tableHeader:Z,listPlacement:ee="bottom",flipEnabled:te=!0,isOpen:le,multiselectValues:ne,enableVirtualScroll:re,virtualScrollOverscan:oe=5,listWidth:ie}=B,se=function(e,t){if(null==e)return{};var l,n,r=function(e,t){if(null==e)return{};var l,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)l=o[n],t.indexOf(l)>=0||(r[l]=e[l]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)l=o[n],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(r[l]=e[l])}return r}(B,["listMaxHeight","listActionButton","id","labelId","children","onSelect","onSelectListClose","filterText","anchorElement","highlightedValue","onListAction","isLoading","onListScrollBottom","multiColumn","tableHeader","listPlacement","flipEnabled","isOpen","multiselectValues","enableVirtualScroll","virtualScrollOverscan","listWidth"]);const[ce,ae]=n(-1),[ue,de]=n(0),pe=r(""),me=r(null),fe=r(null),ve=r(null),be=r(null),{blockScroll:ye,allowScroll:he}=b(),ge=r(0),Oe=re?oe:l.Children.count($),xe=p({count:l.Children.count($),getScrollElement:()=>le?D.current:null,estimateSize:()=>40,overscan:Oe,paddingStart:X?48:0,scrollPaddingEnd:ge.current,rangeExtractor:e=>{const t=m(e);return-1===ce||t.includes(ce)||t.push(ce),t}});o((()=>{if(!le)return;const e=ce>-1?ce:0;xe.scrollToIndex(e,M)}),[ce,le,xe]);const je=xe.getVirtualItems(),we=i((()=>l.Children.toArray($)),[$]),Ee=s((e=>we.findIndex((t=>{return t.props.value&&"object"==typeof e?(n=t.props.value,r=e,Object.keys(n).every((e=>n[e]===r[e]))):l.isValidElement(t)&&t.props.value===e;var n,r}))),[we]);if(0===je.length){const e=q?Ee(q):ce;e>-1&&je.push({index:e})}const Se=xe.getTotalSize(),ke=0===Se?1:Se;o((()=>(le&&ye(),()=>{le&&he()})),[he,ye,le]),c((()=>{X&&de(fe.current?fe.current.offsetWidth-fe.current.clientWidth:0)}),[X]);const Pe=i((()=>({current:Y||null})),[Y]),Le=s((e=>{var t,l,n;F({id:null!==(t=e.id)&&void 0!==t?t:"",text:null!==(l=e.text)&&void 0!==l?l:"",value:null!==(n=e.value)&&void 0!==n?n:"",selectionType:"click",selectionConfirmed:!0})}),[F]),Te=r(Array.from({length:l.Children.count($)})),Ce=i((()=>we.filter((e=>l.isValidElement(e)&&(e.type===I||e.type===k)))),[we]),{measureElement:Ve}=xe,Ie=je.filter((e=>void 0!==e)).map((({index:e,start:t})=>{const n=we[e],r=Ce.indexOf(n),o=r>-1,i={index:e,onSelect:Le,hidden:J&&1===we.length,style:{transform:`translateY(${t}px)`},"aria-setsize":o?Ce.length:void 0,"aria-posinset":o?r+1:void 0,ref:t=>{le&&Ve(t),Te.current[e]=t},"data-index":e};return void 0!==n?l.cloneElement(n,i):null})).filter((e=>null!==e)),_e=f(we,(e=>l.isValidElement(e)&&(e.type===I||e.type===k))),Be=s(((e,t)=>{if(-1===_e)return-1;let n=L(e,t,_e,J);const r=we[n];return(l.isValidElement(r)&&r.type!==I&&r.type!==k||r.props.disabled)&&(n=Be(e,n)),n}),[we,_e,J]),He=s((e=>{var t;let l=ce;q&&(l=Ee(q));const n=Be(e,l);if(-1===n||l===n)return;const{text:r,value:o}=we[n].props;F({id:null===(t=Te.current[n])||void 0===t?void 0:t.id,text:null!=r?r:"",value:null!=o?o:"",selectionType:"navigationKey",selectionConfirmed:!1})}),[we,ce,Ee,Be,q,F]),Ae=s(((e,t)=>{var l;t?N():(e.preventDefault(),null===(l=be.current)||void 0===l||l.focus())}),[N]),Me=s((()=>{Y&&Y.getElementsByTagName("input")[0].focus()}),[Y]),De=s((e=>{if(!le)return;const{key:t}=e,n=document.activeElement===be.current;if("Tab"===t&&z)Ae(e,n);else if("Tab"===t)N();else if("Enter"!==t||n)T(t)&&(Me(),He(t));else{var r;e.preventDefault();const t=we[ce];if(!l.isValidElement(t))return N(),void F({id:"",text:"",value:"",selectionType:"enterKey",selectionConfirmed:!1});if(t.props.disabled)return;const{text:n,value:o}=t.props;F({id:null===(r=Te.current[ce])||void 0===r?void 0:r.id,text:null!=n?n:"",value:null!=o?o:"",selectionType:"enterKey",selectionConfirmed:!0})}}),[we,z,Ae,N,ce,F,He,Me,le]),We=s((e=>{"Escape"===e.key&&N()}),[N]);y({open:!!le,closeModal:We,modalRef:me,triggerRefocusOnClose:!1}),o((()=>{const e=D.current,t=v((e=>{const t=e.target;le&&t.scrollHeight-t.scrollTop===t.clientHeight&&(null==Q||Q())}),300);return null==e||e.addEventListener("scroll",t),()=>{null==e||e.removeEventListener("scroll",t)}}),[le,D,Q]),o((()=>(window.addEventListener("keydown",De),function(){window.removeEventListener("keydown",De)})),[De,D]),o((()=>{U&&U!==pe.current?(pe.current=U,ae((e=>{const t=P(U,we,e);if(!t)return-1;const l=Ee(t.props.value);return xe.scrollToIndex(l,M),l}))):pe.current=U||""}),[we,U,Ee,xe]),o((()=>{if(!(q&&0!==Object.keys(q).length||le))return void ae(-1);const e=Ee(q);-1!==e&&ae(e)}),[Ee,q,le]),o((()=>{J&&ce===_e&&_e>-1&&xe.scrollToIndex(_e,A(H({},M),{align:"start"}))}),[$,ce,J,_e,D,xe]);const ze=i((()=>[a(3),u({apply({rects:e,elements:t}){Object.assign(t.floating.style,{width:`${null!=ie?ie:e.reference.width}px`})}}),...te?[d({fallbackStrategy:"initialPlacement"})]:[]]),[ie,te]),Ke=J?t(E,{children:t(V,{"data-role":"select-list-loader"})},"loader"):void 0;let Re=Ie;const $e={role:"listbox",id:K,"aria-labelledby":R,"aria-multiselectable":!!ne||void 0};return c((()=>{var e,t;z&&le&&(ge.current=(null===(t=be.current)||void 0===t||null===(e=t.parentElement)||void 0===e?void 0:e.offsetHeight)||0)}),[z,le]),X&&(Re=e(h,{children:[t(g,{scrollbarWidth:ue,children:Z}),t(O,A(H({},$e),{"aria-labelledby":R,ref:fe,listHeight:ke-48,children:Ie}))]})),t(_.Provider,{value:{currentOptionsListIndex:ce,multiselectValues:ne},children:t(S,{placement:ee,disablePortal:!0,reference:Pe,middleware:ze,isOpen:le,disableBackgroundUI:!0,animationFrame:!0,children:e(x,A(H({ref:ve,"data-element":"select-list-wrapper","data-role":"select-list-wrapper",isLoading:J},se),{children:[e(j,{ref:D,maxHeight:W,"data-component":"select-list-scrollable-container","data-element":"select-list-scrollable-container","data-role":"select-list-scrollable-container",hasActionButton:!!z,children:[t(w,A(H({as:X?"div":"ul","data-element":"select-list"},X?{}:$e),{ref:me,tabIndex:-1,listHeight:X?void 0:ke,children:Re})),Ke]}),z&&t(C,{ref:be,listActionButton:z,onListAction:G})]}))})})}));export{D as default};