npm - @ntbjs/react-components - Versions diffs - 2.0.2-rc.12 → 2.0.2-rc.13 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/build/inputs/MultiSelect/MultiSelect.js +13 -18
package/build/inputs/MultiSelect/MultiSelect.js.map +1 -1
package/package.json +1 -1

package/build/inputs/MultiSelect/MultiSelect.js CHANGED Viewed

@@ -1,13 +1,12 @@
 import React__default, { useState, useEffect, useMemo } from 'react';
-import { useTheme } from 'styled-components';
 import PropTypes from 'prop-types';
 import { nanoid } from 'nanoid';
 import { components } from 'react-select';
+import { colors } from '../../styles/utils/colors-export.js';
 import { AsyncCreatableMultiSelect, AsyncMultiSelect, CreatableMultiSelect, MultiSelect as MultiSelect$1, MultiSelectWrapper, Label, InnerWrapper, ShowMoreWrapper, ShowMoreOverlay, ShowMoreText, ErrorMessage, DropdownOptionDeleteIcon, MultiValueWrapper } from './MultiSelect.styled.js';
 const showMoreHeight = 114;
 const MultiSelect = React__default.forwardRef((props, forwardedRef) => {
-  const theme = useTheme();
   const {
     label,
     selectedOptions = [],
@@ -45,24 +44,17 @@ const MultiSelect = React__default.forwardRef((props, forwardedRef) => {
     return () => observer.disconnect();
   }, []);
   const selectStyles = useMemo(() => {
-    const color = key => theme?.getColor?.(key) || '#888';
     const getThemeColor = (darkKey, lightKey) => {
       const prefersDark = !document.body.classList.contains('light-theme') && !document.body.classList.contains('dark-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches;
-      return isDarkMode || prefersDark ? color(darkKey) : color(lightKey);
+      const key = isDarkMode || prefersDark ? darkKey : lightKey;
+      return colors[key] || colors['gray-500'];
     };
-    const errorColor = color('red-500');
-    const warningColor = color('orange-500');
+    const errorColor = colors['red-500'];
+    const warningColor = colors['orange-500'];
     const menuBg = getThemeColor('gray-600', 'white');
     const textColor = getThemeColor('gray-100', 'gray-900');
     const placeholderColor = getThemeColor('gray-400', 'gray-500');
     const multiValueBg = getThemeColor('gray-600', 'gray-800');
-    console.log('Theme in selectStyles:', {
-      menuBg,
-      textColor,
-      placeholderColor,
-      multiValueBg,
-      isDarkMode
-    });
     return {
       control: base => ({
         ...base,
@@ -72,7 +64,8 @@ const MultiSelect = React__default.forwardRef((props, forwardedRef) => {
         borderRadius: '3px',
         boxShadow: 'none',
         minHeight: '38px',
-        cursor: disabled || readOnly ? 'default' : 'pointer',
+        opacity: disabled ? 0.5 : 1,
+        pointerEvents: 'auto',
         '&:hover': {
           border: error ? `1px solid ${errorColor}` : warning ? `1px solid ${warningColor}` : 'none'
         }
@@ -93,15 +86,17 @@ const MultiSelect = React__default.forwardRef((props, forwardedRef) => {
         display: 'flex',
         alignItems: 'stretch',
         minHeight: '26px',
-        overflow: 'hidden'
+        overflow: 'hidden',
+        opacity: disabled ? 0.7 : 1
       }),
       multiValueLabel: base => ({
         ...base,
-        color: color('white'),
+        color: colors['white'],
         fontSize: '12px',
         padding: disabled || readOnly ? '0 8px' : '0 3px 0 8px',
         display: 'flex',
-        alignItems: 'center'
+        alignItems: 'center',
+        cursor: disabled ? 'not-allowed' : readOnly ? 'default' : 'pointer'
       }),
       multiValueRemove: base => ({
         ...base,
@@ -173,7 +168,7 @@ const MultiSelect = React__default.forwardRef((props, forwardedRef) => {
         display: 'none'
       })
     };
-  }, [theme, error, warning, displayShowMore, disabled, readOnly, editText, focused, isDarkMode]);
+  }, [error, warning, displayShowMore, disabled, readOnly, editText, focused, isDarkMode, onMultiValueClick]);
   const innerComponents = {
     Option: optProps => React__default.createElement(components.Option, optProps, React__default.createElement("div", {
       style: {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelect.js","sources":["../../../src/components/inputs/MultiSelect/MultiSelect.js"],"sourcesContent":["import React, { useState, useEffect, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport { nanoid } from 'nanoid';\nimport { components } from 'react-select';\nimport * as S from './MultiSelect.styled';\n\n/*\n Multi-select with autocomplete and support for asynchronous fetching/filtering of\n * available options with pagination, update handling with callback,\n * and the ability for the end-user to create new options.\n \n The component uses [react-select](https://react-select.com/) for the main select functionality,\n * with [react-select-async-paginate](https://www.npmjs.com/package/react-select-async-paginate) for pagination.\n \n \n * <br />### Import\n \n ``` js\n * import { MultiSelect } from '@ntbjs/react-components/inputs'\n * // or\n * import MultiSelect from '@ntbjs/react-components/inputs/MultiSelect'\n * ```\n \n <br />## Option `object` format\n * Options are represented by an `Array` of `objects` with the following format:\n \n ``` js\n * {\n * value: \"Example\",\n * label: \"Example\"\n * }\n * ```\n \n The `label` is what will visible to the end-user. Whether `value` and `label`\n * should be different will depend on your use-case, but they are not required to.\n \n \n * <br />## Update handling\n * Changes from the end-user to the selected/available options can be handled with a callback function\n * passed through the `onUpdateCallback` prop, which is triggered any time the selected values change.\n \n The callback function will be passed two arguments:\n * * `action: string`\n * * `updatedOption: object`\n \n <br />#### `action`\n * A `string` indicating what kind of update was made.\n \n The possible values of `action` are:\n * * `create-option`: an option that didn't exist in the original list of available options were added\n * * `select-option`: an option was selected\n * * `deselect-option`: an option was de-selected by clicking the X in the dropdown menu\n * * `remove-value`: an option was de-selected by clicking the X on the option label/box\n * * `pop-value`: an option was de-selected with backspace\n * * `clear`: all options were de-selected by clicking the clear indicator (not currently in use)\n \n <br />#### `updatedOption`\n * Option `object`of the updated option:\n \n In addition to the default `value` and `label` keys, an `__isNew__` flag will be present if the option was\n * not part of the original list of available options, i.e. created by the user in the current \"session\".\n * This is the case regardless of whether the list is provided through `availableOptions` or\n * asynchronously through `loadOptions`.\n \n \n * <br />## Asynchronous fetching/filtering with pagination\n * The list of available options can be fetched and filtered asynchronously with a `Promise`\n * passed through the `loadOptions` prop.\n \n It will be passed two arguments:\n \n * `inputValue: string`: current input value/search\n * * `prevOptions: Array`: previously loaded options for the current search\n \n The function is triggered and the first page is fetched when the dropdown menu opens.\n * Whenever the user scrolls down to the bottom of the list, `loadOptions` will\n * be triggered again to fetch the next page.\n \n The `Promise` should return an `object` with the following keys:\n \n ``` js\n * {\n * options: Array,\n * hasMore: boolean\n * }\n * ```\n \n `options` should contain the current page of options. It will be concatenated to the previous\n * set of options automatically. The `hasMore` flag indicates whether there is another page to be fetched.\n \n Example:\n \n ``` js\n \n const availableOptions = [\n * { value: \"Example 1\", label: \"Example 1\" },\n * ...\n * { value: \"Example N\", label: \"Example N\" }\n * ];\n \n const filterOptions = inputValue => {\n * return availableOptions.filter(option => {\n * return option.label.toLowerCase().includes(inputValue.toLowerCase());\n * });\n * };\n \n const loadOptionsFunc = (inputValue, prevOptions) => {\n * const currentLength = prevOptions.length;\n * const pageLength = 10;\n \n let filteredOptions;\n \n if (inputValue) {\n * filteredOptions = filterOptions(inputValue);\n * } else {\n * filteredOptions = availableOptions;\n * }\n \n const hasMore = filteredOptions.length > currentLength + pageLength;\n * const slicedOptions = filteredOptions.slice(currentLength, currentLength + pageLength);\n \n return {\n * options: slicedOptions,\n * hasMore\n * };\n * };\n \n const loadOptions = (inputValue, prevOptions) => {\n * return new Promise(resolve => {\n * resolve(loadOptionsFunc(inputValue, prevOptions));\n * });\n * };\n * ```\n \n While waiting for the `Promise` to resolve, the component will be in a loading state.\n * The loading state is showcased in the \"Primary With Fetching Timeout\" Story.\n \n <br />#### Without asynchronous fetching/filtering\n * If you wish to not use asynchronous fetching/filtering, leave the `loadOptions` prop undefined\n * and pass the `Array` of all available options to the `availableOptions` prop instead.\n * The component will use the built-in filtering on `label` from `react-select`, and the options\n * will not be paginated.\n \n \n * <br />## \"Show more\" overlay\n * The \"Show more\" overlay must be set manually with the `showMore` prop.\n \n By default, the total number\n * of selected options will be displayed in parenthesis after the \"Show more\" text. This can be\n * disabled with the `displayTotalOnShowMore` prop.\n \n Note:\n * <br />The component has been given a max-width in these Stories.\n * This is because the \"Show more\" overlay does not work well visually when there are\n * fewer than three rows of selected options. The component itself does not have\n * a max-width, so keep this in mind when using it.\n \n <br />\n /\n\nconst showMoreHeight = 114;\n\nconst MultiSelect = React.forwardRef((props, forwardedRef) => {\n const theme = useTheme();\n const {\n label,\n selectedOptions = [],\n availableOptions,\n loadOptions,\n onUpdateCallback,\n editText,\n creatable,\n readOnly,\n disabled,\n error,\n warning,\n onMultiValueClick,\n showMore,\n showMoreText = 'Show more',\n displayTotalOnShowMore = true,\n hidden,\n ...rest\n } = props;\n\n const [uniqueId] = useState(nanoid());\n const [selected, setSelected] = useState(selectedOptions);\n const [cacheUnique, setCacheUnique] = useState(0);\n const [displayShowMore, setDisplayShowMore] = useState(showMore && !error && !warning);\n const [focused, setFocused] = useState(false);\n\n // Track theme changes by checking the DOM\n const [isDarkMode, setIsDarkMode] = useState(() =>\n document.body.classList.contains('dark-theme')\n );\n\n useEffect(() => setSelected(selectedOptions), [selectedOptions]);\n\n useEffect(() => {\n const observer = new MutationObserver(() => {\n setIsDarkMode(document.body.classList.contains('dark-theme'));\n });\n\n observer.observe(document.body, {\n attributes: true,\n attributeFilter: ['class']\n });\n\n return () => observer.disconnect();\n }, []);\n\n const selectStyles = useMemo(() => {\n const color = key => theme?.getColor?.(key) \|\| '#888';\n\n const getThemeColor = (darkKey, lightKey) => {\n const prefersDark =\n !document.body.classList.contains('light-theme') &&\n !document.body.classList.contains('dark-theme') &&\n window.matchMedia('(prefers-color-scheme: dark)').matches;\n\n return isDarkMode \|\| prefersDark ? color(darkKey) : color(lightKey);\n };\n\n const errorColor = color('red-500');\n const warningColor = color('orange-500');\n\n const menuBg = getThemeColor('gray-600', 'white');\n const textColor = getThemeColor('gray-100', 'gray-900');\n const placeholderColor = getThemeColor('gray-400', 'gray-500');\n const multiValueBg = getThemeColor('gray-600', 'gray-800');\n\n console.log('Theme in selectStyles:', {\n menuBg,\n textColor,\n placeholderColor,\n multiValueBg,\n isDarkMode\n });\n\n return {\n control: base => ({\n ...base,\n alignItems: 'center',\n background: 'transparent',\n border: error ? `1px solid ${errorColor}` : warning ? `1px solid ${warningColor}` : 'none',\n borderRadius: '3px',\n boxShadow: 'none',\n minHeight: '38px',\n cursor: disabled \|\| readOnly ? 'default' : 'pointer',\n '&:hover': {\n border: error ? `1px solid ${errorColor}` : warning ? `1px solid ${warningColor}` : 'none'\n }\n }),\n valueContainer: base => ({\n ...base,\n alignItems: 'center',\n gap: '8px',\n padding: '0 8px',\n maxHeight: displayShowMore\n ? error \|\| warning\n ? '100%'\n : `${showMoreHeight + 16}px`\n : '100%',\n overflow: 'hidden'\n }),\n multiValue: base => ({\n ...base,\n backgroundColor: multiValueBg,\n borderRadius: '3px',\n margin: '0',\n display: 'flex',\n alignItems: 'stretch',\n minHeight: '26px',\n overflow: 'hidden'\n }),\n multiValueLabel: base => ({\n ...base,\n color: color('white'),\n fontSize: '12px',\n padding: disabled \|\| readOnly ? '0 8px' : '0 3px 0 8px',\n display: 'flex',\n alignItems: 'center'\n }),\n multiValueRemove: base => ({\n ...base,\n color: 'white',\n padding: '0 8px 0 5px',\n display: disabled \|\| readOnly ? 'none' : 'flex',\n alignItems: 'center',\n alignSelf: 'stretch',\n borderRadius: '0',\n cursor: 'pointer',\n '&:hover': {\n backgroundColor: errorColor,\n color: 'white'\n }\n }),\n menu: base => ({\n ...base,\n backgroundColor: menuBg,\n boxShadow: '0 4px 12px rgba(0,0,0,0.5)',\n zIndex: 999,\n marginTop: '4px',\n border: `1px solid ${getThemeColor('gray-500', 'gray-300')}`\n }),\n menuList: base => ({\n ...base,\n backgroundColor: 'transparent',\n padding: 0\n }),\n option: (base, state) => ({\n ...base,\n backgroundColor: state.isFocused ? getThemeColor('gray-500', 'gray-100') : 'transparent',\n color: textColor,\n cursor: 'pointer',\n fontSize: '14px',\n padding: '8px 12px',\n ':active': {\n backgroundColor: getThemeColor('gray-400', 'gray-200')\n }\n }),\n input: (base, state) => ({\n ...base,\n display: 'inline-grid',\n whiteSpace: 'nowrap',\n color: textColor,\n margin: 0,\n padding: 0,\n ':before':\n !focused && editText && !state.value\n ? {\n content: `\"${editText}\"`,\n color: placeholderColor,\n marginRight: '8px',\n lineHeight: '26px',\n gridArea: '1 / 1'\n }\n : {}\n }),\n noOptionsMessage: base => ({ ...base, color: textColor, backgroundColor: 'transparent' }),\n loadingMessage: base => ({ ...base, color: textColor, backgroundColor: 'transparent' }),\n placeholder: () => ({ display: 'none' }),\n indicatorsContainer: () => ({ display: 'none' })\n };\n }, [theme, error, warning, displayShowMore, disabled, readOnly, editText, focused, isDarkMode]);\n\n const innerComponents = {\n Option: optProps => (\n <components.Option {...optProps}>\n <div\n style={{\n display: 'flex',\n justifyContent: 'space-between',\n width: '100%',\n alignItems: 'center'\n }}\n >\n <span>{optProps.label}</span>\n {optProps.isSelected && <S.DropdownOptionDeleteIcon />}\n </div>\n </components.Option>\n ),\n MultiValue: mvProps => (\n <S.MultiValueWrapper\n onMouseDown={e => {\n if (\n onMultiValueClick &&\n !readOnly &&\n !disabled &&\n !e.target.closest('.multi-select__multi-value__remove')\n ) {\n e.stopPropagation();\n onMultiValueClick(mvProps.data);\n }\n }}\n >\n <components.MultiValue {...mvProps} />\n </S.MultiValueWrapper>\n )\n };\n\n const sharedSelectProps = {\n ...rest,\n ref: forwardedRef,\n id: uniqueId,\n classNamePrefix: 'multi-select',\n styles: selectStyles,\n components: innerComponents,\n value: selected,\n options: loadOptions ? undefined : availableOptions,\n loadOptions,\n isMulti: true,\n isDisabled: disabled \|\| readOnly,\n closeMenuOnSelect: false,\n hideSelectedOptions: false,\n openMenuOnClick: true,\n onFocus: () => setFocused(true),\n onBlur: () => setFocused(false),\n onChange: (newValue, actionMeta) => {\n setSelected(newValue);\n if (onUpdateCallback) {\n const item = actionMeta.option \|\| actionMeta.removedValue;\n onUpdateCallback(actionMeta.action, item);\n }\n if (actionMeta.action === 'create-option' && loadOptions) {\n setCacheUnique(c => c + 1);\n }\n },\n cacheUniqs: loadOptions ? [cacheUnique] : undefined\n };\n\n const SelectComponent = useMemo(() => {\n if (loadOptions) return creatable ? S.AsyncCreatableMultiSelect : S.AsyncMultiSelect;\n return creatable ? S.CreatableMultiSelect : S.MultiSelect;\n }, [loadOptions, creatable]);\n\n if (hidden) return null;\n\n return (\n <S.MultiSelectWrapper>\n {label && <S.Label htmlFor={uniqueId}>{label}</S.Label>}\n <S.InnerWrapper>\n <SelectComponent {...sharedSelectProps} />\n </S.InnerWrapper>\n {displayShowMore && (\n <S.ShowMoreWrapper onClick={() => setDisplayShowMore(false)}>\n <S.ShowMoreOverlay />\n <S.ShowMoreText>\n {showMoreText} {displayTotalOnShowMore && `(${selected.length})`}\n </S.ShowMoreText>\n </S.ShowMoreWrapper>\n )}\n {(error \|\| warning) && (\n <S.ErrorMessage $error={!!error} $warning={!!warning}>\n {error \|\| warning}\n </S.ErrorMessage>\n )}\n </S.MultiSelectWrapper>\n );\n});\n\nMultiSelect.displayName = 'MultiSelect';\n\nMultiSelect.propTypes = {\n /\n \n * The label of the input field â€“ leave `undefined` to hide the label\n /\n label: PropTypes.string,\n /\n `Array` of `objects` containing the default options. This is only needed\n * when asynchronous option fetching with the `loadOptions` prop is not used.\n \n Note:\n * <br />This will be overridden by the `loadOptions` prop if both props are set.\n /\n availableOptions: PropTypes.arrayOf(PropTypes.object),\n\n /\n `Array` of `objects` containing the selected options.\n /\n selectedOptions: PropTypes.arrayOf(PropTypes.object),\n\n /\n Function with a `Promise` returning filtered options.\n \n See [Asynchronous fetching/filtering with pagination](#asynchronous-fetchingfiltering-with-pagination)\n * for details.\n \n Note:\n * <br />This will override the `availableOptions` prop if both props are set.\n /\n loadOptions: PropTypes.func,\n\n /\n Function for custom \"Loading...\" message while waiting for the first page\n * from `loadOptions` to resolve. Defaults to \"Loading...\" if no function is provided.\n /\n loadingMessageFunc: PropTypes.func,\n\n /\n Callback function for sending updates to the backend whenever the selected values are updated.\n * See [Update handling](#update-handling) for details.\n /\n onUpdateCallback: PropTypes.func,\n\n /\n Text to be displayed on the input element when the component\n * is enabled and not focused â€“ e.g. \"Add a keyword...\"\n /\n editText: PropTypes.string.isRequired,\n\n /\n Whether the user can create new options.\n /\n creatable: PropTypes.bool,\n\n /\n Callback function for formatting the message displayed in the dropdown when there\n * are no matching options, and the user has permission to create new options.\n * The callback function will be given the current input value as an argument.\n /\n createNewOptionMessageFunc: PropTypes.func,\n\n /\n If the list of options is empty, or if the current input value doesn't match\n * any of the available options and the user doesn't have permission to add options,\n * this function will be called and passed the current input value as an argument.\n /\n noOptionsMessageFunc: PropTypes.func,\n\n /\n Optional callback function to be trigger when clicking a selected option's label â€“ e.g. opening\n * a search filtered on the given multi-value's `label`.\n \n The callback function will be passed the option `object` as an argument.\n /\n onMultiValueClick: PropTypes.func,\n\n /\n Display an overlay which the user needs to click in order to\n * show the selected options list in its entirety and edit it.\n /\n showMore: PropTypes.bool,\n\n /\n Text displayed on the \"Show more\" overlay.\n /\n showMoreText: PropTypes.string,\n\n /\n Whether to display the total number of selected options after the show more text.\n /\n displayTotalOnShowMore: PropTypes.bool,\n\n /\n Whether the multi-select should be displayed in read-only mode.\n * The user can still click the selected options to trigger their on-click effect.\n /\n readOnly: PropTypes.bool,\n /\n Whether the component is hidden or visible.\n /\n hidden: PropTypes.bool,\n\n /\n Whether the multi-select should be disabled.\n * The user will not be able to trigger the on-click effect of the selected options.\n /\n disabled: PropTypes.bool,\n\n /\n Set to `true` to display a red border indicating an error.\n * Pass in a `string` instead to also show the string underneath the input field.\n \n Note:\n * <br />This overrides the \"Show more\" overlay. Errors will be prioritized over warnings.\n /\n error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n\n /\n Set to `true` to display an orange border.\n * Pass in a `string` instead to also show the string underneath the input field.\n \n Note:\n * <br />This overrides the \"Show more\" overlay. Errors will be prioritized over warnings.\n */\n warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n};\n\nMultiSelect.defaultProps = {\n noOptionsMessageFunc: inputValue => {\n if (inputValue) {\n return `No matches for \"${inputValue}\"`;\n } else {\n return 'No available options';\n }\n },\n showMore: false,\n displayTotalOnShowMore: true,\n readOnly: false,\n disabled: false,\n creatable: false,\n error: false,\n warning: false,\n showMoreText: 'Show more',\n hidden: false\n};\n\nexport default MultiSelect;\n"],"names":["showMoreHeight","MultiSelect","React","forwardRef","props","forwardedRef","theme","useTheme","label","selectedOptions","availableOptions","loadOptions","onUpdateCallback","editText","creatable","readOnly","disabled","error","warning","onMultiValueClick","showMore","showMoreText","displayTotalOnShowMore","hidden","rest","uniqueId","useState","nanoid","selected","setSelected","cacheUnique","setCacheUnique","displayShowMore","setDisplayShowMore","focused","setFocused","isDarkMode","setIsDarkMode","document","body","classList","contains","useEffect","observer","MutationObserver","observe","attributes","attributeFilter","disconnect","selectStyles","useMemo","color","key","getColor","getThemeColor","darkKey","lightKey","prefersDark","window","matchMedia","matches","errorColor","warningColor","menuBg","textColor","placeholderColor","multiValueBg","console","log","control","base","alignItems","background","border","borderRadius","boxShadow","minHeight","cursor","valueContainer","gap","padding","maxHeight","overflow","multiValue","backgroundColor","margin","display","multiValueLabel","fontSize","multiValueRemove","alignSelf","menu","zIndex","marginTop","menuList","option","state","isFocused","input","whiteSpace","value","content","marginRight","lineHeight","gridArea","noOptionsMessage","loadingMessage","placeholder","indicatorsContainer","innerComponents","Option","optProps","createElement","components","style","justifyContent","width","isSelected","S","MultiValue","mvProps","onMouseDown","e","target","closest","stopPropagation","data","sharedSelectProps","ref","id","classNamePrefix","styles","options","undefined","isMulti","isDisabled","closeMenuOnSelect","hideSelectedOptions","openMenuOnClick","onFocus","onBlur","onChange","newValue","actionMeta","item","removedValue","action","c","cacheUniqs","SelectComponent","htmlFor","onClick","length","$error","$warning","displayName","propTypes","process","env","NODE_ENV","PropTypes","string","arrayOf","object","func","loadingMessageFunc","isRequired","bool","createNewOptionMessageFunc","noOptionsMessageFunc","oneOfType","defaultProps","inputValue"],"mappings":";;;;;;;AAkKA,MAAMA,cAAc,GAAG,GAAG,CAAA;AAEpBC,MAAAA,WAAW,GAAGC,cAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,YAAY,KAAK;AAC5D,EAAA,MAAMC,KAAK,GAAGC,QAAQ,EAAE,CAAA;EACxB,MAAM;IACJC,KAAK;AACLC,IAAAA,eAAe,GAAG,EAAE;IACpBC,gBAAgB;IAChBC,WAAW;IACXC,gBAAgB;IAChBC,QAAQ;IACRC,SAAS;IACTC,QAAQ;IACRC,QAAQ;IACRC,KAAK;IACLC,OAAO;IACPC,iBAAiB;IACjBC,QAAQ;AACRC,IAAAA,YAAY,GAAG,WAAW;AAC1BC,IAAAA,sBAAsB,GAAG,IAAI;IAC7BC,MAAM;IACN,GAAGC,IAAAA;AACL,GAAC,GAAGpB,KAAK,CAAA;EAET,MAAM,CAACqB,QAAQ,CAAC,GAAGC,QAAQ,CAACC,MAAM,EAAE,CAAC,CAAA;EACrC,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGH,QAAQ,CAACjB,eAAe,CAAC,CAAA;EACzD,MAAM,CAACqB,WAAW,EAAEC,cAAc,CAAC,GAAGL,QAAQ,CAAC,CAAC,CAAC,CAAA;AACjD,EAAA,MAAM,CAACM,eAAe,EAAEC,kBAAkB,CAAC,GAAGP,QAAQ,CAACN,QAAQ,IAAI,CAACH,KAAK,IAAI,CAACC,OAAO,CAAC,CAAA;EACtF,MAAM,CAACgB,OAAO,EAAEC,UAAU,CAAC,GAAGT,QAAQ,CAAC,KAAK,CAAC,CAAA;AAG7C,EAAA,MAAM,CAACU,UAAU,EAAEC,aAAa,CAAC,GAAGX,QAAQ,CAAC,MAC3CY,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACC,QAAQ,CAAC,YAAY,CAC/C,CAAC,CAAA;EAEDC,SAAS,CAAC,MAAMb,WAAW,CAACpB,eAAe,CAAC,EAAE,CAACA,eAAe,CAAC,CAAC,CAAA;AAEhEiC,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,MAAMC,QAAQ,GAAG,IAAIC,gBAAgB,CAAC,MAAM;MAC1CP,aAAa,CAACC,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAA;AAC/D,KAAC,CAAC,CAAA;AAEFE,IAAAA,QAAQ,CAACE,OAAO,CAACP,QAAQ,CAACC,IAAI,EAAE;AAC9BO,MAAAA,UAAU,EAAE,IAAI;MAChBC,eAAe,EAAE,CAAC,OAAO,CAAA;AAC3B,KAAC,CAAC,CAAA;AAEF,IAAA,OAAO,MAAMJ,QAAQ,CAACK,UAAU,EAAE,CAAA;GACnC,EAAE,EAAE,CAAC,CAAA;AAEN,EAAA,MAAMC,YAAY,GAAGC,OAAO,CAAC,MAAM;IACjC,MAAMC,KAAK,GAAGC,GAAG,IAAI9C,KAAK,EAAE+C,QAAQ,GAAGD,GAAG,CAAC,IAAI,MAAM,CAAA;AAErD,IAAA,MAAME,aAAa,GAAGA,CAACC,OAAO,EAAEC,QAAQ,KAAK;AAC3C,MAAA,MAAMC,WAAW,GACf,CAACnB,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACC,QAAQ,CAAC,aAAa,CAAC,IAChD,CAACH,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACC,QAAQ,CAAC,YAAY,CAAC,IAC/CiB,MAAM,CAACC,UAAU,CAAC,8BAA8B,CAAC,CAACC,OAAO,CAAA;AAE3D,MAAA,OAAOxB,UAAU,IAAIqB,WAAW,GAAGN,KAAK,CAACI,OAAO,CAAC,GAAGJ,KAAK,CAACK,QAAQ,CAAC,CAAA;KACpE,CAAA;AAED,IAAA,MAAMK,UAAU,GAAGV,KAAK,CAAC,SAAS,CAAC,CAAA;AACnC,IAAA,MAAMW,YAAY,GAAGX,KAAK,CAAC,YAAY,CAAC,CAAA;AAExC,IAAA,MAAMY,MAAM,GAAGT,aAAa,CAAC,UAAU,EAAE,OAAO,CAAC,CAAA;AACjD,IAAA,MAAMU,SAAS,GAAGV,aAAa,CAAC,UAAU,EAAE,UAAU,CAAC,CAAA;AACvD,IAAA,MAAMW,gBAAgB,GAAGX,aAAa,CAAC,UAAU,EAAE,UAAU,CAAC,CAAA;AAC9D,IAAA,MAAMY,YAAY,GAAGZ,aAAa,CAAC,UAAU,EAAE,UAAU,CAAC,CAAA;AAE1Da,IAAAA,OAAO,CAACC,GAAG,CAAC,wBAAwB,EAAE;MACpCL,MAAM;MACNC,SAAS;MACTC,gBAAgB;MAChBC,YAAY;AACZ9B,MAAAA,UAAAA;AACF,KAAC,CAAC,CAAA;IAEF,OAAO;MACLiC,OAAO,EAAEC,IAAI,KAAK;AAChB,QAAA,GAAGA,IAAI;AACPC,QAAAA,UAAU,EAAE,QAAQ;AACpBC,QAAAA,UAAU,EAAE,aAAa;AACzBC,QAAAA,MAAM,EAAExD,KAAK,GAAG,CAAA,UAAA,EAAa4C,UAAU,CAAA,CAAE,GAAG3C,OAAO,GAAG,CAAA,UAAA,EAAa4C,YAAY,CAAA,CAAE,GAAG,MAAM;AAC1FY,QAAAA,YAAY,EAAE,KAAK;AACnBC,QAAAA,SAAS,EAAE,MAAM;AACjBC,QAAAA,SAAS,EAAE,MAAM;AACjBC,QAAAA,MAAM,EAAE7D,QAAQ,IAAID,QAAQ,GAAG,SAAS,GAAG,SAAS;AACpD,QAAA,SAAS,EAAE;AACT0D,UAAAA,MAAM,EAAExD,KAAK,GAAG,CAAA,UAAA,EAAa4C,UAAU,CAAA,CAAE,GAAG3C,OAAO,GAAG,CAAA,UAAA,EAAa4C,YAAY,CAAA,CAAE,GAAG,MAAA;AACtF,SAAA;AACF,OAAC,CAAC;MACFgB,cAAc,EAAER,IAAI,KAAK;AACvB,QAAA,GAAGA,IAAI;AACPC,QAAAA,UAAU,EAAE,QAAQ;AACpBQ,QAAAA,GAAG,EAAE,KAAK;AACVC,QAAAA,OAAO,EAAE,OAAO;AAChBC,QAAAA,SAAS,EAAEjD,eAAe,GACtBf,KAAK,IAAIC,OAAO,GACd,MAAM,GACN,GAAGlB,cAAc,GAAG,EAAE,CAAA,EAAA,CAAI,GAC5B,MAAM;AACVkF,QAAAA,QAAQ,EAAE,QAAA;AACZ,OAAC,CAAC;MACFC,UAAU,EAAEb,IAAI,KAAK;AACnB,QAAA,GAAGA,IAAI;AACPc,QAAAA,eAAe,EAAElB,YAAY;AAC7BQ,QAAAA,YAAY,EAAE,KAAK;AACnBW,QAAAA,MAAM,EAAE,GAAG;AACXC,QAAAA,OAAO,EAAE,MAAM;AACff,QAAAA,UAAU,EAAE,SAAS;AACrBK,QAAAA,SAAS,EAAE,MAAM;AACjBM,QAAAA,QAAQ,EAAE,QAAA;AACZ,OAAC,CAAC;MACFK,eAAe,EAAEjB,IAAI,KAAK;AACxB,QAAA,GAAGA,IAAI;AACPnB,QAAAA,KAAK,EAAEA,KAAK,CAAC,OAAO,CAAC;AACrBqC,QAAAA,QAAQ,EAAE,MAAM;AAChBR,QAAAA,OAAO,EAAEhE,QAAQ,IAAID,QAAQ,GAAG,OAAO,GAAG,aAAa;AACvDuE,QAAAA,OAAO,EAAE,MAAM;AACff,QAAAA,UAAU,EAAE,QAAA;AACd,OAAC,CAAC;MACFkB,gBAAgB,EAAEnB,IAAI,KAAK;AACzB,QAAA,GAAGA,IAAI;AACPnB,QAAAA,KAAK,EAAE,OAAO;AACd6B,QAAAA,OAAO,EAAE,aAAa;AACtBM,QAAAA,OAAO,EAAEtE,QAAQ,IAAID,QAAQ,GAAG,MAAM,GAAG,MAAM;AAC/CwD,QAAAA,UAAU,EAAE,QAAQ;AACpBmB,QAAAA,SAAS,EAAE,SAAS;AACpBhB,QAAAA,YAAY,EAAE,GAAG;AACjBG,QAAAA,MAAM,EAAE,SAAS;AACjB,QAAA,SAAS,EAAE;AACTO,UAAAA,eAAe,EAAEvB,UAAU;AAC3BV,UAAAA,KAAK,EAAE,OAAA;AACT,SAAA;AACF,OAAC,CAAC;MACFwC,IAAI,EAAErB,IAAI,KAAK;AACb,QAAA,GAAGA,IAAI;AACPc,QAAAA,eAAe,EAAErB,MAAM;AACvBY,QAAAA,SAAS,EAAE,4BAA4B;AACvCiB,QAAAA,MAAM,EAAE,GAAG;AACXC,QAAAA,SAAS,EAAE,KAAK;AAChBpB,QAAAA,MAAM,EAAE,CAAanB,UAAAA,EAAAA,aAAa,CAAC,UAAU,EAAE,UAAU,CAAC,CAAA,CAAA;AAC5D,OAAC,CAAC;MACFwC,QAAQ,EAAExB,IAAI,KAAK;AACjB,QAAA,GAAGA,IAAI;AACPc,QAAAA,eAAe,EAAE,aAAa;AAC9BJ,QAAAA,OAAO,EAAE,CAAA;AACX,OAAC,CAAC;AACFe,MAAAA,MAAM,EAAEA,CAACzB,IAAI,EAAE0B,KAAK,MAAM;AACxB,QAAA,GAAG1B,IAAI;AACPc,QAAAA,eAAe,EAAEY,KAAK,CAACC,SAAS,GAAG3C,aAAa,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG,aAAa;AACxFH,QAAAA,KAAK,EAAEa,SAAS;AAChBa,QAAAA,MAAM,EAAE,SAAS;AACjBW,QAAAA,QAAQ,EAAE,MAAM;AAChBR,QAAAA,OAAO,EAAE,UAAU;AACnB,QAAA,SAAS,EAAE;AACTI,UAAAA,eAAe,EAAE9B,aAAa,CAAC,UAAU,EAAE,UAAU,CAAA;AACvD,SAAA;AACF,OAAC,CAAC;AACF4C,MAAAA,KAAK,EAAEA,CAAC5B,IAAI,EAAE0B,KAAK,MAAM;AACvB,QAAA,GAAG1B,IAAI;AACPgB,QAAAA,OAAO,EAAE,aAAa;AACtBa,QAAAA,UAAU,EAAE,QAAQ;AACpBhD,QAAAA,KAAK,EAAEa,SAAS;AAChBqB,QAAAA,MAAM,EAAE,CAAC;AACTL,QAAAA,OAAO,EAAE,CAAC;QACV,SAAS,EACP,CAAC9C,OAAO,IAAIrB,QAAQ,IAAI,CAACmF,KAAK,CAACI,KAAK,GAChC;UACEC,OAAO,EAAE,CAAIxF,CAAAA,EAAAA,QAAQ,CAAG,CAAA,CAAA;AACxBsC,UAAAA,KAAK,EAAEc,gBAAgB;AACvBqC,UAAAA,WAAW,EAAE,KAAK;AAClBC,UAAAA,UAAU,EAAE,MAAM;AAClBC,UAAAA,QAAQ,EAAE,OAAA;AACZ,SAAC,GACD,EAAC;AACT,OAAC,CAAC;MACFC,gBAAgB,EAAEnC,IAAI,KAAK;AAAE,QAAA,GAAGA,IAAI;AAAEnB,QAAAA,KAAK,EAAEa,SAAS;AAAEoB,QAAAA,eAAe,EAAE,aAAA;AAAc,OAAC,CAAC;MACzFsB,cAAc,EAAEpC,IAAI,KAAK;AAAE,QAAA,GAAGA,IAAI;AAAEnB,QAAAA,KAAK,EAAEa,SAAS;AAAEoB,QAAAA,eAAe,EAAE,aAAA;AAAc,OAAC,CAAC;MACvFuB,WAAW,EAAEA,OAAO;AAAErB,QAAAA,OAAO,EAAE,MAAA;AAAO,OAAC,CAAC;MACxCsB,mBAAmB,EAAEA,OAAO;AAAEtB,QAAAA,OAAO,EAAE,MAAA;OAAQ,CAAA;KAChD,CAAA;GACF,EAAE,CAAChF,KAAK,EAAEW,KAAK,EAAEC,OAAO,EAAEc,eAAe,EAAEhB,QAAQ,EAAED,QAAQ,EAAEF,QAAQ,EAAEqB,OAAO,EAAEE,UAAU,CAAC,CAAC,CAAA;AAE/F,EAAA,MAAMyE,eAAe,GAAG;AACtBC,IAAAA,MAAM,EAAEC,QAAQ,IACd7G,cAAA,CAAA8G,aAAA,CAACC,UAAU,CAACH,MAAM,EAAKC,QAAQ,EAC7B7G,cAAA,CAAA8G,aAAA,CAAA,KAAA,EAAA;AACEE,MAAAA,KAAK,EAAE;AACL5B,QAAAA,OAAO,EAAE,MAAM;AACf6B,QAAAA,cAAc,EAAE,eAAe;AAC/BC,QAAAA,KAAK,EAAE,MAAM;AACb7C,QAAAA,UAAU,EAAE,QAAA;AACd,OAAA;KAEArE,EAAAA,cAAA,CAAA8G,aAAA,CAAA,MAAA,EAAA,IAAA,EAAOD,QAAQ,CAACvG,KAAY,CAAC,EAC5BuG,QAAQ,CAACM,UAAU,IAAInH,cAAA,CAAA8G,aAAA,CAACM,wBAA0B,EAAA,IAAE,CAClD,CACY,CACpB;IACDC,UAAU,EAAEC,OAAO,IACjBtH,cAAA,CAAA8G,aAAA,CAACM,iBAAmB,EAAA;MAClBG,WAAW,EAAEC,CAAC,IAAI;AAChB,QAAA,IACEvG,iBAAiB,IACjB,CAACJ,QAAQ,IACT,CAACC,QAAQ,IACT,CAAC0G,CAAC,CAACC,MAAM,CAACC,OAAO,CAAC,oCAAoC,CAAC,EACvD;UACAF,CAAC,CAACG,eAAe,EAAE,CAAA;AACnB1G,UAAAA,iBAAiB,CAACqG,OAAO,CAACM,IAAI,CAAC,CAAA;AACjC,SAAA;AACF,OAAA;KAEA5H,EAAAA,cAAA,CAAA8G,aAAA,CAACC,UAAU,CAACM,UAAU,EAAKC,OAAU,CAClB,CAAA;GAExB,CAAA;AAED,EAAA,MAAMO,iBAAiB,GAAG;AACxB,IAAA,GAAGvG,IAAI;AACPwG,IAAAA,GAAG,EAAE3H,YAAY;AACjB4H,IAAAA,EAAE,EAAExG,QAAQ;AACZyG,IAAAA,eAAe,EAAE,cAAc;AAC/BC,IAAAA,MAAM,EAAElF,YAAY;AACpBgE,IAAAA,UAAU,EAAEJ,eAAe;AAC3BT,IAAAA,KAAK,EAAExE,QAAQ;AACfwG,IAAAA,OAAO,EAAEzH,WAAW,GAAG0H,SAAS,GAAG3H,gBAAgB;IACnDC,WAAW;AACX2H,IAAAA,OAAO,EAAE,IAAI;IACbC,UAAU,EAAEvH,QAAQ,IAAID,QAAQ;AAChCyH,IAAAA,iBAAiB,EAAE,KAAK;AACxBC,IAAAA,mBAAmB,EAAE,KAAK;AAC1BC,IAAAA,eAAe,EAAE,IAAI;AACrBC,IAAAA,OAAO,EAAEA,MAAMxG,UAAU,CAAC,IAAI,CAAC;AAC/ByG,IAAAA,MAAM,EAAEA,MAAMzG,UAAU,CAAC,KAAK,CAAC;AAC/B0G,IAAAA,QAAQ,EAAEA,CAACC,QAAQ,EAAEC,UAAU,KAAK;MAClClH,WAAW,CAACiH,QAAQ,CAAC,CAAA;AACrB,MAAA,IAAIlI,gBAAgB,EAAE;QACpB,MAAMoI,IAAI,GAAGD,UAAU,CAAChD,MAAM,IAAIgD,UAAU,CAACE,YAAY,CAAA;AACzDrI,QAAAA,gBAAgB,CAACmI,UAAU,CAACG,MAAM,EAAEF,IAAI,CAAC,CAAA;AAC3C,OAAA;AACA,MAAA,IAAID,UAAU,CAACG,MAAM,KAAK,eAAe,IAAIvI,WAAW,EAAE;AACxDoB,QAAAA,cAAc,CAACoH,CAAC,IAAIA,CAAC,GAAG,CAAC,CAAC,CAAA;AAC5B,OAAA;KACD;AACDC,IAAAA,UAAU,EAAEzI,WAAW,GAAG,CAACmB,WAAW,CAAC,GAAGuG,SAAAA;GAC3C,CAAA;AAED,EAAA,MAAMgB,eAAe,GAAGnG,OAAO,CAAC,MAAM;IACpC,IAAIvC,WAAW,EAAE,OAAOG,SAAS,GAAGwG,yBAA2B,GAAGA,gBAAkB,CAAA;IACpF,OAAOxG,SAAS,GAAGwG,oBAAsB,GAAGA,aAAa,CAAA;AAC3D,GAAC,EAAE,CAAC3G,WAAW,EAAEG,SAAS,CAAC,CAAC,CAAA;EAE5B,IAAIS,MAAM,EAAE,OAAO,IAAI,CAAA;AAEvB,EAAA,OACErB,cAAA,CAAA8G,aAAA,CAACM,kBAAoB,EAAA,IAAA,EAClB9G,KAAK,IAAIN,cAAA,CAAA8G,aAAA,CAACM,KAAO,EAAA;AAACgC,IAAAA,OAAO,EAAE7H,QAAAA;AAAS,GAAA,EAAEjB,KAAe,CAAC,EACvDN,cAAA,CAAA8G,aAAA,CAACM,YAAc,EACbpH,IAAAA,EAAAA,cAAA,CAAA8G,aAAA,CAACqC,eAAe,EAAKtB,iBAAoB,CAC3B,CAAC,EAChB/F,eAAe,IACd9B,cAAA,CAAA8G,aAAA,CAACM,eAAiB,EAAA;AAACiC,IAAAA,OAAO,EAAEA,MAAMtH,kBAAkB,CAAC,KAAK,CAAA;AAAE,GAAA,EAC1D/B,cAAA,CAAA8G,aAAA,CAACM,eAAiB,EAAE,IAAA,CAAC,EACrBpH,cAAA,CAAA8G,aAAA,CAACM,YAAc,EAAA,IAAA,EACZjG,YAAY,EAAC,GAAC,EAACC,sBAAsB,IAAI,IAAIM,QAAQ,CAAC4H,MAAM,CAC/C,CAAA,CAAA,CACC,CACpB,EACA,CAACvI,KAAK,IAAIC,OAAO,KAChBhB,cAAA,CAAA8G,aAAA,CAACM,YAAc,EAAA;IAACmC,MAAM,EAAE,CAAC,CAACxI,KAAM;IAACyI,QAAQ,EAAE,CAAC,CAACxI,OAAAA;AAAQ,GAAA,EAClDD,KAAK,IAAIC,OACI,CAEE,CAAC,CAAA;AAE3B,CAAC,EAAC;AAEFjB,WAAW,CAAC0J,WAAW,GAAG,aAAa,CAAA;AAEvC1J,WAAW,CAAC2J,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EAKtBvJ,KAAK,EAAEwJ,SAAS,CAACC,MAAM;EAQvBvJ,gBAAgB,EAAEsJ,SAAS,CAACE,OAAO,CAACF,SAAS,CAACG,MAAM,CAAC;EAKrD1J,eAAe,EAAEuJ,SAAS,CAACE,OAAO,CAACF,SAAS,CAACG,MAAM,CAAC;EAWpDxJ,WAAW,EAAEqJ,SAAS,CAACI,IAAI;EAM3BC,kBAAkB,EAAEL,SAAS,CAACI,IAAI;EAMlCxJ,gBAAgB,EAAEoJ,SAAS,CAACI,IAAI;AAMhCvJ,EAAAA,QAAQ,EAAEmJ,SAAS,CAACC,MAAM,CAACK,UAAU;EAKrCxJ,SAAS,EAAEkJ,SAAS,CAACO,IAAI;EAOzBC,0BAA0B,EAAER,SAAS,CAACI,IAAI;EAO1CK,oBAAoB,EAAET,SAAS,CAACI,IAAI;EAQpCjJ,iBAAiB,EAAE6I,SAAS,CAACI,IAAI;EAMjChJ,QAAQ,EAAE4I,SAAS,CAACO,IAAI;EAKxBlJ,YAAY,EAAE2I,SAAS,CAACC,MAAM;EAK9B3I,sBAAsB,EAAE0I,SAAS,CAACO,IAAI;EAMtCxJ,QAAQ,EAAEiJ,SAAS,CAACO,IAAI;EAIxBhJ,MAAM,EAAEyI,SAAS,CAACO,IAAI;EAMtBvJ,QAAQ,EAAEgJ,SAAS,CAACO,IAAI;AASxBtJ,EAAAA,KAAK,EAAE+I,SAAS,CAACU,SAAS,CAAC,CAACV,SAAS,CAACO,IAAI,EAAEP,SAAS,CAACC,MAAM,CAAC,CAAC;AAS9D/I,EAAAA,OAAO,EAAE8I,SAAS,CAACU,SAAS,CAAC,CAACV,SAAS,CAACO,IAAI,EAAEP,SAAS,CAACC,MAAM,CAAC,CAAA;AACjE,CAAC,GAAA,EAAA,CAAA;AAEDhK,WAAW,CAAC0K,YAAY,GAAG;EACzBF,oBAAoB,EAAEG,UAAU,IAAI;AAClC,IAAA,IAAIA,UAAU,EAAE;MACd,OAAO,CAAA,gBAAA,EAAmBA,UAAU,CAAG,CAAA,CAAA,CAAA;AACzC,KAAC,MAAM;AACL,MAAA,OAAO,sBAAsB,CAAA;AAC/B,KAAA;GACD;AACDxJ,EAAAA,QAAQ,EAAE,KAAK;AACfE,EAAAA,sBAAsB,EAAE,IAAI;AAC5BP,EAAAA,QAAQ,EAAE,KAAK;AACfC,EAAAA,QAAQ,EAAE,KAAK;AACfF,EAAAA,SAAS,EAAE,KAAK;AAChBG,EAAAA,KAAK,EAAE,KAAK;AACZC,EAAAA,OAAO,EAAE,KAAK;AACdG,EAAAA,YAAY,EAAE,WAAW;AACzBE,EAAAA,MAAM,EAAE,KAAA;AACV,CAAC;;;;"}
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';\n\nimport { nanoid } from 'nanoid';\nimport { components } from 'react-select';\nimport { colors } from '../../../styles/utils/colors-export';\nimport * as S from './MultiSelect.styled';\n\n/*\n Multi-select with autocomplete and support for asynchronous fetching/filtering of\n * available options with pagination, update handling with callback,\n * and the ability for the end-user to create new options.\n \n The component uses [react-select](https://react-select.com/) for the main select functionality,\n * with [react-select-async-paginate](https://www.npmjs.com/package/react-select-async-paginate) for pagination.\n \n \n * <br />### Import\n \n ``` js\n * import { MultiSelect } from '@ntbjs/react-components/inputs'\n * // or\n * import MultiSelect from '@ntbjs/react-components/inputs/MultiSelect'\n * ```\n \n <br />## Option `object` format\n * Options are represented by an `Array` of `objects` with the following format:\n \n ``` js\n * {\n * value: \"Example\",\n * label: \"Example\"\n * }\n * ```\n \n The `label` is what will visible to the end-user. Whether `value` and `label`\n * should be different will depend on your use-case, but they are not required to.\n \n \n * <br />## Update handling\n * Changes from the end-user to the selected/available options can be handled with a callback function\n * passed through the `onUpdateCallback` prop, which is triggered any time the selected values change.\n \n The callback function will be passed two arguments:\n * * `action: string`\n * * `updatedOption: object`\n \n <br />#### `action`\n * A `string` indicating what kind of update was made.\n \n The possible values of `action` are:\n * * `create-option`: an option that didn't exist in the original list of available options were added\n * * `select-option`: an option was selected\n * * `deselect-option`: an option was de-selected by clicking the X in the dropdown menu\n * * `remove-value`: an option was de-selected by clicking the X on the option label/box\n * * `pop-value`: an option was de-selected with backspace\n * * `clear`: all options were de-selected by clicking the clear indicator (not currently in use)\n \n <br />#### `updatedOption`\n * Option `object`of the updated option:\n \n In addition to the default `value` and `label` keys, an `__isNew__` flag will be present if the option was\n * not part of the original list of available options, i.e. created by the user in the current \"session\".\n * This is the case regardless of whether the list is provided through `availableOptions` or\n * asynchronously through `loadOptions`.\n \n \n * <br />## Asynchronous fetching/filtering with pagination\n * The list of available options can be fetched and filtered asynchronously with a `Promise`\n * passed through the `loadOptions` prop.\n \n It will be passed two arguments:\n \n * `inputValue: string`: current input value/search\n * * `prevOptions: Array`: previously loaded options for the current search\n \n The function is triggered and the first page is fetched when the dropdown menu opens.\n * Whenever the user scrolls down to the bottom of the list, `loadOptions` will\n * be triggered again to fetch the next page.\n \n The `Promise` should return an `object` with the following keys:\n \n ``` js\n * {\n * options: Array,\n * hasMore: boolean\n * }\n * ```\n \n `options` should contain the current page of options. It will be concatenated to the previous\n * set of options automatically. The `hasMore` flag indicates whether there is another page to be fetched.\n \n Example:\n \n ``` js\n \n const availableOptions = [\n * { value: \"Example 1\", label: \"Example 1\" },\n * ...\n * { value: \"Example N\", label: \"Example N\" }\n * ];\n \n const filterOptions = inputValue => {\n * return availableOptions.filter(option => {\n * return option.label.toLowerCase().includes(inputValue.toLowerCase());\n * });\n * };\n \n const loadOptionsFunc = (inputValue, prevOptions) => {\n * const currentLength = prevOptions.length;\n * const pageLength = 10;\n \n let filteredOptions;\n \n if (inputValue) {\n * filteredOptions = filterOptions(inputValue);\n * } else {\n * filteredOptions = availableOptions;\n * }\n \n const hasMore = filteredOptions.length > currentLength + pageLength;\n * const slicedOptions = filteredOptions.slice(currentLength, currentLength + pageLength);\n \n return {\n * options: slicedOptions,\n * hasMore\n * };\n * };\n \n const loadOptions = (inputValue, prevOptions) => {\n * return new Promise(resolve => {\n * resolve(loadOptionsFunc(inputValue, prevOptions));\n * });\n * };\n * ```\n \n While waiting for the `Promise` to resolve, the component will be in a loading state.\n * The loading state is showcased in the \"Primary With Fetching Timeout\" Story.\n \n <br />#### Without asynchronous fetching/filtering\n * If you wish to not use asynchronous fetching/filtering, leave the `loadOptions` prop undefined\n * and pass the `Array` of all available options to the `availableOptions` prop instead.\n * The component will use the built-in filtering on `label` from `react-select`, and the options\n * will not be paginated.\n \n \n * <br />## \"Show more\" overlay\n * The \"Show more\" overlay must be set manually with the `showMore` prop.\n \n By default, the total number\n * of selected options will be displayed in parenthesis after the \"Show more\" text. This can be\n * disabled with the `displayTotalOnShowMore` prop.\n \n Note:\n * <br />The component has been given a max-width in these Stories.\n * This is because the \"Show more\" overlay does not work well visually when there are\n * fewer than three rows of selected options. The component itself does not have\n * a max-width, so keep this in mind when using it.\n \n <br />\n /\n\nconst showMoreHeight = 114;\n\nconst MultiSelect = React.forwardRef((props, forwardedRef) => {\n const {\n label,\n selectedOptions = [],\n availableOptions,\n loadOptions,\n onUpdateCallback,\n editText,\n creatable,\n readOnly,\n disabled,\n error,\n warning,\n onMultiValueClick,\n showMore,\n showMoreText = 'Show more',\n displayTotalOnShowMore = true,\n hidden,\n ...rest\n } = props;\n\n const [uniqueId] = useState(nanoid());\n const [selected, setSelected] = useState(selectedOptions);\n const [cacheUnique, setCacheUnique] = useState(0);\n const [displayShowMore, setDisplayShowMore] = useState(showMore && !error && !warning);\n const [focused, setFocused] = useState(false);\n\n // Track theme changes by checking the DOM\n const [isDarkMode, setIsDarkMode] = useState(() =>\n document.body.classList.contains('dark-theme')\n );\n\n useEffect(() => setSelected(selectedOptions), [selectedOptions]);\n\n useEffect(() => {\n const observer = new MutationObserver(() => {\n setIsDarkMode(document.body.classList.contains('dark-theme'));\n });\n\n observer.observe(document.body, {\n attributes: true,\n attributeFilter: ['class']\n });\n\n return () => observer.disconnect();\n }, []);\n\n /\n Custom styles for react-select components using the Styles API.\n \n Note: We use inline styles via the `styles` prop instead of styled-components\n * because styled-components clash with the latest react-select version.\n * See: https://react-select.com/styles\n \n Theme handling:\n * - Colors are imported from colors-export.js (single source of truth)\n * - Theme detection uses MutationObserver to watch body class changes\n * - Supports both explicit themes (dark-theme/light-theme classes) and\n * system preference (prefers-color-scheme media query)\n \n The getThemeColor helper function returns actual hex color values based on\n * the current theme mode (dark/light), ensuring proper theme switching without\n * requiring a styled-components ThemeProvider context.\n /\n\n const selectStyles = useMemo(() => {\n const getThemeColor = (darkKey, lightKey) => {\n const prefersDark =\n !document.body.classList.contains('light-theme') &&\n !document.body.classList.contains('dark-theme') &&\n window.matchMedia('(prefers-color-scheme: dark)').matches;\n\n const key = isDarkMode \|\| prefersDark ? darkKey : lightKey;\n return colors[key] \|\| colors['gray-500']; // Return actual hex color\n };\n\n const errorColor = colors['red-500'];\n const warningColor = colors['orange-500'];\n\n const menuBg = getThemeColor('gray-600', 'white');\n const textColor = getThemeColor('gray-100', 'gray-900');\n const placeholderColor = getThemeColor('gray-400', 'gray-500');\n const multiValueBg = getThemeColor('gray-600', 'gray-800');\n\n return {\n control: base => ({\n ...base,\n alignItems: 'center',\n background: 'transparent',\n border: error ? `1px solid ${errorColor}` : warning ? `1px solid ${warningColor}` : 'none',\n borderRadius: '3px',\n boxShadow: 'none',\n minHeight: '38px',\n opacity: disabled ? 0.5 : 1,\n pointerEvents: 'auto',\n '&:hover': {\n border: error ? `1px solid ${errorColor}` : warning ? `1px solid ${warningColor}` : 'none'\n }\n }),\n valueContainer: base => ({\n ...base,\n alignItems: 'center',\n gap: '8px',\n padding: '0 8px',\n maxHeight: displayShowMore\n ? error \|\| warning\n ? '100%'\n : `${showMoreHeight + 16}px`\n : '100%',\n overflow: 'hidden'\n }),\n multiValue: base => ({\n ...base,\n backgroundColor: multiValueBg,\n borderRadius: '3px',\n margin: '0',\n display: 'flex',\n alignItems: 'stretch',\n minHeight: '26px',\n overflow: 'hidden',\n opacity: disabled ? 0.7 : 1\n }),\n multiValueLabel: base => ({\n ...base,\n color: colors['white'],\n fontSize: '12px',\n padding: disabled \|\| readOnly ? '0 8px' : '0 3px 0 8px',\n display: 'flex',\n alignItems: 'center',\n cursor: disabled ? 'not-allowed' : readOnly ? 'default' : 'pointer'\n }),\n multiValueRemove: base => ({\n ...base,\n color: 'white',\n padding: '0 8px 0 5px',\n display: disabled \|\| readOnly ? 'none' : 'flex',\n alignItems: 'center',\n alignSelf: 'stretch',\n borderRadius: '0',\n cursor: 'pointer',\n '&:hover': {\n backgroundColor: errorColor,\n color: 'white'\n }\n }),\n menu: base => ({\n ...base,\n backgroundColor: menuBg,\n boxShadow: '0 4px 12px rgba(0,0,0,0.5)',\n zIndex: 999,\n marginTop: '4px',\n border: `1px solid ${getThemeColor('gray-500', 'gray-300')}`\n }),\n menuList: base => ({\n ...base,\n backgroundColor: 'transparent',\n padding: 0\n }),\n option: (base, state) => ({\n ...base,\n backgroundColor: state.isFocused ? getThemeColor('gray-500', 'gray-100') : 'transparent',\n color: textColor,\n cursor: 'pointer',\n fontSize: '14px',\n padding: '8px 12px',\n ':active': {\n backgroundColor: getThemeColor('gray-400', 'gray-200')\n }\n }),\n input: (base, state) => ({\n ...base,\n display: 'inline-grid',\n whiteSpace: 'nowrap',\n color: textColor,\n margin: 0,\n padding: 0,\n ':before':\n !focused && editText && !state.value\n ? {\n content: `\"${editText}\"`,\n color: placeholderColor,\n marginRight: '8px',\n lineHeight: '26px',\n gridArea: '1 / 1'\n }\n : {}\n }),\n noOptionsMessage: base => ({ ...base, color: textColor, backgroundColor: 'transparent' }),\n loadingMessage: base => ({ ...base, color: textColor, backgroundColor: 'transparent' }),\n placeholder: () => ({ display: 'none' }),\n indicatorsContainer: () => ({ display: 'none' })\n };\n }, [\n error,\n warning,\n displayShowMore,\n disabled,\n readOnly,\n editText,\n focused,\n isDarkMode,\n onMultiValueClick\n ]);\n\n const innerComponents = {\n Option: optProps => (\n <components.Option {...optProps}>\n <div\n style={{\n display: 'flex',\n justifyContent: 'space-between',\n width: '100%',\n alignItems: 'center'\n }}\n >\n <span>{optProps.label}</span>\n {optProps.isSelected && <S.DropdownOptionDeleteIcon />}\n </div>\n </components.Option>\n ),\n MultiValue: mvProps => (\n <S.MultiValueWrapper\n onMouseDown={e => {\n if (\n onMultiValueClick &&\n !readOnly &&\n !disabled &&\n !e.target.closest('.multi-select__multi-value__remove')\n ) {\n e.stopPropagation();\n onMultiValueClick(mvProps.data);\n }\n }}\n >\n <components.MultiValue {...mvProps} />\n </S.MultiValueWrapper>\n )\n };\n\n const sharedSelectProps = {\n ...rest,\n ref: forwardedRef,\n id: uniqueId,\n classNamePrefix: 'multi-select',\n styles: selectStyles,\n components: innerComponents,\n value: selected,\n options: loadOptions ? undefined : availableOptions,\n loadOptions,\n isMulti: true,\n isDisabled: disabled \|\| readOnly,\n closeMenuOnSelect: false,\n hideSelectedOptions: false,\n openMenuOnClick: true,\n onFocus: () => setFocused(true),\n onBlur: () => setFocused(false),\n onChange: (newValue, actionMeta) => {\n setSelected(newValue);\n if (onUpdateCallback) {\n const item = actionMeta.option \|\| actionMeta.removedValue;\n onUpdateCallback(actionMeta.action, item);\n }\n if (actionMeta.action === 'create-option' && loadOptions) {\n setCacheUnique(c => c + 1);\n }\n },\n cacheUniqs: loadOptions ? [cacheUnique] : undefined\n };\n\n const SelectComponent = useMemo(() => {\n if (loadOptions) return creatable ? S.AsyncCreatableMultiSelect : S.AsyncMultiSelect;\n return creatable ? S.CreatableMultiSelect : S.MultiSelect;\n }, [loadOptions, creatable]);\n\n if (hidden) return null;\n\n return (\n <S.MultiSelectWrapper>\n {label && <S.Label htmlFor={uniqueId}>{label}</S.Label>}\n <S.InnerWrapper>\n <SelectComponent {...sharedSelectProps} />\n </S.InnerWrapper>\n {displayShowMore && (\n <S.ShowMoreWrapper onClick={() => setDisplayShowMore(false)}>\n <S.ShowMoreOverlay />\n <S.ShowMoreText>\n {showMoreText} {displayTotalOnShowMore && `(${selected.length})`}\n </S.ShowMoreText>\n </S.ShowMoreWrapper>\n )}\n {(error \|\| warning) && (\n <S.ErrorMessage $error={!!error} $warning={!!warning}>\n {error \|\| warning}\n </S.ErrorMessage>\n )}\n </S.MultiSelectWrapper>\n );\n});\n\nMultiSelect.displayName = 'MultiSelect';\n\nMultiSelect.propTypes = {\n /\n \n * The label of the input field â€“ leave `undefined` to hide the label\n /\n label: PropTypes.string,\n /\n `Array` of `objects` containing the default options. This is only needed\n * when asynchronous option fetching with the `loadOptions` prop is not used.\n \n Note:\n * <br />This will be overridden by the `loadOptions` prop if both props are set.\n /\n availableOptions: PropTypes.arrayOf(PropTypes.object),\n\n /\n `Array` of `objects` containing the selected options.\n /\n selectedOptions: PropTypes.arrayOf(PropTypes.object),\n\n /\n Function with a `Promise` returning filtered options.\n \n See [Asynchronous fetching/filtering with pagination](#asynchronous-fetchingfiltering-with-pagination)\n * for details.\n \n Note:\n * <br />This will override the `availableOptions` prop if both props are set.\n /\n loadOptions: PropTypes.func,\n\n /\n Function for custom \"Loading...\" message while waiting for the first page\n * from `loadOptions` to resolve. Defaults to \"Loading...\" if no function is provided.\n /\n loadingMessageFunc: PropTypes.func,\n\n /\n Callback function for sending updates to the backend whenever the selected values are updated.\n * See [Update handling](#update-handling) for details.\n /\n onUpdateCallback: PropTypes.func,\n\n /\n Text to be displayed on the input element when the component\n * is enabled and not focused â€“ e.g. \"Add a keyword...\"\n /\n editText: PropTypes.string.isRequired,\n\n /\n Whether the user can create new options.\n /\n creatable: PropTypes.bool,\n\n /\n Callback function for formatting the message displayed in the dropdown when there\n * are no matching options, and the user has permission to create new options.\n * The callback function will be given the current input value as an argument.\n /\n createNewOptionMessageFunc: PropTypes.func,\n\n /\n If the list of options is empty, or if the current input value doesn't match\n * any of the available options and the user doesn't have permission to add options,\n * this function will be called and passed the current input value as an argument.\n /\n noOptionsMessageFunc: PropTypes.func,\n\n /\n Optional callback function to be trigger when clicking a selected option's label â€“ e.g. opening\n * a search filtered on the given multi-value's `label`.\n \n The callback function will be passed the option `object` as an argument.\n /\n onMultiValueClick: PropTypes.func,\n\n /\n Display an overlay which the user needs to click in order to\n * show the selected options list in its entirety and edit it.\n /\n showMore: PropTypes.bool,\n\n /\n Text displayed on the \"Show more\" overlay.\n /\n showMoreText: PropTypes.string,\n\n /\n Whether to display the total number of selected options after the show more text.\n /\n displayTotalOnShowMore: PropTypes.bool,\n\n /\n Whether the multi-select should be displayed in read-only mode.\n * The user can still click the selected options to trigger their on-click effect.\n /\n readOnly: PropTypes.bool,\n /\n Whether the component is hidden or visible.\n /\n hidden: PropTypes.bool,\n\n /\n Whether the multi-select should be disabled.\n * The user will not be able to trigger the on-click effect of the selected options.\n /\n disabled: PropTypes.bool,\n\n /\n Set to `true` to display a red border indicating an error.\n * Pass in a `string` instead to also show the string underneath the input field.\n \n Note:\n * <br />This overrides the \"Show more\" overlay. Errors will be prioritized over warnings.\n /\n error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n\n /\n Set to `true` to display an orange border.\n * Pass in a `string` instead to also show the string underneath the input field.\n \n Note:\n * <br />This overrides the \"Show more\" overlay. Errors will be prioritized over warnings.\n */\n warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])\n};\n\nMultiSelect.defaultProps = {\n noOptionsMessageFunc: inputValue => {\n if (inputValue) {\n return `No matches for \"${inputValue}\"`;\n } else {\n return 'No available options';\n }\n },\n showMore: false,\n displayTotalOnShowMore: true,\n readOnly: false,\n disabled: false,\n creatable: false,\n error: false,\n warning: false,\n showMoreText: 'Show more',\n hidden: false\n};\n\nexport default MultiSelect;\n"],"names":["showMoreHeight","MultiSelect","React","forwardRef","props","forwardedRef","label","selectedOptions","availableOptions","loadOptions","onUpdateCallback","editText","creatable","readOnly","disabled","error","warning","onMultiValueClick","showMore","showMoreText","displayTotalOnShowMore","hidden","rest","uniqueId","useState","nanoid","selected","setSelected","cacheUnique","setCacheUnique","displayShowMore","setDisplayShowMore","focused","setFocused","isDarkMode","setIsDarkMode","document","body","classList","contains","useEffect","observer","MutationObserver","observe","attributes","attributeFilter","disconnect","selectStyles","useMemo","getThemeColor","darkKey","lightKey","prefersDark","window","matchMedia","matches","key","colors","errorColor","warningColor","menuBg","textColor","placeholderColor","multiValueBg","control","base","alignItems","background","border","borderRadius","boxShadow","minHeight","opacity","pointerEvents","valueContainer","gap","padding","maxHeight","overflow","multiValue","backgroundColor","margin","display","multiValueLabel","color","fontSize","cursor","multiValueRemove","alignSelf","menu","zIndex","marginTop","menuList","option","state","isFocused","input","whiteSpace","value","content","marginRight","lineHeight","gridArea","noOptionsMessage","loadingMessage","placeholder","indicatorsContainer","innerComponents","Option","optProps","createElement","components","style","justifyContent","width","isSelected","S","MultiValue","mvProps","onMouseDown","e","target","closest","stopPropagation","data","sharedSelectProps","ref","id","classNamePrefix","styles","options","undefined","isMulti","isDisabled","closeMenuOnSelect","hideSelectedOptions","openMenuOnClick","onFocus","onBlur","onChange","newValue","actionMeta","item","removedValue","action","c","cacheUniqs","SelectComponent","htmlFor","onClick","length","$error","$warning","displayName","propTypes","process","env","NODE_ENV","PropTypes","string","arrayOf","object","func","loadingMessageFunc","isRequired","bool","createNewOptionMessageFunc","noOptionsMessageFunc","oneOfType","defaultProps","inputValue"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "2.0.2-rc.12",
+  "version": "2.0.2-rc.13",
   "publishConfig": {
     "access": "public"
   },