@cloud-ru/ds-calendar 1.0.0

package/dist/cjs/helperComponents/MobileFooter/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("./MobileFooter"), exports);

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

@@ -0,0 +1,38 @@
+.footer{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-12, 12px);
+  width:100%;
+}
+
+.selectedRow{
+  display:flex;
+  gap:var(--sn-primitive-dimension-12, 12px);
+  align-items:baseline;
+  justify-content:space-between;
+  width:100%;
+}
+
+.selectedLabel{
+  flex:1 1 auto;
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+
+.selectedValue{
+  flex-shrink:0;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  text-align:right;
+  white-space:nowrap;
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}

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

@@ -0,0 +1,18 @@
+import { Size, ViewMode } from '../../types';
+import { LevelConfig } from '../MobileCalendar/levelConfig';
+export type MobilePeriodBlockProps = {
+    /** Дата периода блока (1-е число месяца / 1 января года / 1 января старта декады). */
+    date: Date;
+    /** Текущий уровень (определяет сетку и гранулярность ячеек). */
+    level: ViewMode;
+    /** Конфиг уровня. */
+    config: LevelConfig;
+    /** Размер ячеек. */
+    size: Size;
+    /** Выбор ячейки (tap). */
+    onSelect(date: Date): void;
+};
+/**
+ * Один период скролла: заголовок + грид ячеек. Ячейки соседних периодов скрыты.
+ */
+export declare function MobilePeriodBlock({ date, level, config, size, onSelect }: MobilePeriodBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/MobilePeriodBlock/MobilePeriodBlock.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobilePeriodBlock = MobilePeriodBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const Item_1 = require("../Item");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/**
+ * Один период скролла: заголовок + грид ячеек. Ячейки соседних периодов скрыты.
+ */
+function MobilePeriodBlock({ date, level, config, size, onSelect }) {
+    const { mode, value, preselectedRange, dateAndTime, isDateFilled, showHolidays, today, buildCellProps, getTestId } = (0, hooks_1.useCalendarContext)();
+    const classifiedRows = config.buildGrid(date).map(row => row.map(({ date: cellDate }) => ({
+        cellDate,
+        cell: (0, hooks_1.classifyCell)({
+            date: cellDate,
+            viewDate: date,
+            viewMode: level,
+            mode,
+            value,
+            preselectedRange,
+            dateAndTime,
+            isDateFilled,
+            showHolidays,
+            today,
+            buildCellProps,
+            isTheSameItem: config.isTheSameItem,
+            isInPeriod: config.isInPeriod,
+            getItemLabel: config.getItemLabel,
+        }),
+    })));
+    // Строки целиком из соседнего периода (ведущие/замыкающие) не рендерим — блок месяца сжимается до
+    // реально занятых недель, иначе пустой «хвост» создаёт зазор и сбивает подпись активного периода.
+    const cells = classifiedRows.filter(row => row.some(({ cell }) => !cell.another)).flat();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.block, "data-size": size, "data-test-id": getTestId(constants_1.TEST_IDS.calendarMobilePeriodBlock), children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.caption, children: config.label(date) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.grid, "data-level": level, style: { gridTemplateColumns: `repeat(${config.columns}, minmax(0, 1fr))` }, children: cells.map(({ cellDate, cell }) => ((0, jsx_runtime_1.jsx)(Item_1.Item, { size: size, label: cell.label, checked: cell.checked, disabled: cell.disabled, holiday: cell.holiday, another: cell.another, current: cell.current, rangePosition: cell.rangePosition, visible: !cell.another, date: cellDate, tabIndex: -1, onSelect: onSelect }, cellDate.getTime()))) })] }));
+}

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

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

package/dist/cjs/helperComponents/MobilePeriodBlock/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("./MobilePeriodBlock"), exports);

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

@@ -0,0 +1,56 @@
+.block{
+  display:flex;
+  flex-direction:column;
+}
+
+.caption{
+  padding:var(--sn-primitive-dimension-6, 6px) 0;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  text-align:center;
+}
+.block[data-size=s] .caption{
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+.block[data-size=m] .caption{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.block[data-size=l] .caption{
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}
+
+.grid{
+  display:grid;
+}
+.block[data-size=s] .grid{
+  min-width:232px;
+  min-height:224px;
+  padding-left:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding-right:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+}
+.block[data-size=m] .grid{
+  min-width:232px;
+  min-height:224px;
+  padding-left:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  padding-right:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+}
+.block[data-size=l] .grid{
+  min-width:296px;
+  min-height:280px;
+  padding-left:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  padding-right:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+}

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

@@ -0,0 +1,21 @@
+import { Size, ViewMode } from '../../types';
+import { LevelConfig } from '../MobileCalendar/levelConfig';
+export type MobilePeriodScrollerProps = {
+    level: ViewMode;
+    config: LevelConfig;
+    size: Size;
+    /** Дата, на период которой центрируется скролл (при маунте и смене). */
+    anchorDate: Date;
+    /** Выбор ячейки (tap). */
+    onSelect(date: Date): void;
+};
+/**
+ * Вертикальный скролл периодов (диапазон широкий — воспринимается безграничным). Скролл-контейнер — `@cloud-ru/ds-scroll` (DS-пилюля); его
+ * OverlayScrollbars-viewport берётся виртуализатором как scroll-элемент. Хост `@cloud-ru/ds-scroll` заполняет
+ * body sheet'а (`.scrollHost` height:100%), поэтому именно viewport (computed `overflow-y:auto`)
+ * резолвится drag-движком bottom-sheet'а как scrollable-ancestor — handoff drag-vs-scroll сохраняется.
+ * Диапазон фиксирован и симметричен (см. `levelConfig`), на маунте центрируется на `anchorDate`.
+ *
+ * Ключуется по `level` родителем — смена уровня даёт чистый remount (и реинициализацию OS).
+ */
+export declare function MobilePeriodScroller({ level, config, size, anchorDate, onSelect }: MobilePeriodScrollerProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/MobilePeriodScroller/MobilePeriodScroller.js

@@ -0,0 +1,92 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobilePeriodScroller = MobilePeriodScroller;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const scroll_1 = require("@cloud-ru/ds-scroll");
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_virtual_1 = require("@tanstack/react-virtual");
+const react_1 = require("react");
+const MobilePeriodBlock_1 = require("../MobilePeriodBlock");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/**
+ * Первичная оценка высоты блока (px) по размеру — до первого замера. Взята по самому высокому блоку
+ * (6-недельный месяц) на каждом размере, чтобы оценка НЕ была меньше реального блока: иначе на первом
+ * кадре строки позиционируются с шагом меньше их высоты и налезают друг на друга (заметно на size L —
+ * FF-8654). Точная высота каждой строки уточняется `measureElement`; занижение исключено running-max'ом.
+ */
+const ESTIMATE_BY_SIZE = {
+    s: 276,
+    m: 328,
+    l: 376,
+};
+/**
+ * Вертикальный скролл периодов (диапазон широкий — воспринимается безграничным). Скролл-контейнер — `@cloud-ru/ds-scroll` (DS-пилюля); его
+ * OverlayScrollbars-viewport берётся виртуализатором как scroll-элемент. Хост `@cloud-ru/ds-scroll` заполняет
+ * body sheet'а (`.scrollHost` height:100%), поэтому именно viewport (computed `overflow-y:auto`)
+ * резолвится drag-движком bottom-sheet'а как scrollable-ancestor — handoff drag-vs-scroll сохраняется.
+ * Диапазон фиксирован и симметричен (см. `levelConfig`), на маунте центрируется на `anchorDate`.
+ *
+ * Ключуется по `level` родителем — смена уровня даёт чистый remount (и реинициализацию OS).
+ */
+function MobilePeriodScroller({ level, config, size, anchorDate, onSelect }) {
+    // `@cloud-ru/ds-scroll` (OverlayScrollbars) разрешает ref в viewport только после инициализации инстанса;
+    // до этого `innerScrollRef.current === null`, и виртуализатор рендерит пустой контейнер. Флаг
+    // поднимается из `onInitialized` и форсит повторное чтение scroll-элемента + `measure()`.
+    const innerScrollRef = (0, react_1.useRef)(null);
+    const [scrollElementReady, setScrollElementReady] = (0, react_1.useState)(false);
+    // Оценка высоты строки = МАКСИМУМ измеренных блоков, не «первый»: блоки разной высоты (5- и
+    // 6-недельные месяцы), и если оценить по 5-недельному, то более высокий 6-недельный, прокрученный
+    // в вид, на кадр налезал бы. Растёт по мере появления более высоких блоков; занижение исключено.
+    const [maxRowSize, setMaxRowSize] = (0, react_1.useState)(null);
+    // Однократный ре-скролл к anchorDate после первого замера. Сбрасывается при смене anchorDate.
+    const didInitialScrollRef = (0, react_1.useRef)(false);
+    const virtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: config.count,
+        getScrollElement: () => (scrollElementReady ? innerScrollRef.current : null),
+        estimateSize: () => maxRowSize ?? ESTIMATE_BY_SIZE[size],
+        overscan: 4,
+    });
+    const virtualItems = virtualizer.getVirtualItems();
+    const handleInitialized = (0, react_1.useCallback)(() => setScrollElementReady(true), []);
+    // Смена anchorDate (drill / level-up / Current) — центрируем заново.
+    (0, utils_1.useLayoutEffect)(() => {
+        didInitialScrollRef.current = false;
+    }, [anchorDate]);
+    // Центрирование на anchorDate. Первичный `scrollToIndex` идёт по грубой оценке и «промахивается»,
+    // поэтому повторяется после первого замера (`maxRowSize`), затем фиксируется флагом — чтобы рост
+    // оценки при свободной прокрутке не дёргал пользователя обратно к anchorDate.
+    (0, utils_1.useLayoutEffect)(() => {
+        if (!scrollElementReady || didInitialScrollRef.current) {
+            return;
+        }
+        virtualizer.measure();
+        // indexAt далёкой от origin даты может выйти за [0, count-1] — клампим.
+        const target = Math.max(0, Math.min(config.count - 1, config.indexAt(anchorDate)));
+        virtualizer.scrollToIndex(target, { align: 'start' });
+        if (maxRowSize !== null) {
+            didInitialScrollRef.current = true;
+        }
+    }, [scrollElementReady, anchorDate, config, virtualizer, maxRowSize]);
+    // Running-max реальных высот блоков в виду — точная оценка без «скачка» и без занижения (как в
+    // ListPrivate, но по максимуму, а не по первому блоку).
+    (0, utils_1.useLayoutEffect)(() => {
+        if (!scrollElementReady) {
+            return;
+        }
+        const rows = innerScrollRef.current?.querySelectorAll('[data-index]');
+        if (!rows?.length) {
+            return;
+        }
+        let max = 0;
+        rows.forEach(row => {
+            max = Math.max(max, row.offsetHeight);
+        });
+        if (max > 0) {
+            setMaxRowSize(prev => (prev === null || max > prev ? max : prev));
+        }
+    }, [scrollElementReady, virtualItems.length]);
+    return ((0, jsx_runtime_1.jsx)(scroll_1.Scroll, { ref: innerScrollRef, className: styles_module_scss_1.default.scrollHost, onInitialized: handleInitialized, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.virtualContainer, style: { height: virtualizer.getTotalSize() }, children: virtualItems.map(virtualRow => ((0, jsx_runtime_1.jsx)("div", { "data-index": virtualRow.index, ref: virtualizer.measureElement, className: styles_module_scss_1.default.virtualRow, style: { '--virtual-row-offset': `${virtualRow.start}px` }, children: (0, jsx_runtime_1.jsx)(MobilePeriodBlock_1.MobilePeriodBlock, { date: config.dateAt(virtualRow.index), level: level, config: config, size: size, onSelect: onSelect }) }, virtualRow.key))) }) }));
+}

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

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

package/dist/cjs/helperComponents/MobilePeriodScroller/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("./MobilePeriodScroller"), exports);

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

@@ -0,0 +1,17 @@
+.scrollHost{
+  width:100%;
+  height:100%;
+}
+
+.virtualContainer{
+  position:relative;
+  width:100%;
+}
+
+.virtualRow{
+  position:absolute;
+  top:0;
+  left:0;
+  transform:translateY(var(--virtual-row-offset, 0));
+  width:100%;
+}

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

@@ -0,0 +1,6 @@
+import { PresetItem, Range } from '../../types';
+export type MobilePresetsScreenProps = {
+    items: PresetItem[];
+    onSelect(range: Range): void;
+};
+export declare function MobilePresetsScreen({ items, onSelect }: MobilePresetsScreenProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/MobilePresetsScreen/MobilePresetsScreen.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobilePresetsScreen = MobilePresetsScreen;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PeriodPresetsList_1 = require("../PeriodPresetsList");
+function MobilePresetsScreen({ items, onSelect }) {
+    return (0, jsx_runtime_1.jsx)(PeriodPresetsList_1.PeriodPresetsList, { items: items, onChange: onSelect });
+}

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

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

package/dist/cjs/helperComponents/MobilePresetsScreen/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("./MobilePresetsScreen"), exports);

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

@@ -0,0 +1,6 @@
+import { TimePickerDropdownProps } from '../../components/TimePickerDropdown/TimePickerDropdown';
+/**
+ * Черновик + Apply модель: правки берутся в локальный черновик, коммитятся наружу только по Apply.
+ * Закрытие/свайп = отмена (убирает авто-коммит после каждого оседания).
+ */
+export declare function MobileTimePickerDropdown({ children, size, value, defaultValue, onChangeValue, showSeconds, today: todayProp, closeOnApply, onApply, onCurrent, open: openProp, onOpenChange, closeOnPopstate, 'data-test-id': testId, ...rest }: TimePickerDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/MobileTimePickerDropdown/MobileTimePickerDropdown.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileTimePickerDropdown = MobileTimePickerDropdown;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const bottom_sheet_1 = require("@cloud-ru/ds-bottom-sheet");
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const locale_1 = require("../../locale");
+const TimePickerDrum_1 = require("../TimePickerDrum");
+/**
+ * Черновик + Apply модель: правки берутся в локальный черновик, коммитятся наружу только по Apply.
+ * Закрытие/свайп = отмена (убирает авто-коммит после каждого оседания).
+ */
+function MobileTimePickerDropdown({ children, size = constants_1.SIZE.M, value, defaultValue, onChangeValue, showSeconds = true, today: todayProp, closeOnApply = false, onApply, onCurrent, open: openProp, onOpenChange, closeOnPopstate, 'data-test-id': testId, ...rest }) {
+    const { t } = locale_1.calendarLocale.useTranslations();
+    const [open, setOpen] = (0, utils_1.useValueControl)({ value: openProp, defaultValue: false, onChange: onOpenChange });
+    const today = (0, react_1.useMemo)(() => (typeof todayProp === 'number' ? new Date(todayProp) : todayProp), [todayProp]);
+    // Закоммиченное значение (внутренний state в uncontrolled-режиме); наружу коммитится только по Apply.
+    const [committedValue, commit] = (0, utils_1.useUncontrolledProp)(value, defaultValue, onChangeValue);
+    const committedRef = (0, react_1.useRef)(committedValue);
+    committedRef.current = committedValue;
+    const { dateAndTime, setDateAndTime, onTimeChange, isTimeFilled } = (0, hooks_1.useDateAndTime)({ showSeconds, value: undefined });
+    const drumRef = (0, react_1.useRef)(null);
+    // При каждом открытии пересобираем черновик из закоммиченного значения (отмена незакоммиченных правок прошлой сессии).
+    (0, utils_1.useLayoutEffect)(() => {
+        if (open) {
+            const v = committedRef.current;
+            setDateAndTime(v
+                ? {
+                    year: undefined,
+                    month: undefined,
+                    day: undefined,
+                    hours: v.hours,
+                    minutes: v.minutes,
+                    seconds: v.seconds,
+                }
+                : {});
+        }
+    }, [open, setDateAndTime]);
+    const handleClose = (0, react_1.useCallback)(() => setOpen(false), [setOpen]);
+    const handleOpen = (0, react_1.useCallback)(() => setOpen(true), [setOpen]);
+    const drumHandlers = (0, hooks_1.useTimeDrumHandlers)(dateAndTime, onTimeChange);
+    const handleCurrent = (0, react_1.useCallback)(() => {
+        onTimeChange(today ?? new Date());
+        onCurrent?.();
+    }, [onCurrent, onTimeChange, today]);
+    const handleApply = (0, react_1.useCallback)(() => {
+        // Форсим оседание незавершённого жеста барабана перед коммитом, иначе быстрый флик→Apply
+        // закоммитил бы значение до флика (FF-8654, #2). Кнопка активна только при заполненном времени.
+        const flushed = drumRef.current?.flush() ?? {
+            hours: dateAndTime.hours ?? 0,
+            minutes: dateAndTime.minutes ?? 0,
+            seconds: dateAndTime.seconds ?? 0,
+        };
+        commit({
+            hours: flushed.hours,
+            minutes: flushed.minutes,
+            seconds: showSeconds ? flushed.seconds : 0,
+        });
+        onApply?.();
+        if (closeOnApply) {
+            handleClose();
+        }
+    }, [dateAndTime, showSeconds, commit, onApply, closeOnApply, handleClose]);
+    const trigger = (0, hooks_1.useOpenTrigger)(children, handleOpen);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [trigger, (0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheet, { withDividers: false, open: open ?? false, onClose: handleClose, onBackButtonClick: handleClose, title: t('time'), closeOnPopstate: closeOnPopstate, approveButton: { label: t('apply'), disabled: !isTimeFilled(), onClick: handleApply }, additionalButton: { label: t('current'), view: 'function', onClick: handleCurrent }, footerTestIds: { approve: constants_1.TEST_IDS.timePickerMobileApply, additional: constants_1.TEST_IDS.timePickerMobileCurrent }, content: (0, jsx_runtime_1.jsx)(TimePickerDrum_1.TimePickerDrum, { ref: drumRef, size: size, showSeconds: showSeconds, hours: dateAndTime?.hours ?? 0, minutes: dateAndTime?.minutes ?? 0, seconds: dateAndTime?.seconds ?? 0, ...drumHandlers }), ...(0, utils_1.extractSupportProps)(rest), "data-test-id": testId })] }));
+}

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

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

package/dist/cjs/helperComponents/MobileTimePickerDropdown/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("./MobileTimePickerDropdown"), exports);

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

@@ -0,0 +1,9 @@
+import { Ref } from 'react';
+import { Size } from '../../types';
+import { TimePickerDrumHandle } from '../TimePickerDrum';
+export type MobileTimeScreenProps = {
+    size: Size;
+    /** Ref барабана — для форс-коммита незавершённого жеста при уходе с экрана (см. FF-8654, комментарий #2). */
+    drumRef?: Ref<TimePickerDrumHandle>;
+};
+export declare function MobileTimeScreen({ size, drumRef }: MobileTimeScreenProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/MobileTimeScreen/MobileTimeScreen.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileTimeScreen = MobileTimeScreen;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_1 = require("../../hooks");
+const TimePickerDrum_1 = require("../TimePickerDrum");
+function MobileTimeScreen({ size, drumRef }) {
+    const { dateAndTime, onTimeChange, showSeconds, isDateFilled, locale } = (0, hooks_1.useCalendarContext)();
+    const drumHandlers = (0, hooks_1.useTimeDrumHandlers)(dateAndTime, onTimeChange);
+    const selectedDateLabel = isDateFilled() && dateAndTime
+        ? new Date(dateAndTime.year ?? 0, dateAndTime.month ?? 0, dateAndTime.day ?? 0).toLocaleDateString(locale?.toString(), { day: 'numeric', month: 'long', year: 'numeric' })
+        : undefined;
+    return ((0, jsx_runtime_1.jsx)(TimePickerDrum_1.TimePickerDrum, { ref: drumRef, size: size, showSeconds: showSeconds, selectedDateLabel: selectedDateLabel, hours: dateAndTime?.hours ?? 0, minutes: dateAndTime?.minutes ?? 0, seconds: dateAndTime?.seconds ?? 0, ...drumHandlers }));
+}

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

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

package/dist/cjs/helperComponents/MobileTimeScreen/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("./MobileTimeScreen"), exports);

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

@@ -0,0 +1 @@
+export declare function MonthView(): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/MonthView/MonthView.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MonthView = MonthView;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const list_1 = require("@cloud-ru/ds-list");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const utils_1 = require("../../utils");
+const Grid_1 = require("../Grid");
+const utils_2 = require("./utils");
+function MonthView() {
+    const { mode, viewMode, dateAndTime, setValue, preselectedRange, startPreselect, continuePreselect, completePreselect, restartPreselect, onDateChange, locale, hoursKeyboardNavigationRef, } = (0, hooks_1.useCalendarContext)();
+    const enterFocusTimeoutRef = (0, react_1.useRef)(undefined);
+    (0, react_1.useEffect)(() => () => {
+        window.clearTimeout(enterFocusTimeoutRef.current);
+    }, []);
+    const onDayKeyDown = (0, react_1.useCallback)(e => {
+        if (mode !== constants_1.CALENDAR_MODE.DateTime || viewMode !== 'month') {
+            return;
+        }
+        switch (e.key) {
+            case 'Tab':
+                if (!e.shiftKey) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    hoursKeyboardNavigationRef.current?.focusItem((0, list_1.getDefaultItemId)(dateAndTime?.hours ?? 0));
+                }
+                break;
+            case 'Enter':
+                window.clearTimeout(enterFocusTimeoutRef.current);
+                enterFocusTimeoutRef.current = setTimeout(() => {
+                    enterFocusTimeoutRef.current = undefined;
+                    hoursKeyboardNavigationRef.current?.focusItem((0, list_1.getDefaultItemId)(dateAndTime?.hours ?? 0));
+                }, 0);
+                break;
+            default:
+                break;
+        }
+    }, [dateAndTime?.hours, hoursKeyboardNavigationRef, mode, viewMode]);
+    const buildGrid = (0, react_1.useCallback)((date) => (0, utils_2.buildMonthGrid)(date, locale), [locale]);
+    const onSelect = (0, react_1.useCallback)((date) => {
+        if (mode === constants_1.CALENDAR_MODE.DateTime) {
+            onDateChange(date);
+            return;
+        }
+        if (mode === constants_1.CALENDAR_MODE.DateRange) {
+            preselectedRange ? completePreselect(date) : startPreselect(date);
+            return;
+        }
+        if (mode === constants_1.CALENDAR_MODE.Date) {
+            setValue([date, date]);
+        }
+    }, [completePreselect, mode, onDateChange, preselectedRange, setValue, startPreselect]);
+    const onPreselect = (0, react_1.useCallback)((date) => {
+        if (preselectedRange) {
+            continuePreselect(date);
+        }
+    }, [continuePreselect, preselectedRange]);
+    const onLeave = (0, react_1.useCallback)(() => {
+        if (preselectedRange) {
+            restartPreselect();
+        }
+    }, [preselectedRange, restartPreselect]);
+    const grid = (0, hooks_1.useGrid)({
+        buildGrid,
+        isTheSameItem: utils_1.isTheSameDate,
+        isInPeriod: utils_1.isTheSameMonth,
+        getItemLabel: utils_1.getDateLabel,
+        onSelect,
+        onPreselect,
+        onLeave,
+        onKeyDown: onDayKeyDown,
+    });
+    return (0, jsx_runtime_1.jsx)(Grid_1.Grid, { grid: grid });
+}

package/dist/cjs/helperComponents/MonthView/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const WEEK_STARTS_WITH_MONDAY: number[];
+export declare const WEEK_STARTS_WITH_SUNDAY: number[];