@pega/cosmos-react-core 4.0.0-dev.6.1 → 4.0.0-dev.8.0

package/lib/components/DateTime/Input/DateInput.js

@@ -52,7 +52,7 @@ const convertToCallbackParameter = (date, parts) => {
 };
 const DateInput = forwardRef((props, ref) => {
     const { locale } = useConfiguration();
-    const { defaultValue, value = defaultValue, min, max, id, label, labelHidden, info = getDateFormat(locale).join(''), status, required, readOnly, disabled, onChange, onFocus, onBlur, onResolveSuggestion, showWeekNumber, picker: { renderer: PickerComp = DatePicker, rendererProps = {} } = {}, autoFocus, additionalInfo, ...restProps } = props;
+    const { defaultValue, value = defaultValue, min, max, id, label, labelHidden, info = getDateFormat(locale).join(''), status, required, readOnly, disabled, onChange, onFocus, onBlur, onResolveSuggestion, showWeekNumber, picker: { renderer: PickerComp = DatePicker, rendererProps = {} } = {}, autoFocus, additionalInfo, handle, ...restProps } = props;
     const t = useI18n();
     const date = value !== undefined ? parseToDate(value) : undefined;
     const [yearInputRef, monthInputRef, dayInputRef] = [
@@ -116,6 +116,17 @@ const DateInput = forwardRef((props, ref) => {
     const YearInput = (_jsx(PartInput, { placeholder: t('year_placeholder'), "aria-label": displayNames.of('year'), value: date?.getUTCFullYear(), onChange: onInputChange, size: 4, maxLength: 4, padWithZeros: false, readOnly: readOnly, min: 1, ref: yearInputRef }, 'year'));
     const containerRef = useRef(null);
     useFocusWithin([containerRef], onFocusChange);
+    useImperativeHandle(handle, () => ({
+        clear: () => {
+            if (dayInputRef.current)
+                dayInputRef.current.value = '';
+            if (monthInputRef.current)
+                monthInputRef.current.value = '';
+            if (yearInputRef.current)
+                yearInputRef.current.value = '';
+            onInputChange();
+        }
+    }), [onInputChange]);
     useImperativeHandle(ref, () => ({
         setOpen,
         buttonEl,

package/lib/components/DateTime/Input/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ClipboardEvent,\n  FunctionComponent,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useRef,\n  RefObject,\n  Dispatch,\n  SetStateAction,\n  useImperativeHandle,\n  useEffect,\n  ComponentType\n} from 'react';\nimport styled from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport { useConfiguration, useFocusWithin, useI18n } from '../../../hooks';\nimport { ForwardProps } from '../../../types';\nimport FormField from '../../FormField';\nimport Flex from '../../Flex';\nimport Button from '../../Button';\nimport Icon, { registerIcon } from '../../Icon';\nimport * as timesIcon from '../../Icon/icons/times.icon';\nimport * as calendarIcon from '../../Icon/icons/calendar.icon';\nimport DatePicker from '../Picker/DatePicker';\nimport type DatePickerProps from '../Picker/DatePicker.types';\nimport Popover from '../../Popover';\nimport { FormControlProps, StyledFormControl } from '../../FormControl';\nimport DateTimeProps, { DateTimeCallbackParameter } from '../DateTime.types';\n\nimport {\n  getDateFormat,\n  parsePastedTextToDate,\n  parseToDate,\n  validateDate,\n  generatePickerButtonAriaLabel\n} from './utils';\nimport StyledDateTime, { StyledInputContainer } from './DateTime.styles';\nimport useAutoFocusNextInput from './useAutoFocusNextInput';\nimport PartInput from './PartInput';\nimport usePickerButton from './usePickerButton';\n\nregisterIcon(timesIcon, calendarIcon);\n\nexport interface DateInputProps extends DateTimeProps {\n  /**\n   * Display additional column with week number in date picker popover.\n   * @default false\n   */\n  showWeekNumber?: boolean;\n  /** Changes default date picker */\n  picker?: {\n    renderer: ComponentType;\n    rendererProps?: Partial<DatePickerProps> & ForwardProps;\n  };\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n}\n\nexport interface DateInputRefObject {\n  readonly value: Date | undefined;\n  setOpen: Dispatch<SetStateAction<boolean>>;\n  buttonEl: HTMLElement | null;\n}\n\nexport const StyledDateInput = styled(StyledDateTime)<DateInputProps>`\n  padding-inline-end: 0;\n`;\n\nStyledDateInput.defaultProps = defaultThemeProp;\n\nconst convertToCallbackParameter = (\n  date: Date,\n  parts: (string | undefined)[]\n): DateTimeCallbackParameter => {\n  if (parts.every(Boolean)) {\n    const [year, monthIndex, day] = parts.map(Number);\n\n    if (!validateDate(parts[0] ?? '', monthIndex + 1, day)) {\n      return {\n        valueAsISOString: '',\n        valueAsTimestamp: NaN,\n        state: 'invalid'\n      };\n    }\n\n    date.setUTCFullYear(year, monthIndex, day);\n    return {\n      valueAsISOString: date.toISOString(),\n      valueAsTimestamp: date.getTime()\n    };\n  }\n  if (parts.every(p => !p)) {\n    return {\n      valueAsISOString: '',\n      valueAsTimestamp: undefined\n    };\n  }\n  return {\n    valueAsISOString: '',\n    valueAsTimestamp: NaN,\n    state: 'incomplete'\n  };\n};\n\nconst DateInput: FunctionComponent<DateInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<DateInputProps>, ref: Ref<DateInputRefObject>) => {\n    const { locale } = useConfiguration();\n    const {\n      defaultValue,\n      value = defaultValue,\n      min,\n      max,\n      id,\n      label,\n      labelHidden,\n      info = getDateFormat(locale).join(''),\n      status,\n      required,\n      readOnly,\n      disabled,\n      onChange,\n      onFocus,\n      onBlur,\n      onResolveSuggestion,\n      showWeekNumber,\n      picker: { renderer: PickerComp = DatePicker, rendererProps = {} } = {},\n      autoFocus,\n      additionalInfo,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n\n    const date = value !== undefined ? parseToDate(value) : undefined;\n\n    const [yearInputRef, monthInputRef, dayInputRef] = [\n      useRef<HTMLInputElement>(null),\n      useRef<HTMLInputElement>(null),\n      useRef<HTMLInputElement>(null)\n    ];\n\n    const pickParts = () => {\n      const month = monthInputRef.current?.value\n        ? (Number(monthInputRef.current.value) - 1).toString()\n        : undefined;\n      return [\n        yearInputRef.current?.value || undefined,\n        month,\n        dayInputRef.current?.value || undefined\n      ];\n    };\n\n    const currentlySelectedDate = () => {\n      const parts = pickParts();\n      if (parts.every(Boolean)) {\n        const [year, monthIndex, day] = parts.map(Number);\n\n        return validateDate(parts[0] ?? '', monthIndex + 1, day)\n          ? new Date(Date.UTC(year, monthIndex, day))\n          : undefined;\n      }\n    };\n\n    const [open, setOpen, , setPopoverRef, buttonEl, setButtonEl] = usePickerButton();\n\n    const inputContainerRef = useRef<HTMLDivElement>(null);\n\n    const onFocusChange = (focused: boolean) => {\n      const callbackParam = convertToCallbackParameter(\n        date ? new Date(date) : new Date(),\n        pickParts()\n      );\n      if (onFocus && focused) onFocus(callbackParam);\n      if (!focused) {\n        if (inputContainerRef.current) inputContainerRef.current.scrollTop = 0;\n        onBlur?.(callbackParam);\n        setOpen(false);\n      }\n    };\n\n    const onInputChange = () => {\n      onChange?.(convertToCallbackParameter(date ? new Date(date) : new Date(), pickParts()));\n      buttonEl?.setAttribute(\n        'aria-label',\n        generatePickerButtonAriaLabel(currentlySelectedDate(), 'date', locale, t, open)\n      );\n    };\n\n    const setInputValue = (newValue: Date) => {\n      dayInputRef.current!.value = newValue.getUTCDate().toString().padStart(2, '0');\n      monthInputRef.current!.value = (newValue.getUTCMonth() + 1).toString().padStart(2, '0');\n      yearInputRef.current!.value = newValue.getUTCFullYear().toString();\n    };\n\n    const onPaste = (e: ClipboardEvent) => {\n      const text = e.clipboardData.getData('text');\n      const newDate = parsePastedTextToDate(text, locale, date || new Date());\n      if (newDate) {\n        e.preventDefault();\n        setInputValue(newDate);\n        onInputChange();\n      }\n    };\n\n    const displayNames = new Intl.DisplayNames(locale, { style: 'long', type: 'dateTimeField' });\n\n    const DayInput = (\n      <PartInput\n        key='day'\n        placeholder={t('day_placeholder')}\n        aria-label={displayNames.of('day')}\n        value={date?.getUTCDate()}\n        onChange={onInputChange}\n        size={2}\n        maxLength={2}\n        readOnly={readOnly}\n        min={1}\n        max={31}\n        ref={dayInputRef}\n      />\n    );\n\n    const MonthInput = (\n      <PartInput\n        key='month'\n        placeholder={t('month_placeholder')}\n        aria-label={displayNames.of('month')}\n        value={date ? date?.getUTCMonth() + 1 : undefined}\n        onChange={onInputChange}\n        size={2}\n        maxLength={2}\n        readOnly={readOnly}\n        min={1}\n        max={12}\n        ref={monthInputRef}\n      />\n    );\n\n    const YearInput = (\n      <PartInput\n        key='year'\n        placeholder={t('year_placeholder')}\n        aria-label={displayNames.of('year')}\n        value={date?.getUTCFullYear()}\n        onChange={onInputChange}\n        size={4}\n        maxLength={4}\n        padWithZeros={false}\n        readOnly={readOnly}\n        min={1}\n        ref={yearInputRef}\n      />\n    );\n\n    const containerRef = useRef<HTMLElement>(null);\n    useFocusWithin([containerRef], onFocusChange);\n\n    useImperativeHandle(ref, () => ({\n      setOpen,\n      buttonEl,\n      get value() {\n        return currentlySelectedDate();\n      }\n    }));\n\n    const PickerButton = (\n      <>\n        <Button\n          variant='simple'\n          icon\n          ref={setButtonEl}\n          onClick={() => setOpen(cur => !cur)}\n          aria-label={generatePickerButtonAriaLabel(\n            currentlySelectedDate(),\n            'date',\n            locale,\n            t,\n            open\n          )}\n          readOnly={readOnly}\n          disabled={disabled}\n        >\n          <Icon name={open ? 'times' : 'calendar'} />\n        </Button>\n        {open && (\n          <Popover\n            ref={setPopoverRef}\n            target={buttonEl}\n            placement='bottom-end'\n            strategy='fixed'\n            modifiers={[\n              {\n                name: 'flip',\n                options: {\n                  fallbackPlacements: ['top-end', 'right', 'left']\n                }\n              }\n            ]}\n          >\n            <PickerComp\n              selected={currentlySelectedDate()}\n              min={min}\n              max={max}\n              showWeekNumber={showWeekNumber}\n              {...rendererProps}\n              onChange={selected => {\n                setInputValue(selected);\n                setOpen(false);\n                setTimeout(() => buttonEl?.focus());\n                onInputChange();\n                rendererProps?.onChange?.(selected);\n              }}\n            />\n          </Popover>\n        )}\n      </>\n    );\n\n    const orderedRefs: RefObject<HTMLInputElement>[] = [];\n\n    const Comp = (\n      <Flex\n        as={StyledDateInput}\n        forwardedAs={StyledFormControl}\n        hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n        ref={containerRef}\n        onClick={(e: MouseEvent) => {\n          if (e.target === containerRef.current) orderedRefs[0].current?.focus();\n        }}\n        {...restProps}\n      >\n        <Flex\n          ref={inputContainerRef}\n          as={StyledInputContainer}\n          container={{ alignItems: 'center', wrap: 'wrap' }}\n          onPaste={onPaste}\n        >\n          {getDateFormat(locale).map(part => {\n            switch (part) {\n              case 'DD':\n                orderedRefs.push(dayInputRef);\n                return DayInput;\n              case 'MM':\n                orderedRefs.push(monthInputRef);\n                return MonthInput;\n              case 'YYYY':\n                orderedRefs.push(yearInputRef);\n                return YearInput;\n              default:\n                return part;\n            }\n          })}\n        </Flex>\n        {!readOnly && PickerButton}\n      </Flex>\n    );\n\n    useEffect(() => {\n      if (autoFocus) orderedRefs[0].current?.focus();\n    }, [autoFocus]);\n\n    useAutoFocusNextInput(orderedRefs);\n\n    return label ? (\n      <FormField\n        as='fieldset'\n        aria-labelledby={id}\n        labelAs='legend'\n        {...{\n          label,\n          labelHidden,\n          id,\n          info,\n          status,\n          required,\n          disabled,\n          onResolveSuggestion,\n          additionalInfo\n        }}\n        ref={ref}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default DateInput;\n"]}
+{"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ClipboardEvent,\n  FunctionComponent,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useRef,\n  RefObject,\n  Dispatch,\n  SetStateAction,\n  useImperativeHandle,\n  useEffect,\n  ComponentType\n} from 'react';\nimport styled from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport { useConfiguration, useFocusWithin, useI18n } from '../../../hooks';\nimport { ForwardProps } from '../../../types';\nimport FormField from '../../FormField';\nimport Flex from '../../Flex';\nimport Button from '../../Button';\nimport Icon, { registerIcon } from '../../Icon';\nimport * as timesIcon from '../../Icon/icons/times.icon';\nimport * as calendarIcon from '../../Icon/icons/calendar.icon';\nimport DatePicker from '../Picker/DatePicker';\nimport type DatePickerProps from '../Picker/DatePicker.types';\nimport Popover from '../../Popover';\nimport { FormControlProps, StyledFormControl } from '../../FormControl';\nimport DateTimeProps, { DateTimeCallbackParameter } from '../DateTime.types';\n\nimport {\n  getDateFormat,\n  parsePastedTextToDate,\n  parseToDate,\n  validateDate,\n  generatePickerButtonAriaLabel\n} from './utils';\nimport StyledDateTime, { StyledInputContainer } from './DateTime.styles';\nimport useAutoFocusNextInput from './useAutoFocusNextInput';\nimport PartInput from './PartInput';\nimport usePickerButton from './usePickerButton';\n\nregisterIcon(timesIcon, calendarIcon);\n\nexport interface DateInputProps extends DateTimeProps {\n  /**\n   * Display additional column with week number in date picker popover.\n   * @default false\n   */\n  showWeekNumber?: boolean;\n  /** Changes default date picker */\n  picker?: {\n    renderer: ComponentType;\n    rendererProps?: Partial<DatePickerProps> & ForwardProps;\n  };\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n}\n\nexport interface DateInputRefObject {\n  readonly value: Date | undefined;\n  setOpen: Dispatch<SetStateAction<boolean>>;\n  buttonEl: HTMLElement | null;\n}\n\nexport const StyledDateInput = styled(StyledDateTime)<DateInputProps>`\n  padding-inline-end: 0;\n`;\n\nStyledDateInput.defaultProps = defaultThemeProp;\n\nconst convertToCallbackParameter = (\n  date: Date,\n  parts: (string | undefined)[]\n): DateTimeCallbackParameter => {\n  if (parts.every(Boolean)) {\n    const [year, monthIndex, day] = parts.map(Number);\n\n    if (!validateDate(parts[0] ?? '', monthIndex + 1, day)) {\n      return {\n        valueAsISOString: '',\n        valueAsTimestamp: NaN,\n        state: 'invalid'\n      };\n    }\n\n    date.setUTCFullYear(year, monthIndex, day);\n    return {\n      valueAsISOString: date.toISOString(),\n      valueAsTimestamp: date.getTime()\n    };\n  }\n  if (parts.every(p => !p)) {\n    return {\n      valueAsISOString: '',\n      valueAsTimestamp: undefined\n    };\n  }\n  return {\n    valueAsISOString: '',\n    valueAsTimestamp: NaN,\n    state: 'incomplete'\n  };\n};\n\nconst DateInput: FunctionComponent<DateInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<DateInputProps>, ref: Ref<DateInputRefObject>) => {\n    const { locale } = useConfiguration();\n    const {\n      defaultValue,\n      value = defaultValue,\n      min,\n      max,\n      id,\n      label,\n      labelHidden,\n      info = getDateFormat(locale).join(''),\n      status,\n      required,\n      readOnly,\n      disabled,\n      onChange,\n      onFocus,\n      onBlur,\n      onResolveSuggestion,\n      showWeekNumber,\n      picker: { renderer: PickerComp = DatePicker, rendererProps = {} } = {},\n      autoFocus,\n      additionalInfo,\n      handle,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n\n    const date = value !== undefined ? parseToDate(value) : undefined;\n\n    const [yearInputRef, monthInputRef, dayInputRef] = [\n      useRef<HTMLInputElement>(null),\n      useRef<HTMLInputElement>(null),\n      useRef<HTMLInputElement>(null)\n    ];\n\n    const pickParts = () => {\n      const month = monthInputRef.current?.value\n        ? (Number(monthInputRef.current.value) - 1).toString()\n        : undefined;\n      return [\n        yearInputRef.current?.value || undefined,\n        month,\n        dayInputRef.current?.value || undefined\n      ];\n    };\n\n    const currentlySelectedDate = () => {\n      const parts = pickParts();\n      if (parts.every(Boolean)) {\n        const [year, monthIndex, day] = parts.map(Number);\n\n        return validateDate(parts[0] ?? '', monthIndex + 1, day)\n          ? new Date(Date.UTC(year, monthIndex, day))\n          : undefined;\n      }\n    };\n\n    const [open, setOpen, , setPopoverRef, buttonEl, setButtonEl] = usePickerButton();\n\n    const inputContainerRef = useRef<HTMLDivElement>(null);\n\n    const onFocusChange = (focused: boolean) => {\n      const callbackParam = convertToCallbackParameter(\n        date ? new Date(date) : new Date(),\n        pickParts()\n      );\n      if (onFocus && focused) onFocus(callbackParam);\n      if (!focused) {\n        if (inputContainerRef.current) inputContainerRef.current.scrollTop = 0;\n        onBlur?.(callbackParam);\n        setOpen(false);\n      }\n    };\n\n    const onInputChange = () => {\n      onChange?.(convertToCallbackParameter(date ? new Date(date) : new Date(), pickParts()));\n      buttonEl?.setAttribute(\n        'aria-label',\n        generatePickerButtonAriaLabel(currentlySelectedDate(), 'date', locale, t, open)\n      );\n    };\n\n    const setInputValue = (newValue: Date) => {\n      dayInputRef.current!.value = newValue.getUTCDate().toString().padStart(2, '0');\n      monthInputRef.current!.value = (newValue.getUTCMonth() + 1).toString().padStart(2, '0');\n      yearInputRef.current!.value = newValue.getUTCFullYear().toString();\n    };\n\n    const onPaste = (e: ClipboardEvent) => {\n      const text = e.clipboardData.getData('text');\n      const newDate = parsePastedTextToDate(text, locale, date || new Date());\n      if (newDate) {\n        e.preventDefault();\n        setInputValue(newDate);\n        onInputChange();\n      }\n    };\n\n    const displayNames = new Intl.DisplayNames(locale, { style: 'long', type: 'dateTimeField' });\n\n    const DayInput = (\n      <PartInput\n        key='day'\n        placeholder={t('day_placeholder')}\n        aria-label={displayNames.of('day')}\n        value={date?.getUTCDate()}\n        onChange={onInputChange}\n        size={2}\n        maxLength={2}\n        readOnly={readOnly}\n        min={1}\n        max={31}\n        ref={dayInputRef}\n      />\n    );\n\n    const MonthInput = (\n      <PartInput\n        key='month'\n        placeholder={t('month_placeholder')}\n        aria-label={displayNames.of('month')}\n        value={date ? date?.getUTCMonth() + 1 : undefined}\n        onChange={onInputChange}\n        size={2}\n        maxLength={2}\n        readOnly={readOnly}\n        min={1}\n        max={12}\n        ref={monthInputRef}\n      />\n    );\n\n    const YearInput = (\n      <PartInput\n        key='year'\n        placeholder={t('year_placeholder')}\n        aria-label={displayNames.of('year')}\n        value={date?.getUTCFullYear()}\n        onChange={onInputChange}\n        size={4}\n        maxLength={4}\n        padWithZeros={false}\n        readOnly={readOnly}\n        min={1}\n        ref={yearInputRef}\n      />\n    );\n\n    const containerRef = useRef<HTMLElement>(null);\n    useFocusWithin([containerRef], onFocusChange);\n\n    useImperativeHandle(\n      handle,\n      () => ({\n        clear: () => {\n          if (dayInputRef.current) dayInputRef.current.value = '';\n          if (monthInputRef.current) monthInputRef.current.value = '';\n          if (yearInputRef.current) yearInputRef.current.value = '';\n          onInputChange();\n        }\n      }),\n      [onInputChange]\n    );\n\n    useImperativeHandle(ref, () => ({\n      setOpen,\n      buttonEl,\n      get value() {\n        return currentlySelectedDate();\n      }\n    }));\n\n    const PickerButton = (\n      <>\n        <Button\n          variant='simple'\n          icon\n          ref={setButtonEl}\n          onClick={() => setOpen(cur => !cur)}\n          aria-label={generatePickerButtonAriaLabel(\n            currentlySelectedDate(),\n            'date',\n            locale,\n            t,\n            open\n          )}\n          readOnly={readOnly}\n          disabled={disabled}\n        >\n          <Icon name={open ? 'times' : 'calendar'} />\n        </Button>\n        {open && (\n          <Popover\n            ref={setPopoverRef}\n            target={buttonEl}\n            placement='bottom-end'\n            strategy='fixed'\n            modifiers={[\n              {\n                name: 'flip',\n                options: {\n                  fallbackPlacements: ['top-end', 'right', 'left']\n                }\n              }\n            ]}\n          >\n            <PickerComp\n              selected={currentlySelectedDate()}\n              min={min}\n              max={max}\n              showWeekNumber={showWeekNumber}\n              {...rendererProps}\n              onChange={selected => {\n                setInputValue(selected);\n                setOpen(false);\n                setTimeout(() => buttonEl?.focus());\n                onInputChange();\n                rendererProps?.onChange?.(selected);\n              }}\n            />\n          </Popover>\n        )}\n      </>\n    );\n\n    const orderedRefs: RefObject<HTMLInputElement>[] = [];\n\n    const Comp = (\n      <Flex\n        as={StyledDateInput}\n        forwardedAs={StyledFormControl}\n        hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n        ref={containerRef}\n        onClick={(e: MouseEvent) => {\n          if (e.target === containerRef.current) orderedRefs[0].current?.focus();\n        }}\n        {...restProps}\n      >\n        <Flex\n          ref={inputContainerRef}\n          as={StyledInputContainer}\n          container={{ alignItems: 'center', wrap: 'wrap' }}\n          onPaste={onPaste}\n        >\n          {getDateFormat(locale).map(part => {\n            switch (part) {\n              case 'DD':\n                orderedRefs.push(dayInputRef);\n                return DayInput;\n              case 'MM':\n                orderedRefs.push(monthInputRef);\n                return MonthInput;\n              case 'YYYY':\n                orderedRefs.push(yearInputRef);\n                return YearInput;\n              default:\n                return part;\n            }\n          })}\n        </Flex>\n        {!readOnly && PickerButton}\n      </Flex>\n    );\n\n    useEffect(() => {\n      if (autoFocus) orderedRefs[0].current?.focus();\n    }, [autoFocus]);\n\n    useAutoFocusNextInput(orderedRefs);\n\n    return label ? (\n      <FormField\n        as='fieldset'\n        aria-labelledby={id}\n        labelAs='legend'\n        {...{\n          label,\n          labelHidden,\n          id,\n          info,\n          status,\n          required,\n          disabled,\n          onResolveSuggestion,\n          additionalInfo\n        }}\n        ref={ref}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default DateInput;\n"]}

package/lib/components/DateTime/Input/DateRangeInput.d.ts

@@ -1,6 +1,6 @@
-import { FunctionComponent } from 'react';
+import { FunctionComponent, Ref } from 'react';
 import { ForwardProps } from '../../../types';
-import { FormControlProps } from '../../FormControl';
+import { FormControlProps, HandleValue } from '../../FormControl';
 import type { DateRangeCallbackParameter, DateTimeProperties } from '../DateTime.types';
 import DateTimeProps from '../DateTime.types';
 export interface DateRangeInputProps extends DateTimeProperties {
@@ -30,6 +30,8 @@ export interface DateRangeInputProps extends DateTimeProperties {
     onBlur?: (value: DateRangeCallbackParameter) => void;
     /** Automatically focuses the input on render. */
     autoFocus?: boolean;
+    /** Imperative handle */
+    handle?: Ref<HandleValue>;
 }
 declare const DateRangeInput: FunctionComponent<DateRangeInputProps & ForwardProps>;
 export default DateRangeInput;

package/lib/components/DateTime/Input/DateRangeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateRangeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAIrD,OAAO,KAAK,EACV,0BAA0B,EAE1B,kBAAkB,EACnB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAM9C,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC7D,kCAAkC;IAClC,KAAK,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAAC,GAAG,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;KAAE,CAAC;IACzE;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACtC,6FAA6F;IAC7F,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACpC,uHAAuH;IACvH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACtD,sHAAsH;IACtH,kBAAkB,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACxD,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,IAAI,CAAC;IACtD,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,IAAI,CAAC;IACtD,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,IAAI,CAAC;IACrD,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAiED,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAwLzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateRangeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAIjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIlE,OAAO,KAAK,EACV,0BAA0B,EAE1B,kBAAkB,EACnB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAM9C,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC7D,kCAAkC;IAClC,KAAK,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAAC,GAAG,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;KAAE,CAAC;IACzE;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACtC,6FAA6F;IAC7F,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACpC,uHAAuH;IACvH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACtD,sHAAsH;IACtH,kBAAkB,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACxD,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,IAAI,CAAC;IACtD,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,IAAI,CAAC;IACtD,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,IAAI,CAAC;IACrD,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB;IACxB,MAAM,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CAC3B;AAiED,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAsOzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/DateTime/Input/DateRangeInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, forwardRef, useCallback, useReducer } from 'react';
+import { useRef, forwardRef, useCallback, useReducer, useImperativeHandle } from 'react';
 import styled, { css } from 'styled-components';
 import { useConsolidatedRef, useFocusWithin, useI18n } from '../../../hooks';
 import { defaultThemeProp } from '../../../theme';
@@ -32,13 +32,13 @@ const StyledDateRangeInput = styled.div(props => {
   `;
 });
 StyledDateRangeInput.defaultProps = defaultThemeProp;
-const reducer = (prevState, action) => {
-    switch (action.type) {
+const reducer = (prevState, { type, value }) => {
+    switch (type) {
         case 'start': {
-            return { ...prevState, start: action.value };
+            return { ...prevState, start: value };
         }
         case 'end': {
-            return { ...prevState, end: action.value };
+            return { ...prevState, end: value };
         }
         default:
             return prevState;
@@ -57,63 +57,94 @@ const getSelected = (first, second) => {
 const parseValueToDate = (value) => {
     return value ? parseToDate(value) : undefined;
 };
-const DateRangeInput = forwardRef(({ value = {}, min, max, label, fromLabel, toLabel, labelHidden, status, required, readOnly, disabled, onChange, onFocus, onBlur, showWeekNumber, autoFocus, fromAdditionalInfo, toAdditionalInfo, ...restProps }, ref) => {
+const DateRangeInput = forwardRef(({ value = {}, min, max, label, fromLabel, toLabel, labelHidden, status, required, readOnly, disabled, onChange, onFocus, onBlur, showWeekNumber, autoFocus, fromAdditionalInfo, toAdditionalInfo, handle, ...restProps }, ref) => {
     const t = useI18n();
     const startDateInputRef = useRef(null);
     const endDateInputRef = useRef(null);
+    const startDateClearHandle = useRef(null);
+    const endDateClearHandle = useRef(null);
     const [state, dispatch] = useReducer(reducer, {
         start: value.start ? parseToDate(value.start).getTime() : undefined,
         end: value.end ? parseToDate(value.end).getTime() : undefined
     });
     // Need to keep the value in ref also, to be able to call onBlur with newest value
-    const startDateRef = useRef(state.start);
-    const endDateRef = useRef(state.end);
+    const startDateRef = useRef(convertToCallbackParameter(state.start));
+    const endDateRef = useRef(convertToCallbackParameter(state.end));
+    useImperativeHandle(handle, () => ({
+        clear: () => {
+            startDateClearHandle.current?.clear();
+            endDateClearHandle.current?.clear();
+            const emptyCallbackParameter = convertToCallbackParameter(undefined);
+            startDateRef.current = emptyCallbackParameter;
+            endDateRef.current = emptyCallbackParameter;
+            dispatch({ type: 'start', value: undefined });
+            dispatch({ type: 'end', value: undefined });
+            onChange({
+                start: emptyCallbackParameter,
+                end: emptyCallbackParameter
+            });
+        }
+    }), [onChange]);
     const onFocusChange = useCallback((focused) => {
         (focused ? onFocus : onBlur)?.({
-            start: convertToCallbackParameter(startDateRef.current),
-            end: convertToCallbackParameter(endDateRef.current)
+            start: startDateRef.current,
+            end: endDateRef.current
         });
     }, [onFocus, onBlur]);
     const containerRef = useConsolidatedRef(ref);
     useFocusWithin([containerRef], onFocusChange);
     const onStartDateChange = (selectedDate) => {
-        if (state.end && selectedDate && selectedDate.getTime() > state.end) {
+        const selected = selectedDate?.getTime();
+        let start;
+        let end;
+        if (state.end && selected && selected > state.end) {
             dispatch({ type: 'start', value: state.end });
-            dispatch({ type: 'end', value: selectedDate.getTime() });
+            dispatch({ type: 'end', value: selected });
             onChange({
-                start: convertToCallbackParameter(state.start),
-                end: convertToCallbackParameter(state.end)
+                start: convertToCallbackParameter(state.end),
+                end: convertToCallbackParameter(selected)
             });
+            start = state.end;
+            end = selected;
         }
         else {
-            dispatch({ type: 'start', value: selectedDate?.getTime() });
+            dispatch({ type: 'start', value: selected });
             onChange({
-                start: convertToCallbackParameter(selectedDate?.getTime()),
+                start: convertToCallbackParameter(selected),
                 end: convertToCallbackParameter(state.end)
             });
+            start = selected;
+            end = state.end;
         }
-        startDateRef.current = state.start;
-        endDateRef.current = state.end;
+        startDateRef.current = convertToCallbackParameter(start);
+        endDateRef.current = convertToCallbackParameter(end);
         endDateInputRef.current?.setOpen(true);
     };
     const onEndDateChange = (selectedDate) => {
-        if (state.start && selectedDate && selectedDate.getTime() < state.start) {
+        const selected = selectedDate?.getTime();
+        let start;
+        let end;
+        if (state.start && selected && selected < state.start) {
             dispatch({ type: 'end', value: state.start });
-            dispatch({ type: 'start', value: selectedDate.getTime() });
+            dispatch({ type: 'start', value: selected });
             onChange({
-                start: convertToCallbackParameter(state.start),
-                end: convertToCallbackParameter(state.end)
+                start: convertToCallbackParameter(selected),
+                end: convertToCallbackParameter(state.start)
             });
+            start = selected;
+            end = state.start;
         }
         else {
-            dispatch({ type: 'end', value: selectedDate?.getTime() });
+            dispatch({ type: 'end', value: selected });
             onChange({
                 start: convertToCallbackParameter(state.start),
-                end: convertToCallbackParameter(selectedDate?.getTime())
+                end: convertToCallbackParameter(selected)
             });
+            start = state.start;
+            end = selected;
         }
-        startDateRef.current = state.start;
-        endDateRef.current = state.end;
+        startDateRef.current = convertToCallbackParameter(start);
+        endDateRef.current = convertToCallbackParameter(end);
     };
     const getSelectedRange = () => {
         const startDate = parseValueToDate(state.start);
@@ -133,7 +164,7 @@ const DateRangeInput = forwardRef(({ value = {}, min, max, label, fromLabel, toL
         max,
         status
     };
-    return (_jsx(FormField, { as: StyledDateRangeInput, ...restProps, ref: containerRef, container: { wrap: 'nowrap' }, labelHidden: labelHidden, label: label, labelAs: 'legend', required: required, readOnly: readOnly, status: status, disabled: disabled, children: _jsxs(Flex, { container: true, as: StyledRangeInputContainer, children: [_jsx(DateInput, { ...commonProps, value: state.start, ref: startDateInputRef, picker: {
+    return (_jsx(FormField, { as: StyledDateRangeInput, ...restProps, ref: containerRef, container: { wrap: 'nowrap' }, labelHidden: labelHidden, label: label, labelAs: 'legend', required: required, readOnly: readOnly, status: status, disabled: disabled, children: _jsxs(Flex, { container: true, as: StyledRangeInputContainer, children: [_jsx(DateInput, { ...commonProps, value: state.start, ref: startDateInputRef, handle: startDateClearHandle, picker: {
                         renderer: DateRangePicker,
                         rendererProps: {
                             selected: getSelected(state.start, state.end),
@@ -141,14 +172,17 @@ const DateRangeInput = forwardRef(({ value = {}, min, max, label, fromLabel, toL
                             onChange: onStartDateChange
                         }
                     }, onBlur: changedValue => {
-                        if (!changedValue.state)
-                            dispatch({ type: 'start', value: changedValue.valueAsTimestamp });
-                        startDateRef.current = changedValue.valueAsTimestamp;
+                        // invalid value stored only in ref, state holds undefined
+                        dispatch({
+                            type: 'start',
+                            value: changedValue.state ? undefined : changedValue.valueAsTimestamp
+                        });
+                        startDateRef.current = changedValue;
                         onChange({
                             start: changedValue,
                             end: convertToCallbackParameter(state.end)
                         });
-                    }, additionalInfo: fromAdditionalInfo, label: fromLabel, "aria-label": `${t('range_from_datetime') + (label ? ` - ${label}` : '')}`, autoFocus: autoFocus }), _jsx(DateInput, { ...commonProps, value: state.end, ref: endDateInputRef, picker: {
+                    }, additionalInfo: fromAdditionalInfo, label: fromLabel, "aria-label": `${t('range_from_datetime') + (label ? ` - ${label}` : '')}`, autoFocus: autoFocus }), _jsx(DateInput, { ...commonProps, value: state.end, ref: endDateInputRef, handle: endDateClearHandle, picker: {
                         renderer: DateRangePicker,
                         rendererProps: {
                             selected: getSelected(state.end, state.start),
@@ -156,9 +190,12 @@ const DateRangeInput = forwardRef(({ value = {}, min, max, label, fromLabel, toL
                             onChange: onEndDateChange
                         }
                     }, onBlur: changedValue => {
-                        if (!changedValue.state)
-                            dispatch({ type: 'end', value: changedValue.valueAsTimestamp });
-                        endDateRef.current = changedValue.valueAsTimestamp;
+                        // invalid value stored only in ref, state holds undefined
+                        dispatch({
+                            type: 'end',
+                            value: changedValue.state ? undefined : changedValue.valueAsTimestamp
+                        });
+                        endDateRef.current = changedValue;
                         onChange({
                             start: convertToCallbackParameter(state.start),
                             end: changedValue

package/lib/components/DateTime/Input/DateRangeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateRangeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  useRef,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useReducer\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useConsolidatedRef, useFocusWithin, useI18n } from '../../../hooks';\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport { FormControlProps } from '../../FormControl';\nimport Flex from '../../Flex';\nimport FormField, { StyledFormField } from '../../FormField/FormField';\nimport DateRangePicker from '../Picker/DateRangePicker';\nimport type {\n  DateRangeCallbackParameter,\n  DateTimeCallbackParameter,\n  DateTimeProperties\n} from '../DateTime.types';\nimport { StyledRangeInputContainer } from '../../Input/Input.styles';\nimport DateTimeProps from '../DateTime.types';\n\nimport DateInput, { DateInputRefObject } from './DateInput';\nimport { parseToDate } from './utils';\nimport StyledDateInput from './DateTime.styles';\n\nexport interface DateRangeInputProps extends DateTimeProperties {\n  /** Object of range boundaries. */\n  value?: { start?: DateTimeProps['value']; end?: DateTimeProps['value'] };\n  /**\n   * Display additional column with week number in date picker popover.\n   * @default false\n   */\n  showWeekNumber?: boolean;\n  /** Pass a string or a fragment with an Icon and string for first part of DataRangeInput. */\n  fromLabel?: FormControlProps['label'];\n  /** Pass a string or a fragment with an Icon and string for second part of DataRangeInput. */\n  toLabel?: FormControlProps['label'];\n  /** Pass an object with \"heading\" and \"content\" properties to show AdditionalInfo for second part of DataRangeInput. */\n  toAdditionalInfo?: FormControlProps['additionalInfo'];\n  /** Pass an object with \"heading\" and \"content\" properties to show AdditionalInfo for first part of DataRangeInput. */\n  fromAdditionalInfo?: FormControlProps['additionalInfo'];\n  /** Callback fired when input value changes. */\n  onChange: (value: DateRangeCallbackParameter) => void;\n  /** Callback fired when the component gets focused. */\n  onFocus?: (value: DateRangeCallbackParameter) => void;\n  /** Callback fired when the component loses focus. */\n  onBlur?: (value: DateRangeCallbackParameter) => void;\n  /** Automatically focuses the input on render. */\n  autoFocus?: boolean;\n}\n\nconst StyledDateRangeInput = styled.div<DateRangeInputProps>(props => {\n  const {\n    theme: {\n      components: { input }\n    }\n  } = props;\n\n  return css`\n    border: 0;\n    min-width: min-content;\n\n    ${StyledFormField} {\n      &:last-child > ${StyledDateInput} {\n        margin-inline-start: -${input['border-width']};\n      }\n      & legend {\n        align-self: center;\n      }\n      &:focus,\n      &:hover,\n      &:focus-within {\n        z-index: 2;\n      }\n    }\n  `;\n});\n\nStyledDateRangeInput.defaultProps = defaultThemeProp;\n\ntype DateRepresentable = string | number | Date;\n\ntype DateRangeAction = { type: 'start' | 'end'; value?: number };\ntype State = { start?: number; end?: number };\n\nconst reducer = (prevState: State, action: DateRangeAction): State => {\n  switch (action.type) {\n    case 'start': {\n      return { ...prevState, start: action.value };\n    }\n    case 'end': {\n      return { ...prevState, end: action.value };\n    }\n    default:\n      return prevState;\n  }\n};\n\nconst convertToCallbackParameter = (v?: number): DateTimeCallbackParameter => {\n  return {\n    valueAsISOString: v === undefined || Number.isNaN(v) ? '' : new Date(v).toISOString(),\n    valueAsTimestamp: v\n  };\n};\n\nconst getSelected = (first: number | undefined, second: number | undefined) => {\n  const selected = first ?? second;\n  return selected ? parseToDate(selected) : undefined;\n};\n\nconst parseValueToDate = (value: DateRepresentable | undefined) => {\n  return value ? parseToDate(value) : undefined;\n};\n\nconst DateRangeInput: FunctionComponent<DateRangeInputProps & ForwardProps> = forwardRef(\n  (\n    {\n      value = {},\n      min,\n      max,\n      label,\n      fromLabel,\n      toLabel,\n      labelHidden,\n      status,\n      required,\n      readOnly,\n      disabled,\n      onChange,\n      onFocus,\n      onBlur,\n      showWeekNumber,\n      autoFocus,\n      fromAdditionalInfo,\n      toAdditionalInfo,\n      ...restProps\n    }: PropsWithoutRef<DateRangeInputProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const t = useI18n();\n\n    const startDateInputRef = useRef<DateInputRefObject>(null);\n    const endDateInputRef = useRef<DateInputRefObject>(null);\n\n    const [state, dispatch] = useReducer(reducer, {\n      start: value.start ? parseToDate(value.start).getTime() : undefined,\n      end: value.end ? parseToDate(value.end).getTime() : undefined\n    });\n\n    // Need to keep the value in ref also, to be able to call onBlur with newest value\n    const startDateRef = useRef(state.start);\n    const endDateRef = useRef(state.end);\n\n    const onFocusChange = useCallback(\n      (focused: boolean) => {\n        (focused ? onFocus : onBlur)?.({\n          start: convertToCallbackParameter(startDateRef.current),\n          end: convertToCallbackParameter(endDateRef.current)\n        });\n      },\n      [onFocus, onBlur]\n    );\n\n    const containerRef = useConsolidatedRef(ref);\n    useFocusWithin([containerRef], onFocusChange);\n\n    const onStartDateChange = (selectedDate?: Date) => {\n      if (state.end && selectedDate && selectedDate.getTime() > state.end) {\n        dispatch({ type: 'start', value: state.end });\n        dispatch({ type: 'end', value: selectedDate.getTime() });\n        onChange({\n          start: convertToCallbackParameter(state.start),\n          end: convertToCallbackParameter(state.end)\n        });\n      } else {\n        dispatch({ type: 'start', value: selectedDate?.getTime() });\n        onChange({\n          start: convertToCallbackParameter(selectedDate?.getTime()),\n          end: convertToCallbackParameter(state.end)\n        });\n      }\n      startDateRef.current = state.start;\n      endDateRef.current = state.end;\n      endDateInputRef.current?.setOpen(true);\n    };\n\n    const onEndDateChange = (selectedDate?: Date) => {\n      if (state.start && selectedDate && selectedDate.getTime() < state.start) {\n        dispatch({ type: 'end', value: state.start });\n        dispatch({ type: 'start', value: selectedDate.getTime() });\n        onChange({\n          start: convertToCallbackParameter(state.start),\n          end: convertToCallbackParameter(state.end)\n        });\n      } else {\n        dispatch({ type: 'end', value: selectedDate?.getTime() });\n        onChange({\n          start: convertToCallbackParameter(state.start),\n          end: convertToCallbackParameter(selectedDate?.getTime())\n        });\n      }\n      startDateRef.current = state.start;\n      endDateRef.current = state.end;\n    };\n\n    const getSelectedRange = () => {\n      const startDate = parseValueToDate(state.start);\n      const endDate = parseValueToDate(state.end);\n\n      if (startDate && endDate && startDate > endDate) return undefined;\n\n      return {\n        startDate,\n        endDate\n      };\n    };\n\n    const commonProps = {\n      required,\n      readOnly,\n      disabled,\n      min,\n      max,\n      status\n    };\n\n    return (\n      <FormField\n        as={StyledDateRangeInput}\n        {...restProps}\n        ref={containerRef}\n        container={{ wrap: 'nowrap' }}\n        labelHidden={labelHidden}\n        label={label}\n        labelAs='legend'\n        required={required}\n        readOnly={readOnly}\n        status={status}\n        disabled={disabled}\n      >\n        <Flex container as={StyledRangeInputContainer}>\n          <DateInput\n            {...commonProps}\n            value={state.start}\n            ref={startDateInputRef}\n            picker={{\n              renderer: DateRangePicker,\n              rendererProps: {\n                selected: getSelected(state.start, state.end),\n                selectedRange: getSelectedRange(),\n                onChange: onStartDateChange\n              }\n            }}\n            onBlur={changedValue => {\n              if (!changedValue.state)\n                dispatch({ type: 'start', value: changedValue.valueAsTimestamp });\n\n              startDateRef.current = changedValue.valueAsTimestamp;\n              onChange({\n                start: changedValue,\n                end: convertToCallbackParameter(state.end)\n              });\n            }}\n            additionalInfo={fromAdditionalInfo}\n            label={fromLabel}\n            aria-label={`${t('range_from_datetime') + (label ? ` - ${label}` : '')}`}\n            autoFocus={autoFocus}\n          />\n          <DateInput\n            {...commonProps}\n            value={state.end}\n            ref={endDateInputRef}\n            picker={{\n              renderer: DateRangePicker,\n              rendererProps: {\n                selected: getSelected(state.end, state.start),\n                selectedRange: getSelectedRange(),\n                onChange: onEndDateChange\n              }\n            }}\n            onBlur={changedValue => {\n              if (!changedValue.state)\n                dispatch({ type: 'end', value: changedValue.valueAsTimestamp });\n\n              endDateRef.current = changedValue.valueAsTimestamp;\n              onChange({\n                start: convertToCallbackParameter(state.start),\n                end: changedValue\n              });\n            }}\n            additionalInfo={toAdditionalInfo}\n            label={toLabel}\n            aria-label={`${t('range_to_datetime') + (label ? ` - ${label}` : '')}`}\n          />\n        </Flex>\n      </FormField>\n    );\n  }\n);\n\nexport default DateRangeInput;\n"]}
+{"version":3,"file":"DateRangeInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateRangeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  useRef,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useReducer,\n  useImperativeHandle\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useConsolidatedRef, useFocusWithin, useI18n } from '../../../hooks';\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport { FormControlProps, HandleValue } from '../../FormControl';\nimport Flex from '../../Flex';\nimport FormField, { StyledFormField } from '../../FormField/FormField';\nimport DateRangePicker from '../Picker/DateRangePicker';\nimport type {\n  DateRangeCallbackParameter,\n  DateTimeCallbackParameter,\n  DateTimeProperties\n} from '../DateTime.types';\nimport { StyledRangeInputContainer } from '../../Input/Input.styles';\nimport DateTimeProps from '../DateTime.types';\n\nimport DateInput, { DateInputRefObject } from './DateInput';\nimport { parseToDate } from './utils';\nimport StyledDateInput from './DateTime.styles';\n\nexport interface DateRangeInputProps extends DateTimeProperties {\n  /** Object of range boundaries. */\n  value?: { start?: DateTimeProps['value']; end?: DateTimeProps['value'] };\n  /**\n   * Display additional column with week number in date picker popover.\n   * @default false\n   */\n  showWeekNumber?: boolean;\n  /** Pass a string or a fragment with an Icon and string for first part of DataRangeInput. */\n  fromLabel?: FormControlProps['label'];\n  /** Pass a string or a fragment with an Icon and string for second part of DataRangeInput. */\n  toLabel?: FormControlProps['label'];\n  /** Pass an object with \"heading\" and \"content\" properties to show AdditionalInfo for second part of DataRangeInput. */\n  toAdditionalInfo?: FormControlProps['additionalInfo'];\n  /** Pass an object with \"heading\" and \"content\" properties to show AdditionalInfo for first part of DataRangeInput. */\n  fromAdditionalInfo?: FormControlProps['additionalInfo'];\n  /** Callback fired when input value changes. */\n  onChange: (value: DateRangeCallbackParameter) => void;\n  /** Callback fired when the component gets focused. */\n  onFocus?: (value: DateRangeCallbackParameter) => void;\n  /** Callback fired when the component loses focus. */\n  onBlur?: (value: DateRangeCallbackParameter) => void;\n  /** Automatically focuses the input on render. */\n  autoFocus?: boolean;\n  /** Imperative handle */\n  handle?: Ref<HandleValue>;\n}\n\nconst StyledDateRangeInput = styled.div<DateRangeInputProps>(props => {\n  const {\n    theme: {\n      components: { input }\n    }\n  } = props;\n\n  return css`\n    border: 0;\n    min-width: min-content;\n\n    ${StyledFormField} {\n      &:last-child > ${StyledDateInput} {\n        margin-inline-start: -${input['border-width']};\n      }\n      & legend {\n        align-self: center;\n      }\n      &:focus,\n      &:hover,\n      &:focus-within {\n        z-index: 2;\n      }\n    }\n  `;\n});\n\nStyledDateRangeInput.defaultProps = defaultThemeProp;\n\ntype DateRepresentable = string | number | Date;\n\ntype DateRangeAction = { type: 'start' | 'end'; value?: number };\ntype State = { start?: number; end?: number };\n\nconst reducer = (prevState: State, { type, value }: DateRangeAction): State => {\n  switch (type) {\n    case 'start': {\n      return { ...prevState, start: value };\n    }\n    case 'end': {\n      return { ...prevState, end: value };\n    }\n    default:\n      return prevState;\n  }\n};\n\nconst convertToCallbackParameter = (v?: number): DateTimeCallbackParameter => {\n  return {\n    valueAsISOString: v === undefined || Number.isNaN(v) ? '' : new Date(v).toISOString(),\n    valueAsTimestamp: v\n  };\n};\n\nconst getSelected = (first: number | undefined, second: number | undefined) => {\n  const selected = first ?? second;\n  return selected ? parseToDate(selected) : undefined;\n};\n\nconst parseValueToDate = (value: DateRepresentable | undefined) => {\n  return value ? parseToDate(value) : undefined;\n};\n\nconst DateRangeInput: FunctionComponent<DateRangeInputProps & ForwardProps> = forwardRef(\n  (\n    {\n      value = {},\n      min,\n      max,\n      label,\n      fromLabel,\n      toLabel,\n      labelHidden,\n      status,\n      required,\n      readOnly,\n      disabled,\n      onChange,\n      onFocus,\n      onBlur,\n      showWeekNumber,\n      autoFocus,\n      fromAdditionalInfo,\n      toAdditionalInfo,\n      handle,\n      ...restProps\n    }: PropsWithoutRef<DateRangeInputProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const t = useI18n();\n\n    const startDateInputRef = useRef<DateInputRefObject>(null);\n    const endDateInputRef = useRef<DateInputRefObject>(null);\n\n    const startDateClearHandle = useRef<HandleValue>(null);\n    const endDateClearHandle = useRef<HandleValue>(null);\n\n    const [state, dispatch] = useReducer(reducer, {\n      start: value.start ? parseToDate(value.start).getTime() : undefined,\n      end: value.end ? parseToDate(value.end).getTime() : undefined\n    });\n\n    // Need to keep the value in ref also, to be able to call onBlur with newest value\n    const startDateRef = useRef<DateTimeCallbackParameter>(convertToCallbackParameter(state.start));\n    const endDateRef = useRef<DateTimeCallbackParameter>(convertToCallbackParameter(state.end));\n\n    useImperativeHandle(\n      handle,\n      () => ({\n        clear: () => {\n          startDateClearHandle.current?.clear();\n          endDateClearHandle.current?.clear();\n          const emptyCallbackParameter = convertToCallbackParameter(undefined);\n          startDateRef.current = emptyCallbackParameter;\n          endDateRef.current = emptyCallbackParameter;\n          dispatch({ type: 'start', value: undefined });\n          dispatch({ type: 'end', value: undefined });\n          onChange({\n            start: emptyCallbackParameter,\n            end: emptyCallbackParameter\n          });\n        }\n      }),\n      [onChange]\n    );\n\n    const onFocusChange = useCallback(\n      (focused: boolean) => {\n        (focused ? onFocus : onBlur)?.({\n          start: startDateRef.current,\n          end: endDateRef.current\n        });\n      },\n      [onFocus, onBlur]\n    );\n\n    const containerRef = useConsolidatedRef(ref);\n    useFocusWithin([containerRef], onFocusChange);\n\n    const onStartDateChange = (selectedDate?: Date) => {\n      const selected = selectedDate?.getTime();\n      let start;\n      let end;\n      if (state.end && selected && selected > state.end) {\n        dispatch({ type: 'start', value: state.end });\n        dispatch({ type: 'end', value: selected });\n        onChange({\n          start: convertToCallbackParameter(state.end),\n          end: convertToCallbackParameter(selected)\n        });\n        start = state.end;\n        end = selected;\n      } else {\n        dispatch({ type: 'start', value: selected });\n        onChange({\n          start: convertToCallbackParameter(selected),\n          end: convertToCallbackParameter(state.end)\n        });\n        start = selected;\n        end = state.end;\n      }\n      startDateRef.current = convertToCallbackParameter(start);\n      endDateRef.current = convertToCallbackParameter(end);\n      endDateInputRef.current?.setOpen(true);\n    };\n\n    const onEndDateChange = (selectedDate?: Date) => {\n      const selected = selectedDate?.getTime();\n      let start;\n      let end;\n      if (state.start && selected && selected < state.start) {\n        dispatch({ type: 'end', value: state.start });\n        dispatch({ type: 'start', value: selected });\n        onChange({\n          start: convertToCallbackParameter(selected),\n          end: convertToCallbackParameter(state.start)\n        });\n        start = selected;\n        end = state.start;\n      } else {\n        dispatch({ type: 'end', value: selected });\n        onChange({\n          start: convertToCallbackParameter(state.start),\n          end: convertToCallbackParameter(selected)\n        });\n        start = state.start;\n        end = selected;\n      }\n      startDateRef.current = convertToCallbackParameter(start);\n      endDateRef.current = convertToCallbackParameter(end);\n    };\n\n    const getSelectedRange = () => {\n      const startDate = parseValueToDate(state.start);\n      const endDate = parseValueToDate(state.end);\n\n      if (startDate && endDate && startDate > endDate) return undefined;\n\n      return {\n        startDate,\n        endDate\n      };\n    };\n\n    const commonProps = {\n      required,\n      readOnly,\n      disabled,\n      min,\n      max,\n      status\n    };\n\n    return (\n      <FormField\n        as={StyledDateRangeInput}\n        {...restProps}\n        ref={containerRef}\n        container={{ wrap: 'nowrap' }}\n        labelHidden={labelHidden}\n        label={label}\n        labelAs='legend'\n        required={required}\n        readOnly={readOnly}\n        status={status}\n        disabled={disabled}\n      >\n        <Flex container as={StyledRangeInputContainer}>\n          <DateInput\n            {...commonProps}\n            value={state.start}\n            ref={startDateInputRef}\n            handle={startDateClearHandle}\n            picker={{\n              renderer: DateRangePicker,\n              rendererProps: {\n                selected: getSelected(state.start, state.end),\n                selectedRange: getSelectedRange(),\n                onChange: onStartDateChange\n              }\n            }}\n            onBlur={changedValue => {\n              // invalid value stored only in ref, state holds undefined\n              dispatch({\n                type: 'start',\n                value: changedValue.state ? undefined : changedValue.valueAsTimestamp\n              });\n\n              startDateRef.current = changedValue;\n              onChange({\n                start: changedValue,\n                end: convertToCallbackParameter(state.end)\n              });\n            }}\n            additionalInfo={fromAdditionalInfo}\n            label={fromLabel}\n            aria-label={`${t('range_from_datetime') + (label ? ` - ${label}` : '')}`}\n            autoFocus={autoFocus}\n          />\n          <DateInput\n            {...commonProps}\n            value={state.end}\n            ref={endDateInputRef}\n            handle={endDateClearHandle}\n            picker={{\n              renderer: DateRangePicker,\n              rendererProps: {\n                selected: getSelected(state.end, state.start),\n                selectedRange: getSelectedRange(),\n                onChange: onEndDateChange\n              }\n            }}\n            onBlur={changedValue => {\n              // invalid value stored only in ref, state holds undefined\n              dispatch({\n                type: 'end',\n                value: changedValue.state ? undefined : changedValue.valueAsTimestamp\n              });\n\n              endDateRef.current = changedValue;\n              onChange({\n                start: convertToCallbackParameter(state.start),\n                end: changedValue\n              });\n            }}\n            additionalInfo={toAdditionalInfo}\n            label={toLabel}\n            aria-label={`${t('range_to_datetime') + (label ? ` - ${label}` : '')}`}\n          />\n        </Flex>\n      </FormField>\n    );\n  }\n);\n\nexport default DateRangeInput;\n"]}

package/lib/components/DateTime/Input/DateTimeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateTimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAqB,MAAM,mBAAmB,CAAC;AAWxE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,OAAO,aAA4C,MAAM,mBAAmB,CAAC;AAG7E,OAAO,EACL,WAAW,EASZ,MAAM,SAAS,CAAC;AAQjB,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,mBAAmB,yHAe9B,CAAC;AAqFH,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAghBvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateTimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAqB,MAAM,mBAAmB,CAAC;AAWxE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,OAAO,aAA4C,MAAM,mBAAmB,CAAC;AAG7E,OAAO,EACL,WAAW,EASZ,MAAM,SAAS,CAAC;AAQjB,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,mBAAmB,yHAe9B,CAAC;AAqFH,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAiiBvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/DateTime/Input/DateTimeInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../../theme';
 import { StyledFormControl } from '../../FormControl';
@@ -97,7 +97,7 @@ function dateOptions() {
 }
 const DateTimeInput = forwardRef((props, ref) => {
     const { locale } = useConfiguration();
-    const { defaultValue, value = defaultValue, min, max, id, label, labelHidden, withSeconds = false, clockFormat, info = `${getDateFormat(locale).join('')} ${getDateFormat(locale, getTimeOptions(withSeconds), true).join('')}`, status, required, readOnly, disabled, showWeekNumber, pickerInterval = 30, onChange, onFocus, onBlur, onResolveSuggestion, additionalInfo, autoFocus, ...restProps } = props;
+    const { defaultValue, value = defaultValue, min, max, id, label, labelHidden, withSeconds = false, clockFormat, info = `${getDateFormat(locale).join('')} ${getDateFormat(locale, getTimeOptions(withSeconds), true).join('')}`, status, required, readOnly, disabled, showWeekNumber, pickerInterval = 30, onChange, onFocus, onBlur, onResolveSuggestion, additionalInfo, autoFocus, handle, ...restProps } = props;
     const t = useI18n();
     const dateTime = value !== undefined ? parseToDate(value) : undefined;
     const is12h = clockFormat ? clockFormat === 12 : is12HClockFormat(locale);
@@ -223,6 +223,23 @@ const DateTimeInput = forwardRef((props, ref) => {
             setOpen(false);
         }
     };
+    useImperativeHandle(handle, () => ({
+        clear: () => {
+            if (dayInputRef.current)
+                dayInputRef.current.value = '';
+            if (monthInputRef.current)
+                monthInputRef.current.value = '';
+            if (yearInputRef.current)
+                yearInputRef.current.value = '';
+            if (hourInputRef.current)
+                hourInputRef.current.value = '';
+            if (minuteInputRef.current)
+                minuteInputRef.current.value = '';
+            if (secondInputRef.current)
+                secondInputRef.current.value = '';
+            onInputChange();
+        }
+    }), [onInputChange]);
     const displayNames = new Intl.DisplayNames(locale, { style: 'long', type: 'dateTimeField' });
     const DayInput = (_jsx(PartInput, { placeholder: t('day_placeholder'), "aria-label": displayNames.of('day'), value: dateTime?.getUTCDate(), onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, min: 1, max: 31, ref: dayInputRef }, 'day'));
     const MonthInput = (_jsx(PartInput, { placeholder: t('month_placeholder'), "aria-label": displayNames.of('month'), value: dateTime ? dateTime.getUTCMonth() + 1 : undefined, onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, min: 1, max: 12, ref: monthInputRef }, 'month'));