carbon-react 154.3.2 → 154.3.3-beta.1

package/esm/components/select/__internal__/select-list/select-list.component.js

@@ -1,437 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useEffect, useState, useCallback, useLayoutEffect, useRef, useMemo } from "react";
-import { flip, offset, size } from "@floating-ui/dom";
-import { useVirtualizer, defaultRangeExtractor } from "@tanstack/react-virtual";
-import findLastIndex from "lodash/findLastIndex";
-import debounce from "lodash/debounce";
-import useScrollBlock from "../../../../hooks/__internal__/useScrollBlock";
-import useModalManager from "../../../../hooks/__internal__/useModalManager";
-import { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody, StyledSelectListContainer, StyledScrollableContainer } from "./select-list.style";
-import Popover from "../../../../__internal__/popover";
-import OptionRow from "../../option-row/option-row.component";
-import getNextChildByText from "../utils/get-next-child-by-text";
-import getNextIndexByKey from "../utils/get-next-index-by-key";
-import isNavigationKey from "../utils/is-navigation-key";
-import ListActionButton from "../list-action-button";
-import Loader from "../../../loader";
-import Option from "../../option";
-import SelectListContext from "./select-list.context";
-const TABLE_HEADER_HEIGHT = 48;
-const SCROLL_OPTIONS = {
-  behavior: "auto",
-  align: "end"
-};
-const SelectList = /*#__PURE__*/React.forwardRef(({
-  listMaxHeight = 180,
-  listActionButton,
-  id,
-  labelId,
-  children,
-  onSelect,
-  onSelectListClose,
-  filterText,
-  anchorElement,
-  highlightedValue,
-  onListAction,
-  isLoading,
-  onListScrollBottom,
-  multiColumn,
-  tableHeader,
-  listPlacement = "bottom",
-  flipEnabled = true,
-  isOpen,
-  multiselectValues,
-  enableVirtualScroll,
-  virtualScrollOverscan = 5,
-  listWidth,
-  ...listProps
-}, listContainerRef) => {
-  const [currentOptionsListIndex, setCurrentOptionsListIndex] = useState(-1);
-  const [scrollbarWidth, setScrollbarWidth] = useState(0);
-  const lastFilter = useRef("");
-  const listRef = useRef(null);
-  const tableRef = useRef(null);
-  const listWrapperRef = useRef(null);
-  const listActionButtonRef = useRef(null);
-  const {
-    blockScroll,
-    allowScroll
-  } = useScrollBlock();
-  const actionButtonHeight = useRef(0);
-  const overscan = enableVirtualScroll ? virtualScrollOverscan : React.Children.count(children);
-
-  // need to use a custom rangeExtractor that ensure the currently-selected option, if any, always appears as an option returned from the virtualiser.
-  // This ensures that the aria-activedescendant value is always valid even when the currently-selected item is out of the visible range.
-  const rangeExtractor = range => {
-    const toRender = defaultRangeExtractor(range);
-    if (currentOptionsListIndex !== -1 && !toRender.includes(currentOptionsListIndex)) {
-      toRender.push(currentOptionsListIndex);
-    }
-    return toRender;
-  };
-  const virtualizer = useVirtualizer({
-    count: React.Children.count(children),
-    getScrollElement: () => isOpen ? listContainerRef.current : null,
-    estimateSize: () => 40,
-    // value doesn't really seem to matter since we're dynamically measuring, but 40px is the height of a single-line option
-    overscan,
-    paddingStart: multiColumn ? TABLE_HEADER_HEIGHT : 0,
-    scrollPaddingEnd: actionButtonHeight.current,
-    rangeExtractor
-  });
-  useEffect(() => {
-    if (!isOpen) return;
-    const scrollIndex = currentOptionsListIndex > -1 ? currentOptionsListIndex : 0;
-    virtualizer.scrollToIndex(scrollIndex, SCROLL_OPTIONS);
-  }, [currentOptionsListIndex, isOpen, virtualizer]);
-  const items = virtualizer.getVirtualItems();
-  const childrenList = useMemo(() => React.Children.toArray(children), [children]);
-
-  // check if object values are equal
-  function shallowEqual(objA, objB) {
-    const keysA = Object.keys(objA);
-    return keysA.every(key => objA[key] === objB[key]);
-  }
-  const getIndexOfMatch = useCallback(valueToMatch => {
-    return childrenList.findIndex(child => {
-      if (child.props.value && typeof valueToMatch === "object") {
-        return shallowEqual(child.props.value, valueToMatch);
-      }
-      return /*#__PURE__*/React.isValidElement(child) && child.props.value === valueToMatch;
-    });
-  }, [childrenList]);
-
-  // getVirtualItems returns an empty array of items if the select list is currently closed - which is correct visually but
-  // we need to ensure that any currently-selected option is still in the DOM to avoid any accessibility issues.
-  // The isOpen prop will ensure that no options are visible regardless of what is in the items array.
-  if (items.length === 0) {
-    const currentIndex = highlightedValue ? getIndexOfMatch(highlightedValue) : currentOptionsListIndex;
-    if (currentIndex > -1) {
-      // only index property is required with the item not visible so the following type assertion, even though incorrect,
-      // should be OK
-      items.push({
-        index: currentIndex
-      });
-    }
-  }
-  const totalSize = virtualizer.getTotalSize();
-  // virtualizer.getTotalSize() returns the total size in pixels for the virtualized items. If nothing is loaded,
-  // then the list height is set to 0 (line 21 of src/components/select/select-list/select-list.style.ts) as
-  // the method always returns a number and never undefined, it seems.
-  // https://github.com/TanStack/virtual/commit/e43e03e500588b2da36f184ecaba2b8e5a506596 suggests that items are
-  // never returned regardless if the container height it 0, so the below line ensures that a container of at
-  // least 1px is always available to render into.
-  const listHeight = totalSize === 0 ? 1 : totalSize;
-  useEffect(() => {
-    if (isOpen) {
-      blockScroll();
-    }
-    return () => {
-      if (isOpen) {
-        allowScroll();
-      }
-    };
-  }, [allowScroll, blockScroll, isOpen]);
-  useLayoutEffect(() => {
-    if (multiColumn) {
-      setScrollbarWidth(tableRef.current ? tableRef.current.offsetWidth - tableRef.current.clientWidth : /* istanbul ignore next */0);
-    }
-  }, [multiColumn]);
-  const anchorRef = useMemo(() => ({
-    current: anchorElement || null
-  }), [anchorElement]);
-  const handleSelect = useCallback(optionData => {
-    onSelect({
-      id: optionData.id ?? "",
-      text: optionData.text ?? "",
-      value: optionData.value ?? "",
-      selectionType: "click",
-      selectionConfirmed: true
-    });
-  }, [onSelect]);
-  const childElementRefs = useRef(Array.from({
-    length: React.Children.count(children)
-  }));
-  const optionChildrenList = useMemo(() => childrenList.filter(child => {
-    return /*#__PURE__*/React.isValidElement(child) && (child.type === Option || child.type === OptionRow);
-  }), [childrenList]);
-  const {
-    measureElement
-  } = virtualizer;
-  const measureCallback = element => {
-    // need a guard to prevent crash with too many rerenders when closing the list
-    if (isOpen) {
-      measureElement(element);
-    }
-  };
-
-  // the rangeExtractor above can cause an undefined value to be appended to the return items.
-  // Easiest way to stop that crashing is just to filter it out.
-  const renderedChildren = items.filter(item => item !== undefined).map(({
-    index,
-    start
-  }) => {
-    const child = childrenList[index];
-    const optionChildIndex = optionChildrenList.indexOf(child);
-    const isOption = optionChildIndex > -1;
-    const newProps = {
-      index,
-      onSelect: handleSelect,
-      hidden: isLoading && childrenList.length === 1,
-      // these need to be inline styles rather than implemented in styled-components to avoid it generating thousands of classes
-      style: {
-        transform: `translateY(${start}px)`
-      },
-      "aria-setsize": isOption ? optionChildrenList.length : undefined,
-      "aria-posinset": isOption ? optionChildIndex + 1 : undefined,
-      ref: optionElement => {
-        // needed to dynamically compute the size
-        measureCallback(optionElement);
-        // add the DOM element to the array of refs
-        childElementRefs.current[index] = optionElement;
-      },
-      "data-index": index
-    };
-    return child !== undefined ? /*#__PURE__*/React.cloneElement(child, newProps) : null;
-  }).filter(el => el !== null);
-  const lastOptionIndex = findLastIndex(childrenList, child => /*#__PURE__*/React.isValidElement(child) && (child.type === Option || child.type === OptionRow));
-  const getNextHighlightableItemIndex = useCallback((key, indexOfHighlighted) => {
-    const lastIndex = lastOptionIndex;
-    if (lastIndex === -1) {
-      return -1;
-    }
-    let nextIndex = getNextIndexByKey(key, indexOfHighlighted, lastIndex, isLoading);
-    const nextElement = childrenList[nextIndex];
-    if (/*#__PURE__*/React.isValidElement(nextElement) && nextElement.type !== Option && nextElement.type !== OptionRow || nextElement.props.disabled) {
-      nextIndex = getNextHighlightableItemIndex(key, nextIndex);
-    }
-    return nextIndex;
-  }, [childrenList, lastOptionIndex, isLoading]);
-  const highlightNextItem = useCallback(key => {
-    let currentIndex = currentOptionsListIndex;
-    if (highlightedValue) {
-      const indexOfHighlighted = getIndexOfMatch(highlightedValue);
-      currentIndex = indexOfHighlighted;
-    }
-    const nextIndex = getNextHighlightableItemIndex(key, currentIndex);
-    if (nextIndex === -1 || currentIndex === nextIndex) {
-      return;
-    }
-    const {
-      text,
-      value
-    } = childrenList[nextIndex].props;
-    onSelect({
-      id: childElementRefs.current[nextIndex]?.id,
-      text: text ?? /* istanbul ignore next */"",
-      value: value ?? /* istanbul ignore next */"",
-      selectionType: "navigationKey",
-      selectionConfirmed: false
-    });
-  }, [childrenList, currentOptionsListIndex, getIndexOfMatch, getNextHighlightableItemIndex, highlightedValue, onSelect]);
-  const handleActionButtonTab = useCallback((event, isActionButtonFocused) => {
-    if (isActionButtonFocused) {
-      onSelectListClose();
-    } else {
-      event.preventDefault();
-      listActionButtonRef.current?.focus();
-    }
-  }, [onSelectListClose]);
-  const focusOnAnchor = useCallback(() => {
-    if (anchorElement) {
-      anchorElement.getElementsByTagName("input")[0].focus();
-    }
-  }, [anchorElement]);
-  const handleGlobalKeydown = useCallback(event => {
-    if (!isOpen) {
-      return;
-    }
-    const {
-      key
-    } = event;
-    const isActionButtonFocused = document.activeElement === listActionButtonRef.current;
-    if (key === "Tab" && listActionButton) {
-      handleActionButtonTab(event, isActionButtonFocused);
-    } else if (key === "Tab") {
-      onSelectListClose();
-    } else if (key === "Enter" && !isActionButtonFocused) {
-      event.preventDefault();
-      const currentOption = childrenList[currentOptionsListIndex];
-      if (! /*#__PURE__*/React.isValidElement(currentOption)) {
-        onSelectListClose();
-
-        // need to call onSelect here with empty text/value to clear the input when
-        // no matches found in FilterableSelect
-        onSelect({
-          id: "",
-          text: "",
-          value: "",
-          selectionType: "enterKey",
-          selectionConfirmed: false
-        });
-        return;
-      }
-      if (currentOption.props.disabled) {
-        return;
-      }
-      const {
-        text,
-        value
-      } = currentOption.props;
-      onSelect({
-        id: childElementRefs.current[currentOptionsListIndex]?.id,
-        text: text ?? /* istanbul ignore next */"",
-        value: value ?? /* istanbul ignore next */"",
-        selectionType: "enterKey",
-        selectionConfirmed: true
-      });
-    } else if (isNavigationKey(key)) {
-      focusOnAnchor();
-      highlightNextItem(key);
-    }
-  }, [childrenList, listActionButton, handleActionButtonTab, onSelectListClose, currentOptionsListIndex, onSelect, highlightNextItem, focusOnAnchor, isOpen]);
-  const handleEscapeKey = useCallback(event => {
-    if (event.key === "Escape") {
-      onSelectListClose();
-    }
-  }, [onSelectListClose]);
-  useModalManager({
-    open: !!isOpen,
-    closeModal: handleEscapeKey,
-    modalRef: listRef,
-    triggerRefocusOnClose: false
-  });
-  useEffect(() => {
-    const listElement = listContainerRef.current;
-    const handleListScroll = debounce(event => {
-      const element = event.target;
-
-      /* istanbul ignore else */
-      if (isOpen && element.scrollHeight - element.scrollTop === element.clientHeight) {
-        onListScrollBottom?.();
-      }
-    }, 300);
-    listElement?.addEventListener("scroll", handleListScroll);
-    return () => {
-      listElement?.removeEventListener("scroll", handleListScroll);
-    };
-  }, [isOpen, listContainerRef, onListScrollBottom]);
-  useEffect(() => {
-    window.addEventListener("keydown", handleGlobalKeydown);
-    return function cleanup() {
-      window.removeEventListener("keydown", handleGlobalKeydown);
-    };
-  }, [handleGlobalKeydown, listContainerRef]);
-  useEffect(() => {
-    if (!filterText || filterText === lastFilter.current) {
-      lastFilter.current = filterText || "";
-      return;
-    }
-    lastFilter.current = filterText;
-    setCurrentOptionsListIndex(previousIndex => {
-      const match = getNextChildByText(filterText, childrenList, previousIndex);
-      if (!match) {
-        return -1;
-      }
-      const indexOfMatch = getIndexOfMatch(match.props.value);
-      virtualizer.scrollToIndex(indexOfMatch, SCROLL_OPTIONS);
-      return indexOfMatch;
-    });
-  }, [childrenList, filterText, getIndexOfMatch, virtualizer]);
-  useEffect(() => {
-    // remove the current selected option if the value is cleared
-    // this prevents it from remaining highlighted when the list is re-opened
-    if ((!highlightedValue || Object.keys(highlightedValue).length === 0) && !isOpen) {
-      setCurrentOptionsListIndex(-1);
-      return;
-    }
-    const indexOfMatch = getIndexOfMatch(highlightedValue);
-    if (indexOfMatch === -1) {
-      return;
-    }
-    setCurrentOptionsListIndex(indexOfMatch);
-  }, [getIndexOfMatch, highlightedValue, isOpen]);
-  useEffect(() => {
-    if (isLoading && currentOptionsListIndex === lastOptionIndex && lastOptionIndex > -1) {
-      virtualizer.scrollToIndex(lastOptionIndex, {
-        ...SCROLL_OPTIONS,
-        align: "start"
-      });
-    }
-  }, [children, currentOptionsListIndex, isLoading, lastOptionIndex, listContainerRef, virtualizer]);
-  const popoverMiddleware = useMemo(() => [offset(3), size({
-    apply({
-      rects,
-      elements
-    }) {
-      Object.assign(elements.floating.style, {
-        width: `${listWidth ?? rects.reference.width}px`
-      });
-    }
-  }), ...(flipEnabled ? [flip({
-    fallbackStrategy: "initialPlacement"
-  })] : /* istanbul ignore next: covered by Playwright tests for reliable positioning in a real browser */[])], [listWidth, flipEnabled]);
-  const loader = isLoading ? /*#__PURE__*/React.createElement(StyledSelectLoaderContainer, {
-    key: "loader"
-  }, /*#__PURE__*/React.createElement(Loader, {
-    "data-role": "select-list-loader"
-  })) : undefined;
-  let selectListContent = renderedChildren;
-  const listBoxProps = {
-    role: "listbox",
-    id,
-    "aria-labelledby": labelId,
-    "aria-multiselectable": multiselectValues ? true : undefined
-  };
-  useLayoutEffect(() => {
-    if (listActionButton && isOpen) {
-      actionButtonHeight.current = listActionButtonRef.current?.parentElement?.offsetHeight || 0;
-    }
-  }, [listActionButton, isOpen]);
-  if (multiColumn) {
-    selectListContent = /*#__PURE__*/React.createElement(StyledSelectListTable, null, /*#__PURE__*/React.createElement(StyledSelectListTableHeader, {
-      scrollbarWidth: scrollbarWidth
-    }, tableHeader), /*#__PURE__*/React.createElement(StyledSelectListTableBody, _extends({}, listBoxProps, {
-      "aria-labelledby": labelId,
-      ref: tableRef,
-      listHeight: listHeight - TABLE_HEADER_HEIGHT
-    }), renderedChildren));
-  }
-  return /*#__PURE__*/React.createElement(SelectListContext.Provider, {
-    value: {
-      currentOptionsListIndex,
-      multiselectValues
-    }
-  }, /*#__PURE__*/React.createElement(Popover, {
-    placement: listPlacement,
-    disablePortal: true,
-    reference: anchorRef,
-    middleware: popoverMiddleware,
-    isOpen: isOpen,
-    disableBackgroundUI: true,
-    animationFrame: true
-  }, /*#__PURE__*/React.createElement(StyledSelectListContainer, _extends({
-    ref: listWrapperRef,
-    "data-element": "select-list-wrapper",
-    "data-role": "select-list-wrapper",
-    isLoading: isLoading
-  }, listProps), /*#__PURE__*/React.createElement(StyledScrollableContainer, {
-    ref: listContainerRef,
-    maxHeight: listMaxHeight,
-    "data-component": "select-list-scrollable-container",
-    "data-role": "select-list-scrollable-container",
-    hasActionButton: !!listActionButton
-  }, /*#__PURE__*/React.createElement(StyledSelectList, _extends({
-    as: multiColumn ? "div" : "ul",
-    "data-element": "select-list"
-  }, multiColumn ? {} : listBoxProps, {
-    ref: listRef,
-    tabIndex: -1,
-    listHeight: multiColumn ? undefined : listHeight
-  }), selectListContent), loader), listActionButton && /*#__PURE__*/React.createElement(ListActionButton, {
-    ref: listActionButtonRef,
-    listActionButton: listActionButton,
-    onListAction: onListAction
-  }))));
-});
-export default SelectList;
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import n,{useState as r,useRef as l,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,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function H(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){B(e,t,n[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 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 M={behavior:"auto",align:"end"},D=n.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:ne,multiselectValues:re,enableVirtualScroll:le,virtualScrollOverscan:oe=5,listWidth:ie}=B,se=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}(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]=r(-1),[ue,de]=r(0),pe=l(""),me=l(null),fe=l(null),ve=l(null),be=l(null),{blockScroll:ye,allowScroll:he}=b(),ge=l(0),Oe=le?oe:n.Children.count($),xe=p({count:n.Children.count($),getScrollElement:()=>ne?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(!ne)return;const e=ce>-1?ce:0;xe.scrollToIndex(e,M)}),[ce,ne,xe]);const je=xe.getVirtualItems(),we=i((()=>n.Children.toArray($)),[$]),Ee=s((e=>we.findIndex((t=>{return t.props.value&&"object"==typeof e?(r=t.props.value,l=e,Object.keys(r).every((e=>r[e]===l[e]))):n.isValidElement(t)&&t.props.value===e;var r,l}))),[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((()=>(ne&&ye(),()=>{ne&&he()})),[he,ye,ne]),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,n,r;F({id:null!==(t=e.id)&&void 0!==t?t:"",text:null!==(n=e.text)&&void 0!==n?n:"",value:null!==(r=e.value)&&void 0!==r?r:"",selectionType:"click",selectionConfirmed:!0})}),[F]),Te=l(Array.from({length:n.Children.count($)})),Ce=i((()=>we.filter((e=>n.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 r=we[e],l=Ce.indexOf(r),o=l>-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?l+1:void 0,ref:t=>{ne&&Ve(t),Te.current[e]=t},"data-index":e};return void 0!==r?n.cloneElement(r,i):null})).filter((e=>null!==e)),_e=f(we,(e=>n.isValidElement(e)&&(e.type===I||e.type===k))),Be=s(((e,t)=>{if(-1===_e)return-1;let r=L(e,t,_e,J);const l=we[r];return(n.isValidElement(l)&&l.type!==I&&l.type!==k||l.props.disabled)&&(r=Be(e,r)),r}),[we,_e,J]),He=s((e=>{var t;let n=ce;q&&(n=Ee(q));const r=Be(e,n);if(-1===r||n===r)return;const{text:l,value:o}=we[r].props;F({id:null===(t=Te.current[r])||void 0===t?void 0:t.id,text:null!=l?l:"",value:null!=o?o:"",selectionType:"navigationKey",selectionConfirmed:!1})}),[we,ce,Ee,Be,q,F]),Ae=s(((e,t)=>{var n;t?N():(e.preventDefault(),null===(n=be.current)||void 0===n||n.focus())}),[N]),Me=s((()=>{Y&&Y.getElementsByTagName("input")[0].focus()}),[Y]),De=s((e=>{if(!ne)return;const{key:t}=e,r=document.activeElement===be.current;if("Tab"===t&&z)Ae(e,r);else if("Tab"===t)N();else if("Enter"!==t||r)T(t)&&(Me(),He(t));else{var l;e.preventDefault();const t=we[ce];if(!n.isValidElement(t))return N(),void F({id:"",text:"",value:"",selectionType:"enterKey",selectionConfirmed:!1});if(t.props.disabled)return;const{text:r,value:o}=t.props;F({id:null===(l=Te.current[ce])||void 0===l?void 0:l.id,text:null!=r?r:"",value:null!=o?o:"",selectionType:"enterKey",selectionConfirmed:!0})}}),[we,z,Ae,N,ce,F,He,Me,ne]),We=s((e=>{"Escape"===e.key&&N()}),[N]);y({open:!!ne,closeModal:We,modalRef:me,triggerRefocusOnClose:!1}),o((()=>{const e=D.current,t=v((e=>{const t=e.target;ne&&t.scrollHeight-t.scrollTop===t.clientHeight&&(null==Q||Q())}),300);return null==e||e.addEventListener("scroll",t),()=>{null==e||e.removeEventListener("scroll",t)}}),[ne,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 n=Ee(t.props.value);return xe.scrollToIndex(n,M),n}))):pe.current=U||""}),[we,U,Ee,xe]),o((()=>{if(!(q&&0!==Object.keys(q).length||ne))return void ae(-1);const e=Ee(q);-1!==e&&ae(e)}),[Ee,q,ne]),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":!!re||void 0};return c((()=>{var e,t;z&&ne&&(ge.current=(null===(t=be.current)||void 0===t||null===(e=t.parentElement)||void 0===e?void 0:e.offsetHeight)||0)}),[z,ne]),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:re},children:t(S,{placement:ee,disablePortal:!0,reference:Pe,middleware:ze,isOpen:ne,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-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};

package/esm/components/select/__internal__/select-list/select-list.context.js

@@ -1,3 +1 @@
-import React from "react";
-const SelectListContext = /*#__PURE__*/React.createContext({});
-export default SelectListContext;
+import t from"react";const e=t.createContext({});export{e as default};

package/esm/components/select/__internal__/select-list/select-list.style.js

@@ -1,147 +1 @@
-import styled, { css } from "styled-components";
-import { baseTheme } from "../../../../style/themes";
-const StyledSelectList = styled.ul`
-  ${({
-  listHeight
-}) => css`
-    box-sizing: border-box;
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    list-style-type: none;
-    margin: 0;
-    outline: none;
-    padding: 0;
-    position: relative;
-    width: 100%;
-    ${listHeight === undefined ? "" : `height: ${listHeight}px;`}
-  `}
-`;
-const StyledSelectLoaderContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-top: 24px;
-  padding-bottom: 24px;
-  width: 100%;
-  flex-grow: 1;
-`;
-const StyledSelectListTable = styled.table`
-  background-color: var(--colorsUtilityYang100);
-  border-collapse: collapse;
-  border-radius: 0px;
-  border-spacing: 0;
-  min-width: 100%;
-  white-space: nowrap;
-  height: 180px;
-  overflow-y: auto;
-
-  thead,
-  tr {
-    display: table;
-    width: 100%;
-    table-layout: fixed;
-  }
-`;
-// TODO (design-tokens): to match current style for border bottom colorsUtilityMajor100
-const StyledSelectListTableHeader = styled.thead`
-  border-bottom: 1px solid var(--colorsUtilityMajor050);
-  position: sticky;
-  top: 0;
-  left: 0;
-  z-index: 1;
-
-  tr {
-    width: ${({
-  scrollbarWidth
-}) => `calc(100% - ${scrollbarWidth}px)`};
-  }
-
-  th {
-    position: sticky;
-    top: 0;
-    padding: var(--spacing200);
-    background-color: white;
-    text-align: left;
-    font-weight: 500;
-    font-size: 12px;
-    text-transform: uppercase;
-    color: var(--colorsUtilityYin055);
-    :after {
-      content: "";
-      display: block;
-      position: absolute;
-      bottom: -8px;
-      left: 0px;
-      background-image: linear-gradient(
-        var(--colorsUtilityMajor800),
-        var(--colorsUtilityYang100)
-      );
-      opacity: 0.03;
-      height: 8px;
-      width: 100%;
-    }
-  }
-`;
-const StyledSelectListTableBody = styled.tbody`
-  display: block;
-  width: 100%;
-  table-layout: fixed;
-  width: 100%;
-  height: ${({
-  listHeight
-}) => `${listHeight}px`};
-`;
-const StyledSelectListContainer = styled.div`
-  background-color: white;
-
-  box-shadow: var(--boxShadow100);
-
-  &[data-floating-placement^="top"] {
-    box-shadow:
-      0 -5px 5px 0 #00141e33,
-      0 -10px 10px 0 #00141e1a;
-  }
-
-  animation: fadeIn 250ms ease-out;
-  position: absolute;
-  z-index: ${({
-  theme
-}) => theme.zIndex.popover};
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  border-radius: var(--borderRadius050);
-  ${({
-  isLoading
-}) => isLoading && "min-height: 150px"};
-
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-`;
-const StyledScrollableContainer = styled.div`
-  max-height: ${({
-  maxHeight
-}) => `${maxHeight}px`};
-  width: 100%;
-  border-top-left-radius: var(--borderRadius050);
-  border-top-right-radius: var(--borderRadius050);
-  overflow-y: auto;
-
-  ${({
-  hasActionButton
-}) => !hasActionButton && css`
-      border-bottom-left-radius: var(--borderRadius050);
-      border-bottom-right-radius: var(--borderRadius050);
-    `}
-`;
-StyledSelectListContainer.defaultProps = {
-  theme: baseTheme
-};
-export { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody, StyledSelectListContainer, StyledScrollableContainer };
+import t,{css as e}from"styled-components";import"../../../../style/themes/sage/index.js";import i from"../../../../style/themes/base/index.js";import"../../../../style/themes/none/index.js";const o=t.ul.withConfig({displayName:"select-list.style__StyledSelectList",componentId:"sc-fe2303b3-0"})(["",""],(({listHeight:t})=>e(["box-sizing:border-box;display:flex;align-items:flex-start;flex-direction:column;list-style-type:none;margin:0;outline:none;padding:0;position:relative;width:100%;",""],void 0===t?"":`height: ${t}px;`))),a=t.div.withConfig({displayName:"select-list.style__StyledSelectLoaderContainer",componentId:"sc-fe2303b3-1"})(["display:flex;align-items:center;justify-content:center;padding-top:24px;padding-bottom:24px;width:100%;flex-grow:1;"]),l=t.table.withConfig({displayName:"select-list.style__StyledSelectListTable",componentId:"sc-fe2303b3-2"})(["background-color:var(--colorsUtilityYang100);border-collapse:collapse;border-radius:0px;border-spacing:0;min-width:100%;white-space:nowrap;height:180px;overflow-y:auto;thead,tr{display:table;width:100%;table-layout:fixed;}"]),s=t.thead.withConfig({displayName:"select-list.style__StyledSelectListTableHeader",componentId:"sc-fe2303b3-3"})(["border-bottom:1px solid var(--colorsUtilityMajor050);position:sticky;top:0;left:0;z-index:1;tr{width:",';}th{position:sticky;top:0;padding:var(--spacing200);background-color:white;text-align:left;font-weight:500;font-size:12px;text-transform:uppercase;color:var(--colorsUtilityYin055);:after{content:"";display:block;position:absolute;bottom:-8px;left:0px;background-image:linear-gradient( var(--colorsUtilityMajor800),var(--colorsUtilityYang100) );opacity:0.03;height:8px;width:100%;}}'],(({scrollbarWidth:t})=>`calc(100% - ${t}px)`)),d=t.tbody.withConfig({displayName:"select-list.style__StyledSelectListTableBody",componentId:"sc-fe2303b3-4"})(["display:block;width:100%;table-layout:fixed;width:100%;height:",";"],(({listHeight:t})=>`${t}px`)),r=t.div.withConfig({displayName:"select-list.style__StyledSelectListContainer",componentId:"sc-fe2303b3-5"})(['background-color:white;box-shadow:var(--boxShadow100);&[data-floating-placement^="top"]{box-shadow:0 -5px 5px 0 #00141e33,0 -10px 10px 0 #00141e1a;}animation:fadeIn 250ms ease-out;position:absolute;z-index:',";display:flex;flex-wrap:wrap;align-items:flex-start;border-radius:var(--borderRadius050);",";@keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}"],(({theme:t})=>t.zIndex.popover),(({isLoading:t})=>t&&"min-height: 150px")),n=t.div.withConfig({displayName:"select-list.style__StyledScrollableContainer",componentId:"sc-fe2303b3-6"})(["max-height:",";width:100%;border-top-left-radius:var(--borderRadius050);border-top-right-radius:var(--borderRadius050);overflow-y:auto;",""],(({maxHeight:t})=>`${t}px`),(({hasActionButton:t})=>!t&&e(["border-bottom-left-radius:var(--borderRadius050);border-bottom-right-radius:var(--borderRadius050);"])));r.defaultProps={theme:i};export{n as StyledScrollableContainer,o as StyledSelectList,r as StyledSelectListContainer,l as StyledSelectListTable,d as StyledSelectListTableBody,s as StyledSelectListTableHeader,a as StyledSelectLoaderContainer};

package/esm/components/select/__internal__/select-textbox/index.js

@@ -1 +1 @@
-export { default } from "./select-textbox.component";
+export{default}from"./select-textbox.component.js";