@base-ui/react 1.0.0 → 1.1.0

package/esm/scroll-area/root/ScrollAreaRoot.js

@@ -13,7 +13,12 @@ import { styleDisableScrollbar } from "../../utils/styles.js";
 import { useBaseUiId } from "../../utils/useBaseUiId.js";
 import { scrollAreaStateAttributesMapping } from "./stateAttributes.js";
 import { contains } from "../../floating-ui-react/utils.js";
+import { useCSPContext } from "../../csp-provider/CSPContext.js";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_COORDS = {
+  x: 0,
+  y: 0
+};
 const DEFAULT_SIZE = {
   width: 0,
   height: 0
@@ -24,7 +29,11 @@ const DEFAULT_OVERFLOW_EDGES = {
   yStart: false,
   yEnd: false
 };
-
+const DEFAULT_HIDDEN_STATE = {
+  x: false,
+  y: false,
+  corner: false
+};
 /**
  * Groups all parts of the scroll area.
  * Renders a `<div>` element.
@@ -38,14 +47,22 @@ export const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaR
     overflowEdgeThreshold: overflowEdgeThresholdProp,
     ...elementProps
   } = componentProps;
+  const overflowEdgeThreshold = normalizeOverflowEdgeThreshold(overflowEdgeThresholdProp);
+  const rootId = useBaseUiId();
+  const scrollYTimeout = useTimeout();
+  const scrollXTimeout = useTimeout();
+  const {
+    nonce,
+    disableStyleElements
+  } = useCSPContext();
   const [hovering, setHovering] = React.useState(false);
   const [scrollingX, setScrollingX] = React.useState(false);
   const [scrollingY, setScrollingY] = React.useState(false);
+  const [touchModality, setTouchModality] = React.useState(false);
   const [cornerSize, setCornerSize] = React.useState(DEFAULT_SIZE);
   const [thumbSize, setThumbSize] = React.useState(DEFAULT_SIZE);
-  const [touchModality, setTouchModality] = React.useState(false);
   const [overflowEdges, setOverflowEdges] = React.useState(DEFAULT_OVERFLOW_EDGES);
-  const rootId = useBaseUiId();
+  const [hiddenState, setHiddenState] = React.useState(DEFAULT_HIDDEN_STATE);
   const rootRef = React.useRef(null);
   const viewportRef = React.useRef(null);
   const scrollbarYRef = React.useRef(null);
@@ -59,18 +76,7 @@ export const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaR
   const startScrollTopRef = React.useRef(0);
   const startScrollLeftRef = React.useRef(0);
   const currentOrientationRef = React.useRef('vertical');
-  const scrollYTimeout = useTimeout();
-  const scrollXTimeout = useTimeout();
-  const scrollPositionRef = React.useRef({
-    x: 0,
-    y: 0
-  });
-  const [hiddenState, setHiddenState] = React.useState({
-    scrollbarYHidden: false,
-    scrollbarXHidden: false,
-    cornerHidden: false
-  });
-  const overflowEdgeThreshold = normalizeOverflowEdgeThreshold(overflowEdgeThresholdProp);
+  const scrollPositionRef = React.useRef(DEFAULT_COORDS);
   const handleScroll = useStableCallback(scrollPosition => {
     const offsetX = scrollPosition.x - scrollPositionRef.current.x;
     const offsetY = scrollPosition.y - scrollPositionRef.current.y;
@@ -155,32 +161,30 @@ export const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaR
       thumbXRef.current.releasePointerCapture(event.pointerId);
     }
   });
+  function handleTouchModalityChange(event) {
+    setTouchModality(event.pointerType === 'touch');
+  }
   function handlePointerEnterOrMove(event) {
-    const isTouch = event.pointerType === 'touch';
-    setTouchModality(isTouch);
-    if (!isTouch) {
+    handleTouchModalityChange(event);
+    if (event.pointerType !== 'touch') {
       const isTargetRootChild = contains(rootRef.current, event.target);
       setHovering(isTargetRootChild);
     }
   }
   const state = React.useMemo(() => ({
-    hasOverflowX: !hiddenState.scrollbarXHidden,
-    hasOverflowY: !hiddenState.scrollbarYHidden,
+    hasOverflowX: !hiddenState.x,
+    hasOverflowY: !hiddenState.y,
     overflowXStart: overflowEdges.xStart,
     overflowXEnd: overflowEdges.xEnd,
     overflowYStart: overflowEdges.yStart,
     overflowYEnd: overflowEdges.yEnd,
-    cornerHidden: hiddenState.cornerHidden
-  }), [hiddenState.scrollbarXHidden, hiddenState.scrollbarYHidden, hiddenState.cornerHidden, overflowEdges]);
+    cornerHidden: hiddenState.corner
+  }), [hiddenState.x, hiddenState.y, hiddenState.corner, overflowEdges]);
   const props = {
     role: 'presentation',
     onPointerEnter: handlePointerEnterOrMove,
     onPointerMove: handlePointerEnterOrMove,
-    onPointerDown({
-      pointerType
-    }) {
-      setTouchModality(pointerType === 'touch');
-    },
+    onPointerDown: handleTouchModalityChange,
     onPointerLeave() {
       setHovering(false);
     },
@@ -226,10 +230,10 @@ export const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaR
     setOverflowEdges,
     viewportState: state,
     overflowEdgeThreshold
-  }), [handlePointerDown, handlePointerMove, handlePointerUp, handleScroll, cornerSize, thumbSize, touchModality, cornerRef, scrollingX, setScrollingX, scrollingY, setScrollingY, hovering, setHovering, viewportRef, rootRef, scrollbarYRef, scrollbarXRef, thumbYRef, thumbXRef, rootId, hiddenState, overflowEdges, state, overflowEdgeThreshold]);
+  }), [handlePointerDown, handlePointerMove, handlePointerUp, handleScroll, cornerSize, thumbSize, touchModality, scrollingX, setScrollingX, scrollingY, setScrollingY, hovering, setHovering, rootId, hiddenState, overflowEdges, state, overflowEdgeThreshold]);
   return /*#__PURE__*/_jsxs(ScrollAreaRootContext.Provider, {
     value: contextValue,
-    children: [styleDisableScrollbar.element, element]
+    children: [!disableStyleElements && styleDisableScrollbar.getElement(nonce), element]
   });
 });
 if (process.env.NODE_ENV !== "production") ScrollAreaRoot.displayName = "ScrollAreaRoot";

package/esm/scroll-area/root/ScrollAreaRootContext.d.ts

@@ -1,22 +1,10 @@
 import * as React from 'react';
-import type { ScrollAreaRoot } from "./ScrollAreaRoot.js";
+import type { Coords, HiddenState, OverflowEdges, ScrollAreaRoot, Size } from "./ScrollAreaRoot.js";
 export interface ScrollAreaRootContext {
-  cornerSize: {
-    width: number;
-    height: number;
-  };
-  setCornerSize: React.Dispatch<React.SetStateAction<{
-    width: number;
-    height: number;
-  }>>;
-  thumbSize: {
-    width: number;
-    height: number;
-  };
-  setThumbSize: React.Dispatch<React.SetStateAction<{
-    width: number;
-    height: number;
-  }>>;
+  cornerSize: Size;
+  setCornerSize: React.Dispatch<React.SetStateAction<Size>>;
+  thumbSize: Size;
+  setThumbSize: React.Dispatch<React.SetStateAction<Size>>;
   touchModality: boolean;
   hovering: boolean;
   setHovering: React.Dispatch<React.SetStateAction<boolean>>;
@@ -34,33 +22,12 @@ export interface ScrollAreaRootContext {
   handlePointerDown: (event: React.PointerEvent) => void;
   handlePointerMove: (event: React.PointerEvent) => void;
   handlePointerUp: (event: React.PointerEvent) => void;
-  handleScroll: (scrollPosition: {
-    x: number;
-    y: number;
-  }) => void;
+  handleScroll: (scrollPosition: Coords) => void;
   rootId: string | undefined;
-  hiddenState: {
-    scrollbarYHidden: boolean;
-    scrollbarXHidden: boolean;
-    cornerHidden: boolean;
-  };
-  setHiddenState: React.Dispatch<React.SetStateAction<{
-    scrollbarYHidden: boolean;
-    scrollbarXHidden: boolean;
-    cornerHidden: boolean;
-  }>>;
-  overflowEdges: {
-    xStart: boolean;
-    xEnd: boolean;
-    yStart: boolean;
-    yEnd: boolean;
-  };
-  setOverflowEdges: React.Dispatch<React.SetStateAction<{
-    xStart: boolean;
-    xEnd: boolean;
-    yStart: boolean;
-    yEnd: boolean;
-  }>>;
+  hiddenState: HiddenState;
+  setHiddenState: React.Dispatch<React.SetStateAction<HiddenState>>;
+  overflowEdges: OverflowEdges;
+  setOverflowEdges: React.Dispatch<React.SetStateAction<OverflowEdges>>;
   viewportState: ScrollAreaRoot.State;
   overflowEdgeThreshold: {
     xStart: number;

package/esm/scroll-area/scrollbar/ScrollAreaScrollbar.d.ts

@@ -7,7 +7,7 @@ import type { ScrollAreaRoot } from "../root/ScrollAreaRoot.js";
  *
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
  */
-export declare const ScrollAreaScrollbar: React.ForwardRefExoticComponent<ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollAreaScrollbar: React.ForwardRefExoticComponent<Omit<ScrollAreaScrollbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ScrollAreaScrollbarState extends ScrollAreaRoot.State {
   /** Whether the scroll area is being hovered. */
   hovering: boolean;

package/esm/scroll-area/scrollbar/ScrollAreaScrollbar.js

@@ -47,13 +47,13 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
       vertical: scrollingY
     }[orientation],
     orientation,
-    hasOverflowX: !hiddenState.scrollbarXHidden,
-    hasOverflowY: !hiddenState.scrollbarYHidden,
+    hasOverflowX: !hiddenState.x,
+    hasOverflowY: !hiddenState.y,
     overflowXStart: overflowEdges.xStart,
     overflowXEnd: overflowEdges.xEnd,
     overflowYStart: overflowEdges.yStart,
     overflowYEnd: overflowEdges.yEnd,
-    cornerHidden: hiddenState.cornerHidden
+    cornerHidden: hiddenState.corner
   }), [hovering, scrollingX, scrollingY, orientation, hiddenState, overflowEdges]);
   const direction = useDirection();
   React.useEffect(() => {
@@ -180,7 +180,7 @@ export const ScrollAreaScrollbar = /*#__PURE__*/React.forwardRef(function Scroll
   const contextValue = React.useMemo(() => ({
     orientation
   }), [orientation]);
-  const isHidden = orientation === 'vertical' ? hiddenState.scrollbarYHidden : hiddenState.scrollbarXHidden;
+  const isHidden = orientation === 'vertical' ? hiddenState.y : hiddenState.x;
   const shouldRender = keepMounted || !isHidden;
   if (!shouldRender) {
     return null;

package/esm/scroll-area/thumb/ScrollAreaThumb.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
- * The draggable part of the the scrollbar that indicates the current scroll position.
+ * The draggable part of the scrollbar that indicates the current scroll position.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
  */
-export declare const ScrollAreaThumb: React.ForwardRefExoticComponent<ScrollAreaThumbProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollAreaThumb: React.ForwardRefExoticComponent<Omit<ScrollAreaThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ScrollAreaThumbState {
   orientation?: 'horizontal' | 'vertical';
 }

package/esm/scroll-area/thumb/ScrollAreaThumb.js

@@ -7,7 +7,7 @@ import { ScrollAreaScrollbarCssVars } from "../scrollbar/ScrollAreaScrollbarCssV
 import { useRenderElement } from "../../utils/useRenderElement.js";
 
 /**
- * The draggable part of the the scrollbar that indicates the current scroll position.
+ * The draggable part of the scrollbar that indicates the current scroll position.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)

package/esm/scroll-area/viewport/ScrollAreaViewport.d.ts

@@ -7,7 +7,7 @@ import type { ScrollAreaRoot } from "../root/ScrollAreaRoot.js";
  *
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
  */
-export declare const ScrollAreaViewport: React.ForwardRefExoticComponent<ScrollAreaViewportProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollAreaViewport: React.ForwardRefExoticComponent<Omit<ScrollAreaViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ScrollAreaViewportProps extends BaseUIComponentProps<'div', ScrollAreaViewport.State> {}
 export interface ScrollAreaViewportState extends ScrollAreaRoot.State {}
 export declare namespace ScrollAreaViewport {

package/esm/scroll-area/viewport/ScrollAreaViewport.js

@@ -1,7 +1,6 @@
 'use client';
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { isWebKit } from '@base-ui/utils/detectBrowser';
@@ -74,6 +73,7 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
     thumbYRef,
     thumbXRef,
     cornerRef,
+    cornerSize,
     setCornerSize,
     setThumbSize,
     rootId,
@@ -89,7 +89,7 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
   const programmaticScrollRef = React.useRef(true);
   const scrollEndTimeout = useTimeout();
   const waitForAnimationsTimeout = useTimeout();
-  function computeThumbPositionHandler() {
+  const computeThumbPosition = useStableCallback(() => {
     const viewportEl = viewportRef.current;
     const scrollbarYEl = scrollbarYRef.current;
     const scrollbarXEl = scrollbarXRef.current;
@@ -128,14 +128,26 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
     const scrollTopFromEnd = !scrollbarYHidden ? maxScrollTop - scrollTopFromStart : 0;
     const nextWidth = scrollbarXHidden ? 0 : viewportWidth;
     const nextHeight = scrollbarYHidden ? 0 : viewportHeight;
+    let nextCornerWidth = 0;
+    let nextCornerHeight = 0;
+    if (!scrollbarXHidden && !scrollbarYHidden) {
+      nextCornerWidth = scrollbarYEl?.offsetWidth || 0;
+      nextCornerHeight = scrollbarXEl?.offsetHeight || 0;
+    }
+
+    // Only subtract corner size from scrollbar dimensions if the corner hasn't been sized yet.
+    // Once sized, the layout will already account for it.
+    const cornerNotYetSized = cornerSize.width === 0 && cornerSize.height === 0;
+    const cornerWidthOffset = cornerNotYetSized ? nextCornerWidth : 0;
+    const cornerHeightOffset = cornerNotYetSized ? nextCornerHeight : 0;
     const scrollbarXOffset = getOffset(scrollbarXEl, 'padding', 'x');
     const scrollbarYOffset = getOffset(scrollbarYEl, 'padding', 'y');
     const thumbXOffset = getOffset(thumbXEl, 'margin', 'x');
     const thumbYOffset = getOffset(thumbYEl, 'margin', 'y');
     const idealNextWidth = nextWidth - scrollbarXOffset - thumbXOffset;
     const idealNextHeight = nextHeight - scrollbarYOffset - thumbYOffset;
-    const maxNextWidth = scrollbarXEl ? Math.min(scrollbarXEl.offsetWidth, idealNextWidth) : idealNextWidth;
-    const maxNextHeight = scrollbarYEl ? Math.min(scrollbarYEl.offsetHeight, idealNextHeight) : idealNextHeight;
+    const maxNextWidth = scrollbarXEl ? Math.min(scrollbarXEl.offsetWidth - cornerWidthOffset, idealNextWidth) : idealNextWidth;
+    const maxNextHeight = scrollbarYEl ? Math.min(scrollbarYEl.offsetHeight - cornerHeightOffset, idealNextHeight) : idealNextHeight;
     const clampedNextWidth = Math.max(MIN_THUMB_SIZE, maxNextWidth * ratioX);
     const clampedNextHeight = Math.max(MIN_THUMB_SIZE, maxNextHeight * ratioY);
     setThumbSize(prevSize => {
@@ -186,23 +198,21 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
           height: 0
         });
       } else if (!scrollbarXHidden && !scrollbarYHidden) {
-        const width = scrollbarYEl?.offsetWidth || 0;
-        const height = scrollbarXEl?.offsetHeight || 0;
         setCornerSize({
-          width,
-          height
+          width: nextCornerWidth,
+          height: nextCornerHeight
         });
       }
     }
     setHiddenState(prevState => {
       const cornerHidden = scrollbarYHidden || scrollbarXHidden;
-      if (prevState.scrollbarYHidden === scrollbarYHidden && prevState.scrollbarXHidden === scrollbarXHidden && prevState.cornerHidden === cornerHidden) {
+      if (prevState.y === scrollbarYHidden && prevState.x === scrollbarXHidden && prevState.corner === cornerHidden) {
         return prevState;
       }
       return {
-        scrollbarYHidden,
-        scrollbarXHidden,
-        cornerHidden
+        y: scrollbarYHidden,
+        x: scrollbarXHidden,
+        corner: cornerHidden
       };
     });
     const nextOverflowEdges = {
@@ -217,17 +227,20 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
       }
       return nextOverflowEdges;
     });
-  }
-  const computeThumbPosition = useStableCallback(() => {
-    ReactDOM.flushSync(computeThumbPositionHandler);
   });
   useIsoLayoutEffect(() => {
     if (!viewportRef.current) {
       return undefined;
     }
     removeCSSVariableInheritance();
-    const cleanup = onVisible(viewportRef.current, computeThumbPosition);
-    return cleanup;
+    let hasInitialized = false;
+    return onVisible(viewportRef.current, () => {
+      if (!hasInitialized) {
+        hasInitialized = true;
+        return;
+      }
+      computeThumbPosition();
+    });
   }, [computeThumbPosition, viewportRef]);
   useIsoLayoutEffect(() => {
     // Wait for scrollbar-related refs to be set
@@ -245,7 +258,16 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
     if (typeof ResizeObserver === 'undefined' || !viewport) {
       return undefined;
     }
-    const ro = new ResizeObserver(computeThumbPosition);
+    let hasInitialized = false;
+    const ro = new ResizeObserver(() => {
+      // ResizeObserver fires once upon observing, so we skip the initial call
+      // to avoid double-calculating the thumb position on mount.
+      if (!hasInitialized) {
+        hasInitialized = true;
+        return;
+      }
+      computeThumbPosition();
+    });
     ro.observe(viewport);
 
     // If there are animations in the viewport, wait for them to finish and then recompute the thumb position.
@@ -256,9 +278,13 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
     // We assume the user is using `onOpenChangeComplete` to hide the scrollbar
     // until animations complete because otherwise the scrollbar would show the thumb resizing mid-animation.
     waitForAnimationsTimeout.start(0, () => {
-      Promise.all(viewport.getAnimations({
+      const animations = viewport.getAnimations({
         subtree: true
-      }).map(animation => animation.finished)).then(computeThumbPosition).catch(() => {});
+      });
+      if (animations.length === 0) {
+        return;
+      }
+      Promise.all(animations.map(animation => animation.finished)).then(computeThumbPosition).catch(() => {});
     });
     return () => {
       ro.disconnect();
@@ -274,7 +300,7 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
       'data-id': `${rootId}-viewport`
     }),
     // https://accessibilityinsights.io/info-examples/web/scrollable-region-focusable/
-    ...((!hiddenState.scrollbarXHidden || !hiddenState.scrollbarYHidden) && {
+    ...((!hiddenState.x || !hiddenState.y) && {
       tabIndex: 0
     }),
     className: styleDisableScrollbar.className,
@@ -310,14 +336,14 @@ export const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollA
     onKeyDown: handleUserInteraction
   };
   const viewportState = React.useMemo(() => ({
-    hasOverflowX: !hiddenState.scrollbarXHidden,
-    hasOverflowY: !hiddenState.scrollbarYHidden,
+    hasOverflowX: !hiddenState.x,
+    hasOverflowY: !hiddenState.y,
     overflowXStart: overflowEdges.xStart,
     overflowXEnd: overflowEdges.xEnd,
     overflowYStart: overflowEdges.yStart,
     overflowYEnd: overflowEdges.yEnd,
-    cornerHidden: hiddenState.cornerHidden
-  }), [hiddenState.scrollbarXHidden, hiddenState.scrollbarYHidden, hiddenState.cornerHidden, overflowEdges]);
+    cornerHidden: hiddenState.corner
+  }), [hiddenState.x, hiddenState.y, hiddenState.corner, overflowEdges]);
   const element = useRenderElement('div', componentProps, {
     ref: [forwardedRef, viewportRef],
     state: viewportState,

package/esm/select/arrow/SelectArrow.d.ts

@@ -7,7 +7,7 @@ import type { Align, Side } from "../../utils/useAnchorPositioning.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectArrow: React.ForwardRefExoticComponent<SelectArrowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectArrow: React.ForwardRefExoticComponent<Omit<SelectArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectArrowState {
   /**
    * Whether the select popup is currently open.

package/esm/select/backdrop/SelectBackdrop.d.ts

@@ -7,7 +7,7 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectBackdrop: React.ForwardRefExoticComponent<SelectBackdropProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectBackdrop: React.ForwardRefExoticComponent<Omit<SelectBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectBackdropState {
   open: boolean;
   transitionStatus: TransitionStatus;

package/esm/select/group/SelectGroup.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectGroup: React.ForwardRefExoticComponent<SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectGroup: React.ForwardRefExoticComponent<Omit<SelectGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectGroupState {}
 export interface SelectGroupProps extends BaseUIComponentProps<'div', SelectGroup.State> {}
 export declare namespace SelectGroup {

package/esm/select/group-label/SelectGroupLabel.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectGroupLabel: React.ForwardRefExoticComponent<SelectGroupLabelProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectGroupLabel: React.ForwardRefExoticComponent<Omit<SelectGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectGroupLabelState {}
 export interface SelectGroupLabelProps extends BaseUIComponentProps<'div', SelectGroupLabel.State> {}
 export declare namespace SelectGroupLabel {

package/esm/select/icon/SelectIcon.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectIcon: React.ForwardRefExoticComponent<SelectIconProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const SelectIcon: React.ForwardRefExoticComponent<Omit<SelectIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface SelectIconState {
   /**
    * Whether the select popup is currently open.

package/esm/select/item/SelectItem.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/typ
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectItem: React.NamedExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectItem: React.NamedExoticComponent<Omit<SelectItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export interface SelectItemState {
   /**
    * Whether the item should ignore user interaction.

package/esm/select/item/SelectItem.js

@@ -122,7 +122,6 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
   const defaultProps = {
     role: 'option',
     'aria-selected': selected,
-    'aria-disabled': disabled || undefined,
     tabIndex: highlighted ? 0 : -1,
     onFocus() {
       store.set('activeIndex', index);

package/esm/select/item-indicator/SelectItemIndicator.d.ts

@@ -7,7 +7,7 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectItemIndicator: React.ForwardRefExoticComponent<SelectItemIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const SelectItemIndicator: React.ForwardRefExoticComponent<Omit<SelectItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface SelectItemIndicatorState {
   selected: boolean;
   transitionStatus: TransitionStatus;

package/esm/select/item-text/SelectItemText.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectItemText: React.NamedExoticComponent<SelectItemTextProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectItemText: React.NamedExoticComponent<Omit<SelectItemTextProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectItemTextState {}
 export interface SelectItemTextProps extends BaseUIComponentProps<'div', SelectItemText.State> {}
 export declare namespace SelectItemText {

package/esm/select/list/SelectList.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectList: React.ForwardRefExoticComponent<SelectListProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectList: React.ForwardRefExoticComponent<Omit<SelectListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectListProps extends BaseUIComponentProps<'div', SelectList.State> {}
 export interface SelectListState {}
 export declare namespace SelectList {

package/esm/select/popup/SelectPopup.d.ts

@@ -8,7 +8,7 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectPopup: React.ForwardRefExoticComponent<SelectPopupProps & React.RefAttributes<Element>>;
+export declare const SelectPopup: React.ForwardRefExoticComponent<Omit<SelectPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectPopupProps extends BaseUIComponentProps<'div', SelectPopup.State> {
   children?: React.ReactNode;
 }