@base-ui/react 1.1.0 → 1.2.0

package/slider/root/SliderRoot.d.ts

@@ -11,7 +11,7 @@ import { REASONS } from "../../utils/reasons.js";
  */
 export declare const SliderRoot: {
   <Value extends number | readonly number[]>(props: SliderRoot.Props<Value> & {
-    ref?: React.Ref<HTMLDivElement>;
+    ref?: React.Ref<HTMLDivElement> | undefined;
   }): React.JSX.Element;
 };
 export interface SliderRootState extends FieldRoot.State {
@@ -55,59 +55,59 @@ export interface SliderRootProps<Value extends number | readonly number[] = numb
    *
    * To render a controlled slider, use the `value` prop instead.
    */
-  defaultValue?: Value;
+  defaultValue?: Value | undefined;
   /**
    * Whether the slider should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Options to format the input value.
    */
-  format?: Intl.NumberFormatOptions;
+  format?: Intl.NumberFormatOptions | undefined;
   /**
    * The locale used by `Intl.NumberFormat` when formatting the value.
    * Defaults to the user's runtime locale.
    */
-  locale?: Intl.LocalesArgument;
+  locale?: Intl.LocalesArgument | undefined;
   /**
    * The maximum allowed value of the slider.
    * Should not be equal to min.
    * @default 100
    */
-  max?: number;
+  max?: number | undefined;
   /**
    * The minimum allowed value of the slider.
    * Should not be equal to max.
    * @default 0
    */
-  min?: number;
+  min?: number | undefined;
   /**
    * The minimum steps between values in a range slider.
    * @default 0
    */
-  minStepsBetweenValues?: number;
+  minStepsBetweenValues?: number | undefined;
   /**
    * Identifies the field when a form is submitted.
    */
-  name?: string;
+  name?: string | undefined;
   /**
    * The component orientation.
    * @default 'horizontal'
    */
-  orientation?: Orientation;
+  orientation?: Orientation | undefined;
   /**
    * The granularity with which the slider can step through values. (A "discrete" slider.)
    * The `min` prop serves as the origin for the valid values.
    * We recommend (max - min) to be evenly divisible by the step.
    * @default 1
    */
-  step?: number;
+  step?: number | undefined;
   /**
    * The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
    * @default 10
    */
-  largeStep?: number;
+  largeStep?: number | undefined;
   /**
    * How the thumb(s) are aligned relative to `Slider.Control` when the value is at `min` or `max`:
    * - `center`: The center of the thumb is aligned with the control edge
@@ -115,7 +115,7 @@ export interface SliderRootProps<Value extends number | readonly number[] = numb
    * - `edge-client-only`: Same as `edge` but renders after React hydration on the client, reducing bundle size in return
    * @default 'center'
    */
-  thumbAlignment?: 'center' | 'edge' | 'edge-client-only';
+  thumbAlignment?: ('center' | 'edge' | 'edge-client-only') | undefined;
   /**
    * Controls how thumbs behave when they collide during pointer interactions.
    *
@@ -125,12 +125,12 @@ export interface SliderRootProps<Value extends number | readonly number[] = numb
    *
    * @default 'push'
    */
-  thumbCollisionBehavior?: 'push' | 'swap' | 'none';
+  thumbCollisionBehavior?: ('push' | 'swap' | 'none') | undefined;
   /**
    * The value of the slider.
    * For ranged sliders, provide an array with two values.
    */
-  value?: Value;
+  value?: Value | undefined;
   /**
    * Callback function that is fired when the slider's value changed.
    * You can pull out the new value by accessing `event.target.value` (any).
@@ -143,7 +143,7 @@ export interface SliderRootProps<Value extends number | readonly number[] = numb
    * - `'keyboard'` for keyboard input
    * - `'none'` when the change is triggered without a specific interaction
    */
-  onValueChange?: (value: Value extends number ? number : Value, eventDetails: SliderRoot.ChangeEventDetails) => void;
+  onValueChange?: ((value: Value extends number ? number : Value, eventDetails: SliderRoot.ChangeEventDetails) => void) | undefined;
   /**
    * Callback function that is fired when the `pointerup` is triggered.
    * **Warning**: This is a generic event not a change event.
@@ -156,7 +156,7 @@ export interface SliderRootProps<Value extends number | readonly number[] = numb
    * - `'input-change'` when the hidden range input emits a change event (for example, via form integration)
    * - `'none'` when the commit occurs without a specific interaction
    */
-  onValueCommitted?: (value: Value extends number ? number : Value, eventDetails: SliderRoot.CommitEventDetails) => void;
+  onValueCommitted?: ((value: Value extends number ? number : Value, eventDetails: SliderRoot.CommitEventDetails) => void) | undefined;
 }
 export interface SliderRootChangeEventCustomProperties {
   /**

package/slider/root/SliderRoot.js

@@ -185,8 +185,9 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
     // This allows seamless integration with the most popular form libraries.
     // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
     // Clone the event to not override `target` of the original event.
-    // @ts-expect-error The nativeEvent is function, not object
-    const clonedEvent = new event.constructor(event.type, event);
+    const nativeEvent = changeDetails.event;
+    const EventConstructor = nativeEvent.constructor ?? Event;
+    const clonedEvent = new EventConstructor(nativeEvent.type, nativeEvent);
     Object.defineProperty(clonedEvent, 'target', {
       writable: true,
       value: {

package/slider/root/SliderRootContext.d.ts

@@ -21,7 +21,7 @@ export interface SliderRootContext {
   handleInputChange: (valueInput: number, index: number, event: React.KeyboardEvent | React.ChangeEvent) => void;
   indicatorPosition: (number | undefined)[];
   inset: boolean;
-  labelId?: string;
+  labelId?: string | undefined;
   /**
    * The large step value of the slider when incrementing or decrementing while the shift key is held,
    * or when using Page-Up or Page-Down keys. Snaps to multiples of this value.
@@ -34,7 +34,7 @@ export interface SliderRootContext {
    * The locale used by `Intl.NumberFormat` when formatting the value.
    * Defaults to the user's runtime locale.
    */
-  locale?: Intl.LocalesArgument;
+  locale?: Intl.LocalesArgument | undefined;
   /**
    * The maximum allowed value of the slider.
    */

package/slider/root/stateAttributesMapping.js

@@ -4,11 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.sliderStateAttributesMapping = void 0;
+var _constants = require("../../field/utils/constants");
 const sliderStateAttributesMapping = exports.sliderStateAttributesMapping = {
   activeThumbIndex: () => null,
   max: () => null,
   min: () => null,
   minStepsBetweenValues: () => null,
   step: () => null,
-  values: () => null
+  values: () => null,
+  ..._constants.fieldValidityMapping
 };

package/slider/thumb/SliderThumb.d.ts

@@ -18,16 +18,16 @@ export interface SliderThumbProps extends Omit<BaseUIComponentProps<'div', Slide
    * Whether the thumb should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * A function which returns a string value for the [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) attribute of the `input`.
    */
-  getAriaLabel?: ((index: number) => string) | null;
+  getAriaLabel?: (((index: number) => string) | null) | undefined;
   /**
    * A function which returns a string value for the [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext) attribute of the `input`.
    * This is important for screen reader users.
    */
-  getAriaValueText?: ((formattedValue: string, value: number, index: number) => string) | null;
+  getAriaValueText?: (((formattedValue: string, value: number, index: number) => string) | null) | undefined;
   /**
    * The index of the thumb which corresponds to the index of its value in the
    * `value` or `defaultValue` array.
@@ -45,19 +45,19 @@ export interface SliderThumbProps extends Omit<BaseUIComponentProps<'div', Slide
   /**
    * A ref to access the nested input element.
    */
-  inputRef?: React.Ref<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement> | undefined;
   /**
    * A blur handler forwarded to the `input`.
    */
-  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement> | undefined;
   /**
    * A focus handler forwarded to the `input`.
    */
-  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  onFocus?: React.FocusEventHandler<HTMLInputElement> | undefined;
   /**
    * Optional tab index attribute forwarded to the `input`.
    */
-  tabIndex?: number;
+  tabIndex?: number | undefined;
 }
 export declare namespace SliderThumb {
   type State = SliderThumbState;

package/slider/utils/getPushedThumbValues.d.ts

@@ -6,7 +6,7 @@ interface GetPushedThumbValuesParams {
   max: number;
   step: number;
   minStepsBetweenValues: number;
-  initialValues?: readonly number[];
+  initialValues?: readonly number[] | undefined;
 }
 /**
  * Returns a new array of slider values where attempting to move the thumb at `index`

package/slider/utils/resolveThumbCollision.d.ts

@@ -2,8 +2,8 @@ import { SliderRootContext } from "../root/SliderRootContext.js";
 export interface ResolveThumbCollisionParams {
   behavior: SliderRootContext['thumbCollisionBehavior'];
   values: readonly number[];
-  currentValues?: readonly number[] | null;
-  initialValues?: readonly number[] | null;
+  currentValues?: (readonly number[] | null) | undefined;
+  initialValues?: (readonly number[] | null) | undefined;
   pressedIndex: number;
   nextValue: number;
   min: number;

package/slider/value/SliderValue.d.ts

@@ -9,7 +9,7 @@ import type { SliderRoot } from "../root/SliderRoot.js";
  */
 export declare const SliderValue: React.ForwardRefExoticComponent<Omit<SliderValueProps, "ref"> & React.RefAttributes<HTMLOutputElement>>;
 export interface SliderValueProps extends Omit<BaseUIComponentProps<'output', SliderRoot.State>, 'children'> {
-  children?: null | ((formattedValues: readonly string[], values: readonly number[]) => React.ReactNode);
+  children?: (null | ((formattedValues: readonly string[], values: readonly number[]) => React.ReactNode)) | undefined;
 }
 export declare namespace SliderValue {
   type Props = SliderValueProps;

package/switch/root/SwitchRoot.d.ts

@@ -32,57 +32,57 @@ export interface SwitchRootProps extends NonNativeButtonProps, Omit<BaseUICompon
   /**
    * The id of the switch element.
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * Whether the switch is currently active.
    *
    * To render an uncontrolled switch, use the `defaultChecked` prop instead.
    */
-  checked?: boolean;
+  checked?: boolean | undefined;
   /**
    * Whether the switch is initially active.
    *
    * To render a controlled switch, use the `checked` prop instead.
    * @default false
    */
-  defaultChecked?: boolean;
+  defaultChecked?: boolean | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * A ref to access the hidden `<input>` element.
    */
-  inputRef?: React.Ref<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement> | undefined;
   /**
    * Identifies the field when a form is submitted.
    */
-  name?: string;
+  name?: string | undefined;
   /**
    * Event handler called when the switch is activated or deactivated.
    */
-  onCheckedChange?: (checked: boolean, eventDetails: SwitchRoot.ChangeEventDetails) => void;
+  onCheckedChange?: ((checked: boolean, eventDetails: SwitchRoot.ChangeEventDetails) => void) | undefined;
   /**
    * Whether the user should be unable to activate or deactivate the switch.
    * @default false
    */
-  readOnly?: boolean;
+  readOnly?: boolean | undefined;
   /**
    * Whether the user must activate the switch before submitting a form.
    * @default false
    */
-  required?: boolean;
+  required?: boolean | undefined;
   /**
    * The value submitted with the form when the switch is on.
    * By default, switch submits the "on" value, matching native checkbox behavior.
    */
-  value?: string;
+  value?: string | undefined;
   /**
    * The value submitted with the form when the switch is off.
    * By default, unchecked switches do not submit any value, matching native checkbox behavior.
    */
-  uncheckedValue?: string;
+  uncheckedValue?: string | undefined;
 }
 export type SwitchRootChangeEventReason = typeof REASONS.none;
 export type SwitchRootChangeEventDetails = BaseUIChangeEventDetails<SwitchRoot.ChangeEventReason>;

package/switch/root/SwitchRoot.js

@@ -148,7 +148,13 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
         return;
       }
       event.preventDefault();
-      inputRef?.current?.click();
+      inputRef.current?.dispatchEvent(new PointerEvent('click', {
+        bubbles: true,
+        shiftKey: event.shiftKey,
+        ctrlKey: event.ctrlKey,
+        altKey: event.altKey,
+        metaKey: event.metaKey
+      }));
     }
   };
   const inputProps = React.useMemo(() => (0, _mergeProps.mergeProps)({

package/switch/root/SwitchRootContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/tabs/indicator/TabsIndicator.d.ts

@@ -20,7 +20,7 @@ export interface TabsIndicatorProps extends BaseUIComponentProps<'span', TabsInd
    * This minimizes the time that the indicator isn’t visible after server-side rendering.
    * @default false
    */
-  renderBeforeHydration?: boolean;
+  renderBeforeHydration?: boolean | undefined;
 }
 export declare namespace TabsIndicator {
   type State = TabsIndicatorState;

package/tabs/indicator/TabsIndicator.js

@@ -128,12 +128,12 @@ const TabsIndicator = exports.TabsIndicator = /*#__PURE__*/React.forwardRef(func
     };
   }, [left, right, top, bottom, width, height, isTabSelected]);
   const displayIndicator = isTabSelected && width > 0 && height > 0;
-  const state = React.useMemo(() => ({
+  const state = {
     orientation,
     activeTabPosition,
     activeTabSize,
     tabActivationDirection
-  }), [orientation, activeTabPosition, activeTabSize, tabActivationDirection]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
     state,
     ref: forwardedRef,

package/tabs/list/TabsList.d.ts

@@ -15,13 +15,13 @@ export interface TabsListProps extends BaseUIComponentProps<'div', TabsList.Stat
    * Otherwise, tabs will be activated using <kbd>Enter</kbd> or <kbd>Space</kbd> key press.
    * @default false
    */
-  activateOnFocus?: boolean;
+  activateOnFocus?: boolean | undefined;
   /**
    * Whether to loop keyboard focus back to the first item
    * when the end of the list is reached while using the arrow keys.
    * @default true
    */
-  loopFocus?: boolean;
+  loopFocus?: boolean | undefined;
 }
 export declare namespace TabsList {
   type State = TabsListState;

package/tabs/list/TabsList.js

@@ -49,10 +49,10 @@ const TabsList = exports.TabsList = /*#__PURE__*/React.forwardRef(function TabsL
       onValueChange(newValue, eventDetails);
     }
   });
-  const state = React.useMemo(() => ({
+  const state = {
     orientation,
     tabActivationDirection
-  }), [orientation, tabActivationDirection]);
+  };
   const defaultProps = {
     'aria-orientation': orientation === 'vertical' ? 'vertical' : undefined,
     role: 'tablist'

package/tabs/panel/TabsPanel.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 import type { TabsRoot } from "../root/TabsRoot.js";
 import type { TabsTab } from "../tab/TabsTab.js";
@@ -10,11 +11,12 @@ import type { TabsTab } from "../tab/TabsTab.js";
  */
 export declare const TabsPanel: React.ForwardRefExoticComponent<Omit<TabsPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface TabsPanelMetadata {
-  id?: string;
+  id?: string | undefined;
   value: TabsTab.Value;
 }
 export interface TabsPanelState extends TabsRoot.State {
   hidden: boolean;
+  transitionStatus: TransitionStatus;
 }
 export interface TabsPanelProps extends BaseUIComponentProps<'div', TabsPanel.State> {
   /**
@@ -25,7 +27,7 @@ export interface TabsPanelProps extends BaseUIComponentProps<'div', TabsPanel.St
    * Whether to keep the HTML element in the DOM while the panel is hidden.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace TabsPanel {
   type Metadata = TabsPanelMetadata;

package/tabs/panel/TabsPanel.js

@@ -7,13 +7,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TabsPanel = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _inertValue = require("@base-ui/utils/inertValue");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useBaseUiId = require("../../utils/useBaseUiId");
+var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
+var _useTransitionStatus = require("../../utils/useTransitionStatus");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _useCompositeListItem = require("../../composite/list/useCompositeListItem");
-var _stateAttributesMapping = require("../root/stateAttributesMapping");
+var _stateAttributesMapping2 = require("../root/stateAttributesMapping");
 var _TabsRootContext = require("../root/TabsRootContext");
 var _TabsPanelDataAttributes = require("./TabsPanelDataAttributes");
+const stateAttributesMapping = {
+  ..._stateAttributesMapping2.tabsStateAttributesMapping,
+  ..._stateAttributesMapping.transitionStatusMapping
+};
+
 /**
  * A panel displayed when the corresponding tab is active.
  * Renders a `<div>` element.
@@ -47,25 +56,43 @@ const TabsPanel = exports.TabsPanel = /*#__PURE__*/React.forwardRef(function Tab
   } = (0, _useCompositeListItem.useCompositeListItem)({
     metadata
   });
-  const hidden = value !== selectedValue;
+  const open = value === selectedValue;
+  const {
+    mounted,
+    transitionStatus,
+    setMounted
+  } = (0, _useTransitionStatus.useTransitionStatus)(open);
+  const hidden = !mounted;
   const correspondingTabId = getTabIdByPanelValue(value);
-  const state = React.useMemo(() => ({
+  const state = {
     hidden,
     orientation,
-    tabActivationDirection
-  }), [hidden, orientation, tabActivationDirection]);
+    tabActivationDirection,
+    transitionStatus
+  };
+  const panelRef = React.useRef(null);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
-    ref: [forwardedRef, listItemRef],
+    ref: [forwardedRef, listItemRef, panelRef],
     props: [{
       'aria-labelledby': correspondingTabId,
       hidden,
-      id: id ?? undefined,
+      id,
       role: 'tabpanel',
-      tabIndex: hidden ? -1 : 0,
+      tabIndex: open ? 0 : -1,
+      inert: (0, _inertValue.inertValue)(!open),
       [_TabsPanelDataAttributes.TabsPanelDataAttributes.index]: index
     }, elementProps],
-    stateAttributesMapping: _stateAttributesMapping.tabsStateAttributesMapping
+    stateAttributesMapping
+  });
+  (0, _useOpenChangeComplete.useOpenChangeComplete)({
+    open,
+    ref: panelRef,
+    onComplete() {
+      if (!open) {
+        setMounted(false);
+      }
+    }
   });
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (hidden && !keepMounted) {
@@ -79,7 +106,7 @@ const TabsPanel = exports.TabsPanel = /*#__PURE__*/React.forwardRef(function Tab
       unregisterMountedTabPanel(value, id);
     };
   }, [hidden, keepMounted, value, id, registerMountedTabPanel, unregisterMountedTabPanel]);
-  const shouldRender = !hidden || keepMounted;
+  const shouldRender = keepMounted || mounted;
   if (!shouldRender) {
     return null;
   }

package/tabs/root/TabsRoot.d.ts

@@ -20,22 +20,22 @@ export interface TabsRootProps extends BaseUIComponentProps<'div', TabsRoot.Stat
    * The value of the currently active `Tab`. Use when the component is controlled.
    * When the value is `null`, no Tab will be active.
    */
-  value?: TabsTab.Value;
+  value?: TabsTab.Value | undefined;
   /**
    * The default value. Use when the component is not controlled.
    * When the value is `null`, no Tab will be active.
    * @default 0
    */
-  defaultValue?: TabsTab.Value;
+  defaultValue?: TabsTab.Value | undefined;
   /**
    * The component orientation (layout flow direction).
    * @default 'horizontal'
    */
-  orientation?: TabsRoot.Orientation;
+  orientation?: TabsRoot.Orientation | undefined;
   /**
    * Callback invoked when new value is being set.
    */
-  onValueChange?: (value: TabsTab.Value, eventDetails: TabsRoot.ChangeEventDetails) => void;
+  onValueChange?: ((value: TabsTab.Value, eventDetails: TabsRoot.ChangeEventDetails) => void) | undefined;
 }
 export type TabsRootChangeEventReason = typeof REASONS.none;
 export type TabsRootChangeEventDetails = BaseUIChangeEventDetails<TabsRoot.ChangeEventReason, {

package/tabs/root/TabsRootContext.d.ts

@@ -30,7 +30,7 @@ export interface TabsRootContext {
   getTabPanelIdByValue: (tabValue: TabsTab.Value) => string | undefined;
   registerMountedTabPanel: (panelValue: TabsTab.Value | number, panelId: string) => void;
   setTabMap: (map: Map<Node, (TabsTab.Metadata & {
-    index?: number | null;
+    index?: (number | null) | undefined;
   }) | null>) => void;
   unregisterMountedTabPanel: (panelValue: TabsTab.Value | number, panelId: string) => void;
   /**

package/tabs/tab/TabsTab.d.ts

@@ -47,7 +47,7 @@ export interface TabsTabProps extends NativeButtonProps, BaseUIComponentProps<'b
    * during pre-rendering which Tabs are disabled.
    * To work around it, ensure that `defaultValue` or `value` on `<Tabs.Root>` is set to an enabled Tab's value.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 export declare namespace TabsTab {
   type Value = TabsTabValue;

package/tabs/tab/TabsTab.js

@@ -150,11 +150,11 @@ const TabsTab = exports.TabsTab = /*#__PURE__*/React.forwardRef(function TabsTab
       });
     }
   }
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     active,
     orientation
-  }), [disabled, active, orientation]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
     state,
     ref: [forwardedRef, buttonRef, compositeRef],

package/toast/action/ToastAction.js

@@ -36,9 +36,9 @@ const ToastAction = exports.ToastAction = /*#__PURE__*/React.forwardRef(function
     disabled,
     native: nativeButton
   });
-  const state = React.useMemo(() => ({
+  const state = {
     type: toast.type
-  }), [toast.type]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
     ref: [forwardedRef, buttonRef],
     state,

package/toast/arrow/ToastArrow.js

@@ -28,11 +28,11 @@ const ToastArrow = exports.ToastArrow = /*#__PURE__*/React.forwardRef(function T
     arrowUncentered,
     arrowStyles
   } = (0, _ToastPositionerContext.useToastPositionerContext)();
-  const state = React.useMemo(() => ({
+  const state = {
     side,
     align,
     uncentered: arrowUncentered
-  }), [side, align, arrowUncentered]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [forwardedRef, arrowRef],

package/toast/arrow/ToastArrowDataAttributes.js

@@ -4,17 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToastArrowDataAttributes = void 0;
-let ToastArrowDataAttributes = exports.ToastArrowDataAttributes = /*#__PURE__*/function (ToastArrowDataAttributes) {
+var _popupStateMapping = require("../../utils/popupStateMapping");
+let ToastArrowDataAttributes = exports.ToastArrowDataAttributes = function (ToastArrowDataAttributes) {
   /**
    * Indicates which side the toast is positioned relative to the anchor.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  ToastArrowDataAttributes["side"] = "data-side";
+  ToastArrowDataAttributes[ToastArrowDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the toast is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  ToastArrowDataAttributes["align"] = "data-align";
+  ToastArrowDataAttributes[ToastArrowDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
   /**
    * Present when the toast arrow is uncentered.
    */