npm - @gravity-ui/date-components - Versions diffs - 3.4.2 → 4.0.0 - Mend

@gravity-ui/date-components 3.4.2 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (401) hide show

package/dist/docs/components/RangeCalendar.md ADDED Viewed

@@ -0,0 +1,125 @@
+# RangeCalendar
+`RangeCalendar` is a powerful, flexible, and user-friendly UI component designed for selecting a range of dates. Built with React, it combines the functionality of a calendar and a date range picker, making it an ideal choice for applications that require users to input a start and end date. It can be controlled if you set `value` property. Or it can be uncontrolled if you don't set any value, but in this case you can manage the initial state with optional property `defaultValue`. Component is uncontrolled by default.
+```tsx
+import {RangeCalendar} from '@gravity-ui/date-components';
+```
+### Useful addition
+To set dates in the right format you may need to include additional helpers from [Date Utils library](https://gravity-ui.com/libraries/date-utils)
+```tsx
+import {dateTimeParse, dateTime} from '@gravity-ui/date-utils';
+```
+## Size
+To control the size of the `RangeCalendar` use the `size` property. Default size is `m`.
+```tsx
+<RangeCalendar size="m" />
+<RangeCalendar size="l" />
+<RangeCalendar size="xl" />
+```
+## Value
+### Min and max value
+The `minValue` property allows you to specify the earliest date and time that can be entered by the user. Conversely, the `maxValue` property specifies the latest date and time that can be entered. All other values will be disabled for user.
+```tsx
+<RangeCalendar minValue={dateTimeParse('01.01.2024')} maxValue={dateTimeParse('01.01.2025')} />
+```
+## Mode
+Defines the time interval that `RangeCalendar` should display. With `mode` you can choose it in controlled way. For uncontrolled way you don't need to specify any value. Also you can set the initial mode in uncontrolled way with `defaultMode` prop.
+`days` - default mode for `RangeCalendar`. It shows days in month.
+`months` - shows months in year
+`quarters` - shows quarters by years (not available as value in `defaultMode`)
+`years` - shows several years for select
+You can limit enabled modes by using prop `modes`.
+```tsx
+<RangeCalendar defaultMode="months" />
+```
+## States
+### Disabled
+The state of the `RangeCalendar` where you don't want the user to be able to interact with the component.
+```tsx
+<RangeCalendar
+  disabled={true}
+  defaultValue={{start: dateTime().add({days: 2}), end: dateTime().subtract({days: 2})}}
+/>
+```
+### Readonly
+`readOnly` is a boolean attribute that, when set to true, makes the `RangeCalendar` component immutable to the user. This means that while the input will display its current value, users will not be able to change it.
+```tsx
+<RangeCalendar
+  readOnly={true}
+  defaultValue={{start: dateTime().add({days: 2}), end: dateTime().subtract({days: 2})}}
+/>
+```
+## Focused value
+Allows to select the date that `RangeCalendar` view is focused on. If you need it to be controlled you shoud use `focusedValue` prop. You can set the initial focused value for uncontrolled component with optional prop `defaultFocusedValue`.
+```tsx
+<RangeCalendar
+  defaultFocusedValue={dateTimeParse('01.01.2020')}
+  defaultValue={{start: dateTime().add({days: 2}), end: dateTime().subtract({days: 2})}}
+/>
+```
+## Time zone
+`timeZone` is the property to set the time zone of the value in the input. [Learn more about time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List)
+## Properties
+| Name                                  | Description                                                                                                          |                               Type                               |                           Default                           |
+| :------------------------------------ | :------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------: | :---------------------------------------------------------: |
+| aria-describedby                      | The control's `aria-describedby` attribute                                                                           |                             `string`                             |                                                             |
+| aria-details                          | The control's `aria-details` attribute                                                                               |                             `string`                             |                                                             |
+| aria-label                            | The control's `aria-label` attribute                                                                                 |                             `string`                             |                                                             |
+| aria-labelledby                       | The control's `aria-labelledby` attribute                                                                            |                             `string`                             |                                                             |
+| autoFocus                             | The control's `autofocus` attribute                                                                                  |                            `boolean`                             |                                                             |
+| className                             | The control's wrapper class name                                                                                     |                             `string`                             |                                                             |
+| [defaultFocusedValue](#focused-value) | The date that is focused when the calendar first mounts (uncontrolled)                                               |                            `DateTime`                            |                                                             |
+| [defaultMode](#mode)                  | Initial mode to show in calendar                                                                                     |                `days` `months` `quarters` `years`                |                                                             |
+| [defaultValue](#value)                | Sets the initial value for uncontrolled component.                                                                   |                      `RangeValue<DateTime>`                      |                                                             |
+| [disabled](#disabled)                 | Indicates that the user cannot interact with the control                                                             |                            `boolean`                             |                           `false`                           |
+| [focusedValue](#focused-value)        | Set the default view of uncontrolled component which includes this value                                             |                        `DateTime` `null`                         |                                                             |
+| id                                    | The control's `id` attribute                                                                                         |                             `string`                             |                                                             |
+| isDateUnavailable                     | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.             |                 `((date: DateTime) => boolean)`                  |                                                             |
+| isWeekend                             | Callback that is called for each date of the calendar. If it returns true, then the date is weekend.                 |                 `((date: DateTime) => boolean)`                  |                                                             |
+| [maxValue](#min-and-max-value)        | The maximum allowed date that a user may select.                                                                     |                            `DateTime`                            |                                                             |
+| [minValue](#min-and-max-value)        | The minimum allowed date that a user may select.                                                                     |                            `DateTime`                            |                                                             |
+| [mode](#mode)                         | Defines the time interval that `RangeCalendar` should display in colttrolled way.                                    |                `days` `months` `quarters` `years`                |                                                             |
+| modes                                 | Modes available to user                                                                                              |         `Partial<Record<RangeCalendarLayout, boolean>>`          | `{days: true, months: true, quarters: false, years: true }` |
+| onBlur                                | Fires when the control lost focus. Provides focus event as a callback's argument                                     |          `((e: FocusEvent<Element, Element>) => void)`           |                                                             |
+| onFocus                               | Fires when the control gets focus. Provides focus event as a callback's argument                                     |          `((e: FocusEvent<Element, Element>) => void)`           |                                                             |
+| onFocusUpdate                         | Fires when the control's focused date changes.                                                                       |                   `((date: DateTime) => void)`                   |                                                             |
+| onUpdate                              | Fires when the value is changed.                                                                                     |                   `((value: DateTime) => void`                   |                                                             |
+| onUpdateMode                          | Fires when the mode is changed.                                                                                      | `((value: 'days' \| 'months' \| 'quarters' \| 'years' ) => void` |                                                             |
+| [readOnly](#readonly)                 | Whether the calendar value is immutable.                                                                             |                            `boolean`                             |                           `false`                           |
+| [size](#size)                         | The size of the control                                                                                              |                        `"m"` `"l"` `"xl"`                        |                            `"m"`                            |
+| style                                 | Sets inline style for the element.                                                                                   |                         `CSSProperties`                          |                                                             |
+| [timeZone](#time-zone)                | Sets the time zone. [Learn more about time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List) |                             `string`                             |                                                             |
+| [value](#calendar)                    | The value of the control                                                                                             |                  `RangeValue<DateTime>` `null`                   |                                                             |

package/dist/docs/components/RelativeDateField.md ADDED Viewed

@@ -0,0 +1,73 @@
+# RelativeDateField
+`RelativeDateField` component is used only for entering relative dates. It can't be used as "normal" `DateField`.
+```tsx
+import {RelativeDateField} from '@gravity-ui/date-components';
+```
+## Relative input
+The component get values in special relative format. You set values as formulas which will help you to compute the exact date. We can call it `grafana-like format` because it is very similar to format of Grafana's relative time fields. To know more about relative time values in Grafana read [the docs](https://grafana.com/docs/grafana/latest/panels-visualizations/query-transform-data/).
+Using this mode you can deliver your data from source to destination and compute the exact value straight on the necessary endpoit without inaccuracy.
+## Valid input rules
+- a value should starts from keyword `now`
+- relative date expression in common looks like: `now${operand}${count}${unit}`
+- available values for `operand`:
+  - `-` - subtraction
+  - `+` - addition
+  - `/` - bringing to the start of the `unit`
+- valid values of `count` - any natural number
+- valid values of `unit`:
+  - `d` - day
+  - `w` - week
+  - `M` - month
+  - `Q` - quarter
+  - `y` - year
+  - `h` - hour
+  - `m` - minute
+### Examples of usage
+> `now-1d`
+>
+> `now/w`
+>
+> `now+10d-5d/M`
+## Properties
+| Name             | Description                                                                                                          |                     Type                      |     Default     |
+| :--------------- | :------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------: | :-------------: |
+| aria-describedby | The control's `aria-describedby` attribute                                                                           |                   `string`                    |                 |
+| aria-details     | The control's `aria-details` attribute                                                                               |                   `string`                    |                 |
+| aria-label       | The control's `aria-label` attribute                                                                                 |                   `string`                    |                 |
+| aria-labelledby  | The control's `aria-labelledby` attribute                                                                            |                   `string`                    |                 |
+| autoFocus        | The control's `autofocus` attribute                                                                                  |                   `boolean`                   |                 |
+| className        | The control's wrapper class name                                                                                     |                   `string`                    |                 |
+| defaultValue     | Sets the initial value for uncontrolled component.                                                                   |                   `string`                    |                 |
+| disabled         | Indicates that the user cannot interact with the control                                                             |                   `boolean`                   |     `false`     |
+| errorMessage     | Error text                                                                                                           |                  `ReactNode`                  |                 |
+| hasClear         | Shows the icon for clearing control's value                                                                          |                   `boolean`                   |     `false`     |
+| hasTime          | Show time field in popupvalue                                                                                        |                   `boolean`                   |     `false`     |
+| id               | The control's `id` attribute                                                                                         |                   `string`                    |                 |
+| label            | Help text rendered to the left of the input node                                                                     |                   `string`                    |                 |
+| leftContent      | The user`s node rendered before label and input                                                                      |               `React.ReactNode`               |                 |
+| onBlur           | Fires when the control lost focus. Provides focus event as a callback's argument                                     | `((e: FocusEvent<Element, Element>) => void)` |                 |
+| onFocus          | Fires when the control gets focus. Provides focus event as a callback's argument                                     | `((e: FocusEvent<Element, Element>) => void)` |                 |
+| onKeyDown        | Fires when a key is pressed. Provides keyboard event as a callback's argument                                        |    `((e: KeyboardEvent<Element>) => void)`    |                 |
+| onKeyUp          | Fires when a key is released. Provides keyboard event as a callback's argument                                       |    `((e: KeyboardEvent<Element>) => void)`    |                 |
+| onUpdate         | Fires when the value is changed by the user. Provides new value as an callback's argument                            |      `((value: string \| null) => void`       |                 |
+| pin              | Corner rounding                                                                                                      |                   `string`                    | `'round-round'` |
+| placeholder      | Text that appears in the control when it has no value set                                                            |                   `string`                    |                 |
+| readOnly         | Whether the component's value is immutable.                                                                          |                   `boolean`                   |     `false`     |
+| rightContent     | User`s node rendered after the input node and clear button                                                           |               `React.ReactNode`               |                 |
+| size             | The size of the control                                                                                              |           `"s"` `"m"` `"l"` `"xl"`            |      `"m"`      |
+| style            | Sets inline style for the element.                                                                                   |                `CSSProperties`                |                 |
+| timeZone         | Sets the time zone. [Learn more about time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List) |                   `string`                    |                 |
+| validationState  | Validation state                                                                                                     |                  `"invalid"`                  |                 |
+| value            | The value of the control                                                                                             |                `string` `null`                |                 |
+| view             | The view of the control                                                                                              |             `"normal"` `"clear"`              |   `"normal"`    |

package/dist/docs/components/RelativeDatePicker.md ADDED Viewed

@@ -0,0 +1,59 @@
+# RelativeDatePicker
+`RelativeDatePicker` is almost the same component as `DatePicker` but it has ability to use relative dates.
+```tsx
+import {RelativeDatePicker} from '@gravity-ui/date-components';
+```
+## Difference from `DatePicker`
+`RelativeDatePicker` can work in two modes: `absolute` and `relative`. You can switch it interactively by click on `f(x)` button. Or you can set field `type` in `value` or `defaultValue` object.
+### Absolute
+`RelativeDatePicker`'s behaviour in `absolute` mode is very similar to simple `DatePicker`.
+Learn more about DatePicker
+### Relative
+In this mode `RelativeDatePicker` get and return values in special relative format.
+Learn more about rules of relative formulas
+## Properties
+| Name              | Description                                                                                                                                |                     Type                      |          Default          |
+| :---------------- | :----------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------: | :-----------------------: |
+| aria-describedby  | The control's `aria-describedby`. Identifies the element (or elements) that describes the object. attribute                                |                   `string`                    |                           |
+| aria-details      | The control's `aria-details`. Identifies the element (or elements) that provide a detailed, extended description for the object. attribute |                   `string`                    |                           |
+| aria-label        | The control's `aria-label`. Defines a string value that labels the current element. attribute                                              |                   `string`                    |                           |
+| aria-labelledby   | The control's `aria-labelledby`. Identifies the element (or elements) that labels the current element. attribute                           |                   `string`                    |                           |
+| autoFocus         | The control's `autofocus`. Whether the element should receive focus on render. attribute                                                   |                   `boolean`                   |                           |
+| className         | The control's wrapper class name                                                                                                           |                   `string`                    |                           |
+| defaultValue      | Sets the initial value for uncontrolled component.                                                                                         |                    `Value`                    |                           |
+| disabled          | Indicates that the user cannot interact with the control                                                                                   |                   `boolean`                   |          `false`          |
+| errorMessage      | Error text                                                                                                                                 |                  `ReactNode`                  |                           |
+| format            | Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format)                              |                   `string`                    |                           |
+| hasClear          | Shows the icon for clearing control's value                                                                                                |                   `boolean`                   |          `false`          |
+| id                | The control's `id` attribute                                                                                                               |                   `string`                    |                           |
+| isDateUnavailable | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.                                   |        `((date: DateTime) => boolean)`        |                           |
+| label             | Help text rendered to the left of the input node                                                                                           |                   `string`                    |                           |
+| maxValue          | The maximum allowed date that a user may select.                                                                                           |                  `DateTime`                   |                           |
+| minValue          | The minimum allowed date that a user may select.                                                                                           |                  `DateTime`                   |                           |
+| onBlur            | Fires when the control lost focus. Provides focus event as a callback's argument                                                           | `((e: FocusEvent<Element, Element>) => void)` |                           |
+| onFocus           | Fires when the control gets focus. Provides focus event as a callback's argument                                                           | `((e: FocusEvent<Element, Element>) => void)` |                           |
+| onKeyDown         | Fires when a key is pressed. Provides keyboard event as a callback's argument                                                              |    `((e: KeyboardEvent<Element>) => void)`    |                           |
+| onKeyUp           | Fires when a key is released. Provides keyboard event as a callback's argument                                                             |    `((e: KeyboardEvent<Element>) => void)`    |                           |
+| onUpdate          | Fires when the value is changed by the user. Provides new value as an callback's argument                                                  |       `((value: Value \| null) => void`       |                           |
+| pin               | Corner rounding                                                                                                                            |                `TextInputPin`                 |      `'round-round'`      |
+| placeholder       | Text that appears in the control when it has no value set                                                                                  |                   `string`                    |                           |
+| placeholderValue  | A placeholder date that controls the default values of each segment when the user first interacts with them.                               |                  `DateTime`                   | `today's date at midnigh` |
+| readOnly          | Whether the component's value is immutable.                                                                                                |                   `boolean`                   |          `false`          |
+| size              | The size of the control                                                                                                                    |           `"s"` `"m"` `"l"` `"xl"`            |           `"m"`           |
+| style             | Sets inline style for the element.                                                                                                         |                `CSSProperties`                |                           |
+| timeZone          | Sets the time zone. [Learn more about time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List)                       |                   `string`                    |                           |
+| validationState   | Validation state                                                                                                                           |                  `"invalid"`                  |                           |
+| value             | The value of the control                                                                                                                   |                `Value` `null`                 |                           |
+| view              | The view of the control                                                                                                                    |             `"normal"` `"clear"`              |        `"normal"`         |

package/dist/esm/components/Calendar/Calendar.d.ts CHANGED Viewed

@@ -1,14 +1,18 @@
 import React from 'react';
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { CalendarInstance, CalendarSize } from "../CalendarView/CalendarView.js";
+import type { CalendarValueType, SelectionMode } from "../CalendarView/hooks/types.js";
 import type { CalendarStateOptions } from "../CalendarView/hooks/useCalendarState.js";
 import type { AccessibilityProps, DomProps, FocusEvents, StyleProps } from "../types/index.js";
 import "../CalendarView/Calendar.css";
-export interface CalendarProps<T = DateTime> extends CalendarStateOptions<T>, DomProps, StyleProps, FocusEvents, AccessibilityProps {
+export interface CalendarCommonProps<T = DateTime> extends CalendarStateOptions<T>, DomProps, StyleProps, FocusEvents, AccessibilityProps {
     /**
      * The size of the element.
      * @default m
      */
     size?: CalendarSize;
 }
-export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps<DateTime> & React.RefAttributes<CalendarInstance>>;
+export interface CalendarProps<M extends SelectionMode = 'single'> extends CalendarCommonProps<CalendarValueType<M>> {
+    selectionMode?: M;
+}
+export declare const Calendar: <M extends SelectionMode = "single">(props: CalendarProps<M> & React.RefAttributes<CalendarInstance>) => React.ReactNode;

package/dist/esm/components/Calendar/Calendar.js CHANGED Viewed

@@ -6,6 +6,6 @@ import { useCalendarState } from "../CalendarView/hooks/useCalendarState.js";
 import "../CalendarView/Calendar.css";
 export const Calendar = React.forwardRef(function Calendar(props, ref) {
     const state = useCalendarState(props);
-    return _jsx(CalendarView, Object.assign({ ref: ref }, props, { state: state }));
+    return _jsx(CalendarView, { ref: ref, ...props, state: state });
 });
 //# sourceMappingURL=Calendar.js.map

package/dist/esm/components/Calendar/Calendar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Calendar.js","sourceRoot":"../../../../src","sources":["components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAC,YAAY,EAAC,wCAAqC;~~AAE1D~~,OAAO,EAAC,gBAAgB,EAAC,kDAA+C;AAIxE,sCAAuC;~~AAUvC~~,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAkC,SAAS,QAAQ,CACvF,KAAoB,EACpB,GAAG;IAEH,MAAM,KAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAEtC,OAAO,KAAC,YAAY,~~kBAAC~~,GAAG,EAAE,GAAG,~~IAAM~~,KAAK,~~IAAE~~,KAAK,EAAE,KAAK,~~IAAI~~,CAAC;AAC/D,CAAC,~~CAAC~~,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\n\nimport {CalendarView} from '../CalendarView/CalendarView';\nimport type {CalendarInstance, CalendarSize} from '../CalendarView/CalendarView';\nimport {useCalendarState} from '../CalendarView/hooks/useCalendarState';\nimport type {CalendarStateOptions} from '../CalendarView/hooks/useCalendarState';\nimport type {AccessibilityProps, DomProps, FocusEvents, StyleProps} from '../types';\n\nimport '../CalendarView/Calendar.scss';\n\nexport interface ~~CalendarProps~~<T = DateTime>\n extends CalendarStateOptions<T>, DomProps, StyleProps, FocusEvents, AccessibilityProps {\n /*\n The size of the element.\n * @default m\n */\n size?: CalendarSize;\n}\nexport const Calendar = React.forwardRef<CalendarInstance, CalendarProps>(function Calendar(\n props: CalendarProps,\n ref,\n) {\n const state = useCalendarState(props);\n\n return <CalendarView ref={ref} {...props} state={state} />;\n});\n"]}
1	+ {"version":3,"file":"Calendar.js","sourceRoot":"../../../../src","sources":["components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAC,YAAY,EAAC,wCAAqC;AAG1D,OAAO,EAAC,gBAAgB,EAAC,kDAA+C;AAIxE,sCAAuC;AAiBvC,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAkC,SAAS,QAAQ,CACvF,KAAoB,EACpB,GAAG;IAEH,MAAM,KAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAEtC,OAAO,KAAC,YAAY,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;AAC/D,CAAC,CAEmB,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\n\nimport {CalendarView} from '../CalendarView/CalendarView';\nimport type {CalendarInstance, CalendarSize} from '../CalendarView/CalendarView';\nimport type {CalendarValueType, SelectionMode} from '../CalendarView/hooks/types';\nimport {useCalendarState} from '../CalendarView/hooks/useCalendarState';\nimport type {CalendarStateOptions} from '../CalendarView/hooks/useCalendarState';\nimport type {AccessibilityProps, DomProps, FocusEvents, StyleProps} from '../types';\n\nimport '../CalendarView/Calendar.scss';\n\nexport interface CalendarCommonProps<T = DateTime>\n extends CalendarStateOptions<T>, DomProps, StyleProps, FocusEvents, AccessibilityProps {\n /*\n The size of the element.\n * @default m\n */\n size?: CalendarSize;\n}\n\nexport interface CalendarProps<M extends SelectionMode = 'single'> extends CalendarCommonProps<\n CalendarValueType<M>\n> {\n selectionMode?: M;\n}\n\nexport const Calendar = React.forwardRef<CalendarInstance, CalendarProps>(function Calendar(\n props: CalendarProps,\n ref,\n) {\n const state = useCalendarState(props);\n\n return <CalendarView ref={ref} {...props} state={state} />;\n}) as <M extends SelectionMode = 'single'>(\n props: CalendarProps<M> & React.RefAttributes<CalendarInstance>,\n) => React.ReactNode;\n"]}

package/dist/esm/components/CalendarView/Calendar.css CHANGED Viewed

@@ -206,6 +206,9 @@
 .g-date-calendar__button_selected.g-date-calendar__button_selection-start, .g-date-calendar__button_selected.g-date-calendar__button_selection-end {
   background-color: var(--g-color-base-brand);
 }
+.g-date-calendar__button_selected.g-date-calendar__button_selection-start:not(.g-date-calendar__button_weekend), .g-date-calendar__button_selected.g-date-calendar__button_selection-end:not(.g-date-calendar__button_weekend) {
+  color: var(--g-color-text-brand-contrast);
+}
 .g-date-calendar__button_weekend {
   color: var(--g-color-text-danger);
 }

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

	@@ -1 +1 @@
1	- {"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;EACA;EAEA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;;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;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;;AAIR;EACI","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 justify-content: space-between;\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 display: flex;\n flex-shrink: 1;\n justify-content: flex-end;\n gap: var(--g-spacing-2);\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 text-transform: capitalize;\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 &__mode-label {\n text-transform: capitalize;\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"}
1	+ {"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;EACA;EAEA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;;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;EAEI;EAEA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAEJ;EAEI;;AAEA;EACI;;AAIR;EACI;;AAGJ;EACI;EAEA;;AAGJ;EACI;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;;AAGJ;EACI;EACA;EAEA;;AAGJ;EACI;EACA;EAEA;EACA;;AAIR;EACI","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 justify-content: space-between;\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 display: flex;\n flex-shrink: 1;\n justify-content: flex-end;\n gap: var(--g-spacing-2);\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 $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 text-transform: capitalize;\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 &_selected#{&}_selection-start,\n &_selected#{&}_selection-end {\n background-color: var(--g-color-base-brand);\n\n &:not(#{$button}_weekend) {\n color: var(--g-color-text-brand-contrast);\n }\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 &__mode-label {\n text-transform: capitalize;\n }\n}\n","@use 'sass:list';\n@use 'sass:selector';\n\n@mixin overflow-ellipsis($type: ellipsis) {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: $type;\n}\n\n@mixin button-reset() {\n padding: 0;\n\n font-family: var(--g-text-body-font-family);\n font-size: inherit;\n font-weight: var(--g-text-body-font-weight);\n\n color: inherit;\n background: none;\n border: none;\n outline: none;\n cursor: pointer;\n}\n\n@mixin link-reset() {\n color: inherit;\n text-decoration: inherit;\n}\n\n@mixin expand-interactive-area($h: 4px, $v: $h) {\n position: relative;\n\n &::after {\n content: '';\n position: absolute;\n inset: logical (-$v) (-$h);\n }\n}\n\n@mixin max-height($height) {\n max-height: $height;\n overflow-y: auto;\n}\n\n@mixin max-text-width($width: 100%) {\n @include overflow-ellipsis();\n\n max-width: $width;\n}\n\n@mixin aspect-ratio($ratio) {\n position: relative;\n\n &::before {\n display: block;\n content: '';\n width: 100%;\n padding-block-start: $ratio * 100%;\n }\n\n > :only-child {\n position: absolute;\n inset: 0;\n }\n}\n\n@function get-pin-selector($mod, $selector, $append: true) {\n @if $append {\n @return selector.append($mod, $selector);\n } @else {\n @return list.join($mod, $selector, $separator: space);\n }\n}\n\n@mixin pin($block, $selectors, $radius, $append: true) {\n @each $selector in $selectors {\n @at-root #{get-pin-selector(#{$block}_pin_round-round, $selector, $append)} {\n border-radius: $radius;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_brick-brick, $selector, $append)} {\n border-radius: 0;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_clear-clear, $selector, $append)} {\n border-radius: 0;\n border-inline: 0;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_circle-circle, $selector, $append)} {\n border-radius: 100px;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_round-brick, $selector, $append)} {\n border-start-start-radius: $radius;\n border-start-end-radius: 0;\n border-end-start-radius: $radius;\n border-end-end-radius: 0;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_brick-round, $selector, $append)} {\n border-start-start-radius: 0;\n border-start-end-radius: $radius;\n border-end-start-radius: 0;\n border-end-end-radius: $radius;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_round-clear, $selector, $append)} {\n border-start-start-radius: $radius;\n border-start-end-radius: 0;\n border-end-start-radius: $radius;\n border-end-end-radius: 0;\n border-inline-end: 0;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_clear-round, $selector, $append)} {\n border-start-start-radius: 0;\n border-start-end-radius: $radius;\n border-end-start-radius: 0;\n border-end-end-radius: $radius;\n border-inline-start: 0;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_brick-clear, $selector, $append)} {\n border-radius: 0;\n border-inline-end: 0;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_clear-brick, $selector, $append)} {\n border-radius: 0;\n border-inline-start: 0;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_circle-brick, $selector, $append)} {\n border-start-start-radius: 100px;\n border-start-end-radius: 0;\n border-end-start-radius: 100px;\n border-end-end-radius: 0;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_brick-circle, $selector, $append)} {\n border-start-start-radius: 0;\n border-start-end-radius: 100px;\n border-end-start-radius: 0;\n border-end-end-radius: 100px;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_circle-clear, $selector, $append)} {\n border-start-start-radius: 100px;\n border-start-end-radius: 0;\n border-end-start-radius: 100px;\n border-end-end-radius: 0;\n border-inline-end: 0;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_clear-circle, $selector, $append)} {\n border-start-start-radius: 0;\n border-start-end-radius: 100px;\n border-end-start-radius: 0;\n border-end-end-radius: 100px;\n border-inline-start: 0;\n }\n }\n}\n\n// Typography\n\n@mixin text-body-1() {\n font-family: var(--g-text-body-font-family);\n font-weight: var(--g-text-body-font-weight);\n font-size: var(--g-text-body-1-font-size);\n line-height: var(--g-text-body-1-line-height);\n}\n\n@mixin text-body-2() {\n font-family: var(--g-text-body-font-family);\n font-weight: var(--g-text-body-font-weight);\n font-size: var(--g-text-body-2-font-size);\n line-height: var(--g-text-body-2-line-height);\n}\n\n@mixin text-body-3() {\n font-family: var(--g-text-body-font-family);\n font-weight: var(--g-text-body-font-weight);\n font-size: var(--g-text-body-3-font-size);\n line-height: var(--g-text-body-3-line-height);\n}\n\n@mixin text-body-short() {\n font-family: var(--g-text-body-font-family);\n font-weight: var(--g-text-body-font-weight);\n font-size: var(--g-text-body-short-font-size);\n line-height: var(--g-text-body-short-line-height);\n}\n\n@mixin text-caption-1() {\n font-family: var(--g-text-caption-font-family);\n font-weight: var(--g-text-caption-font-weight);\n font-size: var(--g-text-caption-1-font-size);\n line-height: var(--g-text-caption-1-line-height);\n}\n\n@mixin text-caption-2() {\n font-family: var(--g-text-caption-font-family);\n font-weight: var(--g-text-caption-font-weight);\n font-size: var(--g-text-caption-2-font-size);\n line-height: var(--g-text-caption-2-line-height);\n}\n\n@mixin text-header-1() {\n font-family: var(--g-text-header-font-family);\n font-weight: var(--g-text-header-font-weight);\n font-size: var(--g-text-header-1-font-size);\n line-height: var(--g-text-header-1-line-height);\n}\n\n@mixin text-header-2() {\n font-family: var(--g-text-header-font-family);\n font-weight: var(--g-text-header-font-weight);\n font-size: var(--g-text-header-2-font-size);\n line-height: var(--g-text-header-2-line-height);\n}\n\n@mixin text-subheader-1() {\n font-family: var(--g-text-subheader-font-family);\n font-weight: var(--g-text-subheader-font-weight);\n font-size: var(--g-text-subheader-1-font-size);\n line-height: var(--g-text-subheader-1-line-height);\n}\n\n@mixin text-subheader-2() {\n font-family: var(--g-text-subheader-font-family);\n font-weight: var(--g-text-subheader-font-weight);\n font-size: var(--g-text-subheader-2-font-size);\n line-height: var(--g-text-subheader-2-line-height);\n}\n\n@mixin text-subheader-3() {\n font-family: var(--g-text-subheader-font-family);\n font-weight: var(--g-text-subheader-font-weight);\n font-size: var(--g-text-subheader-3-font-size);\n line-height: var(--g-text-subheader-3-line-height);\n}\n\n@mixin text-display-1() {\n font-family: var(--g-text-display-font-family);\n font-weight: var(--g-text-display-font-weight);\n font-size: var(--g-text-display-1-font-size);\n line-height: var(--g-text-display-1-line-height);\n}\n\n@mixin text-display-2() {\n font-family: var(--g-text-display-font-family);\n font-weight: var(--g-text-display-font-weight);\n font-size: var(--g-text-display-2-font-size);\n line-height: var(--g-text-display-2-line-height);\n}\n\n@mixin text-display-3() {\n font-family: var(--g-text-display-font-family);\n font-weight: var(--g-text-display-font-weight);\n font-size: var(--g-text-display-3-font-size);\n line-height: var(--g-text-display-3-line-height);\n}\n\n@mixin text-display-4() {\n font-family: var(--g-text-display-font-family);\n font-weight: var(--g-text-display-font-weight);\n font-size: var(--g-text-display-4-font-size);\n line-height: var(--g-text-display-4-line-height);\n}\n\n@mixin text-code-1() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-1-font-size);\n line-height: var(--g-text-code-1-line-height);\n}\n\n@mixin text-code-2() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-2-font-size);\n line-height: var(--g-text-code-2-line-height);\n}\n\n@mixin text-code-3() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-3-font-size);\n line-height: var(--g-text-code-3-line-height);\n}\n\n@mixin text-code-inline-1() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-inline-1-font-size);\n line-height: var(--g-text-code-inline-1-line-height);\n}\n\n@mixin text-code-inline-2() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-inline-2-font-size);\n line-height: var(--g-text-code-inline-2-line-height);\n}\n\n@mixin text-code-inline-3() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-inline-3-font-size);\n line-height: var(--g-text-code-inline-3-line-height);\n}\n\n@mixin text-accent() {\n font-weight: var(--g-text-accent-font-weight);\n}\n\n@mixin loading($loading-color-1: rgba(255, 255, 255, 0.3), $loading-color-2: transparent) {\n background-image: repeating-linear-gradient(\n -45deg,\n $loading-color-1,\n $loading-color-1 4px,\n $loading-color-2 4px,\n $loading-color-2 8px\n );\n background-size: 150%;\n background-clip: padding-box;\n\n // stylelint-disable-next-line no-unknown-animations\n animation: g-loading-animation 0.5s linear infinite;\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n}\n\n@mixin scrollbar() {\n &::-webkit-scrollbar,\n ::-webkit-scrollbar {\n width: var(--g-scrollbar-width);\n height: var(--g-scrollbar-width);\n background: var(--g-color-scroll-track);\n }\n\n &::-webkit-scrollbar-track,\n ::-webkit-scrollbar-track {\n background: var(--g-color-scroll-track);\n }\n\n &::-webkit-scrollbar-corner,\n ::-webkit-scrollbar-corner {\n background: var(--g-color-scroll-corner);\n }\n\n &::-webkit-scrollbar-thumb,\n ::-webkit-scrollbar-thumb {\n background: var(--g-color-scroll-handle);\n }\n\n &::-webkit-scrollbar-thumb:hover,\n ::-webkit-scrollbar-thumb:hover {\n background: var(--g-color-scroll-handle-hover);\n }\n}\n"],"file":"Calendar.css"}

package/dist/esm/components/CalendarView/CalendarView.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ export type CalendarSize = 'm' | 'l' | 'xl';
 export interface CalendarInstance {
     focus: () => void;
 }
-export interface CalendarViewProps extends DomProps, StyleProps, FocusEvents, AccessibilityProps {
+interface CalendarViewProps extends DomProps, StyleProps, FocusEvents, AccessibilityProps {
     state: CalendarState | RangeCalendarState;
     /**
      * The size of the element.
@@ -16,3 +16,4 @@ export interface CalendarViewProps extends DomProps, StyleProps, FocusEvents, Ac
     size?: CalendarSize;
 }
 export declare const CalendarView: React.ForwardRefExoticComponent<CalendarViewProps & React.RefAttributes<CalendarInstance>>;
+export {};

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

@@ -21,14 +21,14 @@ export const CalendarView = React.forwardRef(function Calendar(props, ref) {
             state.setFocused(true);
         },
     }));
-    return (_jsxs("div", Object.assign({}, calendarProps, { className: b({ size: props.size }, props.className), style: props.style, children: [_jsxs("div", { className: b('header'), children: [_jsx(Button, Object.assign({}, modeButtonProps, { view: buttonView, size: props.size, children: state.availableModes.indexOf(state.mode) + 1 ===
+    return (_jsxs("div", { ...calendarProps, className: b({ size: props.size }, props.className), style: props.style, children: [_jsxs("div", { className: b('header'), children: [_jsx(Button, { ...modeButtonProps, view: buttonView, size: props.size, children: state.availableModes.indexOf(state.mode) + 1 ===
                             state.availableModes.length ? (_jsx("span", { className: b('mode-label', b(`years-label`)), children: modeButtonProps.children }, "label")) : ([
                             _jsx("span", { className: b('mode-label'), children: modeButtonProps.children }, "label"),
                             _jsx(Button.Icon, { children: _jsx(ArrowToggle, { direction: "bottom" }) }, "icon"),
-                        ]) })), _jsxs("div", { className: b('controls'), children: [_jsx(Button, Object.assign({}, previousButtonProps, { view: buttonView, size: props.size, children: _jsx(Button.Icon, { children: _jsx(ChevronLeft, { className: b('control-icon') }) }) })), _jsx(Button, Object.assign({}, nextButtonProps, { view: buttonView, size: props.size, children: _jsx(Button.Icon, { children: _jsx(ChevronRight, { className: b('control-icon') }) }) }))] })] }), _jsx(CalendarGrid, { state: state })] })));
+                        ]) }), _jsxs("div", { className: b('controls'), children: [_jsx(Button, { ...previousButtonProps, view: buttonView, size: props.size, children: _jsx(Button.Icon, { children: _jsx(ChevronLeft, { className: b('control-icon') }) }) }), _jsx(Button, { ...nextButtonProps, view: buttonView, size: props.size, children: _jsx(Button.Icon, { children: _jsx(ChevronRight, { className: b('control-icon') }) }) })] })] }), _jsx(CalendarGrid, { state: state })] }));
 });
 function CalendarGrid({ state }) {
-    const [prevState, setPrevState] = React.useState(() => (Object.assign(Object.assign({}, state), { isFocused: false })));
+    const [prevState, setPrevState] = React.useState(() => ({ ...state, isFocused: false }));
     const modeChanged = state.mode !== prevState.mode;
     const startDateChanged = !state.startDate.isSame(prevState.startDate, 'days');
     let animation;
@@ -49,9 +49,9 @@ function CalendarGrid({ state }) {
         }
     }
     const { gridProps } = useCalendarGridProps(state);
-    return (_jsxs("div", Object.assign({ className: b('grid') }, gridProps, { children: [animation && (_jsx(Content, { className: b('previous-state'), state: prevState, animation: animation })), _jsx(Content, { className: b('current-state'), state: state, animation: animation, onAnimationEnd: () => {
-                    setPrevState(Object.assign(Object.assign({}, state), { isFocused: false }));
-                } }, "current")] })));
+    return (_jsxs("div", { className: b('grid'), ...gridProps, children: [animation && (_jsx(Content, { className: b('previous-state'), state: prevState, animation: animation })), _jsx(Content, { className: b('current-state'), state: state, animation: animation, onAnimationEnd: () => {
+                    setPrevState({ ...state, isFocused: false });
+                } }, "current")] }));
 }
 function Content({ className, state, animation, onAnimationEnd }) {
     return (_jsxs("div", { className: b('content', { animation }, className), onAnimationEnd: onAnimationEnd, role: "presentation", children: [state.mode === 'days' && _jsx(Weekdays, { state: state }), _jsx(CalendarGridCells, { state: state })] }));
@@ -76,7 +76,7 @@ function CalendarGridCells({ state }) {
 }
 function CalendarCell({ date, state }) {
     const { cellProps, buttonProps, formattedDate, isDisabled, isSelected, isRangeSelection, isSelectionStart, isSelectionEnd, isOutsideCurrentRange, isUnavailable, isCurrent, isWeekend, } = useCalendarCellProps(date, state);
-    return (_jsx("div", Object.assign({}, cellProps, { children: _jsx("div", Object.assign({}, buttonProps, { className: b('button', {
+    return (_jsx("div", { ...cellProps, children: _jsx("div", { ...buttonProps, className: b('button', {
                 disabled: isDisabled,
                 selected: isSelected,
                 'range-selection': isRangeSelection,
@@ -86,6 +86,6 @@ function CalendarCell({ date, state }) {
                 unavailable: isUnavailable,
                 current: isCurrent,
                 weekend: isWeekend,
-            }), children: formattedDate })) })));
+            }), children: formattedDate }) }));
 }
 //# sourceMappingURL=CalendarView.js.map

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

	@@ -1 +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, useLang, useMobile} 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 const isMobile = useMobile();\n\n const buttonView = isMobile ? 'outlined' : 'flat';\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={buttonView} 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={buttonView} size={props.size}>\n <Button.Icon>\n <ChevronLeft className={b('control-icon')} />\n </Button.Icon>\n </Button>\n <Button {...nextButtonProps} view={buttonView} 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"]}
1	+ {"version":3,"file":"CalendarView.js","sourceRoot":"../../../../src","sources":["components/CalendarView/CalendarView.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,WAAW,EAAE,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAC,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAE1E,OAAO,EAAC,KAAK,EAAC,0BAAuB;AAErC,OAAO,EAAC,cAAc,EAAC,0BAAuB;AAG9C,OAAO,EAAC,oBAAoB,EAAC,wCAAqC;AAClE,OAAO,EAAC,oBAAoB,EAAC,wCAAqC;AAClE,OAAO,EAAC,gBAAgB,EAAC,oCAAiC;AAE1D,OAAO,EAAC,eAAe,EAAE,eAAe,EAAE,WAAW,EAAC,mBAAgB;AAEtE,wBAAyB;AAEzB,MAAM,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC;AAgB5B,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAsC,SAAS,QAAQ,CAC/F,KAAwB,EACxB,GAAG;IAEH,MAAM,EAAC,KAAK,EAAC,GAAG,KAAK,CAAC;IACtB,MAAM,EAAC,aAAa,EAAE,eAAe,EAAE,eAAe,EAAE,mBAAmB,EAAC,GAAG,gBAAgB,CAC3F,KAAK,EACL,KAAK,CACR,CAAC;IACF,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAE7B,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC;IAElD,KAAK,CAAC,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAClC,KAAK;YACD,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC;KACJ,CAAC,CAAC,CAAC;IAEJ,OAAO,CACH,kBACQ,aAAa,EACjB,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAC,EAAE,KAAK,CAAC,SAAS,CAAC,EACjD,KAAK,EAAE,KAAK,CAAC,KAAK,aAElB,eAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,aACvB,KAAC,MAAM,OAAK,eAAe,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,YAC1D,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;4BAC7C,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAC1B,eAAkB,SAAS,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,YACzD,eAAe,CAAC,QAAQ,IADnB,OAAO,CAEV,CACV,CAAC,CAAC,CAAC,CACA;4BACI,eAAkB,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,YACvC,eAAe,CAAC,QAAQ,IADnB,OAAO,CAEV;4BACP,KAAC,MAAM,CAAC,IAAI,cACR,KAAC,WAAW,IAAC,SAAS,EAAC,QAAQ,GAAG,IADrB,MAAM,CAET;yBACjB,CACJ,GACI,EACT,eAAK,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,aACzB,KAAC,MAAM,OAAK,mBAAmB,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,YAC/D,KAAC,MAAM,CAAC,IAAI,cACR,KAAC,WAAW,IAAC,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,GAAI,GACnC,GACT,EACT,KAAC,MAAM,OAAK,eAAe,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,YAC3D,KAAC,MAAM,CAAC,IAAI,cACR,KAAC,YAAY,IAAC,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,GAAI,GACpC,GACT,IACP,IACJ,EACN,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,IAC5B,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AAKH,SAAS,YAAY,CAAC,EAAC,KAAK,EAAoB;IAC5C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,EAAC,GAAG,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,CAAC,CAAC,CAAC;IAEvF,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI,CAAC;IAClD,MAAM,gBAAgB,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAE9E,IAAI,SAAS,CAAC;IACd,IAAI,WAAW,EAAE,CAAC;QACd,IAAI,eAAe,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;YAChF,SAAS,GAAG,UAAU,CAAC;QAC3B,CAAC;aAAM,CAAC;YACJ,SAAS,GAAG,SAAS,CAAC;QAC1B,CAAC;IACL,CAAC;SAAM,IAAI,gBAAgB,EAAE,CAAC;QAC1B,IAAI,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,EAAE,CAAC;YAChD,SAAS,GAAG,SAAS,CAAC;QAC1B,CAAC;aAAM,CAAC;YACJ,SAAS,GAAG,UAAU,CAAC;QAC3B,CAAC;IACL,CAAC;IAED,MAAM,EAAC,SAAS,EAAC,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAEhD,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,KAAM,SAAS,aACnC,SAAS,IAAI,CACV,KAAC,OAAO,IAAC,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,GAAI,CACtF,EACD,KAAC,OAAO,IAEJ,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,EAC7B,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,GAAG,EAAE;oBACjB,YAAY,CAAC,EAAC,GAAG,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,CAAC,CAAC;gBAC/C,CAAC,IANG,SAAS,CAOf,IACA,CACT,CAAC;AACN,CAAC;AAQD,SAAS,OAAO,CAAC,EAAC,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,cAAc,EAAe;IACxE,OAAO,CACH,eACI,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,SAAS,EAAC,EAAE,SAAS,CAAC,EAC/C,cAAc,EAAE,cAAc,EAC9B,IAAI,EAAC,cAAc,aAElB,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAI,EACpD,KAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,GAAI,IACjC,CACT,CAAC;AACN,CAAC;AAKD,SAAS,QAAQ,CAAC,EAAC,KAAK,EAAgB;IACpC,MAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IACpC,MAAM,EAAC,IAAI,EAAC,GAAG,OAAO,EAAE,CAAC;IAEzB,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,EAAE,IAAI,EAAC,KAAK,YACpC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACnB,OAAO,CACH,cAEI,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAC,CAAC,EACzD,IAAI,EAAC,cAAc,gBACP,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC,YAE7D,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC,IAL5C,IAAI,CAAC,GAAG,EAAE,CAMb,CACT,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAKD,SAAS,iBAAiB,CAAC,EAAC,KAAK,EAAoB;IACjD,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACnD,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACzF,MAAM,IAAI,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IACpC,MAAM,EAAC,IAAI,EAAC,GAAG,OAAO,EAAE,CAAC;IACzB,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,eAAe,EAAE,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAC,CAAC,EAAE,IAAI,EAAC,UAAU,YAClE,CAAC,GAAG,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACnD,eAAoB,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,EAAE,IAAI,EAAC,KAAK,aACnD,KAAK,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,CACzB,eAAM,IAAI,EAAC,WAAW,EAAC,SAAS,EAAE,CAAC,CAAC,sBAAsB,CAAC,YACtD,cAAc,CACX,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC,EAC7B,MAAM,EACN,KAAK,CAAC,QAAQ,EACd,IAAI,CACP,GACE,CACV,CAAC,CAAC,CAAC,IAAI,EACP,IAAI;qBACA,KAAK,CAAC,QAAQ,GAAG,YAAY,EAAE,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,YAAY,CAAC;qBAC7D,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;oBACV,OAAO,KAAC,YAAY,IAAmB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IAArC,IAAI,CAAC,IAAI,EAAE,CAA8B,CAAC;gBACxE,CAAC,CAAC,KAfA,QAAQ,CAgBZ,CACT,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAMD,SAAS,YAAY,CAAC,EAAC,IAAI,EAAE,KAAK,EAAoB;IAClD,MAAM,EACF,SAAS,EACT,WAAW,EACX,aAAa,EACb,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,SAAS,GACZ,GAAG,oBAAoB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAEtC,OAAO,CACH,iBAAS,SAAS,YACd,iBACQ,WAAW,EACf,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE;gBACnB,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,UAAU;gBACpB,iBAAiB,EAAE,gBAAgB;gBACnC,iBAAiB,EAAE,gBAAgB;gBACnC,eAAe,EAAE,cAAc;gBAC/B,iBAAiB,EAAE,qBAAqB;gBACxC,WAAW,EAAE,aAAa;gBAC1B,OAAO,EAAE,SAAS;gBAClB,OAAO,EAAE,SAAS;aACrB,CAAC,YAED,aAAa,GACZ,GACJ,CACT,CAAC;AACN,CAAC","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, useMobile} 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\ninterface 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 const isMobile = useMobile();\n\n const buttonView = isMobile ? 'outlined' : 'flat';\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={buttonView} 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={buttonView} size={props.size}>\n <Button.Icon>\n <ChevronLeft className={b('control-icon')} />\n </Button.Icon>\n </Button>\n <Button {...nextButtonProps} view={buttonView} size={props.size}>\n <Button.Icon>\n <ChevronRight className={b('control-icon')} />\n </Button.Icon>\n </Button>\n </div>\n </div>\n <CalendarGrid state={state} />\n </div>\n );\n});\n\ninterface CalendarGridProps {\n state: CalendarState \| RangeCalendarState;\n}\nfunction CalendarGrid({state}: CalendarGridProps) {\n const [prevState, setPrevState] = React.useState(() => ({...state, isFocused: false}));\n\n const modeChanged = state.mode !== prevState.mode;\n const startDateChanged = !state.startDate.isSame(prevState.startDate, 'days');\n\n let animation;\n if (modeChanged) {\n if (calendarLayouts.indexOf(prevState.mode) > calendarLayouts.indexOf(state.mode)) {\n animation = 'zoom-out';\n } else {\n animation = 'zoom-in';\n }\n } else if (startDateChanged) {\n if (state.startDate.isBefore(prevState.startDate)) {\n animation = 'forward';\n } else {\n animation = 'backward';\n }\n }\n\n const {gridProps} = useCalendarGridProps(state);\n\n return (\n <div className={b('grid')} {...gridProps}>\n {animation && (\n <Content className={b('previous-state')} state={prevState} animation={animation} />\n )}\n <Content\n key=\"current\"\n className={b('current-state')}\n state={state}\n animation={animation}\n onAnimationEnd={() => {\n setPrevState({...state, isFocused: false});\n }}\n />\n </div>\n );\n}\n\ninterface ContentProps {\n className?: string;\n animation?: string;\n onAnimationEnd?: () => void;\n state: CalendarState \| RangeCalendarState;\n}\nfunction Content({className, state, animation, onAnimationEnd}: ContentProps) {\n return (\n <div\n className={b('content', {animation}, className)}\n onAnimationEnd={onAnimationEnd}\n role=\"presentation\"\n >\n {state.mode === 'days' && <Weekdays state={state} />}\n <CalendarGridCells state={state} />\n </div>\n );\n}\n\ninterface WeekdaysProps {\n state: CalendarState \| RangeCalendarState;\n}\nfunction Weekdays({state}: WeekdaysProps) {\n const weekdays = getWeekDays(state);\n const {lang} = useLang();\n\n return (\n <div className={b('grid-row')} role=\"row\">\n {weekdays.map((date) => {\n return (\n <div\n key={date.day()}\n className={b('weekday', {weekend: state.isWeekend(date)})}\n role=\"columnheader\"\n aria-label={formatDateTime(date, 'dddd', state.timeZone, lang)}\n >\n {formatDateTime(date, 'dd', state.timeZone, lang)}\n </div>\n );\n })}\n </div>\n );\n}\n\ninterface CalendarGridProps {\n state: CalendarState \| RangeCalendarState;\n}\nfunction CalendarGridCells({state}: CalendarGridProps) {\n const rowsInPeriod = state.mode === 'days' ? 6 : 4;\n const columnsInRow = state.mode === 'days' ? 7 : 3 + (state.mode === 'quarters' ? 1 : 0);\n const days = getDaysInPeriod(state);\n const {lang} = useLang();\n return (\n <div className={b('grid-rowgroup', {mode: state.mode})} role=\"rowgroup\">\n {[...new Array(rowsInPeriod).keys()].map((rowIndex) => (\n <div key={rowIndex} className={b('grid-row')} role=\"row\">\n {state.mode === 'quarters' ? (\n <span role=\"rowheader\" className={b('grid-rowgroup-header')}>\n {formatDateTime(\n days[rowIndex columnsInRow],\n 'YYYY',\n state.timeZone,\n lang,\n )}\n </span>\n ) : null}\n {days\n .slice(rowIndex * columnsInRow, (rowIndex + 1) * columnsInRow)\n .map((date) => {\n return <CalendarCell key={date.unix()} date={date} state={state} />;\n })}\n </div>\n ))}\n </div>\n );\n}\n\ninterface CalendarCellProps {\n date: DateTime;\n state: CalendarState \| RangeCalendarState;\n}\nfunction CalendarCell({date, state}: CalendarCellProps) {\n const {\n cellProps,\n buttonProps,\n formattedDate,\n isDisabled,\n isSelected,\n isRangeSelection,\n isSelectionStart,\n isSelectionEnd,\n isOutsideCurrentRange,\n isUnavailable,\n isCurrent,\n isWeekend,\n } = useCalendarCellProps(date, state);\n\n return (\n <div {...cellProps}>\n <div\n {...buttonProps}\n className={b('button', {\n disabled: isDisabled,\n selected: isSelected,\n 'range-selection': isRangeSelection,\n 'selection-start': isSelectionStart,\n 'selection-end': isSelectionEnd,\n 'out-of-boundary': isOutsideCurrentRange,\n unavailable: isUnavailable,\n current: isCurrent,\n weekend: isWeekend,\n })}\n >\n {formattedDate}\n </div>\n </div>\n );\n}\n"]}

package/dist/esm/components/CalendarView/hooks/types.d.ts CHANGED Viewed

@@ -112,11 +112,13 @@ interface CalendarStateBase {
     readonly startDate: DateTime;
     readonly endDate: DateTime;
 }
-export interface CalendarState extends CalendarStateBase {
+export type SelectionMode = 'single' | 'multiple';
+export type CalendarValueType<M extends SelectionMode = 'single'> = M extends 'single' ? DateTime | null : DateTime[];
+export interface CalendarState<M extends SelectionMode = 'single'> extends CalendarStateBase {
     /** The currently selected date. */
-    readonly value: DateTime | null;
+    readonly value: CalendarValueType<M>;
     /** Sets the currently selected date. */
-    setValue: (value: DateTime) => void;
+    setValue: (value: DateTime | DateTime[] | null) => void;
 }
 export interface RangeCalendarState extends CalendarStateBase {
     /** The currently selected range. */