@radix-ui/react-select 2.3.8 → 2.4.0-rc.1791406557805

package/dist/index.d.mts

@@ -18,30 +18,30 @@ declare const Direction: {
 };
 type Direction = (typeof Direction)[keyof typeof Direction];
 type ScopedProps<P> = P & {
-    __scopeSelect?: Scope;
+    __scopeSelect?: Scope | undefined;
 };
 declare const createSelectScope: _radix_ui_react_context.CreateScope;
 interface SelectSharedProps {
-    children?: React.ReactNode;
-    open?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?(open: boolean): void;
-    dir?: Direction;
-    name?: string;
-    autoComplete?: string;
-    disabled?: boolean;
-    required?: boolean;
-    form?: string;
+    children?: React.ReactNode | undefined;
+    open?: boolean | undefined;
+    defaultOpen?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    dir?: Direction | undefined;
+    name?: string | undefined;
+    autoComplete?: string | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    form?: string | undefined;
 }
 type SelectProps = SelectSharedProps & {
-    value?: string;
-    defaultValue?: string;
-    onValueChange?(value: string): void;
+    value?: string | undefined;
+    defaultValue?: string | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
 };
 interface SelectProviderProps extends SelectSharedProps {
-    value?: string;
-    defaultValue?: string;
-    onValueChange?(value: string): void;
+    value?: string | undefined;
+    defaultValue?: string | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
 }
 declare function SelectProvider(props: ScopedProps<SelectProviderProps>): React.JSX.Element;
 declare const Select: React.FC<SelectProps>;
@@ -51,7 +51,7 @@ interface SelectTriggerProps extends PrimitiveButtonProps {
 declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 type PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;
 interface SelectValueProps extends Omit<PrimitiveSpanProps, 'placeholder'> {
-    placeholder?: React.ReactNode;
+    placeholder?: React.ReactNode | undefined;
 }
 declare const SelectValue: React.ForwardRefExoticComponent<SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
 interface SelectIconProps extends PrimitiveSpanProps {
@@ -59,16 +59,16 @@ interface SelectIconProps extends PrimitiveSpanProps {
 declare const SelectIcon: React.ForwardRefExoticComponent<SelectIconProps & React.RefAttributes<HTMLSpanElement>>;
 type PortalProps = React.ComponentPropsWithoutRef<typeof Portal>;
 interface SelectPortalProps {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
     /**
      * Specify a container element to portal the content into.
      */
-    container?: PortalProps['container'];
+    container?: PortalProps['container'] | undefined;
     /**
      * Used to force mounting when more control is needed. Useful when controlling
      * animation with React animation libraries.
      */
-    forceMount?: true;
+    forceMount?: true | undefined;
 }
 declare const SelectPortal: React.FC<SelectPortalProps>;
 interface SelectContentProps extends SelectContentImplProps {
@@ -76,31 +76,31 @@ interface SelectContentProps extends SelectContentImplProps {
      * Used to force mounting when more control is needed. Useful when
      * controlling animation with React animation libraries.
      */
-    forceMount?: true;
+    forceMount?: true | undefined;
 }
 declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
 type DismissableLayerProps = React.ComponentPropsWithoutRef<typeof DismissableLayer>;
 type FocusScopeProps = React.ComponentPropsWithoutRef<typeof FocusScope>;
 type SelectPopperPrivateProps = {
-    onPlaced?: PopperContentProps['onPlaced'];
+    onPlaced?: PopperContentProps['onPlaced'] | undefined;
 };
 interface SelectContentImplProps extends Omit<SelectPopperPositionProps, keyof SelectPopperPrivateProps>, Omit<SelectItemAlignedPositionProps, keyof SelectPopperPrivateProps> {
     /**
      * Event handler called when auto-focusing on close.
      * Can be prevented.
      */
-    onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];
+    onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'] | undefined;
     /**
      * Event handler called when the escape key is down.
      * Can be prevented.
      */
-    onEscapeKeyDown?: DismissableLayerProps['onEscapeKeyDown'];
+    onEscapeKeyDown?: DismissableLayerProps['onEscapeKeyDown'] | undefined;
     /**
      * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.
      * Can be prevented.
      */
-    onPointerDownOutside?: DismissableLayerProps['onPointerDownOutside'];
-    position?: Position;
+    onPointerDownOutside?: DismissableLayerProps['onPointerDownOutside'] | undefined;
+    position?: Position | undefined;
 }
 interface SelectItemAlignedPositionProps extends PrimitiveDivProps, SelectPopperPrivateProps {
 }
@@ -109,7 +109,7 @@ interface SelectPopperPositionProps extends PopperContentProps, SelectPopperPriv
 }
 type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
 interface SelectViewportProps extends PrimitiveDivProps {
-    nonce?: string;
+    nonce?: string | undefined;
 }
 declare const SelectViewport: React.ForwardRefExoticComponent<SelectViewportProps & React.RefAttributes<HTMLDivElement>>;
 interface SelectGroupProps extends PrimitiveDivProps {
@@ -120,8 +120,8 @@ interface SelectLabelProps extends PrimitiveDivProps {
 declare const SelectLabel: React.ForwardRefExoticComponent<SelectLabelProps & React.RefAttributes<HTMLDivElement>>;
 interface SelectItemProps extends PrimitiveDivProps {
     value: string;
-    disabled?: boolean;
-    textValue?: string;
+    disabled?: boolean | undefined;
+    textValue?: string | undefined;
 }
 declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
 interface SelectItemTextProps extends PrimitiveSpanProps {

package/dist/index.d.ts

@@ -18,30 +18,30 @@ declare const Direction: {
 };
 type Direction = (typeof Direction)[keyof typeof Direction];
 type ScopedProps<P> = P & {
-    __scopeSelect?: Scope;
+    __scopeSelect?: Scope | undefined;
 };
 declare const createSelectScope: _radix_ui_react_context.CreateScope;
 interface SelectSharedProps {
-    children?: React.ReactNode;
-    open?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?(open: boolean): void;
-    dir?: Direction;
-    name?: string;
-    autoComplete?: string;
-    disabled?: boolean;
-    required?: boolean;
-    form?: string;
+    children?: React.ReactNode | undefined;
+    open?: boolean | undefined;
+    defaultOpen?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    dir?: Direction | undefined;
+    name?: string | undefined;
+    autoComplete?: string | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    form?: string | undefined;
 }
 type SelectProps = SelectSharedProps & {
-    value?: string;
-    defaultValue?: string;
-    onValueChange?(value: string): void;
+    value?: string | undefined;
+    defaultValue?: string | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
 };
 interface SelectProviderProps extends SelectSharedProps {
-    value?: string;
-    defaultValue?: string;
-    onValueChange?(value: string): void;
+    value?: string | undefined;
+    defaultValue?: string | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
 }
 declare function SelectProvider(props: ScopedProps<SelectProviderProps>): React.JSX.Element;
 declare const Select: React.FC<SelectProps>;
@@ -51,7 +51,7 @@ interface SelectTriggerProps extends PrimitiveButtonProps {
 declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 type PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;
 interface SelectValueProps extends Omit<PrimitiveSpanProps, 'placeholder'> {
-    placeholder?: React.ReactNode;
+    placeholder?: React.ReactNode | undefined;
 }
 declare const SelectValue: React.ForwardRefExoticComponent<SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
 interface SelectIconProps extends PrimitiveSpanProps {
@@ -59,16 +59,16 @@ interface SelectIconProps extends PrimitiveSpanProps {
 declare const SelectIcon: React.ForwardRefExoticComponent<SelectIconProps & React.RefAttributes<HTMLSpanElement>>;
 type PortalProps = React.ComponentPropsWithoutRef<typeof Portal>;
 interface SelectPortalProps {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
     /**
      * Specify a container element to portal the content into.
      */
-    container?: PortalProps['container'];
+    container?: PortalProps['container'] | undefined;
     /**
      * Used to force mounting when more control is needed. Useful when controlling
      * animation with React animation libraries.
      */
-    forceMount?: true;
+    forceMount?: true | undefined;
 }
 declare const SelectPortal: React.FC<SelectPortalProps>;
 interface SelectContentProps extends SelectContentImplProps {
@@ -76,31 +76,31 @@ interface SelectContentProps extends SelectContentImplProps {
      * Used to force mounting when more control is needed. Useful when
      * controlling animation with React animation libraries.
      */
-    forceMount?: true;
+    forceMount?: true | undefined;
 }
 declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
 type DismissableLayerProps = React.ComponentPropsWithoutRef<typeof DismissableLayer>;
 type FocusScopeProps = React.ComponentPropsWithoutRef<typeof FocusScope>;
 type SelectPopperPrivateProps = {
-    onPlaced?: PopperContentProps['onPlaced'];
+    onPlaced?: PopperContentProps['onPlaced'] | undefined;
 };
 interface SelectContentImplProps extends Omit<SelectPopperPositionProps, keyof SelectPopperPrivateProps>, Omit<SelectItemAlignedPositionProps, keyof SelectPopperPrivateProps> {
     /**
      * Event handler called when auto-focusing on close.
      * Can be prevented.
      */
-    onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];
+    onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'] | undefined;
     /**
      * Event handler called when the escape key is down.
      * Can be prevented.
      */
-    onEscapeKeyDown?: DismissableLayerProps['onEscapeKeyDown'];
+    onEscapeKeyDown?: DismissableLayerProps['onEscapeKeyDown'] | undefined;
     /**
      * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.
      * Can be prevented.
      */
-    onPointerDownOutside?: DismissableLayerProps['onPointerDownOutside'];
-    position?: Position;
+    onPointerDownOutside?: DismissableLayerProps['onPointerDownOutside'] | undefined;
+    position?: Position | undefined;
 }
 interface SelectItemAlignedPositionProps extends PrimitiveDivProps, SelectPopperPrivateProps {
 }
@@ -109,7 +109,7 @@ interface SelectPopperPositionProps extends PopperContentProps, SelectPopperPriv
 }
 type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
 interface SelectViewportProps extends PrimitiveDivProps {
-    nonce?: string;
+    nonce?: string | undefined;
 }
 declare const SelectViewport: React.ForwardRefExoticComponent<SelectViewportProps & React.RefAttributes<HTMLDivElement>>;
 interface SelectGroupProps extends PrimitiveDivProps {
@@ -120,8 +120,8 @@ interface SelectLabelProps extends PrimitiveDivProps {
 declare const SelectLabel: React.ForwardRefExoticComponent<SelectLabelProps & React.RefAttributes<HTMLDivElement>>;
 interface SelectItemProps extends PrimitiveDivProps {
     value: string;
-    disabled?: boolean;
-    textValue?: string;
+    disabled?: boolean | undefined;
+    textValue?: string | undefined;
 }
 declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
 interface SelectItemTextProps extends PrimitiveSpanProps {

package/dist/index.js

@@ -94,7 +94,6 @@ var import_react_slot = require("@radix-ui/react-slot");
 var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
 var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
 var import_react_use_layout_effect = require("@radix-ui/react-use-layout-effect");
-var import_react_use_previous = require("@radix-ui/react-use-previous");
 var import_react_visually_hidden = require("@radix-ui/react-visually-hidden");
 var import_aria_hidden = require("aria-hidden");
 var import_react_remove_scroll = require("react-remove-scroll");
@@ -155,6 +154,11 @@ function SelectProvider(props) {
     caller: SELECT_NAME
   });
   const triggerPointerDownPosRef = React.useRef(null);
+  const hasConsumerStoppedPropagationRef = React.useRef(false);
+  const [userInteractionCount, onUserInteraction] = React.useReducer(
+    (count) => count + 1,
+    0
+  );
   const initialValueRef = React.useRef(value);
   React.useEffect(() => {
     const associatedForm = form ? trigger?.ownerDocument.getElementById(form) : trigger?.form;
@@ -189,6 +193,9 @@ function SelectProvider(props) {
     contentId,
     value,
     onValueChange: setValue,
+    hasConsumerStoppedPropagationRef,
+    userInteractionCount,
+    onUserInteraction,
     open,
     onOpenChange: setOpen,
     dir: direction,
@@ -246,6 +253,7 @@ var SelectTrigger = /* @__PURE__ */ React.forwardRef(
       const currentItem = enabledItems.find((item) => item.value === context.value);
       const nextItem = findNextItem(enabledItems, search, currentItem);
       if (nextItem !== void 0) {
+        context.onUserInteraction();
         context.onValueChange(nextItem.value);
       }
     });
@@ -297,7 +305,10 @@ var SelectTrigger = /* @__PURE__ */ React.forwardRef(
         onKeyDown: (0, import_primitive.composeEventHandlers)(triggerProps.onKeyDown, (event) => {
           const isTypingAhead = searchRef.current !== "";
           const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
-          if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key);
+          if (!isModifierKey && event.key.length === 1) {
+            context.hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
+            handleTypeaheadSearch(event.key);
+          }
           if (isTypingAhead && event.key === " ") return;
           if (OPEN_KEYS.includes(event.key)) {
             handleOpen();
@@ -904,10 +915,13 @@ var SelectItem = /* @__PURE__ */ React.forwardRef(
     const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, handleItemRefCallback);
     const textId = (0, import_react_id.useId)();
     const pointerTypeRef = React.useRef("touch");
-    const handleSelect = /* @__PURE__ */ __name(() => {
+    function handleSelect(event) {
+      context.hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
+      context.onUserInteraction();
       context.onValueChange(value);
       context.onOpenChange(false);
-    }, "handleSelect");
+    }
+    __name(handleSelect, "handleSelect");
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       SelectItemContextProvider,
       {
@@ -941,20 +955,20 @@ var SelectItem = /* @__PURE__ */ React.forwardRef(
                 ref: composedRefs,
                 onFocus: (0, import_primitive.composeEventHandlers)(itemProps.onFocus, () => setIsFocused(true)),
                 onBlur: (0, import_primitive.composeEventHandlers)(itemProps.onBlur, () => setIsFocused(false)),
-                onClick: (0, import_primitive.composeEventHandlers)(itemProps.onClick, () => {
+                onClick: (0, import_primitive.composeEventHandlers)(itemProps.onClick, (event) => {
                   if (disabled) {
                     return;
                   }
                   if (pointerTypeRef.current !== "mouse") {
-                    handleSelect();
+                    handleSelect(event);
                   }
                 }),
-                onPointerUp: (0, import_primitive.composeEventHandlers)(itemProps.onPointerUp, () => {
+                onPointerUp: (0, import_primitive.composeEventHandlers)(itemProps.onPointerUp, (event) => {
                   if (disabled) {
                     return;
                   }
                   if (pointerTypeRef.current === "mouse") {
-                    handleSelect();
+                    handleSelect(event);
                   }
                 }),
                 onPointerDown: (0, import_primitive.composeEventHandlers)(itemProps.onPointerDown, (event) => {
@@ -982,7 +996,7 @@ var SelectItem = /* @__PURE__ */ React.forwardRef(
                     return;
                   }
                   if (SELECTION_KEYS.includes(event.key)) {
-                    handleSelect();
+                    handleSelect(event);
                   }
                   if (event.key === " ") {
                     event.preventDefault();
@@ -1171,12 +1185,23 @@ var SelectBubbleInput = /* @__PURE__ */ React.forwardRef(
   // blank line to reduce diff noise
   /* @__PURE__ */ __name(function SelectBubbleInput2({ __scopeSelect, ...props }, forwardedRef) {
     const context = useSelectContext(BUBBLE_INPUT_NAME, __scopeSelect);
-    const { value, onValueChange, required, disabled, name, autoComplete, form } = context;
+    const {
+      value,
+      onValueChange,
+      required,
+      disabled,
+      name,
+      autoComplete,
+      form,
+      hasConsumerStoppedPropagationRef,
+      userInteractionCount
+    } = context;
     const { nativeOptions, nativeSelectKey } = context;
     const ref = React.useRef(null);
     const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
     const selectValue = value ?? "";
-    const prevValue = (0, import_react_use_previous.usePrevious)(selectValue);
+    const prevValueRef = React.useRef(selectValue);
+    const prevUserInteractionCountRef = React.useRef(userInteractionCount);
     const hasEmptyValueOption = Array.from(nativeOptions).some(
       (option) => (option.props.value ?? "") === ""
     );
@@ -1189,12 +1214,17 @@ var SelectBubbleInput = /* @__PURE__ */ React.forwardRef(
         "value"
       );
       const setValue = descriptor.set;
-      if (prevValue !== selectValue && setValue) {
-        const event = new Event("change", { bubbles: true });
+      const isUserInteraction = userInteractionCount !== prevUserInteractionCountRef.current;
+      prevUserInteractionCountRef.current = userInteractionCount;
+      const valueChanged = prevValueRef.current !== selectValue;
+      prevValueRef.current = selectValue;
+      const bubbles = isUserInteraction && !hasConsumerStoppedPropagationRef.current;
+      if (valueChanged && setValue) {
+        const event = new Event("change", { bubbles });
         setValue.call(select, selectValue);
         select.dispatchEvent(event);
       }
-    }, [prevValue, selectValue]);
+    }, [hasConsumerStoppedPropagationRef, selectValue, userInteractionCount]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_react_primitive.Primitive.select,
       {
@@ -1235,11 +1265,13 @@ function useTypeaheadSearch(onSearchChange) {
     (key) => {
       const search = searchRef.current + key;
       handleSearchChange(search);
-      (/* @__PURE__ */ __name((function updateSearch(value) {
+      function updateSearch(value) {
         searchRef.current = value;
         window.clearTimeout(timerRef.current);
         if (value !== "") timerRef.current = window.setTimeout(() => updateSearch(""), 1e3);
-      }), "updateSearch"))(search);
+      }
+      __name(updateSearch, "updateSearch");
+      updateSearch(search);
     },
     [handleSearchChange]
   );