From 7608dab6179985460ac6a9dce7bb9472409cd742 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Mon, 22 May 2023 12:40:59 +0300 Subject: [PATCH 01/55] WIP: add clearable behavior --- .../x-date-pickers/src/DateField/DateField.tsx | 17 ++++++++++++++++- .../src/internals/hooks/useField/useField.ts | 5 +++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx index 89ea32a651c3..31d3de752412 100644 --- a/packages/x-date-pickers/src/DateField/DateField.tsx +++ b/packages/x-date-pickers/src/DateField/DateField.tsx @@ -2,9 +2,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import MuiTextField from '@mui/material/TextField'; import { useThemeProps } from '@mui/material/styles'; +import ClearIcon from '@mui/icons-material/Clear'; import { useSlotProps } from '@mui/base/utils'; import { DateFieldProps } from './DateField.types'; import { useDateField } from './useDateField'; +import { IconButton } from '@mui/material'; type DateFieldComponent = (( props: DateFieldProps & React.RefAttributes, @@ -41,17 +43,30 @@ const DateField = React.forwardRef(function DateField( onPaste, inputMode, readOnly, + handleClearValue, + value, + clearable, ...fieldProps } = useDateField({ props: textFieldProps, inputRef: externalInputRef, }); + console.log(value, fieldProps); + return ( + + + ), + }} inputProps={{ ...fieldProps.inputProps, inputMode, onPaste, ref: inputRef }} /> ); diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts index 58648398488b..a7fce7037690 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -358,6 +358,10 @@ export const useField = < } }); + const handleClearValue = React.useCallback(() => { + console.log('hei there clearing'); + }); + useEnhancedEffect(() => { if (selectedSectionIndexes == null) { if (inputRef.current!.scrollLeft) { @@ -486,5 +490,6 @@ export const useField = < onMouseUp: handleInputMouseUp, error: inputError, ref: handleRef, + handleClearValue, }; }; From f9041a88b56e15ccc07659647361617d6a01ab63 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Mon, 22 May 2023 16:44:47 +0300 Subject: [PATCH 02/55] WIP: add clearable prop --- .../src/DateField/DateField.tsx | 13 ++++++------ .../src/internals/hooks/useField/useField.ts | 20 +++++++++++++------ .../hooks/useField/useField.types.ts | 1 + 3 files changed, 22 insertions(+), 12 deletions(-) diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx index 31d3de752412..ce51d99165f1 100644 --- a/packages/x-date-pickers/src/DateField/DateField.tsx +++ b/packages/x-date-pickers/src/DateField/DateField.tsx @@ -43,8 +43,6 @@ const DateField = React.forwardRef(function DateField( onPaste, inputMode, readOnly, - handleClearValue, - value, clearable, ...fieldProps } = useDateField({ @@ -52,8 +50,6 @@ const DateField = React.forwardRef(function DateField( inputRef: externalInputRef, }); - console.log(value, fieldProps); - return ( ( InputProps={{ ...fieldProps.InputProps, readOnly, - endAdornment: value && ( - + endAdornment: clearable && ( + { + console.log('wtf'); + }} + > ), diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts index a7fce7037690..4418bb62a69f 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -54,6 +54,7 @@ export const useField = < onMouseUp, onPaste, error, + clearable: forwardedClearable, ...otherForwardedProps }, fieldValueManager, @@ -73,6 +74,8 @@ export const useField = < const theme = useTheme(); const isRTL = theme.direction === 'rtl'; + let clearable = forwardedClearable; + const sectionOrder = React.useMemo( () => getSectionOrder(state.sections, isRTL), [state.sections, isRTL], @@ -358,10 +361,6 @@ export const useField = < } }); - const handleClearValue = React.useCallback(() => { - console.log('hei there clearing'); - }); - useEnhancedEffect(() => { if (selectedSectionIndexes == null) { if (inputRef.current!.scrollLeft) { @@ -451,8 +450,8 @@ export const useField = < }, [selectedSectionIndexes, state.sections]); const inputHasFocus = inputRef.current && inputRef.current === getActiveElement(document); - const shouldShowPlaceholder = - !inputHasFocus && valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue); + const areSectionsEmpty = valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue); + const shouldShowPlaceholder = !inputHasFocus && areSectionsEmpty; React.useImperativeHandle(unstableFieldRef, () => ({ getSections: () => state.sections, @@ -474,6 +473,14 @@ export const useField = < setSelectedSections: (activeSectionIndex) => setSelectedSections(activeSectionIndex), })); + const handleClearValue = React.useCallback(() => { + console.log('hei there clearing'); + }); + + React.useEffect(() => { + console.log(areSectionsEmpty, state.value); + }, [areSectionsEmpty]); + return { placeholder, autoComplete: 'off', @@ -491,5 +498,6 @@ export const useField = < error: inputError, ref: handleRef, handleClearValue, + clearable: Boolean(forwardedClearable && inputHasFocus && !areSectionsEmpty), }; }; diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts index 6fafe5697175..fb9baa85fabc 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts @@ -136,6 +136,7 @@ export interface UseFieldForwardedProps { onFocus?: () => void; onBlur?: () => void; error?: boolean; + clearable: boolean; } export type UseFieldResponse = Omit< From 64020ecbf871794909f3cf9fc3b7c3fa8ba9c489 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Tue, 23 May 2023 18:21:19 +0300 Subject: [PATCH 03/55] first iteration of clearable behavior on DateField hook and event propagation hover state and separate hook for endAdornment --- .../src/DateField/DateField.tsx | 34 ++++++----- .../src/DateField/DateField.types.ts | 8 ++- .../useClearEndAdornment.tsx | 53 ++++++++++++++++ .../src/internals/hooks/useField/useField.ts | 61 ++++++++++++++----- .../hooks/useField/useField.types.ts | 23 ++++++- .../internals/hooks/useField/useFieldState.ts | 9 +++ 6 files changed, 154 insertions(+), 34 deletions(-) create mode 100644 packages/x-date-pickers/src/internals/hooks/useClearEndAdornment/useClearEndAdornment.tsx diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx index ce51d99165f1..c16b3e3fadfb 100644 --- a/packages/x-date-pickers/src/DateField/DateField.tsx +++ b/packages/x-date-pickers/src/DateField/DateField.tsx @@ -2,11 +2,14 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import MuiTextField from '@mui/material/TextField'; import { useThemeProps } from '@mui/material/styles'; -import ClearIcon from '@mui/icons-material/Clear'; import { useSlotProps } from '@mui/base/utils'; -import { DateFieldProps } from './DateField.types'; +import { + DateFieldProps, + DateFieldSlotsComponent, + DateFieldSlotsComponentsProps, +} from './DateField.types'; import { useDateField } from './useDateField'; -import { IconButton } from '@mui/material'; +import { useClearEndAdornment } from '../internals/hooks/useClearEndAdornment/useClearEndAdornment'; type DateFieldComponent = (( props: DateFieldProps & React.RefAttributes, @@ -44,29 +47,32 @@ const DateField = React.forwardRef(function DateField( inputMode, readOnly, clearable, + onClear, ...fieldProps } = useDateField({ props: textFieldProps, inputRef: externalInputRef, }); + const ProcessedInputProps = useClearEndAdornment< + typeof fieldProps.InputProps, + DateFieldSlotsComponent, + DateFieldSlotsComponentsProps + >({ + onClear, + clearable, + InputProps: fieldProps.InputProps, + slots, + slotProps, + }); + return ( { - console.log('wtf'); - }} - > - - - ), }} inputProps={{ ...fieldProps.inputProps, inputMode, onPaste, ref: inputRef }} /> diff --git a/packages/x-date-pickers/src/DateField/DateField.types.ts b/packages/x-date-pickers/src/DateField/DateField.types.ts index acf3abdea8a1..a1436c845b94 100644 --- a/packages/x-date-pickers/src/DateField/DateField.types.ts +++ b/packages/x-date-pickers/src/DateField/DateField.types.ts @@ -12,6 +12,10 @@ import { } from '../internals/models/validation'; import { FieldsTextFieldProps } from '../internals/models/fields'; import { SlotsAndSlotProps } from '../internals/utils/slots-migration'; +import { + FieldSlotsComponents, + FieldSlotsComponentsProps, +} from '../internals/hooks/useField/useField.types'; export interface UseDateFieldParams { props: UseDateFieldComponentProps; @@ -45,7 +49,7 @@ export interface DateFieldProps export type DateFieldOwnerState = DateFieldProps; -export interface DateFieldSlotsComponent { +export interface DateFieldSlotsComponent extends FieldSlotsComponents { /** * Form control with an input to render the value. * Receives the same props as `@mui/material/TextField`. @@ -54,6 +58,6 @@ export interface DateFieldSlotsComponent { TextField?: React.ElementType; } -export interface DateFieldSlotsComponentsProps { +export interface DateFieldSlotsComponentsProps extends FieldSlotsComponentsProps { textField?: SlotComponentProps>; } diff --git a/packages/x-date-pickers/src/internals/hooks/useClearEndAdornment/useClearEndAdornment.tsx b/packages/x-date-pickers/src/internals/hooks/useClearEndAdornment/useClearEndAdornment.tsx new file mode 100644 index 000000000000..518c0e365974 --- /dev/null +++ b/packages/x-date-pickers/src/internals/hooks/useClearEndAdornment/useClearEndAdornment.tsx @@ -0,0 +1,53 @@ +import * as React from 'react'; + +import { useSlotProps } from '@mui/base'; +import ClearIcon from '@mui/icons-material/Clear'; +import IconButton from '@mui/material/IconButton'; +import { SlotsAndSlotProps } from '../../utils/slots-migration'; +import { FieldSlotsComponents, FieldSlotsComponentsProps } from '../useField/useField.types'; + +type UseClearEndAdornmentProps< + TInputProps extends { endAdornment?: React.ReactNode } | undefined, + TFieldSlotsComponents extends FieldSlotsComponents, + TFieldSlotsComponentsProps extends FieldSlotsComponentsProps, +> = { + clearable: boolean; + InputProps: TInputProps; + onClear: React.MouseEventHandler; +} & SlotsAndSlotProps; + +export const useClearEndAdornment = < + TInputProps extends { endAdornment?: React.ReactNode } | undefined, + TFieldSlotsComponents extends FieldSlotsComponents, + TFieldSlotsComponentsProps extends FieldSlotsComponentsProps, +>({ + clearable, + InputProps: ForwardedInputProps, + onClear, + slots, + slotProps, +}: UseClearEndAdornmentProps) => { + const EndClearIcon = slots?.clearIcon ?? ClearIcon; + const endClearIconProps = useSlotProps({ + elementType: ClearIcon, + externalSlotProps: slotProps?.clearIcon, + externalForwardedProps: {}, + ownerState: {}, + }); + + const InputProps = { + ...ForwardedInputProps, + endAdornment: clearable ? ( + + {ForwardedInputProps?.endAdornment} + + + + + ) : ( + ForwardedInputProps?.endAdornment + ), + }; + + return InputProps; +}; diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts index 4418bb62a69f..8c685094e87b 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -40,6 +40,7 @@ export const useField = < setTempAndroidValueStr, sectionsValueBoundaries, placeholder, + setIsHovered, } = useFieldState(params); const { @@ -54,7 +55,10 @@ export const useField = < onMouseUp, onPaste, error, - clearable: forwardedClearable, + clearable, + onClear, + onMouseEnter, + onMouseLeave, ...otherForwardedProps }, fieldValueManager, @@ -74,8 +78,6 @@ export const useField = < const theme = useTheme(); const isRTL = theme.direction === 'rtl'; - let clearable = forwardedClearable; - const sectionOrder = React.useMemo( () => getSectionOrder(state.sections, isRTL), [state.sections, isRTL], @@ -100,7 +102,6 @@ export const useField = < ); } const sectionIndex = nextSectionIndex === -1 ? state.sections.length - 1 : nextSectionIndex - 1; - setSelectedSections(sectionIndex); }; @@ -144,9 +145,18 @@ export const useField = < }); }); - const handleInputBlur = useEventCallback((...args) => { - onBlur?.(...(args as [])); - setSelectedSections(null); + const handleInputBlur = useEventCallback((event: React.FocusEvent, ...args) => { + const { relatedTarget } = event; + + const shouldBlur = + !relatedTarget && + relatedTarget !== inputRef.current && + !inputRef.current.contains(relatedTarget); + + if (shouldBlur) { + onBlur?.(event, ...(args as [])); + setSelectedSections(null); + } }); const handleInputPaste = useEventCallback((event: React.ClipboardEvent) => { @@ -450,8 +460,13 @@ export const useField = < }, [selectedSectionIndexes, state.sections]); const inputHasFocus = inputRef.current && inputRef.current === getActiveElement(document); - const areSectionsEmpty = valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue); - const shouldShowPlaceholder = !inputHasFocus && areSectionsEmpty; + const areAllSectionsEmpty = valueManager.areValuesEqual( + utils, + state.value, + valueManager.emptyValue, + ); + const shouldShowPlaceholder = !inputHasFocus && areAllSectionsEmpty; + const isInputHovered = state.isHovered; React.useImperativeHandle(unstableFieldRef, () => ({ getSections: () => state.sections, @@ -473,13 +488,25 @@ export const useField = < setSelectedSections: (activeSectionIndex) => setSelectedSections(activeSectionIndex), })); - const handleClearValue = React.useCallback(() => { - console.log('hei there clearing'); + const handleClearValue = useEventCallback((event: React.MouseEvent, ...args) => { + // the click event of the endAdornmnet propagates to the input and triggers the `handleInputClick` handler. + event.stopPropagation(); + event.preventDefault(); + onClear?.(event, ...(args as [])); + clearValue(); + setSelectedSections(0); + inputRef?.current?.focus(); }); - React.useEffect(() => { - console.log(areSectionsEmpty, state.value); - }, [areSectionsEmpty]); + const handleMouseEnter = useEventCallback((event: React.MouseEvent, ...args) => { + onMouseEnter?.(event, ...(args as [])); + setIsHovered(true); + }); + + const handleMouseLeave = useEventCallback((event: React.MouseEvent, ...args) => { + onMouseLeave?.(event, ...(args as [])); + setIsHovered(false); + }); return { placeholder, @@ -495,9 +522,11 @@ export const useField = < onChange: handleInputChange, onKeyDown: handleInputKeyDown, onMouseUp: handleInputMouseUp, + onClear: handleClearValue, error: inputError, ref: handleRef, - handleClearValue, - clearable: Boolean(forwardedClearable && inputHasFocus && !areSectionsEmpty), + clearable: Boolean(clearable && !areAllSectionsEmpty && (inputHasFocus || isInputHovered)), + onMouseEnter: handleMouseEnter, + onMouseLeave: handleMouseLeave, }; }; diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts index fb9baa85fabc..b5ffe2958605 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts @@ -1,4 +1,6 @@ import * as React from 'react'; +import { SlotComponentProps } from '@mui/base/utils'; +import ClearIcon from '@mui/icons-material/Clear'; import { FieldSectionType, FieldSection, @@ -134,9 +136,12 @@ export interface UseFieldForwardedProps { onPaste?: React.ClipboardEventHandler; onClick?: () => void; onFocus?: () => void; - onBlur?: () => void; + onBlur?: React.FocusEventHandler; error?: boolean; - clearable: boolean; + onClear?: React.MouseEventHandler; + clearable?: boolean; + onMouseEnter?: React.MouseEventHandler; + onMouseLeave?: React.MouseEventHandler; } export type UseFieldResponse = Omit< @@ -318,6 +323,7 @@ export interface UseFieldState { * The property below allows us to set the first `onChange` value into state waiting for the second one. */ tempValueStrAndroid: string | null; + isHovered: boolean; } export type UseFieldValidationProps< @@ -360,3 +366,16 @@ export type SectionOrdering = { */ endIndex: number; }; + +export interface FieldSlotsComponents { + /** + * Icon to display inside the clear button. + * Receives the same props as `@mui/icons-material/Clear`. + * @default ClearIcon from '@mui/icons-material/Clear' + */ + ClearIcon?: React.ElementType; +} + +export interface FieldSlotsComponentsProps { + clearIcon?: SlotComponentProps; +} diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts index 14343b895869..c7b80c04dafd 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts @@ -113,6 +113,7 @@ export const useFieldState = < valueManager.getTodayValue(utils, valueType), ), tempValueStrAndroid: null, + isHovered: false, }; }); @@ -133,6 +134,13 @@ export const useFieldState = < })); }; + const setIsHovered = (isHovered: boolean) => { + setState((prevState) => ({ + ...prevState, + isHovered, + })); + }; + const selectedSectionIndexes = React.useMemo(() => { if (selectedSections == null) { return null; @@ -412,5 +420,6 @@ export const useFieldState = < setTempAndroidValueStr, sectionsValueBoundaries, placeholder, + setIsHovered, }; }; From a5df0c870c7b4983ed5f1c94c16253829be550e7 Mon Sep 17 00:00:00 2001 From: noraleonte <72460825+noraleonte@users.noreply.github.com> Date: Wed, 31 May 2023 13:06:55 +0300 Subject: [PATCH 04/55] Update packages/x-date-pickers/src/internals/hooks/useField/useField.ts Co-authored-by: Lukas Signed-off-by: noraleonte <72460825+noraleonte@users.noreply.github.com> --- .../x-date-pickers/src/internals/hooks/useField/useField.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts index 8c685094e87b..7a4c63f41d88 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -489,7 +489,7 @@ export const useField = < })); const handleClearValue = useEventCallback((event: React.MouseEvent, ...args) => { - // the click event of the endAdornmnet propagates to the input and triggers the `handleInputClick` handler. + // the click event on the endAdornmnet would propagate to the input and trigger the `handleInputClick` handler. event.stopPropagation(); event.preventDefault(); onClear?.(event, ...(args as [])); From ad72dda162e205a635cd6fe7d13c4ef81751404e Mon Sep 17 00:00:00 2001 From: noraleonte Date: Thu, 8 Jun 2023 18:40:46 +0300 Subject: [PATCH 05/55] add clearable prop to fields --- .../SingleInputDateRangeField.tsx | 27 +++++++++-- .../SingleInputDateRangeField.types.ts | 9 +++- .../SingleInputDateTimeRangeField.tsx | 27 +++++++++-- .../SingleInputDateTimeRangeField.types.ts | 9 +++- .../SingleInputTimeRangeField.tsx | 27 +++++++++-- .../SingleInputTimeRangeField.types.ts | 9 +++- .../src/DateField/DateField.tsx | 22 ++++++--- .../src/DateTimeField/DateTimeField.tsx | 26 ++++++++-- .../src/DateTimeField/DateTimeField.types.ts | 8 +++- .../src/TimeField/TimeField.tsx | 27 +++++++++-- .../src/TimeField/TimeField.types.ts | 8 +++- ...learEndAdornment.tsx => useClearField.tsx} | 48 ++++++++++++++----- .../src/internals/hooks/useField/useField.ts | 8 +++- .../hooks/useField/useField.types.ts | 2 +- 14 files changed, 212 insertions(+), 45 deletions(-) rename packages/x-date-pickers/src/internals/hooks/{useClearEndAdornment/useClearEndAdornment.tsx => useClearField.tsx} (56%) diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx index 42834dce277a..1d939430deac 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx @@ -3,7 +3,12 @@ import PropTypes from 'prop-types'; import MuiTextField from '@mui/material/TextField'; import { useThemeProps } from '@mui/material/styles'; import { useSlotProps } from '@mui/base/utils'; -import { SingleInputDateRangeFieldProps } from './SingleInputDateRangeField.types'; +import { useClearField } from '@mui/x-date-pickers/internals/hooks/useClearField'; +import { + SingleInputDateRangeFieldProps, + SingleInputDateRangeFieldSlotsComponentsProps, + SingleInputDateRangeFieldSlotsComponent, +} from './SingleInputDateRangeField.types'; import { useSingleInputDateRangeField } from './useSingleInputDateRangeField'; type DateRangeFieldComponent = (( @@ -42,17 +47,33 @@ const SingleInputDateRangeField = React.forwardRef(function SingleInputDateRange onPaste, inputMode, readOnly, + clearable, + onClear, ...fieldProps } = useSingleInputDateRangeField({ props: textFieldProps, inputRef: externalInputRef, }); + const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearField< + typeof fieldProps, + typeof fieldProps.InputProps, + SingleInputDateRangeFieldSlotsComponent, + SingleInputDateRangeFieldSlotsComponentsProps + >({ + onClear, + clearable, + fieldProps, + InputProps: fieldProps.InputProps, + slots, + slotProps, + }); + return ( ); diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts index d28b7ed45cd6..0016e13114fb 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts @@ -2,6 +2,10 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/base/utils'; import TextField from '@mui/material/TextField'; import { FieldsTextFieldProps, UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals'; +import { + FieldSlotsComponents, + FieldSlotsComponentsProps, +} from '@mui/x-date-pickers/internals/hooks/useField/useField.types'; import { UseDateRangeFieldDefaultizedProps, UseDateRangeFieldProps } from '../internal/models'; export interface UseSingleInputDateRangeFieldParams { @@ -50,7 +54,7 @@ export interface SingleInputDateRangeFieldProps export type SingleInputDateRangeFieldOwnerState = SingleInputDateRangeFieldProps; -export interface SingleInputDateRangeFieldSlotsComponent { +export interface SingleInputDateRangeFieldSlotsComponent extends FieldSlotsComponents { /** * Form control with an input to render the value. * Receives the same props as `@mui/material/TextField`. @@ -59,6 +63,7 @@ export interface SingleInputDateRangeFieldSlotsComponent { TextField?: React.ElementType; } -export interface SingleInputDateRangeFieldSlotsComponentsProps { +export interface SingleInputDateRangeFieldSlotsComponentsProps + extends FieldSlotsComponentsProps { textField?: SlotComponentProps>; } diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx index 23b2245f72ec..be07b96aa47a 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx @@ -3,7 +3,12 @@ import PropTypes from 'prop-types'; import MuiTextField from '@mui/material/TextField'; import { useThemeProps } from '@mui/material/styles'; import { useSlotProps } from '@mui/base/utils'; -import { SingleInputDateTimeRangeFieldProps } from './SingleInputDateTimeRangeField.types'; +import { useClearField } from '@mui/x-date-pickers/internals/hooks/useClearField'; +import { + SingleInputDateTimeRangeFieldProps, + SingleInputDateTimeRangeFieldSlotsComponent, + SingleInputDateTimeRangeFieldSlotsComponentsProps, +} from './SingleInputDateTimeRangeField.types'; import { useSingleInputDateTimeRangeField } from './useSingleInputDateTimeRangeField'; type DateRangeFieldComponent = (( @@ -43,17 +48,33 @@ const SingleInputDateTimeRangeField = React.forwardRef(function SingleInputDateT onPaste, inputMode, readOnly, + clearable, + onClear, ...fieldProps } = useSingleInputDateTimeRangeField({ props: textFieldProps, inputRef: externalInputRef, }); + const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearField< + typeof fieldProps, + typeof fieldProps.InputProps, + SingleInputDateTimeRangeFieldSlotsComponent, + SingleInputDateTimeRangeFieldSlotsComponentsProps + >({ + onClear, + clearable, + fieldProps, + InputProps: fieldProps.InputProps, + slots, + slotProps, + }); + return ( ); diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts index 363e3f8279e7..cc93d7e5245b 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts @@ -3,6 +3,10 @@ import { SlotComponentProps } from '@mui/base/utils'; import TextField from '@mui/material/TextField'; import { FieldsTextFieldProps } from '@mui/x-date-pickers/internals/models/fields'; import { UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals'; +import { + FieldSlotsComponents, + FieldSlotsComponentsProps, +} from '@mui/x-date-pickers/internals/hooks/useField/useField.types'; import { UseDateTimeRangeFieldDefaultizedProps, UseDateTimeRangeFieldProps, @@ -56,7 +60,7 @@ export interface SingleInputDateTimeRangeFieldProps export type SingleInputDateTimeRangeFieldOwnerState = SingleInputDateTimeRangeFieldProps; -export interface SingleInputDateTimeRangeFieldSlotsComponent { +export interface SingleInputDateTimeRangeFieldSlotsComponent extends FieldSlotsComponents { /** * Form control with an input to render the value. * Receives the same props as `@mui/material/TextField`. @@ -65,7 +69,8 @@ export interface SingleInputDateTimeRangeFieldSlotsComponent { TextField?: React.ElementType; } -export interface SingleInputDateTimeRangeFieldSlotsComponentsProps { +export interface SingleInputDateTimeRangeFieldSlotsComponentsProps + extends FieldSlotsComponentsProps { textField?: SlotComponentProps< typeof TextField, {}, diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx index 669ee8d2d48b..c16c1a9ff4ce 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx @@ -1,9 +1,14 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import { useClearField } from '@mui/x-date-pickers/internals/hooks/useClearField'; import MuiTextField from '@mui/material/TextField'; import { useThemeProps } from '@mui/material/styles'; import { useSlotProps } from '@mui/base/utils'; -import { SingleInputTimeRangeFieldProps } from './SingleInputTimeRangeField.types'; +import { + SingleInputTimeRangeFieldProps, + SingleInputTimeRangeFieldSlotsComponent, + SingleInputTimeRangeFieldSlotsComponentsProps, +} from './SingleInputTimeRangeField.types'; import { useSingleInputTimeRangeField } from './useSingleInputTimeRangeField'; type DateRangeFieldComponent = (( @@ -42,17 +47,33 @@ const SingleInputTimeRangeField = React.forwardRef(function SingleInputTimeRange onPaste, inputMode, readOnly, + clearable, + onClear, ...fieldProps } = useSingleInputTimeRangeField({ props: textFieldProps, inputRef: externalInputRef, }); + const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearField< + typeof fieldProps, + typeof fieldProps.InputProps, + SingleInputTimeRangeFieldSlotsComponent, + SingleInputTimeRangeFieldSlotsComponentsProps + >({ + onClear, + clearable, + fieldProps, + InputProps: fieldProps.InputProps, + slots, + slotProps, + }); + return ( ); diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts index 3cd06cf541a3..b28e74051dda 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts @@ -1,6 +1,10 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/base/utils'; import TextField from '@mui/material/TextField'; +import { + FieldSlotsComponents, + FieldSlotsComponentsProps, +} from '@mui/x-date-pickers/internals/hooks/useField/useField.types'; import { FieldsTextFieldProps } from '@mui/x-date-pickers/internals/models/fields'; import { UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals'; import { UseTimeRangeFieldDefaultizedProps, UseTimeRangeFieldProps } from '../internal/models'; @@ -51,7 +55,7 @@ export interface SingleInputTimeRangeFieldProps export type SingleInputTimeRangeFieldOwnerState = SingleInputTimeRangeFieldProps; -export interface SingleInputTimeRangeFieldSlotsComponent { +export interface SingleInputTimeRangeFieldSlotsComponent extends FieldSlotsComponents { /** * Form control with an input to render the value. * Receives the same props as `@mui/material/TextField`. @@ -60,6 +64,7 @@ export interface SingleInputTimeRangeFieldSlotsComponent { TextField?: React.ElementType; } -export interface SingleInputTimeRangeFieldSlotsComponentsProps { +export interface SingleInputTimeRangeFieldSlotsComponentsProps + extends FieldSlotsComponentsProps { textField?: SlotComponentProps>; } diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx index c16b3e3fadfb..393a0f61b140 100644 --- a/packages/x-date-pickers/src/DateField/DateField.tsx +++ b/packages/x-date-pickers/src/DateField/DateField.tsx @@ -9,7 +9,7 @@ import { DateFieldSlotsComponentsProps, } from './DateField.types'; import { useDateField } from './useDateField'; -import { useClearEndAdornment } from '../internals/hooks/useClearEndAdornment/useClearEndAdornment'; +import { useClearField } from '../internals/hooks/useClearField'; type DateFieldComponent = (( props: DateFieldProps & React.RefAttributes, @@ -24,12 +24,20 @@ const DateField = React.forwardRef(function DateField( name: 'MuiDateField', }); - const { components, componentsProps, slots, slotProps, InputProps, inputProps, ...other } = - themeProps; + const { + components, + componentsProps, + slots, + slotProps, + InputProps: DateFieldInputProps, + inputProps, + ...other + } = themeProps; const ownerState = themeProps; const TextField = slots?.textField ?? components?.TextField ?? MuiTextField; + const { inputRef: externalInputRef, ...textFieldProps }: DateFieldProps = useSlotProps({ elementType: TextField, externalSlotProps: slotProps?.textField ?? componentsProps?.textField, @@ -39,7 +47,7 @@ const DateField = React.forwardRef(function DateField( // TODO: Remove when mui/material-ui#35088 will be merged textFieldProps.inputProps = { ...textFieldProps.inputProps, ...inputProps }; - textFieldProps.InputProps = { ...textFieldProps.InputProps, ...InputProps }; + textFieldProps.InputProps = { ...textFieldProps.InputProps, ...DateFieldInputProps }; const { ref: inputRef, @@ -54,13 +62,15 @@ const DateField = React.forwardRef(function DateField( inputRef: externalInputRef, }); - const ProcessedInputProps = useClearEndAdornment< + const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearField< + typeof fieldProps, typeof fieldProps.InputProps, DateFieldSlotsComponent, DateFieldSlotsComponentsProps >({ onClear, clearable, + fieldProps, InputProps: fieldProps.InputProps, slots, slotProps, @@ -69,7 +79,7 @@ const DateField = React.forwardRef(function DateField( return ( ( props: DateTimeFieldProps & React.RefAttributes, @@ -43,17 +48,32 @@ const DateTimeField = React.forwardRef(function DateTimeField( onPaste, inputMode, readOnly, + clearable, + onClear, ...fieldProps } = useDateTimeField({ props: textFieldProps, inputRef: externalInputRef, }); + const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearField< + typeof fieldProps, + typeof fieldProps.InputProps, + DateTimeFieldSlotsComponent, + DateTimeFieldSlotsComponentsProps + >({ + onClear, + clearable, + fieldProps, + InputProps: fieldProps.InputProps, + slots, + slotProps, + }); return ( ); diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts b/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts index 14c2c3476d38..ab6e17c3e4dd 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts @@ -15,6 +15,10 @@ import { } from '../internals/models/validation'; import { FieldsTextFieldProps } from '../internals/models/fields'; import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration'; +import { + FieldSlotsComponents, + FieldSlotsComponentsProps, +} from '../internals/hooks/useField/useField.types'; export interface UseDateTimeFieldParams { props: UseDateTimeFieldComponentProps; @@ -79,7 +83,7 @@ export interface DateTimeFieldProps export type DateTimeFieldOwnerState = DateTimeFieldProps; -export interface DateTimeFieldSlotsComponent { +export interface DateTimeFieldSlotsComponent extends FieldSlotsComponents { /** * Form control with an input to render the value. * Receives the same props as `@mui/material/TextField`. @@ -88,6 +92,6 @@ export interface DateTimeFieldSlotsComponent { TextField?: React.ElementType; } -export interface DateTimeFieldSlotsComponentsProps { +export interface DateTimeFieldSlotsComponentsProps extends FieldSlotsComponentsProps { textField?: SlotComponentProps>; } diff --git a/packages/x-date-pickers/src/TimeField/TimeField.tsx b/packages/x-date-pickers/src/TimeField/TimeField.tsx index 5c4f79f05570..f00df5cb9024 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.tsx +++ b/packages/x-date-pickers/src/TimeField/TimeField.tsx @@ -3,8 +3,13 @@ import PropTypes from 'prop-types'; import MuiTextField from '@mui/material/TextField'; import { useThemeProps } from '@mui/material/styles'; import { useSlotProps } from '@mui/base/utils'; -import { TimeFieldProps } from './TimeField.types'; +import { + TimeFieldProps, + TimeFieldSlotsComponent, + TimeFieldSlotsComponentsProps, +} from './TimeField.types'; import { useTimeField } from './useTimeField'; +import { useClearField } from '../internals/hooks/useClearField'; type TimeFieldComponent = (( props: TimeFieldProps & React.RefAttributes, @@ -41,17 +46,33 @@ const TimeField = React.forwardRef(function TimeField( onPaste, inputMode, readOnly, + clearable, + onClear, ...fieldProps } = useTimeField({ props: textFieldProps, inputRef: externalInputRef, }); + const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearField< + typeof fieldProps, + typeof fieldProps.InputProps, + TimeFieldSlotsComponent, + TimeFieldSlotsComponentsProps + >({ + onClear, + clearable, + fieldProps, + InputProps: fieldProps.InputProps, + slots, + slotProps, + }); + return ( ); diff --git a/packages/x-date-pickers/src/TimeField/TimeField.types.ts b/packages/x-date-pickers/src/TimeField/TimeField.types.ts index 341af4ddc433..ae5a0321272a 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.types.ts +++ b/packages/x-date-pickers/src/TimeField/TimeField.types.ts @@ -7,6 +7,10 @@ import { BaseTimeValidationProps, TimeValidationProps } from '../internals/model import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration'; import { FieldsTextFieldProps } from '../internals/models/fields'; import { FieldSection, TimeValidationError } from '../models'; +import { + FieldSlotsComponents, + FieldSlotsComponentsProps, +} from '../internals/hooks/useField/useField.types'; export interface UseTimeFieldParams { props: UseTimeFieldComponentProps; @@ -66,7 +70,7 @@ export interface TimeFieldProps export type TimeFieldOwnerState = TimeFieldProps; -export interface TimeFieldSlotsComponent { +export interface TimeFieldSlotsComponent extends FieldSlotsComponents { /** * Form control with an input to render the value. * Receives the same props as `@mui/material/TextField`. @@ -75,6 +79,6 @@ export interface TimeFieldSlotsComponent { TextField?: React.ElementType; } -export interface TimeFieldSlotsComponentsProps { +export interface TimeFieldSlotsComponentsProps extends FieldSlotsComponentsProps { textField?: SlotComponentProps>; } diff --git a/packages/x-date-pickers/src/internals/hooks/useClearEndAdornment/useClearEndAdornment.tsx b/packages/x-date-pickers/src/internals/hooks/useClearField.tsx similarity index 56% rename from packages/x-date-pickers/src/internals/hooks/useClearEndAdornment/useClearEndAdornment.tsx rename to packages/x-date-pickers/src/internals/hooks/useClearField.tsx index 518c0e365974..2a0c903bf734 100644 --- a/packages/x-date-pickers/src/internals/hooks/useClearEndAdornment/useClearEndAdornment.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useClearField.tsx @@ -3,35 +3,47 @@ import * as React from 'react'; import { useSlotProps } from '@mui/base'; import ClearIcon from '@mui/icons-material/Clear'; import IconButton from '@mui/material/IconButton'; -import { SlotsAndSlotProps } from '../../utils/slots-migration'; -import { FieldSlotsComponents, FieldSlotsComponentsProps } from '../useField/useField.types'; +import { FieldSlotsComponents, FieldSlotsComponentsProps } from './useField/useField.types'; +import { FieldsTextFieldProps } from '../models'; -type UseClearEndAdornmentProps< +type UseClearFieldProps< + TFieldProps extends FieldsTextFieldProps & { focus?: boolean }, TInputProps extends { endAdornment?: React.ReactNode } | undefined, - TFieldSlotsComponents extends FieldSlotsComponents, + TFieldSlots extends FieldSlotsComponents, TFieldSlotsComponentsProps extends FieldSlotsComponentsProps, > = { clearable: boolean; + fieldProps?: TFieldProps; InputProps: TInputProps; onClear: React.MouseEventHandler; -} & SlotsAndSlotProps; + slots?: { [K in keyof TFieldSlots as Uncapitalize]: TFieldSlots[K] }; + slotProps?: TFieldSlotsComponentsProps; +}; -export const useClearEndAdornment = < +export const useClearField = < + TFieldProps extends FieldsTextFieldProps & { + focus?: boolean; + }, TInputProps extends { endAdornment?: React.ReactNode } | undefined, TFieldSlotsComponents extends FieldSlotsComponents, TFieldSlotsComponentsProps extends FieldSlotsComponentsProps, >({ clearable, + fieldProps: forwardedFieldProps, InputProps: ForwardedInputProps, onClear, slots, slotProps, -}: UseClearEndAdornmentProps) => { +}: UseClearFieldProps< + TFieldProps, + TInputProps, + TFieldSlotsComponents, + TFieldSlotsComponentsProps +>) => { const EndClearIcon = slots?.clearIcon ?? ClearIcon; const endClearIconProps = useSlotProps({ elementType: ClearIcon, externalSlotProps: slotProps?.clearIcon, - externalForwardedProps: {}, ownerState: {}, }); @@ -39,15 +51,29 @@ export const useClearEndAdornment = < ...ForwardedInputProps, endAdornment: clearable ? ( - {ForwardedInputProps?.endAdornment} - + + {ForwardedInputProps?.endAdornment} ) : ( ForwardedInputProps?.endAdornment ), }; - return InputProps; + const fieldProps = { + ...forwardedFieldProps, + sx: { + '& .clearButton': { + visibility: forwardedFieldProps?.focused ? 'visible' : 'hidden', + }, + + '&:hover .clearButton': { + visibility: 'visible', + }, + ...forwardedFieldProps?.sx, + }, + }; + + return { InputProps, fieldProps }; }; diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts index 8c685094e87b..831eed40e4fe 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -72,6 +72,7 @@ export const useField = < sectionsValueBoundaries, setTempAndroidValueStr, }); + const inputRef = React.useRef(null); const handleRef = useForkRef(inputRefProp, inputRef); const focusTimeoutRef = React.useRef(undefined); @@ -466,7 +467,6 @@ export const useField = < valueManager.emptyValue, ); const shouldShowPlaceholder = !inputHasFocus && areAllSectionsEmpty; - const isInputHovered = state.isHovered; React.useImperativeHandle(unstableFieldRef, () => ({ getSections: () => state.sections, @@ -489,6 +489,9 @@ export const useField = < })); const handleClearValue = useEventCallback((event: React.MouseEvent, ...args) => { + if (readOnly) { + return; + } // the click event of the endAdornmnet propagates to the input and triggers the `handleInputClick` handler. event.stopPropagation(); event.preventDefault(); @@ -525,7 +528,8 @@ export const useField = < onClear: handleClearValue, error: inputError, ref: handleRef, - clearable: Boolean(clearable && !areAllSectionsEmpty && (inputHasFocus || isInputHovered)), + clearable: Boolean(clearable && !areAllSectionsEmpty), + focused: inputHasFocus, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, }; diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts index b5ffe2958605..4239f8f54861 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts @@ -371,7 +371,7 @@ export interface FieldSlotsComponents { /** * Icon to display inside the clear button. * Receives the same props as `@mui/icons-material/Clear`. - * @default ClearIcon from '@mui/icons-material/Clear' + * @default Clear from '@mui/icons-material' */ ClearIcon?: React.ElementType; } From 2d47443abb6775dd8e208149bc7ff272293c98ac Mon Sep 17 00:00:00 2001 From: noraleonte Date: Tue, 20 Jun 2023 16:55:40 +0300 Subject: [PATCH 06/55] implement clearable for simple pickers --- .../useDesktopRangePicker/useDesktopRangePicker.tsx | 3 +++ .../useDesktopRangePicker.types.ts | 5 +++++ .../useMobileRangePicker/useMobileRangePicker.tsx | 2 ++ .../useMobileRangePicker.types.ts | 5 +++++ .../src/internals/hooks/useClearField.tsx | 11 ++++++++--- .../hooks/useDesktopPicker/useDesktopPicker.tsx | 2 ++ .../hooks/useDesktopPicker/useDesktopPicker.types.ts | 6 ++++++ .../src/internals/hooks/useField/useField.ts | 5 +---- .../hooks/useMobilePicker/useMobilePicker.tsx | 2 ++ .../hooks/useMobilePicker/useMobilePicker.types.ts | 5 +++++ .../src/internals/models/props/basePickerProps.tsx | 8 +++++++- 11 files changed, 46 insertions(+), 8 deletions(-) diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx b/packages/x-date-pickers-pro/src/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx index 3186163a2cbe..ab30a710f275 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx @@ -53,6 +53,8 @@ export const useDesktopRangePicker = < autoFocus, disableOpenPicker, localeText, + fieldProps: innerFieldProps, + } = props; const fieldContainerRef = React.useRef(null); @@ -119,6 +121,7 @@ export const useDesktopRangePicker = < autoFocus: autoFocus && !props.open, ref: fieldContainerRef, ...(fieldType === 'single-input' && { inputRef }), + ...innerFieldProps }, ownerState: props, }); diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts b/packages/x-date-pickers-pro/src/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts index 1147492a4b67..4bef9d824684 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts @@ -74,6 +74,11 @@ export interface UseDesktopRangePickerProps< * @default {} */ slotProps?: UseDesktopRangePickerSlotsComponentsProps; + /** + * Props used only for the date input. Passed down to [TextField](https://mui.com/api/text-field/) component. + * @default {} + */ + fieldProps?: {clearable?: boolean, onClear?: React.MouseEventHandler}; } export interface DesktopRangePickerAdditionalViewProps diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.tsx b/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.tsx index 33abbf9de8b6..a063f5340ccb 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.tsx @@ -51,6 +51,7 @@ export const useMobileRangePicker = < disabled, disableOpenPicker, localeText, + fieldProps: innerFieldProps, } = props; const { rangePosition, onRangePositionChange, singleInputFieldRef } = useRangePosition(props); @@ -100,6 +101,7 @@ export const useMobileRangePicker = < format, formatDensity, ...(fieldType === 'single-input' && { inputRef }), + ...innerFieldProps }, ownerState: props, }); diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.types.ts b/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.types.ts index 2ba30b71723c..f3a8c66fcca1 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.types.ts @@ -67,6 +67,11 @@ export interface UseMobileRangePickerProps< * @default {} */ slotProps?: UseMobileRangePickerSlotsComponentsProps; + /** + * Props used only for the date input. Passed down to [TextField](https://mui.com/api/text-field/) component. + * @default {} + */ + fieldProps?: {clearable?: boolean, onClear?: React.MouseEventHandler}; } export interface MobileRangePickerAdditionalViewProps diff --git a/packages/x-date-pickers/src/internals/hooks/useClearField.tsx b/packages/x-date-pickers/src/internals/hooks/useClearField.tsx index 2a0c903bf734..554329887485 100644 --- a/packages/x-date-pickers/src/internals/hooks/useClearField.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useClearField.tsx @@ -65,11 +65,16 @@ export const useClearField = < ...forwardedFieldProps, sx: { '& .clearButton': { - visibility: forwardedFieldProps?.focused ? 'visible' : 'hidden', + visibility: 'visible', }, + '@media (pointer: fine)': { + '& .clearButton': { + visibility: forwardedFieldProps?.focused ? 'visible' : 'hidden', + }, - '&:hover .clearButton': { - visibility: 'visible', + '&:hover .clearButton': { + visibility: 'visible', + }, }, ...forwardedFieldProps?.sx, }, 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 970cc59a9080..45c1a85e6049 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx @@ -42,6 +42,7 @@ export const useDesktopPicker = < disabled, autoFocus, localeText, + fieldProps: innerFieldProps, } = props; const utils = useUtils(); @@ -112,6 +113,7 @@ export const useDesktopPicker = < label, autoFocus: autoFocus && !props.open, focused: open ? true : undefined, + ...innerFieldProps }, ownerState: props, }); diff --git a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts index f19c210f4c19..054b19b08a32 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts @@ -110,6 +110,12 @@ export interface UseDesktopPickerProps< * @default {} */ slotProps?: UseDesktopPickerSlotsComponentsProps; + /** + * Props used only for the date input. Passed down to [TextField](https://mui.com/api/text-field/) component. + * @default {} + */ + fieldProps?: {clearable?: boolean, onClear?: React.MouseEventHandler}; + } export interface UseDesktopPickerParams< diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts index 1581bd203272..14374e320c38 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -489,9 +489,6 @@ export const useField = < })); const handleClearValue = useEventCallback((event: React.MouseEvent, ...args) => { - if (readOnly) { - return; - } // the click event on the endAdornmnet would propagate to the input and trigger the `handleInputClick` handler. event.stopPropagation(); event.preventDefault(); @@ -528,7 +525,7 @@ export const useField = < onClear: handleClearValue, error: inputError, ref: handleRef, - clearable: Boolean(clearable && !areAllSectionsEmpty), + clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly ), focused: inputHasFocus, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, 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 5f0187380290..7d4562745c67 100644 --- a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx @@ -40,6 +40,7 @@ export const useMobilePicker = < readOnly, disabled, localeText, + fieldProps: innerFieldProps, } = props; const utils = useUtils(); @@ -84,6 +85,7 @@ export const useMobilePicker = < format, formatDensity, label, + ...innerFieldProps }, ownerState: props, }); diff --git a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts index 769717b6523c..1e31461ed046 100644 --- a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts @@ -79,6 +79,11 @@ export interface UseMobilePickerProps< * @default {} */ slotProps?: UseMobilePickerSlotsComponentsProps; + /** + * Props used only for the date input. Passed down to [TextField](https://mui.com/api/text-field/) component. + * @default {} + */ + fieldProps?: {clearable?: boolean, onClear?: React.MouseEventHandler}; } export interface UseMobilePickerParams< diff --git a/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx b/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx index 1fc745944af2..405b5789855b 100644 --- a/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx +++ b/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx @@ -44,7 +44,13 @@ export interface BasePickerInputProps< > extends Omit< MakeOptional, 'openTo' | 'views'>, 'viewRenderers' - > {} + > { + /** + * Props used only for the date input. Passed down to [TextField](https://mui.com/api/text-field/) component. + * @default {} + */ + fieldProps?: {clearable?: boolean, onClear?: React.MouseEventHandler}; + } /** * Props common to all non-static pickers. From d2504ff4836667e2cddaef4daf27041ee451c56f Mon Sep 17 00:00:00 2001 From: noraleonte Date: Tue, 20 Jun 2023 17:22:05 +0300 Subject: [PATCH 07/55] remove hover behavior from hook --- .../src/internals/hooks/useField/useField.ts | 14 -------------- .../src/internals/hooks/useField/useField.types.ts | 3 --- .../src/internals/hooks/useField/useFieldState.ts | 8 -------- 3 files changed, 25 deletions(-) diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts index 0c0bfb0ac7a8..eb3ba93ec92a 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -57,8 +57,6 @@ export const useField = < error, clearable, onClear, - onMouseEnter, - onMouseLeave, ...otherForwardedProps }, fieldValueManager, @@ -514,16 +512,6 @@ export const useField = < inputRef?.current?.focus(); }); - const handleMouseEnter = useEventCallback((event: React.MouseEvent, ...args) => { - onMouseEnter?.(event, ...(args as [])); - setIsHovered(true); - }); - - const handleMouseLeave = useEventCallback((event: React.MouseEvent, ...args) => { - onMouseLeave?.(event, ...(args as [])); - setIsHovered(false); - }); - return { placeholder, autoComplete: 'off', @@ -543,7 +531,5 @@ export const useField = < ref: handleRef, clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly ), focused: inputHasFocus, - onMouseEnter: handleMouseEnter, - onMouseLeave: handleMouseLeave, }; }; diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts index 13d951d51cd4..3fed9d92b239 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts @@ -149,8 +149,6 @@ export interface UseFieldForwardedProps { error?: boolean; onClear?: React.MouseEventHandler; clearable?: boolean; - onMouseEnter?: React.MouseEventHandler; - onMouseLeave?: React.MouseEventHandler; } export type UseFieldResponse = Omit< @@ -332,7 +330,6 @@ export interface UseFieldState { * The property below allows us to set the first `onChange` value into state waiting for the second one. */ tempValueStrAndroid: string | null; - isHovered: boolean; } export type UseFieldValidationProps< diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts index d9a79e67a707..8f2e1d0b3cd2 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts @@ -138,7 +138,6 @@ export const useFieldState = < value: valueFromTheOutside, referenceValue: valueManager.emptyValue, tempValueStrAndroid: null, - isHovered: false, }; const granularity = getSectionTypeGranularity(sections); @@ -174,13 +173,6 @@ export const useFieldState = < })); }; - const setIsHovered = (isHovered: boolean) => { - setState((prevState) => ({ - ...prevState, - isHovered, - })); - }; - const selectedSectionIndexes = React.useMemo(() => { if (selectedSections == null) { return null; From 99d657d9babd8594ff8ab3ad7d16df2e82e0165a Mon Sep 17 00:00:00 2001 From: noraleonte Date: Tue, 20 Jun 2023 19:18:39 +0300 Subject: [PATCH 08/55] Implement field clearable props with slotProps --- .../x-data-grid/src/components/GridRow.tsx | 20 +++++++++---------- .../src/components/cell/GridCell.tsx | 12 +++++------ .../src/components/cell/GridEditInputCell.tsx | 18 ++++++++--------- .../useDesktopRangePicker.tsx | 3 --- .../useDesktopRangePicker.types.ts | 5 ----- .../hooks/useEnrichedRangePickerFieldProps.ts | 5 ++++- .../useMobileRangePicker.tsx | 3 +-- .../useMobileRangePicker.types.ts | 5 ----- .../useDesktopPicker/useDesktopPicker.tsx | 2 -- .../useDesktopPicker.types.ts | 11 ++++------ .../src/internals/hooks/useField/useField.ts | 2 +- .../hooks/useMobilePicker/useMobilePicker.tsx | 2 -- .../useMobilePicker/useMobilePicker.types.ts | 11 ++++------ .../models/props/basePickerProps.tsx | 8 +------- 14 files changed, 40 insertions(+), 67 deletions(-) diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 310489bdb773..125bb597a189 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -439,8 +439,8 @@ GridRow.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - containerWidth: PropTypes.number.isRequired, - firstColumnToRender: PropTypes.number.isRequired, + containerWidth: PropTypes.number, + firstColumnToRender: PropTypes.number, /** * Determines which cell has focus. * If `null`, no cell in this row has focus. @@ -450,25 +450,25 @@ GridRow.propTypes = { * Index of the row in the whole sorted and filtered dataset. * If some rows above have expanded children, this index also take those children into account. */ - index: PropTypes.number.isRequired, + index: PropTypes.number, isLastVisible: PropTypes.bool, - lastColumnToRender: PropTypes.number.isRequired, + lastColumnToRender: PropTypes.number, onClick: PropTypes.func, onDoubleClick: PropTypes.func, onMouseEnter: PropTypes.func, onMouseLeave: PropTypes.func, - position: PropTypes.oneOf(['center', 'left', 'right']).isRequired, - renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired, + position: PropTypes.oneOf(['center', 'left', 'right']), + renderedColumns: PropTypes.arrayOf(PropTypes.object), row: PropTypes.object, - rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired, - rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, - selected: PropTypes.bool.isRequired, + rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]), + rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + selected: PropTypes.bool, /** * Determines which cell should be tabbable by having tabIndex=0. * If `null`, no cell in this row is in the tab sequence. */ tabbableCell: PropTypes.string, - visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired, + visibleColumns: PropTypes.arrayOf(PropTypes.object), } as any; const MemoizedGridRow = fastMemo(GridRow); diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx index 45669757a255..4bb9eded44f7 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx @@ -774,11 +774,11 @@ GridCellV7.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - align: PropTypes.oneOf(['center', 'left', 'right']).isRequired, + align: PropTypes.oneOf(['center', 'left', 'right']), className: PropTypes.string, - colIndex: PropTypes.number.isRequired, + colIndex: PropTypes.number, colSpan: PropTypes.number, - column: PropTypes.object.isRequired, + column: PropTypes.object, disableDragEvents: PropTypes.bool, editCellState: PropTypes.shape({ changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']), @@ -786,7 +786,7 @@ GridCellV7.propTypes = { isValidating: PropTypes.bool, value: PropTypes.any, }), - height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired, + height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]), onClick: PropTypes.func, onDoubleClick: PropTypes.func, onDragEnter: PropTypes.func, @@ -794,9 +794,9 @@ GridCellV7.propTypes = { onKeyDown: PropTypes.func, onMouseDown: PropTypes.func, onMouseUp: PropTypes.func, - rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, + rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), showRightBorder: PropTypes.bool, - width: PropTypes.number.isRequired, + width: PropTypes.number, } as any; const MemoizedGridCellV7 = fastMemo(GridCellV7); diff --git a/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx index e1d1b6f51b88..5cc528ceb64f 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx @@ -151,21 +151,21 @@ GridEditInputCell.propTypes = { /** * GridApi that let you manipulate the grid. */ - api: PropTypes.object.isRequired, + api: PropTypes.object, /** * The mode of the cell. */ - cellMode: PropTypes.oneOf(['edit', 'view']).isRequired, + cellMode: PropTypes.oneOf(['edit', 'view']), changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']), /** * The column of the row that the current cell belongs to. */ - colDef: PropTypes.object.isRequired, + colDef: PropTypes.object, debounceMs: PropTypes.number, /** * The column field of the cell that triggered the event. */ - field: PropTypes.string.isRequired, + field: PropTypes.string, /** * The cell value formatted with the column valueFormatter. */ @@ -173,11 +173,11 @@ GridEditInputCell.propTypes = { /** * If true, the cell is the active element. */ - hasFocus: PropTypes.bool.isRequired, + hasFocus: PropTypes.bool, /** * The grid row id. */ - id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * If true, the cell is editable. */ @@ -194,15 +194,15 @@ GridEditInputCell.propTypes = { /** * The row model of the row that the current cell belongs to. */ - row: PropTypes.any.isRequired, + row: PropTypes.any, /** * The node of the row that the current cell belongs to. */ - rowNode: PropTypes.object.isRequired, + rowNode: PropTypes.object, /** * the tabIndex value. */ - tabIndex: PropTypes.oneOf([-1, 0]).isRequired, + tabIndex: PropTypes.oneOf([-1, 0]), /** * The cell value. * If the column has `valueGetter`, use `params.row` to directly access the fields. diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx b/packages/x-date-pickers-pro/src/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx index 90df8d676fee..045d1aa552f4 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx @@ -54,8 +54,6 @@ export const useDesktopRangePicker = < autoFocus, disableOpenPicker, localeText, - fieldProps: innerFieldProps, - } = props; const fieldContainerRef = React.useRef(null); @@ -124,7 +122,6 @@ export const useDesktopRangePicker = < autoFocus: autoFocus && !props.open, ref: fieldContainerRef, ...(fieldType === 'single-input' && { inputRef }), - ...innerFieldProps }, ownerState: props, }); diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts b/packages/x-date-pickers-pro/src/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts index 4bef9d824684..1147492a4b67 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.types.ts @@ -74,11 +74,6 @@ export interface UseDesktopRangePickerProps< * @default {} */ slotProps?: UseDesktopRangePickerSlotsComponentsProps; - /** - * Props used only for the date input. Passed down to [TextField](https://mui.com/api/text-field/) component. - * @default {} - */ - fieldProps?: {clearable?: boolean, onClear?: React.MouseEventHandler}; } export interface DesktopRangePickerAdditionalViewProps diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useEnrichedRangePickerFieldProps.ts b/packages/x-date-pickers-pro/src/internal/hooks/useEnrichedRangePickerFieldProps.ts index fc84c056a254..b7e198f2e0a6 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useEnrichedRangePickerFieldProps.ts +++ b/packages/x-date-pickers-pro/src/internal/hooks/useEnrichedRangePickerFieldProps.ts @@ -57,7 +57,10 @@ export interface RangePickerFieldSlotsComponentsProps { >, {}, UsePickerProps, any, RangeFieldSection, any, any, any> - >; + > & { + clearable?: boolean; + onClear?: React.MouseEventHandler; + }; fieldRoot?: SlotComponentProps>; fieldSeparator?: SlotComponentProps>; diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.tsx b/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.tsx index cecb0e59f0c2..3f78d1edacc8 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.tsx @@ -52,7 +52,6 @@ export const useMobileRangePicker = < disabled, disableOpenPicker, localeText, - fieldProps: innerFieldProps, } = props; const { rangePosition, onRangePositionChange, singleInputFieldRef } = useRangePosition(props); @@ -86,6 +85,7 @@ export const useMobileRangePicker = < const Field = slots.field; const fieldType = (Field as any).fieldType ?? 'multi-input'; + const fieldProps: BaseMultiInputFieldProps< DateRange, TDate, @@ -104,7 +104,6 @@ export const useMobileRangePicker = < formatDensity, timezone, ...(fieldType === 'single-input' && { inputRef }), - ...innerFieldProps }, ownerState: props, }); diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.types.ts b/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.types.ts index f3a8c66fcca1..2ba30b71723c 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.types.ts +++ b/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.types.ts @@ -67,11 +67,6 @@ export interface UseMobileRangePickerProps< * @default {} */ slotProps?: UseMobileRangePickerSlotsComponentsProps; - /** - * Props used only for the date input. Passed down to [TextField](https://mui.com/api/text-field/) component. - * @default {} - */ - fieldProps?: {clearable?: boolean, onClear?: React.MouseEventHandler}; } export interface MobileRangePickerAdditionalViewProps 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 58315b5230c2..660dc91a657e 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx @@ -43,7 +43,6 @@ export const useDesktopPicker = < disabled, autoFocus, localeText, - fieldProps: innerFieldProps, } = props; const utils = useUtils(); @@ -116,7 +115,6 @@ export const useDesktopPicker = < label, autoFocus: autoFocus && !props.open, focused: open ? true : undefined, - ...innerFieldProps }, ownerState: props, }); diff --git a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts index e0529616ed71..47e64be2d883 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts @@ -71,7 +71,10 @@ export interface ExportedUseDesktopPickerSlotsComponentsProps< React.ElementType>, {}, UsePickerProps - >; + > & { + clearable?: boolean; + onClear?: React.MouseEventHandler; + }; textField?: SlotComponentProps>; inputAdornment?: Partial; openPickerButton?: SlotComponentProps< @@ -110,12 +113,6 @@ export interface UseDesktopPickerProps< * @default {} */ slotProps?: UseDesktopPickerSlotsComponentsProps; - /** - * Props used only for the date input. Passed down to [TextField](https://mui.com/api/text-field/) component. - * @default {} - */ - fieldProps?: {clearable?: boolean, onClear?: React.MouseEventHandler}; - } export interface UseDesktopPickerParams< diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts index eb3ba93ec92a..ebe79b87c5c5 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -529,7 +529,7 @@ export const useField = < onClear: handleClearValue, error: inputError, ref: handleRef, - clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly ), + clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly), focused: inputHasFocus, }; }; 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 f46279ebb792..d159a86c39b1 100644 --- a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.tsx @@ -41,7 +41,6 @@ export const useMobilePicker = < readOnly, disabled, localeText, - fieldProps: innerFieldProps, } = props; const utils = useUtils(); @@ -88,7 +87,6 @@ export const useMobilePicker = < formatDensity, timezone, label, - ...innerFieldProps }, ownerState: props, }); diff --git a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts index 6b6a1314cadd..29ab3e6156e4 100644 --- a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts @@ -36,7 +36,6 @@ export interface UseMobilePickerSlotsComponent; } - export interface ExportedUseMobilePickerSlotsComponentsProps< TDate, TView extends DateOrTimeViewWithMeridiem, @@ -46,7 +45,10 @@ export interface ExportedUseMobilePickerSlotsComponentsProps< React.ElementType>, {}, UsePickerProps - >; + > & { + clearable?: boolean; + onClear?: React.MouseEventHandler; + }; textField?: SlotComponentProps>; } @@ -79,11 +81,6 @@ export interface UseMobilePickerProps< * @default {} */ slotProps?: UseMobilePickerSlotsComponentsProps; - /** - * Props used only for the date input. Passed down to [TextField](https://mui.com/api/text-field/) component. - * @default {} - */ - fieldProps?: {clearable?: boolean, onClear?: React.MouseEventHandler}; } export interface UseMobilePickerParams< diff --git a/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx b/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx index 405b5789855b..1fc745944af2 100644 --- a/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx +++ b/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx @@ -44,13 +44,7 @@ export interface BasePickerInputProps< > extends Omit< MakeOptional, 'openTo' | 'views'>, 'viewRenderers' - > { - /** - * Props used only for the date input. Passed down to [TextField](https://mui.com/api/text-field/) component. - * @default {} - */ - fieldProps?: {clearable?: boolean, onClear?: React.MouseEventHandler}; - } + > {} /** * Props common to all non-static pickers. From fed459704513ee23afe61475b58cd5c0e5417f09 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Wed, 21 Jun 2023 14:04:26 +0300 Subject: [PATCH 09/55] update docs --- .../date-pickers/fields/BrowserDateFields.js | 77 ++++++++++ .../date-pickers/fields/BrowserDateFields.tsx | 99 +++++++++++++ .../date-pickers/fields/ClearableBehavior.js | 54 +++++++ .../date-pickers/fields/ClearableBehavior.tsx | 55 ++++++++ .../fields/ClearableBehavior.tsx.preview | 7 + .../date-pickers/fields/CustomizeClearIcon.js | 31 ++++ .../fields/CustomizeClearIcon.tsx | 31 ++++ .../fields/CustomizeClearIcon.tsx.preview | 10 ++ .../data/date-pickers/fields/JoyDateFields.js | 117 ++++++++++++++++ .../date-pickers/fields/JoyDateFields.tsx | 132 ++++++++++++++++++ .../fields/NativeBrowserDateFields.js | 50 +++++++ docs/data/date-pickers/fields/fields.md | 36 +++++ .../useMobileRangePicker.tsx | 1 - .../hooks/useField/useField.types.ts | 9 ++ 14 files changed, 708 insertions(+), 1 deletion(-) create mode 100644 docs/data/date-pickers/fields/BrowserDateFields.js create mode 100644 docs/data/date-pickers/fields/BrowserDateFields.tsx create mode 100644 docs/data/date-pickers/fields/ClearableBehavior.js create mode 100644 docs/data/date-pickers/fields/ClearableBehavior.tsx create mode 100644 docs/data/date-pickers/fields/ClearableBehavior.tsx.preview create mode 100644 docs/data/date-pickers/fields/CustomizeClearIcon.js create mode 100644 docs/data/date-pickers/fields/CustomizeClearIcon.tsx create mode 100644 docs/data/date-pickers/fields/CustomizeClearIcon.tsx.preview create mode 100644 docs/data/date-pickers/fields/JoyDateFields.js create mode 100644 docs/data/date-pickers/fields/JoyDateFields.tsx create mode 100644 docs/data/date-pickers/fields/NativeBrowserDateFields.js diff --git a/docs/data/date-pickers/fields/BrowserDateFields.js b/docs/data/date-pickers/fields/BrowserDateFields.js new file mode 100644 index 000000000000..4e8c20a249b1 --- /dev/null +++ b/docs/data/date-pickers/fields/BrowserDateFields.js @@ -0,0 +1,77 @@ +import * as React from 'react'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateField } from '@mui/x-date-pickers/DateField'; +import { TimeField } from '@mui/x-date-pickers/TimeField'; +import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; +import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; +import { Box } from '@mui/material'; + +const BrowserField = React.forwardRef((props, ref) => { + const { + disabled, + id, + label, + inputProps: { ref: inputRef } = {}, + InputProps: { startAdornment, endAdornment } = {}, + ...other + } = props; + + return ( +
+ + + {startAdornment} + + {endAdornment} + +
+ ); +}); + +export default function BrowserDateFields() { + return ( + + + + + + + + + + + + + + + + + ); +} diff --git a/docs/data/date-pickers/fields/BrowserDateFields.tsx b/docs/data/date-pickers/fields/BrowserDateFields.tsx new file mode 100644 index 000000000000..83e70014ba5b --- /dev/null +++ b/docs/data/date-pickers/fields/BrowserDateFields.tsx @@ -0,0 +1,99 @@ +import * as React from 'react'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateField } from '@mui/x-date-pickers/DateField'; +import { TimeField } from '@mui/x-date-pickers/TimeField'; +import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; +import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; +import { Box } from '@mui/material'; + +interface BrowserFieldProps + extends Omit, 'size'> { + label?: React.ReactNode; + inputProps?: { + ref?: React.Ref; + }; + InputProps?: { endAdornment?: React.ReactNode; startAdornment?: React.ReactNode }; + error?: boolean; + focused?: boolean; + ownerState?: any; + sx?: any; +} + +type BrowserFieldComponent = (( + props: BrowserFieldProps & React.RefAttributes, +) => JSX.Element) & { propTypes?: any }; + +const BrowserField = React.forwardRef( + (props: BrowserFieldProps, ref: React.Ref) => { + const { + disabled, + id, + label, + inputProps: { ref: inputRef } = {}, + InputProps: { startAdornment, endAdornment } = {}, + ...other + } = props; + + return ( +
+ + + {startAdornment} + + {endAdornment} + +
+ ); + }, +) as BrowserFieldComponent; + +export default function BrowserDateFields() { + return ( + + + + + + + + + + + + + + + + + ); +} diff --git a/docs/data/date-pickers/fields/ClearableBehavior.js b/docs/data/date-pickers/fields/ClearableBehavior.js new file mode 100644 index 000000000000..e9233ee7be49 --- /dev/null +++ b/docs/data/date-pickers/fields/ClearableBehavior.js @@ -0,0 +1,54 @@ +import * as React from 'react'; +import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { DateField } from '@mui/x-date-pickers/DateField'; +import Box from '@mui/material/Box'; +import Alert from '@mui/material/Alert'; + +export default function ClearableBehavior() { + const [value, setValue] = React.useState(null); + const [cleared, setCleared] = React.useState(false); + + React.useEffect(() => { + if (cleared) { + const timeout = setTimeout(() => { + setCleared(false); + }, 1500); + + return () => clearTimeout(timeout); + } + return () => {}; + }, [cleared]); + + return ( + + + + + setValue(newValue)} + onClear={() => setCleared(true)} + clearable + /> + + + + {cleared && !value && ( + + Field cleared! + + )} + + ); +} diff --git a/docs/data/date-pickers/fields/ClearableBehavior.tsx b/docs/data/date-pickers/fields/ClearableBehavior.tsx new file mode 100644 index 000000000000..f5d42cd7418a --- /dev/null +++ b/docs/data/date-pickers/fields/ClearableBehavior.tsx @@ -0,0 +1,55 @@ +import * as React from 'react'; +import { Dayjs } from 'dayjs'; +import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { DateField } from '@mui/x-date-pickers/DateField'; +import Box from '@mui/material/Box'; +import Alert from '@mui/material/Alert'; + +export default function ClearableBehavior() { + const [value, setValue] = React.useState(null); + const [cleared, setCleared] = React.useState(false); + + React.useEffect(() => { + if (cleared) { + const timeout = setTimeout(() => { + setCleared(false); + }, 1500); + + return () => clearTimeout(timeout); + } + return () => {}; + }, [cleared]); + + return ( + + + + + setValue(newValue)} + onClear={() => setCleared(true)} + clearable + /> + + + + {cleared && !value && ( + + Field cleared! + + )} + + ); +} diff --git a/docs/data/date-pickers/fields/ClearableBehavior.tsx.preview b/docs/data/date-pickers/fields/ClearableBehavior.tsx.preview new file mode 100644 index 000000000000..ddcb0b1bd872 --- /dev/null +++ b/docs/data/date-pickers/fields/ClearableBehavior.tsx.preview @@ -0,0 +1,7 @@ + setValue(newValue)} + onClear={() => setCleared(true)} + clearable +/> \ No newline at end of file diff --git a/docs/data/date-pickers/fields/CustomizeClearIcon.js b/docs/data/date-pickers/fields/CustomizeClearIcon.js new file mode 100644 index 000000000000..e42af5a2fea7 --- /dev/null +++ b/docs/data/date-pickers/fields/CustomizeClearIcon.js @@ -0,0 +1,31 @@ +import * as React from 'react'; +import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { DateField } from '@mui/x-date-pickers/DateField'; +import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; +import BackspaceIcon from '@mui/icons-material/Backspace'; +import HighlightOffIcon from '@mui/icons-material/HighlightOff'; + +export default function CustomizeClearIcon() { + return ( + + + + + + + + + + + ); +} diff --git a/docs/data/date-pickers/fields/CustomizeClearIcon.tsx b/docs/data/date-pickers/fields/CustomizeClearIcon.tsx new file mode 100644 index 000000000000..e42af5a2fea7 --- /dev/null +++ b/docs/data/date-pickers/fields/CustomizeClearIcon.tsx @@ -0,0 +1,31 @@ +import * as React from 'react'; +import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { DateField } from '@mui/x-date-pickers/DateField'; +import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; +import BackspaceIcon from '@mui/icons-material/Backspace'; +import HighlightOffIcon from '@mui/icons-material/HighlightOff'; + +export default function CustomizeClearIcon() { + return ( + + + + + + + + + + + ); +} diff --git a/docs/data/date-pickers/fields/CustomizeClearIcon.tsx.preview b/docs/data/date-pickers/fields/CustomizeClearIcon.tsx.preview new file mode 100644 index 000000000000..bb0651a2a82b --- /dev/null +++ b/docs/data/date-pickers/fields/CustomizeClearIcon.tsx.preview @@ -0,0 +1,10 @@ + + \ No newline at end of file diff --git a/docs/data/date-pickers/fields/JoyDateFields.js b/docs/data/date-pickers/fields/JoyDateFields.js new file mode 100644 index 000000000000..c6137d97cede --- /dev/null +++ b/docs/data/date-pickers/fields/JoyDateFields.js @@ -0,0 +1,117 @@ +import * as React from 'react'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateField } from '@mui/x-date-pickers/DateField'; +import { TimeField } from '@mui/x-date-pickers/TimeField'; +import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; +import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; +import Input from '@mui/joy/Input'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import Box from '@mui/material/Box'; +import { + useTheme as useMaterialTheme, + useColorScheme as useMaterialColorScheme, + Experimental_CssVarsProvider as MaterialCssVarsProvider, +} from '@mui/material/styles'; +import { + extendTheme as extendJoyTheme, + useColorScheme, + CssVarsProvider, + THEME_ID, +} from '@mui/joy/styles'; + +const joyTheme = extendJoyTheme(); + +const JoyField = React.forwardRef((props, ref) => { + const { + disabled, + id, + label, + inputProps: { ref: inputRef } = {}, + InputProps: { startAdornment, endAdornment } = {}, + formControlSx, + ...other + } = props; + + return ( + + {label} + + + ); +}); + +function SyncThemeMode({ mode }) { + const { setMode } = useColorScheme(); + const { setMode: setMaterialMode } = useMaterialColorScheme(); + React.useEffect(() => { + setMode(mode); + setMaterialMode(mode); + }, [mode, setMode, setMaterialMode]); + return null; +} + +export default function JoyDateFields() { + const materialTheme = useMaterialTheme(); + return ( + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/docs/data/date-pickers/fields/JoyDateFields.tsx b/docs/data/date-pickers/fields/JoyDateFields.tsx new file mode 100644 index 000000000000..dbcdfc1bd535 --- /dev/null +++ b/docs/data/date-pickers/fields/JoyDateFields.tsx @@ -0,0 +1,132 @@ +import * as React from 'react'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateField } from '@mui/x-date-pickers/DateField'; +import { TimeField } from '@mui/x-date-pickers/TimeField'; +import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; +import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; +import Input, { InputProps } from '@mui/joy/Input'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import Box from '@mui/material/Box'; +import { + useTheme as useMaterialTheme, + useColorScheme as useMaterialColorScheme, + Experimental_CssVarsProvider as MaterialCssVarsProvider, +} from '@mui/material/styles'; +import { + extendTheme as extendJoyTheme, + useColorScheme, + CssVarsProvider, + THEME_ID, +} from '@mui/joy/styles'; + +const joyTheme = extendJoyTheme(); + +interface JoyFieldProps extends InputProps { + label?: React.ReactNode; + inputProps?: { + ref?: React.Ref; + }; + InputProps?: { endAdornment?: React.ReactNode; startAdornment?: React.ReactNode }; + formControlSx?: InputProps['sx']; +} + +type JoyFieldComponent = (( + props: JoyFieldProps & React.RefAttributes, +) => JSX.Element) & { propTypes?: any }; + +const JoyField = React.forwardRef( + (props: JoyFieldProps, ref: React.Ref) => { + const { + disabled, + id, + label, + inputProps: { ref: inputRef } = {}, + InputProps: { startAdornment, endAdornment } = {}, + formControlSx, + ...other + } = props; + + return ( + + {label} + + + ); + }, +) as JoyFieldComponent; + +function SyncThemeMode({ mode }: { mode: 'light' | 'dark' }) { + const { setMode } = useColorScheme(); + const { setMode: setMaterialMode } = useMaterialColorScheme(); + React.useEffect(() => { + setMode(mode); + setMaterialMode(mode); + }, [mode, setMode, setMaterialMode]); + return null; +} + +export default function JoyDateFields() { + const materialTheme = useMaterialTheme(); + return ( + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/docs/data/date-pickers/fields/NativeBrowserDateFields.js b/docs/data/date-pickers/fields/NativeBrowserDateFields.js new file mode 100644 index 000000000000..413a96ce1a54 --- /dev/null +++ b/docs/data/date-pickers/fields/NativeBrowserDateFields.js @@ -0,0 +1,50 @@ +import * as React from 'react'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateField } from '@mui/x-date-pickers/DateField'; +import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; + +const BrowserField = React.forwardRef((props, ref) => { + const { + disabled, + id, + label, + inputProps: { ref: inputRef } = {}, + InputProps: { startAdornment, endAdornment } = {}, + ...other + } = props; + + return ( +
+ +
+ {startAdornment} + + {endAdornment} +
+
+ ); +}); + +export default function NativeBrowserDateFields() { + return ( + + + + + + + + ); +} diff --git a/docs/data/date-pickers/fields/fields.md b/docs/data/date-pickers/fields/fields.md index 42a497fadd50..a261ecc27b98 100644 --- a/docs/data/date-pickers/fields/fields.md +++ b/docs/data/date-pickers/fields/fields.md @@ -108,3 +108,39 @@ Please only use it if needed. ::: {{"demo": "ControlledSelectedSectionsSingleInputRangeField.js", "defaultCodeOpen": false }} + +### Clearable behavior + +You can use the `clearable` prop to enable the default clearing behavior on a field. Aditionally, you can also customize the event handler using the `onClear` method. + +:::info +For **multi-input** range fields the clearable behavior is not supported yet. +::: + +{{"demo": "ClearableBehavior.js"}} + +You can also customize the icon you want to be displayed inside the clear `IconButton` + +{{"demo": "CustomizeClearIcon.js"}} + +### Using a custom input + +You can customize the input field used within the field components. + +#### Using the Joy UI input + +You can use the [_Joy UI_](https://mui.com/joy-ui/getting-started/overview/) components instead of the _Material UI_ ones: + +{{"demo": "JoyDateFields.js"}} + +#### Using the browser input + +You can also use the default browser input + +{{"demo": "BrowserDateFields.js"}} + +:::warning +You will need to use a _Material UI_ component that supports the `sx` prop as a wrapper to your input, in order to be able to benefit from the hover behavior of the clear button. You will have access to the `clearable` and `onClear` props using native HTML elements, but the behavior on **focus** and **hover** depend on the `sx` prop. +::: + +{{"demo": "NativeBrowserDateFields.js"}} diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.tsx b/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.tsx index 3f78d1edacc8..59231d7011a9 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.tsx +++ b/packages/x-date-pickers-pro/src/internal/hooks/useMobileRangePicker/useMobileRangePicker.tsx @@ -85,7 +85,6 @@ export const useMobileRangePicker = < const Field = slots.field; const fieldType = (Field as any).fieldType ?? 'multi-input'; - const fieldProps: BaseMultiInputFieldProps< DateRange, TDate, diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts index 3fed9d92b239..a4b1f0a77e31 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts @@ -118,6 +118,15 @@ export interface UseFieldInternalProps>; + /** + * Event fired when the clear button is clicked. + */ + onClear?: React.MouseEventHandler; + /** + * If `true`, the field will be cleared when the user clicks on the clear button. + * @default false + */ + clearable?: boolean; } export interface FieldRef { From 692ea58f5b90fd614d523c334c6e54c2425e86f7 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Wed, 21 Jun 2023 14:06:19 +0300 Subject: [PATCH 10/55] proptypes --- .../MultiInputDateRangeField.tsx | 9 +++++++++ .../MultiInputDateTimeRangeField.tsx | 9 +++++++++ .../MultiInputTimeRangeField.tsx | 9 +++++++++ .../SingleInputDateRangeField.tsx | 9 +++++++++ .../SingleInputDateTimeRangeField.tsx | 9 +++++++++ .../SingleInputTimeRangeField.tsx | 9 +++++++++ packages/x-date-pickers/src/DateField/DateField.tsx | 9 +++++++++ .../x-date-pickers/src/DateTimeField/DateTimeField.tsx | 9 +++++++++ packages/x-date-pickers/src/TimeField/TimeField.tsx | 9 +++++++++ 9 files changed, 81 insertions(+) diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx index 42da9f6f2647..42a789b82d96 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx @@ -169,6 +169,11 @@ MultiInputDateRangeField.propTypes = { // ---------------------------------------------------------------------- autoFocus: PropTypes.bool, className: PropTypes.string, + /** + * If `true`, the field will be cleared when the user clicks on the clear button. + * @default false + */ + clearable: PropTypes.bool, /** * Overridable components. * @default {} @@ -240,6 +245,10 @@ MultiInputDateRangeField.propTypes = { * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, + /** + * Event fired when the clear button is clicked. + */ + onClear: PropTypes.func, /** * Callback fired when the error associated to the current value changes. * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value. diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx index 64060e0d370c..6be6d9eb791b 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx @@ -174,6 +174,11 @@ MultiInputDateTimeRangeField.propTypes = { ampm: PropTypes.bool, autoFocus: PropTypes.bool, className: PropTypes.string, + /** + * If `true`, the field will be cleared when the user clicks on the clear button. + * @default false + */ + clearable: PropTypes.bool, /** * Overridable components. * @default {} @@ -273,6 +278,10 @@ MultiInputDateTimeRangeField.propTypes = { * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, + /** + * Event fired when the clear button is clicked. + */ + onClear: PropTypes.func, /** * Callback fired when the error associated to the current value changes. * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value. diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx index a3db6dc1ed8e..8d6265c5d54b 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx @@ -175,6 +175,11 @@ MultiInputTimeRangeField.propTypes = { ampm: PropTypes.bool, autoFocus: PropTypes.bool, className: PropTypes.string, + /** + * If `true`, the field will be cleared when the user clicks on the clear button. + * @default false + */ + clearable: PropTypes.bool, /** * Overridable components. * @default {} @@ -258,6 +263,10 @@ MultiInputTimeRangeField.propTypes = { * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, + /** + * Event fired when the clear button is clicked. + */ + onClear: PropTypes.func, /** * Callback fired when the error associated to the current value changes. * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value. diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx index 3bdc4b08f5e7..d357302a35ba 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx @@ -92,6 +92,11 @@ SingleInputDateRangeField.propTypes = { */ autoFocus: PropTypes.bool, className: PropTypes.string, + /** + * If `true`, the field will be cleared when the user clicks on the clear button. + * @default false + */ + clearable: PropTypes.bool, /** * The color of the component. * It supports both default and custom theme colors, which can be added as shown in the @@ -224,6 +229,10 @@ SingleInputDateRangeField.propTypes = { * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, + /** + * Event fired when the clear button is clicked. + */ + onClear: PropTypes.func, /** * @ignore */ diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx index bfdc9e033196..812eccea7996 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx @@ -98,6 +98,11 @@ SingleInputDateTimeRangeField.propTypes = { */ autoFocus: PropTypes.bool, className: PropTypes.string, + /** + * If `true`, the field will be cleared when the user clicks on the clear button. + * @default false + */ + clearable: PropTypes.bool, /** * The color of the component. * It supports both default and custom theme colors, which can be added as shown in the @@ -258,6 +263,10 @@ SingleInputDateTimeRangeField.propTypes = { * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, + /** + * Event fired when the clear button is clicked. + */ + onClear: PropTypes.func, /** * @ignore */ diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx index e670c9f10cc0..08f75fe9a592 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx @@ -97,6 +97,11 @@ SingleInputTimeRangeField.propTypes = { */ autoFocus: PropTypes.bool, className: PropTypes.string, + /** + * If `true`, the field will be cleared when the user clicks on the clear button. + * @default false + */ + clearable: PropTypes.bool, /** * The color of the component. * It supports both default and custom theme colors, which can be added as shown in the @@ -241,6 +246,10 @@ SingleInputTimeRangeField.propTypes = { * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, + /** + * Event fired when the clear button is clicked. + */ + onClear: PropTypes.func, /** * @ignore */ diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx index 3fed76ff1d31..32ff2e2232f9 100644 --- a/packages/x-date-pickers/src/DateField/DateField.tsx +++ b/packages/x-date-pickers/src/DateField/DateField.tsx @@ -100,6 +100,11 @@ DateField.propTypes = { */ autoFocus: PropTypes.bool, className: PropTypes.string, + /** + * If `true`, the field will be cleared when the user clicks on the clear button. + * @default false + */ + clearable: PropTypes.bool, /** * The color of the component. * It supports both default and custom theme colors, which can be added as shown in the @@ -232,6 +237,10 @@ DateField.propTypes = { * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, + /** + * Event fired when the clear button is clicked. + */ + onClear: PropTypes.func, /** * @ignore */ diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx index 369aefb05f01..2cc62337659d 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx @@ -95,6 +95,11 @@ DateTimeField.propTypes = { */ autoFocus: PropTypes.bool, className: PropTypes.string, + /** + * If `true`, the field will be cleared when the user clicks on the clear button. + * @default false + */ + clearable: PropTypes.bool, /** * The color of the component. * It supports both default and custom theme colors, which can be added as shown in the @@ -255,6 +260,10 @@ DateTimeField.propTypes = { * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, + /** + * Event fired when the clear button is clicked. + */ + onClear: PropTypes.func, /** * @ignore */ diff --git a/packages/x-date-pickers/src/TimeField/TimeField.tsx b/packages/x-date-pickers/src/TimeField/TimeField.tsx index 714bd4f69dd4..708d114d7331 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.tsx +++ b/packages/x-date-pickers/src/TimeField/TimeField.tsx @@ -94,6 +94,11 @@ TimeField.propTypes = { */ autoFocus: PropTypes.bool, className: PropTypes.string, + /** + * If `true`, the field will be cleared when the user clicks on the clear button. + * @default false + */ + clearable: PropTypes.bool, /** * The color of the component. * It supports both default and custom theme colors, which can be added as shown in the @@ -238,6 +243,10 @@ TimeField.propTypes = { * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, + /** + * Event fired when the clear button is clicked. + */ + onClear: PropTypes.func, /** * @ignore */ From 6c7ee339d37051ef83b0d1f72e923f4c8467fe23 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Wed, 21 Jun 2023 14:07:36 +0300 Subject: [PATCH 11/55] api docs --- docs/pages/x/api/date-pickers/date-field.json | 6 ++++++ docs/pages/x/api/date-pickers/date-time-field.json | 6 ++++++ .../x/api/date-pickers/multi-input-date-range-field.json | 2 ++ .../api/date-pickers/multi-input-date-time-range-field.json | 2 ++ .../x/api/date-pickers/multi-input-time-range-field.json | 2 ++ .../x/api/date-pickers/single-input-date-range-field.json | 6 ++++++ .../date-pickers/single-input-date-time-range-field.json | 6 ++++++ .../x/api/date-pickers/single-input-time-range-field.json | 6 ++++++ docs/pages/x/api/date-pickers/time-field.json | 6 ++++++ docs/translations/api-docs/date-pickers/date-field.json | 3 +++ .../translations/api-docs/date-pickers/date-time-field.json | 3 +++ .../api-docs/date-pickers/multi-input-date-range-field.json | 2 ++ .../date-pickers/multi-input-date-time-range-field.json | 2 ++ .../api-docs/date-pickers/multi-input-time-range-field.json | 2 ++ .../date-pickers/single-input-date-range-field.json | 3 +++ .../date-pickers/single-input-date-time-range-field.json | 3 +++ .../date-pickers/single-input-time-range-field.json | 3 +++ docs/translations/api-docs/date-pickers/time-field.json | 3 +++ 18 files changed, 66 insertions(+) diff --git a/docs/pages/x/api/date-pickers/date-field.json b/docs/pages/x/api/date-pickers/date-field.json index f939afd0dcbb..e70c4f0e824e 100644 --- a/docs/pages/x/api/date-pickers/date-field.json +++ b/docs/pages/x/api/date-pickers/date-field.json @@ -1,6 +1,7 @@ { "props": { "autoFocus": { "type": { "name": "bool" } }, + "clearable": { "type": { "name": "bool" } }, "color": { "type": { "name": "enum", @@ -53,6 +54,7 @@ "minDate": { "type": { "name": "any" } }, "name": { "type": { "name": "string" } }, "onChange": { "type": { "name": "func" } }, + "onClear": { "type": { "name": "func" } }, "onError": { "type": { "name": "func" } }, "onSelectedSectionsChange": { "type": { "name": "func" } }, "readOnly": { "type": { "name": "bool" } }, @@ -97,6 +99,10 @@ } }, "slots": { + "clearIcon": { + "default": "Clear from '@mui/icons-material'", + "type": { "name": "elementType" } + }, "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } } }, "name": "DateField", diff --git a/docs/pages/x/api/date-pickers/date-time-field.json b/docs/pages/x/api/date-pickers/date-time-field.json index d3ffe05ae2f0..a76fa6f33b61 100644 --- a/docs/pages/x/api/date-pickers/date-time-field.json +++ b/docs/pages/x/api/date-pickers/date-time-field.json @@ -2,6 +2,7 @@ "props": { "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, "autoFocus": { "type": { "name": "bool" } }, + "clearable": { "type": { "name": "bool" } }, "color": { "type": { "name": "enum", @@ -60,6 +61,7 @@ "minutesStep": { "type": { "name": "number" }, "default": "1" }, "name": { "type": { "name": "string" } }, "onChange": { "type": { "name": "func" } }, + "onClear": { "type": { "name": "func" } }, "onError": { "type": { "name": "func" } }, "onSelectedSectionsChange": { "type": { "name": "func" } }, "readOnly": { "type": { "name": "bool" } }, @@ -110,6 +112,10 @@ } }, "slots": { + "clearIcon": { + "default": "Clear from '@mui/icons-material'", + "type": { "name": "elementType" } + }, "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } } }, "name": "DateTimeField", diff --git a/docs/pages/x/api/date-pickers/multi-input-date-range-field.json b/docs/pages/x/api/date-pickers/multi-input-date-range-field.json index 4fd215351a3a..dc5ae7cad089 100644 --- a/docs/pages/x/api/date-pickers/multi-input-date-range-field.json +++ b/docs/pages/x/api/date-pickers/multi-input-date-range-field.json @@ -1,5 +1,6 @@ { "props": { + "clearable": { "type": { "name": "bool" } }, "components": { "type": { "name": "object" }, "default": "{}", @@ -32,6 +33,7 @@ "maxDate": { "type": { "name": "any" } }, "minDate": { "type": { "name": "any" } }, "onChange": { "type": { "name": "func" } }, + "onClear": { "type": { "name": "func" } }, "onError": { "type": { "name": "func" } }, "onSelectedSectionsChange": { "type": { "name": "func" } }, "readOnly": { "type": { "name": "bool" } }, diff --git a/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json b/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json index bc566422505e..4e0450b5b6ec 100644 --- a/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json +++ b/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json @@ -1,6 +1,7 @@ { "props": { "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, + "clearable": { "type": { "name": "bool" } }, "components": { "type": { "name": "object" }, "default": "{}", @@ -39,6 +40,7 @@ "minTime": { "type": { "name": "any" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "onChange": { "type": { "name": "func" } }, + "onClear": { "type": { "name": "func" } }, "onError": { "type": { "name": "func" } }, "onSelectedSectionsChange": { "type": { "name": "func" } }, "readOnly": { "type": { "name": "bool" } }, diff --git a/docs/pages/x/api/date-pickers/multi-input-time-range-field.json b/docs/pages/x/api/date-pickers/multi-input-time-range-field.json index c7d85cbef558..1bbaa91f65e5 100644 --- a/docs/pages/x/api/date-pickers/multi-input-time-range-field.json +++ b/docs/pages/x/api/date-pickers/multi-input-time-range-field.json @@ -1,6 +1,7 @@ { "props": { "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, + "clearable": { "type": { "name": "bool" } }, "components": { "type": { "name": "object" }, "default": "{}", @@ -35,6 +36,7 @@ "minTime": { "type": { "name": "any" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "onChange": { "type": { "name": "func" } }, + "onClear": { "type": { "name": "func" } }, "onError": { "type": { "name": "func" } }, "onSelectedSectionsChange": { "type": { "name": "func" } }, "readOnly": { "type": { "name": "bool" } }, diff --git a/docs/pages/x/api/date-pickers/single-input-date-range-field.json b/docs/pages/x/api/date-pickers/single-input-date-range-field.json index 69a46d831631..1f5b17af197f 100644 --- a/docs/pages/x/api/date-pickers/single-input-date-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-date-range-field.json @@ -1,6 +1,7 @@ { "props": { "autoFocus": { "type": { "name": "bool" } }, + "clearable": { "type": { "name": "bool" } }, "color": { "type": { "name": "enum", @@ -53,6 +54,7 @@ "minDate": { "type": { "name": "any" } }, "name": { "type": { "name": "string" } }, "onChange": { "type": { "name": "func" } }, + "onClear": { "type": { "name": "func" } }, "onError": { "type": { "name": "func" } }, "onSelectedSectionsChange": { "type": { "name": "func" } }, "readOnly": { "type": { "name": "bool" } }, @@ -95,6 +97,10 @@ } }, "slots": { + "clearIcon": { + "default": "Clear from '@mui/icons-material'", + "type": { "name": "elementType" } + }, "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } } }, "name": "SingleInputDateRangeField", diff --git a/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json b/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json index 895ca2016212..cad0d7bc94a9 100644 --- a/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json @@ -2,6 +2,7 @@ "props": { "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, "autoFocus": { "type": { "name": "bool" } }, + "clearable": { "type": { "name": "bool" } }, "color": { "type": { "name": "enum", @@ -60,6 +61,7 @@ "minutesStep": { "type": { "name": "number" }, "default": "1" }, "name": { "type": { "name": "string" } }, "onChange": { "type": { "name": "func" } }, + "onClear": { "type": { "name": "func" } }, "onError": { "type": { "name": "func" } }, "onSelectedSectionsChange": { "type": { "name": "func" } }, "readOnly": { "type": { "name": "bool" } }, @@ -108,6 +110,10 @@ } }, "slots": { + "clearIcon": { + "default": "Clear from '@mui/icons-material'", + "type": { "name": "elementType" } + }, "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } } }, "name": "SingleInputDateTimeRangeField", diff --git a/docs/pages/x/api/date-pickers/single-input-time-range-field.json b/docs/pages/x/api/date-pickers/single-input-time-range-field.json index 6c966d23305d..9af15e596741 100644 --- a/docs/pages/x/api/date-pickers/single-input-time-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-time-range-field.json @@ -2,6 +2,7 @@ "props": { "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, "autoFocus": { "type": { "name": "bool" } }, + "clearable": { "type": { "name": "bool" } }, "color": { "type": { "name": "enum", @@ -56,6 +57,7 @@ "minutesStep": { "type": { "name": "number" }, "default": "1" }, "name": { "type": { "name": "string" } }, "onChange": { "type": { "name": "func" } }, + "onClear": { "type": { "name": "func" } }, "onError": { "type": { "name": "func" } }, "onSelectedSectionsChange": { "type": { "name": "func" } }, "readOnly": { "type": { "name": "bool" } }, @@ -103,6 +105,10 @@ } }, "slots": { + "clearIcon": { + "default": "Clear from '@mui/icons-material'", + "type": { "name": "elementType" } + }, "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } } }, "name": "SingleInputTimeRangeField", diff --git a/docs/pages/x/api/date-pickers/time-field.json b/docs/pages/x/api/date-pickers/time-field.json index cc4799ca1f52..5394b4124f37 100644 --- a/docs/pages/x/api/date-pickers/time-field.json +++ b/docs/pages/x/api/date-pickers/time-field.json @@ -2,6 +2,7 @@ "props": { "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, "autoFocus": { "type": { "name": "bool" } }, + "clearable": { "type": { "name": "bool" } }, "color": { "type": { "name": "enum", @@ -56,6 +57,7 @@ "minutesStep": { "type": { "name": "number" }, "default": "1" }, "name": { "type": { "name": "string" } }, "onChange": { "type": { "name": "func" } }, + "onClear": { "type": { "name": "func" } }, "onError": { "type": { "name": "func" } }, "onSelectedSectionsChange": { "type": { "name": "func" } }, "readOnly": { "type": { "name": "bool" } }, @@ -103,6 +105,10 @@ } }, "slots": { + "clearIcon": { + "default": "Clear from '@mui/icons-material'", + "type": { "name": "elementType" } + }, "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } } }, "name": "TimeField", diff --git a/docs/translations/api-docs/date-pickers/date-field.json b/docs/translations/api-docs/date-pickers/date-field.json index 898f7b9cc2fb..342fd424d0e1 100644 --- a/docs/translations/api-docs/date-pickers/date-field.json +++ b/docs/translations/api-docs/date-pickers/date-field.json @@ -2,6 +2,7 @@ "componentDescription": "", "propDescriptions": { "autoFocus": "If true, the input element is focused during the first mount.", + "clearable": "If true, the field will be cleared when the user clicks on the clear button.", "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", "components": "Overridable components.", "componentsProps": "The props used for each component slot.", @@ -27,6 +28,7 @@ "minDate": "Minimal selectable date.", "name": "Name attribute of the input element.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.", + "onClear": "Event fired when the clear button is clicked.", "onError": "Callback fired when the error associated to the current value changes.

Signature:
function(error: TError, value: TValue) => void
error: The new error.
value: The value associated to the error.", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", "readOnly": "It prevents the user from changing the value of the field (not from interacting with the field).", @@ -48,6 +50,7 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { + "clearIcon": "Icon to display inside the clear button.\nReceives the same props as @mui/icons-material/Clear.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } diff --git a/docs/translations/api-docs/date-pickers/date-time-field.json b/docs/translations/api-docs/date-pickers/date-time-field.json index 98c19d209512..e4db413a253b 100644 --- a/docs/translations/api-docs/date-pickers/date-time-field.json +++ b/docs/translations/api-docs/date-pickers/date-time-field.json @@ -3,6 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "autoFocus": "If true, the input element is focused during the first mount.", + "clearable": "If true, the field will be cleared when the user clicks on the clear button.", "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", "components": "Overridable components.", "componentsProps": "The props used for each component slot.", @@ -34,6 +35,7 @@ "minutesStep": "Step over minutes.", "name": "Name attribute of the input element.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.", + "onClear": "Event fired when the clear button is clicked.", "onError": "Callback fired when the error associated to the current value changes.

Signature:
function(error: TError, value: TValue) => void
error: The new error.
value: The value associated to the error.", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", "readOnly": "It prevents the user from changing the value of the field (not from interacting with the field).", @@ -57,6 +59,7 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { + "clearIcon": "Icon to display inside the clear button.\nReceives the same props as @mui/icons-material/Clear.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } diff --git a/docs/translations/api-docs/date-pickers/multi-input-date-range-field.json b/docs/translations/api-docs/date-pickers/multi-input-date-range-field.json index 7dd09ad10a31..a5e8b8bd791b 100644 --- a/docs/translations/api-docs/date-pickers/multi-input-date-range-field.json +++ b/docs/translations/api-docs/date-pickers/multi-input-date-range-field.json @@ -1,6 +1,7 @@ { "componentDescription": "", "propDescriptions": { + "clearable": "If true, the field will be cleared when the user clicks on the clear button.", "components": "Overridable components.", "componentsProps": "The props used for each component slot.", "defaultValue": "The default value. Use when the component is not controlled.", @@ -14,6 +15,7 @@ "maxDate": "Maximal selectable date.", "minDate": "Minimal selectable date.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.", + "onClear": "Event fired when the clear button is clicked.", "onError": "Callback fired when the error associated to the current value changes.

Signature:
function(error: TError, value: TValue) => void
error: The new error.
value: The value associated to the error.", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", "readOnly": "It prevents the user from changing the value of the field (not from interacting with the field).", diff --git a/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field.json b/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field.json index 3bb84bcd76f5..3849aa265c67 100644 --- a/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field.json @@ -2,6 +2,7 @@ "componentDescription": "", "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", + "clearable": "If true, the field will be cleared when the user clicks on the clear button.", "components": "Overridable components.", "componentsProps": "The props used for each component slot.", "defaultValue": "The default value. Use when the component is not controlled.", @@ -21,6 +22,7 @@ "minTime": "Minimal selectable time. The date part of the object will be ignored unless props.disableIgnoringDatePartForTimeValidation === true.", "minutesStep": "Step over minutes.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.", + "onClear": "Event fired when the clear button is clicked.", "onError": "Callback fired when the error associated to the current value changes.

Signature:
function(error: TError, value: TValue) => void
error: The new error.
value: The value associated to the error.", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", "readOnly": "It prevents the user from changing the value of the field (not from interacting with the field).", diff --git a/docs/translations/api-docs/date-pickers/multi-input-time-range-field.json b/docs/translations/api-docs/date-pickers/multi-input-time-range-field.json index 59a6a9c48659..c80ffa843866 100644 --- a/docs/translations/api-docs/date-pickers/multi-input-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/multi-input-time-range-field.json @@ -2,6 +2,7 @@ "componentDescription": "", "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", + "clearable": "If true, the field will be cleared when the user clicks on the clear button.", "components": "Overridable components.", "componentsProps": "The props used for each component slot.", "defaultValue": "The default value. Use when the component is not controlled.", @@ -17,6 +18,7 @@ "minTime": "Minimal selectable time. The date part of the object will be ignored unless props.disableIgnoringDatePartForTimeValidation === true.", "minutesStep": "Step over minutes.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.", + "onClear": "Event fired when the clear button is clicked.", "onError": "Callback fired when the error associated to the current value changes.

Signature:
function(error: TError, value: TValue) => void
error: The new error.
value: The value associated to the error.", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", "readOnly": "It prevents the user from changing the value of the field (not from interacting with the field).", diff --git a/docs/translations/api-docs/date-pickers/single-input-date-range-field.json b/docs/translations/api-docs/date-pickers/single-input-date-range-field.json index b4e925652795..892861156577 100644 --- a/docs/translations/api-docs/date-pickers/single-input-date-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-date-range-field.json @@ -2,6 +2,7 @@ "componentDescription": "", "propDescriptions": { "autoFocus": "If true, the input element is focused during the first mount.", + "clearable": "If true, the field will be cleared when the user clicks on the clear button.", "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", "components": "Overridable components.", "componentsProps": "The props used for each component slot.", @@ -27,6 +28,7 @@ "minDate": "Minimal selectable date.", "name": "Name attribute of the input element.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.", + "onClear": "Event fired when the clear button is clicked.", "onError": "Callback fired when the error associated to the current value changes.

Signature:
function(error: TError, value: TValue) => void
error: The new error.
value: The value associated to the error.", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", "readOnly": "It prevents the user from changing the value of the field (not from interacting with the field).", @@ -46,6 +48,7 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { + "clearIcon": "Icon to display inside the clear button.\nReceives the same props as @mui/icons-material/Clear.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } diff --git a/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json b/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json index bb2b5d2902bc..2008ddc77809 100644 --- a/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json @@ -3,6 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "autoFocus": "If true, the input element is focused during the first mount.", + "clearable": "If true, the field will be cleared when the user clicks on the clear button.", "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", "components": "Overridable components.", "componentsProps": "The props used for each component slot.", @@ -34,6 +35,7 @@ "minutesStep": "Step over minutes.", "name": "Name attribute of the input element.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.", + "onClear": "Event fired when the clear button is clicked.", "onError": "Callback fired when the error associated to the current value changes.

Signature:
function(error: TError, value: TValue) => void
error: The new error.
value: The value associated to the error.", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", "readOnly": "It prevents the user from changing the value of the field (not from interacting with the field).", @@ -55,6 +57,7 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { + "clearIcon": "Icon to display inside the clear button.\nReceives the same props as @mui/icons-material/Clear.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } diff --git a/docs/translations/api-docs/date-pickers/single-input-time-range-field.json b/docs/translations/api-docs/date-pickers/single-input-time-range-field.json index fcacca70028d..3e8551157e04 100644 --- a/docs/translations/api-docs/date-pickers/single-input-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-time-range-field.json @@ -3,6 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "autoFocus": "If true, the input element is focused during the first mount.", + "clearable": "If true, the field will be cleared when the user clicks on the clear button.", "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", "components": "Overridable components.", "componentsProps": "The props used for each component slot.", @@ -30,6 +31,7 @@ "minutesStep": "Step over minutes.", "name": "Name attribute of the input element.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.", + "onClear": "Event fired when the clear button is clicked.", "onError": "Callback fired when the error associated to the current value changes.

Signature:
function(error: TError, value: TValue) => void
error: The new error.
value: The value associated to the error.", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", "readOnly": "It prevents the user from changing the value of the field (not from interacting with the field).", @@ -50,6 +52,7 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { + "clearIcon": "Icon to display inside the clear button.\nReceives the same props as @mui/icons-material/Clear.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } diff --git a/docs/translations/api-docs/date-pickers/time-field.json b/docs/translations/api-docs/date-pickers/time-field.json index fcacca70028d..3e8551157e04 100644 --- a/docs/translations/api-docs/date-pickers/time-field.json +++ b/docs/translations/api-docs/date-pickers/time-field.json @@ -3,6 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "autoFocus": "If true, the input element is focused during the first mount.", + "clearable": "If true, the field will be cleared when the user clicks on the clear button.", "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", "components": "Overridable components.", "componentsProps": "The props used for each component slot.", @@ -30,6 +31,7 @@ "minutesStep": "Step over minutes.", "name": "Name attribute of the input element.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.", + "onClear": "Event fired when the clear button is clicked.", "onError": "Callback fired when the error associated to the current value changes.

Signature:
function(error: TError, value: TValue) => void
error: The new error.
value: The value associated to the error.", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", "readOnly": "It prevents the user from changing the value of the field (not from interacting with the field).", @@ -50,6 +52,7 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { + "clearIcon": "Icon to display inside the clear button.\nReceives the same props as @mui/icons-material/Clear.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } From afbe1da48930ac8c00e130951542ff217a506fef Mon Sep 17 00:00:00 2001 From: noraleonte Date: Wed, 21 Jun 2023 14:18:54 +0300 Subject: [PATCH 12/55] clear picker demo --- .../date-pickers/date-picker/ClearableProp.js | 52 +++++++++++++++++++ .../date-picker/ClearableProp.tsx | 52 +++++++++++++++++++ .../date-picker/ClearableProp.tsx.preview | 6 +++ .../date-pickers/date-picker/date-picker.md | 6 +++ 4 files changed, 116 insertions(+) create mode 100644 docs/data/date-pickers/date-picker/ClearableProp.js create mode 100644 docs/data/date-pickers/date-picker/ClearableProp.tsx create mode 100644 docs/data/date-pickers/date-picker/ClearableProp.tsx.preview diff --git a/docs/data/date-pickers/date-picker/ClearableProp.js b/docs/data/date-pickers/date-picker/ClearableProp.js new file mode 100644 index 000000000000..fc1a77d64468 --- /dev/null +++ b/docs/data/date-pickers/date-picker/ClearableProp.js @@ -0,0 +1,52 @@ +import * as React from 'react'; +import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; +import Box from '@mui/material/Box'; +import Alert from '@mui/material/Alert'; + +export default function ClearableProp() { + const [cleared, setCleared] = React.useState(false); + + React.useEffect(() => { + if (cleared) { + const timeout = setTimeout(() => { + setCleared(false); + }, 1500); + + return () => clearTimeout(timeout); + } + return () => {}; + }, [cleared]); + + return ( + + + + + setCleared(true) }, + }} + /> + + + + {cleared && ( + + Field cleared! + + )} + + ); +} diff --git a/docs/data/date-pickers/date-picker/ClearableProp.tsx b/docs/data/date-pickers/date-picker/ClearableProp.tsx new file mode 100644 index 000000000000..0c9e16c0053e --- /dev/null +++ b/docs/data/date-pickers/date-picker/ClearableProp.tsx @@ -0,0 +1,52 @@ +import * as React from 'react'; +import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; +import Box from '@mui/material/Box'; +import Alert from '@mui/material/Alert'; + +export default function ClearableProp() { + const [cleared, setCleared] = React.useState(false); + + React.useEffect(() => { + if (cleared) { + const timeout = setTimeout(() => { + setCleared(false); + }, 1500); + + return () => clearTimeout(timeout); + } + return () => {}; + }, [cleared]); + + return ( + + + + + setCleared(true) }, + }} + /> + + + + {cleared && ( + + Field cleared! + + )} + + ); +} diff --git a/docs/data/date-pickers/date-picker/ClearableProp.tsx.preview b/docs/data/date-pickers/date-picker/ClearableProp.tsx.preview new file mode 100644 index 000000000000..24d986ab6f76 --- /dev/null +++ b/docs/data/date-pickers/date-picker/ClearableProp.tsx.preview @@ -0,0 +1,6 @@ + setCleared(true) }, + }} +/> \ No newline at end of file diff --git a/docs/data/date-pickers/date-picker/date-picker.md b/docs/data/date-pickers/date-picker/date-picker.md index 8799ff2dba81..95fd652f635b 100644 --- a/docs/data/date-pickers/date-picker/date-picker.md +++ b/docs/data/date-pickers/date-picker/date-picker.md @@ -102,6 +102,12 @@ You can show a helper text with the date format accepted: {{"demo": "HelperText.js"}} +## Clearing the value + +You can enable a clearable behavior: + +{{"demo": "ClearableProp.js"}} + ## Validation You can find the documentation in the [Validation page](/x/react-date-pickers/validation/). From a0369ad7ce566dd0ebc98d32d7f7e175332a3161 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Wed, 21 Jun 2023 14:25:51 +0300 Subject: [PATCH 13/55] fix label --- docs/data/date-pickers/fields/JoyDateFields.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/date-pickers/fields/JoyDateFields.js b/docs/data/date-pickers/fields/JoyDateFields.js index c6137d97cede..68b2fcf43950 100644 --- a/docs/data/date-pickers/fields/JoyDateFields.js +++ b/docs/data/date-pickers/fields/JoyDateFields.js @@ -100,7 +100,7 @@ export default function JoyDateFields() { Date: Wed, 21 Jun 2023 14:39:18 +0300 Subject: [PATCH 14/55] fix diff --- docs/data/date-pickers/fields/CustomizeClearIcon.tsx.preview | 5 ----- 1 file changed, 5 deletions(-) diff --git a/docs/data/date-pickers/fields/CustomizeClearIcon.tsx.preview b/docs/data/date-pickers/fields/CustomizeClearIcon.tsx.preview index bb0651a2a82b..df4e79c1e863 100644 --- a/docs/data/date-pickers/fields/CustomizeClearIcon.tsx.preview +++ b/docs/data/date-pickers/fields/CustomizeClearIcon.tsx.preview @@ -2,9 +2,4 @@ label="Date Field" clearable slots={{ clearIcon: HighlightOffIcon }} -/> - \ No newline at end of file From b206d513dfa7e07d5ee15d6d593260679b1a66af Mon Sep 17 00:00:00 2001 From: noraleonte Date: Wed, 21 Jun 2023 14:48:05 +0300 Subject: [PATCH 15/55] update clearable prop preview --- .../date-picker/ClearableProp.tsx.preview | 20 +++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/docs/data/date-pickers/date-picker/ClearableProp.tsx.preview b/docs/data/date-pickers/date-picker/ClearableProp.tsx.preview index 24d986ab6f76..8f0c5257eae9 100644 --- a/docs/data/date-pickers/date-picker/ClearableProp.tsx.preview +++ b/docs/data/date-pickers/date-picker/ClearableProp.tsx.preview @@ -1,6 +1,14 @@ - setCleared(true) }, - }} -/> \ No newline at end of file + + + + + + \ No newline at end of file From 855ac34e357bc2b3ab4c7ab2c09d9261c4581f3a Mon Sep 17 00:00:00 2001 From: noraleonte Date: Wed, 21 Jun 2023 14:56:33 +0300 Subject: [PATCH 16/55] fix demos --- docs/data/charts/tooltip/BandHighlight.js | 1 + .../date-picker/ClearableProp.tsx.preview | 20 ++++++------------- .../date-pickers/fields/ClearableBehavior.js | 1 + .../fields/ClearableBehavior.tsx.preview | 2 +- .../fields/CustomizeClearIcon.tsx.preview | 19 +++++++++++++----- 5 files changed, 23 insertions(+), 20 deletions(-) diff --git a/docs/data/charts/tooltip/BandHighlight.js b/docs/data/charts/tooltip/BandHighlight.js index 3ab11e4399b9..e786fe800c88 100644 --- a/docs/data/charts/tooltip/BandHighlight.js +++ b/docs/data/charts/tooltip/BandHighlight.js @@ -32,6 +32,7 @@ const barChartsParams = { export default function BandHighlight() { const [xHighlight, setXHightlight] = React.useState('band'); + const [yHighlight, setYHightlight] = React.useState('none'); const handleChange = (direction) => (event) => { diff --git a/docs/data/date-pickers/date-picker/ClearableProp.tsx.preview b/docs/data/date-pickers/date-picker/ClearableProp.tsx.preview index 8f0c5257eae9..24d986ab6f76 100644 --- a/docs/data/date-pickers/date-picker/ClearableProp.tsx.preview +++ b/docs/data/date-pickers/date-picker/ClearableProp.tsx.preview @@ -1,14 +1,6 @@ - - - - - - \ No newline at end of file + setCleared(true) }, + }} +/> \ No newline at end of file diff --git a/docs/data/date-pickers/fields/ClearableBehavior.js b/docs/data/date-pickers/fields/ClearableBehavior.js index e9233ee7be49..63c8040c757f 100644 --- a/docs/data/date-pickers/fields/ClearableBehavior.js +++ b/docs/data/date-pickers/fields/ClearableBehavior.js @@ -1,4 +1,5 @@ import * as React from 'react'; + import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; diff --git a/docs/data/date-pickers/fields/ClearableBehavior.tsx.preview b/docs/data/date-pickers/fields/ClearableBehavior.tsx.preview index ddcb0b1bd872..7d6f7bd709eb 100644 --- a/docs/data/date-pickers/fields/ClearableBehavior.tsx.preview +++ b/docs/data/date-pickers/fields/ClearableBehavior.tsx.preview @@ -1,4 +1,4 @@ - setValue(newValue)} diff --git a/docs/data/date-pickers/fields/CustomizeClearIcon.tsx.preview b/docs/data/date-pickers/fields/CustomizeClearIcon.tsx.preview index df4e79c1e863..8f0c5257eae9 100644 --- a/docs/data/date-pickers/fields/CustomizeClearIcon.tsx.preview +++ b/docs/data/date-pickers/fields/CustomizeClearIcon.tsx.preview @@ -1,5 +1,14 @@ - \ No newline at end of file + + + + + + \ No newline at end of file From 2ce8be4792acd02d5967e6a537d331d13fce675d Mon Sep 17 00:00:00 2001 From: noraleonte Date: Wed, 21 Jun 2023 17:27:29 +0300 Subject: [PATCH 17/55] avoid clearable prop to be passed to multi-input pickers --- .../hooks/useEnrichedRangePickerFieldProps.ts | 10 +++++++++- .../useMultiInputDateRangeField.ts | 14 +++++++++++++- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useEnrichedRangePickerFieldProps.ts b/packages/x-date-pickers-pro/src/internal/hooks/useEnrichedRangePickerFieldProps.ts index b7e198f2e0a6..7238153e9973 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useEnrichedRangePickerFieldProps.ts +++ b/packages/x-date-pickers-pro/src/internal/hooks/useEnrichedRangePickerFieldProps.ts @@ -228,7 +228,15 @@ const useMultiInputFieldSlotProps = { + if (key !== 'clearable' && key !== 'onClear') { + return { ...prev, [key]: fieldProps[key] }; + } + return prev; + }, {}); + + const enrichedFieldProps: ReturnType = { ...unclearableFieldProps, slots, slotProps }; return enrichedFieldProps; }; diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts b/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts index a6c72af7cdb9..b370cfd690fa 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts +++ b/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts @@ -151,5 +151,17 @@ export const useMultiInputDateRangeField = ; - return { startDate: startDateResponse, endDate: endDateResponse }; + /* TODO: remove this when a clearable behavior for multiple input range fields is implemented */ + const excludeClearableProps = (props) => + Object.keys(props).reduce((prev, key) => { + if (key !== 'clearable' && key !== 'onClear') { + return { ...prev, [key]: props[key] }; + } + return prev; + }, {}) as UseFieldResponse; + + return { + startDate: excludeClearableProps(startDateResponse), + endDate: excludeClearableProps(endDateResponse), + }; }; From e1b8c531a64edd15a1cb6bd09ce0debce09b74d9 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Thu, 22 Jun 2023 13:34:07 +0300 Subject: [PATCH 18/55] fix diffs in demo files --- .../date-pickers/date-picker/ClearableProp.js | 2 +- .../date-pickers/date-picker/ClearableProp.tsx | 2 +- .../date-picker/ClearableProp.tsx.preview | 16 ++++++++++------ .../date-pickers/fields/BrowserDateFields.js | 3 +++ .../fields/ClearableBehavior.tsx.preview | 18 +++++++++++------- 5 files changed, 26 insertions(+), 15 deletions(-) diff --git a/docs/data/date-pickers/date-picker/ClearableProp.js b/docs/data/date-pickers/date-picker/ClearableProp.js index fc1a77d64468..526687b992bb 100644 --- a/docs/data/date-pickers/date-picker/ClearableProp.js +++ b/docs/data/date-pickers/date-picker/ClearableProp.js @@ -32,7 +32,7 @@ export default function ClearableProp() { > - + - + setCleared(true) }, - }} -/> \ No newline at end of file + + + setCleared(true) }, + }} + /> + + \ No newline at end of file diff --git a/docs/data/date-pickers/fields/BrowserDateFields.js b/docs/data/date-pickers/fields/BrowserDateFields.js index 4e8c20a249b1..85131eca9098 100644 --- a/docs/data/date-pickers/fields/BrowserDateFields.js +++ b/docs/data/date-pickers/fields/BrowserDateFields.js @@ -49,6 +49,7 @@ export default function BrowserDateFields() { slots={{ textField: BrowserField, }} + sx={{ width: '300px' }} /> @@ -59,6 +60,7 @@ export default function BrowserDateFields() { slots={{ textField: BrowserField, }} + sx={{ width: '300px' }} /> @@ -68,6 +70,7 @@ export default function BrowserDateFields() { slots={{ textField: BrowserField, }} + sx={{ width: '300px' }} /> diff --git a/docs/data/date-pickers/fields/ClearableBehavior.tsx.preview b/docs/data/date-pickers/fields/ClearableBehavior.tsx.preview index 7d6f7bd709eb..8cda602e07e4 100644 --- a/docs/data/date-pickers/fields/ClearableBehavior.tsx.preview +++ b/docs/data/date-pickers/fields/ClearableBehavior.tsx.preview @@ -1,7 +1,11 @@ - setValue(newValue)} - onClear={() => setCleared(true)} - clearable -/> \ No newline at end of file + + + setValue(newValue)} + onClear={() => setCleared(true)} + clearable + /> + + \ No newline at end of file From 3aff31791517470d1814234e46dca40962ccd58e Mon Sep 17 00:00:00 2001 From: noraleonte Date: Thu, 22 Jun 2023 13:50:12 +0300 Subject: [PATCH 19/55] avoid the use of clearable props in multi input fields --- .../hooks/useMultiInputRangeField/shared.tsx | 12 ++++++++++++ .../useMultiInputDateRangeField.ts | 11 ++--------- .../useMultiInputDateTimeRangeField.ts | 7 ++++++- .../useMultiInputTimeRangeField.ts | 7 ++++++- 4 files changed, 26 insertions(+), 11 deletions(-) create mode 100644 packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/shared.tsx diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/shared.tsx b/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/shared.tsx new file mode 100644 index 000000000000..9fa27818fe8e --- /dev/null +++ b/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/shared.tsx @@ -0,0 +1,12 @@ +import { UseFieldResponse } from '@mui/x-date-pickers/internals'; + +/* TODO: remove this when a clearable behavior for multiple input range fields is implemented */ +export const excludeClearableProps = ( + props: UseFieldResponse, +): UseFieldResponse => + Object.keys(props).reduce((prev, key) => { + if (key !== 'clearable' && key !== 'onClear') { + return { ...prev, [key]: props[key] }; + } + return prev; + }, {}) as UseFieldResponse; diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts b/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts index b370cfd690fa..8f9d5e73607b 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts +++ b/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts @@ -24,6 +24,7 @@ import { import { rangeValueManager } from '../../utils/valueManagers'; import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types'; import { DateRangeValidationError } from '../../../models'; +import { excludeClearableProps } from './shared'; export const useMultiInputDateRangeField = ({ sharedProps: inSharedProps, @@ -151,15 +152,7 @@ export const useMultiInputDateRangeField = ; - /* TODO: remove this when a clearable behavior for multiple input range fields is implemented */ - const excludeClearableProps = (props) => - Object.keys(props).reduce((prev, key) => { - if (key !== 'clearable' && key !== 'onClear') { - return { ...prev, [key]: props[key] }; - } - return prev; - }, {}) as UseFieldResponse; - + /* TODO: Undo this change when a clearable behavior for multiple input range fields is implemented */ return { startDate: excludeClearableProps(startDateResponse), endDate: excludeClearableProps(endDateResponse), diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts b/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts index 5d9a6770c776..a2640ae24355 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts @@ -30,6 +30,7 @@ import { } from '../../utils/validation/validateDateTimeRange'; import { rangeValueManager } from '../../utils/valueManagers'; import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types'; +import { excludeClearableProps } from './shared'; export const useDefaultizedDateTimeRangeFieldProps = ( props: UseMultiInputDateTimeRangeFieldProps, @@ -172,5 +173,9 @@ export const useMultiInputDateTimeRangeField = ; - return { startDate: startDateResponse, endDate: endDateResponse }; + /* TODO: Undo this change when a clearable behavior for multiple input range fields is implemented */ + return { + startDate: excludeClearableProps(startDateResponse), + endDate: excludeClearableProps(endDateResponse), + }; }; diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts b/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts index 092b9e8b121a..bd6d0ca23bf9 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts @@ -28,6 +28,7 @@ import type { } from '../../../MultiInputTimeRangeField/MultiInputTimeRangeField.types'; import { rangeValueManager } from '../../utils/valueManagers'; import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types'; +import { excludeClearableProps } from './shared'; export const useDefaultizedTimeRangeFieldProps = ( props: UseMultiInputTimeRangeFieldProps, @@ -162,5 +163,9 @@ export const useMultiInputTimeRangeField = ; - return { startDate: startDateResponse, endDate: endDateResponse }; + /* TODO: Undo this change when a clearable behavior for multiple input range fields is implemented */ + return { + startDate: excludeClearableProps(startDateResponse), + endDate: excludeClearableProps(endDateResponse), + }; }; From c5fbec018cc1f8fd08c5f50a1c269c8bde7f5296 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Thu, 22 Jun 2023 14:42:16 +0300 Subject: [PATCH 20/55] ts format --- docs/data/data-grid/column-menu/OverrideColumnMenuGrid.js | 1 + docs/data/data-grid/editing/CustomEditComponent.js | 1 + docs/data/data-grid/filtering/CustomMultiValueOperator.js | 1 + docs/data/data-grid/filtering/CustomSelectionOperator.js | 1 + docs/data/data-grid/master-detail/BasicDetailPanels.js | 1 + docs/data/data-grid/master-detail/DetailPanelAutoHeight.js | 2 ++ docs/data/data-grid/master-detail/FullWidthDetailPanel.js | 1 + docs/data/data-grid/pagination/CursorPaginationGrid.js | 2 ++ docs/data/data-grid/pagination/ServerPaginationGrid.js | 1 + .../data/data-grid/recipes-editing/EditingWithDatePickers.js | 1 + .../data-grid/recipes-editing/LinkedFieldsCellEditing.js | 1 + .../row-grouping/RowGroupingCustomGroupingColDefCallback.js | 1 + docs/data/data-grid/scrolling/ScrollPlayground.js | 2 ++ docs/data/data-grid/sorting/DisableSortingGrid.js | 1 + .../data/data-grid/tree-data/TreeDataCustomGroupingColumn.js | 1 + .../MultiInputDateRangeField/MultiInputDateRangeField.tsx | 5 ++++- .../MultiInputDateRangeField.types.ts | 2 +- 17 files changed, 23 insertions(+), 2 deletions(-) diff --git a/docs/data/data-grid/column-menu/OverrideColumnMenuGrid.js b/docs/data/data-grid/column-menu/OverrideColumnMenuGrid.js index bc47c6a764fc..42af71803955 100644 --- a/docs/data/data-grid/column-menu/OverrideColumnMenuGrid.js +++ b/docs/data/data-grid/column-menu/OverrideColumnMenuGrid.js @@ -16,6 +16,7 @@ function CustomFilterItem(props) { }, [apiRef, colDef.field, onClick], ); + return ( diff --git a/docs/data/data-grid/editing/CustomEditComponent.js b/docs/data/data-grid/editing/CustomEditComponent.js index 92c4832ac8a7..42f5b1481491 100644 --- a/docs/data/data-grid/editing/CustomEditComponent.js +++ b/docs/data/data-grid/editing/CustomEditComponent.js @@ -18,6 +18,7 @@ function RatingEditInputCell(props) { const handleRef = (element) => { if (element) { const input = element.querySelector(`input[value="${value}"]`); + input?.focus(); } }; diff --git a/docs/data/data-grid/filtering/CustomMultiValueOperator.js b/docs/data/data-grid/filtering/CustomMultiValueOperator.js index 8a339e582458..ef7d12139d46 100644 --- a/docs/data/data-grid/filtering/CustomMultiValueOperator.js +++ b/docs/data/data-grid/filtering/CustomMultiValueOperator.js @@ -12,6 +12,7 @@ function InputNumberInterval(props) { const filterTimeout = React.useRef(); const [filterValueState, setFilterValueState] = React.useState(item.value ?? ''); + const [applying, setIsApplying] = React.useState(false); React.useEffect(() => { diff --git a/docs/data/data-grid/filtering/CustomSelectionOperator.js b/docs/data/data-grid/filtering/CustomSelectionOperator.js index 2fb64da23321..7f0c9b754197 100644 --- a/docs/data/data-grid/filtering/CustomSelectionOperator.js +++ b/docs/data/data-grid/filtering/CustomSelectionOperator.js @@ -40,6 +40,7 @@ export default function CustomSelectionOperator() { ); const rowSelectionModelLookupRef = React.useRef(rowSelectionModelLookup); + rowSelectionModelLookupRef.current = rowSelectionModelLookup; const columns = React.useMemo(() => { diff --git a/docs/data/data-grid/master-detail/BasicDetailPanels.js b/docs/data/data-grid/master-detail/BasicDetailPanels.js index 27441b5dc395..6dee9c664141 100644 --- a/docs/data/data-grid/master-detail/BasicDetailPanels.js +++ b/docs/data/data-grid/master-detail/BasicDetailPanels.js @@ -88,6 +88,7 @@ const columns = [ (acc, product) => product.unitPrice * product.quantity, 0, ); + const taxes = subtotal * 0.05; return subtotal + taxes; }, diff --git a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.js b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.js index 27f09d304ab4..eb7a82c9a301 100644 --- a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.js +++ b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.js @@ -48,6 +48,7 @@ function DetailPanelContent({ row: rowProp }) { const newProducts = rowProp.products.filter( (product) => product.id !== productId, ); + apiRef.current.updateRows([{ ...rowProp, products: newProducts }]); }, [apiRef, rowProp], @@ -146,6 +147,7 @@ const columns = [ (acc, product) => product.unitPrice * product.quantity, 0, ); + const taxes = subtotal * 0.05; return subtotal + taxes; }, diff --git a/docs/data/data-grid/master-detail/FullWidthDetailPanel.js b/docs/data/data-grid/master-detail/FullWidthDetailPanel.js index dd37ac623ca1..e49cade67d93 100644 --- a/docs/data/data-grid/master-detail/FullWidthDetailPanel.js +++ b/docs/data/data-grid/master-detail/FullWidthDetailPanel.js @@ -103,6 +103,7 @@ const columns = [ (acc, product) => product.unitPrice * product.quantity, 0, ); + const taxes = subtotal * 0.05; return subtotal + taxes; }, diff --git a/docs/data/data-grid/pagination/CursorPaginationGrid.js b/docs/data/data-grid/pagination/CursorPaginationGrid.js index cf369037fa5f..172de032f973 100644 --- a/docs/data/data-grid/pagination/CursorPaginationGrid.js +++ b/docs/data/data-grid/pagination/CursorPaginationGrid.js @@ -25,6 +25,7 @@ export default function CursorPaginationGrid() { }), [paginationModel], ); + const { isLoading, rows, pageInfo } = useQuery(queryOptions); const handlePaginationModelChange = (newPaginationModel) => { @@ -49,6 +50,7 @@ export default function CursorPaginationGrid() { const [rowCountState, setRowCountState] = React.useState( pageInfo?.totalRowCount || 0, ); + React.useEffect(() => { setRowCountState((prevRowCountState) => pageInfo?.totalRowCount !== undefined diff --git a/docs/data/data-grid/pagination/ServerPaginationGrid.js b/docs/data/data-grid/pagination/ServerPaginationGrid.js index 0bcb826f4034..311f0da7ef43 100644 --- a/docs/data/data-grid/pagination/ServerPaginationGrid.js +++ b/docs/data/data-grid/pagination/ServerPaginationGrid.js @@ -21,6 +21,7 @@ export default function ServerPaginationGrid() { const [rowCountState, setRowCountState] = React.useState( pageInfo?.totalRowCount || 0, ); + React.useEffect(() => { setRowCountState((prevRowCountState) => pageInfo?.totalRowCount !== undefined diff --git a/docs/data/data-grid/recipes-editing/EditingWithDatePickers.js b/docs/data/data-grid/recipes-editing/EditingWithDatePickers.js index 9649d2b1bdc1..b8a1231d92f7 100644 --- a/docs/data/data-grid/recipes-editing/EditingWithDatePickers.js +++ b/docs/data/data-grid/recipes-editing/EditingWithDatePickers.js @@ -42,6 +42,7 @@ function buildApplyDateFilterFn(filterItem, compareFn, showTime = false) { 0, 0, ); + const cellValueMs = dateCopy.getTime(); return compareFn(cellValueMs, filterValueMs); diff --git a/docs/data/data-grid/recipes-editing/LinkedFieldsCellEditing.js b/docs/data/data-grid/recipes-editing/LinkedFieldsCellEditing.js index 23fc0a7c9043..b78c3bdba2ca 100644 --- a/docs/data/data-grid/recipes-editing/LinkedFieldsCellEditing.js +++ b/docs/data/data-grid/recipes-editing/LinkedFieldsCellEditing.js @@ -116,6 +116,7 @@ export default function LinkedFieldsCellEditing() { setRows((prevRows) => prevRows.map((row) => (row.id === editingRow.current?.id ? newRow : row)), ); + return newRow; }; diff --git a/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.js b/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.js index 6c6ad41c2bcd..48fd5bd147fb 100644 --- a/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.js +++ b/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.js @@ -60,6 +60,7 @@ export default function RowGroupingCustomGroupingColDefCallback() { headerName: 'Director', valueFormatter: (valueFormatterParams) => { const rowNode = apiRef.current.getRowNode(valueFormatterParams.id); + if ( rowNode?.type === 'group' && rowNode?.groupingField === 'director' diff --git a/docs/data/data-grid/scrolling/ScrollPlayground.js b/docs/data/data-grid/scrolling/ScrollPlayground.js index 82ab01c58cb5..e1dffebed26e 100644 --- a/docs/data/data-grid/scrolling/ScrollPlayground.js +++ b/docs/data/data-grid/scrolling/ScrollPlayground.js @@ -58,9 +58,11 @@ export default function ScrollPlayground() { const rowIndex = gridExpandedSortedRowIdsSelector(apiRef).findIndex( (id) => id === params.id, ); + const colIndex = gridVisibleColumnDefinitionsSelector(apiRef).findIndex( (column) => column.field === params.field, ); + setCoordinates({ rowIndex, colIndex }); }; diff --git a/docs/data/data-grid/sorting/DisableSortingGrid.js b/docs/data/data-grid/sorting/DisableSortingGrid.js index 93117ac410ad..421d6fa7a24f 100644 --- a/docs/data/data-grid/sorting/DisableSortingGrid.js +++ b/docs/data/data-grid/sorting/DisableSortingGrid.js @@ -18,6 +18,7 @@ export default function DisableSortingGrid() { ), [data.columns], ); + return (
diff --git a/docs/data/data-grid/tree-data/TreeDataCustomGroupingColumn.js b/docs/data/data-grid/tree-data/TreeDataCustomGroupingColumn.js index 1a7a7ff8ad46..e0d7fde69652 100644 --- a/docs/data/data-grid/tree-data/TreeDataCustomGroupingColumn.js +++ b/docs/data/data-grid/tree-data/TreeDataCustomGroupingColumn.js @@ -22,6 +22,7 @@ function CustomGridTreeDataGroupingCell(props) { apiRef, gridFilteredDescendantCountLookupSelector, ); + const filteredDescendantCount = filteredDescendantCountLookup[rowNode.id] ?? 0; const handleClick = (event) => { diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx index 42a789b82d96..12d7c56af61f 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx @@ -50,7 +50,10 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi const { internalProps: dateFieldInternalProps, forwardedProps } = splitFieldInternalAndForwardedProps< typeof themeProps, - keyof Omit, 'unstableFieldRef' | 'disabled'> + keyof Omit< + UseDateRangeFieldProps, + 'unstableFieldRef' | 'disabled' | 'clearable' | 'onClear' + > >(themeProps, 'date'); const { diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts index 056ccf1dbc32..d2e47e2b061a 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts @@ -16,7 +16,7 @@ export type UseMultiInputDateRangeFieldParams< > = UseMultiInputRangeFieldParams, TTextFieldSlotProps>; export interface UseMultiInputDateRangeFieldProps - extends Omit, 'unstableFieldRef'> { + extends Omit, 'unstableFieldRef' | 'clearable' | 'onClear'> { unstableStartFieldRef?: React.Ref>; unstableEndFieldRef?: React.Ref>; } From 5b731e2e59bd019b3928b7ec6afa42ce8b2b28e9 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Thu, 22 Jun 2023 14:53:32 +0300 Subject: [PATCH 21/55] types and api for multi input fields --- .../date-pickers/multi-input-date-range-field.json | 2 -- .../multi-input-date-time-range-field.json | 2 -- .../date-pickers/multi-input-time-range-field.json | 2 -- .../date-pickers/multi-input-date-range-field.json | 2 -- .../multi-input-date-time-range-field.json | 2 -- .../date-pickers/multi-input-time-range-field.json | 2 -- .../MultiInputDateRangeField.tsx | 9 --------- .../MultiInputDateTimeRangeField.tsx | 14 ++++---------- .../MultiInputDateTimeRangeField.types.ts | 2 +- .../MultiInputTimeRangeField.tsx | 14 ++++---------- .../MultiInputTimeRangeField.types.ts | 2 +- 11 files changed, 10 insertions(+), 43 deletions(-) diff --git a/docs/pages/x/api/date-pickers/multi-input-date-range-field.json b/docs/pages/x/api/date-pickers/multi-input-date-range-field.json index dc5ae7cad089..4fd215351a3a 100644 --- a/docs/pages/x/api/date-pickers/multi-input-date-range-field.json +++ b/docs/pages/x/api/date-pickers/multi-input-date-range-field.json @@ -1,6 +1,5 @@ { "props": { - "clearable": { "type": { "name": "bool" } }, "components": { "type": { "name": "object" }, "default": "{}", @@ -33,7 +32,6 @@ "maxDate": { "type": { "name": "any" } }, "minDate": { "type": { "name": "any" } }, "onChange": { "type": { "name": "func" } }, - "onClear": { "type": { "name": "func" } }, "onError": { "type": { "name": "func" } }, "onSelectedSectionsChange": { "type": { "name": "func" } }, "readOnly": { "type": { "name": "bool" } }, diff --git a/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json b/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json index 4e0450b5b6ec..bc566422505e 100644 --- a/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json +++ b/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json @@ -1,7 +1,6 @@ { "props": { "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, - "clearable": { "type": { "name": "bool" } }, "components": { "type": { "name": "object" }, "default": "{}", @@ -40,7 +39,6 @@ "minTime": { "type": { "name": "any" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "onChange": { "type": { "name": "func" } }, - "onClear": { "type": { "name": "func" } }, "onError": { "type": { "name": "func" } }, "onSelectedSectionsChange": { "type": { "name": "func" } }, "readOnly": { "type": { "name": "bool" } }, diff --git a/docs/pages/x/api/date-pickers/multi-input-time-range-field.json b/docs/pages/x/api/date-pickers/multi-input-time-range-field.json index 1bbaa91f65e5..c7d85cbef558 100644 --- a/docs/pages/x/api/date-pickers/multi-input-time-range-field.json +++ b/docs/pages/x/api/date-pickers/multi-input-time-range-field.json @@ -1,7 +1,6 @@ { "props": { "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" }, - "clearable": { "type": { "name": "bool" } }, "components": { "type": { "name": "object" }, "default": "{}", @@ -36,7 +35,6 @@ "minTime": { "type": { "name": "any" } }, "minutesStep": { "type": { "name": "number" }, "default": "1" }, "onChange": { "type": { "name": "func" } }, - "onClear": { "type": { "name": "func" } }, "onError": { "type": { "name": "func" } }, "onSelectedSectionsChange": { "type": { "name": "func" } }, "readOnly": { "type": { "name": "bool" } }, diff --git a/docs/translations/api-docs/date-pickers/multi-input-date-range-field.json b/docs/translations/api-docs/date-pickers/multi-input-date-range-field.json index a5e8b8bd791b..7dd09ad10a31 100644 --- a/docs/translations/api-docs/date-pickers/multi-input-date-range-field.json +++ b/docs/translations/api-docs/date-pickers/multi-input-date-range-field.json @@ -1,7 +1,6 @@ { "componentDescription": "", "propDescriptions": { - "clearable": "If true, the field will be cleared when the user clicks on the clear button.", "components": "Overridable components.", "componentsProps": "The props used for each component slot.", "defaultValue": "The default value. Use when the component is not controlled.", @@ -15,7 +14,6 @@ "maxDate": "Maximal selectable date.", "minDate": "Minimal selectable date.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.", - "onClear": "Event fired when the clear button is clicked.", "onError": "Callback fired when the error associated to the current value changes.

Signature:
function(error: TError, value: TValue) => void
error: The new error.
value: The value associated to the error.", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", "readOnly": "It prevents the user from changing the value of the field (not from interacting with the field).", diff --git a/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field.json b/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field.json index 3849aa265c67..3bb84bcd76f5 100644 --- a/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/multi-input-date-time-range-field.json @@ -2,7 +2,6 @@ "componentDescription": "", "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", - "clearable": "If true, the field will be cleared when the user clicks on the clear button.", "components": "Overridable components.", "componentsProps": "The props used for each component slot.", "defaultValue": "The default value. Use when the component is not controlled.", @@ -22,7 +21,6 @@ "minTime": "Minimal selectable time. The date part of the object will be ignored unless props.disableIgnoringDatePartForTimeValidation === true.", "minutesStep": "Step over minutes.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.", - "onClear": "Event fired when the clear button is clicked.", "onError": "Callback fired when the error associated to the current value changes.

Signature:
function(error: TError, value: TValue) => void
error: The new error.
value: The value associated to the error.", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", "readOnly": "It prevents the user from changing the value of the field (not from interacting with the field).", diff --git a/docs/translations/api-docs/date-pickers/multi-input-time-range-field.json b/docs/translations/api-docs/date-pickers/multi-input-time-range-field.json index c80ffa843866..59a6a9c48659 100644 --- a/docs/translations/api-docs/date-pickers/multi-input-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/multi-input-time-range-field.json @@ -2,7 +2,6 @@ "componentDescription": "", "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", - "clearable": "If true, the field will be cleared when the user clicks on the clear button.", "components": "Overridable components.", "componentsProps": "The props used for each component slot.", "defaultValue": "The default value. Use when the component is not controlled.", @@ -18,7 +17,6 @@ "minTime": "Minimal selectable time. The date part of the object will be ignored unless props.disableIgnoringDatePartForTimeValidation === true.", "minutesStep": "Step over minutes.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.", - "onClear": "Event fired when the clear button is clicked.", "onError": "Callback fired when the error associated to the current value changes.

Signature:
function(error: TError, value: TValue) => void
error: The new error.
value: The value associated to the error.", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", "readOnly": "It prevents the user from changing the value of the field (not from interacting with the field).", diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx index 12d7c56af61f..9c31a4e0f2ea 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx @@ -172,11 +172,6 @@ MultiInputDateRangeField.propTypes = { // ---------------------------------------------------------------------- autoFocus: PropTypes.bool, className: PropTypes.string, - /** - * If `true`, the field will be cleared when the user clicks on the clear button. - * @default false - */ - clearable: PropTypes.bool, /** * Overridable components. * @default {} @@ -248,10 +243,6 @@ MultiInputDateRangeField.propTypes = { * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, - /** - * Event fired when the clear button is clicked. - */ - onClear: PropTypes.func, /** * Callback fired when the error associated to the current value changes. * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value. diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx index 6be6d9eb791b..81e650e5d779 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx @@ -50,7 +50,10 @@ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTim const { internalProps: dateTimeFieldInternalProps, forwardedProps } = splitFieldInternalAndForwardedProps< typeof themeProps, - keyof Omit, 'unstableFieldRef' | 'disabled'> + keyof Omit< + UseDateTimeRangeFieldProps, + 'unstableFieldRef' | 'disabled' | 'clearable' | 'onClear' + > >(themeProps, 'date-time'); const { @@ -174,11 +177,6 @@ MultiInputDateTimeRangeField.propTypes = { ampm: PropTypes.bool, autoFocus: PropTypes.bool, className: PropTypes.string, - /** - * If `true`, the field will be cleared when the user clicks on the clear button. - * @default false - */ - clearable: PropTypes.bool, /** * Overridable components. * @default {} @@ -278,10 +276,6 @@ MultiInputDateTimeRangeField.propTypes = { * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, - /** - * Event fired when the clear button is clicked. - */ - onClear: PropTypes.func, /** * Callback fired when the error associated to the current value changes. * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value. diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts index 665fcdc2082e..000f7ae95ebf 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts @@ -19,7 +19,7 @@ export type UseMultiInputDateTimeRangeFieldParams< > = UseMultiInputRangeFieldParams, TTextFieldSlotProps>; export interface UseMultiInputDateTimeRangeFieldProps - extends Omit, 'unstableFieldRef'> { + extends Omit, 'unstableFieldRef' | 'clearable' | 'onClear'> { unstableStartFieldRef?: React.Ref>; unstableEndFieldRef?: React.Ref>; } diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx index 8d6265c5d54b..d768b9f1f857 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx @@ -50,7 +50,10 @@ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeFi const { internalProps: timeFieldInternalProps, forwardedProps } = splitFieldInternalAndForwardedProps< typeof themeProps, - keyof Omit, 'unstableFieldRef' | 'disabled'> + keyof Omit< + UseTimeRangeFieldProps, + 'unstableFieldRef' | 'disabled' | 'clearable' | 'onClear' + > >(themeProps, 'time'); const { @@ -175,11 +178,6 @@ MultiInputTimeRangeField.propTypes = { ampm: PropTypes.bool, autoFocus: PropTypes.bool, className: PropTypes.string, - /** - * If `true`, the field will be cleared when the user clicks on the clear button. - * @default false - */ - clearable: PropTypes.bool, /** * Overridable components. * @default {} @@ -263,10 +261,6 @@ MultiInputTimeRangeField.propTypes = { * @param {FieldChangeHandlerContext} context The context containing the validation result of the current value. */ onChange: PropTypes.func, - /** - * Event fired when the clear button is clicked. - */ - onClear: PropTypes.func, /** * Callback fired when the error associated to the current value changes. * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value. diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts index fd8800b7f12d..040993814346 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts @@ -19,7 +19,7 @@ export type UseMultiInputTimeRangeFieldParams< > = UseMultiInputRangeFieldParams, TTextFieldSlotProps>; export interface UseMultiInputTimeRangeFieldProps - extends Omit, 'unstableFieldRef'> { + extends Omit, 'unstableFieldRef' | 'clearable' | 'onClear'> { unstableStartFieldRef?: React.Ref>; unstableEndFieldRef?: React.Ref>; } From 6f1b33d9e943945e7983d2f5047a86b20c88b7ad Mon Sep 17 00:00:00 2001 From: noraleonte Date: Thu, 22 Jun 2023 18:07:32 +0300 Subject: [PATCH 22/55] clean up demos --- .../date-pickers/date-picker/ClearableProp.js | 42 ++++++----- .../date-picker/ClearableProp.tsx | 42 ++++++----- .../date-picker/ClearableProp.tsx.preview | 10 --- .../date-pickers/fields/BrowserDateFields.js | 6 +- .../date-pickers/fields/BrowserDateFields.tsx | 6 +- .../fields/ClearableBehavior.tsx.preview | 11 --- .../data/date-pickers/fields/JoyDateFields.js | 6 +- .../date-pickers/fields/JoyDateFields.tsx | 6 +- .../fields/NativeBrowserDateFields.tsx | 72 +++++++++++++++++++ .../NativeBrowserDateFields.tsx.preview | 9 +++ 10 files changed, 139 insertions(+), 71 deletions(-) delete mode 100644 docs/data/date-pickers/date-picker/ClearableProp.tsx.preview delete mode 100644 docs/data/date-pickers/fields/ClearableBehavior.tsx.preview create mode 100644 docs/data/date-pickers/fields/NativeBrowserDateFields.tsx create mode 100644 docs/data/date-pickers/fields/NativeBrowserDateFields.tsx.preview diff --git a/docs/data/date-pickers/date-picker/ClearableProp.js b/docs/data/date-pickers/date-picker/ClearableProp.js index 526687b992bb..ae9e145a5703 100644 --- a/docs/data/date-pickers/date-picker/ClearableProp.js +++ b/docs/data/date-pickers/date-picker/ClearableProp.js @@ -21,17 +21,17 @@ export default function ClearableProp() { }, [cleared]); return ( - - - + + + - - - {cleared && ( - - Field cleared! - - )} - + + {cleared && ( + + Field cleared! + + )} + + + ); } diff --git a/docs/data/date-pickers/date-picker/ClearableProp.tsx b/docs/data/date-pickers/date-picker/ClearableProp.tsx index e53c31774efb..6e2665d862eb 100644 --- a/docs/data/date-pickers/date-picker/ClearableProp.tsx +++ b/docs/data/date-pickers/date-picker/ClearableProp.tsx @@ -21,17 +21,17 @@ export default function ClearableProp() { }, [cleared]); return ( - - - + + + - - - {cleared && ( - - Field cleared! - - )} - + + {cleared && ( + + Field cleared! + + )} + + + ); } diff --git a/docs/data/date-pickers/date-picker/ClearableProp.tsx.preview b/docs/data/date-pickers/date-picker/ClearableProp.tsx.preview deleted file mode 100644 index 1fc2198e49ea..000000000000 --- a/docs/data/date-pickers/date-picker/ClearableProp.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - - - setCleared(true) }, - }} - /> - - \ No newline at end of file diff --git a/docs/data/date-pickers/fields/BrowserDateFields.js b/docs/data/date-pickers/fields/BrowserDateFields.js index 85131eca9098..ffb2331b1bb1 100644 --- a/docs/data/date-pickers/fields/BrowserDateFields.js +++ b/docs/data/date-pickers/fields/BrowserDateFields.js @@ -5,7 +5,7 @@ import { DateField } from '@mui/x-date-pickers/DateField'; import { TimeField } from '@mui/x-date-pickers/TimeField'; import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; -import { Box } from '@mui/material'; +import { Stack, Box } from '@mui/material'; const BrowserField = React.forwardRef((props, ref) => { const { @@ -41,7 +41,7 @@ export default function BrowserDateFields() { return ( - + - + ); diff --git a/docs/data/date-pickers/fields/BrowserDateFields.tsx b/docs/data/date-pickers/fields/BrowserDateFields.tsx index 83e70014ba5b..1e607c57963c 100644 --- a/docs/data/date-pickers/fields/BrowserDateFields.tsx +++ b/docs/data/date-pickers/fields/BrowserDateFields.tsx @@ -5,7 +5,7 @@ import { DateField } from '@mui/x-date-pickers/DateField'; import { TimeField } from '@mui/x-date-pickers/TimeField'; import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; -import { Box } from '@mui/material'; +import { Stack, Box } from '@mui/material'; interface BrowserFieldProps extends Omit, 'size'> { @@ -60,7 +60,7 @@ export default function BrowserDateFields() { return ( - + - + ); diff --git a/docs/data/date-pickers/fields/ClearableBehavior.tsx.preview b/docs/data/date-pickers/fields/ClearableBehavior.tsx.preview deleted file mode 100644 index 8cda602e07e4..000000000000 --- a/docs/data/date-pickers/fields/ClearableBehavior.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - - - setValue(newValue)} - onClear={() => setCleared(true)} - clearable - /> - - \ No newline at end of file diff --git a/docs/data/date-pickers/fields/JoyDateFields.js b/docs/data/date-pickers/fields/JoyDateFields.js index 68b2fcf43950..cf5f8209d700 100644 --- a/docs/data/date-pickers/fields/JoyDateFields.js +++ b/docs/data/date-pickers/fields/JoyDateFields.js @@ -8,7 +8,7 @@ import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; import Input from '@mui/joy/Input'; import FormControl from '@mui/joy/FormControl'; import FormLabel from '@mui/joy/FormLabel'; -import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; import { useTheme as useMaterialTheme, useColorScheme as useMaterialColorScheme, @@ -76,7 +76,7 @@ export default function JoyDateFields() { - + - + diff --git a/docs/data/date-pickers/fields/JoyDateFields.tsx b/docs/data/date-pickers/fields/JoyDateFields.tsx index dbcdfc1bd535..458ee9045d9b 100644 --- a/docs/data/date-pickers/fields/JoyDateFields.tsx +++ b/docs/data/date-pickers/fields/JoyDateFields.tsx @@ -8,7 +8,7 @@ import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; import Input, { InputProps } from '@mui/joy/Input'; import FormControl from '@mui/joy/FormControl'; import FormLabel from '@mui/joy/FormLabel'; -import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; import { useTheme as useMaterialTheme, useColorScheme as useMaterialColorScheme, @@ -91,7 +91,7 @@ export default function JoyDateFields() { - + - + diff --git a/docs/data/date-pickers/fields/NativeBrowserDateFields.tsx b/docs/data/date-pickers/fields/NativeBrowserDateFields.tsx new file mode 100644 index 000000000000..3dd9293eb859 --- /dev/null +++ b/docs/data/date-pickers/fields/NativeBrowserDateFields.tsx @@ -0,0 +1,72 @@ +import * as React from 'react'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DateField } from '@mui/x-date-pickers/DateField'; +import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; + +interface BrowserFieldProps + extends Omit, 'size'> { + label?: React.ReactNode; + inputProps?: { + ref?: React.Ref; + }; + InputProps?: { endAdornment?: React.ReactNode; startAdornment?: React.ReactNode }; + error?: boolean; + focused?: boolean; + ownerState?: any; + sx?: any; +} + +type BrowserFieldComponent = (( + props: BrowserFieldProps & React.RefAttributes, +) => JSX.Element) & { propTypes?: any }; + +const BrowserField = React.forwardRef( + (props: BrowserFieldProps, ref: React.Ref) => { + const { + disabled, + id, + label, + inputProps: { ref: inputRef } = {}, + InputProps: { startAdornment, endAdornment } = {}, + ...other + } = props; + + return ( +
+ +
+ {startAdornment} + + {endAdornment} +
+
+ ); + }, +) as BrowserFieldComponent; + +export default function NativeBrowserDateFields() { + return ( + + + + + + + + ); +} diff --git a/docs/data/date-pickers/fields/NativeBrowserDateFields.tsx.preview b/docs/data/date-pickers/fields/NativeBrowserDateFields.tsx.preview new file mode 100644 index 000000000000..5d780162961d --- /dev/null +++ b/docs/data/date-pickers/fields/NativeBrowserDateFields.tsx.preview @@ -0,0 +1,9 @@ + + + \ No newline at end of file From bbad262f0c88eba0a03a71f3177d2fbaf38a4f97 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Fri, 23 Jun 2023 14:30:52 +0300 Subject: [PATCH 23/55] fix the failing types --- .../hooks/useEnrichedRangePickerFieldProps.ts | 13 ++++++++++++- .../hooks/useMultiInputRangeField/shared.tsx | 6 +++++- packages/x-date-pickers/src/icons/index.tsx | 8 ++++++++ .../src/internals/hooks/useClearField.tsx | 11 ++++++----- 4 files changed, 31 insertions(+), 7 deletions(-) diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useEnrichedRangePickerFieldProps.ts b/packages/x-date-pickers-pro/src/internal/hooks/useEnrichedRangePickerFieldProps.ts index 7238153e9973..beed40d16d6c 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useEnrichedRangePickerFieldProps.ts +++ b/packages/x-date-pickers-pro/src/internal/hooks/useEnrichedRangePickerFieldProps.ts @@ -231,7 +231,18 @@ const useMultiInputFieldSlotProps = { if (key !== 'clearable' && key !== 'onClear') { - return { ...prev, [key]: fieldProps[key] }; + return { + ...prev, + [key as keyof BaseMultiInputFieldProps, TDate, RangeFieldSection, TError>]: + fieldProps[ + key as keyof BaseMultiInputFieldProps< + DateRange, + TDate, + RangeFieldSection, + TError + > + ], + }; } return prev; }, {}); diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/shared.tsx b/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/shared.tsx index 9fa27818fe8e..80da4212c6c1 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/shared.tsx +++ b/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/shared.tsx @@ -6,7 +6,11 @@ export const excludeClearableProps = ( ): UseFieldResponse => Object.keys(props).reduce((prev, key) => { if (key !== 'clearable' && key !== 'onClear') { - return { ...prev, [key]: props[key] }; + return { + ...prev, + [key as keyof UseFieldResponse]: + props[key as keyof UseFieldResponse], + }; } return prev; }, {}) as UseFieldResponse; diff --git a/packages/x-date-pickers/src/icons/index.tsx b/packages/x-date-pickers/src/icons/index.tsx index 74cf00414bb4..6ce0eb246190 100644 --- a/packages/x-date-pickers/src/icons/index.tsx +++ b/packages/x-date-pickers/src/icons/index.tsx @@ -59,3 +59,11 @@ export const TimeIcon = createSvgIcon( , 'Time', ); + +/** + * @ignore - internal component. + */ +export const ClearIcon = createSvgIcon( + , + 'Clear', +); diff --git a/packages/x-date-pickers/src/internals/hooks/useClearField.tsx b/packages/x-date-pickers/src/internals/hooks/useClearField.tsx index 554329887485..0db059db3987 100644 --- a/packages/x-date-pickers/src/internals/hooks/useClearField.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useClearField.tsx @@ -1,13 +1,14 @@ import * as React from 'react'; import { useSlotProps } from '@mui/base'; -import ClearIcon from '@mui/icons-material/Clear'; import IconButton from '@mui/material/IconButton'; +import { SxProps } from '@mui/system'; +import { ClearIcon } from '../../icons'; import { FieldSlotsComponents, FieldSlotsComponentsProps } from './useField/useField.types'; import { FieldsTextFieldProps } from '../models'; type UseClearFieldProps< - TFieldProps extends FieldsTextFieldProps & { focus?: boolean }, + TFieldProps extends FieldsTextFieldProps & { focused?: boolean }, TInputProps extends { endAdornment?: React.ReactNode } | undefined, TFieldSlots extends FieldSlotsComponents, TFieldSlotsComponentsProps extends FieldSlotsComponentsProps, @@ -22,7 +23,7 @@ type UseClearFieldProps< export const useClearField = < TFieldProps extends FieldsTextFieldProps & { - focus?: boolean; + focused?: boolean; }, TInputProps extends { endAdornment?: React.ReactNode } | undefined, TFieldSlotsComponents extends FieldSlotsComponents, @@ -77,8 +78,8 @@ export const useClearField = < }, }, ...forwardedFieldProps?.sx, - }, - }; + } as SxProps, + } as TFieldProps; return { InputProps, fieldProps }; }; From a71ac0b577c5d86fe71ff882c8ad42a6cfd77c70 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Fri, 23 Jun 2023 15:36:34 +0300 Subject: [PATCH 24/55] fix failing test fpr MobileDateRangePicker --- .../MultiInputDateRangeField.tsx | 2 +- .../MultiInputDateRangeField.types.ts | 5 +++- .../MultiInputDateTimeRangeField.tsx | 2 +- .../MultiInputDateTimeRangeField.types.ts | 5 +++- .../MultiInputTimeRangeField.tsx | 2 +- .../MultiInputTimeRangeField.types.ts | 5 +++- .../hooks/useEnrichedRangePickerFieldProps.ts | 27 +++++++------------ .../hooks/useMultiInputRangeField/shared.tsx | 16 +++++------ .../useMultiInputDateRangeField.ts | 12 +++++++-- .../useMultiInputDateTimeRangeField.ts | 12 +++++++-- .../useMultiInputTimeRangeField.ts | 12 +++++++-- .../src/internals/hooks/useClearField.tsx | 23 +++++++++++----- .../src/internals/hooks/useField/useField.ts | 2 +- 13 files changed, 79 insertions(+), 46 deletions(-) diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx index 9c31a4e0f2ea..90707225fdd1 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx @@ -52,7 +52,7 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi typeof themeProps, keyof Omit< UseDateRangeFieldProps, - 'unstableFieldRef' | 'disabled' | 'clearable' | 'onClear' + 'unstableFieldRef' | 'disabled' | 'clearable' | 'onClear' | 'inputHasFocus' > >(themeProps, 'date'); diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts index d2e47e2b061a..48254c655b4c 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts @@ -16,7 +16,10 @@ export type UseMultiInputDateRangeFieldParams< > = UseMultiInputRangeFieldParams, TTextFieldSlotProps>; export interface UseMultiInputDateRangeFieldProps - extends Omit, 'unstableFieldRef' | 'clearable' | 'onClear'> { + extends Omit< + UseDateRangeFieldProps, + 'unstableFieldRef' | 'clearable' | 'onClear' | 'inputHasFocus' + > { unstableStartFieldRef?: React.Ref>; unstableEndFieldRef?: React.Ref>; } diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx index 81e650e5d779..f3f6b77ce81f 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx @@ -52,7 +52,7 @@ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTim typeof themeProps, keyof Omit< UseDateTimeRangeFieldProps, - 'unstableFieldRef' | 'disabled' | 'clearable' | 'onClear' + 'unstableFieldRef' | 'disabled' | 'clearable' | 'onClear' | 'inputHasFocus' > >(themeProps, 'date-time'); diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts index 000f7ae95ebf..83ae3bbe8567 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts @@ -19,7 +19,10 @@ export type UseMultiInputDateTimeRangeFieldParams< > = UseMultiInputRangeFieldParams, TTextFieldSlotProps>; export interface UseMultiInputDateTimeRangeFieldProps - extends Omit, 'unstableFieldRef' | 'clearable' | 'onClear'> { + extends Omit< + UseDateTimeRangeFieldProps, + 'unstableFieldRef' | 'clearable' | 'onClear' | 'inputHasFocus' + > { unstableStartFieldRef?: React.Ref>; unstableEndFieldRef?: React.Ref>; } diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx index d768b9f1f857..27f57c03dab8 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx @@ -52,7 +52,7 @@ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeFi typeof themeProps, keyof Omit< UseTimeRangeFieldProps, - 'unstableFieldRef' | 'disabled' | 'clearable' | 'onClear' + 'unstableFieldRef' | 'disabled' | 'clearable' | 'onClear' | 'inputHasFocus' > >(themeProps, 'time'); diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts index 040993814346..03abedb5c16c 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts @@ -19,7 +19,10 @@ export type UseMultiInputTimeRangeFieldParams< > = UseMultiInputRangeFieldParams, TTextFieldSlotProps>; export interface UseMultiInputTimeRangeFieldProps - extends Omit, 'unstableFieldRef' | 'clearable' | 'onClear'> { + extends Omit< + UseTimeRangeFieldProps, + 'unstableFieldRef' | 'clearable' | 'onClear' | 'inputHasFocus' + > { unstableStartFieldRef?: React.Ref>; unstableEndFieldRef?: React.Ref>; } diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useEnrichedRangePickerFieldProps.ts b/packages/x-date-pickers-pro/src/internal/hooks/useEnrichedRangePickerFieldProps.ts index beed40d16d6c..77c05569a5e1 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useEnrichedRangePickerFieldProps.ts +++ b/packages/x-date-pickers-pro/src/internal/hooks/useEnrichedRangePickerFieldProps.ts @@ -28,6 +28,7 @@ import { UseDateRangeFieldProps, } from '../models'; import { UseRangePositionResponse } from './useRangePosition'; +import { excludeClearableProps } from './useMultiInputRangeField/shared'; export interface RangePickerFieldSlotsComponent { Field: React.ElementType; @@ -229,25 +230,15 @@ const useMultiInputFieldSlotProps = { - if (key !== 'clearable' && key !== 'onClear') { - return { - ...prev, - [key as keyof BaseMultiInputFieldProps, TDate, RangeFieldSection, TError>]: - fieldProps[ - key as keyof BaseMultiInputFieldProps< - DateRange, - TDate, - RangeFieldSection, - TError - > - ], - }; - } - return prev; - }, {}); + const unclearableFieldProps = excludeClearableProps< + BaseMultiInputFieldProps, TDate, RangeFieldSection, TError> + >(fieldProps, ['clearable', 'onClear', 'inputHasFocus']); - const enrichedFieldProps: ReturnType = { ...unclearableFieldProps, slots, slotProps }; + const enrichedFieldProps: ReturnType = { + ...unclearableFieldProps, + slots, + slotProps, + }; return enrichedFieldProps; }; diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/shared.tsx b/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/shared.tsx index 80da4212c6c1..963ec47d244b 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/shared.tsx +++ b/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/shared.tsx @@ -1,16 +1,14 @@ -import { UseFieldResponse } from '@mui/x-date-pickers/internals'; - /* TODO: remove this when a clearable behavior for multiple input range fields is implemented */ -export const excludeClearableProps = ( - props: UseFieldResponse, -): UseFieldResponse => +export const excludeClearableProps = ( + props: TProps, + excludedProps: string[], +): TProps => Object.keys(props).reduce((prev, key) => { - if (key !== 'clearable' && key !== 'onClear') { + if (!excludedProps.includes(key)) { return { ...prev, - [key as keyof UseFieldResponse]: - props[key as keyof UseFieldResponse], + [key as keyof TProps]: props[key as keyof TProps], }; } return prev; - }, {}) as UseFieldResponse; + }, {}) as TProps; diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts b/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts index 8f9d5e73607b..d402f2ccd476 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts +++ b/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts @@ -154,7 +154,15 @@ export const useMultiInputDateRangeField = >(startDateResponse, [ + 'clearable', + 'onClear', + 'inputHasFocus', + ]), + endDate: excludeClearableProps>(endDateResponse, [ + 'clearable', + 'onClear', + 'inputHasFocus', + ]), }; }; diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts b/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts index a2640ae24355..52b3642f6030 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts @@ -175,7 +175,15 @@ export const useMultiInputDateTimeRangeField = >(startDateResponse, [ + 'clearable', + 'onClear', + 'inputHasFocus', + ]), + endDate: excludeClearableProps>(endDateResponse, [ + 'clearable', + 'onClear', + 'inputHasFocus', + ]), }; }; diff --git a/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts b/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts index bd6d0ca23bf9..30f8f3d99eff 100644 --- a/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts @@ -165,7 +165,15 @@ export const useMultiInputTimeRangeField = >(startDateResponse, [ + 'clearable', + 'onClear', + 'inputHasFocus', + ]), + endDate: excludeClearableProps>(endDateResponse, [ + 'clearable', + 'onClear', + 'inputHasFocus', + ]), }; }; diff --git a/packages/x-date-pickers/src/internals/hooks/useClearField.tsx b/packages/x-date-pickers/src/internals/hooks/useClearField.tsx index 0db059db3987..ee9c1ffddb9f 100644 --- a/packages/x-date-pickers/src/internals/hooks/useClearField.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useClearField.tsx @@ -7,14 +7,25 @@ import { ClearIcon } from '../../icons'; import { FieldSlotsComponents, FieldSlotsComponentsProps } from './useField/useField.types'; import { FieldsTextFieldProps } from '../models'; +const excludeClearableProps = (props: TProps, excludedProps: string[]): TProps => + Object.keys(props).reduce((prev, key) => { + if (!excludedProps.includes(key)) { + return { + ...prev, + [key as keyof TProps]: props[key as keyof TProps], + }; + } + return prev; + }, {}) as TProps; + type UseClearFieldProps< - TFieldProps extends FieldsTextFieldProps & { focused?: boolean }, + TFieldProps extends FieldsTextFieldProps & { inputHasFocus?: boolean }, TInputProps extends { endAdornment?: React.ReactNode } | undefined, TFieldSlots extends FieldSlotsComponents, TFieldSlotsComponentsProps extends FieldSlotsComponentsProps, > = { clearable: boolean; - fieldProps?: TFieldProps; + fieldProps: TFieldProps; InputProps: TInputProps; onClear: React.MouseEventHandler; slots?: { [K in keyof TFieldSlots as Uncapitalize]: TFieldSlots[K] }; @@ -23,7 +34,7 @@ type UseClearFieldProps< export const useClearField = < TFieldProps extends FieldsTextFieldProps & { - focused?: boolean; + inputHasFocus?: boolean; }, TInputProps extends { endAdornment?: React.ReactNode } | undefined, TFieldSlotsComponents extends FieldSlotsComponents, @@ -63,14 +74,14 @@ export const useClearField = < }; const fieldProps = { - ...forwardedFieldProps, + ...excludeClearableProps(forwardedFieldProps, ['inputHasFocus']), sx: { '& .clearButton': { visibility: 'visible', }, '@media (pointer: fine)': { - '& .clearButton': { - visibility: forwardedFieldProps?.focused ? 'visible' : 'hidden', + '&.Mui-focused .clearButton': { + visibility: forwardedFieldProps?.inputHasFocus ? 'visible' : 'hidden', }, '&:hover .clearButton': { diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts index ebe79b87c5c5..57482c2b6758 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -530,6 +530,6 @@ export const useField = < error: inputError, ref: handleRef, clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly), - focused: inputHasFocus, + inputHasFocus, }; }; From b5f9dfddfb446969c2803ca23fadff9c432f24ca Mon Sep 17 00:00:00 2001 From: noraleonte Date: Mon, 26 Jun 2023 12:37:42 +0300 Subject: [PATCH 25/55] ts format & proptypes --- docs/data/charts/tooltip/BandHighlight.js | 1 - .../column-menu/OverrideColumnMenuGrid.js | 1 - .../data-grid/editing/CustomEditComponent.js | 1 - .../filtering/CustomMultiValueOperator.js | 1 - .../filtering/CustomSelectionOperator.js | 1 - .../master-detail/BasicDetailPanels.js | 1 - .../master-detail/DetailPanelAutoHeight.js | 2 -- .../master-detail/FullWidthDetailPanel.js | 1 - .../pagination/CursorPaginationGrid.js | 2 -- .../pagination/ServerPaginationGrid.js | 1 - .../recipes-editing/EditingWithDatePickers.js | 1 - .../LinkedFieldsCellEditing.js | 1 - ...RowGroupingCustomGroupingColDefCallback.js | 1 - .../data-grid/scrolling/ScrollPlayground.js | 2 -- .../data-grid/sorting/DisableSortingGrid.js | 1 - .../tree-data/TreeDataCustomGroupingColumn.js | 1 - .../x-data-grid/src/components/GridRow.tsx | 20 +++++++++---------- .../src/components/cell/GridCell.tsx | 12 +++++------ .../src/components/cell/GridEditInputCell.tsx | 18 ++++++++--------- 19 files changed, 25 insertions(+), 44 deletions(-) diff --git a/docs/data/charts/tooltip/BandHighlight.js b/docs/data/charts/tooltip/BandHighlight.js index e786fe800c88..3ab11e4399b9 100644 --- a/docs/data/charts/tooltip/BandHighlight.js +++ b/docs/data/charts/tooltip/BandHighlight.js @@ -32,7 +32,6 @@ const barChartsParams = { export default function BandHighlight() { const [xHighlight, setXHightlight] = React.useState('band'); - const [yHighlight, setYHightlight] = React.useState('none'); const handleChange = (direction) => (event) => { diff --git a/docs/data/data-grid/column-menu/OverrideColumnMenuGrid.js b/docs/data/data-grid/column-menu/OverrideColumnMenuGrid.js index 42af71803955..bc47c6a764fc 100644 --- a/docs/data/data-grid/column-menu/OverrideColumnMenuGrid.js +++ b/docs/data/data-grid/column-menu/OverrideColumnMenuGrid.js @@ -16,7 +16,6 @@ function CustomFilterItem(props) { }, [apiRef, colDef.field, onClick], ); - return ( diff --git a/docs/data/data-grid/editing/CustomEditComponent.js b/docs/data/data-grid/editing/CustomEditComponent.js index 42f5b1481491..92c4832ac8a7 100644 --- a/docs/data/data-grid/editing/CustomEditComponent.js +++ b/docs/data/data-grid/editing/CustomEditComponent.js @@ -18,7 +18,6 @@ function RatingEditInputCell(props) { const handleRef = (element) => { if (element) { const input = element.querySelector(`input[value="${value}"]`); - input?.focus(); } }; diff --git a/docs/data/data-grid/filtering/CustomMultiValueOperator.js b/docs/data/data-grid/filtering/CustomMultiValueOperator.js index ef7d12139d46..8a339e582458 100644 --- a/docs/data/data-grid/filtering/CustomMultiValueOperator.js +++ b/docs/data/data-grid/filtering/CustomMultiValueOperator.js @@ -12,7 +12,6 @@ function InputNumberInterval(props) { const filterTimeout = React.useRef(); const [filterValueState, setFilterValueState] = React.useState(item.value ?? ''); - const [applying, setIsApplying] = React.useState(false); React.useEffect(() => { diff --git a/docs/data/data-grid/filtering/CustomSelectionOperator.js b/docs/data/data-grid/filtering/CustomSelectionOperator.js index 7f0c9b754197..2fb64da23321 100644 --- a/docs/data/data-grid/filtering/CustomSelectionOperator.js +++ b/docs/data/data-grid/filtering/CustomSelectionOperator.js @@ -40,7 +40,6 @@ export default function CustomSelectionOperator() { ); const rowSelectionModelLookupRef = React.useRef(rowSelectionModelLookup); - rowSelectionModelLookupRef.current = rowSelectionModelLookup; const columns = React.useMemo(() => { diff --git a/docs/data/data-grid/master-detail/BasicDetailPanels.js b/docs/data/data-grid/master-detail/BasicDetailPanels.js index 6dee9c664141..27441b5dc395 100644 --- a/docs/data/data-grid/master-detail/BasicDetailPanels.js +++ b/docs/data/data-grid/master-detail/BasicDetailPanels.js @@ -88,7 +88,6 @@ const columns = [ (acc, product) => product.unitPrice * product.quantity, 0, ); - const taxes = subtotal * 0.05; return subtotal + taxes; }, diff --git a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.js b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.js index eb7a82c9a301..27f09d304ab4 100644 --- a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.js +++ b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.js @@ -48,7 +48,6 @@ function DetailPanelContent({ row: rowProp }) { const newProducts = rowProp.products.filter( (product) => product.id !== productId, ); - apiRef.current.updateRows([{ ...rowProp, products: newProducts }]); }, [apiRef, rowProp], @@ -147,7 +146,6 @@ const columns = [ (acc, product) => product.unitPrice * product.quantity, 0, ); - const taxes = subtotal * 0.05; return subtotal + taxes; }, diff --git a/docs/data/data-grid/master-detail/FullWidthDetailPanel.js b/docs/data/data-grid/master-detail/FullWidthDetailPanel.js index e49cade67d93..dd37ac623ca1 100644 --- a/docs/data/data-grid/master-detail/FullWidthDetailPanel.js +++ b/docs/data/data-grid/master-detail/FullWidthDetailPanel.js @@ -103,7 +103,6 @@ const columns = [ (acc, product) => product.unitPrice * product.quantity, 0, ); - const taxes = subtotal * 0.05; return subtotal + taxes; }, diff --git a/docs/data/data-grid/pagination/CursorPaginationGrid.js b/docs/data/data-grid/pagination/CursorPaginationGrid.js index 172de032f973..cf369037fa5f 100644 --- a/docs/data/data-grid/pagination/CursorPaginationGrid.js +++ b/docs/data/data-grid/pagination/CursorPaginationGrid.js @@ -25,7 +25,6 @@ export default function CursorPaginationGrid() { }), [paginationModel], ); - const { isLoading, rows, pageInfo } = useQuery(queryOptions); const handlePaginationModelChange = (newPaginationModel) => { @@ -50,7 +49,6 @@ export default function CursorPaginationGrid() { const [rowCountState, setRowCountState] = React.useState( pageInfo?.totalRowCount || 0, ); - React.useEffect(() => { setRowCountState((prevRowCountState) => pageInfo?.totalRowCount !== undefined diff --git a/docs/data/data-grid/pagination/ServerPaginationGrid.js b/docs/data/data-grid/pagination/ServerPaginationGrid.js index 311f0da7ef43..0bcb826f4034 100644 --- a/docs/data/data-grid/pagination/ServerPaginationGrid.js +++ b/docs/data/data-grid/pagination/ServerPaginationGrid.js @@ -21,7 +21,6 @@ export default function ServerPaginationGrid() { const [rowCountState, setRowCountState] = React.useState( pageInfo?.totalRowCount || 0, ); - React.useEffect(() => { setRowCountState((prevRowCountState) => pageInfo?.totalRowCount !== undefined diff --git a/docs/data/data-grid/recipes-editing/EditingWithDatePickers.js b/docs/data/data-grid/recipes-editing/EditingWithDatePickers.js index b8a1231d92f7..9649d2b1bdc1 100644 --- a/docs/data/data-grid/recipes-editing/EditingWithDatePickers.js +++ b/docs/data/data-grid/recipes-editing/EditingWithDatePickers.js @@ -42,7 +42,6 @@ function buildApplyDateFilterFn(filterItem, compareFn, showTime = false) { 0, 0, ); - const cellValueMs = dateCopy.getTime(); return compareFn(cellValueMs, filterValueMs); diff --git a/docs/data/data-grid/recipes-editing/LinkedFieldsCellEditing.js b/docs/data/data-grid/recipes-editing/LinkedFieldsCellEditing.js index b78c3bdba2ca..23fc0a7c9043 100644 --- a/docs/data/data-grid/recipes-editing/LinkedFieldsCellEditing.js +++ b/docs/data/data-grid/recipes-editing/LinkedFieldsCellEditing.js @@ -116,7 +116,6 @@ export default function LinkedFieldsCellEditing() { setRows((prevRows) => prevRows.map((row) => (row.id === editingRow.current?.id ? newRow : row)), ); - return newRow; }; diff --git a/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.js b/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.js index 48fd5bd147fb..6c6ad41c2bcd 100644 --- a/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.js +++ b/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.js @@ -60,7 +60,6 @@ export default function RowGroupingCustomGroupingColDefCallback() { headerName: 'Director', valueFormatter: (valueFormatterParams) => { const rowNode = apiRef.current.getRowNode(valueFormatterParams.id); - if ( rowNode?.type === 'group' && rowNode?.groupingField === 'director' diff --git a/docs/data/data-grid/scrolling/ScrollPlayground.js b/docs/data/data-grid/scrolling/ScrollPlayground.js index e1dffebed26e..82ab01c58cb5 100644 --- a/docs/data/data-grid/scrolling/ScrollPlayground.js +++ b/docs/data/data-grid/scrolling/ScrollPlayground.js @@ -58,11 +58,9 @@ export default function ScrollPlayground() { const rowIndex = gridExpandedSortedRowIdsSelector(apiRef).findIndex( (id) => id === params.id, ); - const colIndex = gridVisibleColumnDefinitionsSelector(apiRef).findIndex( (column) => column.field === params.field, ); - setCoordinates({ rowIndex, colIndex }); }; diff --git a/docs/data/data-grid/sorting/DisableSortingGrid.js b/docs/data/data-grid/sorting/DisableSortingGrid.js index 421d6fa7a24f..93117ac410ad 100644 --- a/docs/data/data-grid/sorting/DisableSortingGrid.js +++ b/docs/data/data-grid/sorting/DisableSortingGrid.js @@ -18,7 +18,6 @@ export default function DisableSortingGrid() { ), [data.columns], ); - return (
diff --git a/docs/data/data-grid/tree-data/TreeDataCustomGroupingColumn.js b/docs/data/data-grid/tree-data/TreeDataCustomGroupingColumn.js index e0d7fde69652..1a7a7ff8ad46 100644 --- a/docs/data/data-grid/tree-data/TreeDataCustomGroupingColumn.js +++ b/docs/data/data-grid/tree-data/TreeDataCustomGroupingColumn.js @@ -22,7 +22,6 @@ function CustomGridTreeDataGroupingCell(props) { apiRef, gridFilteredDescendantCountLookupSelector, ); - const filteredDescendantCount = filteredDescendantCountLookup[rowNode.id] ?? 0; const handleClick = (event) => { diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx index 125bb597a189..310489bdb773 100644 --- a/packages/grid/x-data-grid/src/components/GridRow.tsx +++ b/packages/grid/x-data-grid/src/components/GridRow.tsx @@ -439,8 +439,8 @@ GridRow.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - containerWidth: PropTypes.number, - firstColumnToRender: PropTypes.number, + containerWidth: PropTypes.number.isRequired, + firstColumnToRender: PropTypes.number.isRequired, /** * Determines which cell has focus. * If `null`, no cell in this row has focus. @@ -450,25 +450,25 @@ GridRow.propTypes = { * Index of the row in the whole sorted and filtered dataset. * If some rows above have expanded children, this index also take those children into account. */ - index: PropTypes.number, + index: PropTypes.number.isRequired, isLastVisible: PropTypes.bool, - lastColumnToRender: PropTypes.number, + lastColumnToRender: PropTypes.number.isRequired, onClick: PropTypes.func, onDoubleClick: PropTypes.func, onMouseEnter: PropTypes.func, onMouseLeave: PropTypes.func, - position: PropTypes.oneOf(['center', 'left', 'right']), - renderedColumns: PropTypes.arrayOf(PropTypes.object), + position: PropTypes.oneOf(['center', 'left', 'right']).isRequired, + renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired, row: PropTypes.object, - rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]), - rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - selected: PropTypes.bool, + rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired, + rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, + selected: PropTypes.bool.isRequired, /** * Determines which cell should be tabbable by having tabIndex=0. * If `null`, no cell in this row is in the tab sequence. */ tabbableCell: PropTypes.string, - visibleColumns: PropTypes.arrayOf(PropTypes.object), + visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired, } as any; const MemoizedGridRow = fastMemo(GridRow); diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx index 4bb9eded44f7..45669757a255 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx @@ -774,11 +774,11 @@ GridCellV7.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- - align: PropTypes.oneOf(['center', 'left', 'right']), + align: PropTypes.oneOf(['center', 'left', 'right']).isRequired, className: PropTypes.string, - colIndex: PropTypes.number, + colIndex: PropTypes.number.isRequired, colSpan: PropTypes.number, - column: PropTypes.object, + column: PropTypes.object.isRequired, disableDragEvents: PropTypes.bool, editCellState: PropTypes.shape({ changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']), @@ -786,7 +786,7 @@ GridCellV7.propTypes = { isValidating: PropTypes.bool, value: PropTypes.any, }), - height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]), + height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired, onClick: PropTypes.func, onDoubleClick: PropTypes.func, onDragEnter: PropTypes.func, @@ -794,9 +794,9 @@ GridCellV7.propTypes = { onKeyDown: PropTypes.func, onMouseDown: PropTypes.func, onMouseUp: PropTypes.func, - rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, showRightBorder: PropTypes.bool, - width: PropTypes.number, + width: PropTypes.number.isRequired, } as any; const MemoizedGridCellV7 = fastMemo(GridCellV7); diff --git a/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx index 5cc528ceb64f..e1d1b6f51b88 100644 --- a/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx +++ b/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx @@ -151,21 +151,21 @@ GridEditInputCell.propTypes = { /** * GridApi that let you manipulate the grid. */ - api: PropTypes.object, + api: PropTypes.object.isRequired, /** * The mode of the cell. */ - cellMode: PropTypes.oneOf(['edit', 'view']), + cellMode: PropTypes.oneOf(['edit', 'view']).isRequired, changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']), /** * The column of the row that the current cell belongs to. */ - colDef: PropTypes.object, + colDef: PropTypes.object.isRequired, debounceMs: PropTypes.number, /** * The column field of the cell that triggered the event. */ - field: PropTypes.string, + field: PropTypes.string.isRequired, /** * The cell value formatted with the column valueFormatter. */ @@ -173,11 +173,11 @@ GridEditInputCell.propTypes = { /** * If true, the cell is the active element. */ - hasFocus: PropTypes.bool, + hasFocus: PropTypes.bool.isRequired, /** * The grid row id. */ - id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, /** * If true, the cell is editable. */ @@ -194,15 +194,15 @@ GridEditInputCell.propTypes = { /** * The row model of the row that the current cell belongs to. */ - row: PropTypes.any, + row: PropTypes.any.isRequired, /** * The node of the row that the current cell belongs to. */ - rowNode: PropTypes.object, + rowNode: PropTypes.object.isRequired, /** * the tabIndex value. */ - tabIndex: PropTypes.oneOf([-1, 0]), + tabIndex: PropTypes.oneOf([-1, 0]).isRequired, /** * The cell value. * If the column has `valueGetter`, use `params.row` to directly access the fields. From 8bc32b0c3bcde06f5bfca4424ba68f1d57f832f1 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Mon, 26 Jun 2023 12:50:06 +0300 Subject: [PATCH 26/55] api docs --- scripts/x-date-pickers-pro.exports.json | 1 + scripts/x-date-pickers.exports.json | 1 + 2 files changed, 2 insertions(+) diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index 4f5fcb6d8f0f..8c98151bca57 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -10,6 +10,7 @@ { "name": "beBY", "kind": "Variable" }, { "name": "caES", "kind": "Variable" }, { "name": "CalendarIcon", "kind": "Variable" }, + { "name": "ClearIcon", "kind": "Variable" }, { "name": "clockClasses", "kind": "Variable" }, { "name": "ClockClasses", "kind": "Interface" }, { "name": "ClockClassKey", "kind": "TypeAlias" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index add4196e8815..8251d79df755 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -9,6 +9,7 @@ { "name": "beBY", "kind": "Variable" }, { "name": "caES", "kind": "Variable" }, { "name": "CalendarIcon", "kind": "Variable" }, + { "name": "ClearIcon", "kind": "Variable" }, { "name": "clockClasses", "kind": "Variable" }, { "name": "ClockClasses", "kind": "Interface" }, { "name": "ClockClassKey", "kind": "TypeAlias" }, From 49c776fdc27ccf03474fbca95fbb3e2b408d869f Mon Sep 17 00:00:00 2001 From: noraleonte Date: Mon, 3 Jul 2023 17:53:57 +0300 Subject: [PATCH 27/55] adapt documentation examples --- .../custom-field/PickerWithBrowserField.tsx | 82 ++++++++--- .../custom-field/PickerWithJoyField.js | 72 ++++++++-- .../custom-field/PickerWithJoyField.tsx | 87 ++++++++++-- .../PickerWithJoyField.tsx.preview | 14 -- .../date-pickers/custom-field/custom-field.md | 4 + .../date-pickers/fields/BrowserDateFields.js | 80 ----------- .../date-pickers/fields/BrowserDateFields.tsx | 99 ------------- .../data/date-pickers/fields/JoyDateFields.js | 117 ---------------- .../date-pickers/fields/JoyDateFields.tsx | 132 ------------------ .../fields/NativeBrowserDateFields.js | 50 ------- .../fields/NativeBrowserDateFields.tsx | 72 ---------- .../NativeBrowserDateFields.tsx.preview | 9 -- docs/data/date-pickers/fields/fields.md | 22 --- .../x-date-pickers/src/DateField/index.ts | 2 + .../src/internals/hooks/useClearField.tsx | 2 +- .../x-date-pickers/src/internals/index.ts | 1 + scripts/x-date-pickers-pro.exports.json | 2 + scripts/x-date-pickers.exports.json | 2 + 18 files changed, 211 insertions(+), 638 deletions(-) delete mode 100644 docs/data/date-pickers/custom-field/PickerWithJoyField.tsx.preview delete mode 100644 docs/data/date-pickers/fields/BrowserDateFields.js delete mode 100644 docs/data/date-pickers/fields/BrowserDateFields.tsx delete mode 100644 docs/data/date-pickers/fields/JoyDateFields.js delete mode 100644 docs/data/date-pickers/fields/JoyDateFields.tsx delete mode 100644 docs/data/date-pickers/fields/NativeBrowserDateFields.js delete mode 100644 docs/data/date-pickers/fields/NativeBrowserDateFields.tsx delete mode 100644 docs/data/date-pickers/fields/NativeBrowserDateFields.tsx.preview diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx index 1cfa5cf90c46..4620d1a13e89 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx @@ -21,7 +21,10 @@ import { DatePicker, DatePickerProps } from '@mui/x-date-pickers/DatePicker'; import { unstable_useDateField as useDateField, UseDateFieldProps, + DateFieldSlotsComponent, + DateFieldSlotsComponentsProps, } from '@mui/x-date-pickers/DateField'; +import { useClearField } from '@mui/x-date-pickers/internals'; import { BaseMultiInputFieldProps, DateRange, @@ -45,6 +48,7 @@ interface BrowserFieldProps error?: boolean; focused?: boolean; ownerState?: any; + sx?: any; } type BrowserFieldComponent = (( @@ -62,12 +66,13 @@ const BrowserField = React.forwardRef( error, focused, ownerState, + sx, ...other } = props; return ( @@ -109,26 +114,46 @@ const BrowserSingleInputDateRangeField = React.forwardRef( ownerState: props as any, }); - const response = useSingleInputDateRangeField({ + const { + onClear, + clearable, + slots: rangeSlots, + slotProps: rangeSlotProps, + ...fieldProps + } = useSingleInputDateRangeField({ props: textFieldProps, inputRef: externalInputRef, }); - return ( - + >({ + onClear, + clearable, + fieldProps, + InputProps: { + ...fieldProps.InputProps, endAdornment: ( ), + }, + slots: rangeSlots as any, + slotProps: rangeSlotProps as any, + }); + + return ( + ); }, @@ -257,14 +282,31 @@ interface BrowserDateFieldProps > {} function BrowserDateField(props: BrowserDateFieldProps) { - const { inputRef: externalInputRef, slots, slotProps, ...textFieldProps } = props; + const { inputRef: externalInputRef, ...textFieldProps } = props; - const response = useDateField({ + const { onClear, clearable, slots, slotProps, ...fieldProps } = useDateField< + Dayjs, + typeof textFieldProps + >({ props: textFieldProps, inputRef: externalInputRef, }); + const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = + useClearField< + {}, + typeof textFieldProps.InputProps, + DateFieldSlotsComponent, + DateFieldSlotsComponentsProps + >({ + onClear, + clearable, + fieldProps, + InputProps: fieldProps.InputProps, + slots, + slotProps, + }); - return ; + return ; } function BrowserDatePicker(props: DatePickerProps) { @@ -279,8 +321,16 @@ export default function PickerWithBrowserField() { - - + + diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.js b/docs/data/date-pickers/custom-field/PickerWithJoyField.js index c531443c5714..82ea99abafd3 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.js +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.js @@ -28,6 +28,7 @@ import { unstable_useSingleInputDateRangeField as useSingleInputDateRangeField } import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField'; +import { useClearField } from '@mui/x-date-pickers/internals'; const joyTheme = extendJoyTheme(); @@ -38,8 +39,11 @@ const JoyField = React.forwardRef((props, inputRef) => { label, InputProps: { ref: containerRef, startAdornment, endAdornment } = {}, formControlSx, + endDecorator, + startDecorator, ...other } = props; + console.log('props', props); return ( { + {startDecorator} + {startAdornment} + + } + endDecorator={ + + {endDecorator} + {endAdornment} + + } {...other} /> @@ -75,23 +89,36 @@ const JoySingleInputDateRangeField = React.forwardRef((props, ref) => { ownerState: props, }); - const response = useSingleInputDateRangeField({ + const { + onClear, + clearable, + slots: rangeSlots, + slotProps: rangeSlotProps, + ...fieldProps + } = useSingleInputDateRangeField({ props: textFieldProps, inputRef: externalInputRef, }); + const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = + useClearField({ + onClear, + clearable, + fieldProps, + InputProps: fieldProps.InputProps, + slots: rangeSlots, + slotProps: rangeSlotProps, + }); + return ( } - InputProps={{ - ...response.InputProps, - ref, - }} + InputProps={{ ...ProcessedInputProps, ref }} /> ); }); @@ -222,14 +249,23 @@ function JoyDateRangePicker(props) { } function JoyDateField(props) { - const { inputRef: externalInputRef, slots, slotProps, ...textFieldProps } = props; + const { inputRef: externalInputRef, ...textFieldProps } = props; - const response = useDateField({ + const { onClear, clearable, slots, slotProps, ...fieldProps } = useDateField({ props: textFieldProps, inputRef: externalInputRef, }); + const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = + useClearField({ + onClear, + clearable, + fieldProps, + InputProps: fieldProps.InputProps, + slots, + slotProps, + }); - return ; + return ; } function JoyDatePicker(props) { @@ -238,7 +274,9 @@ function JoyDatePicker(props) { {...props} slots={{ field: JoyDateField, ...props.slots }} slotProps={{ + ...props.slotProps, field: { + ...props.slotProps?.field, formControlSx: { flexDirection: 'row', }, @@ -272,8 +310,16 @@ export default function PickerWithJoyField() { - - + + diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx index 954975bfe5a7..68c38d74ad0a 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx @@ -36,7 +36,10 @@ import { DatePicker, DatePickerProps } from '@mui/x-date-pickers/DatePicker'; import { unstable_useDateField as useDateField, UseDateFieldProps, + DateFieldSlotsComponent, + DateFieldSlotsComponentsProps, } from '@mui/x-date-pickers/DateField'; +import { useClearField } from '@mui/x-date-pickers/internals'; import { BaseMultiInputFieldProps, DateRange, @@ -73,8 +76,11 @@ const JoyField = React.forwardRef( label, InputProps: { ref: containerRef, startAdornment, endAdornment } = {}, formControlSx, + endDecorator, + startDecorator, ...other } = props; + console.log('props', props); return ( + {startAdornment} + {startDecorator} + + } + endDecorator={ + + {endAdornment} + {endDecorator} + + } {...other} /> @@ -127,23 +143,41 @@ const JoySingleInputDateRangeField = React.forwardRef( ownerState: props as any, }); - const response = useSingleInputDateRangeField({ + const { + onClear, + clearable, + slots: rangeSlots, + slotProps: rangeSlotProps, + ...fieldProps + } = useSingleInputDateRangeField({ props: textFieldProps, inputRef: externalInputRef, }); + const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = + useClearField< + {}, + typeof textFieldProps.InputProps, + DateFieldSlotsComponent, + DateFieldSlotsComponentsProps + >({ + onClear, + clearable, + fieldProps, + InputProps: fieldProps.InputProps, + slots: rangeSlots as any, + slotProps: rangeSlotProps as any, + }); + return ( } - InputProps={{ - ...response.InputProps, - ref, - }} + InputProps={{ ...ProcessedInputProps, ref }} /> ); }, @@ -302,14 +336,31 @@ interface JoyDateFieldProps > {} function JoyDateField(props: JoyDateFieldProps) { - const { inputRef: externalInputRef, slots, slotProps, ...textFieldProps } = props; + const { inputRef: externalInputRef, ...textFieldProps } = props; - const response = useDateField({ + const { onClear, clearable, slots, slotProps, ...fieldProps } = useDateField< + Dayjs, + typeof textFieldProps + >({ props: textFieldProps, inputRef: externalInputRef, }); + const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = + useClearField< + {}, + typeof textFieldProps.InputProps, + DateFieldSlotsComponent, + DateFieldSlotsComponentsProps + >({ + onClear, + clearable, + fieldProps, + InputProps: fieldProps.InputProps, + slots, + slotProps, + }); - return ; + return ; } function JoyDatePicker(props: DatePickerProps) { @@ -318,7 +369,9 @@ function JoyDatePicker(props: DatePickerProps) { {...props} slots={{ field: JoyDateField, ...props.slots }} slotProps={{ + ...props.slotProps, field: { + ...props.slotProps?.field, formControlSx: { flexDirection: 'row', }, @@ -352,8 +405,16 @@ export default function PickerWithJoyField() { - - + + diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx.preview b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx.preview deleted file mode 100644 index 1549f760fbea..000000000000 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/custom-field.md b/docs/data/date-pickers/custom-field/custom-field.md index 3f24a3b298ec..e2656a1d58ba 100644 --- a/docs/data/date-pickers/custom-field/custom-field.md +++ b/docs/data/date-pickers/custom-field/custom-field.md @@ -68,6 +68,10 @@ You can also use any other input: {{"demo": "PickerWithBrowserField.js", "defaultCodeOpen": false}} +:::warning +You will need to use a _Material UI_ component that supports the `sx` prop as a wrapper to your input, in order to be able to benefit from the hover behavior of the clear button. You will have access to the `clearable` and `onClear` props using native HTML elements, but the behavior on **focus** and **hover** depend on the `sx` prop. +::: + ### Using an `Autocomplete` If your user can only select a value in a small list of available dates, diff --git a/docs/data/date-pickers/fields/BrowserDateFields.js b/docs/data/date-pickers/fields/BrowserDateFields.js deleted file mode 100644 index ffb2331b1bb1..000000000000 --- a/docs/data/date-pickers/fields/BrowserDateFields.js +++ /dev/null @@ -1,80 +0,0 @@ -import * as React from 'react'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { DateField } from '@mui/x-date-pickers/DateField'; -import { TimeField } from '@mui/x-date-pickers/TimeField'; -import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; -import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; -import { Stack, Box } from '@mui/material'; - -const BrowserField = React.forwardRef((props, ref) => { - const { - disabled, - id, - label, - inputProps: { ref: inputRef } = {}, - InputProps: { startAdornment, endAdornment } = {}, - ...other - } = props; - - return ( -
- - - {startAdornment} - - {endAdornment} - -
- ); -}); - -export default function BrowserDateFields() { - return ( - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/date-pickers/fields/BrowserDateFields.tsx b/docs/data/date-pickers/fields/BrowserDateFields.tsx deleted file mode 100644 index 1e607c57963c..000000000000 --- a/docs/data/date-pickers/fields/BrowserDateFields.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import * as React from 'react'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { DateField } from '@mui/x-date-pickers/DateField'; -import { TimeField } from '@mui/x-date-pickers/TimeField'; -import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; -import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; -import { Stack, Box } from '@mui/material'; - -interface BrowserFieldProps - extends Omit, 'size'> { - label?: React.ReactNode; - inputProps?: { - ref?: React.Ref; - }; - InputProps?: { endAdornment?: React.ReactNode; startAdornment?: React.ReactNode }; - error?: boolean; - focused?: boolean; - ownerState?: any; - sx?: any; -} - -type BrowserFieldComponent = (( - props: BrowserFieldProps & React.RefAttributes, -) => JSX.Element) & { propTypes?: any }; - -const BrowserField = React.forwardRef( - (props: BrowserFieldProps, ref: React.Ref) => { - const { - disabled, - id, - label, - inputProps: { ref: inputRef } = {}, - InputProps: { startAdornment, endAdornment } = {}, - ...other - } = props; - - return ( -
- - - {startAdornment} - - {endAdornment} - -
- ); - }, -) as BrowserFieldComponent; - -export default function BrowserDateFields() { - return ( - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/date-pickers/fields/JoyDateFields.js b/docs/data/date-pickers/fields/JoyDateFields.js deleted file mode 100644 index cf5f8209d700..000000000000 --- a/docs/data/date-pickers/fields/JoyDateFields.js +++ /dev/null @@ -1,117 +0,0 @@ -import * as React from 'react'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { DateField } from '@mui/x-date-pickers/DateField'; -import { TimeField } from '@mui/x-date-pickers/TimeField'; -import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; -import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; -import Input from '@mui/joy/Input'; -import FormControl from '@mui/joy/FormControl'; -import FormLabel from '@mui/joy/FormLabel'; -import Stack from '@mui/material/Stack'; -import { - useTheme as useMaterialTheme, - useColorScheme as useMaterialColorScheme, - Experimental_CssVarsProvider as MaterialCssVarsProvider, -} from '@mui/material/styles'; -import { - extendTheme as extendJoyTheme, - useColorScheme, - CssVarsProvider, - THEME_ID, -} from '@mui/joy/styles'; - -const joyTheme = extendJoyTheme(); - -const JoyField = React.forwardRef((props, ref) => { - const { - disabled, - id, - label, - inputProps: { ref: inputRef } = {}, - InputProps: { startAdornment, endAdornment } = {}, - formControlSx, - ...other - } = props; - - return ( - - {label} - - - ); -}); - -function SyncThemeMode({ mode }) { - const { setMode } = useColorScheme(); - const { setMode: setMaterialMode } = useMaterialColorScheme(); - React.useEffect(() => { - setMode(mode); - setMaterialMode(mode); - }, [mode, setMode, setMaterialMode]); - return null; -} - -export default function JoyDateFields() { - const materialTheme = useMaterialTheme(); - return ( - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/date-pickers/fields/JoyDateFields.tsx b/docs/data/date-pickers/fields/JoyDateFields.tsx deleted file mode 100644 index 458ee9045d9b..000000000000 --- a/docs/data/date-pickers/fields/JoyDateFields.tsx +++ /dev/null @@ -1,132 +0,0 @@ -import * as React from 'react'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { DateField } from '@mui/x-date-pickers/DateField'; -import { TimeField } from '@mui/x-date-pickers/TimeField'; -import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; -import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; -import Input, { InputProps } from '@mui/joy/Input'; -import FormControl from '@mui/joy/FormControl'; -import FormLabel from '@mui/joy/FormLabel'; -import Stack from '@mui/material/Stack'; -import { - useTheme as useMaterialTheme, - useColorScheme as useMaterialColorScheme, - Experimental_CssVarsProvider as MaterialCssVarsProvider, -} from '@mui/material/styles'; -import { - extendTheme as extendJoyTheme, - useColorScheme, - CssVarsProvider, - THEME_ID, -} from '@mui/joy/styles'; - -const joyTheme = extendJoyTheme(); - -interface JoyFieldProps extends InputProps { - label?: React.ReactNode; - inputProps?: { - ref?: React.Ref; - }; - InputProps?: { endAdornment?: React.ReactNode; startAdornment?: React.ReactNode }; - formControlSx?: InputProps['sx']; -} - -type JoyFieldComponent = (( - props: JoyFieldProps & React.RefAttributes, -) => JSX.Element) & { propTypes?: any }; - -const JoyField = React.forwardRef( - (props: JoyFieldProps, ref: React.Ref) => { - const { - disabled, - id, - label, - inputProps: { ref: inputRef } = {}, - InputProps: { startAdornment, endAdornment } = {}, - formControlSx, - ...other - } = props; - - return ( - - {label} - - - ); - }, -) as JoyFieldComponent; - -function SyncThemeMode({ mode }: { mode: 'light' | 'dark' }) { - const { setMode } = useColorScheme(); - const { setMode: setMaterialMode } = useMaterialColorScheme(); - React.useEffect(() => { - setMode(mode); - setMaterialMode(mode); - }, [mode, setMode, setMaterialMode]); - return null; -} - -export default function JoyDateFields() { - const materialTheme = useMaterialTheme(); - return ( - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/date-pickers/fields/NativeBrowserDateFields.js b/docs/data/date-pickers/fields/NativeBrowserDateFields.js deleted file mode 100644 index 413a96ce1a54..000000000000 --- a/docs/data/date-pickers/fields/NativeBrowserDateFields.js +++ /dev/null @@ -1,50 +0,0 @@ -import * as React from 'react'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { DateField } from '@mui/x-date-pickers/DateField'; -import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; - -const BrowserField = React.forwardRef((props, ref) => { - const { - disabled, - id, - label, - inputProps: { ref: inputRef } = {}, - InputProps: { startAdornment, endAdornment } = {}, - ...other - } = props; - - return ( -
- -
- {startAdornment} - - {endAdornment} -
-
- ); -}); - -export default function NativeBrowserDateFields() { - return ( - - - - - - - - ); -} diff --git a/docs/data/date-pickers/fields/NativeBrowserDateFields.tsx b/docs/data/date-pickers/fields/NativeBrowserDateFields.tsx deleted file mode 100644 index 3dd9293eb859..000000000000 --- a/docs/data/date-pickers/fields/NativeBrowserDateFields.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import * as React from 'react'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { DateField } from '@mui/x-date-pickers/DateField'; -import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; - -interface BrowserFieldProps - extends Omit, 'size'> { - label?: React.ReactNode; - inputProps?: { - ref?: React.Ref; - }; - InputProps?: { endAdornment?: React.ReactNode; startAdornment?: React.ReactNode }; - error?: boolean; - focused?: boolean; - ownerState?: any; - sx?: any; -} - -type BrowserFieldComponent = (( - props: BrowserFieldProps & React.RefAttributes, -) => JSX.Element) & { propTypes?: any }; - -const BrowserField = React.forwardRef( - (props: BrowserFieldProps, ref: React.Ref) => { - const { - disabled, - id, - label, - inputProps: { ref: inputRef } = {}, - InputProps: { startAdornment, endAdornment } = {}, - ...other - } = props; - - return ( -
- -
- {startAdornment} - - {endAdornment} -
-
- ); - }, -) as BrowserFieldComponent; - -export default function NativeBrowserDateFields() { - return ( - - - - - - - - ); -} diff --git a/docs/data/date-pickers/fields/NativeBrowserDateFields.tsx.preview b/docs/data/date-pickers/fields/NativeBrowserDateFields.tsx.preview deleted file mode 100644 index 5d780162961d..000000000000 --- a/docs/data/date-pickers/fields/NativeBrowserDateFields.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/date-pickers/fields/fields.md b/docs/data/date-pickers/fields/fields.md index beeef4e306ef..0e1b9d1ae6f2 100644 --- a/docs/data/date-pickers/fields/fields.md +++ b/docs/data/date-pickers/fields/fields.md @@ -87,25 +87,3 @@ For **multi-input** range fields the clearable behavior is not supported yet. You can also customize the icon you want to be displayed inside the clear `IconButton` {{"demo": "CustomizeClearIcon.js"}} - -### Using a custom input - -You can customize the input field used within the field components. - -#### Using the Joy UI input - -You can use the [_Joy UI_](https://mui.com/joy-ui/getting-started/overview/) components instead of the _Material UI_ ones: - -{{"demo": "JoyDateFields.js"}} - -#### Using the browser input - -You can also use the default browser input - -{{"demo": "BrowserDateFields.js"}} - -:::warning -You will need to use a _Material UI_ component that supports the `sx` prop as a wrapper to your input, in order to be able to benefit from the hover behavior of the clear button. You will have access to the `clearable` and `onClear` props using native HTML elements, but the behavior on **focus** and **hover** depend on the `sx` prop. -::: - -{{"demo": "NativeBrowserDateFields.js"}} diff --git a/packages/x-date-pickers/src/DateField/index.ts b/packages/x-date-pickers/src/DateField/index.ts index 6fd6dcef2732..81cc47ae9545 100644 --- a/packages/x-date-pickers/src/DateField/index.ts +++ b/packages/x-date-pickers/src/DateField/index.ts @@ -5,4 +5,6 @@ export type { UseDateFieldComponentProps, DateFieldProps, UseDateFieldDefaultizedProps, + DateFieldSlotsComponent, + DateFieldSlotsComponentsProps, } from './DateField.types'; diff --git a/packages/x-date-pickers/src/internals/hooks/useClearField.tsx b/packages/x-date-pickers/src/internals/hooks/useClearField.tsx index c0a68a373c97..d0448b51a75f 100644 --- a/packages/x-date-pickers/src/internals/hooks/useClearField.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useClearField.tsx @@ -8,7 +8,7 @@ import { FieldSlotsComponents, FieldSlotsComponentsProps } from './useField/useF import { FieldsTextFieldProps } from '../models'; const excludeClearableProps = (props: TProps, excludedProps: string[]): TProps => - Object.keys(props).reduce((prev, key) => { + Object.keys(props || {}).reduce((prev, key) => { if (!excludedProps.includes(key)) { return { ...prev, diff --git a/packages/x-date-pickers/src/internals/index.ts b/packages/x-date-pickers/src/internals/index.ts index 2bdbbe3054e7..7300b7912436 100644 --- a/packages/x-date-pickers/src/internals/index.ts +++ b/packages/x-date-pickers/src/internals/index.ts @@ -93,6 +93,7 @@ export { useLocaleText, useNow, } from './hooks/useUtils'; +export { useClearField } from './hooks/useClearField'; export type { ExportedUseViewsOptions } from './hooks/useViews'; export { useValidation } from './hooks/useValidation'; export type { ValidationProps, Validator, InferError } from './hooks/useValidation'; diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index b4369b531285..519947917089 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -34,6 +34,8 @@ { "name": "DateCalendarSlotsComponentsProps", "kind": "Interface" }, { "name": "DateField", "kind": "Variable" }, { "name": "DateFieldProps", "kind": "Interface" }, + { "name": "DateFieldSlotsComponent", "kind": "Interface" }, + { "name": "DateFieldSlotsComponentsProps", "kind": "Interface" }, { "name": "DateOrTimeView", "kind": "TypeAlias" }, { "name": "DatePicker", "kind": "Variable" }, { "name": "DatePickerProps", "kind": "Interface" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index 395ba97ec522..d1206b3bc223 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -33,6 +33,8 @@ { "name": "DateCalendarSlotsComponentsProps", "kind": "Interface" }, { "name": "DateField", "kind": "Variable" }, { "name": "DateFieldProps", "kind": "Interface" }, + { "name": "DateFieldSlotsComponent", "kind": "Interface" }, + { "name": "DateFieldSlotsComponentsProps", "kind": "Interface" }, { "name": "DateOrTimeView", "kind": "TypeAlias" }, { "name": "DatePicker", "kind": "Variable" }, { "name": "DatePickerProps", "kind": "Interface" }, From 0e49665a4dbe3c3155c0bf009485ce52adba8767 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Mon, 3 Jul 2023 17:55:39 +0300 Subject: [PATCH 28/55] ts format for browser field demo --- .../custom-field/PickerWithBrowserField.js | 68 ++++++++++++++----- .../PickerWithBrowserField.tsx.preview | 12 +++- .../custom-field/PickerWithJoyField.js | 4 +- 3 files changed, 63 insertions(+), 21 deletions(-) diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js b/docs/data/date-pickers/custom-field/PickerWithBrowserField.js index 0d08d299bc90..09c77941b5eb 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.js @@ -13,6 +13,7 @@ import { unstable_useSingleInputDateRangeField as useSingleInputDateRangeField } import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField'; +import { useClearField } from '@mui/x-date-pickers/internals'; const BrowserField = React.forwardRef((props, inputRef) => { const { @@ -24,12 +25,13 @@ const BrowserField = React.forwardRef((props, inputRef) => { error, focused, ownerState, + sx, ...other } = props; return ( @@ -50,26 +52,41 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => { ownerState: props, }); - const response = useSingleInputDateRangeField({ + const { + onClear, + clearable, + slots: rangeSlots, + slotProps: rangeSlotProps, + ...fieldProps + } = useSingleInputDateRangeField({ props: textFieldProps, inputRef: externalInputRef, }); - return ( - ), + }, + slots: rangeSlots, + slotProps: rangeSlotProps, + }); + + return ( + ); }); @@ -170,14 +187,23 @@ function BrowserDateRangePicker(props) { } function BrowserDateField(props) { - const { inputRef: externalInputRef, slots, slotProps, ...textFieldProps } = props; + const { inputRef: externalInputRef, ...textFieldProps } = props; - const response = useDateField({ + const { onClear, clearable, slots, slotProps, ...fieldProps } = useDateField({ props: textFieldProps, inputRef: externalInputRef, }); - - return ; + const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = + useClearField({ + onClear, + clearable, + fieldProps, + InputProps: fieldProps.InputProps, + slots, + slotProps, + }); + + return ; } function BrowserDatePicker(props) { @@ -192,8 +218,16 @@ export default function PickerWithBrowserField() { - - + + diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx.preview b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx.preview index 4e96e10bc78a..6a6dd7638dae 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx.preview +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx.preview @@ -1,3 +1,11 @@ - - + + \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.js b/docs/data/date-pickers/custom-field/PickerWithJoyField.js index 82ea99abafd3..5e4348ce8d06 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.js +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.js @@ -63,14 +63,14 @@ const JoyField = React.forwardRef((props, inputRef) => { slotProps={{ input: { ref: inputRef } }} startDecorator={ - {startDecorator} {startAdornment} + {startDecorator} } endDecorator={ - {endDecorator} {endAdornment} + {endDecorator} } {...other} From a8f30be8f1de2298a41610c594d979f5b4493588 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Thu, 6 Jul 2023 13:49:56 +0200 Subject: [PATCH 29/55] clean up demos --- .../date-pickers/date-picker/ClearableProp.js | 24 ++++++------ .../date-picker/ClearableProp.tsx | 24 ++++++------ .../date-pickers/fields/ClearableBehavior.js | 37 ++++++++++--------- .../date-pickers/fields/ClearableBehavior.tsx | 37 ++++++++++--------- 4 files changed, 64 insertions(+), 58 deletions(-) diff --git a/docs/data/date-pickers/date-picker/ClearableProp.js b/docs/data/date-pickers/date-picker/ClearableProp.js index ae9e145a5703..141e5a01ebac 100644 --- a/docs/data/date-pickers/date-picker/ClearableProp.js +++ b/docs/data/date-pickers/date-picker/ClearableProp.js @@ -22,16 +22,16 @@ export default function ClearableProp() { return ( - - + + )} - - + + ); } diff --git a/docs/data/date-pickers/date-picker/ClearableProp.tsx b/docs/data/date-pickers/date-picker/ClearableProp.tsx index 6e2665d862eb..374d17db663b 100644 --- a/docs/data/date-pickers/date-picker/ClearableProp.tsx +++ b/docs/data/date-pickers/date-picker/ClearableProp.tsx @@ -22,16 +22,16 @@ export default function ClearableProp() { return ( - - + + )} - - + + ); } diff --git a/docs/data/date-pickers/fields/ClearableBehavior.js b/docs/data/date-pickers/fields/ClearableBehavior.js index 63c8040c757f..a65509d2b365 100644 --- a/docs/data/date-pickers/fields/ClearableBehavior.js +++ b/docs/data/date-pickers/fields/ClearableBehavior.js @@ -23,16 +23,16 @@ export default function ClearableBehavior() { }, [cleared]); return ( - - + + - - {cleared && !value && ( - - Field cleared! - - )} - + {cleared && !value && ( + + Field cleared! + + )} + + ); } diff --git a/docs/data/date-pickers/fields/ClearableBehavior.tsx b/docs/data/date-pickers/fields/ClearableBehavior.tsx index f5d42cd7418a..944e03309ef9 100644 --- a/docs/data/date-pickers/fields/ClearableBehavior.tsx +++ b/docs/data/date-pickers/fields/ClearableBehavior.tsx @@ -23,16 +23,16 @@ export default function ClearableBehavior() { }, [cleared]); return ( - - + + - - {cleared && !value && ( - - Field cleared! - - )} - + {cleared && !value && ( + + Field cleared! + + )} + + ); } From 035fe5cecfc66f8408b818ae25c70d87c62f891c Mon Sep 17 00:00:00 2001 From: noraleonte <72460825+noraleonte@users.noreply.github.com> Date: Mon, 24 Jul 2023 11:23:47 +0200 Subject: [PATCH 30/55] Apply suggestions from code review Co-authored-by: Lukas Signed-off-by: noraleonte <72460825+noraleonte@users.noreply.github.com> --- docs/data/date-pickers/custom-field/PickerWithJoyField.tsx | 1 - docs/data/date-pickers/custom-field/custom-field.md | 2 +- docs/data/date-pickers/date-picker/date-picker.md | 2 +- docs/data/date-pickers/fields/fields.md | 4 ++-- .../src/internals/hooks/useField/useField.types.ts | 4 ++-- 5 files changed, 6 insertions(+), 7 deletions(-) diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx index 68c38d74ad0a..24af019df39c 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx @@ -80,7 +80,6 @@ const JoyField = React.forwardRef( startDecorator, ...other } = props; - console.log('props', props); return ( >; /** - * Event fired when the clear button is clicked. + * Callback fired when the clear button is clicked. */ onClear?: React.MouseEventHandler; /** - * If `true`, the field will be cleared when the user clicks on the clear button. + * If `true`, a clear button will be shown in the field allowing value clearing. * @default false */ clearable?: boolean; From 44ef3fb00b6427cb42c92accf155639d65d9691e Mon Sep 17 00:00:00 2001 From: noraleonte Date: Mon, 24 Jul 2023 14:00:17 +0200 Subject: [PATCH 31/55] Lukas' feedback --- .../custom-field/PickerWithBrowserField.js | 14 ++++---- .../custom-field/PickerWithBrowserField.tsx | 14 ++++---- .../custom-field/PickerWithJoyField.js | 7 ++-- .../custom-field/PickerWithJoyField.tsx | 6 ++-- .../date-pickers/date-picker/ClearableProp.js | 36 +++++++++---------- .../date-picker/ClearableProp.tsx | 36 +++++++++---------- .../date-pickers/fields/ClearableBehavior.js | 22 ++++++------ .../date-pickers/fields/ClearableBehavior.tsx | 22 ++++++------ .../date-pickers/fields/CustomizeClearIcon.js | 26 ++++++-------- .../fields/CustomizeClearIcon.tsx | 26 ++++++-------- .../fields/CustomizeClearIcon.tsx.preview | 24 ++++++------- .../MultiInputDateRangeField.tsx | 2 +- .../MultiInputDateRangeField.types.ts | 5 +-- .../MultiInputDateTimeRangeField.tsx | 2 +- .../MultiInputDateTimeRangeField.types.ts | 5 +-- .../MultiInputTimeRangeField.tsx | 2 +- .../MultiInputTimeRangeField.types.ts | 5 +-- .../SingleInputDateRangeField.tsx | 4 +-- .../SingleInputDateRangeField.types.ts | 5 +-- .../SingleInputDateTimeRangeField.tsx | 4 +-- .../SingleInputDateTimeRangeField.types.ts | 4 +-- .../SingleInputTimeRangeField.tsx | 4 +-- .../SingleInputTimeRangeField.types.ts | 6 ++-- .../hooks/useEnrichedRangePickerFieldProps.ts | 12 ++----- .../hooks/useMultiInputRangeField/shared.ts | 17 +++------ .../useMultiInputDateRangeField.ts | 8 ++--- .../useMultiInputDateTimeRangeField.ts | 8 ++--- .../useMultiInputTimeRangeField.ts | 8 ++--- .../src/DateField/DateField.tsx | 4 +-- .../src/DateField/DateField.types.ts | 5 +-- .../src/DateTimeField/DateTimeField.tsx | 4 +-- .../src/DateTimeField/DateTimeField.types.ts | 5 +-- .../src/TimeField/TimeField.tsx | 4 +-- .../src/TimeField/TimeField.types.ts | 5 +-- ...seClearField.tsx => useClearableField.tsx} | 31 +++++----------- .../useDesktopPicker.types.ts | 5 +-- .../src/internals/hooks/useField/index.ts | 2 ++ .../src/internals/hooks/useField/useField.ts | 1 - .../hooks/useField/useField.types.ts | 3 +- .../useMobilePicker/useMobilePicker.types.ts | 5 +-- .../x-date-pickers/src/internals/index.ts | 4 ++- packages/x-date-pickers/src/models/fields.ts | 2 ++ 42 files changed, 170 insertions(+), 244 deletions(-) rename packages/x-date-pickers/src/internals/hooks/{useClearField.tsx => useClearableField.tsx} (72%) diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js b/docs/data/date-pickers/custom-field/PickerWithBrowserField.js index 09c77941b5eb..fd2ba60d6f06 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.js @@ -13,7 +13,7 @@ import { unstable_useSingleInputDateRangeField as useSingleInputDateRangeField } import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField'; -import { useClearField } from '@mui/x-date-pickers/internals'; +import { useClearableField } from '@mui/x-date-pickers/internals'; const BrowserField = React.forwardRef((props, inputRef) => { const { @@ -55,8 +55,8 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => { const { onClear, clearable, - slots: rangeSlots, - slotProps: rangeSlotProps, + slots: inSlots, + slotProps: inSlotProps, ...fieldProps } = useSingleInputDateRangeField({ props: textFieldProps, @@ -64,7 +64,7 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => { }); const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = - useClearField({ + useClearableField({ onClear, clearable, fieldProps, @@ -76,8 +76,8 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => { ), }, - slots: rangeSlots, - slotProps: rangeSlotProps, + slots: inSlots, + slotProps: inSlotProps, }); return ( @@ -194,7 +194,7 @@ function BrowserDateField(props) { inputRef: externalInputRef, }); const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = - useClearField({ + useClearableField({ onClear, clearable, fieldProps, diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx index 4620d1a13e89..cef42d6cffca 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx @@ -24,7 +24,7 @@ import { DateFieldSlotsComponent, DateFieldSlotsComponentsProps, } from '@mui/x-date-pickers/DateField'; -import { useClearField } from '@mui/x-date-pickers/internals'; +import { useClearableField } from '@mui/x-date-pickers/internals'; import { BaseMultiInputFieldProps, DateRange, @@ -117,8 +117,8 @@ const BrowserSingleInputDateRangeField = React.forwardRef( const { onClear, clearable, - slots: rangeSlots, - slotProps: rangeSlotProps, + slots: inSlots, + slotProps: inSlotProps, ...fieldProps } = useSingleInputDateRangeField({ props: textFieldProps, @@ -126,7 +126,7 @@ const BrowserSingleInputDateRangeField = React.forwardRef( }); const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = - useClearField< + useClearableField< {}, typeof textFieldProps.InputProps, DateFieldSlotsComponent, @@ -143,8 +143,8 @@ const BrowserSingleInputDateRangeField = React.forwardRef( ), }, - slots: rangeSlots as any, - slotProps: rangeSlotProps as any, + slots: inSlots as any, + slotProps: inSlotProps as any, }); return ( @@ -292,7 +292,7 @@ function BrowserDateField(props: BrowserDateFieldProps) { inputRef: externalInputRef, }); const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = - useClearField< + useClearableField< {}, typeof textFieldProps.InputProps, DateFieldSlotsComponent, diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.js b/docs/data/date-pickers/custom-field/PickerWithJoyField.js index 5e4348ce8d06..74775c5d96d3 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.js +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.js @@ -28,7 +28,7 @@ import { unstable_useSingleInputDateRangeField as useSingleInputDateRangeField } import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField'; -import { useClearField } from '@mui/x-date-pickers/internals'; +import { useClearableField } from '@mui/x-date-pickers/internals'; const joyTheme = extendJoyTheme(); @@ -43,7 +43,6 @@ const JoyField = React.forwardRef((props, inputRef) => { startDecorator, ...other } = props; - console.log('props', props); return ( { }); const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = - useClearField({ + useClearableField({ onClear, clearable, fieldProps, @@ -256,7 +255,7 @@ function JoyDateField(props) { inputRef: externalInputRef, }); const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = - useClearField({ + useClearableField({ onClear, clearable, fieldProps, diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx index 24af019df39c..3a3658bb54ee 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx @@ -39,7 +39,7 @@ import { DateFieldSlotsComponent, DateFieldSlotsComponentsProps, } from '@mui/x-date-pickers/DateField'; -import { useClearField } from '@mui/x-date-pickers/internals'; +import { useClearableField } from '@mui/x-date-pickers/internals'; import { BaseMultiInputFieldProps, DateRange, @@ -154,7 +154,7 @@ const JoySingleInputDateRangeField = React.forwardRef( }); const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = - useClearField< + useClearableField< {}, typeof textFieldProps.InputProps, DateFieldSlotsComponent, @@ -345,7 +345,7 @@ function JoyDateField(props: JoyDateFieldProps) { inputRef: externalInputRef, }); const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = - useClearField< + useClearableField< {}, typeof textFieldProps.InputProps, DateFieldSlotsComponent, diff --git a/docs/data/date-pickers/date-picker/ClearableProp.js b/docs/data/date-pickers/date-picker/ClearableProp.js index 141e5a01ebac..7a23a2b193e2 100644 --- a/docs/data/date-pickers/date-picker/ClearableProp.js +++ b/docs/data/date-pickers/date-picker/ClearableProp.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; +import { DemoItem } from '@mui/x-date-pickers/internals/demo'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; @@ -31,25 +31,23 @@ export default function ClearableProp() { position: 'relative', }} > - - - setCleared(true) }, - }} - /> - + + setCleared(true) }, + }} + /> + - {cleared && ( - - Field cleared! - - )} - + {cleared && ( + + Field cleared! + + )} ); diff --git a/docs/data/date-pickers/date-picker/ClearableProp.tsx b/docs/data/date-pickers/date-picker/ClearableProp.tsx index 374d17db663b..87b9257e8da4 100644 --- a/docs/data/date-pickers/date-picker/ClearableProp.tsx +++ b/docs/data/date-pickers/date-picker/ClearableProp.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; +import { DemoItem } from '@mui/x-date-pickers/internals/demo'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; @@ -31,25 +31,23 @@ export default function ClearableProp() { position: 'relative', }} > - - - setCleared(true) }, - }} - /> - + + setCleared(true) }, + }} + /> + - {cleared && ( - - Field cleared! - - )} - + {cleared && ( + + Field cleared! + + )} ); diff --git a/docs/data/date-pickers/fields/ClearableBehavior.js b/docs/data/date-pickers/fields/ClearableBehavior.js index a65509d2b365..c66c5e1538ba 100644 --- a/docs/data/date-pickers/fields/ClearableBehavior.js +++ b/docs/data/date-pickers/fields/ClearableBehavior.js @@ -1,6 +1,6 @@ import * as React from 'react'; -import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; +import { DemoItem } from '@mui/x-date-pickers/internals/demo'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { DateField } from '@mui/x-date-pickers/DateField'; @@ -33,17 +33,15 @@ export default function ClearableBehavior() { position: 'relative', }} > - - - setValue(newValue)} - onClear={() => setCleared(true)} - clearable - /> - - + + setValue(newValue)} + onClear={() => setCleared(true)} + clearable + /> + {cleared && !value && ( - - - setValue(newValue)} - onClear={() => setCleared(true)} - clearable - /> - - + + setValue(newValue)} + onClear={() => setCleared(true)} + clearable + /> + {cleared && !value && ( - - - - - - + + ); diff --git a/docs/data/date-pickers/fields/CustomizeClearIcon.tsx b/docs/data/date-pickers/fields/CustomizeClearIcon.tsx index e42af5a2fea7..416541f175a8 100644 --- a/docs/data/date-pickers/fields/CustomizeClearIcon.tsx +++ b/docs/data/date-pickers/fields/CustomizeClearIcon.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo'; +import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { DateField } from '@mui/x-date-pickers/DateField'; @@ -11,20 +11,16 @@ export default function CustomizeClearIcon() { return ( - - - - - - + + ); diff --git a/docs/data/date-pickers/fields/CustomizeClearIcon.tsx.preview b/docs/data/date-pickers/fields/CustomizeClearIcon.tsx.preview index 8f0c5257eae9..bb0651a2a82b 100644 --- a/docs/data/date-pickers/fields/CustomizeClearIcon.tsx.preview +++ b/docs/data/date-pickers/fields/CustomizeClearIcon.tsx.preview @@ -1,14 +1,10 @@ - - - - - - \ No newline at end of file + + \ No newline at end of file diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx index e1348e51af1f..45644dad3c85 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx @@ -52,7 +52,7 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi typeof themeProps, keyof Omit< UseDateRangeFieldProps, - 'unstableFieldRef' | 'disabled' | 'clearable' | 'onClear' | 'inputHasFocus' + 'unstableFieldRef' | 'disabled' | 'clearable' | 'onClear' > >(themeProps, 'date'); diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts index af7947b000a1..20509bd3a311 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts @@ -16,10 +16,7 @@ export type UseMultiInputDateRangeFieldParams< > = UseMultiInputRangeFieldParams, TTextFieldSlotProps>; export interface UseMultiInputDateRangeFieldProps - extends Omit< - UseDateRangeFieldProps, - 'unstableFieldRef' | 'clearable' | 'onClear' | 'inputHasFocus' - > { + extends Omit, 'unstableFieldRef' | 'clearable' | 'onClear'> { unstableStartFieldRef?: React.Ref>; unstableEndFieldRef?: React.Ref>; } diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx index 39291ca92871..ee6d40747ae9 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx @@ -52,7 +52,7 @@ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTim typeof themeProps, keyof Omit< UseDateTimeRangeFieldProps, - 'unstableFieldRef' | 'disabled' | 'clearable' | 'onClear' | 'inputHasFocus' + 'unstableFieldRef' | 'disabled' | 'clearable' | 'onClear' > >(themeProps, 'date-time'); diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts index 70648ab17c23..f2d85da9f547 100644 --- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts @@ -19,10 +19,7 @@ export type UseMultiInputDateTimeRangeFieldParams< > = UseMultiInputRangeFieldParams, TTextFieldSlotProps>; export interface UseMultiInputDateTimeRangeFieldProps - extends Omit< - UseDateTimeRangeFieldProps, - 'unstableFieldRef' | 'clearable' | 'onClear' | 'inputHasFocus' - > { + extends Omit, 'unstableFieldRef' | 'clearable' | 'onClear'> { unstableStartFieldRef?: React.Ref>; unstableEndFieldRef?: React.Ref>; } diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx index aa933e9ba577..b4c21edfa138 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx @@ -52,7 +52,7 @@ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeFi typeof themeProps, keyof Omit< UseTimeRangeFieldProps, - 'unstableFieldRef' | 'disabled' | 'clearable' | 'onClear' | 'inputHasFocus' + 'unstableFieldRef' | 'disabled' | 'clearable' | 'onClear' > >(themeProps, 'time'); diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts index 59725ec3ee5f..6458cb84aebe 100644 --- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts @@ -19,10 +19,7 @@ export type UseMultiInputTimeRangeFieldParams< > = UseMultiInputRangeFieldParams, TTextFieldSlotProps>; export interface UseMultiInputTimeRangeFieldProps - extends Omit< - UseTimeRangeFieldProps, - 'unstableFieldRef' | 'clearable' | 'onClear' | 'inputHasFocus' - > { + extends Omit, 'unstableFieldRef' | 'clearable' | 'onClear'> { unstableStartFieldRef?: React.Ref>; unstableEndFieldRef?: React.Ref>; } diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx index 12ea8ad34335..9e9810277253 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import MuiTextField from '@mui/material/TextField'; import { useThemeProps } from '@mui/material/styles'; import { useSlotProps } from '@mui/base/utils'; -import { useClearField } from '@mui/x-date-pickers/internals/hooks/useClearField'; +import { useClearableField } from '@mui/x-date-pickers/internals'; import { SingleInputDateRangeFieldProps, SingleInputDateRangeFieldSlotsComponentsProps, @@ -56,7 +56,7 @@ const SingleInputDateRangeField = React.forwardRef(function SingleInputDateRange inputRef: externalInputRef, }); - const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearField< + const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField< typeof fieldProps, typeof fieldProps.InputProps, SingleInputDateRangeFieldSlotsComponent, diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts index 819c20edd837..e2db02ad4e5e 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts @@ -1,11 +1,12 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/base/utils'; import TextField from '@mui/material/TextField'; -import { FieldsTextFieldProps, UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals'; import { + FieldsTextFieldProps, + UncapitalizeObjectKeys, FieldSlotsComponents, FieldSlotsComponentsProps, -} from '@mui/x-date-pickers/internals/hooks/useField/useField.types'; +} from '@mui/x-date-pickers/internals'; import { UseDateRangeFieldDefaultizedProps, UseDateRangeFieldProps } from '../internals/models'; export interface UseSingleInputDateRangeFieldParams { diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx index 64bbdde2fe4e..e33ad579e9f6 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import MuiTextField from '@mui/material/TextField'; import { useThemeProps } from '@mui/material/styles'; import { useSlotProps } from '@mui/base/utils'; -import { useClearField } from '@mui/x-date-pickers/internals/hooks/useClearField'; +import { useClearableField } from '@mui/x-date-pickers/internals'; import { SingleInputDateTimeRangeFieldProps, SingleInputDateTimeRangeFieldSlotsComponent, @@ -57,7 +57,7 @@ const SingleInputDateTimeRangeField = React.forwardRef(function SingleInputDateT inputRef: externalInputRef, }); - const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearField< + const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField< typeof fieldProps, typeof fieldProps.InputProps, SingleInputDateTimeRangeFieldSlotsComponent, diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts index a2f740da5d88..27cf3cd66c6a 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts @@ -2,11 +2,11 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/base/utils'; import TextField from '@mui/material/TextField'; import { FieldsTextFieldProps } from '@mui/x-date-pickers/internals/models/fields'; -import { UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals'; import { + UncapitalizeObjectKeys, FieldSlotsComponents, FieldSlotsComponentsProps, -} from '@mui/x-date-pickers/internals/hooks/useField/useField.types'; +} from '@mui/x-date-pickers/internals'; import { UseDateTimeRangeFieldDefaultizedProps, UseDateTimeRangeFieldProps, diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx index a88a27b5bf37..67f99fe690e5 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { useClearField } from '@mui/x-date-pickers/internals/hooks/useClearField'; +import { useClearableField } from '@mui/x-date-pickers/internals'; import MuiTextField from '@mui/material/TextField'; import { useThemeProps } from '@mui/material/styles'; import { useSlotProps } from '@mui/base/utils'; @@ -56,7 +56,7 @@ const SingleInputTimeRangeField = React.forwardRef(function SingleInputTimeRange inputRef: externalInputRef, }); - const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearField< + const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField< typeof fieldProps, typeof fieldProps.InputProps, SingleInputTimeRangeFieldSlotsComponent, diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts index ddfb3e0260c1..67cdbf1ac1c5 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts @@ -1,12 +1,12 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/base/utils'; import TextField from '@mui/material/TextField'; +import { FieldsTextFieldProps } from '@mui/x-date-pickers/internals/models/fields'; import { + UncapitalizeObjectKeys, FieldSlotsComponents, FieldSlotsComponentsProps, -} from '@mui/x-date-pickers/internals/hooks/useField/useField.types'; -import { FieldsTextFieldProps } from '@mui/x-date-pickers/internals/models/fields'; -import { UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals'; +} from '@mui/x-date-pickers/internals'; import { UseTimeRangeFieldDefaultizedProps, UseTimeRangeFieldProps } from '../internals/models'; export interface UseSingleInputTimeRangeFieldParams { diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts index 77c05569a5e1..9d53ce817309 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts @@ -28,7 +28,6 @@ import { UseDateRangeFieldProps, } from '../models'; import { UseRangePositionResponse } from './useRangePosition'; -import { excludeClearableProps } from './useMultiInputRangeField/shared'; export interface RangePickerFieldSlotsComponent { Field: React.ElementType; @@ -58,10 +57,7 @@ export interface RangePickerFieldSlotsComponentsProps { >, {}, UsePickerProps, any, RangeFieldSection, any, any, any> - > & { - clearable?: boolean; - onClear?: React.MouseEventHandler; - }; + > & {}; fieldRoot?: SlotComponentProps>; fieldSeparator?: SlotComponentProps>; @@ -230,12 +226,10 @@ const useMultiInputFieldSlotProps = , TDate, RangeFieldSection, TError> - >(fieldProps, ['clearable', 'onClear', 'inputHasFocus']); + const { clearable, onClear, ...restFieldProps } = fieldProps; const enrichedFieldProps: ReturnType = { - ...unclearableFieldProps, + ...restFieldProps, slots, slotProps, }; diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/shared.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/shared.ts index 963ec47d244b..6fd5d9546714 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/shared.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/shared.ts @@ -1,14 +1,5 @@ /* TODO: remove this when a clearable behavior for multiple input range fields is implemented */ -export const excludeClearableProps = ( - props: TProps, - excludedProps: string[], -): TProps => - Object.keys(props).reduce((prev, key) => { - if (!excludedProps.includes(key)) { - return { - ...prev, - [key as keyof TProps]: props[key as keyof TProps], - }; - } - return prev; - }, {}) as TProps; +export const excludeProps = (props: TProps, excludedProps: string[]): TProps => { + const filteredProps = Object.entries(props).filter(([key]) => !excludedProps.includes(key)); + return Object.fromEntries(filteredProps) as TProps; +}; diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts index d402f2ccd476..b6fd6630241a 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts @@ -24,7 +24,7 @@ import { import { rangeValueManager } from '../../utils/valueManagers'; import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types'; import { DateRangeValidationError } from '../../../models'; -import { excludeClearableProps } from './shared'; +import { excludeProps } from './shared'; export const useMultiInputDateRangeField = ({ sharedProps: inSharedProps, @@ -154,15 +154,13 @@ export const useMultiInputDateRangeField = >(startDateResponse, [ + startDate: excludeProps>(startDateResponse, [ 'clearable', 'onClear', - 'inputHasFocus', ]), - endDate: excludeClearableProps>(endDateResponse, [ + endDate: excludeProps>(endDateResponse, [ 'clearable', 'onClear', - 'inputHasFocus', ]), }; }; diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts index 52b3642f6030..e2f6cbc370f4 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts @@ -30,7 +30,7 @@ import { } from '../../utils/validation/validateDateTimeRange'; import { rangeValueManager } from '../../utils/valueManagers'; import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types'; -import { excludeClearableProps } from './shared'; +import { excludeProps } from './shared'; export const useDefaultizedDateTimeRangeFieldProps = ( props: UseMultiInputDateTimeRangeFieldProps, @@ -175,15 +175,13 @@ export const useMultiInputDateTimeRangeField = >(startDateResponse, [ + startDate: excludeProps>(startDateResponse, [ 'clearable', 'onClear', - 'inputHasFocus', ]), - endDate: excludeClearableProps>(endDateResponse, [ + endDate: excludeProps>(endDateResponse, [ 'clearable', 'onClear', - 'inputHasFocus', ]), }; }; diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts index 30f8f3d99eff..688e28260021 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts @@ -28,7 +28,7 @@ import type { } from '../../../MultiInputTimeRangeField/MultiInputTimeRangeField.types'; import { rangeValueManager } from '../../utils/valueManagers'; import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types'; -import { excludeClearableProps } from './shared'; +import { excludeProps } from './shared'; export const useDefaultizedTimeRangeFieldProps = ( props: UseMultiInputTimeRangeFieldProps, @@ -165,15 +165,13 @@ export const useMultiInputTimeRangeField = >(startDateResponse, [ + startDate: excludeProps>(startDateResponse, [ 'clearable', 'onClear', - 'inputHasFocus', ]), - endDate: excludeClearableProps>(endDateResponse, [ + endDate: excludeProps>(endDateResponse, [ 'clearable', 'onClear', - 'inputHasFocus', ]), }; }; diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx index ab6211dfbc4d..c2e1ad006b15 100644 --- a/packages/x-date-pickers/src/DateField/DateField.tsx +++ b/packages/x-date-pickers/src/DateField/DateField.tsx @@ -9,7 +9,7 @@ import { DateFieldSlotsComponentsProps, } from './DateField.types'; import { useDateField } from './useDateField'; -import { useClearField } from '../internals/hooks/useClearField'; +import { useClearableField } from '../internals/hooks/useClearableField'; type DateFieldComponent = (( props: DateFieldProps & React.RefAttributes, @@ -63,7 +63,7 @@ const DateField = React.forwardRef(function DateField( inputRef: externalInputRef, }); - const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearField< + const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField< typeof fieldProps, typeof fieldProps.InputProps, DateFieldSlotsComponent, diff --git a/packages/x-date-pickers/src/DateField/DateField.types.ts b/packages/x-date-pickers/src/DateField/DateField.types.ts index 7c4c68a18778..6b59ceee896c 100644 --- a/packages/x-date-pickers/src/DateField/DateField.types.ts +++ b/packages/x-date-pickers/src/DateField/DateField.types.ts @@ -1,6 +1,7 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/base/utils'; import TextField from '@mui/material/TextField'; +import { FieldSlotsComponents, FieldSlotsComponentsProps } from '../internals'; import { DateValidationError, FieldSection } from '../models'; import { UseFieldInternalProps } from '../internals/hooks/useField'; import { DefaultizedProps, MakeOptional } from '../internals/models/helpers'; @@ -12,10 +13,6 @@ import { } from '../internals/models/validation'; import { FieldsTextFieldProps } from '../internals/models/fields'; import { SlotsAndSlotProps } from '../internals/utils/slots-migration'; -import { - FieldSlotsComponents, - FieldSlotsComponentsProps, -} from '../internals/hooks/useField/useField.types'; export interface UseDateFieldParams { props: UseDateFieldComponentProps; diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx index 580718f75a80..834cb9c3c06c 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx @@ -9,7 +9,7 @@ import { DateTimeFieldSlotsComponentsProps, } from './DateTimeField.types'; import { useDateTimeField } from './useDateTimeField'; -import { useClearField } from '../internals/hooks/useClearField'; +import { useClearableField } from '../internals/hooks/useClearableField'; type DateTimeFieldComponent = (( props: DateTimeFieldProps & React.RefAttributes, @@ -57,7 +57,7 @@ const DateTimeField = React.forwardRef(function DateTimeField( inputRef: externalInputRef, }); - const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearField< + const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField< typeof fieldProps, typeof fieldProps.InputProps, DateTimeFieldSlotsComponent, diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts b/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts index b9a7ad2b2d63..cf9ce438e7b2 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.types.ts @@ -15,10 +15,7 @@ import { } from '../internals/models/validation'; import { FieldsTextFieldProps } from '../internals/models/fields'; import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration'; -import { - FieldSlotsComponents, - FieldSlotsComponentsProps, -} from '../internals/hooks/useField/useField.types'; +import { FieldSlotsComponents, FieldSlotsComponentsProps } from '../internals'; export interface UseDateTimeFieldParams { props: UseDateTimeFieldComponentProps; diff --git a/packages/x-date-pickers/src/TimeField/TimeField.tsx b/packages/x-date-pickers/src/TimeField/TimeField.tsx index 35804dc64e4d..57f59e2850b0 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.tsx +++ b/packages/x-date-pickers/src/TimeField/TimeField.tsx @@ -9,7 +9,7 @@ import { TimeFieldSlotsComponentsProps, } from './TimeField.types'; import { useTimeField } from './useTimeField'; -import { useClearField } from '../internals/hooks/useClearField'; +import { useClearableField } from '../internals/hooks/useClearableField'; type TimeFieldComponent = (( props: TimeFieldProps & React.RefAttributes, @@ -55,7 +55,7 @@ const TimeField = React.forwardRef(function TimeField( inputRef: externalInputRef, }); - const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearField< + const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField< typeof fieldProps, typeof fieldProps.InputProps, TimeFieldSlotsComponent, diff --git a/packages/x-date-pickers/src/TimeField/TimeField.types.ts b/packages/x-date-pickers/src/TimeField/TimeField.types.ts index 3aa012c21139..fc95372257e9 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.types.ts +++ b/packages/x-date-pickers/src/TimeField/TimeField.types.ts @@ -7,10 +7,7 @@ import { BaseTimeValidationProps, TimeValidationProps } from '../internals/model import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration'; import { FieldsTextFieldProps } from '../internals/models/fields'; import { FieldSection, TimeValidationError } from '../models'; -import { - FieldSlotsComponents, - FieldSlotsComponentsProps, -} from '../internals/hooks/useField/useField.types'; +import { FieldSlotsComponents, FieldSlotsComponentsProps } from '../internals'; export interface UseTimeFieldParams { props: UseTimeFieldComponentProps; diff --git a/packages/x-date-pickers/src/internals/hooks/useClearField.tsx b/packages/x-date-pickers/src/internals/hooks/useClearableField.tsx similarity index 72% rename from packages/x-date-pickers/src/internals/hooks/useClearField.tsx rename to packages/x-date-pickers/src/internals/hooks/useClearableField.tsx index d0448b51a75f..83d9cadd1334 100644 --- a/packages/x-date-pickers/src/internals/hooks/useClearField.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useClearableField.tsx @@ -7,19 +7,8 @@ import { ClearIcon } from '../../icons'; import { FieldSlotsComponents, FieldSlotsComponentsProps } from './useField/useField.types'; import { FieldsTextFieldProps } from '../models'; -const excludeClearableProps = (props: TProps, excludedProps: string[]): TProps => - Object.keys(props || {}).reduce((prev, key) => { - if (!excludedProps.includes(key)) { - return { - ...prev, - [key as keyof TProps]: props[key as keyof TProps], - }; - } - return prev; - }, {}) as TProps; - type UseClearFieldProps< - TFieldProps extends FieldsTextFieldProps & { inputHasFocus?: boolean }, + TFieldProps extends FieldsTextFieldProps, TInputProps extends { endAdornment?: React.ReactNode } | undefined, TFieldSlots extends FieldSlotsComponents, TFieldSlotsComponentsProps extends FieldSlotsComponentsProps, @@ -32,10 +21,8 @@ type UseClearFieldProps< slotProps?: TFieldSlotsComponentsProps; }; -export const useClearField = < - TFieldProps extends FieldsTextFieldProps & { - inputHasFocus?: boolean; - }, +export const useClearableField = < + TFieldProps extends FieldsTextFieldProps, TInputProps extends { endAdornment?: React.ReactNode } | undefined, TFieldSlotsComponents extends FieldSlotsComponents, TFieldSlotsComponentsProps extends FieldSlotsComponentsProps, @@ -74,21 +61,21 @@ export const useClearField = < }; const fieldProps = { - ...excludeClearableProps(forwardedFieldProps, ['inputHasFocus']), + ...forwardedFieldProps, sx: { '& .clearButton': { visibility: 'visible', }, '@media (pointer: fine)': { '& .clearButton': { - visibility: forwardedFieldProps?.inputHasFocus ? 'visible' : 'hidden', + visibility: 'hidden', }, - - '&:hover .clearButton': { - visibility: 'visible', + '&:hover, &:focus-within': { + '.clearButton': { + visibility: 'visible', + }, }, }, - ...forwardedFieldProps?.sx, } as SxProps, } as TFieldProps; diff --git a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts index 47e64be2d883..36adc38f9b1a 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts @@ -71,10 +71,7 @@ export interface ExportedUseDesktopPickerSlotsComponentsProps< React.ElementType>, {}, UsePickerProps - > & { - clearable?: boolean; - onClear?: React.MouseEventHandler; - }; + > & {}; textField?: SlotComponentProps>; inputAdornment?: Partial; openPickerButton?: SlotComponentProps< diff --git a/packages/x-date-pickers/src/internals/hooks/useField/index.ts b/packages/x-date-pickers/src/internals/hooks/useField/index.ts index 955beab828fe..a4fc8fdccdbd 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/index.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/index.ts @@ -8,6 +8,8 @@ export type { FieldChangeHandler, FieldChangeHandlerContext, FieldRef, + FieldSlotsComponents, + FieldSlotsComponentsProps, } from './useField.types'; export { splitFormatIntoSections, diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts index 36a405ebc5ba..36fe0c8c3c02 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -536,6 +536,5 @@ export const useField = < error: inputError, ref: handleRef, clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly), - inputHasFocus, }; }; diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts index 11f99639ef45..843f1e2a6ce5 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts @@ -388,8 +388,7 @@ export type SectionOrdering = { export interface FieldSlotsComponents { /** * Icon to display inside the clear button. - * Receives the same props as `@mui/icons-material/Clear`. - * @default Clear from '@mui/icons-material' + * @default ClearIcon */ ClearIcon?: React.ElementType; } diff --git a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts index 29ab3e6156e4..498a9ce1d335 100644 --- a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts @@ -45,10 +45,7 @@ export interface ExportedUseMobilePickerSlotsComponentsProps< React.ElementType>, {}, UsePickerProps - > & { - clearable?: boolean; - onClear?: React.MouseEventHandler; - }; + > & {}; textField?: SlotComponentProps>; } diff --git a/packages/x-date-pickers/src/internals/index.ts b/packages/x-date-pickers/src/internals/index.ts index 7300b7912436..51271b47ce23 100644 --- a/packages/x-date-pickers/src/internals/index.ts +++ b/packages/x-date-pickers/src/internals/index.ts @@ -66,6 +66,8 @@ export type { FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext, + FieldSlotsComponents, + FieldSlotsComponentsProps, } from './hooks/useField'; export type { MobileOnlyPickerProps } from './hooks/useMobilePicker'; export { usePicker } from './hooks/usePicker'; @@ -93,7 +95,7 @@ export { useLocaleText, useNow, } from './hooks/useUtils'; -export { useClearField } from './hooks/useClearField'; +export { useClearableField } from './hooks/useClearableField'; export type { ExportedUseViewsOptions } from './hooks/useViews'; export { useValidation } from './hooks/useValidation'; export type { ValidationProps, Validator, InferError } from './hooks/useValidation'; diff --git a/packages/x-date-pickers/src/models/fields.ts b/packages/x-date-pickers/src/models/fields.ts index 06b589a3a9d3..30e3410328e7 100644 --- a/packages/x-date-pickers/src/models/fields.ts +++ b/packages/x-date-pickers/src/models/fields.ts @@ -150,4 +150,6 @@ export interface BaseSingleInputFieldProps Date: Mon, 24 Jul 2023 14:10:07 +0200 Subject: [PATCH 32/55] prop-types --- .../SingleInputDateRangeField/SingleInputDateRangeField.tsx | 4 ++-- .../SingleInputDateTimeRangeField.tsx | 4 ++-- .../SingleInputTimeRangeField/SingleInputTimeRangeField.tsx | 4 ++-- packages/x-date-pickers/src/DateField/DateField.tsx | 4 ++-- packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx | 4 ++-- packages/x-date-pickers/src/TimeField/TimeField.tsx | 4 ++-- 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx index 9e9810277253..b437cd14471a 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx @@ -94,7 +94,7 @@ SingleInputDateRangeField.propTypes = { autoFocus: PropTypes.bool, className: PropTypes.string, /** - * If `true`, the field will be cleared when the user clicks on the clear button. + * If `true`, a clear button will be shown in the field allowing value clearing. * @default false */ clearable: PropTypes.bool, @@ -231,7 +231,7 @@ SingleInputDateRangeField.propTypes = { */ onChange: PropTypes.func, /** - * Event fired when the clear button is clicked. + * Callback fired when the clear button is clicked. */ onClear: PropTypes.func, /** diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx index e33ad579e9f6..119e1b2d025d 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx @@ -100,7 +100,7 @@ SingleInputDateTimeRangeField.propTypes = { autoFocus: PropTypes.bool, className: PropTypes.string, /** - * If `true`, the field will be cleared when the user clicks on the clear button. + * If `true`, a clear button will be shown in the field allowing value clearing. * @default false */ clearable: PropTypes.bool, @@ -265,7 +265,7 @@ SingleInputDateTimeRangeField.propTypes = { */ onChange: PropTypes.func, /** - * Event fired when the clear button is clicked. + * Callback fired when the clear button is clicked. */ onClear: PropTypes.func, /** diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx index 67f99fe690e5..533b8bbb23c6 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx @@ -99,7 +99,7 @@ SingleInputTimeRangeField.propTypes = { autoFocus: PropTypes.bool, className: PropTypes.string, /** - * If `true`, the field will be cleared when the user clicks on the clear button. + * If `true`, a clear button will be shown in the field allowing value clearing. * @default false */ clearable: PropTypes.bool, @@ -248,7 +248,7 @@ SingleInputTimeRangeField.propTypes = { */ onChange: PropTypes.func, /** - * Event fired when the clear button is clicked. + * Callback fired when the clear button is clicked. */ onClear: PropTypes.func, /** diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx index c2e1ad006b15..5ba37fc231c6 100644 --- a/packages/x-date-pickers/src/DateField/DateField.tsx +++ b/packages/x-date-pickers/src/DateField/DateField.tsx @@ -102,7 +102,7 @@ DateField.propTypes = { autoFocus: PropTypes.bool, className: PropTypes.string, /** - * If `true`, the field will be cleared when the user clicks on the clear button. + * If `true`, a clear button will be shown in the field allowing value clearing. * @default false */ clearable: PropTypes.bool, @@ -239,7 +239,7 @@ DateField.propTypes = { */ onChange: PropTypes.func, /** - * Event fired when the clear button is clicked. + * Callback fired when the clear button is clicked. */ onClear: PropTypes.func, /** diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx index 834cb9c3c06c..227f2d6e2e67 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx @@ -97,7 +97,7 @@ DateTimeField.propTypes = { autoFocus: PropTypes.bool, className: PropTypes.string, /** - * If `true`, the field will be cleared when the user clicks on the clear button. + * If `true`, a clear button will be shown in the field allowing value clearing. * @default false */ clearable: PropTypes.bool, @@ -262,7 +262,7 @@ DateTimeField.propTypes = { */ onChange: PropTypes.func, /** - * Event fired when the clear button is clicked. + * Callback fired when the clear button is clicked. */ onClear: PropTypes.func, /** diff --git a/packages/x-date-pickers/src/TimeField/TimeField.tsx b/packages/x-date-pickers/src/TimeField/TimeField.tsx index 57f59e2850b0..ba6c78699447 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.tsx +++ b/packages/x-date-pickers/src/TimeField/TimeField.tsx @@ -96,7 +96,7 @@ TimeField.propTypes = { autoFocus: PropTypes.bool, className: PropTypes.string, /** - * If `true`, the field will be cleared when the user clicks on the clear button. + * If `true`, a clear button will be shown in the field allowing value clearing. * @default false */ clearable: PropTypes.bool, @@ -245,7 +245,7 @@ TimeField.propTypes = { */ onChange: PropTypes.func, /** - * Event fired when the clear button is clicked. + * Callback fired when the clear button is clicked. */ onClear: PropTypes.func, /** From a8153054195de2af94f738c864955ebd81e8f95e Mon Sep 17 00:00:00 2001 From: noraleonte Date: Mon, 24 Jul 2023 14:24:19 +0200 Subject: [PATCH 33/55] yarn docs:api --- docs/pages/x/api/date-pickers/date-field.json | 5 +---- docs/pages/x/api/date-pickers/date-time-field.json | 5 +---- .../api/date-pickers/single-input-date-range-field.json | 5 +---- .../date-pickers/single-input-date-time-range-field.json | 5 +---- .../api/date-pickers/single-input-time-range-field.json | 5 +---- docs/pages/x/api/date-pickers/time-field.json | 5 +---- docs/translations/api-docs/date-pickers/date-field.json | 6 +++--- .../api-docs/date-pickers/date-time-field.json | 6 +++--- .../date-pickers/single-input-date-range-field.json | 6 +++--- .../date-pickers/single-input-date-time-range-field.json | 6 +++--- .../date-pickers/single-input-time-range-field.json | 6 +++--- docs/translations/api-docs/date-pickers/time-field.json | 6 +++--- .../src/internals/hooks/useClearableField.tsx | 9 ++++++--- 13 files changed, 30 insertions(+), 45 deletions(-) diff --git a/docs/pages/x/api/date-pickers/date-field.json b/docs/pages/x/api/date-pickers/date-field.json index e70c4f0e824e..17e3465f52f6 100644 --- a/docs/pages/x/api/date-pickers/date-field.json +++ b/docs/pages/x/api/date-pickers/date-field.json @@ -99,10 +99,7 @@ } }, "slots": { - "clearIcon": { - "default": "Clear from '@mui/icons-material'", - "type": { "name": "elementType" } - }, + "clearIcon": { "default": "ClearIcon", "type": { "name": "elementType" } }, "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } } }, "name": "DateField", diff --git a/docs/pages/x/api/date-pickers/date-time-field.json b/docs/pages/x/api/date-pickers/date-time-field.json index a76fa6f33b61..234430672977 100644 --- a/docs/pages/x/api/date-pickers/date-time-field.json +++ b/docs/pages/x/api/date-pickers/date-time-field.json @@ -112,10 +112,7 @@ } }, "slots": { - "clearIcon": { - "default": "Clear from '@mui/icons-material'", - "type": { "name": "elementType" } - }, + "clearIcon": { "default": "ClearIcon", "type": { "name": "elementType" } }, "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } } }, "name": "DateTimeField", diff --git a/docs/pages/x/api/date-pickers/single-input-date-range-field.json b/docs/pages/x/api/date-pickers/single-input-date-range-field.json index 1f5b17af197f..3a7094e90ce2 100644 --- a/docs/pages/x/api/date-pickers/single-input-date-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-date-range-field.json @@ -97,10 +97,7 @@ } }, "slots": { - "clearIcon": { - "default": "Clear from '@mui/icons-material'", - "type": { "name": "elementType" } - }, + "clearIcon": { "default": "ClearIcon", "type": { "name": "elementType" } }, "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } } }, "name": "SingleInputDateRangeField", diff --git a/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json b/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json index cad0d7bc94a9..57ee88471d09 100644 --- a/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json @@ -110,10 +110,7 @@ } }, "slots": { - "clearIcon": { - "default": "Clear from '@mui/icons-material'", - "type": { "name": "elementType" } - }, + "clearIcon": { "default": "ClearIcon", "type": { "name": "elementType" } }, "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } } }, "name": "SingleInputDateTimeRangeField", diff --git a/docs/pages/x/api/date-pickers/single-input-time-range-field.json b/docs/pages/x/api/date-pickers/single-input-time-range-field.json index 9af15e596741..1729f204f821 100644 --- a/docs/pages/x/api/date-pickers/single-input-time-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-time-range-field.json @@ -105,10 +105,7 @@ } }, "slots": { - "clearIcon": { - "default": "Clear from '@mui/icons-material'", - "type": { "name": "elementType" } - }, + "clearIcon": { "default": "ClearIcon", "type": { "name": "elementType" } }, "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } } }, "name": "SingleInputTimeRangeField", diff --git a/docs/pages/x/api/date-pickers/time-field.json b/docs/pages/x/api/date-pickers/time-field.json index 5394b4124f37..6af2c3e6b302 100644 --- a/docs/pages/x/api/date-pickers/time-field.json +++ b/docs/pages/x/api/date-pickers/time-field.json @@ -105,10 +105,7 @@ } }, "slots": { - "clearIcon": { - "default": "Clear from '@mui/icons-material'", - "type": { "name": "elementType" } - }, + "clearIcon": { "default": "ClearIcon", "type": { "name": "elementType" } }, "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } } }, "name": "TimeField", diff --git a/docs/translations/api-docs/date-pickers/date-field.json b/docs/translations/api-docs/date-pickers/date-field.json index 342fd424d0e1..0c567cd6e384 100644 --- a/docs/translations/api-docs/date-pickers/date-field.json +++ b/docs/translations/api-docs/date-pickers/date-field.json @@ -2,7 +2,7 @@ "componentDescription": "", "propDescriptions": { "autoFocus": "If true, the input element is focused during the first mount.", - "clearable": "If true, the field will be cleared when the user clicks on the clear button.", + "clearable": "If true, a clear button will be shown in the field allowing value clearing.", "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", "components": "Overridable components.", "componentsProps": "The props used for each component slot.", @@ -28,7 +28,7 @@ "minDate": "Minimal selectable date.", "name": "Name attribute of the input element.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.", - "onClear": "Event fired when the clear button is clicked.", + "onClear": "Callback fired when the clear button is clicked.", "onError": "Callback fired when the error associated to the current value changes.

Signature:
function(error: TError, value: TValue) => void
error: The new error.
value: The value associated to the error.", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", "readOnly": "It prevents the user from changing the value of the field (not from interacting with the field).", @@ -50,7 +50,7 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { - "clearIcon": "Icon to display inside the clear button.\nReceives the same props as @mui/icons-material/Clear.", + "clearIcon": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } diff --git a/docs/translations/api-docs/date-pickers/date-time-field.json b/docs/translations/api-docs/date-pickers/date-time-field.json index e4db413a253b..5f181515308b 100644 --- a/docs/translations/api-docs/date-pickers/date-time-field.json +++ b/docs/translations/api-docs/date-pickers/date-time-field.json @@ -3,7 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "autoFocus": "If true, the input element is focused during the first mount.", - "clearable": "If true, the field will be cleared when the user clicks on the clear button.", + "clearable": "If true, a clear button will be shown in the field allowing value clearing.", "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", "components": "Overridable components.", "componentsProps": "The props used for each component slot.", @@ -35,7 +35,7 @@ "minutesStep": "Step over minutes.", "name": "Name attribute of the input element.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.", - "onClear": "Event fired when the clear button is clicked.", + "onClear": "Callback fired when the clear button is clicked.", "onError": "Callback fired when the error associated to the current value changes.

Signature:
function(error: TError, value: TValue) => void
error: The new error.
value: The value associated to the error.", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", "readOnly": "It prevents the user from changing the value of the field (not from interacting with the field).", @@ -59,7 +59,7 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { - "clearIcon": "Icon to display inside the clear button.\nReceives the same props as @mui/icons-material/Clear.", + "clearIcon": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } diff --git a/docs/translations/api-docs/date-pickers/single-input-date-range-field.json b/docs/translations/api-docs/date-pickers/single-input-date-range-field.json index 892861156577..cbe63af398fa 100644 --- a/docs/translations/api-docs/date-pickers/single-input-date-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-date-range-field.json @@ -2,7 +2,7 @@ "componentDescription": "", "propDescriptions": { "autoFocus": "If true, the input element is focused during the first mount.", - "clearable": "If true, the field will be cleared when the user clicks on the clear button.", + "clearable": "If true, a clear button will be shown in the field allowing value clearing.", "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", "components": "Overridable components.", "componentsProps": "The props used for each component slot.", @@ -28,7 +28,7 @@ "minDate": "Minimal selectable date.", "name": "Name attribute of the input element.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.", - "onClear": "Event fired when the clear button is clicked.", + "onClear": "Callback fired when the clear button is clicked.", "onError": "Callback fired when the error associated to the current value changes.

Signature:
function(error: TError, value: TValue) => void
error: The new error.
value: The value associated to the error.", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", "readOnly": "It prevents the user from changing the value of the field (not from interacting with the field).", @@ -48,7 +48,7 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { - "clearIcon": "Icon to display inside the clear button.\nReceives the same props as @mui/icons-material/Clear.", + "clearIcon": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } diff --git a/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json b/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json index 2008ddc77809..2bda781d8c8e 100644 --- a/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json @@ -3,7 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "autoFocus": "If true, the input element is focused during the first mount.", - "clearable": "If true, the field will be cleared when the user clicks on the clear button.", + "clearable": "If true, a clear button will be shown in the field allowing value clearing.", "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", "components": "Overridable components.", "componentsProps": "The props used for each component slot.", @@ -35,7 +35,7 @@ "minutesStep": "Step over minutes.", "name": "Name attribute of the input element.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.", - "onClear": "Event fired when the clear button is clicked.", + "onClear": "Callback fired when the clear button is clicked.", "onError": "Callback fired when the error associated to the current value changes.

Signature:
function(error: TError, value: TValue) => void
error: The new error.
value: The value associated to the error.", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", "readOnly": "It prevents the user from changing the value of the field (not from interacting with the field).", @@ -57,7 +57,7 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { - "clearIcon": "Icon to display inside the clear button.\nReceives the same props as @mui/icons-material/Clear.", + "clearIcon": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } diff --git a/docs/translations/api-docs/date-pickers/single-input-time-range-field.json b/docs/translations/api-docs/date-pickers/single-input-time-range-field.json index 3e8551157e04..40041f6afcdf 100644 --- a/docs/translations/api-docs/date-pickers/single-input-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-time-range-field.json @@ -3,7 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "autoFocus": "If true, the input element is focused during the first mount.", - "clearable": "If true, the field will be cleared when the user clicks on the clear button.", + "clearable": "If true, a clear button will be shown in the field allowing value clearing.", "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", "components": "Overridable components.", "componentsProps": "The props used for each component slot.", @@ -31,7 +31,7 @@ "minutesStep": "Step over minutes.", "name": "Name attribute of the input element.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.", - "onClear": "Event fired when the clear button is clicked.", + "onClear": "Callback fired when the clear button is clicked.", "onError": "Callback fired when the error associated to the current value changes.

Signature:
function(error: TError, value: TValue) => void
error: The new error.
value: The value associated to the error.", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", "readOnly": "It prevents the user from changing the value of the field (not from interacting with the field).", @@ -52,7 +52,7 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { - "clearIcon": "Icon to display inside the clear button.\nReceives the same props as @mui/icons-material/Clear.", + "clearIcon": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } diff --git a/docs/translations/api-docs/date-pickers/time-field.json b/docs/translations/api-docs/date-pickers/time-field.json index 3e8551157e04..40041f6afcdf 100644 --- a/docs/translations/api-docs/date-pickers/time-field.json +++ b/docs/translations/api-docs/date-pickers/time-field.json @@ -3,7 +3,7 @@ "propDescriptions": { "ampm": "12h/24h view for hour selection clock.", "autoFocus": "If true, the input element is focused during the first mount.", - "clearable": "If true, the field will be cleared when the user clicks on the clear button.", + "clearable": "If true, a clear button will be shown in the field allowing value clearing.", "color": "The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.", "components": "Overridable components.", "componentsProps": "The props used for each component slot.", @@ -31,7 +31,7 @@ "minutesStep": "Step over minutes.", "name": "Name attribute of the input element.", "onChange": "Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.", - "onClear": "Event fired when the clear button is clicked.", + "onClear": "Callback fired when the clear button is clicked.", "onError": "Callback fired when the error associated to the current value changes.

Signature:
function(error: TError, value: TValue) => void
error: The new error.
value: The value associated to the error.", "onSelectedSectionsChange": "Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.", "readOnly": "It prevents the user from changing the value of the field (not from interacting with the field).", @@ -52,7 +52,7 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { - "clearIcon": "Icon to display inside the clear button.\nReceives the same props as @mui/icons-material/Clear.", + "clearIcon": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } diff --git a/packages/x-date-pickers/src/internals/hooks/useClearableField.tsx b/packages/x-date-pickers/src/internals/hooks/useClearableField.tsx index 83d9cadd1334..2d6398a3d18b 100644 --- a/packages/x-date-pickers/src/internals/hooks/useClearableField.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useClearableField.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { useSlotProps } from '@mui/base'; import IconButton from '@mui/material/IconButton'; +import InputAdornment from '@mui/material/InputAdornment'; import { SxProps } from '@mui/system'; import { ClearIcon } from '../../icons'; import { FieldSlotsComponents, FieldSlotsComponentsProps } from './useField/useField.types'; @@ -50,9 +51,11 @@ export const useClearableField = < ...ForwardedInputProps, endAdornment: clearable ? ( - - - + + + + + {ForwardedInputProps?.endAdornment} ) : ( From db1fdda7bec0866c1103ae03dd859caaa940e84c Mon Sep 17 00:00:00 2001 From: noraleonte Date: Tue, 25 Jul 2023 17:45:12 +0200 Subject: [PATCH 34/55] remove tabIndex --- .../x-date-pickers/src/internals/hooks/useClearableField.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/x-date-pickers/src/internals/hooks/useClearableField.tsx b/packages/x-date-pickers/src/internals/hooks/useClearableField.tsx index 2d6398a3d18b..2a4f45c1a982 100644 --- a/packages/x-date-pickers/src/internals/hooks/useClearableField.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useClearableField.tsx @@ -52,7 +52,7 @@ export const useClearableField = < endAdornment: clearable ? ( - + From 7b759c01cdf70c7a025820f1d7a56c821ccd85ab Mon Sep 17 00:00:00 2001 From: noraleonte Date: Mon, 7 Aug 2023 11:59:04 +0200 Subject: [PATCH 35/55] small addition --- docs/data/date-pickers/custom-field/PickerWithBrowserField.js | 3 +++ .../data/date-pickers/custom-field/PickerWithBrowserField.tsx | 3 +++ docs/data/date-pickers/custom-field/PickerWithJoyField.js | 3 +++ docs/data/date-pickers/custom-field/PickerWithJoyField.tsx | 3 +++ packages/x-date-pickers/src/internals/demo/DemoContainer.tsx | 4 ++-- 5 files changed, 14 insertions(+), 2 deletions(-) diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js b/docs/data/date-pickers/custom-field/PickerWithBrowserField.js index fd2ba60d6f06..c0c66a87f509 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.js @@ -63,6 +63,7 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => { inputRef: externalInputRef, }); + /* If you don't need a clear button, you can skip the use of this hook */ const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField({ onClear, @@ -193,6 +194,8 @@ function BrowserDateField(props) { props: textFieldProps, inputRef: externalInputRef, }); + + /* If you don't need a clear button, you can skip the use of this hook */ const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField({ onClear, diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx index 94e552e8fc96..2aa0472b7ae4 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx @@ -125,6 +125,7 @@ const BrowserSingleInputDateRangeField = React.forwardRef( inputRef: externalInputRef, }); + /* If you don't need a clear button, you can skip the use of this hook */ const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField< {}, @@ -291,6 +292,8 @@ function BrowserDateField(props: BrowserDateFieldProps) { props: textFieldProps, inputRef: externalInputRef, }); + + /* If you don't need a clear button, you can skip the use of this hook */ const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField< {}, diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.js b/docs/data/date-pickers/custom-field/PickerWithJoyField.js index 74775c5d96d3..cf579bcfb0bf 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.js +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.js @@ -99,6 +99,7 @@ const JoySingleInputDateRangeField = React.forwardRef((props, ref) => { inputRef: externalInputRef, }); + /* If you don't need a clear button, you can skip the use of this hook */ const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField({ onClear, @@ -254,6 +255,8 @@ function JoyDateField(props) { props: textFieldProps, inputRef: externalInputRef, }); + + /* If you don't need a clear button, you can skip the use of this hook */ const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField({ onClear, diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx index 6a300b83ea72..f482d3009cd7 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx @@ -153,6 +153,7 @@ const JoySingleInputDateRangeField = React.forwardRef( inputRef: externalInputRef, }); + /* If you don't need a clear button, you can skip the use of this hook */ const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField< {}, @@ -344,6 +345,8 @@ function JoyDateField(props: JoyDateFieldProps) { props: textFieldProps, inputRef: externalInputRef, }); + + /* If you don't need a clear button, you can skip the use of this hook */ const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } = useClearableField< {}, diff --git a/packages/x-date-pickers/src/internals/demo/DemoContainer.tsx b/packages/x-date-pickers/src/internals/demo/DemoContainer.tsx index 798ef3520c63..237b9d8d47c9 100644 --- a/packages/x-date-pickers/src/internals/demo/DemoContainer.tsx +++ b/packages/x-date-pickers/src/internals/demo/DemoContainer.tsx @@ -152,9 +152,9 @@ export function DemoContainer(props: DemoGridProps) { }; } } else if (childrenSupportedSections.has('date-time')) { - sx = { ...sx, [`& > .${textFieldClasses.root}`]: { minWidth: 270 } }; + sx = { ...sx, [`& > .${textFieldClasses.root}`]: { minWidth: 290 } }; } else { - sx = { ...sx, [`& > .${textFieldClasses.root}`]: { minWidth: 200 } }; + sx = { ...sx, [`& > .${textFieldClasses.root}`]: { minWidth: 290 } }; } return ( From 792cdd2b7895e7f155f0bff13be1bc4a42a832a3 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Thu, 10 Aug 2023 14:51:33 +0200 Subject: [PATCH 36/55] clear inputAdornment fix --- .../src/internals/hooks/useClearableField.tsx | 21 ++++++++++------- .../useDesktopPicker/useDesktopPicker.tsx | 23 +++++++++++++++---- .../hooks/useField/useField.types.ts | 7 ++++++ 3 files changed, 39 insertions(+), 12 deletions(-) diff --git a/packages/x-date-pickers/src/internals/hooks/useClearableField.tsx b/packages/x-date-pickers/src/internals/hooks/useClearableField.tsx index 2a4f45c1a982..ababfb816c79 100644 --- a/packages/x-date-pickers/src/internals/hooks/useClearableField.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useClearableField.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { useSlotProps } from '@mui/base'; import IconButton from '@mui/material/IconButton'; -import InputAdornment from '@mui/material/InputAdornment'; +import MuiInputAdornment from '@mui/material/InputAdornment'; import { SxProps } from '@mui/system'; import { ClearIcon } from '../../icons'; import { FieldSlotsComponents, FieldSlotsComponentsProps } from './useField/useField.types'; @@ -47,17 +47,22 @@ export const useClearableField = < ownerState: {}, }); + const InputAdornment = slots?.inputAdornment ?? MuiInputAdornment; + const inputAdornmentProps = useSlotProps({ + elementType: MuiInputAdornment, + externalSlotProps: slotProps?.inputAdornment, + ownerState: {}, + }); + const InputProps = { ...ForwardedInputProps, endAdornment: clearable ? ( - - - - - - + + + + {ForwardedInputProps?.endAdornment} - + ) : ( ForwardedInputProps?.endAdornment ), 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 660dc91a657e..9569fd971dd0 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx @@ -120,10 +120,9 @@ export const useDesktopPicker = < }); // TODO: Move to `useSlotProps` when https://github.com/mui/material-ui/pull/35088 will be merged - if (hasUIView) { - fieldProps.InputProps = { - ...fieldProps.InputProps, - ref: containerRef, + let inputAdronmnent = {}; + if (inputAdornmentProps.position !== 'end') { + inputAdronmnent = { [`${inputAdornmentProps.position}Adornment`]: ( @@ -132,6 +131,21 @@ export const useDesktopPicker = < ), }; + } else { + inputAdronmnent = { + [`${inputAdornmentProps.position}Adornment`]: ( + + + + ), + }; + } + if (hasUIView) { + fieldProps.InputProps = { + ...fieldProps.InputProps, + ref: containerRef, + ...inputAdronmnent, + }; } const slotsForField: BaseSingleInputFieldProps< @@ -141,6 +155,7 @@ export const useDesktopPicker = < unknown >['slots'] = { textField: slots.textField, + inputAdornment: slots.inputAdornment, ...fieldProps.slots, }; diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts index 843f1e2a6ce5..5faec9168561 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts @@ -1,6 +1,7 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/base/utils'; import ClearIcon from '@mui/icons-material/Clear'; +import InputAdornment from '@mui/material/InputAdornment'; import { FieldSectionType, FieldSection, @@ -391,8 +392,14 @@ export interface FieldSlotsComponents { * @default ClearIcon */ ClearIcon?: React.ElementType; + /** + * Icon to display inside the clear button. + * @default InputAdornment + */ + InputAdornment?: React.ElementType; } export interface FieldSlotsComponentsProps { clearIcon?: SlotComponentProps; + inputAdornment?: SlotComponentProps; } From b2674a3ed7b48d14e50a047a354642ef169c252d Mon Sep 17 00:00:00 2001 From: noraleonte Date: Thu, 10 Aug 2023 15:21:59 +0200 Subject: [PATCH 37/55] fix demo bug --- .../data/date-pickers/custom-field/PickerWithBrowserField.tsx | 4 ++-- docs/data/date-pickers/custom-field/PickerWithJoyField.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx index 2aa0472b7ae4..0038f1b32d05 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx @@ -173,14 +173,14 @@ function BrowserSingleInputDateRangePicker(props: DateRangePickerProps) { return ( ); } diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx index f482d3009cd7..7b823fa82336 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx @@ -200,14 +200,14 @@ function JoySingleInputDateRangePicker(props: DateRangePickerProps) { return ( ); } From 74b234757703853b1dc7b1cd61ceced995b91e29 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Thu, 10 Aug 2023 15:33:42 +0200 Subject: [PATCH 38/55] ts format, proptypes and api build --- .../date-pickers/custom-field/PickerWithBrowserField.js | 4 ++-- docs/data/date-pickers/custom-field/PickerWithJoyField.js | 4 ++-- docs/pages/x/api/date-pickers/date-field.json | 6 ++++++ docs/pages/x/api/date-pickers/date-time-field.json | 6 ++++++ .../x/api/date-pickers/single-input-date-range-field.json | 6 ++++++ .../date-pickers/single-input-date-time-range-field.json | 6 ++++++ .../x/api/date-pickers/single-input-time-range-field.json | 6 ++++++ docs/pages/x/api/date-pickers/time-field.json | 6 ++++++ docs/translations/api-docs/date-pickers/date-field.json | 1 + .../translations/api-docs/date-pickers/date-time-field.json | 1 + .../date-pickers/single-input-date-range-field.json | 1 + .../date-pickers/single-input-date-time-range-field.json | 1 + .../date-pickers/single-input-time-range-field.json | 1 + docs/translations/api-docs/date-pickers/time-field.json | 1 + 14 files changed, 46 insertions(+), 4 deletions(-) diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js b/docs/data/date-pickers/custom-field/PickerWithBrowserField.js index c0c66a87f509..c5974b334d11 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.js @@ -105,14 +105,14 @@ function BrowserSingleInputDateRangePicker(props) { return ( ); } diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.js b/docs/data/date-pickers/custom-field/PickerWithJoyField.js index cf579bcfb0bf..fa533c9ec3a3 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.js +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.js @@ -140,14 +140,14 @@ function JoySingleInputDateRangePicker(props) { return ( ); } diff --git a/docs/pages/x/api/date-pickers/date-field.json b/docs/pages/x/api/date-pickers/date-field.json index cd924f77f1fb..b6dc9ae65843 100644 --- a/docs/pages/x/api/date-pickers/date-field.json +++ b/docs/pages/x/api/date-pickers/date-field.json @@ -145,6 +145,12 @@ "description": "Icon to display inside the clear button.", "default": "ClearIcon" }, + { + "class": null, + "name": "inputAdornment", + "description": "Icon to display inside the clear button.", + "default": "InputAdornment" + }, { "class": null, "name": "textField", diff --git a/docs/pages/x/api/date-pickers/date-time-field.json b/docs/pages/x/api/date-pickers/date-time-field.json index 28f6ef1c5ac7..155c0e7f1498 100644 --- a/docs/pages/x/api/date-pickers/date-time-field.json +++ b/docs/pages/x/api/date-pickers/date-time-field.json @@ -170,6 +170,12 @@ "description": "Icon to display inside the clear button.", "default": "ClearIcon" }, + { + "class": null, + "name": "inputAdornment", + "description": "Icon to display inside the clear button.", + "default": "InputAdornment" + }, { "class": null, "name": "textField", diff --git a/docs/pages/x/api/date-pickers/single-input-date-range-field.json b/docs/pages/x/api/date-pickers/single-input-date-range-field.json index d687133baf60..6a5046dd6201 100644 --- a/docs/pages/x/api/date-pickers/single-input-date-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-date-range-field.json @@ -129,6 +129,12 @@ "description": "Icon to display inside the clear button.", "default": "ClearIcon" }, + { + "class": null, + "name": "inputAdornment", + "description": "Icon to display inside the clear button.", + "default": "InputAdornment" + }, { "class": null, "name": "textField", diff --git a/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json b/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json index 5f064b8dfea2..9cca6e1fb61c 100644 --- a/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json @@ -154,6 +154,12 @@ "description": "Icon to display inside the clear button.", "default": "ClearIcon" }, + { + "class": null, + "name": "inputAdornment", + "description": "Icon to display inside the clear button.", + "default": "InputAdornment" + }, { "class": null, "name": "textField", diff --git a/docs/pages/x/api/date-pickers/single-input-time-range-field.json b/docs/pages/x/api/date-pickers/single-input-time-range-field.json index 9afde28cbc0b..9e7edecb422f 100644 --- a/docs/pages/x/api/date-pickers/single-input-time-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-time-range-field.json @@ -142,6 +142,12 @@ "description": "Icon to display inside the clear button.", "default": "ClearIcon" }, + { + "class": null, + "name": "inputAdornment", + "description": "Icon to display inside the clear button.", + "default": "InputAdornment" + }, { "class": null, "name": "textField", diff --git a/docs/pages/x/api/date-pickers/time-field.json b/docs/pages/x/api/date-pickers/time-field.json index 4d74262f1ac6..0b3f12a04489 100644 --- a/docs/pages/x/api/date-pickers/time-field.json +++ b/docs/pages/x/api/date-pickers/time-field.json @@ -142,6 +142,12 @@ "description": "Icon to display inside the clear button.", "default": "ClearIcon" }, + { + "class": null, + "name": "inputAdornment", + "description": "Icon to display inside the clear button.", + "default": "InputAdornment" + }, { "class": null, "name": "textField", diff --git a/docs/translations/api-docs/date-pickers/date-field.json b/docs/translations/api-docs/date-pickers/date-field.json index 3df5a7450e10..87f7de173a64 100644 --- a/docs/translations/api-docs/date-pickers/date-field.json +++ b/docs/translations/api-docs/date-pickers/date-field.json @@ -242,6 +242,7 @@ "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { "clearIcon": "Icon to display inside the clear button.", + "inputAdornment": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } diff --git a/docs/translations/api-docs/date-pickers/date-time-field.json b/docs/translations/api-docs/date-pickers/date-time-field.json index e1029da0f9de..103286cb7a98 100644 --- a/docs/translations/api-docs/date-pickers/date-time-field.json +++ b/docs/translations/api-docs/date-pickers/date-time-field.json @@ -295,6 +295,7 @@ "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { "clearIcon": "Icon to display inside the clear button.", + "inputAdornment": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } diff --git a/docs/translations/api-docs/date-pickers/single-input-date-range-field.json b/docs/translations/api-docs/date-pickers/single-input-date-range-field.json index 689bd96d9db9..00700ced66ec 100644 --- a/docs/translations/api-docs/date-pickers/single-input-date-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-date-range-field.json @@ -227,6 +227,7 @@ "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { "clearIcon": "Icon to display inside the clear button.", + "inputAdornment": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } diff --git a/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json b/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json index 444d9fb59216..c99cdc34e7b3 100644 --- a/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json @@ -280,6 +280,7 @@ "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { "clearIcon": "Icon to display inside the clear button.", + "inputAdornment": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } diff --git a/docs/translations/api-docs/date-pickers/single-input-time-range-field.json b/docs/translations/api-docs/date-pickers/single-input-time-range-field.json index 912f214f70ef..d42c2ad84419 100644 --- a/docs/translations/api-docs/date-pickers/single-input-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-time-range-field.json @@ -251,6 +251,7 @@ "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { "clearIcon": "Icon to display inside the clear button.", + "inputAdornment": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } diff --git a/docs/translations/api-docs/date-pickers/time-field.json b/docs/translations/api-docs/date-pickers/time-field.json index 912f214f70ef..d42c2ad84419 100644 --- a/docs/translations/api-docs/date-pickers/time-field.json +++ b/docs/translations/api-docs/date-pickers/time-field.json @@ -251,6 +251,7 @@ "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { "clearIcon": "Icon to display inside the clear button.", + "inputAdornment": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } From 3625ba27886f0738c8c24c8c74c8ae56a3c935e4 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Thu, 10 Aug 2023 16:23:19 +0200 Subject: [PATCH 39/55] fix --- .../src/internals/hooks/useField/useField.ts | 15 +++------------ .../internals/hooks/useField/useField.types.ts | 2 +- 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts index 9a4f9b0409d3..3fd654d99091 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -145,18 +145,9 @@ export const useField = < }); }); - const handleInputBlur = useEventCallback((event: React.FocusEvent, ...args) => { - const { relatedTarget } = event; - - const shouldBlur = - !relatedTarget && - relatedTarget !== inputRef.current && - !inputRef.current.contains(relatedTarget); - - if (shouldBlur) { - onBlur?.(event, ...(args as [])); - setSelectedSections(null); - } + const handleInputBlur = useEventCallback((...args) => { + onBlur?.(...(args as [])); + setSelectedSections(null); }); const handleInputPaste = useEventCallback((event: React.ClipboardEvent) => { diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts index 5faec9168561..b30cfa3e4d27 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts @@ -155,7 +155,7 @@ export interface UseFieldForwardedProps { onPaste?: React.ClipboardEventHandler; onClick?: () => void; onFocus?: () => void; - onBlur?: React.FocusEventHandler; + onBlur?: () => void; error?: boolean; onClear?: React.MouseEventHandler; clearable?: boolean; From f6ff9513225c27fb2afe83623310ffcfbfa57c58 Mon Sep 17 00:00:00 2001 From: Nora <72460825+noraleonte@users.noreply.github.com> Date: Mon, 28 Aug 2023 15:41:46 +0300 Subject: [PATCH 40/55] Apply suggestions from code review Lukas' feedback Co-authored-by: Lukas Signed-off-by: Nora <72460825+noraleonte@users.noreply.github.com> --- docs/data/date-pickers/custom-field/custom-field.md | 2 +- docs/data/date-pickers/date-picker/ClearableProp.tsx | 2 +- docs/data/date-pickers/fields/fields.md | 2 +- .../hooks/useEnrichedRangePickerFieldProps.ts | 2 +- .../internals/hooks/useMultiInputRangeField/shared.ts | 8 ++++++-- .../useMultiInputDateRangeField.ts | 10 ++-------- .../useMultiInputDateTimeRangeField.ts | 10 ++-------- .../useMultiInputTimeRangeField.ts | 10 ++-------- .../src/internals/demo/DemoContainer.tsx | 4 ++-- .../src/internals/hooks/useClearableField.tsx | 11 ++++++----- .../hooks/useDesktopPicker/useDesktopPicker.tsx | 2 +- .../hooks/useDesktopPicker/useDesktopPicker.types.ts | 2 +- .../src/internals/hooks/useField/useField.ts | 2 +- .../src/internals/hooks/useField/useField.types.ts | 2 +- .../hooks/useMobilePicker/useMobilePicker.types.ts | 2 +- 15 files changed, 29 insertions(+), 42 deletions(-) diff --git a/docs/data/date-pickers/custom-field/custom-field.md b/docs/data/date-pickers/custom-field/custom-field.md index bae8796e61ab..33f42063d919 100644 --- a/docs/data/date-pickers/custom-field/custom-field.md +++ b/docs/data/date-pickers/custom-field/custom-field.md @@ -70,7 +70,7 @@ You can also use any other input: {{"demo": "PickerWithBrowserField.js", "defaultCodeOpen": false}} :::warning -You will need to use a _Material UI_ component that supports the `sx` prop as a wrapper to your input, in order to be able to benefit from the **hover** and **focus** behavior of the clear button. You will have access to the `clearable` and `onClear` props using native HTML elements, but the behavior on **focus** and **hover** depends on styles applied via the `sx` prop. +You will need to use a component that supports the `sx` prop as a wrapper for your input, in order to be able to benefit from the **hover** and **focus** behavior of the clear button. You will have access to the `clearable` and `onClear` props using native HTML elements, but the on **focus** and **hover** behavior depends on styles applied via the `sx` prop. ::: ### Using an `Autocomplete` diff --git a/docs/data/date-pickers/date-picker/ClearableProp.tsx b/docs/data/date-pickers/date-picker/ClearableProp.tsx index 87b9257e8da4..ed7120de1371 100644 --- a/docs/data/date-pickers/date-picker/ClearableProp.tsx +++ b/docs/data/date-pickers/date-picker/ClearableProp.tsx @@ -33,7 +33,7 @@ export default function ClearableProp() { > setCleared(true) }, }} diff --git a/docs/data/date-pickers/fields/fields.md b/docs/data/date-pickers/fields/fields.md index a3e6b095726f..857b50d7e0b3 100644 --- a/docs/data/date-pickers/fields/fields.md +++ b/docs/data/date-pickers/fields/fields.md @@ -77,7 +77,7 @@ Please only use it if needed. ### Clearable behavior -You can use the `clearable` prop to enable the clearing behavior on a field. Aditionally, you can also customize the event handler using the `onClear` callback prop. +You can use the `clearable` prop to enable the clearing behavior on a field. You can also add an event handler using the `onClear` callback prop. :::info For **multi-input** range fields the clearable behavior is not supported yet. diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts index 9d53ce817309..6f7f41f7a555 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts @@ -57,7 +57,7 @@ export interface RangePickerFieldSlotsComponentsProps { >, {}, UsePickerProps, any, RangeFieldSection, any, any, any> - > & {}; + >; fieldRoot?: SlotComponentProps>; fieldSeparator?: SlotComponentProps>; diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/shared.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/shared.ts index 6fd5d9546714..762a526e5807 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/shared.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/shared.ts @@ -1,5 +1,9 @@ /* TODO: remove this when a clearable behavior for multiple input range fields is implemented */ export const excludeProps = (props: TProps, excludedProps: string[]): TProps => { - const filteredProps = Object.entries(props).filter(([key]) => !excludedProps.includes(key)); - return Object.fromEntries(filteredProps) as TProps; + return Object.keys(props).reduce((acc, key) => { + if (!excludedProps.includes(key)) { + acc[key] = props[key]; + } + return acc; + }, {} as TProps); }; diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts index b6fd6630241a..1f9dc7c1e521 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts @@ -154,13 +154,7 @@ export const useMultiInputDateRangeField = >(startDateResponse, [ - 'clearable', - 'onClear', - ]), - endDate: excludeProps>(endDateResponse, [ - 'clearable', - 'onClear', - ]), + startDate: excludeProps(startDateResponse, ['clearable', 'onClear']), + endDate: excludeProps(endDateResponse, ['clearable', 'onClear']), }; }; diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts index e2f6cbc370f4..148ffed7e97d 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.ts @@ -175,13 +175,7 @@ export const useMultiInputDateTimeRangeField = >(startDateResponse, [ - 'clearable', - 'onClear', - ]), - endDate: excludeProps>(endDateResponse, [ - 'clearable', - 'onClear', - ]), + startDate: excludeProps(startDateResponse, ['clearable', 'onClear']), + endDate: excludeProps(endDateResponse, ['clearable', 'onClear']), }; }; diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts index 688e28260021..cab1dae97d7e 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.ts @@ -165,13 +165,7 @@ export const useMultiInputTimeRangeField = >(startDateResponse, [ - 'clearable', - 'onClear', - ]), - endDate: excludeProps>(endDateResponse, [ - 'clearable', - 'onClear', - ]), + startDate: excludeProps(startDateResponse, ['clearable', 'onClear']), + endDate: excludeProps(endDateResponse, ['clearable', 'onClear']), }; }; diff --git a/packages/x-date-pickers/src/internals/demo/DemoContainer.tsx b/packages/x-date-pickers/src/internals/demo/DemoContainer.tsx index 237b9d8d47c9..fceb5bc0052b 100644 --- a/packages/x-date-pickers/src/internals/demo/DemoContainer.tsx +++ b/packages/x-date-pickers/src/internals/demo/DemoContainer.tsx @@ -152,9 +152,9 @@ export function DemoContainer(props: DemoGridProps) { }; } } else if (childrenSupportedSections.has('date-time')) { - sx = { ...sx, [`& > .${textFieldClasses.root}`]: { minWidth: 290 } }; + sx = { ...sx, [`& > .${textFieldClasses.root}`]: { minWidth: 260 } }; } else { - sx = { ...sx, [`& > .${textFieldClasses.root}`]: { minWidth: 290 } }; + sx = { ...sx, [`& > .${textFieldClasses.root}`]: { minWidth: 260 } }; } return ( diff --git a/packages/x-date-pickers/src/internals/hooks/useClearableField.tsx b/packages/x-date-pickers/src/internals/hooks/useClearableField.tsx index ababfb816c79..5594343418f8 100644 --- a/packages/x-date-pickers/src/internals/hooks/useClearableField.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useClearableField.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { useSlotProps } from '@mui/base'; +import { useSlotProps } from '@mui/base/utils'; import IconButton from '@mui/material/IconButton'; import MuiInputAdornment from '@mui/material/InputAdornment'; import { SxProps } from '@mui/system'; @@ -8,7 +8,7 @@ import { ClearIcon } from '../../icons'; import { FieldSlotsComponents, FieldSlotsComponentsProps } from './useField/useField.types'; import { FieldsTextFieldProps } from '../models'; -type UseClearFieldProps< +type UseClearableFieldProps< TFieldProps extends FieldsTextFieldProps, TInputProps extends { endAdornment?: React.ReactNode } | undefined, TFieldSlots extends FieldSlotsComponents, @@ -68,7 +68,7 @@ export const useClearableField = < ), }; - const fieldProps = { + const fieldProps: TFieldProps = { ...forwardedFieldProps, sx: { '& .clearButton': { @@ -84,8 +84,9 @@ export const useClearableField = < }, }, }, - } as SxProps, - } as TFieldProps; + ...forwardedFieldProps.sx, + }, + }; return { InputProps, fieldProps }; }; 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 9569fd971dd0..da3e0b322178 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx @@ -120,7 +120,7 @@ export const useDesktopPicker = < }); // TODO: Move to `useSlotProps` when https://github.com/mui/material-ui/pull/35088 will be merged - let inputAdronmnent = {}; + let inputAdornmnent = {}; if (inputAdornmentProps.position !== 'end') { inputAdronmnent = { [`${inputAdornmentProps.position}Adornment`]: ( diff --git a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts index 36adc38f9b1a..c179b8d96771 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts @@ -71,7 +71,7 @@ export interface ExportedUseDesktopPickerSlotsComponentsProps< React.ElementType>, {}, UsePickerProps - > & {}; + >; textField?: SlotComponentProps>; inputAdornment?: Partial; openPickerButton?: SlotComponentProps< diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts index 3fd654d99091..55b6405b497f 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -505,7 +505,7 @@ export const useField = < })); const handleClearValue = useEventCallback((event: React.MouseEvent, ...args) => { - // the click event on the endAdornmnet would propagate to the input and trigger the `handleInputClick` handler. + // the click event on the endAdornment would propagate to the input and trigger the `handleInputClick` handler. event.stopPropagation(); event.preventDefault(); onClear?.(event, ...(args as [])); diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts index b30cfa3e4d27..8bd439181b3c 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts @@ -393,7 +393,7 @@ export interface FieldSlotsComponents { */ ClearIcon?: React.ElementType; /** - * Icon to display inside the clear button. + * Component to display on the end input adornment housing the clear button. * @default InputAdornment */ InputAdornment?: React.ElementType; diff --git a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts index 498a9ce1d335..0e902df39b71 100644 --- a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts @@ -45,7 +45,7 @@ export interface ExportedUseMobilePickerSlotsComponentsProps< React.ElementType>, {}, UsePickerProps - > & {}; + >; textField?: SlotComponentProps>; } From 9635b26d561b82c08b8b228fdc604913e78c5744 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Mon, 28 Aug 2023 15:42:28 +0300 Subject: [PATCH 41/55] Lukas' feedback 2 --- .../custom-field/PickerWithBrowserField.tsx | 4 +++- .../custom-field/PickerWithJoyField.tsx | 4 +++- .../hooks/useEnrichedRangePickerFieldProps.ts | 2 +- .../hooks/useMultiInputRangeField/shared.ts | 8 ++++++-- .../useMultiInputDateRangeField.ts | 10 ++-------- packages/x-date-pickers/src/DateField/DateField.tsx | 13 +++---------- packages/x-date-pickers/src/DateField/index.ts | 2 -- .../src/internals/hooks/useField/useField.types.ts | 2 +- .../hooks/useMobilePicker/useMobilePicker.types.ts | 1 + 9 files changed, 20 insertions(+), 26 deletions(-) diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx index 0038f1b32d05..ce6a864e4b0b 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx @@ -21,9 +21,11 @@ import { DatePicker, DatePickerProps } from '@mui/x-date-pickers/DatePicker'; import { unstable_useDateField as useDateField, UseDateFieldProps, +} from '@mui/x-date-pickers/DateField'; +import { DateFieldSlotsComponent, DateFieldSlotsComponentsProps, -} from '@mui/x-date-pickers/DateField'; +} from '@mui/x-date-pickers/DateField/DateField.types'; import { useClearableField } from '@mui/x-date-pickers/internals'; import { BaseMultiInputFieldProps, diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx index 7b823fa82336..9c0003f1b939 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx @@ -36,9 +36,11 @@ import { DatePicker, DatePickerProps } from '@mui/x-date-pickers/DatePicker'; import { unstable_useDateField as useDateField, UseDateFieldProps, +} from '@mui/x-date-pickers/DateField'; +import { DateFieldSlotsComponent, DateFieldSlotsComponentsProps, -} from '@mui/x-date-pickers/DateField'; +} from '@mui/x-date-pickers/DateField/DateField.types'; import { useClearableField } from '@mui/x-date-pickers/internals'; import { BaseMultiInputFieldProps, diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts index 9d53ce817309..6f7f41f7a555 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts @@ -57,7 +57,7 @@ export interface RangePickerFieldSlotsComponentsProps { >, {}, UsePickerProps, any, RangeFieldSection, any, any, any> - > & {}; + >; fieldRoot?: SlotComponentProps>; fieldSeparator?: SlotComponentProps>; diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/shared.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/shared.ts index 6fd5d9546714..762a526e5807 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/shared.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/shared.ts @@ -1,5 +1,9 @@ /* TODO: remove this when a clearable behavior for multiple input range fields is implemented */ export const excludeProps = (props: TProps, excludedProps: string[]): TProps => { - const filteredProps = Object.entries(props).filter(([key]) => !excludedProps.includes(key)); - return Object.fromEntries(filteredProps) as TProps; + return Object.keys(props).reduce((acc, key) => { + if (!excludedProps.includes(key)) { + acc[key] = props[key]; + } + return acc; + }, {} as TProps); }; diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts index b6fd6630241a..1f9dc7c1e521 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts @@ -154,13 +154,7 @@ export const useMultiInputDateRangeField = >(startDateResponse, [ - 'clearable', - 'onClear', - ]), - endDate: excludeProps>(endDateResponse, [ - 'clearable', - 'onClear', - ]), + startDate: excludeProps(startDateResponse, ['clearable', 'onClear']), + endDate: excludeProps(endDateResponse, ['clearable', 'onClear']), }; }; diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx index 76ade87f6f5e..1cd9a99e5010 100644 --- a/packages/x-date-pickers/src/DateField/DateField.tsx +++ b/packages/x-date-pickers/src/DateField/DateField.tsx @@ -24,15 +24,8 @@ const DateField = React.forwardRef(function DateField( name: 'MuiDateField', }); - const { - components, - componentsProps, - slots, - slotProps, - InputProps: DateFieldInputProps, - inputProps, - ...other - } = themeProps; + const { components, componentsProps, slots, slotProps, InputProps, inputProps, ...other } = + themeProps; const ownerState = themeProps; @@ -47,7 +40,7 @@ const DateField = React.forwardRef(function DateField( // TODO: Remove when mui/material-ui#35088 will be merged textFieldProps.inputProps = { ...inputProps, ...textFieldProps.inputProps }; - textFieldProps.InputProps = { ...DateFieldInputProps, ...textFieldProps.InputProps }; + textFieldProps.InputProps = { ...InputProps, ...textFieldProps.InputProps }; const { ref: inputRef, diff --git a/packages/x-date-pickers/src/DateField/index.ts b/packages/x-date-pickers/src/DateField/index.ts index 81cc47ae9545..6fd6dcef2732 100644 --- a/packages/x-date-pickers/src/DateField/index.ts +++ b/packages/x-date-pickers/src/DateField/index.ts @@ -5,6 +5,4 @@ export type { UseDateFieldComponentProps, DateFieldProps, UseDateFieldDefaultizedProps, - DateFieldSlotsComponent, - DateFieldSlotsComponentsProps, } from './DateField.types'; diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts index b30cfa3e4d27..448311caea03 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/base/utils'; -import ClearIcon from '@mui/icons-material/Clear'; import InputAdornment from '@mui/material/InputAdornment'; +import { ClearIcon } from '../../../icons'; import { FieldSectionType, FieldSection, diff --git a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts index 498a9ce1d335..cff74f484773 100644 --- a/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useMobilePicker/useMobilePicker.types.ts @@ -36,6 +36,7 @@ export interface UseMobilePickerSlotsComponent; } + export interface ExportedUseMobilePickerSlotsComponentsProps< TDate, TView extends DateOrTimeViewWithMeridiem, From 137d325a0c8b32dd8236f2c9d43f729facb12203 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Mon, 28 Aug 2023 17:24:49 +0300 Subject: [PATCH 42/55] revert inputAdornment fix and move useClearableField to new hooks folder --- .../custom-field/PickerWithBrowserField.js | 3 +- .../custom-field/PickerWithBrowserField.tsx | 2 +- .../custom-field/PickerWithJoyField.js | 3 +- .../custom-field/PickerWithJoyField.tsx | 2 +- .../date-pickers/date-picker/ClearableProp.js | 2 +- docs/pages/x/api/charts/charts-axis.json | 19 +++++++++- docs/pages/x/api/date-pickers/date-field.json | 6 ---- .../x/api/date-pickers/date-time-field.json | 6 ---- .../single-input-date-range-field.json | 6 ---- .../single-input-date-time-range-field.json | 6 ---- .../single-input-time-range-field.json | 6 ---- docs/pages/x/api/date-pickers/time-field.json | 6 ---- .../api-docs/charts/charts-axis.json | 21 ++++++++++- .../api-docs/date-pickers/date-field.json | 1 - .../date-pickers/date-time-field.json | 1 - .../single-input-date-range-field.json | 1 - .../single-input-date-time-range-field.json | 1 - .../single-input-time-range-field.json | 1 - .../api-docs/date-pickers/time-field.json | 1 - .../SingleInputDateRangeField.tsx | 2 +- .../SingleInputDateTimeRangeField.tsx | 2 +- .../SingleInputTimeRangeField.tsx | 2 +- .../src/DateField/DateField.tsx | 2 +- .../src/DateTimeField/DateTimeField.tsx | 2 +- .../src/TimeField/TimeField.tsx | 2 +- packages/x-date-pickers/src/hooks/index.tsx | 1 + .../hooks/useClearableField.tsx | 36 +++++++++---------- packages/x-date-pickers/src/index.ts | 2 ++ .../useDesktopPicker/useDesktopPicker.tsx | 23 +++--------- .../src/internals/hooks/useField/useField.ts | 2 +- .../hooks/useField/useField.types.ts | 7 ---- .../x-date-pickers/src/internals/index.ts | 1 - scripts/x-date-pickers-pro.exports.json | 3 +- scripts/x-date-pickers.exports.json | 3 +- 34 files changed, 79 insertions(+), 105 deletions(-) create mode 100644 packages/x-date-pickers/src/hooks/index.tsx rename packages/x-date-pickers/src/{internals => }/hooks/useClearableField.tsx (71%) diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js b/docs/data/date-pickers/custom-field/PickerWithBrowserField.js index c5974b334d11..9c33a8deee1d 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.js @@ -13,7 +13,8 @@ import { unstable_useSingleInputDateRangeField as useSingleInputDateRangeField } import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField'; -import { useClearableField } from '@mui/x-date-pickers/internals'; + +import { useClearableField } from '@mui/x-date-pickers/hooks'; const BrowserField = React.forwardRef((props, inputRef) => { const { diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx index ce6a864e4b0b..c62d98a86468 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx @@ -26,7 +26,7 @@ import { DateFieldSlotsComponent, DateFieldSlotsComponentsProps, } from '@mui/x-date-pickers/DateField/DateField.types'; -import { useClearableField } from '@mui/x-date-pickers/internals'; +import { useClearableField } from '@mui/x-date-pickers/hooks'; import { BaseMultiInputFieldProps, DateRange, diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.js b/docs/data/date-pickers/custom-field/PickerWithJoyField.js index fa533c9ec3a3..50da63c26d46 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.js +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.js @@ -28,7 +28,8 @@ import { unstable_useSingleInputDateRangeField as useSingleInputDateRangeField } import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField'; -import { useClearableField } from '@mui/x-date-pickers/internals'; + +import { useClearableField } from '@mui/x-date-pickers/hooks'; const joyTheme = extendJoyTheme(); diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx index 9c0003f1b939..80957c936307 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx @@ -41,7 +41,7 @@ import { DateFieldSlotsComponent, DateFieldSlotsComponentsProps, } from '@mui/x-date-pickers/DateField/DateField.types'; -import { useClearableField } from '@mui/x-date-pickers/internals'; +import { useClearableField } from '@mui/x-date-pickers/hooks'; import { BaseMultiInputFieldProps, DateRange, diff --git a/docs/data/date-pickers/date-picker/ClearableProp.js b/docs/data/date-pickers/date-picker/ClearableProp.js index 7a23a2b193e2..9e6b756b94cb 100644 --- a/docs/data/date-pickers/date-picker/ClearableProp.js +++ b/docs/data/date-pickers/date-picker/ClearableProp.js @@ -33,7 +33,7 @@ export default function ClearableProp() { > setCleared(true) }, }} diff --git a/docs/pages/x/api/charts/charts-axis.json b/docs/pages/x/api/charts/charts-axis.json index c6fde3feea0c..20fc314af849 100644 --- a/docs/pages/x/api/charts/charts-axis.json +++ b/docs/pages/x/api/charts/charts-axis.json @@ -37,7 +37,24 @@ "import { ChartsAxis } from '@mui/x-charts/ChartsAxis';", "import { ChartsAxis } from '@mui/x-charts';" ], - "styles": { "classes": [], "globalClasses": {}, "name": "MuiChartsAxis" }, + "styles": { + "classes": [ + "root", + "line", + "tickContainer", + "tick", + "tickLabel", + "label", + "directionX", + "directionY", + "top", + "bottom", + "left", + "right" + ], + "globalClasses": {}, + "name": "MuiChartsAxis" + }, "filename": "/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx", "demos": "
    ", "packages": [{ "packageName": "@mui/x-charts", "componentName": "ChartsAxis" }] diff --git a/docs/pages/x/api/date-pickers/date-field.json b/docs/pages/x/api/date-pickers/date-field.json index b6dc9ae65843..cd924f77f1fb 100644 --- a/docs/pages/x/api/date-pickers/date-field.json +++ b/docs/pages/x/api/date-pickers/date-field.json @@ -145,12 +145,6 @@ "description": "Icon to display inside the clear button.", "default": "ClearIcon" }, - { - "class": null, - "name": "inputAdornment", - "description": "Icon to display inside the clear button.", - "default": "InputAdornment" - }, { "class": null, "name": "textField", diff --git a/docs/pages/x/api/date-pickers/date-time-field.json b/docs/pages/x/api/date-pickers/date-time-field.json index 155c0e7f1498..28f6ef1c5ac7 100644 --- a/docs/pages/x/api/date-pickers/date-time-field.json +++ b/docs/pages/x/api/date-pickers/date-time-field.json @@ -170,12 +170,6 @@ "description": "Icon to display inside the clear button.", "default": "ClearIcon" }, - { - "class": null, - "name": "inputAdornment", - "description": "Icon to display inside the clear button.", - "default": "InputAdornment" - }, { "class": null, "name": "textField", diff --git a/docs/pages/x/api/date-pickers/single-input-date-range-field.json b/docs/pages/x/api/date-pickers/single-input-date-range-field.json index 6a5046dd6201..d687133baf60 100644 --- a/docs/pages/x/api/date-pickers/single-input-date-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-date-range-field.json @@ -129,12 +129,6 @@ "description": "Icon to display inside the clear button.", "default": "ClearIcon" }, - { - "class": null, - "name": "inputAdornment", - "description": "Icon to display inside the clear button.", - "default": "InputAdornment" - }, { "class": null, "name": "textField", diff --git a/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json b/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json index 9cca6e1fb61c..5f064b8dfea2 100644 --- a/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json @@ -154,12 +154,6 @@ "description": "Icon to display inside the clear button.", "default": "ClearIcon" }, - { - "class": null, - "name": "inputAdornment", - "description": "Icon to display inside the clear button.", - "default": "InputAdornment" - }, { "class": null, "name": "textField", diff --git a/docs/pages/x/api/date-pickers/single-input-time-range-field.json b/docs/pages/x/api/date-pickers/single-input-time-range-field.json index 9e7edecb422f..9afde28cbc0b 100644 --- a/docs/pages/x/api/date-pickers/single-input-time-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-time-range-field.json @@ -142,12 +142,6 @@ "description": "Icon to display inside the clear button.", "default": "ClearIcon" }, - { - "class": null, - "name": "inputAdornment", - "description": "Icon to display inside the clear button.", - "default": "InputAdornment" - }, { "class": null, "name": "textField", diff --git a/docs/pages/x/api/date-pickers/time-field.json b/docs/pages/x/api/date-pickers/time-field.json index 0b3f12a04489..4d74262f1ac6 100644 --- a/docs/pages/x/api/date-pickers/time-field.json +++ b/docs/pages/x/api/date-pickers/time-field.json @@ -142,12 +142,6 @@ "description": "Icon to display inside the clear button.", "default": "ClearIcon" }, - { - "class": null, - "name": "inputAdornment", - "description": "Icon to display inside the clear button.", - "default": "InputAdornment" - }, { "class": null, "name": "textField", diff --git a/docs/translations/api-docs/charts/charts-axis.json b/docs/translations/api-docs/charts/charts-axis.json index 6ddd68e0f5ff..6dba8cffb440 100644 --- a/docs/translations/api-docs/charts/charts-axis.json +++ b/docs/translations/api-docs/charts/charts-axis.json @@ -32,6 +32,25 @@ "typeDescriptions": {} } }, - "classDescriptions": {}, + "classDescriptions": { + "root": { "description": "Styles applied to the root element." }, + "line": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the main line element" + }, + "tickContainer": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "group ingruding the tick and its label" + }, + "tick": { "description": "Styles applied to {{nodeName}}.", "nodeName": "ticks" }, + "tickLabel": { "description": "Styles applied to {{nodeName}}.", "nodeName": "ticks label" }, + "label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the axis label" }, + "directionX": { "description": "Styles applied to {{nodeName}}.", "nodeName": "x axes" }, + "directionY": { "description": "Styles applied to {{nodeName}}.", "nodeName": "y axes" }, + "top": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the top axis" }, + "bottom": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the bottom axis" }, + "left": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the left axis" }, + "right": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the right axis" } + }, "slotDescriptions": {} } diff --git a/docs/translations/api-docs/date-pickers/date-field.json b/docs/translations/api-docs/date-pickers/date-field.json index 87f7de173a64..3df5a7450e10 100644 --- a/docs/translations/api-docs/date-pickers/date-field.json +++ b/docs/translations/api-docs/date-pickers/date-field.json @@ -242,7 +242,6 @@ "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { "clearIcon": "Icon to display inside the clear button.", - "inputAdornment": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } diff --git a/docs/translations/api-docs/date-pickers/date-time-field.json b/docs/translations/api-docs/date-pickers/date-time-field.json index 103286cb7a98..e1029da0f9de 100644 --- a/docs/translations/api-docs/date-pickers/date-time-field.json +++ b/docs/translations/api-docs/date-pickers/date-time-field.json @@ -295,7 +295,6 @@ "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { "clearIcon": "Icon to display inside the clear button.", - "inputAdornment": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } diff --git a/docs/translations/api-docs/date-pickers/single-input-date-range-field.json b/docs/translations/api-docs/date-pickers/single-input-date-range-field.json index 00700ced66ec..689bd96d9db9 100644 --- a/docs/translations/api-docs/date-pickers/single-input-date-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-date-range-field.json @@ -227,7 +227,6 @@ "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { "clearIcon": "Icon to display inside the clear button.", - "inputAdornment": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } diff --git a/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json b/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json index c99cdc34e7b3..444d9fb59216 100644 --- a/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json @@ -280,7 +280,6 @@ "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { "clearIcon": "Icon to display inside the clear button.", - "inputAdornment": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } diff --git a/docs/translations/api-docs/date-pickers/single-input-time-range-field.json b/docs/translations/api-docs/date-pickers/single-input-time-range-field.json index d42c2ad84419..912f214f70ef 100644 --- a/docs/translations/api-docs/date-pickers/single-input-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-time-range-field.json @@ -251,7 +251,6 @@ "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { "clearIcon": "Icon to display inside the clear button.", - "inputAdornment": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } diff --git a/docs/translations/api-docs/date-pickers/time-field.json b/docs/translations/api-docs/date-pickers/time-field.json index d42c2ad84419..912f214f70ef 100644 --- a/docs/translations/api-docs/date-pickers/time-field.json +++ b/docs/translations/api-docs/date-pickers/time-field.json @@ -251,7 +251,6 @@ "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { "clearIcon": "Icon to display inside the clear button.", - "inputAdornment": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } } diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx index 99ed1feca2bf..8a8261559a4b 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import MuiTextField from '@mui/material/TextField'; import { useThemeProps } from '@mui/material/styles'; import { useSlotProps } from '@mui/base/utils'; -import { useClearableField } from '@mui/x-date-pickers/internals'; +import { useClearableField } from '@mui/x-date-pickers/hooks'; import { SingleInputDateRangeFieldProps, SingleInputDateRangeFieldSlotsComponentsProps, diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx index 697846c1af8e..c5c0d2f3c5da 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import MuiTextField from '@mui/material/TextField'; import { useThemeProps } from '@mui/material/styles'; import { useSlotProps } from '@mui/base/utils'; -import { useClearableField } from '@mui/x-date-pickers/internals'; +import { useClearableField } from '@mui/x-date-pickers/hooks'; import { SingleInputDateTimeRangeFieldProps, SingleInputDateTimeRangeFieldSlotsComponent, diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx index d16a47c8493f..b082ae35d6ec 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { useClearableField } from '@mui/x-date-pickers/internals'; +import { useClearableField } from '@mui/x-date-pickers/hooks'; import MuiTextField from '@mui/material/TextField'; import { useThemeProps } from '@mui/material/styles'; import { useSlotProps } from '@mui/base/utils'; diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx index 1cd9a99e5010..4fb12758ad21 100644 --- a/packages/x-date-pickers/src/DateField/DateField.tsx +++ b/packages/x-date-pickers/src/DateField/DateField.tsx @@ -9,7 +9,7 @@ import { DateFieldSlotsComponentsProps, } from './DateField.types'; import { useDateField } from './useDateField'; -import { useClearableField } from '../internals/hooks/useClearableField'; +import { useClearableField } from '../hooks'; type DateFieldComponent = (( props: DateFieldProps & React.RefAttributes, diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx index e2e722eec42e..8f3f5d32db5f 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx @@ -9,7 +9,7 @@ import { DateTimeFieldSlotsComponentsProps, } from './DateTimeField.types'; import { useDateTimeField } from './useDateTimeField'; -import { useClearableField } from '../internals/hooks/useClearableField'; +import { useClearableField } from '../hooks'; type DateTimeFieldComponent = (( props: DateTimeFieldProps & React.RefAttributes, diff --git a/packages/x-date-pickers/src/TimeField/TimeField.tsx b/packages/x-date-pickers/src/TimeField/TimeField.tsx index 0f0c50e15cb6..5e5665810948 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.tsx +++ b/packages/x-date-pickers/src/TimeField/TimeField.tsx @@ -9,7 +9,7 @@ import { TimeFieldSlotsComponentsProps, } from './TimeField.types'; import { useTimeField } from './useTimeField'; -import { useClearableField } from '../internals/hooks/useClearableField'; +import { useClearableField } from '../hooks'; type TimeFieldComponent = (( props: TimeFieldProps & React.RefAttributes, diff --git a/packages/x-date-pickers/src/hooks/index.tsx b/packages/x-date-pickers/src/hooks/index.tsx new file mode 100644 index 000000000000..aa5038bf7570 --- /dev/null +++ b/packages/x-date-pickers/src/hooks/index.tsx @@ -0,0 +1 @@ +export { useClearableField } from './useClearableField'; diff --git a/packages/x-date-pickers/src/internals/hooks/useClearableField.tsx b/packages/x-date-pickers/src/hooks/useClearableField.tsx similarity index 71% rename from packages/x-date-pickers/src/internals/hooks/useClearableField.tsx rename to packages/x-date-pickers/src/hooks/useClearableField.tsx index 5594343418f8..4ae95bed6584 100644 --- a/packages/x-date-pickers/src/internals/hooks/useClearableField.tsx +++ b/packages/x-date-pickers/src/hooks/useClearableField.tsx @@ -2,11 +2,13 @@ import * as React from 'react'; import { useSlotProps } from '@mui/base/utils'; import IconButton from '@mui/material/IconButton'; -import MuiInputAdornment from '@mui/material/InputAdornment'; -import { SxProps } from '@mui/system'; -import { ClearIcon } from '../../icons'; -import { FieldSlotsComponents, FieldSlotsComponentsProps } from './useField/useField.types'; -import { FieldsTextFieldProps } from '../models'; +import InputAdornment from '@mui/material/InputAdornment'; +import { ClearIcon } from '../icons'; +import { + FieldSlotsComponents, + FieldSlotsComponentsProps, + FieldsTextFieldProps, +} from '../internals'; type UseClearableFieldProps< TFieldProps extends FieldsTextFieldProps, @@ -34,7 +36,7 @@ export const useClearableField = < onClear, slots, slotProps, -}: UseClearFieldProps< +}: UseClearableFieldProps< TFieldProps, TInputProps, TFieldSlotsComponents, @@ -47,22 +49,20 @@ export const useClearableField = < ownerState: {}, }); - const InputAdornment = slots?.inputAdornment ?? MuiInputAdornment; - const inputAdornmentProps = useSlotProps({ - elementType: MuiInputAdornment, - externalSlotProps: slotProps?.inputAdornment, - ownerState: {}, - }); - const InputProps = { ...ForwardedInputProps, endAdornment: clearable ? ( - - - - + + + + + + {ForwardedInputProps?.endAdornment} - +     ) : ( ForwardedInputProps?.endAdornment ), diff --git a/packages/x-date-pickers/src/index.ts b/packages/x-date-pickers/src/index.ts index c7e082779e50..680bcd4736db 100644 --- a/packages/x-date-pickers/src/index.ts +++ b/packages/x-date-pickers/src/index.ts @@ -48,3 +48,5 @@ export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils'; export * from './models'; export * from './icons'; + +export * from './hooks'; 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 da3e0b322178..660dc91a657e 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx @@ -120,9 +120,10 @@ export const useDesktopPicker = < }); // TODO: Move to `useSlotProps` when https://github.com/mui/material-ui/pull/35088 will be merged - let inputAdornmnent = {}; - if (inputAdornmentProps.position !== 'end') { - inputAdronmnent = { + if (hasUIView) { + fieldProps.InputProps = { + ...fieldProps.InputProps, + ref: containerRef, [`${inputAdornmentProps.position}Adornment`]: ( @@ -131,21 +132,6 @@ export const useDesktopPicker = < ), }; - } else { - inputAdronmnent = { - [`${inputAdornmentProps.position}Adornment`]: ( - - - - ), - }; - } - if (hasUIView) { - fieldProps.InputProps = { - ...fieldProps.InputProps, - ref: containerRef, - ...inputAdronmnent, - }; } const slotsForField: BaseSingleInputFieldProps< @@ -155,7 +141,6 @@ export const useDesktopPicker = < unknown >['slots'] = { textField: slots.textField, - inputAdornment: slots.inputAdornment, ...fieldProps.slots, }; diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts index 55b6405b497f..33b507888cb6 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -510,8 +510,8 @@ export const useField = < event.preventDefault(); onClear?.(event, ...(args as [])); clearValue(); - setSelectedSections(0); inputRef?.current?.focus(); + setSelectedSections(0); }); return { diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts index c5910b589050..c475ec77928c 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts @@ -1,6 +1,5 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/base/utils'; -import InputAdornment from '@mui/material/InputAdornment'; import { ClearIcon } from '../../../icons'; import { FieldSectionType, @@ -392,14 +391,8 @@ export interface FieldSlotsComponents { * @default ClearIcon */ ClearIcon?: React.ElementType; - /** - * Component to display on the end input adornment housing the clear button. - * @default InputAdornment - */ - InputAdornment?: React.ElementType; } export interface FieldSlotsComponentsProps { clearIcon?: SlotComponentProps; - inputAdornment?: SlotComponentProps; } diff --git a/packages/x-date-pickers/src/internals/index.ts b/packages/x-date-pickers/src/internals/index.ts index 7697e51b611e..fdb7337873f1 100644 --- a/packages/x-date-pickers/src/internals/index.ts +++ b/packages/x-date-pickers/src/internals/index.ts @@ -95,7 +95,6 @@ export { useLocaleText, useNow, } from './hooks/useUtils'; -export { useClearableField } from './hooks/useClearableField'; export type { ExportedUseViewsOptions } from './hooks/useViews'; export { useValidation } from './hooks/useValidation'; export type { ValidationProps, Validator, InferError } from './hooks/useValidation'; diff --git a/scripts/x-date-pickers-pro.exports.json b/scripts/x-date-pickers-pro.exports.json index 786b4298f6ae..92f3720bf670 100644 --- a/scripts/x-date-pickers-pro.exports.json +++ b/scripts/x-date-pickers-pro.exports.json @@ -34,8 +34,6 @@ { "name": "DateCalendarSlotsComponentsProps", "kind": "Interface" }, { "name": "DateField", "kind": "Variable" }, { "name": "DateFieldProps", "kind": "Interface" }, - { "name": "DateFieldSlotsComponent", "kind": "Interface" }, - { "name": "DateFieldSlotsComponentsProps", "kind": "Interface" }, { "name": "DateOrTimeView", "kind": "TypeAlias" }, { "name": "DatePicker", "kind": "Variable" }, { "name": "DatePickerProps", "kind": "Interface" }, @@ -339,6 +337,7 @@ { "name": "unstable_useSingleInputTimeRangeField", "kind": "Variable" }, { "name": "unstable_useTimeField", "kind": "Variable" }, { "name": "urPK", "kind": "Variable" }, + { "name": "useClearableField", "kind": "Variable" }, { "name": "UseDateFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseDateFieldDefaultizedProps", "kind": "TypeAlias" }, { "name": "UseDateFieldProps", "kind": "Interface" }, diff --git a/scripts/x-date-pickers.exports.json b/scripts/x-date-pickers.exports.json index 42448777c40a..bed93a67071e 100644 --- a/scripts/x-date-pickers.exports.json +++ b/scripts/x-date-pickers.exports.json @@ -33,8 +33,6 @@ { "name": "DateCalendarSlotsComponentsProps", "kind": "Interface" }, { "name": "DateField", "kind": "Variable" }, { "name": "DateFieldProps", "kind": "Interface" }, - { "name": "DateFieldSlotsComponent", "kind": "Interface" }, - { "name": "DateFieldSlotsComponentsProps", "kind": "Interface" }, { "name": "DateOrTimeView", "kind": "TypeAlias" }, { "name": "DatePicker", "kind": "Variable" }, { "name": "DatePickerProps", "kind": "Interface" }, @@ -265,6 +263,7 @@ { "name": "unstable_useDateTimeField", "kind": "Variable" }, { "name": "unstable_useTimeField", "kind": "Variable" }, { "name": "urPK", "kind": "Variable" }, + { "name": "useClearableField", "kind": "Variable" }, { "name": "UseDateFieldComponentProps", "kind": "TypeAlias" }, { "name": "UseDateFieldDefaultizedProps", "kind": "TypeAlias" }, { "name": "UseDateFieldProps", "kind": "Interface" }, From 4826ce50250b975c8dea822cbfab59e6f6e86b49 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Mon, 28 Aug 2023 17:37:21 +0300 Subject: [PATCH 43/55] avoid using stopPropagation --- .../src/internals/hooks/useField/useField.ts | 12 ++++++++---- .../src/internals/hooks/useField/useField.types.ts | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts index 33b507888cb6..c2a7b7d8a67a 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -105,8 +105,14 @@ export const useField = < setSelectedSections(sectionIndex); }; - const handleInputClick = useEventCallback((...args) => { - onClick?.(...(args as [])); + const handleInputClick = useEventCallback((event: React.MouseEvent, ...args) => { + // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection. + // We avoid this by checking if the call of `handleInputClick` is actually intended, or a side effect. + if (event.isDefaultPrevented()) { + return; + } + + onClick?.(event, ...(args as [])); syncSelectionFromDOM(); }); @@ -505,8 +511,6 @@ export const useField = < })); const handleClearValue = useEventCallback((event: React.MouseEvent, ...args) => { - // the click event on the endAdornment would propagate to the input and trigger the `handleInputClick` handler. - event.stopPropagation(); event.preventDefault(); onClear?.(event, ...(args as [])); clearValue(); diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts index c475ec77928c..8aaec89dbc14 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts @@ -152,7 +152,7 @@ export interface UseFieldForwardedProps { onKeyDown?: React.KeyboardEventHandler; onMouseUp?: React.MouseEventHandler; onPaste?: React.ClipboardEventHandler; - onClick?: () => void; + onClick?: React.MouseEventHandler; onFocus?: () => void; onBlur?: () => void; error?: boolean; From bc23d5fa0eef88323fafdb730593f520c2a7c993 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Mon, 28 Aug 2023 17:49:32 +0300 Subject: [PATCH 44/55] fix failing type --- .../src/internals/hooks/useMultiInputRangeField/shared.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/shared.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/shared.ts index 762a526e5807..7f6d9871fb64 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/shared.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/shared.ts @@ -2,7 +2,7 @@ export const excludeProps = (props: TProps, excludedProps: string[]): TProps => { return Object.keys(props).reduce((acc, key) => { if (!excludedProps.includes(key)) { - acc[key] = props[key]; + acc[key as keyof TProps] = props[key as keyof TProps]; } return acc; }, {} as TProps); From 3bc69c12683db9f7ca5cec8e81a310f6822e15cb Mon Sep 17 00:00:00 2001 From: noraleonte Date: Tue, 29 Aug 2023 21:55:36 +0300 Subject: [PATCH 45/55] Lukas' feedback --- .../custom-field/PickerWithBrowserField.js | 10 ++++++--- .../custom-field/PickerWithBrowserField.tsx | 22 +++++++++++++------ .../PickerWithBrowserField.tsx.preview | 3 +++ .../custom-field/PickerWithJoyField.js | 8 +++---- .../custom-field/PickerWithJoyField.tsx | 18 +++++++++------ .../date-pickers/date-picker/ClearableProp.js | 2 +- .../date-picker/ClearableProp.tsx | 2 +- .../hooks/useMultiInputRangeField/shared.ts | 9 +++++--- .../src/DateField/DateField.tsx | 1 - .../src/internals/demo/DemoContainer.tsx | 4 ++-- 10 files changed, 50 insertions(+), 29 deletions(-) diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js b/docs/data/date-pickers/custom-field/PickerWithBrowserField.js index 9c33a8deee1d..adc23c1c7983 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.js @@ -45,12 +45,13 @@ const BrowserField = React.forwardRef((props, inputRef) => { const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => { const { slots, slotProps, onAdornmentClick, ...other } = props; + const { color, ...ownerState } = props; const { inputRef: externalInputRef, ...textFieldProps } = useSlotProps({ - elementType: null, + elementType: 'input', externalSlotProps: slotProps?.textField, externalForwardedProps: other, - ownerState: props, + ownerState, }); const { @@ -86,7 +87,7 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => { @@ -231,6 +232,9 @@ export default function PickerWithBrowserField() { slotProps={{ field: { clearable: true }, }} + sx={{ + width: '100%', + }} /> diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx index c62d98a86468..d79ec38ec8f6 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx @@ -38,6 +38,10 @@ import { RangeFieldSection, FieldSection, } from '@mui/x-date-pickers-pro'; +import type { + SingleInputDateRangeFieldSlotsComponent, + SingleInputDateRangeFieldSlotsComponentsProps, +} from '@mui/x-date-pickers-pro/SingleInputDateRangeField/SingleInputDateRangeField.types'; interface BrowserFieldProps extends Omit, 'size'> { @@ -105,15 +109,16 @@ const BrowserSingleInputDateRangeField = React.forwardRef( ref: React.Ref, ) => { const { slots, slotProps, onAdornmentClick, ...other } = props; + const { color, ...ownerState } = props; const { inputRef: externalInputRef, ...textFieldProps }: SingleInputDateRangeFieldProps = useSlotProps({ - elementType: null as any, + elementType: 'input', externalSlotProps: slotProps?.textField, externalForwardedProps: other, - ownerState: props as any, + ownerState, }); const { @@ -132,8 +137,8 @@ const BrowserSingleInputDateRangeField = React.forwardRef( useClearableField< {}, typeof textFieldProps.InputProps, - DateFieldSlotsComponent, - DateFieldSlotsComponentsProps + SingleInputDateRangeFieldSlotsComponent, + SingleInputDateRangeFieldSlotsComponentsProps >({ onClear, clearable, @@ -146,15 +151,15 @@ const BrowserSingleInputDateRangeField = React.forwardRef( ), }, - slots: inSlots as any, - slotProps: inSlotProps as any, + slots: inSlots, + slotProps: inSlotProps, }); return ( @@ -335,6 +340,9 @@ export default function PickerWithBrowserField() { slotProps={{ field: { clearable: true }, }} + sx={{ + width: '100%', + }} /> diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx.preview b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx.preview index 6a6dd7638dae..3acd469c8a24 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx.preview +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx.preview @@ -7,5 +7,8 @@ slotProps={{ field: { clearable: true }, }} + sx={{ + width: '100%', + }} /> \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.js b/docs/data/date-pickers/custom-field/PickerWithJoyField.js index 50da63c26d46..24e76535f13e 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.js +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.js @@ -92,8 +92,8 @@ const JoySingleInputDateRangeField = React.forwardRef((props, ref) => { const { onClear, clearable, - slots: rangeSlots, - slotProps: rangeSlotProps, + slots: inSlots, + slotProps: inSlotProps, ...fieldProps } = useSingleInputDateRangeField({ props: textFieldProps, @@ -107,8 +107,8 @@ const JoySingleInputDateRangeField = React.forwardRef((props, ref) => { clearable, fieldProps, InputProps: fieldProps.InputProps, - slots: rangeSlots, - slotProps: rangeSlotProps, + slots: inSlots, + slotProps: inSlotProps, }); return ( diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx index 80957c936307..e4f9070dca75 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx @@ -53,6 +53,10 @@ import { RangeFieldSection, FieldSection, } from '@mui/x-date-pickers-pro'; +import type { + SingleInputDateRangeFieldSlotsComponent, + SingleInputDateRangeFieldSlotsComponentsProps, +} from '@mui/x-date-pickers-pro/SingleInputDateRangeField/SingleInputDateRangeField.types'; const joyTheme = extendJoyTheme(); @@ -147,10 +151,10 @@ const JoySingleInputDateRangeField = React.forwardRef( const { onClear, clearable, - slots: rangeSlots, - slotProps: rangeSlotProps, + slots: inSlots, + slotProps: inSlotProps, ...fieldProps - } = useSingleInputDateRangeField({ + } = useSingleInputDateRangeField({ props: textFieldProps, inputRef: externalInputRef, }); @@ -160,15 +164,15 @@ const JoySingleInputDateRangeField = React.forwardRef( useClearableField< {}, typeof textFieldProps.InputProps, - DateFieldSlotsComponent, - DateFieldSlotsComponentsProps + SingleInputDateRangeFieldSlotsComponent, + SingleInputDateRangeFieldSlotsComponentsProps >({ onClear, clearable, fieldProps, InputProps: fieldProps.InputProps, - slots: rangeSlots as any, - slotProps: rangeSlotProps as any, + slots: inSlots, + slotProps: inSlotProps, }); return ( diff --git a/docs/data/date-pickers/date-picker/ClearableProp.js b/docs/data/date-pickers/date-picker/ClearableProp.js index 9e6b756b94cb..c5ecfc1beaf8 100644 --- a/docs/data/date-pickers/date-picker/ClearableProp.js +++ b/docs/data/date-pickers/date-picker/ClearableProp.js @@ -33,7 +33,7 @@ export default function ClearableProp() { > setCleared(true) }, }} diff --git a/docs/data/date-pickers/date-picker/ClearableProp.tsx b/docs/data/date-pickers/date-picker/ClearableProp.tsx index ed7120de1371..d2d509261589 100644 --- a/docs/data/date-pickers/date-picker/ClearableProp.tsx +++ b/docs/data/date-pickers/date-picker/ClearableProp.tsx @@ -33,7 +33,7 @@ export default function ClearableProp() { > setCleared(true) }, }} diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/shared.ts b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/shared.ts index 7f6d9871fb64..f3568f99ad13 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/shared.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/shared.ts @@ -1,8 +1,11 @@ /* TODO: remove this when a clearable behavior for multiple input range fields is implemented */ -export const excludeProps = (props: TProps, excludedProps: string[]): TProps => { - return Object.keys(props).reduce((acc, key) => { +export const excludeProps = ( + props: TProps, + excludedProps: Array, +): TProps => { + return (Object.keys(props) as Array).reduce((acc, key) => { if (!excludedProps.includes(key)) { - acc[key as keyof TProps] = props[key as keyof TProps]; + acc[key] = props[key]; } return acc; }, {} as TProps); diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx index 4fb12758ad21..5e2d218bc508 100644 --- a/packages/x-date-pickers/src/DateField/DateField.tsx +++ b/packages/x-date-pickers/src/DateField/DateField.tsx @@ -30,7 +30,6 @@ const DateField = React.forwardRef(function DateField( const ownerState = themeProps; const TextField = slots?.textField ?? components?.TextField ?? MuiTextField; - const { inputRef: externalInputRef, ...textFieldProps }: DateFieldProps = useSlotProps({ elementType: TextField, externalSlotProps: slotProps?.textField ?? componentsProps?.textField, diff --git a/packages/x-date-pickers/src/internals/demo/DemoContainer.tsx b/packages/x-date-pickers/src/internals/demo/DemoContainer.tsx index fceb5bc0052b..798ef3520c63 100644 --- a/packages/x-date-pickers/src/internals/demo/DemoContainer.tsx +++ b/packages/x-date-pickers/src/internals/demo/DemoContainer.tsx @@ -152,9 +152,9 @@ export function DemoContainer(props: DemoGridProps) { }; } } else if (childrenSupportedSections.has('date-time')) { - sx = { ...sx, [`& > .${textFieldClasses.root}`]: { minWidth: 260 } }; + sx = { ...sx, [`& > .${textFieldClasses.root}`]: { minWidth: 270 } }; } else { - sx = { ...sx, [`& > .${textFieldClasses.root}`]: { minWidth: 260 } }; + sx = { ...sx, [`& > .${textFieldClasses.root}`]: { minWidth: 200 } }; } return ( From aa0ef989ea3662adc599aeeaef29f1703d178f82 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Wed, 30 Aug 2023 16:05:10 +0300 Subject: [PATCH 46/55] Fix overlapping icons in the demos --- .../custom-field/PickerWithBrowserField.js | 18 ++++++++----- .../custom-field/PickerWithBrowserField.tsx | 18 ++++++++----- .../custom-field/PickerWithJoyField.js | 25 +++++++++++++------ .../custom-field/PickerWithJoyField.tsx | 25 +++++++++++++------ docs/pages/x/api/date-pickers/date-field.json | 6 +++++ .../x/api/date-pickers/date-time-field.json | 6 +++++ .../single-input-date-range-field.json | 6 +++++ .../single-input-date-time-range-field.json | 6 +++++ .../single-input-time-range-field.json | 6 +++++ docs/pages/x/api/date-pickers/time-field.json | 6 +++++ .../api-docs/date-pickers/date-field.json | 1 + .../date-pickers/date-time-field.json | 1 + .../single-input-date-range-field.json | 1 + .../single-input-date-time-range-field.json | 1 + .../single-input-time-range-field.json | 1 + .../api-docs/date-pickers/time-field.json | 1 + .../src/hooks/useClearableField.tsx | 10 ++++++-- .../hooks/useField/useField.types.ts | 7 ++++++ 18 files changed, 115 insertions(+), 30 deletions(-) diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js b/docs/data/date-pickers/custom-field/PickerWithBrowserField.js index adc23c1c7983..4c9463eb1ac2 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.js @@ -4,6 +4,7 @@ import { useSlotProps } from '@mui/base/utils'; import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; import IconButton from '@mui/material/IconButton'; +import InputAdornment from '@mui/material/InputAdornment'; import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; import { DateRangeIcon } from '@mui/x-date-pickers/icons'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; @@ -74,9 +75,11 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => { InputProps: { ...fieldProps.InputProps, endAdornment: ( - - - + + + + + ), }, slots: inSlots, @@ -113,7 +116,10 @@ function BrowserSingleInputDateRangePicker(props) { onOpen={handleOpen} slots={{ field: BrowserSingleInputDateRangeField }} slotProps={{ - field: { onAdornmentClick: toggleOpen, ...props?.slotProps?.field }, + field: { + onAdornmentClick: toggleOpen, + ...props?.slotProps?.field, + }, }} /> ); @@ -140,13 +146,13 @@ const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => { } = props; const { inputRef: startInputRef, ...startTextFieldProps } = useSlotProps({ - elementType: null, + elementType: 'input', externalSlotProps: slotProps?.textField, ownerState: { ...props, position: 'start' }, }); const { inputRef: endInputRef, ...endTextFieldProps } = useSlotProps({ - elementType: null, + elementType: 'input', externalSlotProps: slotProps?.textField, ownerState: { ...props, position: 'end' }, }); diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx index d79ec38ec8f6..d65d5d8dc3b9 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx @@ -4,6 +4,7 @@ import { useSlotProps } from '@mui/base/utils'; import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; import IconButton from '@mui/material/IconButton'; +import InputAdornment from '@mui/material/InputAdornment'; import { DemoContainer } from '@mui/x-date-pickers/internals/demo'; import { DateRangeIcon } from '@mui/x-date-pickers/icons'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; @@ -146,9 +147,11 @@ const BrowserSingleInputDateRangeField = React.forwardRef( InputProps: { ...fieldProps.InputProps, endAdornment: ( - - - + + + + + ), }, slots: inSlots, @@ -186,7 +189,10 @@ function BrowserSingleInputDateRangePicker(props: DateRangePickerProps) { onOpen={handleOpen} slots={{ field: BrowserSingleInputDateRangeField }} slotProps={{ - field: { onAdornmentClick: toggleOpen, ...props?.slotProps?.field } as any, + field: { + onAdornmentClick: toggleOpen, + ...props?.slotProps?.field, + } as any, }} /> ); @@ -227,13 +233,13 @@ const BrowserMultiInputDateRangeField = React.forwardRef( } = props; const { inputRef: startInputRef, ...startTextFieldProps } = useSlotProps({ - elementType: null as any, + elementType: 'input', externalSlotProps: slotProps?.textField, ownerState: { ...props, position: 'start' }, }) as MultiInputFieldSlotTextFieldProps; const { inputRef: endInputRef, ...endTextFieldProps } = useSlotProps({ - elementType: null as any, + elementType: 'input', externalSlotProps: slotProps?.textField, ownerState: { ...props, position: 'end' }, }) as MultiInputFieldSlotTextFieldProps; diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.js b/docs/data/date-pickers/custom-field/PickerWithJoyField.js index 24e76535f13e..0378cd2d5b99 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.js +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.js @@ -81,12 +81,13 @@ const JoyField = React.forwardRef((props, inputRef) => { const JoySingleInputDateRangeField = React.forwardRef((props, ref) => { const { slots, slotProps, onAdornmentClick, ...other } = props; + const { size, color, sx, variant, ...ownerState } = props; const { inputRef: externalInputRef, ...textFieldProps } = useSlotProps({ - elementType: null, + elementType: 'input', externalSlotProps: slotProps?.textField, externalForwardedProps: other, - ownerState: props, + ownerState, }); const { @@ -107,15 +108,20 @@ const JoySingleInputDateRangeField = React.forwardRef((props, ref) => { clearable, fieldProps, InputProps: fieldProps.InputProps, - slots: inSlots, - slotProps: inSlotProps, + slots: { ...inSlots, clearButton: IconButton }, + slotProps: { ...inSlotProps, clearIcon: { color: 'action' } }, }); return ( + } @@ -147,7 +153,10 @@ function JoySingleInputDateRangePicker(props) { onOpen={handleOpen} slots={{ field: JoySingleInputDateRangeField }} slotProps={{ - field: { onAdornmentClick: toggleOpen, ...props?.slotProps?.field }, + field: { + onAdornmentClick: toggleOpen, + ...props?.slotProps?.field, + }, }} /> ); @@ -200,13 +209,13 @@ const JoyMultiInputDateRangeField = React.forwardRef((props, ref) => { } = props; const { inputRef: startInputRef, ...startTextFieldProps } = useSlotProps({ - elementType: null, + elementType: FormControl, externalSlotProps: slotProps?.textField, ownerState: { ...props, position: 'start' }, }); const { inputRef: endInputRef, ...endTextFieldProps } = useSlotProps({ - elementType: null, + elementType: FormControl, externalSlotProps: slotProps?.textField, ownerState: { ...props, position: 'end' }, }); diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx index e4f9070dca75..c4821f327f21 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx @@ -134,6 +134,7 @@ type JoySingleInputDateRangeFieldComponent = (( const JoySingleInputDateRangeField = React.forwardRef( (props: JoySingleInputDateRangeFieldProps, ref: React.Ref) => { const { slots, slotProps, onAdornmentClick, ...other } = props; + const { size, color, sx, variant, ...ownerState } = props; const { inputRef: externalInputRef, @@ -142,10 +143,10 @@ const JoySingleInputDateRangeField = React.forwardRef( Dayjs, JoyFieldProps & { inputRef: React.Ref } > = useSlotProps({ - elementType: null as any, + elementType: 'input', externalSlotProps: slotProps?.textField, externalForwardedProps: other, - ownerState: props as any, + ownerState, }); const { @@ -171,15 +172,20 @@ const JoySingleInputDateRangeField = React.forwardRef( clearable, fieldProps, InputProps: fieldProps.InputProps, - slots: inSlots, - slotProps: inSlotProps, + slots: { ...inSlots, clearButton: IconButton }, + slotProps: { ...inSlotProps, clearIcon: { color: 'action' } }, }); return ( + } @@ -212,7 +218,10 @@ function JoySingleInputDateRangePicker(props: DateRangePickerProps) { onOpen={handleOpen} slots={{ field: JoySingleInputDateRangeField }} slotProps={{ - field: { onAdornmentClick: toggleOpen, ...props?.slotProps?.field } as any, + field: { + onAdornmentClick: toggleOpen, + ...props?.slotProps?.field, + } as any, }} /> ); @@ -279,13 +288,13 @@ const JoyMultiInputDateRangeField = React.forwardRef( } = props; const { inputRef: startInputRef, ...startTextFieldProps } = useSlotProps({ - elementType: null as any, + elementType: FormControl, externalSlotProps: slotProps?.textField, ownerState: { ...props, position: 'start' }, }) as MultiInputFieldSlotTextFieldProps; const { inputRef: endInputRef, ...endTextFieldProps } = useSlotProps({ - elementType: null as any, + elementType: FormControl, externalSlotProps: slotProps?.textField, ownerState: { ...props, position: 'end' }, }) as MultiInputFieldSlotTextFieldProps; diff --git a/docs/pages/x/api/date-pickers/date-field.json b/docs/pages/x/api/date-pickers/date-field.json index cd924f77f1fb..b188454568e3 100644 --- a/docs/pages/x/api/date-pickers/date-field.json +++ b/docs/pages/x/api/date-pickers/date-field.json @@ -139,6 +139,12 @@ } }, "slots": [ + { + "class": null, + "name": "clearButton", + "description": "Button to clear the value.", + "default": "IconButton" + }, { "class": null, "name": "clearIcon", diff --git a/docs/pages/x/api/date-pickers/date-time-field.json b/docs/pages/x/api/date-pickers/date-time-field.json index 28f6ef1c5ac7..68aeef2fedbc 100644 --- a/docs/pages/x/api/date-pickers/date-time-field.json +++ b/docs/pages/x/api/date-pickers/date-time-field.json @@ -164,6 +164,12 @@ } }, "slots": [ + { + "class": null, + "name": "clearButton", + "description": "Button to clear the value.", + "default": "IconButton" + }, { "class": null, "name": "clearIcon", diff --git a/docs/pages/x/api/date-pickers/single-input-date-range-field.json b/docs/pages/x/api/date-pickers/single-input-date-range-field.json index 699981883e33..043d11d37c2e 100644 --- a/docs/pages/x/api/date-pickers/single-input-date-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-date-range-field.json @@ -123,6 +123,12 @@ } }, "slots": [ + { + "class": null, + "name": "clearButton", + "description": "Button to clear the value.", + "default": "IconButton" + }, { "class": null, "name": "clearIcon", diff --git a/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json b/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json index ad2f6b8e8565..e73a8b225ce2 100644 --- a/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json @@ -148,6 +148,12 @@ } }, "slots": [ + { + "class": null, + "name": "clearButton", + "description": "Button to clear the value.", + "default": "IconButton" + }, { "class": null, "name": "clearIcon", diff --git a/docs/pages/x/api/date-pickers/single-input-time-range-field.json b/docs/pages/x/api/date-pickers/single-input-time-range-field.json index 478917bceab2..b349b850beeb 100644 --- a/docs/pages/x/api/date-pickers/single-input-time-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-time-range-field.json @@ -136,6 +136,12 @@ } }, "slots": [ + { + "class": null, + "name": "clearButton", + "description": "Button to clear the value.", + "default": "IconButton" + }, { "class": null, "name": "clearIcon", diff --git a/docs/pages/x/api/date-pickers/time-field.json b/docs/pages/x/api/date-pickers/time-field.json index 4d74262f1ac6..1cdf514f7d39 100644 --- a/docs/pages/x/api/date-pickers/time-field.json +++ b/docs/pages/x/api/date-pickers/time-field.json @@ -136,6 +136,12 @@ } }, "slots": [ + { + "class": null, + "name": "clearButton", + "description": "Button to clear the value.", + "default": "IconButton" + }, { "class": null, "name": "clearIcon", diff --git a/docs/translations/api-docs/date-pickers/date-field.json b/docs/translations/api-docs/date-pickers/date-field.json index 3df5a7450e10..1f5e66940062 100644 --- a/docs/translations/api-docs/date-pickers/date-field.json +++ b/docs/translations/api-docs/date-pickers/date-field.json @@ -241,6 +241,7 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { + "clearButton": "Button to clear the value.", "clearIcon": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } diff --git a/docs/translations/api-docs/date-pickers/date-time-field.json b/docs/translations/api-docs/date-pickers/date-time-field.json index e1029da0f9de..eeb1cff11e8d 100644 --- a/docs/translations/api-docs/date-pickers/date-time-field.json +++ b/docs/translations/api-docs/date-pickers/date-time-field.json @@ -294,6 +294,7 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { + "clearButton": "Button to clear the value.", "clearIcon": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } diff --git a/docs/translations/api-docs/date-pickers/single-input-date-range-field.json b/docs/translations/api-docs/date-pickers/single-input-date-range-field.json index 689bd96d9db9..3fac26d32cc1 100644 --- a/docs/translations/api-docs/date-pickers/single-input-date-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-date-range-field.json @@ -226,6 +226,7 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { + "clearButton": "Button to clear the value.", "clearIcon": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } diff --git a/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json b/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json index 444d9fb59216..975e64e0f139 100644 --- a/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-date-time-range-field.json @@ -279,6 +279,7 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { + "clearButton": "Button to clear the value.", "clearIcon": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } diff --git a/docs/translations/api-docs/date-pickers/single-input-time-range-field.json b/docs/translations/api-docs/date-pickers/single-input-time-range-field.json index 912f214f70ef..51ef8558bafe 100644 --- a/docs/translations/api-docs/date-pickers/single-input-time-range-field.json +++ b/docs/translations/api-docs/date-pickers/single-input-time-range-field.json @@ -250,6 +250,7 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { + "clearButton": "Button to clear the value.", "clearIcon": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } diff --git a/docs/translations/api-docs/date-pickers/time-field.json b/docs/translations/api-docs/date-pickers/time-field.json index 912f214f70ef..51ef8558bafe 100644 --- a/docs/translations/api-docs/date-pickers/time-field.json +++ b/docs/translations/api-docs/date-pickers/time-field.json @@ -250,6 +250,7 @@ }, "classDescriptions": { "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { + "clearButton": "Button to clear the value.", "clearIcon": "Icon to display inside the clear button.", "textField": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField." } diff --git a/packages/x-date-pickers/src/hooks/useClearableField.tsx b/packages/x-date-pickers/src/hooks/useClearableField.tsx index 4ae95bed6584..17413419e94d 100644 --- a/packages/x-date-pickers/src/hooks/useClearableField.tsx +++ b/packages/x-date-pickers/src/hooks/useClearableField.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useSlotProps } from '@mui/base/utils'; -import IconButton from '@mui/material/IconButton'; +import MuiIconButton from '@mui/material/IconButton'; import InputAdornment from '@mui/material/InputAdornment'; import { ClearIcon } from '../icons'; import { @@ -42,6 +42,12 @@ export const useClearableField = < TFieldSlotsComponents, TFieldSlotsComponentsProps >) => { + const IconButton = slots?.clearButton ?? MuiIconButton; + const iconButtonProps = useSlotProps({ + elementType: MuiIconButton, + externalSlotProps: slotProps?.clearButton, + ownerState: {}, + }); const EndClearIcon = slots?.clearIcon ?? ClearIcon; const endClearIconProps = useSlotProps({ elementType: ClearIcon, @@ -57,7 +63,7 @@ export const useClearableField = < position="end" sx={{ marginRight: ForwardedInputProps?.endAdornment ? -1 : -1.5 }} > - + diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts index 8aaec89dbc14..dc29061c355b 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts @@ -1,5 +1,6 @@ import * as React from 'react'; import { SlotComponentProps } from '@mui/base/utils'; +import IconButton from '@mui/material/IconButton'; import { ClearIcon } from '../../../icons'; import { FieldSectionType, @@ -391,8 +392,14 @@ export interface FieldSlotsComponents { * @default ClearIcon */ ClearIcon?: React.ElementType; + /** + * Button to clear the value. + * @default IconButton + */ + ClearButton?: React.ElementType; } export interface FieldSlotsComponentsProps { clearIcon?: SlotComponentProps; + clearButton?: SlotComponentProps; } From c7d0f93c5f25917572df2d3ee12dd9208093a91c Mon Sep 17 00:00:00 2001 From: noraleonte Date: Fri, 1 Sep 2023 15:25:44 +0300 Subject: [PATCH 47/55] Extend picker slots to accept clearIcon and clearButton --- packages/x-date-pickers/src/hooks/useClearableField.tsx | 7 ++++++- .../internals/hooks/useDesktopPicker/useDesktopPicker.tsx | 2 ++ .../hooks/useDesktopPicker/useDesktopPicker.types.ts | 7 +++++-- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/x-date-pickers/src/hooks/useClearableField.tsx b/packages/x-date-pickers/src/hooks/useClearableField.tsx index 17413419e94d..1521947dea1b 100644 --- a/packages/x-date-pickers/src/hooks/useClearableField.tsx +++ b/packages/x-date-pickers/src/hooks/useClearableField.tsx @@ -63,7 +63,12 @@ export const useClearableField = < position="end" sx={{ marginRight: ForwardedInputProps?.endAdornment ? -1 : -1.5 }} > - + 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 65f3168f21c1..738976af622f 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx @@ -142,6 +142,8 @@ export const useDesktopPicker = < unknown >['slots'] = { textField: slots.textField, + clearIcon: slots.clearIcon, + clearButton: slots.clearButton, ...fieldProps.slots, }; diff --git a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts index c6410882e820..9be1bece44bf 100644 --- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts +++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.types.ts @@ -23,13 +23,15 @@ import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types' import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews'; import { UncapitalizeObjectKeys } from '../../utils/slots-migration'; import { DateOrTimeViewWithMeridiem } from '../../models'; +import { FieldSlotsComponents, FieldSlotsComponentsProps } from '../useField'; export interface UseDesktopPickerSlotsComponent extends Pick< PickersPopperSlotsComponent, 'DesktopPaper' | 'DesktopTransition' | 'DesktopTrapFocus' | 'Popper' >, - ExportedPickersLayoutSlotsComponent { + ExportedPickersLayoutSlotsComponent, + FieldSlotsComponents { /** * Component used to enter the date with the keyboard. */ @@ -66,7 +68,8 @@ export interface ExportedUseDesktopPickerSlotsComponentsProps< TDate, TView extends DateOrTimeViewWithMeridiem, > extends PickersPopperSlotsComponentsProps, - ExportedPickersLayoutSlotsComponentsProps { + ExportedPickersLayoutSlotsComponentsProps, + FieldSlotsComponentsProps { field?: SlotComponentProps< React.ElementType>, {}, From 83cff7e1cfc2e5f7b236641a3747244db76ce63d Mon Sep 17 00:00:00 2001 From: noraleonte Date: Fri, 1 Sep 2023 15:38:39 +0300 Subject: [PATCH 48/55] run scripts --- docs/pages/x/api/date-pickers/date-picker.json | 12 ++++++++++++ docs/pages/x/api/date-pickers/date-time-picker.json | 12 ++++++++++++ .../x/api/date-pickers/desktop-date-picker.json | 12 ++++++++++++ .../x/api/date-pickers/desktop-date-time-picker.json | 12 ++++++++++++ .../x/api/date-pickers/desktop-time-picker.json | 12 ++++++++++++ docs/pages/x/api/date-pickers/time-picker.json | 12 ++++++++++++ .../api-docs/date-pickers/date-picker.json | 2 ++ .../api-docs/date-pickers/date-time-picker.json | 2 ++ .../api-docs/date-pickers/desktop-date-picker.json | 2 ++ .../date-pickers/desktop-date-time-picker.json | 2 ++ .../api-docs/date-pickers/desktop-time-picker.json | 2 ++ .../api-docs/date-pickers/time-picker.json | 2 ++ .../SingleInputDateRangeField.tsx | 4 ---- .../SingleInputDateTimeRangeField.tsx | 4 ---- .../SingleInputTimeRangeField.tsx | 4 ---- packages/x-date-pickers/src/DateField/DateField.tsx | 4 ---- .../src/DateTimeField/DateTimeField.tsx | 4 ---- packages/x-date-pickers/src/TimeField/TimeField.tsx | 4 ---- 18 files changed, 84 insertions(+), 24 deletions(-) diff --git a/docs/pages/x/api/date-pickers/date-picker.json b/docs/pages/x/api/date-pickers/date-picker.json index 239a7285e57a..e654cebba1c3 100644 --- a/docs/pages/x/api/date-pickers/date-picker.json +++ b/docs/pages/x/api/date-pickers/date-picker.json @@ -201,6 +201,18 @@ "description": "Custom component for calendar header.\nCheck the PickersCalendarHeader component.", "default": "PickersCalendarHeader" }, + { + "class": null, + "name": "clearButton", + "description": "Button to clear the value.", + "default": "IconButton" + }, + { + "class": null, + "name": "clearIcon", + "description": "Icon to display inside the clear button.", + "default": "ClearIcon" + }, { "class": null, "name": "day", diff --git a/docs/pages/x/api/date-pickers/date-time-picker.json b/docs/pages/x/api/date-pickers/date-time-picker.json index 1ea8b06d7e94..2bfdf4620294 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker.json +++ b/docs/pages/x/api/date-pickers/date-time-picker.json @@ -238,6 +238,18 @@ "description": "Custom component for calendar header.\nCheck the PickersCalendarHeader component.", "default": "PickersCalendarHeader" }, + { + "class": null, + "name": "clearButton", + "description": "Button to clear the value.", + "default": "IconButton" + }, + { + "class": null, + "name": "clearIcon", + "description": "Icon to display inside the clear button.", + "default": "ClearIcon" + }, { "class": null, "name": "day", diff --git a/docs/pages/x/api/date-pickers/desktop-date-picker.json b/docs/pages/x/api/date-pickers/desktop-date-picker.json index e9d4d53c9f94..fee8a5c9a536 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-picker.json @@ -197,6 +197,18 @@ "description": "Custom component for calendar header.\nCheck the PickersCalendarHeader component.", "default": "PickersCalendarHeader" }, + { + "class": null, + "name": "clearButton", + "description": "Button to clear the value.", + "default": "IconButton" + }, + { + "class": null, + "name": "clearIcon", + "description": "Icon to display inside the clear button.", + "default": "ClearIcon" + }, { "class": null, "name": "day", diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json index c83a02b45d25..c1e7c3f51e76 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json @@ -234,6 +234,18 @@ "description": "Custom component for calendar header.\nCheck the PickersCalendarHeader component.", "default": "PickersCalendarHeader" }, + { + "class": null, + "name": "clearButton", + "description": "Button to clear the value.", + "default": "IconButton" + }, + { + "class": null, + "name": "clearIcon", + "description": "Icon to display inside the clear button.", + "default": "ClearIcon" + }, { "class": null, "name": "day", diff --git a/docs/pages/x/api/date-pickers/desktop-time-picker.json b/docs/pages/x/api/date-pickers/desktop-time-picker.json index 3aceebf4a219..c74a06bf1217 100644 --- a/docs/pages/x/api/date-pickers/desktop-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-time-picker.json @@ -161,6 +161,18 @@ "description": "Custom component for the action bar, it is placed below the picker views.", "default": "PickersActionBar" }, + { + "class": null, + "name": "clearButton", + "description": "Button to clear the value.", + "default": "IconButton" + }, + { + "class": null, + "name": "clearIcon", + "description": "Icon to display inside the clear button.", + "default": "ClearIcon" + }, { "class": null, "name": "desktopPaper", diff --git a/docs/pages/x/api/date-pickers/time-picker.json b/docs/pages/x/api/date-pickers/time-picker.json index cdf948d47573..4b80f1df1bf0 100644 --- a/docs/pages/x/api/date-pickers/time-picker.json +++ b/docs/pages/x/api/date-pickers/time-picker.json @@ -165,6 +165,18 @@ "description": "Custom component for the action bar, it is placed below the picker views.", "default": "PickersActionBar" }, + { + "class": null, + "name": "clearButton", + "description": "Button to clear the value.", + "default": "IconButton" + }, + { + "class": null, + "name": "clearIcon", + "description": "Icon to display inside the clear button.", + "default": "ClearIcon" + }, { "class": null, "name": "desktopPaper", diff --git a/docs/translations/api-docs/date-pickers/date-picker.json b/docs/translations/api-docs/date-pickers/date-picker.json index d6260eaf5152..5b4a0f9b24fa 100644 --- a/docs/translations/api-docs/date-pickers/date-picker.json +++ b/docs/translations/api-docs/date-pickers/date-picker.json @@ -286,6 +286,8 @@ "slotDescriptions": { "actionBar": "Custom component for the action bar, it is placed below the picker views.", "calendarHeader": "Custom component for calendar header.\nCheck the PickersCalendarHeader component.", + "clearButton": "Button to clear the value.", + "clearIcon": "Icon to display inside the clear button.", "day": "Custom component for day.\nCheck the PickersDay component.", "desktopPaper": "Custom component for the paper rendered inside the desktop picker's Popper.", "desktopTransition": "Custom component for the desktop popper Transition.", diff --git a/docs/translations/api-docs/date-pickers/date-time-picker.json b/docs/translations/api-docs/date-pickers/date-time-picker.json index d7cf50cf9f9b..94f3b8c269ef 100644 --- a/docs/translations/api-docs/date-pickers/date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/date-time-picker.json @@ -354,6 +354,8 @@ "slotDescriptions": { "actionBar": "Custom component for the action bar, it is placed below the picker views.", "calendarHeader": "Custom component for calendar header.\nCheck the PickersCalendarHeader component.", + "clearButton": "Button to clear the value.", + "clearIcon": "Icon to display inside the clear button.", "day": "Custom component for day.\nCheck the PickersDay component.", "desktopPaper": "Custom component for the paper rendered inside the desktop picker's Popper.", "desktopTransition": "Custom component for the desktop popper Transition.", diff --git a/docs/translations/api-docs/date-pickers/desktop-date-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-picker.json index 4a67f76c3310..dc7a1c9049e2 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-picker.json @@ -281,6 +281,8 @@ "slotDescriptions": { "actionBar": "Custom component for the action bar, it is placed below the picker views.", "calendarHeader": "Custom component for calendar header.\nCheck the PickersCalendarHeader component.", + "clearButton": "Button to clear the value.", + "clearIcon": "Icon to display inside the clear button.", "day": "Custom component for day.\nCheck the PickersDay component.", "desktopPaper": "Custom component for the paper rendered inside the desktop picker's Popper.", "desktopTransition": "Custom component for the desktop popper Transition.", diff --git a/docs/translations/api-docs/date-pickers/desktop-date-time-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-time-picker.json index 2f215d61c906..0b56cbdfc0db 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-time-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-time-picker.json @@ -349,6 +349,8 @@ "slotDescriptions": { "actionBar": "Custom component for the action bar, it is placed below the picker views.", "calendarHeader": "Custom component for calendar header.\nCheck the PickersCalendarHeader component.", + "clearButton": "Button to clear the value.", + "clearIcon": "Icon to display inside the clear button.", "day": "Custom component for day.\nCheck the PickersDay component.", "desktopPaper": "Custom component for the paper rendered inside the desktop picker's Popper.", "desktopTransition": "Custom component for the desktop popper Transition.", diff --git a/docs/translations/api-docs/date-pickers/desktop-time-picker.json b/docs/translations/api-docs/date-pickers/desktop-time-picker.json index 0b93f76ff1c6..53a4480e973f 100644 --- a/docs/translations/api-docs/date-pickers/desktop-time-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-time-picker.json @@ -246,6 +246,8 @@ "classDescriptions": {}, "slotDescriptions": { "actionBar": "Custom component for the action bar, it is placed below the picker views.", + "clearButton": "Button to clear the value.", + "clearIcon": "Icon to display inside the clear button.", "desktopPaper": "Custom component for the paper rendered inside the desktop picker's Popper.", "desktopTransition": "Custom component for the desktop popper Transition.", "desktopTrapFocus": "Custom component for trapping the focus inside the views on desktop.", diff --git a/docs/translations/api-docs/date-pickers/time-picker.json b/docs/translations/api-docs/date-pickers/time-picker.json index 5f589dbaa437..0eab0607b647 100644 --- a/docs/translations/api-docs/date-pickers/time-picker.json +++ b/docs/translations/api-docs/date-pickers/time-picker.json @@ -251,6 +251,8 @@ "classDescriptions": {}, "slotDescriptions": { "actionBar": "Custom component for the action bar, it is placed below the picker views.", + "clearButton": "Button to clear the value.", + "clearIcon": "Icon to display inside the clear button.", "desktopPaper": "Custom component for the paper rendered inside the desktop picker's Popper.", "desktopTransition": "Custom component for the desktop popper Transition.", "desktopTrapFocus": "Custom component for trapping the focus inside the views on desktop.", diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx index 8a8261559a4b..70bdcfecd223 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx @@ -235,10 +235,6 @@ SingleInputDateRangeField.propTypes = { * Callback fired when the clear button is clicked. */ onClear: PropTypes.func, - /** - * @ignore - */ - onClick: PropTypes.func, /** * Callback fired when the error associated to the current value changes. * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value. diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx index c5c0d2f3c5da..9ee1b47042d8 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx @@ -269,10 +269,6 @@ SingleInputDateTimeRangeField.propTypes = { * Callback fired when the clear button is clicked. */ onClear: PropTypes.func, - /** - * @ignore - */ - onClick: PropTypes.func, /** * Callback fired when the error associated to the current value changes. * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value. diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx index b082ae35d6ec..45867e7b81fc 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx @@ -252,10 +252,6 @@ SingleInputTimeRangeField.propTypes = { * Callback fired when the clear button is clicked. */ onClear: PropTypes.func, - /** - * @ignore - */ - onClick: PropTypes.func, /** * Callback fired when the error associated to the current value changes. * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value. diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx index 5e2d218bc508..050c064be492 100644 --- a/packages/x-date-pickers/src/DateField/DateField.tsx +++ b/packages/x-date-pickers/src/DateField/DateField.tsx @@ -235,10 +235,6 @@ DateField.propTypes = { * Callback fired when the clear button is clicked. */ onClear: PropTypes.func, - /** - * @ignore - */ - onClick: PropTypes.func, /** * Callback fired when the error associated to the current value changes. * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value. diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx index 8f3f5d32db5f..edff47e649dd 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx @@ -266,10 +266,6 @@ DateTimeField.propTypes = { * Callback fired when the clear button is clicked. */ onClear: PropTypes.func, - /** - * @ignore - */ - onClick: PropTypes.func, /** * Callback fired when the error associated to the current value changes. * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value. diff --git a/packages/x-date-pickers/src/TimeField/TimeField.tsx b/packages/x-date-pickers/src/TimeField/TimeField.tsx index 5e5665810948..1c4d2b900037 100644 --- a/packages/x-date-pickers/src/TimeField/TimeField.tsx +++ b/packages/x-date-pickers/src/TimeField/TimeField.tsx @@ -249,10 +249,6 @@ TimeField.propTypes = { * Callback fired when the clear button is clicked. */ onClear: PropTypes.func, - /** - * @ignore - */ - onClick: PropTypes.func, /** * Callback fired when the error associated to the current value changes. * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value. From c7a1ce0801e809f6014cca86905223a7220a7e78 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Fri, 22 Sep 2023 17:09:37 +0300 Subject: [PATCH 49/55] Lukas review --- .../custom-field/PickerWithBrowserField.js | 7 +- .../custom-field/PickerWithBrowserField.tsx | 7 +- .../PickerWithBrowserField.tsx.preview | 3 - .../custom-field/PickerWithJoyField.js | 2 +- .../custom-field/PickerWithJoyField.tsx | 2 +- docs/data/date-pickers/localization/data.json | 120 +++++++++--------- .../x/api/date-pickers/date-range-picker.json | 12 ++ .../desktop-date-range-picker.json | 12 ++ .../mobile-date-range-picker.json | 12 ++ .../date-pickers/date-range-picker.json | 2 + .../desktop-date-range-picker.json | 2 + .../mobile-date-range-picker.json | 2 + .../hooks/useEnrichedRangePickerFieldProps.ts | 7 +- .../src/hooks/useClearableField.tsx | 32 +++-- packages/x-date-pickers/src/locales/beBY.ts | 3 + packages/x-date-pickers/src/locales/caES.ts | 3 + packages/x-date-pickers/src/locales/csCZ.ts | 3 + packages/x-date-pickers/src/locales/daDK.ts | 3 + packages/x-date-pickers/src/locales/deDE.ts | 3 + packages/x-date-pickers/src/locales/elGR.ts | 3 + packages/x-date-pickers/src/locales/enUS.ts | 3 + packages/x-date-pickers/src/locales/esES.ts | 3 + packages/x-date-pickers/src/locales/faIR.ts | 3 + packages/x-date-pickers/src/locales/fiFI.ts | 3 + packages/x-date-pickers/src/locales/frFR.ts | 3 + packages/x-date-pickers/src/locales/heIL.ts | 3 + packages/x-date-pickers/src/locales/huHU.ts | 3 + packages/x-date-pickers/src/locales/isIS.ts | 3 + packages/x-date-pickers/src/locales/itIT.ts | 3 + packages/x-date-pickers/src/locales/jaJP.ts | 3 + packages/x-date-pickers/src/locales/koKR.ts | 3 + packages/x-date-pickers/src/locales/kzKZ.ts | 3 + packages/x-date-pickers/src/locales/nbNO.ts | 3 + packages/x-date-pickers/src/locales/nlNL.ts | 3 + packages/x-date-pickers/src/locales/plPL.ts | 3 + packages/x-date-pickers/src/locales/ptBR.ts | 3 + packages/x-date-pickers/src/locales/roRO.ts | 3 + packages/x-date-pickers/src/locales/ruRU.ts | 3 + packages/x-date-pickers/src/locales/skSK.ts | 3 + packages/x-date-pickers/src/locales/svSE.ts | 3 + packages/x-date-pickers/src/locales/trTR.ts | 3 + packages/x-date-pickers/src/locales/ukUA.ts | 3 + packages/x-date-pickers/src/locales/urPK.ts | 3 + .../src/locales/utils/pickersLocaleTextApi.ts | 3 + packages/x-date-pickers/src/locales/viVN.ts | 3 + packages/x-date-pickers/src/locales/zhCN.ts | 3 + packages/x-date-pickers/src/locales/zhHK.ts | 3 + 47 files changed, 231 insertions(+), 90 deletions(-) diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js b/docs/data/date-pickers/custom-field/PickerWithBrowserField.js index 9a1c82f02f87..6a277ec21204 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.js @@ -201,8 +201,8 @@ const BrowserDateRangePicker = React.forwardRef((props, ref) => { return ( ); }); @@ -244,8 +244,8 @@ const BrowserDatePicker = React.forwardRef((props, ref) => { return ( ); }); @@ -265,9 +265,6 @@ export default function PickerWithBrowserField() { slotProps={{ field: { clearable: true }, }} - sx={{ - width: '100%', - }} /> diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx index f69bf93ac289..55b78217c4f5 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx @@ -289,8 +289,8 @@ const BrowserDateRangePicker = React.forwardRef( return ( ); }, @@ -355,8 +355,8 @@ const BrowserDatePicker = React.forwardRef( return ( ); }, @@ -377,9 +377,6 @@ export default function PickerWithBrowserField() { slotProps={{ field: { clearable: true }, }} - sx={{ - width: '100%', - }} /> diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx.preview b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx.preview index 3acd469c8a24..6a6dd7638dae 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx.preview +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx.preview @@ -7,8 +7,5 @@ slotProps={{ field: { clearable: true }, }} - sx={{ - width: '100%', - }} /> \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.js b/docs/data/date-pickers/custom-field/PickerWithJoyField.js index 464dee1e2b0c..c8205c10d150 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.js +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.js @@ -284,8 +284,8 @@ const JoyDateRangePicker = React.forwardRef((props, ref) => { return ( ); }); diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx index c934802e02a7..b0eaa6503f25 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx @@ -367,8 +367,8 @@ const JoyDateRangePicker = React.forwardRef( return ( ); }, diff --git a/docs/data/date-pickers/localization/data.json b/docs/data/date-pickers/localization/data.json index 0c8369ecba5e..e4f077b2a1f4 100644 --- a/docs/data/date-pickers/localization/data.json +++ b/docs/data/date-pickers/localization/data.json @@ -3,96 +3,96 @@ "languageTag": "be-BY", "importName": "beBY", "localeName": "Belarusian", - "missingKeysCount": 1, - "totalKeysCount": 36, + "missingKeysCount": 2, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/beBY.ts" }, { "languageTag": "ca-ES", "importName": "caES", "localeName": "Catalan", - "missingKeysCount": 0, - "totalKeysCount": 36, + "missingKeysCount": 1, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/caES.ts" }, { "languageTag": "zh-HK", "importName": "zhHK", "localeName": "Chinese (Hong Kong)", - "missingKeysCount": 0, - "totalKeysCount": 36, + "missingKeysCount": 1, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/zhHK.ts" }, { "languageTag": "zh-CN", "importName": "zhCN", "localeName": "Chinese (Simplified)", - "missingKeysCount": 0, - "totalKeysCount": 36, + "missingKeysCount": 1, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/zhCN.ts" }, { "languageTag": "cs-CZ", "importName": "csCZ", "localeName": "Czech", - "missingKeysCount": 1, - "totalKeysCount": 36, + "missingKeysCount": 2, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/csCZ.ts" }, { "languageTag": "da-DK", "importName": "daDK", "localeName": "Danish", - "missingKeysCount": 0, - "totalKeysCount": 36, + "missingKeysCount": 1, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/daDK.ts" }, { "languageTag": "nl-NL", "importName": "nlNL", "localeName": "Dutch", - "missingKeysCount": 0, - "totalKeysCount": 36, + "missingKeysCount": 1, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/nlNL.ts" }, { "languageTag": "fi-FI", "importName": "fiFI", "localeName": "Finnish", - "missingKeysCount": 0, - "totalKeysCount": 36, + "missingKeysCount": 1, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/fiFI.ts" }, { "languageTag": "fr-FR", "importName": "frFR", "localeName": "French", - "missingKeysCount": 1, - "totalKeysCount": 36, + "missingKeysCount": 2, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/frFR.ts" }, { "languageTag": "de-DE", "importName": "deDE", "localeName": "German", - "missingKeysCount": 1, - "totalKeysCount": 36, + "missingKeysCount": 2, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/deDE.ts" }, { "languageTag": "el-GR", "importName": "elGR", "localeName": "Greek", - "missingKeysCount": 0, - "totalKeysCount": 36, + "missingKeysCount": 1, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/elGR.ts" }, { "languageTag": "he-IL", "importName": "heIL", "localeName": "Hebrew", - "missingKeysCount": 0, - "totalKeysCount": 36, + "missingKeysCount": 1, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/heIL.ts" }, { @@ -100,79 +100,79 @@ "importName": "huHU", "localeName": "Hungarian", "missingKeysCount": 1, - "totalKeysCount": 36, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/huHU.ts" }, { "languageTag": "is-IS", "importName": "isIS", "localeName": "Icelandic", - "missingKeysCount": 0, - "totalKeysCount": 36, + "missingKeysCount": 1, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/isIS.ts" }, { "languageTag": "it-IT", "importName": "itIT", "localeName": "Italian", - "missingKeysCount": 1, - "totalKeysCount": 36, + "missingKeysCount": 2, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/itIT.ts" }, { "languageTag": "ja-JP", "importName": "jaJP", "localeName": "Japanese", - "missingKeysCount": 0, - "totalKeysCount": 36, + "missingKeysCount": 1, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/jaJP.ts" }, { "languageTag": "kz-KZ", "importName": "kzKZ", "localeName": "Kazakh", - "missingKeysCount": 1, - "totalKeysCount": 36, + "missingKeysCount": 2, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/kzKZ.ts" }, { "languageTag": "ko-KR", "importName": "koKR", "localeName": "Korean", - "missingKeysCount": 1, - "totalKeysCount": 36, + "missingKeysCount": 2, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/koKR.ts" }, { "languageTag": "nb-NO", "importName": "nbNO", "localeName": "Norwegian (Bokmål)", - "missingKeysCount": 0, - "totalKeysCount": 36, + "missingKeysCount": 1, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/nbNO.ts" }, { "languageTag": "fa-IR", "importName": "faIR", "localeName": "Persian", - "missingKeysCount": 0, - "totalKeysCount": 36, + "missingKeysCount": 1, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/faIR.ts" }, { "languageTag": "pl-PL", "importName": "plPL", "localeName": "Polish", - "missingKeysCount": 8, - "totalKeysCount": 36, + "missingKeysCount": 9, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/plPL.ts" }, { "languageTag": "pt-BR", "importName": "ptBR", "localeName": "Portuguese (Brazil)", - "missingKeysCount": 0, - "totalKeysCount": 36, + "missingKeysCount": 1, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/ptBR.ts" }, { @@ -180,71 +180,71 @@ "importName": "roRO", "localeName": "Romanian", "missingKeysCount": 1, - "totalKeysCount": 36, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/roRO.ts" }, { "languageTag": "ru-RU", "importName": "ruRU", "localeName": "Russian", - "missingKeysCount": 1, - "totalKeysCount": 36, + "missingKeysCount": 2, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/ruRU.ts" }, { "languageTag": "sk-SK", "importName": "skSK", "localeName": "Slovak", - "missingKeysCount": 1, - "totalKeysCount": 36, + "missingKeysCount": 2, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/skSK.ts" }, { "languageTag": "es-ES", "importName": "esES", "localeName": "Spanish", - "missingKeysCount": 0, - "totalKeysCount": 36, + "missingKeysCount": 1, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/esES.ts" }, { "languageTag": "sv-SE", "importName": "svSE", "localeName": "Swedish", - "missingKeysCount": 8, - "totalKeysCount": 36, + "missingKeysCount": 9, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/svSE.ts" }, { "languageTag": "tr-TR", "importName": "trTR", "localeName": "Turkish", - "missingKeysCount": 0, - "totalKeysCount": 36, + "missingKeysCount": 1, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/trTR.ts" }, { "languageTag": "uk-UA", "importName": "ukUA", "localeName": "Ukrainian", - "missingKeysCount": 0, - "totalKeysCount": 36, + "missingKeysCount": 1, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/ukUA.ts" }, { "languageTag": "ur-PK", "importName": "urPK", "localeName": "Urdu (Pakistan)", - "missingKeysCount": 8, - "totalKeysCount": 36, + "missingKeysCount": 9, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/urPK.ts" }, { "languageTag": "vi-VN", "importName": "viVN", "localeName": "Vietnamese", - "missingKeysCount": 0, - "totalKeysCount": 36, + "missingKeysCount": 1, + "totalKeysCount": 37, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/viVN.ts" } ] diff --git a/docs/pages/x/api/date-pickers/date-range-picker.json b/docs/pages/x/api/date-pickers/date-range-picker.json index 57bfacbb15f3..f9e5c64271c7 100644 --- a/docs/pages/x/api/date-pickers/date-range-picker.json +++ b/docs/pages/x/api/date-pickers/date-range-picker.json @@ -160,6 +160,18 @@ "description": "Custom component for the action bar, it is placed below the picker views.", "default": "PickersActionBar" }, + { + "class": null, + "name": "clearButton", + "description": "Button to clear the value.", + "default": "IconButton" + }, + { + "class": null, + "name": "clearIcon", + "description": "Icon to display inside the clear button.", + "default": "ClearIcon" + }, { "class": null, "name": "day", diff --git a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json index 98d873b0b18f..d9c1416cc884 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json @@ -156,6 +156,18 @@ "description": "Custom component for the action bar, it is placed below the picker views.", "default": "PickersActionBar" }, + { + "class": null, + "name": "clearButton", + "description": "Button to clear the value.", + "default": "IconButton" + }, + { + "class": null, + "name": "clearIcon", + "description": "Icon to display inside the clear button.", + "default": "ClearIcon" + }, { "class": null, "name": "day", diff --git a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json index 31acd8d9789f..82e56dae97fe 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json @@ -156,6 +156,18 @@ "description": "Custom component for the action bar, it is placed below the picker views.", "default": "PickersActionBar" }, + { + "class": null, + "name": "clearButton", + "description": "Button to clear the value.", + "default": "IconButton" + }, + { + "class": null, + "name": "clearIcon", + "description": "Icon to display inside the clear button.", + "default": "ClearIcon" + }, { "class": null, "name": "day", diff --git a/docs/translations/api-docs/date-pickers/date-range-picker.json b/docs/translations/api-docs/date-pickers/date-range-picker.json index 3e87d04ff351..8524121c65e8 100644 --- a/docs/translations/api-docs/date-pickers/date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/date-range-picker.json @@ -273,6 +273,8 @@ "classDescriptions": {}, "slotDescriptions": { "actionBar": "Custom component for the action bar, it is placed below the picker views.", + "clearButton": "Button to clear the value.", + "clearIcon": "Icon to display inside the clear button.", "day": "Custom component for day in range pickers. Check the DateRangePickersDay component.", "desktopPaper": "Custom component for the paper rendered inside the desktop picker's Popper.", "desktopTransition": "Custom component for the desktop popper Transition.", diff --git a/docs/translations/api-docs/date-pickers/desktop-date-range-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-range-picker.json index 12038cb01399..861bc30997ce 100644 --- a/docs/translations/api-docs/date-pickers/desktop-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/desktop-date-range-picker.json @@ -268,6 +268,8 @@ "classDescriptions": {}, "slotDescriptions": { "actionBar": "Custom component for the action bar, it is placed below the picker views.", + "clearButton": "Button to clear the value.", + "clearIcon": "Icon to display inside the clear button.", "day": "Custom component for day in range pickers. Check the DateRangePickersDay component.", "desktopPaper": "Custom component for the paper rendered inside the desktop picker's Popper.", "desktopTransition": "Custom component for the desktop popper Transition.", diff --git a/docs/translations/api-docs/date-pickers/mobile-date-range-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-range-picker.json index 8bf59738d93c..3cc069eb98c0 100644 --- a/docs/translations/api-docs/date-pickers/mobile-date-range-picker.json +++ b/docs/translations/api-docs/date-pickers/mobile-date-range-picker.json @@ -268,6 +268,8 @@ "classDescriptions": {}, "slotDescriptions": { "actionBar": "Custom component for the action bar, it is placed below the picker views.", + "clearButton": "Button to clear the value.", + "clearIcon": "Icon to display inside the clear button.", "day": "Custom component for day in range pickers. Check the DateRangePickersDay component.", "dialog": "Custom component for the dialog inside which the views are rendered on mobile.", "field": "", diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts index 9a7ca4d7b53c..d901ce8a6288 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts @@ -17,6 +17,8 @@ import { UncapitalizeObjectKeys, UsePickerProps, getActiveElement, + FieldSlotsComponents, + FieldSlotsComponentsProps, } from '@mui/x-date-pickers/internals'; import { BaseMultiInputFieldProps, @@ -29,7 +31,7 @@ import { } from '../models'; import { UseRangePositionResponse } from './useRangePosition'; -export interface RangePickerFieldSlotsComponent { +export interface RangePickerFieldSlotsComponent extends FieldSlotsComponents { Field: React.ElementType; /** * Element rendered at the root. @@ -50,7 +52,7 @@ export interface RangePickerFieldSlotsComponent { TextField?: React.ElementType; } -export interface RangePickerFieldSlotsComponentsProps { +export interface RangePickerFieldSlotsComponentsProps extends FieldSlotsComponentsProps { field?: SlotComponentProps< React.ElementType< BaseMultiInputFieldProps, TDate, RangeFieldSection, unknown> @@ -319,6 +321,7 @@ const useSingleInputFieldSlotProps = ) => { + const localeText = useLocaleText(); + const IconButton = slots?.clearButton ?? MuiIconButton; const iconButtonProps = useSlotProps({ elementType: MuiIconButton, @@ -64,7 +66,7 @@ export const useClearableField = < sx={{ marginRight: ForwardedInputProps?.endAdornment ? -1 : -1.5 }} > > = { ? `Абраць час, абрыны час ${utils.format(value, 'fullTime')}` : 'Абраць час', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'абраць час', dateTableLabel: 'абраць дату', diff --git a/packages/x-date-pickers/src/locales/caES.ts b/packages/x-date-pickers/src/locales/caES.ts index 4253843313b3..39b695e80390 100644 --- a/packages/x-date-pickers/src/locales/caES.ts +++ b/packages/x-date-pickers/src/locales/caES.ts @@ -68,6 +68,9 @@ const caESPickers: Partial> = { ? `Tria l'hora, l'hora triada és ${utils.format(value, 'fullTime')}` : "Tria l'hora", + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'tria la data', dateTableLabel: "tria l'hora", diff --git a/packages/x-date-pickers/src/locales/csCZ.ts b/packages/x-date-pickers/src/locales/csCZ.ts index 9630ed8fd5be..d5b5b5bb9dba 100644 --- a/packages/x-date-pickers/src/locales/csCZ.ts +++ b/packages/x-date-pickers/src/locales/csCZ.ts @@ -67,6 +67,9 @@ const csCZPickers: Partial> = { ? `Vyberte čas, vybraný čas je ${utils.format(value, 'fullTime')}` : 'Vyberte čas', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'vyberte čas', dateTableLabel: 'vyberte datum', diff --git a/packages/x-date-pickers/src/locales/daDK.ts b/packages/x-date-pickers/src/locales/daDK.ts index f46f0b28a797..02c0a14e1395 100644 --- a/packages/x-date-pickers/src/locales/daDK.ts +++ b/packages/x-date-pickers/src/locales/daDK.ts @@ -69,6 +69,9 @@ const daDKPickers: Partial> = { ? `Vælg tidspunkt, valgte tidspunkt er ${utils.format(value, 'fullTime')}` : 'Vælg tidspunkt', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'vælg tidspunkt', dateTableLabel: 'vælg dato', diff --git a/packages/x-date-pickers/src/locales/deDE.ts b/packages/x-date-pickers/src/locales/deDE.ts index 8319f063b1b8..ca52d36ff247 100644 --- a/packages/x-date-pickers/src/locales/deDE.ts +++ b/packages/x-date-pickers/src/locales/deDE.ts @@ -69,6 +69,9 @@ const deDEPickers: Partial> = { ? `Uhrzeit auswählen, gewählte Uhrzeit ist ${utils.format(value, 'fullTime')}` : 'Uhrzeit auswählen', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'Uhrzeit auswählen', dateTableLabel: 'Datum auswählen', diff --git a/packages/x-date-pickers/src/locales/elGR.ts b/packages/x-date-pickers/src/locales/elGR.ts index 7a15dc49987d..f0f1c9919cae 100644 --- a/packages/x-date-pickers/src/locales/elGR.ts +++ b/packages/x-date-pickers/src/locales/elGR.ts @@ -68,6 +68,9 @@ const elGRPickers: Partial> = { ? `Επιλέξτε ώρα, η επιλεγμένη ώρα είναι ${utils.format(value, 'fullTime')}` : 'Επιλέξτε ώρα', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'επιλέξτε ώρα', dateTableLabel: 'επιλέξτε ημερομηνία', diff --git a/packages/x-date-pickers/src/locales/enUS.ts b/packages/x-date-pickers/src/locales/enUS.ts index 53fce05b2081..2edcb3b7d6f2 100644 --- a/packages/x-date-pickers/src/locales/enUS.ts +++ b/packages/x-date-pickers/src/locales/enUS.ts @@ -60,6 +60,9 @@ const enUSPickers: PickersLocaleText = { ? `Choose time, selected time is ${utils.format(value, 'fullTime')}` : 'Choose time', + // Clear button label + clearLabel: 'Clear button', + // Table labels timeTableLabel: 'pick time', dateTableLabel: 'pick date', diff --git a/packages/x-date-pickers/src/locales/esES.ts b/packages/x-date-pickers/src/locales/esES.ts index b5fec0ff00d6..85d28f02ae16 100644 --- a/packages/x-date-pickers/src/locales/esES.ts +++ b/packages/x-date-pickers/src/locales/esES.ts @@ -68,6 +68,9 @@ const esESPickers: Partial> = { ? `Elige la hora, la hora elegido es ${utils.format(value, 'fullTime')}` : 'Elige la hora', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'elige la fecha', dateTableLabel: 'elige la hora', diff --git a/packages/x-date-pickers/src/locales/faIR.ts b/packages/x-date-pickers/src/locales/faIR.ts index 5a748c92810d..e2eac242e5fb 100644 --- a/packages/x-date-pickers/src/locales/faIR.ts +++ b/packages/x-date-pickers/src/locales/faIR.ts @@ -68,6 +68,9 @@ const faIRPickers: Partial> = { ? `ساعت را انتخاب کنید، ساعت انتخاب شده ${utils.format(value, 'fullTime')} می باشد` : 'ساعت را انتخاب کنید', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'انتخاب تاریخ', dateTableLabel: 'انتخاب ساعت', diff --git a/packages/x-date-pickers/src/locales/fiFI.ts b/packages/x-date-pickers/src/locales/fiFI.ts index cef50d5f4072..efd60d7a30ba 100644 --- a/packages/x-date-pickers/src/locales/fiFI.ts +++ b/packages/x-date-pickers/src/locales/fiFI.ts @@ -66,6 +66,9 @@ const fiFIPickers: Partial> = { ? `Valitse aika, valittu aika on ${utils.format(value, 'fullTime')}` : 'Valitse aika', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'valitse aika', dateTableLabel: 'valitse päivä', diff --git a/packages/x-date-pickers/src/locales/frFR.ts b/packages/x-date-pickers/src/locales/frFR.ts index 14ac7e7d7dbc..abb415039e97 100644 --- a/packages/x-date-pickers/src/locales/frFR.ts +++ b/packages/x-date-pickers/src/locales/frFR.ts @@ -68,6 +68,9 @@ const frFRPickers: Partial> = { ? `Choisir l'heure, l'heure sélectionnée est ${utils.format(value, 'fullTime')}` : "Choisir l'heure", + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: "choix de l'heure", dateTableLabel: 'choix de la date', diff --git a/packages/x-date-pickers/src/locales/heIL.ts b/packages/x-date-pickers/src/locales/heIL.ts index dceedbbff2b6..c31c3c65aa8e 100644 --- a/packages/x-date-pickers/src/locales/heIL.ts +++ b/packages/x-date-pickers/src/locales/heIL.ts @@ -66,6 +66,9 @@ const heILPickers: Partial> = { ? `בחירת שעה, השעה שנבחרה היא ${utils.format(value, 'fullTime')}` : 'בחירת שעה', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'בחירת שעה', dateTableLabel: 'בחירת תאריך', diff --git a/packages/x-date-pickers/src/locales/huHU.ts b/packages/x-date-pickers/src/locales/huHU.ts index 86fc0a23469c..cbd27c6669dd 100644 --- a/packages/x-date-pickers/src/locales/huHU.ts +++ b/packages/x-date-pickers/src/locales/huHU.ts @@ -69,6 +69,9 @@ const huHUPickers: Partial> = { ? `Válasszon időt, a kiválasztott idő: ${utils.format(value, 'fullTime')}` : 'Válasszon időt', + // Clear button label + clearLabel: 'Tartalom ürítése gomb', + // Table labels timeTableLabel: 'válasszon időt', dateTableLabel: 'válasszon dátumot', diff --git a/packages/x-date-pickers/src/locales/isIS.ts b/packages/x-date-pickers/src/locales/isIS.ts index cfdfa2124e29..c92d2ad888af 100644 --- a/packages/x-date-pickers/src/locales/isIS.ts +++ b/packages/x-date-pickers/src/locales/isIS.ts @@ -66,6 +66,9 @@ const isISPickers: Partial> = { ? `Velja tíma, valinn tími er ${utils.format(value, 'fullTime')}` : 'Velja tíma', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'velja tíma', dateTableLabel: 'velja dagsetningu', diff --git a/packages/x-date-pickers/src/locales/itIT.ts b/packages/x-date-pickers/src/locales/itIT.ts index feb675cc5fcc..18dc6fb8ba1f 100644 --- a/packages/x-date-pickers/src/locales/itIT.ts +++ b/packages/x-date-pickers/src/locales/itIT.ts @@ -68,6 +68,9 @@ const itITPickers: Partial> = { ? `Scegli l'ora, l'ora selezionata è ${utils.format(value, 'fullTime')}` : "Scegli l'ora", + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: "scegli un'ora", dateTableLabel: 'scegli una data', diff --git a/packages/x-date-pickers/src/locales/jaJP.ts b/packages/x-date-pickers/src/locales/jaJP.ts index 74aa23834109..f299b165f8bb 100644 --- a/packages/x-date-pickers/src/locales/jaJP.ts +++ b/packages/x-date-pickers/src/locales/jaJP.ts @@ -69,6 +69,9 @@ const jaJPPickers: Partial> = { ? `時間を選択してください。選択した時間は ${utils.format(value, 'fullTime')} です` : '時間を選択してください', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: '時間を選択', dateTableLabel: '日付を選択', diff --git a/packages/x-date-pickers/src/locales/koKR.ts b/packages/x-date-pickers/src/locales/koKR.ts index a44d3c218291..9c192bdde2cd 100644 --- a/packages/x-date-pickers/src/locales/koKR.ts +++ b/packages/x-date-pickers/src/locales/koKR.ts @@ -68,6 +68,9 @@ const koKRPickers: Partial> = { ? `시간을 선택하세요. 현재 선택된 시간은 ${utils.format(value, 'fullTime')}입니다.` : '시간을 선택하세요', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: '선택한 시간', dateTableLabel: '선택한 날짜', diff --git a/packages/x-date-pickers/src/locales/kzKZ.ts b/packages/x-date-pickers/src/locales/kzKZ.ts index bb43a39e2ae7..6fde718d805d 100644 --- a/packages/x-date-pickers/src/locales/kzKZ.ts +++ b/packages/x-date-pickers/src/locales/kzKZ.ts @@ -67,6 +67,9 @@ const kzKZPickers: Partial> = { ? `Уақытты таңдаңыз, таңдалған уақыт ${utils.format(value, 'fullTime')}` : 'Уақытты таңдаңыз', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'уақытты таңдау', dateTableLabel: 'күнді таңдау', diff --git a/packages/x-date-pickers/src/locales/nbNO.ts b/packages/x-date-pickers/src/locales/nbNO.ts index 8679592b861e..2ac494635fcd 100644 --- a/packages/x-date-pickers/src/locales/nbNO.ts +++ b/packages/x-date-pickers/src/locales/nbNO.ts @@ -66,6 +66,9 @@ const nbNOPickers: Partial> = { ? `Velg tid, valgt tid er ${utils.format(value, 'fullTime')}` : 'Velg tid', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'velg tid', dateTableLabel: 'velg dato', diff --git a/packages/x-date-pickers/src/locales/nlNL.ts b/packages/x-date-pickers/src/locales/nlNL.ts index 3d73af4c0595..cde31272c0e9 100644 --- a/packages/x-date-pickers/src/locales/nlNL.ts +++ b/packages/x-date-pickers/src/locales/nlNL.ts @@ -68,6 +68,9 @@ const nlNLPickers: Partial> = { ? `Kies tijd, geselecteerde tijd is ${utils.format(value, 'fullTime')}` : 'Kies tijd', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'kies tijd', dateTableLabel: 'kies datum', diff --git a/packages/x-date-pickers/src/locales/plPL.ts b/packages/x-date-pickers/src/locales/plPL.ts index 6b7720e969c3..49c501784ec4 100644 --- a/packages/x-date-pickers/src/locales/plPL.ts +++ b/packages/x-date-pickers/src/locales/plPL.ts @@ -66,6 +66,9 @@ const plPLPickers: Partial> = { ? `Wybierz czas, obecnie wybrany czas to ${utils.format(value, 'fullTime')}` : 'Wybierz czas', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'wybierz czas', dateTableLabel: 'wybierz datę', diff --git a/packages/x-date-pickers/src/locales/ptBR.ts b/packages/x-date-pickers/src/locales/ptBR.ts index 032c8ccfccf0..b1c85498b3e3 100644 --- a/packages/x-date-pickers/src/locales/ptBR.ts +++ b/packages/x-date-pickers/src/locales/ptBR.ts @@ -68,6 +68,9 @@ const ptBRPickers: Partial> = { ? `Escolha uma hora, hora selecionada ${utils.format(value, 'fullTime')}` : 'Escolha uma hora', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'escolha uma hora', dateTableLabel: 'escolha uma data', diff --git a/packages/x-date-pickers/src/locales/roRO.ts b/packages/x-date-pickers/src/locales/roRO.ts index 7c24c4a6b680..e1e37b671d6a 100644 --- a/packages/x-date-pickers/src/locales/roRO.ts +++ b/packages/x-date-pickers/src/locales/roRO.ts @@ -69,6 +69,9 @@ const roROPickers: Partial> = { ? `Selectați ora, ora selectată este ${utils.format(value, 'fullTime')}` : 'Selectați ora', + // Clear button label + clearLabel: 'Buton golire conținut', + // Table labels timeTableLabel: 'Selectați ora', dateTableLabel: 'Selectați data', diff --git a/packages/x-date-pickers/src/locales/ruRU.ts b/packages/x-date-pickers/src/locales/ruRU.ts index d947bcd5b253..6b187ff12eba 100644 --- a/packages/x-date-pickers/src/locales/ruRU.ts +++ b/packages/x-date-pickers/src/locales/ruRU.ts @@ -67,6 +67,9 @@ const ruRUPickers: Partial> = { ? `Выберите время, выбрано время ${utils.format(value, 'fullTime')}` : 'Выберите время', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'выбрать время', dateTableLabel: 'выбрать дату', diff --git a/packages/x-date-pickers/src/locales/skSK.ts b/packages/x-date-pickers/src/locales/skSK.ts index 22ab6650219e..004db0e0425b 100644 --- a/packages/x-date-pickers/src/locales/skSK.ts +++ b/packages/x-date-pickers/src/locales/skSK.ts @@ -67,6 +67,9 @@ const skSKPickers: Partial> = { ? `Vyberte čas, vybraný čas je ${utils.format(value, 'fullTime')}` : 'Vyberte čas', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'vyberte čas', dateTableLabel: 'vyberte dátum', diff --git a/packages/x-date-pickers/src/locales/svSE.ts b/packages/x-date-pickers/src/locales/svSE.ts index b8296507ce94..8a0e6579d7a7 100644 --- a/packages/x-date-pickers/src/locales/svSE.ts +++ b/packages/x-date-pickers/src/locales/svSE.ts @@ -66,6 +66,9 @@ const svSEPickers: Partial> = { ? `Välj tid, vald tid är ${utils.format(value, 'fullTime')}` : 'Välj tid', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'välj tid', dateTableLabel: 'välj datum', diff --git a/packages/x-date-pickers/src/locales/trTR.ts b/packages/x-date-pickers/src/locales/trTR.ts index a640746cadf6..b07cdc8c59d6 100644 --- a/packages/x-date-pickers/src/locales/trTR.ts +++ b/packages/x-date-pickers/src/locales/trTR.ts @@ -66,6 +66,9 @@ const trTRPickers: Partial> = { ? `Saat seçin, seçilen saat: ${utils.format(value, 'fullTime')}` : 'Saat seç', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'saat seç', dateTableLabel: 'tarih seç', diff --git a/packages/x-date-pickers/src/locales/ukUA.ts b/packages/x-date-pickers/src/locales/ukUA.ts index 45242cabee79..efd82c36efad 100644 --- a/packages/x-date-pickers/src/locales/ukUA.ts +++ b/packages/x-date-pickers/src/locales/ukUA.ts @@ -66,6 +66,9 @@ const ukUAPickers: Partial> = { ? `Оберіть час, обраний час ${utils.format(value, 'fullTime')}` : 'Оберіть час', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'оберіть час', dateTableLabel: 'оберіть дату', diff --git a/packages/x-date-pickers/src/locales/urPK.ts b/packages/x-date-pickers/src/locales/urPK.ts index 1c73d41e999b..63b26494cb1c 100644 --- a/packages/x-date-pickers/src/locales/urPK.ts +++ b/packages/x-date-pickers/src/locales/urPK.ts @@ -66,6 +66,9 @@ const urPKPickers: Partial> = { ? `وقت منتخب کریں، منتخب شدہ وقت ہے ${utils.format(value, 'fullTime')}` : 'وقت منتخب کریں', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'وقت منتخب کریں', dateTableLabel: 'تاریخ منتخب کریں', diff --git a/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts b/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts index a2acb4fa27bf..8427af204e2a 100644 --- a/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts +++ b/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts @@ -63,6 +63,9 @@ export interface PickersComponentAgnosticLocaleText { openDatePickerDialogue: (date: TDate | null, utils: MuiPickersAdapter) => string; openTimePickerDialogue: (date: TDate | null, utils: MuiPickersAdapter) => string; + // Clear button label + clearLabel: string; + // Table labels timeTableLabel: string; dateTableLabel: string; diff --git a/packages/x-date-pickers/src/locales/viVN.ts b/packages/x-date-pickers/src/locales/viVN.ts index f238b31ea5f5..bdece16d48d9 100644 --- a/packages/x-date-pickers/src/locales/viVN.ts +++ b/packages/x-date-pickers/src/locales/viVN.ts @@ -68,6 +68,9 @@ const viVNPickers: Partial> = { ? `Chọn giờ, giờ đã chọn là ${utils.format(value, 'fullTime')}` : 'Chọn giờ', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: 'chọn giờ', dateTableLabel: 'chọn ngày', diff --git a/packages/x-date-pickers/src/locales/zhCN.ts b/packages/x-date-pickers/src/locales/zhCN.ts index 544b6d23c1bd..ccbbedb9a9f5 100644 --- a/packages/x-date-pickers/src/locales/zhCN.ts +++ b/packages/x-date-pickers/src/locales/zhCN.ts @@ -64,6 +64,9 @@ const zhCNPickers: Partial> = { ? `选择时间，已选择${utils.format(value, 'fullTime')}` : '选择时间', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: '选择时间', dateTableLabel: '选择日期', diff --git a/packages/x-date-pickers/src/locales/zhHK.ts b/packages/x-date-pickers/src/locales/zhHK.ts index 8c454b92a8e3..8270466c3b2e 100644 --- a/packages/x-date-pickers/src/locales/zhHK.ts +++ b/packages/x-date-pickers/src/locales/zhHK.ts @@ -64,6 +64,9 @@ const zhHKPickers: Partial> = { ? `選擇時間，已選擇${utils.format(value, 'fullTime')}` : '選擇時間', + // Clear button label + // clearLabel: 'Clear button', + // Table labels timeTableLabel: '選擇時間', dateTableLabel: '選擇日期', From d3ed31d7c18b34721d746ec2bbf1adb196b2461d Mon Sep 17 00:00:00 2001 From: noraleonte Date: Wed, 27 Sep 2023 16:43:24 +0300 Subject: [PATCH 50/55] Lukas review --- .../custom-field/PickerWithBrowserField.js | 3 ++- .../custom-field/PickerWithBrowserField.tsx | 3 ++- .../custom-field/PickerWithJoyField.js | 6 +++--- .../custom-field/PickerWithJoyField.tsx | 6 +++--- .../hooks/useEnrichedRangePickerFieldProps.ts | 3 +++ .../src/hooks/useClearableField.tsx | 18 +++++++++--------- packages/x-date-pickers/src/locales/beBY.ts | 4 +--- packages/x-date-pickers/src/locales/caES.ts | 4 +--- packages/x-date-pickers/src/locales/csCZ.ts | 4 +--- packages/x-date-pickers/src/locales/daDK.ts | 4 +--- packages/x-date-pickers/src/locales/deDE.ts | 4 +--- packages/x-date-pickers/src/locales/elGR.ts | 4 +--- packages/x-date-pickers/src/locales/enUS.ts | 3 +-- packages/x-date-pickers/src/locales/esES.ts | 4 +--- packages/x-date-pickers/src/locales/faIR.ts | 4 +--- packages/x-date-pickers/src/locales/fiFI.ts | 4 +--- packages/x-date-pickers/src/locales/frFR.ts | 4 +--- packages/x-date-pickers/src/locales/heIL.ts | 4 +--- packages/x-date-pickers/src/locales/huHU.ts | 4 +--- packages/x-date-pickers/src/locales/isIS.ts | 4 +--- packages/x-date-pickers/src/locales/itIT.ts | 4 +--- packages/x-date-pickers/src/locales/jaJP.ts | 4 +--- packages/x-date-pickers/src/locales/koKR.ts | 4 +--- packages/x-date-pickers/src/locales/kzKZ.ts | 4 +--- packages/x-date-pickers/src/locales/nbNO.ts | 4 +--- packages/x-date-pickers/src/locales/nlNL.ts | 4 +--- packages/x-date-pickers/src/locales/plPL.ts | 4 +--- packages/x-date-pickers/src/locales/ptBR.ts | 4 +--- packages/x-date-pickers/src/locales/roRO.ts | 4 +--- packages/x-date-pickers/src/locales/ruRU.ts | 4 +--- packages/x-date-pickers/src/locales/skSK.ts | 4 +--- packages/x-date-pickers/src/locales/svSE.ts | 4 +--- packages/x-date-pickers/src/locales/trTR.ts | 4 +--- packages/x-date-pickers/src/locales/ukUA.ts | 4 +--- packages/x-date-pickers/src/locales/urPK.ts | 4 +--- .../src/locales/utils/pickersLocaleTextApi.ts | 2 +- packages/x-date-pickers/src/locales/viVN.ts | 4 +--- packages/x-date-pickers/src/locales/zhCN.ts | 4 +--- packages/x-date-pickers/src/locales/zhHK.ts | 4 +--- 39 files changed, 55 insertions(+), 113 deletions(-) diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js b/docs/data/date-pickers/custom-field/PickerWithBrowserField.js index 6a277ec21204..bc8e2e00cc5a 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.js @@ -121,6 +121,7 @@ const BrowserSingleInputDateRangePicker = React.forwardRef((props, ref) => { onOpen={handleOpen} slots={{ field: BrowserSingleInputDateRangeField }} slotProps={{ + ...props?.slotProps, field: { onAdornmentClick: toggleOpen, ...props?.slotProps?.field, @@ -202,7 +203,7 @@ const BrowserDateRangePicker = React.forwardRef((props, ref) => { ); }); diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx index 55b78217c4f5..415a2cf5b5a6 100644 --- a/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx @@ -192,6 +192,7 @@ const BrowserSingleInputDateRangePicker = React.forwardRef( onOpen={handleOpen} slots={{ field: BrowserSingleInputDateRangeField }} slotProps={{ + ...props?.slotProps, field: { onAdornmentClick: toggleOpen, ...props?.slotProps?.field, @@ -290,7 +291,7 @@ const BrowserDateRangePicker = React.forwardRef( ); }, diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.js b/docs/data/date-pickers/custom-field/PickerWithJoyField.js index c8205c10d150..c753b81155d8 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.js +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.js @@ -88,7 +88,7 @@ const JoySingleInputDateRangeField = React.forwardRef((props, ref) => { const { slots, slotProps, onAdornmentClick, ...other } = props; const { inputRef: externalInputRef, ...textFieldProps } = useSlotProps({ - elementType: 'input', + elementType: FormControl, externalSlotProps: slotProps?.textField, externalForwardedProps: other, ownerState: props, @@ -163,10 +163,10 @@ const JoySingleInputDateRangePicker = React.forwardRef((props, ref) => { onOpen={handleOpen} slots={{ field: JoySingleInputDateRangeField }} slotProps={{ + ...props?.slotProps, field: { ...props?.slotProps?.field, onAdornmentClick: toggleOpen, - name: 'test', }, }} /> @@ -285,7 +285,7 @@ const JoyDateRangePicker = React.forwardRef((props, ref) => { ); }); diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx index b0eaa6503f25..2777e5fea381 100644 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx +++ b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx @@ -147,7 +147,7 @@ const JoySingleInputDateRangeField = React.forwardRef( Dayjs, JoyFieldProps & { inputRef: React.Ref } > = useSlotProps({ - elementType: 'input', + elementType: FormControl, externalSlotProps: slotProps?.textField, externalForwardedProps: other, ownerState: props as any, @@ -229,10 +229,10 @@ const JoySingleInputDateRangePicker = React.forwardRef( onOpen={handleOpen} slots={{ field: JoySingleInputDateRangeField }} slotProps={{ + ...props?.slotProps, field: { ...props?.slotProps?.field, onAdornmentClick: toggleOpen, - name: 'test', } as any, }} /> @@ -368,7 +368,7 @@ const JoyDateRangePicker = React.forwardRef( ); }, diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts index d901ce8a6288..9629c2757a04 100644 --- a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts +++ b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts @@ -321,12 +321,15 @@ const useSingleInputFieldSlotProps = - + diff --git a/packages/x-date-pickers/src/locales/beBY.ts b/packages/x-date-pickers/src/locales/beBY.ts index 0a2b84cafd31..5626f3c125c2 100644 --- a/packages/x-date-pickers/src/locales/beBY.ts +++ b/packages/x-date-pickers/src/locales/beBY.ts @@ -66,9 +66,7 @@ const beBYPickers: Partial> = { value !== null && utils.isValid(value) ? `Абраць час, абрыны час ${utils.format(value, 'fullTime')}` : 'Абраць час', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'абраць час', diff --git a/packages/x-date-pickers/src/locales/caES.ts b/packages/x-date-pickers/src/locales/caES.ts index 39b695e80390..73ae637f23de 100644 --- a/packages/x-date-pickers/src/locales/caES.ts +++ b/packages/x-date-pickers/src/locales/caES.ts @@ -67,9 +67,7 @@ const caESPickers: Partial> = { value !== null && utils.isValid(value) ? `Tria l'hora, l'hora triada és ${utils.format(value, 'fullTime')}` : "Tria l'hora", - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'tria la data', diff --git a/packages/x-date-pickers/src/locales/csCZ.ts b/packages/x-date-pickers/src/locales/csCZ.ts index d5b5b5bb9dba..39a044b360af 100644 --- a/packages/x-date-pickers/src/locales/csCZ.ts +++ b/packages/x-date-pickers/src/locales/csCZ.ts @@ -66,9 +66,7 @@ const csCZPickers: Partial> = { value !== null && utils.isValid(value) ? `Vyberte čas, vybraný čas je ${utils.format(value, 'fullTime')}` : 'Vyberte čas', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'vyberte čas', diff --git a/packages/x-date-pickers/src/locales/daDK.ts b/packages/x-date-pickers/src/locales/daDK.ts index 02c0a14e1395..b2d834645613 100644 --- a/packages/x-date-pickers/src/locales/daDK.ts +++ b/packages/x-date-pickers/src/locales/daDK.ts @@ -68,9 +68,7 @@ const daDKPickers: Partial> = { value !== null && utils.isValid(value) ? `Vælg tidspunkt, valgte tidspunkt er ${utils.format(value, 'fullTime')}` : 'Vælg tidspunkt', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'vælg tidspunkt', diff --git a/packages/x-date-pickers/src/locales/deDE.ts b/packages/x-date-pickers/src/locales/deDE.ts index ca52d36ff247..e259769e8199 100644 --- a/packages/x-date-pickers/src/locales/deDE.ts +++ b/packages/x-date-pickers/src/locales/deDE.ts @@ -68,9 +68,7 @@ const deDEPickers: Partial> = { value !== null && utils.isValid(value) ? `Uhrzeit auswählen, gewählte Uhrzeit ist ${utils.format(value, 'fullTime')}` : 'Uhrzeit auswählen', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'Uhrzeit auswählen', diff --git a/packages/x-date-pickers/src/locales/elGR.ts b/packages/x-date-pickers/src/locales/elGR.ts index f0f1c9919cae..c0bbab6d566f 100644 --- a/packages/x-date-pickers/src/locales/elGR.ts +++ b/packages/x-date-pickers/src/locales/elGR.ts @@ -67,9 +67,7 @@ const elGRPickers: Partial> = { value !== null && utils.isValid(value) ? `Επιλέξτε ώρα, η επιλεγμένη ώρα είναι ${utils.format(value, 'fullTime')}` : 'Επιλέξτε ώρα', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'επιλέξτε ώρα', diff --git a/packages/x-date-pickers/src/locales/enUS.ts b/packages/x-date-pickers/src/locales/enUS.ts index 2edcb3b7d6f2..775e7cfd1bc1 100644 --- a/packages/x-date-pickers/src/locales/enUS.ts +++ b/packages/x-date-pickers/src/locales/enUS.ts @@ -60,8 +60,7 @@ const enUSPickers: PickersLocaleText = { ? `Choose time, selected time is ${utils.format(value, 'fullTime')}` : 'Choose time', - // Clear button label - clearLabel: 'Clear button', + clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'pick time', diff --git a/packages/x-date-pickers/src/locales/esES.ts b/packages/x-date-pickers/src/locales/esES.ts index 85d28f02ae16..52a86c50d5f3 100644 --- a/packages/x-date-pickers/src/locales/esES.ts +++ b/packages/x-date-pickers/src/locales/esES.ts @@ -67,9 +67,7 @@ const esESPickers: Partial> = { value !== null && utils.isValid(value) ? `Elige la hora, la hora elegido es ${utils.format(value, 'fullTime')}` : 'Elige la hora', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'elige la fecha', diff --git a/packages/x-date-pickers/src/locales/faIR.ts b/packages/x-date-pickers/src/locales/faIR.ts index e2eac242e5fb..ad8a5de0e82c 100644 --- a/packages/x-date-pickers/src/locales/faIR.ts +++ b/packages/x-date-pickers/src/locales/faIR.ts @@ -67,9 +67,7 @@ const faIRPickers: Partial> = { value !== null && utils.isValid(value) ? `ساعت را انتخاب کنید، ساعت انتخاب شده ${utils.format(value, 'fullTime')} می باشد` : 'ساعت را انتخاب کنید', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'انتخاب تاریخ', diff --git a/packages/x-date-pickers/src/locales/fiFI.ts b/packages/x-date-pickers/src/locales/fiFI.ts index efd60d7a30ba..febeaeac4340 100644 --- a/packages/x-date-pickers/src/locales/fiFI.ts +++ b/packages/x-date-pickers/src/locales/fiFI.ts @@ -65,9 +65,7 @@ const fiFIPickers: Partial> = { value !== null && utils.isValid(value) ? `Valitse aika, valittu aika on ${utils.format(value, 'fullTime')}` : 'Valitse aika', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'valitse aika', diff --git a/packages/x-date-pickers/src/locales/frFR.ts b/packages/x-date-pickers/src/locales/frFR.ts index abb415039e97..27d10e7bd5b2 100644 --- a/packages/x-date-pickers/src/locales/frFR.ts +++ b/packages/x-date-pickers/src/locales/frFR.ts @@ -67,9 +67,7 @@ const frFRPickers: Partial> = { value !== null && utils.isValid(value) ? `Choisir l'heure, l'heure sélectionnée est ${utils.format(value, 'fullTime')}` : "Choisir l'heure", - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: "choix de l'heure", diff --git a/packages/x-date-pickers/src/locales/heIL.ts b/packages/x-date-pickers/src/locales/heIL.ts index c31c3c65aa8e..973e29f85eae 100644 --- a/packages/x-date-pickers/src/locales/heIL.ts +++ b/packages/x-date-pickers/src/locales/heIL.ts @@ -65,9 +65,7 @@ const heILPickers: Partial> = { value !== null && utils.isValid(value) ? `בחירת שעה, השעה שנבחרה היא ${utils.format(value, 'fullTime')}` : 'בחירת שעה', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'בחירת שעה', diff --git a/packages/x-date-pickers/src/locales/huHU.ts b/packages/x-date-pickers/src/locales/huHU.ts index cbd27c6669dd..3a2a01cad4c7 100644 --- a/packages/x-date-pickers/src/locales/huHU.ts +++ b/packages/x-date-pickers/src/locales/huHU.ts @@ -68,9 +68,7 @@ const huHUPickers: Partial> = { value !== null && utils.isValid(value) ? `Válasszon időt, a kiválasztott idő: ${utils.format(value, 'fullTime')}` : 'Válasszon időt', - - // Clear button label - clearLabel: 'Tartalom ürítése gomb', + clearIconButtonLabel: 'Tartalom ürítése', // Table labels timeTableLabel: 'válasszon időt', diff --git a/packages/x-date-pickers/src/locales/isIS.ts b/packages/x-date-pickers/src/locales/isIS.ts index c92d2ad888af..619e08257b97 100644 --- a/packages/x-date-pickers/src/locales/isIS.ts +++ b/packages/x-date-pickers/src/locales/isIS.ts @@ -65,9 +65,7 @@ const isISPickers: Partial> = { value !== null && utils.isValid(value) ? `Velja tíma, valinn tími er ${utils.format(value, 'fullTime')}` : 'Velja tíma', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'velja tíma', diff --git a/packages/x-date-pickers/src/locales/itIT.ts b/packages/x-date-pickers/src/locales/itIT.ts index 18dc6fb8ba1f..f02ccd44879f 100644 --- a/packages/x-date-pickers/src/locales/itIT.ts +++ b/packages/x-date-pickers/src/locales/itIT.ts @@ -67,9 +67,7 @@ const itITPickers: Partial> = { value !== null && utils.isValid(value) ? `Scegli l'ora, l'ora selezionata è ${utils.format(value, 'fullTime')}` : "Scegli l'ora", - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: "scegli un'ora", diff --git a/packages/x-date-pickers/src/locales/jaJP.ts b/packages/x-date-pickers/src/locales/jaJP.ts index f299b165f8bb..dcf2f7a55cc4 100644 --- a/packages/x-date-pickers/src/locales/jaJP.ts +++ b/packages/x-date-pickers/src/locales/jaJP.ts @@ -68,9 +68,7 @@ const jaJPPickers: Partial> = { value !== null && utils.isValid(value) ? `時間を選択してください。選択した時間は ${utils.format(value, 'fullTime')} です` : '時間を選択してください', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: '時間を選択', diff --git a/packages/x-date-pickers/src/locales/koKR.ts b/packages/x-date-pickers/src/locales/koKR.ts index 9c192bdde2cd..c52319e5c56d 100644 --- a/packages/x-date-pickers/src/locales/koKR.ts +++ b/packages/x-date-pickers/src/locales/koKR.ts @@ -67,9 +67,7 @@ const koKRPickers: Partial> = { value !== null && utils.isValid(value) ? `시간을 선택하세요. 현재 선택된 시간은 ${utils.format(value, 'fullTime')}입니다.` : '시간을 선택하세요', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: '선택한 시간', diff --git a/packages/x-date-pickers/src/locales/kzKZ.ts b/packages/x-date-pickers/src/locales/kzKZ.ts index 6fde718d805d..d98d11af7d5f 100644 --- a/packages/x-date-pickers/src/locales/kzKZ.ts +++ b/packages/x-date-pickers/src/locales/kzKZ.ts @@ -66,9 +66,7 @@ const kzKZPickers: Partial> = { value !== null && utils.isValid(value) ? `Уақытты таңдаңыз, таңдалған уақыт ${utils.format(value, 'fullTime')}` : 'Уақытты таңдаңыз', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'уақытты таңдау', diff --git a/packages/x-date-pickers/src/locales/nbNO.ts b/packages/x-date-pickers/src/locales/nbNO.ts index 2ac494635fcd..ba8b24553b95 100644 --- a/packages/x-date-pickers/src/locales/nbNO.ts +++ b/packages/x-date-pickers/src/locales/nbNO.ts @@ -65,9 +65,7 @@ const nbNOPickers: Partial> = { value !== null && utils.isValid(value) ? `Velg tid, valgt tid er ${utils.format(value, 'fullTime')}` : 'Velg tid', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'velg tid', diff --git a/packages/x-date-pickers/src/locales/nlNL.ts b/packages/x-date-pickers/src/locales/nlNL.ts index cde31272c0e9..8bd119e4b232 100644 --- a/packages/x-date-pickers/src/locales/nlNL.ts +++ b/packages/x-date-pickers/src/locales/nlNL.ts @@ -67,9 +67,7 @@ const nlNLPickers: Partial> = { value !== null && utils.isValid(value) ? `Kies tijd, geselecteerde tijd is ${utils.format(value, 'fullTime')}` : 'Kies tijd', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'kies tijd', diff --git a/packages/x-date-pickers/src/locales/plPL.ts b/packages/x-date-pickers/src/locales/plPL.ts index 49c501784ec4..cb88ca49db16 100644 --- a/packages/x-date-pickers/src/locales/plPL.ts +++ b/packages/x-date-pickers/src/locales/plPL.ts @@ -65,9 +65,7 @@ const plPLPickers: Partial> = { value !== null && utils.isValid(value) ? `Wybierz czas, obecnie wybrany czas to ${utils.format(value, 'fullTime')}` : 'Wybierz czas', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'wybierz czas', diff --git a/packages/x-date-pickers/src/locales/ptBR.ts b/packages/x-date-pickers/src/locales/ptBR.ts index b1c85498b3e3..f5835ddf3a5e 100644 --- a/packages/x-date-pickers/src/locales/ptBR.ts +++ b/packages/x-date-pickers/src/locales/ptBR.ts @@ -67,9 +67,7 @@ const ptBRPickers: Partial> = { value !== null && utils.isValid(value) ? `Escolha uma hora, hora selecionada ${utils.format(value, 'fullTime')}` : 'Escolha uma hora', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'escolha uma hora', diff --git a/packages/x-date-pickers/src/locales/roRO.ts b/packages/x-date-pickers/src/locales/roRO.ts index e1e37b671d6a..845c31f8d812 100644 --- a/packages/x-date-pickers/src/locales/roRO.ts +++ b/packages/x-date-pickers/src/locales/roRO.ts @@ -68,9 +68,7 @@ const roROPickers: Partial> = { value !== null && utils.isValid(value) ? `Selectați ora, ora selectată este ${utils.format(value, 'fullTime')}` : 'Selectați ora', - - // Clear button label - clearLabel: 'Buton golire conținut', + clearIconButtonLabel: 'Golire conținut', // Table labels timeTableLabel: 'Selectați ora', diff --git a/packages/x-date-pickers/src/locales/ruRU.ts b/packages/x-date-pickers/src/locales/ruRU.ts index 6b187ff12eba..0f7c2c67611a 100644 --- a/packages/x-date-pickers/src/locales/ruRU.ts +++ b/packages/x-date-pickers/src/locales/ruRU.ts @@ -66,9 +66,7 @@ const ruRUPickers: Partial> = { value !== null && utils.isValid(value) ? `Выберите время, выбрано время ${utils.format(value, 'fullTime')}` : 'Выберите время', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'выбрать время', diff --git a/packages/x-date-pickers/src/locales/skSK.ts b/packages/x-date-pickers/src/locales/skSK.ts index 004db0e0425b..e54c87914ef6 100644 --- a/packages/x-date-pickers/src/locales/skSK.ts +++ b/packages/x-date-pickers/src/locales/skSK.ts @@ -66,9 +66,7 @@ const skSKPickers: Partial> = { value !== null && utils.isValid(value) ? `Vyberte čas, vybraný čas je ${utils.format(value, 'fullTime')}` : 'Vyberte čas', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'vyberte čas', diff --git a/packages/x-date-pickers/src/locales/svSE.ts b/packages/x-date-pickers/src/locales/svSE.ts index 8a0e6579d7a7..ab2835798cb9 100644 --- a/packages/x-date-pickers/src/locales/svSE.ts +++ b/packages/x-date-pickers/src/locales/svSE.ts @@ -65,9 +65,7 @@ const svSEPickers: Partial> = { value !== null && utils.isValid(value) ? `Välj tid, vald tid är ${utils.format(value, 'fullTime')}` : 'Välj tid', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'välj tid', diff --git a/packages/x-date-pickers/src/locales/trTR.ts b/packages/x-date-pickers/src/locales/trTR.ts index b07cdc8c59d6..b218c1d2858d 100644 --- a/packages/x-date-pickers/src/locales/trTR.ts +++ b/packages/x-date-pickers/src/locales/trTR.ts @@ -65,9 +65,7 @@ const trTRPickers: Partial> = { value !== null && utils.isValid(value) ? `Saat seçin, seçilen saat: ${utils.format(value, 'fullTime')}` : 'Saat seç', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'saat seç', diff --git a/packages/x-date-pickers/src/locales/ukUA.ts b/packages/x-date-pickers/src/locales/ukUA.ts index efd82c36efad..864b14131560 100644 --- a/packages/x-date-pickers/src/locales/ukUA.ts +++ b/packages/x-date-pickers/src/locales/ukUA.ts @@ -65,9 +65,7 @@ const ukUAPickers: Partial> = { value !== null && utils.isValid(value) ? `Оберіть час, обраний час ${utils.format(value, 'fullTime')}` : 'Оберіть час', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'оберіть час', diff --git a/packages/x-date-pickers/src/locales/urPK.ts b/packages/x-date-pickers/src/locales/urPK.ts index 63b26494cb1c..48e7fc686f17 100644 --- a/packages/x-date-pickers/src/locales/urPK.ts +++ b/packages/x-date-pickers/src/locales/urPK.ts @@ -65,9 +65,7 @@ const urPKPickers: Partial> = { value !== null && utils.isValid(value) ? `وقت منتخب کریں، منتخب شدہ وقت ہے ${utils.format(value, 'fullTime')}` : 'وقت منتخب کریں', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'وقت منتخب کریں', diff --git a/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts b/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts index 8427af204e2a..f516f72b6851 100644 --- a/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts +++ b/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts @@ -64,7 +64,7 @@ export interface PickersComponentAgnosticLocaleText { openTimePickerDialogue: (date: TDate | null, utils: MuiPickersAdapter) => string; // Clear button label - clearLabel: string; + clearIconButtonLabel: string; // Table labels timeTableLabel: string; diff --git a/packages/x-date-pickers/src/locales/viVN.ts b/packages/x-date-pickers/src/locales/viVN.ts index bdece16d48d9..412d4cb9559a 100644 --- a/packages/x-date-pickers/src/locales/viVN.ts +++ b/packages/x-date-pickers/src/locales/viVN.ts @@ -67,9 +67,7 @@ const viVNPickers: Partial> = { value !== null && utils.isValid(value) ? `Chọn giờ, giờ đã chọn là ${utils.format(value, 'fullTime')}` : 'Chọn giờ', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: 'chọn giờ', diff --git a/packages/x-date-pickers/src/locales/zhCN.ts b/packages/x-date-pickers/src/locales/zhCN.ts index ccbbedb9a9f5..ace7a53e4935 100644 --- a/packages/x-date-pickers/src/locales/zhCN.ts +++ b/packages/x-date-pickers/src/locales/zhCN.ts @@ -63,9 +63,7 @@ const zhCNPickers: Partial> = { value !== null && utils.isValid(value) ? `选择时间，已选择${utils.format(value, 'fullTime')}` : '选择时间', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: '选择时间', diff --git a/packages/x-date-pickers/src/locales/zhHK.ts b/packages/x-date-pickers/src/locales/zhHK.ts index 8270466c3b2e..e4b446843a64 100644 --- a/packages/x-date-pickers/src/locales/zhHK.ts +++ b/packages/x-date-pickers/src/locales/zhHK.ts @@ -63,9 +63,7 @@ const zhHKPickers: Partial> = { value !== null && utils.isValid(value) ? `選擇時間，已選擇${utils.format(value, 'fullTime')}` : '選擇時間', - - // Clear button label - // clearLabel: 'Clear button', + // clearIconButtonLabel: 'Clear value', // Table labels timeTableLabel: '選擇時間', From 8107e9ba2146660665adb59ba29310d54c2d08a7 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Wed, 27 Sep 2023 16:55:01 +0300 Subject: [PATCH 51/55] add support for components and componentProps --- .../SingleInputDateRangeField.tsx | 2 ++ .../SingleInputDateTimeRangeField.tsx | 2 ++ .../SingleInputTimeRangeField.tsx | 2 ++ packages/x-date-pickers/src/DateField/DateField.tsx | 2 ++ .../src/DateTimeField/DateTimeField.tsx | 2 ++ packages/x-date-pickers/src/TimeField/TimeField.tsx | 2 ++ .../x-date-pickers/src/hooks/useClearableField.tsx | 12 ++++++++---- 7 files changed, 20 insertions(+), 4 deletions(-) diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx index cbde32ff74a9..940008ed2275 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx @@ -69,6 +69,8 @@ const SingleInputDateRangeField = React.forwardRef(function SingleInputDateRange InputProps: fieldProps.InputProps, slots, slotProps, + components, + componentsProps, }); return ( diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx index fe09edddf623..9cc316ba7039 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx @@ -70,6 +70,8 @@ const SingleInputDateTimeRangeField = React.forwardRef(function SingleInputDateT InputProps: fieldProps.InputProps, slots, slotProps, + components, + componentsProps, }); return ( diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx index f87c32542110..117bda6e8b5c 100644 --- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx @@ -69,6 +69,8 @@ const SingleInputTimeRangeField = React.forwardRef(function SingleInputTimeRange InputProps: fieldProps.InputProps, slots, slotProps, + components, + componentsProps, }); return ( diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx index bbd7070320be..6d64df93608b 100644 --- a/packages/x-date-pickers/src/DateField/DateField.tsx +++ b/packages/x-date-pickers/src/DateField/DateField.tsx @@ -68,6 +68,8 @@ const DateField = React.forwardRef(function DateField( InputProps: fieldProps.InputProps, slots, slotProps, + components, + componentsProps, }); return ( diff --git a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx index ea6a34e25faf..a855ec96def9 100644 --- a/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx +++ b/packages/x-date-pickers/src/DateTimeField/DateTimeField.tsx @@ -70,6 +70,8 @@ const DateTimeField = React.forwardRef(function DateTimeField( InputProps: fieldProps.InputProps, slots, slotProps, + components, + componentsProps, }); return ( ( InputProps: fieldProps.InputProps, slots, slotProps, + components, + componentsProps, }); return ( diff --git a/packages/x-date-pickers/src/hooks/useClearableField.tsx b/packages/x-date-pickers/src/hooks/useClearableField.tsx index c55a98c6e623..b4f1ea237e68 100644 --- a/packages/x-date-pickers/src/hooks/useClearableField.tsx +++ b/packages/x-date-pickers/src/hooks/useClearableField.tsx @@ -22,6 +22,8 @@ type UseClearableFieldProps< onClear: React.MouseEventHandler; slots?: { [K in keyof TFieldSlots as Uncapitalize]: TFieldSlots[K] }; slotProps?: TFieldSlotsComponentsProps; + components?: TFieldSlots; + componentsProps?: TFieldSlotsComponentsProps; }; export const useClearableField = < @@ -36,6 +38,8 @@ export const useClearableField = < onClear, slots, slotProps, + components, + componentsProps, }: UseClearableFieldProps< TFieldProps, TInputProps, @@ -44,17 +48,17 @@ export const useClearableField = < >) => { const localeText = useLocaleText(); - const IconButton = slots?.clearButton ?? MuiIconButton; + const IconButton = slots?.clearButton ?? components?.ClearButton ?? MuiIconButton; // The spread is here to avoid this bug mui/material-ui#34056 const { ownerState, ...iconButtonProps } = useSlotProps({ elementType: IconButton, - externalSlotProps: slotProps?.clearButton, + externalSlotProps: slotProps?.clearButton ?? componentsProps?.clearButton, ownerState: {}, }); - const EndClearIcon = slots?.clearIcon ?? ClearIcon; + const EndClearIcon = slots?.clearIcon ?? components?.ClearIcon ?? ClearIcon; const endClearIconProps = useSlotProps({ elementType: EndClearIcon, - externalSlotProps: slotProps?.clearIcon, + externalSlotProps: slotProps?.clearIcon ?? componentsProps?.clearIcon, ownerState: {}, className: 'clearButton', additionalProps: { From c1f0c8a35d0750a57207cee3eb29d1bb69f49a20 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Thu, 28 Sep 2023 11:28:19 +0300 Subject: [PATCH 52/55] rename fieldClearLabel --- packages/x-date-pickers/src/hooks/useClearableField.tsx | 2 +- packages/x-date-pickers/src/locales/beBY.ts | 2 +- packages/x-date-pickers/src/locales/caES.ts | 2 +- packages/x-date-pickers/src/locales/csCZ.ts | 2 +- packages/x-date-pickers/src/locales/daDK.ts | 2 +- packages/x-date-pickers/src/locales/deDE.ts | 2 +- packages/x-date-pickers/src/locales/elGR.ts | 2 +- packages/x-date-pickers/src/locales/enUS.ts | 2 +- packages/x-date-pickers/src/locales/esES.ts | 2 +- packages/x-date-pickers/src/locales/faIR.ts | 2 +- packages/x-date-pickers/src/locales/fiFI.ts | 2 +- packages/x-date-pickers/src/locales/frFR.ts | 2 +- packages/x-date-pickers/src/locales/heIL.ts | 2 +- packages/x-date-pickers/src/locales/huHU.ts | 2 +- packages/x-date-pickers/src/locales/isIS.ts | 2 +- packages/x-date-pickers/src/locales/itIT.ts | 2 +- packages/x-date-pickers/src/locales/jaJP.ts | 2 +- packages/x-date-pickers/src/locales/koKR.ts | 2 +- packages/x-date-pickers/src/locales/kzKZ.ts | 2 +- packages/x-date-pickers/src/locales/nbNO.ts | 2 +- packages/x-date-pickers/src/locales/nlNL.ts | 2 +- packages/x-date-pickers/src/locales/plPL.ts | 2 +- packages/x-date-pickers/src/locales/ptBR.ts | 2 +- packages/x-date-pickers/src/locales/roRO.ts | 2 +- packages/x-date-pickers/src/locales/ruRU.ts | 2 +- packages/x-date-pickers/src/locales/skSK.ts | 2 +- packages/x-date-pickers/src/locales/svSE.ts | 2 +- packages/x-date-pickers/src/locales/trTR.ts | 2 +- packages/x-date-pickers/src/locales/ukUA.ts | 2 +- packages/x-date-pickers/src/locales/urPK.ts | 2 +- .../x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts | 2 +- packages/x-date-pickers/src/locales/viVN.ts | 2 +- packages/x-date-pickers/src/locales/zhCN.ts | 2 +- packages/x-date-pickers/src/locales/zhHK.ts | 2 +- 34 files changed, 34 insertions(+), 34 deletions(-) diff --git a/packages/x-date-pickers/src/hooks/useClearableField.tsx b/packages/x-date-pickers/src/hooks/useClearableField.tsx index b4f1ea237e68..1e7baefddab6 100644 --- a/packages/x-date-pickers/src/hooks/useClearableField.tsx +++ b/packages/x-date-pickers/src/hooks/useClearableField.tsx @@ -62,7 +62,7 @@ export const useClearableField = < ownerState: {}, className: 'clearButton', additionalProps: { - title: localeText.clearIconButtonLabel, + title: localeText.fieldClearLabel, }, }); diff --git a/packages/x-date-pickers/src/locales/beBY.ts b/packages/x-date-pickers/src/locales/beBY.ts index 5626f3c125c2..ff290e09184b 100644 --- a/packages/x-date-pickers/src/locales/beBY.ts +++ b/packages/x-date-pickers/src/locales/beBY.ts @@ -66,7 +66,7 @@ const beBYPickers: Partial> = { value !== null && utils.isValid(value) ? `Абраць час, абрыны час ${utils.format(value, 'fullTime')}` : 'Абраць час', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'абраць час', diff --git a/packages/x-date-pickers/src/locales/caES.ts b/packages/x-date-pickers/src/locales/caES.ts index 73ae637f23de..ad82c3f7c3ec 100644 --- a/packages/x-date-pickers/src/locales/caES.ts +++ b/packages/x-date-pickers/src/locales/caES.ts @@ -67,7 +67,7 @@ const caESPickers: Partial> = { value !== null && utils.isValid(value) ? `Tria l'hora, l'hora triada és ${utils.format(value, 'fullTime')}` : "Tria l'hora", - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'tria la data', diff --git a/packages/x-date-pickers/src/locales/csCZ.ts b/packages/x-date-pickers/src/locales/csCZ.ts index 39a044b360af..baab53b389af 100644 --- a/packages/x-date-pickers/src/locales/csCZ.ts +++ b/packages/x-date-pickers/src/locales/csCZ.ts @@ -66,7 +66,7 @@ const csCZPickers: Partial> = { value !== null && utils.isValid(value) ? `Vyberte čas, vybraný čas je ${utils.format(value, 'fullTime')}` : 'Vyberte čas', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'vyberte čas', diff --git a/packages/x-date-pickers/src/locales/daDK.ts b/packages/x-date-pickers/src/locales/daDK.ts index b2d834645613..45be74c3579f 100644 --- a/packages/x-date-pickers/src/locales/daDK.ts +++ b/packages/x-date-pickers/src/locales/daDK.ts @@ -68,7 +68,7 @@ const daDKPickers: Partial> = { value !== null && utils.isValid(value) ? `Vælg tidspunkt, valgte tidspunkt er ${utils.format(value, 'fullTime')}` : 'Vælg tidspunkt', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'vælg tidspunkt', diff --git a/packages/x-date-pickers/src/locales/deDE.ts b/packages/x-date-pickers/src/locales/deDE.ts index e259769e8199..01bee187797d 100644 --- a/packages/x-date-pickers/src/locales/deDE.ts +++ b/packages/x-date-pickers/src/locales/deDE.ts @@ -68,7 +68,7 @@ const deDEPickers: Partial> = { value !== null && utils.isValid(value) ? `Uhrzeit auswählen, gewählte Uhrzeit ist ${utils.format(value, 'fullTime')}` : 'Uhrzeit auswählen', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'Uhrzeit auswählen', diff --git a/packages/x-date-pickers/src/locales/elGR.ts b/packages/x-date-pickers/src/locales/elGR.ts index c0bbab6d566f..2c4ae628dc82 100644 --- a/packages/x-date-pickers/src/locales/elGR.ts +++ b/packages/x-date-pickers/src/locales/elGR.ts @@ -67,7 +67,7 @@ const elGRPickers: Partial> = { value !== null && utils.isValid(value) ? `Επιλέξτε ώρα, η επιλεγμένη ώρα είναι ${utils.format(value, 'fullTime')}` : 'Επιλέξτε ώρα', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'επιλέξτε ώρα', diff --git a/packages/x-date-pickers/src/locales/enUS.ts b/packages/x-date-pickers/src/locales/enUS.ts index 775e7cfd1bc1..f46dde84fe5b 100644 --- a/packages/x-date-pickers/src/locales/enUS.ts +++ b/packages/x-date-pickers/src/locales/enUS.ts @@ -60,7 +60,7 @@ const enUSPickers: PickersLocaleText = { ? `Choose time, selected time is ${utils.format(value, 'fullTime')}` : 'Choose time', - clearIconButtonLabel: 'Clear value', + fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'pick time', diff --git a/packages/x-date-pickers/src/locales/esES.ts b/packages/x-date-pickers/src/locales/esES.ts index 52a86c50d5f3..273cf066ef20 100644 --- a/packages/x-date-pickers/src/locales/esES.ts +++ b/packages/x-date-pickers/src/locales/esES.ts @@ -67,7 +67,7 @@ const esESPickers: Partial> = { value !== null && utils.isValid(value) ? `Elige la hora, la hora elegido es ${utils.format(value, 'fullTime')}` : 'Elige la hora', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'elige la fecha', diff --git a/packages/x-date-pickers/src/locales/faIR.ts b/packages/x-date-pickers/src/locales/faIR.ts index ad8a5de0e82c..64545ebd2a26 100644 --- a/packages/x-date-pickers/src/locales/faIR.ts +++ b/packages/x-date-pickers/src/locales/faIR.ts @@ -67,7 +67,7 @@ const faIRPickers: Partial> = { value !== null && utils.isValid(value) ? `ساعت را انتخاب کنید، ساعت انتخاب شده ${utils.format(value, 'fullTime')} می باشد` : 'ساعت را انتخاب کنید', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'انتخاب تاریخ', diff --git a/packages/x-date-pickers/src/locales/fiFI.ts b/packages/x-date-pickers/src/locales/fiFI.ts index febeaeac4340..9bcca993f08b 100644 --- a/packages/x-date-pickers/src/locales/fiFI.ts +++ b/packages/x-date-pickers/src/locales/fiFI.ts @@ -65,7 +65,7 @@ const fiFIPickers: Partial> = { value !== null && utils.isValid(value) ? `Valitse aika, valittu aika on ${utils.format(value, 'fullTime')}` : 'Valitse aika', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'valitse aika', diff --git a/packages/x-date-pickers/src/locales/frFR.ts b/packages/x-date-pickers/src/locales/frFR.ts index 27d10e7bd5b2..6fdb39d1e9ba 100644 --- a/packages/x-date-pickers/src/locales/frFR.ts +++ b/packages/x-date-pickers/src/locales/frFR.ts @@ -67,7 +67,7 @@ const frFRPickers: Partial> = { value !== null && utils.isValid(value) ? `Choisir l'heure, l'heure sélectionnée est ${utils.format(value, 'fullTime')}` : "Choisir l'heure", - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: "choix de l'heure", diff --git a/packages/x-date-pickers/src/locales/heIL.ts b/packages/x-date-pickers/src/locales/heIL.ts index 973e29f85eae..98f438249a0c 100644 --- a/packages/x-date-pickers/src/locales/heIL.ts +++ b/packages/x-date-pickers/src/locales/heIL.ts @@ -65,7 +65,7 @@ const heILPickers: Partial> = { value !== null && utils.isValid(value) ? `בחירת שעה, השעה שנבחרה היא ${utils.format(value, 'fullTime')}` : 'בחירת שעה', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'בחירת שעה', diff --git a/packages/x-date-pickers/src/locales/huHU.ts b/packages/x-date-pickers/src/locales/huHU.ts index 3a2a01cad4c7..3738aa46e1af 100644 --- a/packages/x-date-pickers/src/locales/huHU.ts +++ b/packages/x-date-pickers/src/locales/huHU.ts @@ -68,7 +68,7 @@ const huHUPickers: Partial> = { value !== null && utils.isValid(value) ? `Válasszon időt, a kiválasztott idő: ${utils.format(value, 'fullTime')}` : 'Válasszon időt', - clearIconButtonLabel: 'Tartalom ürítése', + fieldClearLabel: 'Tartalom ürítése', // Table labels timeTableLabel: 'válasszon időt', diff --git a/packages/x-date-pickers/src/locales/isIS.ts b/packages/x-date-pickers/src/locales/isIS.ts index 619e08257b97..e478eefdd3f3 100644 --- a/packages/x-date-pickers/src/locales/isIS.ts +++ b/packages/x-date-pickers/src/locales/isIS.ts @@ -65,7 +65,7 @@ const isISPickers: Partial> = { value !== null && utils.isValid(value) ? `Velja tíma, valinn tími er ${utils.format(value, 'fullTime')}` : 'Velja tíma', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'velja tíma', diff --git a/packages/x-date-pickers/src/locales/itIT.ts b/packages/x-date-pickers/src/locales/itIT.ts index f02ccd44879f..e7ac7b62703b 100644 --- a/packages/x-date-pickers/src/locales/itIT.ts +++ b/packages/x-date-pickers/src/locales/itIT.ts @@ -67,7 +67,7 @@ const itITPickers: Partial> = { value !== null && utils.isValid(value) ? `Scegli l'ora, l'ora selezionata è ${utils.format(value, 'fullTime')}` : "Scegli l'ora", - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: "scegli un'ora", diff --git a/packages/x-date-pickers/src/locales/jaJP.ts b/packages/x-date-pickers/src/locales/jaJP.ts index dcf2f7a55cc4..0d822813e62d 100644 --- a/packages/x-date-pickers/src/locales/jaJP.ts +++ b/packages/x-date-pickers/src/locales/jaJP.ts @@ -68,7 +68,7 @@ const jaJPPickers: Partial> = { value !== null && utils.isValid(value) ? `時間を選択してください。選択した時間は ${utils.format(value, 'fullTime')} です` : '時間を選択してください', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: '時間を選択', diff --git a/packages/x-date-pickers/src/locales/koKR.ts b/packages/x-date-pickers/src/locales/koKR.ts index c52319e5c56d..51c64f0c4bb4 100644 --- a/packages/x-date-pickers/src/locales/koKR.ts +++ b/packages/x-date-pickers/src/locales/koKR.ts @@ -67,7 +67,7 @@ const koKRPickers: Partial> = { value !== null && utils.isValid(value) ? `시간을 선택하세요. 현재 선택된 시간은 ${utils.format(value, 'fullTime')}입니다.` : '시간을 선택하세요', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: '선택한 시간', diff --git a/packages/x-date-pickers/src/locales/kzKZ.ts b/packages/x-date-pickers/src/locales/kzKZ.ts index d98d11af7d5f..c27450d3df48 100644 --- a/packages/x-date-pickers/src/locales/kzKZ.ts +++ b/packages/x-date-pickers/src/locales/kzKZ.ts @@ -66,7 +66,7 @@ const kzKZPickers: Partial> = { value !== null && utils.isValid(value) ? `Уақытты таңдаңыз, таңдалған уақыт ${utils.format(value, 'fullTime')}` : 'Уақытты таңдаңыз', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'уақытты таңдау', diff --git a/packages/x-date-pickers/src/locales/nbNO.ts b/packages/x-date-pickers/src/locales/nbNO.ts index ba8b24553b95..68b44e72e9c2 100644 --- a/packages/x-date-pickers/src/locales/nbNO.ts +++ b/packages/x-date-pickers/src/locales/nbNO.ts @@ -65,7 +65,7 @@ const nbNOPickers: Partial> = { value !== null && utils.isValid(value) ? `Velg tid, valgt tid er ${utils.format(value, 'fullTime')}` : 'Velg tid', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'velg tid', diff --git a/packages/x-date-pickers/src/locales/nlNL.ts b/packages/x-date-pickers/src/locales/nlNL.ts index 8bd119e4b232..56477a3234d5 100644 --- a/packages/x-date-pickers/src/locales/nlNL.ts +++ b/packages/x-date-pickers/src/locales/nlNL.ts @@ -67,7 +67,7 @@ const nlNLPickers: Partial> = { value !== null && utils.isValid(value) ? `Kies tijd, geselecteerde tijd is ${utils.format(value, 'fullTime')}` : 'Kies tijd', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'kies tijd', diff --git a/packages/x-date-pickers/src/locales/plPL.ts b/packages/x-date-pickers/src/locales/plPL.ts index cb88ca49db16..dc2133f322d6 100644 --- a/packages/x-date-pickers/src/locales/plPL.ts +++ b/packages/x-date-pickers/src/locales/plPL.ts @@ -65,7 +65,7 @@ const plPLPickers: Partial> = { value !== null && utils.isValid(value) ? `Wybierz czas, obecnie wybrany czas to ${utils.format(value, 'fullTime')}` : 'Wybierz czas', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'wybierz czas', diff --git a/packages/x-date-pickers/src/locales/ptBR.ts b/packages/x-date-pickers/src/locales/ptBR.ts index f5835ddf3a5e..4b0d4ccfa96c 100644 --- a/packages/x-date-pickers/src/locales/ptBR.ts +++ b/packages/x-date-pickers/src/locales/ptBR.ts @@ -67,7 +67,7 @@ const ptBRPickers: Partial> = { value !== null && utils.isValid(value) ? `Escolha uma hora, hora selecionada ${utils.format(value, 'fullTime')}` : 'Escolha uma hora', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'escolha uma hora', diff --git a/packages/x-date-pickers/src/locales/roRO.ts b/packages/x-date-pickers/src/locales/roRO.ts index 845c31f8d812..2334197303ae 100644 --- a/packages/x-date-pickers/src/locales/roRO.ts +++ b/packages/x-date-pickers/src/locales/roRO.ts @@ -68,7 +68,7 @@ const roROPickers: Partial> = { value !== null && utils.isValid(value) ? `Selectați ora, ora selectată este ${utils.format(value, 'fullTime')}` : 'Selectați ora', - clearIconButtonLabel: 'Golire conținut', + fieldClearLabel: 'Golire conținut', // Table labels timeTableLabel: 'Selectați ora', diff --git a/packages/x-date-pickers/src/locales/ruRU.ts b/packages/x-date-pickers/src/locales/ruRU.ts index 0f7c2c67611a..8f98d866c4c6 100644 --- a/packages/x-date-pickers/src/locales/ruRU.ts +++ b/packages/x-date-pickers/src/locales/ruRU.ts @@ -66,7 +66,7 @@ const ruRUPickers: Partial> = { value !== null && utils.isValid(value) ? `Выберите время, выбрано время ${utils.format(value, 'fullTime')}` : 'Выберите время', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'выбрать время', diff --git a/packages/x-date-pickers/src/locales/skSK.ts b/packages/x-date-pickers/src/locales/skSK.ts index e54c87914ef6..96cdfd13bde1 100644 --- a/packages/x-date-pickers/src/locales/skSK.ts +++ b/packages/x-date-pickers/src/locales/skSK.ts @@ -66,7 +66,7 @@ const skSKPickers: Partial> = { value !== null && utils.isValid(value) ? `Vyberte čas, vybraný čas je ${utils.format(value, 'fullTime')}` : 'Vyberte čas', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'vyberte čas', diff --git a/packages/x-date-pickers/src/locales/svSE.ts b/packages/x-date-pickers/src/locales/svSE.ts index ab2835798cb9..498c02df0c2b 100644 --- a/packages/x-date-pickers/src/locales/svSE.ts +++ b/packages/x-date-pickers/src/locales/svSE.ts @@ -65,7 +65,7 @@ const svSEPickers: Partial> = { value !== null && utils.isValid(value) ? `Välj tid, vald tid är ${utils.format(value, 'fullTime')}` : 'Välj tid', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'välj tid', diff --git a/packages/x-date-pickers/src/locales/trTR.ts b/packages/x-date-pickers/src/locales/trTR.ts index b218c1d2858d..948c0cc1e2b0 100644 --- a/packages/x-date-pickers/src/locales/trTR.ts +++ b/packages/x-date-pickers/src/locales/trTR.ts @@ -65,7 +65,7 @@ const trTRPickers: Partial> = { value !== null && utils.isValid(value) ? `Saat seçin, seçilen saat: ${utils.format(value, 'fullTime')}` : 'Saat seç', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'saat seç', diff --git a/packages/x-date-pickers/src/locales/ukUA.ts b/packages/x-date-pickers/src/locales/ukUA.ts index 864b14131560..d9895177ac12 100644 --- a/packages/x-date-pickers/src/locales/ukUA.ts +++ b/packages/x-date-pickers/src/locales/ukUA.ts @@ -65,7 +65,7 @@ const ukUAPickers: Partial> = { value !== null && utils.isValid(value) ? `Оберіть час, обраний час ${utils.format(value, 'fullTime')}` : 'Оберіть час', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'оберіть час', diff --git a/packages/x-date-pickers/src/locales/urPK.ts b/packages/x-date-pickers/src/locales/urPK.ts index 48e7fc686f17..ab0043a0aef9 100644 --- a/packages/x-date-pickers/src/locales/urPK.ts +++ b/packages/x-date-pickers/src/locales/urPK.ts @@ -65,7 +65,7 @@ const urPKPickers: Partial> = { value !== null && utils.isValid(value) ? `وقت منتخب کریں، منتخب شدہ وقت ہے ${utils.format(value, 'fullTime')}` : 'وقت منتخب کریں', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'وقت منتخب کریں', diff --git a/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts b/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts index f516f72b6851..e7a6e8e6e0e1 100644 --- a/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts +++ b/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts @@ -64,7 +64,7 @@ export interface PickersComponentAgnosticLocaleText { openTimePickerDialogue: (date: TDate | null, utils: MuiPickersAdapter) => string; // Clear button label - clearIconButtonLabel: string; + fieldClearLabel: string; // Table labels timeTableLabel: string; diff --git a/packages/x-date-pickers/src/locales/viVN.ts b/packages/x-date-pickers/src/locales/viVN.ts index 412d4cb9559a..638f4c58fdf6 100644 --- a/packages/x-date-pickers/src/locales/viVN.ts +++ b/packages/x-date-pickers/src/locales/viVN.ts @@ -67,7 +67,7 @@ const viVNPickers: Partial> = { value !== null && utils.isValid(value) ? `Chọn giờ, giờ đã chọn là ${utils.format(value, 'fullTime')}` : 'Chọn giờ', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: 'chọn giờ', diff --git a/packages/x-date-pickers/src/locales/zhCN.ts b/packages/x-date-pickers/src/locales/zhCN.ts index ace7a53e4935..ec77887c5bed 100644 --- a/packages/x-date-pickers/src/locales/zhCN.ts +++ b/packages/x-date-pickers/src/locales/zhCN.ts @@ -63,7 +63,7 @@ const zhCNPickers: Partial> = { value !== null && utils.isValid(value) ? `选择时间，已选择${utils.format(value, 'fullTime')}` : '选择时间', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: '选择时间', diff --git a/packages/x-date-pickers/src/locales/zhHK.ts b/packages/x-date-pickers/src/locales/zhHK.ts index e4b446843a64..c06008ad2916 100644 --- a/packages/x-date-pickers/src/locales/zhHK.ts +++ b/packages/x-date-pickers/src/locales/zhHK.ts @@ -63,7 +63,7 @@ const zhHKPickers: Partial> = { value !== null && utils.isValid(value) ? `選擇時間，已選擇${utils.format(value, 'fullTime')}` : '選擇時間', - // clearIconButtonLabel: 'Clear value', + // fieldClearLabel: 'Clear value', // Table labels timeTableLabel: '選擇時間', From acf758863e249301e8e25d962081f810e15db388 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Thu, 28 Sep 2023 12:00:43 +0300 Subject: [PATCH 53/55] fix clearButton title placement --- packages/x-date-pickers/src/hooks/useClearableField.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/x-date-pickers/src/hooks/useClearableField.tsx b/packages/x-date-pickers/src/hooks/useClearableField.tsx index 1e7baefddab6..54d99615d0d1 100644 --- a/packages/x-date-pickers/src/hooks/useClearableField.tsx +++ b/packages/x-date-pickers/src/hooks/useClearableField.tsx @@ -54,16 +54,16 @@ export const useClearableField = < elementType: IconButton, externalSlotProps: slotProps?.clearButton ?? componentsProps?.clearButton, ownerState: {}, + className: 'clearButton', + additionalProps: { + title: localeText.fieldClearLabel, + }, }); const EndClearIcon = slots?.clearIcon ?? components?.ClearIcon ?? ClearIcon; const endClearIconProps = useSlotProps({ elementType: EndClearIcon, externalSlotProps: slotProps?.clearIcon ?? componentsProps?.clearIcon, ownerState: {}, - className: 'clearButton', - additionalProps: { - title: localeText.fieldClearLabel, - }, }); const InputProps = { From aafaca3ef48e343b92c342ee7e8b190fff03aeb0 Mon Sep 17 00:00:00 2001 From: Nora <72460825+noraleonte@users.noreply.github.com> Date: Thu, 28 Sep 2023 13:39:58 +0300 Subject: [PATCH 54/55] Lukas review Co-authored-by: Lukas Signed-off-by: Nora <72460825+noraleonte@users.noreply.github.com> --- packages/x-date-pickers/src/hooks/useClearableField.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/x-date-pickers/src/hooks/useClearableField.tsx b/packages/x-date-pickers/src/hooks/useClearableField.tsx index 54d99615d0d1..9ef842fe9aaa 100644 --- a/packages/x-date-pickers/src/hooks/useClearableField.tsx +++ b/packages/x-date-pickers/src/hooks/useClearableField.tsx @@ -90,15 +90,15 @@ export const useClearableField = < sx: [ { '& .clearButton': { - visibility: 'visible', + opacity: 1 }, '@media (pointer: fine)': { '& .clearButton': { - visibility: 'hidden', + opacity: 0, }, '&:hover, &:focus-within': { '.clearButton': { - visibility: 'visible', + opacity: 1, }, }, }, From 089d4679a596c029eb26c626d12bd4d888b0ae83 Mon Sep 17 00:00:00 2001 From: noraleonte Date: Thu, 28 Sep 2023 13:46:12 +0300 Subject: [PATCH 55/55] replace visibility with opacity --- packages/x-date-pickers/src/hooks/useClearableField.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/x-date-pickers/src/hooks/useClearableField.tsx b/packages/x-date-pickers/src/hooks/useClearableField.tsx index 9ef842fe9aaa..ee37ea49af38 100644 --- a/packages/x-date-pickers/src/hooks/useClearableField.tsx +++ b/packages/x-date-pickers/src/hooks/useClearableField.tsx @@ -90,7 +90,7 @@ export const useClearableField = < sx: [ { '& .clearButton': { - opacity: 1 + opacity: 1, }, '@media (pointer: fine)': { '& .clearButton': {