Merge branch 'master' into feat/popover-modality

docs/reference/generated/alert-dialog-close.json

@@ -11,6 +11,10 @@
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
     }
   },
-  "dataAttributes": {},
+  "dataAttributes": {
+    "data-disabled": {
+      "description": "Present when the button is disabled."
+    }
+  },
   "cssVariables": {}
 }

docs/reference/generated/alert-dialog-trigger.json

@@ -14,6 +14,9 @@
   "dataAttributes": {
     "data-popup-open": {
       "description": "Present when the corresponding dialog is open."
+    },
+    "data-disabled": {
+      "description": "Present when the trigger is disabled."
     }
   },
   "cssVariables": {}

docs/reference/generated/dialog-close.json

@@ -11,6 +11,10 @@
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
     }
   },
-  "dataAttributes": {},
+  "dataAttributes": {
+    "data-disabled": {
+      "description": "Present when the button is disabled."
+    }
+  },
   "cssVariables": {}
 }

docs/reference/generated/dialog-trigger.json

@@ -14,6 +14,9 @@
   "dataAttributes": {
     "data-popup-open": {
       "description": "Present when the corresponding dialog is open."
+    },
+    "data-disabled": {
+      "description": "Present when the trigger is disabled."
     }
   },
   "cssVariables": {}

packages/react/src/accordion/header/AccordionHeader.tsx

@@ -33,7 +33,7 @@ const AccordionHeader = React.forwardRef(function AccordionHeader(
   return renderElement();
 });
 
-export namespace AccordionHeader {
+namespace AccordionHeader {
   export interface Props extends BaseUIComponentProps<'h3', AccordionItem.State> {}
 }
 

packages/react/src/accordion/item/AccordionItem.tsx

@@ -135,7 +135,7 @@ const AccordionItem = React.forwardRef(function AccordionItem(
 
 export type AccordionItemValue = any | null;
 
-export namespace AccordionItem {
+namespace AccordionItem {
   export interface State extends AccordionRoot.State {
     index: number;
     open: boolean;

packages/react/src/accordion/panel/AccordionPanel.tsx

@@ -93,7 +93,7 @@ const AccordionPanel = React.forwardRef(function AccordionPanel(
   return renderElement();
 });
 
-export namespace AccordionPanel {
+namespace AccordionPanel {
   export interface Props
     extends BaseUIComponentProps<'div', AccordionItem.State>,
       Pick<AccordionRoot.Props, 'hiddenUntilFound' | 'keepMounted'> {}

packages/react/src/accordion/root/AccordionRoot.tsx

@@ -114,7 +114,7 @@ const AccordionRoot = React.forwardRef(function AccordionRoot(
   );
 });
 
-export namespace AccordionRoot {
+namespace AccordionRoot {
   export interface State {
     value: AccordionValue;
     /**

packages/react/src/alert-dialog/close/AlertDialogClose.test.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
+import { expect } from 'chai';
+import { spy } from 'sinon';
 import { AlertDialog } from '@base-ui-components/react/alert-dialog';
+import { screen } from '@mui/internal-test-utils';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<AlertDialog.Close />', () => {
@@ -18,4 +21,69 @@ describe('<AlertDialog.Close />', () => {
       );
     },
   }));
+
+  describe('prop: disabled', () => {
+    it('disables the button', async () => {
+      const handleOpenChange = spy();
+
+      const { user } = await render(
+        <AlertDialog.Root onOpenChange={handleOpenChange}>
+          <AlertDialog.Trigger>Open</AlertDialog.Trigger>
+          <AlertDialog.Portal>
+            <AlertDialog.Popup>
+              <AlertDialog.Close disabled>Close</AlertDialog.Close>
+            </AlertDialog.Popup>
+          </AlertDialog.Portal>
+        </AlertDialog.Root>,
+      );
+
+      expect(handleOpenChange.callCount).to.equal(0);
+
+      const openButton = screen.getByText('Open');
+      await user.click(openButton);
+
+      expect(handleOpenChange.callCount).to.equal(1);
+      expect(handleOpenChange.firstCall.args[0]).to.equal(true);
+
+      const closeButton = screen.getByText('Close');
+      expect(closeButton).to.have.attribute('disabled');
+      expect(closeButton).to.have.attribute('data-disabled');
+      await user.click(closeButton);
+
+      expect(handleOpenChange.callCount).to.equal(1);
+    });
+
+    it('custom element', async () => {
+      const handleOpenChange = spy();
+
+      const { user } = await render(
+        <AlertDialog.Root onOpenChange={handleOpenChange}>
+          <AlertDialog.Trigger>Open</AlertDialog.Trigger>
+          <AlertDialog.Portal>
+            <AlertDialog.Popup>
+              <AlertDialog.Close disabled render={<span />}>
+                Close
+              </AlertDialog.Close>
+            </AlertDialog.Popup>
+          </AlertDialog.Portal>
+        </AlertDialog.Root>,
+      );
+
+      expect(handleOpenChange.callCount).to.equal(0);
+
+      const openButton = screen.getByText('Open');
+      await user.click(openButton);
+
+      expect(handleOpenChange.callCount).to.equal(1);
+      expect(handleOpenChange.firstCall.args[0]).to.equal(true);
+
+      const closeButton = screen.getByText('Close');
+      expect(closeButton).to.not.have.attribute('disabled');
+      expect(closeButton).to.have.attribute('data-disabled');
+      expect(closeButton).to.have.attribute('aria-disabled', 'true');
+      await user.click(closeButton);
+
+      expect(handleOpenChange.callCount).to.equal(1);
+    });
+  });
 });

packages/react/src/alert-dialog/close/AlertDialogClose.tsx

@@ -6,8 +6,6 @@ import { useDialogClose } from '../../dialog/close/useDialogClose';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import type { BaseUIComponentProps } from '../../utils/types';
 
-const state = {};
-
 /**
  * A button that closes the alert dialog.
  * Renders a `<button>` element.
@@ -18,16 +16,17 @@ const AlertDialogClose = React.forwardRef(function AlertDialogClose(
   props: AlertDialogClose.Props,
   forwardedRef: React.ForwardedRef<HTMLButtonElement>,
 ) {
-  const { render, className, ...other } = props;
+  const { render, className, disabled = false, ...other } = props;
   const { open, setOpen } = useAlertDialogRootContext();
-  const { getRootProps } = useDialogClose({ open, setOpen });
+  const { getRootProps } = useDialogClose({ disabled, open, setOpen, rootRef: forwardedRef });
+
+  const state: AlertDialogClose.State = React.useMemo(() => ({ disabled }), [disabled]);
 
   const { renderElement } = useComponentRenderer({
     render: render ?? 'button',
     className,
     state,
     propGetter: getRootProps,
-    ref: forwardedRef,
     extraProps: other,
   });
 
@@ -37,7 +36,12 @@ const AlertDialogClose = React.forwardRef(function AlertDialogClose(
 namespace AlertDialogClose {
   export interface Props extends BaseUIComponentProps<'button', State> {}
 
-  export interface State {}
+  export interface State {
+    /**
+     * Whether the button is currently disabled.
+     */
+    disabled: boolean;
+  }
 }
 
 AlertDialogClose.propTypes /* remove-proptypes */ = {
@@ -54,6 +58,10 @@ AlertDialogClose.propTypes /* remove-proptypes */ = {
    * returns a class based on the component’s state.
    */
   className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  disabled: PropTypes.bool,
   /**
    * Allows you to replace the component’s HTML element
    * with a different tag, or compose it with another component.

packages/react/src/alert-dialog/close/AlertDialogCloseDataAttributes.ts

@@ -0,0 +1,6 @@
+export enum AlertDialogCloseDataAttributes {
+  /**
+   * Present when the button is disabled.
+   */
+  disabled = 'data-disabled',
+}

packages/react/src/alert-dialog/trigger/AlertDialogTrigger.test.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
+import { expect } from 'chai';
 import { AlertDialog } from '@base-ui-components/react/alert-dialog';
+import { screen } from '@mui/internal-test-utils';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<AlertDialog.Trigger />', () => {
@@ -16,4 +18,55 @@ describe('<AlertDialog.Trigger />', () => {
       );
     },
   }));
+
+  describe('prop: disabled', () => {
+    it('disables the dialog', async () => {
+      const { user } = await render(
+        <AlertDialog.Root>
+          <AlertDialog.Trigger disabled />
+          <AlertDialog.Portal>
+            <AlertDialog.Backdrop />
+            <AlertDialog.Popup>
+              <AlertDialog.Title>title text</AlertDialog.Title>
+            </AlertDialog.Popup>
+          </AlertDialog.Portal>
+        </AlertDialog.Root>,
+      );
+
+      const trigger = screen.getByRole('button');
+      expect(trigger).to.have.attribute('disabled');
+      expect(trigger).to.have.attribute('data-disabled');
+
+      await user.click(trigger);
+      expect(screen.queryByText('title text')).to.equal(null);
+
+      await user.keyboard('[Tab]');
+      expect(document.activeElement).to.not.equal(trigger);
+    });
+
+    it('custom element', async () => {
+      const { user } = await render(
+        <AlertDialog.Root>
+          <AlertDialog.Trigger disabled render={<span />} />
+          <AlertDialog.Portal>
+            <AlertDialog.Backdrop />
+            <AlertDialog.Popup>
+              <AlertDialog.Title>title text</AlertDialog.Title>
+            </AlertDialog.Popup>
+          </AlertDialog.Portal>
+        </AlertDialog.Root>,
+      );
+
+      const trigger = screen.getByRole('button');
+      expect(trigger).to.not.have.attribute('disabled');
+      expect(trigger).to.have.attribute('data-disabled');
+      expect(trigger).to.have.attribute('aria-disabled', 'true');
+
+      await user.click(trigger);
+      expect(screen.queryByText('title text')).to.equal(null);
+
+      await user.keyboard('[Tab]');
+      expect(document.activeElement).to.not.equal(trigger);
+    });
+  });
 });

packages/react/src/alert-dialog/trigger/AlertDialogTrigger.tsx

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useAlertDialogRootContext } from '../root/AlertDialogRootContext';
+import { useButton } from '../../use-button/useButton';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useForkRef } from '../../utils/useForkRef';
 import type { BaseUIComponentProps } from '../../utils/types';
@@ -17,18 +18,26 @@ const AlertDialogTrigger = React.forwardRef(function AlertDialogTrigger(
   props: AlertDialogTrigger.Props,
   forwardedRef: React.ForwardedRef<HTMLButtonElement>,
 ) {
-  const { render, className, ...other } = props;
+  const { render, className, disabled = false, ...other } = props;
   const { open, setTriggerElement, getTriggerProps } = useAlertDialogRootContext();
 
-  const state: AlertDialogTrigger.State = React.useMemo(() => ({ open }), [open]);
+  const state: AlertDialogTrigger.State = React.useMemo(
+    () => ({ disabled, open }),
+    [disabled, open],
+  );
 
   const mergedRef = useForkRef(forwardedRef, setTriggerElement);
 
+  const { getButtonProps } = useButton({
+    disabled,
+    buttonRef: mergedRef,
+  });
+
   const { renderElement } = useComponentRenderer({
     render: render ?? 'button',
     className,
     state,
-    propGetter: getTriggerProps,
+    propGetter: (externalProps) => getButtonProps(getTriggerProps(externalProps)),
     extraProps: other,
     customStyleHookMapping: triggerOpenStateMapping,
     ref: mergedRef,
@@ -41,6 +50,10 @@ namespace AlertDialogTrigger {
   export interface Props extends BaseUIComponentProps<'button', State> {}
 
   export interface State {
+    /**
+     * Whether the dialog is currently disabled.
+     */
+    disabled: boolean;
     /**
      * Whether the dialog is currently open.
      */
@@ -62,6 +75,10 @@ AlertDialogTrigger.propTypes /* remove-proptypes */ = {
    * returns a class based on the component’s state.
    */
   className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  disabled: PropTypes.bool,
   /**
    * Allows you to replace the component’s HTML element
    * with a different tag, or compose it with another component.

packages/react/src/alert-dialog/trigger/AlertDialogTriggerDataAttributes.ts

@@ -1,4 +1,8 @@
 export enum AlertDialogTriggerDataAttributes {
+  /**
+   * Present when the trigger is disabled.
+   */
+  disabled = 'data-disabled',
   /**
    * Present when the corresponding dialog is open.
    */

packages/react/src/avatar/fallback/AvatarFallback.tsx

@@ -54,7 +54,7 @@ const AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarFallback.Props>(
   },
 );
 
-export namespace AvatarFallback {
+namespace AvatarFallback {
   export interface Props extends BaseUIComponentProps<'span', AvatarRoot.State> {
     /**
      * How long to wait before showing the fallback. Specified in milliseconds.

packages/react/src/avatar/image/AvatarImage.tsx

@@ -65,7 +65,7 @@ const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImage.Props>(functi
   return imageLoadingStatus === 'loaded' ? renderElement() : null;
 });
 
-export namespace AvatarImage {
+namespace AvatarImage {
   export interface Props extends BaseUIComponentProps<'img', AvatarRoot.State> {
     /**
      * Callback fired when the loading status changes.

packages/react/src/avatar/root/AvatarRoot.tsx

@@ -51,7 +51,7 @@ const AvatarRoot = React.forwardRef<HTMLSpanElement, AvatarRoot.Props>(function
 
 export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
 
-export namespace AvatarRoot {
+namespace AvatarRoot {
   export interface Props extends BaseUIComponentProps<'span', State> {}
 
   export interface State {

packages/react/src/checkbox-group/CheckboxGroupContext.ts

@@ -1,13 +1,13 @@
 'use client';
 import * as React from 'react';
-import { UseCheckboxGroupParent } from './useCheckboxGroupParent';
+import { useCheckboxGroupParent } from './useCheckboxGroupParent';
 
 export interface CheckboxGroupContext {
   value: string[] | undefined;
   defaultValue: string[] | undefined;
   setValue: (value: string[], event: Event) => void;
   allValues: string[] | undefined;
-  parent: UseCheckboxGroupParent.ReturnValue;
+  parent: useCheckboxGroupParent.ReturnValue;
   disabled: boolean;
 }