@alfalab/core-components 42.0.0-beta.0 → 42.0.0-beta.2

package/calendar-input/esm/index.d.ts

@@ -1,3 +1,3 @@
-export { CalendarInputResponsive as CalendarInput } from "./responsive";
-export type { CalendarInputResponsiveProps as CalendarInputProps } from "./responsive";
-export * from "./utils";
+export { CalendarInputResponsive as CalendarInput } from "./Component.responsive";
+export type { CalendarInputResponsiveProps as CalendarInputProps } from "./Component.responsive";
+export {};

package/calendar-input/esm/index.js

@@ -1,17 +1,19 @@
 export { CalendarInputResponsive as CalendarInput } from './Component.responsive.js';
-export { DATE_FORMAT, DATE_MASK, IS_BROWSER, NATIVE_DATE_FORMAT, SUPPORTS_INPUT_TYPE_DATE, formatDate, isInputDateSupported, isValidInputValue, parseDateString } from './utils.js';
 import 'tslib';
 import 'react';
 import '@alfalab/hooks';
 import './Component.desktop.js';
+import '../../calendar/esm/desktop';
 import './components/calendar-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import '../../calendar/esm';
+import '../../calendar/esm/shared';
 import '../../date-input/esm';
 import '../../popover/esm';
 import '@alfalab/icons-glyph/CalendarMIcon';
-import './Component.mobile.js';
+import './utils.js';
 import 'date-fns/format';
 import 'date-fns/isSameDay';
 import 'date-fns/parse';
+import './Component.mobile.js';
+import '../../calendar/esm/mobile';

package/calendar-input/esm/mobile-c219f8ca.d.ts

@@ -0,0 +1 @@
+export * from "./Component-8b5756fe";

package/calendar-input/esm/mobile.js

@@ -1,10 +1,11 @@
 export { CalendarInputMobile } from './Component.mobile.js';
 import 'tslib';
 import 'react';
-import '../../calendar/esm';
+import '../../calendar/esm/mobile';
 import './components/calendar-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
+import '../../calendar/esm/shared';
 import '../../date-input/esm';
 import '../../popover/esm';
 import '@alfalab/icons-glyph/CalendarMIcon';

package/calendar-input/esm/shared-f034f741.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-5684a67d";
+export { useCalendar } from "./useCalendar-5684a67d";
+export * from "./index-f034f741";

package/calendar-input/esm/shared.d.ts

@@ -0,0 +1 @@
+export * from "./utils";

package/calendar-input/esm/shared.js

@@ -0,0 +1,6 @@
+export { DATE_FORMAT, DATE_MASK, IS_BROWSER, NATIVE_DATE_FORMAT, SUPPORTS_INPUT_TYPE_DATE, formatDate, isInputDateSupported, isValidInputValue, parseDateString } from './utils.js';
+import 'date-fns/format';
+import 'date-fns/isSameDay';
+import 'date-fns/parse';
+import '../../calendar/esm/shared';
+import '../../date-input/esm';

package/calendar-input/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/calendar-input/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/calendar-input/esm/useCalendar-5684a67d.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 };

package/calendar-input/esm/utils-5684a67d.d.ts

@@ -0,0 +1,88 @@
+import { ReactNode } from 'react';
+import { DateShift, Day, DayAddons, Month, SpecialDays, SpecialDaysAddon } from "./typings-5684a67d";
+declare const DAYS_IN_WEEK = 7;
+declare const MONTHS_IN_YEAR = 12;
+declare const SUNDAY_INDEX = 6;
+declare const DATE_FORMAT = "dd.MM.yyyy";
+declare const NATIVE_DATE_FORMAT = "yyyy-MM-dd";
+declare const WEEKDAYS: string[];
+declare const MONTHS: string[];
+/**
+ * Возвращает «правильный» индекс дня недели, 0 - пн, 1 - вт и так далее.
+ */
+declare function russianWeekDay(date: Date): number;
+/**
+ * Возвращает таблицу-календарь с заполненными датами для переданного месяца
+ */
+declare function generateWeeks(month: Date, options: {
+    minDate?: Date;
+    maxDate?: Date;
+    selected?: Date;
+    eventsMap?: SpecialDays;
+    offDaysMap?: SpecialDays;
+    holidaysMap?: SpecialDays;
+    dayAddonsMap?: SpecialDaysAddon;
+}): Day[][];
+/**
+ * Возвращает массив с месяцами для переданного года
+ */
+declare function generateMonths(year: Date, options: {
+    minMonth?: Date;
+    maxMonth?: Date;
+}): Month[];
+/**
+ * Возвращает массив лет от minYear до maxYear
+ */
+declare function generateYears(minYear: Date, maxYear: Date): Date[];
+/**
+ * Добавляет метаданные для переданного дня
+ */
+declare function buildDay(day: Date, options: {
+    minDate?: Date;
+    maxDate?: Date;
+    selected?: Date;
+    eventsMap?: SpecialDays;
+    offDaysMap?: SpecialDays;
+    holidaysMap?: SpecialDays;
+    dayAddonsMap?: SpecialDaysAddon;
+}): Day;
+/**
+ * Добавляет метаданные для переданного месяца
+ */
+declare function buildMonth(month: Date, options: {
+    minMonth?: Date;
+    maxMonth?: Date;
+}): Month;
+/**
+ * Ограничивает дату на отрезке [minDate, maxDate]
+ */
+declare function limitDate(date: Date | number, minDate?: Date | number, maxDate?: Date | number): Date;
+/**
+ * Проверяет, находится ли переданная дата в указанных границах
+ */
+declare function dateInLimits(date?: Date | number | null, minDate?: Date | number, maxDate?: Date | number): boolean | 0 | null | undefined;
+/**
+ * Возвращает русское название месяца с большой буквы
+ */
+declare function monthName(month: Date): string;
+/**
+ * Превращает массив в объект, у которого ключи составляются из элементов массива
+ */
+declare function dateArrayToHashTable(arr: Array<Date | number>): Record<number, boolean>;
+declare function addonArrayToHashTable(arr: DayAddons[]): Record<number, ReactNode>;
+/**
+ * Возвращает корректный отрезок дат для выделения
+ */
+declare function getSelectionRange(from?: Date | number, to?: Date | number, highlighted?: Date | number): {
+    start: Date;
+    end: Date;
+} | null;
+declare function modifyDateByShift(shift: DateShift, date: Date, minDate?: Date, maxDate?: Date, offDaysMap?: Record<number, boolean>): Date;
+/**
+ * Если дата была выбрана мышкой — фокусную обводку не видно
+ * TODO: добавить в useFocus возможность переключать метод ввода программно
+ */
+declare function simulateTab(node: HTMLElement): void;
+declare const formatDate: (date: Date | number, dateFormat?: string) => string;
+declare const parseDateString: (value: string, dateFormat?: string) => Date;
+export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, DATE_FORMAT, NATIVE_DATE_FORMAT, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, addonArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab, formatDate, parseDateString };

package/calendar-input/esm/utils.js

@@ -1,7 +1,7 @@
 import format from 'date-fns/format';
 import isSameDay from 'date-fns/isSameDay';
 import parse from 'date-fns/parse';
-import { dateInLimits } from '../../calendar/esm';
+import { dateInLimits } from '../../calendar/esm/shared';
 import { isCompleteDateInput } from '../../date-input/esm';
 
 var DATE_FORMAT = 'dd.MM.yyyy';

package/calendar-input/index-89a3cf4c.d.ts

@@ -0,0 +1,3 @@
+declare const isClient: () => boolean;
+declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+export { isClient, getDataTestId };

package/calendar-input/index-9211a437.d.ts

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

package/calendar-input/index-ebda875c.d.ts

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

package/calendar-input/index-f034f741.d.ts

@@ -0,0 +1,80 @@
+import { FC, MouseEvent } from "react";
+type PeriodType = "range" | "day" | "week" | "month" | "quarter" | "year";
+type PeriodSliderProps = {
+    /**
+     * Активная дата или период
+     */
+    value?: Date | [
+        Date,
+        Date
+    ];
+    /**
+     * Тип периода
+     */
+    periodType?: PeriodType;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Отключает кнопку назад
+     */
+    prevArrowDisabled?: boolean;
+    /**
+     * Отключает кнопку вперед
+     */
+    nextArrowDisabled?: boolean;
+    /**
+     * Скрывает заблокированные кнопки
+     */
+    hideDisabledArrows?: boolean;
+    /**
+     * Возможность выбора месяца и года, если periodType 'month'
+     */
+    isMonthAndYearSelectable?: boolean;
+    /**
+     * Отображать ли текущий год, если isMonthAndYearSelectable true
+     */
+    showCurrentYearSelector?: boolean;
+    /**
+     * Функция для форматирование выбранного периода
+     */
+    periodFormatter?: (valueFrom: Date, valueTo: Date, periodType: PeriodType) => string;
+    /**
+     * Обработчик нажатия кнопки переключения на назад
+     */
+    onPrevArrowClick?: (event: MouseEvent<HTMLButtonElement>, payload: {
+        value: Date;
+        valueFrom: Date;
+        valueTo: Date;
+        periodType: PeriodType;
+    }) => void;
+    /**
+     * Обработчик нажатия кнопки переключения на вперед
+     */
+    onNextArrowClick?: (event: MouseEvent<HTMLButtonElement>, payload: {
+        value: Date;
+        valueFrom: Date;
+        valueTo: Date;
+        periodType: PeriodType;
+    }) => void;
+    /**
+     * Обработчик нажатия на селектор месяца
+     */
+    onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на селектор года
+     */
+    onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия на период
+     */
+    onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const PeriodSlider: FC<PeriodSliderProps>;
+export { PeriodType, PeriodSliderProps, PeriodSlider };
+export { shiftValues } from "./Component.desktop-8b5756fe";

package/calendar-input/index.d.ts

@@ -1,3 +1,3 @@
-export { CalendarInputResponsive as CalendarInput } from "./responsive";
-export type { CalendarInputResponsiveProps as CalendarInputProps } from "./responsive";
-export * from "./utils";
+export { CalendarInputResponsive as CalendarInput } from "./Component.responsive";
+export type { CalendarInputResponsiveProps as CalendarInputProps } from "./Component.responsive";
+export {};

package/calendar-input/index.js

@@ -1,32 +1,25 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component_responsive = require('./Component.responsive.js');
-var utils = require('./utils.js');
 require('tslib');
 require('react');
 require('@alfalab/hooks');
 require('./Component.desktop.js');
+require('../calendar/desktop');
 require('./components/calendar-input/Component.js');
 require('react-merge-refs');
 require('classnames');
-require('../calendar');
+require('../calendar/shared');
 require('../date-input');
 require('../popover');
 require('@alfalab/icons-glyph/CalendarMIcon');
-require('./Component.mobile.js');
+require('./utils.js');
 require('date-fns/format');
 require('date-fns/isSameDay');
 require('date-fns/parse');
+require('./Component.mobile.js');
+require('../calendar/mobile');
 
 
 
 exports.CalendarInput = Component_responsive.CalendarInputResponsive;
-exports.DATE_FORMAT = utils.DATE_FORMAT;
-exports.DATE_MASK = utils.DATE_MASK;
-exports.IS_BROWSER = utils.IS_BROWSER;
-exports.NATIVE_DATE_FORMAT = utils.NATIVE_DATE_FORMAT;
-exports.SUPPORTS_INPUT_TYPE_DATE = utils.SUPPORTS_INPUT_TYPE_DATE;
-exports.formatDate = utils.formatDate;
-exports.isInputDateSupported = utils.isInputDateSupported;
-exports.isValidInputValue = utils.isValidInputValue;
-exports.parseDateString = utils.parseDateString;

package/calendar-input/mobile-c219f8ca.d.ts

@@ -0,0 +1 @@
+export * from "./Component-8b5756fe";

package/calendar-input/mobile.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var Component_mobile = require('./Component.mobile.js');
 require('tslib');
 require('react');
-require('../calendar');
+require('../calendar/mobile');
 require('./components/calendar-input/Component.js');
 require('react-merge-refs');
 require('classnames');
+require('../calendar/shared');
 require('../date-input');
 require('../popover');
 require('@alfalab/icons-glyph/CalendarMIcon');