@gravity-ui/date-components 3.2.3 → 3.3.0

package/README.md

@@ -3,7 +3,95 @@
 ## Install
 
 ```shell
-npm install --save-dev @gravity-ui/uikit @gravity-ui/date-components
+npm install react react-dom @gravity-ui/uikit @gravity-ui/date-components @gravity-ui/date-utils
+```
+
+## Usage
+
+```jsx
+import {createRoot} from 'react-dom/client';
+import {DatePicker} from '@gravity-ui/date-components';
+import {ThemeProvider} from '@gravity-ui/uikit';
+
+import '@gravity-ui/uikit/styles/styles.css';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <h1>DatePicker</h1>
+      <form>
+        <label forHtml="date-picker">Date:</label>
+        <DatePicker id="date-picker" name="date" />
+      </form>
+    </ThemeProvider>
+  );
+}
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
+```
+
+### Localization
+
+```jsx
+import {settings} from '@gravity-ui/date-utils';
+
+// Load date locales that will be used in an application.
+settings.loadLocale('ru');
+
+function App() {
+  return (
+    // Set the language to use with components.
+    <ThemeProvider lang="ru">
+      <h1>DatePicker</h1>
+      <form>
+        <label forHtml="date-picker">Дата:</label>
+        <DatePicker id="date-picker" name="date" />
+      </form>
+    </ThemeProvider>
+  );
+}
+```
+
+If the app supports language switching, preload all supported locales when the app first loads, or load the locales before switching the language:
+
+```jsx
+// Preload locales
+settings.loadLocale('ru');
+settings.loadLocale('nl');
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
+
+// or load locales on demand.
+
+function App() {
+  const [lang, setLang] = React.useState('en');
+
+  const handleLangChange = (newLang) => {
+    settings.loadLocale(newLang).then(() => {
+      setLang(newLang);
+    });
+  };
+
+  return <ThemeProvider lang={lang}>...</ThemeProvider>;
+}
+```
+
+The components have translations into English and Russian. To add translations into other languages, use `addLanguageKeysets` from `@gravity-ui/uikit`:
+
+```ts
+import {addLanguageKeysets} from '@gravity-ui/uikit/i18n';
+import type {Keysets, PartialKeysets} from '@gravity-ui/date-components';
+
+// Use the Keyset type to specify translations for all available components
+addLanguageKeysets<Keysets>(lang, {...});
+
+// or use the PartialKeysets type to specify only the ones you need
+addLanguageKeysets<PartialKeysets>(lang, {...});
+
+// To specify translations for some components
+addLanguageKeysets<Pick<Keysets, 'g-date-calendar' | 'g-date-date-field' | 'g-date-date-picker'>>(lang, {...});
 ```
 
 ## Development

package/dist/cjs/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/cjs/components/CalendarView/CalendarView.js

@@ -60,15 +60,17 @@ function Content({ className, state, animation, onAnimationEnd }) {
 }
 function Weekdays({ state }) {
     const weekdays = (0, utils_1.getWeekDays)(state);
+    const { lang } = (0, uikit_1.useLang)();
     return ((0, jsx_runtime_1.jsx)("div", { className: b('grid-row'), role: "row", children: weekdays.map((date) => {
-            return ((0, jsx_runtime_1.jsx)("div", { className: b('weekday', { weekend: state.isWeekend(date) }), role: "columnheader", "aria-label": (0, dates_1.formatDateTime)(date, 'dddd', state.timeZone), children: (0, dates_1.formatDateTime)(date, 'dd', state.timeZone) }, date.day()));
+            return ((0, jsx_runtime_1.jsx)("div", { className: b('weekday', { weekend: state.isWeekend(date) }), role: "columnheader", "aria-label": (0, dates_1.formatDateTime)(date, 'dddd', state.timeZone, lang), children: (0, dates_1.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 = (0, utils_1.getDaysInPeriod)(state);
-    return ((0, jsx_runtime_1.jsx)("div", { className: b('grid-rowgroup', { mode: state.mode }), role: "rowgroup", children: [...new Array(rowsInPeriod).keys()].map((rowIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: b('grid-row'), role: "row", children: [state.mode === 'quarters' ? ((0, jsx_runtime_1.jsx)("span", { role: "rowheader", className: b('grid-rowgroup-header'), children: (0, dates_1.formatDateTime)(days[rowIndex * columnsInRow], 'YYYY', state.timeZone) })) : null, days
+    const { lang } = (0, uikit_1.useLang)();
+    return ((0, jsx_runtime_1.jsx)("div", { className: b('grid-rowgroup', { mode: state.mode }), role: "rowgroup", children: [...new Array(rowsInPeriod).keys()].map((rowIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: b('grid-row'), role: "row", children: [state.mode === 'quarters' ? ((0, jsx_runtime_1.jsx)("span", { role: "rowheader", className: b('grid-rowgroup-header'), children: (0, dates_1.formatDateTime)(days[rowIndex * columnsInRow], 'YYYY', state.timeZone, lang) })) : null, days
                     .slice(rowIndex * columnsInRow, (rowIndex + 1) * columnsInRow)
                     .map((date) => {
                     return (0, jsx_runtime_1.jsx)(CalendarCell, { date: date, state: state }, date.unix());

package/dist/cjs/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/cjs/components/CalendarView/hooks/useCalendarCellProps.js

@@ -3,9 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCalendarCellProps = useCalendarCellProps;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
 const dates_1 = require("../../utils/dates.js");
 function useCalendarCellProps(date, state) {
     const ref = react_1.default.useRef(null);
+    const { lang } = (0, uikit_1.useLang)();
     const isFocused = state.isCellFocused(date);
     react_1.default.useEffect(() => {
         var _a;
@@ -25,7 +27,7 @@ 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,
@@ -57,15 +59,15 @@ function useCalendarCellProps(date, state) {
             }
         },
     };
-    let formattedDate = (0, dates_1.formatDateTime)(date, 'D', state.timeZone);
+    let formattedDate = (0, dates_1.formatDateTime)(date, 'D', state.timeZone, lang);
     if (state.mode === 'months') {
-        formattedDate = (0, dates_1.formatDateTime)(date, 'MMM', state.timeZone);
+        formattedDate = (0, dates_1.formatDateTime)(date, 'MMM', state.timeZone, lang);
     }
     else if (state.mode === 'quarters') {
-        formattedDate = (0, dates_1.formatDateTime)(date, '[Q]Q', state.timeZone);
+        formattedDate = (0, dates_1.formatDateTime)(date, '[Q]Q', state.timeZone, lang);
     }
     else if (state.mode === 'years') {
-        formattedDate = (0, dates_1.formatDateTime)(date, 'YYYY', state.timeZone);
+        formattedDate = (0, dates_1.formatDateTime)(date, 'YYYY', state.timeZone, lang);
     }
     return {
         cellProps,
@@ -82,19 +84,19 @@ function useCalendarCellProps(date, state) {
         isWeekend,
     };
 }
-function getDateLabel(date, state) {
+function getDateLabel(date, state, lang) {
     switch (state.mode) {
         case 'days': {
-            return `${(0, dates_1.formatDateTime)(date, 'dddd', state.timeZone)}, ${(0, dates_1.formatDateTime)(date, 'LL', state.timeZone)}`;
+            return `${(0, dates_1.formatDateTime)(date, 'dddd', state.timeZone, lang)}, ${(0, dates_1.formatDateTime)(date, 'LL', state.timeZone, lang)}`;
         }
         case 'months': {
-            return `${(0, dates_1.formatDateTime)(date, 'MMMM YYYY', state.timeZone)}`;
+            return `${(0, dates_1.formatDateTime)(date, 'MMMM YYYY', state.timeZone, lang)}`;
         }
         case 'quarters': {
-            return `${(0, dates_1.formatDateTime)(date, '[Q]Q YYYY', state.timeZone)}`;
+            return `${(0, dates_1.formatDateTime)(date, '[Q]Q YYYY', state.timeZone, lang)}`;
         }
         case 'years': {
-            return `${(0, dates_1.formatDateTime)(date, 'YYYY', state.timeZone)}`;
+            return `${(0, dates_1.formatDateTime)(date, 'YYYY', state.timeZone, lang)}`;
         }
         default:
             return '';

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

@@ -1 +1 @@
-{"version":3,"file":"useCalendarCellProps.js","sourceRoot":"../../../../../src","sources":["components/CalendarView/hooks/useCalendarCellProps.ts"],"names":[],"mappings":";;AAQA,oDAmFC;;AA3FD,0DAA0B;AAI1B,gDAAiD;AAIjD,SAAgB,oBAAoB,CAAC,IAAc,EAAE,KAAyC;IAC1F,MAAM,GAAG,GAAG,eAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE/C,MAAM,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5C,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;;QACjB,IAAI,SAAS,EAAE,CAAC;YACZ,MAAA,GAAG,CAAC,OAAO,0CAAE,KAAK,CAAC,EAAC,aAAa,EAAE,IAAI,EAAC,CAAC,CAAC;QAC9C,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACrE,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,gBAAgB,GAAG,kBAAkB,IAAI,KAAK,IAAI,KAAK,CAAC,gBAAgB,CAAC;IAC/E,MAAM,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,IAAI,UAAU,CAAC,CAAC;IACjE,MAAM,gBAAgB,GAClB,UAAU,IAAI,gBAAgB,IAAI,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACtF,MAAM,cAAc,GAChB,UAAU,IAAI,gBAAgB,IAAI,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACpF,MAAM,qBAAqB,GACvB,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAC7E,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACpD,MAAM,YAAY,GAAG,CAAC,UAAU,IAAI,CAAC,aAAa,CAAC;IACnD,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IACxC,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAExC,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAExC,MAAM,SAAS,GAAkC;QAC7C,IAAI,EAAE,UAAU;QAChB,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAChD,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;KACnD,CAAC;IAEF,MAAM,WAAW,GAAqE;QAClF,GAAG;QACH,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;QAC3C,eAAe,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;QAClD,YAAY,EAAE,KAAK;QACnB,OAAO,EAAE,YAAY;YACjB,CAAC,CAAC,GAAG,EAAE;gBACD,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;gBAC3B,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;YAC3B,CAAC;YACH,CAAC,CAAC,SAAS;QACf,cAAc;YACV,IAAI,eAAe,IAAI,KAAK,IAAI,YAAY,EAAE,CAAC;gBAC3C,IAAI,qBAAqB,EAAE,CAAC;oBACxB,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC;wBAC5C,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC;wBACpC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;oBACvD,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;gBACjC,CAAC;qBAAM,CAAC;oBACJ,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;gBAC9B,CAAC;YACL,CAAC;QACL,CAAC;KACJ,CAAC;IAEF,IAAI,aAAa,GAAG,IAAA,sBAAc,EAAC,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC9D,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC1B,aAAa,GAAG,IAAA,sBAAc,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IAChE,CAAC;SAAM,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;QACnC,aAAa,GAAG,IAAA,sBAAc,EAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IACjE,CAAC;SAAM,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QAChC,aAAa,GAAG,IAAA,sBAAc,EAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IACjE,CAAC;IAED,OAAO;QACH,SAAS;QACT,WAAW;QACX,aAAa;QACb,UAAU;QACV,UAAU;QACV,gBAAgB;QAChB,gBAAgB;QAChB,cAAc;QACd,qBAAqB;QACrB,aAAa;QACb,SAAS;QACT,SAAS;KACZ,CAAC;AACN,CAAC;AAED,SAAS,YAAY,CAAC,IAAc,EAAE,KAAyC;IAC3E,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;QACjB,KAAK,MAAM,CAAC,CAAC,CAAC;YACV,OAAO,GAAG,IAAA,sBAAc,EAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,IAAA,sBAAc,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC5G,CAAC;QACD,KAAK,QAAQ,CAAC,CAAC,CAAC;YACZ,OAAO,GAAG,IAAA,sBAAc,EAAC,IAAI,EAAE,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;QAClE,CAAC;QACD,KAAK,UAAU,CAAC,CAAC,CAAC;YACd,OAAO,GAAG,IAAA,sBAAc,EAAC,IAAI,EAAE,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;QAClE,CAAC;QACD,KAAK,OAAO,CAAC,CAAC,CAAC;YACX,OAAO,GAAG,IAAA,sBAAc,EAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC7D,CAAC;QACD;YACI,OAAO,EAAE,CAAC;IAClB,CAAC;AACL,CAAC","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/cjs/components/CalendarView/hooks/useCalendarGridProps.js

@@ -9,9 +9,10 @@ function useCalendarGridProps(state) {
             state.setFocused(isFocused);
         },
     });
+    const { lang } = (0, uikit_1.useLang)();
     const gridProps = Object.assign(Object.assign({ role: 'grid', 'aria-label': state.mode === 'years' || state.mode === 'quarters'
             ? `${state.startDate.year()} — ${state.endDate.year()}`
-            : (0, dates_1.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) => {
+            : (0, dates_1.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/cjs/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":"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","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/cjs/components/CalendarView/hooks/useCalendarProps.js

@@ -5,23 +5,26 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const dates_1 = require("../../utils/dates.js");
+const filterDOMProps_1 = require("../../utils/filterDOMProps.js");
 const i18n_1 = require("../i18n/index.js");
 const buttonDisabledClassName = 'yc-button_disabled g-button_disabled';
-// eslint-disable-next-line complexity
 function useCalendarProps(props, state) {
+    const { lang } = (0, uikit_1.useLang)();
     const title = state.mode === 'years' || state.mode === 'quarters'
         ? `${state.startDate.year()} — ${state.endDate.year()}`
-        : (0, dates_1.formatDateTime)(state.focusedDate, state.mode === 'days' ? 'MMMM YYYY' : 'YYYY', state.timeZone);
+        : (0, dates_1.formatDateTime)(state.focusedDate, state.mode === 'days' ? 'MMMM YYYY' : 'YYYY', state.timeZone, lang);
     const { focusWithinProps } = (0, uikit_1.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({}, (0, filterDOMProps_1.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,
@@ -34,7 +37,7 @@ 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,
     };
@@ -46,7 +49,10 @@ function useCalendarProps(props, state) {
             state.setFocused(true);
         }
     });
+    const { t } = i18n_1.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,
@@ -65,7 +71,7 @@ function useCalendarProps(props, state) {
             : () => {
                 previousFocused.current = false;
             },
-        'aria-label': (0, i18n_1.i18n)('Previous'),
+        'aria-label': t('Previous'),
         'aria-disabled': previousDisabled ? 'true' : undefined,
     };
     const nextFocused = react_1.default.useRef(false);
@@ -77,6 +83,8 @@ 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,
@@ -95,7 +103,7 @@ function useCalendarProps(props, state) {
             : () => {
                 nextFocused.current = false;
             },
-        'aria-label': (0, i18n_1.i18n)('Next'),
+        'aria-label': t('Next'),
         'aria-disabled': previousDisabled ? 'true' : undefined,
     };
     return {
@@ -105,7 +113,8 @@ function useCalendarProps(props, state) {
         previousButtonProps,
     };
 }
-function getAriaDescriptionForModeButton(mode, availableModes) {
+function useAriaDescriptionForModeButton(mode, availableModes) {
+    const { t } = i18n_1.i18n.useTranslation();
     const nextModeIndex = availableModes.indexOf(mode) + 1;
     const isModeLast = nextModeIndex === availableModes.length;
     if (isModeLast) {
@@ -113,9 +122,9 @@ function getAriaDescriptionForModeButton(mode, availableModes) {
     }
     const ariaLabelMap = {
         days: '',
-        months: (0, i18n_1.i18n)('Switch to months view'),
-        quarters: (0, i18n_1.i18n)('Switch to quarters view'),
-        years: (0, i18n_1.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];