npm - @gravity-ui/date-components - Versions diffs - 2.12.0 → 3.0.0 - Mend

@gravity-ui/date-components 2.12.0 → 3.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 (155) hide show

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

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

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import type { ButtonProps } from '@gravity-ui/uikit';
+import type { ButtonButtonProps } from '@gravity-ui/uikit';
 import type { CalendarProps } from "../../Calendar/Calendar.js";
 import type { CalendarState, RangeCalendarState } from "./types.js";
 export declare function useCalendarProps(props: CalendarProps, state: CalendarState | RangeCalendarState): {
     calendarProps: React.HTMLAttributes<HTMLElement>;
-    modeButtonProps: ButtonProps;
-    nextButtonProps: ButtonProps;
-    previousButtonProps: ButtonProps;
+    modeButtonProps: ButtonButtonProps;
+    nextButtonProps: ButtonButtonProps;
+    previousButtonProps: ButtonButtonProps;
 };

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

@@ -29,11 +29,9 @@ export function useCalendarProps(props, state) {
                     state.setFocused(true);
                 }
             },
-        extraProps: {
-            'aria-disabled': modeDisabled ? 'true' : undefined,
-            'aria-description': getAriaDescriptionForModeButton(state.mode, state.availableModes),
-            'aria-live': 'polite',
-        },
+        'aria-disabled': modeDisabled ? 'true' : undefined,
+        'aria-description': getAriaDescriptionForModeButton(state.mode, state.availableModes),
+        'aria-live': 'polite',
         children: title,
     };
     const previousFocused = React.useRef(false);
@@ -63,10 +61,8 @@ export function useCalendarProps(props, state) {
             : () => {
                 previousFocused.current = false;
             },
-        extraProps: {
-            'aria-label': i18n('Previous'),
-            'aria-disabled': previousDisabled ? 'true' : undefined,
-        },
+        'aria-label': i18n('Previous'),
+        'aria-disabled': previousDisabled ? 'true' : undefined,
     };
     const nextFocused = React.useRef(false);
     const nextDisabled = state.disabled || state.isNextPageInvalid();
@@ -95,10 +91,8 @@ export function useCalendarProps(props, state) {
             : () => {
                 nextFocused.current = false;
             },
-        extraProps: {
-            'aria-label': i18n('Next'),
-            'aria-disabled': previousDisabled ? 'true' : undefined,
-        },
+        'aria-label': i18n('Next'),
+        'aria-disabled': previousDisabled ? 'true' : undefined,
     };
     return {
         calendarProps,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useCalendarProps.js","sourceRoot":"../../../../../src","sources":["components/CalendarView/hooks/useCalendarProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAIjD,OAAO,EAAC,cAAc,EAAC,6BAA0B;AACjD,OAAO,EAAC,IAAI,EAAC,yBAAgB;AAI7B,MAAM,uBAAuB,GAAG,sCAAsC,CAAC;AAEvE,sCAAsC;AACtC,MAAM,UAAU,gBAAgB,CAAC,KAAoB,EAAE,KAAyC;IAC5F,MAAM,KAAK,GACP,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU;QAC/C,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,MAAM,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE;QACvD,CAAC,CAAC,cAAc,CACV,KAAK,CAAC,WAAW,EACjB,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,EAC5C,KAAK,CAAC,QAAQ,CACjB,CAAC;IAEZ,MAAM,EAAC,gBAAgB,EAAC,GAAG,cAAc,CAAC;QACtC,aAAa,EAAE,KAAK,CAAC,OAAO;QAC5B,YAAY,EAAE,KAAK,CAAC,MAAM;KAC7B,CAAC,CAAC;IAEH,MAAM,aAAa,mBACf,IAAI,EAAE,OAAO,EACb,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,YAAY,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EACrE,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CAAC,IAAI,SAAS,EACxD,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,CAAC,IAAI,SAAS,EAC1D,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,SAAS,EAClD,eAAe,EAAE,KAAK,CAAC,QAAQ,IAAI,SAAS,IACzC,gBAAgB,CACtB,CAAC;IAEF,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC3D,MAAM,UAAU,GAAG,SAAS,GAAG,CAAC,KAAK,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC;IACjE,MAAM,cAAc,GAAG,SAAS,GAAG,CAAC,KAAK,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC;IACrE,MAAM,YAAY,GAAG,KAAK,CAAC,QAAQ,IAAI,UAAU,CAAC;IAElD,MAAM,eAAe,~~GAAgB~~;~~QACjC~~,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,sCAAsC;QACtC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,SAAS;QAC7D,OAAO,EAAE,YAAY;YACjB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,GAAG,EAAE;gBACD,KAAK,CAAC,OAAO,EAAE,CAAC;gBAChB,IAAI,cAAc,EAAE,CAAC;oBACjB,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;gBAC3B,CAAC;YACL,CAAC;QACP,~~UAAU,EAAE;YACR,~~eAAe,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;~~YAClD~~,kBAAkB,EAAE,+BAA+B,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC;~~YACrF~~,WAAW,EAAE,QAAQ;~~SACxB;QACD~~,QAAQ,EAAE,KAAK;KAClB,CAAC;IAEF,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,gBAAgB,GAAG,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,qBAAqB,EAAE,CAAC;IAEzE,KAAK,CAAC,eAAe,CAAC,GAAG,EAAE;QACvB,IAAI,gBAAgB,IAAI,eAAe,CAAC,OAAO,EAAE,CAAC;YAC9C,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;YAChC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,MAAM,mBAAmB,~~GAAgB~~;~~QACrC~~,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,sCAAsC;QACtC,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,SAAS;QACjE,OAAO,EAAE,gBAAgB;YACrB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,GAAG,EAAE;gBACD,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAC9B,CAAC;QACP,OAAO,EAAE,gBAAgB;YACrB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,GAAG,EAAE;gBACD,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;YACnC,CAAC;QACP,MAAM,EAAE,gBAAgB;YACpB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,GAAG,EAAE;gBACD,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;YACpC,CAAC;QACP,~~UAAU,EAAE;YACR,~~YAAY,EAAE,IAAI,CAAC,UAAU,CAAC;~~YAC9B~~,eAAe,EAAE,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;~~SACzD;KACJ~~,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,YAAY,GAAG,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAEjE,KAAK,CAAC,eAAe,CAAC,GAAG,EAAE;QACvB,IAAI,YAAY,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;YACtC,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;YAC5B,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,MAAM,eAAe,~~GAAgB~~;~~QACjC~~,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,sCAAsC;QACtC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,SAAS;QAC7D,OAAO,EAAE,YAAY;YACjB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,GAAG,EAAE;gBACD,KAAK,CAAC,aAAa,EAAE,CAAC;YAC1B,CAAC;QACP,OAAO,EAAE,YAAY;YACjB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,GAAG,EAAE;gBACD,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;YAC/B,CAAC;QACP,MAAM,EAAE,YAAY;YAChB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,GAAG,EAAE;gBACD,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;YAChC,CAAC;QACP,~~UAAU,EAAE;YACR,~~YAAY,EAAE,IAAI,CAAC,MAAM,CAAC;~~YAC1B~~,eAAe,EAAE,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;~~SACzD;KACJ~~,CAAC;IAEF,OAAO;QACH,aAAa;QACb,eAAe;QACf,eAAe;QACf,mBAAmB;KACtB,CAAC;AACN,CAAC;AAED,SAAS,+BAA+B,CAAC,IAAoB,EAAE,cAAgC;IAC3F,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACvD,MAAM,UAAU,GAAG,aAAa,KAAK,cAAc,CAAC,MAAM,CAAC;IAC3D,IAAI,UAAU,EAAE,CAAC;QACb,OAAO,SAAS,CAAC;IACrB,CAAC;IAED,MAAM,YAAY,GAAmC;QACjD,IAAI,EAAE,EAAE;QACR,MAAM,EAAE,IAAI,CAAC,uBAAuB,CAAC;QACrC,QAAQ,EAAE,IAAI,CAAC,yBAAyB,CAAC;QACzC,KAAK,EAAE,IAAI,CAAC,sBAAsB,CAAC;KACtC,CAAC;IACF,MAAM,QAAQ,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;IAC/C,OAAO,YAAY,CAAC,QAAQ,CAAC,CAAC;AAClC,CAAC","sourcesContent":["import React from 'react';\n\nimport {useFocusWithin} from '@gravity-ui/uikit';\nimport type {~~ButtonProps~~} from '@gravity-ui/uikit';\n\nimport type {CalendarProps} from '../../Calendar/Calendar';\nimport {formatDateTime} from '../../utils/dates';\nimport {i18n} from '../i18n';\n\nimport type {CalendarLayout, CalendarState, RangeCalendarState} from './types';\n\nconst buttonDisabledClassName = 'yc-button_disabled g-button_disabled';\n\n// eslint-disable-next-line complexity\nexport function useCalendarProps(props: CalendarProps, state: CalendarState \| RangeCalendarState) {\n const title =\n state.mode === 'years' \|\| state.mode === 'quarters'\n ? `${state.startDate.year()} — ${state.endDate.year()}`\n : formatDateTime(\n state.focusedDate,\n state.mode === 'days' ? 'MMMM YYYY' : 'YYYY',\n state.timeZone,\n );\n\n const {focusWithinProps} = useFocusWithin({\n onFocusWithin: props.onFocus,\n onBlurWithin: props.onBlur,\n });\n\n const calendarProps: React.HTMLAttributes<HTMLElement> = {\n role: 'group',\n id: props.id,\n 'aria-label': [props['aria-label'], title].filter(Boolean).join(', '),\n 'aria-labelledby': props['aria-labelledby'] \|\| undefined,\n 'aria-describedby': props['aria-describedby'] \|\| undefined,\n 'aria-details': props['aria-details'] \|\| undefined,\n 'aria-disabled': state.disabled \|\| undefined,\n ...focusWithinProps,\n };\n\n const modeIndex = state.availableModes.indexOf(state.mode);\n const isModeLast = modeIndex + 1 === state.availableModes.length;\n const isNextModeLast = modeIndex + 2 === state.availableModes.length;\n const modeDisabled = state.disabled \|\| isModeLast;\n\n const modeButtonProps: ~~ButtonProps~~ = {\n disabled: state.disabled,\n // FIXME: do not use button class name\n className: modeDisabled ? buttonDisabledClassName : undefined,\n onClick: modeDisabled\n ? undefined\n : () => {\n state.zoomOut();\n if (isNextModeLast) {\n state.setFocused(true);\n }\n },\n ~~extraProps: {\n~~ 'aria-disabled': modeDisabled ? 'true' : undefined,\n 'aria-description': getAriaDescriptionForModeButton(state.mode, state.availableModes),\n 'aria-live': 'polite',\n ~~},\n~~ children: title,\n };\n\n const previousFocused = React.useRef(false);\n const previousDisabled = state.disabled \|\| state.isPreviousPageInvalid();\n\n React.useLayoutEffect(() => {\n if (previousDisabled && previousFocused.current) {\n previousFocused.current = false;\n state.setFocused(true);\n }\n });\n\n const previousButtonProps: ~~ButtonProps~~ = {\n disabled: state.disabled,\n // FIXME: do not use button class name\n className: previousDisabled ? buttonDisabledClassName : undefined,\n onClick: previousDisabled\n ? undefined\n : () => {\n state.focusPreviousPage();\n },\n onFocus: previousDisabled\n ? undefined\n : () => {\n previousFocused.current = true;\n },\n onBlur: previousDisabled\n ? undefined\n : () => {\n previousFocused.current = false;\n },\n ~~extraProps: {\n~~ 'aria-label': i18n('Previous'),\n 'aria-disabled': previousDisabled ? 'true' : undefined,\n ~~},\n~~ };\n\n const nextFocused = React.useRef(false);\n const nextDisabled = state.disabled \|\| state.isNextPageInvalid();\n\n React.useLayoutEffect(() => {\n if (nextDisabled && nextFocused.current) {\n nextFocused.current = false;\n state.setFocused(true);\n }\n });\n\n const nextButtonProps: ~~ButtonProps~~ = {\n disabled: state.disabled,\n // FIXME: do not use button class name\n className: nextDisabled ? buttonDisabledClassName : undefined,\n onClick: nextDisabled\n ? undefined\n : () => {\n state.focusNextPage();\n },\n onFocus: nextDisabled\n ? undefined\n : () => {\n nextFocused.current = true;\n },\n onBlur: nextDisabled\n ? undefined\n : () => {\n nextFocused.current = false;\n },\n ~~extraProps: {\n~~ 'aria-label': i18n('Next'),\n 'aria-disabled': previousDisabled ? 'true' : undefined,\n ~~},\n~~ };\n\n return {\n calendarProps,\n modeButtonProps,\n nextButtonProps,\n previousButtonProps,\n };\n}\n\nfunction getAriaDescriptionForModeButton(mode: CalendarLayout, availableModes: CalendarLayout[]) {\n const nextModeIndex = availableModes.indexOf(mode) + 1;\n const isModeLast = nextModeIndex === availableModes.length;\n if (isModeLast) {\n return undefined;\n }\n\n const ariaLabelMap: Record<CalendarLayout, string> = {\n days: '',\n months: i18n('Switch to months view'),\n quarters: i18n('Switch to quarters view'),\n years: i18n('Switch to years view'),\n };\n const nextMode = availableModes[nextModeIndex];\n return ariaLabelMap[nextMode];\n}\n"]}
1	+ {"version":3,"file":"useCalendarProps.js","sourceRoot":"../../../../../src","sources":["components/CalendarView/hooks/useCalendarProps.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {useFocusWithin} from '@gravity-ui/uikit';\nimport type {ButtonButtonProps} from '@gravity-ui/uikit';\n\nimport type {CalendarProps} from '../../Calendar/Calendar';\nimport {formatDateTime} from '../../utils/dates';\nimport {i18n} from '../i18n';\n\nimport type {CalendarLayout, CalendarState, RangeCalendarState} from './types';\n\nconst buttonDisabledClassName = 'yc-button_disabled g-button_disabled';\n\n// eslint-disable-next-line complexity\nexport function useCalendarProps(props: CalendarProps, state: CalendarState \| RangeCalendarState) {\n const title =\n state.mode === 'years' \|\| state.mode === 'quarters'\n ? `${state.startDate.year()} — ${state.endDate.year()}`\n : formatDateTime(\n state.focusedDate,\n state.mode === 'days' ? 'MMMM YYYY' : 'YYYY',\n state.timeZone,\n );\n\n const {focusWithinProps} = useFocusWithin({\n onFocusWithin: props.onFocus,\n onBlurWithin: props.onBlur,\n });\n\n const calendarProps: React.HTMLAttributes<HTMLElement> = {\n role: 'group',\n id: props.id,\n 'aria-label': [props['aria-label'], title].filter(Boolean).join(', '),\n 'aria-labelledby': props['aria-labelledby'] \|\| undefined,\n 'aria-describedby': props['aria-describedby'] \|\| undefined,\n 'aria-details': props['aria-details'] \|\| undefined,\n 'aria-disabled': state.disabled \|\| undefined,\n ...focusWithinProps,\n };\n\n const modeIndex = state.availableModes.indexOf(state.mode);\n const isModeLast = modeIndex + 1 === state.availableModes.length;\n const isNextModeLast = modeIndex + 2 === state.availableModes.length;\n const modeDisabled = state.disabled \|\| isModeLast;\n\n const modeButtonProps: ButtonButtonProps = {\n disabled: state.disabled,\n // FIXME: do not use button class name\n className: modeDisabled ? buttonDisabledClassName : undefined,\n onClick: modeDisabled\n ? undefined\n : () => {\n state.zoomOut();\n if (isNextModeLast) {\n state.setFocused(true);\n }\n },\n 'aria-disabled': modeDisabled ? 'true' : undefined,\n 'aria-description': getAriaDescriptionForModeButton(state.mode, state.availableModes),\n 'aria-live': 'polite',\n children: title,\n };\n\n const previousFocused = React.useRef(false);\n const previousDisabled = state.disabled \|\| state.isPreviousPageInvalid();\n\n React.useLayoutEffect(() => {\n if (previousDisabled && previousFocused.current) {\n previousFocused.current = false;\n state.setFocused(true);\n }\n });\n\n const previousButtonProps: ButtonButtonProps = {\n disabled: state.disabled,\n // FIXME: do not use button class name\n className: previousDisabled ? buttonDisabledClassName : undefined,\n onClick: previousDisabled\n ? undefined\n : () => {\n state.focusPreviousPage();\n },\n onFocus: previousDisabled\n ? undefined\n : () => {\n previousFocused.current = true;\n },\n onBlur: previousDisabled\n ? undefined\n : () => {\n previousFocused.current = false;\n },\n 'aria-label': i18n('Previous'),\n 'aria-disabled': previousDisabled ? 'true' : undefined,\n };\n\n const nextFocused = React.useRef(false);\n const nextDisabled = state.disabled \|\| state.isNextPageInvalid();\n\n React.useLayoutEffect(() => {\n if (nextDisabled && nextFocused.current) {\n nextFocused.current = false;\n state.setFocused(true);\n }\n });\n\n const nextButtonProps: ButtonButtonProps = {\n disabled: state.disabled,\n // FIXME: do not use button class name\n className: nextDisabled ? buttonDisabledClassName : undefined,\n onClick: nextDisabled\n ? undefined\n : () => {\n state.focusNextPage();\n },\n onFocus: nextDisabled\n ? undefined\n : () => {\n nextFocused.current = true;\n },\n onBlur: nextDisabled\n ? undefined\n : () => {\n nextFocused.current = false;\n },\n 'aria-label': i18n('Next'),\n 'aria-disabled': previousDisabled ? 'true' : undefined,\n };\n\n return {\n calendarProps,\n modeButtonProps,\n nextButtonProps,\n previousButtonProps,\n };\n}\n\nfunction getAriaDescriptionForModeButton(mode: CalendarLayout, availableModes: CalendarLayout[]) {\n const nextModeIndex = availableModes.indexOf(mode) + 1;\n const isModeLast = nextModeIndex === availableModes.length;\n if (isModeLast) {\n return undefined;\n }\n\n const ariaLabelMap: Record<CalendarLayout, string> = {\n days: '',\n months: i18n('Switch to months view'),\n quarters: i18n('Switch to quarters view'),\n years: i18n('Switch to years view'),\n };\n const nextMode = availableModes[nextModeIndex];\n return ariaLabelMap[nextMode];\n}\n"]}

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

@@ -1 +1,5 @@
-export declare const i18n: (key: "Previous" | "Next" | "Switch to months view" | "Switch to quarters view" | "Switch to years view", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const i18n: ((key: "Previous" | "Next" | "Switch to months view" | "Switch to quarters view" | "Switch to years view", params?: import("@gravity-ui/i18n").Params) => string) & {
+    keysetData: {
+        "g-date-calendar": Record<"Previous" | "Next" | "Switch to months view" | "Switch to quarters view" | "Switch to years view", import("@gravity-ui/i18n").KeyData>;
+    };
+};

package/dist/esm/components/DateField/i18n/index.d.ts CHANGED Viewed

@@ -1 +1,5 @@
-export declare const i18n: (key: "year_placeholder" | "quarter_placeholder" | "month_placeholder" | "weekday_placeholder" | "day_placeholder" | "hour_placeholder" | "minute_placeholder" | "second_placeholder" | "dayPeriod_placeholder", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const i18n: ((key: "year_placeholder" | "quarter_placeholder" | "month_placeholder" | "weekday_placeholder" | "day_placeholder" | "hour_placeholder" | "minute_placeholder" | "second_placeholder" | "dayPeriod_placeholder", params?: import("@gravity-ui/i18n").Params) => string) & {
+    keysetData: {
+        "g-date-date-field": Record<"year_placeholder" | "quarter_placeholder" | "month_placeholder" | "weekday_placeholder" | "day_placeholder" | "hour_placeholder" | "minute_placeholder" | "second_placeholder" | "dayPeriod_placeholder", import("@gravity-ui/i18n").KeyData>;
+    };
+};

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { CalendarProps } from "../Calendar/index.js";
-import type { AccessibilityProps, DomProps, FocusableProps, InputDOMProps, KeyboardEvents, StyleProps, TextInputProps } from "../types/index.js";
+import type { AccessibilityProps, DomProps, FocusableProps, InputDOMProps, KeyboardEvents, PopupStyleProps, StyleProps, TextInputProps } from "../types/index.js";
 import type { DatePickerStateOptions } from "./hooks/datePickerStateFactory.js";
 import "./DatePicker.css";
-export interface DatePickerProps<T = DateTime> extends DatePickerStateOptions<T>, TextInputProps, FocusableProps, KeyboardEvents, DomProps, InputDOMProps, StyleProps, AccessibilityProps {
+export interface DatePickerProps<T = DateTime> extends DatePickerStateOptions<T>, TextInputProps, FocusableProps, KeyboardEvents, DomProps, InputDOMProps, StyleProps, AccessibilityProps, PopupStyleProps {
     children?: (props: CalendarProps<T>) => React.ReactNode;
     disablePortal?: boolean;
     disableFocusTrap?: boolean;

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

@@ -15,12 +15,12 @@ import { b } from "./utils/index.js";
 import "./DatePicker.css";
 export function DatePicker(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    const anchorRef = React.useRef(null);
+    const [anchor, setAnchor] = React.useState(null);
     const state = useDatePickerState(props);
     const { groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps } = useDatePickerProps(state, props);
     const isMobile = useMobile();
     const isOnlyTime = state.formatInfo.hasTime && !state.formatInfo.hasDate;
-    return (_jsxs("div", Object.assign({ className: b(null, className) }, groupProps, { children: [isMobile ? (_jsx(MobileCalendar, { props: props, state: state })) : (!isOnlyTime && (_jsx("div", { ref: anchorRef, className: b('popup-anchor'), children: _jsx(Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: _jsxs("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : (_jsx(Calendar, Object.assign({}, calendarProps))), state.formatInfo.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, Object.assign({}, timeInputProps)) }))] }) })) }))), _jsx(TextInput, Object.assign({}, fieldProps, { className: b('field', { mobile: isMobile }), hasClear: !isMobile && fieldProps.hasClear, endContent: _jsxs(React.Fragment, { children: [!isMobile && !isOnlyTime && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), !isMobile && isOnlyTime && (_jsx(StubButton, { size: calendarButtonProps.size, icon: ClockIcon })), isMobile && (_jsx(StubButton, { size: calendarButtonProps.size, icon: isOnlyTime ? ClockIcon : CalendarIcon }))] }) })), _jsx(HiddenInput, { name: props.name, value: state.value, toStringValue: (value) => { var _a; return (_a = value === null || value === void 0 ? void 0 : value.toISOString()) !== null && _a !== void 0 ? _a : ''; }, onReset: (value) => {
+    return (_jsxs("div", Object.assign({ className: b(null, className) }, groupProps, { children: [isMobile ? (_jsx(MobileCalendar, { props: props, state: state })) : (!isOnlyTime && (_jsx("div", { ref: setAnchor, className: b('popup-anchor'), children: _jsx(Popup, Object.assign({ anchorElement: anchor }, popupProps, { children: _jsxs("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : (_jsx(Calendar, Object.assign({}, calendarProps))), state.formatInfo.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, Object.assign({}, timeInputProps)) }))] }) })) }))), _jsx(TextInput, Object.assign({}, fieldProps, { className: b('field', { mobile: isMobile }), hasClear: !isMobile && fieldProps.hasClear, endContent: _jsxs(React.Fragment, { children: [!isMobile && !isOnlyTime && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), (isMobile || isOnlyTime) && (_jsx(StubButton, { size: calendarButtonProps.size, icon: isOnlyTime ? ClockIcon : CalendarIcon }))] }) })), _jsx(HiddenInput, { name: props.name, value: state.value, toStringValue: (value) => { var _a; return (_a = value === null || value === void 0 ? void 0 : value.toISOString()) !== null && _a !== void 0 ? _a : ''; }, onReset: (value) => {
                     state.setValue(value);
                 }, disabled: state.disabled, form: props.form })] })));
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.js","sourceRoot":"../../../../src","sources":["components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,QAAQ,IAAI,YAAY,EAAE,KAAK,IAAI,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAE5E,OAAO,EAAC,QAAQ,EAAC,6BAAoB;AAErC,OAAO,EAAC,SAAS,EAAC,8BAAqB;AACvC,OAAO,EAAC,WAAW,EAAC,sCAAmC;~~AAWvD~~,OAAO,EAAC,cAAc,EAAC,4BAAyB;AAChD,OAAO,EAAC,UAAU,EAAC,wBAAqB;AAExC,OAAO,EAAC,kBAAkB,EAAC,sCAAmC;AAC9D,OAAO,EAAC,kBAAkB,EAAC,sCAAmC;AAC9D,OAAO,EAAC,CAAC,EAAC,yBAAgB;AAE1B,0BAA2B;~~AAgB3B~~,MAAM,UAAU,UAAU,CAAC,EAAsC;QAAtC,EAAC,SAAS,OAA4B,EAAvB,KAAK,cAApB,aAAqB,CAAD;IAC3C,MAAM,SAAS,GAAG,KAAK,CAAC,~~MAAM~~,~~CAAiB~~,IAAI,CAAC,CAAC;~~IAErD~~,MAAM,KAAK,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAExC,MAAM,EAAC,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAE,UAAU,EAAE,aAAa,EAAE,cAAc,EAAC,GAC1F,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAErC,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC;IAEzE,OAAO,CACH,6BAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,IAAM,UAAU,eAC7C,QAAQ,CAAC,CAAC,CAAC,CACR,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,CACjD,CAAC,CAAC,CAAC,CACA,CAAC,UAAU,IAAI,CACX,cAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,YAC7C,KAAC,KAAK,kBAAC,~~SAAS~~,EAAE,~~SAAS~~,IAAM,UAAU,~~cACvC~~,eAAK,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,aAC7B,OAAO,KAAK,CAAC,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,CACpC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAChC,CAAC,CAAC,CAAC,CACA,KAAC,QAAQ,oBAAK,aAAa,EAAI,CAClC,EACA,KAAK,CAAC,UAAU,CAAC,OAAO,IAAI,CACzB,cAAK,SAAS,EAAE,CAAC,CAAC,oBAAoB,CAAC,YACnC,KAAC,SAAS,oBAAK,cAAc,EAAI,GAC/B,CACT,IACC,IACF,GACN,CACT,CACJ,EACD,KAAC,SAAS,oBACF,UAAU,IACd,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,MAAM,EAAE,QAAQ,EAAC,CAAC,EACzC,QAAQ,EAAE,CAAC,QAAQ,IAAI,UAAU,CAAC,QAAQ,EAC1C,UAAU,EACN,MAAC,KAAK,CAAC,QAAQ,eACV,CAAC,QAAQ,IAAI,CAAC,UAAU,IAAI,CACzB,KAAC,MAAM,oBAAK,mBAAmB,cAC3B,KAAC,IAAI,IAAC,IAAI,EAAE,YAAY,GAAI,IACvB,CACZ,EACA,CAAC,QAAQ,IAAI,UAAU,~~IAAI,CACxB,KAAC,UAAU,IAAC,IAAI,EAAE,mBAAmB,~~CAAC,IAAI,~~EAAE~~,~~IAAI,EAAE,SAAS,GAAI,CAClE,EACA,QAAQ,IAAI,CACT,~~KAAC,UAAU,IACP,IAAI,EAAE,mBAAmB,CAAC,IAAI,EAC9B,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,GAC7C,CACL,IACY,IAEvB,EACF,KAAC,WAAW,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE,WAAC,OAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,EAAE,mCAAI,EAAE,CAAA,EAAA,EACpD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;oBACf,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAC1B,CAAC,EACD,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,GAClB,KACA,CACT,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {Calendar as CalendarIcon, Clock as ClockIcon} from '@gravity-ui/icons';\nimport {Button, Icon, Popup, TextInput, useMobile} from '@gravity-ui/uikit';\n\nimport {Calendar} from '../Calendar';\nimport type {CalendarProps} from '../Calendar';\nimport {DateField} from '../DateField';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\nimport type {\n AccessibilityProps,\n DomProps,\n FocusableProps,\n InputDOMProps,\n KeyboardEvents,\n StyleProps,\n TextInputProps,\n} from '../types';\n\nimport {MobileCalendar} from './MobileCalendar';\nimport {StubButton} from './StubButton';\nimport type {DatePickerStateOptions} from './hooks/datePickerStateFactory';\nimport {useDatePickerProps} from './hooks/useDatePickerProps';\nimport {useDatePickerState} from './hooks/useDatePickerState';\nimport {b} from './utils';\n\nimport './DatePicker.scss';\n\nexport interface DatePickerProps<T = DateTime>\n extends DatePickerStateOptions<T>,\n TextInputProps,\n FocusableProps,\n KeyboardEvents,\n DomProps,\n InputDOMProps,\n StyleProps,\n AccessibilityProps {\n children?: (props: CalendarProps<T>) => React.ReactNode;\n disablePortal?: boolean;\n disableFocusTrap?: boolean;\n}\n\nexport function DatePicker({className, ...props}: DatePickerProps) {\n const ~~anchorRef~~ = React.~~useRef~~<HTMLDivElement>(null);\n\n const state = useDatePickerState(props);\n\n const {groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps} =\n useDatePickerProps(state, props);\n\n const isMobile = useMobile();\n const isOnlyTime = state.formatInfo.hasTime && !state.formatInfo.hasDate;\n\n return (\n <div className={b(null, className)} {...groupProps}>\n {isMobile ? (\n <MobileCalendar props={props} state={state} />\n ) : (\n !isOnlyTime && (\n <div ref={~~anchorRef~~} className={b('popup-anchor')}>\n <Popup ~~anchorRef~~={~~anchorRef~~} {...popupProps}>\n <div className={b('popup-content')}>\n {typeof props.children === 'function' ? (\n props.children(calendarProps)\n ) : (\n <Calendar {...calendarProps} />\n )}\n {state.formatInfo.hasTime && (\n <div className={b('time-field-wrapper')}>\n <DateField {...timeInputProps} />\n </div>\n )}\n </div>\n </Popup>\n </div>\n )\n )}\n <TextInput\n {...fieldProps}\n className={b('field', {mobile: isMobile})}\n hasClear={!isMobile && fieldProps.hasClear}\n endContent={\n <React.Fragment>\n {!isMobile && !isOnlyTime && (\n <Button {...calendarButtonProps}>\n <Icon data={CalendarIcon} />\n </Button>\n )}\n {!isMobile && isOnlyTime ~~&& (\n <StubButton size={calendarButtonProps.size} icon={ClockIcon} />\n~~ )~~}\n {isMobile~~ && (\n <StubButton\n size={calendarButtonProps.size}\n icon={isOnlyTime ? ClockIcon : CalendarIcon}\n />\n )}\n </React.Fragment>\n }\n />\n <HiddenInput\n name={props.name}\n value={state.value}\n toStringValue={(value) => value?.toISOString() ?? ''}\n onReset={(value) => {\n state.setValue(value);\n }}\n disabled={state.disabled}\n form={props.form}\n />\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"DatePicker.js","sourceRoot":"../../../../src","sources":["components/DatePicker/DatePicker.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 {Calendar as CalendarIcon, Clock as ClockIcon} from '@gravity-ui/icons';\nimport {Button, Icon, Popup, TextInput, useMobile} from '@gravity-ui/uikit';\n\nimport {Calendar} from '../Calendar';\nimport type {CalendarProps} from '../Calendar';\nimport {DateField} from '../DateField';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\nimport type {\n AccessibilityProps,\n DomProps,\n FocusableProps,\n InputDOMProps,\n KeyboardEvents,\n PopupStyleProps,\n StyleProps,\n TextInputProps,\n} from '../types';\n\nimport {MobileCalendar} from './MobileCalendar';\nimport {StubButton} from './StubButton';\nimport type {DatePickerStateOptions} from './hooks/datePickerStateFactory';\nimport {useDatePickerProps} from './hooks/useDatePickerProps';\nimport {useDatePickerState} from './hooks/useDatePickerState';\nimport {b} from './utils';\n\nimport './DatePicker.scss';\n\nexport interface DatePickerProps<T = DateTime>\n extends DatePickerStateOptions<T>,\n TextInputProps,\n FocusableProps,\n KeyboardEvents,\n DomProps,\n InputDOMProps,\n StyleProps,\n AccessibilityProps,\n PopupStyleProps {\n children?: (props: CalendarProps<T>) => React.ReactNode;\n disablePortal?: boolean;\n disableFocusTrap?: boolean;\n}\n\nexport function DatePicker({className, ...props}: DatePickerProps) {\n const [anchor, setAnchor] = React.useState<HTMLDivElement \| null>(null);\n\n const state = useDatePickerState(props);\n\n const {groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps} =\n useDatePickerProps(state, props);\n\n const isMobile = useMobile();\n const isOnlyTime = state.formatInfo.hasTime && !state.formatInfo.hasDate;\n\n return (\n <div className={b(null, className)} {...groupProps}>\n {isMobile ? (\n <MobileCalendar props={props} state={state} />\n ) : (\n !isOnlyTime && (\n <div ref={setAnchor} className={b('popup-anchor')}>\n <Popup anchorElement={anchor} {...popupProps}>\n <div className={b('popup-content')}>\n {typeof props.children === 'function' ? (\n props.children(calendarProps)\n ) : (\n <Calendar {...calendarProps} />\n )}\n {state.formatInfo.hasTime && (\n <div className={b('time-field-wrapper')}>\n <DateField {...timeInputProps} />\n </div>\n )}\n </div>\n </Popup>\n </div>\n )\n )}\n <TextInput\n {...fieldProps}\n className={b('field', {mobile: isMobile})}\n hasClear={!isMobile && fieldProps.hasClear}\n endContent={\n <React.Fragment>\n {!isMobile && !isOnlyTime && (\n <Button {...calendarButtonProps}>\n <Icon data={CalendarIcon} />\n </Button>\n )}\n {(isMobile \|\| isOnlyTime) && (\n <StubButton\n size={calendarButtonProps.size}\n icon={isOnlyTime ? ClockIcon : CalendarIcon}\n />\n )}\n </React.Fragment>\n }\n />\n <HiddenInput\n name={props.name}\n value={state.value}\n toStringValue={(value) => value?.toISOString() ?? ''}\n onReset={(value) => {\n state.setValue(value);\n }}\n disabled={state.disabled}\n form={props.form}\n />\n </div>\n );\n}\n"]}

package/dist/esm/components/DatePicker/hooks/useDatePickerProps.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { DateTime } from '@gravity-ui/date-utils';
-import type { ButtonProps, PopupProps, TextInputProps } from '@gravity-ui/uikit';
+import type { ButtonButtonProps, PopupProps, TextInputProps } from '@gravity-ui/uikit';
 import type { CalendarInstance, CalendarProps } from "../../Calendar/index.js";
 import type { DateFieldProps } from "../../DateField/index.js";
 import type { RangeValue } from "../../types/index.js";
@@ -11,7 +11,7 @@ interface InnerDatePickerProps<T = DateTime> {
         ref: React.Ref<any>;
     };
     fieldProps: TextInputProps;
-    calendarButtonProps: ButtonProps & {
+    calendarButtonProps: ButtonButtonProps & {
         ref: React.Ref<HTMLButtonElement>;
     };
     popupProps: PopupProps;

package/dist/esm/components/DatePicker/hooks/useDatePickerProps.js CHANGED Viewed

@@ -70,11 +70,9 @@ export function useDatePickerProps(state, _a) {
             ref: calendarButtonRef,
             size: getButtonSizeForInput(props.size),
             disabled: state.disabled,
-            extraProps: {
-                'aria-label': i18n('Calendar'),
-                'aria-haspopup': 'dialog',
-                'aria-expanded': state.isOpen,
-            },
+            'aria-label': i18n('Calendar'),
+            'aria-haspopup': 'dialog',
+            'aria-expanded': state.isOpen,
             view: 'flat-secondary',
             onClick: () => {
                 setActive(true);
@@ -83,26 +81,34 @@ export function useDatePickerProps(state, _a) {
         },
         popupProps: {
             open: state.isOpen,
-            onEscapeKeyDown: () => {
-                state.setOpen(false, 'EscapeKeyDown');
-                focusInput();
-            },
-            onOutsideClick: (e) => {
-                var _a;
-                if (e.target !== calendarButtonRef.current) {
-                    state.setOpen(false, 'ClickOutside');
-                }
-                if (e.target && ((_a = groupRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
-                    focusInput();
+            onOpenChange: (open, e, reason) => {
+                var _a, _b;
+                if (!open) {
+                    if (reason === 'escape-key') {
+                        state.setOpen(false, 'EscapeKeyDown');
+                        focusInput();
+                    }
+                    else if (reason === 'outside-press') {
+                        if (!(e === null || e === void 0 ? void 0 : e.target) || !((_a = calendarButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                            state.setOpen(false, 'ClickOutside');
+                        }
+                        if ((e === null || e === void 0 ? void 0 : e.target) && ((_b = groupRef.current) === null || _b === void 0 ? void 0 : _b.contains(e.target))) {
+                            focusInput();
+                        }
+                    }
                 }
             },
-            onTransitionExited: () => {
+            onTransitionOutComplete: () => {
                 setFocusedDate(isDateTime(state.dateFieldState.displayValue)
                     ? state.dateFieldState.displayValue
                     : state.dateFieldState.displayValue.start);
             },
-            focusTrap: !props.disableFocusTrap,
+            modal: !props.disableFocusTrap,
             disablePortal: props.disablePortal,
+            placement: props.popupPlacement,
+            offset: props.popupOffset,
+            className: props.popupClassName,
+            style: props.popupStyle,
         },
         calendarProps: {
             ref: calendarRef,

package/dist/esm/components/DatePicker/hooks/useDatePickerProps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useDatePickerProps.js","sourceRoot":"../../../../../src","sources":["components/DatePicker/hooks/useDatePickerProps.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {isDateTime} from '@gravity-ui/date-utils';\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {useFocusWithin, useForkRef} from '@gravity-ui/uikit';\nimport type {ButtonProps, PopupProps, TextInputProps} from '@gravity-ui/uikit';\n\nimport type {CalendarInstance, CalendarProps} from '../../Calendar';\nimport {useDateFieldProps} from '../../DateField';\nimport type {DateFieldProps} from '../../DateField';\nimport type {RangeValue} from '../../types';\nimport {getButtonSizeForInput} from '../../utils/getButtonSizeForInput';\nimport {mergeProps} from '../../utils/mergeProps';\nimport type {DatePickerProps} from '../DatePicker';\nimport {i18n} from '../i18n';\nimport {getCalendarModes, getDateTimeValue} from '../utils';\n\nimport type {DatePickerState} from './useDatePickerState';\n\ninterface InnerDatePickerProps<T = DateTime> {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n groupProps: React.HTMLAttributes<unknown> & {ref: React.Ref<any>};\n fieldProps: TextInputProps;\n calendarButtonProps: ButtonProps & {ref: React.Ref<HTMLButtonElement>};\n popupProps: PopupProps;\n calendarProps: CalendarProps<T> & {ref: React.Ref<CalendarInstance>};\n timeInputProps: DateFieldProps<T>;\n}\n\nexport function useDatePickerProps<T extends DateTime \| RangeValue<DateTime>>(\n state: DatePickerState<T>,\n {onFocus, onBlur, ...props}: DatePickerProps<T>,\n): InnerDatePickerProps<T> {\n const [isActive, setActive] = React.useState(false);\n\n const [focusedDate, setFocusedDate] = React.useState(\n isDateTime(state.dateFieldState.displayValue)\n ? state.dateFieldState.displayValue\n : state.dateFieldState.displayValue.start,\n );\n const [prevDateValue, setPrevDateValue] = React.useState<any>(\n state.dateFieldState.displayValue,\n );\n\n if (isDateTime(state.dateFieldState.displayValue)) {\n if (!state.dateFieldState.displayValue.isSame(prevDateValue, 'day')) {\n setPrevDateValue(state.dateFieldState.displayValue);\n setFocusedDate(state.dateFieldState.displayValue);\n }\n } else if (!state.dateFieldState.displayValue.start.isSame(prevDateValue.start, 'day')) {\n setPrevDateValue(state.dateFieldState.displayValue);\n setFocusedDate(state.dateFieldState.displayValue.start);\n } else if (!state.dateFieldState.displayValue.end.isSame(prevDateValue.end, 'day')) {\n setPrevDateValue(state.dateFieldState.displayValue);\n setFocusedDate(state.dateFieldState.displayValue.end);\n }\n\n const {focusWithinProps} = useFocusWithin({\n onFocusWithin: onFocus,\n onBlurWithin: onBlur,\n onFocusWithinChange(isFocusWithin) {\n setActive(isFocusWithin);\n if (!isFocusWithin) {\n state.setOpen(false, 'FocusOut');\n }\n },\n });\n\n const {inputProps} = useDateFieldProps(state.dateFieldState, props);\n\n const inputRef = React.useRef<HTMLInputElement>(null);\n\n const handleRef = useForkRef(inputRef, inputProps.controlRef);\n\n const calendarRef = React.useRef<CalendarInstance>(null);\n const calendarButtonRef = React.useRef<HTMLButtonElement>(null);\n const groupRef = React.useRef<HTMLElement>(null);\n\n function focusInput() {\n setTimeout(() => {\n inputRef.current?.focus({preventScroll: true});\n });\n }\n\n const onlyTime = state.formatInfo.hasTime && !state.formatInfo.hasDate;\n const calendarModes = getCalendarModes(state.formatInfo);\n\n return {\n groupProps: {\n ref: groupRef,\n tabIndex: -1,\n role: 'group',\n ...focusWithinProps,\n style: props.style,\n 'aria-disabled': state.disabled \|\| undefined,\n onKeyDown: (e) => {\n if (!onlyTime && e.altKey && (e.key === 'ArrowDown' \|\| e.key === 'ArrowUp')) {\n e.preventDefault();\n e.stopPropagation();\n state.setOpen(true, 'ShortcutKeyDown');\n }\n },\n },\n fieldProps: mergeProps(\n inputProps,\n state.dateFieldState.isEmpty && !isActive && props.placeholder\n ? {value: ''}\n : undefined,\n {\n controlRef: handleRef,\n controlProps: {role: 'combobox', 'aria-expanded': state.isOpen},\n },\n ),\n calendarButtonProps: {\n ref: calendarButtonRef,\n size: getButtonSizeForInput(props.size),\n disabled: state.disabled,\n extraProps: {\n 'aria-label': i18n('Calendar'),\n 'aria-haspopup': 'dialog',\n 'aria-expanded': state.isOpen,\n },\n view: 'flat-secondary',\n onClick: () => {\n setActive(true);\n state.setOpen(!state.isOpen, 'TriggerButtonClick');\n },\n },\n popupProps: {\n open: state.isOpen,\n onEscapeKeyDown: () => {\n state.setOpen(false, 'EscapeKeyDown');\n focusInput();\n },\n onOutsideClick: (e) => {\n if (e.target !== calendarButtonRef.current) {\n state.setOpen(false, 'ClickOutside');\n }\n if (e.target && groupRef.current?.contains(e.target as Node)) {\n focusInput();\n }\n },\n onTransitionExited: () => {\n setFocusedDate(\n isDateTime(state.dateFieldState.displayValue)\n ? state.dateFieldState.displayValue\n : state.dateFieldState.displayValue.start,\n );\n },\n focusTrap: !props.disableFocusTrap,\n disablePortal: props.disablePortal,\n },\n calendarProps: {\n ref: calendarRef,\n autoFocus: true,\n size: props.size === 's' ? 'm' : props.size,\n disabled: props.disabled,\n readOnly: props.readOnly,\n onUpdate: (d) => {\n state.setDateValue(d);\n if (!state.formatInfo.hasTime) {\n focusInput();\n }\n },\n value: state.dateFieldState.displayValue,\n minValue: props.minValue,\n maxValue: props.maxValue,\n isDateUnavailable: props.isDateUnavailable,\n timeZone: state.timeZone,\n focusedValue: focusedDate,\n onFocusUpdate: setFocusedDate,\n modes: calendarModes,\n },\n timeInputProps: {\n value: state.timeValue,\n placeholderValue: getDateTimeValue(state.dateFieldState.displayValue),\n onUpdate: state.setTimeValue,\n format: state.timeFormat,\n readOnly: state.readOnly,\n disabled: state.disabled,\n timeZone: state.timeZone,\n hasClear: props.hasClear,\n size: props.size,\n },\n };\n}\n"]}
1	+ {"version":3,"file":"useDatePickerProps.js","sourceRoot":"../../../../../src","sources":["components/DatePicker/hooks/useDatePickerProps.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {isDateTime} from '@gravity-ui/date-utils';\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {useFocusWithin, useForkRef} from '@gravity-ui/uikit';\nimport type {ButtonButtonProps, PopupProps, TextInputProps} from '@gravity-ui/uikit';\n\nimport type {CalendarInstance, CalendarProps} from '../../Calendar';\nimport {useDateFieldProps} from '../../DateField';\nimport type {DateFieldProps} from '../../DateField';\nimport type {RangeValue} from '../../types';\nimport {getButtonSizeForInput} from '../../utils/getButtonSizeForInput';\nimport {mergeProps} from '../../utils/mergeProps';\nimport type {DatePickerProps} from '../DatePicker';\nimport {i18n} from '../i18n';\nimport {getCalendarModes, getDateTimeValue} from '../utils';\n\nimport type {DatePickerState} from './useDatePickerState';\n\ninterface InnerDatePickerProps<T = DateTime> {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n groupProps: React.HTMLAttributes<unknown> & {ref: React.Ref<any>};\n fieldProps: TextInputProps;\n calendarButtonProps: ButtonButtonProps & {ref: React.Ref<HTMLButtonElement>};\n popupProps: PopupProps;\n calendarProps: CalendarProps<T> & {ref: React.Ref<CalendarInstance>};\n timeInputProps: DateFieldProps<T>;\n}\n\nexport function useDatePickerProps<T extends DateTime \| RangeValue<DateTime>>(\n state: DatePickerState<T>,\n {onFocus, onBlur, ...props}: DatePickerProps<T>,\n): InnerDatePickerProps<T> {\n const [isActive, setActive] = React.useState(false);\n\n const [focusedDate, setFocusedDate] = React.useState(\n isDateTime(state.dateFieldState.displayValue)\n ? state.dateFieldState.displayValue\n : state.dateFieldState.displayValue.start,\n );\n const [prevDateValue, setPrevDateValue] = React.useState<any>(\n state.dateFieldState.displayValue,\n );\n\n if (isDateTime(state.dateFieldState.displayValue)) {\n if (!state.dateFieldState.displayValue.isSame(prevDateValue, 'day')) {\n setPrevDateValue(state.dateFieldState.displayValue);\n setFocusedDate(state.dateFieldState.displayValue);\n }\n } else if (!state.dateFieldState.displayValue.start.isSame(prevDateValue.start, 'day')) {\n setPrevDateValue(state.dateFieldState.displayValue);\n setFocusedDate(state.dateFieldState.displayValue.start);\n } else if (!state.dateFieldState.displayValue.end.isSame(prevDateValue.end, 'day')) {\n setPrevDateValue(state.dateFieldState.displayValue);\n setFocusedDate(state.dateFieldState.displayValue.end);\n }\n\n const {focusWithinProps} = useFocusWithin({\n onFocusWithin: onFocus,\n onBlurWithin: onBlur,\n onFocusWithinChange(isFocusWithin) {\n setActive(isFocusWithin);\n if (!isFocusWithin) {\n state.setOpen(false, 'FocusOut');\n }\n },\n });\n\n const {inputProps} = useDateFieldProps(state.dateFieldState, props);\n\n const inputRef = React.useRef<HTMLInputElement>(null);\n\n const handleRef = useForkRef(inputRef, inputProps.controlRef);\n\n const calendarRef = React.useRef<CalendarInstance>(null);\n const calendarButtonRef = React.useRef<HTMLButtonElement>(null);\n const groupRef = React.useRef<HTMLElement>(null);\n\n function focusInput() {\n setTimeout(() => {\n inputRef.current?.focus({preventScroll: true});\n });\n }\n\n const onlyTime = state.formatInfo.hasTime && !state.formatInfo.hasDate;\n const calendarModes = getCalendarModes(state.formatInfo);\n\n return {\n groupProps: {\n ref: groupRef,\n tabIndex: -1,\n role: 'group',\n ...focusWithinProps,\n style: props.style,\n 'aria-disabled': state.disabled \|\| undefined,\n onKeyDown: (e) => {\n if (!onlyTime && e.altKey && (e.key === 'ArrowDown' \|\| e.key === 'ArrowUp')) {\n e.preventDefault();\n e.stopPropagation();\n state.setOpen(true, 'ShortcutKeyDown');\n }\n },\n },\n fieldProps: mergeProps(\n inputProps,\n state.dateFieldState.isEmpty && !isActive && props.placeholder\n ? {value: ''}\n : undefined,\n {\n controlRef: handleRef,\n controlProps: {role: 'combobox', 'aria-expanded': state.isOpen},\n },\n ),\n calendarButtonProps: {\n ref: calendarButtonRef,\n size: getButtonSizeForInput(props.size),\n disabled: state.disabled,\n 'aria-label': i18n('Calendar'),\n 'aria-haspopup': 'dialog',\n 'aria-expanded': state.isOpen,\n view: 'flat-secondary',\n onClick: () => {\n setActive(true);\n state.setOpen(!state.isOpen, 'TriggerButtonClick');\n },\n },\n popupProps: {\n open: state.isOpen,\n onOpenChange: (open, e, reason) => {\n if (!open) {\n if (reason === 'escape-key') {\n state.setOpen(false, 'EscapeKeyDown');\n focusInput();\n } else if (reason === 'outside-press') {\n if (!e?.target \|\| !calendarButtonRef.current?.contains(e.target as Node)) {\n state.setOpen(false, 'ClickOutside');\n }\n\n if (e?.target && groupRef.current?.contains(e.target as Node)) {\n focusInput();\n }\n }\n }\n },\n onTransitionOutComplete: () => {\n setFocusedDate(\n isDateTime(state.dateFieldState.displayValue)\n ? state.dateFieldState.displayValue\n : state.dateFieldState.displayValue.start,\n );\n },\n modal: !props.disableFocusTrap,\n disablePortal: props.disablePortal,\n placement: props.popupPlacement,\n offset: props.popupOffset,\n className: props.popupClassName,\n style: props.popupStyle,\n },\n calendarProps: {\n ref: calendarRef,\n autoFocus: true,\n size: props.size === 's' ? 'm' : props.size,\n disabled: props.disabled,\n readOnly: props.readOnly,\n onUpdate: (d) => {\n state.setDateValue(d);\n if (!state.formatInfo.hasTime) {\n focusInput();\n }\n },\n value: state.dateFieldState.displayValue,\n minValue: props.minValue,\n maxValue: props.maxValue,\n isDateUnavailable: props.isDateUnavailable,\n timeZone: state.timeZone,\n focusedValue: focusedDate,\n onFocusUpdate: setFocusedDate,\n modes: calendarModes,\n },\n timeInputProps: {\n value: state.timeValue,\n placeholderValue: getDateTimeValue(state.dateFieldState.displayValue),\n onUpdate: state.setTimeValue,\n format: state.timeFormat,\n readOnly: state.readOnly,\n disabled: state.disabled,\n timeZone: state.timeZone,\n hasClear: props.hasClear,\n size: props.size,\n },\n };\n}\n"]}

package/dist/esm/components/DatePicker/i18n/index.d.ts CHANGED Viewed

@@ -1 +1,5 @@
-export declare const i18n: (key: "Calendar", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const i18n: ((key: "Calendar", params?: import("@gravity-ui/i18n").Params) => string) & {
+    keysetData: {
+        "g-date-date-picker": Record<"Calendar", import("@gravity-ui/i18n").KeyData>;
+    };
+};

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

@@ -15,11 +15,11 @@ import "./RangeDatePicker.css";
 const b = block('range-date-picker');
 export function RangeDatePicker(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    const anchorRef = React.useRef(null);
+    const [anchor, setAnchor] = React.useState(null);
     const state = useRangeDatePickerState(props);
     const { groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps } = useDatePickerProps(state, props);
     const isOnlyTime = state.formatInfo.hasTime && !state.formatInfo.hasDate;
-    return (_jsxs("div", Object.assign({ className: b(null, className) }, groupProps, { children: [!isOnlyTime && (_jsx("div", { ref: anchorRef, className: b('popup-anchor'), children: _jsx(Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: _jsxs("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(Object.assign(Object.assign({}, calendarProps), { value: state.value }))) : (_jsx(RangeCalendar, Object.assign({}, calendarProps, { value: state.value }))), state.formatInfo.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(RangeDateField, Object.assign({}, timeInputProps)) }))] }) })) })), _jsx(TextInput, Object.assign({}, fieldProps, { className: b('field'), endContent: _jsxs(React.Fragment, { children: [!isOnlyTime && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), isOnlyTime && (_jsx(StubButton, { size: calendarButtonProps.size, icon: ClockIcon }))] }) })), _jsx(HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
+    return (_jsxs("div", Object.assign({ className: b(null, className) }, groupProps, { children: [!isOnlyTime && (_jsx("div", { ref: setAnchor, className: b('popup-anchor'), children: _jsx(Popup, Object.assign({ anchorElement: anchor }, popupProps, { children: _jsxs("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(Object.assign(Object.assign({}, calendarProps), { value: state.value }))) : (_jsx(RangeCalendar, Object.assign({}, calendarProps, { value: state.value }))), state.formatInfo.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(RangeDateField, Object.assign({}, timeInputProps)) }))] }) })) })), _jsx(TextInput, Object.assign({}, fieldProps, { className: b('field'), endContent: _jsxs(React.Fragment, { children: [!isOnlyTime && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), isOnlyTime && (_jsx(StubButton, { size: calendarButtonProps.size, icon: ClockIcon }))] }) })), _jsx(HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
                     state.dateFieldState.setDate(v);
                 }, value: state.value, toStringValue: (v) => (v ? v.start.toISOString() : ''), disabled: state.disabled }), _jsx(HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => (v ? v.end.toISOString() : ''), disabled: state.disabled })] })));
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RangeDatePicker.js","sourceRoot":"../../../../src","sources":["components/RangeDatePicker/RangeDatePicker.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,QAAQ,IAAI,YAAY,EAAE,KAAK,IAAI,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAC,KAAK,EAAC,0BAAuB;AACrC,OAAO,EAAC,aAAa,EAAC,6BAAoB;AAC1C,OAAO,EAAC,kBAAkB,EAAC,+BAAsB;AAEjD,OAAO,EAAC,UAAU,EAAC,oCAAiC;AACpD,OAAO,EAAC,WAAW,EAAC,sCAAmC;AACvD,OAAO,EAAC,cAAc,EAAC,mCAA0B;AAGjD,OAAO,EAAC,uBAAuB,EAAC,2CAAwC;AAExE,+BAAgC;AAEhC,MAAM,CAAC,GAAG,KAAK,CAAC,mBAAmB,CAAC,CAAC;AAIrC,MAAM,UAAU,eAAe,CAAC,EAA2C;QAA3C,EAAC,SAAS,OAAiC,EAA5B,KAAK,cAApB,aAAqB,CAAD;IAChD,MAAM,SAAS,GAAG,KAAK,CAAC,~~MAAM~~,~~CAAiB~~,IAAI,CAAC,CAAC;~~IAErD~~,MAAM,KAAK,GAAG,uBAAuB,CAAC,KAAK,CAAC,CAAC;IAE7C,MAAM,EAAC,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAE,UAAU,EAAE,aAAa,EAAE,cAAc,EAAC,GAC1F,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAErC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC;IAEzE,OAAO,CACH,6BAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,IAAM,UAAU,eAC7C,CAAC,UAAU,IAAI,CACZ,cAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,YAC7C,KAAC,KAAK,kBAAC,~~SAAS~~,EAAE,~~SAAS~~,IAAM,UAAU,~~cACvC~~,eAAK,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,aAC7B,OAAO,KAAK,CAAC,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,CACpC,KAAK,CAAC,QAAQ,iCAAK,aAAa,KAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAAE,CACzD,CAAC,CAAC,CAAC,CACA,KAAC,aAAa,oBAAK,aAAa,IAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,CAC3D,EACA,KAAK,CAAC,UAAU,CAAC,OAAO,IAAI,CACzB,cAAK,SAAS,EAAE,CAAC,CAAC,oBAAoB,CAAC,YACnC,KAAC,cAAc,oBAAK,cAAc,EAAI,GACpC,CACT,IACC,IACF,GACN,CACT,EACD,KAAC,SAAS,oBACF,UAAU,IACd,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,UAAU,EACN,MAAC,KAAK,CAAC,QAAQ,eACV,CAAC,UAAU,IAAI,CACZ,KAAC,MAAM,oBAAK,mBAAmB,cAC3B,KAAC,IAAI,IAAC,IAAI,EAAE,YAAY,GAAI,IACvB,CACZ,EACA,UAAU,IAAI,CACX,KAAC,UAAU,IAAC,IAAI,EAAE,mBAAmB,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,GAAI,CAClE,IACY,IAEvB,EACF,KAAC,WAAW,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACX,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;gBACpC,CAAC,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACtD,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B,EACF,KAAC,WAAW,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACpD,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B,KACA,CACT,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {Calendar as CalendarIcon, Clock as ClockIcon} from '@gravity-ui/icons';\nimport {Button, Icon, Popup, TextInput} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {RangeCalendar} from '../Calendar';\nimport {useDatePickerProps} from '../DatePicker';\nimport type {DatePickerProps} from '../DatePicker';\nimport {StubButton} from '../DatePicker/StubButton';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\nimport {RangeDateField} from '../RangeDateField';\nimport type {RangeValue} from '../types';\n\nimport {useRangeDatePickerState} from './hooks/useRangeDatePickerState';\n\nimport './RangeDatePicker.scss';\n\nconst b = block('range-date-picker');\n\nexport type RangeDatePickerProps = DatePickerProps<RangeValue<DateTime>>;\n\nexport function RangeDatePicker({className, ...props}: RangeDatePickerProps) {\n const ~~anchorRef~~ = React.~~useRef~~<HTMLDivElement>(null);\n\n const state = useRangeDatePickerState(props);\n\n const {groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps} =\n useDatePickerProps(state, props);\n\n const isOnlyTime = state.formatInfo.hasTime && !state.formatInfo.hasDate;\n\n return (\n <div className={b(null, className)} {...groupProps}>\n {!isOnlyTime && (\n <div ref={~~anchorRef~~} className={b('popup-anchor')}>\n <Popup ~~anchorRef~~={~~anchorRef~~} {...popupProps}>\n <div className={b('popup-content')}>\n {typeof props.children === 'function' ? (\n props.children({...calendarProps, value: state.value})\n ) : (\n <RangeCalendar {...calendarProps} value={state.value} />\n )}\n {state.formatInfo.hasTime && (\n <div className={b('time-field-wrapper')}>\n <RangeDateField {...timeInputProps} />\n </div>\n )}\n </div>\n </Popup>\n </div>\n )}\n <TextInput\n {...fieldProps}\n className={b('field')}\n endContent={\n <React.Fragment>\n {!isOnlyTime && (\n <Button {...calendarButtonProps}>\n <Icon data={CalendarIcon} />\n </Button>\n )}\n {isOnlyTime && (\n <StubButton size={calendarButtonProps.size} icon={ClockIcon} />\n )}\n </React.Fragment>\n }\n />\n <HiddenInput\n name={props.name}\n form={props.form}\n onReset={(v) => {\n state.dateFieldState.setDate(v);\n }}\n value={state.value}\n toStringValue={(v) => (v ? v.start.toISOString() : '')}\n disabled={state.disabled}\n />\n <HiddenInput\n name={props.name}\n form={props.form}\n value={state.value}\n toStringValue={(v) => (v ? v.end.toISOString() : '')}\n disabled={state.disabled}\n />\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"RangeDatePicker.js","sourceRoot":"../../../../src","sources":["components/RangeDatePicker/RangeDatePicker.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 {Calendar as CalendarIcon, Clock as ClockIcon} from '@gravity-ui/icons';\nimport {Button, Icon, Popup, TextInput} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {RangeCalendar} from '../Calendar';\nimport {useDatePickerProps} from '../DatePicker';\nimport type {DatePickerProps} from '../DatePicker';\nimport {StubButton} from '../DatePicker/StubButton';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\nimport {RangeDateField} from '../RangeDateField';\nimport type {RangeValue} from '../types';\n\nimport {useRangeDatePickerState} from './hooks/useRangeDatePickerState';\n\nimport './RangeDatePicker.scss';\n\nconst b = block('range-date-picker');\n\nexport type RangeDatePickerProps = DatePickerProps<RangeValue<DateTime>>;\n\nexport function RangeDatePicker({className, ...props}: RangeDatePickerProps) {\n const [anchor, setAnchor] = React.useState<HTMLDivElement \| null>(null);\n\n const state = useRangeDatePickerState(props);\n\n const {groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps} =\n useDatePickerProps(state, props);\n\n const isOnlyTime = state.formatInfo.hasTime && !state.formatInfo.hasDate;\n\n return (\n <div className={b(null, className)} {...groupProps}>\n {!isOnlyTime && (\n <div ref={setAnchor} className={b('popup-anchor')}>\n <Popup anchorElement={anchor} {...popupProps}>\n <div className={b('popup-content')}>\n {typeof props.children === 'function' ? (\n props.children({...calendarProps, value: state.value})\n ) : (\n <RangeCalendar {...calendarProps} value={state.value} />\n )}\n {state.formatInfo.hasTime && (\n <div className={b('time-field-wrapper')}>\n <RangeDateField {...timeInputProps} />\n </div>\n )}\n </div>\n </Popup>\n </div>\n )}\n <TextInput\n {...fieldProps}\n className={b('field')}\n endContent={\n <React.Fragment>\n {!isOnlyTime && (\n <Button {...calendarButtonProps}>\n <Icon data={CalendarIcon} />\n </Button>\n )}\n {isOnlyTime && (\n <StubButton size={calendarButtonProps.size} icon={ClockIcon} />\n )}\n </React.Fragment>\n }\n />\n <HiddenInput\n name={props.name}\n form={props.form}\n onReset={(v) => {\n state.dateFieldState.setDate(v);\n }}\n value={state.value}\n toStringValue={(v) => (v ? v.start.toISOString() : '')}\n disabled={state.disabled}\n />\n <HiddenInput\n name={props.name}\n form={props.form}\n value={state.value}\n toStringValue={(v) => (v ? v.end.toISOString() : '')}\n disabled={state.disabled}\n />\n </div>\n );\n}\n"]}

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

@@ -35,10 +35,10 @@ export function RangeDateSelection(props) {
                             state.startDragging();
                             state.scale(0.5);
                             state.endDragging();
-                        }, extraProps: { 'aria-label': i18n('Decrease range') }, children: _jsx(Icon, { data: Minus }) }), _jsx(Button, { view: "flat-secondary", size: "xs", onClick: () => {
+                        }, "aria-label": i18n('Decrease range'), children: _jsx(Icon, { data: Minus }) }), _jsx(Button, { view: "flat-secondary", size: "xs", onClick: () => {
                             state.startDragging();
                             state.scale(1.5);
                             state.endDragging();
-                        }, extraProps: { 'aria-label': i18n('Increase range') }, children: _jsx(Icon, { data: Plus }) })] })) : null] })));
+                        }, "aria-label": i18n('Increase range'), children: _jsx(Icon, { data: Plus }) })] })) : null] })));
 }
 //# sourceMappingURL=RangeDateSelection.js.map