carbon-react 154.3.2 → 154.3.3-beta.1

package/lib/components/select/__internal__/utils/with-filter.hoc.js

@@ -1,140 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _useLocale = _interopRequireDefault(require("../../../../hooks/__internal__/useLocale"));
-var _optionRow = _interopRequireDefault(require("../../option-row/option-row.style"));
-var _option = _interopRequireDefault(require("../../option/option.style"));
-var _option2 = _interopRequireDefault(require("../../option"));
-var _optionRow2 = _interopRequireDefault(require("../../option-row/option-row.component"));
-var _highlightPartOfText = _interopRequireDefault(require("./highlight-part-of-text"));
-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 filterOptions = (option, filterText) => {
-  const processedText = option.props.text?.toLowerCase();
-  const processedValue = filterText.toLowerCase();
-  if (processedText.includes(processedValue)) {
-    return option;
-  }
-  return null;
-};
-const filterOptionRows = (optionRow, filterText) => {
-  const cells = _react.default.Children.toArray(optionRow.props.children);
-  const hasText = cells.find(cell => {
-    /* istanbul ignore if */
-    if (! /*#__PURE__*/_react.default.isValidElement(cell)) {
-      return false;
-    }
-    if (typeof cell.props.children === "string") {
-      const processedText = cell.props.children.toLowerCase();
-      const processedValue = filterText.toLowerCase();
-      return processedText.includes(processedValue);
-    }
-    // filter recursively based on children
-    return filterOptionRows(cell, filterText);
-  });
-  if (hasText) {
-    return optionRow;
-  }
-  return null;
-};
-const filterChildren = filterText => children => {
-  const filteredChildren = _react.default.Children.map(children, child => {
-    /* istanbul ignore if */
-    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
-      return null;
-    }
-    if (child.type === _option2.default) {
-      return filterOptions(child, filterText);
-    }
-    /* istanbul ignore else */
-    if (child.type === _optionRow2.default) {
-      return filterOptionRows(child, filterText);
-    }
-    /* istanbul ignore next */
-    return null;
-  });
-  if (_react.default.Children.count(filteredChildren)) return filteredChildren;
-  return null;
-};
-function addHighlightedContent(filteredElements, filterText) {
-  return _react.default.Children.map(filteredElements, child => {
-    let highlightedContent;
-    /* istanbul ignore if */
-    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
-      return child;
-    }
-    if (child.type === _option2.default) {
-      highlightedContent = (0, _highlightPartOfText.default)(child.props.text, filterText);
-    }
-    if (child.type === _optionRow2.default) {
-      highlightedContent = _react.default.Children.map(child.props.children, cell => {
-        /* istanbul ignore if */
-        if (! /*#__PURE__*/_react.default.isValidElement(cell)) {
-          return cell;
-        }
-        return /*#__PURE__*/_react.default.cloneElement(cell, {
-          children: (0, _highlightPartOfText.default)(cell.props.children, filterText)
-        });
-      });
-    }
-    return /*#__PURE__*/_react.default.cloneElement(child, {
-      children: highlightedContent
-    });
-  });
-}
-/** Filters wrapped component children based on provided filter text and highlights matching content */
-const withFilter = WrappedComponent => {
-  const FilteredComponent = /*#__PURE__*/_react.default.forwardRef(({
-    children,
-    filterText,
-    noResultsMessage,
-    isLoading,
-    multiColumn,
-    tableHeader,
-    ...props
-  }, forwardedRef) => {
-    const l = (0, _useLocale.default)();
-    const getFilteredChildren = (0, _react.useCallback)(() => {
-      let filteredElements = children;
-      if (filterText && !isLoading) {
-        filteredElements = filterChildren(filterText)(children);
-        if (!filteredElements) {
-          const noResultsText = l.select.noResultsForTerm(filterText);
-          if (multiColumn) {
-            const colSpan = /*#__PURE__*/_react.default.isValidElement(tableHeader) ? /* istanbul ignore next */_react.default.Children.count(tableHeader?.props?.children) : 1;
-            return /*#__PURE__*/_react.default.createElement(_optionRow.default, null, /*#__PURE__*/_react.default.createElement("td", {
-              style: {
-                fontWeight: "normal"
-              },
-              colSpan: colSpan
-            }, noResultsMessage || noResultsText));
-          }
-          return /*#__PURE__*/_react.default.createElement(_option.default, {
-            isInteractive: true
-          }, noResultsMessage || noResultsText);
-        }
-        return addHighlightedContent(filteredElements, filterText);
-      }
-      return children;
-    }, [children, filterText, isLoading, multiColumn, noResultsMessage, tableHeader, l]);
-    const wrappedComponentProps = {
-      filterText,
-      isLoading,
-      multiColumn,
-      tableHeader,
-      ...props
-    };
-    return /*#__PURE__*/_react.default.createElement(WrappedComponent, _extends({}, wrappedComponentProps, {
-      ref: forwardedRef
-    }), getFilteredChildren());
-  });
-  FilteredComponent.displayName = "FilteredComponent";
-  return FilteredComponent;
-};
-var _default = exports.default = withFilter;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../hooks/__internal__/useLocale/useLocale.js"),n=require("../../option-row/option-row.style.js"),l=require("../../option/option.style.js"),o=require("../../option/option.component.js"),i=require("../../option-row/option-row.component.js"),u=require("./highlight-part-of-text.js");function a(e){return e&&e.__esModule?e:{default:e}}var s=a(t);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 d(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}const f=(e,t)=>s.default.Children.toArray(e.props.children).find((e=>{if(!s.default.isValidElement(e))return!1;if("string"==typeof e.props.children){const r=e.props.children.toLowerCase(),n=t.toLowerCase();return r.includes(n)}return f(e,t)}))?e:null;exports.default=a=>{const c=s.default.forwardRef(((c,p)=>{var{children:y,filterText:b,noResultsMessage:m,isLoading:h,multiColumn:O,tableHeader:j}=c,g=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}(c,["children","filterText","noResultsMessage","isLoading","multiColumn","tableHeader"]);const v=r.default(),w=t.useCallback((()=>{let t=y;if(b&&!h){if(t=(e=>t=>{const r=s.default.Children.map(t,(t=>s.default.isValidElement(t)?t.type===o.default?((e,t)=>{var r;const n=null===(r=e.props.text)||void 0===r?void 0:r.toLowerCase(),l=t.toLowerCase();return n.includes(l)?e:null})(t,e):t.type===i.default?f(t,e):null:null));return s.default.Children.count(r)?r:null})(b)(y),!t){const t=v.select.noResultsForTerm(b);if(O){var r;const l=s.default.isValidElement(j)?s.default.Children.count(null==j||null===(r=j.props)||void 0===r?void 0:r.children):1;return e.jsx(n.default,{children:e.jsx("td",{style:{fontWeight:"normal"},colSpan:l,children:m||t})})}return e.jsx(l.default,{isInteractive:!0,children:m||t})}return function(e,t){return s.default.Children.map(e,(e=>{let r;return s.default.isValidElement(e)?(e.type===o.default&&(r=u.default(e.props.text,t)),e.type===i.default&&(r=s.default.Children.map(e.props.children,(e=>s.default.isValidElement(e)?s.default.cloneElement(e,{children:u.default(e.props.children,t)}):e))),s.default.cloneElement(e,{children:r})):e}))}(t,b)}return y}),[y,b,h,O,m,j,v]),x=d({filterText:b,isLoading:h,multiColumn:O,tableHeader:j},g);return e.jsx(a,(C=d({},x),P=null!=(P={ref:p,children:w()})?P:{},Object.getOwnPropertyDescriptors?Object.defineProperties(C,Object.getOwnPropertyDescriptors(P)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(P)).forEach((function(e){Object.defineProperty(C,e,Object.getOwnPropertyDescriptor(P,e))})),C));var C,P}));return c.displayName="FilteredComponent",c};

package/lib/components/select/filterable-select/filterable-select.component.js

@@ -1,495 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.FilterableSelect = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _invariant = _interopRequireDefault(require("invariant"));
-var _utils = require("../../../style/utils");
-var _selectTextbox = _interopRequireDefault(require("../__internal__/select-textbox"));
-var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
-var _withFilter = _interopRequireDefault(require("../__internal__/utils/with-filter.hoc"));
-var _select = _interopRequireDefault(require("../select.style"));
-var _selectList = _interopRequireDefault(require("../__internal__/select-list/select-list.component"));
-var _isExpectedOption = _interopRequireDefault(require("../__internal__/utils/is-expected-option"));
-var _areObjectsEqual = _interopRequireDefault(require("../__internal__/utils/are-objects-equal"));
-var _isNavigationKey = _interopRequireDefault(require("../__internal__/utils/is-navigation-key"));
-var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
-var _useStableCallback = _interopRequireDefault(require("../../../hooks/__internal__/useStableCallback"));
-var _useInputAccessibility = _interopRequireDefault(require("../../../hooks/__internal__/useInputAccessibility/useInputAccessibility"));
-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); }
-let deprecateUncontrolledWarnTriggered = false;
-const FilterableSelectList = (0, _withFilter.default)(_selectList.default);
-let deprecateOptionalWarnTriggered = false;
-const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledby,
-  value,
-  defaultValue,
-  id,
-  name,
-  label,
-  children,
-  onOpen: onOpenProp,
-  onChange,
-  onFilterChange: onFilterChangeProp,
-  onClick,
-  onKeyDown,
-  onFocus,
-  onBlur,
-  openOnFocus,
-  noResultsMessage,
-  listActionButton,
-  listMaxHeight,
-  onListAction,
-  isLoading,
-  disabled,
-  readOnly,
-  onListScrollBottom,
-  tableHeader,
-  multiColumn,
-  "data-element": dataElement,
-  "data-role": dataRole,
-  tooltipPosition,
-  listPlacement = "bottom",
-  flipEnabled = true,
-  enableVirtualScroll,
-  virtualScrollOverscan,
-  disableDefaultFiltering = false,
-  isOptional,
-  required,
-  listWidth,
-  ...textboxProps
-}, ref) => {
-  if (!deprecateOptionalWarnTriggered && isOptional) {
-    deprecateOptionalWarnTriggered = true;
-    _logger.default.deprecate("`isOptional` is deprecated in FilterableSelect and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
-  }
-  const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)("");
-  const selectListId = (0, _react.useRef)((0, _guid.default)());
-  const containerRef = (0, _react.useRef)(null);
-  const listboxRef = (0, _react.useRef)(null);
-  const isControlled = (0, _react.useRef)(value !== undefined);
-  const isMouseDownReported = (0, _react.useRef)(false);
-  const isInputFocused = (0, _react.useRef)(false);
-  const isMouseDownOnInput = (0, _react.useRef)(false);
-  const [textboxRef, setTextboxRef] = (0, _react.useState)();
-  const [isOpen, setOpen] = (0, _react.useState)(false);
-  const [textValue, setTextValue] = (0, _react.useState)("");
-  const [selectedValue, setSelectedValue] = (0, _react.useState)(value || defaultValue || "");
-  const receivedValue = (0, _react.useRef)(value);
-  const [highlightedValue, setHighlightedValue] = (0, _react.useState)("");
-  const [filterText, setFilterText] = (0, _react.useState)("");
-  const inputId = (0, _react.useRef)(id || (0, _guid.default)());
-  const {
-    labelId
-  } = (0, _useInputAccessibility.default)({
-    id: inputId.current,
-    label
-  });
-  const focusTimer = (0, _react.useRef)(null);
-  const openOnFocusFlagBlock = (0, _react.useRef)(false);
-  const componentIsUncontrolled = !isControlled || !onChange && defaultValue;
-  if (!deprecateUncontrolledWarnTriggered && componentIsUncontrolled) {
-    deprecateUncontrolledWarnTriggered = true;
-    _logger.default.deprecate("Uncontrolled behaviour in `Filterable Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
-  }
-  const createCustomEvent = (0, _react.useCallback)((newValue, selectionConfirmed) => {
-    const customEvent = {
-      target: {
-        ...(name && {
-          name
-        }),
-        ...(id && {
-          id
-        }),
-        value: newValue
-      },
-      selectionConfirmed
-    };
-    return customEvent;
-  }, [name, id]);
-  const triggerChange = (0, _react.useCallback)((newValue, selectionConfirmed) => {
-    /* istanbul ignore else */
-    if (onChange) {
-      onChange(createCustomEvent(newValue, selectionConfirmed));
-    }
-  }, [onChange, createCustomEvent]);
-  function findElementWithMatchingText(textToMatch, list) {
-    return _react.default.Children.toArray(list).find(child => {
-      const {
-        text
-      } = child.props;
-      return text?.toLowerCase().indexOf(textToMatch?.toLowerCase()) !== -1;
-    });
-  }
-  const updateValues = (0, _react.useCallback)((newFilterText, isDeleteEvent) => {
-    setSelectedValue(previousValue => {
-      const trimmed = newFilterText.trimStart();
-      const match = findElementWithMatchingText(trimmed, children);
-      const isFilterCleared = isDeleteEvent && !newFilterText.length;
-      if (!match || isFilterCleared || match.props.disabled) {
-        setTextValue(newFilterText);
-        triggerChange("", false);
-        return "";
-      }
-      if (trimmed.length) {
-        triggerChange(match.props.value, false);
-      }
-      if (isDeleteEvent) {
-        setTextValue(newFilterText);
-        return match.props.value;
-      }
-      if (trimmed.length && match.props.text?.toLowerCase().startsWith(trimmed.toLowerCase())) {
-        setTextValue(match.props.text);
-      } else {
-        setTextValue(newFilterText);
-      }
-      if (isControlled.current) {
-        return previousValue;
-      }
-      setHighlightedValue(match.props.value);
-      return match.props.value;
-    });
-  }, [children, triggerChange]);
-  const setMatchingText = (0, _react.useCallback)((newValue, isClosing = false) => {
-    const matchingOption = _react.default.Children.toArray(children).find(child => /*#__PURE__*/_react.default.isValidElement(child) && (0, _isExpectedOption.default)(child, newValue));
-    if (!matchingOption || matchingOption.props.text === undefined) {
-      setTextValue(filterText || "");
-      return;
-    }
-
-    /* istanbul ignore else */
-    if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase().trim())) {
-      setTextValue(matchingOption.props.text);
-    }
-  }, [children, filterText]);
-  const handleTextboxChange = (0, _react.useCallback)(event => {
-    const newValue = event.target.value;
-    const {
-      inputType
-    } = event.nativeEvent;
-    const isDeleteEvent = inputType === "deleteContentBackward" || inputType === "deleteContentForward" || inputType === "delete";
-    updateValues(newValue, isDeleteEvent);
-    setFilterText(newValue);
-    setOpen(true);
-  }, [updateValues]);
-  const fillLastFilterCharacter = (0, _react.useCallback)(key => {
-    setFilterText(previousFilterText => {
-      if (previousFilterText?.length === textValue?.length - 1 && key === textValue.slice(-1)) {
-        return textValue;
-      }
-      return previousFilterText;
-    });
-  }, [textValue]);
-  const handleTextboxKeydown = (0, _react.useCallback)(event => {
-    const {
-      key
-    } = event;
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-    if (readOnly) {
-      return;
-    }
-    if (!event.defaultPrevented && (0, _isNavigationKey.default)(key)) {
-      event.preventDefault();
-      setOpen(true);
-    }
-    fillLastFilterCharacter(key);
-  }, [fillLastFilterCharacter, onKeyDown, readOnly]);
-  const valueToUse = isControlled.current ? value : selectedValue;
-  const handleGlobalClick = (0, _react.useCallback)(event => {
-    const notInContainer = containerRef.current && !containerRef.current.contains(event.target);
-    const notInList = listboxRef.current && !listboxRef.current.contains(event.target);
-    isMouseDownReported.current = false;
-    if (notInContainer && notInList) {
-      setMatchingText(valueToUse, true);
-      setOpen(false);
-    }
-  }, [setMatchingText, valueToUse]);
-  (0, _react.useEffect)(() => {
-    const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
-    const onChangeMissingMessage = "onChange prop required when using a controlled input element";
-    !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, modeSwitchedMessage) : (0, _invariant.default)(false) : void 0;
-    !(!isControlled.current || isControlled.current && onChange) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, onChangeMissingMessage) : (0, _invariant.default)(false) : void 0;
-    if (isControlled.current) {
-      setSelectedValue(prevValue => {
-        if (value && prevValue !== value) {
-          setMatchingText(value);
-        }
-        return value;
-      });
-      setHighlightedValue(value);
-    } else {
-      if (textValue !== selectedValue) {
-        setMatchingText(selectedValue);
-      }
-      if (highlightedValue !== selectedValue) {
-        setHighlightedValue(selectedValue);
-      }
-    }
-    // prevent value update on filter change
-    // selectedValue and highlightedValue omitted from deps, only want uncontrolled change if onChange/children update
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, onChange, children]);
-  const onOpen = (0, _useStableCallback.default)(onOpenProp);
-  (0, _react.useEffect)(() => {
-    if (!isOpen) {
-      setFilterText("");
-    } else if (onOpen) {
-      onOpen();
-    }
-  }, [onOpen, isOpen]);
-  (0, _react.useEffect)(() => {
-    const hasListActionButton = listActionButton !== undefined;
-    const onListActionMissingMessage = "onListAction prop required when using listActionButton prop";
-    !(!hasListActionButton || hasListActionButton && onListAction) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, onListActionMissingMessage) : (0, _invariant.default)(false) : void 0;
-  }, [listActionButton, onListAction]);
-  const isFirstRender = (0, _react.useRef)(true);
-  (0, _react.useEffect)(() => {
-    // when we render for the first time, we run setMatchingText to populate the input with the correct text
-    if (isFirstRender.current) {
-      setMatchingText(selectedValue);
-    }
-    if (isControlled.current) {
-      // when value is an object we should only run setMatchingText if the object changes between renders
-      if (typeof value === "object" && typeof receivedValue.current === "object") {
-        if (!(0, _areObjectsEqual.default)(value, receivedValue.current)) {
-          setMatchingText(value);
-          receivedValue.current = value;
-        }
-      } else {
-        setMatchingText(value);
-      }
-    }
-    // update text value only when children are changing
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, children]);
-  const onFilterChange = (0, _useStableCallback.default)(onFilterChangeProp);
-  (0, _react.useEffect)(() => {
-    if (onFilterChange && !isFirstRender.current) {
-      onFilterChange(filterText);
-    }
-  }, [onFilterChange, filterText]);
-  (0, _react.useEffect)(() => {
-    isFirstRender.current = false;
-  }, []);
-  (0, _react.useEffect)(() => {
-    const clickEvent = "click";
-    window.addEventListener(clickEvent, handleGlobalClick);
-    return function cleanup() {
-      window.removeEventListener(clickEvent, handleGlobalClick);
-    };
-  }, [handleGlobalClick]);
-  (0, _react.useEffect)(() => {
-    const trimmed = filterText?.trimStart();
-    const textStartsWithFilter = textValue?.toLowerCase().startsWith(trimmed.toLowerCase());
-    const isTextboxActive = !disabled && !readOnly;
-    if (isTextboxActive && textboxRef && trimmed.length && textValue?.length > trimmed.length && textStartsWithFilter) {
-      textboxRef.selectionStart = trimmed.length;
-    }
-  }, [textValue, filterText, textboxRef, disabled, readOnly]);
-  const onSelectOption = (0, _react.useCallback)(optionData => {
-    const {
-      id: selectedOptionId,
-      text,
-      value: newValue,
-      selectionType,
-      selectionConfirmed
-    } = optionData;
-    if (!isControlled.current) {
-      setSelectedValue(newValue);
-      setHighlightedValue(newValue);
-    }
-    setTextValue(text);
-    triggerChange(newValue, !!selectionConfirmed);
-    setActiveDescendantId(selectedOptionId);
-    if (selectionType !== "navigationKey") {
-      openOnFocusFlagBlock.current = !!openOnFocus;
-      setOpen(false);
-      textboxRef?.focus();
-      textboxRef?.select();
-      openOnFocusFlagBlock.current = false;
-    }
-  }, [textboxRef, triggerChange, openOnFocus]);
-  const onSelectListClose = (0, _react.useCallback)(() => {
-    setOpen(false);
-    setMatchingText(selectedValue, true);
-  }, [selectedValue, setMatchingText]);
-  function handleTextboxClick(event) {
-    isMouseDownReported.current = false;
-    if (onClick) {
-      onClick(event);
-    }
-    setOpen(true);
-  }
-  function handleDropdownIconClick(event) {
-    isMouseDownReported.current = false;
-    if (onClick) {
-      onClick(event);
-    }
-    setOpen(isAlreadyOpen => {
-      return !isAlreadyOpen;
-    });
-  }
-  (0, _react.useEffect)(() => {
-    return () => {
-      if (focusTimer.current) {
-        clearTimeout(focusTimer.current);
-      }
-    };
-  }, []);
-  function handleTextboxFocus(event) {
-    const triggerFocus = () => onFocus?.(event);
-    if (openOnFocus) {
-      if (focusTimer.current) {
-        clearTimeout(focusTimer.current);
-      }
-      if (openOnFocusFlagBlock.current) {
-        return;
-      }
-
-      // we need to use a timeout here as there is a race condition when rendered in a modal
-      // whereby the select list isn't visible when the select is auto focused straight away
-      focusTimer.current = setTimeout(() => {
-        setOpen(isAlreadyOpen => {
-          if (isAlreadyOpen) {
-            return true;
-          }
-          if (onFocus && !isInputFocused.current) {
-            triggerFocus();
-            isInputFocused.current = true;
-          }
-          if (isMouseDownReported.current && !isMouseDownOnInput.current) {
-            return false;
-          }
-          return true;
-        });
-      });
-    } else if (onFocus && !isInputFocused.current) {
-      triggerFocus();
-      isInputFocused.current = true;
-    }
-  }
-  function handleTextboxBlur(event) {
-    isMouseDownOnInput.current = false;
-    if (isMouseDownReported.current) {
-      return;
-    }
-    isInputFocused.current = false;
-    if (onBlur) {
-      onBlur(event);
-    }
-  }
-  function handleTextboxMouseDown(event) {
-    isMouseDownReported.current = true;
-    if (event.target.dataset.element === "input") {
-      isMouseDownOnInput.current = true;
-    }
-  }
-  function handleListMouseDown() {
-    isMouseDownReported.current = true;
-  }
-  function handleOnListAction() {
-    setOpen(false);
-    onListAction?.();
-  }
-  const assignInput = (0, _react.useCallback)(element => {
-    if (!element) return;
-    setTextboxRef(element);
-    if (!ref) return;
-    if (typeof ref === "function") {
-      ref(element);
-    } else {
-      ref.current = element;
-    }
-  }, [ref]);
-  function getTextboxProps() {
-    return {
-      id: inputId.current,
-      name,
-      label,
-      disabled,
-      readOnly,
-      selectedValue,
-      formattedValue: textValue,
-      onClick: handleTextboxClick,
-      iconOnClick: handleDropdownIconClick,
-      iconOnMouseDown: handleTextboxMouseDown,
-      onFocus: handleTextboxFocus,
-      onBlur: handleTextboxBlur,
-      onKeyDown: handleTextboxKeydown,
-      onChange: handleTextboxChange,
-      onMouseDown: handleTextboxMouseDown,
-      tooltipPosition,
-      required,
-      isOptional,
-      ...(0, _utils.filterOutStyledSystemSpacingProps)(textboxProps),
-      "data-component": undefined
-    };
-  }
-  let placement;
-  switch (listPlacement) {
-    case "top":
-      placement = "top-end";
-      break;
-    case "bottom":
-      placement = "bottom-end";
-      break;
-    default:
-      placement = listPlacement;
-  }
-  const selectListProps = {
-    ref: listboxRef,
-    id: selectListId.current,
-    labelId,
-    anchorElement: textboxRef?.parentElement || undefined,
-    onSelect: onSelectOption,
-    onSelectListClose,
-    onMouseDown: handleListMouseDown,
-    filterText: filterText.trim(),
-    highlightedValue,
-    noResultsMessage,
-    listActionButton,
-    listMaxHeight,
-    onListAction: handleOnListAction,
-    isLoading,
-    onListScrollBottom,
-    tableHeader,
-    multiColumn,
-    listPlacement: listWidth !== undefined ? placement : listPlacement,
-    flipEnabled,
-    isOpen,
-    enableVirtualScroll,
-    virtualScrollOverscan,
-    listWidth
-  };
-  const selectList = disableDefaultFiltering ? /*#__PURE__*/_react.default.createElement(_selectList.default, selectListProps, children) : /*#__PURE__*/_react.default.createElement(FilterableSelectList, selectListProps, children);
-  const marginProps = (0, _utils.filterStyledSystemMarginProps)(textboxProps);
-  return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
-    hasTextCursor: true,
-    readOnly: readOnly,
-    disabled: disabled,
-    "data-component": "filterable-select",
-    "data-role": dataRole,
-    "data-element": dataElement,
-    isOpen: isOpen
-  }, marginProps), /*#__PURE__*/_react.default.createElement("div", {
-    ref: containerRef
-  }, /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
-    ref: assignInput,
-    activeDescendantId: activeDescendantId,
-    ariaLabel: ariaLabel,
-    ariaLabelledby: ariaLabelledby,
-    labelId: label ? labelId : undefined,
-    "aria-controls": selectListId.current,
-    isOpen: isOpen,
-    hasTextCursor: true
-  }, getTextboxProps()))), selectList);
-});
-var _default = exports.default = FilterableSelect;
+"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"),u=require("../select.style.js"),s=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("../../../__internal__/utils/logger/index.js"),b=require("../../../hooks/__internal__/useStableCallback/useStableCallback.js"),v=require("../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js");function m(e){return e&&e.__esModule?e:{default:e}}var h=m(t),y=m(n);function g(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){g(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}let _=!1;const j=a.default(s.default);let w=!1;const S=h.default.forwardRef(((n,a)=>{var{"aria-label":m,"aria-labelledby":g,value:S,defaultValue:x,id:k,name:q,label:L,children:P,onOpen:E,onChange:R,onFilterChange:D,onClick:F,onKeyDown:A,onFocus:B,onBlur:M,openOnFocus:I,noResultsMessage:V,listActionButton:T,listMaxHeight:H,onListAction:W,isLoading:K,disabled:U,readOnly:z,onListScrollBottom:G,tableHeader:J,multiColumn:N,"data-element":Q,"data-role":X,tooltipPosition:Y,listPlacement:Z="bottom",flipEnabled:$=!0,enableVirtualScroll:ee,virtualScrollOverscan:te,disableDefaultFiltering:ne=!1,isOptional:re,required:le,listWidth:oe}=n,ie=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","defaultValue","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","isOptional","required","listWidth"]);!w&&re&&(w=!0,p.default.deprecate("`isOptional` is deprecated in FilterableSelect and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const[ae,ue]=t.useState(""),se=t.useRef(i.default()),ce=t.useRef(null),de=t.useRef(null),fe=t.useRef(void 0!==S),pe=t.useRef(!1),be=t.useRef(!1),ve=t.useRef(!1),[me,he]=t.useState(),[ye,ge]=t.useState(!1),[Oe,Ce]=t.useState(""),[_e,je]=t.useState(S||x||""),we=t.useRef(S),[Se,xe]=t.useState(""),[ke,qe]=t.useState(""),Le=t.useRef(k||i.default()),{labelId:Pe}=v.default({id:Le.current,label:L}),Ee=t.useRef(null),Re=t.useRef(!1);!_&&(!fe||!R&&x)&&(_=!0,p.default.deprecate("Uncontrolled behaviour in `Filterable Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."));const De=t.useCallback(((e,t)=>({target:C(O({},q&&{name:q},k&&{id:k}),{value:e}),selectionConfirmed:t})),[q,k]),Fe=t.useCallback(((e,t)=>{R&&R(De(e,t))}),[R,De]),Ae=t.useCallback(((e,t)=>{je((n=>{var r;const l=e.trimStart(),o=(i=l,a=P,h.default.Children.toArray(a).find((e=>{const{text:t}=e.props;return-1!==(null==t?void 0:t.toLowerCase().indexOf(null==i?void 0:i.toLowerCase()))})));var i,a;const u=t&&!e.length;return!o||u||o.props.disabled?(Ce(e),Fe("",!1),""):(l.length&&Fe(o.props.value,!1),t?(Ce(e),o.props.value):(l.length&&(null===(r=o.props.text)||void 0===r?void 0:r.toLowerCase().startsWith(l.toLowerCase()))?Ce(o.props.text):Ce(e),fe.current?n:(xe(o.props.value),o.props.value)))}))}),[P,Fe]),Be=t.useCallback(((e,t=!1)=>{var n;const r=h.default.Children.toArray(P).find((t=>h.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==ke?void 0:ke.toLowerCase().trim())))&&Ce(r.props.text):Ce(ke||"")}),[P,ke]),Me=t.useCallback((e=>{const t=e.target.value,{inputType:n}=e.nativeEvent;Ae(t,"deleteContentBackward"===n||"deleteContentForward"===n||"delete"===n),qe(t),ge(!0)}),[Ae]),Ie=t.useCallback((e=>{qe((t=>(null==t?void 0:t.length)===(null==Oe?void 0:Oe.length)-1&&e===Oe.slice(-1)?Oe:t))}),[Oe]),Ve=t.useCallback((e=>{const{key:t}=e;A&&A(e),z||(!e.defaultPrevented&&f.default(t)&&(e.preventDefault(),ge(!0)),Ie(t))}),[Ie,A,z]),Te=fe.current?S:_e,He=t.useCallback((e=>{const t=ce.current&&!ce.current.contains(e.target),n=de.current&&!de.current.contains(e.target);pe.current=!1,t&&n&&(Be(Te,!0),ge(!1))}),[Be,Te]);t.useEffect((()=>{y.default(fe.current===(void 0!==S),"Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component"),y.default(!fe.current||fe.current&&R,"onChange prop required when using a controlled input element"),fe.current?(je((e=>(S&&e!==S&&Be(S),S))),xe(S)):(Oe!==_e&&Be(_e),Se!==_e&&xe(_e))}),[S,R,P]);const We=b.useStableCallback(E);t.useEffect((()=>{ye?We&&We():qe("")}),[We,ye]),t.useEffect((()=>{const e=void 0!==T;y.default(!e||e&&W,"onListAction prop required when using listActionButton prop")}),[T,W]);const Ke=t.useRef(!0);t.useEffect((()=>{Ke.current&&Be(_e),fe.current&&("object"==typeof S&&"object"==typeof we.current?d.default(S,we.current)||(Be(S),we.current=S):Be(S))}),[S,P]);const Ue=b.useStableCallback(D);t.useEffect((()=>{Ue&&!Ke.current&&Ue(ke)}),[Ue,ke]),t.useEffect((()=>{Ke.current=!1}),[]),t.useEffect((()=>{const e="click";return window.addEventListener(e,He),function(){window.removeEventListener(e,He)}}),[He]),t.useEffect((()=>{const e=null==ke?void 0:ke.trimStart(),t=null==Oe?void 0:Oe.toLowerCase().startsWith(e.toLowerCase());!U&&!z&&me&&e.length&&(null==Oe?void 0:Oe.length)>e.length&&t&&(me.selectionStart=e.length)}),[Oe,ke,me,U,z]);const ze=t.useCallback((e=>{const{id:t,text:n,value:r,selectionType:l,selectionConfirmed:o}=e;fe.current||(je(r),xe(r)),Ce(n),Fe(r,!!o),ue(t),"navigationKey"!==l&&(Re.current=!!I,ge(!1),null==me||me.focus(),null==me||me.select(),Re.current=!1)}),[me,Fe,I]),Ge=t.useCallback((()=>{ge(!1),Be(_e,!0)}),[_e,Be]);function Je(e){pe.current=!0,"input"===e.target.dataset.element&&(ve.current=!0)}t.useEffect((()=>()=>{Ee.current&&clearTimeout(Ee.current)}),[]);const Ne=t.useCallback((e=>{e&&(he(e),a&&("function"==typeof a?a(e):a.current=e))}),[a]);let Qe;switch(Z){case"top":Qe="top-end";break;case"bottom":Qe="bottom-end";break;default:Qe=Z}const Xe={ref:de,id:se.current,labelId:Pe,anchorElement:(null==me?void 0:me.parentElement)||void 0,onSelect:ze,onSelectListClose:Ge,onMouseDown:function(){pe.current=!0},filterText:ke.trim(),highlightedValue:Se,noResultsMessage:V,listActionButton:T,listMaxHeight:H,onListAction:function(){ge(!1),null==W||W()},isLoading:K,onListScrollBottom:G,tableHeader:J,multiColumn:N,listPlacement:void 0!==oe?Qe:Z,flipEnabled:$,isOpen:ye,enableVirtualScroll:ee,virtualScrollOverscan:te,listWidth:oe},Ye=ne?e.jsx(s.default,C(O({},Xe),{children:P})):e.jsx(j,C(O({},Xe),{children:P})),Ze=r.default(ie);return e.jsxs(u.default,C(O({hasTextCursor:!0,readOnly:z,disabled:U,"data-component":"filterable-select","data-role":X,"data-element":Q,isOpen:ye},Ze),{children:[e.jsx("div",{ref:ce,children:e.jsx(o.default,O({ref:Ne,activeDescendantId:ae,ariaLabel:m,ariaLabelledby:g,labelId:L?Pe:void 0,"aria-controls":se.current,isOpen:ye,hasTextCursor:!0},C(O({id:Le.current,name:q,label:L,disabled:U,readOnly:z,selectedValue:_e,formattedValue:Oe,onClick:function(e){pe.current=!1,F&&F(e),ge(!0)},iconOnClick:function(e){pe.current=!1,F&&F(e),ge((e=>!e))},iconOnMouseDown:Je,onFocus:function(e){const t=()=>null==B?void 0:B(e);if(I){if(Ee.current&&clearTimeout(Ee.current),Re.current)return;Ee.current=setTimeout((()=>{ge((e=>!(!e&&(B&&!be.current&&(t(),be.current=!0),pe.current&&!ve.current))))}))}else B&&!be.current&&(t(),be.current=!0)},onBlur:function(e){ve.current=!1,pe.current||(be.current=!1,M&&M(e))},onKeyDown:Ve,onChange:Me,onMouseDown:Je,tooltipPosition:Y,required:le,isOptional:re},l.default(ie)),{"data-component":void 0})))}),Ye]}))}));exports.FilterableSelect=S,exports.default=S;

package/lib/components/select/filterable-select/index.js

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