@alfalab/core-components-calendar-range 7.1.5 → 7.2.0

package/esm/Component.desktop-8c6198cc.d.ts

@@ -0,0 +1,134 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, MouseEvent } from "react";
+import { DayAddons, SelectorView, View } from "./typings-5684a67d";
+type YearsTableProps = {
+    /**
+     * Массив лет
+     */
+    years?: Date[];
+    /**
+     * Выбранный год
+     */
+    selectedYear?: Date;
+    /**
+     * Доп. пропсы для переданного года
+     */
+    getYearProps: (year: Date) => Record<string, unknown>;
+    /**
+     * Обработчик скролла
+     */
+    onScroll: (scrollTop: number) => void;
+    /**
+     * Должен ли календарь подстраиваться под ширину родителя.
+     */
+    responsive?: boolean;
+};
+declare const YearsTable: FC<YearsTableProps>;
+type CalendarDesktopProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Вид по умолчанию (выбор дней, месяцев, лет)
+     */
+    defaultView?: View;
+    /**
+     * Вид шапки — месяц и год или только месяц
+     */
+    selectorView?: SelectorView;
+    /**
+     * Выбранная дата (timestamp)
+     */
+    value?: number;
+    /**
+     * Открытый месяц (timestamp)
+     */
+    month?: number;
+    /**
+     * Месяц, открытый по умолчанию (timestamp)
+     */
+    defaultMonth?: number;
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number;
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number;
+    /**
+     * Начало выделенного периода (timestamp)
+     */
+    selectedFrom?: number;
+    /**
+     * Конец выделенного периода (timestamp)
+     */
+    selectedTo?: number;
+    /**
+     * Индикатор, что выбран полный период
+     */
+    rangeComplete?: boolean;
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+    /**
+     * Список отключенных для выбора дней.
+     */
+    offDays?: Array<Date | number>;
+    /**
+     * Список выходных
+     */
+    holidays?: Array<Date | number>;
+    /**
+     * Обработчик изменения месяца (или года)
+     */
+    onMonthChange?: (month: number) => void;
+    /**
+     * Обработчик выбора даты
+     */
+    onChange?: (date?: number) => void;
+    /**
+     * Обработчик нажатия на кнопку месяца
+     */
+    onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на кнопку года
+     */
+    onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на период
+     */
+    onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Нужно ли рендерить шапку календаря
+     */
+    hasHeader?: boolean;
+    /**
+     * Должен ли календарь подстраиваться под ширину родителя.
+     */
+    responsive?: boolean;
+    /**
+     * Дополнительный контент под числом
+     */
+    dayAddons?: DayAddons[];
+    /**
+     * Форма ячейки дня
+     */
+    shape?: 'rounded' | 'rectangular';
+    /**
+     * Отображать ли текущий год, если selectorView 'month-only'
+     * @default false
+     */
+    showCurrentYearSelector?: boolean;
+};
+declare const CalendarDesktop: React.ForwardRefExoticComponent<CalendarDesktopProps & React.RefAttributes<HTMLDivElement>>;
+export * from "./Component-8c6198cc";
+export * from "./Component-5684a67d";
+export { YearsTableProps, YearsTable, CalendarDesktopProps, CalendarDesktop };

package/esm/Component.js

@@ -5,6 +5,7 @@ import { CalendarRangeStatic } from './views/static.js';
 import 'classnames';
 import 'date-fns/startOfMonth';
 import '@alfalab/core-components-calendar-input/esm';
+import '@alfalab/core-components-calendar-input/esm/shared';
 import '@alfalab/core-components-date-input/esm';
 import '@alfalab/hooks';
 import './components/divider/Component.js';
@@ -14,10 +15,11 @@ import 'date-fns/isEqual';
 import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/subMonths';
-import './index.module-f83e6044.js';
+import './index.module-a7e95baa.js';
 import 'date-fns/endOfMonth';
 import 'date-fns/isSameMonth';
-import '@alfalab/core-components-calendar/esm';
+import '@alfalab/core-components-calendar/esm/desktop';
+import '@alfalab/core-components-calendar/esm/shared';
 import './utils.js';
 
 var CalendarRange = function (_a) {

package/esm/Component.responsive-2e2b2125.d.ts

@@ -0,0 +1,68 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, ReactNode } from "react";
+import { AnchorButtonProps, NativeButtonProps, ButtonProps } from "./typings-9211a437";
+type ButtonMobileProps = Partial<AnchorButtonProps | NativeButtonProps>;
+declare const ButtonMobile: React.ForwardRefExoticComponent<ButtonMobileProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+type MqProps = {
+    /**
+     * Media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+     */
+    query?: string;
+    /**
+     * Запрос на поддержку тач-событий
+     */
+    touch?: boolean;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Обработчик изменений в совпадении запросов
+     */
+    onMatchChange?: (isMatched: boolean) => void;
+};
+declare const Mq: FC<MqProps>;
+/**
+ * Хук для медиа запросов.
+ * @param query media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ * @param defaultValue Значение по-умолчанию.
+ */
+declare const useMatchMedia: (query: string, defaultValue?: boolean | (() => boolean)) => boolean[];
+/**
+ * Возвращает MediaQueryList для заданного media-выражения.
+ *
+ * @param queryProp media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ */
+declare function getMatchMedia(queryProp: string): MediaQueryList;
+/**
+ * Удаляет MediaQueryList.
+ *
+ * @param queryProp media выражение или кастомный запрос из `mq.json`, например `--mobile`.
+ */
+declare function releaseMatchMedia(queryProp: string): void;
+/**
+ * Возвращает `true`, если есть поддержка `Pointer Events`
+ */
+declare function isPointerEventsSupported(): boolean;
+/**
+ * Возвращает `true`, если есть поддержка `Touch Events`
+ */
+declare function isTouchSupported(): boolean;
+declare const _exports: {
+    "--mobile-xs": string;
+    "--mobile-s": string;
+    "--mobile-m": string;
+    "--mobile-l": string;
+    "--mobile": string;
+    "--tablet-s": string;
+    "--tablet-m": string;
+    "--tablet": string;
+    "--desktop-s": string;
+    "--desktop-m": string;
+    "--desktop-l": string;
+    "--desktop-xl": string;
+    "--desktop": string;
+};
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { _exports as default, ButtonMobileProps, ButtonMobile, MqProps, Mq, useMatchMedia, getMatchMedia, releaseMatchMedia, isPointerEventsSupported, isTouchSupported, Button };

package/esm/components/divider/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"calendar-range__component_g9atn","outer":"calendar-range__outer_g9atn","s":"calendar-range__s_g9atn","m":"calendar-range__m_g9atn","l":"calendar-range__l_g9atn","xl":"calendar-range__xl_g9atn"};
+var styles = {"component":"calendar-range__component_1knti","outer":"calendar-range__outer_1knti","s":"calendar-range__s_1knti","m":"calendar-range__m_1knti","l":"calendar-range__l_1knti","xl":"calendar-range__xl_1knti"};
 require('./index.css')
 
 var Divider = function (_a) {

package/esm/components/divider/index.css

@@ -1,4 +1,4 @@
-/* hash: e775r */
+/* hash: 1d2ab */
 :root {
 } /* deprecated */ :root {
     --color-light-graphic-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -41,29 +41,29 @@
     /* disabled */
 
     /* marker */
-} .calendar-range__component_g9atn {
+} .calendar-range__component_1knti {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 16px;
     margin: 0 var(--gap-xs)
-} .calendar-range__component_g9atn:after {
+} .calendar-range__component_1knti:after {
         content: '';
         display: block;
         width: 100%;
         height: 1px;
         background-color: var(--color-light-graphic-primary);
-    } .calendar-range__outer_g9atn {
+    } .calendar-range__outer_1knti {
     position: relative;
 
     /* FormControl .above height + margin-bottom */
     top: 24px;
-} .calendar-range__s_g9atn {
+} .calendar-range__s_1knti {
     height: var(--size-s-height);
-} .calendar-range__m_g9atn {
+} .calendar-range__m_1knti {
     height: var(--size-m-height);
-} .calendar-range__l_g9atn {
+} .calendar-range__l_1knti {
     height: var(--size-l-height);
-} .calendar-range__xl_g9atn {
+} .calendar-range__xl_1knti {
     height: var(--size-xl-height);
 }

package/esm/desktop-63dec22f.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop-2e2b2125";
+export {};

package/esm/index-9211a437.d.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Component.responsive-2e2b2125";
+export type { ButtonProps } from "./typings-9211a437";

package/esm/index-ebda875c.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export * from "./Component-63dec22f";

package/esm/index-f034f741.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component-8c6198cc";
+export { shiftValues } from "./utils-e0a54580";

package/esm/index.js

@@ -5,6 +5,7 @@ import './views/popover.js';
 import 'classnames';
 import 'date-fns/startOfMonth';
 import '@alfalab/core-components-calendar-input/esm';
+import '@alfalab/core-components-calendar-input/esm/shared';
 import '@alfalab/core-components-date-input/esm';
 import '@alfalab/hooks';
 import './components/divider/Component.js';
@@ -14,9 +15,10 @@ import 'date-fns/isEqual';
 import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/subMonths';
-import './index.module-f83e6044.js';
+import './index.module-a7e95baa.js';
 import './views/static.js';
 import 'date-fns/endOfMonth';
 import 'date-fns/isSameMonth';
-import '@alfalab/core-components-calendar/esm';
+import '@alfalab/core-components-calendar/esm/desktop';
+import '@alfalab/core-components-calendar/esm/shared';
 import './utils.js';

package/esm/index.module-a7e95baa.js

@@ -0,0 +1,4 @@
+var styles = {"component":"calendar-range__component_hnnqf","static":"calendar-range__static_hnnqf","calendar":"calendar-range__calendar_hnnqf"};
+require('./views/index.css')
+
+export { styles as s };

package/esm/shared-848397c5.d.ts

@@ -0,0 +1,35 @@
+// eslint-disable-next-line @typescript-eslint/naming-convention
+type usePeriodProps = {
+    /**
+     * Обработчик изменения выделенного периода
+     */
+    onPeriodChange?: (selectedFrom?: number, selectedTo?: number) => void;
+    /**
+     * Начальное значение начала выделенного периода
+     */
+    initialSelectedFrom?: number;
+    /**
+     * Начальное значение конца выделенного периода
+     */
+    initialSelectedTo?: number;
+};
+declare function usePeriod({ onPeriodChange, initialSelectedFrom, initialSelectedTo }?: usePeriodProps): {
+    selectedFrom: number | undefined;
+    selectedTo: number | undefined;
+    setStart: (date?: number) => void;
+    setEnd: (date?: number) => void;
+    resetPeriod: () => void;
+    updatePeriod: (date?: number) => void;
+};
+declare function usePeriodWithReset({ onPeriodChange, initialSelectedFrom, initialSelectedTo }?: usePeriodProps): {
+    selectedFrom: number | undefined;
+    selectedTo: number | undefined;
+    setStart: (date?: number) => void;
+    setEnd: (date?: number) => void;
+    resetPeriod: () => void;
+    updatePeriod: (date?: number) => void;
+};
+export { usePeriod, usePeriodWithReset };
+export { russianWeekDay, dateInLimits, limitDate, monthName, DAYS_IN_WEEK, MONTHS, MONTHS_IN_YEAR, SUNDAY_INDEX, WEEKDAYS, DATE_FORMAT } from "./utils-8c6198cc";
+export { useCalendar } from "./useCalendar-71d94e2b";
+export * from "./index-f034f741";

package/esm/shared-c111a9fd.d.ts

@@ -0,0 +1,13 @@
+declare const DATE_FORMAT = "dd.MM.yyyy";
+declare const NATIVE_DATE_FORMAT = "yyyy-MM-dd";
+declare const DATE_MASK: (string | RegExp)[];
+declare const IS_BROWSER: boolean;
+declare const SUPPORTS_INPUT_TYPE_DATE: boolean;
+declare const formatDate: (date: Date | number, dateFormat?: string) => string;
+declare const parseDateString: (value: string, dateFormat?: string) => Date;
+/**
+ * Возвращает `true`, если поддерживается `input[type="date"]`
+ */
+declare function isInputDateSupported(): boolean;
+declare const isValidInputValue: (newInputValue: string | undefined, minDate: number | undefined, maxDate: number | undefined, offDays?: Array<number | Date>) => boolean;
+export { DATE_FORMAT, NATIVE_DATE_FORMAT, DATE_MASK, IS_BROWSER, SUPPORTS_INPUT_TYPE_DATE, formatDate, parseDateString, isInputDateSupported, isValidInputValue };

package/esm/typings-5684a67d.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+type SpecialDays = Record<number, boolean>;
+type DayAddons = {
+    date: Date | number;
+    addon: ReactNode;
+};
+type SpecialDaysAddon = Record<number, ReactNode>;
+type Day = {
+    date: Date;
+    disabled?: boolean;
+    event?: boolean;
+    selected?: boolean;
+    holiday?: boolean;
+    dayAddon?: ReactNode;
+};
+type Month = {
+    date: Date;
+    disabled?: boolean;
+};
+type DateShift = 'prev' | 'prevWeek' | 'prevMonth' | 'startOfWeek' | 'next' | 'nextWeek' | 'nextMonth' | 'endOfWeek';
+type View = 'years' | 'months' | 'days';
+type SelectorView = 'month-only' | 'full';
+export { SpecialDays, DayAddons, SpecialDaysAddon, Day, Month, DateShift, View, SelectorView };

package/esm/typings-9211a437.d.ts

@@ -0,0 +1,95 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type ComponentProps = {
+    /**
+     * Тип кнопки
+     * @default secondary
+     */
+    view?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Размер компонента
+     * @default m
+     */
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    /**
+     * Растягивает компонент на ширину контейнера
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
+    /**
+     * Выводит ссылку в виде кнопки
+     */
+    href?: string;
+    /**
+     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
+     */
+    Component?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Не переносить текст кнопки на новую строку
+     * @default false
+     */
+    nowrap?: boolean;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Основные стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap: StyleColors;
+};
+type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type BaseButtonProps = Partial<AnchorBaseButtonProps | NativeBaseButtonProps>;
+type AnchorButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & AnchorHTMLAttributes<HTMLAnchorElement>;
+type NativeButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & ButtonHTMLAttributes<HTMLButtonElement>;
+type ButtonProps = Partial<AnchorButtonProps | NativeButtonProps> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+export { StyleColors, ComponentProps, AnchorBaseButtonProps, NativeBaseButtonProps, BaseButtonProps, AnchorButtonProps, NativeButtonProps, ButtonProps };

package/esm/useCalendar-71d94e2b.d.ts

@@ -0,0 +1,97 @@
+/// <reference types="react" />
+import { KeyboardEvent, MouseEvent, Ref } from 'react';
+import { Day, DayAddons, Month, View } from "./typings-5684a67d";
+type UseCalendarProps = {
+    /**
+     * Активный вид (выбор дней, месяцев, лет)
+     */
+    view?: View;
+    /**
+     * Выбранный месяц (controlled)
+     */
+    month?: Date;
+    /**
+     * Начальный месяц
+     */
+    defaultMonth: Date;
+    /**
+     * Минимальная дата, доступная для выбора
+     */
+    minDate?: Date;
+    /**
+     * Максимальная дата, доступная для выбора
+     */
+    maxDate?: Date;
+    /**
+     * Выбранная дата
+     */
+    selected?: Date;
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+    /**
+     * Список отключенных для выбора дней
+     */
+    offDays?: Array<Date | number>;
+    /**
+     * Список выходных дней
+     */
+    holidays?: Array<Date | number>;
+    /**
+     * Обработчик изменения месяца (или года)
+     */
+    onMonthChange?: (month: number) => void;
+    /**
+     * Обработчик выбора даты
+     */
+    onChange?: (date: number) => void;
+    /**
+     * Дополнительный контент под числом
+     */
+    dayAddons?: DayAddons[];
+};
+declare function useCalendar({ defaultMonth, month, minDate, view, maxDate, selected, events, offDays, holidays, dayAddons, onMonthChange, onChange, }: UseCalendarProps): {
+    activeMonth: Date;
+    weeks: Day[][];
+    months: Month[];
+    years: Date[];
+    canSetPrevMonth: boolean;
+    canSetNextMonth: boolean;
+    highlighted: number | Date | undefined;
+    setPrevMonth: () => void;
+    setNextMonth: () => void;
+    setMonthByDate: (newMonth: Date) => void;
+    getDayProps: (day: Day) => {
+        'data-date': number;
+        'aria-selected': boolean | undefined;
+        ref: (node: HTMLTableDataCellElement) => void;
+        tabIndex: number;
+        onMouseEnter: (event: MouseEvent<HTMLTableDataCellElement>) => void;
+        onMouseLeave: () => void;
+        onClick: (event: MouseEvent<HTMLTableDataCellElement>) => void;
+    };
+    getMonthProps: (currMonth: Month) => {
+        'data-date': number;
+        'aria-selected': boolean;
+        ref: (node: HTMLButtonElement) => void;
+        tabIndex: number;
+        disabled: boolean | undefined;
+        onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    };
+    getYearProps: (year: Date) => {
+        'data-date': number;
+        'aria-selected': boolean;
+        ref: (node: HTMLButtonElement) => void;
+        tabIndex: number;
+        onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    };
+    getRootProps: ({ ref }: {
+        ref?: Ref<HTMLDivElement> | undefined;
+    }) => {
+        onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+        ref: (instance: HTMLDivElement | null) => void;
+        tabIndex: number;
+    };
+};
+export { UseCalendarProps, useCalendar };