@cloud-ru/ds-calendar 1.0.0

package/dist/cjs/helperComponents/Header/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Header"), exports);

package/dist/cjs/helperComponents/Header/styles.module.css

@@ -0,0 +1,28 @@
+.header{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  align-self:stretch;
+  justify-content:space-between;
+  box-sizing:border-box;
+}
+.header[data-size=s]{
+  padding-left:var(--sn-calendar-anatomy-size-s-header-paddingHorizontal, var(--sn-primitive-dimension-6, 6px));
+  padding-right:var(--sn-calendar-anatomy-size-s-header-paddingHorizontal, var(--sn-primitive-dimension-6, 6px));
+  height:var(--sn-calendar-anatomy-size-s-header-height, var(--sn-primitive-dimension-32, 32px));
+}
+.header[data-size=m]{
+  padding-left:var(--sn-calendar-anatomy-size-m-header-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
+  padding-right:var(--sn-calendar-anatomy-size-m-header-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
+  height:var(--sn-calendar-anatomy-size-m-header-height, var(--sn-primitive-dimension-40, 40px));
+}
+.header[data-size=l]{
+  padding-left:var(--sn-calendar-anatomy-size-l-header-paddingHorizontal, var(--sn-primitive-dimension-12, 12px));
+  padding-right:var(--sn-calendar-anatomy-size-l-header-paddingHorizontal, var(--sn-primitive-dimension-12, 12px));
+  height:var(--sn-calendar-anatomy-size-l-header-height, var(--sn-primitive-dimension-56, 56px));
+}
+
+.scrollControlWrapper{
+  display:flex;
+  align-items:center;
+}

package/dist/cjs/helperComponents/Header/utils.d.ts

@@ -0,0 +1,2 @@
+import { ViewMode } from '../../types';
+export declare const getShift: (referenceDate: Date, viewDate: Date, currentViewLevel: ViewMode) => number;

package/dist/cjs/helperComponents/Header/utils.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getShift = void 0;
+const constants_1 = require("../../constants");
+const utils_1 = require("../../utils");
+const getShift = (referenceDate, viewDate, currentViewLevel) => {
+    switch (currentViewLevel) {
+        case constants_1.VIEW_MODE.Month:
+            return (0, utils_1.getYearShift)(referenceDate, viewDate);
+        case constants_1.VIEW_MODE.Year:
+            return (0, utils_1.getDecadeShift)(referenceDate, viewDate);
+        case constants_1.VIEW_MODE.Decade:
+        default:
+            return 0;
+    }
+};
+exports.getShift = getShift;

package/dist/cjs/helperComponents/Item/Item.d.ts

@@ -0,0 +1,21 @@
+import { Cell, Size } from '../../types';
+type RequiredCellProps = Pick<Cell, 'label'>;
+type OptionalCellProps = Partial<Omit<Cell, 'label'>>;
+export type CalendarItemProps = RequiredCellProps & OptionalCellProps & {
+    /**
+     * Сегмент для `data-test-id` (`getTestId(segment)`). По умолчанию `item`;
+     * подписи дней недели в `WeekRow` используют `header-item`.
+     */
+    testIdSegment?: string;
+    /** Размер */
+    size: Size;
+    /**
+     * Отображается ли в интерфейсе (ячейка без содержимого для мобильной сетки)
+     * @default true
+     */
+    visible?: boolean;
+    /** CSS-класс */
+    className?: string;
+};
+export declare function Item({ label, testIdSegment, size, checked, rangePosition, disabled, holiday, another, current, visible, className, tabIndex, address, date, onSelect, onPreselect, onLeave, onKeyDown, }: CalendarItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/helperComponents/Item/Item.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Item = Item;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const utils_2 = require("../../utils");
+const hooks_2 = require("./hooks");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function Item({ label, testIdSegment, size, checked, rangePosition = constants_1.RANGE_POSITION.Out, disabled, holiday, another, current, visible = true, className, tabIndex, address, date, onSelect, onPreselect, onLeave, onKeyDown, }) {
+    const ref = (0, react_1.useRef)(null);
+    const { focus, setFocus, getTestId } = (0, hooks_1.useCalendarContext)();
+    const dataTestId = getTestId(testIdSegment ?? 'item');
+    const navigationEnabled = Boolean(address);
+    const keyDownHandler = (0, hooks_2.useKeyboardFocus)({
+        address: address ?? [0, 0],
+        onKeyDown,
+        enabled: navigationEnabled,
+    });
+    (0, utils_1.useLayoutEffect)(() => {
+        if (!address) {
+            return;
+        }
+        if ((0, utils_2.stringifyAddress)(address) === focus) {
+            // preventScroll: ячейка всегда видна в открытом календаре; без него браузер при
+            // программном focus прокручивает страницу к ячейке (виден как «скролл от стрелок»).
+            (0, utils_1.focusWithoutScroll)(ref.current);
+        }
+    }, [focus, address]);
+    (0, utils_1.useLayoutEffect)(() => {
+        if (!address) {
+            return;
+        }
+        if (tabIndex === 0 && focus === constants_1.AUTOFOCUS) {
+            (0, utils_1.focusWithoutScroll)(ref.current);
+        }
+    }, [focus, tabIndex, address]);
+    const attributes = {
+        'data-size': size,
+        'data-visible': visible || undefined,
+        'data-checked': checked || undefined,
+        'data-disabled': disabled || undefined,
+        'data-another': another || undefined,
+        'data-holiday': holiday || undefined,
+        'data-current': current || undefined,
+        'data-range-position': rangePosition,
+    };
+    const handleSelect = () => {
+        if (!disabled && date && onSelect) {
+            onSelect(date);
+        }
+    };
+    const showMarker = !disabled && !another && visible && current;
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), ...attributes, children: (0, jsx_runtime_1.jsxs)("button", { type: 'button', "aria-disabled": disabled, className: styles_module_scss_1.default.container, onClick: handleSelect, onMouseEnter: () => !disabled && date && onPreselect?.(date), onFocus: () => {
+                if (address) {
+                    setFocus((0, utils_2.stringifyAddress)(address));
+                }
+                if (!disabled && date) {
+                    onPreselect?.(date);
+                }
+            }, onMouseLeave: onLeave, onBlur: () => {
+                if (address) {
+                    setFocus(undefined);
+                }
+                onLeave?.();
+            }, onKeyDown: keyDownHandler, ref: ref, "data-disabled": attributes['data-disabled'], "data-another": attributes['data-another'], "data-checked": attributes['data-checked'], "data-range-position": attributes['data-range-position'], ...(dataTestId ? { 'data-test-id': dataTestId } : {}), tabIndex: tabIndex, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.stateLayer, "data-state": checked && (!another || rangePosition !== constants_1.RANGE_POSITION.Out)
+                        ? 'activatedOnBackground'
+                        : 'emptyNeutralOnBackground' }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.labelWrapper, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.label, "data-disabled": attributes['data-disabled'], "data-another": attributes['data-another'], "data-checked": attributes['data-checked'], "data-range-position": attributes['data-range-position'], "data-holiday": attributes['data-holiday'], children: label }), showMarker && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.marker, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.markerLine, "data-checked": attributes['data-checked'], "data-range-position": attributes['data-range-position'], "data-holiday": attributes['data-holiday'] }) }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }) }));
+}

package/dist/cjs/helperComponents/Item/hooks.d.ts

@@ -0,0 +1,30 @@
+import { KeyboardEvent, KeyboardEventHandler } from 'react';
+/**
+ * Параметры хука {@link useKeyboardFocus}.
+ */
+type UseKeyboardFocusProps = {
+    /** Индекс строки и столбца `[row, column]` ячейки в сетке текущего представления (`viewMode`). */
+    address: [number, number];
+    /** Дополнительный обработчик клавиш; вызывается до встроенной навигации по сетке. */
+    onKeyDown?: KeyboardEventHandler;
+    /**
+     * Включить встроенную навигацию (стрелки, Tab по правилам контекста календаря).
+     * При `false` остаётся только вызов `onKeyDown` — например, если у ячейки нет адреса в сетке и перемещаться стрелками некуда.
+     */
+    enabled: boolean;
+};
+/**
+ * Возвращает мемоизированный обработчик `onKeyDown` для клавиатурной навигации по ячейкам сетки календаря.
+ *
+ * Сначала вызывается переданный `onKeyDown` (если есть). Затем при `enabled === true` обрабатываются:
+ * `ArrowLeft` / `ArrowRight` — сдвиг фокуса по колонкам в пределах текущего `viewMode`;
+ * `ArrowUp` / `ArrowDown` — сдвиг по строкам; на границе сетки меняется `viewShift` и фокус переносится на противоположную строку той же колонки;
+ * `Tab` без Shift — в режимах, отличных от месячного вида в `CALENDAR_MODE.DateTime`, вызывается `onFocusLeave('next')` для выхода из сетки.
+ *
+ * @param props.address Координаты ячейки `[row, column]` в сетке текущего представления.
+ * @param props.onKeyDown Дополнительный обработчик клавиш; выполняется до встроенной навигации.
+ * @param props.enabled При `false` встроенная навигация стрелками и Tab не выполняется (остаётся только вызов `onKeyDown`).
+ * @returns Обработчик `KeyboardEvent<HTMLButtonElement>` для привязки к ячейке.
+ */
+export declare function useKeyboardFocus({ address: [row, column], onKeyDown, enabled }: UseKeyboardFocusProps): (e: KeyboardEvent<HTMLButtonElement>) => void;
+export {};

package/dist/cjs/helperComponents/Item/hooks.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyboardFocus = useKeyboardFocus;
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const utils_2 = require("../../utils");
+/**
+ * Возвращает мемоизированный обработчик `onKeyDown` для клавиатурной навигации по ячейкам сетки календаря.
+ *
+ * Сначала вызывается переданный `onKeyDown` (если есть). Затем при `enabled === true` обрабатываются:
+ * `ArrowLeft` / `ArrowRight` — сдвиг фокуса по колонкам в пределах текущего `viewMode`;
+ * `ArrowUp` / `ArrowDown` — сдвиг по строкам; на границе сетки меняется `viewShift` и фокус переносится на противоположную строку той же колонки;
+ * `Tab` без Shift — в режимах, отличных от месячного вида в `CALENDAR_MODE.DateTime`, вызывается `onFocusLeave('next')` для выхода из сетки.
+ *
+ * @param props.address Координаты ячейки `[row, column]` в сетке текущего представления.
+ * @param props.onKeyDown Дополнительный обработчик клавиш; выполняется до встроенной навигации.
+ * @param props.enabled При `false` встроенная навигация стрелками и Tab не выполняется (остаётся только вызов `onKeyDown`).
+ * @returns Обработчик `KeyboardEvent<HTMLButtonElement>` для привязки к ячейке.
+ */
+function useKeyboardFocus({ address: [row, column], onKeyDown, enabled = true }) {
+    const { viewMode, viewShift, setViewShift, setFocus, onFocusLeave, mode } = (0, hooks_1.useCalendarContext)();
+    const { rows, columns } = constants_1.GRID_SIZE[viewMode];
+    return (0, react_1.useCallback)((e) => {
+        onKeyDown?.(e);
+        if (!enabled) {
+            return;
+        }
+        // Стрелки навигации по сетке гасим: без preventDefault нативное поведение прокручивает
+        // страницу (фокус в ячейке-кнопке, событие иначе уходит за календарь).
+        (0, utils_1.preventScrollOnArrowKeys)(e);
+        switch (e.key) {
+            case 'ArrowLeft':
+                if (column) {
+                    setFocus((0, utils_2.stringifyAddress)([row, column - 1]));
+                }
+                return;
+            case 'ArrowRight':
+                if (column < columns - 1) {
+                    setFocus((0, utils_2.stringifyAddress)([row, column + 1]));
+                }
+                return;
+            case 'ArrowUp':
+                if (row) {
+                    setFocus((0, utils_2.stringifyAddress)([row - 1, column]));
+                }
+                else {
+                    setViewShift(viewShift - 1);
+                    setFocus((0, utils_2.stringifyAddress)([rows - 1, column]));
+                }
+                return;
+            case 'ArrowDown':
+                if (row < rows - 1) {
+                    setFocus((0, utils_2.stringifyAddress)([row + 1, column]));
+                }
+                else {
+                    setViewShift(viewShift + 1);
+                    setFocus((0, utils_2.stringifyAddress)([0, column]));
+                }
+                return;
+            case 'Tab':
+                if (!e.shiftKey && (mode !== constants_1.CALENDAR_MODE.DateTime || viewMode !== constants_1.VIEW_MODE.Month)) {
+                    onFocusLeave?.('next');
+                }
+                return;
+            default:
+            // do nothing
+        }
+    }, [column, columns, enabled, mode, onFocusLeave, onKeyDown, row, rows, setFocus, setViewShift, viewMode, viewShift]);
+}

package/dist/cjs/helperComponents/Item/index.d.ts

@@ -0,0 +1 @@
+export * from './Item';

package/dist/cjs/helperComponents/Item/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Item"), exports);