@rescui/select 0.15.1-RUI-280-Update-select-component-e516591ed.54 → 0.15.1-RUI-280-Update-select-component-downshift-cd2a98813.66

package/lib/multiselect.d.ts

@@ -1,29 +1,3 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import type { MultiselectProps, NoOptionsMessage, SelectOption, SelectOptionOrGroup } from './types';
-export declare function Multiselect({ options, value, onChange, error, note, size, mode, theme: themeFromProps, placement, isSingleLine, boldLabel, reserveErrorLine, maxVisibleItems, isClearable, isLoading, isDisabled, ...props }: MultiselectProps): JSX.Element;
-export declare namespace Multiselect {
-    var propTypes: {
-        className: PropTypes.Requireable<string>;
-        style: PropTypes.Requireable<object>;
-        options: React.Validator<SelectOptionOrGroup[]>;
-        value: React.Validator<SelectOption[]>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        size: PropTypes.Requireable<string>;
-        mode: PropTypes.Requireable<string>;
-        theme: PropTypes.Requireable<string>;
-        placeholder: PropTypes.Requireable<string>;
-        isSingleLine: PropTypes.Requireable<boolean>;
-        isClearable: PropTypes.Requireable<boolean>;
-        isDisabled: PropTypes.Requireable<boolean>;
-        isLoading: PropTypes.Requireable<boolean>;
-        error: React.Validator<React.ReactNode>;
-        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        note: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        id: PropTypes.Requireable<string>;
-        noOptionsMessage: React.Validator<NoOptionsMessage>;
-        placement: PropTypes.Requireable<string>;
-        name: PropTypes.Requireable<string>;
-        boldLabel: PropTypes.Requireable<boolean>;
-    };
-}
+/// <reference types="react" />
+import type { MultiselectProps } from './types';
+export declare function Multiselect({ options, value: selectedItems, onChange, error, label, note, size, mode, theme: themeFromProps, placement, isSingleLine, boldLabel, reserveErrorLine, maxVisibleItems, isClearable, isLoading, isDisabled, name, noOptionsMessage, className, id, style, placeholder, ...rest }: MultiselectProps): JSX.Element;

package/lib/multiselect.js

@@ -1,22 +1,24 @@
-"use client";
-import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
+import React, { useEffect } from 'react';
 import cn from 'classnames';
-import { useSelectState } from 'react-stately';
-import { useSelect, useButton, useFocusRing, mergeProps, HiddenSelect } from 'react-aria';
+import { Dropdown } from '@rescui/dropdown';
+import { useSelect } from 'downshift';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
-import { ErrorMessage } from '@rescui/form-field';
-import { optionType, optionsGroupType, noOptionsMessageType } from './common-prop-types.js';
-import { PopupContent } from './parts/popup-content.js';
+import { useFocusRing } from '@react-aria/focus';
+import scrollIntoView from 'scroll-into-view-if-needed';
+import { useLabelFocus } from './hooks/use-label-focus.js';
+import { useOptions } from './hooks/use-options.js';
+import { useMultiHandlers } from './hooks/use-multi-handlers.js';
+import { useA11y } from './hooks/use-a11y.js';
+import { ListBox } from './parts/list-box.js';
 import { Icons } from './parts/icons.js';
-import { FormTriggerWrapper } from './parts/form-trigger-wrapper.js';
 import { MultiTrigger } from './parts/multi-trigger.js';
-import { useLabelFocus } from './hooks/use-label-focus.js';
-import { useMultiOptionSerialization } from './hooks/use-multi-option-serialization.js';
+import { HiddenSelect } from './parts/hidden-select.js';
+import { FormTriggerWrapper } from './parts/form-trigger-wrapper.js';
 import { getEmptyMessage } from './utils/get-empty-message.js';
-import { convertOptions } from './utils/convert-options.js';
-import { convertPlacement } from './utils/convert-placement.js';
+import { mergeProps } from './utils/merge-props.js';
+import { itemToString } from './utils/item-to-string.js';
 import { getOptionValue } from './utils/get-option-value.js';
+import { getRealItemsCnt } from './utils/get-real-items-cnt.js';
 import styles from './styles/common.p.module.css.js';
 const THEME_STYLES = {
   light: styles.themeLight,
@@ -30,65 +32,188 @@ const SIZE_STYLES = {
 const MODE_STYLES = {
   classic: styles.classic,
   rock: styles.rock
+};
+
+const stateReducer = (state, actionAndChanges) => {
+  const {
+    changes,
+    type
+  } = actionAndChanges; // console.log(type, state, changes);
+
+  switch (type) {
+    case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+    case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+    case useSelect.stateChangeTypes.ItemClick:
+      return { ...changes,
+        isOpen: true,
+        highlightedIndex: state.highlightedIndex
+      };
+
+    default:
+      return { ...changes,
+        selectedItem: null
+      };
+  }
 }; // eslint-disable-next-line complexity
 
-function MultiselectInner(_ref) {
+
+function Multiselect(_ref) {
   let {
+    options = [],
+    value: selectedItems = [],
+    onChange,
+    error,
+    label,
+    note,
+    size = 'm',
+    mode = 'classic',
+    theme: themeFromProps,
+    placement = 'bottom',
+    isSingleLine = false,
+    boldLabel = true,
+    reserveErrorLine = false,
+    maxVisibleItems = 5,
+    isClearable = false,
+    isLoading = false,
+    isDisabled = false,
+    name,
+    noOptionsMessage,
+    className,
     id,
-    size,
-    mode,
-    theme,
     style,
-    className,
-    isClearable,
-    isLoading,
-    placement,
-    boldLabel,
-    reserveErrorLine,
-    noOptionsMessage,
-    maxVisibleItems,
-    isSingleLine,
-    ...ariaProps
+    placeholder,
+    ...rest
   } = _ref;
-  // Create state with multiple selection mode
-  const state = useSelectState({ ...ariaProps,
-    selectionMode: 'multiple',
-    allowsEmptyCollection: true
+  const theme = useThemeWithUndefined(themeFromProps);
+  const triggerRef = React.useRef(null);
+  const menuRef = React.useRef(null);
+  const dropdownRef = React.useRef(null);
+  const {
+    selectedMap,
+    removeItem: removeSelectedItem,
+    addItem: addSelectedItem,
+    removeAllItems: reset
+  } = useMultiHandlers({
+    selectedItems,
+    onChange
   });
-  const hasValue = state.selectedItems.length > 0; // Get props for child elements from useSelect
-
-  const triggerRef = useRef(null);
   const {
-    labelProps,
-    triggerProps,
-    valueProps,
-    menuProps: listBoxProps,
-    hiddenSelectProps,
+    flattenedOptions,
+    listBoxItems
+  } = useOptions(options);
+  const isListBoxEmpty = getRealItemsCnt(listBoxItems) === 0;
+  const {
+    fieldProps,
     errorMessageProps,
-    descriptionProps
-  } = useSelect({ ...ariaProps,
-    selectionMode: 'multiple',
-    onKeyDown: e => {
-      if (hasValue) {
-        if (e.key === 'Backspace') {
-          state.setValue([...state.selectedItems].map(item => item.key).slice(0, -1));
-          e.stopPropagation();
+    descriptionProps,
+    baseId
+  } = useA11y({
+    prefix: 'multiselect',
+    error,
+    description: note
+  });
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    highlightedIndex,
+    getItemProps,
+    setHighlightedIndex
+  } = useSelect({
+    items: flattenedOptions,
+    itemToString,
+    id: baseId,
+
+    onIsOpenChange(newIsOpen) {
+      if (newIsOpen) {
+        // set the first selected item as a highlighted item if the popup is opened
+        const firstSelectedKey = [...selectedMap.keys()][0];
+
+        if (firstSelectedKey) {
+          setHighlightedIndex(flattenedOptions.findIndex(item => firstSelectedKey === getOptionValue(item)));
         }
+      }
+    },
 
-        if (e.key === 'Delete') {
-          state.setValue([]);
-          e.stopPropagation();
+    stateReducer,
+    // there's no actual selection happening in the hook, we're doing it custom via controlled props.
+    selectedItem: null,
+    // defining our scroll behavior because on the first menu render the hook
+    // doesn't know menuRef and use page as the scroll boundary
+    scrollIntoView: (listItemEl, listEl) => {
+      scrollIntoView(listItemEl, {
+        scrollMode: 'if-needed',
+        block: 'nearest',
+        boundary: listEl ?? menuRef.current
+      });
+    },
+    onSelectedItemChange: _ref2 => {
+      let {
+        selectedItem
+      } = _ref2;
+
+      if (!selectedItem) {
+        return;
+      }
+
+      const changedValue = getOptionValue(selectedItem);
+
+      if (selectedMap.has(changedValue)) {
+        removeSelectedItem(selectedItem);
+      } else {
+        addSelectedItem(selectedItem);
+      }
+    },
+
+    isItemDisabled(item) {
+      return item && item.disabled;
+    }
+
+  });
+  const menuProps = getMenuProps({
+    ref: menuRef,
+    'aria-multiselectable': isListBoxEmpty ? undefined : 'true'
+  }, {
+    suppressRefError: true
+  });
+  const triggerProps = getToggleButtonProps({
+    ref: triggerRef,
+    // eslint-disable-next-line complexity
+    onKeyDown: event => {
+      // shift + arrow up/down selection (when popup is open)
+      if (isOpen && event.shiftKey && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+        const newHighlightedIndex = event.key === 'ArrowUp' ? Math.max(highlightedIndex - 1, 0) : Math.min(highlightedIndex + 1, flattenedOptions.length - 1);
+
+        if (newHighlightedIndex === highlightedIndex) {
+          return;
         }
+
+        addSelectedItem(flattenedOptions[newHighlightedIndex]);
+      } // backspace removing the last selected item (when popup is closed)
+
+
+      if (!isOpen && event.key === 'Backspace') {
+        removeSelectedItem(selectedItems[selectedItems.length - 1]);
+      } // delete removing all selected items (when popup is closed)
+
+
+      if (!isOpen && event.key === 'Delete') {
+        reset();
       }
+    },
+    // fix screen-reader focus on an opened popup with an empty list
+    ...(isOpen && isListBoxEmpty ? {
+      'aria-activedescendant': menuProps.id
+    } : {})
+  }); // recalculate the popup position after a possible trigger height change
+
+  useEffect(() => {
+    if (dropdownRef.current) {
+      dropdownRef.current.scheduleUpdate();
     }
-  }, state, triggerRef);
-  const {
-    buttonProps
-  } = useButton({ ...triggerProps,
-    elementType: 'div'
-  }, triggerRef);
-  const isDisabled = ariaProps.isDisabled;
-  const isOpen = state.isOpen;
+  }, [selectedItems]); // use it instead of ":has(:focus-visible), :focus-visible"
+
   const {
     isFocusVisible,
     focusProps
@@ -99,14 +224,21 @@ function MultiselectInner(_ref) {
     isFocusedByLabel,
     labelClickProps,
     triggerFocusProps: labelFocusForTriggerProps
-  } = useLabelFocus(triggerRef);
+  } = useLabelFocus();
   const emptyListMessage = getEmptyMessage({
     isLoading,
     isNothingFound: false,
     noOptionsMessage
   });
+  const listBoxState = {
+    selectedMap,
+    selectionMode: 'multiple',
+    highlightedIndex,
+    getItemProps,
+    menuProps
+  };
   return /*#__PURE__*/React.createElement("div", {
-    className: cn(className, styles.root, THEME_STYLES[theme], SIZE_STYLES[size], MODE_STYLES[mode], isDisabled ? styles.disabled : styles.enabled, Boolean(ariaProps.errorMessage) && styles.error),
+    className: cn(className, styles.root, THEME_STYLES[theme], SIZE_STYLES[size], MODE_STYLES[mode], isDisabled ? styles.disabled : styles.enabled, Boolean(error) && styles.error),
     id: id,
     style: style,
     "data-test": "multiselect"
@@ -114,126 +246,72 @@ function MultiselectInner(_ref) {
     theme: theme,
     size: size,
     disabled: isDisabled,
-    label: ariaProps.label,
-    labelProps: mergeProps(labelClickProps, labelProps),
+    label: label,
+    labelProps: mergeProps(getLabelProps(), labelClickProps),
     boldLabel: boldLabel,
-    error: ariaProps.errorMessage,
+    error: error,
     reserveErrorLine: reserveErrorLine,
     errorMessageProps: errorMessageProps,
-    note: ariaProps.description,
+    note: note,
     descriptionProps: descriptionProps
-  }, /*#__PURE__*/React.createElement(HiddenSelect, { ...hiddenSelectProps
-  }), /*#__PURE__*/React.createElement("div", { ...mergeProps(buttonProps, focusProps, labelFocusForTriggerProps),
-    ref: triggerRef,
-    className: cn(styles.trigger, !isSingleLine && styles.canBeMultiline),
-    "data-open": isOpen,
-    "data-focus-visible": isFocusVisible,
-    "data-label-focused": isFocusedByLabel,
-    "data-test": "multiselect__trigger"
-  }, /*#__PURE__*/React.createElement(MultiTrigger, {
-    state: state,
-    valueProps: valueProps,
-    isSingleLine: isSingleLine,
-    isDisabled: isDisabled,
-    placeholder: ariaProps.placeholder,
-    triggerRef: triggerRef
-  }), /*#__PURE__*/React.createElement(Icons, {
-    isLoading: isLoading,
-    canHaveClearIcon: isClearable && !isDisabled && hasValue,
-    onClear: () => {
-      var _triggerRef$current;
-
-      state.setValue([]);
-      (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
-    },
-    triggerId: triggerProps.id
-  })), /*#__PURE__*/React.createElement(PopupContent, {
+  }, /*#__PURE__*/React.createElement(HiddenSelect, {
+    name: name,
+    value: selectedItems,
+    isMultiple: true,
+    options: flattenedOptions
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    mode: mode,
     theme: theme,
-    state: state,
-    triggerRef: triggerRef,
+    ref: dropdownRef,
     placement: placement,
-    size: size,
-    mode: mode,
-    listBoxProps: listBoxProps,
-    emptyListMessage: emptyListMessage,
-    maxVisibleItems: maxVisibleItems,
-    selectionMode: "multiple"
-  })));
-}
+    maxWidth: "trigger",
+    minWidth: "trigger",
+    isOpen: isOpen,
+    cancelCloseAnimation: true,
+    disableFocusLock: true,
+    trigger: _ref3 => {
+      let {
+        ref: triggerRefForDropdown
+      } = _ref3;
+      return /*#__PURE__*/React.createElement("div", { ...rest,
+        ...mergeProps(fieldProps, // aria-invalid & aria-describedby, rest are overridden by triggerProps
+        triggerProps, focusProps, labelFocusForTriggerProps, {
+          ref: triggerRefForDropdown
+        }),
+        className: cn(styles.trigger, !isSingleLine && styles.canBeMultiline),
+        "data-open": isOpen,
+        "data-has-focus-visible": isFocusVisible,
+        "data-label-focused": isFocusedByLabel,
+        "data-test": "multiselect__trigger"
+      }, /*#__PURE__*/React.createElement(MultiTrigger, {
+        selectedItems: selectedItems,
+        valueProps: {},
+        isSingleLine: isSingleLine,
+        isDisabled: isDisabled,
+        placeholder: placeholder,
+        triggerRef: triggerRef,
+        removeSelectedItem: removeSelectedItem
+      }), /*#__PURE__*/React.createElement(Icons, {
+        isLoading: isLoading,
+        canHaveClearIcon: isClearable && !isDisabled && selectedItems.length > 0,
+        onClear: () => {
+          var _triggerRef$current;
 
-function Multiselect(_ref2) {
-  let {
-    options = [],
-    value,
-    onChange,
-    error,
-    note,
-    size = 'm',
-    mode = 'classic',
-    theme: themeFromProps,
-    placement = 'bottom',
-    isSingleLine = false,
-    boldLabel = true,
-    reserveErrorLine = false,
-    maxVisibleItems = 5,
-    isClearable = false,
-    isLoading = false,
-    isDisabled = false,
-    ...props
-  } = _ref2;
-  const theme = useThemeWithUndefined(themeFromProps);
-  const {
-    selectedKeys,
-    findOptionsByKeys,
-    virtualOptions
-  } = useMultiOptionSerialization(options, value);
-
-  const handleSelectionChange = keys => {
-    const newValue = findOptionsByKeys(keys);
-    onChange === null || onChange === void 0 || onChange(newValue);
-  };
-
-  return /*#__PURE__*/React.createElement(MultiselectInner, { ...props,
+          reset();
+          (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus({
+            focusVisible: false
+          });
+        },
+        triggerId: triggerProps.id
+      }));
+    }
+  }, /*#__PURE__*/React.createElement(ListBox, {
+    state: listBoxState,
     size: size,
-    mode: mode,
-    theme: theme,
-    value: selectedKeys,
-    onChange: handleSelectionChange,
-    errorMessage: error,
-    description: note,
-    placement: convertPlacement(placement),
-    isSingleLine: isSingleLine,
-    disabledKeys: virtualOptions.map(option => getOptionValue(option)),
-    boldLabel: boldLabel,
-    reserveErrorLine: reserveErrorLine,
     maxVisibleItems: maxVisibleItems,
-    isClearable: isClearable,
-    isLoading: isLoading,
-    isDisabled: isDisabled
-  }, convertOptions(options, virtualOptions));
+    emptyListMessage: emptyListMessage,
+    items: listBoxItems
+  }))));
 }
 
-Multiselect.propTypes = {
-  className: PropTypes.string,
-  style: PropTypes.object,
-  options: PropTypes.arrayOf(PropTypes.oneOfType([optionType, optionsGroupType])),
-  value: PropTypes.arrayOf(optionType),
-  onChange: PropTypes.func,
-  size: PropTypes.oneOf(['m', 's', 'l']),
-  mode: PropTypes.oneOf(['classic', 'rock']),
-  theme: PropTypes.oneOf(['light', 'dark']),
-  placeholder: PropTypes.string,
-  isSingleLine: PropTypes.bool,
-  isClearable: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isLoading: PropTypes.bool,
-  error: ErrorMessage.propTypes.children,
-  label: PropTypes.node,
-  note: PropTypes.node,
-  id: PropTypes.string,
-  noOptionsMessage: noOptionsMessageType,
-  placement: PropTypes.oneOf(['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']),
-  name: PropTypes.string,
-  boldLabel: PropTypes.bool
-};
 export { Multiselect };

package/lib/native-select.js

@@ -1,17 +1,18 @@
 "use client";
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import { ErrorMessage } from '@rescui/form-field';
-import { useField, useFocusRing, mergeProps } from 'react-aria';
+import { useFocus, useHover } from 'react-aria';
 import { nativeOptionType, nativeOptionsGroupType, noOptionsMessageType } from './common-prop-types.js';
+import { useA11y } from './hooks/use-a11y.js';
 import { FormTriggerWrapper } from './parts/form-trigger-wrapper.js';
-import { isOptionAGroup } from './utils/is-option-a-group.js';
-import { getEmptyMessage } from './utils/get-empty-message.js';
-import { useLabelFocus } from './hooks/use-label-focus.js';
 import { NativeSelectTrigger } from './parts/native-select-trigger.js';
 import { NativeSelectOptionsWithGroups } from './parts/native-select-options-with-groups.js';
+import { isOptionAGroup } from './utils/is-option-a-group.js';
+import { getEmptyMessage } from './utils/get-empty-message.js';
+import { mergeProps } from './utils/merge-props.js';
 import styles from './styles/native-select.p.module.css.js';
 
 function findSelectedOption(options, selectedValue) {
@@ -55,6 +56,7 @@ const NativeSelect = _ref => {
     placeholder,
     isLoading = false,
     isDisabled = false,
+    isClearable = false,
     trigger,
     label,
     note,
@@ -63,20 +65,25 @@ const NativeSelect = _ref => {
     noOptionsMessage,
     name,
     boldLabel = true,
-    ...ariaRestProps
+    ...rest
   } = _ref;
+  const triggerRef = React.useRef(null);
   const {
     labelProps,
     fieldProps,
-    descriptionProps,
-    errorMessageProps
-  } = useField({ ...ariaRestProps,
-    label,
+    errorMessageProps,
+    descriptionProps
+  } = useA11y({
+    prefix: 'native-select',
+    error,
     description: note,
-    errorMessage: error
+    label,
+    fieldRef: triggerRef
   });
+
+  const reset = () => onChange(null);
+
   const theme = useThemeWithUndefined(themeFromProps);
-  const [isHovered, setIsHovered] = useState(false);
 
   const handleChange = event => {
     const newValue = event.target.value;
@@ -85,21 +92,24 @@ const NativeSelect = _ref => {
     if (onChange) {
       onChange(selectedOption);
     }
-  };
+  }; // delete it when triggerFunc is migrated to the css-states instead of js-props for hover/focus
+  // replace it with ":focus + &" selector in that case
 
-  const triggerRef = React.useRef(null);
+
+  const [isFocused, setIsFocused] = React.useState(false);
   const {
-    isFocusVisible,
     focusProps
-  } = useFocusRing({
-    within: true
-  });
+  } = useFocus({
+    isDisabled,
+    onFocusChange: setIsFocused
+  }); // same as above, could be replaced with ":hover + &" selector
+
   const {
-    isFocusedByLabel,
-    labelClickProps,
-    triggerFocusProps: labelFocusForTriggerProps
-  } = useLabelFocus(triggerRef);
-  const isFocused = isFocusedByLabel || isFocusVisible;
+    isHovered,
+    hoverProps
+  } = useHover({
+    isDisabled
+  });
   const emptyListMessage = getEmptyMessage({
     isLoading,
     isNothingFound: false,
@@ -115,7 +125,7 @@ const NativeSelect = _ref => {
     size: size,
     disabled: isDisabled,
     label: label,
-    labelProps: mergeProps(labelClickProps, labelProps),
+    labelProps: mergeProps(labelProps),
     boldLabel: boldLabel,
     error: error,
     errorMessageProps: errorMessageProps,
@@ -124,25 +134,14 @@ const NativeSelect = _ref => {
     descriptionProps: descriptionProps
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.wrapper
-  }, trigger ? trigger({
-    focused: isFocused,
-    hovered: isHovered,
-    selectedLabel: value === null || value === void 0 ? void 0 : value.label,
-    selectedValue: value === null || value === void 0 ? void 0 : value.value,
-    placeholder
-  }) : /*#__PURE__*/React.createElement(NativeSelectTrigger, {
-    value: value,
-    isLoading: isLoading,
-    isFocused: isFocused,
-    isHovered: isHovered,
-    isDisabled: isDisabled,
-    size: size,
-    theme: theme,
-    hasError: Boolean(error),
-    placeholder: placeholder
-  }), /*#__PURE__*/React.createElement("select", { ...mergeProps(fieldProps, focusProps, labelFocusForTriggerProps, {
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false)
+  }, /*#__PURE__*/React.createElement("select", { ...rest,
+    ...mergeProps(fieldProps, focusProps, hoverProps, {
+      onKeyDown: event => {
+        // backspace and backspace removing the last selected item (when popup is closed)
+        if (isClearable && (event.key === 'Backspace' || event.key === 'Delete')) {
+          reset();
+        }
+      }
     }),
     ref: triggerRef,
     "data-test": "native-select_select",
@@ -156,7 +155,31 @@ const NativeSelect = _ref => {
     optionsWithGroups: options,
     placeholder: placeholder,
     emptyListMessage: emptyListMessage
-  })))));
+  })), trigger ? trigger({
+    focused: isFocused,
+    hovered: isHovered,
+    selectedLabel: value === null || value === void 0 ? void 0 : value.label,
+    selectedValue: value === null || value === void 0 ? void 0 : value.value,
+    placeholder
+  }) : /*#__PURE__*/React.createElement(NativeSelectTrigger, {
+    value: value,
+    isLoading: isLoading,
+    isDisabled: isDisabled,
+    isClearable: isClearable,
+    triggerId: fieldProps.id,
+    onClear: () => {
+      var _triggerRef$current;
+
+      reset();
+      (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus({
+        focusVisible: false
+      });
+    },
+    size: size,
+    theme: theme,
+    hasError: Boolean(error),
+    placeholder: placeholder
+  }))));
 };
 
 NativeSelect.propTypes = {