From 418328911922a9db4e3e1e153df5c1eacb2bddd1 Mon Sep 17 00:00:00 2001 From: Albert Yu Date: Wed, 26 Feb 2025 17:39:54 +0800 Subject: [PATCH] Extract isElementDisabled util --- .../app/(private)/experiments/toolbar/text-editor.tsx | 7 +++---- packages/react/src/accordion/root/useAccordionRoot.ts | 11 +++-------- packages/react/src/composite/composite.ts | 9 +-------- packages/react/src/composite/root/useCompositeRoot.ts | 2 +- packages/react/src/select/root/useSelectRoot.ts | 9 ++------- packages/react/src/utils/isElementDisabled.ts | 7 +++++++ 6 files changed, 17 insertions(+), 28 deletions(-) create mode 100644 packages/react/src/utils/isElementDisabled.ts diff --git a/docs/src/app/(private)/experiments/toolbar/text-editor.tsx b/docs/src/app/(private)/experiments/toolbar/text-editor.tsx index b4e819a030..67398f934f 100644 --- 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(); - const selectDisabled = settings.toolbarDisabled || settings.selectDisabled; + const SELECT_DISABLED = settings.toolbarDisabled || settings.selectDisabled; return ( - {/* only disabling the trigger doesn't work yet - https://github.com/mui/base-ui/issues/1439 */} - + } className={styles.select.Select} > diff --git a/packages/react/src/accordion/root/useAccordionRoot.ts b/packages/react/src/accordion/root/useAccordionRoot.ts index a1f180793c..47f1868cd6 100644 --- 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 index 990ca0135c..cbab507210 100644 --- 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, index: number, diff --git a/packages/react/src/composite/root/useCompositeRoot.ts b/packages/react/src/composite/root/useCompositeRoot.ts index 5fa225625f..096e52eb30 100644 --- 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 index d29f894cf7..c789384145 100644 --- 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(params: useSelectRoot.Parameters): useSelectRoot.ReturnValue { const { id: idProp, @@ -198,7 +193,7 @@ export function useSelectRoot(params: useSelectRoot.Parameters): 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 new file mode 100644 index 0000000000..e6a06c1c09 --- /dev/null +++ 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' + ); +}