@pega/cosmos-react-core 2.0.0-dev.2.0 → 2.0.0-dev.21.1

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

@@ -1,6 +1,7 @@
-import React, { useEffect, useRef, forwardRef, useReducer, useCallback } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, forwardRef, useReducer, useCallback } from 'react';
 import styled, { css } from 'styled-components';
-import { useConsolidatedRef, useFocusWithin } from '../../../hooks';
+import { useConsolidatedRef, useDirection, useFocusWithin } from '../../../hooks';
 import { defaultThemeProp } from '../../../theme';
 import Flex from '../../Flex';
 import { StyledFormField } from '../../FormField/FormField';
@@ -10,7 +11,8 @@ import DateInput from './DateInput';
 import { parseToDate } from './utils';
 import StyledDateInput from './DateTime.styles';
 const StyledDateRangeInput = styled.div(props => {
-    const { theme: { base: { rtl }, components: { input } } } = props;
+    const { theme: { components: { input } } } = props;
+    const { start, end } = useDirection();
     return css `
     border: 0;
     min-width: min-content;
@@ -19,22 +21,12 @@ const StyledDateRangeInput = styled.div(props => {
     }
     ${StyledFormField} {
       &:first-child > ${StyledDateInput} {
-        ${() => {
-        const dir = rtl ? 'left' : 'right';
-        return css `
-          border-top-${dir}-radius: 0;
-          border-bottom-${dir}-radius: 0;
-          `;
-    }}
+        border-top-${end}-radius: 0;
+        border-bottom-${end}-radius: 0;
       }
       &:last-child > ${StyledDateInput} {
-        ${() => {
-        const dir = rtl ? 'right' : 'left';
-        return css `
-            border-top-${dir}-radius: 0;
-            border-bottom-${dir}-radius: 0;
-          `;
-    }}
+        border-top-${start}-radius: 0;
+        border-bottom-${start}-radius: 0;
         margin-inline-start: -${input['border-width']};
       }
       &:focus,
@@ -71,32 +63,29 @@ const reducer = (prevState, action) => {
     }
 };
 const getSelected = (first, second) => {
-    const selected = first !== null && first !== void 0 ? first : second;
+    const selected = first ?? second;
     return selected ? parseToDate(selected) : undefined;
 };
 const parseValueToDate = (value) => {
     return value ? parseToDate(value) : undefined;
 };
 const DateRangeInput = forwardRef((props, ref) => {
-    var _a, _b;
     const { fromValue, toValue, min, max, fromLabel, toLabel, labelHidden, status, required, readOnly, disabled, onChange, onFocus, onBlur, showWeekNumber, autoFocus, ...restProps } = props;
     const [state, dispatch] = useReducer(reducer, [
-        (_a = parseValueToDate(fromValue)) === null || _a === void 0 ? void 0 : _a.getTime(),
-        (_b = parseValueToDate(toValue)) === null || _b === void 0 ? void 0 : _b.getTime()
+        parseValueToDate(fromValue)?.getTime(),
+        parseValueToDate(toValue)?.getTime()
     ]);
     const startDateInputRef = useRef(null);
     const endDateInputRef = useRef(null);
     useEffect(() => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(convertToCallbackParameter(state));
+        onChange?.(convertToCallbackParameter(state));
     }, [state[0], state[1]]);
     const onFocusChange = useCallback((focused) => {
-        var _a;
-        (_a = (focused ? onFocus : onBlur)) === null || _a === void 0 ? void 0 : _a(convertToCallbackParameter(state));
+        (focused ? onFocus : onBlur)?.(convertToCallbackParameter(state));
     }, [onFocus, onBlur, state]);
     const containerRef = useConsolidatedRef(ref);
     useFocusWithin([containerRef], onFocusChange);
     const onStartDateChange = (selectedDate) => {
-        var _a, _b;
         if (state[1] && selectedDate.getTime() > state[1]) {
             dispatch({ type: 'start', value: state[1] });
             dispatch({ type: 'end', value: selectedDate.getTime() });
@@ -104,11 +93,10 @@ const DateRangeInput = forwardRef((props, ref) => {
         else {
             dispatch({ type: 'start', value: selectedDate.getTime() });
         }
-        (_a = startDateInputRef.current) === null || _a === void 0 ? void 0 : _a.setOpen(false);
-        (_b = endDateInputRef.current) === null || _b === void 0 ? void 0 : _b.setOpen(true);
+        startDateInputRef.current?.setOpen(false);
+        endDateInputRef.current?.setOpen(true);
     };
     const onEndDateChange = (selectedDate) => {
-        var _a, _b, _c;
         if (state[0] && selectedDate.getTime() < state[0]) {
             dispatch({ type: 'start', value: selectedDate.getTime() });
             dispatch({ type: 'end', value: state[0] });
@@ -116,8 +104,8 @@ const DateRangeInput = forwardRef((props, ref) => {
         else {
             dispatch({ type: 'end', value: selectedDate.getTime() });
         }
-        (_a = endDateInputRef.current) === null || _a === void 0 ? void 0 : _a.setOpen(false);
-        (_c = (_b = endDateInputRef.current) === null || _b === void 0 ? void 0 : _b.buttonEl) === null || _c === void 0 ? void 0 : _c.focus();
+        endDateInputRef.current?.setOpen(false);
+        endDateInputRef.current?.buttonEl?.focus();
     };
     const getSelectedRange = () => {
         const startDate = parseValueToDate(state[0]);
@@ -129,8 +117,8 @@ const DateRangeInput = forwardRef((props, ref) => {
             endDate: endDate ? parseValueToDate(endDate) : undefined
         };
     };
-    const startPicker = !(state[0] && !state[1]) ? (React.createElement(DateRangePicker, { selected: getSelected(state[0], state[1]), selectedRange: getSelectedRange(), onChange: onStartDateChange, min: min, max: max, showWeekNumber: showWeekNumber })) : (React.createElement(DatePicker, { selected: parseValueToDate(state[0]), onChange: onStartDateChange, min: min, max: max, showWeekNumber: showWeekNumber }));
-    const endPicker = !(!state[0] && state[1]) ? (React.createElement(DateRangePicker, { selected: getSelected(state[1], state[0]), selectedRange: getSelectedRange(), onChange: onEndDateChange, min: min, max: max, showWeekNumber: showWeekNumber })) : (React.createElement(DatePicker, { selected: parseValueToDate(state[1]), onChange: onEndDateChange, min: min, max: max, showWeekNumber: showWeekNumber }));
+    const startPicker = !(state[0] && !state[1]) ? (_jsx(DateRangePicker, { selected: getSelected(state[0], state[1]), selectedRange: getSelectedRange(), onChange: onStartDateChange, min: min, max: max, showWeekNumber: showWeekNumber }, void 0)) : (_jsx(DatePicker, { selected: parseValueToDate(state[0]), onChange: onStartDateChange, min: min, max: max, showWeekNumber: showWeekNumber }, void 0));
+    const endPicker = !(!state[0] && state[1]) ? (_jsx(DateRangePicker, { selected: getSelected(state[1], state[0]), selectedRange: getSelectedRange(), onChange: onEndDateChange, min: min, max: max, showWeekNumber: showWeekNumber }, void 0)) : (_jsx(DatePicker, { selected: parseValueToDate(state[1]), onChange: onEndDateChange, min: min, max: max, showWeekNumber: showWeekNumber }, void 0));
     const fromProps = {
         value: state[0],
         label: fromLabel,
@@ -160,10 +148,7 @@ const DateRangeInput = forwardRef((props, ref) => {
         },
         info: props.info
     };
-    const Comp = (React.createElement(Flex, { as: StyledDateRangeInput, container: { wrap: 'nowrap' }, ...restProps, ref: containerRef },
-        React.createElement(DateInput, { ...fromProps, ref: startDateInputRef, picker: startPicker, onChange: changedValue => dispatch({ type: 'start', value: changedValue.valueAsTimestamp }) }),
-        React.createElement(DateInput, { ...toProps, ref: endDateInputRef, picker: endPicker, onChange: changedValue => dispatch({ type: 'end', value: changedValue.valueAsTimestamp }) })));
-    return Comp;
+    return (_jsxs(Flex, { as: StyledDateRangeInput, container: { wrap: 'nowrap' }, ...restProps, ref: containerRef, children: [_jsx(DateInput, { ...fromProps, ref: startDateInputRef, picker: startPicker, onChange: changedValue => dispatch({ type: 'start', value: changedValue.valueAsTimestamp }) }, void 0), _jsx(DateInput, { ...toProps, ref: endDateInputRef, picker: endPicker, onChange: changedValue => dispatch({ type: 'end', value: changedValue.valueAsTimestamp }) }, void 0)] }, void 0));
 });
 export default DateRangeInput;
 //# sourceMappingURL=DateRangeInput.js.map

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 React, {\n  FunctionComponent,\n  useEffect,\n  useRef,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useReducer,\n  useCallback\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useConsolidatedRef, useFocusWithin } from '../../../hooks';\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport { FormControlProps } from '../../FormControl';\nimport Flex from '../../Flex';\nimport { StyledFormField } from '../../FormField/FormField';\nimport { DateRangeCallbackValue, DateTimeCallbackValue } from '../types';\nimport DateRangePicker from '../Picker/DateRangePicker';\nimport DatePicker from '../Picker/DatePicker';\n\nimport DateInput, { DateInputRefObject } from './DateInput';\nimport { DateTimeProperties } from './DateTime.types';\nimport { parseToDate } from './utils';\nimport StyledDateInput from './DateTime.styles';\n\nexport interface DateRangeInputProps extends DateTimeProperties {\n  /**\n   * Display additional column with week number in date picker popover.\n   * @default false\n   */\n  showWeekNumber?: boolean;\n\n  /**\n   * Pass a string or a fragment with an Icon and string for first part of DataRangeInput.\n   */\n  fromLabel: FormControlProps['label'];\n\n  /**\n   * Pass a string or a fragment with an Icon and string for second part of DataRangeInput.\n   */\n  toLabel: FormControlProps['label'];\n\n  /**\n   * Date as ISO8601 string, timestamp or native Date object. Requires onChange prop to update value for controlled inputs.\n   *\n   */\n  fromValue?: string | number | Date;\n\n  /**\n   * Date as ISO8601 string, timestamp or native Date object. Requires onChange prop to update value for controlled inputs.\n   *\n   */\n  toValue?: string | number | Date;\n  /** Callback fired when input value changes. */\n  onChange?: (value: DateRangeCallbackValue) => void;\n  /** Callback fired when the component gets focused. */\n  onFocus?: (value: DateRangeCallbackValue) => void;\n  /** Callback fired when the component loses focus. */\n  onBlur?: (value: DateRangeCallbackValue) => void;\n  /** Automatically focuses the input on render. */\n  autoFocus?: boolean;\n}\n\nconst StyledDateRangeInput = styled.div<DateRangeInputProps>(props => {\n  const {\n    theme: {\n      base: { rtl },\n      components: { input }\n    }\n  } = props;\n\n  return css`\n    border: 0;\n    min-width: min-content;\n    ${StyledDateInput} {\n      min-width: 50%;\n    }\n    ${StyledFormField} {\n      &:first-child > ${StyledDateInput} {\n        ${() => {\n          const dir = rtl ? 'left' : 'right';\n          return css`\n          border-top-${dir}-radius: 0;\n          border-bottom-${dir}-radius: 0;\n          `;\n        }}\n      }\n      &:last-child > ${StyledDateInput} {\n        ${() => {\n          const dir = rtl ? 'right' : 'left';\n          return css`\n            border-top-${dir}-radius: 0;\n            border-bottom-${dir}-radius: 0;\n          `;\n        }}\n        margin-inline-start: -${input['border-width']};\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 State = [start?: number, end?: number];\n\nconst convertStateToCallbackParam = (v?: number): DateTimeCallbackValue => {\n  return {\n    valueAsISOString: v === undefined || Number.isNaN(v) ? '' : new Date(v).toISOString(),\n    valueAsTimestamp: v\n  };\n};\n\nconst convertToCallbackParameter = (state: State) => {\n  return {\n    start: convertStateToCallbackParam(state[0]),\n    end: convertStateToCallbackParam(state[1])\n  };\n};\n\ntype DateRangeAction = { type: 'start' | 'end'; value?: number };\n\nconst reducer = (prevState: State, action: DateRangeAction): State => {\n  switch (action.type) {\n    case 'start': {\n      return [action.value, prevState[1]];\n    }\n    case 'end': {\n      return [prevState[0], action.value];\n    }\n    default:\n      return prevState;\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  (props: PropsWithoutRef<DateRangeInputProps>, ref: Ref<HTMLDivElement>) => {\n    const {\n      fromValue,\n      toValue,\n      min,\n      max,\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      ...restProps\n    } = props;\n\n    const [state, dispatch] = useReducer(reducer, [\n      parseValueToDate(fromValue)?.getTime(),\n      parseValueToDate(toValue)?.getTime()\n    ]);\n\n    const startDateInputRef = useRef<DateInputRefObject>(null);\n    const endDateInputRef = useRef<DateInputRefObject>(null);\n\n    useEffect(() => {\n      onChange?.(convertToCallbackParameter(state));\n    }, [state[0], state[1]]);\n\n    const onFocusChange = useCallback(\n      (focused: boolean) => {\n        (focused ? onFocus : onBlur)?.(convertToCallbackParameter(state));\n      },\n      [onFocus, onBlur, state]\n    );\n\n    const containerRef = useConsolidatedRef(ref);\n    useFocusWithin([containerRef], onFocusChange);\n\n    const onStartDateChange = (selectedDate: Date) => {\n      if (state[1] && selectedDate.getTime() > state[1]) {\n        dispatch({ type: 'start', value: state[1] });\n        dispatch({ type: 'end', value: selectedDate.getTime() });\n      } else {\n        dispatch({ type: 'start', value: selectedDate.getTime() });\n      }\n      startDateInputRef.current?.setOpen(false);\n      endDateInputRef.current?.setOpen(true);\n    };\n\n    const onEndDateChange = (selectedDate: Date) => {\n      if (state[0] && selectedDate.getTime() < state[0]) {\n        dispatch({ type: 'start', value: selectedDate.getTime() });\n        dispatch({ type: 'end', value: state[0] });\n      } else {\n        dispatch({ type: 'end', value: selectedDate.getTime() });\n      }\n      endDateInputRef.current?.setOpen(false);\n      endDateInputRef.current?.buttonEl?.focus();\n    };\n\n    const getSelectedRange = () => {\n      const startDate = parseValueToDate(state[0]);\n      const endDate = parseValueToDate(state[1]);\n\n      if (startDate && endDate && startDate > endDate) return undefined;\n\n      return {\n        startDate: startDate ? parseValueToDate(startDate) : undefined,\n        endDate: endDate ? parseValueToDate(endDate) : undefined\n      };\n    };\n\n    const startPicker = !(state[0] && !state[1]) ? (\n      <DateRangePicker\n        selected={getSelected(state[0], state[1])}\n        selectedRange={getSelectedRange()}\n        onChange={onStartDateChange}\n        min={min}\n        max={max}\n        showWeekNumber={showWeekNumber}\n      />\n    ) : (\n      <DatePicker\n        selected={parseValueToDate(state[0])}\n        onChange={onStartDateChange}\n        min={min}\n        max={max}\n        showWeekNumber={showWeekNumber}\n      />\n    );\n\n    const endPicker = !(!state[0] && state[1]) ? (\n      <DateRangePicker\n        selected={getSelected(state[1], state[0])}\n        selectedRange={getSelectedRange()}\n        onChange={onEndDateChange}\n        min={min}\n        max={max}\n        showWeekNumber={showWeekNumber}\n      />\n    ) : (\n      <DatePicker\n        selected={parseValueToDate(state[1])}\n        onChange={onEndDateChange}\n        min={min}\n        max={max}\n        showWeekNumber={showWeekNumber}\n      />\n    );\n\n    const fromProps = {\n      value: state[0],\n      label: fromLabel,\n      labelHidden,\n      ...{\n        required,\n        readOnly,\n        disabled,\n        min,\n        max,\n        status,\n        autoFocus\n      },\n      info: props.info\n    };\n\n    const toProps = {\n      value: state[1],\n      label: toLabel,\n      labelHidden,\n      ...{\n        required,\n        readOnly,\n        disabled,\n        min,\n        max,\n        status\n      },\n      info: props.info\n    };\n\n    const Comp = (\n      <Flex\n        as={StyledDateRangeInput}\n        container={{ wrap: 'nowrap' }}\n        {...restProps}\n        ref={containerRef}\n      >\n        <DateInput\n          {...fromProps}\n          ref={startDateInputRef}\n          picker={startPicker}\n          onChange={changedValue =>\n            dispatch({ type: 'start', value: changedValue.valueAsTimestamp })\n          }\n        />\n        <DateInput\n          {...toProps}\n          ref={endDateInputRef}\n          picker={endPicker}\n          onChange={changedValue => dispatch({ type: 'end', value: changedValue.valueAsTimestamp })}\n        />\n      </Flex>\n    );\n\n    return Comp;\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  useEffect,\n  useRef,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useReducer,\n  useCallback\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useConsolidatedRef, useDirection, useFocusWithin } from '../../../hooks';\nimport { ForwardProps } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport { FormControlProps } from '../../FormControl';\nimport Flex from '../../Flex';\nimport { StyledFormField } from '../../FormField/FormField';\nimport { DateRangeCallbackValue, DateTimeCallbackValue } from '../types';\nimport DateRangePicker from '../Picker/DateRangePicker';\nimport DatePicker from '../Picker/DatePicker';\nimport type { DateTimeProperties } 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  /**\n   * Display additional column with week number in date picker popover.\n   * @default false\n   */\n  showWeekNumber?: boolean;\n\n  /**\n   * Pass a string or a fragment with an Icon and string for first part of DataRangeInput.\n   */\n  fromLabel: FormControlProps['label'];\n\n  /**\n   * Pass a string or a fragment with an Icon and string for second part of DataRangeInput.\n   */\n  toLabel: FormControlProps['label'];\n\n  /**\n   * Date as ISO8601 string, timestamp or native Date object. Requires onChange prop to update value for controlled inputs.\n   *\n   */\n  fromValue?: string | number | Date;\n\n  /**\n   * Date as ISO8601 string, timestamp or native Date object. Requires onChange prop to update value for controlled inputs.\n   *\n   */\n  toValue?: string | number | Date;\n  /** Callback fired when input value changes. */\n  onChange?: (value: DateRangeCallbackValue) => void;\n  /** Callback fired when the component gets focused. */\n  onFocus?: (value: DateRangeCallbackValue) => void;\n  /** Callback fired when the component loses focus. */\n  onBlur?: (value: DateRangeCallbackValue) => 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  const { start, end } = useDirection();\n\n  return css`\n    border: 0;\n    min-width: min-content;\n    ${StyledDateInput} {\n      min-width: 50%;\n    }\n    ${StyledFormField} {\n      &:first-child > ${StyledDateInput} {\n        border-top-${end}-radius: 0;\n        border-bottom-${end}-radius: 0;\n      }\n      &:last-child > ${StyledDateInput} {\n        border-top-${start}-radius: 0;\n        border-bottom-${start}-radius: 0;\n        margin-inline-start: -${input['border-width']};\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 State = [start?: number, end?: number];\n\nconst convertStateToCallbackParam = (v?: number): DateTimeCallbackValue => {\n  return {\n    valueAsISOString: v === undefined || Number.isNaN(v) ? '' : new Date(v).toISOString(),\n    valueAsTimestamp: v\n  };\n};\n\nconst convertToCallbackParameter = (state: State) => {\n  return {\n    start: convertStateToCallbackParam(state[0]),\n    end: convertStateToCallbackParam(state[1])\n  };\n};\n\ntype DateRangeAction = { type: 'start' | 'end'; value?: number };\n\nconst reducer = (prevState: State, action: DateRangeAction): State => {\n  switch (action.type) {\n    case 'start': {\n      return [action.value, prevState[1]];\n    }\n    case 'end': {\n      return [prevState[0], action.value];\n    }\n    default:\n      return prevState;\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  (props: PropsWithoutRef<DateRangeInputProps>, ref: Ref<HTMLDivElement>) => {\n    const {\n      fromValue,\n      toValue,\n      min,\n      max,\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      ...restProps\n    } = props;\n\n    const [state, dispatch] = useReducer(reducer, [\n      parseValueToDate(fromValue)?.getTime(),\n      parseValueToDate(toValue)?.getTime()\n    ]);\n\n    const startDateInputRef = useRef<DateInputRefObject>(null);\n    const endDateInputRef = useRef<DateInputRefObject>(null);\n\n    useEffect(() => {\n      onChange?.(convertToCallbackParameter(state));\n    }, [state[0], state[1]]);\n\n    const onFocusChange = useCallback(\n      (focused: boolean) => {\n        (focused ? onFocus : onBlur)?.(convertToCallbackParameter(state));\n      },\n      [onFocus, onBlur, state]\n    );\n\n    const containerRef = useConsolidatedRef(ref);\n    useFocusWithin([containerRef], onFocusChange);\n\n    const onStartDateChange = (selectedDate: Date) => {\n      if (state[1] && selectedDate.getTime() > state[1]) {\n        dispatch({ type: 'start', value: state[1] });\n        dispatch({ type: 'end', value: selectedDate.getTime() });\n      } else {\n        dispatch({ type: 'start', value: selectedDate.getTime() });\n      }\n      startDateInputRef.current?.setOpen(false);\n      endDateInputRef.current?.setOpen(true);\n    };\n\n    const onEndDateChange = (selectedDate: Date) => {\n      if (state[0] && selectedDate.getTime() < state[0]) {\n        dispatch({ type: 'start', value: selectedDate.getTime() });\n        dispatch({ type: 'end', value: state[0] });\n      } else {\n        dispatch({ type: 'end', value: selectedDate.getTime() });\n      }\n      endDateInputRef.current?.setOpen(false);\n      endDateInputRef.current?.buttonEl?.focus();\n    };\n\n    const getSelectedRange = () => {\n      const startDate = parseValueToDate(state[0]);\n      const endDate = parseValueToDate(state[1]);\n\n      if (startDate && endDate && startDate > endDate) return undefined;\n\n      return {\n        startDate: startDate ? parseValueToDate(startDate) : undefined,\n        endDate: endDate ? parseValueToDate(endDate) : undefined\n      };\n    };\n\n    const startPicker = !(state[0] && !state[1]) ? (\n      <DateRangePicker\n        selected={getSelected(state[0], state[1])}\n        selectedRange={getSelectedRange()}\n        onChange={onStartDateChange}\n        min={min}\n        max={max}\n        showWeekNumber={showWeekNumber}\n      />\n    ) : (\n      <DatePicker\n        selected={parseValueToDate(state[0])}\n        onChange={onStartDateChange}\n        min={min}\n        max={max}\n        showWeekNumber={showWeekNumber}\n      />\n    );\n\n    const endPicker = !(!state[0] && state[1]) ? (\n      <DateRangePicker\n        selected={getSelected(state[1], state[0])}\n        selectedRange={getSelectedRange()}\n        onChange={onEndDateChange}\n        min={min}\n        max={max}\n        showWeekNumber={showWeekNumber}\n      />\n    ) : (\n      <DatePicker\n        selected={parseValueToDate(state[1])}\n        onChange={onEndDateChange}\n        min={min}\n        max={max}\n        showWeekNumber={showWeekNumber}\n      />\n    );\n\n    const fromProps = {\n      value: state[0],\n      label: fromLabel,\n      labelHidden,\n      ...{\n        required,\n        readOnly,\n        disabled,\n        min,\n        max,\n        status,\n        autoFocus\n      },\n      info: props.info\n    };\n\n    const toProps = {\n      value: state[1],\n      label: toLabel,\n      labelHidden,\n      ...{\n        required,\n        readOnly,\n        disabled,\n        min,\n        max,\n        status\n      },\n      info: props.info\n    };\n\n    return (\n      <Flex\n        as={StyledDateRangeInput}\n        container={{ wrap: 'nowrap' }}\n        {...restProps}\n        ref={containerRef}\n      >\n        <DateInput\n          {...fromProps}\n          ref={startDateInputRef}\n          picker={startPicker}\n          onChange={changedValue =>\n            dispatch({ type: 'start', value: changedValue.valueAsTimestamp })\n          }\n        />\n        <DateInput\n          {...toProps}\n          ref={endDateInputRef}\n          picker={endPicker}\n          onChange={changedValue => dispatch({ type: 'end', value: changedValue.valueAsTimestamp })}\n        />\n      </Flex>\n    );\n  }\n);\n\nexport default DateRangeInput;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"DateTime.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateTime.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS,2GA0CpB,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAoBhC,CAAC;AAEF,QAAA,MAAM,cAAc,yGA2ClB,CAAC;AAIH,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DateTime.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateTime.styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS,2GA0CpB,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAwBhC,CAAC;AAEF,QAAA,MAAM,cAAc,yGAuDlB,CAAC;AAIH,eAAe,cAAc,CAAC"}

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

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../../theme';
 import { StyledButton } from '../../Button';
-import { StyledPopover } from '../../Popover/Popover';
+import { StyledPopover } from '../../Popover/Popover.styles';
 import { StyledSelect } from '../../Select/Select';
 export const BareInput = styled.input(({ theme, size }) => {
     return css `
@@ -66,17 +66,25 @@ export const StyledInputContainer = styled.div `
     option {
       font-weight: ${p => p.theme.base['font-weight'].normal};
     }
+
+    @media (pointer: coarse) {
+      min-height: inherit;
+    }
   }
 `;
 const StyledDateTime = styled.div(props => {
-    const { theme: { base: { 'font-family': fontFamily, spacing, 'border-radius': baseBorderRadius }, components: { input: { height }, 'form-control': { 'border-radius': formBorderRadius, 'foreground-color': fgColor, 'border-width': borderWidth, ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow } } } } } = props;
+    const { theme: { base: { 'font-family': fontFamily, spacing, 'border-radius': baseBorderRadius, 'hit-area': hitArea }, components: { input: { height }, 'form-control': { 'border-radius': formBorderRadius, 'foreground-color': fgColor, 'border-width': borderWidth, ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow } } } } } = props;
     return css `
-    font-size: 1em;
     min-width: min-content;
     height: ${height};
+    min-height: ${hitArea['mouse-min']};
     outline: none;
     padding: 0 ${spacing};
 
+    @media (pointer: coarse) {
+      min-height: ${hitArea['finger-min']};
+    }
+
     &:focus-within:not([readonly]):not([disabled]) {
       border-color: ${focusBorderColor};
       box-shadow: ${shadow};
@@ -91,6 +99,9 @@ const StyledDateTime = styled.div(props => {
       }
       min-height: calc(${height} - 2 * ${borderWidth});
       height: calc(${height} - 2 * ${borderWidth});
+      @media (pointer: coarse) {
+        min-height: calc(${hitArea['finger-min']} - 2 * ${borderWidth});
+      }
     }
 
     ${StyledPopover},

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

@@ -1 +1 @@
-{"version":3,"file":"DateTime.styles.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateTime.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACxD,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,kBAAkB,CAAC;;;aAGpD,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCd,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;MAIxC,YAAY;;;;;;;;;qBASG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;;;qBAI7C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM;;;CAG3D,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACxC,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,EAC/E,UAAU,EAAE,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,EACjB,cAAc,EAAE,EACd,eAAe,EAAE,gBAAgB,EACjC,kBAAkB,EAAE,OAAO,EAC3B,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACF,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;;cAGE,MAAM;;iBAEH,OAAO;;;sBAGF,gBAAgB;oBAClB,MAAM;;;QAGlB,YAAY;4BACQ,gBAAgB,MAAM,gBAAgB;;;;iBAIjD,OAAO;;yBAEC,MAAM,UAAU,WAAW;qBAC/B,MAAM,UAAU,WAAW;;;MAG1C,aAAa;MACb,YAAY;qBACG,UAAU;;GAE5B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,eAAe,cAAc,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport { StyledButton } from '../../Button';\nimport { StyledPopover } from '../../Popover/Popover';\nimport { StyledSelect } from '../../Select/Select';\n\nexport const BareInput = styled.input(({ theme, size }) => {\n  return css`\n    color: ${theme.components['form-control']['foreground-color']};\n    border: 0;\n    outline: none;\n    width: ${size}ch;\n    background-color: transparent;\n    text-align: end;\n    margin-inline-end: 0.125rem;\n    height: inherit;\n\n    &::placeholder {\n      font-size: 0.6em;\n      text-align: center;\n      transform: translateY(-0.35ex);\n    }\n\n    &:last-child {\n      text-align: start;\n    }\n\n    &:nth-child(3) {\n      text-align: start;\n      &::placeholder {\n        text-align: start;\n      }\n    }\n\n    ::-webkit-outer-spin-button,\n    ::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n\n    &[type='number'] {\n      -moz-appearance: textfield;\n    }\n\n    :not(:first-child) {\n      margin-inline-start: 0.125rem;\n    }\n  `;\n});\n\nBareInput.defaultProps = defaultThemeProp;\n\nexport const StyledInputContainer = styled.div`\n  height: inherit;\n  overflow: hidden;\n\n  > ${StyledSelect} {\n    border: 0;\n    background-color: transparent;\n    color: currentcolor;\n    opacity: 1;\n    width: max-content;\n\n    &:focus:not([readonly]):enabled {\n      box-shadow: none;\n      font-weight: ${p => p.theme.base['font-weight']['semi-bold']};\n    }\n\n    option {\n      font-weight: ${p => p.theme.base['font-weight'].normal};\n    }\n  }\n`;\n\nconst StyledDateTime = styled.div(props => {\n  const {\n    theme: {\n      base: { 'font-family': fontFamily, spacing, 'border-radius': baseBorderRadius },\n      components: {\n        input: { height },\n        'form-control': {\n          'border-radius': formBorderRadius,\n          'foreground-color': fgColor,\n          'border-width': borderWidth,\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n        }\n      }\n    }\n  } = props;\n  return css`\n    font-size: 1em;\n    min-width: min-content;\n    height: ${height};\n    outline: none;\n    padding: 0 ${spacing};\n\n    &:focus-within:not([readonly]):not([disabled]) {\n      border-color: ${focusBorderColor};\n      box-shadow: ${shadow};\n    }\n\n    > ${StyledButton} {\n      border-radius: calc(${baseBorderRadius} * ${formBorderRadius});\n      margin-inline-start: auto;\n      border: 0;\n      &:enabled {\n        color: ${fgColor};\n      }\n      min-height: calc(${height} - 2 * ${borderWidth});\n      height: calc(${height} - 2 * ${borderWidth});\n    }\n\n    ${StyledPopover},\n    ${StyledSelect} {\n      font-family: ${fontFamily};\n    }\n  `;\n});\n\nStyledDateTime.defaultProps = defaultThemeProp;\n\nexport default StyledDateTime;\n"]}
+{"version":3,"file":"DateTime.styles.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/DateTime.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACxD,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,kBAAkB,CAAC;;;aAGpD,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCd,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;MAIxC,YAAY;;;;;;;;;qBASG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;;;qBAI7C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM;;;;;;;CAO3D,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACxC,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,aAAa,EAAE,UAAU,EACzB,OAAO,EACP,eAAe,EAAE,gBAAgB,EACjC,UAAU,EAAE,OAAO,EACpB,EACD,UAAU,EAAE,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,EACjB,cAAc,EAAE,EACd,eAAe,EAAE,gBAAgB,EACjC,kBAAkB,EAAE,OAAO,EAC3B,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACF,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;cAEE,MAAM;kBACF,OAAO,CAAC,WAAW,CAAC;;iBAErB,OAAO;;;oBAGJ,OAAO,CAAC,YAAY,CAAC;;;;sBAInB,gBAAgB;oBAClB,MAAM;;;QAGlB,YAAY;4BACQ,gBAAgB,MAAM,gBAAgB;;;;iBAIjD,OAAO;;yBAEC,MAAM,UAAU,WAAW;qBAC/B,MAAM,UAAU,WAAW;;2BAErB,OAAO,CAAC,YAAY,CAAC,UAAU,WAAW;;;;MAI/D,aAAa;MACb,YAAY;qBACG,UAAU;;GAE5B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,eAAe,cAAc,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../../theme';\nimport { StyledButton } from '../../Button';\nimport { StyledPopover } from '../../Popover/Popover.styles';\nimport { StyledSelect } from '../../Select/Select';\n\nexport const BareInput = styled.input(({ theme, size }) => {\n  return css`\n    color: ${theme.components['form-control']['foreground-color']};\n    border: 0;\n    outline: none;\n    width: ${size}ch;\n    background-color: transparent;\n    text-align: end;\n    margin-inline-end: 0.125rem;\n    height: inherit;\n\n    &::placeholder {\n      font-size: 0.6em;\n      text-align: center;\n      transform: translateY(-0.35ex);\n    }\n\n    &:last-child {\n      text-align: start;\n    }\n\n    &:nth-child(3) {\n      text-align: start;\n      &::placeholder {\n        text-align: start;\n      }\n    }\n\n    ::-webkit-outer-spin-button,\n    ::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n\n    &[type='number'] {\n      -moz-appearance: textfield;\n    }\n\n    :not(:first-child) {\n      margin-inline-start: 0.125rem;\n    }\n  `;\n});\n\nBareInput.defaultProps = defaultThemeProp;\n\nexport const StyledInputContainer = styled.div`\n  height: inherit;\n  overflow: hidden;\n\n  > ${StyledSelect} {\n    border: 0;\n    background-color: transparent;\n    color: currentcolor;\n    opacity: 1;\n    width: max-content;\n\n    &:focus:not([readonly]):enabled {\n      box-shadow: none;\n      font-weight: ${p => p.theme.base['font-weight']['semi-bold']};\n    }\n\n    option {\n      font-weight: ${p => p.theme.base['font-weight'].normal};\n    }\n\n    @media (pointer: coarse) {\n      min-height: inherit;\n    }\n  }\n`;\n\nconst StyledDateTime = styled.div(props => {\n  const {\n    theme: {\n      base: {\n        'font-family': fontFamily,\n        spacing,\n        'border-radius': baseBorderRadius,\n        'hit-area': hitArea\n      },\n      components: {\n        input: { height },\n        'form-control': {\n          'border-radius': formBorderRadius,\n          'foreground-color': fgColor,\n          'border-width': borderWidth,\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n        }\n      }\n    }\n  } = props;\n  return css`\n    min-width: min-content;\n    height: ${height};\n    min-height: ${hitArea['mouse-min']};\n    outline: none;\n    padding: 0 ${spacing};\n\n    @media (pointer: coarse) {\n      min-height: ${hitArea['finger-min']};\n    }\n\n    &:focus-within:not([readonly]):not([disabled]) {\n      border-color: ${focusBorderColor};\n      box-shadow: ${shadow};\n    }\n\n    > ${StyledButton} {\n      border-radius: calc(${baseBorderRadius} * ${formBorderRadius});\n      margin-inline-start: auto;\n      border: 0;\n      &:enabled {\n        color: ${fgColor};\n      }\n      min-height: calc(${height} - 2 * ${borderWidth});\n      height: calc(${height} - 2 * ${borderWidth});\n      @media (pointer: coarse) {\n        min-height: calc(${hitArea['finger-min']} - 2 * ${borderWidth});\n      }\n    }\n\n    ${StyledPopover},\n    ${StyledSelect} {\n      font-family: ${fontFamily};\n    }\n  `;\n});\n\nStyledDateTime.defaultProps = defaultThemeProp;\n\nexport default StyledDateTime;\n"]}

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

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '../../../types';
 import { MinuteInterval } from '../Picker/TimePicker';
-import DateTimeProps from './DateTime.types';
+import DateTimeProps from '../DateTime.types';
 import { ClockFormat } from './utils';
 export interface DateTimeInputProps extends DateTimeProps {
     /**

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,OAAc,EAIZ,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAU9C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGtD,OAAO,aAA4C,MAAM,kBAAkB,CAAC;AAE5E,OAAO,EACL,WAAW,EASZ,MAAM,SAAS,CAAC;AAMjB,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;CAC3B;AAED,eAAO,MAAM,mBAAmB,yHAc9B,CAAC;AAiFH,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAqevE,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,EAOlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAY9C,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;CAC3B;AAED,eAAO,MAAM,mBAAmB,yHAc9B,CAAC;AAiFH,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA8fvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -1,4 +1,5 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../../theme';
 import { StyledFormControl } from '../../FormControl';
@@ -7,16 +8,19 @@ import { useConfiguration, useConsolidatedRef, useFocusWithin, useI18n } from '.
 import Select, { Option } from '../../Select';
 import Flex from '../../Flex';
 import Button from '../../Button';
-import Icon from '../../Icon';
+import Icon, { registerIcon } from '../../Icon';
+import * as timesIcon from '../../Icon/icons/times.icon';
+import * as calendarIcon from '../../Icon/icons/calendar.icon';
 import Popover, { StyledPopover } from '../../Popover';
 import DatePicker from '../Picker/DatePicker';
 import { StyledFormField } from '../../FormField/FormField';
 import StyledDateTime, { StyledInputContainer } from './DateTime.styles';
-import { getButtonAriaLabel, getDateFormat, getTimeOptions, is12HClockFormat, parsePastedTextToDate, parseToDate, validateDate, validateTime } from './utils';
+import { generatePickerButtonAriaLabel, getDateFormat, getTimeOptions, is12HClockFormat, parsePastedTextToDate, parseToDate, validateDate, validateTime } from './utils';
 import TimeInput from './TimeInput';
 import useAutoFocusNextInput from './useAutoFocusNextInput';
 import PartInput from './PartInput';
 import usePickerButton from './usePickerButton';
+registerIcon(timesIcon, calendarIcon);
 export const StyledDateTimeInput = styled(StyledDateTime)(props => {
     const { theme: { base: { spacing } } } = props;
     return css `
@@ -90,6 +94,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, autoFocus, ...restProps } = props;
+    const t = useI18n();
     const dateTime = value !== undefined ? parseToDate(value) : undefined;
     const is12h = clockFormat ? clockFormat === 12 : is12HClockFormat(locale);
     const [meridiem, setMeridiem] = useState(is12h ? () => (dateTime ? getMeridiem(dateTime.getUTCHours()) : 'AM') : undefined);
@@ -115,22 +120,20 @@ const DateTimeInput = forwardRef((props, ref) => {
         secondInputRef
     ]);
     const pickDateParts = () => {
-        var _a, _b, _c;
-        const month = ((_a = monthInputRef.current) === null || _a === void 0 ? void 0 : _a.value)
+        const month = monthInputRef.current?.value
             ? (Number(monthInputRef.current.value) - 1).toString()
             : undefined;
         return [
-            ((_b = yearInputRef.current) === null || _b === void 0 ? void 0 : _b.value) || undefined,
+            yearInputRef.current?.value || undefined,
             month,
-            ((_c = dayInputRef.current) === null || _c === void 0 ? void 0 : _c.value) || undefined
+            dayInputRef.current?.value || undefined
         ];
     };
     const pickTimeParts = () => {
-        var _a, _b, _c;
         return [
-            ((_a = hourInputRef.current) === null || _a === void 0 ? void 0 : _a.value) || undefined,
-            ((_b = minuteInputRef.current) === null || _b === void 0 ? void 0 : _b.value) || undefined
-        ].concat(withSeconds ? [(_c = secondInputRef.current) === null || _c === void 0 ? void 0 : _c.value] : []);
+            hourInputRef.current?.value || undefined,
+            minuteInputRef.current?.value || undefined
+        ].concat(withSeconds ? [secondInputRef.current?.value] : []);
     };
     const pickParts = () => {
         return [...pickDateParts(), ...pickTimeParts()];
@@ -148,12 +151,19 @@ const DateTimeInput = forwardRef((props, ref) => {
         const parts = pickTimeParts();
         if (parts.every(Boolean)) {
             const [hour, minute, second = 0] = parts.map(Number);
-            const current = dateTime !== null && dateTime !== void 0 ? dateTime : new Date();
+            const current = dateTime ?? new Date();
             return validateTime(hour, minute, second, is12h)
                 ? new Date(current.setUTCHours(is12h ? convertTo24h(hour, meridiem) : hour, minute, second))
                 : undefined;
         }
     };
+    const currentlySelectedDateTime = () => {
+        const selectedDate = currentlySelectedDate();
+        const selectedTime = currentlySelectedTime();
+        return selectedDate && selectedTime
+            ? new Date(selectedDate.setUTCHours(selectedTime.getUTCHours(), selectedTime.getUTCMinutes(), selectedTime.getUTCSeconds()))
+            : undefined;
+    };
     const setDefaultTimeIfEmpty = () => {
         // set value to midnight if time empty, skip if date not fully set
         if (pickTimeParts().every(p => !p) && pickDateParts().every(Boolean)) {
@@ -169,10 +179,11 @@ const DateTimeInput = forwardRef((props, ref) => {
             }
         }
     };
+    const [open, setOpen, , setPopoverRef, buttonEl, setButtonEl] = usePickerButton(setDefaultTimeIfEmpty);
     const onInputChange = () => {
-        var _a;
-        const currentMeridiem = ((_a = meridiemSelectRef.current) === null || _a === void 0 ? void 0 : _a.value) || undefined;
-        onChange === null || onChange === void 0 ? void 0 : onChange(convertToCallbackParameter(dateTime ? new Date(dateTime) : new Date(), pickParts(), is12h ? currentMeridiem : undefined));
+        const currentMeridiem = meridiemSelectRef.current?.value || undefined;
+        onChange?.(convertToCallbackParameter(dateTime ? new Date(dateTime) : new Date(), pickParts(), is12h ? currentMeridiem : undefined));
+        buttonEl?.setAttribute('aria-label', generatePickerButtonAriaLabel(currentlySelectedDateTime(), 'datetime', locale, t, open));
     };
     const setInputValue = (newValue) => {
         dayInputRef.current.value = newValue.getUTCDate().toString().padStart(2, '0');
@@ -204,23 +215,20 @@ const DateTimeInput = forwardRef((props, ref) => {
         if (!focused) {
             if (inputContainerRef.current)
                 inputContainerRef.current.scrollTop = 0;
-            onBlur === null || onBlur === void 0 ? void 0 : onBlur(callbackParam);
+            onBlur?.(callbackParam);
         }
     };
-    const t = useI18n();
-    const DayInput = (React.createElement(PartInput, { key: 'day', placeholder: t('day_placeholder'), "aria-label": t('day_label_a11y'), value: dateTime === null || dateTime === void 0 ? void 0 : dateTime.getUTCDate(), onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, min: 1, max: 31, ref: dayInputRef }));
-    const MonthInput = (React.createElement(PartInput, { key: 'month', placeholder: t('month_placeholder'), "aria-label": t('month_label_a11y'), value: dateTime ? dateTime.getUTCMonth() + 1 : undefined, onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, min: 1, max: 12, ref: monthInputRef }));
-    const YearInput = (React.createElement(PartInput, { key: 'year', placeholder: t('year_placeholder'), "aria-label": t('year_label_a11y'), value: dateTime === null || dateTime === void 0 ? void 0 : dateTime.getUTCFullYear(), onChange: onInputChange, size: 4, maxLength: 4, readOnly: readOnly, min: 1, ref: yearInputRef }));
-    const hour = dateTime && is12h ? convertTo12h(dateTime.getUTCHours()) : dateTime === null || dateTime === void 0 ? void 0 : dateTime.getUTCHours();
-    const HourInput = (React.createElement(PartInput, { key: 'hour', placeholder: t('hour_placeholder'), "aria-label": t('hour_label_a11y'), value: hour, onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, min: is12h ? 1 : 0, max: is12h ? 12 : 23, ref: hourInputRef }));
-    const MinuteInput = (React.createElement(PartInput, { key: 'minute', placeholder: t('minute_placeholder'), "aria-label": t('minute_label_a11y'), value: dateTime === null || dateTime === void 0 ? void 0 : dateTime.getUTCMinutes(), onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, max: 59, ref: minuteInputRef }));
-    const SecondInput = (React.createElement(PartInput, { key: 'second', placeholder: t('second_placeholder'), "aria-label": t('second_label_a11y'), value: dateTime === null || dateTime === void 0 ? void 0 : dateTime.getUTCSeconds(), onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, max: 59, ref: secondInputRef }));
-    const Period = (React.createElement(Select, { ref: meridiemSelectRef, "aria-label": t('meridiem_label_a11y'), key: 'period', value: meridiem, required: required, disabled: disabled, onChange: (ev) => {
+    const DayInput = (_jsx(PartInput, { placeholder: t('day_placeholder'), "aria-label": t('day_label_a11y'), 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": t('month_label_a11y'), value: dateTime ? dateTime.getUTCMonth() + 1 : undefined, onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, min: 1, max: 12, ref: monthInputRef }, 'month'));
+    const YearInput = (_jsx(PartInput, { placeholder: t('year_placeholder'), "aria-label": t('year_label_a11y'), value: dateTime?.getUTCFullYear(), onChange: onInputChange, size: 4, maxLength: 4, readOnly: readOnly, min: 1, ref: yearInputRef }, 'year'));
+    const hour = dateTime && is12h ? convertTo12h(dateTime.getUTCHours()) : dateTime?.getUTCHours();
+    const HourInput = (_jsx(PartInput, { placeholder: t('hour_placeholder'), "aria-label": t('hour_label_a11y'), value: hour, onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, min: is12h ? 1 : 0, max: is12h ? 12 : 23, ref: hourInputRef }, 'hour'));
+    const MinuteInput = (_jsx(PartInput, { placeholder: t('minute_placeholder'), "aria-label": t('minute_label_a11y'), value: dateTime?.getUTCMinutes(), onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, max: 59, ref: minuteInputRef }, 'minute'));
+    const SecondInput = (_jsx(PartInput, { placeholder: t('second_placeholder'), "aria-label": t('second_label_a11y'), value: dateTime?.getUTCSeconds(), onChange: onInputChange, size: 2, maxLength: 2, readOnly: readOnly, max: 59, ref: secondInputRef }, 'second'));
+    const Period = (_jsxs(Select, { ref: meridiemSelectRef, "aria-label": t('meridiem_label_a11y'), value: meridiem, required: required, disabled: disabled, onChange: (ev) => {
             setMeridiem(ev.target.value);
             onInputChange();
-        }, readOnly: readOnly },
-        React.createElement(Option, { value: 'AM' }, t('meridiem_value_am')),
-        React.createElement(Option, { value: 'PM' }, t('meridiem_value_pm'))));
+        }, readOnly: readOnly, children: [_jsx(Option, { value: 'AM', children: t('meridiem_value_am') }, void 0), _jsx(Option, { value: 'PM', children: t('meridiem_value_pm') }, void 0)] }, 'period'));
     const orderedRefs = [];
     const dateInputs = getDateFormat(locale, dateOptions()).map(part => {
         switch (part) {
@@ -256,83 +264,71 @@ const DateTimeInput = forwardRef((props, ref) => {
         }
     });
     useEffect(() => {
-        var _a;
         if (autoFocus)
-            (_a = orderedRefs[0].current) === null || _a === void 0 ? void 0 : _a.focus();
+            orderedRefs[0].current?.focus();
     }, [autoFocus]);
-    const [open, setOpen, , setPopoverRef, , setButtonEl] = usePickerButton(setDefaultTimeIfEmpty);
     const containerRef = useConsolidatedRef(ref);
     useFocusWithin([containerRef], onFocusChange);
     const [timeInputStatus, setTimeInputStatus] = useState();
-    const Picker = (React.createElement(React.Fragment, null,
-        React.createElement(Button, { variant: 'simple', icon: true, ref: setButtonEl, onClick: () => {
-                setTimeInputStatus(undefined);
-                setOpen(cur => !cur);
-            }, "aria-label": getButtonAriaLabel(currentlySelectedTime(), 'datetime', open, is12h), readOnly: readOnly, disabled: disabled },
-            React.createElement(Icon, { name: open ? 'times' : 'calendar' })),
-        React.createElement(Popover, { show: open, ref: setPopoverRef, target: containerRef.current, placement: 'bottom-end', strategy: 'fixed', modifiers: [
-                {
-                    name: 'flip',
-                    options: {
-                        fallbackPlacements: ['top-end', 'right', 'left']
-                    }
-                }
-            ] },
-            React.createElement(DatePicker, { selected: currentlySelectedDate(), onChange: selected => {
-                    dayInputRef.current.value = selected.getUTCDate().toString().padStart(2, '0');
-                    monthInputRef.current.value = (selected.getUTCMonth() + 1)
-                        .toString()
-                        .padStart(2, '0');
-                    yearInputRef.current.value = selected.getUTCFullYear().toString();
-                    onInputChange();
-                }, min: min, max: max, showWeekNumber: showWeekNumber }),
-            React.createElement(TimeInput, { label: t('time_text'), pickerInterval: pickerInterval, value: currentlySelectedTime(), withSeconds: withSeconds, clockFormat: clockFormat, status: timeInputStatus, onChange: selected => {
-                    if (Number.isNaN(selected.valueAsTimestamp)) {
-                        if (selected.state !== 'incomplete') {
-                            setTimeInputStatus('warning');
-                        }
-                        return;
-                    }
+    const Picker = (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'simple', icon: true, ref: setButtonEl, onClick: () => {
                     setTimeInputStatus(undefined);
-                    const selectedDate = selected.valueAsTimestamp
-                        ? new Date(selected.valueAsTimestamp)
-                        : undefined;
-                    hourInputRef.current.value = selectedDate
-                        ? (is12h ? convertTo12h(selectedDate.getUTCHours()) : selectedDate.getUTCHours())
-                            .toString()
-                            .padStart(2, '0')
-                        : '';
-                    minuteInputRef.current.value = selectedDate
-                        ? selectedDate.getUTCMinutes().toString().padStart(2, '0')
-                        : '';
-                    if (withSeconds)
-                        secondInputRef.current.value = selectedDate
-                            ? selectedDate.getUTCSeconds().toString().padStart(2, '0')
-                            : '';
-                    if (selectedDate) {
-                        if (meridiemSelectRef.current) {
-                            meridiemSelectRef.current.value = getMeridiem(selectedDate.getUTCHours());
+                    setOpen(cur => !cur);
+                }, "aria-label": generatePickerButtonAriaLabel(currentlySelectedDateTime(), 'datetime', locale, t, open), readOnly: readOnly, disabled: disabled, children: _jsx(Icon, { name: open ? 'times' : 'calendar' }, void 0) }, void 0), _jsxs(Popover, { show: open, ref: setPopoverRef, target: containerRef.current, placement: 'bottom-end', strategy: 'fixed', modifiers: [
+                    {
+                        name: 'flip',
+                        options: {
+                            fallbackPlacements: ['top-end', 'right', 'left']
                         }
-                        setMeridiem(getMeridiem(selectedDate.getUTCHours()));
                     }
-                    onInputChange();
-                }, onBlur: selected => {
-                    if (Number.isNaN(selected.valueAsTimestamp))
-                        setTimeInputStatus('warning');
-                    else
-                        setTimeInputStatus(undefined);
-                } }))));
-    const Comp = (React.createElement(Flex, { as: StyledDateTimeInput, forwardedAs: StyledFormControl, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, ref: containerRef, onClick: (e) => {
-            var _a;
+                ], children: [_jsx(DatePicker, { selected: currentlySelectedDate(), onChange: selected => {
+                            dayInputRef.current.value = selected.getUTCDate().toString().padStart(2, '0');
+                            monthInputRef.current.value = (selected.getUTCMonth() + 1)
+                                .toString()
+                                .padStart(2, '0');
+                            yearInputRef.current.value = selected.getUTCFullYear().toString();
+                            onInputChange();
+                        }, min: min, max: max, showWeekNumber: showWeekNumber }, void 0), _jsx(TimeInput, { label: t('time_text'), pickerInterval: pickerInterval, value: currentlySelectedTime(), withSeconds: withSeconds, clockFormat: clockFormat, status: timeInputStatus, onChange: selected => {
+                            if (Number.isNaN(selected.valueAsTimestamp)) {
+                                if (selected.state !== 'incomplete') {
+                                    setTimeInputStatus('warning');
+                                }
+                                return;
+                            }
+                            setTimeInputStatus(undefined);
+                            const selectedDate = selected.valueAsTimestamp
+                                ? new Date(selected.valueAsTimestamp)
+                                : undefined;
+                            hourInputRef.current.value = selectedDate
+                                ? (is12h ? convertTo12h(selectedDate.getUTCHours()) : selectedDate.getUTCHours())
+                                    .toString()
+                                    .padStart(2, '0')
+                                : '';
+                            minuteInputRef.current.value = selectedDate
+                                ? selectedDate.getUTCMinutes().toString().padStart(2, '0')
+                                : '';
+                            if (withSeconds)
+                                secondInputRef.current.value = selectedDate
+                                    ? selectedDate.getUTCSeconds().toString().padStart(2, '0')
+                                    : '';
+                            if (selectedDate) {
+                                if (meridiemSelectRef.current) {
+                                    meridiemSelectRef.current.value = getMeridiem(selectedDate.getUTCHours());
+                                }
+                                setMeridiem(getMeridiem(selectedDate.getUTCHours()));
+                            }
+                            onInputChange();
+                        }, onBlur: selected => {
+                            if (Number.isNaN(selected.valueAsTimestamp))
+                                setTimeInputStatus('warning');
+                            else
+                                setTimeInputStatus(undefined);
+                        } }, void 0)] }, void 0)] }, void 0));
+    const Comp = (_jsxs(Flex, { as: StyledDateTimeInput, forwardedAs: StyledFormControl, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, ref: containerRef, onClick: (e) => {
             if (e.target === containerRef.current)
-                (_a = orderedRefs[0].current) === null || _a === void 0 ? void 0 : _a.focus();
-        }, ...restProps },
-        React.createElement(Flex, { ref: inputContainerRef, as: StyledInputContainer, container: { alignItems: 'center', wrap: 'wrap' }, onPaste: onPaste },
-            dateInputs,
-            timeInputs),
-        !readOnly && Picker));
+                orderedRefs[0].current?.focus();
+        }, ...restProps, children: [_jsxs(Flex, { ref: inputContainerRef, as: StyledInputContainer, container: { alignItems: 'center', wrap: 'wrap' }, onPaste: onPaste, children: [dateInputs, timeInputs] }, void 0), !readOnly && Picker] }, void 0));
     useAutoFocusNextInput(orderedRefs);
-    return label ? (React.createElement(FormField, { as: 'fieldset', labelAs: 'legend', ref: ref, ...{ label, labelHidden, id, info, status, required, disabled } }, Comp)) : (Comp);
+    return label ? (_jsx(FormField, { as: 'fieldset', labelAs: 'legend', ref: ref, ...{ label, labelHidden, id, info, status, required, disabled }, children: Comp }, void 0)) : (Comp);
 });
 export default DateTimeInput;
 //# sourceMappingURL=DateTimeInput.js.map