@base-ui/react 1.3.0 → 1.4.0

package/utils/InternalBackdrop.js

@@ -17,19 +17,8 @@ const InternalBackdrop = exports.InternalBackdrop = /*#__PURE__*/React.forwardRe
   } = props;
   let clipPath;
   if (cutout) {
-    const rect = cutout?.getBoundingClientRect();
-    clipPath = `polygon(
-      0% 0%,
-      100% 0%,
-      100% 100%,
-      0% 100%,
-      0% 0%,
-      ${rect.left}px ${rect.top}px,
-      ${rect.left}px ${rect.bottom}px,
-      ${rect.right}px ${rect.bottom}px,
-      ${rect.right}px ${rect.top}px,
-      ${rect.left}px ${rect.top}px
-    )`;
+    const rect = cutout.getBoundingClientRect();
+    clipPath = `polygon(0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,${rect.left}px ${rect.top}px,${rect.left}px ${rect.bottom}px,${rect.right}px ${rect.bottom}px,${rect.right}px ${rect.top}px,${rect.left}px ${rect.top}px)`;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: ref,

package/utils/createBaseUIEventDetails.d.ts

@@ -71,7 +71,7 @@ type BaseUIChangeEventDetail<Reason extends string, CustomProperties extends obj
 /**
  * Details of custom change events emitted by Base UI components.
  */
-export type BaseUIChangeEventDetails<Reason extends string, CustomProperties extends object = {}> = Reason extends string ? BaseUIChangeEventDetail<Reason, CustomProperties> : never;
+export type BaseUIChangeEventDetails<Reason extends string, CustomProperties extends object = {}> = Reason extends string ? BaseUIChangeEventDetail<Reason, CustomProperties> & {} : never;
 /**
  * Details of custom generic events emitted by Base UI components.
  */
@@ -85,7 +85,7 @@ type BaseUIGenericEventDetail<Reason extends string, CustomProperties extends ob
    */
   event: ReasonToEvent<Reason>;
 } & CustomProperties;
-export type BaseUIGenericEventDetails<Reason extends string, CustomProperties extends object = {}> = Reason extends string ? BaseUIGenericEventDetail<Reason, CustomProperties> : never;
+export type BaseUIGenericEventDetails<Reason extends string, CustomProperties extends object = {}> = Reason extends string ? BaseUIGenericEventDetail<Reason, CustomProperties> & {} : never;
 /**
  * Creates a Base UI event details object with the given reason and utilities
  * for preventing Base UI's internal event handling.

package/utils/getPseudoElementBounds.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getPseudoElementBounds = getPseudoElementBounds;
+var _owner = require("@base-ui/utils/owner");
 function getPseudoElementBounds(element) {
   const elementRect = element.getBoundingClientRect();
 
@@ -11,8 +12,9 @@ function getPseudoElementBounds(element) {
   if (process.env.NODE_ENV !== 'production') {
     return elementRect;
   }
-  const beforeStyles = window.getComputedStyle(element, '::before');
-  const afterStyles = window.getComputedStyle(element, '::after');
+  const win = (0, _owner.ownerWindow)(element);
+  const beforeStyles = win.getComputedStyle(element, '::before');
+  const afterStyles = win.getComputedStyle(element, '::after');
   const hasPseudoElements = beforeStyles.content !== 'none' || afterStyles.content !== 'none';
   if (!hasPseudoElements) {
     return elementRect;

package/utils/popups/store.js

@@ -17,7 +17,7 @@ function createInitialPopupStoreState() {
     open: false,
     openProp: undefined,
     mounted: false,
-    transitionStatus: 'idle',
+    transitionStatus: undefined,
     floatingRootContext: (0, _getEmptyRootContext.getEmptyRootContext)(),
     preventUnmountingOnClose: false,
     payload: undefined,

package/utils/popups/useTriggerFocusGuards.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { type BaseUIChangeEventDetails } from "../createBaseUIEventDetails.js";
+import { REASONS } from "../reasons.js";
+/**
+ * Minimal store interface required by the focus guard hook.
+ * Both PopoverStore and MenuStore satisfy this interface.
+ */
+interface TriggerFocusGuardStore {
+  setOpen(open: boolean, eventDetails: BaseUIChangeEventDetails<typeof REASONS.focusOut>): void;
+  select(key: 'positionerElement'): HTMLElement | null;
+  context: {
+    readonly beforeContentFocusGuardRef: React.RefObject<HTMLElement | null>;
+    readonly triggerFocusTargetRef: React.RefObject<HTMLElement | null>;
+  };
+}
+/**
+ * Provides focus guard handlers for popup triggers (Popover, Menu).
+ *
+ * When the popup is open, invisible focus guard elements are placed before and after
+ * the trigger. These handlers close the popup and move focus to the appropriate
+ * tabbable element when the guards receive focus (i.e. when the user tabs out).
+ */
+export declare function useTriggerFocusGuards(store: TriggerFocusGuardStore, triggerElementRef: React.RefObject<HTMLElement | null>): {
+  preFocusGuardRef: React.RefObject<HTMLElement | null>;
+  handlePreFocusGuardFocus: (event: React.FocusEvent) => void;
+  handleFocusTargetFocus: (event: React.FocusEvent) => void;
+};
+export {};

package/utils/popups/useTriggerFocusGuards.js

@@ -0,0 +1,60 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTriggerFocusGuards = useTriggerFocusGuards;
+var React = _interopRequireWildcard(require("react"));
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _utils = require("../../floating-ui-react/utils");
+var _createBaseUIEventDetails = require("../createBaseUIEventDetails");
+var _reasons = require("../reasons");
+/**
+ * Minimal store interface required by the focus guard hook.
+ * Both PopoverStore and MenuStore satisfy this interface.
+ */
+
+/**
+ * Provides focus guard handlers for popup triggers (Popover, Menu).
+ *
+ * When the popup is open, invisible focus guard elements are placed before and after
+ * the trigger. These handlers close the popup and move focus to the appropriate
+ * tabbable element when the guards receive focus (i.e. when the user tabs out).
+ */
+function useTriggerFocusGuards(store, triggerElementRef) {
+  const preFocusGuardRef = React.useRef(null);
+  const handlePreFocusGuardFocus = (0, _useStableCallback.useStableCallback)(event => {
+    ReactDOM.flushSync(() => {
+      store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.focusOut, event.nativeEvent, event.currentTarget));
+    });
+    const previousTabbable = (0, _utils.getTabbableBeforeElement)(preFocusGuardRef.current);
+    previousTabbable?.focus();
+  });
+  const handleFocusTargetFocus = (0, _useStableCallback.useStableCallback)(event => {
+    const positionerElement = store.select('positionerElement');
+    if (positionerElement && (0, _utils.isOutsideEvent)(event, positionerElement)) {
+      store.context.beforeContentFocusGuardRef.current?.focus();
+    } else {
+      ReactDOM.flushSync(() => {
+        store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.focusOut, event.nativeEvent, event.currentTarget));
+      });
+      let nextTabbable = (0, _utils.getTabbableAfterElement)(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
+      while (nextTabbable !== null && (0, _utils.contains)(positionerElement, nextTabbable)) {
+        const prevTabbable = nextTabbable;
+        nextTabbable = (0, _utils.getNextTabbable)(nextTabbable);
+        if (nextTabbable === prevTabbable) {
+          break;
+        }
+      }
+      nextTabbable?.focus();
+    }
+  });
+  return {
+    preFocusGuardRef,
+    handlePreFocusGuardFocus,
+    handleFocusTargetFocus
+  };
+}

package/utils/reason-parts.d.ts

@@ -30,4 +30,7 @@ export declare const siblingOpen: "sibling-open";
 export declare const disabled: "disabled";
 export declare const imperativeAction: "imperative-action";
 export declare const swipe: "swipe";
-export declare const windowResize: "window-resize";
+export declare const windowResize: "window-resize";
+export declare const dayPress: "day-press";
+export declare const monthChange: "month-change";
+export declare const valuePropChange: "value-prop-change";

package/utils/reason-parts.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.windowResize = exports.wheel = exports.triggerPress = exports.triggerHover = exports.triggerFocus = exports.trackPress = exports.swipe = exports.siblingOpen = exports.scrub = exports.pointer = exports.outsidePress = exports.none = exports.listNavigation = exports.linkPress = exports.keyboard = exports.itemPress = exports.inputPress = exports.inputPaste = exports.inputClear = exports.inputChange = exports.inputBlur = exports.incrementPress = exports.imperativeAction = exports.focusOut = exports.escapeKey = exports.drag = exports.disabled = exports.decrementPress = exports.closeWatcher = exports.closePress = exports.clearPress = exports.chipRemovePress = exports.cancelOpen = void 0;
+exports.windowResize = exports.wheel = exports.valuePropChange = exports.triggerPress = exports.triggerHover = exports.triggerFocus = exports.trackPress = exports.swipe = exports.siblingOpen = exports.scrub = exports.pointer = exports.outsidePress = exports.none = exports.monthChange = exports.listNavigation = exports.linkPress = exports.keyboard = exports.itemPress = exports.inputPress = exports.inputPaste = exports.inputClear = exports.inputChange = exports.inputBlur = exports.incrementPress = exports.imperativeAction = exports.focusOut = exports.escapeKey = exports.drag = exports.disabled = exports.decrementPress = exports.dayPress = exports.closeWatcher = exports.closePress = exports.clearPress = exports.chipRemovePress = exports.cancelOpen = void 0;
 const none = exports.none = 'none';
 const triggerPress = exports.triggerPress = 'trigger-press';
 const triggerHover = exports.triggerHover = 'trigger-hover';
@@ -36,4 +36,7 @@ const siblingOpen = exports.siblingOpen = 'sibling-open';
 const disabled = exports.disabled = 'disabled';
 const imperativeAction = exports.imperativeAction = 'imperative-action';
 const swipe = exports.swipe = 'swipe';
-const windowResize = exports.windowResize = 'window-resize';
+const windowResize = exports.windowResize = 'window-resize';
+const dayPress = exports.dayPress = 'day-press';
+const monthChange = exports.monthChange = 'month-change';
+const valuePropChange = exports.valuePropChange = 'value-prop-change';

package/{scroll-area/utils → utils}/scrollEdges.d.ts

@@ -1,2 +1,3 @@
 export declare const SCROLL_EDGE_TOLERANCE_PX = 1;
+export declare function getMaxScrollOffset(scrollSize: number, clientSize: number): number;
 export declare function normalizeScrollOffset(value: number, max: number): number;

package/{scroll-area/utils → utils}/scrollEdges.js

@@ -4,9 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SCROLL_EDGE_TOLERANCE_PX = void 0;
+exports.getMaxScrollOffset = getMaxScrollOffset;
 exports.normalizeScrollOffset = normalizeScrollOffset;
-var _clamp = require("../../utils/clamp");
+var _clamp = require("./clamp");
 const SCROLL_EDGE_TOLERANCE_PX = exports.SCROLL_EDGE_TOLERANCE_PX = 1;
+function getMaxScrollOffset(scrollSize, clientSize) {
+  return Math.max(0, scrollSize - clientSize);
+}
 function normalizeScrollOffset(value, max) {
   if (max <= 0) {
     return 0;

package/utils/temporal/date-helpers.d.ts

@@ -0,0 +1,15 @@
+import { TemporalAdapter, TemporalSupportedObject } from "../../types/temporal/index.js";
+export declare function mergeDateAndTime(adapter: TemporalAdapter, dateParam: TemporalSupportedObject, timeParam: TemporalSupportedObject): TemporalSupportedObject;
+export declare function areDatesEqual(adapter: TemporalAdapter, a: TemporalSupportedObject | null, b: TemporalSupportedObject | null): boolean;
+export declare function replaceInvalidDateByNull(adapter: TemporalAdapter, value: TemporalSupportedObject | null): TemporalSupportedObject | null;
+/**
+ * Check if the day of the date A is after the day of the date B.
+ * Uses timezone of the date A.
+ */
+export declare function isAfterDay(adapter: TemporalAdapter, dateA: TemporalSupportedObject, dateB: TemporalSupportedObject): boolean;
+/**
+ * Check if the day of the date A is before the day of the date B.
+ * Uses timezone of the date A.
+ */
+export declare function isBeforeDay(adapter: TemporalAdapter, dateA: TemporalSupportedObject, dateB: TemporalSupportedObject): boolean;
+export declare function formatMonthFullLetterAndYear(adapter: TemporalAdapter, date: TemporalSupportedObject): string;

package/utils/temporal/date-helpers.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.areDatesEqual = areDatesEqual;
+exports.formatMonthFullLetterAndYear = formatMonthFullLetterAndYear;
+exports.isAfterDay = isAfterDay;
+exports.isBeforeDay = isBeforeDay;
+exports.mergeDateAndTime = mergeDateAndTime;
+exports.replaceInvalidDateByNull = replaceInvalidDateByNull;
+function mergeDateAndTime(adapter, dateParam, timeParam) {
+  let mergedDate = dateParam;
+  mergedDate = adapter.setHours(mergedDate, adapter.getHours(timeParam));
+  mergedDate = adapter.setMinutes(mergedDate, adapter.getMinutes(timeParam));
+  mergedDate = adapter.setSeconds(mergedDate, adapter.getSeconds(timeParam));
+  mergedDate = adapter.setMilliseconds(mergedDate, adapter.getMilliseconds(timeParam));
+  return mergedDate;
+}
+function areDatesEqual(adapter, a, b) {
+  if (!adapter.isValid(a) && a != null && !adapter.isValid(b) && b != null) {
+    return true;
+  }
+  return adapter.isEqual(a, b);
+}
+function replaceInvalidDateByNull(adapter, value) {
+  if (adapter.isValid(value)) {
+    return value;
+  }
+  return null;
+}
+
+/**
+ * Check if the day of the date A is after the day of the date B.
+ * Uses timezone of the date A.
+ */
+function isAfterDay(adapter, dateA, dateB) {
+  const dateBWithCorrectTimezone = adapter.setTimezone(dateB, adapter.getTimezone(dateA));
+  return adapter.isAfter(dateA, adapter.endOfDay(dateBWithCorrectTimezone));
+}
+
+/**
+ * Check if the day of the date A is before the day of the date B.
+ * Uses timezone of the date A.
+ */
+function isBeforeDay(adapter, dateA, dateB) {
+  const dateBWithCorrectTimezone = adapter.setTimezone(dateB, adapter.getTimezone(dateA));
+  return adapter.isBefore(dateA, adapter.startOfDay(dateBWithCorrectTimezone));
+}
+function formatMonthFullLetterAndYear(adapter, date) {
+  const f = adapter.formats;
+  const dateFormat = `${f.monthFullLetter} ${f.yearPadded}`;
+  return adapter.formatByString(date, dateFormat);
+}

package/utils/temporal/getDateManager.d.ts

@@ -0,0 +1,5 @@
+import { ValidateDateReturnValue, ValidateDateValidationProps } from "./validateDate.js";
+import { TemporalManager } from "./types.js";
+import { TemporalValue, TemporalAdapter } from "../../types/temporal/index.js";
+export declare function getDateManager(adapter: TemporalAdapter): GetDateManagerReturnValue;
+export type GetDateManagerReturnValue = TemporalManager<TemporalValue, ValidateDateReturnValue, ValidateDateValidationProps>;

package/utils/temporal/getDateManager.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDateManager = getDateManager;
+var _dateHelpers = require("./date-helpers");
+var _validateDate = require("./validateDate");
+function getDateManager(adapter) {
+  return {
+    emptyValue: null,
+    emptyValidationError: null,
+    areValuesEqual: (valueA, valueB) => (0, _dateHelpers.areDatesEqual)(adapter, valueA, valueB),
+    getValidationError: (value, validationProps) => (0, _validateDate.validateDate)({
+      adapter,
+      value,
+      validationProps
+    }),
+    areValidationErrorEquals: (errorA, errorB) => errorA === errorB,
+    isValidationErrorEmpty: error => error == null,
+    getTimezone: value => adapter.isValid(value) ? adapter.getTimezone(value) : null,
+    setTimezone: (value, timezone) => value == null ? null : adapter.setTimezone(value, timezone),
+    getDatesFromValue: value => value == null ? [] : [value]
+  };
+}

package/utils/temporal/getInitialReferenceDate.d.ts

@@ -0,0 +1,27 @@
+import { TemporalAdapter, TemporalTimezone, TemporalSupportedObject } from "../../types/temporal/index.js";
+import { ValidateDateValidationProps } from "./validateDate.js";
+export declare function getInitialReferenceDate(parameters: GetInitialReferenceDateParameters): TemporalSupportedObject;
+export interface GetInitialReferenceDateParameters {
+  /**
+   * The adapter used to manipulate the date.
+   */
+  adapter: TemporalAdapter;
+  /**
+   * The date provided by the user, if any.
+   * If the component is a range component, this will be the start date if defined or the end date otherwise.
+   */
+  externalDate: TemporalSupportedObject | null;
+  /**
+   * The reference date provided by the user, if any.
+   */
+  externalReferenceDate: TemporalSupportedObject | null;
+  /**
+   * The timezone the reference date should be in.
+   */
+  timezone: TemporalTimezone;
+  /**
+   * The props used to validate the date, time or date-time object.
+   */
+  validationProps: GetInitialReferenceDateValidationProps;
+}
+export interface GetInitialReferenceDateValidationProps extends ValidateDateValidationProps {}

package/utils/temporal/getInitialReferenceDate.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getInitialReferenceDate = getInitialReferenceDate;
+var _dateHelpers = require("./date-helpers");
+function getInitialReferenceDate(parameters) {
+  const {
+    adapter,
+    timezone,
+    externalDate,
+    externalReferenceDate,
+    validationProps: {
+      minDate,
+      maxDate
+    }
+  } = parameters;
+  let referenceDate = null;
+  if (adapter.isValid(externalDate)) {
+    referenceDate = externalDate;
+  } else if (adapter.isValid(externalReferenceDate)) {
+    referenceDate = externalReferenceDate;
+  } else {
+    referenceDate = adapter.startOfDay(adapter.now(timezone));
+    if (minDate != null && (0, _dateHelpers.isBeforeDay)(adapter, referenceDate, minDate)) {
+      referenceDate = minDate;
+    }
+    if (maxDate != null && (0, _dateHelpers.isAfterDay)(adapter, referenceDate, maxDate)) {
+      referenceDate = maxDate;
+    }
+  }
+  return adapter.setTimezone(referenceDate, timezone);
+}

package/utils/temporal/types.d.ts

@@ -0,0 +1,65 @@
+import { TemporalTimezone, TemporalSupportedValue, TemporalSupportedObject } from "../../types/temporal/index.js";
+export interface TemporalTimezoneProps {
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default 'The timezone of the "value" or "defaultValue" prop if defined, "default" otherwise.'
+   */
+  timezone?: TemporalTimezone | undefined;
+}
+export interface TemporalOnErrorProps<TValue extends TemporalSupportedValue, TError> {
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @param {TError} error The reason why the current value is not valid.
+   * @param {TValue} value The value associated with the error.
+   */
+  onError?: ((error: TError, value: TValue) => void) | undefined;
+}
+/**
+ * Object that contains all the necessary methods and properties to adapt a temporal component or utilities for a given value type.
+ */
+export interface TemporalManager<TValue extends TemporalSupportedValue, TError, TValidationProps extends {}> {
+  /**
+   * Value to set when emptying the component.
+   */
+  emptyValue: TValue;
+  /**
+   * Error when the value is valid.
+   * It is used to initialize the error state.
+   */
+  emptyValidationError: TError;
+  /**
+   * Checks whether two values are equal.
+   */
+  areValuesEqual: (valueA: TValue, valueB: TValue) => boolean;
+  /**
+   * Returns the error associated with a value for the current set of validation props.
+   */
+  getValidationError: (value: TValue, validationProps: TValidationProps) => TError;
+  /**
+   * Checks whether two validation errors are equal.
+   */
+  areValidationErrorEquals: (errorA: TError, errorB: TError | null) => boolean;
+  /**
+   * Checks whether the current validation error is empty.
+   */
+  isValidationErrorEmpty: (error: TError) => boolean;
+  /**
+   * Returns the timezone of the date inside a value.
+   * When used on a range component, throw an error if both values don't have the same timezone.
+   */
+  getTimezone: (value: TValue) => string | null;
+  /**
+   * Changes the timezone of the dates inside a value.
+   */
+  setTimezone: (value: TValue, timezone: TemporalTimezone) => TValue;
+  /**
+   * Returns the list of dates contained in the value.
+   */
+  getDatesFromValue: (value: TValue) => TemporalSupportedObject[];
+}

package/utils/temporal/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/utils/temporal/validateDate.d.ts

@@ -0,0 +1,27 @@
+import { TemporalAdapter, TemporalValue, TemporalSupportedObject } from "../../types/temporal/index.js";
+export declare function validateDate(parameters: ValidateDateParameters): ValidateDateReturnValue;
+export interface ValidateDateParameters {
+  /**
+   * The adapter used to manipulate the date.
+   */
+  adapter: TemporalAdapter;
+  /**
+   * The value to validate.
+   */
+  value: TemporalValue;
+  /**
+   * The props used to validate a date.
+   */
+  validationProps: ValidateDateValidationProps;
+}
+export interface ValidateDateValidationProps {
+  /**
+   * Minimal selectable date.
+   */
+  minDate?: TemporalSupportedObject | undefined;
+  /**
+   * Maximal selectable date.
+   */
+  maxDate?: TemporalSupportedObject | undefined;
+}
+export type ValidateDateReturnValue = 'invalid' | 'before-min-date' | 'after-max-date' | null;

package/utils/temporal/validateDate.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateDate = validateDate;
+var _dateHelpers = require("./date-helpers");
+function validateDate(parameters) {
+  const {
+    adapter,
+    value,
+    validationProps
+  } = parameters;
+  if (value === null) {
+    return null;
+  }
+  const {
+    minDate,
+    maxDate
+  } = validationProps;
+  if (!adapter.isValid(value)) {
+    return 'invalid';
+  }
+  if (minDate != null && (0, _dateHelpers.isBeforeDay)(adapter, value, minDate)) {
+    return 'before-min-date';
+  }
+  if (maxDate != null && (0, _dateHelpers.isAfterDay)(adapter, value, maxDate)) {
+    return 'after-max-date';
+  }
+  return null;
+}

package/utils/types.d.ts

@@ -17,14 +17,14 @@ export type WithBaseUIEvent<T> = { [K in keyof T]: WithPreventBaseUIHandler<T[K]
  * Props shared by all Base UI components.
  * Contains `className` (string or callback taking the component's state as an argument) and `render` (function to customize rendering).
  */
-export type BaseUIComponentProps<ElementType extends React.ElementType, State, RenderFunctionProps = HTMLProps> = Omit<WithBaseUIEvent<React.ComponentPropsWithRef<ElementType>>, 'className' | 'color' | 'defaultValue' | 'defaultChecked'> & {
+export type BaseUIComponentProps<ElementType extends React.ElementType, State, RenderFunctionProps = HTMLProps> = Omit<WithBaseUIEvent<React.ComponentPropsWithRef<ElementType>>, 'className' | 'color' | 'defaultValue' | 'defaultChecked' | 'style'> & {
   /**
    * CSS class applied to the element, or a function that
-   * returns a class based on the component’s state.
+   * returns a class based on the component's state.
    */
   className?: string | ((state: State) => string | undefined) | undefined;
   /**
-   * Allows you to replace the component’s HTML element
+   * Allows you to replace the component's HTML element
    * with a different tag, or compose it with another component.
    *
    * Accepts a `ReactElement` or a function that returns the element to render.
@@ -32,7 +32,7 @@ export type BaseUIComponentProps<ElementType extends React.ElementType, State, R
   render?: React.ReactElement | ComponentRenderFn<RenderFunctionProps, State> | undefined;
   /**
    * Style applied to the element, or a function that
-   * returns a style object based on the component’s state.
+   * returns a style object based on the component's state.
    */
   style?: React.CSSProperties | ((state: State) => React.CSSProperties | undefined) | undefined;
 };
@@ -40,7 +40,7 @@ export interface NativeButtonProps {
   /**
    * Whether the component renders a native `<button>` element when replacing it
    * via the `render` prop.
-   * Set to `false` if the rendered element is not a button (e.g. `<div>`).
+   * Set to `false` if the rendered element is not a button (for example, `<div>`).
    * @default true
    */
   nativeButton?: boolean | undefined;
@@ -59,5 +59,11 @@ export interface NonNativeButtonProps {
  * Taken from https://effectivetypescript.com/2022/02/25/gentips-4-display/
  */
 export type Simplify<T> = T extends Function ? T : { [K in keyof T]: T[K] };
+/**
+ * Makes specified keys in a type required.
+ *
+ * @template T - The original type.
+ * @template K - The keys to make required.
+ */
 export type RequiredExcept<T, K extends keyof T> = Required<Omit<T, K>> & Pick<T, K>;
 export type Orientation = 'horizontal' | 'vertical';

package/utils/useAnchorPositioning.js

@@ -87,6 +87,7 @@ function useAnchorPositioning(params) {
   const anchorFnCallback = (0, _useStableCallback.useStableCallback)(anchorFn);
   const anchorDep = anchorFn ? anchorFnCallback : anchor;
   const anchorValueRef = (0, _useValueAsRef.useValueAsRef)(anchor);
+  const mountedRef = (0, _useValueAsRef.useValueAsRef)(mounted);
   const direction = (0, _DirectionContext.useDirection)();
   const isRtl = direction === 'rtl';
   const side = mountSide || {
@@ -212,12 +213,15 @@ function useAnchorPositioning(params) {
       availableHeight,
       rects
     }) {
+      if (!mountedRef.current) {
+        return;
+      }
       const floatingStyle = floating.style;
       floatingStyle.setProperty('--available-width', `${availableWidth}px`);
       floatingStyle.setProperty('--available-height', `${availableHeight}px`);
 
       // Snap anchor dimensions to device pixels to ensure the popup's visual width matches the anchor's one.
-      const dpr = window.devicePixelRatio || 1;
+      const dpr = (0, _owner.ownerWindow)(floating).devicePixelRatio || 1;
       const {
         x,
         y,
@@ -232,7 +236,7 @@ function useAnchorPositioning(params) {
   }), (0, _arrow.arrow)(() => ({
     // `transform-origin` calculations rely on an element existing. If the arrow hasn't been set,
     // we'll create a fake element.
-    element: arrowRef.current || document.createElement('div'),
+    element: arrowRef.current || (0, _owner.ownerDocument)(arrowRef.current).createElement('div'),
     padding: arrowPadding,
     offsetParent: 'floating'
   }), [arrowPadding]), {
@@ -276,7 +280,8 @@ function useAnchorPositioning(params) {
       floatingRootContext.update({
         referenceElement: null,
         floatingElement: null,
-        domReferenceElement: null
+        domReferenceElement: null,
+        positionReference: null
       });
     }
   }, [mounted, floatingRootContext]);
@@ -297,6 +302,7 @@ function useAnchorPositioning(params) {
     floatingStyles: originalFloatingStyles
   } = (0, _floatingUiReact.useFloating)({
     rootContext: floatingRootContext,
+    open: keepMounted ? mounted : undefined,
     placement,
     middleware,
     strategy: positionMethod,

package/utils/useAnchoredPopupScrollLock.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Manages scroll lock for anchored popups. For non-touch opens, scroll lock is applied when
+ * enabled. For touch opens, scroll lock is applied only when the positioner width is effectively
+ * viewport-sized.
+ */
+export declare function useAnchoredPopupScrollLock(enabled: boolean, touchOpen: boolean, positionerElement: HTMLElement | null, referenceElement: Element | null): void;