@ntbjs/react-components 2.0.13 → 3.0.0-rc.1

package/build/inputs/MultiSelect/MultiSelect.js

@@ -1,11 +1,12 @@
 import React__default, { useState, useEffect, useMemo } from 'react';
-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';
+import { AsyncCreatableMultiSelect, AsyncMultiSelect, CreatableMultiSelect, MultiSelect as MultiSelect$1, MultiSelectWrapper, Label, InnerWrapper, ShowMoreWrapper, ShowMoreOverlay, ShowMoreText, ErrorMessage, MultiValueWrapper, DropdownOptionDeleteIcon } from './MultiSelect.styled.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 const showMoreHeight = 114;
+const defaultNoOptionsMessage = inputValue => inputValue ? `No matches for "${inputValue}"` : 'No available options';
 const MultiSelect = React__default.forwardRef((props, forwardedRef) => {
   const {
     label,
@@ -14,16 +15,17 @@ const MultiSelect = React__default.forwardRef((props, forwardedRef) => {
     loadOptions,
     onUpdateCallback,
     editText,
-    creatable,
-    readOnly,
-    disabled,
-    error,
-    warning,
+    noOptionsMessageFunc = defaultNoOptionsMessage,
+    creatable = false,
+    readOnly = false,
+    disabled = false,
+    error = false,
+    warning = false,
     onMultiValueClick,
-    showMore,
+    showMore = false,
     showMoreText = 'Show more',
     displayTotalOnShowMore = true,
-    hidden,
+    hidden = false,
     ...rest
   } = props;
   const [uniqueId] = useState(nanoid());
@@ -170,25 +172,53 @@ const MultiSelect = React__default.forwardRef((props, forwardedRef) => {
     };
   }, [error, warning, displayShowMore, disabled, readOnly, editText, focused, isDarkMode, onMultiValueClick]);
   const innerComponents = {
-    Option: optProps => React__default.createElement(components.Option, optProps, React__default.createElement("div", {
-      style: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        width: '100%',
-        alignItems: 'center'
-      }
-    }, React__default.createElement("span", null, optProps.label), optProps.isSelected && React__default.createElement(DropdownOptionDeleteIcon, null))),
-    MultiValue: mvProps => React__default.createElement(MultiValueWrapper, {
+    Option: optProps => jsx(components.Option, {
+      ...optProps,
+      children: jsxs("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'space-between',
+          width: '100%',
+          alignItems: 'center'
+        },
+        children: [jsx("span", {
+          children: optProps.label
+        }), optProps.isSelected && jsx(DropdownOptionDeleteIcon, {})]
+      })
+    }),
+    MultiValue: mvProps => jsx(MultiValueWrapper, {
       onMouseDown: e => {
         if (onMultiValueClick && !readOnly && !disabled && !e.target.closest('.multi-select__multi-value__remove')) {
           e.stopPropagation();
           onMultiValueClick(mvProps.data);
         }
-      }
-    }, React__default.createElement(components.MultiValue, mvProps))
+      },
+      children: jsx(components.MultiValue, {
+        ...mvProps
+      })
+    })
   };
   const sharedSelectProps = {
     ...rest,
+    onFocus: event => {
+      setFocused(true);
+      rest.onFocus?.(event);
+    },
+    onBlur: event => {
+      setFocused(false);
+      rest.onBlur?.(event);
+    },
+    onChange: (newValue, actionMeta) => {
+      setSelected(newValue);
+      if (onUpdateCallback) {
+        const item = actionMeta.option || actionMeta.removedValue;
+        onUpdateCallback(actionMeta.action, item);
+      }
+      if (actionMeta.action === 'create-option' && loadOptions) {
+        setCacheUnique(c => c + 1);
+      }
+      rest.onChange?.(newValue, actionMeta);
+    },
     ref: forwardedRef,
     id: uniqueId,
     classNamePrefix: 'multi-select',
@@ -202,18 +232,6 @@ const MultiSelect = React__default.forwardRef((props, forwardedRef) => {
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     openMenuOnClick: true,
-    onFocus: () => setFocused(true),
-    onBlur: () => setFocused(false),
-    onChange: (newValue, actionMeta) => {
-      setSelected(newValue);
-      if (onUpdateCallback) {
-        const item = actionMeta.option || actionMeta.removedValue;
-        onUpdateCallback(actionMeta.action, item);
-      }
-      if (actionMeta.action === 'create-option' && loadOptions) {
-        setCacheUnique(c => c + 1);
-      }
-    },
     cacheUniqs: loadOptions ? [cacheUnique] : undefined
   };
   const SelectComponent = useMemo(() => {
@@ -221,55 +239,27 @@ const MultiSelect = React__default.forwardRef((props, forwardedRef) => {
     return creatable ? CreatableMultiSelect : MultiSelect$1;
   }, [loadOptions, creatable]);
   if (hidden) return null;
-  return React__default.createElement(MultiSelectWrapper, null, label && React__default.createElement(Label, {
-    htmlFor: uniqueId
-  }, label), React__default.createElement(InnerWrapper, null, React__default.createElement(SelectComponent, sharedSelectProps)), displayShowMore && React__default.createElement(ShowMoreWrapper, {
-    onClick: () => setDisplayShowMore(false)
-  }, React__default.createElement(ShowMoreOverlay, null), React__default.createElement(ShowMoreText, null, showMoreText, " ", displayTotalOnShowMore && `(${selected.length})`)), (error || warning) && React__default.createElement(ErrorMessage, {
-    $error: !!error,
-    $warning: !!warning
-  }, error || warning));
+  return jsxs(MultiSelectWrapper, {
+    children: [label && jsx(Label, {
+      htmlFor: uniqueId,
+      children: label
+    }), jsx(InnerWrapper, {
+      children: jsx(SelectComponent, {
+        ...sharedSelectProps
+      })
+    }), displayShowMore && jsxs(ShowMoreWrapper, {
+      onClick: () => setDisplayShowMore(false),
+      children: [jsx(ShowMoreOverlay, {}), jsxs(ShowMoreText, {
+        children: [showMoreText, " ", displayTotalOnShowMore && `(${selected.length})`]
+      })]
+    }), (error || warning) && jsx(ErrorMessage, {
+      $error: !!error,
+      $warning: !!warning,
+      children: error || warning
+    })]
+  });
 });
 MultiSelect.displayName = 'MultiSelect';
-MultiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
-  label: PropTypes.string,
-  availableOptions: PropTypes.arrayOf(PropTypes.object),
-  selectedOptions: PropTypes.arrayOf(PropTypes.object),
-  loadOptions: PropTypes.func,
-  loadingMessageFunc: PropTypes.func,
-  onUpdateCallback: PropTypes.func,
-  editText: PropTypes.string.isRequired,
-  creatable: PropTypes.bool,
-  createNewOptionMessageFunc: PropTypes.func,
-  noOptionsMessageFunc: PropTypes.func,
-  onMultiValueClick: PropTypes.func,
-  showMore: PropTypes.bool,
-  showMoreText: PropTypes.string,
-  displayTotalOnShowMore: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  hidden: PropTypes.bool,
-  disabled: PropTypes.bool,
-  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
-} : {};
-MultiSelect.defaultProps = {
-  noOptionsMessageFunc: inputValue => {
-    if (inputValue) {
-      return `No matches for "${inputValue}"`;
-    } else {
-      return 'No available options';
-    }
-  },
-  showMore: false,
-  displayTotalOnShowMore: true,
-  readOnly: false,
-  disabled: false,
-  creatable: false,
-  error: false,
-  warning: false,
-  showMoreText: 'Show more',
-  hidden: false
-};
 
 export { MultiSelect as default };
 //# sourceMappingURL=MultiSelect.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.js","sources":["../../../src/components/inputs/MultiSelect/MultiSelect.js"],"sourcesContent":["import React, { useState, useEffect, useMemo } from 'react';\nimport PropTypes from 'prop-types';\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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"}
+{"version":3,"file":"MultiSelect.js","sources":["../../../src/components/inputs/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo } from 'react';\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 defaultNoOptionsMessage = inputValue =>\n  inputValue ? `No matches for \"${inputValue}\"` : 'No available options';\n\n/**\n * MultiSelect's OWN props — the 19 members that were the entirety of this component's\n * declared surface until NMB-3998, unchanged. They stay authoritative: `MultiSelectProps`\n * below `Omit`s these keys out of the base before intersecting, so nothing here is\n * narrowed by a colliding member of react-select's props.\n */\nexport type MultiSelectOwnProps = {\n  /**\n   *\n   * The label of the input field – leave `undefined` to hide the label\n   */\n  label?: 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?: any[];\n  /**\n   * `Array` of `objects` containing the selected options.\n   */\n  selectedOptions?: any[];\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?: (...args: any[]) => any;\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?: (...args: any[]) => any;\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?: (...args: any[]) => any;\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: string;\n  /**\n   * Whether the user can create new options.\n   */\n  creatable?: boolean;\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?: (...args: any[]) => any;\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?: (...args: any[]) => any;\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?: (...args: any[]) => any;\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?: boolean;\n  /**\n   * Text displayed on the \"Show more\" overlay.\n   */\n  showMoreText?: string;\n  /**\n   * Whether to display the total number of selected options after the show more text.\n   */\n  displayTotalOnShowMore?: boolean;\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?: boolean;\n  /**\n   * Whether the component is hidden or visible.\n   */\n  hidden?: boolean;\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?: boolean;\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?: boolean | string;\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?: boolean | string;\n};\n\n/**\n * THE PUBLISHED PROPS TYPE. It has a base, and that is playbook §C.2, not a convenience.\n *\n * This component destructures `...rest` (below) and spreads it into react-select —\n * `sharedSelectProps = { ...rest, … }`, handed to `<SelectComponent {...sharedSelectProps} />`.\n * A closed 19-member type therefore REJECTED props that this component forwards and that\n * work at runtime: measured against mb-main-client, `className`, `name`, `onBlur` and\n * `required` are all real react-select props being passed today and all four were a hard\n * TS2322 the moment the library started shipping `.d.ts`. That is the library lying about\n * its own contract, which is the exact class §C.2 exists to prevent — and it is NOT the\n * same finding as the other 22 rejected consumer attributes, which are props no component\n * here spreads anywhere and which stay rejected on purpose.\n *\n * THE BASE IS READ OFF WHAT `rest` IS ACTUALLY SPREAD ONTO, never assumed. That target is\n * one of the four `styled(<react-select …>)` wrappers, chosen at runtime by `loadOptions`\n * and `creatable`. `S.MultiSelect` — `styled(Select)` — is the deliberate choice among the\n * four: `CreatableSelect`/`AsyncPaginate` add props on top of the plain select's surface,\n * so plain `Select` is the set that is valid in ALL FOUR configurations. Basing this on the\n * async-creatable wrapper instead would admit `debounceTimeout` and friends in the default\n * configuration, where they do nothing — the same mistake in the other direction.\n *\n * `Omit<Base, keyof Own> & Own`, NOT `Base & Own`. An intersection intersects a colliding\n * MEMBER rather than replacing it; measured on `TextArea`, `rows?: number | string` met\n * `styled.textarea`'s `rows?: number` and `rows=\"4\"` became an error — half a published\n * prop silently deleted by the pass meant to widen it. Disjoint pairs collapse to `never`.\n *\n * `ComponentPropsWithoutRef`, NOT `…WithRef`. `React.forwardRef` below supplies `ref`\n * itself; `WithRef` was measured to let `<MultiSelect ref={…} />` compile with the ref\n * silently dropped.\n *\n * BOTH ALIASES ARE `export`ed AND THE `const` BELOW IS ANNOTATED, for declaration emit\n * only — same mechanism and same audit as `CompactAutocompleteSelect` (577fc8d, §G.4.1).\n * tsc prints an exported alias from its source text and EXPANDS an unexported one, and the\n * expansion here reaches react-select's `PublicBaseSelectProps` /\n * `StateManagerAdditionalProps`, which `react-select`'s `exports` map does not serve:\n * TS2883, and with `noEmitOnError: false` that means the `.d.ts` is silently not written.\n * The annotation on the `const` is needed for the same reason — `forwardRef` infers\n * `ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<any>>` and tsc computes\n * `PropsWithoutRef<P>` eagerly, which re-expands what the exported alias just avoided.\n *\n * THE SWALLOW THIS PARAGRAPH USED TO RECORD AS OPEN IS FIXED. `sharedSelectProps` still\n * lists 14 keys after `...rest` and they still win — deliberately, and the reasoning is\n * written out at the literal itself — but `onFocus`, `onBlur` and `onChange` are no longer\n * among them: they now run the component's own logic and then call the caller's handler.\n * So `onBlur`, the one a consumer passes today, is both admitted by this type and actually\n * forwarded. Do not narrow this type to \"reflect\" the remaining 14: they are the runtime\n * form of props this component already declares (`selectedOptions`, `availableOptions`,\n * `disabled`/`readOnly`, `loadOptions`) plus its own rendering and CSS contract, and\n * `Omit`ting them would only stop react-select's own names from being accepted while\n * changing nothing about which value wins.\n */\nexport type MultiSelectProps = Omit<\n  React.ComponentPropsWithoutRef<typeof S.MultiSelect>,\n  keyof MultiSelectOwnProps\n> &\n  MultiSelectOwnProps;\n\nconst MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<any>> =\n  React.forwardRef<any, MultiSelectProps>((props, forwardedRef) => {\n    const {\n      label,\n      selectedOptions = [],\n      availableOptions,\n      loadOptions,\n      onUpdateCallback,\n      editText,\n      /*\n       * DEAD PUBLIC PROP, and this is the narrow directive that records it rather than the\n       * file-scope `eslint-disable no-unused-vars` block comment that used to hide it, on\n       * line 2, above the imports.\n       *\n       * `noOptionsMessageFunc` is documented, defaulted, destructured — and then never read.\n       * It is NOT the same thing as the `noOptionsMessage` key at ~line 467, which is a\n       * react-select STYLE function, not this callback. Compare\n       * `CompactAutocompleteSelect`, which has the same prop and genuinely wires it into\n       * react-select's `noOptionsMessage`. So this component silently ignores it.\n       *\n       * Deleting it is an API break and needs its own decision; wiring it up is a behaviour\n       * change that the visual gate would have to re-record. Recorded here so that the next\n       * reader sees a known finding instead of an unexplained suppression.\n       */\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      noOptionsMessageFunc = defaultNoOptionsMessage,\n      creatable = false,\n      readOnly = false,\n      disabled = false,\n      error = false,\n      warning = false,\n      onMultiValueClick,\n      showMore = false,\n      showMoreText = 'Show more',\n      displayTotalOnShowMore = true,\n      hidden = false,\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\n            ? `1px solid ${errorColor}`\n            : warning\n              ? `1px solid ${warningColor}`\n              : 'none',\n          borderRadius: '3px',\n          boxShadow: 'none',\n          minHeight: '38px',\n          opacity: disabled ? 0.5 : 1,\n          pointerEvents: 'auto',\n          '&:hover': {\n            border: error\n              ? `1px solid ${errorColor}`\n              : warning\n                ? `1px solid ${warningColor}`\n                : '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              /*\n               * NMB-3998: `e.target` is `EventTarget`, which has no `closest` — TS2339. In a\n               * DOM mouse event the target is always an Element, so the narrowing is a fact\n               * about the event, not a guess. Type-only assertion; erases to the same call.\n               */\n              !(e.target as Element).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    /*\n     * `...rest` IS SPREAD FIRST, SO EVERY KEY BELOW IT WINS OVER THE CALLER. That was a\n     * silent swallow for `onFocus`/`onBlur`/`onChange` until NMB-3998, and the three\n     * groups below are ordered deliberately. Do not flatten this back into one list.\n     *\n     * GROUP 1 — COMPOSED. The component has internal behaviour on all three (focus state,\n     * selection state), so it can neither defer to the caller nor drop them: each key\n     * runs the component's own logic and THEN calls the caller's handler, with the\n     * arguments react-select passed. Measured on the pre-fix literal with a TS AST walk,\n     * not eyeballed: `...rest` was element 1 of 18 and `onBlur` element 16, so\n     * `mb-main-client/src/components/misc_settings/search_settings.tsx:86` — an `onBlur`\n     * out of a react-hook-form `Controller` render prop — had never fired, which\n     * silently disabled `mode: 'onBlur'` validation and `touched` at that call site.\n     * The handlers are read off `rest` rather than destructured so that the props type\n     * keeps describing them as forwarded, which they now genuinely are.\n     *\n     * GROUP 2 — COMPONENT-OWNED, AND THEY MUST STAY LAST. A caller value for any of\n     * these breaks the component's own rendering or its CSS contract, so being overwritten\n     * is the correct behaviour and NOT the bug that was fixed here:\n     *   ref/id           `id` is a `nanoid()` and `S.Label`'s `htmlFor` points at it\n     *   classNamePrefix  'multi-select' is what `MultiSelect.styled.ts`'s selectors and\n     *                    `MultiValueWrapper`'s `.multi-select__multi-value__remove` test target\n     *   styles           the whole themed Styles API object built above\n     *   components       `innerComponents`, which is what wires `onMultiValueClick`\n     *   isMulti          the component IS the multi variant; `false` would strip the chips\n     *   value/options/isDisabled/cacheUniqs and the three menu booleans are derived from\n     *                    the declared props above (`selectedOptions`, `availableOptions`,\n     *                    `disabled || readOnly`, `loadOptions`) and are named differently\n     *                    from them, so a caller CAN put them in `rest` — verified, they are\n     *                    not destructured — and the component still has to win: they are\n     *                    the runtime form of props it already declares. Only `loadOptions`\n     *                    is structurally safe here, because it is destructured by that name.\n     */\n    const sharedSelectProps = {\n      ...rest,\n\n      /* Group 1 — composed: component first, then the caller's handler. */\n      onFocus: event => {\n        setFocused(true);\n        rest.onFocus?.(event);\n      },\n      onBlur: event => {\n        setFocused(false);\n        rest.onBlur?.(event);\n      },\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        rest.onChange?.(newValue, actionMeta);\n      },\n\n      /* Group 2 — component-owned. Keep last; see the comment above. */\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      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\nexport default MultiSelect;\n"],"names":["showMoreHeight","defaultNoOptionsMessage","inputValue","MultiSelect","React","forwardRef","props","forwardedRef","label","selectedOptions","availableOptions","loadOptions","onUpdateCallback","editText","noOptionsMessageFunc","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","_jsx","components","children","_jsxs","style","justifyContent","width","isSelected","S","MultiValue","mvProps","onMouseDown","e","target","closest","stopPropagation","data","sharedSelectProps","onFocus","event","onBlur","onChange","newValue","actionMeta","item","removedValue","action","c","ref","id","classNamePrefix","styles","options","undefined","isMulti","isDisabled","closeMenuOnSelect","hideSelectedOptions","openMenuOnClick","cacheUniqs","SelectComponent","htmlFor","onClick","length","$error","$warning","displayName"],"mappings":"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"}

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

@@ -5,83 +5,77 @@ import { withAsyncPaginate, AsyncPaginate } from 'react-select-async-paginate';
 import { applyDefaultTheme } from '../../utils/defaultTheme.js';
 import { ReactComponent as SvgClose } from '../../icons/close.svg.js';
 
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
 const AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);
-const sharedStyle = css`
-  font-family: ${props => props.theme.primaryFontFamily};
-  font-size: 12px;
-  position: relative;
-`;
-const MultiSelectWrapper = styled.div.attrs(applyDefaultTheme)`
-  position: relative;
-`;
-const InnerWrapper = styled.div`
-  position: relative;
-  width: 100%;
-`;
-const Label = styled.label.attrs(applyDefaultTheme)`
-  color: ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
-  font-size: 0.875rem;
-  margin-bottom: 4px;
-  display: block;
-`;
-const MultiSelect = styled(Select).attrs(applyDefaultTheme)`
-  ${sharedStyle}
-`;
-const CreatableMultiSelect = styled(CreatableSelect).attrs(applyDefaultTheme)`
-  ${sharedStyle}
-`;
-const AsyncMultiSelect = styled(AsyncPaginate).attrs(applyDefaultTheme)`
-  ${sharedStyle}
-`;
-const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate).attrs(applyDefaultTheme)`
-  ${sharedStyle}
-`;
-const MultiValueWrapper = styled.div`
-  border-radius: 3px;
-  display: flex;
-`;
-const DropdownOptionDeleteIcon = styled(SvgClose).attrs(applyDefaultTheme)`
-  width: 10px;
-  stroke: ${props => props.theme.themeProp('stroke', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};
-`;
-const ShowMoreWrapper = styled.div.attrs(applyDefaultTheme)`
-  align-items: end;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('emerald-500'))}
-
-  :hover {
-    cursor: pointer;
-    text-decoration: underline;
-  }
-`;
-const ShowMoreOverlay = styled.div.attrs(applyDefaultTheme)`
-  align-items: end;
-  display: block;
-  height: 100%;
-  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)`
-  font-size: 0.875rem;
-  width: 100%;
-  ${props => props.theme.themeProp('background-color', '#121212', '#fefefe')}
-`;
-const ErrorMessage = styled.div.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;
-`;
+const sharedStyle = css(["font-family:", ";font-size:12px;position:relative;"], props => props.theme.primaryFontFamily);
+const MultiSelectWrapper = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__MultiSelectWrapper",
+  componentId: "sc-6g3cex-0"
+})(["position:relative;"]);
+const InnerWrapper = styled.div.withConfig({
+  displayName: "MultiSelectstyled__InnerWrapper",
+  componentId: "sc-6g3cex-1"
+})(["position:relative;width:100%;"]);
+const Label = styled.label.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__Label",
+  componentId: "sc-6g3cex-2"
+})(["color:", ";font-size:0.875rem;margin-bottom:4px;display:block;"], props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')));
+const MultiSelect = styled(Select).attrs(applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__MultiSelect",
+  componentId: "sc-6g3cex-3"
+})(["", ""], sharedStyle);
+const CreatableMultiSelect = styled(CreatableSelect).attrs(applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__CreatableMultiSelect",
+  componentId: "sc-6g3cex-4"
+})(["", ""], sharedStyle);
+const AsyncMultiSelect = styled(AsyncPaginate).attrs(applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__AsyncMultiSelect",
+  componentId: "sc-6g3cex-5"
+})(["", ""], sharedStyle);
+const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate).attrs(applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__AsyncCreatableMultiSelect",
+  componentId: "sc-6g3cex-6"
+})(["", ""], sharedStyle);
+const MultiValueWrapper = styled.div.withConfig({
+  displayName: "MultiSelectstyled__MultiValueWrapper",
+  componentId: "sc-6g3cex-7"
+})(["border-radius:3px;display:flex;"]);
+const DropdownOptionDeleteIcon = styled(SvgClose).withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__DropdownOptionDeleteIcon",
+  componentId: "sc-6g3cex-8"
+})(["width:10px;stroke:", ";"], props => props.theme.themeProp('stroke', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')));
+const ShowMoreWrapper = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__ShowMoreWrapper",
+  componentId: "sc-6g3cex-9"
+})(["align-items:end;display:flex;flex-direction:column;height:100%;left:0;position:absolute;top:0;width:100%;", " :hover{cursor:pointer;text-decoration:underline;}"], props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('emerald-500')));
+const ShowMoreOverlay = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__ShowMoreOverlay",
+  componentId: "sc-6g3cex-10"
+})(["align-items:end;display:block;height:100%;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.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__ShowMoreText",
+  componentId: "sc-6g3cex-11"
+})(["font-size:0.875rem;width:100%;", ""], props => props.theme.themeProp('background-color', '#121212', '#fefefe'));
+const ErrorMessage = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "MultiSelectstyled__ErrorMessage",
+  componentId: "sc-6g3cex-12"
+})(["color:", ";font-size:0.75rem;margin-top:8px;padding:0 12px;"], props => props.$error ? props.theme.getColor('red-500') : props.$warning ? props.theme.getColor('orange-500') : 'inherit');
 
 export { AsyncCreatableMultiSelect, AsyncMultiSelect, CreatableMultiSelect, DropdownOptionDeleteIcon, ErrorMessage, InnerWrapper, Label, MultiSelect, MultiSelectWrapper, MultiValueWrapper, 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 Select from 'react-select';\nimport CreatableSelect from 'react-select/creatable';\nimport { AsyncPaginate, withAsyncPaginate } from 'react-select-async-paginate';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\nimport { ReactComponent as CloseIcon } from '../../../icons/close.svg';\n\nconst AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);\n\nconst sharedStyle = css`\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 12px;\n  position: relative;\n`;\n\nexport const MultiSelectWrapper = styled.div.attrs(applyDefaultTheme)`\n  position: relative;\n`;\n\nexport const InnerWrapper = styled.div`\n  position: relative;\n  width: 100%;\n`;\n\nexport const Label = styled.label.attrs(applyDefaultTheme)`\n  color: ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('white'),\n      props.theme.getColor('gray-700')\n    )};\n  font-size: 0.875rem;\n  margin-bottom: 4px;\n  display: block;\n`;\n\nexport const MultiSelect = styled(Select).attrs(applyDefaultTheme)`\n  ${sharedStyle}\n`;\nexport const CreatableMultiSelect = styled(CreatableSelect).attrs(applyDefaultTheme)`\n  ${sharedStyle}\n`;\nexport const AsyncMultiSelect = styled(AsyncPaginate).attrs(applyDefaultTheme)`\n  ${sharedStyle}\n`;\nexport const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate).attrs(\n  applyDefaultTheme\n)`\n  ${sharedStyle}\n`;\n\nexport const MultiValueWrapper = styled.div`\n  border-radius: 3px;\n  display: flex;\n`;\n\nexport const DropdownOptionDeleteIcon = styled(CloseIcon).attrs(applyDefaultTheme)`\n  width: 10px;\n  stroke: ${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  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  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","sharedStyle","css","props","theme","primaryFontFamily","MultiSelectWrapper","styled","div","attrs","applyDefaultTheme","InnerWrapper","Label","label","themeProp","getColor","MultiSelect","Select","CreatableMultiSelect","AsyncMultiSelect","AsyncPaginate","AsyncCreatableMultiSelect","MultiValueWrapper","DropdownOptionDeleteIcon","CloseIcon","ShowMoreWrapper","ShowMoreOverlay","ShowMoreText","ErrorMessage","$error","$warning"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.styled.js","sources":["../../../src/components/inputs/MultiSelect/MultiSelect.styled.ts"],"sourcesContent":["/*\n * $-transient-prop pattern: rules in\n * `src/components/layout/SectionSeparator/SectionSeparator.styled.ts`, derivation and\n * measurements in `scripts/TS-MIGRATION-PLAYBOOK.md` §J.\n *\n * THE DISTINCTIVE CASE HERE IS `styled(<third-party component that has its own `theme`\n * prop>)`. Four of this file's six errors are TS2345 on `.attrs(applyDefaultTheme)` and\n * none of them is about a transient prop — see `SelectThemeProp` below. §J.3 measured\n * that introducing a `P` adds no `.attrs()` assignability errors; this file is the\n * converse, where the `.attrs()` error is already there and a `P` is what REMOVES it.\n *\n * THE SECOND DISTINCTIVE CASE, and it only appears under `--declaration`: an INFERRED\n * `styled(<react-select component>)` type is unprintable, so this file's `.d.ts` was\n * silently skipped. See `SelectWrapper` below. §G.4.\n */\nimport type React from 'react';\nimport styled, { css } from 'styled-components';\nimport Select from 'react-select';\nimport CreatableSelect from 'react-select/creatable';\nimport { AsyncPaginate, withAsyncPaginate } from 'react-select-async-paginate';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\nimport { ReactComponent as CloseIcon } from '../../../icons/close.svg';\n\nimport type { PartialNtbTheme } from '../../../utils/defaultTheme';\n\n/**\n * The `theme` prop of the four react-select wrappers below, restated as OUR theme.\n *\n * WHY THIS EXISTS. `theme` is the one prop name that both styled-components and\n * react-select claim. react-select declares it `ThemeConfig = Theme | ((t: Theme) => Theme)`\n * and its `Theme` requires `borderRadius`, which `NtbTheme` does not have — so\n * `.attrs(applyDefaultTheme)`, whose return type is `{ theme: NtbTheme }`, was\n * unassignable to `Attrs<SelectProps>` and each wrapper reported:\n *\n *   TS2345 … Types of property 'theme' are incompatible.\n *     Type 'NtbTheme' is not assignable to type 'ThemeConfig'.\n *       Property 'borderRadius' is missing in type 'NtbTheme' but required in type 'Theme'.\n *\n * `.attrs<{ theme?: PartialNtbTheme }>` fixes it because `attrs`' generic is applied as\n * `Substitute<OuterProps, P> = FastOmit<OuterProps, keyof P> & P` — i.e. declaring\n * `theme` REPLACES react-select's declaration of it rather than intersecting with it.\n *\n * AND THAT IS THE TRUTH ABOUT THIS BOUNDARY, not a workaround. At runtime `.attrs()`\n * hands react-select the merged `NtbTheme`, and react-select's `getTheme()` does\n * `{ ...its defaultTheme, ...this.props.theme }`: our `colors` and `spacing` win — which\n * is why `ThemeColors`/`ThemeSpacing` in `utils/defaultTheme.ts` carry react-select's\n * member names and not design-token names — and `borderRadius` falls through to\n * react-select's own `4`. `NtbTheme` is deliberately a PARTIAL override of react-select's\n * theme, so `ThemeConfig` was never the right type for this prop here.\n *\n * `PartialNtbTheme` and not `NtbTheme` because this is the INPUT side: a caller may pass\n * any subset and `applyDefaultTheme` fills the rest in, exactly as `ThemedProps` states\n * for every other file. Do NOT \"fix\" this by adding `borderRadius` to `NtbTheme`: that\n * would hand react-select a border radius it does not get today and is a render change.\n */\ninterface SelectThemeProp {\n  /** A partial override merged over `defaultTheme` by `applyDefaultTheme`. */\n  theme?: PartialNtbTheme;\n}\n\n/**\n * The WRITTEN type of the four `styled(<react-select component>)` exports below, and the\n * reason they are annotated at all when nothing else in this repo is.\n *\n * `styled(Select).attrs<SelectThemeProp>(…)` INFERS a correct type. It is not a\n * WRITEABLE one: `tsc --declaration` has to print it into `MultiSelect.styled.d.ts`, the\n * printed form expands to react-select's `PublicBaseSelectProps` and\n * `StateManagerAdditionalProps`, and neither is re-exported from `react-select`'s public\n * entry — react-select has an `exports` map with no wildcard, so\n * `react-select/dist/declarations/src/Select` does not resolve for a consumer at all.\n * The result was 11 x TS2883 in this file, and the consequence was worse than the\n * message: `noEmitOnError` is false, so the build \"succeeded\" while this file's `.d.ts`\n * was SILENTLY NOT WRITTEN.\n *\n * A generic alias fixes it because tsc prints an alias APPLICATION by reference —\n * `SelectWrapper<typeof Select>` — instead of expanding it, and `typeof Select` is\n * `typeof import('react-select').default`, which is nameable. Nothing here is widened or\n * narrowed for the sake of the declaration: `Omit<ComponentProps<C>, keyof P> & P` is\n * exactly styled-components' own `Substitute<OuterProps, P>`, which is the rule\n * `SelectThemeProp` above relies on.\n *\n * What IS given up is the styled-components-specific surface of these four bindings —\n * `.withConfig()`, `.attrs()` and re-wrapping with `styled(S.MultiSelect)`. Audited:\n * nothing in this repo does any of the three to them. Adding one means annotating with\n * `IStyledComponent` instead, which puts the same non-portable expansion back.\n */\ntype SelectWrapper<C extends React.ComponentType<any>> = React.ComponentType<\n  Omit<React.ComponentProps<C>, keyof SelectThemeProp> & SelectThemeProp\n>;\n\n/*\n * Single-argument, and it stays that way — peer floor `styled-components: >=5.1.0`, and\n * the two majors disagree on the second parameter. §J.4. `prop` needs the annotation\n * because `withConfig` takes this by reference, so it gets no contextual typing.\n */\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nconst AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);\n\nconst sharedStyle = css`\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 12px;\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  position: relative;\n  width: 100%;\n`;\n\nexport const Label = styled.label\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  color: ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('white'),\n      props.theme.getColor('gray-700')\n    )};\n  font-size: 0.875rem;\n  margin-bottom: 4px;\n  display: block;\n`;\n\n/*\n * All four carry `SelectThemeProp` for the reason documented at that interface. They have\n * no `withConfig`/`shouldForwardProp` — react-select is a component, not a DOM element, so\n * there is nothing to filter — and no transient prop of their own.\n */\nexport const MultiSelect: SelectWrapper<typeof Select> = styled(Select).attrs<SelectThemeProp>(\n  applyDefaultTheme\n)`\n  ${sharedStyle}\n`;\nexport const CreatableMultiSelect: SelectWrapper<typeof CreatableSelect> = styled(\n  CreatableSelect\n).attrs<SelectThemeProp>(applyDefaultTheme)`\n  ${sharedStyle}\n`;\nexport const AsyncMultiSelect: SelectWrapper<typeof AsyncPaginate> = styled(\n  AsyncPaginate\n).attrs<SelectThemeProp>(applyDefaultTheme)`\n  ${sharedStyle}\n`;\nexport const AsyncCreatableMultiSelect: SelectWrapper<typeof AsyncCreatableSelectPaginate> = styled(\n  AsyncCreatableSelectPaginate\n).attrs<SelectThemeProp>(applyDefaultTheme)`\n  ${sharedStyle}\n`;\n\nexport const MultiValueWrapper = styled.div`\n  border-radius: 3px;\n  display: flex;\n`;\n\nexport const DropdownOptionDeleteIcon = styled(CloseIcon)\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  width: 10px;\n  stroke: ${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  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\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-items: end;\n  display: block;\n  height: 100%;\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\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-size: 0.875rem;\n  width: 100%;\n  ${props => props.theme.themeProp('background-color', '#121212', '#fefefe')}\n`;\n\n/**\n * `MultiSelect.tsx` renders `<S.ErrorMessage $error={!!error} $warning={!!warning}>`\n * (line 461), so both are `boolean` — the `!!` is in the JSX, not here. Optional per\n * §J.5; the template's own ternary chain already ends in `'inherit'` for the\n * neither-set case.\n */\ninterface ErrorMessageStyleProps {\n  /** `!!error` — red. Wins over `$warning` when both are set. */\n  $error?: boolean;\n  /** `!!warning` — orange. */\n  $warning?: boolean;\n}\n\nexport const ErrorMessage = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<ErrorMessageStyleProps>(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":["shouldForwardProp","prop","startsWith","AsyncCreatableSelectPaginate","withAsyncPaginate","CreatableSelect","sharedStyle","css","props","theme","primaryFontFamily","MultiSelectWrapper","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","InnerWrapper","Label","label","themeProp","getColor","MultiSelect","Select","CreatableMultiSelect","AsyncMultiSelect","AsyncPaginate","AsyncCreatableMultiSelect","MultiValueWrapper","DropdownOptionDeleteIcon","CloseIcon","ShowMoreWrapper","ShowMoreOverlay","ShowMoreText","ErrorMessage","$error","$warning"],"mappings":"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"}