diff --git a/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js b/docs/data/date-pickers/custom-field/behavior-button/MaterialDatePicker.js index 6082f6580ca7c..a980443984bbf 100644 --- 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 index ae9ffb08d896c..ba340478935de 100644 --- 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 index f9fc03f45d578..90cfda9dbee9c 100644 --- 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 index 522fe8a047b4e..69d32b0102f54 100644 --- 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 index 7c83e6a7480aa..d5848af7969bc 100644 --- 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 index 9c06797fc2fcc..a8c02a78bc0ba 100644 --- 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/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx index a5d29869d304c..67ddaddd225e1 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx +++ b/packages/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 = () => ( - + - + ); return { diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx index aa9ab1b34b537..a24258cf8c173 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMobileRangePicker/useMobileRangePicker.tsx +++ b/packages/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 = () => ( - + - + ); return { diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.tsx index 7fdd442279fc7..a2597d5bb2d1f 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useStaticRangePicker/useStaticRangePicker.tsx +++ b/packages/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 = () => ( - + {renderCurrentView()} - + ); return { renderPicker }; diff --git a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx index aa34a0a0c06aa..2ed771726b244 100644 --- 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( toolbarProps: BaseToolbarProps | any, @@ -43,7 +43,7 @@ interface UsePickerLayoutResponse extends SubComponents {} const usePickerLayout = ( props: PickersLayoutProps, ): UsePickerLayoutResponse => { - 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 index a3d200fd8757b..2b51edc88c213 100644 --- 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 new file mode 100644 index 0000000000000..ba3d36ed8854a --- /dev/null +++ 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 deleted file mode 100644 index 1303af42b886f..0000000000000 --- a/packages/x-date-pickers/src/hooks/usePickersContext.ts +++ /dev/null @@ -1,19 +0,0 @@ -'use client'; -import * as React from 'react'; -import { PickersContext } from '../internals/components/PickersProvider'; - -/** - * Returns the context passed by the picker that wraps the current component. - */ -export const usePickersContext = () => { - const value = React.useContext(PickersContext); - if (value == null) { - throw new Error( - [ - 'MUI X: The `usePickersContext` 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/internals/components/PickersProvider.tsx b/packages/x-date-pickers/src/internals/components/PickerProvider.tsx similarity index 69% rename from packages/x-date-pickers/src/internals/components/PickersProvider.tsx rename to packages/x-date-pickers/src/internals/components/PickerProvider.tsx index 0f1d329814724..9dada771d444b 100644 --- a/packages/x-date-pickers/src/internals/components/PickersProvider.tsx +++ b/packages/x-date-pickers/src/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(null); +export const PickerContext = React.createContext(null); -export const PickersPrivateContext = React.createContext(null); +export const PickerPrivateContext = React.createContext(null); /** * Provides the context for the various parts of a picker component: @@ -14,21 +14,21 @@ export const PickersPrivateContext = React.createContext - + + {children} - - + + ); } -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 index 9158434b71af9..b9e5f1edb0bee 100644 --- 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 = () => ( - + - + ); 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 index 917c358b6737e..088160ff9b5e7 100644 --- 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 = () => ( - + - + ); 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 index e3bec5e1b8e10..d000cb3abf9ae 100644 --- 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 - extends Pick { + extends Pick { pickerValueResponse: UsePickerValueResponse; ownerState: PickerOwnerState; } -export interface UsePickerProviderReturnValue extends Omit {} +export interface UsePickerProviderReturnValue extends Omit {} export function usePickerProvider( parameters: UsePickerProviderParameters, @@ -33,7 +33,7 @@ export function usePickerProvider( ], ); - const privateContextValue = React.useMemo( + const privateContextValue = React.useMemo( () => ({ ownerState }), [ownerState], ); diff --git a/packages/x-date-pickers/src/internals/hooks/usePickerPrivateContext.ts b/packages/x-date-pickers/src/internals/hooks/usePickerPrivateContext.ts new file mode 100644 index 0000000000000..35a6a14b02bf3 --- /dev/null +++ b/packages/x-date-pickers/src/internals/hooks/usePickerPrivateContext.ts @@ -0,0 +1,17 @@ +'use client'; +import * as React from 'react'; +import { PickerContext, PickerPrivateContextValue } from '../components/PickerProvider'; + +/** + * Returns the private context passed by the picker that wraps the current component. + */ +export const usePickerPrivateContext = () => { + const value = React.useContext(PickerContext) as PickerPrivateContextValue | null; + if (value == null) { + throw new Error( + 'MUI X: The `usePickerPrivateContext` can only be called in components that are used inside a picker component.', + ); + } + + return value; +}; diff --git a/packages/x-date-pickers/src/internals/hooks/usePickersPrivateContext.ts b/packages/x-date-pickers/src/internals/hooks/usePickersPrivateContext.ts deleted file mode 100644 index 9d03e894944ad..0000000000000 --- a/packages/x-date-pickers/src/internals/hooks/usePickersPrivateContext.ts +++ /dev/null @@ -1,17 +0,0 @@ -'use client'; -import * as React from 'react'; -import { PickersContext, PickersPrivateContextValue } from '../components/PickersProvider'; - -/** - * Returns the private context passed by the picker that wraps the current component. - */ -export const usePickersPrivateContext = () => { - const value = React.useContext(PickersContext) as PickersPrivateContextValue | null; - if (value == null) { - throw new Error( - 'MUI X: The `usePickersPrivateContext` can only be called in components that are used inside a picker component.', - ); - } - - return value; -}; diff --git a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx index 38dc4787f8d19..15ffa93d984e2 100644 --- a/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useStaticPicker/useStaticPicker.tsx @@ -3,7 +3,7 @@ import clsx from 'clsx'; import { styled } from '@mui/material/styles'; import { UseStaticPickerParams, UseStaticPickerProps } from './useStaticPicker.types'; import { usePicker } from '../usePicker'; -import { PickersProvider } from '../../components/PickersProvider'; +import { PickerProvider } from '../../components/PickerProvider'; import { PickersLayout } from '../../../PickersLayout'; import { DIALOG_WIDTH } from '../../constants/dimensions'; import { FieldSection, PickerValidDate } from '../../../models'; @@ -50,7 +50,7 @@ export const useStaticPicker = < const Layout = slots?.layout ?? PickerStaticLayout; const renderPicker = () => ( - + {renderCurrentView()} - + ); return { renderPicker }; diff --git a/packages/x-date-pickers/src/internals/index.ts b/packages/x-date-pickers/src/internals/index.ts index 11a6e4657b7f3..ff38c2ef314bf 100644 --- a/packages/x-date-pickers/src/internals/index.ts +++ b/packages/x-date-pickers/src/internals/index.ts @@ -4,7 +4,7 @@ export type { PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps, } from './components/PickersArrowSwitcher'; -export { PickersProvider } from './components/PickersProvider'; +export { PickerProvider } from './components/PickerProvider'; export { PickersModalDialog } from './components/PickersModalDialog'; export type { PickersModalDialogSlots, diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index 836e164724c10..c94cf34ef1e33 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -422,7 +422,7 @@ { "name": "UseMultiInputTimeRangeFieldProps", "kind": "Interface" }, { "name": "useParsedFormat", "kind": "Variable" }, { "name": "usePickerLayout", "kind": "ExportAssignment" }, - { "name": "usePickersContext", "kind": "Variable" }, + { "name": "usePickerContext", "kind": "Variable" }, { "name": "usePickersTranslations", "kind": "Variable" }, { "name": "UseSingleInputDateRangeFieldProps", "kind": "Interface" }, { "name": "UseSingleInputDateTimeRangeFieldProps", "kind": "Interface" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index 94e004c0da2de..c95eb10a6fcf7 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -306,7 +306,7 @@ { "name": "UseDateTimeFieldProps", "kind": "Interface" }, { "name": "useParsedFormat", "kind": "Variable" }, { "name": "usePickerLayout", "kind": "ExportAssignment" }, - { "name": "usePickersContext", "kind": "Variable" }, + { "name": "usePickerContext", "kind": "Variable" }, { "name": "usePickersTranslations", "kind": "Variable" }, { "name": "useSplitFieldProps", "kind": "Variable" }, { "name": "UseTimeFieldProps", "kind": "Interface" },