@base-ui/react 1.1.0 → 1.3.0

package/esm/preview-card/arrow/PreviewCardArrow.js

@@ -27,12 +27,12 @@ export const PreviewCardArrow = /*#__PURE__*/React.forwardRef(function PreviewCa
     arrowStyles
   } = usePreviewCardPositionerContext();
   const open = store.useState('open');
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side,
     align,
     uncentered: arrowUncentered
-  }), [open, side, align, arrowUncentered]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [arrowRef, forwardedRef],

package/esm/preview-card/arrow/PreviewCardArrowDataAttributes.js

@@ -12,12 +12,12 @@ export let PreviewCardArrowDataAttributes = function (PreviewCardArrowDataAttrib
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  PreviewCardArrowDataAttributes["side"] = "data-side";
+  PreviewCardArrowDataAttributes[PreviewCardArrowDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  PreviewCardArrowDataAttributes["align"] = "data-align";
+  PreviewCardArrowDataAttributes[PreviewCardArrowDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   /**
    * Present when the preview card arrow is uncentered.
    */

package/esm/preview-card/backdrop/PreviewCardBackdrop.d.ts

@@ -13,9 +13,12 @@ export interface PreviewCardBackdropState {
    * Whether the preview card is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface PreviewCardBackdropProps extends BaseUIComponentProps<'div', PreviewCardBackdrop.State> {}
+export interface PreviewCardBackdropProps extends BaseUIComponentProps<'div', PreviewCardBackdropState> {}
 export declare namespace PreviewCardBackdrop {
   type State = PreviewCardBackdropState;
   type Props = PreviewCardBackdropProps;

package/esm/preview-card/backdrop/PreviewCardBackdrop.js

@@ -26,10 +26,10 @@ export const PreviewCardBackdrop = /*#__PURE__*/React.forwardRef(function Previe
   const open = store.useState('open');
   const mounted = store.useState('mounted');
   const transitionStatus = store.useState('transitionStatus');
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     transitionStatus
-  }), [open, transitionStatus]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef],

package/esm/preview-card/popup/PreviewCardPopup.d.ts

@@ -14,12 +14,24 @@ export interface PreviewCardPopupState {
    * Whether the preview card is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether transitions should be skipped.
+   */
   instant: 'dismiss' | 'focus' | undefined;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface PreviewCardPopupProps extends BaseUIComponentProps<'div', PreviewCardPopup.State> {}
+export interface PreviewCardPopupProps extends BaseUIComponentProps<'div', PreviewCardPopupState> {}
 export declare namespace PreviewCardPopup {
   type State = PreviewCardPopupState;
   type Props = PreviewCardPopupProps;

package/esm/preview-card/popup/PreviewCardPopup.js

@@ -50,13 +50,13 @@ export const PreviewCardPopup = /*#__PURE__*/React.forwardRef(function PreviewCa
   useHoverFloatingInteraction(floatingContext, {
     closeDelay: getCloseDelay
   });
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side,
     align,
     instant: instantType,
     transitionStatus
-  }), [open, side, align, instantType, transitionStatus]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],

package/esm/preview-card/popup/PreviewCardPopupDataAttributes.js

@@ -20,11 +20,11 @@ export let PreviewCardPopupDataAttributes = function (PreviewCardPopupDataAttrib
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  PreviewCardPopupDataAttributes["side"] = "data-side";
+  PreviewCardPopupDataAttributes[PreviewCardPopupDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  PreviewCardPopupDataAttributes["align"] = "data-align";
+  PreviewCardPopupDataAttributes[PreviewCardPopupDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   return PreviewCardPopupDataAttributes;
 }({});

package/esm/preview-card/portal/PreviewCardPortal.d.ts

@@ -8,16 +8,15 @@ import { FloatingPortalLite } from "../../utils/FloatingPortalLite.js";
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
  */
 export declare const PreviewCardPortal: React.ForwardRefExoticComponent<Omit<PreviewCardPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare namespace PreviewCardPortal {
-  interface State {}
-}
-export interface PreviewCardPortalProps extends FloatingPortalLite.Props<PreviewCardPortal.State> {
+export interface PreviewCardPortalState {}
+export interface PreviewCardPortalProps extends FloatingPortalLite.Props<PreviewCardPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace PreviewCardPortal {
+  type State = PreviewCardPortalState;
   type Props = PreviewCardPortalProps;
 }

package/esm/preview-card/portal/PreviewCardPortalContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const PreviewCardPortalContext = /*#__PURE__*/React.createContext(undefined);

package/esm/preview-card/positioner/PreviewCardPositioner.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type Side, type Align, useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
+import { type Side, type Align, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Positions the popup against the trigger.
@@ -13,12 +13,24 @@ export interface PreviewCardPositionerState {
    * Whether the preview card is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the anchor element is hidden.
+   */
   anchorHidden: boolean;
+  /**
+   * Whether transitions should be skipped.
+   */
   instant: 'dismiss' | 'focus' | undefined;
 }
-export interface PreviewCardPositionerProps extends useAnchorPositioning.SharedParameters, BaseUIComponentProps<'div', PreviewCardPositioner.State> {}
+export interface PreviewCardPositionerProps extends UseAnchorPositioningSharedParameters, BaseUIComponentProps<'div', PreviewCardPositionerState> {}
 export declare namespace PreviewCardPositioner {
   type State = PreviewCardPositionerState;
   type Props = PreviewCardPositionerProps;

package/esm/preview-card/positioner/PreviewCardPositioner.js

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { usePreviewCardRootContext } from "../root/PreviewCardContext.js";
 import { PreviewCardPositionerContext } from "./PreviewCardPositionerContext.js";
+import { FloatingNode, useFloatingNodeId } from "../../floating-ui-react/index.js";
 import { useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
 import { popupStateMapping } from "../../utils/popupStateMapping.js";
 import { usePreviewCardPortalContext } from "../portal/PreviewCardPortalContext.js";
@@ -38,6 +39,7 @@ export const PreviewCardPositioner = /*#__PURE__*/React.forwardRef(function Prev
   } = componentProps;
   const store = usePreviewCardRootContext();
   const keepMounted = usePreviewCardPortalContext();
+  const nodeId = useFloatingNodeId();
   const open = store.useState('open');
   const mounted = store.useState('mounted');
   const floatingRootContext = store.useState('floatingRootContext');
@@ -59,6 +61,7 @@ export const PreviewCardPositioner = /*#__PURE__*/React.forwardRef(function Prev
     sticky,
     disableAnchorTracking,
     keepMounted,
+    nodeId,
     collisionAvoidance,
     adaptiveOrigin: hasViewport ? adaptiveOrigin : undefined
   });
@@ -76,13 +79,13 @@ export const PreviewCardPositioner = /*#__PURE__*/React.forwardRef(function Prev
       }
     };
   }, [open, mounted, positioning.positionerStyles]);
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side: positioning.side,
     align: positioning.align,
     anchorHidden: positioning.anchorHidden,
     instant: instantType
-  }), [open, positioning.side, positioning.align, positioning.anchorHidden, instantType]);
+  };
   const contextValue = React.useMemo(() => ({
     side: positioning.side,
     align: positioning.align,
@@ -98,7 +101,10 @@ export const PreviewCardPositioner = /*#__PURE__*/React.forwardRef(function Prev
   });
   return /*#__PURE__*/_jsx(PreviewCardPositionerContext.Provider, {
     value: contextValue,
-    children: element
+    children: /*#__PURE__*/_jsx(FloatingNode, {
+      id: nodeId,
+      children: element
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") PreviewCardPositioner.displayName = "PreviewCardPositioner";

package/esm/preview-card/positioner/PreviewCardPositionerContext.d.ts

@@ -3,7 +3,7 @@ import type { Side, Align } from "../../utils/useAnchorPositioning.js";
 export interface PreviewCardPositionerContext {
   side: Side;
   align: Align;
-  arrowRef: React.MutableRefObject<Element | null>;
+  arrowRef: React.RefObject<Element | null>;
   arrowUncentered: boolean;
   arrowStyles: React.CSSProperties;
 }

package/esm/preview-card/positioner/PreviewCardPositionerDataAttributes.js

@@ -16,11 +16,11 @@ export let PreviewCardPositionerDataAttributes = function (PreviewCardPositioner
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  PreviewCardPositionerDataAttributes["side"] = "data-side";
+  PreviewCardPositionerDataAttributes[PreviewCardPositionerDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  PreviewCardPositionerDataAttributes["align"] = "data-align";
+  PreviewCardPositionerDataAttributes[PreviewCardPositionerDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   return PreviewCardPositionerDataAttributes;
 }({});

package/esm/preview-card/root/PreviewCardRoot.d.ts

@@ -18,31 +18,31 @@ export interface PreviewCardRootProps<Payload = unknown> {
    * To render a controlled preview card, use the `open` prop instead.
    * @default false
    */
-  defaultOpen?: boolean;
+  defaultOpen?: boolean | undefined;
   /**
    * Whether the preview card is currently open.
    */
-  open?: boolean;
+  open?: boolean | undefined;
   /**
    * Event handler called when the preview card is opened or closed.
    */
-  onOpenChange?: (open: boolean, eventDetails: PreviewCardRoot.ChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: PreviewCardRoot.ChangeEventDetails) => void) | undefined;
   /**
    * Event handler called after any animations complete when the preview card is opened or closed.
    */
-  onOpenChangeComplete?: (open: boolean) => void;
+  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
   /**
    * A ref to imperative actions.
    * - `unmount`: Unmounts the preview card popup.
    * - `close`: Closes the preview card imperatively when called.
    */
-  actionsRef?: React.RefObject<PreviewCardRoot.Actions | null>;
+  actionsRef?: React.RefObject<PreviewCardRoot.Actions | null> | undefined;
   /**
    * A handle to associate the preview card with a trigger.
    * If specified, allows external triggers to control the card's open state.
    * Can be created with the PreviewCard.createHandle() method.
    */
-  handle?: PreviewCardHandle<Payload>;
+  handle?: PreviewCardHandle<Payload> | undefined;
   /**
    * The content of the preview card.
    * This can be a regular React node or a render function that receives the `payload` of the active trigger.
@@ -50,15 +50,15 @@ export interface PreviewCardRootProps<Payload = unknown> {
   children?: React.ReactNode | PayloadChildRenderFunction<Payload>;
   /**
    * ID of the trigger that the preview card is associated with.
-   * This is useful in conjuntion with the `open` prop to create a controlled preview card.
+   * This is useful in conjunction with the `open` prop to create a controlled preview card.
    * There's no need to specify this prop when the preview card is uncontrolled (i.e. when the `open` prop is not set).
    */
-  triggerId?: string | null;
+  triggerId?: string | null | undefined;
   /**
    * ID of the trigger that the preview card is associated with.
    * This is useful in conjunction with the `defaultOpen` prop to create an initially open preview card.
    */
-  defaultTriggerId?: string | null;
+  defaultTriggerId?: string | null | undefined;
 }
 export interface PreviewCardRootActions {
   unmount: () => void;

package/esm/preview-card/root/PreviewCardRoot.js

@@ -2,20 +2,15 @@
 
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useDismiss, useInteractions } from "../../floating-ui-react/index.js";
-import { PreviewCardRootContext } from "./PreviewCardContext.js";
+import { useOnFirstRender } from '@base-ui/utils/useOnFirstRender';
+import { useDismiss, useInteractions, FloatingTree } from "../../floating-ui-react/index.js";
+import { PreviewCardRootContext, usePreviewCardRootContext } from "./PreviewCardContext.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 import { PreviewCardStore } from "../store/PreviewCardStore.js";
 import { useImplicitActiveTrigger, useOpenStateTransitions } from "../../utils/popups/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Groups all parts of the preview card.
- * Doesn’t render its own HTML element.
- *
- * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
- */
-export function PreviewCardRoot(props) {
+function PreviewCardRootComponent(props) {
   const {
     open: openProp,
     defaultOpen = false,
@@ -28,11 +23,23 @@ export function PreviewCardRoot(props) {
     children
   } = props;
   const store = PreviewCardStore.useStore(handle?.store, {
-    open: openProp ?? defaultOpen,
-    activeTriggerId: triggerIdProp !== undefined ? triggerIdProp : defaultTriggerIdProp
+    open: defaultOpen,
+    openProp,
+    activeTriggerId: defaultTriggerIdProp,
+    triggerIdProp
+  });
+
+  // Support initially open state when uncontrolled
+  useOnFirstRender(() => {
+    if (openProp === undefined && store.state.open === false && defaultOpen === true) {
+      store.update({
+        open: true,
+        activeTriggerId: defaultTriggerIdProp
+      });
+    }
   });
-  store.useControlledProp('open', openProp, defaultOpen);
-  store.useControlledProp('activeTriggerId', triggerIdProp, defaultTriggerIdProp);
+  store.useControlledProp('openProp', openProp);
+  store.useControlledProp('triggerIdProp', triggerIdProp);
   store.useContextCallback('onOpenChange', onOpenChange);
   store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
   const open = store.useState('open');
@@ -78,6 +85,25 @@ export function PreviewCardRoot(props) {
     }) : children
   });
 }
+
+/**
+ * Groups all parts of the preview card.
+ * Doesn’t render its own HTML element.
+ *
+ * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
+ */
+export function PreviewCardRoot(props) {
+  if (usePreviewCardRootContext(true)) {
+    return /*#__PURE__*/_jsx(PreviewCardRootComponent, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(FloatingTree, {
+    children: /*#__PURE__*/_jsx(PreviewCardRootComponent, {
+      ...props
+    })
+  });
+}
 function createPreviewCardEventDetails(store, reason) {
   const details = createChangeEventDetails(reason);
   details.preventUnmountOnClose = () => {