carbon-react 154.4.1 → 154.4.3

package/lib/components/select/__internal__/list-action-button/list-action-button.style.js

@@ -1,31 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _button = _interopRequireDefault(require("../../../button/button.style"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const StyledListActionButtonWrapper = _styledComponents.default.div`
-  padding-top: var(--spacing100);
-  padding-bottom: var(--spacing100);
-  border-top: 1px solid var(--colorsUtilityDisabled600);
-  box-shadow:
-    0 0px 0 0 rgba(0, 0, 0, 0),
-    0 -8px 8px 0 rgba(0, 0, 0, 0.03);
-  width: 100%;
-  position: sticky;
-  bottom: 0;
-  background-color: inherit;
-  border-bottom-left-radius: var(--borderRadius050);
-  border-bottom-right-radius: var(--borderRadius050);
-
-  ${_button.default} {
-    border: none;
-    justify-content: left;
-    padding-left: var(--spacing200);
-    padding-right: var(--spacing200);
-  }
-`;
-var _default = exports.default = StyledListActionButtonWrapper;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components"),o=require("../../../button/button.style.js");function e(t){return t&&t.__esModule?t:{default:t}}const r=e(t).default.div.withConfig({displayName:"list-action-button.style__StyledListActionButtonWrapper",componentId:"sc-7af8ee4c-0"})(["padding-top:var(--spacing100);padding-bottom:var(--spacing100);border-top:1px solid var(--colorsUtilityDisabled600);box-shadow:0 0px 0 0 rgba(0,0,0,0),0 -8px 8px 0 rgba(0,0,0,0.03);width:100%;position:sticky;bottom:0;background-color:inherit;border-bottom-left-radius:var(--borderRadius050);border-bottom-right-radius:var(--borderRadius050);","{border:none;justify-content:left;padding-left:var(--spacing200);padding-right:var(--spacing200);}"],o.default);exports.default=r;

package/lib/components/select/__internal__/list-action-button/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "../../../../../esm/components/select/__internal__/list-action-button/index.js",
   "main": "./index.js",
+  "module": "../../../esm/components/select/__internal__/list-action-button/index.js",
   "types": "./index.d.ts"
 }

package/lib/components/select/__internal__/select-list/index.js

@@ -1,13 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _selectList.default;
-  }
-});
-var _selectList = _interopRequireDefault(require("./select-list.component"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./select-list.component.js");exports.default=e.default;

package/lib/components/select/__internal__/select-list/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "../../../../../esm/components/select/__internal__/select-list/index.js",
   "main": "./index.js",
+  "module": "../../../esm/components/select/__internal__/select-list/index.js",
   "types": "./index.d.ts"
 }

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

@@ -1,446 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _dom = require("@floating-ui/dom");
-var _reactVirtual = require("@tanstack/react-virtual");
-var _findLastIndex = _interopRequireDefault(require("lodash/findLastIndex"));
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
-var _useScrollBlock = _interopRequireDefault(require("../../../../hooks/__internal__/useScrollBlock"));
-var _useModalManager = _interopRequireDefault(require("../../../../hooks/__internal__/useModalManager"));
-var _selectList = require("./select-list.style");
-var _popover = _interopRequireDefault(require("../../../../__internal__/popover"));
-var _optionRow = _interopRequireDefault(require("../../option-row/option-row.component"));
-var _getNextChildByText = _interopRequireDefault(require("../utils/get-next-child-by-text"));
-var _getNextIndexByKey = _interopRequireDefault(require("../utils/get-next-index-by-key"));
-var _isNavigationKey = _interopRequireDefault(require("../utils/is-navigation-key"));
-var _listActionButton = _interopRequireDefault(require("../list-action-button"));
-var _loader = _interopRequireDefault(require("../../../loader"));
-var _option = _interopRequireDefault(require("../../option"));
-var _selectList2 = _interopRequireDefault(require("./select-list.context"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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); }
-const TABLE_HEADER_HEIGHT = 48;
-const SCROLL_OPTIONS = {
-  behavior: "auto",
-  align: "end"
-};
-const SelectList = /*#__PURE__*/_react.default.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] = (0, _react.useState)(-1);
-  const [scrollbarWidth, setScrollbarWidth] = (0, _react.useState)(0);
-  const lastFilter = (0, _react.useRef)("");
-  const listRef = (0, _react.useRef)(null);
-  const tableRef = (0, _react.useRef)(null);
-  const listWrapperRef = (0, _react.useRef)(null);
-  const listActionButtonRef = (0, _react.useRef)(null);
-  const {
-    blockScroll,
-    allowScroll
-  } = (0, _useScrollBlock.default)();
-  const actionButtonHeight = (0, _react.useRef)(0);
-  const overscan = enableVirtualScroll ? virtualScrollOverscan : _react.default.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 = (0, _reactVirtual.defaultRangeExtractor)(range);
-    if (currentOptionsListIndex !== -1 && !toRender.includes(currentOptionsListIndex)) {
-      toRender.push(currentOptionsListIndex);
-    }
-    return toRender;
-  };
-  const virtualizer = (0, _reactVirtual.useVirtualizer)({
-    count: _react.default.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
-  });
-  (0, _react.useEffect)(() => {
-    if (!isOpen) return;
-    const scrollIndex = currentOptionsListIndex > -1 ? currentOptionsListIndex : 0;
-    virtualizer.scrollToIndex(scrollIndex, SCROLL_OPTIONS);
-  }, [currentOptionsListIndex, isOpen, virtualizer]);
-  const items = virtualizer.getVirtualItems();
-  const childrenList = (0, _react.useMemo)(() => _react.default.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 = (0, _react.useCallback)(valueToMatch => {
-    return childrenList.findIndex(child => {
-      if (child.props.value && typeof valueToMatch === "object") {
-        return shallowEqual(child.props.value, valueToMatch);
-      }
-      return /*#__PURE__*/_react.default.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;
-  (0, _react.useEffect)(() => {
-    if (isOpen) {
-      blockScroll();
-    }
-    return () => {
-      if (isOpen) {
-        allowScroll();
-      }
-    };
-  }, [allowScroll, blockScroll, isOpen]);
-  (0, _react.useLayoutEffect)(() => {
-    if (multiColumn) {
-      setScrollbarWidth(tableRef.current ? tableRef.current.offsetWidth - tableRef.current.clientWidth : /* istanbul ignore next */0);
-    }
-  }, [multiColumn]);
-  const anchorRef = (0, _react.useMemo)(() => ({
-    current: anchorElement || null
-  }), [anchorElement]);
-  const handleSelect = (0, _react.useCallback)(optionData => {
-    onSelect({
-      id: optionData.id ?? "",
-      text: optionData.text ?? "",
-      value: optionData.value ?? "",
-      selectionType: "click",
-      selectionConfirmed: true
-    });
-  }, [onSelect]);
-  const childElementRefs = (0, _react.useRef)(Array.from({
-    length: _react.default.Children.count(children)
-  }));
-  const optionChildrenList = (0, _react.useMemo)(() => childrenList.filter(child => {
-    return /*#__PURE__*/_react.default.isValidElement(child) && (child.type === _option.default || child.type === _optionRow.default);
-  }), [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.default.cloneElement(child, newProps) : null;
-  }).filter(el => el !== null);
-  const lastOptionIndex = (0, _findLastIndex.default)(childrenList, child => /*#__PURE__*/_react.default.isValidElement(child) && (child.type === _option.default || child.type === _optionRow.default));
-  const getNextHighlightableItemIndex = (0, _react.useCallback)((key, indexOfHighlighted) => {
-    const lastIndex = lastOptionIndex;
-    if (lastIndex === -1) {
-      return -1;
-    }
-    let nextIndex = (0, _getNextIndexByKey.default)(key, indexOfHighlighted, lastIndex, isLoading);
-    const nextElement = childrenList[nextIndex];
-    if (/*#__PURE__*/_react.default.isValidElement(nextElement) && nextElement.type !== _option.default && nextElement.type !== _optionRow.default || nextElement.props.disabled) {
-      nextIndex = getNextHighlightableItemIndex(key, nextIndex);
-    }
-    return nextIndex;
-  }, [childrenList, lastOptionIndex, isLoading]);
-  const highlightNextItem = (0, _react.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 = (0, _react.useCallback)((event, isActionButtonFocused) => {
-    if (isActionButtonFocused) {
-      onSelectListClose();
-    } else {
-      event.preventDefault();
-      listActionButtonRef.current?.focus();
-    }
-  }, [onSelectListClose]);
-  const focusOnAnchor = (0, _react.useCallback)(() => {
-    if (anchorElement) {
-      anchorElement.getElementsByTagName("input")[0].focus();
-    }
-  }, [anchorElement]);
-  const handleGlobalKeydown = (0, _react.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.default.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 ((0, _isNavigationKey.default)(key)) {
-      focusOnAnchor();
-      highlightNextItem(key);
-    }
-  }, [childrenList, listActionButton, handleActionButtonTab, onSelectListClose, currentOptionsListIndex, onSelect, highlightNextItem, focusOnAnchor, isOpen]);
-  const handleEscapeKey = (0, _react.useCallback)(event => {
-    if (event.key === "Escape") {
-      onSelectListClose();
-    }
-  }, [onSelectListClose]);
-  (0, _useModalManager.default)({
-    open: !!isOpen,
-    closeModal: handleEscapeKey,
-    modalRef: listRef,
-    triggerRefocusOnClose: false
-  });
-  (0, _react.useEffect)(() => {
-    const listElement = listContainerRef.current;
-    const handleListScroll = (0, _debounce.default)(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]);
-  (0, _react.useEffect)(() => {
-    window.addEventListener("keydown", handleGlobalKeydown);
-    return function cleanup() {
-      window.removeEventListener("keydown", handleGlobalKeydown);
-    };
-  }, [handleGlobalKeydown, listContainerRef]);
-  (0, _react.useEffect)(() => {
-    if (!filterText || filterText === lastFilter.current) {
-      lastFilter.current = filterText || "";
-      return;
-    }
-    lastFilter.current = filterText;
-    setCurrentOptionsListIndex(previousIndex => {
-      const match = (0, _getNextChildByText.default)(filterText, childrenList, previousIndex);
-      if (!match) {
-        return -1;
-      }
-      const indexOfMatch = getIndexOfMatch(match.props.value);
-      virtualizer.scrollToIndex(indexOfMatch, SCROLL_OPTIONS);
-      return indexOfMatch;
-    });
-  }, [childrenList, filterText, getIndexOfMatch, virtualizer]);
-  (0, _react.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]);
-  (0, _react.useEffect)(() => {
-    if (isLoading && currentOptionsListIndex === lastOptionIndex && lastOptionIndex > -1) {
-      virtualizer.scrollToIndex(lastOptionIndex, {
-        ...SCROLL_OPTIONS,
-        align: "start"
-      });
-    }
-  }, [children, currentOptionsListIndex, isLoading, lastOptionIndex, listContainerRef, virtualizer]);
-  const popoverMiddleware = (0, _react.useMemo)(() => [(0, _dom.offset)(3), (0, _dom.size)({
-    apply({
-      rects,
-      elements
-    }) {
-      Object.assign(elements.floating.style, {
-        width: `${listWidth ?? rects.reference.width}px`
-      });
-    }
-  }), ...(flipEnabled ? [(0, _dom.flip)({
-    fallbackStrategy: "initialPlacement"
-  })] : /* istanbul ignore next: covered by Playwright tests for reliable positioning in a real browser */[])], [listWidth, flipEnabled]);
-  const loader = isLoading ? /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectLoaderContainer, {
-    key: "loader"
-  }, /*#__PURE__*/_react.default.createElement(_loader.default, {
-    "data-role": "select-list-loader"
-  })) : undefined;
-  let selectListContent = renderedChildren;
-  const listBoxProps = {
-    role: "listbox",
-    id,
-    "aria-labelledby": labelId,
-    "aria-multiselectable": multiselectValues ? true : undefined
-  };
-  (0, _react.useLayoutEffect)(() => {
-    if (listActionButton && isOpen) {
-      actionButtonHeight.current = listActionButtonRef.current?.parentElement?.offsetHeight || 0;
-    }
-  }, [listActionButton, isOpen]);
-  if (multiColumn) {
-    selectListContent = /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectListTable, null, /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectListTableHeader, {
-      scrollbarWidth: scrollbarWidth
-    }, tableHeader), /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectListTableBody, _extends({}, listBoxProps, {
-      "aria-labelledby": labelId,
-      ref: tableRef,
-      listHeight: listHeight - TABLE_HEADER_HEIGHT
-    }), renderedChildren));
-  }
-  return /*#__PURE__*/_react.default.createElement(_selectList2.default.Provider, {
-    value: {
-      currentOptionsListIndex,
-      multiselectValues
-    }
-  }, /*#__PURE__*/_react.default.createElement(_popover.default, {
-    placement: listPlacement,
-    disablePortal: true,
-    reference: anchorRef,
-    middleware: popoverMiddleware,
-    isOpen: isOpen,
-    disableBackgroundUI: true,
-    animationFrame: true
-  }, /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectListContainer, _extends({
-    ref: listWrapperRef,
-    "data-element": "select-list-wrapper",
-    "data-role": "select-list-wrapper",
-    isLoading: isLoading
-  }, listProps), /*#__PURE__*/_react.default.createElement(_selectList.StyledScrollableContainer, {
-    ref: listContainerRef,
-    maxHeight: listMaxHeight,
-    "data-component": "select-list-scrollable-container",
-    "data-role": "select-list-scrollable-container",
-    hasActionButton: !!listActionButton
-  }, /*#__PURE__*/_react.default.createElement(_selectList.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.default.createElement(_listActionButton.default, {
-    ref: listActionButtonRef,
-    listActionButton: listActionButton,
-    onListAction: onListAction
-  }))));
-});
-var _default = exports.default = SelectList;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("@floating-ui/dom"),r=require("@tanstack/react-virtual"),n=require("lodash/findLastIndex"),i=require("lodash/debounce"),o=require("../../../../hooks/__internal__/useScrollBlock/useScrollBlock.js"),a=require("../../../../hooks/__internal__/useModalManager/useModalManager.js"),s=require("./select-list.style.js"),u=require("../../../../__internal__/popover/popover.component.js"),c=require("../../option-row/option-row.component.js"),d=require("../utils/get-next-child-by-text.js"),f=require("../utils/get-next-index-by-key.js"),p=require("../utils/is-navigation-key.js"),b=require("../list-action-button/list-action-button.component.js"),v=require("../../../loader/loader.component.js"),m=require("../../option/option.component.js"),y=require("./select-list.context.js");function g(e){return e&&e.__esModule?e:{default:e}}var h=g(t),x=g(n),j=g(i);function O(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function S(e){for(var t=1;t<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{},r=Object.keys(l);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(l).filter((function(e){return Object.getOwnPropertyDescriptor(l,e).enumerable})))),r.forEach((function(t){O(e,t,l[t])}))}return e}function E(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 k={behavior:"auto",align:"end"},w=h.default.forwardRef(((n,i)=>{var{listMaxHeight:g=180,listActionButton:O,id:w,labelId:L,children:C,onSelect:P,onSelectListClose:q,filterText:T,anchorElement:_,highlightedValue:V,onListAction:M,isLoading:I,onListScrollBottom:B,multiColumn:H,tableHeader:R,listPlacement:A="bottom",flipEnabled:D=!0,isOpen:z,multiselectValues:W,enableVirtualScroll:K,virtualScrollOverscan:$=5,listWidth:F}=n,N=function(e,t){if(null==e)return{};var l,r,n=function(e,t){if(null==e)return{};var l,r,n={},i=Object.keys(e);for(r=0;r<i.length;r++)l=i[r],t.indexOf(l)>=0||(n[l]=e[l]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)l=i[r],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(n[l]=e[l])}return n}(n,["listMaxHeight","listActionButton","id","labelId","children","onSelect","onSelectListClose","filterText","anchorElement","highlightedValue","onListAction","isLoading","onListScrollBottom","multiColumn","tableHeader","listPlacement","flipEnabled","isOpen","multiselectValues","enableVirtualScroll","virtualScrollOverscan","listWidth"]);const[U,Y]=t.useState(-1),[G,J]=t.useState(0),Q=t.useRef(""),X=t.useRef(null),Z=t.useRef(null),ee=t.useRef(null),te=t.useRef(null),{blockScroll:le,allowScroll:re}=o.default(),ne=t.useRef(0),ie=K?$:h.default.Children.count(C),oe=r.useVirtualizer({count:h.default.Children.count(C),getScrollElement:()=>z?i.current:null,estimateSize:()=>40,overscan:ie,paddingStart:H?48:0,scrollPaddingEnd:ne.current,rangeExtractor:e=>{const t=r.defaultRangeExtractor(e);return-1===U||t.includes(U)||t.push(U),t}});t.useEffect((()=>{if(!z)return;const e=U>-1?U:0;oe.scrollToIndex(e,k)}),[U,z,oe]);const ae=oe.getVirtualItems(),se=t.useMemo((()=>h.default.Children.toArray(C)),[C]),ue=t.useCallback((e=>se.findIndex((t=>{return t.props.value&&"object"==typeof e?(l=t.props.value,r=e,Object.keys(l).every((e=>l[e]===r[e]))):h.default.isValidElement(t)&&t.props.value===e;var l,r}))),[se]);if(0===ae.length){const e=V?ue(V):U;e>-1&&ae.push({index:e})}const ce=oe.getTotalSize(),de=0===ce?1:ce;t.useEffect((()=>(z&&le(),()=>{z&&re()})),[re,le,z]),t.useLayoutEffect((()=>{H&&J(Z.current?Z.current.offsetWidth-Z.current.clientWidth:0)}),[H]);const fe=t.useMemo((()=>({current:_||null})),[_]),pe=t.useCallback((e=>{var t,l,r;P({id:null!==(t=e.id)&&void 0!==t?t:"",text:null!==(l=e.text)&&void 0!==l?l:"",value:null!==(r=e.value)&&void 0!==r?r:"",selectionType:"click",selectionConfirmed:!0})}),[P]),be=t.useRef(Array.from({length:h.default.Children.count(C)})),ve=t.useMemo((()=>se.filter((e=>h.default.isValidElement(e)&&(e.type===m.default||e.type===c.default)))),[se]),{measureElement:me}=oe,ye=ae.filter((e=>void 0!==e)).map((({index:e,start:t})=>{const l=se[e],r=ve.indexOf(l),n=r>-1,i={index:e,onSelect:pe,hidden:I&&1===se.length,style:{transform:`translateY(${t}px)`},"aria-setsize":n?ve.length:void 0,"aria-posinset":n?r+1:void 0,ref:t=>{z&&me(t),be.current[e]=t},"data-index":e};return void 0!==l?h.default.cloneElement(l,i):null})).filter((e=>null!==e)),ge=x.default(se,(e=>h.default.isValidElement(e)&&(e.type===m.default||e.type===c.default))),he=t.useCallback(((e,t)=>{const l=ge;if(-1===l)return-1;let r=f.default(e,t,l,I);const n=se[r];return(h.default.isValidElement(n)&&n.type!==m.default&&n.type!==c.default||n.props.disabled)&&(r=he(e,r)),r}),[se,ge,I]),xe=t.useCallback((e=>{var t;let l=U;V&&(l=ue(V));const r=he(e,l);if(-1===r||l===r)return;const{text:n,value:i}=se[r].props;P({id:null===(t=be.current[r])||void 0===t?void 0:t.id,text:null!=n?n:"",value:null!=i?i:"",selectionType:"navigationKey",selectionConfirmed:!1})}),[se,U,ue,he,V,P]),je=t.useCallback(((e,t)=>{var l;t?q():(e.preventDefault(),null===(l=te.current)||void 0===l||l.focus())}),[q]),Oe=t.useCallback((()=>{_&&_.getElementsByTagName("input")[0].focus()}),[_]),Se=t.useCallback((e=>{if(!z)return;const{key:t}=e,l=document.activeElement===te.current;if("Tab"===t&&O)je(e,l);else if("Tab"===t)q();else if("Enter"!==t||l)p.default(t)&&(Oe(),xe(t));else{var r;e.preventDefault();const t=se[U];if(!h.default.isValidElement(t))return q(),void P({id:"",text:"",value:"",selectionType:"enterKey",selectionConfirmed:!1});if(t.props.disabled)return;const{text:l,value:n}=t.props;P({id:null===(r=be.current[U])||void 0===r?void 0:r.id,text:null!=l?l:"",value:null!=n?n:"",selectionType:"enterKey",selectionConfirmed:!0})}}),[se,O,je,q,U,P,xe,Oe,z]),Ee=t.useCallback((e=>{"Escape"===e.key&&q()}),[q]);a.default({open:!!z,closeModal:Ee,modalRef:X,triggerRefocusOnClose:!1}),t.useEffect((()=>{const e=i.current,t=j.default((e=>{const t=e.target;z&&t.scrollHeight-t.scrollTop===t.clientHeight&&(null==B||B())}),300);return null==e||e.addEventListener("scroll",t),()=>{null==e||e.removeEventListener("scroll",t)}}),[z,i,B]),t.useEffect((()=>(window.addEventListener("keydown",Se),function(){window.removeEventListener("keydown",Se)})),[Se,i]),t.useEffect((()=>{T&&T!==Q.current?(Q.current=T,Y((e=>{const t=d.default(T,se,e);if(!t)return-1;const l=ue(t.props.value);return oe.scrollToIndex(l,k),l}))):Q.current=T||""}),[se,T,ue,oe]),t.useEffect((()=>{if(!(V&&0!==Object.keys(V).length||z))return void Y(-1);const e=ue(V);-1!==e&&Y(e)}),[ue,V,z]),t.useEffect((()=>{I&&U===ge&&ge>-1&&oe.scrollToIndex(ge,E(S({},k),{align:"start"}))}),[C,U,I,ge,i,oe]);const ke=t.useMemo((()=>[l.offset(3),l.size({apply({rects:e,elements:t}){Object.assign(t.floating.style,{width:`${null!=F?F:e.reference.width}px`})}}),...D?[l.flip({fallbackStrategy:"initialPlacement"})]:[]]),[F,D]),we=I?e.jsx(s.StyledSelectLoaderContainer,{children:e.jsx(v.Loader,{"data-role":"select-list-loader"})},"loader"):void 0;let Le=ye;const Ce={role:"listbox",id:w,"aria-labelledby":L,"aria-multiselectable":!!W||void 0};return t.useLayoutEffect((()=>{var e,t;O&&z&&(ne.current=(null===(t=te.current)||void 0===t||null===(e=t.parentElement)||void 0===e?void 0:e.offsetHeight)||0)}),[O,z]),H&&(Le=e.jsxs(s.StyledSelectListTable,{children:[e.jsx(s.StyledSelectListTableHeader,{scrollbarWidth:G,children:R}),e.jsx(s.StyledSelectListTableBody,E(S({},Ce),{"aria-labelledby":L,ref:Z,listHeight:de-48,children:ye}))]})),e.jsx(y.default.Provider,{value:{currentOptionsListIndex:U,multiselectValues:W},children:e.jsx(u.default,{placement:A,disablePortal:!0,reference:fe,middleware:ke,isOpen:z,disableBackgroundUI:!0,animationFrame:!0,children:e.jsxs(s.StyledSelectListContainer,E(S({ref:ee,"data-element":"select-list-wrapper","data-role":"select-list-wrapper",isLoading:I},N),{children:[e.jsxs(s.StyledScrollableContainer,{ref:i,maxHeight:g,"data-component":"select-list-scrollable-container","data-role":"select-list-scrollable-container",hasActionButton:!!O,children:[e.jsx(s.StyledSelectList,E(S({as:H?"div":"ul","data-element":"select-list"},H?{}:Ce),{ref:X,tabIndex:-1,listHeight:H?void 0:de,children:Le})),we]}),O&&e.jsx(b.default,{ref:te,listActionButton:O,onListAction:M})]}))})})}));exports.default=w;

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

@@ -1,10 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const SelectListContext = /*#__PURE__*/_react.default.createContext({});
-var _default = exports.default = SelectListContext;
+"use strict";function e(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const t=e(require("react")).default.createContext({});exports.default=t;