diginet-core-ui 1.4.21 → 1.4.23-beta.1

package/components/form-control/date-picker/index.js

@@ -1,34 +1,38 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { Button, ButtonIcon, HelperText, InputBase, Label, Tooltip } from "../..";
+import { Button, ButtonIcon, DateInput, HelperText, InputBase, Label, Popover, Tooltip } from "../..";
+import { format, isValid, parse } from 'date-fns';
+import { enUS, vi } from 'date-fns/locale';
 import { getGlobal } from "../../../global";
 import locale from "../../../locale";
 import PropTypes from 'prop-types';
-import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { render } from 'react-dom';
-import { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexRow, itemsCenter, justifyEnd, left, parseMaxWidth, parseMinWidth, parseWidthHeight, positionFixed, scale, top, z } from "../../../styles/general";
+import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { cursorNotAllowed, displayBlock, displayFlex, flexRow, itemsCenter, justifyEnd, positionRelative } from "../../../styles/general";
 import { useTheme } from "../../../theme";
-import { capitalizeSentenceCase, date as moment, randomString, updatePosition, getProp } from "../../../utils";
-import CalendarComp from "../calendar";
-import { isValidDate } from "../calendar/function";
-import ControlComp from "../control";
 import useThemeProps from "../../../theme/utils/useThemeProps";
+import { capitalizeSentenceCase, classNames, isValidDate } from "../../../utils";
+import Calendar from "../calendar";
+import useControlled from "../date-input/useControlled";
+import { lowerCaseDayYear } from "../date-input/utils";
+const unique = {
+  footer: 'DGN-UI-DatePicker-Footer',
+  cancel: 'DGN-UI-DatePicker-cancel',
+  confirm: 'DGN-UI-DatePicker-confirm',
+  icon: 'DGN-UI-DatePicker-Icon'
+};
 const confirmText = getGlobal(['confirm']);
 const cancelText = getGlobal(['cancel']);
-const formatValue = (value, format, utc = false) => {
-  return moment(value).format(format, utc);
-};
 const viDisplayFormat = new Map([['year', 'YYYY'], ['quarter', 'Q-YYYY'], ['month', 'MM-YYYY']]);
 const pickerReturnFormat = new Map([['year', 'YYYY'], ['quarter', 'YYYY-Q'], ['month', 'YYYY-MM']]);
+const parseValueToDate = valueProp => {
+  if (valueProp === '') return null;
+  return isValidDate(valueProp) ? new Date(valueProp) : valueProp;
+};
 const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   var _ref, _pickerReturnFormat$g, _ipRef$current, _ipRef$current2;
   if (!reference) reference = useRef(null);
   const theme = useTheme();
-  const {
-    colors,
-    zIndex
-  } = theme;
 
   // props priority: `inProps` > `themeDefaultProps`
   const props = useThemeProps({
@@ -38,6 +42,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
   const {
     action = {},
     actionIconAt,
+    className,
     clearAble,
     controls,
     defaultValue,
@@ -62,285 +67,108 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     returnFormat: returnFormatProp,
     style,
     textAlign,
+    useDateInput,
     value: valueProp,
     viewType,
+    onBlur,
     ...other
   } = props;
-  const displayFormat = (_ref = locale.get() === 'vi' ? viDisplayFormat.get(minZoom) : pickerReturnFormat.get(minZoom)) !== null && _ref !== void 0 ? _ref : displayFormatProp;
+  const dateLocale = locale.get();
+  const displayFormat = (_ref = dateLocale === 'vi' ? viDisplayFormat.get(minZoom) : pickerReturnFormat.get(minZoom)) !== null && _ref !== void 0 ? _ref : displayFormatProp;
   const returnFormat = (_pickerReturnFormat$g = pickerReturnFormat.get(minZoom)) !== null && _pickerReturnFormat$g !== void 0 ? _pickerReturnFormat$g : returnFormatProp;
   const placeholder = placeholderProp !== null && placeholderProp !== void 0 ? placeholderProp : displayFormat;
-  const [id] = useState(randomString(6, {
-    allowSymbol: false
-  }));
-  const unique = {
-    disabled: 'DGN-UI-DatePicker-disabled',
-    error: 'DGN-UI-DatePicker-error',
-    focus: 'DGN-UI-DatePicker-focus',
-    footer: 'DGN-UI-DatePicker-Footer',
-    cancel: 'DGN-UI-DatePicker-cancel',
-    confirm: 'DGN-UI-DatePicker-confirm',
-    backGr: 'DGN-UI-DatePicker-Background',
-    icon: 'DGN-UI-DatePicker-Icon',
-    picker: `DGN-UI-DatePicker-Picker-${id}`,
-    portal: 'DGN-UI-Portal'
-  };
-  const calRef = useRef(null);
-  const footerRef = useRef(null);
-  const iconRef = useRef(null);
-  const ipConRef = useRef(null);
+  const [value, setValue] = useControlled(parseValueToDate(valueProp), parseValueToDate(defaultValue));
+  const [openPickerState, setOpenPickerState] = useState(false);
   const ipRef = useRef(null);
   const ref = useRef(null);
-  const displayValue = useRef();
   const focusedValue = useRef(null);
-  const [, setDisplayValue] = useState(Date.now());
-  const [, setFocusedValue] = useState(Date.now());
-  const [value, setValue] = useState(valueProp || defaultValue);
-  const _IconAreaCSS = IconAreaCSS(unique);
+  const pickerRef = useRef(null);
+  const buttonCarlendarRef = useRef(null);
+  const isError = !!error && (!value || !isValid(value));
+  const _DatePickerRoot = DatePickerRoot();
+  const _IconAreaCSS = IconAreaCSS();
   const _ControlContainerCSS = ControlContainerCSS(theme);
-  const handleDisplayValue = useCallback(value => {
-    displayValue.current = new Date(value);
-    setDisplayValue();
-  }, [displayValue]);
-  const handleFocusedValue = useCallback(value => {
-    focusedValue.current = new Date(value);
-    setFocusedValue();
-  }, [focusedValue]);
-  const setButtonState = () => {
-    if (!footerRef.current || focusedValue.current === undefined || !isValidDate(focusedValue.current)) return;
-    const isEqual = focusedValue.current === null || Date.parse(new Date(focusedValue.current)) === Date.parse(new Date(displayValue.current));
-    footerRef.current.querySelector(`.${unique.cancel}`).disabled = isEqual;
-    footerRef.current.querySelector(`.${unique.confirm}`).disabled = isEqual;
-  };
   const onConfirm = () => {
-    displayValue.current = focusedValue.current;
-    setButtonState();
     onChangeValue({
       value: focusedValue.current
     });
     closePicker();
   };
   const onCancel = () => {
-    focusedValue.current = null;
-    setButtonState();
     closePicker();
   };
-  const setInputValue = e => {
-    ipRef.current.value = capitalizeSentenceCase(formatValue(e.value, displayFormat));
-    if (clearAble) onSwap(false);
+  const formatValue = (value, formatStr) => {
+    // return moment(value).format(format, utc = false);
+    return format(value, lowerCaseDayYear(formatStr), {
+      locale: dateLocale === 'vi' ? vi : enUS
+    });
   };
   const onChangeValue = e => {
-    if (valueProp) {
-      closePicker();
-    } else {
-      setValue(e.value);
-    }
-    !!onChange && onChange({
-      value: formatValue(e.value, returnFormat)
+    const vl = (e === null || e === void 0 ? void 0 : e.value) || e;
+    closePicker();
+    setValue(vl);
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      value: isValid(vl) ? formatValue(vl, returnFormat) : String(vl) === 'Invalid Date' ? 'Invalid Date' : vl
     });
   };
   const onCalendarClick = e => {
-    handleFocusedValue(e.value);
-    controls ? setButtonState() : onChangeValue(e);
-  };
-  const getPickerStyle = () => {
-    const {
-      innerHeight,
-      innerWidth
-    } = window;
-    const {
-      left,
-      height,
-      top,
-      width
-    } = ipConRef.current.getBoundingClientRect();
-    const pickerHeight = controls ? 310 : 256;
-    let style = {};
-    style.top = top + height + 4;
-    style.transformOrigin = '50% 20%';
-    if (style.top + pickerHeight > innerHeight) {
-      if (top - pickerHeight > 0) {
-        style.top = top - pickerHeight - 4;
-        style.transformOrigin = '50% 80%';
-      }
-    }
-    return PickerCSS.picker(style, left + 400 > innerWidth ? innerWidth - 400 : left, width, colors).styles;
-  };
-  const createBackground = () => {
-    let background = document.getElementById(unique.backGr);
-    if (!background) {
-      background = document.createElement('div');
-      background.id = unique.backGr;
-      background.classList.add(unique.portal, unique.backGr);
-      document.body.appendChild(background);
-    }
-    background.style.cssText = PickerCSS.backGr(theme);
-    return background;
-  };
-  const createPicker = () => {
-    const picker = document.createElement('div');
-    picker.id = unique.picker;
-    picker.style.cssText = getPickerStyle();
-    return picker;
-  };
-  const pressESCHandler = event => {
-    if (event.key === 'Escape' || event.key === 'Tab') {
-      onClickOutside({
-        target: null
-      });
-    }
-  };
-  const onScroll = () => {
-    const node = document.getElementById(unique.picker);
-    if (!ipConRef.current || !node) {
-      window.removeEventListener('scroll', onScroll);
-      return;
-    }
-    updatePosition(ipConRef.current, node, closePicker);
-  };
-  const onResize = () => {
-    if (!ref.current) return;
-    const {
-      width
-    } = ref.current.getBoundingClientRect();
-    const node = document.getElementById(unique.picker);
-    if (node) {
-      node.style.width = width + 'px';
-    }
-    onScroll();
+    !controls ? onChangeValue(e) : focusedValue.current = e === null || e === void 0 ? void 0 : e.value;
   };
   const openPicker = () => {
-    const backGr = createBackground();
-    const picker = createPicker();
-    render(jsx(CalendarComp, {
-      ref: calRef,
-      actions: controls && footerMemo,
-      defaultValue: displayValue.current,
-      value: focusedValue.current,
-      max: max,
-      min: min,
-      minZoom: minZoom,
-      maxZoom: maxZoom,
-      displayAnotherMonth: displayAnotherMonth,
-      onClick: onCalendarClick
-    }), backGr.appendChild(picker));
-    setTimeout(() => {
-      Object.assign(picker.style, {
-        ...PickerCSS.active
-      });
-      window.addEventListener('resize', onResize);
-      window.addEventListener('scroll', onScroll);
-      document.addEventListener('mousedown', onClickOutside);
-      if (pressESCToClose) {
-        document.addEventListener('keydown', pressESCHandler);
-      }
-      setButtonState();
-    });
+    setOpenPickerState(true);
   };
   const closePicker = () => {
-    const backGr = document.getElementById(unique.backGr);
-    if (!backGr) return;
-    const picker = backGr.querySelector(`#${unique.picker}`);
-    if (!picker) return;
-    Object.assign(picker.style, {
-      ...PickerCSS.remove
-    });
-    if (pressESCToClose) {
-      document.removeEventListener('keydown', pressESCHandler);
-    }
-    document.removeEventListener('mousedown', onClickOutside);
-    window.removeEventListener('scroll', onScroll);
-    window.removeEventListener('resize', onResize);
-    setTimeout(() => {
-      backGr.remove();
-    }, 200);
-    if (ipConRef.current) {
-      ipConRef.current.classList.remove(unique.focus);
-      ipConRef.current.style.zIndex = null;
-    }
-    // iconRef.current && onSwap(true);
-    ipRef.current && ipRef.current.blur();
-  };
-  const onSwap = open => {
-    const t = iconRef.current.childNodes[+open];
-    if (open) {
-      Object.assign(t.style, {
-        ...hiddenStyle
-      });
-      Object.assign(t.previousSibling.style, {
-        ...activeStyle
-      });
-      setTimeout(() => {
-        t.previousSibling.style.pointerEvents = null;
-      }, 200);
-    } else {
-      Object.assign(t.style, {
-        ...hiddenStyle
-      });
-      Object.assign(t.nextSibling.style, {
-        ...activeStyle
-      });
-      setTimeout(() => {
-        t.nextSibling.style.pointerEvents = null;
-      }, 200);
-    }
-  };
-  const onInputFocus = () => {
-    const el = ipConRef.current;
-    if (!el.classList.contains(unique.focus)) {
-      el.classList.add(unique.focus);
-      el.style.zIndex = zIndex(2);
-      openPicker();
-    }
-  };
-  const onClickOutside = e => {
-    if (ipConRef.current && !ipConRef.current.contains(e.target) && ipRef.current && !ipRef.current.contains(e.target) && calRef.current && !calRef.current.contains(e.target)) {
-      controls ? onCancel() : closePicker();
-    }
-  };
-  const triggerFocus = () => {
-    if (!ipConRef.current.classList.contains(unique.focus)) {
-      ipRef.current.focus();
-    } else {
-      onClickOutside({
-        target: null
-      });
+    if (pickerRef.current) {
+      setOpenPickerState(false);
     }
+    if (ipRef.current) onBlur === null || onBlur === void 0 ? void 0 : onBlur(ipRef.current);
   };
   const onClear = () => {
     if (!clearAble && !ipRef.current) return;
-    ipRef.current.value = '';
+    onChangeValue(null);
     focusedValue.current = null;
-    setButtonState();
-    const e = {
-      value: null
-    };
-    !!onChange && onChange(e);
-    onSwap(true);
   };
+  const _onBlur = e => {
+    if (ipRef.current && (e === null || e === void 0 ? void 0 : e.relatedTarget) !== buttonCarlendarRef.current) {
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur(ipRef.current);
+    }
+  };
+  useEffect(() => {
+    const vl = parseValueToDate(valueProp);
+    setValue(vl);
+  }, [valueProp]);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {
+      ...action
+    }; // methods
+    _instance.__proto__ = {}; // hidden methods
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   const iconComp = jsx("div", {
-    css: _IconAreaCSS,
-    ref: iconRef
-  }, jsx(ButtonIcon, {
-    disabled: disabled || readOnly,
-    viewType: 'ghost',
-    onClick: triggerFocus,
-    className: `${unique.icon} ${unique.icon}-accept`,
-    viewBox: true,
-    name: 'Calendar'
-  }), jsx(ButtonIcon, {
+    css: _IconAreaCSS
+  }, clearAble && value ? jsx(ButtonIcon, {
     disabled: disabled || readOnly,
     viewType: 'ghost',
     onClick: onClear,
     className: `${unique.icon} ${unique.icon}-cancel`,
     viewBox: true,
     name: 'Close'
+  }) : null, jsx(ButtonIcon, {
+    ref: buttonCarlendarRef,
+    disabled: disabled || readOnly,
+    viewType: 'ghost',
+    onClick: openPicker,
+    className: `${unique.icon} ${unique.icon}-accept`,
+    viewBox: true,
+    name: 'Calendar'
   }));
   const endIcon = actionIconAt === 'end' && iconComp;
   const startIcon = actionIconAt === 'start' && iconComp;
   const footerMemo = jsx("div", {
     css: _ControlContainerCSS,
-    className: unique.footer,
-    ref: footerRef
+    className: unique.footer
   }, jsx(Button, {
     className: unique.cancel,
     onClick: onCancel
@@ -349,133 +177,46 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     className: unique.confirm,
     onClick: onConfirm
   }, confirmText));
-  const isError = !!error && (!value || !isValidDate(value));
-  useEffect(() => {
-    if (defaultValue && isValidDate(defaultValue)) {
-      handleDisplayValue(defaultValue);
-      setInputValue({
-        value: displayValue.current
-      });
-    }
-    return () => {
-      closePicker();
-    };
-  }, []);
-  useEffect(() => {
-    if (value && isValidDate(value)) {
-      handleFocusedValue(value);
-      handleDisplayValue(value);
-      setInputValue({
-        value: displayValue.current
-      });
-      setButtonState();
-      closePicker();
-    } else if (defaultValue && isValidDate(defaultValue)) {
-      handleFocusedValue(defaultValue);
-      handleDisplayValue(defaultValue);
-      setInputValue({
-        value: displayValue.current
-      });
-      setButtonState();
-      closePicker();
-    } else {
-      if (ipRef.current) ipRef.current.value = '';
-      if (clearAble) {
-        onSwap(true);
-      }
-      setButtonState();
-      closePicker();
-    }
+  const renderedValue = useMemo(() => {
+    if (isValidDate(value)) return capitalizeSentenceCase(formatValue(value, displayFormat));
+    return value;
+  }, [value, displayFormat]);
+  const valueDateInput = useMemo(() => {
+    if (value && isValid(value)) {
+      return value;
+    } else if (value === null) {
+      return null;
+    } else return parse(value, lowerCaseDayYear(returnFormat), new Date());
   }, [value]);
-  useEffect(() => {
-    setValue(valueProp);
-  }, [valueProp]);
-  useEffect(() => {
-    if (!readOnly) {
-      ipRef.current.addEventListener('focus', onInputFocus);
-    }
-    return () => {
-      if (!ipRef.current) return;
-      if (!readOnly) {
-        ipRef.current.removeEventListener('focus', onInputFocus);
-      }
-    };
-  }, [onChange]);
-  useEffect(() => {
-    if (ipRef.current.value !== '') {
-      const e = {
-        value: focusedValue.current || displayValue.current
-      };
-      setInputValue(e, displayFormat);
-    }
-    if (disabled) {
-      iconRef.current.childNodes[0].style.pointerEvents = 'none';
-      closePicker();
-    } else if (!readOnly) {
-      ipRef.current.addEventListener('focus', onInputFocus);
-    } else {
-      iconRef.current.childNodes[0].style.pointerEvents = 'none';
-      closePicker();
-    }
-    return () => {
-      if (!iconRef.current || !ipRef.current) return;
-      if (disabled) {
-        iconRef.current.childNodes[0].style.pointerEvents = null;
-      } else if (!readOnly) {
-        ipRef.current.removeEventListener('focus', onInputFocus);
-      } else {
-        iconRef.current.childNodes[0].style.pointerEvents = null;
-      }
-      closePicker();
-    };
-  }, [actionIconAt, clearAble, controls, disabled, displayFormat, displayAnotherMonth, max, min, minZoom, maxZoom, readOnly, returnFormat, viewType]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {
-      ...action,
-      get: () => {
-        return ref.current;
-      },
-      getInputContainer: () => {
-        return ipConRef.current;
-      },
-      getInput: () => {
-        return ipRef.current;
-      },
-      getCalendar: () => {
-        return calRef.current;
-      },
-      getIcon: () => {
-        return iconRef.current;
-      }
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    currentRef.get = () => ref.current;
-    currentRef.getInputContainer = () => ipConRef.current;
-    currentRef.getInput = () => ipRef.current;
-    currentRef.getCalendar = () => calRef.current;
-    currentRef.getIcon = () => iconRef.current;
-    return currentRef;
-  });
-  return jsx(ControlComp, {
-    ...other,
-    disabled: disabled,
-    error: isError,
+  const renderDateInputCondition = useDateInput && minZoom !== 'quarter' && !min && !max;
+  return jsx(Fragment, null, jsx("div", {
     ref: ref,
-    style: style
+    css: _DatePickerRoot,
+    className: classNames('DGN-UI-DatePicker', className, disabled && 'disabled'),
+    style: style,
+    ...other
   }, label ? jsx(Label, {
     disabled: disabled,
     required: required,
     ...labelProps
   }, label) : null, jsx(Tooltip, {
     title: (ipRef === null || ipRef === void 0 ? void 0 : (_ipRef$current = ipRef.current) === null || _ipRef$current === void 0 ? void 0 : _ipRef$current.clientWidth) < 200 ? ipRef === null || ipRef === void 0 ? void 0 : (_ipRef$current2 = ipRef.current) === null || _ipRef$current2 === void 0 ? void 0 : _ipRef$current2.value : ''
-  }, jsx(InputBase, {
+  }, renderDateInputCondition ? jsx(DateInput, {
+    inputRef: ipRef,
+    disabled: disabled,
+    readOnly: readOnly,
+    viewType: viewType,
+    startIcon: startIcon,
+    endIcon: endIcon,
+    format: displayFormat,
+    value: valueDateInput,
+    onBlur: _onBlur,
+    onChange: onChangeValue
+  }) : jsx(InputBase, {
     inputProps: {
       placeholder: !readOnly && !disabled ? placeholder : '',
       ...inputProps
     },
-    ref: ipConRef,
     inputRef: ipRef,
     disabled: disabled,
     viewType: viewType,
@@ -486,42 +227,46 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     startIcon: startIcon,
     endIcon: endIcon,
     onKeyDown: e => e.preventDefault(),
-    readOnly: true
+    readOnly: true,
+    value: renderedValue,
+    onFocus: openPicker
   })), isError ? jsx(HelperText, {
     ...errorProps,
-    style: {
-      minHeight: 16,
-      position: 'absolute',
-      top: '100%'
-    },
     disabled: disabled
-  }, error) : null);
+  }, error) : null), jsx(Popover, {
+    css: PopoverCSS,
+    ref: pickerRef,
+    open: openPickerState,
+    anchor: ref.current,
+    pressESCToClose: pressESCToClose,
+    onClose: closePicker
+  }, jsx(Calendar, {
+    actions: controls && footerMemo,
+    value: value,
+    max: max,
+    min: min,
+    minZoom: minZoom,
+    maxZoom: maxZoom,
+    displayAnotherMonth: displayAnotherMonth,
+    onClick: onCalendarClick
+  })));
 }));
-const hiddenStyle = {
-  opacity: 0,
-  display: 'none'
-};
-const activeStyle = {
-  opacity: 1,
-  pointerEvents: 'none',
-  display: 'block'
-};
-const IconAreaCSS = unique => css`
+const PopoverCSS = css`
+    .DGN-UI-Calendar {
+        box-shadow: none;
+    }
+`;
+const DatePickerRoot = () => css`
+    ${displayBlock};
+    ${positionRelative};
+    &.disabled {
+        ${cursorNotAllowed};
+    }
+`;
+const IconAreaCSS = () => css`
     ${displayFlex};
     ${flexRow};
     ${itemsCenter};
-    color: inherit;
-    .${unique.icon} {
-        ${displayNone};
-        ${cursorPointer};
-        opacity: 0;
-        transition: display 50ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 50ms;
-        will-change: display, opacity;
-    }
-    .${unique.icon}-accept {
-        ${displayBlock};
-        opacity: 1;
-    }
 `;
 const ControlContainerCSS = ({
   spacing
@@ -531,36 +276,6 @@ const ControlContainerCSS = ({
     ${justifyEnd};
     margin: ${spacing([0, 4, 4])};
 `;
-const PickerCSS = {
-  backGr: ({
-    zIndex
-  }) => `background-color: transparent; top: 0px; bottom: 0px; left: 0px; right: 0px; pointer-events: auto; position: fixed; z-index: ${zIndex(1)};`,
-  picker: (position, positionLeft, width, colors) => css`
-        ${positionFixed};
-        ${borderRadius4px};
-        ${bgColor(getProp(colors, 'system/standard'))};
-        ${parseWidthHeight(width, 'max-content')};
-        ${parseMinWidth(window.innerWidth <= 599 ? 280 : 400)};
-        ${parseMaxWidth(400)};
-        ${scale(0)};
-        ${left(positionLeft)};
-        ${top(position.top)};
-        transform-origin: ${position.transformOrigin};
-        opacity: 0;
-        transform: scale(0);
-        transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-        ${z(2)};
-    `,
-  active: {
-    opacity: 1,
-    transform: 'scale(1)'
-  },
-  remove: {
-    opacity: 0,
-    pointerEvents: 'none',
-    transform: 'scale(0)'
-  }
-};
 
 // DatePicker.defaultProps = {
 //     actionIconAt: 'end',
@@ -580,6 +295,8 @@ const PickerCSS = {
 DatePicker.propTypes = {
   /** Action icons position. */
   actionIconAt: PropTypes.oneOf(['end', 'start']),
+  /** CSS class for the component. */
+  className: PropTypes.string,
   /** Display the clear icon if true. */
   clearAble: PropTypes.bool,
   /** If `true`, the calendar will have a footer controls. */
@@ -606,6 +323,8 @@ DatePicker.propTypes = {
   min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
   /** Max value of date picker. */
   max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
+  /** Callback fired when the input is blurred. */
+  onBlur: PropTypes.func,
   /** A callback function when value input change. */
   onChange: PropTypes.func,
   /** Hints for input. */
@@ -622,6 +341,8 @@ DatePicker.propTypes = {
   style: PropTypes.object,
   /** Text align of the input. */
   textAlign: PropTypes.oneOf(['center', 'end', 'start']),
+  /** If `true`, lets users select a date with the keyboard. */
+  useDateInput: PropTypes.bool,
   /** Value of the component. */
   value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array, PropTypes.object]),
   /** View type of the form control. */