From 0b396cca1d436207494eef652ab0e4aa0be64586 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Fri, 11 Oct 2024 16:50:39 +0200 Subject: [PATCH 1/2] [core] Define contexts in a consistent way --- .../Root/AlertDialogRootContext.ts | 7 +++++- .../src/Checkbox/Root/CheckboxRootContext.ts | 13 ++++++---- .../Root/CheckboxGroupRootContext.ts | 11 ++++++-- .../Content/CollapsibleContent.test.tsx | 3 ++- .../Content/CollapsibleContent.tsx | 2 +- .../Collapsible/Root/CollapsibleContext.tsx | 22 ---------------- .../src/Collapsible/Root/CollapsibleRoot.tsx | 16 ++++++------ .../Root/CollapsibleRootContext.tsx | 25 +++++++++++++++++++ .../Trigger/CollapsibleTrigger.test.tsx | 3 ++- .../Trigger/CollapsibleTrigger.tsx | 2 +- packages/mui-base/src/Collapsible/index.ts | 5 +++- .../Composite/List/CompositeListContext.ts | 4 +++ .../src/Composite/Root/CompositeRoot.tsx | 2 +- .../Composite/Root/CompositeRootContext.ts | 25 +++++++++++-------- .../src/Dialog/Root/DialogRootContext.ts | 3 ++- .../src/Field/Root/FieldRootContext.ts | 4 ++- .../mui-base/src/Form/Root/FormRootContext.ts | 4 +++ .../CheckboxItem/MenuCheckboxItem.test.tsx | 2 +- .../CheckboxItem/MenuCheckboxItemContext.ts | 2 +- .../src/Menu/Group/MenuGroupContext.ts | 2 +- .../mui-base/src/Menu/Item/MenuItem.test.tsx | 2 +- .../src/Menu/Popup/MenuPopup.test.tsx | 2 +- .../Menu/Positioner/MenuPositioner.test.tsx | 2 +- .../Menu/Positioner/MenuPositionerContext.ts | 8 +++--- .../Menu/RadioGroup/MenuRadioGroupContext.ts | 8 +++--- .../src/Menu/RadioItem/MenuRadioItem.test.tsx | 2 +- .../Menu/RadioItem/MenuRadioItemContext.ts | 6 ++++- .../mui-base/src/Menu/Root/MenuRootContext.ts | 8 +++--- .../Menu/SubmenuTrigger/SubmenuTrigger.tsx | 2 +- .../src/Menu/Trigger/MenuTrigger.test.tsx | 2 +- .../NumberField/Root/NumberFieldContext.ts | 9 ++++--- .../Positioner/PopoverPositionerContext.ts | 15 +++++++---- .../src/Popover/Root/PopoverRootContext.ts | 11 +++++--- .../PreviewCardPositionerContext.ts | 12 ++++++--- .../PreviewCard/Root/PreviewCardContext.ts | 13 +++++++--- .../src/Progress/Root/ProgressRootContext.tsx | 3 ++- .../src/Radio/Root/RadioRootContext.ts | 11 +++++--- .../RadioGroup/Root/RadioGroupRootContext.ts | 4 +++ .../src/Slider/Root/SliderProvider.tsx | 3 ++- .../src/Switch/Root/SwitchRootContext.ts | 6 ++++- .../mui-base/src/Tabs/Root/TabsRootContext.ts | 6 ++--- .../src/Tabs/TabsList/TabsListContext.ts | 6 ++++- .../Positioner/TooltipPositionerContext.ts | 14 +++++++---- .../src/Tooltip/Root/TooltipRootContext.ts | 7 +++--- 44 files changed, 207 insertions(+), 112 deletions(-) delete mode 100644 packages/mui-base/src/Collapsible/Root/CollapsibleContext.tsx create mode 100644 packages/mui-base/src/Collapsible/Root/CollapsibleRootContext.tsx diff --git a/packages/mui-base/src/AlertDialog/Root/AlertDialogRootContext.ts b/packages/mui-base/src/AlertDialog/Root/AlertDialogRootContext.ts index 2afa9dac6..793897327 100644 --- a/packages/mui-base/src/AlertDialog/Root/AlertDialogRootContext.ts +++ b/packages/mui-base/src/AlertDialog/Root/AlertDialogRootContext.ts @@ -18,10 +18,15 @@ export const AlertDialogRootContext = React.createContext(null); +export const CheckboxRootContext = React.createContext(undefined); + +if (process.env.NODE_ENV !== 'production') { + CheckboxRootContext.displayName = 'CheckboxRootContext'; +} export function useCheckboxRootContext() { const context = React.useContext(CheckboxRootContext); - if (context === null) { - throw new Error( - 'Base UI: Checkbox.Indicator must be placed inside the Checkbox.Root component.', - ); + if (context === undefined) { + throw new Error('Base UI: CheckboxRootContext is not defined.'); } + return context; } diff --git a/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRootContext.ts b/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRootContext.ts index 0c4b461c5..44a5d0d6e 100644 --- a/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRootContext.ts +++ b/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRootContext.ts @@ -9,12 +9,19 @@ export interface CheckboxGroupRootContext { parent: UseCheckboxGroupParent.ReturnValue; } -export const CheckboxGroupRootContext = React.createContext(null); +export const CheckboxGroupRootContext = React.createContext( + undefined, +); + +if (process.env.NODE_ENV !== 'production') { + CheckboxGroupRootContext.displayName = 'CheckboxGroupRootContext'; +} export function useCheckboxGroupRootContext(optional = true) { const context = React.useContext(CheckboxGroupRootContext); - if (context === null && !optional) { + if (context === undefined && !optional) { throw new Error('Base UI: CheckboxGroupRootContext is not defined.'); } + return context; } diff --git a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx index 2fa98e940..f2f8b9a36 100644 --- a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx +++ b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx @@ -3,8 +3,9 @@ import { createRenderer } from '@mui/internal-test-utils'; import * as Collapsible from '@base_ui/react/Collapsible'; import { CollapsibleContext } from '@base_ui/react/Collapsible'; import { describeConformance } from '../../../test/describeConformance'; +import { CollapsibleRootContext } from '../Root/CollapsibleRootContext'; -const contextValue: Collapsible.Root.Context = { +const contextValue: CollapsibleRootContext = { animated: false, contentId: 'ContentId', disabled: false, diff --git a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx index 7635b1db3..3aa9f21a7 100644 --- a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx +++ b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { BaseUIComponentProps } from '../../utils/types'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; -import { useCollapsibleContext } from '../Root/CollapsibleContext'; +import { useCollapsibleContext } from '../Root/CollapsibleRootContext'; import type { CollapsibleRoot } from '../Root/CollapsibleRoot'; import { collapsibleStyleHookMapping } from '../Root/styleHooks'; import { useCollapsibleContent } from './useCollapsibleContent'; diff --git a/packages/mui-base/src/Collapsible/Root/CollapsibleContext.tsx b/packages/mui-base/src/Collapsible/Root/CollapsibleContext.tsx deleted file mode 100644 index befc7670a..000000000 --- a/packages/mui-base/src/Collapsible/Root/CollapsibleContext.tsx +++ /dev/null @@ -1,22 +0,0 @@ -'use client'; -import * as React from 'react'; -import type { CollapsibleRoot } from './CollapsibleRoot'; - -/** - * @ignore - internal component. - */ -export const CollapsibleContext = React.createContext( - undefined, -); - -if (process.env.NODE_ENV !== 'production') { - CollapsibleContext.displayName = 'CollapsibleContext'; -} - -export function useCollapsibleContext() { - const context = React.useContext(CollapsibleContext); - if (context === undefined) { - throw new Error('useCollapsibleContext must be used inside a Collapsible component'); - } - return context; -} diff --git a/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.tsx b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.tsx index 840e3475c..89959db2e 100644 --- a/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.tsx +++ b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.tsx @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import { BaseUIComponentProps } from '../../utils/types'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { useCollapsibleRoot } from './useCollapsibleRoot'; -import { CollapsibleContext } from './CollapsibleContext'; +import { CollapsibleRootContext } from './CollapsibleRootContext'; import { collapsibleStyleHookMapping } from './styleHooks'; /** @@ -50,7 +50,7 @@ const CollapsibleRoot = React.forwardRef(function CollapsibleRoot( [collapsible.open, collapsible.disabled, collapsible.transitionStatus], ); - const contextValue: CollapsibleRoot.Context = React.useMemo( + const contextValue: CollapsibleRootContext = React.useMemo( () => ({ ...collapsible, ownerState, @@ -69,24 +69,22 @@ const CollapsibleRoot = React.forwardRef(function CollapsibleRoot( if (!renderProp) { return ( - {children} + + {children} + ); } return ( - + {renderElement()} - + ); }); export { CollapsibleRoot }; export namespace CollapsibleRoot { - export interface Context extends useCollapsibleRoot.ReturnValue { - ownerState: OwnerState; - } - export interface OwnerState extends Pick {} diff --git a/packages/mui-base/src/Collapsible/Root/CollapsibleRootContext.tsx b/packages/mui-base/src/Collapsible/Root/CollapsibleRootContext.tsx new file mode 100644 index 000000000..2777d2030 --- /dev/null +++ b/packages/mui-base/src/Collapsible/Root/CollapsibleRootContext.tsx @@ -0,0 +1,25 @@ +'use client'; +import * as React from 'react'; +import type { CollapsibleRoot } from './CollapsibleRoot'; +import type { useCollapsibleRoot } from './useCollapsibleRoot'; + +export interface CollapsibleRootContext extends useCollapsibleRoot.ReturnValue { + ownerState: CollapsibleRoot.OwnerState; +} + +export const CollapsibleRootContext = React.createContext( + undefined, +); + +if (process.env.NODE_ENV !== 'production') { + CollapsibleRootContext.displayName = 'CollapsibleRootContext'; +} + +export function useCollapsibleContext() { + const context = React.useContext(CollapsibleRootContext); + if (context === undefined) { + throw new Error('Base UI: CollapsibleRootContext is not defined.'); + } + + return context; +} diff --git a/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx index 13ffe3567..f9d3d6142 100644 --- a/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx +++ b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx @@ -3,8 +3,9 @@ import { createRenderer } from '@mui/internal-test-utils'; import * as Collapsible from '@base_ui/react/Collapsible'; import { CollapsibleContext } from '@base_ui/react/Collapsible'; import { describeConformance } from '../../../test/describeConformance'; +import { CollapsibleRootContext } from '../Root/CollapsibleRootContext'; -const contextValue: Collapsible.Root.Context = { +const contextValue: CollapsibleRootContext = { animated: false, contentId: 'ContentId', disabled: false, diff --git a/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.tsx b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.tsx index f8c410a1b..69260638c 100644 --- a/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.tsx +++ b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { BaseUIComponentProps } from '../../utils/types'; -import { useCollapsibleContext } from '../Root/CollapsibleContext'; +import { useCollapsibleContext } from '../Root/CollapsibleRootContext'; import { CollapsibleRoot } from '../Root/CollapsibleRoot'; import { collapsibleStyleHookMapping } from '../Root/styleHooks'; import { useCollapsibleTrigger } from './useCollapsibleTrigger'; diff --git a/packages/mui-base/src/Collapsible/index.ts b/packages/mui-base/src/Collapsible/index.ts index facd5dee2..31281c5b5 100644 --- a/packages/mui-base/src/Collapsible/index.ts +++ b/packages/mui-base/src/Collapsible/index.ts @@ -1,6 +1,9 @@ export { CollapsibleRoot as Root } from './Root/CollapsibleRoot'; export { useCollapsibleRoot } from './Root/useCollapsibleRoot'; -export { CollapsibleContext, useCollapsibleContext } from './Root/CollapsibleContext'; +export { + CollapsibleRootContext as CollapsibleContext, + useCollapsibleContext, +} from './Root/CollapsibleRootContext'; export { CollapsibleTrigger as Trigger } from './Trigger/CollapsibleTrigger'; export { useCollapsibleTrigger } from './Trigger/useCollapsibleTrigger'; diff --git a/packages/mui-base/src/Composite/List/CompositeListContext.ts b/packages/mui-base/src/Composite/List/CompositeListContext.ts index 07588d903..4f1358525 100644 --- a/packages/mui-base/src/Composite/List/CompositeListContext.ts +++ b/packages/mui-base/src/Composite/List/CompositeListContext.ts @@ -16,6 +16,10 @@ export const CompositeListContext = React.createContext ({ activeIndex, onActiveIndexChange }), [activeIndex, onActiveIndexChange], ); diff --git a/packages/mui-base/src/Composite/Root/CompositeRootContext.ts b/packages/mui-base/src/Composite/Root/CompositeRootContext.ts index 69648f910..7fbfa2405 100644 --- a/packages/mui-base/src/Composite/Root/CompositeRootContext.ts +++ b/packages/mui-base/src/Composite/Root/CompositeRootContext.ts @@ -1,19 +1,24 @@ 'use client'; import * as React from 'react'; -export const CompositeRootContext = React.createContext(null); +export interface CompositeRootContext { + activeIndex: number; + onActiveIndexChange: (index: number) => void; +} + +export const CompositeRootContext = React.createContext( + undefined, +); + +if (process.env.NODE_ENV !== 'production') { + CompositeRootContext.displayName = 'CompositeRootContext'; +} export function useCompositeRootContext() { const context = React.useContext(CompositeRootContext); - if (context === null) { - throw new Error(' must be used within '); + if (context === undefined) { + throw new Error('Base UI: CompositeRootContext is not defined.'); } - return context; -} -export namespace CompositeRootContext { - export interface Value { - activeIndex: number; - onActiveIndexChange: (index: number) => void; - } + return context; } diff --git a/packages/mui-base/src/Dialog/Root/DialogRootContext.ts b/packages/mui-base/src/Dialog/Root/DialogRootContext.ts index ade4da0cd..d0a40e59c 100644 --- a/packages/mui-base/src/Dialog/Root/DialogRootContext.ts +++ b/packages/mui-base/src/Dialog/Root/DialogRootContext.ts @@ -24,7 +24,8 @@ export const DialogRootContext = React.createContext.'); + throw new Error( + 'Base UI: FieldRootContext is not defined. Field components must be placed within .', + ); } return context; diff --git a/packages/mui-base/src/Form/Root/FormRootContext.ts b/packages/mui-base/src/Form/Root/FormRootContext.ts index 8eb9bf6da..35370255d 100644 --- a/packages/mui-base/src/Form/Root/FormRootContext.ts +++ b/packages/mui-base/src/Form/Root/FormRootContext.ts @@ -28,6 +28,10 @@ export const FormRootContext = React.createContext({ onClearErrors: () => {}, }); +if (process.env.NODE_ENV !== 'production') { + FormRootContext.displayName = 'FormRootContext'; +} + export function useFormRootContext() { return React.useContext(FormRootContext); } diff --git a/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx b/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx index 9593007d2..f5556ec08 100644 --- a/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx +++ b/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItem.test.tsx @@ -13,7 +13,7 @@ const testRootContext: MenuRootContext = { getPositionerProps: (p) => ({ ...p }), getTriggerProps: (p) => ({ ...p }), getItemProps: (p) => ({ ...p }), - parentContext: null, + parentContext: undefined, nested: false, triggerElement: null, setTriggerElement: () => {}, diff --git a/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItemContext.ts b/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItemContext.ts index beab8db3f..4746b0144 100644 --- a/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItemContext.ts +++ b/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItemContext.ts @@ -13,7 +13,7 @@ export const MenuCheckboxItemContext = React.createContext ({ ...p }), getTriggerProps: (p) => ({ ...p }), getItemProps: (p) => ({ ...p }), - parentContext: null, + parentContext: undefined, nested: false, triggerElement: null, setTriggerElement: () => {}, diff --git a/packages/mui-base/src/Menu/Popup/MenuPopup.test.tsx b/packages/mui-base/src/Menu/Popup/MenuPopup.test.tsx index 64951f945..2cfffd2be 100644 --- a/packages/mui-base/src/Menu/Popup/MenuPopup.test.tsx +++ b/packages/mui-base/src/Menu/Popup/MenuPopup.test.tsx @@ -10,7 +10,7 @@ const testRootContext: MenuRootContext = { getPositionerProps: (p) => ({ ...p }), getTriggerProps: (p) => ({ ...p }), getItemProps: (p) => ({ ...p }), - parentContext: null, + parentContext: undefined, nested: false, triggerElement: null, setTriggerElement: () => {}, diff --git a/packages/mui-base/src/Menu/Positioner/MenuPositioner.test.tsx b/packages/mui-base/src/Menu/Positioner/MenuPositioner.test.tsx index 6e9664d35..d61c2bce6 100644 --- a/packages/mui-base/src/Menu/Positioner/MenuPositioner.test.tsx +++ b/packages/mui-base/src/Menu/Positioner/MenuPositioner.test.tsx @@ -12,7 +12,7 @@ const testRootContext: MenuRootContext = { getPositionerProps: (p) => ({ ...p }), getTriggerProps: (p) => ({ ...p }), getItemProps: (p) => ({ ...p }), - parentContext: null, + parentContext: undefined, nested: false, triggerElement: null, setTriggerElement: () => {}, diff --git a/packages/mui-base/src/Menu/Positioner/MenuPositionerContext.ts b/packages/mui-base/src/Menu/Positioner/MenuPositionerContext.ts index 8e3ad8a1c..8618c608b 100644 --- a/packages/mui-base/src/Menu/Positioner/MenuPositionerContext.ts +++ b/packages/mui-base/src/Menu/Positioner/MenuPositionerContext.ts @@ -16,7 +16,9 @@ export interface MenuPositionerContext { arrowStyles: React.CSSProperties; } -export const MenuPositionerContext = React.createContext(null); +export const MenuPositionerContext = React.createContext( + undefined, +); if (process.env.NODE_ENV !== 'production') { MenuPositionerContext.displayName = 'MenuPositionerContext'; @@ -24,8 +26,8 @@ if (process.env.NODE_ENV !== 'production') { export function useMenuPositionerContext() { const context = React.useContext(MenuPositionerContext); - if (context === null) { - throw new Error(' must be used within the component'); + if (context === undefined) { + throw new Error('Base UI: MenuPositionerContext is not defined.'); } return context; } diff --git a/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroupContext.ts b/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroupContext.ts index 10ac8dc81..4691c356a 100644 --- a/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroupContext.ts +++ b/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroupContext.ts @@ -5,7 +5,9 @@ export interface MenuRadioGroupContext { setValue: (newValue: any, event: Event) => void; } -export const MenuRadioGroupContext = React.createContext(null); +export const MenuRadioGroupContext = React.createContext( + undefined, +); if (process.env.NODE_ENV !== 'production') { MenuRadioGroupContext.displayName = 'MenuRadioGroupContext'; @@ -13,8 +15,8 @@ if (process.env.NODE_ENV !== 'production') { export function useMenuRadioGroupContext() { const context = React.useContext(MenuRadioGroupContext); - if (context === null) { - throw new Error('useMenuRadioGroupContext must be used within a MenuRadioGroup'); + if (context === undefined) { + throw new Error('Base UI: MenuRadioGroupContext is not defined.'); } return context; diff --git a/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.test.tsx b/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.test.tsx index 7819cbc12..2217efe78 100644 --- a/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.test.tsx +++ b/packages/mui-base/src/Menu/RadioItem/MenuRadioItem.test.tsx @@ -14,7 +14,7 @@ const testRootContext: MenuRootContext = { getPositionerProps: (p) => ({ ...p }), getTriggerProps: (p) => ({ ...p }), getItemProps: (p) => ({ ...p }), - parentContext: null, + parentContext: undefined, nested: false, triggerElement: null, setTriggerElement: () => {}, diff --git a/packages/mui-base/src/Menu/RadioItem/MenuRadioItemContext.ts b/packages/mui-base/src/Menu/RadioItem/MenuRadioItemContext.ts index 760b3618d..866927b6f 100644 --- a/packages/mui-base/src/Menu/RadioItem/MenuRadioItemContext.ts +++ b/packages/mui-base/src/Menu/RadioItem/MenuRadioItemContext.ts @@ -10,10 +10,14 @@ export const MenuRadioItemContext = React.createContext>; typingRef: React.RefObject; } -export const MenuRootContext = React.createContext(null); +export const MenuRootContext = React.createContext(undefined); if (process.env.NODE_ENV !== 'production') { MenuRootContext.displayName = 'MenuRootContext'; } function useMenuRootContext(optional?: false): MenuRootContext; -function useMenuRootContext(optional: true): MenuRootContext | null; +function useMenuRootContext(optional: true): MenuRootContext | undefined; function useMenuRootContext(optional?: boolean) { const context = React.useContext(MenuRootContext); - if (context === null && !optional) { + if (context === undefined && !optional) { throw new Error('Base UI: MenuRootContext is not defined.'); } diff --git a/packages/mui-base/src/Menu/SubmenuTrigger/SubmenuTrigger.tsx b/packages/mui-base/src/Menu/SubmenuTrigger/SubmenuTrigger.tsx index c9a8e162f..874432890 100644 --- a/packages/mui-base/src/Menu/SubmenuTrigger/SubmenuTrigger.tsx +++ b/packages/mui-base/src/Menu/SubmenuTrigger/SubmenuTrigger.tsx @@ -36,7 +36,7 @@ const SubmenuTrigger = React.forwardRef(function SubmenuTriggerComponent( typingRef, } = useMenuRootContext(); - if (parentContext === null) { + if (parentContext === undefined) { throw new Error('Base UI: ItemTrigger must be placed in a nested Menu.'); } diff --git a/packages/mui-base/src/Menu/Trigger/MenuTrigger.test.tsx b/packages/mui-base/src/Menu/Trigger/MenuTrigger.test.tsx index 16b250010..48a7da22e 100644 --- a/packages/mui-base/src/Menu/Trigger/MenuTrigger.test.tsx +++ b/packages/mui-base/src/Menu/Trigger/MenuTrigger.test.tsx @@ -12,7 +12,7 @@ const testRootContext: MenuRootContext = { getPositionerProps: (p) => ({ ...p }), getTriggerProps: (p) => ({ ...p }), getItemProps: (p) => ({ ...p }), - parentContext: null, + parentContext: undefined, nested: false, triggerElement: null, setTriggerElement: () => {}, diff --git a/packages/mui-base/src/NumberField/Root/NumberFieldContext.ts b/packages/mui-base/src/NumberField/Root/NumberFieldContext.ts index 3dbd2becb..ad3344e00 100644 --- a/packages/mui-base/src/NumberField/Root/NumberFieldContext.ts +++ b/packages/mui-base/src/NumberField/Root/NumberFieldContext.ts @@ -7,7 +7,7 @@ export interface NumberFieldContext extends UseNumberFieldRoot.ReturnValue { ownerState: NumberFieldRoot.OwnerState; } -export const NumberFieldContext = React.createContext(null); +export const NumberFieldContext = React.createContext(undefined); if (process.env.NODE_ENV !== 'production') { NumberFieldContext.displayName = 'NumberFieldContext'; @@ -17,8 +17,11 @@ type Part = 'Group' | 'Input' | 'Increment' | 'Decrement' | 'ScrubArea' | 'Scrub export function useNumberFieldContext(part: Part) { const context = React.useContext(NumberFieldContext); - if (context === null) { - throw new Error(`Base UI: NumberField${part} is not placed inside the NumberField component.`); + if (context === undefined) { + throw new Error( + `Base UI: NumberFieldContext is not defined. NumberField${part} is not placed inside the NumberField component.`, + ); } + return context; } diff --git a/packages/mui-base/src/Popover/Positioner/PopoverPositionerContext.ts b/packages/mui-base/src/Popover/Positioner/PopoverPositionerContext.ts index 073694c62..55977a82e 100644 --- a/packages/mui-base/src/Popover/Positioner/PopoverPositionerContext.ts +++ b/packages/mui-base/src/Popover/Positioner/PopoverPositionerContext.ts @@ -10,14 +10,19 @@ export interface PopoverPositionerContext { arrowStyles: React.CSSProperties; } -export const PopoverPositionerContext = React.createContext(null); +export const PopoverPositionerContext = React.createContext( + undefined, +); + +if (process.env.NODE_ENV !== 'production') { + PopoverPositionerContext.displayName = 'PopoverPositionerContext'; +} export function usePopoverPositionerContext() { const context = React.useContext(PopoverPositionerContext); - if (context === null) { - throw new Error( - ' and must be used within the component', - ); + if (context === undefined) { + throw new Error('Base UI: PopoverPositionerContext is not defined.'); } + return context; } diff --git a/packages/mui-base/src/Popover/Root/PopoverRootContext.ts b/packages/mui-base/src/Popover/Root/PopoverRootContext.ts index 3e696ad04..0cc904a53 100644 --- a/packages/mui-base/src/Popover/Root/PopoverRootContext.ts +++ b/packages/mui-base/src/Popover/Root/PopoverRootContext.ts @@ -29,12 +29,17 @@ export interface PopoverRootContext { getRootPopupProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps; } -export const PopoverRootContext = React.createContext(null); +export const PopoverRootContext = React.createContext(undefined); + +if (process.env.NODE_ENV !== 'production') { + PopoverRootContext.displayName = 'PopoverRootContext'; +} export function usePopoverRootContext() { const context = React.useContext(PopoverRootContext); - if (context === null) { - throw new Error('Popover components must be used within the component'); + if (context === undefined) { + throw new Error('Base UI: PopoverRootContext is not defined.'); } + return context; } diff --git a/packages/mui-base/src/PreviewCard/Positioner/PreviewCardPositionerContext.ts b/packages/mui-base/src/PreviewCard/Positioner/PreviewCardPositionerContext.ts index 842819d6e..3d096866a 100644 --- a/packages/mui-base/src/PreviewCard/Positioner/PreviewCardPositionerContext.ts +++ b/packages/mui-base/src/PreviewCard/Positioner/PreviewCardPositionerContext.ts @@ -10,15 +10,21 @@ export interface PreviewCardPositionerContext { arrowStyles: React.CSSProperties; } -export const PreviewCardPositionerContext = - React.createContext(null); +export const PreviewCardPositionerContext = React.createContext< + PreviewCardPositionerContext | undefined +>(undefined); + +if (process.env.NODE_ENV !== 'production') { + PreviewCardPositionerContext.displayName = 'PreviewCardPositionerContext'; +} export function usePreviewCardPositionerContext() { const context = React.useContext(PreviewCardPositionerContext); - if (context === null) { + if (context === undefined) { throw new Error( 'Base UI: and must be used within the component', ); } + return context; } diff --git a/packages/mui-base/src/PreviewCard/Root/PreviewCardContext.ts b/packages/mui-base/src/PreviewCard/Root/PreviewCardContext.ts index f3e6b1291..7b9be510e 100644 --- a/packages/mui-base/src/PreviewCard/Root/PreviewCardContext.ts +++ b/packages/mui-base/src/PreviewCard/Root/PreviewCardContext.ts @@ -23,12 +23,19 @@ export interface PreviewCardRootContext { popupRef: React.RefObject; } -export const PreviewCardRootContext = React.createContext(null); +export const PreviewCardRootContext = React.createContext( + undefined, +); + +if (process.env.NODE_ENV !== 'production') { + PreviewCardRootContext.displayName = 'PreviewCardRootContext'; +} export function usePreviewCardRootContext() { const context = React.useContext(PreviewCardRootContext); - if (context === null) { - throw new Error('PreviewCard components must be used within the component'); + if (context === undefined) { + throw new Error('Base UI: PreviewCardRootContext is not defined.'); } + return context; } diff --git a/packages/mui-base/src/Progress/Root/ProgressRootContext.tsx b/packages/mui-base/src/Progress/Root/ProgressRootContext.tsx index f48eb17bc..45e1a5d4e 100644 --- a/packages/mui-base/src/Progress/Root/ProgressRootContext.tsx +++ b/packages/mui-base/src/Progress/Root/ProgressRootContext.tsx @@ -19,7 +19,8 @@ if (process.env.NODE_ENV !== 'production') { export function useProgressRootContext() { const context = React.useContext(ProgressRootContext); if (context === undefined) { - throw new Error('useProgressContext must be used inside a Progress component'); + throw new Error('Base UI: ProgressRootContext is not defined.'); } + return context; } diff --git a/packages/mui-base/src/Radio/Root/RadioRootContext.ts b/packages/mui-base/src/Radio/Root/RadioRootContext.ts index 512fd2fed..9b017f201 100644 --- a/packages/mui-base/src/Radio/Root/RadioRootContext.ts +++ b/packages/mui-base/src/Radio/Root/RadioRootContext.ts @@ -8,12 +8,17 @@ export interface RadioRootContext { required: boolean; } -export const RadioRootContext = React.createContext(null); +export const RadioRootContext = React.createContext(undefined); + +if (process.env.NODE_ENV !== 'production') { + RadioRootContext.displayName = 'RadioRootContext'; +} export function useRadioRootContext() { const value = React.useContext(RadioRootContext); - if (value === null) { - throw new Error('Base UI: must be used within '); + if (value === undefined) { + throw new Error('Base UI: RadioRootContext is not defined.'); } + return value; } diff --git a/packages/mui-base/src/RadioGroup/Root/RadioGroupRootContext.ts b/packages/mui-base/src/RadioGroup/Root/RadioGroupRootContext.ts index 2aef2556e..73fe30970 100644 --- a/packages/mui-base/src/RadioGroup/Root/RadioGroupRootContext.ts +++ b/packages/mui-base/src/RadioGroup/Root/RadioGroupRootContext.ts @@ -24,6 +24,10 @@ export const RadioGroupRootContext = React.createContext( setTouched: NOOP, }); +if (process.env.NODE_ENV !== 'production') { + RadioGroupRootContext.displayName = 'RadioGroupRootContext'; +} + export function useRadioGroupRootContext() { return React.useContext(RadioGroupRootContext); } diff --git a/packages/mui-base/src/Slider/Root/SliderProvider.tsx b/packages/mui-base/src/Slider/Root/SliderProvider.tsx index 12444b470..39caadcd6 100644 --- a/packages/mui-base/src/Slider/Root/SliderProvider.tsx +++ b/packages/mui-base/src/Slider/Root/SliderProvider.tsx @@ -18,8 +18,9 @@ if (process.env.NODE_ENV !== 'production') { export function useSliderContext() { const context = React.useContext(SliderContext); if (context === undefined) { - throw new Error('useSliderContext must be used inside a Slider component'); + throw new Error('Base UI: SliderContext is not defined.'); } + return context; } diff --git a/packages/mui-base/src/Switch/Root/SwitchRootContext.ts b/packages/mui-base/src/Switch/Root/SwitchRootContext.ts index 3804b912d..26bac6d43 100644 --- a/packages/mui-base/src/Switch/Root/SwitchRootContext.ts +++ b/packages/mui-base/src/Switch/Root/SwitchRootContext.ts @@ -5,10 +5,14 @@ export type SwitchRootContext = SwitchRoot.OwnerState; export const SwitchRootContext = React.createContext(undefined); +if (process.env.NODE_ENV !== 'production') { + SwitchRootContext.displayName = 'SwitchRootContext'; +} + export function useSwitchRootContext() { const context = React.useContext(SwitchRootContext); if (context === undefined) { - throw new Error('useSwitchRootContext must be used within a SwitchRootProvider'); + throw new Error('Base UI: SwitchRootContext is not defined.'); } return context; diff --git a/packages/mui-base/src/Tabs/Root/TabsRootContext.ts b/packages/mui-base/src/Tabs/Root/TabsRootContext.ts index ea4d9101c..71a78e57f 100644 --- a/packages/mui-base/src/Tabs/Root/TabsRootContext.ts +++ b/packages/mui-base/src/Tabs/Root/TabsRootContext.ts @@ -46,7 +46,7 @@ export interface TabsRootContext { /** * @ignore - internal component. */ -const TabsRootContext = React.createContext(null); +const TabsRootContext = React.createContext(undefined); if (process.env.NODE_ENV !== 'production') { TabsRootContext.displayName = 'TabsRootContext'; @@ -54,8 +54,8 @@ if (process.env.NODE_ENV !== 'production') { export function useTabsRootContext() { const context = React.useContext(TabsRootContext); - if (context == null) { - throw new Error('Base UI: No TabsRootContext provided'); + if (context === undefined) { + throw new Error('Base UI: TabsRootContext is not defined.'); } return context; diff --git a/packages/mui-base/src/Tabs/TabsList/TabsListContext.ts b/packages/mui-base/src/Tabs/TabsList/TabsListContext.ts index 9b2833529..a3d58b10a 100644 --- a/packages/mui-base/src/Tabs/TabsList/TabsListContext.ts +++ b/packages/mui-base/src/Tabs/TabsList/TabsListContext.ts @@ -9,10 +9,14 @@ export interface TabsListContext { export const TabsListContext = React.createContext(undefined); +if (process.env.NODE_ENV !== 'production') { + TabsListContext.displayName = 'TabsListContext'; +} + export function useTabsListContext() { const context = React.useContext(TabsListContext); if (context === undefined) { - throw new Error('useTabsListContext must be used within a TabsList component'); + throw new Error('Base UI: TabsListContext is not defined.'); } return context; diff --git a/packages/mui-base/src/Tooltip/Positioner/TooltipPositionerContext.ts b/packages/mui-base/src/Tooltip/Positioner/TooltipPositionerContext.ts index 6792c3cb5..06bbdebbf 100644 --- a/packages/mui-base/src/Tooltip/Positioner/TooltipPositionerContext.ts +++ b/packages/mui-base/src/Tooltip/Positioner/TooltipPositionerContext.ts @@ -11,14 +11,18 @@ export interface TooltipPositionerContext { arrowStyles: React.CSSProperties; } -export const TooltipPositionerContext = React.createContext(null); +export const TooltipPositionerContext = React.createContext( + undefined, +); + +if (process.env.NODE_ENV !== 'production') { + TooltipPositionerContext.displayName = 'TooltipPositionerContext'; +} export function useTooltipPositionerContext() { const context = React.useContext(TooltipPositionerContext); - if (context === null) { - throw new Error( - ' and must be used within the component', - ); + if (context === undefined) { + throw new Error('Base UI: TooltipPositionerContext is not defined.'); } return context; } diff --git a/packages/mui-base/src/Tooltip/Root/TooltipRootContext.ts b/packages/mui-base/src/Tooltip/Root/TooltipRootContext.ts index b8e57e7f2..dd1da594b 100644 --- a/packages/mui-base/src/Tooltip/Root/TooltipRootContext.ts +++ b/packages/mui-base/src/Tooltip/Root/TooltipRootContext.ts @@ -25,12 +25,13 @@ export interface TooltipRootContext { transitionStatus: TransitionStatus; } -export const TooltipRootContext = React.createContext(null); +export const TooltipRootContext = React.createContext(undefined); export function useTooltipRootContext() { const context = React.useContext(TooltipRootContext); - if (context === null) { - throw new Error('Tooltip components must be used within the component'); + if (context === undefined) { + throw new Error('Base UI: TooltipRootContext is not defined.'); } + return context; } From 6c70ec917c2d5b97e740622f7bf19264bb6525be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Mon, 14 Oct 2024 08:56:53 +0200 Subject: [PATCH 2/2] Update error messages --- .../Root/AlertDialogRootContext.ts | 4 ++- .../src/Checkbox/Root/CheckboxRootContext.ts | 4 ++- .../Root/CheckboxGroupRootContext.ts | 4 ++- ...tContext.tsx => CollapsibleRootContext.ts} | 4 ++- .../Composite/Root/CompositeRootContext.ts | 4 ++- .../src/Dialog/Root/DialogRootContext.ts | 4 ++- .../src/Field/Root/FieldRootContext.ts | 2 +- .../CheckboxItem/MenuCheckboxItemContext.ts | 4 ++- .../Menu/Positioner/MenuPositionerContext.ts | 4 ++- .../Menu/RadioGroup/MenuRadioGroupContext.ts | 4 ++- .../Menu/RadioItem/MenuRadioItemContext.ts | 4 ++- .../mui-base/src/Menu/Root/MenuRootContext.ts | 4 ++- .../Decrement/NumberFieldDecrement.test.tsx | 8 +++--- .../Decrement/NumberFieldDecrement.tsx | 4 +-- .../Group/NumberFieldGroup.test.tsx | 8 +++--- .../NumberField/Group/NumberFieldGroup.tsx | 4 +-- .../Increment/NumberFieldIncrement.test.tsx | 8 +++--- .../Increment/NumberFieldIncrement.tsx | 4 +-- .../Input/NumberFieldInput.test.tsx | 8 +++--- .../NumberField/Input/NumberFieldInput.tsx | 4 +-- .../NumberField/Root/NumberFieldContext.ts | 27 ------------------- .../src/NumberField/Root/NumberFieldRoot.tsx | 6 ++--- .../Root/NumberFieldRootContext.ts | 27 +++++++++++++++++++ .../ScrubArea/NumberFieldScrubArea.test.tsx | 8 +++--- .../ScrubArea/NumberFieldScrubArea.tsx | 4 +-- .../NumberFieldScrubAreaCursor.test.tsx | 8 +++--- .../NumberFieldScrubAreaCursor.tsx | 4 +-- .../Positioner/PopoverPositionerContext.ts | 4 ++- .../src/Popover/Root/PopoverRootContext.ts | 4 ++- .../PreviewCard/Root/PreviewCardContext.ts | 4 ++- .../src/Progress/Root/ProgressRootContext.tsx | 4 ++- .../src/Radio/Root/RadioRootContext.ts | 4 ++- .../src/Slider/Root/SliderProvider.tsx | 4 ++- .../src/Switch/Root/SwitchRootContext.ts | 4 ++- .../mui-base/src/Tabs/Root/TabsRootContext.ts | 4 ++- .../src/Tabs/TabsList/TabsListContext.ts | 4 ++- .../Positioner/TooltipPositionerContext.ts | 4 ++- .../src/Tooltip/Root/TooltipRootContext.ts | 4 ++- 38 files changed, 139 insertions(+), 83 deletions(-) rename packages/mui-base/src/Collapsible/Root/{CollapsibleRootContext.tsx => CollapsibleRootContext.ts} (82%) delete mode 100644 packages/mui-base/src/NumberField/Root/NumberFieldContext.ts create mode 100644 packages/mui-base/src/NumberField/Root/NumberFieldRootContext.ts diff --git a/packages/mui-base/src/AlertDialog/Root/AlertDialogRootContext.ts b/packages/mui-base/src/AlertDialog/Root/AlertDialogRootContext.ts index 793897327..f58c9a47c 100644 --- a/packages/mui-base/src/AlertDialog/Root/AlertDialogRootContext.ts +++ b/packages/mui-base/src/AlertDialog/Root/AlertDialogRootContext.ts @@ -25,7 +25,9 @@ if (process.env.NODE_ENV !== 'production') { export function useAlertDialogRootContext() { const context = React.useContext(AlertDialogRootContext); if (context === undefined) { - throw new Error('Base UI: AlertDialogRootContext is not defined.'); + throw new Error( + 'Base UI: AlertDialogRootContext is missing. AlertDialog parts must be placed within .', + ); } return context; diff --git a/packages/mui-base/src/Checkbox/Root/CheckboxRootContext.ts b/packages/mui-base/src/Checkbox/Root/CheckboxRootContext.ts index 0410769a6..88bb016f5 100644 --- a/packages/mui-base/src/Checkbox/Root/CheckboxRootContext.ts +++ b/packages/mui-base/src/Checkbox/Root/CheckboxRootContext.ts @@ -13,7 +13,9 @@ if (process.env.NODE_ENV !== 'production') { export function useCheckboxRootContext() { const context = React.useContext(CheckboxRootContext); if (context === undefined) { - throw new Error('Base UI: CheckboxRootContext is not defined.'); + throw new Error( + 'Base UI: CheckboxRootContext is missing. Checkbox parts must be placed within .', + ); } return context; diff --git a/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRootContext.ts b/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRootContext.ts index 44a5d0d6e..7e9295ace 100644 --- a/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRootContext.ts +++ b/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRootContext.ts @@ -20,7 +20,9 @@ if (process.env.NODE_ENV !== 'production') { export function useCheckboxGroupRootContext(optional = true) { const context = React.useContext(CheckboxGroupRootContext); if (context === undefined && !optional) { - throw new Error('Base UI: CheckboxGroupRootContext is not defined.'); + throw new Error( + 'Base UI: CheckboxGroupRootContext is missing. CheckboxGroup parts must be placed within .', + ); } return context; diff --git a/packages/mui-base/src/Collapsible/Root/CollapsibleRootContext.tsx b/packages/mui-base/src/Collapsible/Root/CollapsibleRootContext.ts similarity index 82% rename from packages/mui-base/src/Collapsible/Root/CollapsibleRootContext.tsx rename to packages/mui-base/src/Collapsible/Root/CollapsibleRootContext.ts index 2777d2030..9fcc9bd7d 100644 --- a/packages/mui-base/src/Collapsible/Root/CollapsibleRootContext.tsx +++ b/packages/mui-base/src/Collapsible/Root/CollapsibleRootContext.ts @@ -18,7 +18,9 @@ if (process.env.NODE_ENV !== 'production') { export function useCollapsibleContext() { const context = React.useContext(CollapsibleRootContext); if (context === undefined) { - throw new Error('Base UI: CollapsibleRootContext is not defined.'); + throw new Error( + 'Base UI: CollapsibleRootContext is missing. Collapsible parts must be placed within .', + ); } return context; diff --git a/packages/mui-base/src/Composite/Root/CompositeRootContext.ts b/packages/mui-base/src/Composite/Root/CompositeRootContext.ts index 7fbfa2405..f92f119c9 100644 --- a/packages/mui-base/src/Composite/Root/CompositeRootContext.ts +++ b/packages/mui-base/src/Composite/Root/CompositeRootContext.ts @@ -17,7 +17,9 @@ if (process.env.NODE_ENV !== 'production') { export function useCompositeRootContext() { const context = React.useContext(CompositeRootContext); if (context === undefined) { - throw new Error('Base UI: CompositeRootContext is not defined.'); + throw new Error( + 'Base UI: CompositeRootContext is missing. Composite parts must be placed within .', + ); } return context; diff --git a/packages/mui-base/src/Dialog/Root/DialogRootContext.ts b/packages/mui-base/src/Dialog/Root/DialogRootContext.ts index d0a40e59c..4514bc492 100644 --- a/packages/mui-base/src/Dialog/Root/DialogRootContext.ts +++ b/packages/mui-base/src/Dialog/Root/DialogRootContext.ts @@ -24,7 +24,9 @@ export const DialogRootContext = React.createContext.', + ); } return context; diff --git a/packages/mui-base/src/Field/Root/FieldRootContext.ts b/packages/mui-base/src/Field/Root/FieldRootContext.ts index 280d5d2a3..9ea94220b 100644 --- a/packages/mui-base/src/Field/Root/FieldRootContext.ts +++ b/packages/mui-base/src/Field/Root/FieldRootContext.ts @@ -71,7 +71,7 @@ export function useFieldRootContext(optional = true) { if (context.setControlId === NOOP && !optional) { throw new Error( - 'Base UI: FieldRootContext is not defined. Field components must be placed within .', + 'Base UI: FieldRootContext is missing. Field parts must be placed within .', ); } diff --git a/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItemContext.ts b/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItemContext.ts index 4746b0144..9d2f631fe 100644 --- a/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItemContext.ts +++ b/packages/mui-base/src/Menu/CheckboxItem/MenuCheckboxItemContext.ts @@ -13,7 +13,9 @@ export const MenuCheckboxItemContext = React.createContext.', + ); } return context; diff --git a/packages/mui-base/src/Menu/Positioner/MenuPositionerContext.ts b/packages/mui-base/src/Menu/Positioner/MenuPositionerContext.ts index 8618c608b..fa72df76e 100644 --- a/packages/mui-base/src/Menu/Positioner/MenuPositionerContext.ts +++ b/packages/mui-base/src/Menu/Positioner/MenuPositionerContext.ts @@ -27,7 +27,9 @@ if (process.env.NODE_ENV !== 'production') { export function useMenuPositionerContext() { const context = React.useContext(MenuPositionerContext); if (context === undefined) { - throw new Error('Base UI: MenuPositionerContext is not defined.'); + throw new Error( + 'Base UI: MenuPositionerContext is missing. MenuPositioner parts must be placed within .', + ); } return context; } diff --git a/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroupContext.ts b/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroupContext.ts index 4691c356a..1b8332f8b 100644 --- a/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroupContext.ts +++ b/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroupContext.ts @@ -16,7 +16,9 @@ if (process.env.NODE_ENV !== 'production') { export function useMenuRadioGroupContext() { const context = React.useContext(MenuRadioGroupContext); if (context === undefined) { - throw new Error('Base UI: MenuRadioGroupContext is not defined.'); + throw new Error( + 'Base UI: MenuRadioGroupContext is missing. MenuRadioGroup parts must be placed within .', + ); } return context; diff --git a/packages/mui-base/src/Menu/RadioItem/MenuRadioItemContext.ts b/packages/mui-base/src/Menu/RadioItem/MenuRadioItemContext.ts index 866927b6f..f40dc4894 100644 --- a/packages/mui-base/src/Menu/RadioItem/MenuRadioItemContext.ts +++ b/packages/mui-base/src/Menu/RadioItem/MenuRadioItemContext.ts @@ -17,7 +17,9 @@ if (process.env.NODE_ENV !== 'production') { export function useMenuRadioItemContext() { const context = React.useContext(MenuRadioItemContext); if (context === undefined) { - throw new Error('Base UI: MenuRadioItemContext is not defined.'); + throw new Error( + 'Base UI: MenuRadioItemContext is missing. MenuRadioItem parts must be placed within .', + ); } return context; diff --git a/packages/mui-base/src/Menu/Root/MenuRootContext.ts b/packages/mui-base/src/Menu/Root/MenuRootContext.ts index 510fe81fd..d00e0f939 100644 --- a/packages/mui-base/src/Menu/Root/MenuRootContext.ts +++ b/packages/mui-base/src/Menu/Root/MenuRootContext.ts @@ -22,7 +22,9 @@ function useMenuRootContext(optional: true): MenuRootContext | undefined; function useMenuRootContext(optional?: boolean) { const context = React.useContext(MenuRootContext); if (context === undefined && !optional) { - throw new Error('Base UI: MenuRootContext is not defined.'); + throw new Error( + 'Base UI: MenuRootContext is missing. Menu parts must be placed within .', + ); } return context; diff --git a/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.test.tsx b/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.test.tsx index 9b9811abc..3f03e2375 100644 --- a/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.test.tsx +++ b/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.test.tsx @@ -4,7 +4,7 @@ import { screen, fireEvent } from '@mui/internal-test-utils'; import * as NumberField from '@base_ui/react/NumberField'; import { createRenderer, describeConformance } from '#test-utils'; import { CHANGE_VALUE_TICK_DELAY, START_AUTO_CHANGE_DELAY } from '../utils/constants'; -import { NumberFieldContext } from '../Root/NumberFieldContext'; +import { NumberFieldRootContext } from '../Root/NumberFieldRootContext'; const testContext = { getDecrementButtonProps: (externalProps) => externalProps, @@ -15,7 +15,7 @@ const testContext = { invalid: false, readOnly: false, }, -} as NumberFieldContext; +} as NumberFieldRootContext; describe('', () => { const { render, clock } = createRenderer(); @@ -24,7 +24,9 @@ describe('', () => { refInstanceof: window.HTMLButtonElement, render(node) { return render( - {node}, + + {node} + , ); }, })); diff --git a/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.tsx b/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.tsx index 4d9c71cf1..049500f80 100644 --- a/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.tsx +++ b/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.tsx @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { useNumberFieldContext } from '../Root/NumberFieldContext'; +import { useNumberFieldRootContext } from '../Root/NumberFieldRootContext'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import type { NumberFieldRoot } from '../Root/NumberFieldRoot'; import { BaseUIComponentProps } from '../../utils/types'; @@ -23,7 +23,7 @@ const NumberFieldDecrement = React.forwardRef(function NumberFieldDecrement( ) { const { render, className, ...otherProps } = props; - const { getDecrementButtonProps, ownerState } = useNumberFieldContext('Decrement'); + const { getDecrementButtonProps, ownerState } = useNumberFieldRootContext(); const { renderElement } = useComponentRenderer({ propGetter: getDecrementButtonProps, diff --git a/packages/mui-base/src/NumberField/Group/NumberFieldGroup.test.tsx b/packages/mui-base/src/NumberField/Group/NumberFieldGroup.test.tsx index 140c66865..627a328a7 100644 --- a/packages/mui-base/src/NumberField/Group/NumberFieldGroup.test.tsx +++ b/packages/mui-base/src/NumberField/Group/NumberFieldGroup.test.tsx @@ -3,7 +3,7 @@ import { expect } from 'chai'; import { screen } from '@mui/internal-test-utils'; import * as NumberField from '@base_ui/react/NumberField'; import { createRenderer, describeConformance } from '#test-utils'; -import { NumberFieldContext } from '../Root/NumberFieldContext'; +import { NumberFieldRootContext } from '../Root/NumberFieldRootContext'; const testContext = { getGroupProps: (externalProps) => ({ role: 'group', ...externalProps }), @@ -14,7 +14,7 @@ const testContext = { invalid: false, readOnly: false, }, -} as NumberFieldContext; +} as NumberFieldRootContext; describe('', () => { const { render } = createRenderer(); @@ -23,7 +23,9 @@ describe('', () => { refInstanceof: window.HTMLDivElement, render(node) { return render( - {node}, + + {node} + , ); }, })); diff --git a/packages/mui-base/src/NumberField/Group/NumberFieldGroup.tsx b/packages/mui-base/src/NumberField/Group/NumberFieldGroup.tsx index e35913dd9..28d0f2589 100644 --- a/packages/mui-base/src/NumberField/Group/NumberFieldGroup.tsx +++ b/packages/mui-base/src/NumberField/Group/NumberFieldGroup.tsx @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { useNumberFieldContext } from '../Root/NumberFieldContext'; +import { useNumberFieldRootContext } from '../Root/NumberFieldRootContext'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import type { NumberFieldRoot } from '../Root/NumberFieldRoot'; import type { BaseUIComponentProps } from '../../utils/types'; @@ -23,7 +23,7 @@ const NumberFieldGroup = React.forwardRef(function NumberFieldGroup( ) { const { render, className, ...otherProps } = props; - const { getGroupProps, ownerState } = useNumberFieldContext('Group'); + const { getGroupProps, ownerState } = useNumberFieldRootContext(); const { renderElement } = useComponentRenderer({ propGetter: getGroupProps, diff --git a/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.test.tsx b/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.test.tsx index e2153caa9..b91b0634f 100644 --- a/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.test.tsx +++ b/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.test.tsx @@ -4,7 +4,7 @@ import { screen, fireEvent } from '@mui/internal-test-utils'; import * as NumberField from '@base_ui/react/NumberField'; import { createRenderer, describeConformance } from '#test-utils'; import { CHANGE_VALUE_TICK_DELAY, START_AUTO_CHANGE_DELAY } from '../utils/constants'; -import { NumberFieldContext } from '../Root/NumberFieldContext'; +import { NumberFieldRootContext } from '../Root/NumberFieldRootContext'; const testContext = { getIncrementButtonProps: (externalProps) => externalProps, @@ -15,7 +15,7 @@ const testContext = { invalid: false, readOnly: false, }, -} as NumberFieldContext; +} as NumberFieldRootContext; describe('', () => { const { render, clock } = createRenderer(); @@ -24,7 +24,9 @@ describe('', () => { refInstanceof: window.HTMLButtonElement, render(node) { return render( - {node}, + + {node} + , ); }, })); diff --git a/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.tsx b/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.tsx index 6974a4860..addb79544 100644 --- a/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.tsx +++ b/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.tsx @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { useNumberFieldContext } from '../Root/NumberFieldContext'; +import { useNumberFieldRootContext } from '../Root/NumberFieldRootContext'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import type { NumberFieldRoot } from '../Root/NumberFieldRoot'; import type { BaseUIComponentProps } from '../../utils/types'; @@ -23,7 +23,7 @@ const NumberFieldIncrement = React.forwardRef(function NumberFieldIncrement( ) { const { render, className, ...otherProps } = props; - const { getIncrementButtonProps, ownerState } = useNumberFieldContext('Increment'); + const { getIncrementButtonProps, ownerState } = useNumberFieldRootContext(); const { renderElement } = useComponentRenderer({ propGetter: getIncrementButtonProps, diff --git a/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx b/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx index b9c97f093..be1320601 100644 --- a/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx +++ b/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx @@ -3,7 +3,7 @@ import { expect } from 'chai'; import { act, screen, fireEvent } from '@mui/internal-test-utils'; import * as NumberField from '@base_ui/react/NumberField'; import { createRenderer, describeConformance } from '#test-utils'; -import { NumberFieldContext } from '../Root/NumberFieldContext'; +import { NumberFieldRootContext } from '../Root/NumberFieldRootContext'; const testContext = { getInputProps: (externalProps) => externalProps, @@ -14,7 +14,7 @@ const testContext = { invalid: false, readOnly: false, }, -} as NumberFieldContext; +} as NumberFieldRootContext; describe('', () => { const { render } = createRenderer(); @@ -23,7 +23,9 @@ describe('', () => { refInstanceof: window.HTMLInputElement, render(node) { return render( - {node}, + + {node} + , ); }, })); diff --git a/packages/mui-base/src/NumberField/Input/NumberFieldInput.tsx b/packages/mui-base/src/NumberField/Input/NumberFieldInput.tsx index d714fcedb..8638b289b 100644 --- a/packages/mui-base/src/NumberField/Input/NumberFieldInput.tsx +++ b/packages/mui-base/src/NumberField/Input/NumberFieldInput.tsx @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { useNumberFieldContext } from '../Root/NumberFieldContext'; +import { useNumberFieldRootContext } from '../Root/NumberFieldRootContext'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { useForkRef } from '../../utils/useForkRef'; import type { NumberFieldRoot } from '../Root/NumberFieldRoot'; @@ -24,7 +24,7 @@ const NumberFieldInput = React.forwardRef(function NumberFieldInput( ) { const { render, className, ...otherProps } = props; - const { getInputProps, inputRef, ownerState } = useNumberFieldContext('Input'); + const { getInputProps, inputRef, ownerState } = useNumberFieldRootContext(); const mergedInputRef = useForkRef(forwardedRef, inputRef); diff --git a/packages/mui-base/src/NumberField/Root/NumberFieldContext.ts b/packages/mui-base/src/NumberField/Root/NumberFieldContext.ts deleted file mode 100644 index ad3344e00..000000000 --- a/packages/mui-base/src/NumberField/Root/NumberFieldContext.ts +++ /dev/null @@ -1,27 +0,0 @@ -'use client'; -import * as React from 'react'; -import type { UseNumberFieldRoot } from './useNumberFieldRoot'; -import type { NumberFieldRoot } from './NumberFieldRoot'; - -export interface NumberFieldContext extends UseNumberFieldRoot.ReturnValue { - ownerState: NumberFieldRoot.OwnerState; -} - -export const NumberFieldContext = React.createContext(undefined); - -if (process.env.NODE_ENV !== 'production') { - NumberFieldContext.displayName = 'NumberFieldContext'; -} - -type Part = 'Group' | 'Input' | 'Increment' | 'Decrement' | 'ScrubArea' | 'ScrubAreaCursor'; - -export function useNumberFieldContext(part: Part) { - const context = React.useContext(NumberFieldContext); - if (context === undefined) { - throw new Error( - `Base UI: NumberFieldContext is not defined. NumberField${part} is not placed inside the NumberField component.`, - ); - } - - return context; -} diff --git a/packages/mui-base/src/NumberField/Root/NumberFieldRoot.tsx b/packages/mui-base/src/NumberField/Root/NumberFieldRoot.tsx index fb5bce021..1e8132eca 100644 --- a/packages/mui-base/src/NumberField/Root/NumberFieldRoot.tsx +++ b/packages/mui-base/src/NumberField/Root/NumberFieldRoot.tsx @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { NumberFieldContext } from './NumberFieldContext'; +import { NumberFieldRootContext } from './NumberFieldRootContext'; import { UseNumberFieldRoot, useNumberFieldRoot } from './useNumberFieldRoot'; import { useFieldRootContext } from '../../Field/Root/FieldRootContext'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; @@ -91,9 +91,9 @@ const NumberFieldRoot = React.forwardRef(function NumberFieldRoot( }); return ( - + {renderElement()} - + ); }); diff --git a/packages/mui-base/src/NumberField/Root/NumberFieldRootContext.ts b/packages/mui-base/src/NumberField/Root/NumberFieldRootContext.ts new file mode 100644 index 000000000..2da27b527 --- /dev/null +++ b/packages/mui-base/src/NumberField/Root/NumberFieldRootContext.ts @@ -0,0 +1,27 @@ +'use client'; +import * as React from 'react'; +import type { UseNumberFieldRoot } from './useNumberFieldRoot'; +import type { NumberFieldRoot } from './NumberFieldRoot'; + +export interface NumberFieldRootContext extends UseNumberFieldRoot.ReturnValue { + ownerState: NumberFieldRoot.OwnerState; +} + +export const NumberFieldRootContext = React.createContext( + undefined, +); + +if (process.env.NODE_ENV !== 'production') { + NumberFieldRootContext.displayName = 'NumberFieldRootContext'; +} + +export function useNumberFieldRootContext() { + const context = React.useContext(NumberFieldRootContext); + if (context === undefined) { + throw new Error( + 'Base UI: NumberFieldRootContext is missing. NumberField parts must be placed within .', + ); + } + + return context; +} diff --git a/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.test.tsx b/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.test.tsx index a368ea791..6f29e02a2 100644 --- a/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.test.tsx +++ b/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.test.tsx @@ -4,7 +4,7 @@ import { screen, waitFor } from '@mui/internal-test-utils'; import * as NumberField from '@base_ui/react/NumberField'; import { createRenderer, describeConformance } from '#test-utils'; import { isWebKit } from '../../utils/detectBrowser'; -import { NumberFieldContext } from '../Root/NumberFieldContext'; +import { NumberFieldRootContext } from '../Root/NumberFieldRootContext'; function createPointerMoveEvent({ movementX = 0, movementY = 0 }) { return new PointerEvent('pointermove', { @@ -23,7 +23,7 @@ const testContext = { invalid: false, readOnly: false, }, -} as NumberFieldContext; +} as NumberFieldRootContext; describe('', () => { const { render } = createRenderer(); @@ -32,7 +32,9 @@ describe('', () => { refInstanceof: window.HTMLSpanElement, render(node) { return render( - {node}, + + {node} + , ); }, })); diff --git a/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.tsx b/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.tsx index e6823be8f..8ed06f68d 100644 --- a/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.tsx +++ b/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import type { BaseUIComponentProps } from '../../utils/types'; -import { useNumberFieldContext } from '../Root/NumberFieldContext'; +import { useNumberFieldRootContext } from '../Root/NumberFieldRootContext'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { useForkRef } from '../../utils/useForkRef'; import type { NumberFieldRoot } from '../Root/NumberFieldRoot'; @@ -32,7 +32,7 @@ const NumberFieldScrubArea = React.forwardRef(function NumberFieldScrubArea( } = props; const { getScrubAreaProps, scrubAreaRef, scrubHandleRef, ownerState } = - useNumberFieldContext('ScrubArea'); + useNumberFieldRootContext(); React.useImperativeHandle(scrubHandleRef, () => ({ direction, diff --git a/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.test.tsx b/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.test.tsx index 4b577113b..a0f31546d 100644 --- a/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.test.tsx +++ b/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.test.tsx @@ -4,7 +4,7 @@ import { screen } from '@mui/internal-test-utils'; import * as NumberField from '@base_ui/react/NumberField'; import { createRenderer, describeConformance } from '#test-utils'; import { isWebKit } from '../../utils/detectBrowser'; -import { NumberFieldContext } from '../Root/NumberFieldContext'; +import { NumberFieldRootContext } from '../Root/NumberFieldRootContext'; const testContext = { getScrubAreaCursorProps: (externalProps) => externalProps, @@ -16,7 +16,7 @@ const testContext = { invalid: false, readOnly: false, }, -} as NumberFieldContext; +} as NumberFieldRootContext; describe('', () => { const { render } = createRenderer(); @@ -30,7 +30,9 @@ describe('', () => { refInstanceof: window.HTMLSpanElement, render(node) { return render( - {node}, + + {node} + , ); }, })); diff --git a/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.tsx b/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.tsx index aea53c103..fcf17c3c3 100644 --- a/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.tsx +++ b/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; -import { useNumberFieldContext } from '../Root/NumberFieldContext'; +import { useNumberFieldRootContext } from '../Root/NumberFieldRootContext'; import { isWebKit } from '../../utils/detectBrowser'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { useForkRef } from '../../utils/useForkRef'; @@ -28,7 +28,7 @@ const NumberFieldScrubAreaCursor = React.forwardRef(function NumberFieldScrubAre const { render, className, ...otherProps } = props; const { isScrubbing, scrubAreaCursorRef, ownerState, getScrubAreaCursorProps } = - useNumberFieldContext('ScrubAreaCursor'); + useNumberFieldRootContext(); const [element, setElement] = React.useState(null); diff --git a/packages/mui-base/src/Popover/Positioner/PopoverPositionerContext.ts b/packages/mui-base/src/Popover/Positioner/PopoverPositionerContext.ts index 55977a82e..ff3eaae71 100644 --- a/packages/mui-base/src/Popover/Positioner/PopoverPositionerContext.ts +++ b/packages/mui-base/src/Popover/Positioner/PopoverPositionerContext.ts @@ -21,7 +21,9 @@ if (process.env.NODE_ENV !== 'production') { export function usePopoverPositionerContext() { const context = React.useContext(PopoverPositionerContext); if (context === undefined) { - throw new Error('Base UI: PopoverPositionerContext is not defined.'); + throw new Error( + 'Base UI: PopoverPositionerContext is missing. PopoverPositioner parts must be placed within .', + ); } return context; diff --git a/packages/mui-base/src/Popover/Root/PopoverRootContext.ts b/packages/mui-base/src/Popover/Root/PopoverRootContext.ts index 0cc904a53..e64d8e14d 100644 --- a/packages/mui-base/src/Popover/Root/PopoverRootContext.ts +++ b/packages/mui-base/src/Popover/Root/PopoverRootContext.ts @@ -38,7 +38,9 @@ if (process.env.NODE_ENV !== 'production') { export function usePopoverRootContext() { const context = React.useContext(PopoverRootContext); if (context === undefined) { - throw new Error('Base UI: PopoverRootContext is not defined.'); + throw new Error( + 'Base UI: PopoverRootContext is missing. Popover parts must be placed within .', + ); } return context; diff --git a/packages/mui-base/src/PreviewCard/Root/PreviewCardContext.ts b/packages/mui-base/src/PreviewCard/Root/PreviewCardContext.ts index 7b9be510e..b8cb50e14 100644 --- a/packages/mui-base/src/PreviewCard/Root/PreviewCardContext.ts +++ b/packages/mui-base/src/PreviewCard/Root/PreviewCardContext.ts @@ -34,7 +34,9 @@ if (process.env.NODE_ENV !== 'production') { export function usePreviewCardRootContext() { const context = React.useContext(PreviewCardRootContext); if (context === undefined) { - throw new Error('Base UI: PreviewCardRootContext is not defined.'); + throw new Error( + 'Base UI: PreviewCardRootContext is missing. PreviewCard parts must be placed within .', + ); } return context; diff --git a/packages/mui-base/src/Progress/Root/ProgressRootContext.tsx b/packages/mui-base/src/Progress/Root/ProgressRootContext.tsx index 45e1a5d4e..029373389 100644 --- a/packages/mui-base/src/Progress/Root/ProgressRootContext.tsx +++ b/packages/mui-base/src/Progress/Root/ProgressRootContext.tsx @@ -19,7 +19,9 @@ if (process.env.NODE_ENV !== 'production') { export function useProgressRootContext() { const context = React.useContext(ProgressRootContext); if (context === undefined) { - throw new Error('Base UI: ProgressRootContext is not defined.'); + throw new Error( + 'Base UI: ProgressRootContext is missing. Progress parts must be placed within .', + ); } return context; diff --git a/packages/mui-base/src/Radio/Root/RadioRootContext.ts b/packages/mui-base/src/Radio/Root/RadioRootContext.ts index 9b017f201..b419b765d 100644 --- a/packages/mui-base/src/Radio/Root/RadioRootContext.ts +++ b/packages/mui-base/src/Radio/Root/RadioRootContext.ts @@ -17,7 +17,9 @@ if (process.env.NODE_ENV !== 'production') { export function useRadioRootContext() { const value = React.useContext(RadioRootContext); if (value === undefined) { - throw new Error('Base UI: RadioRootContext is not defined.'); + throw new Error( + 'Base UI: RadioRootContext is missing. Radio parts must be placed within .', + ); } return value; diff --git a/packages/mui-base/src/Slider/Root/SliderProvider.tsx b/packages/mui-base/src/Slider/Root/SliderProvider.tsx index 39caadcd6..6c3621c10 100644 --- a/packages/mui-base/src/Slider/Root/SliderProvider.tsx +++ b/packages/mui-base/src/Slider/Root/SliderProvider.tsx @@ -18,7 +18,9 @@ if (process.env.NODE_ENV !== 'production') { export function useSliderContext() { const context = React.useContext(SliderContext); if (context === undefined) { - throw new Error('Base UI: SliderContext is not defined.'); + throw new Error( + 'Base UI: SliderContext is missing. Slider parts must be placed within .', + ); } return context; diff --git a/packages/mui-base/src/Switch/Root/SwitchRootContext.ts b/packages/mui-base/src/Switch/Root/SwitchRootContext.ts index 26bac6d43..ab61d0653 100644 --- a/packages/mui-base/src/Switch/Root/SwitchRootContext.ts +++ b/packages/mui-base/src/Switch/Root/SwitchRootContext.ts @@ -12,7 +12,9 @@ if (process.env.NODE_ENV !== 'production') { export function useSwitchRootContext() { const context = React.useContext(SwitchRootContext); if (context === undefined) { - throw new Error('Base UI: SwitchRootContext is not defined.'); + throw new Error( + 'Base UI: SwitchRootContext is missing. Switch parts must be placed within .', + ); } return context; diff --git a/packages/mui-base/src/Tabs/Root/TabsRootContext.ts b/packages/mui-base/src/Tabs/Root/TabsRootContext.ts index 71a78e57f..ac011c009 100644 --- a/packages/mui-base/src/Tabs/Root/TabsRootContext.ts +++ b/packages/mui-base/src/Tabs/Root/TabsRootContext.ts @@ -55,7 +55,9 @@ if (process.env.NODE_ENV !== 'production') { export function useTabsRootContext() { const context = React.useContext(TabsRootContext); if (context === undefined) { - throw new Error('Base UI: TabsRootContext is not defined.'); + throw new Error( + 'Base UI: TabsRootContext is missing. Tabs parts must be placed within .', + ); } return context; diff --git a/packages/mui-base/src/Tabs/TabsList/TabsListContext.ts b/packages/mui-base/src/Tabs/TabsList/TabsListContext.ts index a3d58b10a..fa31ac8a9 100644 --- a/packages/mui-base/src/Tabs/TabsList/TabsListContext.ts +++ b/packages/mui-base/src/Tabs/TabsList/TabsListContext.ts @@ -16,7 +16,9 @@ if (process.env.NODE_ENV !== 'production') { export function useTabsListContext() { const context = React.useContext(TabsListContext); if (context === undefined) { - throw new Error('Base UI: TabsListContext is not defined.'); + throw new Error( + 'Base UI: TabsListContext is missing. TabsList parts must be placed within .', + ); } return context; diff --git a/packages/mui-base/src/Tooltip/Positioner/TooltipPositionerContext.ts b/packages/mui-base/src/Tooltip/Positioner/TooltipPositionerContext.ts index 06bbdebbf..f3b1dab4c 100644 --- a/packages/mui-base/src/Tooltip/Positioner/TooltipPositionerContext.ts +++ b/packages/mui-base/src/Tooltip/Positioner/TooltipPositionerContext.ts @@ -22,7 +22,9 @@ if (process.env.NODE_ENV !== 'production') { export function useTooltipPositionerContext() { const context = React.useContext(TooltipPositionerContext); if (context === undefined) { - throw new Error('Base UI: TooltipPositionerContext is not defined.'); + throw new Error( + 'Base UI: TooltipPositionerContext is missing. TooltipPositioner parts must be placed within .', + ); } return context; } diff --git a/packages/mui-base/src/Tooltip/Root/TooltipRootContext.ts b/packages/mui-base/src/Tooltip/Root/TooltipRootContext.ts index dd1da594b..a7d6b3d08 100644 --- a/packages/mui-base/src/Tooltip/Root/TooltipRootContext.ts +++ b/packages/mui-base/src/Tooltip/Root/TooltipRootContext.ts @@ -30,7 +30,9 @@ export const TooltipRootContext = React.createContext.', + ); } return context;