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

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 } from 'react';\nimport PropTypes from 'prop-types';\n// import { nanoid } from 'nanoid';\nimport * as S from './MultiSelect.styled';\n\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 */\nconst MultiSelect = React.forwardRef(function MultiSelect(\n  {\n    // label,\n    selectedOptions,\n    availableOptions,\n    loadOptions,\n    loadingMessageFunc,\n    onUpdateCallback,\n    editText,\n    createNewOptionMessageFunc,\n    noOptionsMessageFunc,\n    onMultiValueClick,\n    showMore,\n    showMoreText,\n    displayTotalOnShowMore,\n    creatable,\n    readOnly,\n    hidden,\n    disabled,\n    error,\n    warning,\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  useEffect(() => {\n    setSelected(selectedOptions);\n  }, [selectedOptions]);\n\n  const handleShowMoreClick = () => {\n    setDisplayShowMore(false);\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   * Some of these are defined here, inside of the main MultiSelect,\n   * because they use our props for custom styling/functionality.\n   * The ones that don't are defined outside of (below) the main component.\n   */\n  // const Control = useMemo(() => {\n  //   const ControlWrapper = innerProps => {\n  //     return <S.Control className=\"multi-select-control\" readOnly={readOnly} {...innerProps} />;\n  //   };\n  //   ControlWrapper.displayName = 'ControlWrapper';\n  //   return ControlWrapper;\n  // }, []);\n\n  // const ValueContainer = useMemo(() => {\n  //   const ValueContainerWrapper = innerProps => {\n  //     return (\n  //       <>\n  //         {label && <S.Label htmlFor={uniqueId}>{label}</S.Label>}\n  //         <S.ValueContainer\n  //           showMore={displayShowMore}\n  //           $error={error}\n  //           $warning={warning}\n  //           className=\"multi-select-values-container\"\n  //           {...innerProps}\n  //         />\n  //       </>\n  //     );\n  //   };\n  //   ValueContainerWrapper.displayName = 'ValueContainerWrapper';\n  //   return ValueContainerWrapper;\n  // }, [displayShowMore, error, warning]);\n\n  const MultiValue = innerProps => {\n    return (\n      <S.MultiValueWrapper\n        className=\"multi-value-wrapper\"\n        onMouseDown={e => {\n          e.stopPropagation();\n\n          if (\n            onMultiValueClick &&\n            innerProps.data &&\n            !(e.target.role === 'button' || e.target instanceof SVGElement)\n          ) {\n            onMultiValueClick(innerProps.data);\n          }\n        }}\n      >\n        <S.MultiValue className=\"multi-value\" readOnly={readOnly} {...innerProps} />\n      </S.MultiValueWrapper>\n    );\n  };\n\n  // const Input = useMemo(() => {\n  //   const InputWrapper = innerProps => {\n  //     return (\n  //       <S.Input\n  //         className=\"multi-select-input\"\n  //         $focused={focused}\n  //         edittext={editText}\n  //         {...innerProps}\n  //         isDisabled={readOnly || disabled}\n  //       />\n  //     );\n  //   };\n  //   InputWrapper.displayName = 'InputWrapper';\n  //   return InputWrapper;\n  // }, [focused]);\n\n  /**\n   * Replace inner components of 'react-select'\n   */\n  const innerComponents = {\n    DropdownIndicator: null,\n    // Control,\n    MultiValue,\n    MultiValueRemove: innerProps => {\n      return readOnly || disabled ? false : MultiValueRemove(innerProps);\n    },\n    // ValueContainer,\n    // Input,\n    Menu,\n    Option: innerProps => {\n      return innerProps.isSelected ? SelectedOption(innerProps) : Option(innerProps);\n    }\n  };\n\n  /**\n   * Props from 'react-select'/'react-select-async-paginate' shared by the different Select versions\n   */\n  const sharedSelectProps = {\n    ref: forwardedRef,\n    value: selected,\n    options: loadOptions ? undefined : availableOptions,\n    loadOptions: loadOptions,\n    loadingMessage: loadingMessageFunc,\n    editText: editText,\n    formatCreateLabel: createNewOptionMessageFunc,\n    showMore: displayShowMore,\n    readOnly: readOnly,\n    isDisabled: disabled,\n    components: innerComponents,\n    focused: focused,\n    isMulti: true,\n    isClearable: false,\n    placeholder: null,\n    closeMenuOnSelect: false,\n    hideSelectedOptions: false,\n    cacheUniqs: loadOptions ? [cacheUnique] : undefined,\n    onFocus: () => setFocused(true),\n    onBlur: () => setFocused(false),\n\n    noOptionsMessage: input => {\n      return noOptionsMessageFunc(input.inputValue);\n    },\n\n    onChange: (selectedOptions, actionMeta) => {\n      switch (actionMeta.action) {\n        case 'create-option':\n          if (onUpdateCallback) {\n            onUpdateCallback(actionMeta.action, actionMeta.option);\n          }\n\n          if (loadOptions) {\n            setCacheUnique(cacheUnique + 1);\n          }\n\n          setSelected(selectedOptions);\n          break;\n\n        case 'select-option':\n          if (onUpdateCallback) {\n            onUpdateCallback(actionMeta.action, actionMeta.option);\n          }\n\n          setSelected(selectedOptions);\n          break;\n\n        case 'remove-value':\n          if (onUpdateCallback) {\n            onUpdateCallback(actionMeta.action, actionMeta.removedValue);\n          }\n\n          setSelected(selectedOptions);\n          break;\n\n        case 'pop-value':\n          if (onUpdateCallback) {\n            onUpdateCallback(actionMeta.action, actionMeta.removedValue);\n          }\n\n          setSelected(selectedOptions);\n          break;\n\n        case 'deselect-option':\n          if (onUpdateCallback) {\n            onUpdateCallback(actionMeta.action, actionMeta.option);\n          }\n\n          setSelected(selectedOptions);\n          break;\n\n        case 'clear':\n          // Does currently not occur as 'isClearable' is always set to false\n          break;\n\n        default:\n          if (onUpdateCallback) {\n            onUpdateCallback(actionMeta.action, actionMeta.option);\n          }\n\n          setSelected(selectedOptions);\n          break;\n      }\n    }\n  };\n\n  if (hidden) return null;\n\n  return (\n    <S.MultiSelectWrapper $error={error} $warning={warning}>\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      {displayShowMore && !(error || warning) && (\n        <S.ShowMoreWrapper onClick={handleShowMoreClick}>\n          <S.ShowMoreOverlay></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\n/**\n * Inner components to replace the default inner components of 'react-select'.\n * This is to add classnames, custom styling and functionality.\n *\n * Some are defined inside of the main MultiSelect component, as they use our props\n * for prop/state dependent functionality and styling. The ones below do not.\n */\nconst MultiValueRemove = innerProps => {\n  return (\n    <S.MultiValueRemove {...innerProps}>\n      <CloseIcon className=\"multi-value-remove-icon\" />\n    </S.MultiValueRemove>\n  );\n};\n\nconst Menu = innerProps => {\n  return <S.DropdownMenu {...innerProps} />;\n};\n\nconst Option = innerProps => {\n  return <S.Option className=\"multi-select-dropdown-item\" {...innerProps} />;\n};\n\nconst SelectedOption = innerProps => {\n  return (\n    <S.SelectedOption {...innerProps}>\n      {innerProps.label}\n      <S.DropdownOptionDeleteIcon />\n    </S.SelectedOption>\n  );\n};\n\nexport default MultiSelect;\n"],"names":["MultiSelect","React","forwardRef","selectedOptions","availableOptions","loadOptions","loadingMessageFunc","onUpdateCallback","editText","createNewOptionMessageFunc","noOptionsMessageFunc","onMultiValueClick","showMore","showMoreText","displayTotalOnShowMore","creatable","readOnly","hidden","disabled","error","warning","props","forwardedRef","selected","setSelected","useState","focused","setFocused","displayShowMore","setDisplayShowMore","cacheUnique","setCacheUnique","useEffect","handleShowMoreClick","MultiValue","innerProps","createElement","S","className","onMouseDown","e","stopPropagation","data","target","role","SVGElement","_extends","innerComponents","DropdownIndicator","MultiValueRemove","Menu","Option","isSelected","SelectedOption","sharedSelectProps","ref","value","options","undefined","loadingMessage","formatCreateLabel","isDisabled","components","isMulti","isClearable","placeholder","closeMenuOnSelect","hideSelectedOptions","cacheUniqs","onFocus","onBlur","noOptionsMessage","input","inputValue","onChange","actionMeta","action","option","removedValue","$error","$warning","onClick","length","propTypes","process","env","NODE_ENV","label","PropTypes","string","arrayOf","object","func","isRequired","bool","oneOfType","defaultProps","CloseIcon"],"mappings":"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"}
+{"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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"}

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

@@ -5,15 +5,35 @@ 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 AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
 const sharedStyle = css`
-  font-family: ${props => props.theme.primaryFontFamily};
+  font-family: ${props => props.theme?.primaryFontFamily || 'Arial, sans-serif'};
   font-size: 12px;
   font-weight: 400;
   position: relative;
 `;
-styled.label.attrs(applyDefaultTheme)`
+const MultiSelectWrapper = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  position: relative;
+`;
+const InnerWrapper = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  ${props => (props.$error || props.$warning) && css`
+      border: 1px solid;
+      border-radius: 3px;
+      padding: 4px;
+      border-color: ${props.$error ? props.theme.getColor('red-500') : props.theme.getColor('orange-500')};
+    `}
+`;
+const Label = styled.label.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
   ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
   flex-basis: 33.33%;
   font-size: 0.875rem;
@@ -23,120 +43,108 @@ styled.label.attrs(applyDefaultTheme)`
   display: flex;
   align-items: center;
 `;
-const MultiSelect = styled(Select).attrs(applyDefaultTheme)`
-  ${sharedStyle}
-`;
-const CreatableMultiSelect = styled(CreatableSelect).attrs(applyDefaultTheme)`
-  ${sharedStyle}
-`;
-const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate).attrs(applyDefaultTheme)`
-  ${sharedStyle}
-`;
-const AsyncMultiSelect = styled(AsyncPaginate).attrs(applyDefaultTheme)`
-  ${sharedStyle}
-`;
-const MultiSelectWrapper = styled.div.attrs(applyDefaultTheme)`
-  position: relative;
-`;
-styled(components.Control).attrs(applyDefaultTheme)`
-  && {
-    align-items: flex-start;
-    background: transparent;
-    border: none;
-    box-shadow: none;
-  }
-
-  :hover {
-    cursor: ${props => !props.isDisabled && props.focused || props.readOnly ? 'default' : 'pointer'};
-  }
-`;
-styled(components.ValueContainer)`
-  && {
-    align-items: flex-start;
-    gap: 8px;
-    padding: 0;
-
-    max-height: ${props => {
-  return props.showMore ? props.$error || props.$warning ? '100%' : showMoreHeight + 16 + 'px' : '100%';
-}} !important;
-
-    ${props => (props.$error || props.$warning) && css`
-        border: 1px solid;
-        border-radius: 3px;
-        padding: 4px;
-
-        border-color: ${props => props.$error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit'};
-      `}
-  }
-`;
-const MultiValueWrapper = styled.div.attrs(applyDefaultTheme)`
-  && {
-    border-radius: 3px;
-    margin: 0;
-  }
-`;
 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.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100'))}
+    ${props => props.$isDisabled && css`
+        opacity: 0.6;
+        cursor: not-allowed !important;
 
-    > div {
-      align-items: center;
-      display: flex;
+        & > * {
+          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'};
+    }
 
-      :first-of-type {
-        padding: ${props => props.isDisabled || props.readOnly ? '0 8px' : '0 3px 0 8px'};
-      }
-
-      :last-of-type:not(:only-child) {
-        padding: 0 8px 0 5px;
-        height: 100%;
-        width: fit-content;
-      }
+    /* 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;
 
-      :last-of-type:not(:only-child):hover {
-        background-color: ${props => props.theme.getColor('red-500')};
-        border-bottom-left-radius: 0;
-        border-top-left-radius: 0;
-        cursor: pointer;
-      }
+      ${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;
       }
-
-    :hover {
-      cursor: pointer;
     }
   }
 `;
-const MultiValueRemove = styled(components.MultiValueRemove).attrs(applyDefaultTheme)``;
-styled(components.Input).attrs(applyDefaultTheme)`
-  align-self: center;
-  font-size: ${props => props.$focused ? '14px' : '12px'};
+const MultiSelect = styled(Select)`
+  ${sharedStyle}
+`;
+const CreatableMultiSelect = styled(CreatableSelect)`
+  ${sharedStyle}
+`;
+const AsyncMultiSelect = styled(AsyncPaginate)`
+  ${sharedStyle}
+`;
+const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate)`
+  ${sharedStyle}
+`;
+const InputWrapper = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  position: relative;
+  display: flex;
+  align-items: center;
   min-width: 150px;
 
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
-
-  ${props => !props.$focused && css`
-      ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))}
+  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;
+  }
 
-      :before {
-        height: 100%;
-        white-space: nowrap;
-        width: fit-content;
-        content: '${props => props.edittext}';
+  ${props => !props.$isMenuOpen && css`
+      &:before {
+        content: '${props.$editText}';
+        position: absolute;
+        left: 2px;
+        color: ${props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))};
+        pointer-events: none;
+        font-size: 12px;
       }
     `}
-  }
+
+  ${props => props.$isDisabled && css`
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    `};
 `;
 const DropdownMenu = styled(components.Menu).attrs(applyDefaultTheme)`
   font-size: 14px;
@@ -166,20 +174,25 @@ const sharedOptionStyle = css`
 `;
 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;
 `;
-const DropdownOptionDeleteIcon = styled(SvgClose).attrs(applyDefaultTheme)`
+const DropdownOptionDeleteIcon = styled(SvgClose).withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
   stroke-width: 1px;
   width: 8px;
-
   ${props => props.theme.themeProp('stroke', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
 `;
-const ShowMoreWrapper = styled.div.attrs(applyDefaultTheme)`
+const ShowMoreWrapper = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
   align-items: end;
   display: flex;
   flex-direction: column;
@@ -189,36 +202,35 @@ const ShowMoreWrapper = styled.div.attrs(applyDefaultTheme)`
   max-height: ${showMoreHeight + 16}px;
   top: 0;
   width: 100%;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('emerald-500'))}
-
-  :hover {
-    cursor: pointer;
+  z-index: 2;
+  cursor: pointer;
+  color: ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('emerald-500'))};
+  &:hover {
     text-decoration: underline;
   }
 `;
-const ShowMoreOverlay = styled.div.attrs(applyDefaultTheme)`
-  align-items: end;
-  display: block;
+const ShowMoreOverlay = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
   height: 100%;
   max-height: ${showMoreHeight}px;
-  left: 0;
-  top: 0;
-  width: 100%;
-
   ${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)`
+const ShowMoreText = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
   font-size: 0.875rem;
   width: 100%;
-  ${props => props.theme.themeProp('background-color', '#121212', '#fefefe')}
+  background-color: ${props => props.theme.themeProp('background-color', '#121212', '#fefefe')};
 `;
-const ErrorMessage = styled.div.attrs(applyDefaultTheme)`
+const ErrorMessage = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
   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;
 `;
 
-export { AsyncCreatableMultiSelect, AsyncMultiSelect, CreatableMultiSelect, DropdownMenu, DropdownOptionDeleteIcon, ErrorMessage, MultiSelect, MultiSelectWrapper, MultiValue, MultiValueRemove, MultiValueWrapper, Option, SelectedOption, ShowMoreOverlay, ShowMoreText, ShowMoreWrapper };
+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';\n\nimport { ReactComponent as CloseIcon } from '../../../icons/close.svg';\n\nimport Select from 'react-select';\nimport CreatableSelect from 'react-select/creatable';\nimport { AsyncPaginate, withAsyncPaginate } from 'react-select-async-paginate';\nimport { components } from 'react-select';\n\nconst AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);\n\nconst showMoreHeight = 114;\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 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 MultiSelect = styled(Select).attrs(applyDefaultTheme)`\n  ${sharedStyle}\n`;\n\nexport const CreatableMultiSelect = styled(CreatableSelect).attrs(applyDefaultTheme)`\n  ${sharedStyle}\n`;\n\nexport const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate).attrs(\n  applyDefaultTheme\n)`\n  ${sharedStyle}\n`;\n\nexport const AsyncMultiSelect = styled(AsyncPaginate).attrs(applyDefaultTheme)`\n  ${sharedStyle}\n`;\n\nexport const MultiSelectWrapper = styled.div.attrs(applyDefaultTheme)`\n  position: relative;\n`;\n\nexport const Control = styled(components.Control).attrs(applyDefaultTheme)`\n  && {\n    align-items: flex-start;\n    background: transparent;\n    border: none;\n    box-shadow: none;\n  }\n\n  :hover {\n    cursor: ${props =>\n      (!props.isDisabled && props.focused) || props.readOnly ? 'default' : 'pointer'};\n  }\n`;\n\nexport const ValueContainer = styled(components.ValueContainer)`\n  && {\n    align-items: flex-start;\n    gap: 8px;\n    padding: 0;\n\n    max-height: ${props => {\n      return props.showMore\n        ? props.$error || props.$warning\n          ? '100%'\n          : showMoreHeight + 16 + 'px'\n        : '100%';\n    }} !important;\n\n    ${props =>\n      (props.$error || props.$warning) &&\n      css`\n        border: 1px solid;\n        border-radius: 3px;\n        padding: 4px;\n\n        border-color: ${props =>\n          props.$error\n            ? props.theme.getColor('red-500')\n            : props.warning\n              ? props.theme.getColor('orange-500')\n              : 'inherit'};\n      `}\n  }\n`;\n\nexport const MultiValueWrapper = styled.div.attrs(applyDefaultTheme)`\n  && {\n    border-radius: 3px;\n    margin: 0;\n  }\n`;\n\nexport const MultiValue = styled(components.MultiValue).attrs(applyDefaultTheme)`\n  && {\n    border-radius: 3px;\n    margin: 0;\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.theme.themeProp(\n        'color',\n        props.theme.getColor('gray-100'),\n        props.theme.getColor('gray-100')\n      )}\n\n    > div {\n      align-items: center;\n      display: flex;\n      font-size: 12px;\n      min-height: 26px;\n\n      :first-of-type {\n        padding: ${props => (props.isDisabled || props.readOnly ? '0 8px' : '0 3px 0 8px')};\n      }\n\n      :last-of-type:not(:only-child) {\n        padding: 0 8px 0 5px;\n        height: 100%;\n        width: fit-content;\n      }\n\n      :last-of-type:not(:only-child):hover {\n        background-color: ${props => props.theme.getColor('red-500')};\n        border-bottom-left-radius: 0;\n        border-top-left-radius: 0;\n        cursor: pointer;\n      }\n\n      svg {\n        stroke: white;\n        stroke-width: 2px;\n        width: 8px;\n      }\n\n    :hover {\n      cursor: pointer;\n    }\n  }\n`;\n\nexport const MultiValueRemove = styled(components.MultiValueRemove).attrs(applyDefaultTheme)``;\n\nexport const Input = styled(components.Input).attrs(applyDefaultTheme)`\n  align-self: center;\n  font-size: ${props => (props.$focused ? '14px' : '12px')};\n  min-width: 150px;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-900')\n    )}\n\n  ${props =>\n    !props.$focused &&\n    css`\n      ${props =>\n        props.theme.themeProp(\n          'color',\n          props.theme.getColor('gray-400'),\n          props.theme.getColor('gray-500')\n        )}\n\n      :before {\n        height: 100%;\n        white-space: nowrap;\n        width: fit-content;\n        content: '${props => props.edittext}';\n      }\n    `}\n  }\n`;\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`;\n\nexport const SelectedOption = styled(components.Option).attrs(applyDefaultTheme)`\n  ${sharedOptionStyle}\n\n  display: flex !important;\n  justify-content: space-between;\n`;\n\nexport const DropdownOptionDeleteIcon = styled(CloseIcon).attrs(applyDefaultTheme)`\n  stroke-width: 1px;\n  width: 8px;\n\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\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('emerald-500')\n    )}\n\n  :hover {\n    cursor: pointer;\n    text-decoration: underline;\n  }\n`;\n\nexport const ShowMoreOverlay = styled.div.attrs(applyDefaultTheme)`\n  align-items: end;\n  display: block;\n  height: 100%;\n  max-height: ${showMoreHeight}px;\n  left: 0;\n  top: 0;\n  width: 100%;\n\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  ${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":["AsyncCreatableSelectPaginate","withAsyncPaginate","CreatableSelect","showMoreHeight","sharedStyle","css","props","theme","primaryFontFamily","styled","label","attrs","applyDefaultTheme","themeProp","getColor","MultiSelect","Select","CreatableMultiSelect","AsyncCreatableMultiSelect","AsyncMultiSelect","AsyncPaginate","MultiSelectWrapper","div","components","Control","isDisabled","focused","readOnly","ValueContainer","showMore","$error","$warning","warning","MultiValueWrapper","MultiValue","MultiValueRemove","Input","$focused","edittext","DropdownMenu","Menu","sharedOptionStyle","isFocused","isSelected","Option","SelectedOption","DropdownOptionDeleteIcon","CloseIcon","ShowMoreWrapper","ShowMoreOverlay","ShowMoreText","ErrorMessage"],"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 shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nconst sharedStyle = css`\n  font-family: ${props => props.theme?.primaryFontFamily || 'Arial, sans-serif'};\n  font-size: 12px;\n  font-weight: 400;\n  position: relative;\n`;\n\nexport const MultiSelectWrapper = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  position: relative;\n`;\n\nexport const InnerWrapper = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\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\n  .withConfig({\n    shouldForwardProp\n  })\n  .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  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\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.$isMenuOpen &&\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\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)\n  .withConfig({\n    shouldForwardProp\n  })\n  .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\n  .withConfig({\n    shouldForwardProp\n  })\n  .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\n  .withConfig({\n    shouldForwardProp\n  })\n  .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\n  .withConfig({\n    shouldForwardProp\n  })\n  .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\n  .withConfig({\n    shouldForwardProp\n  })\n  .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","shouldForwardProp","prop","startsWith","sharedStyle","css","props","theme","primaryFontFamily","MultiSelectWrapper","styled","div","withConfig","attrs","applyDefaultTheme","InnerWrapper","$error","$warning","getColor","Label","label","themeProp","MultiValue","components","$isDisabled","$isReadOnly","MultiSelect","Select","CreatableMultiSelect","AsyncMultiSelect","AsyncPaginate","AsyncCreatableMultiSelect","InputWrapper","$focused","$isMenuOpen","$editText","DropdownMenu","Menu","sharedOptionStyle","isFocused","isSelected","Option","SelectedOption","DropdownOptionDeleteIcon","CloseIcon","ShowMoreWrapper","ShowMoreOverlay","ShowMoreText","ErrorMessage"],"mappings":"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"}

package/build/inputs/TextArea/TextArea.js

@@ -67,11 +67,11 @@ const TextArea = React__default.forwardRef(function TextArea({
       $fieldLabel: !isEmpty(fieldLabel),
       disabled: disabled,
       readOnly: readOnly,
-      type: type,
+      $type: type,
       className: className,
       style: style
     }, React__default.createElement(TextInputFieldIconAlert, {
-      type: type
+      $type: type
     }, icon), React__default.createElement(TextInputField, _extends({
       autoFocus: autoFocus,
       $borderRadius: borderRadius,
@@ -85,7 +85,7 @@ const TextArea = React__default.forwardRef(function TextArea({
       readOnly: readOnly,
       disabled: disabled,
       $edit: edit,
-      type: type,
+      $type: type,
       autoComplete: autoComplete,
       $hasIcon: Boolean(icon),
       id: `text-input-${uniqueId}`,
@@ -108,7 +108,7 @@ const TextArea = React__default.forwardRef(function TextArea({
       onKeyDown: onKeyDown,
       onBlur: onBlur,
       $noBorder: noBorder
-    }, rest)), !fieldLabel && (type === 'loading' || type === 'success') && React__default.createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && noBorder && React__default.createElement(InputIconContainer, {
+    }, rest)), !fieldLabel && (type === 'loading' || type === 'success') && React__default.createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && (edit || noBorder) && React__default.createElement(InputIconContainer, {
       disabled: disabled
     }, React__default.createElement(SvgEditNote, {
       className: padding === 'small' ? 'smallPadingIcon' : undefined
@@ -118,7 +118,7 @@ const TextArea = React__default.forwardRef(function TextArea({
       $hasIcon: Boolean(icon),
       $inputIsEmpty: inputIsEmpty
     }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default.createElement(Description, {
-      type: type
+      $type: type
     }, description)));
   };
   if (hidden) return null;