@gravity-ui/date-components 3.2.3 → 3.3.0

package/dist/cjs/components/utils/validation/i18n/ru.json

@@ -2,5 +2,11 @@
   "Value must be {minValue} or later.": "{{value}} должно ровняться {{minValue}} или быть позже.",
   "Value must be {maxValue} or earlier.": "{{value}} должно ровняться {{maxValue}} или быть раньше.",
   "Selected date unavailable.": "Выбранная дата недоступна.",
-  "Value is required.": "{{value}} обязательно."
+  "Value is required.": "{{value}} обязательно.",
+  "\"From\"": "«От»",
+  "\"To\"": "«До»",
+  "\"From\" is required.": "«От» обязательно.",
+  "\"To\"": "«До»",
+  "\"To\" is required.": "«До» обязательно.",
+  "\"From\" can't be after \"To\".": "«От» не может быть позже чем «До»."
 }

package/dist/cjs/components/utils/validation/relativeRangeDatePicker.d.ts

@@ -0,0 +1,15 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { RelativeRangeDatePickerValue } from "../../RelativeRangeDatePicker/index.js";
+import type { ExtractFunctionType } from "../../types/index.js";
+import { i18n } from "./i18n/index.js";
+export declare function getRangeValidationResult(value: RelativeRangeDatePickerValue | null, allowNullableValues: boolean | undefined, minValue: DateTime | undefined, maxValue: DateTime | undefined, isDateUnavailable: ((v: DateTime, endpoint: 'start' | 'end') => boolean) | undefined, timeZone: string, t?: ExtractFunctionType<typeof i18n>): {
+    isInvalid: boolean;
+    errors: never[];
+    startValidationResult?: undefined;
+    endValidationResult?: undefined;
+} | {
+    isInvalid: boolean;
+    startValidationResult: import("./datePicker.js").ValidationResult;
+    endValidationResult: import("./datePicker.js").ValidationResult;
+    errors: string[];
+};

package/dist/cjs/components/utils/validation/relativeRangeDatePicker.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRangeValidationResult = getRangeValidationResult;
+const date_utils_1 = require("@gravity-ui/date-utils");
+const datePicker_1 = require("./datePicker.js");
+const i18n_1 = require("./i18n/index.js");
+function getRangeValidationResult(value, allowNullableValues, minValue, maxValue, isDateUnavailable, timeZone, t = i18n_1.i18n) {
+    if (!value) {
+        return { isInvalid: false, errors: [] };
+    }
+    const startDate = value.start ? (0, date_utils_1.dateTimeParse)(value.start.value, { timeZone }) : null;
+    const endDate = value.end ? (0, date_utils_1.dateTimeParse)(value.end.value, { timeZone, roundUp: true }) : null;
+    const startValidationResult = (0, datePicker_1.getValidationResult)(startDate, minValue, maxValue, isDateUnavailable ? (date) => isDateUnavailable(date, 'start') : undefined, timeZone, t('"From"'), t);
+    if (!startDate && !allowNullableValues) {
+        startValidationResult.isInvalid = true;
+        startValidationResult.errors.push(t('"From" is required.'));
+    }
+    const endValidationResult = (0, datePicker_1.getValidationResult)(endDate, minValue, maxValue, isDateUnavailable ? (date) => isDateUnavailable(date, 'end') : undefined, timeZone, t('"To"'), t);
+    if (!endDate && !allowNullableValues) {
+        endValidationResult.isInvalid = true;
+        endValidationResult.errors.push(t('"To" is required.'));
+    }
+    if (startDate && endDate && endDate.isBefore(startDate)) {
+        startValidationResult.isInvalid = true;
+        startValidationResult.errors.push(t(`"From" can't be after "To".`));
+    }
+    return {
+        isInvalid: startValidationResult.isInvalid || endValidationResult.isInvalid,
+        startValidationResult,
+        endValidationResult,
+        errors: startValidationResult.errors.concat(endValidationResult.errors),
+    };
+}
+//# sourceMappingURL=relativeRangeDatePicker.js.map

package/dist/cjs/components/utils/validation/relativeRangeDatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"relativeRangeDatePicker.js","sourceRoot":"../../../../../src","sources":["components/utils/validation/relativeRangeDatePicker.ts"],"names":[],"mappings":";;AASA,4DAyDC;AAlED,uDAAqD;AAMrD,gDAAiD;AACjD,0CAA4B;AAE5B,SAAgB,wBAAwB,CACpC,KAA0C,EAC1C,mBAAwC,EACxC,QAA8B,EAC9B,QAA8B,EAC9B,iBAAoF,EACpF,QAAgB,EAChB,IAAsC,WAAI;IAE1C,IAAI,CAAC,KAAK,EAAE,CAAC;QACT,OAAO,EAAC,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAC,CAAC;IAC1C,CAAC;IAED,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAA,0BAAa,EAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,EAAC,QAAQ,EAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACpF,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAA,0BAAa,EAAC,KAAK,CAAC,GAAG,CAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7F,MAAM,qBAAqB,GAAG,IAAA,gCAAmB,EAC7C,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iBAAiB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,EAC1E,QAAQ,EACR,CAAC,CAAC,QAAQ,CAAC,EACX,CAAC,CACJ,CAAC;IAEF,IAAI,CAAC,SAAS,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACrC,qBAAqB,CAAC,SAAS,GAAG,IAAI,CAAC;QACvC,qBAAqB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAChE,CAAC;IAED,MAAM,mBAAmB,GAAG,IAAA,gCAAmB,EAC3C,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EACxE,QAAQ,EACR,CAAC,CAAC,MAAM,CAAC,EACT,CAAC,CACJ,CAAC;IAEF,IAAI,CAAC,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACnC,mBAAmB,CAAC,SAAS,GAAG,IAAI,CAAC;QACrC,mBAAmB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAC5D,CAAC;IAED,IAAI,SAAS,IAAI,OAAO,IAAI,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;QACtD,qBAAqB,CAAC,SAAS,GAAG,IAAI,CAAC;QACvC,qBAAqB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC;IACxE,CAAC;IAED,OAAO;QACH,SAAS,EAAE,qBAAqB,CAAC,SAAS,IAAI,mBAAmB,CAAC,SAAS;QAC3E,qBAAqB;QACrB,mBAAmB;QACnB,MAAM,EAAE,qBAAqB,CAAC,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,MAAM,CAAC;KAC1E,CAAC;AACN,CAAC","sourcesContent":["import {dateTimeParse} from '@gravity-ui/date-utils';\nimport type {DateTime} from '@gravity-ui/date-utils';\n\nimport type {RelativeRangeDatePickerValue} from '../../RelativeRangeDatePicker';\nimport type {ExtractFunctionType} from '../../types';\n\nimport {getValidationResult} from './datePicker';\nimport {i18n} from './i18n';\n\nexport function getRangeValidationResult(\n    value: RelativeRangeDatePickerValue | null,\n    allowNullableValues: boolean | undefined,\n    minValue: DateTime | undefined,\n    maxValue: DateTime | undefined,\n    isDateUnavailable: ((v: DateTime, endpoint: 'start' | 'end') => boolean) | undefined,\n    timeZone: string,\n    t: ExtractFunctionType<typeof i18n> = i18n,\n) {\n    if (!value) {\n        return {isInvalid: false, errors: []};\n    }\n\n    const startDate = value.start ? dateTimeParse(value.start.value, {timeZone}) : null;\n    const endDate = value.end ? dateTimeParse(value.end.value, {timeZone, roundUp: true}) : null;\n\n    const startValidationResult = getValidationResult(\n        startDate,\n        minValue,\n        maxValue,\n        isDateUnavailable ? (date) => isDateUnavailable(date, 'start') : undefined,\n        timeZone,\n        t('\"From\"'),\n        t,\n    );\n\n    if (!startDate && !allowNullableValues) {\n        startValidationResult.isInvalid = true;\n        startValidationResult.errors.push(t('\"From\" is required.'));\n    }\n\n    const endValidationResult = getValidationResult(\n        endDate,\n        minValue,\n        maxValue,\n        isDateUnavailable ? (date) => isDateUnavailable(date, 'end') : undefined,\n        timeZone,\n        t('\"To\"'),\n        t,\n    );\n\n    if (!endDate && !allowNullableValues) {\n        endValidationResult.isInvalid = true;\n        endValidationResult.errors.push(t('\"To\" is required.'));\n    }\n\n    if (startDate && endDate && endDate.isBefore(startDate)) {\n        startValidationResult.isInvalid = true;\n        startValidationResult.errors.push(t(`\"From\" can't be after \"To\".`));\n    }\n\n    return {\n        isInvalid: startValidationResult.isInvalid || endValidationResult.isInvalid,\n        startValidationResult,\n        endValidationResult,\n        errors: startValidationResult.errors.concat(endValidationResult.errors),\n    };\n}\n"]}

package/dist/cjs/package.json

@@ -1 +1 @@
-{"type":"commonjs","sideEffects":["*.css","*.scss"]}
+{"type":"commonjs","version":"3.3.0","sideEffects":["*.css","*.scss"]}

package/dist/esm/components/CalendarView/Calendar.css.map

@@ -1 +1 @@
-{"version":3,"sources":["components/CalendarView/data:;charset=utf-8,@use%20'@gravity-ui/uikit/styles/mixins';%0A@use%20'../variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Dcalendar';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20--_--calendar-padding:%20var(--g-date-calendar-padding,%208px);%0A%20%20%20%20--_--calendar-day-size:%20var(--g-date-calendar-day-size,%2028px);%0A%20%20%20%20--_--calendar-days-gap:%20var(--g-date-calendar-days-gap,%202px);%0A%0A%20%20%20%20--_--calendar-width:%20calc(%0A%20%20%20%20%20%20%20%207%20*%20var(--_--calendar-day-size)%20+%206%20*%20var(--_--calendar-days-gap)%20+%202%20*%0A%20%20%20%20%20%20%20%20%20%20%20%20var(--_--calendar-padding)%0A%20%20%20%20);%0A%20%20%20%20--_--calendar-grid-height:%20calc(%0A%20%20%20%20%20%20%20%207%20*%20var(--_--calendar-day-size)%20+%205%20*%20var(--_--calendar-days-gap)%20+%0A%20%20%20%20%20%20%20%20%20%20%20%20var(--_--calendar-padding)%0A%20%20%20%20);%0A%0A%20%20%20%20display:%20inline-block;%0A%0A%20%20%20%20width:%20var(--_--calendar-width);%0A%0A%20%20%20%20&_size_l%20%7B%0A%20%20%20%20%20%20%20%20--g-date-calendar-day-size:%2036px;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&_size_xl%20%7B%0A%20%20%20%20%20%20%20%20--g-date-calendar-day-size:%2042px;%0A%0A%20%20%20%20%20%20%20%20@include%20mixins.text-body-2();%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__header%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%0A%20%20%20%20%20%20%20%20padding:%20var(--_--calendar-padding)%20var(--_--calendar-padding)%200;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__years-label%20%7B%0A%20%20%20%20%20%20%20%20color:%20var(--g-color-text-secondary);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__controls%20%7B%0A%20%20%20%20%20%20%20%20margin-inline-start:%20auto;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__control-icon%20%7B%0A%20%20%20%20%20%20%20%20transform:%20scaleX(var(--g-flow-direction));%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__grid%20%7B%0A%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20overflow:%20hidden;%0A%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20height:%20var(--_--calendar-grid-height);%0A%0A%20%20%20%20%20%20%20%20user-select:%20none;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__content%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20inset-block-start:%200;%0A%20%20%20%20%20%20%20%20inset-inline-start:%200;%0A%0A%20%20%20%20%20%20%20%20display:%20grid;%0A%20%20%20%20%20%20%20%20grid-template-rows:%20var(--_--calendar-day-size)%201fr;%0A%0A%20%20%20%20%20%20%20%20box-sizing:%20border-box;%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20height:%20100%25;%0A%20%20%20%20%20%20%20%20padding:%200%20var(--_--calendar-padding)%20var(--_--calendar-padding);%0A%0A%20%20%20%20%20%20%20%20@keyframes%20calendar-forward%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20from%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform:%20translateX(0);%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20to%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform:%20translateX(100%25);%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20@keyframes%20calendar-backward%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20from%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform:%20translateX(0);%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20to%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform:%20translateX(-100%25);%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20@keyframes%20calendar-zoom-in-showing%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20from%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity:%200;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform:%20scale(2);%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20to%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity:%201;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform:%20scale(1);%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20@keyframes%20calendar-zoom-in-hiding%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20from%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity:%201;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform:%20scale(1);%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20to%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity:%200;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform:%20scale(0);%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20@keyframes%20calendar-zoom-out-showing%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20from%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity:%200;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform:%20scale(0);%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20to%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity:%201;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform:%20scale(1);%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20@keyframes%20calendar-zoom-out-hiding%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20from%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity:%201;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform:%20scale(1);%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20to%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity:%200;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform:%20scale(2);%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&_animation_forward%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform:%20translateX(-100%25);%0A%20%20%20%20%20%20%20%20%20%20%20%20animation:%20calendar-forward%200.25s%20ease%20forwards;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20&%23%7B$block%7D__current-state%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20inset-inline-start:%20calc(var(--g-flow-direction)%20*%20-100%25);%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&_animation_backward%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform:%20translateX(0);%0A%20%20%20%20%20%20%20%20%20%20%20%20animation:%20calendar-backward%200.25s%20ease%20forwards;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20&%23%7B$block%7D__current-state%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20inset-inline-start:%20calc(var(--g-flow-direction)%20*%20100%25);%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&_animation_zoom-in%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform:%20scale();%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20&%23%7B$block%7D__previous-state%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20animation:%20calendar-zoom-in-hiding%200.25s%20ease%20forwards;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20&%23%7B$block%7D__current-state%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20animation:%20calendar-zoom-in-showing%200.25s%20ease%20forwards;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&_animation_zoom-out%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform:%20scale();%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20&%23%7B$block%7D__current-state%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20animation:%20calendar-zoom-out-showing%200.25s%20ease%20forwards;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20&%23%7B$block%7D__previous-state%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20animation:%20calendar-zoom-out-hiding%200.25s%20ease%20forwards;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20@media%20screen%20and%20(prefers-reduced-motion:%20reduce),%20(update:%20slow)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20&%5Bclass%5D%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20animation-duration:%200.001ms;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__grid-rowgroup%20%7B%0A%20%20%20%20%20%20%20%20display:%20grid;%0A%20%20%20%20%20%20%20%20gap:%20var(--_--calendar-days-gap);%0A%0A%20%20%20%20%20%20%20%20&_mode_months,%0A%20%20%20%20%20%20%20%20&_mode_quarters,%0A%20%20%20%20%20%20%20%20&_mode_years%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20grid-row:%201%20/%20-1;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2012px%200%200;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&-header%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20align-self:%20center;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__grid-row%20%7B%0A%20%20%20%20%20%20%20%20display:%20grid;%0A%20%20%20%20%20%20%20%20grid-auto-columns:%201fr;%0A%20%20%20%20%20%20%20%20grid-auto-flow:%20column;%0A%20%20%20%20%20%20%20%20gap:%20var(--_--calendar-days-gap);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__weekday%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20justify-content:%20center;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20height:%20100%25;%0A%0A%20%20%20%20%20%20%20%20&_weekend%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20var(--g-color-text-danger);%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__button%20%7B%0A%20%20%20%20%20%20%20%20position:%20relative;%0A%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20justify-content:%20center;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20height:%20100%25;%0A%0A%20%20%20%20%20%20%20%20font-weight:%20var(--g-text-subheader-font-weight);%0A%20%20%20%20%20%20%20%20cursor:%20pointer;%0A%0A%20%20%20%20%20%20%20%20border-radius:%204px;%0A%20%20%20%20%20%20%20%20outline:%20none;%0A%0A%20%20%20%20%20%20%20%20&:focus%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-shadow:%200%200%200%202px%20var(--g-color-line-misc);%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&:focus:not(:focus-visible)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-shadow:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&:hover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color:%20var(--g-color-base-generic);%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&_selected%5Bclass%5D%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color:%20var(--g-color-base-selection);%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&_selected%23%7B&%7D_selection-start,%0A%20%20%20%20%20%20%20%20&_selected%23%7B&%7D_selection-end%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color:%20var(--g-color-base-brand);%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&_weekend%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20var(--g-color-text-danger);%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&_out-of-boundary%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20var(--g-text-body-font-weight);%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20opacity:%200.6;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&_current::before%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20%20%20%20%20inset-block-start:%2050%25;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20block;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%204px;%0A%20%20%20%20%20%20%20%20%20%20%20%20height:%204px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20content:%20'';%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius:%2050%25;%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color:%20currentColor;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20transform:%20translateY(8px);%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&_disabled%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20var(--g-text-body-font-weight);%0A%20%20%20%20%20%20%20%20%20%20%20%20pointer-events:%20none;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20opacity:%200.6;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&_unavailable:not(&_disabled)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight:%20var(--g-text-body-font-weight);%0A%20%20%20%20%20%20%20%20%20%20%20%20cursor:%20default;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20opacity:%200.5;%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color:%20var(--g-color-base-generic);%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A","components/CalendarView/file:/home/runner/work/date-components/date-components/node_modules/@gravity-ui/uikit/styles/mixins.scss"],"names":[],"mappings":"AAKA;EACI;EACA;EACA;EAEA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAKA;EAEA;;AAEA;EACI;;AAGJ;EACI;EC6IJ;EACA;EACA;EACA;;AD3IA;EACI;EAEA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EAEA;EAEA;EACA;EAEA;;AAGJ;EACI;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACI;IACI;;EAEJ;IACI;;;AAIR;EACI;IACI;;EAEJ;IACI;;;AAIR;EACI;IACI;IAEA;;EAEJ;IACI;IAEA;;;AAIR;EACI;IACI;IAEA;;EAEJ;IACI;IAEA;;;AAIR;EACI;IACI;IAEA;;EAEJ;IACI;IAEA;;;AAIR;EACI;IACI;IAEA;;EAEJ;IACI;IAEA;;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;;AAEA;EACI;;AAEJ;EACI;;AAIR;EACI;;AAEA;EACI;;AAEJ;EACI;;AAIR;EACI;IACI;;;AAKZ;EACI;EACA;;AAEA;EAGI;EAEA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EAEA;EACA;;AAEA;EACI;;AAIR;EACI;EAEA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EAEI;;AAGJ;EACI;;AAGJ;EACI;EAEA;;AAGJ;EACI;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;;AAGJ;EACI;EACA;EAEA;;AAGJ;EACI;EACA;EAEA;EACA","sourcesContent":["@use '@gravity-ui/uikit/styles/mixins';\n@use '../variables';\n\n$block: '.#{variables.$ns}calendar';\n\n#{$block} {\n    --_--calendar-padding: var(--g-date-calendar-padding, 8px);\n    --_--calendar-day-size: var(--g-date-calendar-day-size, 28px);\n    --_--calendar-days-gap: var(--g-date-calendar-days-gap, 2px);\n\n    --_--calendar-width: calc(\n        7 * var(--_--calendar-day-size) + 6 * var(--_--calendar-days-gap) + 2 *\n            var(--_--calendar-padding)\n    );\n    --_--calendar-grid-height: calc(\n        7 * var(--_--calendar-day-size) + 5 * var(--_--calendar-days-gap) +\n            var(--_--calendar-padding)\n    );\n\n    display: inline-block;\n\n    width: var(--_--calendar-width);\n\n    &_size_l {\n        --g-date-calendar-day-size: 36px;\n    }\n\n    &_size_xl {\n        --g-date-calendar-day-size: 42px;\n\n        @include mixins.text-body-2();\n    }\n\n    &__header {\n        display: flex;\n\n        padding: var(--_--calendar-padding) var(--_--calendar-padding) 0;\n    }\n\n    &__years-label {\n        color: var(--g-color-text-secondary);\n    }\n\n    &__controls {\n        margin-inline-start: auto;\n    }\n\n    &__control-icon {\n        transform: scaleX(var(--g-flow-direction));\n    }\n\n    &__grid {\n        position: relative;\n\n        overflow: hidden;\n\n        width: 100%;\n        height: var(--_--calendar-grid-height);\n\n        user-select: none;\n    }\n\n    &__content {\n        position: absolute;\n        inset-block-start: 0;\n        inset-inline-start: 0;\n\n        display: grid;\n        grid-template-rows: var(--_--calendar-day-size) 1fr;\n\n        box-sizing: border-box;\n        width: 100%;\n        height: 100%;\n        padding: 0 var(--_--calendar-padding) var(--_--calendar-padding);\n\n        @keyframes calendar-forward {\n            from {\n                transform: translateX(0);\n            }\n            to {\n                transform: translateX(100%);\n            }\n        }\n\n        @keyframes calendar-backward {\n            from {\n                transform: translateX(0);\n            }\n            to {\n                transform: translateX(-100%);\n            }\n        }\n\n        @keyframes calendar-zoom-in-showing {\n            from {\n                opacity: 0;\n\n                transform: scale(2);\n            }\n            to {\n                opacity: 1;\n\n                transform: scale(1);\n            }\n        }\n\n        @keyframes calendar-zoom-in-hiding {\n            from {\n                opacity: 1;\n\n                transform: scale(1);\n            }\n            to {\n                opacity: 0;\n\n                transform: scale(0);\n            }\n        }\n\n        @keyframes calendar-zoom-out-showing {\n            from {\n                opacity: 0;\n\n                transform: scale(0);\n            }\n            to {\n                opacity: 1;\n\n                transform: scale(1);\n            }\n        }\n\n        @keyframes calendar-zoom-out-hiding {\n            from {\n                opacity: 1;\n\n                transform: scale(1);\n            }\n            to {\n                opacity: 0;\n\n                transform: scale(2);\n            }\n        }\n\n        &_animation_forward {\n            transform: translateX(-100%);\n            animation: calendar-forward 0.25s ease forwards;\n\n            &#{$block}__current-state {\n                inset-inline-start: calc(var(--g-flow-direction) * -100%);\n            }\n        }\n\n        &_animation_backward {\n            transform: translateX(0);\n            animation: calendar-backward 0.25s ease forwards;\n\n            &#{$block}__current-state {\n                inset-inline-start: calc(var(--g-flow-direction) * 100%);\n            }\n        }\n\n        &_animation_zoom-in {\n            transform: scale();\n\n            &#{$block}__previous-state {\n                animation: calendar-zoom-in-hiding 0.25s ease forwards;\n            }\n            &#{$block}__current-state {\n                animation: calendar-zoom-in-showing 0.25s ease forwards;\n            }\n        }\n\n        &_animation_zoom-out {\n            transform: scale();\n\n            &#{$block}__current-state {\n                animation: calendar-zoom-out-showing 0.25s ease forwards;\n            }\n            &#{$block}__previous-state {\n                animation: calendar-zoom-out-hiding 0.25s ease forwards;\n            }\n        }\n\n        @media screen and (prefers-reduced-motion: reduce), (update: slow) {\n            &[class] {\n                animation-duration: 0.001ms;\n            }\n        }\n    }\n\n    &__grid-rowgroup {\n        display: grid;\n        gap: var(--_--calendar-days-gap);\n\n        &_mode_months,\n        &_mode_quarters,\n        &_mode_years {\n            grid-row: 1 / -1;\n\n            padding: 12px 0 0;\n        }\n\n        &-header {\n            align-self: center;\n        }\n    }\n\n    &__grid-row {\n        display: grid;\n        grid-auto-columns: 1fr;\n        grid-auto-flow: column;\n        gap: var(--_--calendar-days-gap);\n    }\n\n    &__weekday {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        width: 100%;\n        height: 100%;\n\n        &_weekend {\n            color: var(--g-color-text-danger);\n        }\n    }\n\n    &__button {\n        position: relative;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        width: 100%;\n        height: 100%;\n\n        font-weight: var(--g-text-subheader-font-weight);\n        cursor: pointer;\n\n        border-radius: 4px;\n        outline: none;\n\n        &:focus {\n            box-shadow: 0 0 0 2px var(--g-color-line-misc);\n        }\n\n        &:focus:not(:focus-visible) {\n            box-shadow: none;\n        }\n\n        &:hover {\n            background-color: var(--g-color-base-generic);\n        }\n\n        &_selected[class] {\n            background-color: var(--g-color-base-selection);\n        }\n\n        &_selected#{&}_selection-start,\n        &_selected#{&}_selection-end {\n            background-color: var(--g-color-base-brand);\n        }\n\n        &_weekend {\n            color: var(--g-color-text-danger);\n        }\n\n        &_out-of-boundary {\n            font-weight: var(--g-text-body-font-weight);\n\n            opacity: 0.6;\n        }\n\n        &_current::before {\n            position: absolute;\n            inset-block-start: 50%;\n\n            display: block;\n\n            width: 4px;\n            height: 4px;\n\n            content: '';\n\n            border-radius: 50%;\n            background-color: currentColor;\n\n            transform: translateY(8px);\n        }\n\n        &_disabled {\n            font-weight: var(--g-text-body-font-weight);\n            pointer-events: none;\n\n            opacity: 0.6;\n        }\n\n        &_unavailable:not(&_disabled) {\n            font-weight: var(--g-text-body-font-weight);\n            cursor: default;\n\n            opacity: 0.5;\n            background-color: var(--g-color-base-generic);\n        }\n    }\n}\n","@use 'sass:list';\n@use 'sass:selector';\n\n@mixin overflow-ellipsis($type: ellipsis) {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: $type;\n}\n\n@mixin button-reset() {\n    padding: 0;\n\n    font-family: var(--g-text-body-font-family);\n    font-size: inherit;\n    font-weight: var(--g-text-body-font-weight);\n\n    color: inherit;\n    background: none;\n    border: none;\n    outline: none;\n    cursor: pointer;\n}\n\n@mixin expand-interactive-area($h: 4px, $v: $h) {\n    position: relative;\n\n    &::after {\n        content: '';\n        position: absolute;\n        inset: logical (-$v) (-$h) (-$v);\n    }\n}\n\n@mixin max-height($height) {\n    max-height: $height;\n    overflow-y: auto;\n}\n\n@mixin max-text-width($width: 100%) {\n    @include overflow-ellipsis();\n\n    max-width: $width;\n}\n\n@mixin aspect-ratio($ratio) {\n    position: relative;\n\n    &::before {\n        display: block;\n        content: '';\n        width: 100%;\n        padding-block-start: $ratio * 100%;\n    }\n\n    > *:only-child {\n        position: absolute;\n        inset: 0;\n    }\n}\n\n@function get-pin-selector($mod, $selector, $append: true) {\n    @if $append {\n        @return selector.append($mod, $selector);\n    } @else {\n        @return list.join($mod, $selector, $separator: space);\n    }\n}\n\n@mixin pin($block, $selectors, $radius, $append: true) {\n    @each $selector in $selectors {\n        &#{get-pin-selector(#{$block}_pin_round-round, $selector, $append)} {\n            border-radius: $radius;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-brick, $selector, $append)} {\n            border-radius: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-clear, $selector, $append)} {\n            border-radius: 0;\n            border-inline: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_circle-circle, $selector, $append)} {\n            border-radius: 100px;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_round-brick, $selector, $append)} {\n            border-start-start-radius: $radius;\n            border-start-end-radius: 0;\n            border-end-start-radius: $radius;\n            border-end-end-radius: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-round, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: $radius;\n            border-end-start-radius: 0;\n            border-end-end-radius: $radius;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_round-clear, $selector, $append)} {\n            border-start-start-radius: $radius;\n            border-start-end-radius: 0;\n            border-end-start-radius: $radius;\n            border-end-end-radius: 0;\n            border-inline-end: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-round, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: $radius;\n            border-end-start-radius: 0;\n            border-end-end-radius: $radius;\n            border-inline-start: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-clear, $selector, $append)} {\n            border-radius: 0;\n            border-inline-end: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-brick, $selector, $append)} {\n            border-radius: 0;\n            border-inline-start: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_circle-brick, $selector, $append)} {\n            border-start-start-radius: 100px;\n            border-start-end-radius: 0;\n            border-end-start-radius: 100px;\n            border-end-end-radius: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-circle, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: 100px;\n            border-end-start-radius: 0;\n            border-end-end-radius: 100px;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_circle-clear, $selector, $append)} {\n            border-start-start-radius: 100px;\n            border-start-end-radius: 0;\n            border-end-start-radius: 100px;\n            border-end-end-radius: 0;\n            border-inline-end: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-circle, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: 100px;\n            border-end-start-radius: 0;\n            border-end-end-radius: 100px;\n            border-inline-start: 0;\n        }\n    }\n}\n\n// Typography\n\n@mixin text-body-1() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-1-font-size);\n    line-height: var(--g-text-body-1-line-height);\n}\n\n@mixin text-body-2() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-2-font-size);\n    line-height: var(--g-text-body-2-line-height);\n}\n\n@mixin text-body-3() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-3-font-size);\n    line-height: var(--g-text-body-3-line-height);\n}\n\n@mixin text-body-short() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-short-font-size);\n    line-height: var(--g-text-body-short-line-height);\n}\n\n@mixin text-caption-1() {\n    font-family: var(--g-text-caption-font-family);\n    font-weight: var(--g-text-caption-font-weight);\n    font-size: var(--g-text-caption-1-font-size);\n    line-height: var(--g-text-caption-1-line-height);\n}\n\n@mixin text-caption-2() {\n    font-family: var(--g-text-caption-font-family);\n    font-weight: var(--g-text-caption-font-weight);\n    font-size: var(--g-text-caption-2-font-size);\n    line-height: var(--g-text-caption-2-line-height);\n}\n\n@mixin text-header-1() {\n    font-family: var(--g-text-header-font-family);\n    font-weight: var(--g-text-header-font-weight);\n    font-size: var(--g-text-header-1-font-size);\n    line-height: var(--g-text-header-1-line-height);\n}\n\n@mixin text-header-2() {\n    font-family: var(--g-text-header-font-family);\n    font-weight: var(--g-text-header-font-weight);\n    font-size: var(--g-text-header-2-font-size);\n    line-height: var(--g-text-header-2-line-height);\n}\n\n@mixin text-subheader-1() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-1-font-size);\n    line-height: var(--g-text-subheader-1-line-height);\n}\n\n@mixin text-subheader-2() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-2-font-size);\n    line-height: var(--g-text-subheader-2-line-height);\n}\n\n@mixin text-subheader-3() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-3-font-size);\n    line-height: var(--g-text-subheader-3-line-height);\n}\n\n@mixin text-display-1() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-1-font-size);\n    line-height: var(--g-text-display-1-line-height);\n}\n\n@mixin text-display-2() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-2-font-size);\n    line-height: var(--g-text-display-2-line-height);\n}\n\n@mixin text-display-3() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-3-font-size);\n    line-height: var(--g-text-display-3-line-height);\n}\n\n@mixin text-display-4() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-4-font-size);\n    line-height: var(--g-text-display-4-line-height);\n}\n\n@mixin text-code-1() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-1-font-size);\n    line-height: var(--g-text-code-1-line-height);\n}\n\n@mixin text-code-2() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-2-font-size);\n    line-height: var(--g-text-code-2-line-height);\n}\n\n@mixin text-code-3() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-3-font-size);\n    line-height: var(--g-text-code-3-line-height);\n}\n\n@mixin text-code-inline-1() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-1-font-size);\n    line-height: var(--g-text-code-inline-1-line-height);\n}\n\n@mixin text-code-inline-2() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-2-font-size);\n    line-height: var(--g-text-code-inline-2-line-height);\n}\n\n@mixin text-code-inline-3() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-3-font-size);\n    line-height: var(--g-text-code-inline-3-line-height);\n}\n\n@mixin text-accent() {\n    font-weight: var(--g-text-accent-font-weight);\n}\n\n@mixin loading($loading-color-1: rgba(255, 255, 255, 0.3), $loading-color-2: transparent) {\n    background-image: repeating-linear-gradient(\n        -45deg,\n        $loading-color-1,\n        $loading-color-1 4px,\n        $loading-color-2 4px,\n        $loading-color-2 8px\n    );\n    background-size: 150%;\n    background-clip: padding-box;\n\n    // stylelint-disable-next-line no-unknown-animations\n    animation: g-loading-animation 0.5s linear infinite;\n}\n\n@mixin scrollbar() {\n    &::-webkit-scrollbar,\n    *::-webkit-scrollbar {\n        width: var(--g-scrollbar-width);\n        height: var(--g-scrollbar-width);\n        background: var(--g-color-scroll-track);\n    }\n\n    &::-webkit-scrollbar-track,\n    *::-webkit-scrollbar-track {\n        background: var(--g-color-scroll-track);\n    }\n\n    &::-webkit-scrollbar-corner,\n    *::-webkit-scrollbar-corner {\n        background: var(--g-color-scroll-corner);\n    }\n\n    &::-webkit-scrollbar-thumb,\n    *::-webkit-scrollbar-thumb {\n        background: var(--g-color-scroll-handle);\n    }\n\n    &::-webkit-scrollbar-thumb:hover,\n    *::-webkit-scrollbar-thumb:hover {\n        background: var(--g-color-scroll-handle-hover);\n    }\n}\n"],"file":"Calendar.css"}
+{"version":3,"sources":["components/CalendarView/Calendar.scss","home/runner/work/date-components/date-components/node_modules/@gravity-ui/uikit/styles/mixins.scss"],"names":[],"mappings":"AAKA;EACI;EACA;EACA;EAEA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAKA;EAEA;;AAEA;EACI;;AAGJ;EACI;ECkJJ;EACA;EACA;EACA;;ADhJA;EACI;EAEA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EAEA;EAEA;EACA;EAEA;;AAGJ;EACI;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACI;IACI;;EAEJ;IACI;;;AAIR;EACI;IACI;;EAEJ;IACI;;;AAIR;EACI;IACI;IAEA;;EAEJ;IACI;IAEA;;;AAIR;EACI;IACI;IAEA;;EAEJ;IACI;IAEA;;;AAIR;EACI;IACI;IAEA;;EAEJ;IACI;IAEA;;;AAIR;EACI;IACI;IAEA;;EAEJ;IACI;IAEA;;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;;AAEA;EACI;;AAEJ;EACI;;AAIR;EACI;;AAEA;EACI;;AAEJ;EACI;;AAIR;EACI;IACI;;;AAKZ;EACI;EACA;;AAEA;EAGI;EAEA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EAEA;EACA;;AAEA;EACI;;AAIR;EACI;EAEA;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EAEI;;AAGJ;EACI;;AAGJ;EACI;EAEA;;AAGJ;EACI;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;;AAGJ;EACI;EACA;EAEA;;AAGJ;EACI;EACA;EAEA;EACA","sourcesContent":["@use '@gravity-ui/uikit/styles/mixins';\n@use '../variables';\n\n$block: '.#{variables.$ns}calendar';\n\n#{$block} {\n    --_--calendar-padding: var(--g-date-calendar-padding, 8px);\n    --_--calendar-day-size: var(--g-date-calendar-day-size, 28px);\n    --_--calendar-days-gap: var(--g-date-calendar-days-gap, 2px);\n\n    --_--calendar-width: calc(\n        7 * var(--_--calendar-day-size) + 6 * var(--_--calendar-days-gap) + 2 *\n            var(--_--calendar-padding)\n    );\n    --_--calendar-grid-height: calc(\n        7 * var(--_--calendar-day-size) + 5 * var(--_--calendar-days-gap) +\n            var(--_--calendar-padding)\n    );\n\n    display: inline-block;\n\n    width: var(--_--calendar-width);\n\n    &_size_l {\n        --g-date-calendar-day-size: 36px;\n    }\n\n    &_size_xl {\n        --g-date-calendar-day-size: 42px;\n\n        @include mixins.text-body-2();\n    }\n\n    &__header {\n        display: flex;\n\n        padding: var(--_--calendar-padding) var(--_--calendar-padding) 0;\n    }\n\n    &__years-label {\n        color: var(--g-color-text-secondary);\n    }\n\n    &__controls {\n        margin-inline-start: auto;\n    }\n\n    &__control-icon {\n        transform: scaleX(var(--g-flow-direction));\n    }\n\n    &__grid {\n        position: relative;\n\n        overflow: hidden;\n\n        width: 100%;\n        height: var(--_--calendar-grid-height);\n\n        user-select: none;\n    }\n\n    &__content {\n        position: absolute;\n        inset-block-start: 0;\n        inset-inline-start: 0;\n\n        display: grid;\n        grid-template-rows: var(--_--calendar-day-size) 1fr;\n\n        box-sizing: border-box;\n        width: 100%;\n        height: 100%;\n        padding: 0 var(--_--calendar-padding) var(--_--calendar-padding);\n\n        @keyframes calendar-forward {\n            from {\n                transform: translateX(0);\n            }\n            to {\n                transform: translateX(100%);\n            }\n        }\n\n        @keyframes calendar-backward {\n            from {\n                transform: translateX(0);\n            }\n            to {\n                transform: translateX(-100%);\n            }\n        }\n\n        @keyframes calendar-zoom-in-showing {\n            from {\n                opacity: 0;\n\n                transform: scale(2);\n            }\n            to {\n                opacity: 1;\n\n                transform: scale(1);\n            }\n        }\n\n        @keyframes calendar-zoom-in-hiding {\n            from {\n                opacity: 1;\n\n                transform: scale(1);\n            }\n            to {\n                opacity: 0;\n\n                transform: scale(0);\n            }\n        }\n\n        @keyframes calendar-zoom-out-showing {\n            from {\n                opacity: 0;\n\n                transform: scale(0);\n            }\n            to {\n                opacity: 1;\n\n                transform: scale(1);\n            }\n        }\n\n        @keyframes calendar-zoom-out-hiding {\n            from {\n                opacity: 1;\n\n                transform: scale(1);\n            }\n            to {\n                opacity: 0;\n\n                transform: scale(2);\n            }\n        }\n\n        &_animation_forward {\n            transform: translateX(-100%);\n            animation: calendar-forward 0.25s ease forwards;\n\n            &#{$block}__current-state {\n                inset-inline-start: calc(var(--g-flow-direction) * -100%);\n            }\n        }\n\n        &_animation_backward {\n            transform: translateX(0);\n            animation: calendar-backward 0.25s ease forwards;\n\n            &#{$block}__current-state {\n                inset-inline-start: calc(var(--g-flow-direction) * 100%);\n            }\n        }\n\n        &_animation_zoom-in {\n            transform: scale();\n\n            &#{$block}__previous-state {\n                animation: calendar-zoom-in-hiding 0.25s ease forwards;\n            }\n            &#{$block}__current-state {\n                animation: calendar-zoom-in-showing 0.25s ease forwards;\n            }\n        }\n\n        &_animation_zoom-out {\n            transform: scale();\n\n            &#{$block}__current-state {\n                animation: calendar-zoom-out-showing 0.25s ease forwards;\n            }\n            &#{$block}__previous-state {\n                animation: calendar-zoom-out-hiding 0.25s ease forwards;\n            }\n        }\n\n        @media screen and (prefers-reduced-motion: reduce), (update: slow) {\n            &[class] {\n                animation-duration: 0.001ms;\n            }\n        }\n    }\n\n    &__grid-rowgroup {\n        display: grid;\n        gap: var(--_--calendar-days-gap);\n\n        &_mode_months,\n        &_mode_quarters,\n        &_mode_years {\n            grid-row: 1 / -1;\n\n            padding: 12px 0 0;\n        }\n\n        &-header {\n            align-self: center;\n        }\n    }\n\n    &__grid-row {\n        display: grid;\n        grid-auto-columns: 1fr;\n        grid-auto-flow: column;\n        gap: var(--_--calendar-days-gap);\n    }\n\n    &__weekday {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        width: 100%;\n        height: 100%;\n\n        &_weekend {\n            color: var(--g-color-text-danger);\n        }\n    }\n\n    &__button {\n        position: relative;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        width: 100%;\n        height: 100%;\n\n        font-weight: var(--g-text-subheader-font-weight);\n        cursor: pointer;\n\n        border-radius: 4px;\n        outline: none;\n\n        &:focus {\n            box-shadow: 0 0 0 2px var(--g-color-line-misc);\n        }\n\n        &:focus:not(:focus-visible) {\n            box-shadow: none;\n        }\n\n        &:hover {\n            background-color: var(--g-color-base-generic);\n        }\n\n        &_selected[class] {\n            background-color: var(--g-color-base-selection);\n        }\n\n        &_selected#{&}_selection-start,\n        &_selected#{&}_selection-end {\n            background-color: var(--g-color-base-brand);\n        }\n\n        &_weekend {\n            color: var(--g-color-text-danger);\n        }\n\n        &_out-of-boundary {\n            font-weight: var(--g-text-body-font-weight);\n\n            opacity: 0.6;\n        }\n\n        &_current::before {\n            position: absolute;\n            inset-block-start: 50%;\n\n            display: block;\n\n            width: 4px;\n            height: 4px;\n\n            content: '';\n\n            border-radius: 50%;\n            background-color: currentColor;\n\n            transform: translateY(8px);\n        }\n\n        &_disabled {\n            font-weight: var(--g-text-body-font-weight);\n            pointer-events: none;\n\n            opacity: 0.6;\n        }\n\n        &_unavailable:not(&_disabled) {\n            font-weight: var(--g-text-body-font-weight);\n            cursor: default;\n\n            opacity: 0.5;\n            background-color: var(--g-color-base-generic);\n        }\n    }\n}\n","@use 'sass:list';\n@use 'sass:selector';\n\n@mixin overflow-ellipsis($type: ellipsis) {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: $type;\n}\n\n@mixin button-reset() {\n    padding: 0;\n\n    font-family: var(--g-text-body-font-family);\n    font-size: inherit;\n    font-weight: var(--g-text-body-font-weight);\n\n    color: inherit;\n    background: none;\n    border: none;\n    outline: none;\n    cursor: pointer;\n}\n\n@mixin link-reset() {\n    color: inherit;\n    text-decoration: inherit;\n}\n\n@mixin expand-interactive-area($h: 4px, $v: $h) {\n    position: relative;\n\n    &::after {\n        content: '';\n        position: absolute;\n        inset: logical (-$v) (-$h);\n    }\n}\n\n@mixin max-height($height) {\n    max-height: $height;\n    overflow-y: auto;\n}\n\n@mixin max-text-width($width: 100%) {\n    @include overflow-ellipsis();\n\n    max-width: $width;\n}\n\n@mixin aspect-ratio($ratio) {\n    position: relative;\n\n    &::before {\n        display: block;\n        content: '';\n        width: 100%;\n        padding-block-start: $ratio * 100%;\n    }\n\n    > *:only-child {\n        position: absolute;\n        inset: 0;\n    }\n}\n\n@function get-pin-selector($mod, $selector, $append: true) {\n    @if $append {\n        @return selector.append($mod, $selector);\n    } @else {\n        @return list.join($mod, $selector, $separator: space);\n    }\n}\n\n@mixin pin($block, $selectors, $radius, $append: true) {\n    @each $selector in $selectors {\n        @at-root #{get-pin-selector(#{$block}_pin_round-round, $selector, $append)} {\n            border-radius: $radius;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_brick-brick, $selector, $append)} {\n            border-radius: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_clear-clear, $selector, $append)} {\n            border-radius: 0;\n            border-inline: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_circle-circle, $selector, $append)} {\n            border-radius: 100px;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_round-brick, $selector, $append)} {\n            border-start-start-radius: $radius;\n            border-start-end-radius: 0;\n            border-end-start-radius: $radius;\n            border-end-end-radius: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_brick-round, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: $radius;\n            border-end-start-radius: 0;\n            border-end-end-radius: $radius;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_round-clear, $selector, $append)} {\n            border-start-start-radius: $radius;\n            border-start-end-radius: 0;\n            border-end-start-radius: $radius;\n            border-end-end-radius: 0;\n            border-inline-end: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_clear-round, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: $radius;\n            border-end-start-radius: 0;\n            border-end-end-radius: $radius;\n            border-inline-start: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_brick-clear, $selector, $append)} {\n            border-radius: 0;\n            border-inline-end: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_clear-brick, $selector, $append)} {\n            border-radius: 0;\n            border-inline-start: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_circle-brick, $selector, $append)} {\n            border-start-start-radius: 100px;\n            border-start-end-radius: 0;\n            border-end-start-radius: 100px;\n            border-end-end-radius: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_brick-circle, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: 100px;\n            border-end-start-radius: 0;\n            border-end-end-radius: 100px;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_circle-clear, $selector, $append)} {\n            border-start-start-radius: 100px;\n            border-start-end-radius: 0;\n            border-end-start-radius: 100px;\n            border-end-end-radius: 0;\n            border-inline-end: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_clear-circle, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: 100px;\n            border-end-start-radius: 0;\n            border-end-end-radius: 100px;\n            border-inline-start: 0;\n        }\n    }\n}\n\n// Typography\n\n@mixin text-body-1() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-1-font-size);\n    line-height: var(--g-text-body-1-line-height);\n}\n\n@mixin text-body-2() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-2-font-size);\n    line-height: var(--g-text-body-2-line-height);\n}\n\n@mixin text-body-3() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-3-font-size);\n    line-height: var(--g-text-body-3-line-height);\n}\n\n@mixin text-body-short() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-short-font-size);\n    line-height: var(--g-text-body-short-line-height);\n}\n\n@mixin text-caption-1() {\n    font-family: var(--g-text-caption-font-family);\n    font-weight: var(--g-text-caption-font-weight);\n    font-size: var(--g-text-caption-1-font-size);\n    line-height: var(--g-text-caption-1-line-height);\n}\n\n@mixin text-caption-2() {\n    font-family: var(--g-text-caption-font-family);\n    font-weight: var(--g-text-caption-font-weight);\n    font-size: var(--g-text-caption-2-font-size);\n    line-height: var(--g-text-caption-2-line-height);\n}\n\n@mixin text-header-1() {\n    font-family: var(--g-text-header-font-family);\n    font-weight: var(--g-text-header-font-weight);\n    font-size: var(--g-text-header-1-font-size);\n    line-height: var(--g-text-header-1-line-height);\n}\n\n@mixin text-header-2() {\n    font-family: var(--g-text-header-font-family);\n    font-weight: var(--g-text-header-font-weight);\n    font-size: var(--g-text-header-2-font-size);\n    line-height: var(--g-text-header-2-line-height);\n}\n\n@mixin text-subheader-1() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-1-font-size);\n    line-height: var(--g-text-subheader-1-line-height);\n}\n\n@mixin text-subheader-2() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-2-font-size);\n    line-height: var(--g-text-subheader-2-line-height);\n}\n\n@mixin text-subheader-3() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-3-font-size);\n    line-height: var(--g-text-subheader-3-line-height);\n}\n\n@mixin text-display-1() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-1-font-size);\n    line-height: var(--g-text-display-1-line-height);\n}\n\n@mixin text-display-2() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-2-font-size);\n    line-height: var(--g-text-display-2-line-height);\n}\n\n@mixin text-display-3() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-3-font-size);\n    line-height: var(--g-text-display-3-line-height);\n}\n\n@mixin text-display-4() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-4-font-size);\n    line-height: var(--g-text-display-4-line-height);\n}\n\n@mixin text-code-1() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-1-font-size);\n    line-height: var(--g-text-code-1-line-height);\n}\n\n@mixin text-code-2() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-2-font-size);\n    line-height: var(--g-text-code-2-line-height);\n}\n\n@mixin text-code-3() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-3-font-size);\n    line-height: var(--g-text-code-3-line-height);\n}\n\n@mixin text-code-inline-1() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-1-font-size);\n    line-height: var(--g-text-code-inline-1-line-height);\n}\n\n@mixin text-code-inline-2() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-2-font-size);\n    line-height: var(--g-text-code-inline-2-line-height);\n}\n\n@mixin text-code-inline-3() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-3-font-size);\n    line-height: var(--g-text-code-inline-3-line-height);\n}\n\n@mixin text-accent() {\n    font-weight: var(--g-text-accent-font-weight);\n}\n\n@mixin loading($loading-color-1: rgba(255, 255, 255, 0.3), $loading-color-2: transparent) {\n    background-image: repeating-linear-gradient(\n        -45deg,\n        $loading-color-1,\n        $loading-color-1 4px,\n        $loading-color-2 4px,\n        $loading-color-2 8px\n    );\n    background-size: 150%;\n    background-clip: padding-box;\n\n    // stylelint-disable-next-line no-unknown-animations\n    animation: g-loading-animation 0.5s linear infinite;\n\n    @media (prefers-reduced-motion: reduce) {\n        animation: none;\n    }\n}\n\n@mixin scrollbar() {\n    &::-webkit-scrollbar,\n    *::-webkit-scrollbar {\n        width: var(--g-scrollbar-width);\n        height: var(--g-scrollbar-width);\n        background: var(--g-color-scroll-track);\n    }\n\n    &::-webkit-scrollbar-track,\n    *::-webkit-scrollbar-track {\n        background: var(--g-color-scroll-track);\n    }\n\n    &::-webkit-scrollbar-corner,\n    *::-webkit-scrollbar-corner {\n        background: var(--g-color-scroll-corner);\n    }\n\n    &::-webkit-scrollbar-thumb,\n    *::-webkit-scrollbar-thumb {\n        background: var(--g-color-scroll-handle);\n    }\n\n    &::-webkit-scrollbar-thumb:hover,\n    *::-webkit-scrollbar-thumb:hover {\n        background: var(--g-color-scroll-handle-hover);\n    }\n}\n"],"file":"Calendar.css"}

package/dist/esm/components/CalendarView/CalendarView.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { ChevronLeft, ChevronRight } from '@gravity-ui/icons';
-import { ArrowToggle, Button } from '@gravity-ui/uikit';
+import { ArrowToggle, Button, useLang } from '@gravity-ui/uikit';
 import { block } from "../../utils/cn.js";
 import { formatDateTime } from "../utils/dates.js";
 import { useCalendarCellProps } from "./hooks/useCalendarCellProps.js";
@@ -56,15 +56,17 @@ function Content({ className, state, animation, onAnimationEnd }) {
 }
 function Weekdays({ state }) {
     const weekdays = getWeekDays(state);
+    const { lang } = useLang();
     return (_jsx("div", { className: b('grid-row'), role: "row", children: weekdays.map((date) => {
-            return (_jsx("div", { className: b('weekday', { weekend: state.isWeekend(date) }), role: "columnheader", "aria-label": formatDateTime(date, 'dddd', state.timeZone), children: formatDateTime(date, 'dd', state.timeZone) }, date.day()));
+            return (_jsx("div", { className: b('weekday', { weekend: state.isWeekend(date) }), role: "columnheader", "aria-label": formatDateTime(date, 'dddd', state.timeZone, lang), children: formatDateTime(date, 'dd', state.timeZone, lang) }, date.day()));
         }) }));
 }
 function CalendarGridCells({ state }) {
     const rowsInPeriod = state.mode === 'days' ? 6 : 4;
     const columnsInRow = state.mode === 'days' ? 7 : 3 + (state.mode === 'quarters' ? 1 : 0);
     const days = getDaysInPeriod(state);
-    return (_jsx("div", { className: b('grid-rowgroup', { mode: state.mode }), role: "rowgroup", children: [...new Array(rowsInPeriod).keys()].map((rowIndex) => (_jsxs("div", { className: b('grid-row'), role: "row", children: [state.mode === 'quarters' ? (_jsx("span", { role: "rowheader", className: b('grid-rowgroup-header'), children: formatDateTime(days[rowIndex * columnsInRow], 'YYYY', state.timeZone) })) : null, days
+    const { lang } = useLang();
+    return (_jsx("div", { className: b('grid-rowgroup', { mode: state.mode }), role: "rowgroup", children: [...new Array(rowsInPeriod).keys()].map((rowIndex) => (_jsxs("div", { className: b('grid-row'), role: "row", children: [state.mode === 'quarters' ? (_jsx("span", { role: "rowheader", className: b('grid-rowgroup-header'), children: formatDateTime(days[rowIndex * columnsInRow], 'YYYY', state.timeZone, lang) })) : null, days
                     .slice(rowIndex * columnsInRow, (rowIndex + 1) * columnsInRow)
                     .map((date) => {
                     return _jsx(CalendarCell, { date: date, state: state }, date.unix());

package/dist/esm/components/CalendarView/CalendarView.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarView.js","sourceRoot":"../../../../src","sources":["components/CalendarView/CalendarView.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {ChevronLeft, ChevronRight} from '@gravity-ui/icons';\nimport {ArrowToggle, Button} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport type {AccessibilityProps, DomProps, FocusEvents, StyleProps} from '../types';\nimport {formatDateTime} from '../utils/dates';\n\nimport type {RangeCalendarState} from './hooks/types';\nimport {useCalendarCellProps} from './hooks/useCalendarCellProps';\nimport {useCalendarGridProps} from './hooks/useCalendarGridProps';\nimport {useCalendarProps} from './hooks/useCalendarProps';\nimport type {CalendarState} from './hooks/useCalendarState';\nimport {calendarLayouts, getDaysInPeriod, getWeekDays} from './utils';\n\nimport './Calendar.scss';\n\nconst b = block('calendar');\n\nexport type CalendarSize = 'm' | 'l' | 'xl';\n\nexport interface CalendarInstance {\n    focus: () => void;\n}\n\nexport interface CalendarViewProps extends DomProps, StyleProps, FocusEvents, AccessibilityProps {\n    state: CalendarState | RangeCalendarState;\n    /**\n     * The size of the element.\n     * @default m\n     */\n    size?: CalendarSize;\n}\nexport const CalendarView = React.forwardRef<CalendarInstance, CalendarViewProps>(function Calendar(\n    props: CalendarViewProps,\n    ref,\n) {\n    const {state} = props;\n    const {calendarProps, modeButtonProps, nextButtonProps, previousButtonProps} = useCalendarProps(\n        props,\n        state,\n    );\n\n    React.useImperativeHandle(ref, () => ({\n        focus() {\n            state.setFocused(true);\n        },\n    }));\n\n    return (\n        <div\n            {...calendarProps}\n            className={b({size: props.size}, props.className)}\n            style={props.style}\n        >\n            <div className={b('header')}>\n                <Button {...modeButtonProps} view=\"flat\" size={props.size}>\n                    {state.availableModes.indexOf(state.mode) + 1 ===\n                    state.availableModes.length ? (\n                        <span key=\"label\" className={b('mode-label', b(`years-label`))}>\n                            {modeButtonProps.children}\n                        </span>\n                    ) : (\n                        [\n                            <span key=\"label\" className={b('mode-label')}>\n                                {modeButtonProps.children}\n                            </span>,\n                            <Button.Icon key=\"icon\">\n                                <ArrowToggle direction=\"bottom\" />\n                            </Button.Icon>,\n                        ]\n                    )}\n                </Button>\n                <div className={b('controls')}>\n                    <Button {...previousButtonProps} view=\"flat\" size={props.size}>\n                        <Button.Icon>\n                            <ChevronLeft className={b('control-icon')} />\n                        </Button.Icon>\n                    </Button>\n                    <Button {...nextButtonProps} view=\"flat\" size={props.size}>\n                        <Button.Icon>\n                            <ChevronRight className={b('control-icon')} />\n                        </Button.Icon>\n                    </Button>\n                </div>\n            </div>\n            <CalendarGrid state={state} />\n        </div>\n    );\n});\n\ninterface CalendarGridProps {\n    state: CalendarState | RangeCalendarState;\n}\nfunction CalendarGrid({state}: CalendarGridProps) {\n    const [prevState, setPrevState] = React.useState(() => ({...state, isFocused: false}));\n\n    const modeChanged = state.mode !== prevState.mode;\n    const startDateChanged = !state.startDate.isSame(prevState.startDate, 'days');\n\n    let animation;\n    if (modeChanged) {\n        if (calendarLayouts.indexOf(prevState.mode) > calendarLayouts.indexOf(state.mode)) {\n            animation = 'zoom-out';\n        } else {\n            animation = 'zoom-in';\n        }\n    } else if (startDateChanged) {\n        if (state.startDate.isBefore(prevState.startDate)) {\n            animation = 'forward';\n        } else {\n            animation = 'backward';\n        }\n    }\n\n    const {gridProps} = useCalendarGridProps(state);\n\n    return (\n        <div className={b('grid')} {...gridProps}>\n            {animation && (\n                <Content className={b('previous-state')} state={prevState} animation={animation} />\n            )}\n            <Content\n                key=\"current\"\n                className={b('current-state')}\n                state={state}\n                animation={animation}\n                onAnimationEnd={() => {\n                    setPrevState({...state, isFocused: false});\n                }}\n            />\n        </div>\n    );\n}\n\ninterface ContentProps {\n    className?: string;\n    animation?: string;\n    onAnimationEnd?: () => void;\n    state: CalendarState | RangeCalendarState;\n}\nfunction Content({className, state, animation, onAnimationEnd}: ContentProps) {\n    return (\n        <div\n            className={b('content', {animation}, className)}\n            onAnimationEnd={onAnimationEnd}\n            role=\"presentation\"\n        >\n            {state.mode === 'days' && <Weekdays state={state} />}\n            <CalendarGridCells state={state} />\n        </div>\n    );\n}\n\ninterface WeekdaysProps {\n    state: CalendarState | RangeCalendarState;\n}\nfunction Weekdays({state}: WeekdaysProps) {\n    const weekdays = getWeekDays(state);\n\n    return (\n        <div className={b('grid-row')} role=\"row\">\n            {weekdays.map((date) => {\n                return (\n                    <div\n                        key={date.day()}\n                        className={b('weekday', {weekend: state.isWeekend(date)})}\n                        role=\"columnheader\"\n                        aria-label={formatDateTime(date, 'dddd', state.timeZone)}\n                    >\n                        {formatDateTime(date, 'dd', state.timeZone)}\n                    </div>\n                );\n            })}\n        </div>\n    );\n}\n\ninterface CalendarGridProps {\n    state: CalendarState | RangeCalendarState;\n}\nfunction CalendarGridCells({state}: CalendarGridProps) {\n    const rowsInPeriod = state.mode === 'days' ? 6 : 4;\n    const columnsInRow = state.mode === 'days' ? 7 : 3 + (state.mode === 'quarters' ? 1 : 0);\n    const days = getDaysInPeriod(state);\n    return (\n        <div className={b('grid-rowgroup', {mode: state.mode})} role=\"rowgroup\">\n            {[...new Array(rowsInPeriod).keys()].map((rowIndex) => (\n                <div key={rowIndex} className={b('grid-row')} role=\"row\">\n                    {state.mode === 'quarters' ? (\n                        <span role=\"rowheader\" className={b('grid-rowgroup-header')}>\n                            {formatDateTime(days[rowIndex * columnsInRow], 'YYYY', state.timeZone)}\n                        </span>\n                    ) : null}\n                    {days\n                        .slice(rowIndex * columnsInRow, (rowIndex + 1) * columnsInRow)\n                        .map((date) => {\n                            return <CalendarCell key={date.unix()} date={date} state={state} />;\n                        })}\n                </div>\n            ))}\n        </div>\n    );\n}\n\ninterface CalendarCellProps {\n    date: DateTime;\n    state: CalendarState | RangeCalendarState;\n}\nfunction CalendarCell({date, state}: CalendarCellProps) {\n    const {\n        cellProps,\n        buttonProps,\n        formattedDate,\n        isDisabled,\n        isSelected,\n        isRangeSelection,\n        isSelectionStart,\n        isSelectionEnd,\n        isOutsideCurrentRange,\n        isUnavailable,\n        isCurrent,\n        isWeekend,\n    } = useCalendarCellProps(date, state);\n\n    return (\n        <div {...cellProps}>\n            <div\n                {...buttonProps}\n                className={b('button', {\n                    disabled: isDisabled,\n                    selected: isSelected,\n                    'range-selection': isRangeSelection,\n                    'selection-start': isSelectionStart,\n                    'selection-end': isSelectionEnd,\n                    'out-of-boundary': isOutsideCurrentRange,\n                    unavailable: isUnavailable,\n                    current: isCurrent,\n                    weekend: isWeekend,\n                })}\n            >\n                {formattedDate}\n            </div>\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"CalendarView.js","sourceRoot":"../../../../src","sources":["components/CalendarView/CalendarView.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {ChevronLeft, ChevronRight} from '@gravity-ui/icons';\nimport {ArrowToggle, Button, useLang} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport type {AccessibilityProps, DomProps, FocusEvents, StyleProps} from '../types';\nimport {formatDateTime} from '../utils/dates';\n\nimport type {RangeCalendarState} from './hooks/types';\nimport {useCalendarCellProps} from './hooks/useCalendarCellProps';\nimport {useCalendarGridProps} from './hooks/useCalendarGridProps';\nimport {useCalendarProps} from './hooks/useCalendarProps';\nimport type {CalendarState} from './hooks/useCalendarState';\nimport {calendarLayouts, getDaysInPeriod, getWeekDays} from './utils';\n\nimport './Calendar.scss';\n\nconst b = block('calendar');\n\nexport type CalendarSize = 'm' | 'l' | 'xl';\n\nexport interface CalendarInstance {\n    focus: () => void;\n}\n\nexport interface CalendarViewProps extends DomProps, StyleProps, FocusEvents, AccessibilityProps {\n    state: CalendarState | RangeCalendarState;\n    /**\n     * The size of the element.\n     * @default m\n     */\n    size?: CalendarSize;\n}\nexport const CalendarView = React.forwardRef<CalendarInstance, CalendarViewProps>(function Calendar(\n    props: CalendarViewProps,\n    ref,\n) {\n    const {state} = props;\n    const {calendarProps, modeButtonProps, nextButtonProps, previousButtonProps} = useCalendarProps(\n        props,\n        state,\n    );\n\n    React.useImperativeHandle(ref, () => ({\n        focus() {\n            state.setFocused(true);\n        },\n    }));\n\n    return (\n        <div\n            {...calendarProps}\n            className={b({size: props.size}, props.className)}\n            style={props.style}\n        >\n            <div className={b('header')}>\n                <Button {...modeButtonProps} view=\"flat\" size={props.size}>\n                    {state.availableModes.indexOf(state.mode) + 1 ===\n                    state.availableModes.length ? (\n                        <span key=\"label\" className={b('mode-label', b(`years-label`))}>\n                            {modeButtonProps.children}\n                        </span>\n                    ) : (\n                        [\n                            <span key=\"label\" className={b('mode-label')}>\n                                {modeButtonProps.children}\n                            </span>,\n                            <Button.Icon key=\"icon\">\n                                <ArrowToggle direction=\"bottom\" />\n                            </Button.Icon>,\n                        ]\n                    )}\n                </Button>\n                <div className={b('controls')}>\n                    <Button {...previousButtonProps} view=\"flat\" size={props.size}>\n                        <Button.Icon>\n                            <ChevronLeft className={b('control-icon')} />\n                        </Button.Icon>\n                    </Button>\n                    <Button {...nextButtonProps} view=\"flat\" size={props.size}>\n                        <Button.Icon>\n                            <ChevronRight className={b('control-icon')} />\n                        </Button.Icon>\n                    </Button>\n                </div>\n            </div>\n            <CalendarGrid state={state} />\n        </div>\n    );\n});\n\ninterface CalendarGridProps {\n    state: CalendarState | RangeCalendarState;\n}\nfunction CalendarGrid({state}: CalendarGridProps) {\n    const [prevState, setPrevState] = React.useState(() => ({...state, isFocused: false}));\n\n    const modeChanged = state.mode !== prevState.mode;\n    const startDateChanged = !state.startDate.isSame(prevState.startDate, 'days');\n\n    let animation;\n    if (modeChanged) {\n        if (calendarLayouts.indexOf(prevState.mode) > calendarLayouts.indexOf(state.mode)) {\n            animation = 'zoom-out';\n        } else {\n            animation = 'zoom-in';\n        }\n    } else if (startDateChanged) {\n        if (state.startDate.isBefore(prevState.startDate)) {\n            animation = 'forward';\n        } else {\n            animation = 'backward';\n        }\n    }\n\n    const {gridProps} = useCalendarGridProps(state);\n\n    return (\n        <div className={b('grid')} {...gridProps}>\n            {animation && (\n                <Content className={b('previous-state')} state={prevState} animation={animation} />\n            )}\n            <Content\n                key=\"current\"\n                className={b('current-state')}\n                state={state}\n                animation={animation}\n                onAnimationEnd={() => {\n                    setPrevState({...state, isFocused: false});\n                }}\n            />\n        </div>\n    );\n}\n\ninterface ContentProps {\n    className?: string;\n    animation?: string;\n    onAnimationEnd?: () => void;\n    state: CalendarState | RangeCalendarState;\n}\nfunction Content({className, state, animation, onAnimationEnd}: ContentProps) {\n    return (\n        <div\n            className={b('content', {animation}, className)}\n            onAnimationEnd={onAnimationEnd}\n            role=\"presentation\"\n        >\n            {state.mode === 'days' && <Weekdays state={state} />}\n            <CalendarGridCells state={state} />\n        </div>\n    );\n}\n\ninterface WeekdaysProps {\n    state: CalendarState | RangeCalendarState;\n}\nfunction Weekdays({state}: WeekdaysProps) {\n    const weekdays = getWeekDays(state);\n    const {lang} = useLang();\n\n    return (\n        <div className={b('grid-row')} role=\"row\">\n            {weekdays.map((date) => {\n                return (\n                    <div\n                        key={date.day()}\n                        className={b('weekday', {weekend: state.isWeekend(date)})}\n                        role=\"columnheader\"\n                        aria-label={formatDateTime(date, 'dddd', state.timeZone, lang)}\n                    >\n                        {formatDateTime(date, 'dd', state.timeZone, lang)}\n                    </div>\n                );\n            })}\n        </div>\n    );\n}\n\ninterface CalendarGridProps {\n    state: CalendarState | RangeCalendarState;\n}\nfunction CalendarGridCells({state}: CalendarGridProps) {\n    const rowsInPeriod = state.mode === 'days' ? 6 : 4;\n    const columnsInRow = state.mode === 'days' ? 7 : 3 + (state.mode === 'quarters' ? 1 : 0);\n    const days = getDaysInPeriod(state);\n    const {lang} = useLang();\n    return (\n        <div className={b('grid-rowgroup', {mode: state.mode})} role=\"rowgroup\">\n            {[...new Array(rowsInPeriod).keys()].map((rowIndex) => (\n                <div key={rowIndex} className={b('grid-row')} role=\"row\">\n                    {state.mode === 'quarters' ? (\n                        <span role=\"rowheader\" className={b('grid-rowgroup-header')}>\n                            {formatDateTime(\n                                days[rowIndex * columnsInRow],\n                                'YYYY',\n                                state.timeZone,\n                                lang,\n                            )}\n                        </span>\n                    ) : null}\n                    {days\n                        .slice(rowIndex * columnsInRow, (rowIndex + 1) * columnsInRow)\n                        .map((date) => {\n                            return <CalendarCell key={date.unix()} date={date} state={state} />;\n                        })}\n                </div>\n            ))}\n        </div>\n    );\n}\n\ninterface CalendarCellProps {\n    date: DateTime;\n    state: CalendarState | RangeCalendarState;\n}\nfunction CalendarCell({date, state}: CalendarCellProps) {\n    const {\n        cellProps,\n        buttonProps,\n        formattedDate,\n        isDisabled,\n        isSelected,\n        isRangeSelection,\n        isSelectionStart,\n        isSelectionEnd,\n        isOutsideCurrentRange,\n        isUnavailable,\n        isCurrent,\n        isWeekend,\n    } = useCalendarCellProps(date, state);\n\n    return (\n        <div {...cellProps}>\n            <div\n                {...buttonProps}\n                className={b('button', {\n                    disabled: isDisabled,\n                    selected: isSelected,\n                    'range-selection': isRangeSelection,\n                    'selection-start': isSelectionStart,\n                    'selection-end': isSelectionEnd,\n                    'out-of-boundary': isOutsideCurrentRange,\n                    unavailable: isUnavailable,\n                    current: isCurrent,\n                    weekend: isWeekend,\n                })}\n            >\n                {formattedDate}\n            </div>\n        </div>\n    );\n}\n"]}

package/dist/esm/components/CalendarView/hooks/useCalendarCellProps.js

@@ -1,7 +1,9 @@
 import React from 'react';
+import { useLang } from '@gravity-ui/uikit';
 import { formatDateTime } from "../../utils/dates.js";
 export function useCalendarCellProps(date, state) {
     const ref = React.useRef(null);
+    const { lang } = useLang();
     const isFocused = state.isCellFocused(date);
     React.useEffect(() => {
         var _a;
@@ -21,7 +23,7 @@ export function useCalendarCellProps(date, state) {
     const isSelectable = !isDisabled && !isUnavailable;
     const isCurrent = state.isCurrent(date);
     const isWeekend = state.isWeekend(date);
-    const label = getDateLabel(date, state);
+    const label = getDateLabel(date, state, lang);
     const cellProps = {
         role: 'gridcell',
         'aria-selected': isSelected ? 'true' : undefined,
@@ -53,15 +55,15 @@ export function useCalendarCellProps(date, state) {
             }
         },
     };
-    let formattedDate = formatDateTime(date, 'D', state.timeZone);
+    let formattedDate = formatDateTime(date, 'D', state.timeZone, lang);
     if (state.mode === 'months') {
-        formattedDate = formatDateTime(date, 'MMM', state.timeZone);
+        formattedDate = formatDateTime(date, 'MMM', state.timeZone, lang);
     }
     else if (state.mode === 'quarters') {
-        formattedDate = formatDateTime(date, '[Q]Q', state.timeZone);
+        formattedDate = formatDateTime(date, '[Q]Q', state.timeZone, lang);
     }
     else if (state.mode === 'years') {
-        formattedDate = formatDateTime(date, 'YYYY', state.timeZone);
+        formattedDate = formatDateTime(date, 'YYYY', state.timeZone, lang);
     }
     return {
         cellProps,
@@ -78,19 +80,19 @@ export function useCalendarCellProps(date, state) {
         isWeekend,
     };
 }
-function getDateLabel(date, state) {
+function getDateLabel(date, state, lang) {
     switch (state.mode) {
         case 'days': {
-            return `${formatDateTime(date, 'dddd', state.timeZone)}, ${formatDateTime(date, 'LL', state.timeZone)}`;
+            return `${formatDateTime(date, 'dddd', state.timeZone, lang)}, ${formatDateTime(date, 'LL', state.timeZone, lang)}`;
         }
         case 'months': {
-            return `${formatDateTime(date, 'MMMM YYYY', state.timeZone)}`;
+            return `${formatDateTime(date, 'MMMM YYYY', state.timeZone, lang)}`;
         }
         case 'quarters': {
-            return `${formatDateTime(date, '[Q]Q YYYY', state.timeZone)}`;
+            return `${formatDateTime(date, '[Q]Q YYYY', state.timeZone, lang)}`;
         }
         case 'years': {
-            return `${formatDateTime(date, 'YYYY', state.timeZone)}`;
+            return `${formatDateTime(date, 'YYYY', state.timeZone, lang)}`;
         }
         default:
             return '';

package/dist/esm/components/CalendarView/hooks/useCalendarCellProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCalendarCellProps.js","sourceRoot":"../../../../../src","sources":["components/CalendarView/hooks/useCalendarCellProps.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\n\nimport {formatDateTime} from '../../utils/dates';\n\nimport type {CalendarState, RangeCalendarState} from './types';\n\nexport function useCalendarCellProps(date: DateTime, state: CalendarState | RangeCalendarState) {\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    const isFocused = state.isCellFocused(date);\n    React.useEffect(() => {\n        if (isFocused) {\n            ref.current?.focus({preventScroll: true});\n        }\n    }, [isFocused]);\n\n    const tabIndex = state.focusedDate.isSame(date, state.mode) ? 0 : -1;\n    const isDisabled = state.isCellDisabled(date);\n    const isSelected = state.isSelected(date);\n    const highlightedRange = 'highlightedRange' in state && state.highlightedRange;\n    const isRangeSelection = Boolean(highlightedRange && isSelected);\n    const isSelectionStart =\n        isSelected && highlightedRange && date.isSame(highlightedRange.start, state.mode);\n    const isSelectionEnd =\n        isSelected && highlightedRange && date.isSame(highlightedRange.end, state.mode);\n    const isOutsideCurrentRange =\n        state.mode === 'days' ? !state.focusedDate.isSame(date, 'month') : false;\n    const isUnavailable = state.isCellUnavailable(date);\n    const isSelectable = !isDisabled && !isUnavailable;\n    const isCurrent = state.isCurrent(date);\n    const isWeekend = state.isWeekend(date);\n\n    const label = getDateLabel(date, state);\n\n    const cellProps: React.HTMLAttributes<unknown> = {\n        role: 'gridcell',\n        'aria-selected': isSelected ? 'true' : undefined,\n        'aria-disabled': isDisabled ? 'true' : undefined,\n    };\n\n    const buttonProps: React.HTMLAttributes<unknown> & {ref: React.Ref<HTMLDivElement>} = {\n        ref,\n        role: 'button',\n        tabIndex: isDisabled ? undefined : tabIndex,\n        'aria-disabled': isSelectable ? undefined : 'true',\n        'aria-label': label,\n        onClick: isSelectable\n            ? () => {\n                  state.setFocusedDate(date);\n                  state.selectDate(date);\n              }\n            : undefined,\n        onPointerEnter() {\n            if ('highlightDate' in state && isSelectable) {\n                if (isOutsideCurrentRange) {\n                    const newDate = date.isBefore(state.focusedDate)\n                        ? state.focusedDate.startOf('month')\n                        : state.focusedDate.endOf('month').startOf('date');\n                    state.highlightDate(newDate);\n                } else {\n                    state.highlightDate(date);\n                }\n            }\n        },\n    };\n\n    let formattedDate = formatDateTime(date, 'D', state.timeZone);\n    if (state.mode === 'months') {\n        formattedDate = formatDateTime(date, 'MMM', state.timeZone);\n    } else if (state.mode === 'quarters') {\n        formattedDate = formatDateTime(date, '[Q]Q', state.timeZone);\n    } else if (state.mode === 'years') {\n        formattedDate = formatDateTime(date, 'YYYY', state.timeZone);\n    }\n\n    return {\n        cellProps,\n        buttonProps,\n        formattedDate,\n        isDisabled,\n        isSelected,\n        isRangeSelection,\n        isSelectionStart,\n        isSelectionEnd,\n        isOutsideCurrentRange,\n        isUnavailable,\n        isCurrent,\n        isWeekend,\n    };\n}\n\nfunction getDateLabel(date: DateTime, state: CalendarState | RangeCalendarState) {\n    switch (state.mode) {\n        case 'days': {\n            return `${formatDateTime(date, 'dddd', state.timeZone)}, ${formatDateTime(date, 'LL', state.timeZone)}`;\n        }\n        case 'months': {\n            return `${formatDateTime(date, 'MMMM YYYY', state.timeZone)}`;\n        }\n        case 'quarters': {\n            return `${formatDateTime(date, '[Q]Q YYYY', state.timeZone)}`;\n        }\n        case 'years': {\n            return `${formatDateTime(date, 'YYYY', state.timeZone)}`;\n        }\n        default:\n            return '';\n    }\n}\n"]}
+{"version":3,"file":"useCalendarCellProps.js","sourceRoot":"../../../../../src","sources":["components/CalendarView/hooks/useCalendarCellProps.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {useLang} from '@gravity-ui/uikit';\n\nimport {formatDateTime} from '../../utils/dates';\n\nimport type {CalendarState, RangeCalendarState} from './types';\n\nexport function useCalendarCellProps(date: DateTime, state: CalendarState | RangeCalendarState) {\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    const {lang} = useLang();\n\n    const isFocused = state.isCellFocused(date);\n    React.useEffect(() => {\n        if (isFocused) {\n            ref.current?.focus({preventScroll: true});\n        }\n    }, [isFocused]);\n\n    const tabIndex = state.focusedDate.isSame(date, state.mode) ? 0 : -1;\n    const isDisabled = state.isCellDisabled(date);\n    const isSelected = state.isSelected(date);\n    const highlightedRange = 'highlightedRange' in state && state.highlightedRange;\n    const isRangeSelection = Boolean(highlightedRange && isSelected);\n    const isSelectionStart =\n        isSelected && highlightedRange && date.isSame(highlightedRange.start, state.mode);\n    const isSelectionEnd =\n        isSelected && highlightedRange && date.isSame(highlightedRange.end, state.mode);\n    const isOutsideCurrentRange =\n        state.mode === 'days' ? !state.focusedDate.isSame(date, 'month') : false;\n    const isUnavailable = state.isCellUnavailable(date);\n    const isSelectable = !isDisabled && !isUnavailable;\n    const isCurrent = state.isCurrent(date);\n    const isWeekend = state.isWeekend(date);\n\n    const label = getDateLabel(date, state, lang);\n\n    const cellProps: React.HTMLAttributes<unknown> = {\n        role: 'gridcell',\n        'aria-selected': isSelected ? 'true' : undefined,\n        'aria-disabled': isDisabled ? 'true' : undefined,\n    };\n\n    const buttonProps: React.HTMLAttributes<unknown> & {ref: React.Ref<HTMLDivElement>} = {\n        ref,\n        role: 'button',\n        tabIndex: isDisabled ? undefined : tabIndex,\n        'aria-disabled': isSelectable ? undefined : 'true',\n        'aria-label': label,\n        onClick: isSelectable\n            ? () => {\n                  state.setFocusedDate(date);\n                  state.selectDate(date);\n              }\n            : undefined,\n        onPointerEnter() {\n            if ('highlightDate' in state && isSelectable) {\n                if (isOutsideCurrentRange) {\n                    const newDate = date.isBefore(state.focusedDate)\n                        ? state.focusedDate.startOf('month')\n                        : state.focusedDate.endOf('month').startOf('date');\n                    state.highlightDate(newDate);\n                } else {\n                    state.highlightDate(date);\n                }\n            }\n        },\n    };\n\n    let formattedDate = formatDateTime(date, 'D', state.timeZone, lang);\n    if (state.mode === 'months') {\n        formattedDate = formatDateTime(date, 'MMM', state.timeZone, lang);\n    } else if (state.mode === 'quarters') {\n        formattedDate = formatDateTime(date, '[Q]Q', state.timeZone, lang);\n    } else if (state.mode === 'years') {\n        formattedDate = formatDateTime(date, 'YYYY', state.timeZone, lang);\n    }\n\n    return {\n        cellProps,\n        buttonProps,\n        formattedDate,\n        isDisabled,\n        isSelected,\n        isRangeSelection,\n        isSelectionStart,\n        isSelectionEnd,\n        isOutsideCurrentRange,\n        isUnavailable,\n        isCurrent,\n        isWeekend,\n    };\n}\n\nfunction getDateLabel(date: DateTime, state: CalendarState | RangeCalendarState, lang: string) {\n    switch (state.mode) {\n        case 'days': {\n            return `${formatDateTime(date, 'dddd', state.timeZone, lang)}, ${formatDateTime(date, 'LL', state.timeZone, lang)}`;\n        }\n        case 'months': {\n            return `${formatDateTime(date, 'MMMM YYYY', state.timeZone, lang)}`;\n        }\n        case 'quarters': {\n            return `${formatDateTime(date, '[Q]Q YYYY', state.timeZone, lang)}`;\n        }\n        case 'years': {\n            return `${formatDateTime(date, 'YYYY', state.timeZone, lang)}`;\n        }\n        default:\n            return '';\n    }\n}\n"]}

package/dist/esm/components/CalendarView/hooks/useCalendarGridProps.js

@@ -1,4 +1,4 @@
-import { useFocusWithin } from '@gravity-ui/uikit';
+import { useFocusWithin, useLang } from '@gravity-ui/uikit';
 import { formatDateTime } from "../../utils/dates.js";
 export function useCalendarGridProps(state) {
     const { focusWithinProps } = useFocusWithin({
@@ -6,9 +6,10 @@ export function useCalendarGridProps(state) {
             state.setFocused(isFocused);
         },
     });
+    const { lang } = useLang();
     const gridProps = Object.assign(Object.assign({ role: 'grid', 'aria-label': state.mode === 'years' || state.mode === 'quarters'
             ? `${state.startDate.year()} — ${state.endDate.year()}`
-            : formatDateTime(state.focusedDate, state.mode === 'days' ? 'MMMM YYYY' : 'YYYY', state.timeZone), 'aria-disabled': state.disabled ? 'true' : undefined, 'aria-readonly': state.readOnly ? 'true' : undefined }, focusWithinProps), { onKeyDown: (e) => {
+            : formatDateTime(state.focusedDate, state.mode === 'days' ? 'MMMM YYYY' : 'YYYY', state.timeZone, lang), 'aria-disabled': state.disabled ? 'true' : undefined, 'aria-readonly': state.readOnly ? 'true' : undefined }, focusWithinProps), { onKeyDown: (e) => {
             if (e.key === 'ArrowRight') {
                 e.preventDefault();
                 state.focusNextCell();

package/dist/esm/components/CalendarView/hooks/useCalendarGridProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCalendarGridProps.js","sourceRoot":"../../../../../src","sources":["components/CalendarView/hooks/useCalendarGridProps.ts"],"names":[],"mappings":"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","sourcesContent":["import {useFocusWithin} from '@gravity-ui/uikit';\n\nimport {formatDateTime} from '../../utils/dates';\n\nimport type {CalendarState, RangeCalendarState} from './types';\n\nexport function useCalendarGridProps(state: CalendarState | RangeCalendarState) {\n    const {focusWithinProps} = useFocusWithin({\n        onFocusWithinChange: (isFocused) => {\n            state.setFocused(isFocused);\n        },\n    });\n\n    const gridProps: React.HTMLAttributes<HTMLElement> = {\n        role: 'grid',\n        'aria-label':\n            state.mode === 'years' || state.mode === 'quarters'\n                ? `${state.startDate.year()} — ${state.endDate.year()}`\n                : formatDateTime(\n                      state.focusedDate,\n                      state.mode === 'days' ? 'MMMM YYYY' : 'YYYY',\n                      state.timeZone,\n                  ),\n        'aria-disabled': state.disabled ? 'true' : undefined,\n        'aria-readonly': state.readOnly ? 'true' : undefined,\n        ...focusWithinProps,\n        onKeyDown: (e) => {\n            if (e.key === 'ArrowRight') {\n                e.preventDefault();\n                state.focusNextCell();\n            } else if (e.key === 'ArrowLeft') {\n                e.preventDefault();\n                state.focusPreviousCell();\n            } else if (e.key === 'ArrowDown') {\n                e.preventDefault();\n                state.focusNextRow();\n            } else if (e.key === 'ArrowUp') {\n                e.preventDefault();\n                state.focusPreviousRow();\n            } else if (e.key === 'PageDown') {\n                e.preventDefault();\n                state.focusNextPage(e.shiftKey);\n            } else if (e.key === 'PageUp') {\n                e.preventDefault();\n                state.focusPreviousPage(e.shiftKey);\n            } else if (e.key === 'End') {\n                e.preventDefault();\n                state.focusSectionEnd();\n            } else if (e.key === 'Home') {\n                e.preventDefault();\n                state.focusSectionStart();\n            } else if (e.code === 'Minus') {\n                e.preventDefault();\n                state.zoomOut();\n            } else if (e.code === 'Equal') {\n                e.preventDefault();\n                state.zoomIn();\n            } else if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                state.selectDate(state.focusedDate);\n            }\n        },\n    };\n\n    return {\n        gridProps,\n    };\n}\n"]}
+{"version":3,"file":"useCalendarGridProps.js","sourceRoot":"../../../../../src","sources":["components/CalendarView/hooks/useCalendarGridProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAE,OAAO,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAC,cAAc,EAAC,6BAA0B;AAIjD,MAAM,UAAU,oBAAoB,CAAC,KAAyC;IAC1E,MAAM,EAAC,gBAAgB,EAAC,GAAG,cAAc,CAAC;QACtC,mBAAmB,EAAE,CAAC,SAAS,EAAE,EAAE;YAC/B,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;QAChC,CAAC;KACJ,CAAC,CAAC;IAEH,MAAM,EAAC,IAAI,EAAC,GAAG,OAAO,EAAE,CAAC;IACzB,MAAM,SAAS,iCACX,IAAI,EAAE,MAAM,EACZ,YAAY,EACR,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU;YAC/C,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,MAAM,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE;YACvD,CAAC,CAAC,cAAc,CACV,KAAK,CAAC,WAAW,EACjB,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,EAC5C,KAAK,CAAC,QAAQ,EACd,IAAI,CACP,EACX,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACpD,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IACjD,gBAAgB,KACnB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;gBACzB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,aAAa,EAAE,CAAC;YAC1B,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;gBAC/B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAC9B,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;gBAC/B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,YAAY,EAAE,CAAC;YACzB,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;gBAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,gBAAgB,EAAE,CAAC;YAC7B,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC9B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;YACpC,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC5B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;YACxC,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;gBACzB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,eAAe,EAAE,CAAC;YAC5B,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,MAAM,EAAE,CAAC;gBAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAC9B,CAAC;iBAAM,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;gBAC5B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,OAAO,EAAE,CAAC;YACpB,CAAC;iBAAM,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;gBAC5B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,MAAM,EAAE,CAAC;YACnB,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBAC5C,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YACxC,CAAC;QACL,CAAC,GACJ,CAAC;IAEF,OAAO;QACH,SAAS;KACZ,CAAC;AACN,CAAC","sourcesContent":["import {useFocusWithin, useLang} from '@gravity-ui/uikit';\n\nimport {formatDateTime} from '../../utils/dates';\n\nimport type {CalendarState, RangeCalendarState} from './types';\n\nexport function useCalendarGridProps(state: CalendarState | RangeCalendarState) {\n    const {focusWithinProps} = useFocusWithin({\n        onFocusWithinChange: (isFocused) => {\n            state.setFocused(isFocused);\n        },\n    });\n\n    const {lang} = useLang();\n    const gridProps: React.HTMLAttributes<HTMLElement> = {\n        role: 'grid',\n        'aria-label':\n            state.mode === 'years' || state.mode === 'quarters'\n                ? `${state.startDate.year()} — ${state.endDate.year()}`\n                : formatDateTime(\n                      state.focusedDate,\n                      state.mode === 'days' ? 'MMMM YYYY' : 'YYYY',\n                      state.timeZone,\n                      lang,\n                  ),\n        'aria-disabled': state.disabled ? 'true' : undefined,\n        'aria-readonly': state.readOnly ? 'true' : undefined,\n        ...focusWithinProps,\n        onKeyDown: (e) => {\n            if (e.key === 'ArrowRight') {\n                e.preventDefault();\n                state.focusNextCell();\n            } else if (e.key === 'ArrowLeft') {\n                e.preventDefault();\n                state.focusPreviousCell();\n            } else if (e.key === 'ArrowDown') {\n                e.preventDefault();\n                state.focusNextRow();\n            } else if (e.key === 'ArrowUp') {\n                e.preventDefault();\n                state.focusPreviousRow();\n            } else if (e.key === 'PageDown') {\n                e.preventDefault();\n                state.focusNextPage(e.shiftKey);\n            } else if (e.key === 'PageUp') {\n                e.preventDefault();\n                state.focusPreviousPage(e.shiftKey);\n            } else if (e.key === 'End') {\n                e.preventDefault();\n                state.focusSectionEnd();\n            } else if (e.key === 'Home') {\n                e.preventDefault();\n                state.focusSectionStart();\n            } else if (e.code === 'Minus') {\n                e.preventDefault();\n                state.zoomOut();\n            } else if (e.code === 'Equal') {\n                e.preventDefault();\n                state.zoomIn();\n            } else if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                state.selectDate(state.focusedDate);\n            }\n        },\n    };\n\n    return {\n        gridProps,\n    };\n}\n"]}

package/dist/esm/components/CalendarView/hooks/useCalendarProps.js

@@ -1,23 +1,26 @@
 import React from 'react';
-import { useFocusWithin } from '@gravity-ui/uikit';
+import { useFocusWithin, useLang } from '@gravity-ui/uikit';
 import { formatDateTime } from "../../utils/dates.js";
+import { filterDOMProps } from "../../utils/filterDOMProps.js";
 import { i18n } from "../i18n/index.js";
 const buttonDisabledClassName = 'yc-button_disabled g-button_disabled';
-// eslint-disable-next-line complexity
 export function useCalendarProps(props, state) {
+    const { lang } = useLang();
     const title = state.mode === 'years' || state.mode === 'quarters'
         ? `${state.startDate.year()} — ${state.endDate.year()}`
-        : formatDateTime(state.focusedDate, state.mode === 'days' ? 'MMMM YYYY' : 'YYYY', state.timeZone);
+        : formatDateTime(state.focusedDate, state.mode === 'days' ? 'MMMM YYYY' : 'YYYY', state.timeZone, lang);
     const { focusWithinProps } = useFocusWithin({
         onFocusWithin: props.onFocus,
         onBlurWithin: props.onBlur,
     });
-    const calendarProps = Object.assign({ role: 'group', id: props.id, 'aria-label': [props['aria-label'], title].filter(Boolean).join(', '), 'aria-labelledby': props['aria-labelledby'] || undefined, 'aria-describedby': props['aria-describedby'] || undefined, 'aria-details': props['aria-details'] || undefined, 'aria-disabled': state.disabled || undefined }, focusWithinProps);
+    const calendarProps = Object.assign(Object.assign(Object.assign({}, filterDOMProps(props, { labelable: true })), { role: 'group', 'aria-label': [props['aria-label'], title].filter(Boolean).join(', '), 'aria-disabled': state.disabled || undefined }), focusWithinProps);
     const modeIndex = state.availableModes.indexOf(state.mode);
     const isModeLast = modeIndex + 1 === state.availableModes.length;
     const isNextModeLast = modeIndex + 2 === state.availableModes.length;
     const modeDisabled = state.disabled || isModeLast;
     const modeButtonProps = {
+        // Always set a tabIndex so that Safari allows focusing native buttons
+        tabIndex: 0,
         disabled: state.disabled,
         // FIXME: do not use button class name
         className: modeDisabled ? buttonDisabledClassName : undefined,
@@ -30,7 +33,7 @@ export function useCalendarProps(props, state) {
                 }
             },
         'aria-disabled': modeDisabled ? 'true' : undefined,
-        'aria-description': getAriaDescriptionForModeButton(state.mode, state.availableModes),
+        'aria-description': useAriaDescriptionForModeButton(state.mode, state.availableModes),
         'aria-live': 'polite',
         children: title,
     };
@@ -42,7 +45,10 @@ export function useCalendarProps(props, state) {
             state.setFocused(true);
         }
     });
+    const { t } = i18n.useTranslation();
     const previousButtonProps = {
+        // Always set a tabIndex so that Safari allows focusing native buttons
+        tabIndex: 0,
         disabled: state.disabled,
         // FIXME: do not use button class name
         className: previousDisabled ? buttonDisabledClassName : undefined,
@@ -61,7 +67,7 @@ export function useCalendarProps(props, state) {
             : () => {
                 previousFocused.current = false;
             },
-        'aria-label': i18n('Previous'),
+        'aria-label': t('Previous'),
         'aria-disabled': previousDisabled ? 'true' : undefined,
     };
     const nextFocused = React.useRef(false);
@@ -73,6 +79,8 @@ export function useCalendarProps(props, state) {
         }
     });
     const nextButtonProps = {
+        // Always set a tabIndex so that Safari allows focusing native buttons
+        tabIndex: 0,
         disabled: state.disabled,
         // FIXME: do not use button class name
         className: nextDisabled ? buttonDisabledClassName : undefined,
@@ -91,7 +99,7 @@ export function useCalendarProps(props, state) {
             : () => {
                 nextFocused.current = false;
             },
-        'aria-label': i18n('Next'),
+        'aria-label': t('Next'),
         'aria-disabled': previousDisabled ? 'true' : undefined,
     };
     return {
@@ -101,7 +109,8 @@ export function useCalendarProps(props, state) {
         previousButtonProps,
     };
 }
-function getAriaDescriptionForModeButton(mode, availableModes) {
+function useAriaDescriptionForModeButton(mode, availableModes) {
+    const { t } = i18n.useTranslation();
     const nextModeIndex = availableModes.indexOf(mode) + 1;
     const isModeLast = nextModeIndex === availableModes.length;
     if (isModeLast) {
@@ -109,9 +118,9 @@ function getAriaDescriptionForModeButton(mode, availableModes) {
     }
     const ariaLabelMap = {
         days: '',
-        months: i18n('Switch to months view'),
-        quarters: i18n('Switch to quarters view'),
-        years: i18n('Switch to years view'),
+        months: t('Switch to months view'),
+        quarters: t('Switch to quarters view'),
+        years: t('Switch to years view'),
     };
     const nextMode = availableModes[nextModeIndex];
     return ariaLabelMap[nextMode];