@snack-uikit/calendar 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.6.0 (2023-12-14)
+
+
+### BREAKING CHANGES
+
+
+* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
+
+
+
+
+## 0.5.1 (2023-12-06)
+
+### Only dependencies have been changed
+* [@snack-uikit/utils@3.1.0](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/utils/CHANGELOG.md)
+
+
+
+
+
 # 0.5.0 (2023-12-06)
 
 
@@ -125,7 +145,8 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## 0.3.4 (2023-10-06)
 
-**Note:** Version bump only for package @snack-uikit/calendar
+### Only dependencies have been changed
+* [@snack-uikit/utils@3.2.0](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/utils/CHANGELOG.md)
 
 
 

package/README.md

@@ -11,14 +11,14 @@
 import { Calendar } from '@snack-uikit/calendar';
 
 <Calendar
-  mode={Calendar.modes.Date}
+  mode='date'
   onChangeValue={(selectedDate: Date) => {
     // do something
   }}
 />
 
 <Calendar
-  mode={Calendar.modes.Range}
+  mode='range'
   onChangeValue={(selectedRange: [Date, Date]) => {
     // do something
   }}
@@ -31,11 +31,11 @@ import { Calendar } from '@snack-uikit/calendar';
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| mode* | enum CalendarMode: `"date"`, `"range"` | - | Режим работы календаря: <br> - `Calendar.modes.Date` - режим выбора даты <br> - `Calendar.modes.Date` - режим выбора периода |
-| size | enum Size: `"s"`, `"m"`, `"l"` | Calendar.sizes.M | Размер |
+| mode* | "date" \| "range" | - | Режим работы календаря: <br> - `date` - режим выбора даты <br> - `range` - режим выбора периода |
+| size | enum Size: `"s"`, `"m"`, `"l"` | m | Размер |
 | today | `number \| Date` | - | Дата сегодняшнего дня |
 | showHolidays | `boolean` | - | Раскрашивает субботу и воскресенье |
-| buildCellProps | `(date: Date, viewMode: ViewMode) => { isDisabled?: boolean; isHoliday?: boolean };` | - | Колбек установки свойств ячейка календаря. Вызывается на построение каждой ячейки. Принимает два параметра: <br> `Date` - дата ячейки <br> `ViewMode`: <br>  - `Calendar.viewMode.Month` отображение месяца, каждая ячейка - 1 день <br>  - `Calendar.viewMode.Year` отображение года, каждая ячейка - 1 месяц <br>  - `Calendar.viewMode.Decade` отображение декады, каждая ячейка - 1 год <br><br> Колбек должен возвращать объект с полями, отвечающими за задизаленность и подкраску ячейки. |
+| buildCellProps | `(date: Date, viewMode: ViewMode) => { isDisabled?: boolean; isHoliday?: boolean };` | - | Колбек установки свойств ячейка календаря. Вызывается на построение каждой ячейки. Принимает два параметра: <br> `Date` - дата ячейки <br> `ViewMode`: <br>  - `month` отображение месяца, каждая ячейка - 1 день <br>  - `year` отображение года, каждая ячейка - 1 месяц <br>  - `decade` отображение декады, каждая ячейка - 1 год <br><br> Колбек должен возвращать объект с полями, отвечающими за задизаленность и подкраску ячейки. |
 | className | `string` | - | CSS-класс контейнера |
 | fitToContainer | `boolean` | true | Отключает предустановленный размер, заставляя компонент подстраиваться к размеру контейнра: (width: 100%, height: 100%). |
 | style | `CSSProperties` | - | Объект со стилями на контейнер. |

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

@@ -1,11 +1,11 @@
 import { CSSProperties, RefCallback } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { CalendarMode, Size, ViewMode } from '../../constants';
-import { BuildCellPropsFunction, FocusDirection, Range } from '../../types';
+import { CALENDAR_MODE } from '../../constants';
+import { BuildCellPropsFunction, FocusDirection, Range, Size } from '../../types';
 type CommonCalendarProps = {
     /**
      * Размер
-     * @default Calendar.sizes.M
+     * @default m
      */
     size?: Size;
     /** Дата сегодняшнего дня */
@@ -16,9 +16,9 @@ type CommonCalendarProps = {
      * Колбек установки свойств ячейка календаря. Вызывается на построение каждой ячейки. Принимает два параметра:
      * <br> `Date` - дата ячейки
      * <br> `ViewMode`:
-     * <br>  - `Calendar.viewMode.Month` отображение месяца, каждая ячейка - 1 день
-     * <br>  - `Calendar.viewMode.Year` отображение года, каждая ячейка - 1 месяц
-     * <br>  - `Calendar.viewMode.Decade` отображение декады, каждая ячейка - 1 год
+     * <br>  - `month` отображение месяца, каждая ячейка - 1 день
+     * <br>  - `year` отображение года, каждая ячейка - 1 месяц
+     * <br>  - `decade` отображение декады, каждая ячейка - 1 год
      * <br><br> Колбек должен возвращать объект с полями, отвечающими за задизаленность и подкраску ячейки.
      * @type (date: Date, viewMode: ViewMode) => { isDisabled?: boolean; isHoliday?: boolean };
      */
@@ -46,8 +46,8 @@ type CommonCalendarProps = {
     navigationStartRef?: RefCallback<HTMLButtonElement>;
 };
 type DateCalendarProps = CommonCalendarProps & {
-    /** Режим работы календаря: <br> - `Calendar.modes.Date` - режим выбора даты */
-    mode: CalendarMode.Date;
+    /** Режим работы календаря: <br> - `date` - режим выбора даты */
+    mode: typeof CALENDAR_MODE.Date;
     /** Выбранное значение.<br> - в режиме date тип `Date` */
     value?: Date;
     /** Значение по-умолчанию для uncontrolled.<br> - в режиме date тип `Date` */
@@ -56,8 +56,8 @@ type DateCalendarProps = CommonCalendarProps & {
     onChangeValue?(value: Date): void;
 };
 type RangeCalendarProps = CommonCalendarProps & {
-    /** <br> - `Calendar.modes.Date` - режим выбора периода */
-    mode: CalendarMode.Range;
+    /** <br> - `range` - режим выбора периода */
+    mode: typeof CALENDAR_MODE.Range;
     /** <br> - в режиме range тип `Range` (`[Date, Date]`) */
     value?: Range;
     /** <br> - в режиме range тип `Range` (`[Date, Date]`) */
@@ -67,9 +67,4 @@ type RangeCalendarProps = CommonCalendarProps & {
 };
 export type CalendarProps = WithSupportProps<DateCalendarProps | RangeCalendarProps>;
 export declare function Calendar(props: CalendarProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Calendar {
-    var sizes: typeof Size;
-    var modes: typeof CalendarMode;
-    var viewMode: typeof ViewMode;
-}
 export {};

package/dist/components/Calendar/Calendar.js

@@ -11,13 +11,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import { CalendarMode, Size, ViewMode } from '../../constants';
+import { CALENDAR_MODE } from '../../constants';
 import { CalendarBase } from '../../helperComponents/CalendarBase';
 import { getNormalizedDefaultValue, getNormalizedValue } from './utils';
 export function Calendar(props) {
     const { className, onChangeValue, buildCellProps, mode } = props, rest = __rest(props, ["className", "onChangeValue", "buildCellProps", "mode"]);
     const changeValueHandler = useCallback((value) => {
-        if (mode === CalendarMode.Date) {
+        if (mode === CALENDAR_MODE.Date) {
             const [date] = value;
             onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(date);
             return;
@@ -26,6 +26,3 @@ export function Calendar(props) {
     }, [onChangeValue, mode]);
     return (_jsx(CalendarBase, Object.assign({}, rest, { mode: mode, className: className, value: getNormalizedValue(props), defaultValue: getNormalizedDefaultValue(props), onChangeValue: changeValueHandler, buildCellProps: buildCellProps })));
 }
-Calendar.sizes = Size;
-Calendar.modes = CalendarMode;
-Calendar.viewMode = ViewMode;

package/dist/components/Calendar/utils.js

@@ -1,15 +1,15 @@
-import { CalendarMode } from '../../constants';
+import { CALENDAR_MODE } from '../../constants';
 export const getNormalizedValue = ({ value, mode }) => {
     if (!value)
         return value;
-    if (mode === CalendarMode.Date)
+    if (mode === CALENDAR_MODE.Date)
         return [value, value];
     return value;
 };
 export const getNormalizedDefaultValue = ({ defaultValue, mode }) => {
     if (!defaultValue)
         return defaultValue;
-    if (mode === CalendarMode.Date)
+    if (mode === CALENDAR_MODE.Date)
         return [defaultValue, defaultValue];
     return defaultValue;
 };

package/dist/constants.d.ts

@@ -1,24 +1,24 @@
-export declare enum ViewMode {
-    Month = "month",
-    Year = "year",
-    Decade = "decade"
-}
-export declare enum CalendarMode {
-    Date = "date",
-    Range = "range"
-}
-export declare enum InRangePosition {
-    Out = "out",
-    Start = "start",
-    In = "in",
-    End = "end",
-    StartEnd = "start-end"
-}
-export declare enum Size {
-    S = "s",
-    M = "m",
-    L = "l"
-}
+export declare const VIEW_MODE: {
+    readonly Month: "month";
+    readonly Year: "year";
+    readonly Decade: "decade";
+};
+export declare const CALENDAR_MODE: {
+    readonly Date: "date";
+    readonly Range: "range";
+};
+export declare const IN_RANGE_POSITION: {
+    readonly Out: "out";
+    readonly Start: "start";
+    readonly In: "in";
+    readonly End: "end";
+    readonly StartEnd: "start-end";
+};
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
 export declare const GRID_SIZE: {
     readonly month: {
         readonly rows: 6;

package/dist/constants.js

@@ -1,31 +1,27 @@
-export var ViewMode;
-(function (ViewMode) {
-    ViewMode["Month"] = "month";
-    ViewMode["Year"] = "year";
-    ViewMode["Decade"] = "decade";
-})(ViewMode || (ViewMode = {}));
-export var CalendarMode;
-(function (CalendarMode) {
-    CalendarMode["Date"] = "date";
-    CalendarMode["Range"] = "range";
-})(CalendarMode || (CalendarMode = {}));
-export var InRangePosition;
-(function (InRangePosition) {
-    InRangePosition["Out"] = "out";
-    InRangePosition["Start"] = "start";
-    InRangePosition["In"] = "in";
-    InRangePosition["End"] = "end";
-    InRangePosition["StartEnd"] = "start-end";
-})(InRangePosition || (InRangePosition = {}));
-export var Size;
-(function (Size) {
-    Size["S"] = "s";
-    Size["M"] = "m";
-    Size["L"] = "l";
-})(Size || (Size = {}));
+export const VIEW_MODE = {
+    Month: 'month',
+    Year: 'year',
+    Decade: 'decade',
+};
+export const CALENDAR_MODE = {
+    Date: 'date',
+    Range: 'range',
+};
+export const IN_RANGE_POSITION = {
+    Out: 'out',
+    Start: 'start',
+    In: 'in',
+    End: 'end',
+    StartEnd: 'start-end',
+};
+export const SIZE = {
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
 export const GRID_SIZE = {
-    [ViewMode.Month]: { rows: 6, columns: 7 },
-    [ViewMode.Year]: { rows: 4, columns: 3 },
-    [ViewMode.Decade]: { rows: 4, columns: 3 },
+    [VIEW_MODE.Month]: { rows: 6, columns: 7 },
+    [VIEW_MODE.Year]: { rows: 4, columns: 3 },
+    [VIEW_MODE.Decade]: { rows: 4, columns: 3 },
 };
 export const AUTOFOCUS = 'autofocus';

package/dist/helperComponents/CalendarBase/CalendarBase.d.ts

@@ -1,7 +1,6 @@
 import { CSSProperties, RefCallback } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { CalendarMode, Size } from '../../constants';
-import { BuildCellPropsFunction, FocusDirection, Range } from '../../types';
+import { BuildCellPropsFunction, CalendarMode, FocusDirection, Range, Size } from '../../types';
 export type CalendarBaseProps = WithSupportProps<{
     mode: CalendarMode;
     onChangeValue(value: Range): void;

package/dist/helperComponents/CalendarBase/CalendarBase.js

@@ -14,7 +14,7 @@ import cn from 'classnames';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { AUTOFOCUS, Size, ViewMode } from '../../constants';
+import { AUTOFOCUS, SIZE, VIEW_MODE } from '../../constants';
 import { getEndOfTheDay, getLocale, getTestIdBuilder, sortDates } from '../../utils';
 import { CalendarBody } from '../CalendarBody';
 import { CalendarContext } from '../CalendarContext';
@@ -23,13 +23,13 @@ import { ColumnLabels } from '../ColumnLabels';
 import { useViewDate } from './hooks';
 import styles from './styles.module.css';
 const CONTAINER_SIZE_MAP = {
-    [Size.S]: styles.calendarSizeS,
-    [Size.M]: styles.calendarSizeM,
-    [Size.L]: styles.calendarSizeL,
+    [SIZE.S]: styles.calendarSizeS,
+    [SIZE.M]: styles.calendarSizeM,
+    [SIZE.L]: styles.calendarSizeL,
 };
 export function CalendarBase(_a) {
-    var { className, mode, size = Size.M, autofocus, fitToContainer = true, value: valueProp, defaultValue, onChangeValue, today: todayProp = new Date(), showHolidays = false, style, locale: localeProp, onFocusLeave, buildCellProps, 'data-test-id': testId, navigationStartRef } = _a, rest = __rest(_a, ["className", "mode", "size", "autofocus", "fitToContainer", "value", "defaultValue", "onChangeValue", "today", "showHolidays", "style", "locale", "onFocusLeave", "buildCellProps", 'data-test-id', "navigationStartRef"]);
-    const [viewMode, setViewMode] = useState(ViewMode.Month);
+    var { className, mode, size = SIZE.M, autofocus, fitToContainer = true, value: valueProp, defaultValue, onChangeValue, today: todayProp = new Date(), showHolidays = false, style, locale: localeProp, onFocusLeave, buildCellProps, 'data-test-id': testId, navigationStartRef } = _a, rest = __rest(_a, ["className", "mode", "size", "autofocus", "fitToContainer", "value", "defaultValue", "onChangeValue", "today", "showHolidays", "style", "locale", "onFocusLeave", "buildCellProps", 'data-test-id', "navigationStartRef"]);
+    const [viewMode, setViewMode] = useState(VIEW_MODE.Month);
     const [viewShift, setViewShift] = useState(0);
     const [value, setValueState] = useUncontrolledProp(valueProp, defaultValue, onChangeValue);
     const today = typeof todayProp === 'number' ? new Date(todayProp) : todayProp;

package/dist/helperComponents/CalendarBase/hooks.d.ts

@@ -1,2 +1,2 @@
-import { ViewMode } from '../../constants';
+import { ViewMode } from '../../types';
 export declare function useViewDate(referenceDate: Date, viewMode: ViewMode, viewShift: number): Date;

package/dist/helperComponents/CalendarBase/hooks.js

@@ -1,12 +1,12 @@
-import { ViewMode } from '../../constants';
+import { VIEW_MODE } from '../../constants';
 export function useViewDate(referenceDate, viewMode, viewShift) {
     switch (viewMode) {
-        case ViewMode.Decade:
+        case VIEW_MODE.Decade:
             const decadeFirstYear = Math.floor(referenceDate.getFullYear() / 10) * 10;
             return new Date(decadeFirstYear + viewShift * 10, 1, 1);
-        case ViewMode.Year:
+        case VIEW_MODE.Year:
             return new Date(referenceDate.getFullYear() + viewShift, 1, 1);
-        case ViewMode.Month:
+        case VIEW_MODE.Month:
         default:
             return new Date(referenceDate.getFullYear(), referenceDate.getMonth() + viewShift, 1);
     }

package/dist/helperComponents/CalendarBody/CalendarBody.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from 'react';
-import { ViewMode } from '../../constants';
+import { VIEW_MODE } from '../../constants';
 import { CalendarContext } from '../CalendarContext';
 import { DecadeView } from '../DecadeView';
 import { MonthView } from '../MonthView';
@@ -8,11 +8,11 @@ import { YearView } from '../YearView';
 export function CalendarBody() {
     const { viewMode } = useContext(CalendarContext);
     switch (viewMode) {
-        case ViewMode.Decade:
+        case VIEW_MODE.Decade:
             return _jsx(DecadeView, {});
-        case ViewMode.Year:
+        case VIEW_MODE.Year:
             return _jsx(YearView, {});
-        case ViewMode.Month:
+        case VIEW_MODE.Month:
         default:
             return _jsx(MonthView, {});
     }

package/dist/helperComponents/CalendarContext/CalendarContext.d.ts

@@ -1,6 +1,5 @@
 import { MutableRefObject, RefCallback } from 'react';
-import { CalendarMode, Size, ViewMode } from '../../constants';
-import { BuildCellPropsFunction, FocusDirection, Range } from '../../types';
+import { BuildCellPropsFunction, CalendarMode, FocusDirection, Range, Size, ViewMode } from '../../types';
 export type CalendarContextType = {
     size: Size;
     /** Дата текущего дня */

package/dist/helperComponents/CalendarContext/CalendarContext.js

@@ -1,17 +1,17 @@
 import { createContext } from 'react';
-import { CalendarMode, Size, ViewMode } from '../../constants';
+import { CALENDAR_MODE, SIZE, VIEW_MODE } from '../../constants';
 import { getLocale } from '../../utils';
 const stub = () => {
     /* it is a stub */
 };
 export const CalendarContext = createContext({
     locale: getLocale(),
-    size: Size.M,
+    size: SIZE.M,
     today: new Date(),
     viewDate: new Date(),
     referenceDate: new Date(),
-    mode: CalendarMode.Date,
-    viewMode: ViewMode.Month,
+    mode: CALENDAR_MODE.Date,
+    viewMode: VIEW_MODE.Month,
     viewShift: 0,
     setFocus: stub,
     setValue: stub,

package/dist/helperComponents/CalendarNavigation/CalendarNavigation.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from 'react';
 import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
-import { GRID_SIZE, Size, ViewMode } from '../../constants';
+import { GRID_SIZE, SIZE, VIEW_MODE } from '../../constants';
 import { Button } from '../Button';
 import { CalendarContext } from '../CalendarContext';
 import { stringifyAddress } from '../Item/utils';
@@ -10,37 +10,37 @@ import { usePeriodName } from './hooks';
 import styles from './styles.module.css';
 import { getShift } from './utils';
 const VIEW_MODE_MAP = {
-    [ViewMode.Month]: ViewMode.Year,
-    [ViewMode.Year]: ViewMode.Decade,
-    [ViewMode.Decade]: ViewMode.Decade,
+    [VIEW_MODE.Month]: VIEW_MODE.Year,
+    [VIEW_MODE.Year]: VIEW_MODE.Decade,
+    [VIEW_MODE.Decade]: VIEW_MODE.Decade,
 };
 const ICONS = {
     UP: {
-        [Size.S]: _jsx(ChevronUpSVG, { size: 16 }),
-        [Size.M]: _jsx(ChevronUpSVG, {}),
-        [Size.L]: _jsx(ChevronUpSVG, {}),
+        [SIZE.S]: _jsx(ChevronUpSVG, { size: 16 }),
+        [SIZE.M]: _jsx(ChevronUpSVG, {}),
+        [SIZE.L]: _jsx(ChevronUpSVG, {}),
     },
     DOWN: {
-        [Size.S]: _jsx(ChevronDownSVG, { size: 16 }),
-        [Size.M]: _jsx(ChevronDownSVG, {}),
-        [Size.L]: _jsx(ChevronDownSVG, {}),
+        [SIZE.S]: _jsx(ChevronDownSVG, { size: 16 }),
+        [SIZE.M]: _jsx(ChevronDownSVG, {}),
+        [SIZE.L]: _jsx(ChevronDownSVG, {}),
     },
 };
 export function CalendarNavigation() {
     const { referenceDate, viewDate, viewShift, setViewShift, viewMode, setViewMode, focus, setFocus, getTestId, size, firstNotDisableCell, } = useContext(CalendarContext);
     const periodName = usePeriodName();
-    const levelButtonDisabled = viewMode === ViewMode.Decade;
+    const levelButtonDisabled = viewMode === VIEW_MODE.Decade;
     const isArrowButtonFocused = focus && [NEXT_PERIOD_BUTTON_FOCUS_NAME, PREV_PERIOD_BUTTON_FOCUS_NAME].includes(focus);
     return (_jsxs("div", Object.assign({ className: styles.wrapper }, { children: [_jsx(Button, { disabled: levelButtonDisabled, onClick: () => {
-                    if (viewMode === ViewMode.Year) {
+                    if (viewMode === VIEW_MODE.Year) {
                         setFocus(PREV_PERIOD_BUTTON_FOCUS_NAME);
                     }
                     setViewShift(getShift(referenceDate, viewDate, viewMode));
                     setViewMode(VIEW_MODE_MAP[viewMode]);
-                }, label: periodName, "data-test-id": getTestId('period-level'), focusName: LEVEL_BUTTON_FOCUS_NAME, tabIndex: isArrowButtonFocused ? -1 : 0, icon: viewMode !== ViewMode.Decade ? ICONS.DOWN[size] : undefined, onRightArrowKeyDown: () => setFocus(PREV_PERIOD_BUTTON_FOCUS_NAME), onDownArrowKeyDown: () => { var _a; return setFocus(stringifyAddress((_a = firstNotDisableCell === null || firstNotDisableCell === void 0 ? void 0 : firstNotDisableCell.current) !== null && _a !== void 0 ? _a : [0, 0])); }, useNavigationStartRef: true }), _jsxs("div", { children: [_jsx(Button, { onClick: () => setViewShift(viewShift - 1), "data-test-id": getTestId('period-prev'), focusName: PREV_PERIOD_BUTTON_FOCUS_NAME, tabIndex: focus === PREV_PERIOD_BUTTON_FOCUS_NAME || (levelButtonDisabled && focus !== NEXT_PERIOD_BUTTON_FOCUS_NAME)
+                }, label: periodName, "data-test-id": getTestId('period-level'), focusName: LEVEL_BUTTON_FOCUS_NAME, tabIndex: isArrowButtonFocused ? -1 : 0, icon: viewMode !== VIEW_MODE.Decade ? ICONS.DOWN[size] : undefined, onRightArrowKeyDown: () => setFocus(PREV_PERIOD_BUTTON_FOCUS_NAME), onDownArrowKeyDown: () => { var _a; return setFocus(stringifyAddress((_a = firstNotDisableCell === null || firstNotDisableCell === void 0 ? void 0 : firstNotDisableCell.current) !== null && _a !== void 0 ? _a : [0, 0])); }, useNavigationStartRef: true }), _jsxs("div", { children: [_jsx(Button, { onClick: () => setViewShift(viewShift - 1), "data-test-id": getTestId('period-prev'), focusName: PREV_PERIOD_BUTTON_FOCUS_NAME, tabIndex: focus === PREV_PERIOD_BUTTON_FOCUS_NAME || (levelButtonDisabled && focus !== NEXT_PERIOD_BUTTON_FOCUS_NAME)
                             ? 0
                             : -1, icon: ICONS.UP[size], onRightArrowKeyDown: () => setFocus(NEXT_PERIOD_BUTTON_FOCUS_NAME), onLeftArrowKeyDown: () => setFocus(LEVEL_BUTTON_FOCUS_NAME), onDownArrowKeyDown: () => {
-                            const rightGap = viewMode === ViewMode.Month ? 2 : 1;
+                            const rightGap = viewMode === VIEW_MODE.Month ? 2 : 1;
                             setFocus(stringifyAddress([0, GRID_SIZE[viewMode].columns - rightGap]));
                         } }), _jsx(Button, { onClick: () => setViewShift(viewShift + 1), "data-test-id": getTestId('period-next'), focusName: NEXT_PERIOD_BUTTON_FOCUS_NAME, tabIndex: focus === NEXT_PERIOD_BUTTON_FOCUS_NAME ? 0 : -1, icon: ICONS.DOWN[size], onLeftArrowKeyDown: () => setFocus(PREV_PERIOD_BUTTON_FOCUS_NAME), onDownArrowKeyDown: () => setFocus(stringifyAddress([0, GRID_SIZE[viewMode].columns - 1])) })] })] })));
 }

package/dist/helperComponents/CalendarNavigation/hooks.js

@@ -1,16 +1,16 @@
 import { useContext } from 'react';
-import { ViewMode } from '../../constants';
+import { VIEW_MODE } from '../../constants';
 import { getMonthName } from '../../utils';
 import { CalendarContext } from '../CalendarContext';
 export function usePeriodName() {
     const { viewDate, viewMode, locale } = useContext(CalendarContext);
     switch (viewMode) {
-        case ViewMode.Month:
+        case VIEW_MODE.Month:
             const year = viewDate.getFullYear();
             return `${getMonthName(viewDate, locale)} ${year}`;
-        case ViewMode.Year:
+        case VIEW_MODE.Year:
             return viewDate.getFullYear().toString();
-        case ViewMode.Decade:
+        case VIEW_MODE.Decade:
             const decadeStart = viewDate.getFullYear();
             return `${decadeStart}-${decadeStart + 9}`;
         default:

package/dist/helperComponents/CalendarNavigation/utils.d.ts

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

package/dist/helperComponents/CalendarNavigation/utils.js

@@ -1,12 +1,12 @@
-import { ViewMode } from '../../constants';
+import { VIEW_MODE } from '../../constants';
 import { getDecadeShift, getYearShift } from '../../utils';
 export const getShift = (referenceDate, viewDate, currentViewLevel) => {
     switch (currentViewLevel) {
-        case ViewMode.Month:
+        case VIEW_MODE.Month:
             return getYearShift(referenceDate, viewDate);
-        case ViewMode.Year:
+        case VIEW_MODE.Year:
             return getDecadeShift(referenceDate, viewDate);
-        case ViewMode.Decade:
+        case VIEW_MODE.Decade:
         default:
             return 0;
     }

package/dist/helperComponents/ColumnLabels/ColumnLabels.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
 import { useContext, useMemo } from 'react';
-import { ViewMode } from '../../constants';
+import { VIEW_MODE } from '../../constants';
 import { CalendarContext } from '../CalendarContext';
 import { ColumnLabel } from '../ColumnLabel';
 import styles from './styles.module.css';
@@ -9,7 +9,7 @@ import { getWeekLabels } from './utils';
 export function ColumnLabels({ className }) {
     const { viewMode, locale, size } = useContext(CalendarContext);
     const labels = useMemo(() => getWeekLabels(locale), [locale]);
-    if (viewMode === ViewMode.Month) {
+    if (viewMode === VIEW_MODE.Month) {
         return (_jsx("div", Object.assign({ className: cn(styles.row, className), "data-size": size }, { children: labels.map(label => (_jsx(ColumnLabel, { label: label }, label))) })));
     }
     return null;

package/dist/helperComponents/DecadeView/DecadeView.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from 'react';
-import { ViewMode } from '../../constants';
+import { VIEW_MODE } from '../../constants';
 import { useGrid } from '../../hooks';
 import { getYearLabel, getYearShift, isTheSameDecade, isTheSameYear } from '../../utils';
 import { CalendarContext } from '../CalendarContext';
@@ -15,7 +15,7 @@ export function DecadeView() {
         getItemLabel: getYearLabel,
         onSelect(date) {
             setViewShift(getYearShift(referenceDate, date));
-            setViewMode(ViewMode.Year);
+            setViewMode(VIEW_MODE.Year);
         },
         onPreselect(date) {
             if (preselectedRange) {

package/dist/helperComponents/DecadeView/utils.js

@@ -1,9 +1,9 @@
-import { GRID_SIZE, ViewMode } from '../../constants';
+import { GRID_SIZE, VIEW_MODE } from '../../constants';
 export const buildDecadeGrid = (date) => {
     const result = [];
     const year = date.getFullYear();
     let shift = -1;
-    const { rows, columns } = GRID_SIZE[ViewMode.Decade];
+    const { rows, columns } = GRID_SIZE[VIEW_MODE.Decade];
     for (let i = 0; i < rows; i++) {
         const row = [];
         for (let j = 0; j < columns; j++) {

package/dist/helperComponents/Item/Item.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import { useContext, useLayoutEffect, useRef } from 'react';
-import { AUTOFOCUS, InRangePosition } from '../../constants';
+import { AUTOFOCUS, IN_RANGE_POSITION } from '../../constants';
 import { CalendarContext } from '../CalendarContext';
 import { useKeyboardFocus } from './hooks';
 import styles from './styles.module.css';
@@ -32,7 +32,7 @@ export function Item({ data, className }) {
         'data-is-disabled': isDisabled || undefined,
         'data-size': size,
     };
-    const isInRange = inRangePosition !== InRangePosition.Out;
+    const isInRange = inRangePosition !== IN_RANGE_POSITION.Out;
     date.toLocaleString(locale, { weekday: 'short' });
     const handleSelect = (date) => {
         if (!isDisabled && onSelect) {

package/dist/helperComponents/MonthView/MonthView.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from 'react';
-import { CalendarMode } from '../../constants';
+import { CALENDAR_MODE } from '../../constants';
 import { useGrid } from '../../hooks';
 import { getDateLabel, isTheSameDate, isTheSameMonth } from '../../utils';
 import { CalendarContext } from '../CalendarContext';
@@ -14,7 +14,7 @@ export function MonthView() {
         isInPeriod: isTheSameMonth,
         getItemLabel: getDateLabel,
         onSelect(date) {
-            if (mode === CalendarMode.Range) {
+            if (mode === CALENDAR_MODE.Range) {
                 preselectedRange ? completePreselect(date) : startPreselect(date);
                 return;
             }

package/dist/helperComponents/MonthView/utils.js

@@ -1,4 +1,4 @@
-import { GRID_SIZE, ViewMode } from '../../constants';
+import { GRID_SIZE, VIEW_MODE } from '../../constants';
 import { getStartOfWeek } from '../../utils';
 import { WEEK_STARTS_WITH_MONDAY, WEEK_STARTS_WITH_SUNDAY } from './constants';
 export const buildMonthGrid = (date, locale) => {
@@ -6,7 +6,7 @@ export const buildMonthGrid = (date, locale) => {
     const WEEK = getStartOfWeek(locale) === 0 ? WEEK_STARTS_WITH_SUNDAY : WEEK_STARTS_WITH_MONDAY;
     const startGap = WEEK.indexOf(date.getDay());
     let currentDate = new Date(date.getFullYear(), date.getMonth(), 1 - startGap);
-    const { rows } = GRID_SIZE[ViewMode.Month];
+    const { rows } = GRID_SIZE[VIEW_MODE.Month];
     for (let i = 0; i < rows; i++) {
         const week = [];
         for (let j = 0; j < WEEK.length; j++) {

package/dist/helperComponents/YearView/YearView.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from 'react';
-import { AUTOFOCUS, ViewMode } from '../../constants';
+import { AUTOFOCUS, VIEW_MODE } from '../../constants';
 import { useGrid } from '../../hooks';
 import { getMonthName, getMonthShift, isTheSameMonth, isTheSameYear } from '../../utils';
 import { CalendarContext } from '../CalendarContext';
@@ -16,7 +16,7 @@ export function YearView() {
         onSelect(date) {
             setFocus(AUTOFOCUS);
             setViewShift(getMonthShift(referenceDate, date));
-            setViewMode(ViewMode.Month);
+            setViewMode(VIEW_MODE.Month);
         },
         onPreselect(date) {
             if (preselectedRange) {