@semcore/date-picker 3.0.8 → 3.0.11

package/src/index.d.ts

@@ -1,355 +0,0 @@
-import React, { ComponentProps } from 'react';
-import dayjs from 'dayjs';
-import { Box, IBoxProps } from '@semcore/flex-box';
-import Button from '@semcore/button';
-import { CProps, Merge, PropGetterFn, ReturnEl } from '@semcore/core';
-import Dropdown, { IDropdownProps } from '@semcore/dropdown';
-import { IWithI18nEnhanceProps } from '@semcore/utils/lib/enhances/i18nEnhance';
-import BaseTrigger from '@semcore/base-trigger';
-
-export type DateConstructorParams = string | number | Date;
-
-export interface ICalendarProps extends IBoxProps {
-  /**
-   * Locale for displaying the days of a week and months, to be transferred to `Intl`
-   * @default en
-   * */
-  locale?: NavigatorLanguage['language'];
-  /**
-   * Array of dates blocked for selection
-   * Accepts the date, the range of dates or `falsICalendarPropse` for specifying infinity ([Date | false, Date | false]), crontab( 6,7)
-   * */
-  disabled?: (Date | (Date | false)[] | string)[];
-  /**
-   * @ignore
-   * */
-  highlighted?: DateConstructorParams[];
-  /**
-   * @ignore
-   * */
-  onHighlightedChange?: (date: Date[]) => void;
-  /**
-   * The selected date, accepts everything which is accepted by `new Date()`
-   * */
-  value?: DateConstructorParams[];
-  /**
-   * To be activated upon selecting the date
-   * */
-  onChange?: (date: Date[]) => void;
-  /**
-   * Date for showing the necessary month
-   * @default new Date()
-   * */
-  displayedPeriod?: Date;
-}
-
-export interface ICalendarDaysContext {
-  days: ICalendarUnitProps[];
-}
-
-export interface ICalendarMonthsContext {
-  months: ICalendarUnitProps[];
-}
-
-export interface ICalendarUnitProps extends IBoxProps {
-  selected?: boolean;
-  outdated?: boolean;
-  disabled?: boolean;
-  today?: boolean;
-  startSelected?: boolean;
-  endSelected?: boolean;
-  highlighted?: boolean;
-  startHighlighted?: boolean;
-  endHighlighted?: boolean;
-  children?: React.ReactNode;
-}
-
-export interface ICalendarContext {
-  getUnitProps: PropGetterFn;
-}
-
-declare const Calendar: (<T>(
-  props: CProps<ICalendarProps & T, ICalendarContext, IAbstractDatePickerHandlers>,
-) => ReturnEl) & {
-  Unit: <T>(props: ICalendarUnitProps & T) => ReturnEl;
-};
-
-export interface IDatePickerProps extends IDropdownProps, IWithI18nEnhanceProps {
-  /**
-   * The selected date, accepts everything which is accepted by `new Date()`
-   * */
-  value?: DateConstructorParams;
-  /**
-   * To be activated upon selecting the date
-   * */
-  onChange?: (date: Date) => void;
-  /**
-   * Array of dates blocked for selection
-   * */
-  disabled?: (Date | (Date | false)[] | string)[];
-  /**
-   * Date for showing the necessary month
-   * @default new Date()
-   * */
-  displayedPeriod?: DateConstructorParams;
-  /**
-   * To be activated upon changing the current shown month
-   * */
-  onDisplayedPeriodChange?: (date: Date) => void;
-  /**
-   * Component size
-   * @default m
-   */
-  size?: 'm' | 'l';
-  /**
-   * The selected date, accepts everything which is accepted by `new Date()`
-   * */
-  highlighted?: DateConstructorParams[];
-  /**
-   * Default value selected date, accepts everything which is accepted by `new Date()`
-   * */
-  defaultValue?: DateConstructorParams;
-  /**
-   * Default value date for showing the necessary month
-   * */
-  defaultDisplayedPeriod?: DateConstructorParams;
-  /**
-   * Default value selected date, accepts everything which is accepted by `new Date()`
-   * */
-  defaultHighlighted?: DateConstructorParams[];
-}
-
-export interface IDateRangePickerProps extends IDropdownProps, IWithI18nEnhanceProps {
-  /**
-   * The selected date, accepts everything which is accepted by `new Date()`
-   * */
-  value?: DateConstructorParams[];
-  /**
-   * Default value selected date, accepts everything which is accepted by `new Date()`
-   * */
-  defaultValue?: DateConstructorParams[];
-  /**
-   * Default value date for showing the necessary month
-   * */
-  defaultDisplayedPeriod?: DateConstructorParams;
-  /**
-   * Default value selected date, accepts everything which is accepted by `new Date()`
-   * */
-  defaultHighlighted?: DateConstructorParams[];
-  /**
-   * To be activated upon selecting the date
-   * */
-  onChange?: (date: Date[]) => void;
-  /**
-   * Array of dates blocked for selection
-   * */
-  disabled?: (Date | (Date | false)[] | string)[];
-  /**
-   * Date for showing the necessary month
-   * @default new Date()
-   * */
-  displayedPeriod?: DateConstructorParams;
-  /**
-   * To be activated upon changing the current shown month
-   * */
-  onDisplayedPeriodChange?: (date: Date) => void;
-  /**
-   * Component size
-   * @default m
-   */
-  size?: 'm' | 'l' | 'xl';
-  /**
-   * The selected date, accepts everything which is accepted by `new Date()`
-   * */
-  highlighted?: DateConstructorParams[];
-  /**
-   * Remove the 'Reset' button
-   * */
-  unclearable?: boolean;
-  /**
-   * To be activated upon selecting the date
-   * */
-  onHighlightedChange?: (date: Date[]) => void;
-  /**
-   * Array of periods
-   * [{value: [new Date(), new Date()], children: "Today"}]
-   * @default Past 2 days / Past week / Past 2 week / Past month / Past 2 month
-   * */
-  periods?: (ComponentProps<typeof Button> & { value: Date[] })[];
-}
-
-export interface IDateRangePickerPeriodProps extends IBoxProps {
-  /**
-   * Current selected period
-   * */
-  value?: DateConstructorParams[];
-  /**
-   * To be activated by clicking the button for switching the selected period.
-   * */
-  onChange?: (date: Date[]) => void;
-  /**
-   * To be activated by hovering a cursor over the button for changing the current displayed month.
-   * */
-  onDisplayedPeriodChange?: (date: Date) => void;
-  /**
-   * To be activated by hovering a cursor over the button for selecting the dates.
-   * */
-  onHighlightedChange?: (date: Date[]) => void;
-  /**
-   * Array of periods
-   * [{value: [new Date(), new Date()], children: "Today"}]
-   * @default Past 2 days / Past week / Past 2 week / Past month / Past 2 month
-   * */
-  periods?: (ComponentProps<typeof Button> & { value: Date[] })[];
-}
-
-export interface IDatePickerContext {
-  getTriggerProps: PropGetterFn;
-  getPopperProps: PropGetterFn;
-  getHeaderProps: PropGetterFn;
-  getTitleProps: PropGetterFn;
-  getNextProps: PropGetterFn;
-  getPrevProps: PropGetterFn;
-  getCalendarProps: PropGetterFn;
-  getTodayProps: PropGetterFn;
-}
-
-export interface IAbstractDatePickerHandlers {
-  displayedPeriod: (value: DateConstructorParams) => void;
-  visible: (index: boolean) => void;
-  highlighted: (list: DateConstructorParams[]) => void;
-  value: (index: DateConstructorParams) => void;
-}
-
-export interface IDatePickerHandlers {
-  visible: (index: boolean) => void;
-}
-
-declare const DatePicker: ((
-  props: CProps<IDatePickerProps, IDatePickerContext & ICalendarDaysContext, IDatePickerHandlers>,
-) => ReturnEl) & {
-  Trigger: (<T>(
-    props: Merge<ComponentProps<typeof Dropdown.Trigger>, ComponentProps<typeof BaseTrigger>> & T,
-  ) => ReturnEl) & {
-    Addon: typeof BaseTrigger.Addon;
-    Text: typeof BaseTrigger.Text;
-  };
-  Popper: typeof Dropdown.Popper;
-  Header: typeof Box;
-  Title: <T>(props: CProps<IDatePickerProps & IBoxProps & T, IDatePickerContext>) => ReturnEl;
-  Prev: typeof Button;
-  Next: typeof Button;
-  Calendar: typeof Calendar;
-  Today: typeof Box;
-  add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;
-  subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;
-};
-
-export interface IDateRangePickerContext {
-  getTriggerProps: PropGetterFn;
-  getPopperProps: PropGetterFn;
-  getHeaderProps: PropGetterFn;
-  getTitleProps: PropGetterFn;
-  getNextProps: PropGetterFn;
-  getPrevProps: PropGetterFn;
-  getCalendarProps: PropGetterFn;
-  getPeriodProps: PropGetterFn;
-}
-
-declare const DateRangePicker: ((
-  props: CProps<
-    IDateRangePickerProps,
-    IDateRangePickerContext & ICalendarDaysContext,
-    IDatePickerHandlers
-  >,
-) => ReturnEl) & {
-  Trigger: (<T>(
-    props: Merge<ComponentProps<typeof Dropdown.Trigger>, ComponentProps<typeof BaseTrigger>> & T,
-  ) => ReturnEl) & {
-    Addon: typeof BaseTrigger.Addon;
-    Text: typeof BaseTrigger.Text;
-  };
-  Popper: <T>(props: ComponentProps<typeof Dropdown.Popper> & T) => ReturnEl;
-  Header: typeof Box;
-  Title: <T>(
-    props: CProps<IDateRangePickerProps & IBoxProps & T, IDateRangePickerContext>,
-  ) => ReturnEl;
-  Prev: typeof Button;
-  Next: typeof Button;
-  Calendar: typeof Calendar;
-  Period: <T>(props: IDateRangePickerPeriodProps & T) => ReturnEl;
-  add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;
-  subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;
-};
-
-export interface IMonthPickerContext {
-  getTriggerProps: PropGetterFn;
-  getPopperProps: PropGetterFn;
-  getHeaderProps: PropGetterFn;
-  getTitleProps: PropGetterFn;
-  getNextProps: PropGetterFn;
-  getPrevProps: PropGetterFn;
-  getCalendarProps: PropGetterFn;
-}
-
-declare const MonthPicker: ((
-  props: CProps<
-    IDatePickerProps,
-    IMonthPickerContext & ICalendarMonthsContext,
-    IDatePickerHandlers
-  >,
-) => ReturnEl) & {
-  Trigger: (<T>(
-    props: Merge<ComponentProps<typeof Dropdown.Trigger>, ComponentProps<typeof BaseTrigger>> & T,
-  ) => ReturnEl) & {
-    Addon: typeof BaseTrigger.Addon;
-    Text: typeof BaseTrigger.Text;
-  };
-  Popper: typeof Dropdown.Popper;
-  Header: typeof Box;
-  Title: <T>(props: CProps<IDatePickerProps & IBoxProps & T, IMonthPickerContext>) => ReturnEl;
-  Prev: typeof Button;
-  Next: typeof Button;
-  Calendar: typeof Calendar;
-  add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;
-  subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;
-};
-
-export interface IMonthRangePickerContext {
-  getTriggerProps: PropGetterFn;
-  getPopperProps: PropGetterFn;
-  getHeaderProps: PropGetterFn;
-  getTitleProps: PropGetterFn;
-  getNextProps: PropGetterFn;
-  getPrevProps: PropGetterFn;
-  getCalendarProps: PropGetterFn;
-  getPeriodProps: PropGetterFn;
-}
-
-declare const MonthRangePicker: ((
-  props: CProps<
-    IDateRangePickerProps,
-    IMonthRangePickerContext & ICalendarMonthsContext,
-    IDatePickerHandlers
-  >,
-) => ReturnEl) & {
-  Trigger: (<T>(
-    props: Merge<ComponentProps<typeof Dropdown.Trigger>, ComponentProps<typeof BaseTrigger>> & T,
-  ) => ReturnEl) & {
-    Addon: typeof BaseTrigger.Addon;
-    Text: typeof BaseTrigger.Text;
-  };
-  Popper: typeof Dropdown.Popper;
-  Header: typeof Box;
-  Title: <T>(
-    props: CProps<IDateRangePickerProps & IBoxProps & T, IMonthRangePickerContext>,
-  ) => ReturnEl;
-  Prev: typeof Button;
-  Next: typeof Button;
-  Calendar: typeof Calendar;
-  Period: <T>(props: IDateRangePickerPeriodProps & T) => ReturnEl;
-  add: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;
-  subtract: (date: number | Date, amount: number, unit: dayjs.OpUnitType) => Date;
-};
-
-export { DatePicker, DateRangePicker, MonthPicker, MonthRangePicker };

package/src/index.js

@@ -1,8 +0,0 @@
-export { default as DatePicker } from './DatePicker';
-export * from './DatePicker';
-
-export { default as DateRangePicker } from './DateRangePicker';
-
-export { default as MonthPicker } from './MonthPicker';
-
-export { default as MonthRangePicker } from './MonthRangePicker';

package/src/style/calendar.shadow.css

@@ -1,190 +0,0 @@
-@import '@semcore/utils/style/var.css';
-
-SCalendar {
-  display: flex;
-  flex-direction: column;
-}
-
-SGridDays {
-  display: grid;
-  grid-template-columns: repeat(7, minmax(32px, auto));
-  grid-template-rows: repeat(auto-fit, minmax(32px, auto));
-}
-
-SGridMonths {
-  display: grid;
-  grid-row-gap: 8px;
-  grid-template-columns: repeat(3, minmax(60px, auto));
-  grid-template-rows: repeat(4, minmax(32px, auto));
-}
-
-SWeekDays {
-  display: grid;
-  grid-template-columns: repeat(7, minmax(32px, auto));
-}
-
-SWeekDay {
-  min-width: 32px;
-  min-height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--gray-500);
-  font-size: var(--fs-200);
-  font-weight: 400;
-  overflow: hidden;
-}
-
-SCalendarUnit {
-  font-family: inherit;
-  font-weight: normal;
-  line-height: normal;
-  text-decoration: none;
-  text-align: center;
-  vertical-align: middle;
-  border: 1px solid transparent;
-  color: var(--gray-800);
-  outline: 0;
-  box-shadow: none;
-  overflow: visible;
-  user-select: none;
-  touch-action: manipulation;
-  -webkit-tap-highlight-color: transparent;
-  background: transparent;
-
-  align-items: center;
-  border-radius: var(--rounded-m);
-  box-sizing: border-box;
-  cursor: pointer;
-  display: flex;
-  font-size: var(--fs-200);
-  justify-content: center;
-  min-height: 32px;
-  min-width: 32px;
-  position: relative;
-  transition: color 0.15s, background 0.15s;
-  outline: none;
-
-  &:hover {
-    color: var(--gray-800);
-    background: var(--gray-100);
-  }
-
-  &:focus-visible {
-    box-shadow: var(--keyboard-focus);
-  }
-}
-
-SCalendarUnit[today] {
-  &:before {
-    content: '';
-    position: absolute;
-    display: block;
-    top: 1px;
-    left: 1px;
-    border-radius: var(--rounded-m);
-    width: calc(100% - 2px);
-    height: calc(100% - 2px);
-    box-sizing: border-box;
-    border: 1px solid var(--gray-200);
-  }
-}
-
-SCalendarUnit[today]SCalendarUnit[startSelected],
-SCalendarUnit[today]SCalendarUnit[endSelected] {
-  &:before {
-    border-color: color-mod(white alpha(50%));
-  }
-}
-
-SCalendarUnit[selected] {
-  background: var(--blue-100);
-  border-radius: 0;
-  color: var(--gray-800);
-
-  &:hover {
-    background: var(--blue-400);
-  }
-}
-
-SCalendarUnit[highlighted] {
-  background: color-mod(var(--blue-400) alpha(20%));
-  border-radius: 0;
-  color: var(--gray-800);
-
-  &:hover {
-    background: color-mod(var(--blue-400) alpha(30%));
-  }
-}
-
-SCalendarUnit[startSelected] {
-  border-bottom-left-radius: var(--rounded-m);
-  border-bottom-right-radius: 0;
-  border-top-left-radius: var(--rounded-m);
-  border-top-right-radius: 0;
-  color: white;
-  background: var(--blue-300);
-
-  &:hover {
-    color: white;
-    background: var(--blue-400);
-  }
-}
-
-SCalendarUnit[endSelected] {
-  background: var(--blue-300);
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: var(--rounded-m);
-  border-top-left-radius: 0;
-  border-top-right-radius: var(--rounded-m);
-  color: white;
-
-  &:hover {
-    color: white;
-    background: var(--blue-400);
-  }
-}
-
-SCalendarUnit[startHighlighted] {
-  border-bottom-left-radius: var(--rounded-m);
-  border-bottom-right-radius: 0;
-  border-top-left-radius: var(--rounded-m);
-  border-top-right-radius: 0;
-}
-
-SCalendarUnit[endHighlighted] {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: var(--rounded-m);
-  border-top-left-radius: 0;
-  border-top-right-radius: var(--rounded-m);
-}
-
-SCalendarUnit[startHighlighted]SCalendarUnit[endHighlighted] {
-  border-bottom-left-radius: var(--rounded-m);
-  border-bottom-right-radius: var(--rounded-m);
-  border-top-left-radius: var(--rounded-m);
-  border-top-right-radius: var(--rounded-m);
-}
-
-SCalendarUnit[startSelected]SCalendarUnit[endSelected] {
-  border-bottom-left-radius: var(--rounded-m);
-  border-bottom-right-radius: var(--rounded-m);
-  border-top-left-radius: var(--rounded-m);
-  border-top-right-radius: var(--rounded-m);
-}
-
-SCalendarUnit[outdated] {
-  opacity: 0.2;
-}
-
-SCalendarUnit[disabled] {
-  opacity: 0.4;
-  cursor: default;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion) {
-  SCalendarUnit {
-    transition: none;
-  }
-}

package/src/style/date-picker.shadow.css

@@ -1,49 +0,0 @@
-@import '@semcore/utils/style/var.css';
-
-SPopper {
-  padding: 16px;
-  outline: 0;
-
-  &::-moz-focus-inner {
-    border: none;
-    padding: 0;
-  }
-
-  &:active,
-  &:hover,
-  &:focus {
-    outline: 0;
-    text-decoration: none;
-  }
-
-  &:focus {
-    box-shadow: var(--keyboard-focus);
-  }
-}
-
-SHeader {
-  display: flex;
-  align-items: center;
-}
-
-STitle {
-  font-size: var(--fs-200);
-  color: var(--gray-800);
-  height: 32px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-SToday {
-  display: flex;
-  margin-top: 12px;
-  justify-content: center;
-}
-
-SPeriod {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 8px;
-}

package/src/translations/de.json

@@ -1,13 +0,0 @@
-{
-  "apply": "Anwenden",
-  "reset": "Zurücksetzen",
-  "today": "Heute",
-  "last2Days": "Letzte 2 Tage",
-  "lastWeek": "Letzte Woche",
-  "last2Weeks": "Letzte 2 Wochen",
-  "lastMonth": "Letzten Monat",
-  "last2Months": "Letzte 2 Monate",
-  "last3Months": "Letzte 3 Monate",
-  "last6Months": "Letzte 6 Monate",
-  "last12Months": "Letzte 12 Monate"
-}

package/src/translations/en.json

@@ -1,13 +0,0 @@
-{
-  "apply": "Apply",
-  "reset": "Reset",
-  "today": "Today",
-  "last2Days": "Last 2 days",
-  "lastWeek": "Last week",
-  "last2Weeks": "Last 2 weeks",
-  "lastMonth": "Last month",
-  "last2Months": "Last 2 months",
-  "last3Months": "Last 3 months",
-  "last6Months": "Last 6 months",
-  "last12Months": "Last 12 months"
-}

package/src/translations/es.json

@@ -1,13 +0,0 @@
-{
-  "apply": "Aplicar",
-  "reset": "Resetear",
-  "today": "Hoy",
-  "last2Days": "Últimos 2 días",
-  "lastWeek": "Última semana",
-  "last2Weeks": "Últimas 2 semanas",
-  "lastMonth": "Último mes",
-  "last2Months": "Últimos 2 meses",
-  "last3Months": "Últimos 3 meses",
-  "last6Months": "Últimos 6 meses",
-  "last12Months": "Últimos 12 meses"
-}

package/src/translations/fr.json

@@ -1,13 +0,0 @@
-{
-  "apply": "Appliquer",
-  "reset": "Réinitialiser",
-  "today": "Aujourd'hui",
-  "last2Days": "2 derniers jours",
-  "lastWeek": "La semaine dernière",
-  "last2Weeks": "2 dernières semaines",
-  "lastMonth": "Le mois dernier",
-  "last2Months": "2 derniers mois",
-  "last3Months": "3 derniers mois",
-  "last6Months": "6 derniers mois",
-  "last12Months": "12 derniers mois"
-}

package/src/translations/it.json

@@ -1,13 +0,0 @@
-{
-  "apply": "Applica",
-  "reset": "Reimposta",
-  "today": "Oggi",
-  "last2Days": "Ultimi 2 giorni",
-  "lastWeek": "Ultima settimana",
-  "last2Weeks": "Ultime 2 settimane",
-  "lastMonth": "Ultimo mese",
-  "last2Months": "Ultimi 2 mesi",
-  "last3Months": "Ultimi 3 mesi",
-  "last6Months": "Ultimi 6 mesi",
-  "last12Months": "Ultimi 12 mesi"
-}

package/src/translations/ja.json

@@ -1,13 +0,0 @@
-{
-  "apply": "適用",
-  "reset": "リセット",
-  "today": "今日",
-  "last2Days": "過去2日",
-  "lastWeek": "先週",
-  "last2Weeks": "直近2週間",
-  "lastMonth": "先月",
-  "last2Months": "過去2か月間",
-  "last3Months": "過去3か月間",
-  "last6Months": "過去6か月間",
-  "last12Months": "過去12か月間"
-}

package/src/translations/ko.json

@@ -1,13 +0,0 @@
-{
-  "apply": "적용",
-  "reset": "재설정",
-  "today": "오늘",
-  "last2Days": "최근 2일",
-  "lastWeek": "지난 주",
-  "last2Weeks": "지난 2주",
-  "lastMonth": "지난 달",
-  "last2Months": "최근 2개월",
-  "last3Months": "최근 3개월",
-  "last6Months": "최근 6개월",
-  "last12Months": "최근 12개월"
-}