Extract isElementDisabled util

mui · Feb 26, 2025 · 4183289 · 4183289
1 parent 3ccf591
commit 4183289
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 28 deletions.
diff --git a/docs/src/app/(private)/experiments/toolbar/text-editor.tsx b/docs/src/app/(private)/experiments/toolbar/text-editor.tsx
@@ -127,7 +127,7 @@ function renderToggleWithTooltip(args: {
 export default function App() {
   const { settings } = useExperimentSettings<Settings>();
 
-  const selectDisabled = settings.toolbarDisabled || settings.selectDisabled;
+  const SELECT_DISABLED = settings.toolbarDisabled || settings.selectDisabled;
   return (
     <React.Fragment>
       <a
@@ -141,10 +141,9 @@ export default function App() {
       <div className={styles.toolbar.Wrapper}>
         <Tooltip.Provider>
           <Toolbar.Root className={styles.toolbar.Root}>
-            {/* only disabling the trigger doesn't work yet - https://github.com/mui/base-ui/issues/1439 */}
-            <Select.Root defaultValue="sans" disabled={selectDisabled}>
+            <Select.Root defaultValue="sans">
               <Toolbar.Button
-                disabled={selectDisabled}
+                disabled={SELECT_DISABLED}
                 render={<Select.Trigger />}
                 className={styles.select.Select}
               >

diff --git a/packages/react/src/accordion/root/useAccordionRoot.ts b/packages/react/src/accordion/root/useAccordionRoot.ts
@@ -1,5 +1,6 @@
 'use client';
 import * as React from 'react';
+import { isElementDisabled } from '../../utils/isElementDisabled';
 import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useControlled } from '../../utils/useControlled';
 import { ARROW_DOWN, ARROW_UP, ARROW_RIGHT, ARROW_LEFT } from '../../composite/composite';
@@ -15,9 +16,9 @@ function getActiveTriggers(accordionItemRefs: {
 
   for (let i = 0; i < accordionItemElements.length; i += 1) {
     const section = accordionItemElements[i];
-    if (!isDisabled(section)) {
+    if (!isElementDisabled(section)) {
       const trigger = section?.querySelector('[type="button"]') as HTMLButtonElement;
-      if (!isDisabled(trigger)) {
+      if (!isElementDisabled(trigger)) {
         output.push(trigger);
       }
     }
@@ -26,12 +27,6 @@ function getActiveTriggers(accordionItemRefs: {
   return output;
 }
 
-function isDisabled(element: HTMLElement | null) {
-  return (
-    element === null || element.hasAttribute('disabled') || element.hasAttribute('data-disabled')
-  );
-}
-
 export function useAccordionRoot(
   parameters: useAccordionRoot.Parameters,
 ): useAccordionRoot.ReturnValue {

diff --git a/packages/react/src/composite/composite.ts b/packages/react/src/composite/composite.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { hasComputedStyleMapSupport } from '../utils/hasComputedStyleMapSupport';
+import { isElementDisabled } from '../utils/isElementDisabled';
 import { ownerWindow } from '../utils/owner';
 import type { TextDirection } from '../direction-provider/DirectionContext';
 
@@ -344,14 +345,6 @@ export function getCellIndices(indices: (number | undefined)[], cellMap: (number
   return cellMap.flatMap((index, cellIndex) => (indices.includes(index) ? [cellIndex] : []));
 }
 
-export function isElementDisabled(element: HTMLElement | null) {
-  return (
-    element == null ||
-    element.hasAttribute('disabled') ||
-    element.getAttribute('aria-disabled') === 'true'
-  );
-}
-
 export function isDisabled(
   list: Array<HTMLElement | null>,
   index: number,

diff --git a/packages/react/src/composite/root/useCompositeRoot.ts b/packages/react/src/composite/root/useCompositeRoot.ts
@@ -1,6 +1,7 @@
 'use client';
 import * as React from 'react';
 import type { TextDirection } from '../../direction-provider/DirectionContext';
+import { isElementDisabled } from '../../utils/isElementDisabled';
 import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useEventCallback } from '../../utils/useEventCallback';
 import { useForkRef } from '../../utils/useForkRef';
@@ -24,7 +25,6 @@ import {
   HORIZONTAL_KEYS,
   HORIZONTAL_KEYS_WITH_EXTRA_KEYS,
   isDisabled,
-  isElementDisabled,
   isIndexOutOfBounds,
   isNativeInput,
   VERTICAL_KEYS,

diff --git a/packages/react/src/select/root/useSelectRoot.ts b/packages/react/src/select/root/useSelectRoot.ts
@@ -10,6 +10,7 @@ import {
 } from '@floating-ui/react';
 import { useFieldControlValidation } from '../../field/control/useFieldControlValidation';
 import { useFieldRootContext } from '../../field/root/FieldRootContext';
+import { isElementDisabled } from '../../utils/isElementDisabled';
 import { useBaseUiId } from '../../utils/useBaseUiId';
 import { useControlled } from '../../utils/useControlled';
 import { type TransitionStatus, useTransitionStatus } from '../../utils';
@@ -22,12 +23,6 @@ import { useOpenChangeComplete } from '../../utils/useOpenChangeComplete';
 
 const EMPTY_ARRAY: never[] = [];
 
-function isDisabled(element: HTMLElement | null) {
-  return (
-    element == null || element.hasAttribute('disabled') || element.hasAttribute('data-disabled')
-  );
-}
-
 export function useSelectRoot<T>(params: useSelectRoot.Parameters<T>): useSelectRoot.ReturnValue {
   const {
     id: idProp,
@@ -198,7 +193,7 @@ export function useSelectRoot<T>(params: useSelectRoot.Parameters<T>): useSelect
     },
   });
 
-  const triggerDisabled = isDisabled(triggerElement);
+  const triggerDisabled = isElementDisabled(triggerElement);
 
   const click = useClick(floatingRootContext, {
     enabled: !readOnly && !disabled && !triggerDisabled,

diff --git a/packages/react/src/utils/isElementDisabled.ts b/packages/react/src/utils/isElementDisabled.ts
@@ -0,0 +1,7 @@
+export function isElementDisabled(element: HTMLElement | null) {
+  return (
+    element == null ||
+    element.hasAttribute('disabled') ||
+    element.getAttribute('aria-disabled') === 'true'
+  );
+}