@base-ui/react 1.0.0 → 1.2.0

package/select/root/SelectRoot.d.ts

@@ -14,74 +14,79 @@ export interface SelectRootProps<Value, Multiple extends boolean | undefined = f
   /**
    * A ref to access the hidden input element.
    */
-  inputRef?: React.Ref<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement> | undefined;
   /**
    * Identifies the field when a form is submitted.
    */
-  name?: string;
+  name?: string | undefined;
+  /**
+   * Provides a hint to the browser for autofill.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete
+   */
+  autoComplete?: string | undefined;
   /**
    * The id of the Select.
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * Whether the user must choose a value before submitting a form.
    * @default false
    */
-  required?: boolean;
+  required?: boolean | undefined;
   /**
    * Whether the user should be unable to choose a different option from the select popup.
    * @default false
    */
-  readOnly?: boolean;
+  readOnly?: boolean | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Whether multiple items can be selected.
    * @default false
    */
-  multiple?: Multiple;
+  multiple?: Multiple | undefined;
   /**
    * Whether moving the pointer over items should highlight them.
    * Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.
    * @default true
    */
-  highlightItemOnHover?: boolean;
+  highlightItemOnHover?: boolean | undefined;
   /**
    * Whether the select popup is initially open.
    *
    * To render a controlled select popup, use the `open` prop instead.
    * @default false
    */
-  defaultOpen?: boolean;
+  defaultOpen?: boolean | undefined;
   /**
    * Event handler called when the select popup is opened or closed.
    */
-  onOpenChange?: (open: boolean, eventDetails: SelectRootChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: SelectRootChangeEventDetails) => void) | undefined;
   /**
    * Event handler called after any animations complete when the select popup is opened or closed.
    */
-  onOpenChangeComplete?: (open: boolean) => void;
+  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
   /**
    * Whether the select popup is currently open.
    */
-  open?: boolean;
+  open?: boolean | undefined;
   /**
    * Determines if the select enters a modal state when open.
-   * - `true`: user interaction is limited to the select: document page scroll is locked and and pointer interactions on outside elements are disabled.
+   * - `true`: user interaction is limited to the select: document page scroll is locked and pointer interactions on outside elements are disabled.
    * - `false`: user interaction with the rest of the document is allowed.
    * @default true
    */
-  modal?: boolean;
+  modal?: boolean | undefined;
   /**
    * A ref to imperative actions.
    * - `unmount`: When specified, the select will not be unmounted when closed.
    * Instead, the `unmount` function must be called to unmount the select manually.
    * Useful when the select's animation is controlled by an external library.
    */
-  actionsRef?: React.RefObject<SelectRootActions>;
+  actionsRef?: React.RefObject<SelectRootActions | null> | undefined;
   /**
    * Data structure of the items rendered in the select popup.
    * When specified, `<Select.Value>` renders the label of the selected item instead of the raw value.
@@ -96,39 +101,39 @@ export interface SelectRootProps<Value, Multiple extends boolean | undefined = f
    * <Select.Root items={items} />
    * ```
    */
-  items?: Record<string, React.ReactNode> | ReadonlyArray<{
+  items?: (Record<string, React.ReactNode> | ReadonlyArray<{
     label: React.ReactNode;
     value: any;
-  }>;
+  }>) | undefined;
   /**
    * When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for display in the trigger.
    * If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.
    */
-  itemToStringLabel?: (itemValue: Value) => string;
+  itemToStringLabel?: ((itemValue: Value) => string) | undefined;
   /**
    * When the item values are objects (`<Select.Item value={object}>`), this function converts the object value to a string representation for form submission.
    * If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop.
    */
-  itemToStringValue?: (itemValue: Value) => string;
+  itemToStringValue?: ((itemValue: Value) => string) | undefined;
   /**
    * Custom comparison logic used to determine if a select item value matches the current selected value. Useful when item values are objects without matching referentially.
    * Defaults to `Object.is` comparison.
    */
-  isItemEqualToValue?: (itemValue: Value, value: Value) => boolean;
+  isItemEqualToValue?: ((itemValue: Value, value: Value) => boolean) | undefined;
   /**
    * The uncontrolled value of the select when it’s initially rendered.
    *
    * To render a controlled select, use the `value` prop instead.
    */
-  defaultValue?: SelectValueType<Value, Multiple> | null;
+  defaultValue?: (SelectValueType<Value, Multiple> | null) | undefined;
   /**
    * The value of the select. Use when controlled.
    */
-  value?: SelectValueType<Value, Multiple> | null;
+  value?: (SelectValueType<Value, Multiple> | null) | undefined;
   /**
    * Event handler called when the value of the select changes.
    */
-  onValueChange?: (value: SelectValueType<Value, Multiple> | (Multiple extends true ? never : null), eventDetails: SelectRootChangeEventDetails) => void;
+  onValueChange?: ((value: SelectValueType<Value, Multiple> | (Multiple extends true ? never : null), eventDetails: SelectRootChangeEventDetails) => void) | undefined;
 }
 export interface SelectRootState {}
 export interface SelectRootActions {

package/select/root/SelectRoot.js

@@ -19,7 +19,6 @@ var _store = require("@base-ui/utils/store");
 var _floatingUiReact = require("../../floating-ui-react");
 var _SelectRootContext = require("./SelectRootContext");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
-var _LabelableContext = require("../../labelable-provider/LabelableContext");
 var _useLabelableId = require("../../labelable-provider/useLabelableId");
 var _useTransitionStatus = require("../../utils/useTransitionStatus");
 var _store2 = require("../store");
@@ -51,6 +50,7 @@ function SelectRoot(props) {
     defaultOpen = false,
     onOpenChange,
     name: nameProp,
+    autoComplete,
     disabled: disabledProp = false,
     readOnly = false,
     required = false,
@@ -71,16 +71,16 @@ function SelectRoot(props) {
   } = (0, _FormContext.useFormContext)();
   const {
     setDirty,
+    setTouched,
+    setFocused,
     shouldValidateOnChange,
     validityData,
     setFilled,
     name: fieldName,
     disabled: fieldDisabled,
-    validation
+    validation,
+    validationMode
   } = (0, _FieldRootContext.useFieldRootContext)();
-  const {
-    controlId
-  } = (0, _LabelableContext.useLabelableContext)();
   const generatedId = (0, _useLabelableId.useLabelableId)({
     id
   });
@@ -181,8 +181,8 @@ function SelectRoot(props) {
     }
   }, [store, value]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    setFilled(value !== null);
-  }, [value, setFilled]);
+    setFilled(multiple ? Array.isArray(value) && value.length > 0 : value != null);
+  }, [multiple, value, setFilled]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(function syncSelectedIndex() {
     if (open) {
       return;
@@ -217,6 +217,13 @@ function SelectRoot(props) {
       return;
     }
     setOpenUnwrapped(nextOpen);
+    if (!nextOpen && (eventDetails.reason === _reasons.REASONS.focusOut || eventDetails.reason === _reasons.REASONS.outsidePress)) {
+      setTouched(true);
+      setFocused(false);
+      if (validationMode === 'onBlur') {
+        validation.commit(value);
+      }
+    }
 
     // The active index will sync to the last selected index on the next open.
     // Workaround `enableFocusInside` in Floating UI setting `tabindex=0` of a non-highlighted
@@ -329,7 +336,11 @@ function SelectRoot(props) {
     getFloatingProps,
     getItemProps
   } = (0, _floatingUiReact.useInteractions)([click, dismiss, listNavigation, typeahead]);
-  const mergedTriggerProps = React.useMemo(() => (0, _mergeProps.mergeProps)(getReferenceProps(), interactionTypeProps), [getReferenceProps, interactionTypeProps]);
+  const mergedTriggerProps = React.useMemo(() => {
+    return (0, _mergeProps.mergeProps)(getReferenceProps(), interactionTypeProps, generatedId ? {
+      id: generatedId
+    } : _constants.EMPTY_OBJECT);
+  }, [getReferenceProps, interactionTypeProps, generatedId]);
   (0, _useOnFirstRender.useOnFirstRender)(() => {
     store.update({
       popupProps: getFloatingProps(),
@@ -408,7 +419,11 @@ function SelectRoot(props) {
         ...validation.getInputValidationProps({
           onFocus() {
             // Move focus to the trigger element when the hidden input is focused.
-            store.state.triggerElement?.focus();
+            store.state.triggerElement?.focus({
+              // Supported in Chrome from 144 (January 2026)
+              // @ts-expect-error - focusVisible is not yet in the lib.dom.d.ts
+              focusVisible: true
+            });
           },
           // Handle browser autofill.
           onChange(event) {
@@ -444,14 +459,14 @@ function SelectRoot(props) {
             queueMicrotask(handleChange);
           }
         }),
-        id: id || controlId || undefined,
         name: multiple ? undefined : name,
+        autoComplete: autoComplete,
         value: serializedValue,
         disabled: disabled,
         required: required && !hasMultipleSelection,
         readOnly: readOnly,
         ref: ref,
-        style: _visuallyHidden.visuallyHidden,
+        style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
         tabIndex: -1,
         "aria-hidden": true
       }), hiddenInputs]

package/select/root/SelectRootContext.d.ts

@@ -14,30 +14,30 @@ export interface SelectRootContext {
   highlightItemOnHover: boolean;
   setValue: (nextValue: any, eventDetails: SelectRoot.ChangeEventDetails) => void;
   setOpen: (open: boolean, eventDetails: SelectRoot.ChangeEventDetails) => void;
-  listRef: React.MutableRefObject<Array<HTMLElement | null>>;
-  popupRef: React.MutableRefObject<HTMLDivElement | null>;
-  scrollHandlerRef: React.MutableRefObject<((el: HTMLDivElement) => void) | null>;
+  listRef: React.RefObject<Array<HTMLElement | null>>;
+  popupRef: React.RefObject<HTMLDivElement | null>;
+  scrollHandlerRef: React.RefObject<((el: HTMLDivElement) => void) | null>;
   handleScrollArrowVisibility: () => void;
   scrollArrowsMountedCountRef: React.RefObject<number>;
   getItemProps: (props?: HTMLProps & {
-    active?: boolean;
-    selected?: boolean;
+    active?: boolean | undefined;
+    selected?: boolean | undefined;
   }) => Record<string, unknown>;
   events: FloatingEvents;
-  valueRef: React.MutableRefObject<HTMLSpanElement | null>;
-  valuesRef: React.MutableRefObject<Array<any>>;
-  labelsRef: React.MutableRefObject<Array<string | null>>;
-  typingRef: React.MutableRefObject<boolean>;
-  selectionRef: React.MutableRefObject<{
+  valueRef: React.RefObject<HTMLSpanElement | null>;
+  valuesRef: React.RefObject<Array<any>>;
+  labelsRef: React.RefObject<Array<string | null>>;
+  typingRef: React.RefObject<boolean>;
+  selectionRef: React.RefObject<{
     allowUnselectedMouseUp: boolean;
     allowSelectedMouseUp: boolean;
   }>;
-  selectedItemTextRef: React.MutableRefObject<HTMLSpanElement | null>;
+  selectedItemTextRef: React.RefObject<HTMLSpanElement | null>;
   validation: UseFieldValidationReturnValue;
-  onOpenChangeComplete?: (open: boolean) => void;
-  keyboardActiveRef: React.MutableRefObject<boolean>;
+  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
+  keyboardActiveRef: React.RefObject<boolean>;
   alignItemWithTriggerActiveRef: React.RefObject<boolean>;
-  initialValueRef: React.MutableRefObject<any>;
+  initialValueRef: React.RefObject<any>;
 }
 export declare const SelectRootContext: React.Context<SelectRootContext | null>;
 export declare const SelectFloatingContext: React.Context<import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore | null>;

package/select/root/SelectRootContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/select/scroll-arrow/SelectScrollArrow.d.ts

@@ -5,7 +5,7 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
  * @internal
  */
-export declare const SelectScrollArrow: React.ForwardRefExoticComponent<SelectScrollArrowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectScrollArrow: React.ForwardRefExoticComponent<Omit<SelectScrollArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectScrollArrowState {
   direction: 'up' | 'down';
   visible: boolean;
@@ -18,7 +18,7 @@ export interface SelectScrollArrowProps extends BaseUIComponentProps<'div', Sele
    * Whether to keep the HTML element in the DOM while the select popup is not scrollable.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace SelectScrollArrow {
   type State = SelectScrollArrowState;

package/select/scroll-arrow/SelectScrollArrow.js

@@ -72,12 +72,12 @@ const SelectScrollArrow = exports.SelectScrollArrow = /*#__PURE__*/React.forward
       }
     }
   });
-  const state = React.useMemo(() => ({
+  const state = {
     direction,
     visible,
     side,
     transitionStatus
-  }), [direction, visible, side, transitionStatus]);
+  };
   const defaultProps = {
     'aria-hidden': true,
     children: direction === 'up' ? '▲' : '▼',

package/select/scroll-down-arrow/SelectScrollDownArrow.d.ts

@@ -6,14 +6,14 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectScrollDownArrow: React.ForwardRefExoticComponent<SelectScrollDownArrowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectScrollDownArrow: React.ForwardRefExoticComponent<Omit<SelectScrollDownArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectScrollDownArrowState {}
 export interface SelectScrollDownArrowProps extends BaseUIComponentProps<'div', SelectScrollDownArrow.State> {
   /**
    * Whether to keep the HTML element in the DOM while the select popup is not scrollable.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace SelectScrollDownArrow {
   type State = SelectScrollDownArrowState;

package/select/scroll-down-arrow/SelectScrollDownArrowDataAttributes.js

@@ -27,6 +27,6 @@ let SelectScrollDownArrowDataAttributes = exports.SelectScrollDownArrowDataAttri
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  SelectScrollDownArrowDataAttributes["side"] = "data-side";
+  SelectScrollDownArrowDataAttributes[SelectScrollDownArrowDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   return SelectScrollDownArrowDataAttributes;
 }({});

package/select/scroll-up-arrow/SelectScrollUpArrow.d.ts

@@ -6,14 +6,14 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectScrollUpArrow: React.ForwardRefExoticComponent<SelectScrollUpArrowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectScrollUpArrow: React.ForwardRefExoticComponent<Omit<SelectScrollUpArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectScrollUpArrowState {}
 export interface SelectScrollUpArrowProps extends BaseUIComponentProps<'div', SelectScrollUpArrow.State> {
   /**
    * Whether to keep the HTML element in the DOM while the select popup is not scrollable.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace SelectScrollUpArrow {
   type State = SelectScrollUpArrowState;

package/select/scroll-up-arrow/SelectScrollUpArrowDataAttributes.js

@@ -27,6 +27,6 @@ let SelectScrollUpArrowDataAttributes = exports.SelectScrollUpArrowDataAttribute
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  SelectScrollUpArrowDataAttributes["side"] = "data-side";
+  SelectScrollUpArrowDataAttributes[SelectScrollUpArrowDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   return SelectScrollUpArrowDataAttributes;
 }({});

package/select/store.d.ts

@@ -12,7 +12,7 @@ export type State = {
   }> | undefined;
   itemToStringLabel: ((item: any) => string) | undefined;
   itemToStringValue: ((item: any) => string) | undefined;
-  isItemEqualToValue: (item: any, value: any) => boolean;
+  isItemEqualToValue: (itemValue: any, selectedValue: any) => boolean;
   value: any;
   open: boolean;
   mounted: boolean;
@@ -41,8 +41,10 @@ export declare const selectors: {
   }[] | undefined;
   itemToStringLabel: (state: State) => ((item: any) => string) | undefined;
   itemToStringValue: (state: State) => ((item: any) => string) | undefined;
-  isItemEqualToValue: (state: State) => (item: any, value: any) => boolean;
+  isItemEqualToValue: (state: State) => (itemValue: any, selectedValue: any) => boolean;
   value: (state: State) => any;
+  hasSelectedValue: (state: State) => boolean;
+  hasNullItemLabel: (state: State, enabled: boolean) => boolean;
   open: (state: State) => boolean;
   mounted: (state: State) => boolean;
   forceMount: (state: State) => boolean;
@@ -51,7 +53,7 @@ export declare const selectors: {
   activeIndex: (state: State) => number | null;
   selectedIndex: (state: State) => number | null;
   isActive: (state: State, index: number) => boolean;
-  isSelected: (state: State, index: number, candidate: any) => boolean;
+  isSelected: (state: State, index: number, itemValue: any) => boolean;
   isSelectedByFocus: (state: State, index: number) => boolean;
   popupProps: (state: State) => HTMLProps;
   triggerProps: (state: State) => HTMLProps;
@@ -61,5 +63,4 @@ export declare const selectors: {
   scrollUpArrowVisible: (state: State) => boolean;
   scrollDownArrowVisible: (state: State) => boolean;
   hasScrollArrows: (state: State) => boolean;
-  serializedValue: (state: State) => string;
 };

package/select/store.js

@@ -16,6 +16,23 @@ const selectors = exports.selectors = {
   itemToStringValue: (0, _store.createSelector)(state => state.itemToStringValue),
   isItemEqualToValue: (0, _store.createSelector)(state => state.isItemEqualToValue),
   value: (0, _store.createSelector)(state => state.value),
+  hasSelectedValue: (0, _store.createSelector)(state => {
+    const {
+      value,
+      multiple,
+      itemToStringValue
+    } = state;
+    if (value == null) {
+      return false;
+    }
+    if (multiple && Array.isArray(value)) {
+      return value.length > 0;
+    }
+    return (0, _resolveValueLabel.stringifyAsValue)(value, itemToStringValue) !== '';
+  }),
+  hasNullItemLabel: (0, _store.createSelector)((state, enabled) => {
+    return enabled ? (0, _resolveValueLabel.hasNullItemLabel)(state.items) : false;
+  }),
   open: (0, _store.createSelector)(state => state.open),
   mounted: (0, _store.createSelector)(state => state.mounted),
   forceMount: (0, _store.createSelector)(state => state.forceMount),
@@ -24,11 +41,11 @@ const selectors = exports.selectors = {
   activeIndex: (0, _store.createSelector)(state => state.activeIndex),
   selectedIndex: (0, _store.createSelector)(state => state.selectedIndex),
   isActive: (0, _store.createSelector)((state, index) => state.activeIndex === index),
-  isSelected: (0, _store.createSelector)((state, index, candidate) => {
+  isSelected: (0, _store.createSelector)((state, index, itemValue) => {
     const comparer = state.isItemEqualToValue;
     const storeValue = state.value;
     if (state.multiple) {
-      return Array.isArray(storeValue) && storeValue.some(item => (0, _itemEquality.compareItemEquality)(item, candidate, comparer));
+      return Array.isArray(storeValue) && storeValue.some(selectedItem => (0, _itemEquality.compareItemEquality)(itemValue, selectedItem, comparer));
     }
 
     // `selectedIndex` is only updated after the items mount for the first time,
@@ -36,7 +53,7 @@ const selectors = exports.selectors = {
     if (state.selectedIndex === index && state.selectedIndex !== null) {
       return true;
     }
-    return (0, _itemEquality.compareItemEquality)(storeValue, candidate, comparer);
+    return (0, _itemEquality.compareItemEquality)(itemValue, storeValue, comparer);
   }),
   isSelectedByFocus: (0, _store.createSelector)((state, index) => {
     return state.selectedIndex === index;
@@ -48,16 +65,5 @@ const selectors = exports.selectors = {
   listElement: (0, _store.createSelector)(state => state.listElement),
   scrollUpArrowVisible: (0, _store.createSelector)(state => state.scrollUpArrowVisible),
   scrollDownArrowVisible: (0, _store.createSelector)(state => state.scrollDownArrowVisible),
-  hasScrollArrows: (0, _store.createSelector)(state => state.hasScrollArrows),
-  serializedValue: (0, _store.createSelector)(state => {
-    const {
-      multiple,
-      value,
-      itemToStringValue
-    } = state;
-    if (multiple && Array.isArray(value) && value.length === 0) {
-      return '';
-    }
-    return (0, _resolveValueLabel.stringifyAsValue)(value, itemToStringValue);
-  })
+  hasScrollArrows: (0, _store.createSelector)(state => state.hasScrollArrows)
 };

package/select/trigger/SelectTrigger.d.ts

@@ -7,19 +7,29 @@ import type { FieldRoot } from "../../field/root/FieldRoot.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface SelectTriggerState extends FieldRoot.State {
-  /** Whether the select popup is currently open. */
+  /**
+   * Whether the select popup is currently open.
+   */
   open: boolean;
-  /** Whether the select popup is readonly. */
+  /**
+   * Whether the select popup is readonly.
+   */
   readOnly: boolean;
-  /** The value of the currently selected item. */
+  /**
+   * The value of the currently selected item.
+   */
   value: any;
+  /**
+   * Whether the select doesn't have a value.
+   */
+  placeholder: boolean;
 }
 export interface SelectTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', SelectTrigger.State> {
   children?: React.ReactNode;
   /** Whether the component should ignore user interaction. */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 export declare namespace SelectTrigger {
   type State = SelectTriggerState;