@radix-ui/react-select 2.3.0-rc.1780413158372 → 2.3.0-rc.1780417876104

package/dist/index.d.mts

@@ -45,9 +45,19 @@ interface SelectPortalProps {
      * Specify a container element to portal the content into.
      */
     container?: PortalProps['container'];
+    /**
+     * Used to force mounting when more control is needed. Useful when controlling
+     * animation with React animation libraries.
+     */
+    forceMount?: true;
 }
 declare const SelectPortal: React.FC<SelectPortalProps>;
 interface SelectContentProps extends SelectContentImplProps {
+    /**
+     * Used to force mounting when more control is needed. Useful when
+     * controlling animation with React animation libraries.
+     */
+    forceMount?: true;
 }
 declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
 type DismissableLayerProps = React.ComponentPropsWithoutRef<typeof DismissableLayer>;

package/dist/index.d.ts

@@ -45,9 +45,19 @@ interface SelectPortalProps {
      * Specify a container element to portal the content into.
      */
     container?: PortalProps['container'];
+    /**
+     * Used to force mounting when more control is needed. Useful when controlling
+     * animation with React animation libraries.
+     */
+    forceMount?: true;
 }
 declare const SelectPortal: React.FC<SelectPortalProps>;
 interface SelectContentProps extends SelectContentImplProps {
+    /**
+     * Used to force mounting when more control is needed. Useful when
+     * controlling animation with React animation libraries.
+     */
+    forceMount?: true;
 }
 declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
 type DismissableLayerProps = React.ComponentPropsWithoutRef<typeof DismissableLayer>;

package/dist/index.js

@@ -83,6 +83,7 @@ var import_react_id = require("@radix-ui/react-id");
 var PopperPrimitive = __toESM(require("@radix-ui/react-popper"));
 var import_react_popper = require("@radix-ui/react-popper");
 var import_react_portal = require("@radix-ui/react-portal");
+var import_react_presence = require("@radix-ui/react-presence");
 var import_react_primitive = require("@radix-ui/react-primitive");
 var import_react_slot = require("@radix-ui/react-slot");
 var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
@@ -313,29 +314,37 @@ var SelectIcon = React.forwardRef(
 );
 SelectIcon.displayName = ICON_NAME;
 var PORTAL_NAME = "SelectPortal";
+var [PortalProvider, usePortalContext] = createSelectContext(PORTAL_NAME, {
+  forceMount: void 0
+});
 var SelectPortal = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_portal.Portal, { asChild: true, ...props });
+  const { __scopeSelect, forceMount, ...portalProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PortalProvider, { scope: props.__scopeSelect, forceMount, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_portal.Portal, { asChild: true, ...portalProps }) });
 };
 SelectPortal.displayName = PORTAL_NAME;
 var CONTENT_NAME = "SelectContent";
 var SelectContent = React.forwardRef(
   (props, forwardedRef) => {
+    const portalContext = usePortalContext(CONTENT_NAME, props.__scopeSelect);
+    const { forceMount = portalContext.forceMount, ...contentProps } = props;
     const context = useSelectContext(CONTENT_NAME, props.__scopeSelect);
     const [fragment, setFragment] = React.useState();
     (0, import_react_use_layout_effect.useLayoutEffect)(() => {
       setFragment(new DocumentFragment());
     }, []);
-    if (!context.open) {
-      const frag = fragment;
-      return frag ? ReactDOM.createPortal(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContentProvider, { scope: props.__scopeSelect, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, { scope: props.__scopeSelect, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: props.children }) }) }),
-        frag
-      ) : null;
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContentImpl, { ...props, ref: forwardedRef });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || context.open, children: ({ present }) => present ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContentImpl, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContentFragment, { ...contentProps, fragment }) });
   }
 );
 SelectContent.displayName = CONTENT_NAME;
+var SelectContentFragment = React.forwardRef((props, forwardedRef) => {
+  const { __scopeSelect, children, fragment } = props;
+  if (!fragment) return null;
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContentProvider, { scope: __scopeSelect, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, { scope: __scopeSelect, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: forwardedRef, children }) }) }),
+    fragment
+  );
+});
+SelectContentFragment.displayName = "SelectContentFragment";
 var CONTENT_MARGIN = 10;
 var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME);
 var CONTENT_IMPL_NAME = "SelectContentImpl";
@@ -1127,9 +1136,8 @@ var SelectArrow = React.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, ...arrowProps } = props;
     const popperScope = usePopperScope(__scopeSelect);
-    const context = useSelectContext(ARROW_NAME, __scopeSelect);
     const contentContext = useSelectContentContext(ARROW_NAME, __scopeSelect);
-    return context.open && contentContext.position === "popper" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null;
+    return contentContext.position === "popper" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null;
   }
 );
 SelectArrow.displayName = ARROW_NAME;