@gravity-ui/date-components 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 YANDEX LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,15 @@
+# @gravity-ui/date-components · [![npm package](https://img.shields.io/npm/v/@gravity-ui/date-components)](https://www.npmjs.com/package/@gravity-ui/date-components) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/date-components/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/date-components/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/date-components/)
+
+## Install
+
+```shell
+npm install --save-dev @gravity-ui/uikit @gravity-ui/date-components
+```
+
+## Development
+
+To start the development server with storybook run the following:
+
+```shell
+npm start
+```

package/dist/cjs/components/Calendar/Calendar.css

@@ -0,0 +1,220 @@
+.g-date-calendar {
+  --_--calendar-padding: var(--g-date-calendar-padding, 8px);
+  --_--calendar-day-size: var(--g-date-calendar-day-size, 28px);
+  --_--calendar-days-gap: var(--g-date-calendar-days-gap, 2px);
+  --_--calendar-width: calc(
+      7 * var(--_--calendar-day-size) + 6 * var(--_--calendar-days-gap) + 2 *
+          var(--_--calendar-padding)
+  );
+  --_--calendar-grid-height: calc(
+      7 * var(--_--calendar-day-size) + 5 * var(--_--calendar-days-gap) +
+          var(--_--calendar-padding)
+  );
+  display: inline-block;
+  width: var(--_--calendar-width);
+}
+.g-date-calendar_size_l {
+  --g-date-calendar-day-size: 36px;
+}
+.g-date-calendar_size_xl {
+  --g-date-calendar-day-size: 42px;
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}
+.g-date-calendar__header {
+  display: flex;
+  padding: var(--_--calendar-padding) var(--_--calendar-padding) 0;
+}
+.g-date-calendar__years-label {
+  color: var(--g-color-text-secondary);
+}
+.g-date-calendar__controls {
+  margin-left: auto;
+}
+.g-date-calendar__grid {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: var(--_--calendar-grid-height);
+  user-select: none;
+}
+.g-date-calendar__content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: grid;
+  grid-template-rows: var(--_--calendar-day-size) 1fr;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 0 var(--_--calendar-padding) var(--_--calendar-padding);
+}
+.g-date-calendar__content_animation_forward {
+  transform: translateX(-100%);
+  animation: calendar-forward 0.25s ease forwards;
+}
+.g-date-calendar__content_animation_forward.g-date-calendar__current-state {
+  left: -100%;
+}
+.g-date-calendar__content_animation_backward {
+  transform: translateX(0);
+  animation: calendar-backward 0.25s ease forwards;
+}
+.g-date-calendar__content_animation_backward.g-date-calendar__current-state {
+  left: 100%;
+}
+.g-date-calendar__content_animation_zoom-in {
+  transform: scale();
+}
+.g-date-calendar__content_animation_zoom-in.g-date-calendar__previous-state {
+  animation: calendar-zoom-in-hiding 0.25s ease forwards;
+}
+.g-date-calendar__content_animation_zoom-in.g-date-calendar__current-state {
+  animation: calendar-zoom-in-showing 0.25s ease forwards;
+}
+.g-date-calendar__content_animation_zoom-out {
+  transform: scale();
+}
+.g-date-calendar__content_animation_zoom-out.g-date-calendar__current-state {
+  animation: calendar-zoom-out-showing 0.25s ease forwards;
+}
+.g-date-calendar__content_animation_zoom-out.g-date-calendar__previous-state {
+  animation: calendar-zoom-out-hiding 0.25s ease forwards;
+}
+@keyframes calendar-forward {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes calendar-backward {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+@keyframes calendar-zoom-in-showing {
+  from {
+    opacity: 0;
+    transform: scale(2);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes calendar-zoom-in-hiding {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+@keyframes calendar-zoom-out-showing {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes calendar-zoom-out-hiding {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(2);
+  }
+}
+.g-date-calendar__grid-rowgroup {
+  display: grid;
+  gap: var(--_--calendar-days-gap);
+}
+.g-date-calendar__grid-rowgroup_mode_months, .g-date-calendar__grid-rowgroup_mode_years {
+  grid-row: 1/-1;
+  padding: 12px 0 0;
+}
+.g-date-calendar__grid-row {
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+  gap: var(--_--calendar-days-gap);
+}
+.g-date-calendar__weekday {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.g-date-calendar__weekday_weekend {
+  color: var(--g-color-text-danger);
+}
+.g-date-calendar__button {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  font-weight: var(--g-text-subheader-font-weight);
+  cursor: pointer;
+  border-radius: 4px;
+  outline: none;
+}
+.g-date-calendar__button:focus {
+  box-shadow: 0 0 0 2px var(--g-color-line-misc);
+}
+.g-date-calendar__button:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+.g-date-calendar__button:hover {
+  background-color: var(--g-color-base-generic);
+}
+.g-date-calendar__button_selected[class] {
+  background-color: var(--g-color-base-selection);
+}
+.g-date-calendar__button_selected.g-date-calendar__button_selection-start, .g-date-calendar__button_selected.g-date-calendar__button_selection-end {
+  background-color: var(--g-color-base-brand);
+}
+.g-date-calendar__button_weekend {
+  color: var(--g-color-text-danger);
+}
+.g-date-calendar__button_out-of-boundary {
+  font-weight: var(--g-text-body-font-weight);
+  opacity: 0.6;
+}
+.g-date-calendar__button_current::before {
+  position: absolute;
+  top: 50%;
+  display: block;
+  width: 4px;
+  height: 4px;
+  content: "";
+  border-radius: 50%;
+  background-color: var(--g-color-text-primary);
+  transform: translateY(8px);
+}
+.g-date-calendar__button_disabled {
+  font-weight: var(--g-text-body-font-weight);
+  pointer-events: none;
+  opacity: 0.6;
+}
+.g-date-calendar__button_unavailable:not(.g-date-calendar__button_disabled) {
+  font-weight: var(--g-text-body-font-weight);
+  cursor: default;
+  opacity: 0.5;
+  background-color: var(--g-color-base-generic);
+}

package/dist/cjs/components/Calendar/Calendar.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { AccessibilityProps, DomProps, FocusEvents, StyleProps } from '../types';
+import type { CalendarInstance, CalendarSize } from './CalendarBase';
+import type { CalendarStateOptions } from './hooks/useCalendarState';
+import './Calendar.css';
+export interface CalendarProps extends CalendarStateOptions, DomProps, StyleProps, FocusEvents, AccessibilityProps {
+    /**
+     * The size of the element.
+     * @default m
+     */
+    size?: CalendarSize;
+}
+export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<CalendarInstance>>;

package/dist/cjs/components/Calendar/Calendar.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Calendar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const CalendarBase_1 = require("./CalendarBase");
+const useCalendarState_1 = require("./hooks/useCalendarState");
+require("./Calendar.css");
+exports.Calendar = react_1.default.forwardRef(function Calendar(props, ref) {
+    const state = (0, useCalendarState_1.useCalendarState)(props);
+    return (0, jsx_runtime_1.jsx)(CalendarBase_1.CalendarBase, Object.assign({ ref: ref }, props, { state: state }));
+});

package/dist/cjs/components/Calendar/CalendarBase.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { AccessibilityProps, DomProps, FocusEvents, StyleProps } from '../types';
+import type { RangeCalendarState } from './hooks/types';
+import type { CalendarState } from './hooks/useCalendarState';
+import './Calendar.css';
+export type CalendarSize = 'm' | 'l' | 'xl';
+export interface CalendarInstance {
+    focus: () => void;
+}
+export interface CalendarBaseProps extends DomProps, StyleProps, FocusEvents, AccessibilityProps {
+    state: CalendarState | RangeCalendarState;
+    /**
+     * The size of the element.
+     * @default m
+     */
+    size?: CalendarSize;
+}
+export declare const CalendarBase: React.ForwardRefExoticComponent<CalendarBaseProps & React.RefAttributes<CalendarInstance>>;

package/dist/cjs/components/Calendar/CalendarBase.js

@@ -0,0 +1,89 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarBase = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../utils/cn");
+const useCalendarCellProps_1 = require("./hooks/useCalendarCellProps");
+const useCalendarGridProps_1 = require("./hooks/useCalendarGridProps");
+const useCalendarProps_1 = require("./hooks/useCalendarProps");
+const utils_1 = require("./utils");
+require("./Calendar.css");
+const b = (0, cn_1.block)('calendar');
+exports.CalendarBase = react_1.default.forwardRef(function Calendar(props, ref) {
+    const { state } = props;
+    const { calendarProps, modeButtonProps, nextButtonProps, previousButtonProps } = (0, useCalendarProps_1.useCalendarProps)(props, state);
+    react_1.default.useImperativeHandle(ref, () => ({
+        focus() {
+            state.setFocused(true);
+        },
+    }));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, calendarProps, { className: b({ size: props.size }), children: [(0, jsx_runtime_1.jsxs)("div", { className: b('header'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, modeButtonProps, { view: "flat", size: props.size, children: state.mode === 'years' ? ((0, jsx_runtime_1.jsx)("span", { className: b('mode-label', b(`years-label`)), children: modeButtonProps.children }, "label")) : ([
+                            (0, jsx_runtime_1.jsx)("span", { className: b('mode-label'), children: modeButtonProps.children }, "label"),
+                            (0, jsx_runtime_1.jsx)(uikit_1.Button.Icon, { children: (0, jsx_runtime_1.jsx)(uikit_1.ArrowToggle, { direction: "bottom" }) }, "icon"),
+                        ]) })), (0, jsx_runtime_1.jsxs)("div", { className: b('controls'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, previousButtonProps, { view: "flat", size: props.size, children: (0, jsx_runtime_1.jsx)(uikit_1.Button.Icon, { children: (0, jsx_runtime_1.jsx)(uikit_1.ArrowToggle, { direction: "left" }) }) })), (0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, nextButtonProps, { view: "flat", size: props.size, children: (0, jsx_runtime_1.jsx)(uikit_1.Button.Icon, { children: (0, jsx_runtime_1.jsx)(uikit_1.ArrowToggle, { direction: "right" }) }) }))] })] }), (0, jsx_runtime_1.jsx)(CalendarGrid, { state: state })] })));
+});
+function CalendarGrid({ state }) {
+    const [prevState, setPrevState] = react_1.default.useState(() => (Object.assign(Object.assign({}, state), { isFocused: false })));
+    const modeChanged = state.mode !== prevState.mode;
+    const startDateChanged = !state.startDate.isSame(prevState.startDate, 'days');
+    let animation;
+    if (modeChanged) {
+        if ((state.mode === 'days' && prevState.mode === 'months') ||
+            (state.mode === 'months' && prevState.mode === 'years')) {
+            animation = 'zoom-out';
+        }
+        else {
+            animation = 'zoom-in';
+        }
+    }
+    else if (startDateChanged) {
+        if (state.startDate.isBefore(prevState.startDate)) {
+            animation = 'forward';
+        }
+        else {
+            animation = 'backward';
+        }
+    }
+    const { gridProps } = (0, useCalendarGridProps_1.useCalendarGridProps)(state);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: b('grid') }, gridProps, { children: [animation && ((0, jsx_runtime_1.jsx)(Content, { className: b('previous-state'), state: prevState, animation: animation })), (0, jsx_runtime_1.jsx)(Content, { className: b('current-state'), state: state, animation: animation, onAnimationEnd: () => {
+                    setPrevState(Object.assign(Object.assign({}, state), { isFocused: false }));
+                } }, "current")] })));
+}
+function Content({ className, state, animation, onAnimationEnd }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b('content', { animation }, className), onAnimationEnd: onAnimationEnd, role: "presentation", children: [state.mode === 'days' && (0, jsx_runtime_1.jsx)(Weekdays, { state: state }), (0, jsx_runtime_1.jsx)(CalendarGridCells, { state: state })] }));
+}
+function Weekdays({ state }) {
+    const weekdays = (0, utils_1.getWeekDays)();
+    return ((0, jsx_runtime_1.jsx)("div", { className: b('grid-row'), role: "row", children: weekdays.map((date) => {
+            return ((0, jsx_runtime_1.jsx)("div", { className: b('weekday', { weekend: state.isWeekend(date) }), role: "columnheader", "aria-label": date.format('dddd'), children: date.format('dd') }, date.day()));
+        }) }));
+}
+function CalendarGridCells({ state }) {
+    const rowsInPeriod = state.mode === 'days' ? 6 : 4;
+    const columnsInRow = state.mode === 'days' ? 7 : 3;
+    const days = (0, utils_1.getDaysInPeriod)(state.startDate, state.endDate, state.mode);
+    return ((0, jsx_runtime_1.jsx)("div", { className: b('grid-rowgroup', { mode: state.mode }), role: "rowgroup", children: [...new Array(rowsInPeriod).keys()].map((rowIndex) => ((0, jsx_runtime_1.jsx)("div", { className: b('grid-row'), role: "row", children: days
+                .slice(rowIndex * columnsInRow, (rowIndex + 1) * columnsInRow)
+                .map((date) => {
+                return (0, jsx_runtime_1.jsx)(CalendarCell, { date: date, state: state }, date.unix());
+            }) }, rowIndex))) }));
+}
+function CalendarCell({ date, state }) {
+    const { cellProps, buttonProps, formattedDate, isDisabled, isSelected, isRangeSelection, isSelectionStart, isSelectionEnd, isOutsideCurrentRange, isUnavailable, isCurrent, isWeekend, } = (0, useCalendarCellProps_1.useCalendarCellProps)(date, state);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, cellProps, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, buttonProps, { className: b('button', {
+                disabled: isDisabled,
+                selected: isSelected,
+                'range-selection': isRangeSelection,
+                'selection-start': isSelectionStart,
+                'selection-end': isSelectionEnd,
+                'out-of-boundary': isOutsideCurrentRange,
+                unavailable: isUnavailable,
+                current: isCurrent,
+                weekend: isWeekend,
+            }), children: formattedDate })) })));
+}

package/dist/cjs/components/Calendar/RangeCalendar.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { AccessibilityProps, DomProps, FocusEvents, StyleProps } from '../types';
+import type { CalendarInstance, CalendarSize } from './CalendarBase';
+import type { RangeCalendarStateOptions } from './hooks/useRangeCalendarState';
+import './Calendar.css';
+export interface RangeCalendarProps extends RangeCalendarStateOptions, DomProps, StyleProps, FocusEvents, AccessibilityProps {
+    /**
+     * The size of the element.
+     * @default m
+     */
+    size?: CalendarSize;
+}
+export declare const RangeCalendar: React.ForwardRefExoticComponent<RangeCalendarProps & React.RefAttributes<CalendarInstance>>;

package/dist/cjs/components/Calendar/RangeCalendar.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RangeCalendar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const CalendarBase_1 = require("./CalendarBase");
+const useRangeCalendarState_1 = require("./hooks/useRangeCalendarState");
+require("./Calendar.css");
+exports.RangeCalendar = react_1.default.forwardRef(function Calendar(props, ref) {
+    const state = (0, useRangeCalendarState_1.useRangeCalendarState)(props);
+    const handleBlur = (e) => {
+        var _a;
+        if (state.anchorDate) {
+            state.selectFocusedDate();
+        }
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
+    return (0, jsx_runtime_1.jsx)(CalendarBase_1.CalendarBase, Object.assign({ ref: ref }, props, { state: state, onBlur: handleBlur }));
+});

package/dist/cjs/components/Calendar/hooks/types.d.ts

@@ -0,0 +1,124 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { InputBase, RangeValue } from '../../types';
+export type CalendarLayout = 'days' | 'months' | 'years';
+export interface CalendarStateOptionsBase extends InputBase {
+    /** The minimum allowed date that a user may select. */
+    minValue?: DateTime;
+    /** The maximum allowed date that a user may select. */
+    maxValue?: DateTime;
+    /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */
+    isDateUnavailable?: (date: DateTime) => boolean;
+    /** */
+    timeZone?: string;
+    /**
+     * Whether to automatically focus the calendar when it mounts.
+     * @default false
+     */
+    autoFocus?: boolean;
+    /** Controls the currently focused date within the calendar. */
+    focusedValue?: DateTime | null;
+    /** The date that is focused when the calendar first mounts (uncontrolled). */
+    defaultFocusedValue?: DateTime;
+    /** Handler that is called when the focused date changes. */
+    onFocusUpdate?: (date: DateTime) => void;
+    /** Controls what to show in calendar (days, months or years) */
+    mode?: CalendarLayout;
+    /** Initial mode to show in calendar (days, months or years) */
+    defaultMode?: CalendarLayout;
+    /** Handler that is called when the mode changes */
+    onUpdateMode?: (mode: CalendarLayout) => void;
+}
+interface CalendarStateBase {
+    /** Whether the calendar is disabled. */
+    readonly disabled?: boolean;
+    /** Whether the calendar is in a read only state. */
+    readonly readOnly?: boolean;
+    readonly timeZone?: string;
+    /** The minimum allowed date that a user may select. */
+    readonly minValue?: DateTime;
+    /** The maximum allowed date that a user may select. */
+    readonly maxValue?: DateTime;
+    /** The currently focused date. */
+    readonly focusedDate: DateTime;
+    /** Sets the focused date. */
+    setFocusedDate(date: DateTime): void;
+    /** Selects the currently focused date. */
+    selectFocusedDate(): void;
+    /** Selects the given date. */
+    selectDate(date: DateTime): void;
+    /** Moves focus to the next calendar date. */
+    focusNextCell(): void;
+    /** Moves focus to the previous calendar date. */
+    focusPreviousCell(): void;
+    /** Moves focus to the next row of dates, e.g. the next week. */
+    focusNextRow(): void;
+    /** Moves focus to the previous row of dates, e.g. the previous work. */
+    focusPreviousRow(): void;
+    /**
+     * Moves focus to the next page of dates, e.g. the next month.
+     * If the `larger` option is `true`, the focus is moved by the next larger unit.
+     * For example, if days are displayed, then focus moves to the next year.
+     */
+    focusNextPage(larger?: boolean): void;
+    /**
+     * Moves focus to the previous page of dates, e.g. the previous month.
+     * If the `larger` option is `true`, the focus is moved by the next larger unit.
+     * For example, if days are displayed, then focus moves to the previous year.
+     */
+    focusPreviousPage(larger?: boolean): void;
+    /** Moves focus to the start of the current section of dates, e.g. the start of the current month. */
+    focusSectionStart(): void;
+    /** Moves focus to the end of the current section of dates, e.g. the end of the current month month. */
+    focusSectionEnd(): void;
+    /** Switches to more detailed layout. */
+    zoomIn(): void;
+    /** Switches to less detailed layout. */
+    zoomOut(): void;
+    /** Whether focus is currently within the calendar. */
+    readonly isFocused: boolean;
+    /** Sets whether focus is currently within the calendar. */
+    setFocused(isFocused: boolean): void;
+    /** Returns whether the given date is invalid according to the `minValue` and `maxValue` props. */
+    isInvalid(date: DateTime): boolean;
+    /** Returns whether the previous page is allowed to be selected according to the `minValue` prop. */
+    isPreviousPageInvalid(): boolean;
+    /** Returns whether the next page is allowed to be selected according to the `maxValue` prop. */
+    isNextPageInvalid(): boolean;
+    /** Returns whether the given date is currently selected. */
+    isSelected(date: DateTime): boolean;
+    /** Returns whether the given date is unavailable according to the `isDateUnavailable` prop. */
+    isCellUnavailable(date: DateTime): boolean;
+    /** Returns whether the given date is currently focused. */
+    isCellFocused(date: DateTime): boolean;
+    /** Returns whether the given date is disabled according to the `minValue, `maxValue`, and `isDisabled` props. */
+    isCellDisabled(date: DateTime): boolean;
+    /** Returns whether the given date is weekend */
+    isWeekend(date: DateTime): boolean;
+    /** Current calendar layout */
+    readonly mode: CalendarLayout;
+    /** Sets calendar layout */
+    setMode(mode: CalendarLayout): void;
+    readonly startDate: DateTime;
+    readonly endDate: DateTime;
+}
+export interface CalendarState extends CalendarStateBase {
+    /** The currently selected date. */
+    readonly value?: DateTime | null;
+    /** Sets the currently selected date. */
+    setValue(value: DateTime): void;
+}
+export interface RangeCalendarState extends CalendarStateBase {
+    /** The currently selected range. */
+    readonly value?: RangeValue<DateTime> | null;
+    /** Sets the currently selected range. */
+    setValue(value: RangeValue<DateTime>): void;
+    /** The current anchor date that the user clicked on to begin range selection. */
+    readonly anchorDate: DateTime | undefined;
+    /** Sets the anchor date that the user clicked on to begin range selection. */
+    setAnchorDate(date: DateTime | undefined): void;
+    /** The currently highlighted date range. */
+    readonly highlightedRange: RangeValue<DateTime> | undefined;
+    /** Highlights the given date during selection, e.g. by hovering. */
+    highlightDate(date: DateTime): void;
+}
+export {};

package/dist/cjs/components/Calendar/hooks/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/Calendar/hooks/useCalendarCellProps.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { CalendarState, RangeCalendarState } from './types';
+export declare function useCalendarCellProps(date: DateTime, state: CalendarState | RangeCalendarState): {
+    cellProps: React.HTMLAttributes<unknown>;
+    buttonProps: React.HTMLAttributes<unknown> & {
+        ref: React.Ref<HTMLDivElement>;
+    };
+    formattedDate: string;
+    isDisabled: boolean;
+    isSelected: boolean;
+    isRangeSelection: boolean;
+    isSelectionStart: boolean | undefined;
+    isSelectionEnd: boolean | undefined;
+    isOutsideCurrentRange: boolean;
+    isUnavailable: boolean;
+    isCurrent: boolean;
+    isWeekend: boolean;
+};