Merge remote-tracking branch 'upstream/master' into feat/accordion

mui · Oct 17, 2024 · 49598c5 · 49598c5
2 parents 743c07e + 8c52af4
commit 49598c5
Show file tree

Hide file tree

Showing 67 changed files with 329 additions and 193 deletions.
diff --git a/docs/app/experiments/slider-marks.tsx b/docs/app/experiments/slider-marks.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { Slider } from '@base_ui/react/Slider';
-import { useSliderContext } from '../../../packages/mui-base/src/Slider/Root/SliderContext';
+import { useSliderRootContext } from '../../../packages/mui-base/src/Slider/Root/SliderRootContext';
 
 const STOPS = [
   {
@@ -33,7 +33,7 @@ function getSliderThumbAriaValueText(value: number) {
 // for "inverted track", the track/rail can be styled with CSS but a prop is needed to flip the "mark active" state
 function MarkWithLabel(props: { index: number; value: number; label: string; inverted?: boolean }) {
   const { index, value, label, inverted = false } = props;
-  const { direction, values } = useSliderContext();
+  const { direction, values } = useSliderRootContext();
   const isRtl = direction === 'rtl';
   const isFilled = inverted ? value >= values[0] : values[0] >= value;
   return (

diff --git a/docs/app/experiments/slider-tooltip.tsx b/docs/app/experiments/slider-tooltip.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useTheme } from '@mui/system';
 import { Slider } from '@base_ui/react/Slider';
 import { Tooltip } from '@base_ui/react/Tooltip';
-import { useSliderContext } from '../../../packages/mui-base/src/Slider/Root/SliderContext';
+import { useSliderRootContext } from '../../../packages/mui-base/src/Slider/Root/SliderRootContext';
 
 function useIsDarkMode() {
   const theme = useTheme();
@@ -74,7 +74,7 @@ export default function App() {
 
 const SliderMark = React.forwardRef(function SliderMark(props: any, ref: React.ForwardedRef<any>) {
   const { index, style, ...otherProps } = props;
-  const { percentageValues } = useSliderContext();
+  const { percentageValues } = useSliderRootContext();
   const isFilled = percentageValues[0] >= index * 10;
   return (
     <span

diff --git a/packages/mui-base/src/AlertDialog/Root/AlertDialogRootContext.ts b/packages/mui-base/src/AlertDialog/Root/AlertDialogRootContext.ts
@@ -18,10 +18,17 @@ export const AlertDialogRootContext = React.createContext<AlertDialogRootContext
   undefined,
 );
 
+if (process.env.NODE_ENV !== 'production') {
+  AlertDialogRootContext.displayName = 'AlertDialogRootContext';
+}
+
 export function useAlertDialogRootContext() {
   const context = React.useContext(AlertDialogRootContext);
   if (context === undefined) {
-    throw new Error('useAlertDialogRootContext must be used within an AlertDialogRoot');
+    throw new Error(
+      'Base UI: AlertDialogRootContext is missing. AlertDialog parts must be placed within <AlertDialog.Root>.',
+    );
   }
+
   return context;
 }
diff --git a/packages/mui-base/src/Checkbox/Root/CheckboxRootContext.ts b/packages/mui-base/src/Checkbox/Root/CheckboxRootContext.ts
@@ -4,14 +4,19 @@ import type { CheckboxRoot } from './CheckboxRoot';
 
 export type CheckboxRootContext = CheckboxRoot.OwnerState;
 
-export const CheckboxRootContext = React.createContext<CheckboxRootContext | null>(null);
+export const CheckboxRootContext = React.createContext<CheckboxRootContext | undefined>(undefined);
+
+if (process.env.NODE_ENV !== 'production') {
+  CheckboxRootContext.displayName = 'CheckboxRootContext';
+}
 
 export function useCheckboxRootContext() {
   const context = React.useContext(CheckboxRootContext);
-  if (context === null) {
+  if (context === undefined) {
     throw new Error(
-      'Base UI: Checkbox.Indicator must be placed inside the Checkbox.Root component.',
+      'Base UI: CheckboxRootContext is missing. Checkbox parts must be placed within <Checkbox.Root>.',
     );
   }
+
   return context;
 }
diff --git a/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRootContext.ts b/packages/mui-base/src/CheckboxGroup/Root/CheckboxGroupRootContext.ts
@@ -9,12 +9,21 @@ export interface CheckboxGroupRootContext {
   parent: UseCheckboxGroupParent.ReturnValue;
 }
 
-export const CheckboxGroupRootContext = React.createContext<CheckboxGroupRootContext | null>(null);
+export const CheckboxGroupRootContext = React.createContext<CheckboxGroupRootContext | undefined>(
+  undefined,
+);
+
+if (process.env.NODE_ENV !== 'production') {
+  CheckboxGroupRootContext.displayName = 'CheckboxGroupRootContext';
+}
 
 export function useCheckboxGroupRootContext(optional = true) {
   const context = React.useContext(CheckboxGroupRootContext);
-  if (context === null && !optional) {
-    throw new Error('Base UI: CheckboxGroupRootContext is not defined.');
+  if (context === undefined && !optional) {
+    throw new Error(
+      'Base UI: CheckboxGroupRootContext is missing. CheckboxGroup parts must be placed within <CheckboxGroup.Root>.',
+    );
   }
+
   return context;
 }
diff --git a/packages/mui-base/src/Collapsible/Panel/CollapsiblePanel.test.tsx b/packages/mui-base/src/Collapsible/Panel/CollapsiblePanel.test.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { createRenderer } from '@mui/internal-test-utils';
 import { Collapsible } from '@base_ui/react/Collapsible';
-import { CollapsibleRootContext } from '../Root/CollapsibleRootContext';
 import { describeConformance } from '../../../test/describeConformance';
+import { CollapsibleRootContext } from '../Root/CollapsibleRootContext';
 
 const contextValue: CollapsibleRootContext = {
   animated: false,

diff --git a/packages/mui-base/src/Collapsible/Root/CollapsibleRootContext.ts b/packages/mui-base/src/Collapsible/Root/CollapsibleRootContext.ts
@@ -6,9 +6,7 @@ import type { CollapsibleRoot } from './CollapsibleRoot';
 export interface CollapsibleRootContext extends useCollapsibleRoot.ReturnValue {
   ownerState: CollapsibleRoot.OwnerState;
 }
-/**
- * @ignore - internal component.
- */
+
 export const CollapsibleRootContext = React.createContext<CollapsibleRootContext | undefined>(
   undefined,
 );
@@ -20,7 +18,10 @@ if (process.env.NODE_ENV !== 'production') {
 export function useCollapsibleRootContext() {
   const context = React.useContext(CollapsibleRootContext);
   if (context === undefined) {
-    throw new Error('useCollapsibleRootContext must be used inside a Collapsible component');
+    throw new Error(
+      'Base UI: CollapsibleRootContext is missing. Collapsible parts must be placed within <Collapsible.Root>.',
+    );
   }
+
   return context;
 }
diff --git a/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { createRenderer } from '@mui/internal-test-utils';
 import { Collapsible } from '@base_ui/react/Collapsible';
-import { CollapsibleRootContext } from '../Root/CollapsibleRootContext';
 import { describeConformance } from '../../../test/describeConformance';
+import { CollapsibleRootContext } from '../Root/CollapsibleRootContext';
 
 const contextValue: CollapsibleRootContext = {
   animated: false,

diff --git 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<CompositeListContextValu
   elementsRef: { current: [] },
 });
 
+if (process.env.NODE_ENV !== 'production') {
+  CompositeListContext.displayName = 'CompositeListContext';
+}
+
 export function useCompositeListContext() {
   return React.useContext(CompositeListContext);
 }
diff --git a/packages/mui-base/src/Composite/Root/CompositeRoot.tsx b/packages/mui-base/src/Composite/Root/CompositeRoot.tsx
@@ -39,7 +39,7 @@ const CompositeRoot = React.forwardRef(function CompositeRoot(
     extraProps: otherProps,
   });
 
-  const contextValue: CompositeRootContext.Value = React.useMemo(
+  const contextValue: CompositeRootContext = React.useMemo(
     () => ({ activeIndex, onActiveIndexChange }),
     [activeIndex, onActiveIndexChange],
   );

diff --git a/packages/mui-base/src/Composite/Root/CompositeRootContext.ts b/packages/mui-base/src/Composite/Root/CompositeRootContext.ts
@@ -1,19 +1,26 @@
 'use client';
 import * as React from 'react';
 
-export const CompositeRootContext = React.createContext<CompositeRootContext.Value | null>(null);
+export interface CompositeRootContext {
+  activeIndex: number;
+  onActiveIndexChange: (index: number) => void;
+}
+
+export const CompositeRootContext = React.createContext<CompositeRootContext | undefined>(
+  undefined,
+);
+
+if (process.env.NODE_ENV !== 'production') {
+  CompositeRootContext.displayName = 'CompositeRootContext';
+}
 
 export function useCompositeRootContext() {
   const context = React.useContext(CompositeRootContext);
-  if (context === null) {
-    throw new Error('<Composite.Item> must be used within <Composite.Root>');
+  if (context === undefined) {
+    throw new Error(
+      'Base UI: CompositeRootContext is missing. Composite parts must be placed within <Composite.Root>.',
+    );
   }
-  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
@@ -24,7 +24,10 @@ export const DialogRootContext = React.createContext<DialogRootContext | undefin
 export function useDialogRootContext() {
   const context = React.useContext(DialogRootContext);
   if (context === undefined) {
-    throw new Error('useDialogRootContext must be used within a DialogRoot');
+    throw new Error(
+      'Base UI: DialogRootContext is missing. Dialog parts must be placed within <Dialog.Root>.',
+    );
   }
+
   return context;
 }
diff --git a/packages/mui-base/src/Field/Root/FieldRootContext.ts b/packages/mui-base/src/Field/Root/FieldRootContext.ts
@@ -70,7 +70,9 @@ export function useFieldRootContext(optional = true) {
   const context = React.useContext(FieldRootContext);
 
   if (context.setControlId === NOOP && !optional) {
-    throw new Error('Base UI: Field components must be placed within <Field.Root>.');
+    throw new Error(
+      'Base UI: FieldRootContext is missing. Field parts must be placed within <Field.Root>.',
+    );
   }
 
   return context;

diff --git 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<FormRootContext>({
   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
@@ -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
@@ -13,7 +13,9 @@ export const MenuCheckboxItemContext = React.createContext<MenuCheckboxItemConte
 export function useMenuCheckboxItemContext() {
   const context = React.useContext(MenuCheckboxItemContext);
   if (context === undefined) {
-    throw new Error('useMenuCheckboxItemContext must be used within a MenuCheckboxItemProvider');
+    throw new Error(
+      'Base UI: MenuCheckboxItemContext is missing. MenuCheckboxItem parts must be placed within <Menu.CheckboxItem>.',
+    );
   }
 
   return context;

diff --git a/packages/mui-base/src/Menu/Group/MenuGroupContext.ts b/packages/mui-base/src/Menu/Group/MenuGroupContext.ts
@@ -12,7 +12,7 @@ if (process.env.NODE_ENV !== 'production') {
 
 export function useMenuGroupRootContext() {
   const context = React.useContext(MenuGroupContext);
-  if (context == null) {
+  if (context === undefined) {
     throw new Error('Base UI: Missing MenuGroupRootContext provider');
   }
 

diff --git a/packages/mui-base/src/Menu/Item/MenuItem.test.tsx b/packages/mui-base/src/Menu/Item/MenuItem.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/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
@@ -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
@@ -16,16 +16,20 @@ export interface MenuPositionerContext {
   arrowStyles: React.CSSProperties;
 }
 
-export const MenuPositionerContext = React.createContext<MenuPositionerContext | null>(null);
+export const MenuPositionerContext = React.createContext<MenuPositionerContext | undefined>(
+  undefined,
+);
 
 if (process.env.NODE_ENV !== 'production') {
   MenuPositionerContext.displayName = 'MenuPositionerContext';
 }
 
 export function useMenuPositionerContext() {
   const context = React.useContext(MenuPositionerContext);
-  if (context === null) {
-    throw new Error('<Menu.Popup> must be used within the <Menu.Positioner> component');
+  if (context === undefined) {
+    throw new Error(
+      'Base UI: MenuPositionerContext is missing. MenuPositioner parts must be placed within <Menu.Positioner>.',
+    );
   }
   return context;
 }
diff --git a/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroupContext.ts b/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroupContext.ts
@@ -5,16 +5,20 @@ export interface MenuRadioGroupContext {
   setValue: (newValue: any, event: Event) => void;
 }
 
-export const MenuRadioGroupContext = React.createContext<MenuRadioGroupContext | null>(null);
+export const MenuRadioGroupContext = React.createContext<MenuRadioGroupContext | undefined>(
+  undefined,
+);
 
 if (process.env.NODE_ENV !== 'production') {
   MenuRadioGroupContext.displayName = 'MenuRadioGroupContext';
 }
 
 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 missing. MenuRadioGroup parts must be placed within <Menu.RadioGroup>.',
+    );
   }
 
   return context;

diff --git 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
@@ -10,10 +10,16 @@ export const MenuRadioItemContext = React.createContext<MenuRadioItemContext | u
   undefined,
 );
 
+if (process.env.NODE_ENV !== 'production') {
+  MenuRadioItemContext.displayName = 'MenuRadioItemContext';
+}
+
 export function useMenuRadioItemContext() {
   const context = React.useContext(MenuRadioItemContext);
   if (context === undefined) {
-    throw new Error('useMenuRadioItemContext must be used within a MenuRadioItemProvider');
+    throw new Error(
+      'Base UI: MenuRadioItemContext is missing. MenuRadioItem parts must be placed within <Menu.RadioItem>.',
+    );
   }
 
   return context;

diff --git a/packages/mui-base/src/Menu/Root/MenuRootContext.ts b/packages/mui-base/src/Menu/Root/MenuRootContext.ts
@@ -6,23 +6,25 @@ export interface MenuRootContext extends useMenuRoot.ReturnValue {
   clickAndDragEnabled: boolean;
   disabled: boolean;
   nested: boolean;
-  parentContext: MenuRootContext | null;
+  parentContext: MenuRootContext | undefined;
   setClickAndDragEnabled: React.Dispatch<React.SetStateAction<boolean>>;
   typingRef: React.RefObject<boolean>;
 }
 
-export const MenuRootContext = React.createContext<MenuRootContext | null>(null);
+export const MenuRootContext = React.createContext<MenuRootContext | undefined>(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) {
-    throw new Error('Base UI: MenuRootContext is not defined.');
+  if (context === undefined && !optional) {
+    throw new Error(
+      'Base UI: MenuRootContext is missing. Menu parts must be placed within <Menu.Root>.',
+    );
   }
 
   return context;