@os-design/core 1.0.280 → 1.0.281

package/dist/DatePicker/index.js

@@ -1,315 +1,409 @@
-import styled from '@emotion/styled';
-import { defaultLocale, getAccessibilityDateLabel, useFormattedValue, isSameDay } from '@os-design/date-picker-utils';
-import { Down, Up } from '@os-design/icons';
 import { useIsMinWidth } from '@os-design/media';
-import { ThemeOverrider } from '@os-design/theming';
-import { useForwardedRef, useForwardedState, useKeyPress } from '@os-design/utils';
-import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import Button from '../Button/index.js';
+import { enableScrollingStyles, resetFocusStyles } from '@os-design/styles';
+import { omitEmotionProps, useForwardedRef, useForwardedState } from '@os-design/utils';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Modal from '../Modal/index.js';
+import InputDateUnstyled, { convertTo12hours, nextToken, replaceSubstring, tokens } from '../InputDateUnstyled/index.js';
+import DateCalendar from '../DateCalendar/index.js';
+import TimeGrid from '../TimeGrid/index.js';
+import styled from '@emotion/styled';
 import Popover from '../Popover/index.js';
-import { ClearIcon, Placeholder, SelectContainer, Title, ToggleContent, ToggleIconContainer, ToggleLeftAddon, ToggleRightAddon } from '../Select/index.js';
-import TimePicker from '../TimePicker/index.js';
-import DatePickerCalendar from './DatePickerCalendar.js';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledPopover = styled(Popover)`
-  padding: ${p => p.theme.datePickerPadding}em;
-`;
-const TimeContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  margin-top: 0.5em;
-`;
-const Dash = styled.div`
-  margin: 0 0.5em;
-  line-height: ${p => p.theme.baseHeight}em;
-`;
-const StyledTimePicker = styled(TimePicker)`
-  width: 2.5em;
-  text-align: center;
-`;
-const timePickerStyle = {
-  style: {
-    width: 'auto'
+import Button from '../Button/index.js';
+import { Calendar } from '@os-design/icons';
+import { InputContainer, TimeGridSkeleton } from '../index.js';
+import { clr, ThemeOverrider } from '@os-design/theming';
+import { css } from '@emotion/react';
+import createTimes from './utils/createTimes.js';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const dateTokens = ['DD', 'MM', 'YYYY', 'YY'];
+const timeTokens = ['hh', 'HH', 'mm', 'aa'];
+const tokenGetterMap = {
+  DD: ({
+    day
+  }) => day.toString().padStart(2, '0'),
+  MM: ({
+    month
+  }) => (month + 1).toString().padStart(2, '0'),
+  YYYY: ({
+    year
+  }) => year.toString(),
+  YY: ({
+    year
+  }) => year.toString().slice(2, 4),
+  hh: ({
+    hour
+  }) => {
+    const [h] = convertTo12hours(hour);
+    return h.toString().padStart(2, '0');
+  },
+  HH: ({
+    hour
+  }) => hour.toString().padStart(2, '0'),
+  mm: ({
+    minute
+  }) => minute.toString().padStart(2, '0'),
+  aa: ({
+    hour
+  }) => {
+    const [, meridiem] = convertTo12hours(hour);
+    return meridiem;
+  }
+};
+const getPickerType = token => {
+  if (dateTokens.includes(token)) {
+    return 'date';
+  }
+  if (timeTokens.includes(token)) {
+    return 'time';
   }
+  return null;
 };
-const createDate = (date, time) => {
-  const d = new Date(0);
-  d.setFullYear(date.getFullYear());
-  d.setMonth(date.getMonth());
-  d.setDate(date.getDate());
-  d.setHours(0);
-  d.setMinutes(0);
-  if (time) {
-    d.setHours(time.getHours());
-    d.setMinutes(time.getMinutes());
+const getNextTokenDiffType = (startPos, format) => {
+  const current = nextToken(startPos, format, tokens);
+  if (!current) return null;
+  const currentType = getPickerType(current.token);
+  let pos = current.end;
+  while (pos < format.length) {
+    const next = nextToken(pos, format, tokens);
+    if (!next) return null;
+    const nextType = getPickerType(next.token);
+    if (nextType !== currentType) return next;
+    pos = next.end;
   }
-  return d;
+  return null;
 };
+const preventDefault = e => e.preventDefault();
+const notHasRightStyles = p => !p.hasRight && css`
+    padding-right: ${p.theme.inputPaddingHorizontal}em;
+  `;
+const hideSpinButton = css`
+  /* Chrome, Safari, Edge, Opera */
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  /* Firefox */
+  appearance: textfield;
+`;
+const StyledInputDateUnstyled = styled(InputDateUnstyled, omitEmotionProps('hasRight'))`
+  ${resetFocusStyles};
+  border: none;
+  font-size: 1em;
+  flex: 1;
+  width: 100%;
+  overflow: hidden;
 
+  color: ${p => clr(p.theme.inputColorText)};
+  background-color: transparent;
+  padding-left: ${p => p.theme.inputPaddingHorizontal}em;
+
+  &::placeholder {
+    color: ${p => clr(p.theme.inputColorPlaceholder)};
+  }
+
+  ${hideSpinButton};
+  ${notHasRightStyles};
+`;
+const PickerButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const PADDING_EM = 0.8;
+const StyledPopover = styled(Popover)`
+  padding: ${PADDING_EM}em;
+  width: ${p => p.theme.dateCalendarCellSize * 7 + PADDING_EM * 2}em;
+  max-height: ${p => p.theme.baseHeight * p.theme.sizes.small + 0.5 + p.theme.dateCalendarCellSize * 7}em;
+  ${enableScrollingStyles('y')};
+`;
+const StyledModal = styled(Modal)`
+  padding: ${PADDING_EM}em;
+`;
+const defaultTimes = createTimes({
+  hour: 9,
+  minute: 0
+}, {
+  hour: 18,
+  minute: 0
+}, 30);
 /**
- * The component to choose a date.
+ * The component to enter or choose a date/time.
  */
 const DatePicker = /*#__PURE__*/forwardRef(({
-  left,
-  leftHasPadding = false,
-  right,
-  rightHasPadding = false,
-  placeholder,
+  format = 'DD.MM.YYYY',
+  firstDayOfWeek = 0,
+  times = defaultTimes,
+  timeColumns = 3,
   disabled = false,
-  autoFocus = false,
+  disabledDays,
+  disabledTimes: disabledTimesFn,
+  locale,
+  showPicker = false,
   autoOpen = false,
-  format,
-  firstDayOfWeek = 'sunday',
-  locale = defaultLocale,
-  showTime = false,
-  timeNotation = '12-hour',
-  range = false,
+  containerRef,
+  containerProps = {},
   value,
   defaultValue,
   onChange,
-  onClose = () => {},
+  onDayChange = () => {},
+  onTimeChange = () => {},
+  onDayError,
+  onFocus = () => {},
   onBlur = () => {},
+  onEnd = () => {},
   size,
   ...rest
 }, ref) => {
-  const [containerRef, mergedContainerRef] = useForwardedRef(ref);
-  const [opened, setOpened] = useState(autoOpen);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [innerContainerRef, mergedContainerRef] = useForwardedRef(containerRef);
+  const [innerInputRef, mergedInputRef] = useForwardedRef(ref);
+  const [inputValue, setInputValue] = useState(undefined);
+  const [inputSelection, setInputSelection] = useState({
+    start: 0,
+    end: 0
+  });
+  const [inputFocused, setInputFocused] = useState(false);
   const [forwardedValue, setForwardedValue] = useForwardedState({
     value,
     defaultValue,
     onChange
   });
+  const [pickerType, setPickerType] = useState('date');
+  const [pickerVisibility, setPickerVisibility] = useState(false);
+  const [day, setDay] = useState(null);
+  const [time, setTime] = useState(null);
+  const [loadingTimes, setLoadingTimes] = useState(false);
+  const [disabledTimes, setDisabledTimes] = useState([]);
+  const inputValueRef = useRef(inputValue);
+  useEffect(() => {
+    inputValueRef.current = inputValue;
+  }, [inputValue]);
+  const inputSelectionRef = useRef(inputSelection);
   useEffect(() => {
-    if (autoFocus) containerRef.current?.focus();
-  }, [autoFocus, containerRef]);
-  const onCloseRef = useRef(onClose);
+    inputSelectionRef.current = inputSelection;
+  }, [inputSelection]);
+  const forwardedValueRef = useRef(forwardedValue);
   useEffect(() => {
-    onCloseRef.current = onClose;
-  }, [onClose]);
+    forwardedValueRef.current = forwardedValue;
+  }, [forwardedValue]);
+  const formatRef = useRef(format);
   useEffect(() => {
-    if (!opened) {
-      onCloseRef.current();
-      containerRef.current?.focus();
+    formatRef.current = format;
+  }, [format]);
+  useEffect(() => {
+    if (day) onDayChange(day);
+  }, [day, onDayChange]);
+  useEffect(() => {
+    if (time) onTimeChange(time);
+  }, [time, onTimeChange]);
+  useEffect(() => {
+    const {
+      start,
+      end
+    } = inputSelection;
+    if (end === start && end === format.length) {
+      onEnd();
     }
-  }, [containerRef, opened]);
-  const formattedValue = useFormattedValue({
-    forwardedValue,
-    format,
-    showTime,
-    timeNotation
-  });
-  const closeHandler = useCallback(() => {
-    setOpened(false);
-  }, []);
-  useKeyPress(typeof window !== 'undefined' ? window : undefined, 'Escape', closeHandler);
+  }, [format.length, inputSelection, onEnd]);
   const isMinXs = useIsMinWidth('xs');
-  const blurHandler = useCallback(e => {
-    if (!opened) onBlur(e);
-  }, [onBlur, opened]);
-  const valueIsSpecified = useMemo(() => formattedValue !== undefined && formattedValue !== null, [formattedValue]);
-  const rightHasPaddingValue = useMemo(() => {
-    if (valueIsSpecified) return false;
-    return right ? rightHasPadding : true;
-  }, [right, rightHasPadding, valueIsSpecified]);
-  const rightValue = useMemo(() => {
-    if (valueIsSpecified) {
-      return /*#__PURE__*/_jsx("div", {
-        "aria-hidden": true,
-        children: /*#__PURE__*/_jsx(Button, {
-          type: "ghost",
-          wide: "never",
-          size: "small",
-          disabled: disabled,
-          onClick: e => {
-            setForwardedValue(null);
-            e.stopPropagation();
-          },
-          onKeyDown: e => {
-            if (disabled) return;
-            if (['Enter', ' '].includes(e.key)) {
-              setForwardedValue(null);
-              if (!containerRef.current) return;
-              containerRef.current.focus();
-              e.preventDefault();
-              e.stopPropagation();
-            }
-          },
-          "aria-label": locale.clearLabel,
-          children: /*#__PURE__*/_jsx(ClearIcon, {})
-        })
-      });
+
+  // Set the input focus
+  useEffect(() => {
+    if (!innerInputRef.current) return;
+    if (inputFocused) {
+      innerInputRef.current.focus();
+    } else {
+      innerInputRef.current.blur();
     }
-    return right || /*#__PURE__*/_jsx(ToggleIconContainer, {
-      children: opened ? /*#__PURE__*/_jsx(Up, {}) : /*#__PURE__*/_jsx(Down, {})
-    });
-  }, [containerRef, disabled, locale.clearLabel, opened, right, setForwardedValue, valueIsSpecified]);
-  const firstTimePickerRef = useRef(null);
-  const secondTimePickerRef = useRef(null);
-  const rangeStartedRef = useRef(false);
+  }, [innerInputRef, inputFocused]);
+
+  // Open the picker automatically
   useEffect(() => {
-    rangeStartedRef.current = false;
-  }, [opened]);
-  const changeHandler = useCallback(date => {
-    setForwardedValue(prev => {
-      if (!range) return createDate(date, prev);
-      const d = createDate(date);
-      const nextValue = prev && Array.isArray(prev) && rangeStartedRef.current ? [new Date(prev[0].getTime()), createDate(date, prev[1])] : [d, d];
-      rangeStartedRef.current = !rangeStartedRef.current;
-      return nextValue.sort((a, b) => a.getTime() - b.getTime());
-    });
-  }, [range, setForwardedValue]);
-  const calendarComponent = useMemo(() => /*#__PURE__*/_jsx(DatePickerCalendar, {
-    firstDayOfWeek: firstDayOfWeek,
-    locale: locale,
-    value: forwardedValue,
-    onSelect: v => {
-      changeHandler(v);
-      firstTimePickerRef.current?.focus();
-      if (!showTime && (!range || !rangeStartedRef.current)) {
-        closeHandler();
+    let pickerType = null;
+
+    // Find the nearest token from the current caret position
+    const next = nextToken(inputSelection.start, formatRef.current, tokens);
+    if (next) {
+      if (dateTokens.includes(next.token)) {
+        pickerType = 'date';
+      }
+      if (timeTokens.includes(next.token)) {
+        pickerType = 'time';
       }
     }
-  }), [changeHandler, closeHandler, firstDayOfWeek, forwardedValue, locale, range, showTime]);
-  const tabOnInputComplete = useCallback(e => {
-    if (e.target.selectionStart < 5) return;
-    secondTimePickerRef.current?.focus();
-    setForwardedValue(([from, to]) => {
-      const nextTo = new Date(to.getTime());
-      if (isSameDay(from, to)) {
-        nextTo.setHours(from.getHours() + 1);
-        nextTo.setMinutes(from.getMinutes());
-      } else {
-        nextTo.setHours(from.getHours());
-        nextTo.setMinutes(from.getMinutes());
+    if (pickerType && inputFocused) {
+      setPickerType(pickerType);
+      if (showPicker && autoOpen && isMinXs) {
+        setPickerVisibility(true);
       }
-      return [from, nextTo];
+    } else {
+      setPickerVisibility(false);
+    }
+  }, [autoOpen, inputFocused, inputSelection.start, isMinXs, showPicker]);
+  const moveCaretToNextTokenDiffType = useCallback(pos => {
+    const nextTokenDiffType = getNextTokenDiffType(pos, formatRef.current);
+    const nextPos = nextTokenDiffType ? nextTokenDiffType.pos : formatRef.current.length;
+    setInputSelection({
+      start: nextPos,
+      end: nextPos
     });
-  }, [setForwardedValue]);
-  const closeOnInputComplete = useCallback(e => {
-    if (e.target.selectionStart < 5) return;
-    closeHandler();
-  }, [closeHandler]);
-  const timeComponent = useMemo(() => showTime && forwardedValue ? /*#__PURE__*/_jsx(TimeContainer, {
-    children: Array.isArray(forwardedValue) ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(StyledTimePicker, {
-        ref: firstTimePickerRef,
-        autoFocus: true,
-        disabled: disabled,
-        notation: timeNotation,
-        containerProps: timePickerStyle,
-        value: forwardedValue[0],
-        onChange: v => setForwardedValue([v, forwardedValue[1]]),
-        onKeyDown: e => {
-          if (disabled) return;
-          if (e.key === 'Enter') {
-            setOpened(!opened);
-          }
-        },
-        onKeyUp: tabOnInputComplete
-      }), /*#__PURE__*/_jsx(Dash, {
-        children: "\u2013"
-      }), /*#__PURE__*/_jsx(StyledTimePicker, {
-        ref: secondTimePickerRef,
-        disabled: disabled,
-        notation: timeNotation,
-        containerProps: timePickerStyle,
-        value: forwardedValue[1],
-        onChange: v => setForwardedValue([forwardedValue[0], v]),
-        onKeyDown: e => {
-          if (disabled) return;
-          if (e.key === 'Enter') {
-            setOpened(!opened);
-          }
-        },
-        onKeyUp: closeOnInputComplete
-      })]
-    }) : /*#__PURE__*/_jsx(StyledTimePicker, {
-      ref: firstTimePickerRef,
-      autoFocus: true,
-      disabled: disabled,
-      notation: timeNotation,
-      containerProps: timePickerStyle,
-      value: forwardedValue,
-      onChange: setForwardedValue,
-      onKeyDown: e => {
-        if (disabled) return;
-        if (e.key === 'Enter') {
-          setOpened(!opened);
-        }
-      },
-      onKeyUp: closeOnInputComplete
-    })
-  }) : null, [closeOnInputComplete, disabled, forwardedValue, opened, setForwardedValue, showTime, tabOnInputComplete, timeNotation]);
+  }, []);
+  const changeHandler = useCallback((tokens, value) => {
+    if (!inputValueRef.current || value === null) return;
+    const start = inputSelectionRef.current.start;
+    let nextValue = inputValueRef.current;
+    tokens.forEach(token => {
+      const tokenIndex = formatRef.current.indexOf(token);
+      if (tokenIndex >= 0) {
+        nextValue = replaceSubstring(nextValue, tokenIndex, '_'.repeat(token.length));
+      }
+    });
+    tokens.forEach(token => {
+      const tokenIndex = formatRef.current.indexOf(token);
+      if (tokenIndex >= 0 && tokenGetterMap[token] && nextValue[tokenIndex] === '_') {
+        nextValue = replaceSubstring(nextValue, tokenIndex, tokenGetterMap[token](value));
+      }
+    });
+    setInputValue(nextValue);
+    moveCaretToNextTokenDiffType(start);
+  }, [moveCaretToNextTokenDiffType]);
+  const dateChangeHandler = useCallback(day => {
+    changeHandler(dateTokens, day);
+    setDay(day);
+  }, [changeHandler]);
+  const timeChangeHandler = useCallback(time => changeHandler(timeTokens, time), [changeHandler]);
+  const hour12 = useMemo(() => format.includes('hh'), [format]);
+  useEffect(() => {
+    if (!disabledTimesFn || !day) return;
+    let mounted = true;
+    const fn = async () => {
+      setLoadingTimes(true);
+      const disabledTimes = await disabledTimesFn(day);
+      if (mounted) {
+        setDisabledTimes(disabledTimes);
+        setLoadingTimes(false);
+      }
+    };
+    fn();
+    return () => {
+      mounted = false;
+    };
+  }, [disabledTimesFn, day]);
+  const pickerComponent = useMemo(() => {
+    if (pickerType === 'date') {
+      return /*#__PURE__*/_jsx(DateCalendar, {
+        firstDayOfWeek: firstDayOfWeek,
+        disabledDays: disabledDays,
+        locale: locale,
+        value: day,
+        onChange: dateChangeHandler
+      });
+    }
+    if (pickerType === 'time') {
+      if (loadingTimes) {
+        return /*#__PURE__*/_jsx(TimeGridSkeleton, {
+          count: times.length,
+          columns: timeColumns
+        });
+      }
+      return /*#__PURE__*/_jsx(TimeGrid, {
+        times: times,
+        hour12: hour12,
+        columns: timeColumns,
+        disabledTimes: disabledTimes,
+        value: time,
+        onChange: timeChangeHandler
+      });
+    }
+    return null;
+  }, [dateChangeHandler, day, disabledDays, disabledTimes, firstDayOfWeek, hour12, loadingTimes, locale, pickerType, time, timeChangeHandler, timeColumns, times]);
+  const openPicker = useCallback(() => {
+    if (!innerInputRef.current) return;
+    const next = nextToken(0, formatRef.current, tokens);
+    if (next) {
+      const type = getPickerType(next.token);
+      if (type) {
+        setInputFocused(true);
+        setInputSelection({
+          start: next.pos,
+          end: next.pos
+        });
+        setPickerType(type);
+        setPickerVisibility(true);
+      }
+    }
+  }, [innerInputRef]);
+  const focusHandler = useCallback(e => {
+    setInputFocused(true);
+    onFocus(e);
+  }, [onFocus]);
+  const blurHandler = useCallback(e => {
+    if (isMinXs) {
+      setPickerVisibility(false);
+    }
+    setInputFocused(false);
+    onBlur(e);
+  }, [isMinXs, onBlur]);
+  const showPickerButton = useMemo(() => showPicker && (!autoOpen || !isMinXs), [autoOpen, isMinXs, showPicker]);
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(SelectContainer, {
-      opened: opened,
+    children: [/*#__PURE__*/_jsxs(InputContainer, {
+      ...containerProps,
       disabled: disabled,
       size: size,
-      tabIndex: !disabled ? 0 : -1,
-      onClick: () => {
-        if (disabled) return;
-        setOpened(!opened);
-      },
-      onKeyDown: e => {
-        if (disabled) return;
-        if (['Enter', ' '].includes(e.key)) {
-          setOpened(!opened);
-          e.preventDefault();
-        }
-      },
-      onMouseDown: e => e.preventDefault(),
-      onBlur: blurHandler,
-      role: "combobox",
-      "aria-label": forwardedValue ? getAccessibilityDateLabel(forwardedValue, locale) : undefined,
-      "aria-disabled": disabled,
-      ...rest,
       ref: mergedContainerRef,
-      children: [left && /*#__PURE__*/_jsx(ThemeOverrider, {
-        overrides: t => ({
-          buttonPaddingHorizontal: 0.8,
-          baseHeight: t.selectToggleListItemHeight / t.sizes.small
-        }),
-        children: /*#__PURE__*/_jsx(ToggleLeftAddon, {
-          hasPadding: leftHasPadding,
-          children: left
-        })
-      }), /*#__PURE__*/_jsx(ToggleContent, {
-        hasLeft: !!left,
-        hasRight: !!right,
-        children: valueIsSpecified ? /*#__PURE__*/_jsx(Title, {
-          disabled: disabled,
-          "aria-hidden": true,
-          children: formattedValue
-        }) : /*#__PURE__*/_jsx(Placeholder, {
-          children: placeholder
-        })
-      }), rightValue && /*#__PURE__*/_jsx(ThemeOverrider, {
-        overrides: t => ({
-          buttonPaddingHorizontal: 0.8,
-          baseHeight: t.selectToggleListItemHeight / t.sizes.small
-        }),
-        children: /*#__PURE__*/_jsx(ToggleRightAddon, {
-          hasPadding: rightHasPaddingValue,
-          children: rightValue
+      children: [/*#__PURE__*/_jsx(StyledInputDateUnstyled, {
+        ...rest,
+        disabled: disabled,
+        hasRight: showPickerButton,
+        format: format,
+        value: forwardedValue,
+        inputValue: inputValue,
+        selection: inputSelection,
+        onChange: setForwardedValue,
+        onInputChange: setInputValue,
+        onSelectionChange: setInputSelection,
+        onDayChange: setDay,
+        onTimeChange: setTime,
+        onDayError: onDayError,
+        onFocus: focusHandler,
+        onBlur: blurHandler,
+        ref: mergedInputRef
+      }), showPickerButton && /*#__PURE__*/_jsx(ThemeOverrider, {
+        overrides: {
+          buttonPaddingHorizontal: 0.8
+        },
+        children: /*#__PURE__*/_jsx(PickerButtonContainer, {
+          children: /*#__PURE__*/_jsx(Button, {
+            type: "ghost",
+            size: "small",
+            wide: "never",
+            disabled: disabled,
+            onClick: openPicker,
+            onMouseDown: preventDefault,
+            children: /*#__PURE__*/_jsx(Calendar, {})
+          })
         })
       })]
-    }), isMinXs ? /*#__PURE__*/_jsxs(StyledPopover, {
-      trigger: containerRef,
+    }), isMinXs ? /*#__PURE__*/_jsx(StyledPopover, {
+      trigger: innerContainerRef,
       placement: "bottom-start",
-      visible: opened,
-      onClose: closeHandler,
+      visible: pickerVisibility,
+      onMouseDown: preventDefault // To prevent loosing the input focus
+      ,
       size: size,
-      children: [calendarComponent, timeComponent]
-    }) : /*#__PURE__*/_jsxs(Modal, {
-      title: placeholder,
+      children: pickerComponent
+    }) : /*#__PURE__*/_jsx(StyledModal, {
       header: null,
       footer: null,
-      visible: opened,
-      onClose: closeHandler,
+      visible: pickerVisibility,
+      onClose: () => setPickerVisibility(false),
+      lockedFocus: false // To prevent loosing the input focus
+      ,
+      onMouseDown: preventDefault // To prevent loosing the input focus
+      ,
       size: size,
-      children: [calendarComponent, timeComponent]
+      children: pickerComponent
     })]
   });
 });