@radix-ui/react-select 2.1.2-rc.9 → 2.1.3-rc.1

package/dist/index.d.mts

@@ -1,3 +1,4 @@
+import * as _radix_ui_react_context from '@radix-ui/react-context';
 import * as React from 'react';
 import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
 import { FocusScope } from '@radix-ui/react-focus-scope';
@@ -5,19 +6,8 @@ import * as PopperPrimitive from '@radix-ui/react-popper';
 import { Portal as Portal$1 } from '@radix-ui/react-portal';
 import { Primitive } from '@radix-ui/react-primitive';
 
-type Scope<C = any> = {
-    [scopeName: string]: React.Context<C>[];
-} | undefined;
-type ScopeHook = (scope: Scope) => {
-    [__scopeProp: string]: Scope;
-};
-interface CreateScope {
-    scopeName: string;
-    (): ScopeHook;
-}
-
 type Direction = 'ltr' | 'rtl';
-declare const createSelectScope: CreateScope;
+declare const createSelectScope: _radix_ui_react_context.CreateScope;
 interface SelectProps {
     children?: React.ReactNode;
     value?: string;
@@ -31,6 +21,7 @@ interface SelectProps {
     autoComplete?: string;
     disabled?: boolean;
     required?: boolean;
+    form?: string;
 }
 declare const Select: React.FC<SelectProps>;
 type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import * as _radix_ui_react_context from '@radix-ui/react-context';
 import * as React from 'react';
 import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
 import { FocusScope } from '@radix-ui/react-focus-scope';
@@ -5,19 +6,8 @@ import * as PopperPrimitive from '@radix-ui/react-popper';
 import { Portal as Portal$1 } from '@radix-ui/react-portal';
 import { Primitive } from '@radix-ui/react-primitive';
 
-type Scope<C = any> = {
-    [scopeName: string]: React.Context<C>[];
-} | undefined;
-type ScopeHook = (scope: Scope) => {
-    [__scopeProp: string]: Scope;
-};
-interface CreateScope {
-    scopeName: string;
-    (): ScopeHook;
-}
-
 type Direction = 'ltr' | 'rtl';
-declare const createSelectScope: CreateScope;
+declare const createSelectScope: _radix_ui_react_context.CreateScope;
 interface SelectProps {
     children?: React.ReactNode;
     value?: string;
@@ -31,6 +21,7 @@ interface SelectProps {
     autoComplete?: string;
     disabled?: boolean;
     required?: boolean;
+    form?: string;
 }
 declare const Select: React.FC<SelectProps>;
 type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;

package/dist/index.js

@@ -118,7 +118,8 @@ var Select = (props) => {
     name,
     autoComplete,
     disabled,
-    required
+    required,
+    form
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const [trigger, setTrigger] = React.useState(null);
@@ -136,7 +137,7 @@ var Select = (props) => {
     onChange: onValueChange
   });
   const triggerPointerDownPosRef = React.useRef(null);
-  const isFormControl = trigger ? Boolean(trigger.closest("form")) : true;
+  const isFormControl = trigger ? form || !!trigger.closest("form") : true;
   const [nativeOptionsSet, setNativeOptionsSet] = React.useState(/* @__PURE__ */ new Set());
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Root, { ...popperScope, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -187,6 +188,7 @@ var Select = (props) => {
             value,
             onChange: (event) => setValue(event.target.value),
             disabled,
+            form,
             children: [
               value === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "" }) : null,
               Array.from(nativeOptionsSet)
@@ -593,7 +595,15 @@ var SelectItemAlignedPosition = React.forwardRef((props, forwardedRef) => {
         const minContentWidth = triggerRect.width + leftDelta;
         const contentWidth = Math.max(minContentWidth, contentRect.width);
         const rightEdge = window.innerWidth - CONTENT_MARGIN;
-        const clampedLeft = (0, import_number.clamp)(left, [CONTENT_MARGIN, rightEdge - contentWidth]);
+        const clampedLeft = (0, import_number.clamp)(left, [
+          CONTENT_MARGIN,
+          // Prevents the content from going off the starting edge of the
+          // viewport. It may still go off the ending edge, but this can be
+          // controlled by the user since they may want to manage overflow in a
+          // specific way.
+          // https://github.com/radix-ui/primitives/issues/2049
+          Math.max(CONTENT_MARGIN, rightEdge - contentWidth)
+        ]);
         contentWrapper.style.minWidth = minContentWidth + "px";
         contentWrapper.style.left = clampedLeft + "px";
       } else {
@@ -603,7 +613,10 @@ var SelectItemAlignedPosition = React.forwardRef((props, forwardedRef) => {
         const minContentWidth = triggerRect.width + rightDelta;
         const contentWidth = Math.max(minContentWidth, contentRect.width);
         const leftEdge = window.innerWidth - CONTENT_MARGIN;
-        const clampedRight = (0, import_number.clamp)(right, [CONTENT_MARGIN, leftEdge - contentWidth]);
+        const clampedRight = (0, import_number.clamp)(right, [
+          CONTENT_MARGIN,
+          Math.max(CONTENT_MARGIN, leftEdge - contentWidth)
+        ]);
         contentWrapper.style.minWidth = minContentWidth + "px";
         contentWrapper.style.right = clampedRight + "px";
       }
@@ -787,7 +800,11 @@ var SelectViewport = React.forwardRef(
             // (independent of the scrollUpButton).
             position: "relative",
             flex: 1,
-            overflow: "auto",
+            // Viewport should only be scrollable in the vertical direction.
+            // This won't work in vertical writing modes, so we'll need to
+            // revisit this if/when that is supported
+            // https://developer.chrome.com/blog/vertical-form-controls
+            overflow: "hidden auto",
             ...viewportProps.style
           },
           onScroll: (0, import_primitive.composeEventHandlers)(viewportProps.onScroll, (event) => {