@snack-uikit/calendar 0.7.12 → 0.8.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.8.0 (2024-10-08)
+
+
+### Features
+
+* **PSD-834:** add calendar mode month ([d75096e](https://github.com/cloud-ru-tech/snack-uikit/commit/d75096e9fb79c0ce2928e7478e23bc6e027d8fc0))
+
+
+
+
+
 ## 0.7.12 (2024-09-26)
 
 **Note:** Version bump only for package @snack-uikit/calendar

package/README.md

@@ -31,7 +31,7 @@ import { Calendar } from '@snack-uikit/calendar';
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| mode* | "date" \| "range" | - | Режим работы календаря: <br> - `date` - режим выбора даты <br> - `range` - режим выбора периода |
+| mode* | "date" \| "range" \| "month" | - | Режим работы календаря: <br> - `date` - режим выбора даты <br> - `range` - режим выбора периода Режим работы календаря: <br> - `month` - режим выбора месяца |
 | size | enum Size: `"s"`, `"m"`, `"l"` | m | Размер |
 | today | `number \| Date` | - | Дата сегодняшнего дня |
 | showHolidays | `boolean` | - | Раскрашивает субботу и воскресенье |
@@ -43,9 +43,9 @@ import { Calendar } from '@snack-uikit/calendar';
 | locale | `Intl.Locale` | Проставляется в соответствие с языком в настройках браузера | Локаль, в соответствие с которой выставляется язык названий и первый день недели |
 | onFocusLeave | `(direction: FocusDirection) => void` | - | Колбек потери фокуса. Вызывается со значением `next`, когда фокус покидает компонент, передвигаясь вперед, по клавише `tab`. Со значением `prev` - по клавише стрелки вверх или `shift + tab`. |
 | navigationStartRef | `RefCallback<HTMLButtonElement>` | - | Ref-callback на первый доступный интерактивный элемент |
-| value | `Date \| Range` | - | Выбранное значение.<br> - в режиме date тип `Date` <br> - в режиме range тип `Range` (`[Date, Date]`) |
-| defaultValue | `Date \| Range` | - | Значение по-умолчанию для uncontrolled.<br> - в режиме date тип `Date` <br> - в режиме range тип `Range` (`[Date, Date]`) |
-| onChangeValue | `((value: Date) => void) \| ((value: Range) => void)` | - | Колбек выбора значения.<br> - в режиме date принимает тип `Date` <br> - в режиме range принимает тип `Range` |
+| value | `Date \| Range` | - | Выбранное значение.<br> - в режиме date тип `Date` <br> - в режиме range тип `Range` (`[Date, Date]`) Выбранное значение.<br> - в режиме month тип `Date` |
+| defaultValue | `Date \| Range` | - | Значение по-умолчанию для uncontrolled.<br> - в режиме date тип `Date` <br> - в режиме range тип `Range` (`[Date, Date]`) Значение по-умолчанию для uncontrolled.<br> - в режиме month тип `Date` |
+| onChangeValue | `((value: Date) => void) \| ((value: Range) => void) \| ((value: Date) => void)` | - | Колбек выбора значения.<br> - в режиме date принимает тип `Date` <br> - в режиме range принимает тип `Range` Колбек выбора значения.<br> - в режиме month принимает тип `Date` |
 
 
 [//]: DOCUMENTATION_SECTION_END

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

@@ -55,6 +55,16 @@ type DateCalendarProps = CommonCalendarProps & {
     /** Колбек выбора значения.<br> - в режиме date принимает тип `Date` */
     onChangeValue?(value: Date): void;
 };
+type MonthCalendarProps = CommonCalendarProps & {
+    /** Режим работы календаря: <br> - `month` - режим выбора месяца */
+    mode: typeof CALENDAR_MODE.Month;
+    /** Выбранное значение.<br> - в режиме month тип `Date` */
+    value?: Date;
+    /** Значение по-умолчанию для uncontrolled.<br> - в режиме month тип `Date` */
+    defaultValue?: Date;
+    /** Колбек выбора значения.<br> - в режиме month принимает тип `Date` */
+    onChangeValue?(value: Date): void;
+};
 type RangeCalendarProps = CommonCalendarProps & {
     /** <br> - `range` - режим выбора периода */
     mode: typeof CALENDAR_MODE.Range;
@@ -65,6 +75,6 @@ type RangeCalendarProps = CommonCalendarProps & {
     /** <br> - в режиме range принимает тип `Range` */
     onChangeValue?(value: Range): void;
 };
-export type CalendarProps = WithSupportProps<DateCalendarProps | RangeCalendarProps>;
+export type CalendarProps = WithSupportProps<DateCalendarProps | RangeCalendarProps | MonthCalendarProps>;
 export declare function Calendar(props: CalendarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Calendar/Calendar.js

@@ -17,7 +17,7 @@ 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 === CALENDAR_MODE.Date) {
+        if (mode === CALENDAR_MODE.Date || mode === CALENDAR_MODE.Month) {
             const [date] = value;
             onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(date);
             return;

package/dist/components/Calendar/utils.js

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

package/dist/constants.d.ts

@@ -6,6 +6,7 @@ export declare const VIEW_MODE: {
 export declare const CALENDAR_MODE: {
     readonly Date: "date";
     readonly Range: "range";
+    readonly Month: "month";
 };
 export declare const IN_RANGE_POSITION: {
     readonly Out: "out";

package/dist/constants.js

@@ -6,6 +6,7 @@ export const VIEW_MODE = {
 export const CALENDAR_MODE = {
     Date: 'date',
     Range: 'range',
+    Month: 'month',
 };
 export const IN_RANGE_POSITION = {
     Out: 'out',

package/dist/helperComponents/CalendarBase/CalendarBase.js

@@ -15,7 +15,7 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 import { useLocale } from '@snack-uikit/locale';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { AUTOFOCUS, SIZE, VIEW_MODE } from '../../constants';
+import { AUTOFOCUS, CALENDAR_MODE, SIZE, VIEW_MODE } from '../../constants';
 import { getEndOfTheDay, getLocale, getTestIdBuilder, sortDates } from '../../utils';
 import { CalendarBody } from '../CalendarBody';
 import { CalendarContext } from '../CalendarContext';
@@ -30,7 +30,7 @@ const CONTAINER_SIZE_MAP = {
 };
 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(VIEW_MODE.Month);
+    const [viewMode, setViewMode] = useState(mode === CALENDAR_MODE.Month ? VIEW_MODE.Year : 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/YearView/YearView.js

@@ -1,19 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from 'react';
-import { AUTOFOCUS, VIEW_MODE } from '../../constants';
+import { AUTOFOCUS, CALENDAR_MODE, VIEW_MODE } from '../../constants';
 import { useGrid } from '../../hooks';
 import { getMonthName, getMonthShift, isTheSameMonth, isTheSameYear } from '../../utils';
 import { CalendarContext } from '../CalendarContext';
 import { Grid } from '../Grid';
 import { buildYearGrid } from './utils';
 export function YearView() {
-    const { referenceDate, setViewMode, setViewShift, setFocus, preselectedRange, continuePreselect, restartPreselect, locale, } = useContext(CalendarContext);
+    const { referenceDate, setViewMode, setViewShift, setFocus, preselectedRange, continuePreselect, restartPreselect, locale, setValue, mode, } = useContext(CalendarContext);
     const grid = useGrid({
         buildGrid: buildYearGrid,
         isTheSameItem: isTheSameMonth,
         isInPeriod: isTheSameYear,
         getItemLabel: date => getMonthName(date, locale),
         onSelect(date) {
+            if (mode === CALENDAR_MODE.Month) {
+                setValue([date, date]);
+                return;
+            }
             setFocus(AUTOFOCUS);
             setViewShift(getMonthShift(referenceDate, date));
             setViewMode(VIEW_MODE.Month);

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Calendar",
-  "version": "0.7.12",
+  "version": "0.8.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -41,5 +41,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "6f68e2729e48e5b34674af649dc9dfb3bda3951f"
+  "gitHead": "ef539a5c304d3b191dc60005119fcdd51a4b74cc"
 }

package/src/components/Calendar/Calendar.tsx

@@ -62,6 +62,17 @@ type DateCalendarProps = CommonCalendarProps & {
   onChangeValue?(value: Date): void;
 };
 
+type MonthCalendarProps = CommonCalendarProps & {
+  /** Режим работы календаря: <br> - `month` - режим выбора месяца */
+  mode: typeof CALENDAR_MODE.Month;
+  /** Выбранное значение.<br> - в режиме month тип `Date` */
+  value?: Date;
+  /** Значение по-умолчанию для uncontrolled.<br> - в режиме month тип `Date` */
+  defaultValue?: Date;
+  /** Колбек выбора значения.<br> - в режиме month принимает тип `Date` */
+  onChangeValue?(value: Date): void;
+};
+
 type RangeCalendarProps = CommonCalendarProps & {
   /** <br> - `range` - режим выбора периода */
   mode: typeof CALENDAR_MODE.Range;
@@ -73,14 +84,14 @@ type RangeCalendarProps = CommonCalendarProps & {
   onChangeValue?(value: Range): void;
 };
 
-export type CalendarProps = WithSupportProps<DateCalendarProps | RangeCalendarProps>;
+export type CalendarProps = WithSupportProps<DateCalendarProps | RangeCalendarProps | MonthCalendarProps>;
 
 export function Calendar(props: CalendarProps) {
   const { className, onChangeValue, buildCellProps, mode, ...rest } = props;
 
   const changeValueHandler = useCallback(
     (value: Range) => {
-      if (mode === CALENDAR_MODE.Date) {
+      if (mode === CALENDAR_MODE.Date || mode === CALENDAR_MODE.Month) {
         const [date] = value;
         onChangeValue?.(date);
         return;

package/src/components/Calendar/utils.ts

@@ -4,12 +4,12 @@ import { CalendarProps } from './Calendar';
 
 export const getNormalizedValue = ({ value, mode }: CalendarProps): Range | undefined => {
   if (!value) return value;
-  if (mode === CALENDAR_MODE.Date) return [value, value];
+  if (mode === CALENDAR_MODE.Date || mode === CALENDAR_MODE.Month) return [value, value];
   return value;
 };
 
 export const getNormalizedDefaultValue = ({ defaultValue, mode }: CalendarProps): Range | undefined => {
   if (!defaultValue) return defaultValue;
-  if (mode === CALENDAR_MODE.Date) return [defaultValue, defaultValue];
+  if (mode === CALENDAR_MODE.Date || mode === CALENDAR_MODE.Month) return [defaultValue, defaultValue];
   return defaultValue;
 };

package/src/constants.ts

@@ -7,6 +7,7 @@ export const VIEW_MODE = {
 export const CALENDAR_MODE = {
   Date: 'date',
   Range: 'range',
+  Month: 'month',
 } as const;
 
 export const IN_RANGE_POSITION = {

package/src/helperComponents/CalendarBase/CalendarBase.tsx

@@ -5,7 +5,7 @@ import { useUncontrolledProp } from 'uncontrollable';
 import { useLocale } from '@snack-uikit/locale';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { AUTOFOCUS, SIZE, VIEW_MODE } from '../../constants';
+import { AUTOFOCUS, CALENDAR_MODE, SIZE, VIEW_MODE } from '../../constants';
 import { BuildCellPropsFunction, CalendarMode, FocusDirection, Range, Size, ViewMode } from '../../types';
 import { getEndOfTheDay, getLocale, getTestIdBuilder, sortDates } from '../../utils';
 import { CalendarBody } from '../CalendarBody';
@@ -58,7 +58,7 @@ export function CalendarBase({
   navigationStartRef,
   ...rest
 }: CalendarBaseProps) {
-  const [viewMode, setViewMode] = useState<ViewMode>(VIEW_MODE.Month);
+  const [viewMode, setViewMode] = useState<ViewMode>(mode === CALENDAR_MODE.Month ? VIEW_MODE.Year : VIEW_MODE.Month);
   const [viewShift, setViewShift] = useState<number>(0);
   const [value, setValueState] = useUncontrolledProp<Range | undefined>(valueProp, defaultValue, onChangeValue);
   const today = typeof todayProp === 'number' ? new Date(todayProp) : todayProp;

package/src/helperComponents/YearView/YearView.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 
-import { AUTOFOCUS, VIEW_MODE } from '../../constants';
+import { AUTOFOCUS, CALENDAR_MODE, VIEW_MODE } from '../../constants';
 import { useGrid } from '../../hooks';
 import { getMonthName, getMonthShift, isTheSameMonth, isTheSameYear } from '../../utils';
 import { CalendarContext } from '../CalendarContext';
@@ -17,6 +17,8 @@ export function YearView() {
     continuePreselect,
     restartPreselect,
     locale,
+    setValue,
+    mode,
   } = useContext(CalendarContext);
 
   const grid = useGrid({
@@ -26,6 +28,11 @@ export function YearView() {
     getItemLabel: date => getMonthName(date, locale),
 
     onSelect(date: Date) {
+      if (mode === CALENDAR_MODE.Month) {
+        setValue([date, date]);
+        return;
+      }
+
       setFocus(AUTOFOCUS);
       setViewShift(getMonthShift(referenceDate, date));
       setViewMode(VIEW_MODE.Month);