@rescui/select 0.1.1

package/lib/parts/native-select.js

@@ -0,0 +1,282 @@
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.array.join.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import { useTheme } from '@rescui/ui-contexts';
+import { optionType, optionsGroupType, noOptionsMessageType } from '../common-prop-types.js';
+import SelectTrigger from './trigger.js';
+import FormTriggerWrapper from './form-trigger-wrapper.js';
+import styles from './native-select.module.pcss.js';
+var DEFAULT_NO_OPTIONS_MESSAGES = {
+  noOptions: 'No options',
+  loading: 'Loading...'
+};
+var PLACEHOLDER_VALUE = '__placeholder__';
+
+function isString(s) {
+  return Object.prototype.toString.call(s) === '[object String]';
+}
+
+var isOptionsGroup = function isOptionsGroup(optionOrGroup) {
+  return typeof optionOrGroup.options !== 'undefined';
+};
+
+var collectOptionGroupValues = function collectOptionGroupValues(options) {
+  return _mapInstanceProperty(options).call(options, function (_ref) {
+    var value = _ref.value;
+    return value;
+  }).join('-');
+};
+
+var Option = function Option(_ref2) {
+  var value = _ref2.value,
+      label = _ref2.label,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled;
+  return /*#__PURE__*/React.createElement("option", {
+    value: value,
+    disabled: disabled
+  }, label);
+};
+
+var OptionGroup = function OptionGroup(_ref3) {
+  var _ref3$options = _ref3.options,
+      options = _ref3$options === void 0 ? [] : _ref3$options,
+      _ref3$label = _ref3.label,
+      label = _ref3$label === void 0 ? '' : _ref3$label,
+      _ref3$disabled = _ref3.disabled,
+      disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
+  return /*#__PURE__*/React.createElement("optgroup", {
+    label: label,
+    disabled: disabled
+  }, _mapInstanceProperty(options).call(options, function (_ref4) {
+    var value = _ref4.value,
+        optionLabel = _ref4.label,
+        optionDisabled = _ref4.disabled;
+    return /*#__PURE__*/React.createElement(Option, {
+      key: value,
+      value: value,
+      label: optionLabel,
+      disabled: optionDisabled
+    });
+  }));
+};
+
+var OptionsWithGroups = function OptionsWithGroups(_ref5) {
+  var optionsWithGroups = _ref5.optionsWithGroups;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, _mapInstanceProperty(optionsWithGroups).call(optionsWithGroups, function (optionOrGroup) {
+    if (isOptionsGroup(optionOrGroup)) {
+      var _context;
+
+      var group = optionOrGroup;
+      return /*#__PURE__*/React.createElement(OptionGroup, {
+        key: _concatInstanceProperty(_context = "group--".concat(group.label, "--")).call(_context, collectOptionGroupValues(group.options)),
+        options: group.options,
+        disabled: group.disabled,
+        label: group.label
+      });
+    }
+
+    var option = optionOrGroup;
+    return /*#__PURE__*/React.createElement(Option, {
+      key: option.value,
+      value: option.value,
+      label: optionOrGroup.label,
+      disabled: optionOrGroup.disabled
+    });
+  }));
+};
+
+function findSelectedOption(options, selectedValue) {
+  var result = null;
+
+  var checkOption = function checkOption(option) {
+    if (result === null || option.value === selectedValue) {
+      result = option;
+    }
+  };
+
+  options.forEach(function (optionOrGroup) {
+    if (isOptionsGroup(optionOrGroup)) {
+      var _group$options;
+
+      var group = optionOrGroup;
+      (_group$options = group.options) === null || _group$options === void 0 ? void 0 : _group$options.forEach(checkOption);
+    } else {
+      checkOption(optionOrGroup);
+    }
+  });
+  return result;
+}
+
+function getNoOptionsMessage(noOptionsMessage, isLoading) {
+  var _ref6 = isString(noOptionsMessage) ? _objectSpread(_objectSpread({}, DEFAULT_NO_OPTIONS_MESSAGES), {}, {
+    noOptions: noOptionsMessage
+  }) : _objectSpread(_objectSpread({}, DEFAULT_NO_OPTIONS_MESSAGES), noOptionsMessage),
+      noOptions = _ref6.noOptions,
+      loading = _ref6.loading;
+
+  if (isLoading) {
+    return loading;
+  } else {
+    return noOptions;
+  }
+}
+
+var SIZE_STYLES = {
+  s: styles.sizeS,
+  m: styles.sizeM,
+  l: styles.sizeL
+}; // eslint-disable-next-line complexity
+
+var NativeSelect = function NativeSelect(_ref7) {
+  var _context2;
+
+  var _ref7$options = _ref7.options,
+      options = _ref7$options === void 0 ? [] : _ref7$options,
+      _ref7$size = _ref7.size,
+      size = _ref7$size === void 0 ? 'm' : _ref7$size,
+      themeFromProps = _ref7.theme,
+      _ref7$className = _ref7.className,
+      className = _ref7$className === void 0 ? null : _ref7$className,
+      style = _ref7.style,
+      _ref7$defaultValue = _ref7.defaultValue,
+      defaultValue = _ref7$defaultValue === void 0 ? {
+    label: '',
+    value: null
+  } : _ref7$defaultValue,
+      _ref7$value = _ref7.value,
+      value = _ref7$value === void 0 ? undefined : _ref7$value,
+      onChange = _ref7.onChange,
+      _ref7$placeholder = _ref7.placeholder,
+      placeholder = _ref7$placeholder === void 0 ? 'Placeholder' : _ref7$placeholder,
+      _ref7$isLoading = _ref7.isLoading,
+      isLoading = _ref7$isLoading === void 0 ? false : _ref7$isLoading,
+      _ref7$isDisabled = _ref7.isDisabled,
+      isDisabled = _ref7$isDisabled === void 0 ? false : _ref7$isDisabled,
+      trigger = _ref7.trigger,
+      label = _ref7.label,
+      note = _ref7.note,
+      error = _ref7.error,
+      noOptionsMessage = _ref7.noOptionsMessage;
+  var theme = useTheme(themeFromProps);
+
+  var _useState = useState(defaultValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
+  var displayed = value ? value : selected;
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      hovered = _useState4[0],
+      setHovered = _useState4[1];
+
+  var handleChange = function handleChange(event) {
+    var newValue = event.target.value;
+    var selectedOption = findSelectedOption(options, newValue);
+    setSelected(selectedOption);
+
+    if (onChange) {
+      onChange(selectedOption);
+    }
+  };
+
+  var optionList = /*#__PURE__*/React.createElement(OptionsWithGroups, {
+    optionsWithGroups: placeholder !== null ? _concatInstanceProperty(_context2 = [{
+      value: PLACEHOLDER_VALUE,
+      label: options.length > 0 ? placeholder : getNoOptionsMessage(noOptionsMessage, isLoading),
+      disabled: true
+    }]).call(_context2, _toConsumableArray(options)) : options
+  });
+
+  var _trigger;
+
+  if (trigger) {
+    _trigger = trigger({
+      selectedLabel: displayed.label,
+      selectedValue: displayed.value,
+      placeholder: placeholder,
+      hovered: hovered
+    });
+  } else {
+    _trigger = /*#__PURE__*/React.createElement(SelectTrigger, {
+      theme: theme,
+      size: size,
+      isOpen: false,
+      onKeyDown: function onKeyDown() {
+        return false;
+      },
+      selected: displayed,
+      placeholder: placeholder,
+      searchInput: "",
+      isClearable: false,
+      isLoading: isLoading,
+      isDisabled: isDisabled,
+      error: Boolean(error)
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(FormTriggerWrapper, {
+    className: className,
+    theme: theme,
+    size: size,
+    error: error,
+    label: label,
+    note: note
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.main,
+    onMouseEnter: function onMouseEnter() {
+      return setHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHovered(false);
+    },
+    style: style,
+    "data-test": "native-select"
+  }, _trigger, /*#__PURE__*/React.createElement("select", {
+    "data-test": "native-select_select",
+    className: cn(styles.select, SIZE_STYLES[size]),
+    disabled: isDisabled ? true : undefined,
+    onChange: handleChange,
+    value: displayed.label !== '' ? displayed.value : PLACEHOLDER_VALUE
+  }, optionList)));
+};
+
+NativeSelect.propTypes = {
+  className: PropTypes.string,
+  options: PropTypes.arrayOf(PropTypes.oneOfType([optionType, optionsGroupType])),
+  defaultValue: optionType,
+  value: optionType,
+  onChange: PropTypes.func,
+  size: PropTypes.oneOf(['m', 's', 'l']),
+  theme: PropTypes.oneOf(['light', 'dark']),
+  placeholder: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  trigger: PropTypes.func,
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  label: PropTypes.node,
+  note: PropTypes.node,
+  noOptionsMessage: noOptionsMessageType,
+  style: PropTypes.object
+};
+export default NativeSelect;

package/lib/parts/native-select.module.pcss.js

@@ -0,0 +1,9 @@
+var styles = {
+  "main": "_main_1flk5jg_3",
+  "select": "_select_1flk5jg_7",
+  "sizeL": "_sizeL_1flk5jg_19",
+  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_1flk5jg_1",
+  "sizeM": "_sizeM_1flk5jg_23",
+  "sizeS": "_sizeS_1flk5jg_27"
+};
+export default styles;

package/lib/parts/trigger.d.ts

@@ -0,0 +1,37 @@
+import React, { HTMLAttributes } from 'react';
+import { Theme } from '@rescui/ui-contexts';
+import type { SelectOption, SelectSize, SelectMode } from '../types';
+declare type SelectTriggerPropsOwn = {
+    size: SelectSize;
+    mode?: SelectMode;
+    theme?: Theme;
+    className?: string;
+    triggerRef?: React.Ref<HTMLDivElement>;
+    isOpen?: boolean;
+    selected?: unknown;
+    placeholder?: string;
+    isClearable?: boolean;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    isSingleLine?: boolean;
+    searchInput?: string;
+    isSearchable?: boolean;
+    onClearClick?: () => void;
+    onItemClearClick?: (s: SelectOption) => void;
+    onSearchChange?: (newValue: string) => void;
+    error?: boolean;
+};
+export declare type SelectTriggerProps = SelectTriggerPropsOwn & Omit<HTMLAttributes<HTMLDivElement>, keyof SelectTriggerPropsOwn>;
+declare const SelectTrigger: React.FC<SelectTriggerProps>;
+export declare type SelectedOptionProps = {
+    selected: SelectOption;
+    searchInput?: string;
+    placeholder?: string;
+    isSearchable?: boolean;
+    isDisabled?: boolean;
+    inputRef: React.Ref<HTMLInputElement>;
+    handleBlur: React.FocusEventHandler<HTMLInputElement>;
+    handleFocus: React.FocusEventHandler<HTMLInputElement>;
+    handleChange: React.ChangeEventHandler<HTMLInputElement>;
+};
+export default SelectTrigger;

package/lib/parts/trigger.js

@@ -0,0 +1,307 @@
+import "core-js/modules/web.dom-collections.for-each.js";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["size", "mode", "theme", "className", "triggerRef", "isOpen", "selected", "placeholder", "isClearable", "isLoading", "isDisabled", "isSingleLine", "searchInput", "isSearchable", "onClearClick", "onItemClearClick", "onSearchChange", "error"];
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import { presets, RemovableTag, Tag } from '@rescui/tag';
+import { useTheme } from '@rescui/ui-contexts';
+import { DownIcon, LoadingIcon, CloseIcon } from '@rescui/icons';
+import { optionType } from '../common-prop-types.js';
+import { reverseTheme } from '../utils.js';
+import Foldable from './foldable.js';
+import styles from './trigger.module.pcss.js';
+/* eslint-disable no-nested-ternary */
+
+var TAG_PRESET = {
+  light: presets.filledLight,
+  dark: presets.filledDark
+};
+var THEME_STYLES = {
+  light: styles.themeLight,
+  dark: styles.themeDark
+};
+var SIZE_STYLES = {
+  s: styles.sizeS,
+  m: styles.sizeM,
+  l: styles.sizeL
+};
+var MODE_STYLES = {
+  classic: styles.classic,
+  rock: styles.rock
+};
+var TAG_SIZE = {
+  s: 'xs',
+  m: 's',
+  l: 'm'
+}; // eslint-disable-next-line complexity
+
+var SelectTrigger = function SelectTrigger(props) {
+  var size = props.size,
+      mode = props.mode,
+      themeFromProps = props.theme,
+      className = props.className,
+      triggerRef = props.triggerRef,
+      isOpen = props.isOpen,
+      _props$selected = props.selected,
+      selected = _props$selected === void 0 ? null : _props$selected,
+      placeholder = props.placeholder,
+      isClearable = props.isClearable,
+      isLoading = props.isLoading,
+      isDisabled = props.isDisabled,
+      isSingleLine = props.isSingleLine,
+      searchInput = props.searchInput,
+      isSearchable = props.isSearchable,
+      onClearClick = props.onClearClick,
+      onItemClearClick = props.onItemClearClick,
+      onSearchChange = props.onSearchChange,
+      error = props.error,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var theme = useTheme(themeFromProps);
+  var inputRef = useRef(null);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isSearchFocused = _useState2[0],
+      setIsSearchFocused = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isFocused = _useState4[0],
+      setIsFocused = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isSearchKeyFocused = _useState6[0],
+      setIsSearchKeyFocused = _useState6[1];
+
+  var isMulti = selected ? Boolean(selected.length) : false;
+
+  var handleChange = function handleChange(event) {
+    var newValue = event.target.value;
+    onSearchChange(newValue);
+  };
+
+  var handleBlur = function handleBlur() {
+    if (isSearchable && inputRef.current) {
+      setIsSearchFocused(false);
+      setIsSearchKeyFocused(false);
+    }
+  };
+
+  var handleFocus = function handleFocus(e) {
+    if (isSearchable && inputRef.current) {
+      setIsSearchFocused(true);
+      var target = e.target;
+      setIsSearchKeyFocused(target.getAttribute('data-focus-method') === 'key');
+    }
+  };
+
+  var isThemeReversed = mode === 'rock' && (isSearchFocused || isFocused || isOpen);
+  return /*#__PURE__*/React.createElement("div", _objectSpread({
+    tabIndex: isSearchable || isDisabled ? -1 : 0,
+    className: cn(styles.main, SIZE_STYLES[size], MODE_STYLES[mode], THEME_STYLES[theme], isMulti && styles.isMulti, isSearchFocused && styles.searchFocused, isSearchKeyFocused && styles.searchKeyFocused, isOpen && styles.open, isDisabled ? styles.disabled : styles.enabled, Boolean(error) && styles.error, isFocused && styles.focused, className),
+    onFocus: function onFocus(e) {
+      var target = e.target;
+      setIsFocused(target.getAttribute('data-focus-method') === 'key');
+    },
+    onBlur: function onBlur() {
+      return setIsFocused(false);
+    },
+    ref: triggerRef,
+    "data-test": "select"
+  }, restProps), isMulti ? /*#__PURE__*/React.createElement(MultiselectOptions, {
+    selected: selected,
+    size: size,
+    isDisabled: isDisabled,
+    isSingleLine: isSingleLine,
+    onItemClearClick: onItemClearClick,
+    theme: theme,
+    isThemeReversed: isThemeReversed
+  }) : /*#__PURE__*/React.createElement(SelectedOption, {
+    selected: selected,
+    placeholder: placeholder,
+    searchInput: searchInput,
+    isSearchable: isSearchable,
+    isDisabled: isDisabled,
+    inputRef: inputRef,
+    handleBlur: handleBlur,
+    handleFocus: handleFocus,
+    handleChange: handleChange
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.iconsWrapper
+  }, /*#__PURE__*/React.createElement(ClearOrLoading, {
+    isLoading: isLoading,
+    isDisabled: isDisabled,
+    isClearable: isClearable,
+    onClearClick: onClearClick,
+    selected: selected,
+    size: size
+  }), /*#__PURE__*/React.createElement(DownIcon, {
+    size: size,
+    className: styles.toggle,
+    "data-test": "down-icon"
+  })));
+};
+
+var MultiselectOptions = function MultiselectOptions(_ref) {
+  var isSingleLine = _ref.isSingleLine,
+      selected = _ref.selected,
+      isThemeReversed = _ref.isThemeReversed,
+      size = _ref.size,
+      isDisabled = _ref.isDisabled,
+      onItemClearClick = _ref.onItemClearClick,
+      theme = _ref.theme;
+
+  var selectedOptions = _mapInstanceProperty(selected).call(selected, function (s) {
+    var key = s.value ? s.value : s.label;
+    return /*#__PURE__*/React.createElement(RemovableTag, {
+      key: key,
+      "data-test": "selected-tag-".concat(key),
+      className: styles.tag,
+      disabled: isDisabled,
+      onRemoveClick: function onRemoveClick() {
+        return onItemClearClick(s);
+      },
+      size: TAG_SIZE[size],
+      wrap: !isSingleLine,
+      theme: isThemeReversed ? reverseTheme(theme) : theme
+    }, s.label);
+  });
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.multi,
+    "data-test": "multi"
+  }, isSingleLine ? /*#__PURE__*/React.createElement(Foldable, {
+    className: styles.tagsContainer,
+    renderHiddenCounter: function renderHiddenCounter(n, ref) {
+      return /*#__PURE__*/React.createElement(Tag, _objectSpread({
+        className: styles.tag,
+        key: "+",
+        ref: ref,
+        size: TAG_SIZE[size]
+      }, TAG_PRESET[isThemeReversed ? reverseTheme(theme) : theme]), "+".concat(n));
+    },
+    gap: {
+      l: 8,
+      m: 4,
+      s: 4
+    }[size]
+  }, selectedOptions) : /*#__PURE__*/React.createElement("div", {
+    className: styles.tagsContainer
+  }, selectedOptions));
+};
+
+function isSelectedEmpty(selected) {
+  if (Array.isArray(selected)) {
+    return selected.length === 0;
+  } else {
+    return !selected;
+  }
+} // eslint-disable-next-line complexity
+
+
+var SelectedOption = function SelectedOption(_ref2) {
+  var selected = _ref2.selected,
+      _ref2$searchInput = _ref2.searchInput,
+      searchInput = _ref2$searchInput === void 0 ? '' : _ref2$searchInput,
+      _ref2$placeholder = _ref2.placeholder,
+      placeholder = _ref2$placeholder === void 0 ? '' : _ref2$placeholder,
+      isSearchable = _ref2.isSearchable,
+      isDisabled = _ref2.isDisabled,
+      inputRef = _ref2.inputRef,
+      handleBlur = _ref2.handleBlur,
+      handleFocus = _ref2.handleFocus,
+      handleChange = _ref2.handleChange;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.labelWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn(styles.label, isSelectedEmpty(selected) && styles.notSelected)
+  }, searchInput === '' ? selected && selected.label ? selected.label : placeholder : ''), isSearchable && !isDisabled && /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
+    tabIndex: isSearchable ? 0 : -1,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    className: styles.searchInput,
+    autoCapitalize: "none",
+    autoComplete: "off",
+    autoCorrect: "off",
+    spellCheck: "false",
+    type: "text",
+    value: searchInput,
+    onChange: handleChange,
+    "data-test": "search-input"
+  }));
+};
+
+var ClearOrLoading = function ClearOrLoading(_ref3) {
+  var isClearable = _ref3.isClearable,
+      isLoading = _ref3.isLoading,
+      isDisabled = _ref3.isDisabled,
+      onClearClick = _ref3.onClearClick,
+      selected = _ref3.selected,
+      size = _ref3.size;
+
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement(LoadingIcon, {
+      style: {
+        pointerEvents: 'none'
+      },
+      size: size,
+      className: styles.icon,
+      "data-test": "loading-icon"
+    });
+  } else if (isClearable && !isDisabled && !isSelectedEmpty(selected)) {
+    return /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: cn(styles.icon, styles.clearIcon),
+      "data-test": "clear-icon",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        onClearClick();
+      }
+    }, /*#__PURE__*/React.createElement(CloseIcon, {
+      size: size
+    }));
+  } else {
+    return null;
+  }
+};
+
+SelectTrigger.propTypes = {
+  size: PropTypes.oneOf(['m', 's', 'l']),
+  mode: PropTypes.oneOf(['classic', 'rock']),
+  theme: PropTypes.oneOf(['light', 'dark']),
+  className: PropTypes.string,
+  isOpen: PropTypes.bool,
+  selected: PropTypes.oneOfType([optionType, PropTypes.arrayOf(optionType)]),
+  placeholder: PropTypes.string,
+  isClearable: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isSearchable: PropTypes.bool,
+  isSingleLine: PropTypes.bool,
+  onClearClick: PropTypes.func,
+  onItemClearClick: PropTypes.func,
+  onSearchChange: PropTypes.func,
+  error: PropTypes.bool,
+  triggerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })]),
+  searchInput: PropTypes.string
+};
+export default SelectTrigger;

package/lib/parts/trigger.module.pcss.js

@@ -0,0 +1,30 @@
+var styles = {
+  "main": "_main_gaux6h_24",
+  "open": "_open_gaux6h_36",
+  "enabled": "_enabled_gaux6h_41",
+  "disabled": "_disabled_gaux6h_45",
+  "focused": "_focused_gaux6h_49",
+  "searchFocused": "_searchFocused_gaux6h_50",
+  "sizeL": "_sizeL_gaux6h_56",
+  "sizeM": "_sizeM_gaux6h_59",
+  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_gaux6h_1",
+  "sizeS": "_sizeS_gaux6h_62",
+  "isMulti": "_isMulti_gaux6h_136",
+  "error": "_error_gaux6h_69",
+  "notSelected": "_notSelected_gaux6h_144",
+  "themeLight": "_themeLight_gaux6h_148",
+  "searchKeyFocused": "_searchKeyFocused_gaux6h_154",
+  "rock": "_rock_gaux6h_168",
+  "toggle": "_toggle_gaux6h_173",
+  "labelWrapper": "_labelWrapper_gaux6h_177",
+  "themeDark": "_themeDark_gaux6h_199",
+  "label": "_label_gaux6h_177",
+  "iconsWrapper": "_iconsWrapper_gaux6h_285",
+  "searchInput": "_searchInput_gaux6h_340",
+  "multi": "_multi_gaux6h_366",
+  "tagsContainer": "_tagsContainer_gaux6h_375",
+  "tag": "_tag_gaux6h_375",
+  "icon": "_icon_gaux6h_285",
+  "clearIcon": "_clearIcon_gaux6h_490"
+};
+export default styles;