@ntbjs/react-components 2.0.2-rc.4 → 2.0.2-rc.5

package/build/inputs/MultiSelect/MultiSelect.js

@@ -3,272 +3,164 @@ import React__default, { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { nanoid } from 'nanoid';
 import { components } from 'react-select';
-import { useTheme } from 'styled-components';
-import { MultiSelectWrapper, AsyncCreatableMultiSelect, AsyncMultiSelect, CreatableMultiSelect, MultiSelect as MultiSelect$1, ShowMoreWrapper, ShowMoreOverlay, ShowMoreText, ErrorMessage, Control as Control$1, Label, ValueContainer as ValueContainer$1, MultiValueWrapper, MultiValueRemoveIcon, InputWrapper, OptionContent, DropdownOptionDeleteIcon } from './MultiSelect.styled.js';
+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';
 
-const Control = props => {
-  return React__default.createElement(Control$1, {
-    $readOnly: props.selectProps.readOnly
-  }, React__default.createElement(components.Control, props));
-};
-Control.propTypes = process.env.NODE_ENV !== "production" ? {
-  selectProps: PropTypes.shape({
-    readOnly: PropTypes.bool
-  }).isRequired
-} : {};
-const ValueContainer = props => {
-  const {
-    children,
-    selectProps
-  } = props;
-  return React__default.createElement(components.ValueContainer, props, selectProps.label && React__default.createElement(Label, {
-    htmlFor: selectProps.uniqueId
-  }, selectProps.label), React__default.createElement(ValueContainer$1, {
-    $showMore: selectProps.displayShowMore,
-    $error: selectProps.error,
-    $warning: selectProps.warning
-  }, children));
-};
-ValueContainer.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: PropTypes.node,
-  selectProps: PropTypes.shape({
-    label: PropTypes.string,
-    uniqueId: PropTypes.string,
-    displayShowMore: PropTypes.bool,
-    error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-    warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
-  }).isRequired
-} : {};
-const MultiValue = props => {
-  const {
-    selectProps,
-    data
-  } = props;
-  const handleMouseDown = e => {
-    const isRemoveClick = e.target.closest('[role="button"]') || e.target.closest('svg');
-    if (isRemoveClick) {
-      return;
-    }
-    if (selectProps.onMultiValueClick && data) {
-      e.stopPropagation();
-      selectProps.onMultiValueClick(data);
-    }
-  };
-  return React__default.createElement(MultiValueWrapper, {
-    onMouseDown: handleMouseDown
-  }, React__default.createElement(components.MultiValue, props));
-};
-MultiValue.propTypes = process.env.NODE_ENV !== "production" ? {
-  data: PropTypes.object.isRequired,
-  selectProps: PropTypes.shape({
-    onMultiValueClick: PropTypes.func
-  }).isRequired
-} : {};
-const MultiValueRemove = props => {
-  if (props.selectProps.readOnly || props.selectProps.disabled) return null;
-  return React__default.createElement(components.MultiValueRemove, props, React__default.createElement(MultiValueRemoveIcon, null));
-};
-MultiValueRemove.propTypes = process.env.NODE_ENV !== "production" ? {
-  selectProps: PropTypes.shape({
-    readOnly: PropTypes.bool,
-    disabled: PropTypes.bool
-  }).isRequired
-} : {};
-const Input = props => React__default.createElement(InputWrapper, {
-  $focused: props.selectProps.focused,
-  $editText: props.selectProps.editText
-}, React__default.createElement(components.Input, _extends({}, props, {
-  isDisabled: props.selectProps.readOnly || props.selectProps.disabled
-})));
-Input.propTypes = process.env.NODE_ENV !== "production" ? {
-  selectProps: PropTypes.shape({
-    focused: PropTypes.bool,
-    editText: PropTypes.string,
-    readOnly: PropTypes.bool,
-    disabled: PropTypes.bool
-  }).isRequired
-} : {};
-const Option = props => {
-  const {
-    isSelected,
-    label,
-    isFocused
-  } = props;
-  return React__default.createElement(components.Option, props, React__default.createElement(OptionContent, {
-    $isFocused: isFocused
-  }, label, isSelected && React__default.createElement(DropdownOptionDeleteIcon, null)));
-};
-Option.propTypes = process.env.NODE_ENV !== "production" ? {
-  isSelected: PropTypes.bool,
-  label: PropTypes.string,
-  isFocused: PropTypes.bool
-} : {};
 const MultiSelect = React__default.forwardRef(function MultiSelect({
   label,
-  selectedOptions,
+  selectedOptions = [],
   availableOptions,
   loadOptions,
   loadingMessageFunc,
   onUpdateCallback,
   editText,
-  createNewOptionMessageFunc,
-  onMultiValueClick,
-  showMore,
-  showMoreText,
-  displayTotalOnShowMore,
   creatable,
   readOnly,
   hidden,
   disabled,
   error,
   warning,
-  noOptionsMessageFunc = val => val ? `No matches for "${val}"` : 'No options',
+  onMultiValueClick,
+  showMore,
+  showMoreText = 'Show more',
+  displayTotalOnShowMore = true,
+  noOptionsMessageFunc,
   ...props
 }, forwardedRef) {
   const [uniqueId] = useState(nanoid());
-  const [selected, setSelected] = useState(selectedOptions || []);
+  const [selected, setSelected] = useState(selectedOptions);
   const [focused, setFocused] = useState(false);
   const [displayShowMore, setDisplayShowMore] = useState(error || warning ? false : showMore);
-  const [cacheUnique, setCacheUnique] = useState(0);
-  const theme = useTheme();
   useEffect(() => {
-    setSelected(selectedOptions || []);
+    setSelected(selectedOptions);
   }, [selectedOptions]);
-  const isDark = theme?.isDark || document.body.classList.contains('dark-theme');
-  const getC = key => theme.getColor(key);
-  const getP = (dark, light) => {
-    const themeFn = theme.themeProp(dark, light);
-    return typeof themeFn === 'function' ? themeFn({
-      theme
-    }) : themeFn;
+  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 => {
+          e.stopPropagation();
+          if (onMultiValueClick && data && !(e.target.role === 'button' || e.target instanceof SVGElement)) {
+            onMultiValueClick(data);
+          }
+        }
+      }, 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
+    }, 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',
-      background: 'transparent',
       minHeight: 'unset'
     }),
     valueContainer: base => ({
       ...base,
       padding: 0,
-      overflow: 'visible'
+      gap: '8px',
+      maxHeight: displayShowMore && !(error || warning) ? '130px' : '100%'
     }),
-    multiValue: base => ({
-      ...base,
-      margin: 0,
-      borderRadius: '3px',
-      backgroundColor: isDark ? getC('gray-600') : getC('gray-800')
-    }),
-    multiValueLabel: (base, {
-      selectProps
-    }) => ({
+    menu: base => ({
       ...base,
-      color: getC('gray-100'),
-      fontSize: '12px',
-      paddingLeft: '8px',
-      paddingTop: '8px',
-      paddingBottom: '8px',
-      paddingRight: selectProps.readOnly ? '8px' : '4px'
+      backgroundColor: 'transparent',
+      boxShadow: 'none'
     }),
-    multiValueRemove: base => ({
+    menuList: base => ({
       ...base,
-      color: 'white',
-      padding: '0 8px',
-      cursor: 'pointer',
-      '&:hover': {
-        backgroundColor: getC('red-500'),
-        color: 'white',
-        borderRadius: '0 3px 3px 0'
-      }
+      backgroundColor: 'transparent'
     }),
-    option: (base, state) => ({
+    option: base => ({
       ...base,
-      padding: 0,
-      cursor: 'pointer',
-      backgroundColor: state.isFocused ? getC('gray-100') : 'transparent',
-      '&:active': {
-        backgroundColor: getC('gray-100')
-      }
+      backgroundColor: 'transparent',
+      color: 'inherit'
     }),
-    menu: base => ({
+    multiValue: base => ({
       ...base,
-      zIndex: 9999,
-      backgroundColor: getP(getC('gray-600'), getC('white')),
-      marginTop: '4px'
+      margin: 0,
+      border: 'none',
+      background: 'none'
     }),
-    input: base => ({
+    multiValueLabel: base => ({
       ...base,
-      margin: 0,
       padding: 0
     }),
-    placeholder: base => ({
+    multiValueRemove: base => ({
       ...base,
-      display: 'none'
+      padding: 0,
+      cursor: 'pointer'
     })
-  }), [theme, isDark]);
-  const sharedSelectProps = {
+  }), [error, warning, displayShowMore]);
+  const sharedProps = {
+    ...props,
     ref: forwardedRef,
+    classNamePrefix: 'multi-select',
     value: selected,
     options: loadOptions ? undefined : availableOptions,
     loadOptions,
+    loadingMessage: loadingMessageFunc,
+    styles: selectStyles,
+    components: innerComponents,
     isMulti: true,
     isClearable: false,
     placeholder: null,
-    label,
-    uniqueId,
-    displayShowMore,
-    error,
-    warning,
-    readOnly,
-    disabled,
-    focused,
-    editText,
-    onMultiValueClick,
-    key: cacheUnique,
-    loadingMessage: loadingMessageFunc,
-    formatCreateLabel: createNewOptionMessageFunc,
-    components: {
-      DropdownIndicator: null,
-      Control,
-      MultiValue,
-      MultiValueRemove,
-      ValueContainer,
-      Input,
-      Option
-    },
-    styles: selectStyles,
-    theme: rsTheme => ({
-      ...rsTheme,
-      spacing: {
-        ...rsTheme.spacing,
-        baseUnit: 4
-      }
-    }),
-    noOptionsMessage: input => noOptionsMessageFunc(input.inputValue),
+    isDisabled: disabled,
+    readOnly: readOnly,
+    closeMenuOnSelect: false,
+    hideSelectedOptions: false,
+    openMenuOnClick: !disabled && !readOnly,
+    openMenuOnFocus: !disabled && !readOnly,
     onFocus: () => setFocused(true),
     onBlur: () => setFocused(false),
+    noOptionsMessage: ({
+      inputValue
+    }) => getNoOptionsMessage(inputValue),
     onChange: (newValue, actionMeta) => {
-      if (actionMeta.action === 'create-option' && loadOptions) {
-        setCacheUnique(c => c + 1);
-      }
-      const nextValue = newValue || [];
-      setSelected(nextValue);
       if (onUpdateCallback) {
         onUpdateCallback(actionMeta.action, actionMeta.option || actionMeta.removedValue);
       }
+      setSelected(newValue);
     }
   };
   if (hidden) return null;
-  return React__default.createElement(MultiSelectWrapper, null, loadOptions ? creatable ? React__default.createElement(AsyncCreatableMultiSelect, _extends({}, sharedSelectProps, props)) : React__default.createElement(AsyncMultiSelect, _extends({}, sharedSelectProps, props)) : creatable ? React__default.createElement(CreatableMultiSelect, _extends({}, sharedSelectProps, props)) : React__default.createElement(MultiSelect$1, _extends({}, sharedSelectProps, props)), displayShowMore && !(error || warning) && React__default.createElement(ShowMoreWrapper, {
+  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: () => setDisplayShowMore(false)
-  }, React__default.createElement(ShowMoreOverlay, null), React__default.createElement(ShowMoreText, null, showMoreText, " ", displayTotalOnShowMore && `(${selected?.length || 0})`)), (error || warning) && React__default.createElement(ErrorMessage, {
-    $error: !!error,
-    $warning: !!warning
-  }, typeof error === 'string' ? error : warning));
+  }, 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));
 });
-MultiSelect.displayName = 'MultiSelect';
 MultiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   label: PropTypes.string,
   availableOptions: PropTypes.arrayOf(PropTypes.object),

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, useEffect, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { nanoid } from 'nanoid';\nimport { components } from 'react-select';\nimport { useTheme } from 'styled-components';\nimport * as S from './MultiSelect.styled';\n\n/**\n * HELPER COMPONENTS\n */\nconst Control = props => {\n  return (\n    <S.Control $readOnly={props.selectProps.readOnly}>\n      <components.Control {...props} />\n    </S.Control>\n  );\n};\n\nControl.propTypes = {\n  selectProps: PropTypes.shape({\n    readOnly: PropTypes.bool\n  }).isRequired\n};\n\nconst ValueContainer = props => {\n  const { children, selectProps } = props;\n  return (\n    <components.ValueContainer {...props}>\n      {selectProps.label && <S.Label htmlFor={selectProps.uniqueId}>{selectProps.label}</S.Label>}\n      <S.ValueContainer\n        $showMore={selectProps.displayShowMore}\n        $error={selectProps.error}\n        $warning={selectProps.warning}\n      >\n        {children}\n      </S.ValueContainer>\n    </components.ValueContainer>\n  );\n};\n\nValueContainer.propTypes = {\n  children: PropTypes.node,\n  selectProps: PropTypes.shape({\n    label: PropTypes.string,\n    uniqueId: PropTypes.string,\n    displayShowMore: PropTypes.bool,\n    error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n    warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n  }).isRequired\n};\n\nconst MultiValue = props => {\n  const { selectProps, data } = props;\n\n  const handleMouseDown = e => {\n    const isRemoveClick = e.target.closest('[role=\"button\"]') || e.target.closest('svg');\n\n    if (isRemoveClick) {\n      return;\n    }\n\n    if (selectProps.onMultiValueClick && data) {\n      e.stopPropagation();\n      selectProps.onMultiValueClick(data);\n    }\n  };\n\n  return (\n    <S.MultiValueWrapper onMouseDown={handleMouseDown}>\n      <components.MultiValue {...props} />\n    </S.MultiValueWrapper>\n  );\n};\n\nMultiValue.propTypes = {\n  data: PropTypes.object.isRequired,\n  selectProps: PropTypes.shape({\n    onMultiValueClick: PropTypes.func\n  }).isRequired\n};\n\nconst MultiValueRemove = props => {\n  if (props.selectProps.readOnly || props.selectProps.disabled) return null;\n  return (\n    <components.MultiValueRemove {...props}>\n      <S.MultiValueRemoveIcon />\n    </components.MultiValueRemove>\n  );\n};\n\nMultiValueRemove.propTypes = {\n  selectProps: PropTypes.shape({\n    readOnly: PropTypes.bool,\n    disabled: PropTypes.bool\n  }).isRequired\n};\n\nconst Input = props => (\n  <S.InputWrapper $focused={props.selectProps.focused} $editText={props.selectProps.editText}>\n    <components.Input\n      {...props}\n      isDisabled={props.selectProps.readOnly || props.selectProps.disabled}\n    />\n  </S.InputWrapper>\n);\n\nInput.propTypes = {\n  selectProps: PropTypes.shape({\n    focused: PropTypes.bool,\n    editText: PropTypes.string,\n    readOnly: PropTypes.bool,\n    disabled: PropTypes.bool\n  }).isRequired\n};\n\nconst Option = props => {\n  const { isSelected, label, isFocused } = props;\n  return (\n    <components.Option {...props}>\n      <S.OptionContent $isFocused={isFocused}>\n        {label}\n        {isSelected && <S.DropdownOptionDeleteIcon />}\n      </S.OptionContent>\n    </components.Option>\n  );\n};\n\nOption.propTypes = {\n  isSelected: PropTypes.bool,\n  label: PropTypes.string,\n  isFocused: PropTypes.bool\n};\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\nconst MultiSelect = React.forwardRef(function MultiSelect(\n  {\n    label,\n    selectedOptions,\n    availableOptions,\n    loadOptions,\n    loadingMessageFunc,\n    onUpdateCallback,\n    editText,\n    createNewOptionMessageFunc,\n    onMultiValueClick,\n    showMore,\n    showMoreText,\n    displayTotalOnShowMore,\n    creatable,\n    readOnly,\n    hidden,\n    disabled,\n    error,\n    warning,\n    noOptionsMessageFunc = val => (val ? `No matches for \"${val}\"` : 'No options'),\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\n  const theme = useTheme();\n\n  useEffect(() => {\n    setSelected(selectedOptions || []);\n  }, [selectedOptions]);\n\n  const isDark = theme?.isDark || document.body.classList.contains('dark-theme');\n  const getC = key => theme.getColor(key);\n  const getP = (dark, light) => {\n    const themeFn = theme.themeProp(dark, light);\n    return typeof themeFn === 'function' ? themeFn({ theme }) : themeFn;\n  };\n\n  const selectStyles = useMemo(\n    () => ({\n      control: base => ({\n        ...base,\n        border: 'none',\n        boxShadow: 'none',\n        background: 'transparent',\n        minHeight: 'unset'\n      }),\n      valueContainer: base => ({\n        ...base,\n        padding: 0,\n        overflow: 'visible'\n      }),\n      multiValue: base => ({\n        ...base,\n        margin: 0,\n        borderRadius: '3px',\n        backgroundColor: isDark ? getC('gray-600') : getC('gray-800')\n      }),\n      multiValueLabel: (base, { selectProps }) => ({\n        ...base,\n        color: getC('gray-100'),\n        fontSize: '12px',\n        paddingLeft: '8px',\n        paddingTop: '8px',\n        paddingBottom: '8px',\n        paddingRight: selectProps.readOnly ? '8px' : '4px'\n      }),\n      multiValueRemove: base => ({\n        ...base,\n        color: 'white',\n        padding: '0 8px',\n        cursor: 'pointer',\n        '&:hover': {\n          backgroundColor: getC('red-500'),\n          color: 'white',\n          borderRadius: '0 3px 3px 0'\n        }\n      }),\n      option: (base, state) => ({\n        ...base,\n        padding: 0,\n        cursor: 'pointer',\n        backgroundColor: state.isFocused ? getC('gray-100') : 'transparent',\n        '&:active': {\n          backgroundColor: getC('gray-100')\n        }\n      }),\n      menu: base => ({\n        ...base,\n        zIndex: 9999,\n        backgroundColor: getP(getC('gray-600'), getC('white')),\n        marginTop: '4px'\n      }),\n      input: base => ({ ...base, margin: 0, padding: 0 }),\n      placeholder: base => ({ ...base, display: 'none' })\n    }),\n    [theme, isDark]\n  );\n\n  const sharedSelectProps = {\n    ref: forwardedRef,\n    value: selected,\n    options: loadOptions ? undefined : availableOptions,\n    loadOptions,\n    isMulti: true,\n    isClearable: false,\n    placeholder: null,\n    label,\n    uniqueId,\n    displayShowMore,\n    error,\n    warning,\n    readOnly,\n    disabled,\n    focused,\n    editText,\n    onMultiValueClick,\n    key: cacheUnique,\n    loadingMessage: loadingMessageFunc,\n    formatCreateLabel: createNewOptionMessageFunc,\n    components: {\n      DropdownIndicator: null,\n      Control,\n      MultiValue,\n      MultiValueRemove,\n      ValueContainer,\n      Input,\n      Option\n    },\n    styles: selectStyles,\n    theme: rsTheme => ({ ...rsTheme, spacing: { ...rsTheme.spacing, baseUnit: 4 } }),\n    noOptionsMessage: input => noOptionsMessageFunc(input.inputValue),\n    onFocus: () => setFocused(true),\n    onBlur: () => setFocused(false),\n    onChange: (newValue, actionMeta) => {\n      if (actionMeta.action === 'create-option' && loadOptions) {\n        setCacheUnique(c => c + 1);\n      }\n\n      const nextValue = newValue || [];\n      setSelected(nextValue);\n\n      if (onUpdateCallback) {\n        onUpdateCallback(actionMeta.action, actionMeta.option || actionMeta.removedValue);\n      }\n    }\n  };\n\n  if (hidden) return null;\n\n  return (\n    <S.MultiSelectWrapper>\n      {loadOptions ? (\n        creatable ? (\n          <S.AsyncCreatableMultiSelect {...sharedSelectProps} {...props} />\n        ) : (\n          <S.AsyncMultiSelect {...sharedSelectProps} {...props} />\n        )\n      ) : creatable ? (\n        <S.CreatableMultiSelect {...sharedSelectProps} {...props} />\n      ) : (\n        <S.MultiSelect {...sharedSelectProps} {...props} />\n      )}\n\n      {displayShowMore && !(error || warning) && (\n        <S.ShowMoreWrapper onClick={() => setDisplayShowMore(false)}>\n          <S.ShowMoreOverlay />\n          <S.ShowMoreText>\n            {showMoreText} {displayTotalOnShowMore && `(${selected?.length || 0})`}\n          </S.ShowMoreText>\n        </S.ShowMoreWrapper>\n      )}\n\n      {(error || warning) && (\n        <S.ErrorMessage $error={!!error} $warning={!!warning}>\n          {typeof error === 'string' ? error : warning}\n        </S.ErrorMessage>\n      )}\n    </S.MultiSelectWrapper>\n  );\n});\n\nMultiSelect.displayName = 'MultiSelect';\n\nMultiSelect.propTypes = {\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":["Control","props","React","createElement","S","$readOnly","selectProps","readOnly","components","propTypes","process","env","NODE_ENV","PropTypes","shape","bool","isRequired","ValueContainer","children","label","htmlFor","uniqueId","$showMore","displayShowMore","$error","error","$warning","warning","node","string","oneOfType","MultiValue","data","handleMouseDown","e","isRemoveClick","target","closest","onMultiValueClick","stopPropagation","onMouseDown","object","func","MultiValueRemove","disabled","Input","$focused","focused","$editText","editText","_extends","isDisabled","Option","isSelected","isFocused","$isFocused","MultiSelect","forwardRef","selectedOptions","availableOptions","loadOptions","loadingMessageFunc","onUpdateCallback","createNewOptionMessageFunc","showMore","showMoreText","displayTotalOnShowMore","creatable","hidden","noOptionsMessageFunc","val","forwardedRef","useState","nanoid","selected","setSelected","setFocused","setDisplayShowMore","cacheUnique","setCacheUnique","theme","useTheme","useEffect","isDark","document","body","classList","contains","getC","key","getColor","getP","dark","light","themeFn","themeProp","selectStyles","useMemo","control","base","border","boxShadow","background","minHeight","valueContainer","padding","overflow","multiValue","margin","borderRadius","backgroundColor","multiValueLabel","color","fontSize","paddingLeft","paddingTop","paddingBottom","paddingRight","multiValueRemove","cursor","option","state","menu","zIndex","marginTop","input","placeholder","display","sharedSelectProps","ref","value","options","undefined","isMulti","isClearable","loadingMessage","formatCreateLabel","DropdownIndicator","styles","rsTheme","spacing","baseUnit","noOptionsMessage","inputValue","onFocus","onBlur","onChange","newValue","actionMeta","action","c","nextValue","removedValue","onClick","length","displayName","arrayOf","defaultProps"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.js","sources":["../../../src/components/inputs/MultiSelect/MultiSelect.js"],"sourcesContent":["import React, { useState, useMemo, useEffect } 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 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\n  useEffect(() => {\n    setSelected(selectedOptions);\n  }, [selectedOptions]);\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  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            e.stopPropagation();\n\n            if (\n              onMultiValueClick &&\n              data &&\n              !(e.target.role === 'button' || e.target instanceof SVGElement)\n            ) {\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      >\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  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      }),\n      valueContainer: base => ({\n        ...base,\n        padding: 0,\n        gap: '8px',\n        maxHeight: displayShowMore && !(error || warning) ? '130px' : '100%'\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 => ({ ...base, margin: 0, border: 'none', background: 'none' }),\n      multiValueLabel: base => ({ ...base, padding: 0 }),\n      multiValueRemove: base => ({ ...base, padding: 0, cursor: 'pointer' })\n    }),\n    [error, warning, displayShowMore]\n  );\n\n  const sharedProps = {\n    ...props,\n    ref: forwardedRef,\n    classNamePrefix: 'multi-select',\n    value: selected,\n    options: loadOptions ? undefined : availableOptions,\n    loadOptions,\n    loadingMessage: loadingMessageFunc,\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: !disabled && !readOnly,\n    openMenuOnFocus: !disabled && !readOnly,\n    onFocus: () => setFocused(true),\n    onBlur: () => setFocused(false),\n    noOptionsMessage: ({ inputValue }) => getNoOptionsMessage(inputValue),\n    onChange: (newValue, actionMeta) => {\n      if (onUpdateCallback) {\n        onUpdateCallback(actionMeta.action, actionMeta.option || actionMeta.removedValue);\n      }\n      setSelected(newValue);\n    }\n  };\n\n  if (hidden) return null;\n\n  return (\n    <S.MultiSelectWrapper>\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 onClick={() => setDisplayShowMore(false)}>\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\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":["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","useEffect","getNoOptionsMessage","inputValue","innerComponents","DropdownIndicator","MultiValue","data","createElement","className","onMouseDown","e","stopPropagation","target","role","SVGElement","S","_extends","isDisabled","isReadOnly","MultiValueRemove","components","CloseIcon","Input","inputProps","$focused","$editText","Menu","menuProps","Option","optProps","isSelected","selectStyles","useMemo","control","base","alignItems","background","border","boxShadow","minHeight","valueContainer","padding","gap","maxHeight","menu","backgroundColor","menuList","option","color","multiValue","margin","multiValueLabel","multiValueRemove","cursor","sharedProps","ref","classNamePrefix","value","options","undefined","loadingMessage","styles","isMulti","isClearable","placeholder","closeMenuOnSelect","hideSelectedOptions","openMenuOnClick","openMenuOnFocus","onFocus","onBlur","noOptionsMessage","onChange","newValue","actionMeta","action","removedValue","htmlFor","$error","$warning","onClick","length","propTypes","process","env","NODE_ENV","PropTypes","string","arrayOf","object","func","isRequired","bool","createNewOptionMessageFunc","oneOfType","defaultProps"],"mappings":"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"}

package/build/inputs/MultiSelect/MultiSelect.styled.js

@@ -1,35 +1,22 @@
 import styled, { css } from 'styled-components';
 import { applyDefaultTheme } from '../../utils/defaultTheme.js';
 import { ReactComponent as SvgClose } from '../../icons/close.svg.js';
-import Select from 'react-select';
+import Select, { components } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import { withAsyncPaginate, AsyncPaginate } from 'react-select-async-paginate';
 
-const AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);
 const showMoreHeight = 114;
-const MultiSelectWrapper = styled.div`
+const AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);
+const sharedStyle = css`
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-size: 12px;
+  font-weight: 400;
   position: relative;
-  /* Targets internal container to ensure overlay is visible even if library tries to clip it */
-  & [class*='ValueContainer'] {
-    overflow: visible !important;
-  }
-`;
-const Label = styled.label.attrs(applyDefaultTheme)`
-  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
-  font-size: 0.875rem;
-  margin-bottom: 4px;
-  display: block;
 `;
-const Control = styled.div`
-  & > div {
-    cursor: ${props => props.$readOnly ? 'default' : 'pointer'};
-  }
+const MultiSelectWrapper = styled.div.attrs(applyDefaultTheme)`
+  position: relative;
 `;
-const ValueContainer = styled.div.attrs(applyDefaultTheme)`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  max-height: ${props => props.$showMore ? props.$error || props.$warning ? 'none' : `${showMoreHeight + 16}px` : 'none'};
+const InnerWrapper = styled.div`
   ${props => (props.$error || props.$warning) && css`
       border: 1px solid;
       border-radius: 3px;
@@ -37,85 +24,192 @@ const ValueContainer = styled.div.attrs(applyDefaultTheme)`
       border-color: ${props.$error ? props.theme.getColor('red-500') : props.theme.getColor('orange-500')};
     `}
 `;
-const MultiValueWrapper = styled.div`
-  margin: 0;
+const Label = styled.label.attrs(applyDefaultTheme)`
+  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
+  flex-basis: 33.33%;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  cursor: pointer;
+  height: 19px;
+  display: flex;
+  align-items: center;
 `;
-const MultiValueRemoveIcon = styled(SvgClose)`
-  width: 8px;
-  stroke: white;
-  stroke-width: 2px;
+const MultiValue = styled(components.MultiValue).attrs(applyDefaultTheme)`
+  && {
+    border-radius: 3px;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    border: none;
+
+    ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-800'))}
+
+    ${props => props.isDisabled && css`
+        opacity: 0.6;
+        cursor: not-allowed !important;
+
+        & > * {
+          pointer-events: none;
+          cursor: not-allowed !important;
+        }
+      `}
+
+    ${props => props.isReadOnly && !props.isDisabled && css`
+        cursor: default !important;
+      `}
+
+    
+    & > div:first-of-type {
+      font-size: 12px;
+      min-height: 26px;
+      display: flex;
+      align-items: center;
+      padding: ${props => props.isDisabled || props.isReadOnly ? '0 8px' : '0 3px 0 8px'};
+      color: ${props => props.theme.getColor('gray-100')};
+      cursor: ${props => props.isDisabled ? 'not-allowed' : props.isReadOnly ? 'default' : 'pointer'};
+    }
+
+    /* Target the Remove Button */
+    .multi-select__multi-value__remove,
+    & > div:last-of-type {
+      display: flex;
+      align-items: center;
+      padding: 0 8px 0 5px;
+      height: 26px;
+      width: fit-content;
+      cursor: pointer;
+      background-color: transparent;
+
+      ${props => !props.isDisabled && !props.isReadOnly && css`
+          &:hover {
+            background-color: ${props.theme.getColor('red-500')} !important;
+            border-radius: 0 3px 3px 0;
+          }
+        `}
+
+      svg {
+        stroke: white;
+        stroke-width: 2px;
+        width: 8px;
+      }
+    }
+  }
 `;
-const InputWrapper = styled.div.attrs(applyDefaultTheme)`
-  min-width: 150px;
+const MultiSelect = styled(Select)`
+  ${sharedStyle}
+`;
+const CreatableMultiSelect = styled(CreatableSelect)`
+  ${sharedStyle}
+`;
+const AsyncMultiSelect = styled(AsyncPaginate)`
+  ${sharedStyle}
+`;
+const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate)`
+  ${sharedStyle}
+`;
+const InputWrapper = styled.div`
   position: relative;
-  ${props => !props.$focused && props.$editText && css`
-      &::before {
+  display: flex;
+  align-items: center;
+  min-width: 150px;
+
+  input {
+    color: ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))} !important;
+    font-size: ${props => props.$focused ? '14px' : '12px'} !important;
+  }
+
+  ${props => !props.$focused && css`
+      &:before {
         content: '${props.$editText}';
-        color: ${p => p.theme.getColor('gray-400')};
-        font-size: 12px;
         position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
+        left: 2px;
+        color: ${props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))};
         pointer-events: none;
+        font-size: 12px;
       }
     `}
-  input {
-    color: ${props => props.theme.themeProp(props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))} !important;
+
+  ${props => props.isDisabled && css`
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    `};
+`;
+const DropdownMenu = styled(components.Menu).attrs(applyDefaultTheme)`
+  font-size: 14px;
+
+  ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('white'))}
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
+`;
+const sharedOptionStyle = css`
+  ${props => props.isFocused && css`
+      ${props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))}
+    `}
+
+  ${props => props.isSelected && css`
+      ${props.theme.themeProp('background-color', 'transparent', 'transparent')}
+
+      ${props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
+    `}
+
+  ${props => props.isFocused && props.isSelected && css`
+      ${props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))}
+    `}
+
+  :hover {
+    cursor: pointer;
   }
 `;
-const OptionContent = styled.div`
-  display: flex;
+const Option = styled(components.Option).attrs(applyDefaultTheme)`
+  ${sharedOptionStyle}
+  padding: 8px 12px;
+`;
+const SelectedOption = styled(components.Option).attrs(applyDefaultTheme)`
+  ${sharedOptionStyle}
+  display: flex !important;
   justify-content: space-between;
   align-items: center;
   padding: 8px 12px;
-  width: 100%;
-  font-size: 14px;
-  color: inherit;
-`;
-styled.div`
-  [class*='menu'] {
-    z-index: 9999 !important;
-    border-radius: 4px;
-  }
 `;
 const DropdownOptionDeleteIcon = styled(SvgClose).attrs(applyDefaultTheme)`
+  stroke-width: 1px;
   width: 8px;
-  stroke: ${props => props.theme.themeProp(props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};
+  ${props => props.theme.themeProp('stroke', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
 `;
 const ShowMoreWrapper = styled.div.attrs(applyDefaultTheme)`
+  align-items: end;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  left: 0;
   position: absolute;
+  max-height: ${showMoreHeight + 16}px;
   top: 0;
-  left: 0;
   width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  z-index: 50;
-  color: ${props => props.theme.themeProp(props.theme.getColor('gray-100'), props.theme.getColor('emerald-500'))};
+  z-index: 2;
+  cursor: pointer;
+  color: ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('emerald-500'))};
   &:hover {
-    cursor: pointer;
     text-decoration: underline;
   }
 `;
 const ShowMoreOverlay = styled.div.attrs(applyDefaultTheme)`
-  flex: 1;
-  background: ${props => props.theme.themeProp('linear-gradient(180deg, #12121200 0%, #121212 100%)', 'linear-gradient(180deg, #fefefe00 0%, #fefefe 100%)')};
+  height: 100%;
+  max-height: ${showMoreHeight}px;
+  ${props => props.theme.themeProp('background', 'transparent linear-gradient(180deg, #12121200 0%, #12121230 40%, #12121279 70%, #121212 95%, #121212 100%) 0% 0% no-repeat padding-box', 'transparent linear-gradient(180deg, #fefefe00 0%, #fefefe30 40%, #fefefe79 70%, #fefefe 95%, #fefefe 100%) 0% 0% no-repeat padding-box')}
 `;
 const ShowMoreText = styled.div.attrs(applyDefaultTheme)`
-  background-color: ${props => props.theme.themeProp('#121212', '#fefefe')};
-  text-align: right;
   font-size: 0.875rem;
+  width: 100%;
+  background-color: ${props => props.theme.themeProp('background-color', '#121212', '#fefefe')};
 `;
 const ErrorMessage = styled.div.attrs(applyDefaultTheme)`
-  color: ${props => props.$error ? props.theme.getColor('red-500') : props.theme.getColor('orange-500')};
+  color: ${props => props.$error ? props.theme.getColor('red-500') : props.$warning ? props.theme.getColor('orange-500') : 'inherit'};
   font-size: 0.75rem;
   margin-top: 8px;
+  padding: 0 12px;
 `;
-const MultiSelect = styled(Select).attrs(applyDefaultTheme)``;
-const CreatableMultiSelect = styled(CreatableSelect).attrs(applyDefaultTheme)``;
-const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate).attrs(applyDefaultTheme)``;
-const AsyncMultiSelect = styled(AsyncPaginate).attrs(applyDefaultTheme)``;
 
-export { AsyncCreatableMultiSelect, AsyncMultiSelect, Control, CreatableMultiSelect, DropdownOptionDeleteIcon, ErrorMessage, InputWrapper, Label, MultiSelect, MultiSelectWrapper, MultiValueRemoveIcon, MultiValueWrapper, OptionContent, ShowMoreOverlay, ShowMoreText, ShowMoreWrapper, ValueContainer };
+export { AsyncCreatableMultiSelect, AsyncMultiSelect, CreatableMultiSelect, DropdownMenu, DropdownOptionDeleteIcon, ErrorMessage, InnerWrapper, InputWrapper, Label, MultiSelect, MultiSelectWrapper, MultiValue, Option, SelectedOption, ShowMoreOverlay, ShowMoreText, ShowMoreWrapper };
 //# sourceMappingURL=MultiSelect.styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.styled.js","sources":["../../../src/components/inputs/MultiSelect/MultiSelect.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\nimport { ReactComponent as CloseIcon } from '../../../icons/close.svg';\nimport Select from 'react-select';\nimport CreatableSelect from 'react-select/creatable';\nimport { AsyncPaginate, withAsyncPaginate } from 'react-select-async-paginate';\n\nconst AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);\nconst showMoreHeight = 114;\n\nexport const MultiSelectWrapper = styled.div`\n  position: relative;\n  /* Targets internal container to ensure overlay is visible even if library tries to clip it */\n  & [class*='ValueContainer'] {\n    overflow: visible !important;\n  }\n`;\n\nexport const Label = styled.label.attrs(applyDefaultTheme)`\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('white'),\n      props.theme.getColor('gray-700')\n    )};\n  font-size: 0.875rem;\n  margin-bottom: 4px;\n  display: block;\n`;\n\nexport const Control = styled.div`\n  & > div {\n    cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};\n  }\n`;\n\nexport const ValueContainer = styled.div.attrs(applyDefaultTheme)`\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  max-height: ${props =>\n    props.$showMore\n      ? props.$error || props.$warning\n        ? 'none'\n        : `${showMoreHeight + 16}px`\n      : 'none'};\n  ${props =>\n    (props.$error || props.$warning) &&\n    css`\n      border: 1px solid;\n      border-radius: 3px;\n      padding: 4px;\n      border-color: ${props.$error\n        ? props.theme.getColor('red-500')\n        : props.theme.getColor('orange-500')};\n    `}\n`;\n\nexport const MultiValueWrapper = styled.div`\n  margin: 0;\n`;\n\nexport const MultiValueRemoveIcon = styled(CloseIcon)`\n  width: 8px;\n  stroke: white;\n  stroke-width: 2px;\n`;\n\nexport const InputWrapper = styled.div.attrs(applyDefaultTheme)`\n  min-width: 150px;\n  position: relative;\n  ${props =>\n    !props.$focused &&\n    props.$editText &&\n    css`\n      &::before {\n        content: '${props.$editText}';\n        color: ${p => p.theme.getColor('gray-400')};\n        font-size: 12px;\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        pointer-events: none;\n      }\n    `}\n  input {\n    color: ${props =>\n      props.theme.themeProp(\n        props.theme.getColor('gray-100'),\n        props.theme.getColor('gray-900')\n      )} !important;\n  }\n`;\n\nexport const OptionContent = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 12px;\n  width: 100%;\n  font-size: 14px;\n  color: inherit;\n`;\n\nexport const DropdownMenu = styled.div`\n  [class*='menu'] {\n    z-index: 9999 !important;\n    border-radius: 4px;\n  }\n`;\n\nexport const DropdownOptionDeleteIcon = styled(CloseIcon).attrs(applyDefaultTheme)`\n  width: 8px;\n  stroke: ${props =>\n    props.theme.themeProp(props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};\n`;\n\nexport const ShowMoreWrapper = styled.div.attrs(applyDefaultTheme)`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  z-index: 50;\n  color: ${props =>\n    props.theme.themeProp(props.theme.getColor('gray-100'), props.theme.getColor('emerald-500'))};\n  &:hover {\n    cursor: pointer;\n    text-decoration: underline;\n  }\n`;\n\nexport const ShowMoreOverlay = styled.div.attrs(applyDefaultTheme)`\n  flex: 1;\n  background: ${props =>\n    props.theme.themeProp(\n      'linear-gradient(180deg, #12121200 0%, #121212 100%)',\n      'linear-gradient(180deg, #fefefe00 0%, #fefefe 100%)'\n    )};\n`;\n\nexport const ShowMoreText = styled.div.attrs(applyDefaultTheme)`\n  background-color: ${props => props.theme.themeProp('#121212', '#fefefe')};\n  text-align: right;\n  font-size: 0.875rem;\n`;\n\nexport const ErrorMessage = styled.div.attrs(applyDefaultTheme)`\n  color: ${props =>\n    props.$error ? props.theme.getColor('red-500') : props.theme.getColor('orange-500')};\n  font-size: 0.75rem;\n  margin-top: 8px;\n`;\n\nexport const MultiSelect = styled(Select).attrs(applyDefaultTheme)``;\nexport const CreatableMultiSelect = styled(CreatableSelect).attrs(applyDefaultTheme)``;\nexport const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate).attrs(\n  applyDefaultTheme\n)``;\nexport const AsyncMultiSelect = styled(AsyncPaginate).attrs(applyDefaultTheme)``;\n"],"names":["AsyncCreatableSelectPaginate","withAsyncPaginate","CreatableSelect","showMoreHeight","MultiSelectWrapper","styled","div","Label","label","attrs","applyDefaultTheme","props","theme","themeProp","getColor","Control","$readOnly","ValueContainer","$showMore","$error","$warning","css","MultiValueWrapper","MultiValueRemoveIcon","CloseIcon","InputWrapper","$focused","$editText","p","OptionContent","DropdownOptionDeleteIcon","ShowMoreWrapper","ShowMoreOverlay","ShowMoreText","ErrorMessage","MultiSelect","Select","CreatableMultiSelect","AsyncCreatableMultiSelect","AsyncMultiSelect","AsyncPaginate"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.styled.js","sources":["../../../src/components/inputs/MultiSelect/MultiSelect.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\nimport { ReactComponent as CloseIcon } from '../../../icons/close.svg';\nimport { components } from 'react-select';\nimport Select from 'react-select';\nimport CreatableSelect from 'react-select/creatable';\nimport { AsyncPaginate, withAsyncPaginate } from 'react-select-async-paginate';\n\nconst showMoreHeight = 114;\nconst AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);\n\nconst sharedStyle = css`\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 12px;\n  font-weight: 400;\n  position: relative;\n`;\n\nexport const MultiSelectWrapper = styled.div.attrs(applyDefaultTheme)`\n  position: relative;\n`;\n\nexport const InnerWrapper = styled.div`\n  ${props =>\n    (props.$error || props.$warning) &&\n    css`\n      border: 1px solid;\n      border-radius: 3px;\n      padding: 4px;\n      border-color: ${props.$error\n        ? props.theme.getColor('red-500')\n        : props.theme.getColor('orange-500')};\n    `}\n`;\n\nexport const Label = styled.label.attrs(applyDefaultTheme)`\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('white'),\n      props.theme.getColor('gray-700')\n    )};\n  flex-basis: 33.33%;\n  font-size: 0.875rem;\n  line-height: 1rem;\n  cursor: pointer;\n  height: 19px;\n  display: flex;\n  align-items: center;\n`;\n\nexport const MultiValue = styled(components.MultiValue).attrs(applyDefaultTheme)`\n  && {\n    border-radius: 3px;\n    margin: 0;\n    display: flex;\n    align-items: center;\n    border: none;\n\n    ${props =>\n      props.theme.themeProp(\n        'background-color',\n        props.theme.getColor('gray-600'),\n        props.theme.getColor('gray-800')\n      )}\n\n    ${props =>\n      props.isDisabled &&\n      css`\n        opacity: 0.6;\n        cursor: not-allowed !important;\n\n        & > * {\n          pointer-events: none;\n          cursor: not-allowed !important;\n        }\n      `}\n\n    ${props =>\n      props.isReadOnly &&\n      !props.isDisabled &&\n      css`\n        cursor: default !important;\n      `}\n\n    \n    & > div:first-of-type {\n      font-size: 12px;\n      min-height: 26px;\n      display: flex;\n      align-items: center;\n      padding: ${props => (props.isDisabled || props.isReadOnly ? '0 8px' : '0 3px 0 8px')};\n      color: ${props => props.theme.getColor('gray-100')};\n      cursor: ${props =>\n        props.isDisabled ? 'not-allowed' : props.isReadOnly ? 'default' : 'pointer'};\n    }\n\n    /* Target the Remove Button */\n    .multi-select__multi-value__remove,\n    & > div:last-of-type {\n      display: flex;\n      align-items: center;\n      padding: 0 8px 0 5px;\n      height: 26px;\n      width: fit-content;\n      cursor: pointer;\n      background-color: transparent;\n\n      ${props =>\n        !props.isDisabled &&\n        !props.isReadOnly &&\n        css`\n          &:hover {\n            background-color: ${props.theme.getColor('red-500')} !important;\n            border-radius: 0 3px 3px 0;\n          }\n        `}\n\n      svg {\n        stroke: white;\n        stroke-width: 2px;\n        width: 8px;\n      }\n    }\n  }\n`;\n\nexport const MultiSelect = styled(Select)`\n  ${sharedStyle}\n`;\nexport const CreatableMultiSelect = styled(CreatableSelect)`\n  ${sharedStyle}\n`;\nexport const AsyncMultiSelect = styled(AsyncPaginate)`\n  ${sharedStyle}\n`;\nexport const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate)`\n  ${sharedStyle}\n`;\n\nexport const InputWrapper = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-width: 150px;\n\n  input {\n    color: ${props =>\n      props.theme.themeProp(\n        'color',\n        props.theme.getColor('gray-100'),\n        props.theme.getColor('gray-900')\n      )} !important;\n    font-size: ${props => (props.$focused ? '14px' : '12px')} !important;\n  }\n\n  ${props =>\n    !props.$focused &&\n    css`\n      &:before {\n        content: '${props.$editText}';\n        position: absolute;\n        left: 2px;\n        color: ${props.theme.themeProp(\n          'color',\n          props.theme.getColor('gray-400'),\n          props.theme.getColor('gray-500')\n        )};\n        pointer-events: none;\n        font-size: 12px;\n      }\n    `}\n\n  ${props =>\n    props.isDisabled &&\n    css`\n      opacity: 0.5;\n      cursor: not-allowed;\n      pointer-events: none;\n    `};\n`;\n\n/* MultiSelect.styled.js */\n\n/* MultiSelect.styled.js */\n\nexport const DropdownMenu = styled(components.Menu).attrs(applyDefaultTheme)`\n  font-size: 14px;\n\n  ${props =>\n    props.theme.themeProp(\n      'background-color',\n      props.theme.getColor('gray-600'),\n      props.theme.getColor('white')\n    )}\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-900')\n    )}\n`;\n\nconst sharedOptionStyle = css`\n  ${props =>\n    props.isFocused &&\n    css`\n      ${props.theme.themeProp(\n        'background-color',\n        props.theme.getColor('gray-500'),\n        props.theme.getColor('gray-200')\n      )}\n    `}\n\n  ${props =>\n    props.isSelected &&\n    css`\n      ${props.theme.themeProp('background-color', 'transparent', 'transparent')}\n\n      ${props.theme.themeProp(\n        'color',\n        props.theme.getColor('gray-100'),\n        props.theme.getColor('gray-900')\n      )}\n    `}\n\n  ${props =>\n    props.isFocused &&\n    props.isSelected &&\n    css`\n      ${props.theme.themeProp(\n        'background-color',\n        props.theme.getColor('gray-500'),\n        props.theme.getColor('gray-200')\n      )}\n    `}\n\n  :hover {\n    cursor: pointer;\n  }\n`;\n\nexport const Option = styled(components.Option).attrs(applyDefaultTheme)`\n  ${sharedOptionStyle}\n  padding: 8px 12px;\n`;\n\nexport const SelectedOption = styled(components.Option).attrs(applyDefaultTheme)`\n  ${sharedOptionStyle}\n  display: flex !important;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 12px;\n`;\n\nexport const DropdownOptionDeleteIcon = styled(CloseIcon).attrs(applyDefaultTheme)`\n  stroke-width: 1px;\n  width: 8px;\n  ${props =>\n    props.theme.themeProp(\n      'stroke',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-900')\n    )}\n`;\n\nexport const ShowMoreWrapper = styled.div.attrs(applyDefaultTheme)`\n  align-items: end;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  max-height: ${showMoreHeight + 16}px;\n  top: 0;\n  width: 100%;\n  z-index: 2;\n  cursor: pointer;\n  color: ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('emerald-500')\n    )};\n  &:hover {\n    text-decoration: underline;\n  }\n`;\n\nexport const ShowMoreOverlay = styled.div.attrs(applyDefaultTheme)`\n  height: 100%;\n  max-height: ${showMoreHeight}px;\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      'transparent linear-gradient(180deg, #12121200 0%, #12121230 40%, #12121279 70%, #121212 95%, #121212 100%) 0% 0% no-repeat padding-box',\n      'transparent linear-gradient(180deg, #fefefe00 0%, #fefefe30 40%, #fefefe79 70%, #fefefe 95%, #fefefe 100%) 0% 0% no-repeat padding-box'\n    )}\n`;\n\nexport const ShowMoreText = styled.div.attrs(applyDefaultTheme)`\n  font-size: 0.875rem;\n  width: 100%;\n  background-color: ${props => props.theme.themeProp('background-color', '#121212', '#fefefe')};\n`;\n\nexport const ErrorMessage = styled.div.attrs(applyDefaultTheme)`\n  color: ${props =>\n    props.$error\n      ? props.theme.getColor('red-500')\n      : props.$warning\n        ? props.theme.getColor('orange-500')\n        : 'inherit'};\n  font-size: 0.75rem;\n  margin-top: 8px;\n  padding: 0 12px;\n`;\n"],"names":["showMoreHeight","AsyncCreatableSelectPaginate","withAsyncPaginate","CreatableSelect","sharedStyle","css","props","theme","primaryFontFamily","MultiSelectWrapper","styled","div","attrs","applyDefaultTheme","InnerWrapper","$error","$warning","getColor","Label","label","themeProp","MultiValue","components","isDisabled","isReadOnly","MultiSelect","Select","CreatableMultiSelect","AsyncMultiSelect","AsyncPaginate","AsyncCreatableMultiSelect","InputWrapper","$focused","$editText","DropdownMenu","Menu","sharedOptionStyle","isFocused","isSelected","Option","SelectedOption","DropdownOptionDeleteIcon","CloseIcon","ShowMoreWrapper","ShowMoreOverlay","ShowMoreText","ErrorMessage"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "2.0.2-rc.4",
+  "version": "2.0.2-rc.5",
   "publishConfig": {
     "access": "public"
   },
@@ -85,8 +85,8 @@
     "madge": "^8.0.0",
     "postcss": "^8.3.0",
     "prop-types": "^15.7.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "rollup": "^2.50.6",
     "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-delete": "^2.0.0",