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

@gravity-ui/date-components 3.4.1 → 4.0.0

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

Files changed (407) hide show

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

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

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

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

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sourceRoot":"../../../../../src","sources":["components/CalendarView/hooks/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {DateTime} from '@gravity-ui/date-utils';\n\nimport type {InputBase, RangeValue} from '../../types';\n\nexport type CalendarLayout = 'days' \| 'months' \| 'quarters' \| 'years';\n\nexport interface CalendarStateOptionsBase extends InputBase {\n /** The minimum allowed date that a user may select. /\n minValue?: DateTime;\n /* The maximum allowed date that a user may select. /\n maxValue?: DateTime;\n /* Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. /\n isDateUnavailable?: (date: DateTime) => boolean;\n /* Callback that is called for each date of the calendar. If it returns true, then the date is weekend. /\n isWeekend?: (date: DateTime) => boolean;\n /\n Which timezone use to show values. Example: 'default', 'system', 'Europe/Amsterdam'.\n * @default The timezone of the `value` or `defaultValue` or `focusedValue` or `defaultFocusedValue`, 'default' otherwise.\n /\n timeZone?: string;\n /\n Whether to automatically focus the calendar when it mounts.\n * @default false\n /\n autoFocus?: boolean;\n /* Controls the currently focused date within the calendar. /\n focusedValue?: DateTime \| null;\n /* The date that is focused when the calendar first mounts (uncontrolled). /\n defaultFocusedValue?: DateTime;\n /* Handler that is called when the focused date changes. /\n onFocusUpdate?: (date: DateTime) => void;\n /* Controls what to show in calendar (days, months or years) /\n mode?: CalendarLayout;\n /* Initial mode to show in calendar (days, months or years) /\n defaultMode?: CalendarLayout;\n /* Handler that is called when the mode changes /\n onUpdateMode?: (mode: CalendarLayout) => void;\n /* Controls which modes to use /\n modes?: Partial<Record<CalendarLayout, boolean>>;\n}\n\ninterface CalendarStateBase {\n /* Whether the calendar is disabled. /\n readonly disabled?: boolean;\n /* Whether the calendar is in a read only state. /\n readonly readOnly?: boolean;\n /* Which timezone use to show values. /\n readonly timeZone: string;\n /* The minimum allowed date that a user may select. /\n readonly minValue?: DateTime;\n /* The maximum allowed date that a user may select. /\n readonly maxValue?: DateTime;\n /* The currently focused date. /\n readonly focusedDate: DateTime;\n /* Sets the focused date. /\n setFocusedDate: (date: DateTime) => void;\n /* Selects the currently focused date. /\n selectFocusedDate: () => void;\n /* Selects the given date. /\n selectDate: (date: DateTime, force?: boolean) => void;\n /* Moves focus to the next calendar date. /\n focusNextCell: () => void;\n /* Moves focus to the previous calendar date. /\n focusPreviousCell: () => void;\n /* Moves focus to the next row of dates, e.g. the next week. /\n focusNextRow: () => void;\n /* Moves focus to the previous row of dates, e.g. the previous work. /\n focusPreviousRow: () => void;\n /\n Moves focus to the next page of dates, e.g. the next month.\n * If the `larger` option is `true`, the focus is moved by the next larger unit.\n * For example, if days are displayed, then focus moves to the next year.\n /\n focusNextPage: (larger?: boolean) => void;\n /\n Moves focus to the previous page of dates, e.g. the previous month.\n * If the `larger` option is `true`, the focus is moved by the next larger unit.\n * For example, if days are displayed, then focus moves to the previous year.\n /\n focusPreviousPage: (larger?: boolean) => void;\n /* Moves focus to the start of the current section of dates, e.g. the start of the current month. /\n focusSectionStart: () => void;\n /* Moves focus to the end of the current section of dates, e.g. the end of the current month month. /\n focusSectionEnd: () => void;\n /* Switches to more detailed layout. /\n zoomIn: () => void;\n /* Switches to less detailed layout. /\n zoomOut: () => void;\n /* Whether focus is currently within the calendar. /\n readonly isFocused: boolean;\n /* Sets whether focus is currently within the calendar. /\n setFocused: (isFocused: boolean) => void;\n /* Returns whether the given date is invalid according to the `minValue` and `maxValue` props. /\n isInvalid: (date: DateTime) => boolean;\n /* Returns whether the previous page is allowed to be selected according to the `minValue` prop. /\n isPreviousPageInvalid: () => boolean;\n /* Returns whether the next page is allowed to be selected according to the `maxValue` prop. /\n isNextPageInvalid: () => boolean;\n /* Returns whether the given date is currently selected. /\n isSelected: (date: DateTime) => boolean;\n /* Returns whether the given date is unavailable according to the `isDateUnavailable` prop. /\n isCellUnavailable: (date: DateTime) => boolean;\n /* Returns whether the given date is currently focused. /\n isCellFocused: (date: DateTime) => boolean;\n /* Returns whether the given date is disabled according to the `minValue, `maxValue`, and `isDisabled` props. /\n isCellDisabled: (date: DateTime) => boolean;\n /* Returns whether the given date is weekend /\n isWeekend: (date: DateTime) => boolean;\n /* Returns whether the given date is in current period /\n isCurrent: (date: DateTime) => boolean;\n /* Current calendar layout /\n readonly mode: CalendarLayout;\n /* Sets calendar layout /\n setMode: (mode: CalendarLayout) => void;\n readonly availableModes: CalendarLayout[];\n readonly startDate: DateTime;\n readonly endDate: DateTime;\n}\n\nexport interface CalendarState extends CalendarStateBase {\n /* The currently selected date. /\n readonly value: ~~DateTime \| null;\~~n /* Sets the currently selected date. /\n setValue: (value: DateTime) => void;\n}\n\nexport interface RangeCalendarState extends CalendarStateBase {\n /* The currently selected range. /\n readonly value: RangeValue<DateTime> \| null;\n /* Sets the currently selected range. /\n setValue: (value: RangeValue<DateTime>) => void;\n /* The current anchor date that the user clicked on to begin range selection. /\n readonly anchorDate: DateTime \| undefined;\n /* Sets the anchor date that the user clicked on to begin range selection. /\n setAnchorDate: (date: DateTime \| undefined) => void;\n /* The currently highlighted date range. /\n readonly highlightedRange: RangeValue<DateTime> \| undefined;\n /* Highlights the given date during selection, e.g. by hovering. */\n highlightDate: (date: DateTime) => void;\n}\n"]}
1	+ {"version":3,"file":"types.js","sourceRoot":"../../../../../src","sources":["components/CalendarView/hooks/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {DateTime} from '@gravity-ui/date-utils';\n\nimport type {InputBase, RangeValue} from '../../types';\n\nexport type CalendarLayout = 'days' \| 'months' \| 'quarters' \| 'years';\n\nexport interface CalendarStateOptionsBase extends InputBase {\n /** The minimum allowed date that a user may select. /\n minValue?: DateTime;\n /* The maximum allowed date that a user may select. /\n maxValue?: DateTime;\n /* Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. /\n isDateUnavailable?: (date: DateTime) => boolean;\n /* Callback that is called for each date of the calendar. If it returns true, then the date is weekend. /\n isWeekend?: (date: DateTime) => boolean;\n /\n Which timezone use to show values. Example: 'default', 'system', 'Europe/Amsterdam'.\n * @default The timezone of the `value` or `defaultValue` or `focusedValue` or `defaultFocusedValue`, 'default' otherwise.\n /\n timeZone?: string;\n /\n Whether to automatically focus the calendar when it mounts.\n * @default false\n /\n autoFocus?: boolean;\n /* Controls the currently focused date within the calendar. /\n focusedValue?: DateTime \| null;\n /* The date that is focused when the calendar first mounts (uncontrolled). /\n defaultFocusedValue?: DateTime;\n /* Handler that is called when the focused date changes. /\n onFocusUpdate?: (date: DateTime) => void;\n /* Controls what to show in calendar (days, months or years) /\n mode?: CalendarLayout;\n /* Initial mode to show in calendar (days, months or years) /\n defaultMode?: CalendarLayout;\n /* Handler that is called when the mode changes /\n onUpdateMode?: (mode: CalendarLayout) => void;\n /* Controls which modes to use /\n modes?: Partial<Record<CalendarLayout, boolean>>;\n}\n\ninterface CalendarStateBase {\n /* Whether the calendar is disabled. /\n readonly disabled?: boolean;\n /* Whether the calendar is in a read only state. /\n readonly readOnly?: boolean;\n /* Which timezone use to show values. /\n readonly timeZone: string;\n /* The minimum allowed date that a user may select. /\n readonly minValue?: DateTime;\n /* The maximum allowed date that a user may select. /\n readonly maxValue?: DateTime;\n /* The currently focused date. /\n readonly focusedDate: DateTime;\n /* Sets the focused date. /\n setFocusedDate: (date: DateTime) => void;\n /* Selects the currently focused date. /\n selectFocusedDate: () => void;\n /* Selects the given date. /\n selectDate: (date: DateTime, force?: boolean) => void;\n /* Moves focus to the next calendar date. /\n focusNextCell: () => void;\n /* Moves focus to the previous calendar date. /\n focusPreviousCell: () => void;\n /* Moves focus to the next row of dates, e.g. the next week. /\n focusNextRow: () => void;\n /* Moves focus to the previous row of dates, e.g. the previous work. /\n focusPreviousRow: () => void;\n /\n Moves focus to the next page of dates, e.g. the next month.\n * If the `larger` option is `true`, the focus is moved by the next larger unit.\n * For example, if days are displayed, then focus moves to the next year.\n /\n focusNextPage: (larger?: boolean) => void;\n /\n Moves focus to the previous page of dates, e.g. the previous month.\n * If the `larger` option is `true`, the focus is moved by the next larger unit.\n * For example, if days are displayed, then focus moves to the previous year.\n /\n focusPreviousPage: (larger?: boolean) => void;\n /* Moves focus to the start of the current section of dates, e.g. the start of the current month. /\n focusSectionStart: () => void;\n /* Moves focus to the end of the current section of dates, e.g. the end of the current month month. /\n focusSectionEnd: () => void;\n /* Switches to more detailed layout. /\n zoomIn: () => void;\n /* Switches to less detailed layout. /\n zoomOut: () => void;\n /* Whether focus is currently within the calendar. /\n readonly isFocused: boolean;\n /* Sets whether focus is currently within the calendar. /\n setFocused: (isFocused: boolean) => void;\n /* Returns whether the given date is invalid according to the `minValue` and `maxValue` props. /\n isInvalid: (date: DateTime) => boolean;\n /* Returns whether the previous page is allowed to be selected according to the `minValue` prop. /\n isPreviousPageInvalid: () => boolean;\n /* Returns whether the next page is allowed to be selected according to the `maxValue` prop. /\n isNextPageInvalid: () => boolean;\n /* Returns whether the given date is currently selected. /\n isSelected: (date: DateTime) => boolean;\n /* Returns whether the given date is unavailable according to the `isDateUnavailable` prop. /\n isCellUnavailable: (date: DateTime) => boolean;\n /* Returns whether the given date is currently focused. /\n isCellFocused: (date: DateTime) => boolean;\n /* Returns whether the given date is disabled according to the `minValue, `maxValue`, and `isDisabled` props. /\n isCellDisabled: (date: DateTime) => boolean;\n /* Returns whether the given date is weekend /\n isWeekend: (date: DateTime) => boolean;\n /* Returns whether the given date is in current period /\n isCurrent: (date: DateTime) => boolean;\n /* Current calendar layout /\n readonly mode: CalendarLayout;\n /* Sets calendar layout /\n setMode: (mode: CalendarLayout) => void;\n readonly availableModes: CalendarLayout[];\n readonly startDate: DateTime;\n readonly endDate: DateTime;\n}\n\nexport type SelectionMode = 'single' \| 'multiple';\nexport type CalendarValueType<M extends SelectionMode = 'single'> = M extends 'single'\n ? DateTime \| null\n : DateTime[];\n\nexport interface CalendarState<M extends SelectionMode = 'single'> extends CalendarStateBase {\n /* The currently selected date. /\n readonly value: CalendarValueType<M>;\n /* Sets the currently selected date. /\n setValue: (value: DateTime \| DateTime[] \| null) => void;\n}\n\nexport interface RangeCalendarState extends CalendarStateBase {\n /* The currently selected range. /\n readonly value: RangeValue<DateTime> \| null;\n /* Sets the currently selected range. /\n setValue: (value: RangeValue<DateTime>) => void;\n /* The current anchor date that the user clicked on to begin range selection. /\n readonly anchorDate: DateTime \| undefined;\n /* Sets the anchor date that the user clicked on to begin range selection. /\n setAnchorDate: (date: DateTime \| undefined) => void;\n /* The currently highlighted date range. /\n readonly highlightedRange: RangeValue<DateTime> \| undefined;\n /* Highlights the given date during selection, e.g. by hovering. */\n highlightDate: (date: DateTime) => void;\n}\n"]}

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

@@ -6,9 +6,8 @@ export function useCalendarCellProps(date, state) {
     const { lang } = useLang();
     const isFocused = state.isCellFocused(date);
     React.useEffect(() => {
-        var _a;
         if (isFocused) {
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+            ref.current?.focus({ preventScroll: true });
         }
     }, [isFocused]);
     const tabIndex = state.focusedDate.isSame(date, state.mode) ? 0 : -1;

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

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

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

@@ -7,9 +7,15 @@ export function useCalendarGridProps(state) {
         },
     });
     const { lang } = useLang();
-    const gridProps = Object.assign(Object.assign({ role: 'grid', 'aria-label': state.mode === 'years' || state.mode === 'quarters'
+    const gridProps = {
+        role: 'grid',
+        'aria-label': state.mode === 'years' || state.mode === 'quarters'
             ? `${state.startDate.year()} — ${state.endDate.year()}`
-            : formatDateTime(state.focusedDate, state.mode === 'days' ? 'MMMM YYYY' : 'YYYY', state.timeZone, lang), 'aria-disabled': state.disabled ? 'true' : undefined, 'aria-readonly': state.readOnly ? 'true' : undefined }, focusWithinProps), { onKeyDown: (e) => {
+            : formatDateTime(state.focusedDate, state.mode === 'days' ? 'MMMM YYYY' : 'YYYY', state.timeZone, lang),
+        'aria-disabled': state.disabled ? 'true' : undefined,
+        'aria-readonly': state.readOnly ? 'true' : undefined,
+        ...focusWithinProps,
+        onKeyDown: (e) => {
             if (e.key === 'ArrowRight') {
                 e.preventDefault();
                 state.focusNextCell();
@@ -54,7 +60,8 @@ export function useCalendarGridProps(state) {
                 e.preventDefault();
                 state.selectDate(state.focusedDate);
             }
-        } });
+        },
+    };
     return {
         gridProps,
     };

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

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

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

@@ -13,7 +13,13 @@ export function useCalendarProps(props, state) {
         onFocusWithin: props.onFocus,
         onBlurWithin: props.onBlur,
     });
-    const calendarProps = Object.assign(Object.assign(Object.assign({}, filterDOMProps(props, { labelable: true })), { role: 'group', 'aria-label': [props['aria-label'], title].filter(Boolean).join(', '), 'aria-disabled': state.disabled || undefined }), focusWithinProps);
+    const calendarProps = {
+        ...filterDOMProps(props, { labelable: true }),
+        role: 'group',
+        'aria-label': [props['aria-label'], title].filter(Boolean).join(', '),
+        'aria-disabled': state.disabled || undefined,
+        ...focusWithinProps,
+    };
     const modeIndex = state.availableModes.indexOf(state.mode);
     const isModeLast = modeIndex + 1 === state.availableModes.length;
     const isNextModeLast = modeIndex + 2 === state.availableModes.length;

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":"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","sourcesContent":["import React from 'react';\n\nimport {useFocusWithin, useLang} from '@gravity-ui/uikit';\nimport type {ButtonButtonProps} from '@gravity-ui/uikit';\n\nimport type {CalendarProps} from '../../Calendar/Calendar';\nimport {formatDateTime} from '../../utils/dates';\nimport {filterDOMProps} from '../../utils/filterDOMProps';\nimport {i18n} from '../i18n';\n\nimport type {CalendarLayout, CalendarState, RangeCalendarState} from './types';\n\nconst buttonDisabledClassName = 'yc-button_disabled g-button_disabled';\n\nexport function useCalendarProps(props: CalendarProps, state: CalendarState \| RangeCalendarState) {\n const {lang} = useLang();\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 lang,\n );\n\n const {focusWithinProps} = useFocusWithin({\n onFocusWithin: props.onFocus,\n onBlurWithin: props.onBlur,\n });\n\n const calendarProps: React.HTMLAttributes<HTMLElement> = {\n ...filterDOMProps(props, {labelable: true}),\n role: 'group',\n 'aria-label': [props['aria-label'], title].filter(Boolean).join(', '),\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 // Always set a tabIndex so that Safari allows focusing native buttons\n tabIndex: 0,\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': useAriaDescriptionForModeButton(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 {t} = i18n.useTranslation();\n\n const previousButtonProps: ButtonButtonProps = {\n // Always set a tabIndex so that Safari allows focusing native buttons\n tabIndex: 0,\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': t('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 // Always set a tabIndex so that Safari allows focusing native buttons\n tabIndex: 0,\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': t('Next'),\n 'aria-disabled': previousDisabled ? 'true' : undefined,\n };\n\n return {\n calendarProps,\n modeButtonProps,\n nextButtonProps,\n previousButtonProps,\n };\n}\n\nfunction useAriaDescriptionForModeButton(mode: CalendarLayout, availableModes: CalendarLayout[]) {\n const {t} = i18n.useTranslation();\n\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: t('Switch to months view'),\n quarters: t('Switch to quarters view'),\n years: t('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, useLang} from '@gravity-ui/uikit';\nimport type {ButtonButtonProps} from '@gravity-ui/uikit';\n\nimport type {CalendarProps} from '../../Calendar/Calendar';\nimport {formatDateTime} from '../../utils/dates';\nimport {filterDOMProps} from '../../utils/filterDOMProps';\nimport {i18n} from '../i18n';\n\nimport type {CalendarLayout, CalendarState, RangeCalendarState} from './types';\n\nconst buttonDisabledClassName = 'yc-button_disabled g-button_disabled';\n\nexport function useCalendarProps(props: CalendarProps, state: CalendarState \| RangeCalendarState) {\n const {lang} = useLang();\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 lang,\n );\n\n const {focusWithinProps} = useFocusWithin({\n onFocusWithin: props.onFocus,\n onBlurWithin: props.onBlur,\n });\n\n const calendarProps: React.HTMLAttributes<HTMLElement> = {\n ...filterDOMProps(props, {labelable: true}),\n role: 'group',\n 'aria-label': [props['aria-label'], title].filter(Boolean).join(', '),\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 // Always set a tabIndex so that Safari allows focusing native buttons\n tabIndex: 0,\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': useAriaDescriptionForModeButton(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 {t} = i18n.useTranslation();\n\n const previousButtonProps: ButtonButtonProps = {\n // Always set a tabIndex so that Safari allows focusing native buttons\n tabIndex: 0,\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': t('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 // Always set a tabIndex so that Safari allows focusing native buttons\n tabIndex: 0,\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': t('Next'),\n 'aria-disabled': previousDisabled ? 'true' : undefined,\n };\n\n return {\n calendarProps,\n modeButtonProps,\n nextButtonProps,\n previousButtonProps,\n };\n}\n\nfunction useAriaDescriptionForModeButton(mode: CalendarLayout, availableModes: CalendarLayout[]) {\n const {t} = i18n.useTranslation();\n\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: t('Switch to months view'),\n quarters: t('Switch to quarters view'),\n years: t('Switch to years view'),\n };\n const nextMode = availableModes[nextModeIndex];\n return ariaLabelMap[nextMode];\n}\n"]}

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

@@ -1,7 +1,9 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { ValueBase } from "../../types/index.js";
-import type { CalendarState, CalendarStateOptionsBase } from "./types.js";
-export interface CalendarStateOptions<T = DateTime> extends ValueBase<T | null, T>, CalendarStateOptionsBase {
+import type { CalendarState, CalendarStateOptionsBase, CalendarValueType, SelectionMode } from "./types.js";
+export interface CalendarStateOptions<T = DateTime> extends ValueBase<T | null, Exclude<T, null>>, CalendarStateOptionsBase {
 }
 export type { CalendarState } from "./types.js";
-export declare function useCalendarState(props: CalendarStateOptions): CalendarState;
+export declare function useCalendarState<M extends SelectionMode = 'single'>(props: CalendarStateOptions<CalendarValueType<M>> & {
+    selectionMode?: M;
+}): CalendarState<M>;