@veracity/vui 2.14.0-beta.0 → 2.14.0

package/src/calendar/hooks/useCalendar.ts

@@ -0,0 +1,181 @@
+import { useMemo } from 'react'
+
+import { generateDateByUTCValue, getDateUTCValue, sameDate, sameYear, sameYearSameMonth } from '../../utils'
+import { MonthProps, TimeItem, TimeResult } from '../calendar.types'
+import { viewYears } from '../consts'
+import { getNextDate, isDay, isExact, isFrom, isMonth, isRange, isTo, isYear } from '../utils'
+import { useBoundaries } from './useBoundaries'
+import { useSelectedDate } from './useSelectedDate'
+
+/**
+ * Main hook for doing calendar calculations
+ * Calculates for all time unit modes: day, month and year
+ * Depends on useBoundaries and useSelectedDate to do initial setup
+ */
+export const useCalendar = ({
+  boundaries,
+  selectedDates,
+  mode = 'exact',
+  timeUnitMode,
+  viewDate,
+  fixedNumberOfWeeks
+}: MonthProps) => {
+  const boundariesProcessed = useBoundaries({ boundaries })
+  const selectedProcessed = useSelectedDate({ selectedDates, mode })
+
+  return useMemo(() => {
+    const { maxDateTime, minDateTime } = boundariesProcessed
+    const { currentDateTime, maxSelectedDateTime, minSelectedDateTime } = selectedProcessed
+    const { utcYear: viewDateYear, utcMonth: viewDateMonth } = getDateUTCValue(viewDate)
+
+    let calendarFirstDay: Date
+    let calendarLastDay: Date
+    let nextFirstDay: Date
+    let prevLastDay: Date
+    let firstDay: Date
+    let lastDay: Date
+
+    if (isDay(timeUnitMode)) {
+      firstDay = generateDateByUTCValue(viewDateYear, viewDateMonth, 1)
+      lastDay = generateDateByUTCValue(viewDateYear, viewDateMonth + 1, 0) // lastDay
+
+      nextFirstDay = generateDateByUTCValue(viewDateYear, viewDateMonth + 1, 1)
+      prevLastDay = generateDateByUTCValue(viewDateYear, viewDateMonth, 0)
+
+      const weekdayFirst = firstDay.getUTCDay()
+      const weekdayLast = lastDay.getUTCDay()
+
+      // Monday preceding the month (or first day of the month if it's on a Monday)
+      calendarFirstDay =
+        weekdayFirst === 0
+          ? new Date(Date.UTC(viewDateYear, viewDateMonth, 2 - 7))
+          : new Date(Date.UTC(viewDateYear, viewDateMonth, 2 - weekdayFirst))
+
+      // Sunday after the month (or last day of the month if it's on a Sunday)
+      calendarLastDay =
+        weekdayLast === 0
+          ? new Date(Date.UTC(viewDateYear, viewDateMonth + 1, 0))
+          : new Date(Date.UTC(viewDateYear, viewDateMonth + 1, 8 - weekdayLast))
+
+      // If calendar must contain constant number of weeks (6 weeks)
+      // Missing weeks will be added to the end of the month
+      const numberOfWeeks = Math.round((+calendarLastDay - +calendarFirstDay) / (7 * 24 * 60 * 60 * 1000))
+      if (fixedNumberOfWeeks) {
+        for (let week = numberOfWeeks; week < 6; week++) {
+          calendarLastDay = generateDateByUTCValue(
+            calendarLastDay.getUTCFullYear(),
+            calendarLastDay.getUTCMonth(),
+            calendarLastDay.getUTCDate() + 7
+          )
+        }
+      }
+    } else if (isMonth(timeUnitMode)) {
+      calendarFirstDay = firstDay = generateDateByUTCValue(viewDateYear, 0, 1)
+      calendarLastDay = lastDay = generateDateByUTCValue(viewDateYear, 11, 31)
+      nextFirstDay = generateDateByUTCValue(viewDateYear + 1, 0, 1)
+      prevLastDay = generateDateByUTCValue(viewDateYear - 1, 11, 31)
+    } else {
+      const calendarStartYear = new Date().getUTCFullYear() - viewYears / 2
+      const diffYears = calendarStartYear - viewDateYear
+
+      const startYear = calendarStartYear - Math.ceil(diffYears / viewYears) * viewYears
+      const endYear = startYear + viewYears - 1
+
+      if (startYear === 1753) calendarFirstDay = firstDay = generateDateByUTCValue(startYear, 0, 2)
+      else calendarFirstDay = firstDay = generateDateByUTCValue(startYear, 0, 1)
+
+      calendarLastDay = lastDay = generateDateByUTCValue(endYear, 11, 31)
+      nextFirstDay = generateDateByUTCValue(endYear + 1, 0, 1)
+      prevLastDay = generateDateByUTCValue(startYear - 1, 11, 31)
+    }
+
+    const items: TimeItem[] = []
+
+    // Loops between first and last date
+    let dateItem = calendarFirstDay
+    do {
+      const isHidden = dateItem < firstDay || dateItem >= lastDay
+      const isToday = sameDate(dateItem, new Date())
+      const { utcYear: minDateYear, utcMonth: minDateMonth } = getDateUTCValue(minDateTime)
+
+      let minUnitModeDate = minDateTime
+      if (isMonth(timeUnitMode))
+        // Need to compare with the first day of the month to decide if the month is disabled in the month overview
+        minUnitModeDate = generateDateByUTCValue(minDateYear, minDateMonth, 1)
+      else if (isYear(timeUnitMode))
+        // Need to compare with the first day of the year to decide if the year is disabled in the year overview
+        minUnitModeDate = generateDateByUTCValue(minDateYear, 0, 1)
+
+      const isDisabled = dateItem < minUnitModeDate || dateItem > maxDateTime ? true : false
+
+      // The calendar only select a single date
+      const isExactSelected = isExact(mode) && minSelectedDateTime && +dateItem === +minSelectedDateTime
+
+      // The calendar selects a range
+      const inRangeLow = minSelectedDateTime && dateItem >= minSelectedDateTime
+      const inRangeHigh = maxSelectedDateTime && dateItem <= maxSelectedDateTime
+
+      const inRange =
+        !isExact(mode) &&
+        ((!isDisabled && inRangeLow && (!maxSelectedDateTime || inRangeHigh)) ||
+          (inRangeHigh && (!minSelectedDateTime || inRangeLow)))
+
+      const isRangeSelected = isRange(mode) && inRange
+      const isFromSelected = isFrom(mode) && inRangeLow
+      const isToSelected = isTo(mode) && inRangeHigh
+
+      const isSelected = !!(isExactSelected || isFromSelected || isToSelected || isRangeSelected)
+
+      let maxSelectedCheck = maxSelectedDateTime
+      let minSelectedCheck = minSelectedDateTime
+
+      if (isYear(timeUnitMode)) {
+        if (maxSelectedCheck) maxSelectedCheck = generateDateByUTCValue(maxSelectedCheck.getUTCFullYear(), 0, 1)
+        if (minSelectedCheck) minSelectedCheck = generateDateByUTCValue(minSelectedCheck.getUTCFullYear(), 0, 1)
+      }
+      if (isMonth(timeUnitMode)) {
+        if (maxSelectedCheck)
+          maxSelectedCheck = generateDateByUTCValue(
+            maxSelectedCheck.getUTCFullYear(),
+            maxSelectedCheck.getUTCMonth(),
+            1
+          )
+        if (minSelectedCheck)
+          minSelectedCheck = generateDateByUTCValue(
+            minSelectedCheck.getUTCFullYear(),
+            minSelectedCheck.getUTCMonth(),
+            1
+          )
+      }
+
+      const boundary = !isTo(mode) && sameDate(dateItem, minSelectedCheck)
+
+      let current: boolean
+      if (isDay(timeUnitMode)) current = sameDate(dateItem, currentDateTime)
+      else if (isMonth(timeUnitMode)) current = sameYearSameMonth(dateItem, currentDateTime)
+      else current = sameYear(dateItem, currentDateTime)
+
+      items.push({
+        date: dateItem,
+        isHidden,
+        isToday,
+        isDisabled: boundary ? false : isDisabled,
+        isSelected,
+        boundary,
+        current
+      })
+
+      dateItem = getNextDate(dateItem, timeUnitMode)
+    } while (dateItem <= calendarLastDay)
+
+    // Disables next/prev buttons
+    const prevDisabled = minDateTime > prevLastDay
+    const nextDisabled = maxDateTime < nextFirstDay
+
+    return {
+      items,
+      prevDisabled,
+      nextDisabled
+    } as TimeResult
+  }, [boundaries, selectedDates, mode, timeUnitMode, viewDate])
+}

package/src/calendar/hooks/useDefaultViewMonth.ts

@@ -0,0 +1,18 @@
+import { DefaultViewMonthProps } from '../calendar.types'
+
+/**
+ * Calculates the default view date, either using selected date, current date or boundaries
+ * Used when initializing, after that viewDate will be set
+ * Memoized so will only recalculate when boundaries or selectedDate changes
+ */
+export const useDefaultViewMonth = ({ boundaries, selectedDate, isStartDate }: DefaultViewMonthProps) => {
+  if (selectedDate) return selectedDate
+
+  const currentDate = new Date()
+  if (!boundaries) return currentDate
+
+  if (boundaries.endDate && currentDate > boundaries.endDate && !isStartDate) return boundaries.endDate
+  if (boundaries.startDate && currentDate > boundaries.startDate && isStartDate) return boundaries.startDate
+
+  return currentDate
+}

package/src/calendar/hooks/useSelectedDate.ts

@@ -0,0 +1,20 @@
+import { CalendarMode, DateRange } from '../calendar.types'
+import { isExact, isFrom } from '../utils'
+
+/**
+ * Calculate the selected dates
+ * If we are in single calendar mode, will use the startDate as selected date
+ * Memoized so will only recalculate when selectedDates or mode changes
+ */
+export const useSelectedDate = ({ selectedDates, mode }: { mode: CalendarMode; selectedDates?: DateRange }) => {
+  const currentDateTime = isFrom(mode) || isExact(mode) ? selectedDates?.startDate : selectedDates?.endDate
+
+  const minSelectedDateTime = selectedDates?.startDate || undefined
+  const maxSelectedDateTime = selectedDates?.endDate || undefined
+
+  return {
+    currentDateTime,
+    maxSelectedDateTime,
+    minSelectedDateTime
+  }
+}

package/src/calendar/index.ts

@@ -0,0 +1,4 @@
+export * from './calendar'
+export { default } from './calendar'
+export * from './calendar.types'
+export * from './consts'

package/src/calendar/theme.ts

@@ -0,0 +1,14 @@
+const baseStyle = {}
+
+const defaultProps = {}
+
+const sizes = {}
+
+const variants = {}
+
+export default {
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants
+}

package/src/calendar/utils.ts

@@ -0,0 +1,100 @@
+import { generateDateByUTCValue, getDateUTCValue, sameYear, sameYearSameMonth } from '../utils'
+import { CalendarMode, DateRange, FlowDirection, TimeItem, TimeUnitMode } from './calendar.types'
+import { minDateTimestamp, viewYears } from './consts'
+
+export const isExact = (mode?: CalendarMode) => mode === 'exact'
+export const isFrom = (mode?: CalendarMode) => mode === 'from'
+export const isTo = (mode?: CalendarMode) => mode === 'to'
+export const isRange = (mode?: CalendarMode) => mode === 'range'
+
+export const isDay = (timeUnitMode?: TimeUnitMode) => timeUnitMode === 'day'
+export const isMonth = (timeUnitMode?: TimeUnitMode) => timeUnitMode === 'month'
+export const isYear = (timeUnitMode?: TimeUnitMode) => timeUnitMode === 'year'
+
+/**
+ * Helper to get the next date item when iterating between two dates
+ * @param date current date in the iteration
+ * @param timeUnitMode time unit mode for day, month, year
+ */
+export const getNextDate = (date: Date, timeUnitMode?: TimeUnitMode) => {
+  const { utcYear, utcMonth, utcDate } = getDateUTCValue(date)
+  if (isDay(timeUnitMode)) return generateDateByUTCValue(utcYear, utcMonth, utcDate + 1)
+  if (isMonth(timeUnitMode)) return generateDateByUTCValue(utcYear, utcMonth + 1, utcDate)
+
+  return generateDateByUTCValue(utcYear + 1, utcMonth, utcDate)
+}
+
+export const processSelectMonth = (clickedDate: Date, mode: CalendarMode, boundaries?: DateRange) => {
+  const date = clickedDate
+  const minDateTime = new Date(minDateTimestamp)
+  const { utcYear, utcMonth } = getDateUTCValue(clickedDate)
+  if (isTo(mode)) {
+    const selectDayInMonth = generateDateByUTCValue(utcYear, utcMonth + 1, 0).getUTCDate()
+
+    if (boundaries?.endDate && sameYearSameMonth(clickedDate, boundaries?.endDate)) return boundaries?.endDate
+
+    return generateDateByUTCValue(utcYear, utcMonth, selectDayInMonth)
+  }
+
+  if (isFrom(mode) && boundaries?.startDate && sameYearSameMonth(clickedDate, boundaries?.startDate))
+    return boundaries?.startDate
+
+  if (isExact(mode) && sameYear(clickedDate, minDateTime)) return minDateTime
+
+  return boundaries?.startDate && date < boundaries?.startDate ? boundaries.startDate : date
+}
+
+/**
+ * Helper that calcs what new date we should set as viewDate when a year is clicked
+ *
+ * @param clickedDate date of year clicked
+ * @param newDate pre-processed potential new view date
+ * @param mode calendar mode
+ * @param boundaries boundaries of date range
+ */
+export const processSelectYear = (clickedData: Date, mode: CalendarMode, boundaries?: DateRange) => {
+  const { utcYear, utcMonth } = getDateUTCValue(clickedData)
+  const minDateTime = new Date(minDateTimestamp)
+  const date = clickedData
+
+  if (isTo(mode)) {
+    const selectDayInMonth = generateDateByUTCValue(utcYear, utcMonth + 1, 0).getUTCDate()
+    const selectMonthInYear = 11
+
+    if (boundaries?.endDate && sameYear(clickedData, boundaries?.endDate)) return boundaries.endDate
+
+    return generateDateByUTCValue(clickedData.getUTCFullYear(), selectMonthInYear, selectDayInMonth)
+  }
+
+  if (isFrom(mode) && boundaries?.startDate && sameYear(clickedData, boundaries?.startDate)) return boundaries.startDate
+
+  if (isExact(mode) && sameYear(clickedData, minDateTime)) return minDateTime
+
+  return boundaries?.startDate && date < boundaries?.startDate ? boundaries.startDate : date
+}
+
+export const processViewDate = (
+  viewDate: Date,
+  direction: FlowDirection,
+  timeUnitMode: TimeUnitMode,
+  calendarItems?: TimeItem[]
+) => {
+  const { utcYear, utcMonth } = getDateUTCValue(viewDate)
+  if (isDay(timeUnitMode)) {
+    const newMonth = generateDateByUTCValue(utcYear, utcMonth + (direction === 'next' ? 1 : -1))
+    return newMonth
+  }
+  if (isMonth(timeUnitMode)) {
+    const newMonth = generateDateByUTCValue(utcYear + (direction === 'next' ? 1 : -1), 0)
+    return newMonth
+  }
+
+  if (calendarItems) {
+    const date = calendarItems[direction === 'next' ? calendarItems.length - 1 : 0].date
+    const year = date.getUTCFullYear()
+    const newViewDate = generateDateByUTCValue(year + (direction === 'next' ? 1 : -viewYears), 0)
+    return newViewDate
+  }
+
+  return null
+}

package/src/core/theme.ts

@@ -72,13 +72,11 @@ export function useStyleConfig(component: keyof VuiTheme['components'], props: a
 
     let styles: Dict = {}
 
-    if (parts.length > 0) {
+    if (parts.length > 0)
       parts.forEach((part: string) => {
         styles[part] = merge(baseStyles[part] ?? {}, sizeStyles[part] ?? {}, variantStyles[part] ?? {})
       })
-    } else {
-      styles = merge(baseStyles, sizeStyles, variantStyles)
-    }
+    else styles = merge(baseStyles, sizeStyles, variantStyles)
 
     return styles
   }, [colorScheme, size, variant])

package/src/datePicker/components/pickerPanel.tsx

@@ -0,0 +1,22 @@
+import { css, styled } from '../../core'
+import Panel from '../../panel'
+import { DatePickerPopupPosition } from '../datePicker.types'
+
+export const PickerPanel = styled(Panel)<{ popupPosition: DatePickerPopupPosition; showPopupBelow: boolean }>`
+  display: flex;
+  flex-direction: column;
+  padding: 0px;
+  position: absolute;
+  z-index: 999;
+  ${p => (p.popupPosition === 'right' ? 'right: 0;' : 'left: 0;')}
+  ${p =>
+    p.showPopupBelow
+      ? css`
+          margin-top: 50px;
+          top: 0;
+        `
+      : css`
+          bottom: 0;
+          margin-bottom: 50px;
+        `}
+`

package/src/datePicker/dateInput.tsx

@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from 'react'
+
+import { Input, InputProps } from '../input'
+import { T } from '../t'
+import { formatDate, parseIsoDate, validateDateFormat } from '../utils'
+
+type Props = InputProps & {
+  initialDate?: Date
+  onChange: (date?: Date) => void
+  onValidate: (date?: Date) => string
+  setValidateStatus: (inValid: boolean) => void
+}
+
+export const DateInput = ({ initialDate, onChange, onValidate, setValidateStatus, ...rest }: Props) => {
+  const formattedInitialDate = initialDate ? formatDate(initialDate, 'YYYY-MM-DD', { timeZone: 'UTC' }) : ''
+  const [dateInput, setDateInput] = useState<string>(formattedInitialDate)
+  const [dateInputValidated, setDateInputValidated] = useState<boolean>(true)
+  const [errorMessage, setErrorMessage] = useState<string>('')
+
+  const isValidDate = (dateString: string) => {
+    if (!validateDateFormat(dateString)) return false
+    if (!parseIsoDate(dateString)) return false
+    return true
+  }
+
+  const handleOnBlur = () => {
+    setDateInputValidated(!dateInput)
+    const parsedDate = parseIsoDate(dateInput)
+    if (parsedDate) {
+      setDateInput(formatDate(parsedDate, 'YYYY-MM-DD', { timeZone: 'UTC' }))
+      const validateMessage = onValidate(parsedDate)
+      !validateMessage && onChange(parsedDate)
+      setDateInputValidated(!validateMessage)
+      setErrorMessage(validateMessage)
+    }
+  }
+
+  useEffect(() => {
+    setDateInput(formattedInitialDate)
+    const validation = onValidate(initialDate)
+    setDateInputValidated(!validation)
+    setValidateStatus(!validation)
+    setErrorMessage(validation)
+  }, [initialDate])
+
+  useEffect(() => {
+    if (dateInput) {
+      const isValidDateString = isValidDate(dateInput)
+      setValidateStatus(isValidDateString)
+      if (!validateDateFormat(dateInput)) setErrorMessage('Supported format is YYYY-MM-DD')
+      else if (!parseIsoDate(dateInput)) setErrorMessage('Invalid date')
+      else {
+        const parsedDate = parseIsoDate(dateInput)
+        const validateMessage = onValidate(parsedDate)
+        !validateMessage && onChange(parsedDate)
+        setDateInputValidated(!validateMessage)
+        setErrorMessage(validateMessage)
+      }
+    }
+  }, [dateInput])
+
+  return (
+    <Input
+      borderColor={dateInputValidated ? 'sandstone.main' : 'energyRed.main'}
+      className="dateInput"
+      data-testid="test-date-input"
+      errorText={!dateInputValidated && <T size="md">{errorMessage}</T>}
+      onBlur={handleOnBlur}
+      onChange={e => setDateInput(e.target.value)}
+      placeholder="YYYY-MM-DD"
+      size="md"
+      state={!dateInputValidated && !errorMessage ? 'error' : 'default'}
+      value={dateInput}
+      {...rest}
+    />
+  )
+}

package/src/datePicker/datePicker.tsx

@@ -0,0 +1,172 @@
+import React, { useEffect, useRef, useState } from 'react'
+
+import Box from '../box'
+import Button, { LineButton } from '../button'
+import Calendar, { DateRange, maxDateTimestamp, minDateTimestamp } from '../calendar'
+import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
+import { cs, useClickOutside } from '../utils'
+import { PickerPanel } from './components/pickerPanel'
+import { DateInput } from './dateInput'
+import { DatePickerProps } from './datePicker.types'
+
+const DatePickerPanel = styled(PickerPanel)`
+  width: 320px;
+`
+
+/** [Beta] Select or input a date. */
+export const DatePicker = vui<'span', DatePickerProps>((props, ref) => {
+  const {
+    autoOpened,
+    boundaries,
+    popupPosition = 'left',
+    selectedDate: selectedDateProps,
+    showClearButton,
+    slotBottom,
+    slotTop,
+    onSelected,
+    children,
+    className,
+    ...rest
+  } = omitThemingProps(props)
+  const styles = useStyleConfig('DatePicker', props)
+
+  const [selectedDate, setSelectedDate] = useState<any>(selectedDateProps)
+  const [isOpen, setIsOpen] = useState(!selectedDate && autoOpened)
+  const [isInvalidInputDate, setIsInvalidInputDate] = useState(true)
+  const [isInvalidSelectedDate, setIsInvalidSelectedDate] = useState(!selectedDate)
+  const initialDateRef = useRef<Date | undefined>(selectedDateProps)
+  const buttonRef = useRef<HTMLDivElement>(null)
+  const popupRef = useRef<HTMLDivElement>(null)
+  const isClearButtonVisible = showClearButton && initialDateRef.current
+
+  useClickOutside([buttonRef, popupRef], () => setIsOpen(false))
+
+  const isStartDateInRange = (date: Date) =>
+    !!boundaries?.startDate && !!date ? date.getTime() - boundaries.startDate.getTime() >= 0 : true
+
+  const isEndDateInRange = (date: Date) =>
+    !!boundaries?.endDate && !!date ? date.getTime() - boundaries.endDate.getTime() <= 0 : true
+
+  const isValidDateRange = (date: Date) => {
+    const minDateTime = new Date(minDateTimestamp)
+    const maxDateTime = new Date(maxDateTimestamp)
+    return date >= minDateTime || date <= maxDateTime
+  }
+
+  useEffect(() => {
+    if (!isOpen) {
+      setSelectedDate(selectedDateProps)
+      initialDateRef.current = selectedDateProps
+    }
+  }, [isOpen, selectedDateProps])
+
+  useEffect(() => {
+    setIsInvalidSelectedDate(
+      (selectedDate && !isStartDateInRange(selectedDate)) ||
+        (selectedDate && !isEndDateInRange(selectedDate)) ||
+        (selectedDate && !isValidDateRange(selectedDate)) ||
+        !selectedDate
+    )
+  }, [selectedDate])
+
+  const onApplyDates = (date?: Date) => {
+    onSelected?.(date)
+    initialDateRef.current = date
+    setIsOpen(false)
+  }
+
+  const onClear = () => {
+    onClose()
+    onSelected?.(undefined)
+  }
+
+  const onClose = () => {
+    setSelectedDate(undefined)
+    setIsOpen(false)
+  }
+
+  const onToggle = () => {
+    if (isOpen) onClose()
+    setIsOpen(!isOpen)
+  }
+
+  const selectDate = (range: DateRange) => setSelectedDate(range?.startDate)
+
+  const onDateInputValidate = (date?: Date) => {
+    const minDateTime = new Date(minDateTimestamp)
+    const maxDateTime = new Date(maxDateTimestamp)
+
+    if (date) {
+      const conditions: [boolean, string][] = [
+        [isNaN(date.getTime()), 'Supported format is YYYY-MM-DD'],
+        [date < minDateTime, 'Invalid date, the minimum date time is 1753-01-02'],
+        [date > maxDateTime, 'Invalid date, the maximum date time is 9000-12-31'],
+        [!!boundaries?.startDate && !isStartDateInRange(date), 'Invalid date'],
+        [!!boundaries?.endDate && !isEndDateInRange(date), 'Invalid date']
+      ]
+      const [validateErrorPair] = conditions.filter(([result]) => result)
+
+      if (validateErrorPair) {
+        const [_, message] = validateErrorPair
+        setIsInvalidInputDate(true)
+        return message
+      }
+    }
+    return ''
+  }
+
+  return (
+    <Box className={cs('vui-datePicker', className)} position="relative" ref={ref} {...styles} {...rest}>
+      <Box onClick={onToggle}>{children}</Box>
+      {isOpen && (
+        <DatePickerPanel popupPosition={popupPosition} ref={popupRef} showPopupBelow>
+          {!!slotTop && <Box px={2}>{slotTop}</Box>}
+          <Box display="block" mb={0} mt={2} mx={2}>
+            <DateInput
+              autoFocus
+              initialDate={selectedDate}
+              onChange={newDate => setSelectedDate(newDate)}
+              onValidate={onDateInputValidate}
+              setValidateStatus={inValid => setIsInvalidInputDate(!inValid)}
+            />
+          </Box>
+          <Box mx={2} my={1}>
+            <Calendar
+              boundaries={boundaries ?? { startDate: undefined, endDate: undefined }}
+              fixedNumberOfWeeks
+              fontWeight={500}
+              minH={310}
+              mode="exact"
+              onSelectDates={range => selectDate(range)}
+              selectedDates={{ startDate: selectedDate, endDate: undefined }}
+              w="100%"
+            />
+          </Box>
+          <Box overflow="unset" pt={0.5}>
+            <Box alignItems="center" flex={1} ml="auto" pb={2} px={2}>
+              {isClearButtonVisible && (
+                <LineButton flex={1} onClick={onClear} size="md">
+                  Clear
+                </LineButton>
+              )}
+              <Button
+                disabled={isInvalidSelectedDate || isInvalidInputDate}
+                flex={1}
+                ml={isClearButtonVisible ? 1 : 0}
+                onClick={() => onApplyDates(selectedDate)}
+                size="md"
+              >
+                Apply
+              </Button>
+            </Box>
+          </Box>
+          {!!slotBottom && <Box px={2}>{slotBottom}</Box>}
+        </DatePickerPanel>
+      )}
+    </Box>
+  )
+})
+
+DatePicker.displayName = 'DatePicker'
+
+export default DatePicker

package/src/datePicker/datePicker.types.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react'
+
+import { BoxProps } from '../box'
+import { DateRange } from '../calendar'
+import { ThemingProps } from '../theme'
+
+export type DatePickerPopupPosition = 'left' | 'right'
+
+export type DatePickerProps = Omit<BoxProps, 'size' | 'variant'> &
+  ThemingProps<'DatePicker'> & {
+    /** Auto opened without value, used with dynamic adding of the filter (user clicks on  "+ Add filter" button)  */
+    autoOpened?: boolean
+    /** Available date range for the Calendar */
+    boundaries?: DateRange
+    /** Should the popup be anchored to the left or right of the button */
+    popupPosition?: DatePickerPopupPosition
+    selectedDate?: Date
+    showClearButton?: boolean
+    /** Custom content displayed at the bottom of the panel */
+    slotBottom?: ReactNode
+    /** Custom content displayed at the top of the panel */
+    slotTop?: ReactNode
+    /** Date selected */
+    onSelected?: (date?: Date) => void
+  }

package/src/datePicker/index.ts

@@ -0,0 +1,3 @@
+export * from './datePicker'
+export { default } from './datePicker'
+export * from './datePicker.types'

package/src/datePicker/theme.ts

@@ -0,0 +1,14 @@
+const baseStyle = {}
+
+const defaultProps = {}
+
+const sizes = {}
+
+const variants = {}
+
+export default {
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants
+}