[pickers] Remove plural in Pickers on the new contexts

mui · Nov 6, 2024 · d58b795 · d58b795
1 parent 2304191
commit d58b795
Show file tree

Hide file tree

Showing 23 changed files with 88 additions and 88 deletions.
diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js
@@ -7,7 +7,7 @@ import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
 import {
   useSplitFieldProps,
   useParsedFormat,
-  usePickersContext,
+  usePickerContext,
 } from '@mui/x-date-pickers/hooks';
 
 function ButtonDateField(props) {
@@ -24,7 +24,7 @@ function ButtonDateField(props) {
     ...other
   } = forwardedProps;
 
-  const pickersContext = usePickersContext();
+  const pickersContext = usePickerContext();
 
   const parsedFormat = useParsedFormat(internalProps);
   const { hasValidationError } = useValidation({

diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.tsx
@@ -11,7 +11,7 @@ import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
 import {
   useSplitFieldProps,
   useParsedFormat,
-  usePickersContext,
+  usePickerContext,
 } from '@mui/x-date-pickers/hooks';
 
 function ButtonDateField(props: DatePickerFieldProps) {
@@ -28,7 +28,7 @@ function ButtonDateField(props: DatePickerFieldProps) {
     ...other
   } = forwardedProps;
 
-  const pickersContext = usePickersContext();
+  const pickersContext = usePickerContext();
 
   const parsedFormat = useParsedFormat(internalProps);
   const { hasValidationError } = useValidation({

diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.js b/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.js
@@ -9,7 +9,7 @@ import { validateDateRange } from '@mui/x-date-pickers-pro/validation';
 import {
   useSplitFieldProps,
   useParsedFormat,
-  usePickersContext,
+  usePickerContext,
 } from '@mui/x-date-pickers/hooks';
 
 function ButtonDateRangeField(props) {
@@ -26,7 +26,7 @@ function ButtonDateRangeField(props) {
     ...other
   } = forwardedProps;
 
-  const pickersContext = usePickersContext();
+  const pickersContext = usePickerContext();
 
   const parsedFormat = useParsedFormat(internalProps);
   const { hasValidationError } = useValidation({

diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx b/docs/data/date-pickers/custom-field/behavior-button/MaterialDateRangePicker.tsx
@@ -13,7 +13,7 @@ import { validateDateRange } from '@mui/x-date-pickers-pro/validation';
 import {
   useSplitFieldProps,
   useParsedFormat,
-  usePickersContext,
+  usePickerContext,
 } from '@mui/x-date-pickers/hooks';
 
 function ButtonDateRangeField(props: DateRangePickerFieldProps) {
@@ -30,7 +30,7 @@ function ButtonDateRangeField(props: DateRangePickerFieldProps) {
     ...other
   } = forwardedProps;
 
-  const pickersContext = usePickersContext();
+  const pickersContext = usePickerContext();
 
   const parsedFormat = useParsedFormat(internalProps);
   const { hasValidationError } = useValidation({

diff --git a/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.js b/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.js
@@ -7,7 +7,7 @@ import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
 import {
   useSplitFieldProps,
   useParsedFormat,
-  usePickersContext,
+  usePickerContext,
 } from '@mui/x-date-pickers/hooks';
 import { CalendarIcon } from '@mui/x-date-pickers/icons';
 
@@ -16,7 +16,7 @@ function ReadOnlyDateField(props) {
   const { value, timezone, format } = internalProps;
   const { InputProps, slotProps, slots, ...other } = forwardedProps;
 
-  const pickersContext = usePickersContext();
+  const pickersContext = usePickerContext();
 
   const parsedFormat = useParsedFormat(internalProps);
   const { hasValidationError } = useValidation({

diff --git a/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.tsx b/docs/data/date-pickers/custom-field/behavior-read-only-text-field/MaterialDatePicker.tsx
@@ -11,7 +11,7 @@ import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
 import {
   useSplitFieldProps,
   useParsedFormat,
-  usePickersContext,
+  usePickerContext,
 } from '@mui/x-date-pickers/hooks';
 import { CalendarIcon } from '@mui/x-date-pickers/icons';
 
@@ -20,7 +20,7 @@ function ReadOnlyDateField(props: DatePickerFieldProps) {
   const { value, timezone, format } = internalProps;
   const { InputProps, slotProps, slots, ...other } = forwardedProps;
 
-  const pickersContext = usePickersContext();
+  const pickersContext = usePickerContext();
 
   const parsedFormat = useParsedFormat(internalProps);
   const { hasValidationError } = useValidation({

diff --git a/...es/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx b/...es/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx
@@ -10,7 +10,7 @@ import {
   ExportedBaseToolbarProps,
   DateOrTimeViewWithMeridiem,
   ExportedBaseTabsProps,
-  PickersProvider,
+  PickerProvider,
   PickerRangeValue,
 } from '@mui/x-date-pickers/internals';
 import { FieldRef, InferError, PickerOwnerState } from '@mui/x-date-pickers/models';
@@ -203,7 +203,7 @@ export const useDesktopRangePicker = <
   const Layout = slots?.layout ?? PickersLayout;
 
   const renderPicker = () => (
-    <PickersProvider {...providerProps}>
+    <PickerProvider {...providerProps}>
       <Field {...enrichedFieldProps} />
       <PickersPopper
         role="tooltip"
@@ -227,7 +227,7 @@ export const useDesktopRangePicker = <
           {renderCurrentView()}
         </Layout>
       </PickersPopper>
-    </PickersProvider>
+    </PickerProvider>
   );
 
   return {

diff --git a/...ages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx b/...ages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx
@@ -8,7 +8,7 @@ import {
   ExportedBaseToolbarProps,
   DateOrTimeViewWithMeridiem,
   ExportedBaseTabsProps,
-  PickersProvider,
+  PickerProvider,
   PickerRangeValue,
 } from '@mui/x-date-pickers/internals';
 import { usePickersTranslations } from '@mui/x-date-pickers/hooks';
@@ -208,7 +208,7 @@ export const useMobileRangePicker = <
   };
 
   const renderPicker = () => (
-    <PickersProvider {...providerProps}>
+    <PickerProvider {...providerProps}>
       <Field {...enrichedFieldProps} />
       <PickersModalDialog {...actions} open={open} slots={slots} slotProps={slotProps}>
         <Layout
@@ -220,7 +220,7 @@ export const useMobileRangePicker = <
           {renderCurrentView()}
         </Layout>
       </PickersModalDialog>
-    </PickersProvider>
+    </PickerProvider>
   );
 
   return {

diff --git a/...ages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.tsx b/...ages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.tsx
@@ -7,7 +7,7 @@ import {
   DIALOG_WIDTH,
   ExportedBaseToolbarProps,
   DateOrTimeViewWithMeridiem,
-  PickersProvider,
+  PickerProvider,
   PickerRangeValue,
 } from '@mui/x-date-pickers/internals';
 import {
@@ -69,7 +69,7 @@ export const useStaticRangePicker = <
   };
 
   const renderPicker = () => (
-    <PickersProvider {...providerProps}>
+    <PickerProvider {...providerProps}>
       <Layout
         {...layoutProps}
         {...slotProps?.layout}
@@ -86,7 +86,7 @@ export const useStaticRangePicker = <
       >
         {renderCurrentView()}
       </Layout>
-    </PickersProvider>
+    </PickerProvider>
   );
 
   return { renderPicker };

diff --git a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx
@@ -8,7 +8,7 @@ import { getPickersLayoutUtilityClass, PickersLayoutClasses } from './pickersLay
 import { PickersShortcuts } from '../PickersShortcuts';
 import { BaseToolbarProps } from '../internals/models/props/toolbar';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
-import { usePickersPrivateContext } from '../internals/hooks/usePickersPrivateContext';
+import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext';
 
 function toolbarHasView<TValue, TView extends DateOrTimeViewWithMeridiem>(
   toolbarProps: BaseToolbarProps<TValue, TView> | any,
@@ -43,7 +43,7 @@ interface UsePickerLayoutResponse<TValue> extends SubComponents<TValue> {}
 const usePickerLayout = <TValue, TView extends DateOrTimeViewWithMeridiem>(
   props: PickersLayoutProps<TValue, TView>,
 ): UsePickerLayoutResponse<TValue> => {
-  const { ownerState: pickersOwnerState } = usePickersPrivateContext();
+  const { ownerState: pickersOwnerState } = usePickerPrivateContext();
 
   const {
     wrapperVariant,

diff --git a/packages/x-date-pickers/src/hooks/index.tsx b/packages/x-date-pickers/src/hooks/index.tsx
@@ -12,4 +12,4 @@ export { useSplitFieldProps } from './useSplitFieldProps';
 
 export { useParsedFormat } from './useParsedFormat';
 
-export { usePickersContext } from './usePickersContext';
+export { usePickerContext } from './usePickerContext';
diff --git a/packages/x-date-pickers/src/hooks/usePickerContext.ts b/packages/x-date-pickers/src/hooks/usePickerContext.ts
@@ -0,0 +1,19 @@
+'use client';
+import * as React from 'react';
+import { PickerContext } from '../internals/components/PickerProvider';
+
+/**
+ * Returns the context passed by the picker that wraps the current component.
+ */
+export const usePickerContext = () => {
+  const value = React.useContext(PickerContext);
+  if (value == null) {
+    throw new Error(
+      [
+        'MUI X: The `usePickerContext` can only be called in fields that are used as a slot of a picker component',
+      ].join('\n'),
+    );
+  }
+
+  return value;
+};
diff --git a/packages/x-date-pickers/src/hooks/usePickersContext.ts b/packages/x-date-pickers/src/hooks/usePickersContext.ts
diff --git a/.../internals/components/PickersProvider.tsx → ...c/internals/components/PickerProvider.tsx b/.../internals/components/PickersProvider.tsx → ...c/internals/components/PickerProvider.tsx
@@ -3,9 +3,9 @@ import { PickerOwnerState } from '../../models';
 import { PickersInputLocaleText } from '../../locales';
 import { LocalizationProvider } from '../../LocalizationProvider';
 
-export const PickersContext = React.createContext<PickersContextValue | null>(null);
+export const PickerContext = React.createContext<PickersContextValue | null>(null);
 
-export const PickersPrivateContext = React.createContext<PickersPrivateContextValue | null>(null);
+export const PickerPrivateContext = React.createContext<PickerPrivateContextValue | null>(null);
 
 /**
  * Provides the context for the various parts of a picker component:
@@ -14,21 +14,21 @@ export const PickersPrivateContext = React.createContext<PickersPrivateContextVa
  *
  * @ignore - do not document.
  */
-export function PickersProvider(props: PickersProviderProps) {
+export function PickerProvider(props: PickerProviderProps) {
   const { contextValue, privateContextValue, localeText, children } = props;
 
   return (
-    <PickersContext.Provider value={contextValue}>
-      <PickersPrivateContext.Provider value={privateContextValue}>
+    <PickerContext.Provider value={contextValue}>
+      <PickerPrivateContext.Provider value={privateContextValue}>
         <LocalizationProvider localeText={localeText}>{children}</LocalizationProvider>
-      </PickersPrivateContext.Provider>
-    </PickersContext.Provider>
+      </PickerPrivateContext.Provider>
+    </PickerContext.Provider>
   );
 }
 
-export interface PickersProviderProps {
+export interface PickerProviderProps {
   contextValue: PickersContextValue;
-  privateContextValue: PickersPrivateContextValue;
+  privateContextValue: PickerPrivateContextValue;
   localeText: PickersInputLocaleText | undefined;
   children: React.ReactNode;
 }
@@ -49,7 +49,7 @@ export interface PickersContextValue {
    */
   open: boolean;
 }
-export interface PickersPrivateContextValue {
+export interface PickerPrivateContextValue {
   /**
    * The ownerState of the picker.
    */

diff --git a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx
@@ -21,7 +21,7 @@ import {
   PickerOwnerState,
 } from '../../../models';
 import { DateOrTimeViewWithMeridiem } from '../../models';
-import { PickersProvider } from '../../components/PickersProvider';
+import { PickerProvider } from '../../components/PickerProvider';
 
 /**
  * Hook managing all the single-date desktop pickers:
@@ -207,7 +207,7 @@ export const useDesktopPicker = <
   const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef);
 
   const renderPicker = () => (
-    <PickersProvider {...providerProps}>
+    <PickerProvider {...providerProps}>
       <Field
         {...fieldProps}
         slots={slotsForField}
@@ -229,7 +229,7 @@ export const useDesktopPicker = <
           {renderCurrentView()}
         </Layout>
       </PickersPopper>
-    </PickersProvider>
+    </PickerProvider>
   );
 
   return { renderPicker };

diff --git a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx
@@ -20,7 +20,7 @@ import {
   PickerOwnerState,
 } from '../../../models';
 import { DateOrTimeViewWithMeridiem } from '../../models';
-import { PickersProvider } from '../../components/PickersProvider';
+import { PickerProvider } from '../../components/PickerProvider';
 
 /**
  * Hook managing all the single-date mobile pickers:
@@ -160,7 +160,7 @@ export const useMobilePicker = <
   const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef);
 
   const renderPicker = () => (
-    <PickersProvider {...providerProps}>
+    <PickerProvider {...providerProps}>
       <Field
         {...fieldProps}
         slots={slotsForField}
@@ -172,7 +172,7 @@ export const useMobilePicker = <
           {renderCurrentView()}
         </Layout>
       </PickersModalDialog>
-    </PickersProvider>
+    </PickerProvider>
   );
 
   return { renderPicker };

diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts
@@ -2,18 +2,18 @@ import * as React from 'react';
 import { FieldSection, PickerOwnerState } from '../../../models';
 import { UsePickerValueResponse } from './usePickerValue.types';
 import {
-  PickersProviderProps,
+  PickerProviderProps,
   PickersContextValue,
-  PickersPrivateContextValue,
-} from '../../components/PickersProvider';
+  PickerPrivateContextValue,
+} from '../../components/PickerProvider';
 
 export interface UsePickerProviderParameters<TValue>
-  extends Pick<PickersProviderProps, 'localeText'> {
+  extends Pick<PickerProviderProps, 'localeText'> {
   pickerValueResponse: UsePickerValueResponse<TValue, FieldSection, any>;
   ownerState: PickerOwnerState;
 }
 
-export interface UsePickerProviderReturnValue extends Omit<PickersProviderProps, 'children'> {}
+export interface UsePickerProviderReturnValue extends Omit<PickerProviderProps, 'children'> {}
 
 export function usePickerProvider<TValue>(
   parameters: UsePickerProviderParameters<TValue>,
@@ -33,7 +33,7 @@ export function usePickerProvider<TValue>(
     ],
   );
 
-  const privateContextValue = React.useMemo<PickersPrivateContextValue>(
+  const privateContextValue = React.useMemo<PickerPrivateContextValue>(
     () => ({ ownerState }),
     [ownerState],
   );
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,4 +12,4 @@ export { useSplitFieldProps } from './useSplitFieldProps';

		export { useParsedFormat } from './useParsedFormat';

		export { usePickersContext } from './usePickersContext';
		export { usePickerContext } from './usePickerContext';