@snack-uikit/calendar 0.9.0 → 0.11.0

package/dist/esm/helperComponents/TimePickerBase/TimePickerBase.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useMemo } from 'react';
+import { Divider } from '@snack-uikit/divider';
+import { getDefaultItemId } from '@snack-uikit/list';
+import { useLocale } from '@snack-uikit/locale';
+import { AUTOFOCUS, HOURS, MINUTES, SECONDS } from '../../constants';
+import { CalendarContext } from '../CalendarContext';
+import { TimeList } from '../TimeList';
+import styles from './styles.module.css';
+export function TimePickerBase({ showDivider = true }) {
+    const { t } = useLocale('Calendar');
+    const { size, mode, fitToContainer, showSeconds, dateAndTime, onTimeChange, applyButtonRef, currentButtonRef, hoursKeyboardNavigationRef, minutesKeyboardNavigationRef, secondsKeyboardNavigationRef, setFocus, getTestId, navigationStartRef, onFocusLeave, } = useContext(CalendarContext);
+    const hours = dateAndTime === null || dateAndTime === void 0 ? void 0 : dateAndTime.hours;
+    const minutes = dateAndTime === null || dateAndTime === void 0 ? void 0 : dateAndTime.minutes;
+    const seconds = dateAndTime === null || dateAndTime === void 0 ? void 0 : dateAndTime.seconds;
+    const getTimeChangeHandler = useCallback((propName) => (value) => {
+        var _a;
+        const timeValues = Object.assign({ hours: 0, minutes: 0, seconds: 0 }, dateAndTime);
+        onTimeChange(Object.assign(Object.assign({}, timeValues), { [propName]: (_a = value !== null && value !== void 0 ? value : dateAndTime === null || dateAndTime === void 0 ? void 0 : dateAndTime[propName]) !== null && _a !== void 0 ? _a : 0 }));
+    }, [dateAndTime, onTimeChange]);
+    const onHoursChange = useMemo(() => getTimeChangeHandler('hours'), [getTimeChangeHandler]);
+    const onMinutesChange = useMemo(() => getTimeChangeHandler('minutes'), [getTimeChangeHandler]);
+    const onSecondsChange = useMemo(() => getTimeChangeHandler('seconds'), [getTimeChangeHandler]);
+    const onHourKeyDownGetter = useCallback(id => event => {
+        var _a, _b;
+        switch (event.key) {
+            case 'Tab':
+                if (mode === 'time' && event.shiftKey) {
+                    onFocusLeave === null || onFocusLeave === void 0 ? void 0 : onFocusLeave('prev');
+                    break;
+                }
+                event.stopPropagation();
+                event.preventDefault();
+                if (event.shiftKey) {
+                    setFocus(AUTOFOCUS);
+                }
+                else {
+                    (_a = minutesKeyboardNavigationRef.current) === null || _a === void 0 ? void 0 : _a.focusItem(getDefaultItemId(minutes !== null && minutes !== void 0 ? minutes : 0));
+                }
+                break;
+            case 'Enter':
+                (_b = minutesKeyboardNavigationRef.current) === null || _b === void 0 ? void 0 : _b.focusItem(getDefaultItemId(minutes !== null && minutes !== void 0 ? minutes : 0));
+                break;
+            case 'ArrowUp':
+                if (mode === 'time' && id === 0) {
+                    onFocusLeave === null || onFocusLeave === void 0 ? void 0 : onFocusLeave('prev');
+                    break;
+                }
+                break;
+            default:
+                break;
+        }
+    }, [minutes, minutesKeyboardNavigationRef, mode, onFocusLeave, setFocus]);
+    const onMinuteKeyDownGetter = useCallback(() => event => {
+        var _a, _b, _c, _d, _e;
+        switch (event.key) {
+            case 'Tab':
+                event.stopPropagation();
+                event.preventDefault();
+                if (event.shiftKey) {
+                    (_a = hoursKeyboardNavigationRef.current) === null || _a === void 0 ? void 0 : _a.focusItem(getDefaultItemId(hours !== null && hours !== void 0 ? hours : 0));
+                }
+                else {
+                    if (showSeconds) {
+                        (_b = secondsKeyboardNavigationRef.current) === null || _b === void 0 ? void 0 : _b.focusItem(getDefaultItemId(seconds !== null && seconds !== void 0 ? seconds : 0));
+                    }
+                    else {
+                        (_c = currentButtonRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+                    }
+                }
+                break;
+            case 'Enter':
+                if (showSeconds) {
+                    (_d = secondsKeyboardNavigationRef.current) === null || _d === void 0 ? void 0 : _d.focusItem(getDefaultItemId(seconds !== null && seconds !== void 0 ? seconds : 0));
+                }
+                else {
+                    (_e = applyButtonRef.current) === null || _e === void 0 ? void 0 : _e.focus();
+                }
+                break;
+            default:
+                break;
+        }
+    }, [
+        applyButtonRef,
+        currentButtonRef,
+        hours,
+        hoursKeyboardNavigationRef,
+        seconds,
+        secondsKeyboardNavigationRef,
+        showSeconds,
+    ]);
+    const onSecondKeyDownGetter = useCallback(() => event => {
+        var _a, _b, _c;
+        switch (event.key) {
+            case 'Tab':
+                event.stopPropagation();
+                event.preventDefault();
+                if (event.shiftKey) {
+                    (_a = minutesKeyboardNavigationRef.current) === null || _a === void 0 ? void 0 : _a.focusItem(getDefaultItemId(minutes !== null && minutes !== void 0 ? minutes : 0));
+                }
+                else {
+                    (_b = currentButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                }
+                break;
+            case 'Enter':
+                (_c = applyButtonRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+                break;
+            default:
+                break;
+        }
+    }, [applyButtonRef, currentButtonRef, minutes, minutesKeyboardNavigationRef]);
+    return (_jsxs(_Fragment, { children: [showDivider && _jsx(Divider, { orientation: 'vertical', className: styles.divider }), _jsxs("div", { className: styles.timePicker, "data-size": size, "data-fit-to-container": fitToContainer || undefined, children: [_jsx("div", { className: styles.header, "data-size": size, children: _jsx("span", { className: styles.title, children: t('time') }) }), _jsxs("div", { className: styles.timeListsWrapper, "data-size": size, "data-show-seconds": showSeconds || undefined, children: [_jsx(TimeList, { value: hours, onChange: onHoursChange, "data-test-id": getTestId('hours'), numberOfItems: HOURS, onKeyDownGetter: onHourKeyDownGetter, keyboardNavigationRef: hoursKeyboardNavigationRef, navigationStartRef: mode === 'time' ? navigationStartRef : undefined }), _jsx(Divider, { className: styles.divider, orientation: 'vertical' }), _jsx(TimeList, { value: minutes, onChange: onMinutesChange, "data-test-id": getTestId('minutes'), numberOfItems: MINUTES, onKeyDownGetter: onMinuteKeyDownGetter, keyboardNavigationRef: minutesKeyboardNavigationRef }), showSeconds && (_jsxs(_Fragment, { children: [_jsx(Divider, { className: styles.divider, orientation: 'vertical' }), _jsx(TimeList, { value: seconds, onChange: onSecondsChange, "data-test-id": getTestId('seconds'), numberOfItems: SECONDS, onKeyDownGetter: onSecondKeyDownGetter, keyboardNavigationRef: secondsKeyboardNavigationRef })] }))] })] })] }));
+}

package/dist/esm/helperComponents/TimePickerBase/index.d.ts

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

package/dist/esm/helperComponents/TimePickerBase/index.js

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

package/dist/esm/helperComponents/TimePickerBase/styles.module.css

@@ -0,0 +1,103 @@
+.divider{
+  flex-shrink:0;
+  height:auto;
+}
+
+.timePicker{
+  overflow:hidden;
+  display:flex;
+  flex-direction:column;
+  box-sizing:border-box;
+  max-width:100%;
+}
+.timePicker[data-size=s]{
+  min-width:var(--size-calendar-time-min-width-s, 120px);
+  max-height:var(--size-calendar-container-min-height-s, 256px);
+}
+.timePicker[data-size=s][data-fit-to-container]{
+  max-height:100%;
+}
+.timePicker[data-size=m]{
+  min-width:var(--size-calendar-time-min-width-m, 144px);
+  max-height:var(--size-calendar-container-min-height-m, 320px);
+}
+.timePicker[data-size=m][data-fit-to-container]{
+  max-height:100%;
+}
+.timePicker[data-size=l]{
+  min-width:var(--size-calendar-time-min-width-l, 168px);
+  max-height:var(--size-calendar-container-min-height-l, 384px);
+}
+.timePicker[data-size=l][data-fit-to-container]{
+  max-height:100%;
+}
+
+.timeListsWrapper{
+  display:grid;
+  grid-template-columns:1fr 1px 1fr;
+  min-height:0;
+}
+.timeListsWrapper[data-show-seconds]{
+  grid-template-columns:1fr 1px 1fr 1px 1fr;
+}
+.timeListsWrapper[data-size=s]{
+  max-height:calc(100% - var(--size-calendar-container-header-lines-height-s, 32px));
+}
+.timeListsWrapper[data-size=m]{
+  max-height:calc(100% - var(--size-calendar-container-header-lines-height-m, 40px));
+}
+.timeListsWrapper[data-size=l]{
+  max-height:calc(100% - var(--size-calendar-container-header-lines-height-l, 48px));
+}
+
+.title{
+  display:flex;
+  align-items:center;
+}
+
+.header{
+  display:flex;
+  flex-grow:0;
+  flex-shrink:0;
+  align-items:center;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.header[data-size=s]{
+  padding-left:var(--space-calendar-container-s, 8px);
+  padding-right:var(--space-calendar-container-s, 8px);
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.header[data-size=s] .title{
+  height:var(--size-calendar-container-header-lines-height-s, 32px);
+}
+.header[data-size=m]{
+  padding-left:var(--space-calendar-container-m, 8px);
+  padding-right:var(--space-calendar-container-m, 8px);
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.header[data-size=m] .title{
+  height:var(--size-calendar-container-header-lines-height-m, 40px);
+}
+.header[data-size=l]{
+  padding-left:var(--space-calendar-container-l, 8px);
+  padding-right:var(--space-calendar-container-l, 8px);
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.header[data-size=l] .title{
+  height:var(--size-calendar-container-header-lines-height-l, 48px);
+}

package/dist/esm/hooks.d.ts

@@ -1,4 +1,5 @@
-import { BaseGrid, Cell } from './types';
+import { KeyboardEventHandler } from 'react';
+import { BaseGrid, Cell, DateAndTime, Range, TimeValue } from './types';
 export type UseGridParams = {
     buildGrid(viewDate: Date): BaseGrid;
     isTheSameItem(date1: Date, date2: Date): boolean;
@@ -7,5 +8,19 @@ export type UseGridParams = {
     onSelect?(date: Date): void;
     onPreselect?(date: Date): void;
     onLeave?(): void;
+    onKeyDown?: KeyboardEventHandler;
+};
+export declare function useGrid({ onSelect, onPreselect, onLeave, buildGrid, isTheSameItem, getItemLabel, isInPeriod, onKeyDown, }: UseGridParams): Cell[][];
+export declare function useDateAndTime({ showSeconds, value, }: {
+    showSeconds?: boolean;
+    value: Range | TimeValue | undefined;
+}): {
+    dateAndTime: DateAndTime;
+    setDateAndTime: import("react").Dispatch<import("react").SetStateAction<DateAndTime>>;
+    isDateAndTimeFilled: () => boolean;
+    isTimeFilled: () => boolean;
+    isDateFilled: () => boolean;
+    onDateChange: (value: Pick<DateAndTime, "year" | "month" | "day"> | Date) => void;
+    onTimeChange: (value: TimeValue | Date) => void;
+    onDateAndTimeChange: (value: DateAndTime | Date) => void;
 };
-export declare function useGrid({ onSelect, onPreselect, onLeave, buildGrid, isTheSameItem, getItemLabel, isInPeriod, }: UseGridParams): Cell[][];

package/dist/esm/hooks.js

@@ -1,15 +1,16 @@
-import { useContext, useMemo } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { CALENDAR_MODE, IN_RANGE_POSITION } from './constants';
 import { CalendarContext } from './helperComponents/CalendarContext';
 import { stringifyAddress } from './helperComponents/Item/utils';
 import { getInRangePosition, isWeekend } from './utils';
-export function useGrid({ onSelect, onPreselect, onLeave, buildGrid, isTheSameItem, getItemLabel, isInPeriod, }) {
-    const { today, showHolidays, preselectedRange, value, viewDate, viewMode, focus, buildCellProps, firstNotDisableCell, } = useContext(CalendarContext);
+export function useGrid({ onSelect, onPreselect, onLeave, buildGrid, isTheSameItem, getItemLabel, isInPeriod, onKeyDown, }) {
+    const { today, showHolidays, preselectedRange, value, dateAndTime, mode, viewDate, viewMode, focus, buildCellProps, firstNotDisableCell, isDateFilled, } = useContext(CalendarContext);
     return useMemo(() => {
         let hasFocusInGrid = false;
         let currentItem;
         let hasFoundFirstNotDisableCell = false;
         const result = buildGrid(viewDate).map(row => row.map(({ date, address }) => {
-            var _a;
+            var _a, _b, _c, _d;
             let isDisabled = false;
             let isHoliday = undefined;
             let cellProps = { isDisabled, isHoliday };
@@ -27,12 +28,20 @@ export function useGrid({ onSelect, onPreselect, onLeave, buildGrid, isTheSameIt
                     hasFoundFirstNotDisableCell = true;
                 }
             }
-            const inRangePosition = getInRangePosition(date, viewMode, preselectedRange || value);
-            const isSelectedValue = value && !preselectedRange ? isTheSameItem(value[0], date) || isTheSameItem(value[1], date) : false;
+            const dateTimeSelectedValue = isDateFilled()
+                ? new Date((_b = dateAndTime === null || dateAndTime === void 0 ? void 0 : dateAndTime.year) !== null && _b !== void 0 ? _b : 0, (_c = dateAndTime === null || dateAndTime === void 0 ? void 0 : dateAndTime.month) !== null && _c !== void 0 ? _c : 0, (_d = dateAndTime === null || dateAndTime === void 0 ? void 0 : dateAndTime.day) !== null && _d !== void 0 ? _d : 0)
+                : undefined;
+            const inRangePosition = mode === CALENDAR_MODE.Range
+                ? getInRangePosition(date, viewMode, preselectedRange || value)
+                : IN_RANGE_POSITION.Out;
+            const isSelectedValue = value && !preselectedRange && !dateTimeSelectedValue
+                ? isTheSameItem(value[0], date) || isTheSameItem(value[1], date)
+                : false;
             const isPreselected = preselectedRange ? isTheSameItem(preselectedRange[0], date) : false;
+            const isDateTimeValueSelected = dateTimeSelectedValue ? isTheSameItem(dateTimeSelectedValue, date) : false;
             const tabIndex = focus && stringifyAddress(address) === focus ? 0 : -1;
             hasFocusInGrid = tabIndex === 0 || hasFocusInGrid;
-            const isCurrent = isTheSameItem(today, date);
+            const isCurrent = isTheSameItem(today || new Date(), date);
             const cell = {
                 date,
                 onLeave,
@@ -45,8 +54,9 @@ export function useGrid({ onSelect, onPreselect, onLeave, buildGrid, isTheSameIt
                 onPreselect,
                 inRangePosition,
                 label: getItemLabel(date),
-                isSelected: isSelectedValue || isPreselected,
+                isSelected: isSelectedValue || isPreselected || isDateTimeValueSelected,
                 isInCurrentLevelPeriod: isInPeriod(viewDate, date),
+                onKeyDown,
             };
             if (isCurrent) {
                 currentItem = cell;
@@ -60,11 +70,17 @@ export function useGrid({ onSelect, onPreselect, onLeave, buildGrid, isTheSameIt
     }, [
         buildCellProps,
         buildGrid,
+        dateAndTime === null || dateAndTime === void 0 ? void 0 : dateAndTime.day,
+        dateAndTime === null || dateAndTime === void 0 ? void 0 : dateAndTime.month,
+        dateAndTime === null || dateAndTime === void 0 ? void 0 : dateAndTime.year,
         firstNotDisableCell,
         focus,
         getItemLabel,
+        isDateFilled,
         isInPeriod,
         isTheSameItem,
+        mode,
+        onKeyDown,
         onLeave,
         onPreselect,
         onSelect,
@@ -76,3 +92,88 @@ export function useGrid({ onSelect, onPreselect, onLeave, buildGrid, isTheSameIt
         viewMode,
     ]);
 }
+export function useDateAndTime({ showSeconds, value, }) {
+    const [dateAndTime, setDateAndTime] = useState(() => {
+        if (Array.isArray(value)) {
+            const initialValue = value[0];
+            return {
+                year: initialValue.getFullYear(),
+                month: initialValue.getMonth(),
+                day: initialValue.getDate(),
+                hours: initialValue.getHours(),
+                minutes: initialValue.getMinutes(),
+                seconds: initialValue.getSeconds(),
+            };
+        }
+        return {
+            year: undefined,
+            month: undefined,
+            day: undefined,
+            hours: value === null || value === void 0 ? void 0 : value.hours,
+            minutes: value === null || value === void 0 ? void 0 : value.minutes,
+            seconds: value === null || value === void 0 ? void 0 : value.seconds,
+        };
+    });
+    const isDateFilled = useCallback(() => {
+        const { year, month, day } = dateAndTime;
+        return [year, month, day].every(value => value !== undefined);
+    }, [dateAndTime]);
+    const isTimeFilled = useCallback(() => {
+        const { hours, minutes, seconds } = dateAndTime;
+        return [hours, minutes, ...(showSeconds ? [seconds] : [])].every(value => value !== undefined);
+    }, [dateAndTime, showSeconds]);
+    const isDateAndTimeFilled = useCallback(() => isTimeFilled() && isDateFilled(), [isDateFilled, isTimeFilled]);
+    const onDateChange = useCallback((value) => {
+        if (value instanceof Date) {
+            setDateAndTime(prevDate => (Object.assign(Object.assign({}, prevDate), { year: value.getFullYear(), month: value.getMonth(), day: value.getDate() })));
+        }
+        else {
+            setDateAndTime(prevDate => (Object.assign(Object.assign({}, prevDate), value)));
+        }
+    }, []);
+    const onTimeChange = useCallback((value) => {
+        if (value instanceof Date) {
+            setDateAndTime(prevDate => (Object.assign(Object.assign({}, prevDate), { hours: value.getHours(), minutes: value.getMinutes(), seconds: value.getSeconds() })));
+        }
+        else {
+            setDateAndTime(prevDate => (Object.assign(Object.assign({}, prevDate), value)));
+        }
+    }, []);
+    const onDateAndTimeChange = useCallback((value) => {
+        if (value instanceof Date) {
+            setDateAndTime({
+                year: value.getFullYear(),
+                month: value.getMonth(),
+                day: value.getDate(),
+                hours: value.getHours(),
+                minutes: value.getMinutes(),
+                seconds: value.getSeconds(),
+            });
+        }
+        else {
+            setDateAndTime(value);
+        }
+    }, []);
+    useEffect(() => {
+        if (!value) {
+            setDateAndTime({});
+            return;
+        }
+        if (Array.isArray(value)) {
+            onDateAndTimeChange(value[0]);
+        }
+        else {
+            onTimeChange(value);
+        }
+    }, [onDateAndTimeChange, onTimeChange, value]);
+    return {
+        dateAndTime,
+        setDateAndTime,
+        isDateAndTimeFilled,
+        isTimeFilled,
+        isDateFilled,
+        onDateChange,
+        onTimeChange,
+        onDateAndTimeChange,
+    };
+}

package/dist/esm/types.d.ts

@@ -1,3 +1,4 @@
+import { KeyboardEventHandler } from 'react';
 import { ValueOf } from '@snack-uikit/utils';
 import { CALENDAR_MODE, IN_RANGE_POSITION, SIZE, VIEW_MODE } from './constants';
 export type InRangePosition = ValueOf<typeof IN_RANGE_POSITION>;
@@ -24,6 +25,7 @@ export type Cell = {
     onSelect?(date: Date): void;
     onPreselect?(date: Date): void;
     onLeave?(): void;
+    onKeyDown?: KeyboardEventHandler;
 };
 export type FocusDirection = 'prev' | 'next';
 export type BuildCellProps = {
@@ -31,3 +33,13 @@ export type BuildCellProps = {
     isHoliday?: boolean;
 };
 export type BuildCellPropsFunction = (date: Date, viewMode: ViewMode) => BuildCellProps;
+export type TimeValue = {
+    hours?: number;
+    minutes?: number;
+    seconds?: number;
+};
+export type DateAndTime = TimeValue & {
+    year?: number;
+    month?: number;
+    day?: number;
+};

package/dist/esm/utils.d.ts

@@ -3,7 +3,7 @@ import { InRangePosition, Range, ViewMode } from './types';
 export declare const isTheSameDecade: (date1: Date, date2: Date) => boolean;
 export declare const isTheSameYear: (date1: Date, date2: Date) => boolean;
 export declare const isTheSameMonth: (date1: Date, date2: Date) => boolean;
-export declare const isTheSameDate: (date1: Date, date2: Date) => boolean;
+export declare function isTheSameDate(date1: Date, date2: Date): boolean;
 export declare const capitalize: (str: string) => string;
 export declare const getMonthName: (date: Date, locale?: Intl.Locale) => string;
 export declare const getDateLabel: (date: Date) => string;

package/dist/esm/utils.js

@@ -3,7 +3,9 @@ import { IN_RANGE_POSITION, VIEW_MODE } from './constants';
 export const isTheSameDecade = (date1, date2) => Math.floor(date1.getFullYear() / 10) === Math.floor(date2.getFullYear() / 10);
 export const isTheSameYear = (date1, date2) => date1.getFullYear() === date2.getFullYear();
 export const isTheSameMonth = (date1, date2) => isTheSameYear(date1, date2) && date1.getMonth() === date2.getMonth();
-export const isTheSameDate = (date1, date2) => isTheSameMonth(date1, date2) && date1.getDate() === date2.getDate();
+export function isTheSameDate(date1, date2) {
+    return isTheSameMonth(date1, date2) && date1.getDate() === date2.getDate();
+}
 export const capitalize = (str) => str.substring(0, 1).toUpperCase() + str.substring(1);
 export const getMonthName = (date, locale) => {
     const monthName = date.toLocaleString(locale, { month: 'long' });
@@ -52,7 +54,7 @@ export const getInRangePosition = (date, viewMode, range) => {
 };
 export const getEndOfTheDay = (date) => new Date(new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1).valueOf() - 1);
 export const getTestIdBuilder = (testId) => (prefix) => (testId ? `${prefix}-${testId}` : undefined);
-export const getLocale = ({ localeProp, ctxLang } = {}) => { var _a; return localeProp || new Intl.Locale(ctxLang ? ctxLang.replace('_', '-') : (_a = navigator === null || navigator === void 0 ? void 0 : navigator.language) !== null && _a !== void 0 ? _a : 'ru-RU'); };
+export const getLocale = ({ localeProp, ctxLang } = {}) => { var _a; return localeProp || new Intl.Locale(ctxLang ? ctxLang.replace('_', '-') : ((_a = navigator === null || navigator === void 0 ? void 0 : navigator.language) !== null && _a !== void 0 ? _a : 'ru-RU')); };
 export const getStartOfWeek = (locale) => getWeekStartByLocale(locale.language);
 export const isWeekend = (date, viewMode) => {
     if (viewMode === 'month') {

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Calendar",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,7 +36,10 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.23.0",
+    "@snack-uikit/button": "0.19.1",
+    "@snack-uikit/divider": "3.2.0",
+    "@snack-uikit/icons": "0.24.0",
+    "@snack-uikit/list": "0.21.0",
     "@snack-uikit/utils": "3.5.0",
     "classnames": "2.3.2",
     "uncontrollable": "8.0.2",
@@ -45,5 +48,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "62cc21d8606a61a78f80e3a7455b20d6f38474fa"
+  "gitHead": "b7163c6f939105eb34cabec64c9e983ac7958c26"
 }

package/src/components/Calendar/Calendar.tsx

@@ -1,11 +1,11 @@
-import { CSSProperties, RefCallback, useCallback } from 'react';
+import { CSSProperties, RefObject, useCallback } from 'react';
 
 import { WithSupportProps } from '@snack-uikit/utils';
 
 import { CALENDAR_MODE } from '../../constants';
 import { CalendarBase } from '../../helperComponents/CalendarBase';
 import { BuildCellPropsFunction, FocusDirection, Range, Size } from '../../types';
-import { getNormalizedDefaultValue, getNormalizedValue } from './utils';
+import { getNormalizedValue } from './utils';
 
 type CommonCalendarProps = {
   /**
@@ -47,8 +47,8 @@ type CommonCalendarProps = {
   locale?: Intl.Locale;
   /** Колбек потери фокуса. Вызывается со значением `next`, когда фокус покидает компонент, передвигаясь вперед, по клавише `tab`. Со значением `prev` - по клавише стрелки вверх или `shift + tab`. */
   onFocusLeave?(direction: FocusDirection): void;
-  /** Ref-callback на первый доступный интерактивный элемент  */
-  navigationStartRef?: RefCallback<HTMLButtonElement>;
+  /** Ссылка на управление первым элементом навигации */
+  navigationStartRef?: RefObject<{ focus(): void }>;
 };
 
 type DateCalendarProps = CommonCalendarProps & {
@@ -63,16 +63,29 @@ type DateCalendarProps = CommonCalendarProps & {
 };
 
 type MonthCalendarProps = CommonCalendarProps & {
-  /** Режим работы календаря: <br> - `month` - режим выбора месяца */
+  /** <br> - `month` - режим выбора месяца */
   mode: typeof CALENDAR_MODE.Month;
-  /** Выбранное значение.<br> - в режиме month тип `Date` */
+  /** <br> - в режиме month тип `Date` */
   value?: Date;
-  /** Значение по-умолчанию для uncontrolled.<br> - в режиме month тип `Date` */
+  /** <br> - в режиме month тип `Date` */
   defaultValue?: Date;
-  /** Колбек выбора значения.<br> - в режиме month принимает тип `Date` */
+  /** <br> - в режиме month принимает тип `Date` */
   onChangeValue?(value: Date): void;
 };
 
+type DateTimeCalendarProps = CommonCalendarProps & {
+  /** <br> - `date-time` - режим выбора даты и времени */
+  mode: typeof CALENDAR_MODE.DateTime;
+  /** <br> - в режиме date-time тип `Date` */
+  value?: Date;
+  /** <br> - в режиме date-time тип `Date` */
+  defaultValue?: Date;
+  /** <br> - в режиме date-time принимает тип `Date` */
+  onChangeValue?(value: Date): void;
+  /** Показывать ли секунды (только в режиме date-time) */
+  showSeconds?: boolean;
+};
+
 type RangeCalendarProps = CommonCalendarProps & {
   /** <br> - `range` - режим выбора периода */
   mode: typeof CALENDAR_MODE.Range;
@@ -84,14 +97,16 @@ type RangeCalendarProps = CommonCalendarProps & {
   onChangeValue?(value: Range): void;
 };
 
-export type CalendarProps = WithSupportProps<DateCalendarProps | RangeCalendarProps | MonthCalendarProps>;
+export type CalendarProps = WithSupportProps<
+  DateCalendarProps | RangeCalendarProps | MonthCalendarProps | DateTimeCalendarProps
+>;
 
 export function Calendar(props: CalendarProps) {
   const { className, onChangeValue, buildCellProps, mode, ...rest } = props;
 
   const changeValueHandler = useCallback(
     (value: Range) => {
-      if (mode === CALENDAR_MODE.Date || mode === CALENDAR_MODE.Month) {
+      if (mode === CALENDAR_MODE.Date || mode === CALENDAR_MODE.Month || mode === CALENDAR_MODE.DateTime) {
         const [date] = value;
         onChangeValue?.(date);
         return;
@@ -106,8 +121,8 @@ export function Calendar(props: CalendarProps) {
       {...rest}
       mode={mode}
       className={className}
-      value={getNormalizedValue(props)}
-      defaultValue={getNormalizedDefaultValue(props)}
+      value={getNormalizedValue(props.value)}
+      defaultValue={getNormalizedValue(props.defaultValue)}
       onChangeValue={changeValueHandler}
       buildCellProps={buildCellProps}
     />

package/src/components/Calendar/utils.ts

@@ -1,15 +1,22 @@
-import { CALENDAR_MODE } from '../../constants';
 import { Range } from '../../types';
 import { CalendarProps } from './Calendar';
 
-export const getNormalizedValue = ({ value, mode }: CalendarProps): Range | undefined => {
-  if (!value) return value;
-  if (mode === CALENDAR_MODE.Date || mode === CALENDAR_MODE.Month) return [value, value];
-  return value;
-};
+function isRangeValue(value: CalendarProps['value']): value is Range {
+  return Array.isArray(value) && value.length === 2 && value[0] instanceof Date && value[1] instanceof Date;
+}
+
+function isDateValue(value: CalendarProps['value']): value is Date {
+  return value instanceof Date;
+}
 
-export const getNormalizedDefaultValue = ({ defaultValue, mode }: CalendarProps): Range | undefined => {
-  if (!defaultValue) return defaultValue;
-  if (mode === CALENDAR_MODE.Date || mode === CALENDAR_MODE.Month) return [defaultValue, defaultValue];
-  return defaultValue;
+export const getNormalizedValue = (value: CalendarProps['value']): Range | undefined => {
+  if (isRangeValue(value)) {
+    return value;
+  }
+
+  if (isDateValue(value)) {
+    return [value, value];
+  }
+
+  return value;
 };