@ntbjs/react-components 2.0.2-rc.11 → 2.0.2-rc.12

package/build/inputs/MultiSelect/MultiSelect.js

@@ -1,240 +1,241 @@
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState, useRef, useEffect, useMemo } from 'react';
+import React__default, { useState, useEffect, useMemo } from 'react';
+import { useTheme } from 'styled-components';
 import PropTypes from 'prop-types';
 import { nanoid } from 'nanoid';
 import { components } from 'react-select';
-import { MultiSelectWrapper, Label, InnerWrapper, AsyncCreatableMultiSelect, AsyncMultiSelect, CreatableMultiSelect, MultiSelect as MultiSelect$1, ShowMoreWrapper, ShowMoreOverlay, ShowMoreText, ErrorMessage, MultiValue, InputWrapper, DropdownMenu, SelectedOption, DropdownOptionDeleteIcon, Option } from './MultiSelect.styled.js';
-import { ReactComponent as SvgClose } from '../../icons/close.svg.js';
+import { AsyncCreatableMultiSelect, AsyncMultiSelect, CreatableMultiSelect, MultiSelect as MultiSelect$1, MultiSelectWrapper, Label, InnerWrapper, ShowMoreWrapper, ShowMoreOverlay, ShowMoreText, ErrorMessage, DropdownOptionDeleteIcon, MultiValueWrapper } from './MultiSelect.styled.js';
 
-const reactSelectTheme = theme => ({
-  ...theme,
-  spacing: {
-    baseUnit: 4,
-    controlHeight: 38,
-    menuGutter: 8
-  }
-});
-const MultiSelect = React__default.forwardRef(function MultiSelect({
-  label,
-  selectedOptions = [],
-  availableOptions,
-  loadOptions,
-  loadingMessageFunc,
-  onUpdateCallback,
-  editText,
-  creatable,
-  readOnly,
-  hidden,
-  disabled,
-  error,
-  warning,
-  onMultiValueClick,
-  showMore,
-  showMoreText = 'Show more',
-  displayTotalOnShowMore = true,
-  noOptionsMessageFunc,
-  ...props
-}, forwardedRef) {
+const showMoreHeight = 114;
+const MultiSelect = React__default.forwardRef((props, forwardedRef) => {
+  const theme = useTheme();
+  const {
+    label,
+    selectedOptions = [],
+    availableOptions,
+    loadOptions,
+    onUpdateCallback,
+    editText,
+    creatable,
+    readOnly,
+    disabled,
+    error,
+    warning,
+    onMultiValueClick,
+    showMore,
+    showMoreText = 'Show more',
+    displayTotalOnShowMore = true,
+    hidden,
+    ...rest
+  } = props;
   const [uniqueId] = useState(nanoid());
   const [selected, setSelected] = useState(selectedOptions);
-  const [focused, setFocused] = useState(false);
-  const [displayShowMore, setDisplayShowMore] = useState(error || warning ? false : showMore);
   const [cacheUnique, setCacheUnique] = useState(0);
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const wrapperRef = useRef(null);
-  const selectRef = useRef(null);
-  useEffect(() => {
-    setSelected(selectedOptions);
-  }, [selectedOptions]);
+  const [displayShowMore, setDisplayShowMore] = useState(showMore && !error && !warning);
+  const [focused, setFocused] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(() => document.body.classList.contains('dark-theme'));
+  useEffect(() => setSelected(selectedOptions), [selectedOptions]);
   useEffect(() => {
-    function handleClickOutside(event) {
-      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
-        setIsMenuOpen(false);
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
+    const observer = new MutationObserver(() => {
+      setIsDarkMode(document.body.classList.contains('dark-theme'));
+    });
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['class']
+    });
+    return () => observer.disconnect();
   }, []);
-  const handleWrapperClick = event => {
-    if (readOnly || disabled) return;
-    const isRemoveButton = event.target.closest('.multi-select__multi-value__remove') || event.target.closest('[role="button"]') || event.target instanceof SVGElement || event.target.closest('svg');
-    if (!isRemoveButton && !isMenuOpen) {
-      if (selectRef.current) {
-        selectRef.current.focus();
-      }
-      setIsMenuOpen(true);
-    }
-  };
-  const getNoOptionsMessage = inputValue => {
-    if (typeof noOptionsMessageFunc === 'function') {
-      return noOptionsMessageFunc(inputValue);
-    }
-    return inputValue ? `No matches for "${inputValue}"` : 'No available options';
-  };
-  const innerComponents = {
-    DropdownIndicator: null,
-    MultiValue: ({
-      data,
-      ...props
-    }) => {
-      return React__default.createElement("div", {
-        className: "multi-value-wrapper",
-        onMouseDown: e => {
-          if (onMultiValueClick && data && !(e.target.role === 'button' || e.target instanceof SVGElement)) {
-            e.stopPropagation();
-            onMultiValueClick(data);
-          }
+  const selectStyles = useMemo(() => {
+    const color = key => theme?.getColor?.(key) || '#888';
+    const getThemeColor = (darkKey, lightKey) => {
+      const prefersDark = !document.body.classList.contains('light-theme') && !document.body.classList.contains('dark-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches;
+      return isDarkMode || prefersDark ? color(darkKey) : color(lightKey);
+    };
+    const errorColor = color('red-500');
+    const warningColor = color('orange-500');
+    const menuBg = getThemeColor('gray-600', 'white');
+    const textColor = getThemeColor('gray-100', 'gray-900');
+    const placeholderColor = getThemeColor('gray-400', 'gray-500');
+    const multiValueBg = getThemeColor('gray-600', 'gray-800');
+    console.log('Theme in selectStyles:', {
+      menuBg,
+      textColor,
+      placeholderColor,
+      multiValueBg,
+      isDarkMode
+    });
+    return {
+      control: base => ({
+        ...base,
+        alignItems: 'center',
+        background: 'transparent',
+        border: error ? `1px solid ${errorColor}` : warning ? `1px solid ${warningColor}` : 'none',
+        borderRadius: '3px',
+        boxShadow: 'none',
+        minHeight: '38px',
+        cursor: disabled || readOnly ? 'default' : 'pointer',
+        '&:hover': {
+          border: error ? `1px solid ${errorColor}` : warning ? `1px solid ${warningColor}` : 'none'
         }
-      }, React__default.createElement(MultiValue, _extends({
-        data: data,
-        $isDisabled: disabled,
-        $isReadOnly: readOnly
-      }, props)));
-    },
-    MultiValueRemove: props => {
-      if (readOnly || disabled) return null;
-      return React__default.createElement(components.MultiValueRemove, props, React__default.createElement(SvgClose, null));
-    },
-    Input: inputProps => React__default.createElement(InputWrapper, {
-      $focused: focused,
-      $editText: !readOnly && !disabled ? editText : '',
-      $isDisabled: readOnly || disabled,
-      $isMenuOpen: isMenuOpen
-    }, React__default.createElement(components.Input, inputProps)),
-    Menu: menuProps => React__default.createElement(DropdownMenu, menuProps),
-    Option: optProps => optProps.isSelected ? React__default.createElement(SelectedOption, optProps, React__default.createElement("span", null, optProps.label), React__default.createElement(DropdownOptionDeleteIcon, null)) : React__default.createElement(Option, optProps)
-  };
-  const selectStyles = useMemo(() => ({
-    control: base => ({
-      ...base,
-      alignItems: 'flex-start',
-      background: 'transparent',
-      border: 'none',
-      boxShadow: 'none',
-      minHeight: 'unset',
-      cursor: readOnly || disabled ? 'default' : 'pointer'
-    }),
-    valueContainer: base => ({
-      ...base,
-      padding: 0,
-      gap: '8px',
-      maxHeight: displayShowMore && !(error || warning) ? '130px' : '100%',
-      cursor: readOnly || disabled ? 'default' : 'pointer'
-    }),
-    input: base => ({
-      ...base,
-      cursor: readOnly || disabled ? 'default' : 'pointer'
-    }),
-    menu: base => ({
-      ...base,
-      backgroundColor: 'transparent',
-      boxShadow: 'none'
-    }),
-    menuList: base => ({
-      ...base,
-      backgroundColor: 'transparent'
-    }),
-    option: base => ({
-      ...base,
-      backgroundColor: 'transparent',
-      color: 'inherit'
-    }),
-    multiValue: base => ({
-      ...base,
-      margin: 0,
-      border: 'none',
-      background: 'none',
-      cursor: readOnly || disabled ? 'default' : 'pointer'
-    }),
-    multiValueLabel: base => ({
-      ...base,
-      padding: 0,
-      cursor: readOnly || disabled ? 'default' : 'pointer'
-    }),
-    multiValueRemove: base => ({
-      ...base,
-      padding: 0,
-      cursor: readOnly || disabled ? 'default' : 'pointer'
-    })
-  }), [error, warning, displayShowMore, readOnly, disabled]);
-  const sharedProps = {
-    ...props,
-    ref: node => {
-      selectRef.current = node;
-      if (forwardedRef) {
-        if (typeof forwardedRef === 'function') {
-          forwardedRef(node);
-        } else {
-          forwardedRef.current = node;
+      }),
+      valueContainer: base => ({
+        ...base,
+        alignItems: 'center',
+        gap: '8px',
+        padding: '0 8px',
+        maxHeight: displayShowMore ? error || warning ? '100%' : `${showMoreHeight + 16}px` : '100%',
+        overflow: 'hidden'
+      }),
+      multiValue: base => ({
+        ...base,
+        backgroundColor: multiValueBg,
+        borderRadius: '3px',
+        margin: '0',
+        display: 'flex',
+        alignItems: 'stretch',
+        minHeight: '26px',
+        overflow: 'hidden'
+      }),
+      multiValueLabel: base => ({
+        ...base,
+        color: color('white'),
+        fontSize: '12px',
+        padding: disabled || readOnly ? '0 8px' : '0 3px 0 8px',
+        display: 'flex',
+        alignItems: 'center'
+      }),
+      multiValueRemove: base => ({
+        ...base,
+        color: 'white',
+        padding: '0 8px 0 5px',
+        display: disabled || readOnly ? 'none' : 'flex',
+        alignItems: 'center',
+        alignSelf: 'stretch',
+        borderRadius: '0',
+        cursor: 'pointer',
+        '&:hover': {
+          backgroundColor: errorColor,
+          color: 'white'
         }
+      }),
+      menu: base => ({
+        ...base,
+        backgroundColor: menuBg,
+        boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
+        zIndex: 999,
+        marginTop: '4px',
+        border: `1px solid ${getThemeColor('gray-500', 'gray-300')}`
+      }),
+      menuList: base => ({
+        ...base,
+        backgroundColor: 'transparent',
+        padding: 0
+      }),
+      option: (base, state) => ({
+        ...base,
+        backgroundColor: state.isFocused ? getThemeColor('gray-500', 'gray-100') : 'transparent',
+        color: textColor,
+        cursor: 'pointer',
+        fontSize: '14px',
+        padding: '8px 12px',
+        ':active': {
+          backgroundColor: getThemeColor('gray-400', 'gray-200')
+        }
+      }),
+      input: (base, state) => ({
+        ...base,
+        display: 'inline-grid',
+        whiteSpace: 'nowrap',
+        color: textColor,
+        margin: 0,
+        padding: 0,
+        ':before': !focused && editText && !state.value ? {
+          content: `"${editText}"`,
+          color: placeholderColor,
+          marginRight: '8px',
+          lineHeight: '26px',
+          gridArea: '1 / 1'
+        } : {}
+      }),
+      noOptionsMessage: base => ({
+        ...base,
+        color: textColor,
+        backgroundColor: 'transparent'
+      }),
+      loadingMessage: base => ({
+        ...base,
+        color: textColor,
+        backgroundColor: 'transparent'
+      }),
+      placeholder: () => ({
+        display: 'none'
+      }),
+      indicatorsContainer: () => ({
+        display: 'none'
+      })
+    };
+  }, [theme, error, warning, displayShowMore, disabled, readOnly, editText, focused, isDarkMode]);
+  const innerComponents = {
+    Option: optProps => React__default.createElement(components.Option, optProps, React__default.createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: '100%',
+        alignItems: 'center'
       }
-    },
+    }, React__default.createElement("span", null, optProps.label), optProps.isSelected && React__default.createElement(DropdownOptionDeleteIcon, null))),
+    MultiValue: mvProps => React__default.createElement(MultiValueWrapper, {
+      onMouseDown: e => {
+        if (onMultiValueClick && !readOnly && !disabled && !e.target.closest('.multi-select__multi-value__remove')) {
+          e.stopPropagation();
+          onMultiValueClick(mvProps.data);
+        }
+      }
+    }, React__default.createElement(components.MultiValue, mvProps))
+  };
+  const sharedSelectProps = {
+    ...rest,
+    ref: forwardedRef,
+    id: uniqueId,
     classNamePrefix: 'multi-select',
+    styles: selectStyles,
+    components: innerComponents,
     value: selected,
     options: loadOptions ? undefined : availableOptions,
     loadOptions,
-    loadingMessage: loadingMessageFunc,
-    theme: reactSelectTheme,
-    styles: selectStyles,
-    components: innerComponents,
     isMulti: true,
-    isClearable: false,
-    placeholder: null,
-    isDisabled: disabled,
-    readOnly: readOnly,
+    isDisabled: disabled || readOnly,
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     openMenuOnClick: true,
-    openMenuOnFocus: true,
-    blurInputOnSelect: false,
-    menuIsOpen: isMenuOpen ? true : undefined,
-    cacheUniqs: loadOptions ? [cacheUnique] : undefined,
-    onMenuOpen: () => {
-      setIsMenuOpen(true);
-    },
-    onMenuClose: () => {
-      setIsMenuOpen(false);
-    },
     onFocus: () => setFocused(true),
     onBlur: () => setFocused(false),
-    noOptionsMessage: ({
-      inputValue
-    }) => getNoOptionsMessage(inputValue),
-    onChange: (selectedOptions, actionMeta) => {
-      if (props.onChange) {
-        props.onChange(selectedOptions, actionMeta);
-      }
+    onChange: (newValue, actionMeta) => {
+      setSelected(newValue);
       if (onUpdateCallback) {
-        const updatedItem = actionMeta.option || actionMeta.removedValue;
-        onUpdateCallback(actionMeta.action, updatedItem);
+        const item = actionMeta.option || actionMeta.removedValue;
+        onUpdateCallback(actionMeta.action, item);
       }
-      setSelected(selectedOptions);
       if (actionMeta.action === 'create-option' && loadOptions) {
-        setCacheUnique(cacheUnique + 1);
+        setCacheUnique(c => c + 1);
       }
-    }
+    },
+    cacheUniqs: loadOptions ? [cacheUnique] : undefined
   };
+  const SelectComponent = useMemo(() => {
+    if (loadOptions) return creatable ? AsyncCreatableMultiSelect : AsyncMultiSelect;
+    return creatable ? CreatableMultiSelect : MultiSelect$1;
+  }, [loadOptions, creatable]);
   if (hidden) return null;
-  return React__default.createElement(MultiSelectWrapper, {
-    ref: wrapperRef,
-    onClick: handleWrapperClick
-  }, label && React__default.createElement(Label, {
+  return React__default.createElement(MultiSelectWrapper, null, label && React__default.createElement(Label, {
     htmlFor: uniqueId
-  }, label), React__default.createElement(InnerWrapper, {
-    $error: error,
-    $warning: warning
-  }, loadOptions ? creatable ? React__default.createElement(AsyncCreatableMultiSelect, sharedProps) : React__default.createElement(AsyncMultiSelect, sharedProps) : creatable ? React__default.createElement(CreatableMultiSelect, sharedProps) : React__default.createElement(MultiSelect$1, sharedProps)), displayShowMore && !(error || warning) && React__default.createElement(ShowMoreWrapper, {
-    onClick: e => {
-      e.stopPropagation();
-      setDisplayShowMore(false);
-    }
-  }, React__default.createElement(ShowMoreOverlay, null), React__default.createElement(ShowMoreText, null, showMoreText, " ", displayTotalOnShowMore && `(${selected.length})`)), (typeof error === 'string' || typeof warning === 'string') && React__default.createElement(ErrorMessage, {
-    $error: error,
-    $warning: warning
-  }, error ? error : warning));
+  }, label), React__default.createElement(InnerWrapper, null, React__default.createElement(SelectComponent, sharedSelectProps)), displayShowMore && React__default.createElement(ShowMoreWrapper, {
+    onClick: () => setDisplayShowMore(false)
+  }, React__default.createElement(ShowMoreOverlay, null), React__default.createElement(ShowMoreText, null, showMoreText, " ", displayTotalOnShowMore && `(${selected.length})`)), (error || warning) && React__default.createElement(ErrorMessage, {
+    $error: !!error,
+    $warning: !!warning
+  }, error || warning));
 });
+MultiSelect.displayName = 'MultiSelect';
 MultiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   label: PropTypes.string,
   availableOptions: PropTypes.arrayOf(PropTypes.object),
@@ -254,8 +255,7 @@ MultiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   hidden: PropTypes.bool,
   disabled: PropTypes.bool,
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  onChange: PropTypes.func
+  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
 } : {};
 MultiSelect.defaultProps = {
   noOptionsMessageFunc: inputValue => {

package/build/inputs/MultiSelect/MultiSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.js","sources":["../../../src/components/inputs/MultiSelect/MultiSelect.js"],"sourcesContent":["import React, { useState, useMemo, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { nanoid } from 'nanoid';\nimport { components } from 'react-select';\nimport * as S from './MultiSelect.styled';\nimport { ReactComponent as CloseIcon } from '../../../icons/close.svg';\n\n/**\n * Multi-select with autocomplete and support for asynchronous fetching/filtering of\n * available options with pagination, update handling with callback,\n * and the ability for the end-user to create new options.\n *\n * The component uses [react-select](https://react-select.com/) for the main select functionality,\n * with [react-select-async-paginate](https://www.npmjs.com/package/react-select-async-paginate) for pagination.\n *\n *\n * <br />### Import\n *\n * ``` js\n * import { MultiSelect } from '@ntbjs/react-components/inputs'\n * // or\n * import MultiSelect from '@ntbjs/react-components/inputs/MultiSelect'\n * ```\n *\n * <br />## Option `object` format\n * Options are represented by an `Array` of `objects` with the following format:\n *\n * ``` js\n * {\n *   value: \"Example\",\n *   label: \"Example\"\n * }\n * ```\n *\n * The `label` is what will visible to the end-user. Whether `value` and `label`\n * should be different will depend on your use-case, but they are not required to.\n *\n *\n * <br />## Update handling\n * Changes from the end-user to the selected/available options can be handled with a callback function\n * passed through the `onUpdateCallback` prop, which is triggered any time the selected values change.\n *\n * The callback function will be passed two arguments:\n * * `action: string`\n * * `updatedOption: object`\n *\n * <br />#### `action`\n * A `string` indicating what kind of update was made.\n *\n * The possible values of `action` are:\n * * `create-option`: an option that didn't exist in the original list of available options were added\n * * `select-option`: an option was selected\n * * `deselect-option`: an option was de-selected by clicking the X in the dropdown menu\n * * `remove-value`: an option was de-selected by clicking the X on the option label/box\n * * `pop-value`: an option was de-selected with backspace\n * * `clear`: all options were de-selected by clicking the clear indicator (not currently in use)\n *\n * <br />#### `updatedOption`\n * Option `object`of the updated option:\n *\n * In addition to the default `value` and `label` keys, an `__isNew__` flag will be present if the option was\n * not part of the original list of available options, i.e. created by the user in the current \"session\".\n * This is the case regardless of whether the list is provided through `availableOptions` or\n * asynchronously through `loadOptions`.\n *\n *\n * <br />## Asynchronous fetching/filtering with pagination\n * The list of available options can be fetched and filtered asynchronously with a `Promise`\n * passed through the `loadOptions` prop.\n *\n * It will be passed two arguments:\n *\n * * `inputValue: string`: current input value/search\n * * `prevOptions: Array`: previously loaded options for the current search\n *\n * The function is triggered and the first page is fetched when the dropdown menu opens.\n * Whenever the user scrolls down to the bottom of the list, `loadOptions` will\n * be triggered again to fetch the next page.\n *\n * The `Promise` should return an `object` with the following keys:\n *\n * ``` js\n * {\n *   options: Array,\n *   hasMore: boolean\n * }\n * ```\n *\n * `options` should contain the current page of options. It will be concatenated to the previous\n * set of options automatically. The `hasMore` flag indicates whether there is another page to be fetched.\n *\n * **Example:**\n *\n * ``` js\n *\n * const availableOptions = [\n *   { value: \"Example 1\", label: \"Example 1\" },\n *   ...\n *   { value: \"Example N\", label: \"Example N\" }\n * ];\n *\n * const filterOptions = inputValue => {\n *   return availableOptions.filter(option => {\n *     return option.label.toLowerCase().includes(inputValue.toLowerCase());\n *   });\n * };\n *\n * const loadOptionsFunc = (inputValue, prevOptions) => {\n *   const currentLength = prevOptions.length;\n *   const pageLength = 10;\n *\n *   let filteredOptions;\n *\n *   if (inputValue) {\n *     filteredOptions = filterOptions(inputValue);\n *   } else {\n *     filteredOptions = availableOptions;\n *   }\n *\n *   const hasMore = filteredOptions.length > currentLength + pageLength;\n *   const slicedOptions = filteredOptions.slice(currentLength, currentLength + pageLength);\n *\n *   return {\n *     options: slicedOptions,\n *     hasMore\n *    };\n * };\n *\n * const loadOptions = (inputValue, prevOptions) => {\n *   return new Promise(resolve => {\n *     resolve(loadOptionsFunc(inputValue, prevOptions));\n *   });\n * };\n * ```\n *\n * While waiting for the `Promise` to resolve, the component will be in a loading state.\n * The loading state is showcased in the \"Primary With Fetching Timeout\" Story.\n *\n * <br />#### Without asynchronous fetching/filtering\n * If you wish to not use asynchronous fetching/filtering, leave the `loadOptions` prop undefined\n * and pass the `Array` of all available options to the `availableOptions` prop instead.\n * The component will use the built-in filtering on `label` from `react-select`, and the options\n * will not be paginated.\n *\n *\n * <br />## \"Show more\" overlay\n * The \"Show more\" overlay must be set manually with the `showMore` prop.\n *\n * By default, the total number\n * of selected options will be displayed in parenthesis after the \"Show more\" text. This can be\n * disabled with the `displayTotalOnShowMore` prop.\n *\n * **Note:**\n * <br />The component has been given a max-width in these Stories.\n * This is because the \"Show more\" overlay does not work well visually when there are\n * fewer than three rows of selected options. The component itself does not have\n * a max-width, so keep this in mind when using it.\n *\n * <br />\n */\n\nconst reactSelectTheme = theme => ({\n  ...theme,\n  spacing: {\n    baseUnit: 4,\n    controlHeight: 38,\n    menuGutter: 8\n  }\n});\n\nconst MultiSelect = React.forwardRef(function MultiSelect(\n  {\n    label,\n    selectedOptions = [],\n    availableOptions,\n    loadOptions,\n    loadingMessageFunc,\n    onUpdateCallback,\n    editText,\n    creatable,\n    readOnly,\n    hidden,\n    disabled,\n    error,\n    warning,\n    onMultiValueClick,\n    showMore,\n    showMoreText = 'Show more',\n    displayTotalOnShowMore = true,\n    noOptionsMessageFunc,\n    ...props\n  },\n  forwardedRef\n) {\n  const [uniqueId] = useState(nanoid());\n  const [selected, setSelected] = useState(selectedOptions);\n  const [focused, setFocused] = useState(false);\n  const [displayShowMore, setDisplayShowMore] = useState(error || warning ? false : showMore);\n  const [cacheUnique, setCacheUnique] = useState(0);\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n  const wrapperRef = useRef(null);\n  const selectRef = useRef(null);\n\n  useEffect(() => {\n    setSelected(selectedOptions);\n  }, [selectedOptions]);\n\n  // Handle clicks outside the component to close the menu\n  useEffect(() => {\n    function handleClickOutside(event) {\n      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {\n        setIsMenuOpen(false);\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, []);\n\n  // Handle clicks inside the wrapper to open the menu\n  const handleWrapperClick = event => {\n    if (readOnly || disabled) return;\n\n    // Check if clicking on a remove button\n    const isRemoveButton =\n      event.target.closest('.multi-select__multi-value__remove') ||\n      event.target.closest('[role=\"button\"]') ||\n      event.target instanceof SVGElement ||\n      event.target.closest('svg');\n\n    if (!isRemoveButton && !isMenuOpen) {\n      // Open the menu by focusing the select\n      if (selectRef.current) {\n        selectRef.current.focus();\n      }\n      setIsMenuOpen(true);\n    }\n  };\n\n  const getNoOptionsMessage = inputValue => {\n    if (typeof noOptionsMessageFunc === 'function') {\n      return noOptionsMessageFunc(inputValue);\n    }\n    return inputValue ? `No matches for \"${inputValue}\"` : 'No available options';\n  };\n\n  /**\n   * Inner components to replace the default components of 'react-select'.\n   * This is to add classnames, custom styling and functionality.\n   */\n  const innerComponents = {\n    DropdownIndicator: null,\n    /* eslint-disable react/prop-types */\n    MultiValue: ({ data, ...props }) => {\n      return (\n        <div\n          className=\"multi-value-wrapper\"\n          onMouseDown={e => {\n            if (\n              onMultiValueClick &&\n              data &&\n              !(e.target.role === 'button' || e.target instanceof SVGElement)\n            ) {\n              e.stopPropagation();\n              onMultiValueClick(data);\n            }\n          }}\n        >\n          <S.MultiValue data={data} $isDisabled={disabled} $isReadOnly={readOnly} {...props} />\n        </div>\n      );\n    },\n    /* eslint-enable react/prop-types */\n    MultiValueRemove: props => {\n      if (readOnly || disabled) return null;\n      return (\n        <components.MultiValueRemove {...props}>\n          <CloseIcon />\n        </components.MultiValueRemove>\n      );\n    },\n    Input: inputProps => (\n      <S.InputWrapper\n        $focused={focused}\n        $editText={!readOnly && !disabled ? editText : ''}\n        $isDisabled={readOnly || disabled}\n        $isMenuOpen={isMenuOpen}\n      >\n        <components.Input {...inputProps} />\n      </S.InputWrapper>\n    ),\n    Menu: menuProps => <S.DropdownMenu {...menuProps} />,\n    Option: optProps =>\n      optProps.isSelected ? (\n        <S.SelectedOption {...optProps}>\n          <span>{optProps.label}</span>\n          <S.DropdownOptionDeleteIcon />\n        </S.SelectedOption>\n      ) : (\n        <S.Option {...optProps} />\n      )\n  };\n\n  /**\n   * Custom styles for react-select components\n   */\n  const selectStyles = useMemo(\n    () => ({\n      control: base => ({\n        ...base,\n        alignItems: 'flex-start',\n        background: 'transparent',\n        border: 'none',\n        boxShadow: 'none',\n        minHeight: 'unset',\n        cursor: readOnly || disabled ? 'default' : 'pointer'\n      }),\n      valueContainer: base => ({\n        ...base,\n        padding: 0,\n        gap: '8px',\n        maxHeight: displayShowMore && !(error || warning) ? '130px' : '100%',\n        cursor: readOnly || disabled ? 'default' : 'pointer'\n      }),\n      input: base => ({\n        ...base,\n        cursor: readOnly || disabled ? 'default' : 'pointer'\n      }),\n      menu: base => ({\n        ...base,\n        backgroundColor: 'transparent',\n        boxShadow: 'none'\n      }),\n      menuList: base => ({\n        ...base,\n        backgroundColor: 'transparent'\n      }),\n      option: base => ({\n        ...base,\n        backgroundColor: 'transparent',\n        color: 'inherit'\n      }),\n      multiValue: base => ({\n        ...base,\n        margin: 0,\n        border: 'none',\n        background: 'none',\n        cursor: readOnly || disabled ? 'default' : 'pointer'\n      }),\n      multiValueLabel: base => ({\n        ...base,\n        padding: 0,\n        cursor: readOnly || disabled ? 'default' : 'pointer'\n      }),\n      multiValueRemove: base => ({\n        ...base,\n        padding: 0,\n        cursor: readOnly || disabled ? 'default' : 'pointer'\n      })\n    }),\n    [error, warning, displayShowMore, readOnly, disabled]\n  );\n\n  /**\n   * Props from 'react-select'/'react-select-async-paginate' shared by the different Select versions\n   */\n  const sharedProps = {\n    ...props,\n    ref: node => {\n      selectRef.current = node;\n      if (forwardedRef) {\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(node);\n        } else {\n          forwardedRef.current = node;\n        }\n      }\n    },\n    classNamePrefix: 'multi-select',\n    value: selected,\n    options: loadOptions ? undefined : availableOptions,\n    loadOptions,\n    loadingMessage: loadingMessageFunc,\n    theme: reactSelectTheme,\n    styles: selectStyles,\n    components: innerComponents,\n    isMulti: true,\n    isClearable: false,\n    placeholder: null,\n    isDisabled: disabled,\n    readOnly: readOnly,\n    closeMenuOnSelect: false,\n    hideSelectedOptions: false,\n    openMenuOnClick: true,\n    openMenuOnFocus: true,\n    blurInputOnSelect: false,\n    menuIsOpen: isMenuOpen ? true : undefined,\n    cacheUniqs: loadOptions ? [cacheUnique] : undefined,\n    onMenuOpen: () => {\n      setIsMenuOpen(true);\n    },\n    onMenuClose: () => {\n      setIsMenuOpen(false);\n    },\n    onFocus: () => setFocused(true),\n    onBlur: () => setFocused(false),\n    noOptionsMessage: ({ inputValue }) => getNoOptionsMessage(inputValue),\n    onChange: (selectedOptions, actionMeta) => {\n      if (props.onChange) {\n        props.onChange(selectedOptions, actionMeta);\n      }\n\n      if (onUpdateCallback) {\n        const updatedItem = actionMeta.option || actionMeta.removedValue;\n        onUpdateCallback(actionMeta.action, updatedItem);\n      }\n\n      setSelected(selectedOptions);\n\n      if (actionMeta.action === 'create-option' && loadOptions) {\n        setCacheUnique(cacheUnique + 1);\n      }\n    }\n  };\n\n  if (hidden) return null;\n\n  return (\n    <S.MultiSelectWrapper ref={wrapperRef} onClick={handleWrapperClick}>\n      {label && <S.Label htmlFor={uniqueId}>{label}</S.Label>}\n      <S.InnerWrapper $error={error} $warning={warning}>\n        {loadOptions ? (\n          creatable ? (\n            <S.AsyncCreatableMultiSelect {...sharedProps} />\n          ) : (\n            <S.AsyncMultiSelect {...sharedProps} />\n          )\n        ) : creatable ? (\n          <S.CreatableMultiSelect {...sharedProps} />\n        ) : (\n          <S.MultiSelect {...sharedProps} />\n        )}\n      </S.InnerWrapper>\n      {displayShowMore && !(error || warning) && (\n        <S.ShowMoreWrapper\n          onClick={e => {\n            e.stopPropagation();\n            setDisplayShowMore(false);\n          }}\n        >\n          <S.ShowMoreOverlay />\n          <S.ShowMoreText>\n            {showMoreText} {displayTotalOnShowMore && `(${selected.length})`}\n          </S.ShowMoreText>\n        </S.ShowMoreWrapper>\n      )}\n      {(typeof error === 'string' || typeof warning === 'string') && (\n        <S.ErrorMessage $error={error} $warning={warning}>\n          {error ? error : warning}\n        </S.ErrorMessage>\n      )}\n    </S.MultiSelectWrapper>\n  );\n});\n\nMultiSelect.propTypes = {\n  /**\n   *\n   * The label of the input field — leave `undefined` to hide the label\n   */\n  label: PropTypes.string,\n  /**\n   * `Array` of `objects` containing the default options. This is only needed\n   * when asynchronous option fetching with the `loadOptions` prop is not used.\n   *\n   * **Note:**\n   * <br />This will be overridden by the `loadOptions` prop if both props are set.\n   */\n  availableOptions: PropTypes.arrayOf(PropTypes.object),\n\n  /**\n   * `Array` of `objects` containing the selected options.\n   */\n  selectedOptions: PropTypes.arrayOf(PropTypes.object),\n\n  /**\n   * Function with a `Promise` returning filtered options.\n   *\n   * See [Asynchronous fetching/filtering with pagination](#asynchronous-fetchingfiltering-with-pagination)\n   * for details.\n   *\n   * **Note:**\n   * <br />This will override the `availableOptions` prop if both props are set.\n   */\n  loadOptions: PropTypes.func,\n\n  /**\n   * Function for custom \"Loading...\" message while waiting for the first page\n   * from `loadOptions` to resolve. Defaults to \"Loading...\" if no function is provided.\n   */\n  loadingMessageFunc: PropTypes.func,\n\n  /**\n   * Callback function for sending updates to the backend whenever the selected values are updated.\n   * See [Update handling](#update-handling) for details.\n   */\n  onUpdateCallback: PropTypes.func,\n\n  /**\n   * Text to be displayed on the input element when the component\n   * is enabled and not focused — e.g. \"Add a keyword...\"\n   */\n  editText: PropTypes.string.isRequired,\n\n  /**\n   * Whether the user can create new options.\n   */\n  creatable: PropTypes.bool,\n\n  /**\n   * Callback function for formatting the message displayed in the dropdown when there\n   * are no matching options, and the user has permission to create new options.\n   * The callback function will be given the current input value as an argument.\n   */\n  createNewOptionMessageFunc: PropTypes.func,\n\n  /**\n   * If the list of options is empty, or if the current input value doesn't match\n   * any of the available options and the user doesn't have permission to add options,\n   * this function will be called and passed the current input value as an argument.\n   */\n  noOptionsMessageFunc: PropTypes.func,\n\n  /**\n   * Optional callback function to be trigger when clicking a selected option's label — e.g. opening\n   * a search filtered on the given multi-value's `label`.\n   *\n   * The callback function will be passed the option `object` as an argument.\n   */\n  onMultiValueClick: PropTypes.func,\n\n  /**\n   * Display an overlay which the user needs to click in order to\n   * show the selected options list in its entirety and edit it.\n   */\n  showMore: PropTypes.bool,\n\n  /**\n   * Text displayed on the \"Show more\" overlay.\n   */\n  showMoreText: PropTypes.string,\n\n  /**\n   * Whether to display the total number of selected options after the show more text.\n   */\n  displayTotalOnShowMore: PropTypes.bool,\n\n  /**\n   * Whether the multi-select should be displayed in read-only mode.\n   * The user can still click the selected options to trigger their on-click effect.\n   */\n  readOnly: PropTypes.bool,\n  /**\n   * Whether the component is hidden or visible.\n   */\n  hidden: PropTypes.bool,\n\n  /**\n   * Whether the multi-select should be disabled.\n   * The user will not be able to trigger the on-click effect of the selected options.\n   */\n  disabled: PropTypes.bool,\n\n  /**\n   * Set to `true` to display a red border indicating an error.\n   * Pass in a `string` instead to also show the string underneath the input field.\n   *\n   * **Note:**\n   * <br />This overrides the \"Show more\" overlay. Errors will be prioritized over warnings.\n   */\n  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n\n  /**\n   * Set to `true` to display an orange border.\n   * Pass in a `string` instead to also show the string underneath the input field.\n   *\n   * **Note:**\n   * <br />This overrides the \"Show more\" overlay. Errors will be prioritized over warnings.\n   */\n  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n\n  /**\n   * Optional onChange handler that receives the selected options and action metadata.\n   */\n  onChange: PropTypes.func\n};\n\nMultiSelect.defaultProps = {\n  noOptionsMessageFunc: inputValue => {\n    if (inputValue) {\n      return `No matches for \"${inputValue}\"`;\n    } else {\n      return 'No available options';\n    }\n  },\n  showMore: false,\n  displayTotalOnShowMore: true,\n  readOnly: false,\n  disabled: false,\n  creatable: false,\n  error: false,\n  warning: false,\n  showMoreText: 'Show more',\n  hidden: false\n};\n\nexport default MultiSelect;\n"],"names":["reactSelectTheme","theme","spacing","baseUnit","controlHeight","menuGutter","MultiSelect","React","forwardRef","label","selectedOptions","availableOptions","loadOptions","loadingMessageFunc","onUpdateCallback","editText","creatable","readOnly","hidden","disabled","error","warning","onMultiValueClick","showMore","showMoreText","displayTotalOnShowMore","noOptionsMessageFunc","props","forwardedRef","uniqueId","useState","nanoid","selected","setSelected","focused","setFocused","displayShowMore","setDisplayShowMore","cacheUnique","setCacheUnique","isMenuOpen","setIsMenuOpen","wrapperRef","useRef","selectRef","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleWrapperClick","isRemoveButton","closest","SVGElement","focus","getNoOptionsMessage","inputValue","innerComponents","DropdownIndicator","MultiValue","data","createElement","className","onMouseDown","e","role","stopPropagation","S","_extends","$isDisabled","$isReadOnly","MultiValueRemove","components","CloseIcon","Input","inputProps","$focused","$editText","$isMenuOpen","Menu","menuProps","Option","optProps","isSelected","selectStyles","useMemo","control","base","alignItems","background","border","boxShadow","minHeight","cursor","valueContainer","padding","gap","maxHeight","input","menu","backgroundColor","menuList","option","color","multiValue","margin","multiValueLabel","multiValueRemove","sharedProps","ref","node","classNamePrefix","value","options","undefined","loadingMessage","styles","isMulti","isClearable","placeholder","isDisabled","closeMenuOnSelect","hideSelectedOptions","openMenuOnClick","openMenuOnFocus","blurInputOnSelect","menuIsOpen","cacheUniqs","onMenuOpen","onMenuClose","onFocus","onBlur","noOptionsMessage","onChange","actionMeta","updatedItem","removedValue","action","onClick","htmlFor","$error","$warning","length","propTypes","process","env","NODE_ENV","PropTypes","string","arrayOf","object","func","isRequired","bool","createNewOptionMessageFunc","oneOfType","defaultProps"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.js","sources":["../../../src/components/inputs/MultiSelect/MultiSelect.js"],"sourcesContent":["import React, { useState, useEffect, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport { nanoid } from 'nanoid';\nimport { components } from 'react-select';\nimport * as S from './MultiSelect.styled';\n\n/**\n * Multi-select with autocomplete and support for asynchronous fetching/filtering of\n * available options with pagination, update handling with callback,\n * and the ability for the end-user to create new options.\n *\n * The component uses [react-select](https://react-select.com/) for the main select functionality,\n * with [react-select-async-paginate](https://www.npmjs.com/package/react-select-async-paginate) for pagination.\n *\n *\n * <br />### Import\n *\n * ``` js\n * import { MultiSelect } from '@ntbjs/react-components/inputs'\n * // or\n * import MultiSelect from '@ntbjs/react-components/inputs/MultiSelect'\n * ```\n *\n * <br />## Option `object` format\n * Options are represented by an `Array` of `objects` with the following format:\n *\n * ``` js\n * {\n *   value: \"Example\",\n *   label: \"Example\"\n * }\n * ```\n *\n * The `label` is what will visible to the end-user. Whether `value` and `label`\n * should be different will depend on your use-case, but they are not required to.\n *\n *\n * <br />## Update handling\n * Changes from the end-user to the selected/available options can be handled with a callback function\n * passed through the `onUpdateCallback` prop, which is triggered any time the selected values change.\n *\n * The callback function will be passed two arguments:\n * * `action: string`\n * * `updatedOption: object`\n *\n * <br />#### `action`\n * A `string` indicating what kind of update was made.\n *\n * The possible values of `action` are:\n * * `create-option`: an option that didn't exist in the original list of available options were added\n * * `select-option`: an option was selected\n * * `deselect-option`: an option was de-selected by clicking the X in the dropdown menu\n * * `remove-value`: an option was de-selected by clicking the X on the option label/box\n * * `pop-value`: an option was de-selected with backspace\n * * `clear`: all options were de-selected by clicking the clear indicator (not currently in use)\n *\n * <br />#### `updatedOption`\n * Option `object`of the updated option:\n *\n * In addition to the default `value` and `label` keys, an `__isNew__` flag will be present if the option was\n * not part of the original list of available options, i.e. created by the user in the current \"session\".\n * This is the case regardless of whether the list is provided through `availableOptions` or\n * asynchronously through `loadOptions`.\n *\n *\n * <br />## Asynchronous fetching/filtering with pagination\n * The list of available options can be fetched and filtered asynchronously with a `Promise`\n * passed through the `loadOptions` prop.\n *\n * It will be passed two arguments:\n *\n * * `inputValue: string`: current input value/search\n * * `prevOptions: Array`: previously loaded options for the current search\n *\n * The function is triggered and the first page is fetched when the dropdown menu opens.\n * Whenever the user scrolls down to the bottom of the list, `loadOptions` will\n * be triggered again to fetch the next page.\n *\n * The `Promise` should return an `object` with the following keys:\n *\n * ``` js\n * {\n *   options: Array,\n *   hasMore: boolean\n * }\n * ```\n *\n * `options` should contain the current page of options. It will be concatenated to the previous\n * set of options automatically. The `hasMore` flag indicates whether there is another page to be fetched.\n *\n * **Example:**\n *\n * ``` js\n *\n * const availableOptions = [\n *   { value: \"Example 1\", label: \"Example 1\" },\n *   ...\n *   { value: \"Example N\", label: \"Example N\" }\n * ];\n *\n * const filterOptions = inputValue => {\n *   return availableOptions.filter(option => {\n *     return option.label.toLowerCase().includes(inputValue.toLowerCase());\n *   });\n * };\n *\n * const loadOptionsFunc = (inputValue, prevOptions) => {\n *   const currentLength = prevOptions.length;\n *   const pageLength = 10;\n *\n *   let filteredOptions;\n *\n *   if (inputValue) {\n *     filteredOptions = filterOptions(inputValue);\n *   } else {\n *     filteredOptions = availableOptions;\n *   }\n *\n *   const hasMore = filteredOptions.length > currentLength + pageLength;\n *   const slicedOptions = filteredOptions.slice(currentLength, currentLength + pageLength);\n *\n *   return {\n *     options: slicedOptions,\n *     hasMore\n *    };\n * };\n *\n * const loadOptions = (inputValue, prevOptions) => {\n *   return new Promise(resolve => {\n *     resolve(loadOptionsFunc(inputValue, prevOptions));\n *   });\n * };\n * ```\n *\n * While waiting for the `Promise` to resolve, the component will be in a loading state.\n * The loading state is showcased in the \"Primary With Fetching Timeout\" Story.\n *\n * <br />#### Without asynchronous fetching/filtering\n * If you wish to not use asynchronous fetching/filtering, leave the `loadOptions` prop undefined\n * and pass the `Array` of all available options to the `availableOptions` prop instead.\n * The component will use the built-in filtering on `label` from `react-select`, and the options\n * will not be paginated.\n *\n *\n * <br />## \"Show more\" overlay\n * The \"Show more\" overlay must be set manually with the `showMore` prop.\n *\n * By default, the total number\n * of selected options will be displayed in parenthesis after the \"Show more\" text. This can be\n * disabled with the `displayTotalOnShowMore` prop.\n *\n * **Note:**\n * <br />The component has been given a max-width in these Stories.\n * This is because the \"Show more\" overlay does not work well visually when there are\n * fewer than three rows of selected options. The component itself does not have\n * a max-width, so keep this in mind when using it.\n *\n * <br />\n */\n\nconst showMoreHeight = 114;\n\nconst MultiSelect = React.forwardRef((props, forwardedRef) => {\n  const theme = useTheme();\n  const {\n    label,\n    selectedOptions = [],\n    availableOptions,\n    loadOptions,\n    onUpdateCallback,\n    editText,\n    creatable,\n    readOnly,\n    disabled,\n    error,\n    warning,\n    onMultiValueClick,\n    showMore,\n    showMoreText = 'Show more',\n    displayTotalOnShowMore = true,\n    hidden,\n    ...rest\n  } = props;\n\n  const [uniqueId] = useState(nanoid());\n  const [selected, setSelected] = useState(selectedOptions);\n  const [cacheUnique, setCacheUnique] = useState(0);\n  const [displayShowMore, setDisplayShowMore] = useState(showMore && !error && !warning);\n  const [focused, setFocused] = useState(false);\n\n  // Track theme changes by checking the DOM\n  const [isDarkMode, setIsDarkMode] = useState(() =>\n    document.body.classList.contains('dark-theme')\n  );\n\n  useEffect(() => setSelected(selectedOptions), [selectedOptions]);\n\n  useEffect(() => {\n    const observer = new MutationObserver(() => {\n      setIsDarkMode(document.body.classList.contains('dark-theme'));\n    });\n\n    observer.observe(document.body, {\n      attributes: true,\n      attributeFilter: ['class']\n    });\n\n    return () => observer.disconnect();\n  }, []);\n\n  const selectStyles = useMemo(() => {\n    const color = key => theme?.getColor?.(key) || '#888';\n\n    const getThemeColor = (darkKey, lightKey) => {\n      const prefersDark =\n        !document.body.classList.contains('light-theme') &&\n        !document.body.classList.contains('dark-theme') &&\n        window.matchMedia('(prefers-color-scheme: dark)').matches;\n\n      return isDarkMode || prefersDark ? color(darkKey) : color(lightKey);\n    };\n\n    const errorColor = color('red-500');\n    const warningColor = color('orange-500');\n\n    const menuBg = getThemeColor('gray-600', 'white');\n    const textColor = getThemeColor('gray-100', 'gray-900');\n    const placeholderColor = getThemeColor('gray-400', 'gray-500');\n    const multiValueBg = getThemeColor('gray-600', 'gray-800');\n\n    console.log('Theme in selectStyles:', {\n      menuBg,\n      textColor,\n      placeholderColor,\n      multiValueBg,\n      isDarkMode\n    });\n\n    return {\n      control: base => ({\n        ...base,\n        alignItems: 'center',\n        background: 'transparent',\n        border: error ? `1px solid ${errorColor}` : warning ? `1px solid ${warningColor}` : 'none',\n        borderRadius: '3px',\n        boxShadow: 'none',\n        minHeight: '38px',\n        cursor: disabled || readOnly ? 'default' : 'pointer',\n        '&:hover': {\n          border: error ? `1px solid ${errorColor}` : warning ? `1px solid ${warningColor}` : 'none'\n        }\n      }),\n      valueContainer: base => ({\n        ...base,\n        alignItems: 'center',\n        gap: '8px',\n        padding: '0 8px',\n        maxHeight: displayShowMore\n          ? error || warning\n            ? '100%'\n            : `${showMoreHeight + 16}px`\n          : '100%',\n        overflow: 'hidden'\n      }),\n      multiValue: base => ({\n        ...base,\n        backgroundColor: multiValueBg,\n        borderRadius: '3px',\n        margin: '0',\n        display: 'flex',\n        alignItems: 'stretch',\n        minHeight: '26px',\n        overflow: 'hidden'\n      }),\n      multiValueLabel: base => ({\n        ...base,\n        color: color('white'),\n        fontSize: '12px',\n        padding: disabled || readOnly ? '0 8px' : '0 3px 0 8px',\n        display: 'flex',\n        alignItems: 'center'\n      }),\n      multiValueRemove: base => ({\n        ...base,\n        color: 'white',\n        padding: '0 8px 0 5px',\n        display: disabled || readOnly ? 'none' : 'flex',\n        alignItems: 'center',\n        alignSelf: 'stretch',\n        borderRadius: '0',\n        cursor: 'pointer',\n        '&:hover': {\n          backgroundColor: errorColor,\n          color: 'white'\n        }\n      }),\n      menu: base => ({\n        ...base,\n        backgroundColor: menuBg,\n        boxShadow: '0 4px 12px rgba(0,0,0,0.5)',\n        zIndex: 999,\n        marginTop: '4px',\n        border: `1px solid ${getThemeColor('gray-500', 'gray-300')}`\n      }),\n      menuList: base => ({\n        ...base,\n        backgroundColor: 'transparent',\n        padding: 0\n      }),\n      option: (base, state) => ({\n        ...base,\n        backgroundColor: state.isFocused ? getThemeColor('gray-500', 'gray-100') : 'transparent',\n        color: textColor,\n        cursor: 'pointer',\n        fontSize: '14px',\n        padding: '8px 12px',\n        ':active': {\n          backgroundColor: getThemeColor('gray-400', 'gray-200')\n        }\n      }),\n      input: (base, state) => ({\n        ...base,\n        display: 'inline-grid',\n        whiteSpace: 'nowrap',\n        color: textColor,\n        margin: 0,\n        padding: 0,\n        ':before':\n          !focused && editText && !state.value\n            ? {\n                content: `\"${editText}\"`,\n                color: placeholderColor,\n                marginRight: '8px',\n                lineHeight: '26px',\n                gridArea: '1 / 1'\n              }\n            : {}\n      }),\n      noOptionsMessage: base => ({ ...base, color: textColor, backgroundColor: 'transparent' }),\n      loadingMessage: base => ({ ...base, color: textColor, backgroundColor: 'transparent' }),\n      placeholder: () => ({ display: 'none' }),\n      indicatorsContainer: () => ({ display: 'none' })\n    };\n  }, [theme, error, warning, displayShowMore, disabled, readOnly, editText, focused, isDarkMode]);\n\n  const innerComponents = {\n    Option: optProps => (\n      <components.Option {...optProps}>\n        <div\n          style={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            width: '100%',\n            alignItems: 'center'\n          }}\n        >\n          <span>{optProps.label}</span>\n          {optProps.isSelected && <S.DropdownOptionDeleteIcon />}\n        </div>\n      </components.Option>\n    ),\n    MultiValue: mvProps => (\n      <S.MultiValueWrapper\n        onMouseDown={e => {\n          if (\n            onMultiValueClick &&\n            !readOnly &&\n            !disabled &&\n            !e.target.closest('.multi-select__multi-value__remove')\n          ) {\n            e.stopPropagation();\n            onMultiValueClick(mvProps.data);\n          }\n        }}\n      >\n        <components.MultiValue {...mvProps} />\n      </S.MultiValueWrapper>\n    )\n  };\n\n  const sharedSelectProps = {\n    ...rest,\n    ref: forwardedRef,\n    id: uniqueId,\n    classNamePrefix: 'multi-select',\n    styles: selectStyles,\n    components: innerComponents,\n    value: selected,\n    options: loadOptions ? undefined : availableOptions,\n    loadOptions,\n    isMulti: true,\n    isDisabled: disabled || readOnly,\n    closeMenuOnSelect: false,\n    hideSelectedOptions: false,\n    openMenuOnClick: true,\n    onFocus: () => setFocused(true),\n    onBlur: () => setFocused(false),\n    onChange: (newValue, actionMeta) => {\n      setSelected(newValue);\n      if (onUpdateCallback) {\n        const item = actionMeta.option || actionMeta.removedValue;\n        onUpdateCallback(actionMeta.action, item);\n      }\n      if (actionMeta.action === 'create-option' && loadOptions) {\n        setCacheUnique(c => c + 1);\n      }\n    },\n    cacheUniqs: loadOptions ? [cacheUnique] : undefined\n  };\n\n  const SelectComponent = useMemo(() => {\n    if (loadOptions) return creatable ? S.AsyncCreatableMultiSelect : S.AsyncMultiSelect;\n    return creatable ? S.CreatableMultiSelect : S.MultiSelect;\n  }, [loadOptions, creatable]);\n\n  if (hidden) return null;\n\n  return (\n    <S.MultiSelectWrapper>\n      {label && <S.Label htmlFor={uniqueId}>{label}</S.Label>}\n      <S.InnerWrapper>\n        <SelectComponent {...sharedSelectProps} />\n      </S.InnerWrapper>\n      {displayShowMore && (\n        <S.ShowMoreWrapper onClick={() => setDisplayShowMore(false)}>\n          <S.ShowMoreOverlay />\n          <S.ShowMoreText>\n            {showMoreText} {displayTotalOnShowMore && `(${selected.length})`}\n          </S.ShowMoreText>\n        </S.ShowMoreWrapper>\n      )}\n      {(error || warning) && (\n        <S.ErrorMessage $error={!!error} $warning={!!warning}>\n          {error || warning}\n        </S.ErrorMessage>\n      )}\n    </S.MultiSelectWrapper>\n  );\n});\n\nMultiSelect.displayName = 'MultiSelect';\n\nMultiSelect.propTypes = {\n  /**\n   *\n   * The label of the input field – leave `undefined` to hide the label\n   */\n  label: PropTypes.string,\n  /**\n   * `Array` of `objects` containing the default options. This is only needed\n   * when asynchronous option fetching with the `loadOptions` prop is not used.\n   *\n   * **Note:**\n   * <br />This will be overridden by the `loadOptions` prop if both props are set.\n   */\n  availableOptions: PropTypes.arrayOf(PropTypes.object),\n\n  /**\n   * `Array` of `objects` containing the selected options.\n   */\n  selectedOptions: PropTypes.arrayOf(PropTypes.object),\n\n  /**\n   * Function with a `Promise` returning filtered options.\n   *\n   * See [Asynchronous fetching/filtering with pagination](#asynchronous-fetchingfiltering-with-pagination)\n   * for details.\n   *\n   * **Note:**\n   * <br />This will override the `availableOptions` prop if both props are set.\n   */\n  loadOptions: PropTypes.func,\n\n  /**\n   * Function for custom \"Loading...\" message while waiting for the first page\n   * from `loadOptions` to resolve. Defaults to \"Loading...\" if no function is provided.\n   */\n  loadingMessageFunc: PropTypes.func,\n\n  /**\n   * Callback function for sending updates to the backend whenever the selected values are updated.\n   * See [Update handling](#update-handling) for details.\n   */\n  onUpdateCallback: PropTypes.func,\n\n  /**\n   * Text to be displayed on the input element when the component\n   * is enabled and not focused – e.g. \"Add a keyword...\"\n   */\n  editText: PropTypes.string.isRequired,\n\n  /**\n   * Whether the user can create new options.\n   */\n  creatable: PropTypes.bool,\n\n  /**\n   * Callback function for formatting the message displayed in the dropdown when there\n   * are no matching options, and the user has permission to create new options.\n   * The callback function will be given the current input value as an argument.\n   */\n  createNewOptionMessageFunc: PropTypes.func,\n\n  /**\n   * If the list of options is empty, or if the current input value doesn't match\n   * any of the available options and the user doesn't have permission to add options,\n   * this function will be called and passed the current input value as an argument.\n   */\n  noOptionsMessageFunc: PropTypes.func,\n\n  /**\n   * Optional callback function to be trigger when clicking a selected option's label – e.g. opening\n   * a search filtered on the given multi-value's `label`.\n   *\n   * The callback function will be passed the option `object` as an argument.\n   */\n  onMultiValueClick: PropTypes.func,\n\n  /**\n   * Display an overlay which the user needs to click in order to\n   * show the selected options list in its entirety and edit it.\n   */\n  showMore: PropTypes.bool,\n\n  /**\n   * Text displayed on the \"Show more\" overlay.\n   */\n  showMoreText: PropTypes.string,\n\n  /**\n   * Whether to display the total number of selected options after the show more text.\n   */\n  displayTotalOnShowMore: PropTypes.bool,\n\n  /**\n   * Whether the multi-select should be displayed in read-only mode.\n   * The user can still click the selected options to trigger their on-click effect.\n   */\n  readOnly: PropTypes.bool,\n  /**\n   * Whether the component is hidden or visible.\n   */\n  hidden: PropTypes.bool,\n\n  /**\n   * Whether the multi-select should be disabled.\n   * The user will not be able to trigger the on-click effect of the selected options.\n   */\n  disabled: PropTypes.bool,\n\n  /**\n   * Set to `true` to display a red border indicating an error.\n   * Pass in a `string` instead to also show the string underneath the input field.\n   *\n   * **Note:**\n   * <br />This overrides the \"Show more\" overlay. Errors will be prioritized over warnings.\n   */\n  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n\n  /**\n   * Set to `true` to display an orange border.\n   * Pass in a `string` instead to also show the string underneath the input field.\n   *\n   * **Note:**\n   * <br />This overrides the \"Show more\" overlay. Errors will be prioritized over warnings.\n   */\n  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n};\n\nMultiSelect.defaultProps = {\n  noOptionsMessageFunc: inputValue => {\n    if (inputValue) {\n      return `No matches for \"${inputValue}\"`;\n    } else {\n      return 'No available options';\n    }\n  },\n  showMore: false,\n  displayTotalOnShowMore: true,\n  readOnly: false,\n  disabled: false,\n  creatable: false,\n  error: false,\n  warning: false,\n  showMoreText: 'Show more',\n  hidden: false\n};\n\nexport default MultiSelect;\n"],"names":["showMoreHeight","MultiSelect","React","forwardRef","props","forwardedRef","theme","useTheme","label","selectedOptions","availableOptions","loadOptions","onUpdateCallback","editText","creatable","readOnly","disabled","error","warning","onMultiValueClick","showMore","showMoreText","displayTotalOnShowMore","hidden","rest","uniqueId","useState","nanoid","selected","setSelected","cacheUnique","setCacheUnique","displayShowMore","setDisplayShowMore","focused","setFocused","isDarkMode","setIsDarkMode","document","body","classList","contains","useEffect","observer","MutationObserver","observe","attributes","attributeFilter","disconnect","selectStyles","useMemo","color","key","getColor","getThemeColor","darkKey","lightKey","prefersDark","window","matchMedia","matches","errorColor","warningColor","menuBg","textColor","placeholderColor","multiValueBg","console","log","control","base","alignItems","background","border","borderRadius","boxShadow","minHeight","cursor","valueContainer","gap","padding","maxHeight","overflow","multiValue","backgroundColor","margin","display","multiValueLabel","fontSize","multiValueRemove","alignSelf","menu","zIndex","marginTop","menuList","option","state","isFocused","input","whiteSpace","value","content","marginRight","lineHeight","gridArea","noOptionsMessage","loadingMessage","placeholder","indicatorsContainer","innerComponents","Option","optProps","createElement","components","style","justifyContent","width","isSelected","S","MultiValue","mvProps","onMouseDown","e","target","closest","stopPropagation","data","sharedSelectProps","ref","id","classNamePrefix","styles","options","undefined","isMulti","isDisabled","closeMenuOnSelect","hideSelectedOptions","openMenuOnClick","onFocus","onBlur","onChange","newValue","actionMeta","item","removedValue","action","c","cacheUniqs","SelectComponent","htmlFor","onClick","length","$error","$warning","displayName","propTypes","process","env","NODE_ENV","PropTypes","string","arrayOf","object","func","loadingMessageFunc","isRequired","bool","createNewOptionMessageFunc","noOptionsMessageFunc","oneOfType","defaultProps","inputValue"],"mappings":"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"}