Merge branch 'menu/submenu-highlight-keyboard-focus-updated' of https…

…://github.com/onehanddev/base-ui into menu/submenu-highlight-keyboard-focus-updated
mui · Jan 14, 2025 · 6281f1b · 6281f1b
2 parents 7f69c60 + 08a8d3e
commit 6281f1b
Show file tree

Hide file tree

Showing 10 changed files with 332 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,124 @@
 # Versions
 
+## v1.0.0-alpha.5
+
+_Jan 10, 2025_
+
+### AlertDialog
+
+- **Breaking change:** Require `Portal` part.
+  The AlertDialog must explicitly include the Portal part wrapping the Popup.
+  The `keepMounted` prop was removed from the Popup.
+  It's only present on the Portal part.
+  [#1222](https://github.com/mui/base-ui/pull/1222) @atomiks
+- Don't call `onNestedDialogOpen` when unmounting a closed nested dialog [#1280](https://github.com/mui/base-ui/pull/1280) @mj12albert
+- Fix the nesting of different dialogs [#1167](https://github.com/mui/base-ui/pull/1167) @mnajdova
+- Remove `useFloating` call from the Popup [#1300](https://github.com/mui/base-ui/pull/1300) @michaldudak
+- Set `pointer-events` on `InternalBackdrop` based on `open` state [#1221](https://github.com/mui/base-ui/pull/1221) @atomiks
+- Use internal backdrop for pointer modality [#1161](https://github.com/mui/base-ui/pull/1161) @atomiks
+
+### Dialog
+
+- **Breaking change:** Require `Portal` part.
+  The Dialog must explicitly include the Portal part wrapping the Popup.
+  The `keepMounted` prop was removed from the Popup.
+  It's only present on the Portal part.
+  [#1222](https://github.com/mui/base-ui/pull/1222) @atomiks
+- Don't call `onNestedDialogOpen` when unmounting a closed nested dialog [#1280](https://github.com/mui/base-ui/pull/1280) @mj12albert
+- Fix the nesting of different dialogs [#1167](https://github.com/mui/base-ui/pull/1167) @mnajdova
+- Remove `useFloating` call from the Popup [#1300](https://github.com/mui/base-ui/pull/1300) @michaldudak
+- Set `pointer-events` on `InternalBackdrop` based on `open` state [#1221](https://github.com/mui/base-ui/pull/1221) @atomiks
+- Use internal backdrop for pointer modality [#1161](https://github.com/mui/base-ui/pull/1161) @atomiks
+
+### Menu
+
+- **Breaking change:** Require `Portal` part.
+  The Menu must explicitly include the Portal part wrapping the Positioner.
+  The `keepMounted` prop was removed from the Positioner.
+  It's only present on the Portal part.
+  [#1222](https://github.com/mui/base-ui/pull/1222) @atomiks
+- Apply `aria-hidden` to `Arrow` parts [#1196](https://github.com/mui/base-ui/pull/1196) @atomiks
+- Fix `focusableWhenDisabled` components [#1313](https://github.com/mui/base-ui/pull/1313) @mj12albert
+- Fix `openOnHover` issues [#1191](https://github.com/mui/base-ui/pull/1191) @atomiks
+- Fix closing the menu when clicking on checkboxitem/radioitem [#1301](https://github.com/mui/base-ui/pull/1301) @michaldudak
+- Fix Enter key preventDefault when rendering links [#1251](https://github.com/mui/base-ui/pull/1251) @mj12albert
+- Handle pseudo-element bounds in mouseup detection [#1250](https://github.com/mui/base-ui/pull/1250) @atomiks
+- Set `pointer-events` on `InternalBackdrop` based on `open` state [#1221](https://github.com/mui/base-ui/pull/1221) @atomiks
+- Use internal backdrop for pointer modality [#1161](https://github.com/mui/base-ui/pull/1161) @atomiks
+
+### NumberField
+
+- Correctly handle quick touches [#1294](https://github.com/mui/base-ui/pull/1294) @atomiks
+
+### Popover
+
+- **Breaking change:** Require `Portal` part.
+  The Popover must explicitly include the Portal part wrapping the Positioner.
+  The `keepMounted` prop was removed from the Positioner.
+  It's only present on the Portal part.
+  [#1222](https://github.com/mui/base-ui/pull/1222) @atomiks
+- Apply `aria-hidden` to `Arrow` parts [#1196](https://github.com/mui/base-ui/pull/1196) @atomiks
+- Fix PopoverTrigger and TooltipTrigger prop types [#1209](https://github.com/mui/base-ui/pull/1209) @mnajdova
+
+### PreviewCard
+
+- **Breaking change:** Require `Portal` part.
+  The PreviewCard must explicitly include the Portal part wrapping the Positioner.
+  The `keepMounted` prop was removed from the Positioner.
+  It's only present on the Portal part.
+  [#1222](https://github.com/mui/base-ui/pull/1222) @atomiks
+- Apply `aria-hidden` to `Arrow` parts [#1196](https://github.com/mui/base-ui/pull/1196) @atomiks
+- Use `FloatingPortalLite` [#1278](https://github.com/mui/base-ui/pull/1278) @atomiks
+
+### Progress
+
+- Set zero width when value is zero [#1204](https://github.com/mui/base-ui/pull/1204) @mj12albert
+
+### ScrollArea
+
+- Differentiate `x`/`y` orientation `data-scrolling` [#1188](https://github.com/mui/base-ui/pull/1188) @atomiks
+- Read `DirectionProvider` and use logical positioning CSS props [#1194](https://github.com/mui/base-ui/pull/1194) @mj12albert
+
+### Select
+
+- **Breaking change:** Require `Portal` part.
+  The Select must explicitly include the Portal part wrapping the Positioner.
+  The `keepMounted` prop was removed from the Positioner.
+  It's only present on the Portal part.
+  [#1222](https://github.com/mui/base-ui/pull/1222) @atomiks
+- Allow `id` to be passed to trigger [#1174](https://github.com/mui/base-ui/pull/1174) @atomiks
+- Fallback to standard positioning when pinch-zoomed in Safari [#1139](https://github.com/mui/base-ui/pull/1139) @atomiks
+- Fix `focusableWhenDisabled` components [#1313](https://github.com/mui/base-ui/pull/1313) @mj12albert
+- Fix highlight flash on Safari [#1233](https://github.com/mui/base-ui/pull/1233) @atomiks
+- Handle pseudo-element bounds in mouseup detection [#1250](https://github.com/mui/base-ui/pull/1250) @atomiks
+- Use internal backdrop for pointer modality [#1161](https://github.com/mui/base-ui/pull/1161) @atomiks
+
+### Separator
+
+- Support vertical orientation [#1304](https://github.com/mui/base-ui/pull/1304) @mj12albert
+
+### Slider
+
+- Ensure `onValueCommitted` is called with the same value as latest `onValueChange` [#1296](https://github.com/mui/base-ui/pull/1296) @mj12albert
+- Replace internal map with `Composite` metadata [#1082](https://github.com/mui/base-ui/pull/1082) @mj12albert
+- Set `position: relative` on range slider indicator [#1175](https://github.com/mui/base-ui/pull/1175) @mj12albert
+- Use un-rounded values to position thumbs [#1219](https://github.com/mui/base-ui/pull/1219) @mj12albert
+
+### Tabs
+
+- Expose width/height state in tabs indicator [#1288](https://github.com/mui/base-ui/pull/1288) @aarongarciah
+
+### Tooltip
+
+- **Breaking change:** Require `Portal` part.
+  The Tooltip must explicitly include the Portal part wrapping the Positioner.
+  The `keepMounted` prop was removed from the Positioner.
+  It's only present on the Portal part.
+  [#1222](https://github.com/mui/base-ui/pull/1222) @atomiks
+- Apply `aria-hidden` to `Arrow` parts [#1196](https://github.com/mui/base-ui/pull/1196) @atomiks
+- Fix PopoverTrigger and TooltipTrigger prop types [#1209](https://github.com/mui/base-ui/pull/1209) @mnajdova
+- Use `FloatingPortalLite` [#1278](https://github.com/mui/base-ui/pull/1278) @atomiks
+
 ## v1.0.0-alpha.4
 
 _Dec 17, 2024_

diff --git a/docs/src/app/(public)/(content)/react/overview/releases/page.mdx b/docs/src/app/(public)/(content)/react/overview/releases/page.mdx
@@ -3,6 +3,125 @@
 <Subtitle>Changelogs for each Base UI release.</Subtitle>
 <Meta name="description" content="Changelogs for each Base UI release." />
 
+## v1.0.0-alpha.5
+
+**Jan 10, 2025**
+
+### AlertDialog
+
+- **Breaking change:** Require `Portal` part.
+  The AlertDialog must explicitly include the Portal part wrapping the Popup.
+  The `keepMounted` prop was removed from the Popup.
+  It's only present on the Portal part.
+  [#1222](https://github.com/mui/base-ui/pull/1222)
+- Don't call `onNestedDialogOpen` when unmounting a closed nested dialog [#1280](https://github.com/mui/base-ui/pull/1280)
+- Fix the nesting of different dialogs [#1167](https://github.com/mui/base-ui/pull/1167)
+- Remove `useFloating` call from the Popup [#1300](https://github.com/mui/base-ui/pull/1300)
+- Set `pointer-events` on `InternalBackdrop` based on `open` state [#1221](https://github.com/mui/base-ui/pull/1221)
+- Use internal backdrop for pointer modality [#1161](https://github.com/mui/base-ui/pull/1161)
+
+### Dialog
+
+- **Breaking change:** Require `Portal` part.
+  The Dialog must explicitly include the Portal part wrapping the Popup.
+  The `keepMounted` prop was removed from the Popup.
+  It's only present on the Portal part.
+  [#1222](https://github.com/mui/base-ui/pull/1222)
+- Don't call `onNestedDialogOpen` when unmounting a closed nested dialog [#1280](https://github.com/mui/base-ui/pull/1280)
+- Fix the nesting of different dialogs [#1167](https://github.com/mui/base-ui/pull/1167)
+- Remove `useFloating` call from the Popup [#1300](https://github.com/mui/base-ui/pull/1300)
+- Set `pointer-events` on `InternalBackdrop` based on `open` state [#1221](https://github.com/mui/base-ui/pull/1221)
+- Use internal backdrop for pointer modality [#1161](https://github.com/mui/base-ui/pull/1161)
+
+### Menu
+
+- **Breaking change:** Require `Portal` part.
+  The Menu must explicitly include the Portal part wrapping the Positioner.
+  The `keepMounted` prop was removed from the Positioner.
+  It's only present on the Portal part.
+  [#1222](https://github.com/mui/base-ui/pull/1222)
+- Apply `aria-hidden` to `Arrow` parts [#1196](https://github.com/mui/base-ui/pull/1196)
+- Fix `focusableWhenDisabled` components [#1313](https://github.com/mui/base-ui/pull/1313)
+- Fix `openOnHover` issues [#1191](https://github.com/mui/base-ui/pull/1191)
+- Fix closing the menu when clicking on checkboxitem/radioitem [#1301](https://github.com/mui/base-ui/pull/1301)
+- Fix Enter key preventDefault when rendering links [#1251](https://github.com/mui/base-ui/pull/1251)
+- Handle pseudo-element bounds in mouseup detection [#1250](https://github.com/mui/base-ui/pull/1250)
+- Set `pointer-events` on `InternalBackdrop` based on `open` state [#1221](https://github.com/mui/base-ui/pull/1221)
+- Use internal backdrop for pointer modality [#1161](https://github.com/mui/base-ui/pull/1161)
+
+### NumberField
+
+- Correctly handle quick touches [#1294](https://github.com/mui/base-ui/pull/1294)
+
+### Popover
+
+- **Breaking change:** Require `Portal` part.
+  The Popover must explicitly include the Portal part wrapping the Positioner.
+  The `keepMounted` prop was removed from the Positioner.
+  It's only present on the Portal part.
+  [#1222](https://github.com/mui/base-ui/pull/1222)
+- Apply `aria-hidden` to `Arrow` parts [#1196](https://github.com/mui/base-ui/pull/1196)
+- Fix PopoverTrigger and TooltipTrigger prop types [#1209](https://github.com/mui/base-ui/pull/1209)
+
+### PreviewCard
+
+- **Breaking change:** Require `Portal` part.
+  The PreviewCard must explicitly include the Portal part wrapping the Positioner.
+  The `keepMounted` prop was removed from the Positioner.
+  It's only present on the Portal part.
+  [#1222](https://github.com/mui/base-ui/pull/1222)
+- Apply `aria-hidden` to `Arrow` parts [#1196](https://github.com/mui/base-ui/pull/1196)
+- Use `FloatingPortalLite` [#1278](https://github.com/mui/base-ui/pull/1278)
+
+### Progress
+
+- Set zero width when value is zero [#1204](https://github.com/mui/base-ui/pull/1204)
+
+### ScrollArea
+
+- Differentiate `x`/`y` orientation `data-scrolling` [#1188](https://github.com/mui/base-ui/pull/1188)
+- Read `DirectionProvider` and use logical positioning CSS props [#1194](https://github.com/mui/base-ui/pull/1194)
+
+### Select
+
+- **Breaking change:** Require `Portal` part.
+  The Select must explicitly include the Portal part wrapping the Positioner.
+  The `keepMounted` prop was removed from the Positioner.
+  It's only present on the Portal part.
+  [#1222](https://github.com/mui/base-ui/pull/1222)
+- Allow `id` to be passed to trigger [#1174](https://github.com/mui/base-ui/pull/1174)
+- Fallback to standard positioning when pinch-zoomed in Safari [#1139](https://github.com/mui/base-ui/pull/1139)
+- Fix `focusableWhenDisabled` components [#1313](https://github.com/mui/base-ui/pull/1313)
+- Fix highlight flash on Safari [#1233](https://github.com/mui/base-ui/pull/1233)
+- Handle pseudo-element bounds in mouseup detection [#1250](https://github.com/mui/base-ui/pull/1250)
+- Use internal backdrop for pointer modality [#1161](https://github.com/mui/base-ui/pull/1161)
+
+### Separator
+
+- Support vertical orientation [#1304](https://github.com/mui/base-ui/pull/1304)
+
+### Slider
+
+- Ensure `onValueCommitted` is called with the same value as latest `onValueChange` [#1296](https://github.com/mui/base-ui/pull/1296)
+- Replace internal map with `Composite` metadata [#1082](https://github.com/mui/base-ui/pull/1082)
+- Set `position: relative` on range slider indicator [#1175](https://github.com/mui/base-ui/pull/1175)
+- Use un-rounded values to position thumbs [#1219](https://github.com/mui/base-ui/pull/1219)
+
+### Tabs
+
+- Expose width/height state in tabs indicator [#1288](https://github.com/mui/base-ui/pull/1288)
+
+### Tooltip
+
+- **Breaking change:** Require `Portal` part.
+  The Tooltip must explicitly include the Portal part wrapping the Positioner.
+  The `keepMounted` prop was removed from the Positioner.
+  It's only present on the Portal part.
+  [#1222](https://github.com/mui/base-ui/pull/1222)
+- Apply `aria-hidden` to `Arrow` parts [#1196](https://github.com/mui/base-ui/pull/1196)
+- Fix PopoverTrigger and TooltipTrigger prop types [#1209](https://github.com/mui/base-ui/pull/1209)
+- Use `FloatingPortalLite` [#1278](https://github.com/mui/base-ui/pull/1278)
+
 ## 1.0.0-alpha.4
 
 **December 17, 2024**

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@base-ui-components/monorepo",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.5",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@base-ui-components/react",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.5",
   "private": false,
   "author": "MUI Team",
   "description": "Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.",

diff --git a/packages/react/src/alert-dialog/description/AlertDialogDescription.tsx b/packages/react/src/alert-dialog/description/AlertDialogDescription.tsx
@@ -2,6 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useAlertDialogRootContext } from '../root/AlertDialogRootContext';
+import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 import { useBaseUiId } from '../../utils/useBaseUiId';
@@ -31,7 +32,16 @@ const AlertDialogDescription = React.forwardRef(function AlertDialogDescription(
     };
   }, [id, setDescriptionElementId]);
 
+  const getProps = React.useCallback(
+    (externalProps = {}) =>
+      mergeReactProps(externalProps, {
+        id,
+      }),
+    [id],
+  );
+
   const { renderElement } = useComponentRenderer({
+    propGetter: getProps,
     render: render ?? 'p',
     className,
     state,

diff --git a/packages/react/src/alert-dialog/root/AlertDialogRoot.test.tsx b/packages/react/src/alert-dialog/root/AlertDialogRoot.test.tsx
@@ -8,6 +8,32 @@ import { spy } from 'sinon';
 describe('<AlertDialog.Root />', () => {
   const { render } = createRenderer();
 
+  it('ARIA attributes', async () => {
+    const { queryByRole, getByText } = await render(
+      <AlertDialog.Root open>
+        <AlertDialog.Trigger />
+        <AlertDialog.Portal>
+          <AlertDialog.Backdrop />
+          <AlertDialog.Popup>
+            <AlertDialog.Title>title text</AlertDialog.Title>
+            <AlertDialog.Description>description text</AlertDialog.Description>
+          </AlertDialog.Popup>
+        </AlertDialog.Portal>
+      </AlertDialog.Root>,
+    );
+
+    const popup = queryByRole('alertdialog');
+    expect(popup).not.to.equal(null);
+    expect(popup).to.have.attribute('aria-modal', 'true');
+
+    expect(getByText('title text').getAttribute('id')).to.equal(
+      popup?.getAttribute('aria-labelledby'),
+    );
+    expect(getByText('description text').getAttribute('id')).to.equal(
+      popup?.getAttribute('aria-describedby'),
+    );
+  });
+
   describe('prop: onOpenChange', () => {
     it('calls onOpenChange with the new open state', async () => {
       const handleOpenChange = spy();

diff --git a/packages/react/src/alert-dialog/title/AlertDialogTitle.tsx b/packages/react/src/alert-dialog/title/AlertDialogTitle.tsx
@@ -2,6 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useAlertDialogRootContext } from '../root/AlertDialogRootContext';
+import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 import { useBaseUiId } from '../../utils/useBaseUiId';
@@ -31,7 +32,16 @@ const AlertDialogTitle = React.forwardRef(function AlertDialogTitle(
     };
   }, [id, setTitleElementId]);
 
+  const getProps = React.useCallback(
+    (externalProps = {}) =>
+      mergeReactProps(externalProps, {
+        id,
+      }),
+    [id],
+  );
+
   const { renderElement } = useComponentRenderer({
+    propGetter: getProps,
     render: render ?? 'h2',
     className,
     state,

diff --git a/packages/react/src/dialog/description/DialogDescription.tsx b/packages/react/src/dialog/description/DialogDescription.tsx
@@ -2,6 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDialogRootContext } from '../root/DialogRootContext';
+import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 import { useBaseUiId } from '../../utils/useBaseUiId';
@@ -31,7 +32,16 @@ const DialogDescription = React.forwardRef(function DialogDescription(
     };
   }, [id, setDescriptionElementId]);
 
+  const getProps = React.useCallback(
+    (externalProps = {}) =>
+      mergeReactProps(externalProps, {
+        id,
+      }),
+    [id],
+  );
+
   const { renderElement } = useComponentRenderer({
+    propGetter: getProps,
     render: render ?? 'p',
     className,
     state,