carbon-react 154.3.2 → 154.3.3-beta.1

package/lib/components/select/filterable-select/package.json

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

package/lib/components/select/index.js

@@ -1,48 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "FilterableSelect", {
-  enumerable: true,
-  get: function () {
-    return _filterableSelect.default;
-  }
-});
-Object.defineProperty(exports, "MultiSelect", {
-  enumerable: true,
-  get: function () {
-    return _multiSelect.default;
-  }
-});
-Object.defineProperty(exports, "Option", {
-  enumerable: true,
-  get: function () {
-    return _option.default;
-  }
-});
-Object.defineProperty(exports, "OptionGroupHeader", {
-  enumerable: true,
-  get: function () {
-    return _optionGroupHeader.default;
-  }
-});
-Object.defineProperty(exports, "OptionRow", {
-  enumerable: true,
-  get: function () {
-    return _optionRow.default;
-  }
-});
-Object.defineProperty(exports, "Select", {
-  enumerable: true,
-  get: function () {
-    return _simpleSelect.default;
-  }
-});
-var _option = _interopRequireDefault(require("./option"));
-var _optionRow = _interopRequireDefault(require("./option-row"));
-var _optionGroupHeader = _interopRequireDefault(require("./option-group-header"));
-var _simpleSelect = _interopRequireDefault(require("./simple-select"));
-var _filterableSelect = _interopRequireDefault(require("./filterable-select"));
-var _multiSelect = _interopRequireDefault(require("./multi-select"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+"use strict";var e=require("./option/option.component.js"),t=require("./option-row/option-row.component.js"),o=require("./option-group-header/option-group-header.component.js"),r=require("./simple-select/simple-select.component.js"),l=require("./filterable-select/filterable-select.component.js"),i=require("./multi-select/multi-select.component.js");exports.Option=e.default,exports.OptionRow=t.default,exports.OptionGroupHeader=o.default,exports.Select=r.SimpleSelect,exports.FilterableSelect=l.FilterableSelect,exports.MultiSelect=i.MultiSelect;

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

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

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

@@ -1,504 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.MultiSelect = 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 _selectList = _interopRequireDefault(require("../__internal__/select-list/select-list.component"));
-var _multiSelect = require("./multi-select.style");
-var _pill = _interopRequireDefault(require("../../pill"));
-var _isExpectedOption = _interopRequireDefault(require("../__internal__/utils/is-expected-option"));
-var _isExpectedValue = _interopRequireDefault(require("../__internal__/utils/is-expected-value"));
-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 MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledby,
-  value,
-  defaultValue,
-  id,
-  label,
-  name,
-  disabled,
-  readOnly,
-  children,
-  onOpen,
-  onFilterChange: onFilterChangeProp,
-  onChange,
-  onClick,
-  onFocus,
-  onBlur,
-  onKeyDown,
-  openOnFocus = false,
-  noResultsMessage,
-  placeholder,
-  isLoading,
-  onListScrollBottom,
-  tableHeader,
-  multiColumn,
-  tooltipPosition,
-  size,
-  "data-element": dataElement,
-  "data-role": dataRole,
-  listPlacement = "bottom",
-  listMaxHeight,
-  flipEnabled = true,
-  wrapPillText = true,
-  enableVirtualScroll,
-  virtualScrollOverscan,
-  isOptional,
-  required,
-  listWidth,
-  ...textboxProps
-}, ref) => {
-  if (!deprecateOptionalWarnTriggered && isOptional) {
-    deprecateOptionalWarnTriggered = true;
-    _logger.default.deprecate("`isOptional` is deprecated in MultiSelect 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 accessibilityLabelId = (0, _react.useRef)((0, _guid.default)());
-  const containerRef = (0, _react.useRef)(null);
-  const listboxRef = (0, _react.useRef)(null);
-  const isInputFocused = (0, _react.useRef)(false);
-  const isClickTriggeredBySelect = (0, _react.useRef)(false);
-  const isMouseDownReported = (0, _react.useRef)(false);
-  const isMouseDownOnInput = (0, _react.useRef)(false);
-  const isOpenedByFocus = (0, _react.useRef)(false);
-  const isControlled = (0, _react.useRef)(value !== undefined);
-  const [textboxRef, setTextboxRef] = (0, _react.useState)();
-  const [isOpen, setOpenState] = (0, _react.useState)(false);
-  const [textValue, setTextValue] = (0, _react.useState)("");
-  const [selectedValue, setSelectedValue] = (0, _react.useState)(value || defaultValue || []);
-  const [highlightedValue, setHighlightedValue] = (0, _react.useState)("");
-  const [filterText, setFilterText] = (0, _react.useState)("");
-  const [placeholderOverride, setPlaceholderOverride] = (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 actualValue = isControlled.current ? value : selectedValue;
-  const componentIsUncontrolled = !isControlled || !onChange && defaultValue;
-  if (!deprecateUncontrolledWarnTriggered && componentIsUncontrolled) {
-    deprecateUncontrolledWarnTriggered = true;
-    _logger.default.deprecate("Uncontrolled behaviour in `Multi Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
-  }
-  const setOpen = (0, _react.useCallback)(() => {
-    setOpenState(isAlreadyOpen => {
-      if (!isAlreadyOpen && onOpen) {
-        onOpen();
-      }
-      return true;
-    });
-  }, [onOpen]);
-  const createCustomEvent = (0, _react.useCallback)((newValue, selectionConfirmed) => {
-    const customEvent = {
-      target: {
-        ...(name && {
-          name
-        }),
-        ...(id && {
-          id
-        }),
-        value: newValue
-      },
-      selectionConfirmed
-    };
-    return customEvent;
-  }, [name, id]);
-
-  /* generic value update function which can be used for both controlled and uncontrolled
-   * components, both with and without onChange.
-   * It accepts a function to update the value, which is assumed to be have no side effects and therefore
-   * be safe to run more than once if needed. */
-  const updateValue = (0, _react.useCallback)((updateFunction, selectionConfirmed) => {
-    const newValue = updateFunction(actualValue);
-    // only call onChange if an option has been selected or deselected
-    if (newValue.length !== actualValue?.length) {
-      onChange?.(createCustomEvent(newValue, selectionConfirmed));
-    }
-
-    // no need to update selectedValue if the component is controlled: onChange should take care of updating the value
-    if (!isControlled.current) {
-      setSelectedValue(updateFunction);
-    }
-  }, [createCustomEvent, onChange, actualValue]);
-  function findElementWithMatchingText(textToMatch, list) {
-    return _react.default.Children.toArray(list).find(child => {
-      const {
-        text
-      } = child.props;
-      return text?.toLowerCase().indexOf(textToMatch?.toLowerCase()) !== -1;
-    });
-  }
-  const handleTextboxChange = (0, _react.useCallback)(event => {
-    const newValue = event.target.value;
-    const match = findElementWithMatchingText(newValue, children);
-    if (match) {
-      setHighlightedValue(match.props.value);
-    }
-    setFilterText(newValue);
-    setTextValue(newValue);
-    setOpen();
-  }, [children, setOpen]);
-  const removeSelectedValue = (0, _react.useCallback)(index => {
-    isClickTriggeredBySelect.current = true;
-    updateValue(previousValue => {
-      if (!previousValue.length) {
-        return previousValue;
-      }
-      const newValue = previousValue.slice(); // spreading does not work but slice does - see https://github.com/microsoft/TypeScript/issues/53670
-      newValue.splice(index, 1);
-      return newValue;
-    }, true);
-  }, [updateValue]);
-  const handleTextboxKeydown = (0, _react.useCallback)(event => {
-    const {
-      key
-    } = event;
-    const isDeleteKey = key === "Backspace" || key === "Delete";
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-    if (readOnly) {
-      return;
-    }
-    if (!event.defaultPrevented && (0, _isNavigationKey.default)(key)) {
-      event.preventDefault();
-      setOpen();
-    }
-    if (isDeleteKey && (filterText === "" || textValue === "")) {
-      removeSelectedValue(-1);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [onKeyDown, readOnly, filterText, textValue, setOpen, removeSelectedValue]);
-  const accessibilityLabel = (0, _react.useMemo)(() => {
-    return actualValue && actualValue.length ? _react.default.Children.map(children, child => {
-      return /*#__PURE__*/_react.default.isValidElement(child) && actualValue.includes(child.props.value) ? child.props.text : false;
-    })?.filter(child => child).reduce((acc, item) => {
-      return acc ? `${acc}, ${item}` : item;
-    }, "") : null;
-  }, [children, actualValue]);
-  const handleGlobalClick = (0, _react.useCallback)(event => {
-    isMouseDownReported.current = false;
-    if (!isOpen) {
-      return;
-    }
-    const notInContainer = containerRef.current && !containerRef.current.contains(event.target);
-    const notInList = listboxRef.current && !listboxRef.current.contains(event.target);
-    if (notInContainer && notInList && !isClickTriggeredBySelect.current) {
-      setTextValue("");
-      setFilterText("");
-      setHighlightedValue("");
-      setOpenState(false);
-    }
-    isClickTriggeredBySelect.current = false;
-  }, [isOpen]);
-  const mapValuesToPills = (0, _react.useMemo)(() => {
-    const canDelete = !disabled && !readOnly;
-    let matchingOptionValue;
-    if (!actualValue?.length) {
-      return "";
-    }
-    return actualValue.map((singleValue, index) => {
-      const matchingOption = _react.default.Children.toArray(children).find(child => /*#__PURE__*/_react.default.isValidElement(child) && (0, _isExpectedOption.default)(child, singleValue));
-      let pillProps = {};
-      if (!matchingOption) {
-        return null;
-      }
-
-      /* istanbul ignore else */
-      if (/*#__PURE__*/_react.default.isValidElement(matchingOption)) {
-        matchingOptionValue = matchingOption?.props.value?.value !== undefined ? matchingOption?.props.value?.value : matchingOption?.props.value;
-        pillProps = {
-          title: matchingOption.props.text,
-          fill: matchingOption.props.fill,
-          borderColor: matchingOption.props.borderColor
-        };
-      }
-      const title = pillProps.title || /* istanbul ignore next */"";
-      const key = title + matchingOptionValue || /* istanbul ignore next */index;
-      return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectPillContainer, {
-        key: key
-      }, /*#__PURE__*/_react.default.createElement(_pill.default, _extends({
-        onDelete: canDelete ? () => removeSelectedValue(index) : undefined,
-        wrapText: wrapPillText
-      }, pillProps), title));
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [children, disabled, readOnly, actualValue]);
-  (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;
-  }, [value, onChange]);
-
-  // removes placeholder when a value is present
-  (0, _react.useEffect)(() => {
-    const hasValue = value?.length;
-    const hasSelectedValue = actualValue?.length;
-    if (hasValue || hasSelectedValue) {
-      setPlaceholderOverride(" ");
-    } else {
-      setPlaceholderOverride(placeholder);
-    }
-  }, [value, actualValue, placeholder]);
-  (0, _react.useEffect)(() => {
-    const clickEvent = "click";
-    window.addEventListener(clickEvent, handleGlobalClick);
-    return function cleanup() {
-      window.removeEventListener(clickEvent, handleGlobalClick);
-    };
-  }, [handleGlobalClick]);
-  const onFilterChange = (0, _useStableCallback.default)(onFilterChangeProp);
-  const isFirstRender = (0, _react.useRef)(true);
-  (0, _react.useEffect)(() => {
-    if (onFilterChange && !isFirstRender.current) {
-      onFilterChange(filterText);
-    }
-  }, [onFilterChange, filterText]);
-  (0, _react.useEffect)(() => {
-    isFirstRender.current = false;
-  }, []);
-  function handleTextboxClick(event) {
-    isMouseDownReported.current = false;
-    if (onClick) {
-      onClick(event);
-    }
-
-    /* istanbul ignore else */
-    if (!openOnFocus || openOnFocus && !isOpenedByFocus.current) {
-      if (isOpen) {
-        setFilterText("");
-        setOpenState(false);
-        return;
-      }
-      onOpen?.();
-      setOpenState(true);
-    } else {
-      // This is tested in Playwright.
-      // This line of code is triggered when a user initially clicks on the input when `openOnFocus` is true.
-      isOpenedByFocus.current = false;
-    }
-  }
-  function handleDropdownIconClick(event) {
-    isMouseDownReported.current = false;
-    if (onClick) {
-      onClick(event);
-    }
-    setOpenState(isAlreadyOpen => {
-      if (isAlreadyOpen) {
-        setFilterText("");
-        return false;
-      }
-      if (onOpen) {
-        onOpen();
-      }
-      return 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 handleTextboxFocus(event) {
-    const triggerFocus = () => onFocus?.(event);
-    if (openOnFocus) {
-      if (focusTimer.current) {
-        clearTimeout(focusTimer.current);
-      }
-
-      // 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(() => {
-        setOpenState(isAlreadyOpen => {
-          if (isAlreadyOpen) {
-            return true;
-          }
-          if (onOpen) {
-            onOpen();
-          }
-          if (onFocus && !isInputFocused.current) {
-            triggerFocus();
-            isInputFocused.current = true;
-          }
-          if (isMouseDownReported.current && !isMouseDownOnInput.current) {
-            isOpenedByFocus.current = false;
-            return false;
-          }
-          if (isMouseDownOnInput.current) {
-            isOpenedByFocus.current = true;
-          }
-          return true;
-        });
-      });
-    } else if (onFocus && !isInputFocused.current) {
-      triggerFocus();
-      isInputFocused.current = true;
-    }
-  }
-  const onSelectOption = (0, _react.useCallback)(optionData => {
-    const {
-      value: newValue,
-      selectionType,
-      id: selectedOptionId,
-      selectionConfirmed
-    } = optionData;
-    if (selectionType === "navigationKey") {
-      setHighlightedValue(newValue);
-      setActiveDescendantId(selectedOptionId);
-      return;
-    }
-    if (selectionType === "click") {
-      isClickTriggeredBySelect.current = true;
-    }
-    setTextValue("");
-    const isAlreadySelected = actualValue?.findIndex(val => (0, _isExpectedValue.default)(val, newValue)) !== -1;
-    textboxRef?.focus();
-    isMouseDownReported.current = false;
-    updateValue(previousValue => {
-      if (isAlreadySelected) {
-        return previousValue;
-      }
-      return [...previousValue, newValue];
-    }, selectionConfirmed);
-  }, [textboxRef, actualValue, updateValue]);
-  const onSelectListClose = (0, _react.useCallback)(() => {
-    setOpenState(false);
-    setFilterText("");
-  }, []);
-  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,
-      disabled,
-      label,
-      readOnly,
-      placeholder: placeholderOverride,
-      leftChildren: mapValuesToPills,
-      formattedValue: textValue,
-      selectedValue: actualValue,
-      onClick: handleTextboxClick,
-      onMouseDown: handleTextboxMouseDown,
-      onFocus: handleTextboxFocus,
-      onBlur: handleTextboxBlur,
-      iconOnClick: handleDropdownIconClick,
-      iconOnMouseDown: handleTextboxMouseDown,
-      onKeyDown: handleTextboxKeydown,
-      onChange: handleTextboxChange,
-      tooltipPosition,
-      size,
-      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 selectList = /*#__PURE__*/_react.default.createElement(FilterableSelectList, {
-    ref: listboxRef,
-    id: selectListId.current,
-    labelId: labelId,
-    anchorElement: textboxRef?.parentElement || undefined,
-    onSelect: onSelectOption,
-    onSelectListClose: onSelectListClose,
-    onMouseDown: handleListMouseDown,
-    filterText: filterText.trim(),
-    highlightedValue: highlightedValue,
-    noResultsMessage: noResultsMessage,
-    isLoading: isLoading,
-    onListScrollBottom: onListScrollBottom,
-    tableHeader: tableHeader,
-    multiColumn: multiColumn,
-    listPlacement: listWidth !== undefined ? placement : listPlacement,
-    listMaxHeight: listMaxHeight,
-    flipEnabled: flipEnabled,
-    multiselectValues: actualValue,
-    isOpen: isOpen,
-    enableVirtualScroll: enableVirtualScroll,
-    virtualScrollOverscan: virtualScrollOverscan,
-    listWidth: listWidth
-  }, children);
-  const marginProps = (0, _utils.filterStyledSystemMarginProps)(textboxProps);
-  return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectMultiSelect, _extends({
-    disabled: disabled,
-    readOnly: readOnly,
-    hasTextCursor: true,
-    size: size,
-    "data-component": "multiselect",
-    "data-role": dataRole,
-    "data-element": dataElement,
-    isOpen: isOpen
-  }, marginProps), /*#__PURE__*/_react.default.createElement("div", {
-    ref: containerRef
-  }, /*#__PURE__*/_react.default.createElement(_multiSelect.StyledAccessibilityLabelContainer, {
-    "data-element": "accessibility-label",
-    id: accessibilityLabelId.current
-  }, accessibilityLabel), /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
-    ref: assignInput,
-    accessibilityLabelId: accessibilityLabelId.current,
-    activeDescendantId: activeDescendantId,
-    "aria-controls": selectListId.current,
-    ariaLabel: ariaLabel,
-    ariaLabelledby: ariaLabelledby,
-    hasTextCursor: true,
-    isOpen: isOpen,
-    labelId: labelId
-  }, getTextboxProps()))), selectList);
-});
-var _default = exports.default = MultiSelect;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("invariant");require("../../../style/utils/filter-styled-system-padding-props.js");var r=require("../../../style/utils/filter-styled-system-margin-props.js"),n=require("../../../style/utils/filter-out-styled-system-spacing-props.js"),i=require("../__internal__/select-textbox/select-textbox.component.js"),o=require("../../../__internal__/utils/helpers/guid/index.js"),u=require("../__internal__/utils/with-filter.hoc.js"),a=require("../__internal__/select-list/select-list.component.js"),s=require("./multi-select.style.js"),c=require("../../pill/pill.component.js"),d=require("../__internal__/utils/is-expected-option.js"),f=require("../__internal__/utils/is-expected-value.js"),p=require("../__internal__/utils/is-navigation-key.js"),b=require("../../../__internal__/utils/logger/index.js"),v=require("../../../hooks/__internal__/useStableCallback/useStableCallback.js"),m=require("../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js");function y(e){return e&&e.__esModule?e:{default:e}}var h=y(t),g=y(l);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 _(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 j(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}let C=!1;const S=u.default(a.default);let x=!1;const w=h.default.forwardRef(((l,u)=>{var{"aria-label":a,"aria-labelledby":y,value:O,defaultValue:w,id:k,label:P,name:q,disabled:E,readOnly:M,children:R,onOpen:D,onFilterChange:L,onChange:V,onClick:I,onFocus:T,onBlur:B,onKeyDown:F,openOnFocus:H=!1,noResultsMessage:A,placeholder:z,isLoading:K,onListScrollBottom:W,tableHeader:$,multiColumn:U,tooltipPosition:G,size:J,"data-element":N,"data-role":Q,listPlacement:X="bottom",listMaxHeight:Y,flipEnabled:Z=!0,wrapPillText:ee=!0,enableVirtualScroll:te,virtualScrollOverscan:le,isOptional:re,required:ne,listWidth:ie}=l,oe=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}(l,["aria-label","aria-labelledby","value","defaultValue","id","label","name","disabled","readOnly","children","onOpen","onFilterChange","onChange","onClick","onFocus","onBlur","onKeyDown","openOnFocus","noResultsMessage","placeholder","isLoading","onListScrollBottom","tableHeader","multiColumn","tooltipPosition","size","data-element","data-role","listPlacement","listMaxHeight","flipEnabled","wrapPillText","enableVirtualScroll","virtualScrollOverscan","isOptional","required","listWidth"]);!x&&re&&(x=!0,b.default.deprecate("`isOptional` is deprecated in MultiSelect 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[ue,ae]=t.useState(""),se=t.useRef(o.default()),ce=t.useRef(o.default()),de=t.useRef(null),fe=t.useRef(null),pe=t.useRef(!1),be=t.useRef(!1),ve=t.useRef(!1),me=t.useRef(!1),ye=t.useRef(!1),he=t.useRef(void 0!==O),[ge,Oe]=t.useState(),[_e,je]=t.useState(!1),[Ce,Se]=t.useState(""),[xe,we]=t.useState(O||w||[]),[ke,Pe]=t.useState(""),[qe,Ee]=t.useState(""),[Me,Re]=t.useState(),De=t.useRef(k||o.default()),{labelId:Le}=m.default({id:De.current,label:P}),Ve=t.useRef(null),Ie=he.current?O:xe;!C&&(!he||!V&&w)&&(C=!0,b.default.deprecate("Uncontrolled behaviour in `Multi Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."));const Te=t.useCallback((()=>{je((e=>(!e&&D&&D(),!0)))}),[D]),Be=t.useCallback(((e,t)=>({target:j(_({},q&&{name:q},k&&{id:k}),{value:e}),selectionConfirmed:t})),[q,k]),Fe=t.useCallback(((e,t)=>{const l=e(Ie);l.length!==(null==Ie?void 0:Ie.length)&&(null==V||V(Be(l,t))),he.current||we(e)}),[Be,V,Ie]),He=t.useCallback((e=>{const t=e.target.value,l=(r=t,n=R,h.default.Children.toArray(n).find((e=>{const{text:t}=e.props;return-1!==(null==t?void 0:t.toLowerCase().indexOf(null==r?void 0:r.toLowerCase()))})));var r,n;l&&Pe(l.props.value),Ee(t),Se(t),Te()}),[R,Te]),Ae=t.useCallback((e=>{be.current=!0,Fe((t=>{if(!t.length)return t;const l=t.slice();return l.splice(e,1),l}),!0)}),[Fe]),ze=t.useCallback((e=>{const{key:t}=e,l="Backspace"===t||"Delete"===t;F&&F(e),M||(!e.defaultPrevented&&p.default(t)&&(e.preventDefault(),Te()),!l||""!==qe&&""!==Ce||Ae(-1))}),[F,M,qe,Ce,Te,Ae]),Ke=t.useMemo((()=>{var e;return Ie&&Ie.length?null===(e=h.default.Children.map(R,(e=>!(!h.default.isValidElement(e)||!Ie.includes(e.props.value))&&e.props.text)))||void 0===e?void 0:e.filter((e=>e)).reduce(((e,t)=>e?`${e}, ${t}`:t),""):null}),[R,Ie]),We=t.useCallback((e=>{if(ve.current=!1,!_e)return;const t=de.current&&!de.current.contains(e.target),l=fe.current&&!fe.current.contains(e.target);t&&l&&!be.current&&(Se(""),Ee(""),Pe(""),je(!1)),be.current=!1}),[_e]),$e=t.useMemo((()=>{const t=!E&&!M;let l;return(null==Ie?void 0:Ie.length)?Ie.map(((r,n)=>{const i=h.default.Children.toArray(R).find((e=>h.default.isValidElement(e)&&d.default(e,r)));let o={};if(!i)return null;var u,a;h.default.isValidElement(i)&&(l=void 0!==(null==i||null===(u=i.props.value)||void 0===u?void 0:u.value)?null==i||null===(a=i.props.value)||void 0===a?void 0:a.value:null==i?void 0:i.props.value,o={title:i.props.text,fill:i.props.fill,borderColor:i.props.borderColor});const f=o.title||"",p=f+l||n;return e.jsx(s.StyledSelectPillContainer,{children:e.jsx(c.Pill,j(_({onDelete:t?()=>Ae(n):void 0,wrapText:ee},o),{children:f}))},p)})):""}),[R,E,M,Ie]);t.useEffect((()=>{g.default(he.current===(void 0!==O),"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"),g.default(!he.current||he.current&&V,"onChange prop required when using a controlled input element")}),[O,V]),t.useEffect((()=>{const e=null==O?void 0:O.length,t=null==Ie?void 0:Ie.length;Re(e||t?" ":z)}),[O,Ie,z]),t.useEffect((()=>{const e="click";return window.addEventListener(e,We),function(){window.removeEventListener(e,We)}}),[We]);const Ue=v.useStableCallback(L),Ge=t.useRef(!0);function Je(e){ve.current=!0,"input"===e.target.dataset.element&&(me.current=!0)}t.useEffect((()=>{Ue&&!Ge.current&&Ue(qe)}),[Ue,qe]),t.useEffect((()=>{Ge.current=!1}),[]);const Ne=t.useCallback((e=>{const{value:t,selectionType:l,id:r,selectionConfirmed:n}=e;if("navigationKey"===l)return Pe(t),void ae(r);"click"===l&&(be.current=!0),Se("");const i=-1!==(null==Ie?void 0:Ie.findIndex((e=>f.default(e,t))));null==ge||ge.focus(),ve.current=!1,Fe((e=>i?e:[...e,t]),n)}),[ge,Ie,Fe]),Qe=t.useCallback((()=>{je(!1),Ee("")}),[]),Xe=t.useCallback((e=>{e&&(Oe(e),u&&("function"==typeof u?u(e):u.current=e))}),[u]);let Ye;switch(X){case"top":Ye="top-end";break;case"bottom":Ye="bottom-end";break;default:Ye=X}const Ze=e.jsx(S,{ref:fe,id:se.current,labelId:Le,anchorElement:(null==ge?void 0:ge.parentElement)||void 0,onSelect:Ne,onSelectListClose:Qe,onMouseDown:function(){ve.current=!0},filterText:qe.trim(),highlightedValue:ke,noResultsMessage:A,isLoading:K,onListScrollBottom:W,tableHeader:$,multiColumn:U,listPlacement:void 0!==ie?Ye:X,listMaxHeight:Y,flipEnabled:Z,multiselectValues:Ie,isOpen:_e,enableVirtualScroll:te,virtualScrollOverscan:le,listWidth:ie,children:R}),et=r.default(oe);return e.jsxs(s.StyledSelectMultiSelect,j(_({disabled:E,readOnly:M,hasTextCursor:!0,size:J,"data-component":"multiselect","data-role":Q,"data-element":N,isOpen:_e},et),{children:[e.jsxs("div",{ref:de,children:[e.jsx(s.StyledAccessibilityLabelContainer,{"data-element":"accessibility-label",id:ce.current,children:Ke}),e.jsx(i.default,_({ref:Xe,accessibilityLabelId:ce.current,activeDescendantId:ue,"aria-controls":se.current,ariaLabel:a,ariaLabelledby:y,hasTextCursor:!0,isOpen:_e,labelId:Le},j(_({id:De.current,name:q,disabled:E,label:P,readOnly:M,placeholder:Me,leftChildren:$e,formattedValue:Ce,selectedValue:Ie,onClick:function(e){if(ve.current=!1,I&&I(e),!H||H&&!ye.current){if(_e)return Ee(""),void je(!1);null==D||D(),je(!0)}else ye.current=!1},onMouseDown:Je,onFocus:function(e){const t=()=>null==T?void 0:T(e);H?(Ve.current&&clearTimeout(Ve.current),Ve.current=setTimeout((()=>{je((e=>!!e||(D&&D(),T&&!pe.current&&(t(),pe.current=!0),ve.current&&!me.current?(ye.current=!1,!1):(me.current&&(ye.current=!0),!0))))}))):T&&!pe.current&&(t(),pe.current=!0)},onBlur:function(e){me.current=!1,ve.current||(pe.current=!1,B&&B(e))},iconOnClick:function(e){ve.current=!1,I&&I(e),je((e=>e?(Ee(""),!1):(D&&D(),!0)))},iconOnMouseDown:Je,onKeyDown:ze,onChange:He,tooltipPosition:G,size:J,required:ne,isOptional:re},n.default(oe)),{"data-component":void 0})))]}),Ze]}))}));exports.MultiSelect=w,exports.default=w;

package/lib/components/select/multi-select/multi-select.style.js

@@ -1,54 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledSelectPillContainer = exports.StyledSelectMultiSelect = exports.StyledAccessibilityLabelContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _pill = _interopRequireDefault(require("../../pill/pill.style"));
-var _themes = require("../../../style/themes");
-var _inputIconToggle = _interopRequireDefault(require("../../../__internal__/input-icon-toggle/input-icon-toggle.style"));
-var _select = _interopRequireDefault(require("../select.style"));
-var _inputPresentation = _interopRequireDefault(require("../../../__internal__/input/input-presentation.style"));
-var _input = _interopRequireDefault(require("../../../__internal__/input/input.style"));
-var _inputSizes = _interopRequireDefault(require("../../../__internal__/input/input-sizes.style"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const StyledSelectPillContainer = exports.StyledSelectPillContainer = _styledComponents.default.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin: 3px 2px 3px 0;
-  max-width: 100%;
-
-  && ${_pill.default} {
-    text-overflow: ellipsis;
-  }
-`;
-const StyledSelectMultiSelect = exports.StyledSelectMultiSelect = (0, _styledComponents.default)(_select.default)`
-  ${_inputIconToggle.default} {
-    position: absolute;
-    right: 0;
-    height: 100%;
-  }
-
-  ${_inputPresentation.default} {
-    // size has a default value of "medium" defined in StyledSelect, but TS can't see this
-    padding-right: ${({
-  size
-}) => _inputSizes.default[size].height};
-    padding-left: ${({
-  size
-}) => _inputSizes.default[size].horizontalPadding};
-    position: relative;
-
-    ${_input.default} {
-      padding: 0;
-    }
-  }
-`;
-const StyledAccessibilityLabelContainer = exports.StyledAccessibilityLabelContainer = _styledComponents.default.div`
-  display: none;
-`;
-StyledSelectPillContainer.defaultProps = {
-  theme: _themes.baseTheme
-};
+"use strict";var e=require("styled-components"),t=require("../../pill/pill.style.js");require("../../../style/themes/sage/index.js");var i=require("../../../style/themes/base/index.js");require("../../../style/themes/none/index.js");var l=require("../../../__internal__/input-icon-toggle/input-icon-toggle.style.js"),n=require("../select.style.js"),s=require("../../../__internal__/input/input-presentation.style.js"),r=require("../../../__internal__/input/input.style.js"),a=require("../../../__internal__/input/input-sizes.style.js");function d(e){return e&&e.__esModule?e:{default:e}}var u=d(e);const o=u.default.div.withConfig({displayName:"multi-select.style__StyledSelectPillContainer",componentId:"sc-7d00107-0"})(["display:flex;flex-direction:column;justify-content:center;margin:3px 2px 3px 0;max-width:100%;&& ","{text-overflow:ellipsis;}"],t.default),p=u.default(n.default).withConfig({displayName:"multi-select.style__StyledSelectMultiSelect",componentId:"sc-7d00107-1"})(["","{position:absolute;right:0;height:100%;}","{padding-right:",";padding-left:",";position:relative;","{padding:0;}}"],l.default,s.default,(({size:e})=>a.default[e].height),(({size:e})=>a.default[e].horizontalPadding),r.default),c=u.default.div.withConfig({displayName:"multi-select.style__StyledAccessibilityLabelContainer",componentId:"sc-7d00107-2"})(["display:none;"]);o.defaultProps={theme:i.default},exports.StyledAccessibilityLabelContainer=c,exports.StyledSelectMultiSelect=p,exports.StyledSelectPillContainer=o;

package/lib/components/select/multi-select/package.json

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