@gravity-ui/date-components 3.2.4 → 3.3.0

package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.css.map

@@ -1 +1 @@
-{"version":3,"sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.scss","home/runner/work/date-components/date-components/node_modules/@gravity-ui/uikit/styles/mixins.scss"],"names":[],"mappings":"AAMI;EACI;;AAIA;ECmKJ;EACA;EACA;EACA;;ADlKI;EACI","sourcesContent":["@use '@gravity-ui/uikit/styles/mixins';\n@use '../../../variables';\n\n$block: '.#{variables.$ns}relative-range-date-picker-doc';\n\n#{$block} {\n    &__button {\n        --g-button-background-color-hover: transparent;\n    }\n\n    &__table {\n        &_size_xl {\n            @include mixins.text-body-2();\n        }\n\n        & > table {\n            width: 100%;\n        }\n    }\n}\n","@use 'sass:list';\n@use 'sass:selector';\n\n@mixin overflow-ellipsis($type: ellipsis) {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: $type;\n}\n\n@mixin button-reset() {\n    padding: 0;\n\n    font-family: var(--g-text-body-font-family);\n    font-size: inherit;\n    font-weight: var(--g-text-body-font-weight);\n\n    color: inherit;\n    background: none;\n    border: none;\n    outline: none;\n    cursor: pointer;\n}\n\n@mixin link-reset() {\n    color: inherit;\n    text-decoration: inherit;\n}\n\n@mixin expand-interactive-area($h: 4px, $v: $h) {\n    position: relative;\n\n    &::after {\n        content: '';\n        position: absolute;\n        inset: logical (-$v) (-$h);\n    }\n}\n\n@mixin max-height($height) {\n    max-height: $height;\n    overflow-y: auto;\n}\n\n@mixin max-text-width($width: 100%) {\n    @include overflow-ellipsis();\n\n    max-width: $width;\n}\n\n@mixin aspect-ratio($ratio) {\n    position: relative;\n\n    &::before {\n        display: block;\n        content: '';\n        width: 100%;\n        padding-block-start: $ratio * 100%;\n    }\n\n    > *:only-child {\n        position: absolute;\n        inset: 0;\n    }\n}\n\n@function get-pin-selector($mod, $selector, $append: true) {\n    @if $append {\n        @return selector.append($mod, $selector);\n    } @else {\n        @return list.join($mod, $selector, $separator: space);\n    }\n}\n\n@mixin pin($block, $selectors, $radius, $append: true) {\n    @each $selector in $selectors {\n        &#{get-pin-selector(#{$block}_pin_round-round, $selector, $append)} {\n            border-radius: $radius;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-brick, $selector, $append)} {\n            border-radius: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-clear, $selector, $append)} {\n            border-radius: 0;\n            border-inline: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_circle-circle, $selector, $append)} {\n            border-radius: 100px;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_round-brick, $selector, $append)} {\n            border-start-start-radius: $radius;\n            border-start-end-radius: 0;\n            border-end-start-radius: $radius;\n            border-end-end-radius: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-round, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: $radius;\n            border-end-start-radius: 0;\n            border-end-end-radius: $radius;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_round-clear, $selector, $append)} {\n            border-start-start-radius: $radius;\n            border-start-end-radius: 0;\n            border-end-start-radius: $radius;\n            border-end-end-radius: 0;\n            border-inline-end: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-round, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: $radius;\n            border-end-start-radius: 0;\n            border-end-end-radius: $radius;\n            border-inline-start: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-clear, $selector, $append)} {\n            border-radius: 0;\n            border-inline-end: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-brick, $selector, $append)} {\n            border-radius: 0;\n            border-inline-start: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_circle-brick, $selector, $append)} {\n            border-start-start-radius: 100px;\n            border-start-end-radius: 0;\n            border-end-start-radius: 100px;\n            border-end-end-radius: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-circle, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: 100px;\n            border-end-start-radius: 0;\n            border-end-end-radius: 100px;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_circle-clear, $selector, $append)} {\n            border-start-start-radius: 100px;\n            border-start-end-radius: 0;\n            border-end-start-radius: 100px;\n            border-end-end-radius: 0;\n            border-inline-end: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-circle, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: 100px;\n            border-end-start-radius: 0;\n            border-end-end-radius: 100px;\n            border-inline-start: 0;\n        }\n    }\n}\n\n// Typography\n\n@mixin text-body-1() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-1-font-size);\n    line-height: var(--g-text-body-1-line-height);\n}\n\n@mixin text-body-2() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-2-font-size);\n    line-height: var(--g-text-body-2-line-height);\n}\n\n@mixin text-body-3() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-3-font-size);\n    line-height: var(--g-text-body-3-line-height);\n}\n\n@mixin text-body-short() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-short-font-size);\n    line-height: var(--g-text-body-short-line-height);\n}\n\n@mixin text-caption-1() {\n    font-family: var(--g-text-caption-font-family);\n    font-weight: var(--g-text-caption-font-weight);\n    font-size: var(--g-text-caption-1-font-size);\n    line-height: var(--g-text-caption-1-line-height);\n}\n\n@mixin text-caption-2() {\n    font-family: var(--g-text-caption-font-family);\n    font-weight: var(--g-text-caption-font-weight);\n    font-size: var(--g-text-caption-2-font-size);\n    line-height: var(--g-text-caption-2-line-height);\n}\n\n@mixin text-header-1() {\n    font-family: var(--g-text-header-font-family);\n    font-weight: var(--g-text-header-font-weight);\n    font-size: var(--g-text-header-1-font-size);\n    line-height: var(--g-text-header-1-line-height);\n}\n\n@mixin text-header-2() {\n    font-family: var(--g-text-header-font-family);\n    font-weight: var(--g-text-header-font-weight);\n    font-size: var(--g-text-header-2-font-size);\n    line-height: var(--g-text-header-2-line-height);\n}\n\n@mixin text-subheader-1() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-1-font-size);\n    line-height: var(--g-text-subheader-1-line-height);\n}\n\n@mixin text-subheader-2() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-2-font-size);\n    line-height: var(--g-text-subheader-2-line-height);\n}\n\n@mixin text-subheader-3() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-3-font-size);\n    line-height: var(--g-text-subheader-3-line-height);\n}\n\n@mixin text-display-1() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-1-font-size);\n    line-height: var(--g-text-display-1-line-height);\n}\n\n@mixin text-display-2() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-2-font-size);\n    line-height: var(--g-text-display-2-line-height);\n}\n\n@mixin text-display-3() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-3-font-size);\n    line-height: var(--g-text-display-3-line-height);\n}\n\n@mixin text-display-4() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-4-font-size);\n    line-height: var(--g-text-display-4-line-height);\n}\n\n@mixin text-code-1() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-1-font-size);\n    line-height: var(--g-text-code-1-line-height);\n}\n\n@mixin text-code-2() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-2-font-size);\n    line-height: var(--g-text-code-2-line-height);\n}\n\n@mixin text-code-3() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-3-font-size);\n    line-height: var(--g-text-code-3-line-height);\n}\n\n@mixin text-code-inline-1() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-1-font-size);\n    line-height: var(--g-text-code-inline-1-line-height);\n}\n\n@mixin text-code-inline-2() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-2-font-size);\n    line-height: var(--g-text-code-inline-2-line-height);\n}\n\n@mixin text-code-inline-3() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-3-font-size);\n    line-height: var(--g-text-code-inline-3-line-height);\n}\n\n@mixin text-accent() {\n    font-weight: var(--g-text-accent-font-weight);\n}\n\n@mixin loading($loading-color-1: rgba(255, 255, 255, 0.3), $loading-color-2: transparent) {\n    background-image: repeating-linear-gradient(\n        -45deg,\n        $loading-color-1,\n        $loading-color-1 4px,\n        $loading-color-2 4px,\n        $loading-color-2 8px\n    );\n    background-size: 150%;\n    background-clip: padding-box;\n\n    // stylelint-disable-next-line no-unknown-animations\n    animation: g-loading-animation 0.5s linear infinite;\n}\n\n@mixin scrollbar() {\n    &::-webkit-scrollbar,\n    *::-webkit-scrollbar {\n        width: var(--g-scrollbar-width);\n        height: var(--g-scrollbar-width);\n        background: var(--g-color-scroll-track);\n    }\n\n    &::-webkit-scrollbar-track,\n    *::-webkit-scrollbar-track {\n        background: var(--g-color-scroll-track);\n    }\n\n    &::-webkit-scrollbar-corner,\n    *::-webkit-scrollbar-corner {\n        background: var(--g-color-scroll-corner);\n    }\n\n    &::-webkit-scrollbar-thumb,\n    *::-webkit-scrollbar-thumb {\n        background: var(--g-color-scroll-handle);\n    }\n\n    &::-webkit-scrollbar-thumb:hover,\n    *::-webkit-scrollbar-thumb:hover {\n        background: var(--g-color-scroll-handle-hover);\n    }\n}\n"],"file":"PickerDoc.css"}
+{"version":3,"sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.scss","home/runner/work/date-components/date-components/node_modules/@gravity-ui/uikit/styles/mixins.scss"],"names":[],"mappings":"AAMI;EACI;;AAIA;ECmKJ;EACA;EACA;EACA;;ADlKI;EACI","sourcesContent":["@use '@gravity-ui/uikit/styles/mixins';\n@use '../../../variables';\n\n$block: '.#{variables.$ns}relative-range-date-picker-doc';\n\n#{$block} {\n    &__button {\n        --g-button-background-color-hover: transparent;\n    }\n\n    &__table {\n        &_size_xl {\n            @include mixins.text-body-2();\n        }\n\n        & > table {\n            width: 100%;\n        }\n    }\n}\n","@use 'sass:list';\n@use 'sass:selector';\n\n@mixin overflow-ellipsis($type: ellipsis) {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: $type;\n}\n\n@mixin button-reset() {\n    padding: 0;\n\n    font-family: var(--g-text-body-font-family);\n    font-size: inherit;\n    font-weight: var(--g-text-body-font-weight);\n\n    color: inherit;\n    background: none;\n    border: none;\n    outline: none;\n    cursor: pointer;\n}\n\n@mixin link-reset() {\n    color: inherit;\n    text-decoration: inherit;\n}\n\n@mixin expand-interactive-area($h: 4px, $v: $h) {\n    position: relative;\n\n    &::after {\n        content: '';\n        position: absolute;\n        inset: logical (-$v) (-$h);\n    }\n}\n\n@mixin max-height($height) {\n    max-height: $height;\n    overflow-y: auto;\n}\n\n@mixin max-text-width($width: 100%) {\n    @include overflow-ellipsis();\n\n    max-width: $width;\n}\n\n@mixin aspect-ratio($ratio) {\n    position: relative;\n\n    &::before {\n        display: block;\n        content: '';\n        width: 100%;\n        padding-block-start: $ratio * 100%;\n    }\n\n    > *:only-child {\n        position: absolute;\n        inset: 0;\n    }\n}\n\n@function get-pin-selector($mod, $selector, $append: true) {\n    @if $append {\n        @return selector.append($mod, $selector);\n    } @else {\n        @return list.join($mod, $selector, $separator: space);\n    }\n}\n\n@mixin pin($block, $selectors, $radius, $append: true) {\n    @each $selector in $selectors {\n        @at-root #{get-pin-selector(#{$block}_pin_round-round, $selector, $append)} {\n            border-radius: $radius;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_brick-brick, $selector, $append)} {\n            border-radius: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_clear-clear, $selector, $append)} {\n            border-radius: 0;\n            border-inline: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_circle-circle, $selector, $append)} {\n            border-radius: 100px;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_round-brick, $selector, $append)} {\n            border-start-start-radius: $radius;\n            border-start-end-radius: 0;\n            border-end-start-radius: $radius;\n            border-end-end-radius: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_brick-round, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: $radius;\n            border-end-start-radius: 0;\n            border-end-end-radius: $radius;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_round-clear, $selector, $append)} {\n            border-start-start-radius: $radius;\n            border-start-end-radius: 0;\n            border-end-start-radius: $radius;\n            border-end-end-radius: 0;\n            border-inline-end: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_clear-round, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: $radius;\n            border-end-start-radius: 0;\n            border-end-end-radius: $radius;\n            border-inline-start: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_brick-clear, $selector, $append)} {\n            border-radius: 0;\n            border-inline-end: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_clear-brick, $selector, $append)} {\n            border-radius: 0;\n            border-inline-start: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_circle-brick, $selector, $append)} {\n            border-start-start-radius: 100px;\n            border-start-end-radius: 0;\n            border-end-start-radius: 100px;\n            border-end-end-radius: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_brick-circle, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: 100px;\n            border-end-start-radius: 0;\n            border-end-end-radius: 100px;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_circle-clear, $selector, $append)} {\n            border-start-start-radius: 100px;\n            border-start-end-radius: 0;\n            border-end-start-radius: 100px;\n            border-end-end-radius: 0;\n            border-inline-end: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_clear-circle, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: 100px;\n            border-end-start-radius: 0;\n            border-end-end-radius: 100px;\n            border-inline-start: 0;\n        }\n    }\n}\n\n// Typography\n\n@mixin text-body-1() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-1-font-size);\n    line-height: var(--g-text-body-1-line-height);\n}\n\n@mixin text-body-2() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-2-font-size);\n    line-height: var(--g-text-body-2-line-height);\n}\n\n@mixin text-body-3() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-3-font-size);\n    line-height: var(--g-text-body-3-line-height);\n}\n\n@mixin text-body-short() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-short-font-size);\n    line-height: var(--g-text-body-short-line-height);\n}\n\n@mixin text-caption-1() {\n    font-family: var(--g-text-caption-font-family);\n    font-weight: var(--g-text-caption-font-weight);\n    font-size: var(--g-text-caption-1-font-size);\n    line-height: var(--g-text-caption-1-line-height);\n}\n\n@mixin text-caption-2() {\n    font-family: var(--g-text-caption-font-family);\n    font-weight: var(--g-text-caption-font-weight);\n    font-size: var(--g-text-caption-2-font-size);\n    line-height: var(--g-text-caption-2-line-height);\n}\n\n@mixin text-header-1() {\n    font-family: var(--g-text-header-font-family);\n    font-weight: var(--g-text-header-font-weight);\n    font-size: var(--g-text-header-1-font-size);\n    line-height: var(--g-text-header-1-line-height);\n}\n\n@mixin text-header-2() {\n    font-family: var(--g-text-header-font-family);\n    font-weight: var(--g-text-header-font-weight);\n    font-size: var(--g-text-header-2-font-size);\n    line-height: var(--g-text-header-2-line-height);\n}\n\n@mixin text-subheader-1() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-1-font-size);\n    line-height: var(--g-text-subheader-1-line-height);\n}\n\n@mixin text-subheader-2() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-2-font-size);\n    line-height: var(--g-text-subheader-2-line-height);\n}\n\n@mixin text-subheader-3() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-3-font-size);\n    line-height: var(--g-text-subheader-3-line-height);\n}\n\n@mixin text-display-1() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-1-font-size);\n    line-height: var(--g-text-display-1-line-height);\n}\n\n@mixin text-display-2() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-2-font-size);\n    line-height: var(--g-text-display-2-line-height);\n}\n\n@mixin text-display-3() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-3-font-size);\n    line-height: var(--g-text-display-3-line-height);\n}\n\n@mixin text-display-4() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-4-font-size);\n    line-height: var(--g-text-display-4-line-height);\n}\n\n@mixin text-code-1() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-1-font-size);\n    line-height: var(--g-text-code-1-line-height);\n}\n\n@mixin text-code-2() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-2-font-size);\n    line-height: var(--g-text-code-2-line-height);\n}\n\n@mixin text-code-3() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-3-font-size);\n    line-height: var(--g-text-code-3-line-height);\n}\n\n@mixin text-code-inline-1() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-1-font-size);\n    line-height: var(--g-text-code-inline-1-line-height);\n}\n\n@mixin text-code-inline-2() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-2-font-size);\n    line-height: var(--g-text-code-inline-2-line-height);\n}\n\n@mixin text-code-inline-3() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-3-font-size);\n    line-height: var(--g-text-code-inline-3-line-height);\n}\n\n@mixin text-accent() {\n    font-weight: var(--g-text-accent-font-weight);\n}\n\n@mixin loading($loading-color-1: rgba(255, 255, 255, 0.3), $loading-color-2: transparent) {\n    background-image: repeating-linear-gradient(\n        -45deg,\n        $loading-color-1,\n        $loading-color-1 4px,\n        $loading-color-2 4px,\n        $loading-color-2 8px\n    );\n    background-size: 150%;\n    background-clip: padding-box;\n\n    // stylelint-disable-next-line no-unknown-animations\n    animation: g-loading-animation 0.5s linear infinite;\n\n    @media (prefers-reduced-motion: reduce) {\n        animation: none;\n    }\n}\n\n@mixin scrollbar() {\n    &::-webkit-scrollbar,\n    *::-webkit-scrollbar {\n        width: var(--g-scrollbar-width);\n        height: var(--g-scrollbar-width);\n        background: var(--g-color-scroll-track);\n    }\n\n    &::-webkit-scrollbar-track,\n    *::-webkit-scrollbar-track {\n        background: var(--g-color-scroll-track);\n    }\n\n    &::-webkit-scrollbar-corner,\n    *::-webkit-scrollbar-corner {\n        background: var(--g-color-scroll-corner);\n    }\n\n    &::-webkit-scrollbar-thumb,\n    *::-webkit-scrollbar-thumb {\n        background: var(--g-color-scroll-handle);\n    }\n\n    &::-webkit-scrollbar-thumb:hover,\n    *::-webkit-scrollbar-thumb:hover {\n        background: var(--g-color-scroll-handle-hover);\n    }\n}\n"],"file":"PickerDoc.css"}

package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.js

@@ -9,70 +9,62 @@ const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../../../utils/cn.js");
 const getButtonSizeForInput_1 = require("../../../utils/getButtonSizeForInput.js");
+const defaultPresets_1 = require("../Presets/defaultPresets.js");
 const i18n_1 = require("../Presets/i18n/index.js");
 require("./PickerDoc.css");
 const b = (0, cn_1.block)('relative-range-date-picker-doc');
 const data = [
     {
-        get title() {
-            return (0, i18n_1.i18n)('Last 5 minutes');
-        },
+        title: (0, jsx_runtime_1.jsx)(defaultPresets_1.PresetTitle, { title: "Last 5 minutes" }),
         from: 'now - 5m',
         to: 'now',
     },
     {
-        get title() {
-            return (0, i18n_1.i18n)('From start of day');
-        },
+        title: (0, jsx_runtime_1.jsx)(defaultPresets_1.PresetTitle, { title: "From start of day" }),
         from: 'now/d',
         to: 'now',
     },
     {
-        get title() {
-            return (0, i18n_1.i18n)('This week');
-        },
+        title: (0, jsx_runtime_1.jsx)(defaultPresets_1.PresetTitle, { title: "This week" }),
         from: 'now/w',
         to: 'now/w',
     },
     {
-        get title() {
-            return (0, i18n_1.i18n)('From start of week');
-        },
+        title: (0, jsx_runtime_1.jsx)(defaultPresets_1.PresetTitle, { title: "From start of week" }),
         from: 'now/w',
         to: 'now',
     },
     {
-        get title() {
-            return (0, i18n_1.i18n)('Previous month');
-        },
+        title: (0, jsx_runtime_1.jsx)(defaultPresets_1.PresetTitle, { title: "Previous month" }),
         from: 'now - 1M/M',
         to: 'now - 1M/M',
     },
 ];
 function DocContent({ size, docs, onStartUpdate, onEndUpdate }) {
     const isMobile = (0, uikit_1.useMobile)();
+    const { t } = i18n_1.i18n.useTranslation();
     const columns = react_1.default.useMemo(() => [
         {
             id: 'title',
             name: () => {
-                return (0, i18n_1.i18n)('Range');
+                return t('Range');
             },
         },
         {
             id: 'from',
             name: () => {
-                return (0, i18n_1.i18n)('From');
+                return t('From');
             },
             template: (item) => ((0, jsx_runtime_1.jsx)(uikit_1.Button, { size: isMobile ? 'l' : (0, getButtonSizeForInput_1.getButtonSizeForInput)(size), onClick: () => onStartUpdate(item.from), children: item.from })),
         },
         {
             id: 'to',
             name: () => {
-                return (0, i18n_1.i18n)('To');
+                return t('To');
             },
             template: (item) => ((0, jsx_runtime_1.jsx)(uikit_1.Button, { size: isMobile ? 'l' : (0, getButtonSizeForInput_1.getButtonSizeForInput)(size), onClick: () => onEndUpdate(item.to), children: item.to })),
         },
-    ], [isMobile, onEndUpdate, onStartUpdate, size]);
+    ], [isMobile, onEndUpdate, onStartUpdate, size, t]);
     return (0, jsx_runtime_1.jsx)(uikit_1.Table, { columns: columns, data: docs, className: b('table', { size }), wordWrap: true });
 }
 function DesktopDoc(_a) {

package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.js.map

@@ -1 +1 @@
-{"version":3,"file":"PickerDoc.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AAiKb,8BAYC;;;AA3KD,0DAA0B;AAE1B,6CAAiD;AACjD,6CAAiF;AAGjF,gDAA2C;AAC3C,mFAA2E;AAE3E,mDAAqC;AAErC,2BAA0B;AAE1B,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,gCAAgC,CAAC,CAAC;AAElD,MAAM,IAAI,GAAa;IACnB;QACI,IAAI,KAAK;YACL,OAAO,IAAA,WAAI,EAAC,gBAAgB,CAAC,CAAC;QAClC,CAAC;QACD,IAAI,EAAE,UAAU;QAChB,EAAE,EAAE,KAAK;KACZ;IACD;QACI,IAAI,KAAK;YACL,OAAO,IAAA,WAAI,EAAC,mBAAmB,CAAC,CAAC;QACrC,CAAC;QACD,IAAI,EAAE,OAAO;QACb,EAAE,EAAE,KAAK;KACZ;IACD;QACI,IAAI,KAAK;YACL,OAAO,IAAA,WAAI,EAAC,WAAW,CAAC,CAAC;QAC7B,CAAC;QACD,IAAI,EAAE,OAAO;QACb,EAAE,EAAE,OAAO;KACd;IACD;QACI,IAAI,KAAK;YACL,OAAO,IAAA,WAAI,EAAC,oBAAoB,CAAC,CAAC;QACtC,CAAC;QACD,IAAI,EAAE,OAAO;QACb,EAAE,EAAE,KAAK;KACZ;IACD;QACI,IAAI,KAAK;YACL,OAAO,IAAA,WAAI,EAAC,gBAAgB,CAAC,CAAC;QAClC,CAAC;QACD,IAAI,EAAE,YAAY;QAClB,EAAE,EAAE,YAAY;KACnB;CACJ,CAAC;AAMF,SAAS,UAAU,CAAC,EAAC,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,WAAW,EAAkB;IACzE,MAAM,QAAQ,GAAG,IAAA,iBAAS,GAAE,CAAC;IAE7B,MAAM,OAAO,GAAgC,eAAK,CAAC,OAAO,CACtD,GAAG,EAAE,CAAC;QACF;YACI,EAAE,EAAE,OAAO;YACX,IAAI,EAAE,GAAG,EAAE;gBACP,OAAO,IAAA,WAAI,EAAC,OAAO,CAAC,CAAC;YACzB,CAAC;SACJ;QACD;YACI,EAAE,EAAE,MAAM;YACV,IAAI,EAAE,GAAG,EAAE;gBACP,OAAO,IAAA,WAAI,EAAC,MAAM,CAAC,CAAC;YACxB,CAAC;YACD,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,uBAAC,cAAM,IACH,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAA,6CAAqB,EAAC,IAAI,CAAC,EAClD,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,YAEtC,IAAI,CAAC,IAAI,GACL,CACZ;SACJ;QACD;YACI,EAAE,EAAE,IAAI;YACR,IAAI,EAAE,GAAG,EAAE;gBACP,OAAO,IAAA,WAAI,EAAC,IAAI,CAAC,CAAC;YACtB,CAAC;YACD,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,uBAAC,cAAM,IACH,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAA,6CAAqB,EAAC,IAAI,CAAC,EAClD,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,YAElC,IAAI,CAAC,EAAE,GACH,CACZ;SACJ;KACJ,EACD,CAAC,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,IAAI,CAAC,CAC/C,CAAC;IAEF,OAAO,uBAAC,aAAK,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,IAAI,EAAC,CAAC,EAAE,QAAQ,SAAG,CAAC;AAC3F,CAAC;AAMD,SAAS,UAAU,CAAC,EAA4C;QAA5C,EAAC,SAAS,EAAE,IAAI,OAA4B,EAAvB,KAAK,sBAA1B,qBAA2B,CAAD;IAC1C,OAAO,CACH,uBAAC,eAAO,IACJ,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,EAClB,QAAQ,EAAE,KAAK,EACf,SAAS,EAAE,CAAC,aAAa,EAAE,YAAY,CAAC,EACxC,OAAO,EAAE,uBAAC,UAAU,kBAAC,IAAI,EAAE,IAAI,IAAM,KAAK,EAAI,YAE9C,uBAAC,cAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,EACjC,IAAI,EAAC,gBAAgB,EACrB,IAAI,EAAE,IAAA,6CAAqB,EAAC,IAAI,CAAC,YAEjC,uBAAC,YAAI,IAAC,IAAI,EAAE,sBAAc,GAAI,GACzB,GACH,CACb,CAAC;AACN,CAAC;AAMD,SAAS,SAAS,CAAC,EAAqC;QAArC,EAAC,SAAS,OAA2B,EAAtB,KAAK,sBAApB,aAAqB,CAAD;IACnC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,uBAAC,cAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,IAAI,EAAC,gBAAgB,EACrB,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,GAAG,EAAE;oBACV,OAAO,CAAC,IAAI,CAAC,CAAC;gBAClB,CAAC,YAED,uBAAC,YAAI,IAAC,IAAI,EAAE,sBAAc,GAAI,GACzB,EACT,uBAAC,aAAK,IAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,YAC/C,uBAAC,UAAU,oBAAK,KAAK,EAAI,GACrB,IACN,CACT,CAAC;AACN,CAAC;AAUD,SAAgB,SAAS,CAAC,EAAwC;QAAxC,EAAC,IAAI,GAAG,IAAI,OAA4B,EAAvB,KAAK,sBAAtB,QAAuB,CAAD;IAC5C,MAAM,QAAQ,GAAG,IAAA,iBAAS,GAAE,CAAC;IAE7B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC5C,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,uBAAC,SAAS,oBAAK,KAAK,IAAE,IAAI,EAAE,IAAI,IAAI,CAAC;IAChD,CAAC;IAED,OAAO,uBAAC,UAAU,oBAAK,KAAK,IAAE,IAAI,EAAE,IAAI,IAAI,CAAC;AACjD,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport {CircleQuestion} from '@gravity-ui/icons';\nimport {Button, Icon, Popover, Sheet, Table, useMobile} from '@gravity-ui/uikit';\nimport type {TableColumnConfig} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {getButtonSizeForInput} from '../../../utils/getButtonSizeForInput';\nimport type {Preset} from '../Presets/defaultPresets';\nimport {i18n} from '../Presets/i18n';\n\nimport './PickerDoc.scss';\n\nconst b = block('relative-range-date-picker-doc');\n\nconst data: Preset[] = [\n    {\n        get title() {\n            return i18n('Last 5 minutes');\n        },\n        from: 'now - 5m',\n        to: 'now',\n    },\n    {\n        get title() {\n            return i18n('From start of day');\n        },\n        from: 'now/d',\n        to: 'now',\n    },\n    {\n        get title() {\n            return i18n('This week');\n        },\n        from: 'now/w',\n        to: 'now/w',\n    },\n    {\n        get title() {\n            return i18n('From start of week');\n        },\n        from: 'now/w',\n        to: 'now',\n    },\n    {\n        get title() {\n            return i18n('Previous month');\n        },\n        from: 'now - 1M/M',\n        to: 'now - 1M/M',\n    },\n];\n\ninterface DocContentProps extends Omit<PresetsDocProps, 'docs' | 'className'> {\n    docs: Preset[];\n}\n\nfunction DocContent({size, docs, onStartUpdate, onEndUpdate}: DocContentProps) {\n    const isMobile = useMobile();\n\n    const columns: TableColumnConfig<Preset>[] = React.useMemo(\n        () => [\n            {\n                id: 'title',\n                name: () => {\n                    return i18n('Range');\n                },\n            },\n            {\n                id: 'from',\n                name: () => {\n                    return i18n('From');\n                },\n                template: (item) => (\n                    <Button\n                        size={isMobile ? 'l' : getButtonSizeForInput(size)}\n                        onClick={() => onStartUpdate(item.from)}\n                    >\n                        {item.from}\n                    </Button>\n                ),\n            },\n            {\n                id: 'to',\n                name: () => {\n                    return i18n('To');\n                },\n                template: (item) => (\n                    <Button\n                        size={isMobile ? 'l' : getButtonSizeForInput(size)}\n                        onClick={() => onEndUpdate(item.to)}\n                    >\n                        {item.to}\n                    </Button>\n                ),\n            },\n        ],\n        [isMobile, onEndUpdate, onStartUpdate, size],\n    );\n\n    return <Table columns={columns} data={docs} className={b('table', {size})} wordWrap />;\n}\n\ninterface DesktopDocProps extends Omit<PresetsDocProps, 'docs'> {\n    docs: Preset[];\n}\n\nfunction DesktopDoc({className, size, ...props}: DesktopDocProps) {\n    return (\n        <Popover\n            className={b(null)}\n            hasArrow={false}\n            placement={['right-start', 'left-start']}\n            content={<DocContent size={size} {...props} />}\n        >\n            <Button\n                className={b('button', className)}\n                view=\"flat-secondary\"\n                size={getButtonSizeForInput(size)}\n            >\n                <Icon data={CircleQuestion} />\n            </Button>\n        </Popover>\n    );\n}\n\ninterface MobileDocProps extends Omit<PresetsDocProps, 'docs'> {\n    docs: Preset[];\n}\n\nfunction MobileDoc({className, ...props}: MobileDocProps) {\n    const [open, setOpen] = React.useState(false);\n    return (\n        <div className={b(null, className)}>\n            <Button\n                className={b('button')}\n                view=\"flat-secondary\"\n                size=\"l\"\n                onClick={() => {\n                    setOpen(true);\n                }}\n            >\n                <Icon data={CircleQuestion} />\n            </Button>\n            <Sheet visible={open} onClose={() => setOpen(false)}>\n                <DocContent {...props} />\n            </Sheet>\n        </div>\n    );\n}\n\ninterface PresetsDocProps {\n    className?: string;\n    size?: 's' | 'm' | 'l' | 'xl';\n    docs?: Preset[];\n    onStartUpdate: (start: string) => void;\n    onEndUpdate: (end: string) => void;\n}\n\nexport function PickerDoc({docs = data, ...props}: PresetsDocProps) {\n    const isMobile = useMobile();\n\n    if (!Array.isArray(docs) || docs.length === 0) {\n        return null;\n    }\n\n    if (isMobile) {\n        return <MobileDoc {...props} docs={docs} />;\n    }\n\n    return <DesktopDoc {...props} docs={docs} />;\n}\n"]}
+{"version":3,"file":"PickerDoc.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport {CircleQuestion} from '@gravity-ui/icons';\nimport {Button, Icon, Popover, Sheet, Table, useMobile} from '@gravity-ui/uikit';\nimport type {TableColumnConfig} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {getButtonSizeForInput} from '../../../utils/getButtonSizeForInput';\nimport {PresetTitle} from '../Presets/defaultPresets';\nimport type {Preset} from '../Presets/defaultPresets';\nimport {i18n} from '../Presets/i18n';\n\nimport './PickerDoc.scss';\n\nconst b = block('relative-range-date-picker-doc');\n\nconst data: Preset[] = [\n    {\n        title: <PresetTitle title=\"Last 5 minutes\" />,\n        from: 'now - 5m',\n        to: 'now',\n    },\n    {\n        title: <PresetTitle title=\"From start of day\" />,\n        from: 'now/d',\n        to: 'now',\n    },\n    {\n        title: <PresetTitle title=\"This week\" />,\n        from: 'now/w',\n        to: 'now/w',\n    },\n    {\n        title: <PresetTitle title=\"From start of week\" />,\n        from: 'now/w',\n        to: 'now',\n    },\n    {\n        title: <PresetTitle title=\"Previous month\" />,\n        from: 'now - 1M/M',\n        to: 'now - 1M/M',\n    },\n];\n\ninterface DocContentProps extends Omit<PresetsDocProps, 'docs' | 'className'> {\n    docs: Preset[];\n}\n\nfunction DocContent({size, docs, onStartUpdate, onEndUpdate}: DocContentProps) {\n    const isMobile = useMobile();\n\n    const {t} = i18n.useTranslation();\n    const columns: TableColumnConfig<Preset>[] = React.useMemo(\n        () => [\n            {\n                id: 'title',\n                name: () => {\n                    return t('Range');\n                },\n            },\n            {\n                id: 'from',\n                name: () => {\n                    return t('From');\n                },\n                template: (item) => (\n                    <Button\n                        size={isMobile ? 'l' : getButtonSizeForInput(size)}\n                        onClick={() => onStartUpdate(item.from)}\n                    >\n                        {item.from}\n                    </Button>\n                ),\n            },\n            {\n                id: 'to',\n                name: () => {\n                    return t('To');\n                },\n                template: (item) => (\n                    <Button\n                        size={isMobile ? 'l' : getButtonSizeForInput(size)}\n                        onClick={() => onEndUpdate(item.to)}\n                    >\n                        {item.to}\n                    </Button>\n                ),\n            },\n        ],\n        [isMobile, onEndUpdate, onStartUpdate, size, t],\n    );\n\n    return <Table columns={columns} data={docs} className={b('table', {size})} wordWrap />;\n}\n\ninterface DesktopDocProps extends Omit<PresetsDocProps, 'docs'> {\n    docs: Preset[];\n}\n\nfunction DesktopDoc({className, size, ...props}: DesktopDocProps) {\n    return (\n        <Popover\n            className={b(null)}\n            hasArrow={false}\n            placement={['right-start', 'left-start']}\n            content={<DocContent size={size} {...props} />}\n        >\n            <Button\n                className={b('button', className)}\n                view=\"flat-secondary\"\n                size={getButtonSizeForInput(size)}\n            >\n                <Icon data={CircleQuestion} />\n            </Button>\n        </Popover>\n    );\n}\n\ninterface MobileDocProps extends Omit<PresetsDocProps, 'docs'> {\n    docs: Preset[];\n}\n\nfunction MobileDoc({className, ...props}: MobileDocProps) {\n    const [open, setOpen] = React.useState(false);\n    return (\n        <div className={b(null, className)}>\n            <Button\n                className={b('button')}\n                view=\"flat-secondary\"\n                size=\"l\"\n                onClick={() => {\n                    setOpen(true);\n                }}\n            >\n                <Icon data={CircleQuestion} />\n            </Button>\n            <Sheet visible={open} onClose={() => setOpen(false)}>\n                <DocContent {...props} />\n            </Sheet>\n        </div>\n    );\n}\n\ninterface PresetsDocProps {\n    className?: string;\n    size?: 's' | 'm' | 'l' | 'xl';\n    docs?: Preset[];\n    onStartUpdate: (start: string) => void;\n    onEndUpdate: (end: string) => void;\n}\n\nexport function PickerDoc({docs = data, ...props}: PresetsDocProps) {\n    const isMobile = useMobile();\n\n    if (!Array.isArray(docs) || docs.length === 0) {\n        return null;\n    }\n\n    if (isMobile) {\n        return <MobileDoc {...props} docs={docs} />;\n    }\n\n    return <DesktopDoc {...props} docs={docs} />;\n}\n"]}

package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.js

@@ -27,14 +27,15 @@ function PickerForm(props) {
         errorPlacement: 'inside',
     };
     const { isDateUnavailable, withHeader = false } = props;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: b({ size: props.size }, props.className), style: props.style, children: [withHeader && ((0, jsx_runtime_1.jsxs)("div", { className: b('header'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: props.size === 'xl' ? 'subheader-3' : 'subheader-2', children: (0, i18n_1.i18n)('Select the interval') }), (0, jsx_runtime_1.jsx)(PickerDoc_1.PickerDoc, { size: props.size, docs: props.docs, onStartUpdate: (start) => {
+    const { t } = i18n_1.i18n.useTranslation();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b({ size: props.size }, props.className), style: props.style, children: [withHeader && ((0, jsx_runtime_1.jsxs)("div", { className: b('header'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: props.size === 'xl' ? 'subheader-3' : 'subheader-2', children: t('Select the interval') }), (0, jsx_runtime_1.jsx)(PickerDoc_1.PickerDoc, { size: props.size, docs: props.docs, onStartUpdate: (start) => {
                             state.setStart({ type: 'relative', value: start });
                         }, onEndUpdate: (end) => {
                             state.setEnd({ type: 'relative', value: end });
-                        } })] })), (0, jsx_runtime_1.jsxs)("div", { className: b('pickers'), children: [(0, jsx_runtime_1.jsx)(RelativeDatePicker_1.RelativeDatePicker, Object.assign({}, fieldProps, { isDateUnavailable: isDateUnavailable ? (date) => isDateUnavailable(date, 'start') : undefined, validationState: ((_a = state.startValidation) === null || _a === void 0 ? void 0 : _a.isInvalid) ? 'invalid' : undefined, errorMessage: ((_c = (_b = state.startValidation) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c.join('\n')) || (0, i18n_1.i18n)('Value is incorrect.'), placeholderValue: (_d = props.placeholderValue) === null || _d === void 0 ? void 0 : _d.startOf('day'), label: (0, i18n_1.i18n)('From'), value: state.start, onUpdate: state.setStart })), (0, jsx_runtime_1.jsx)(RelativeDatePicker_1.RelativeDatePicker, Object.assign({}, fieldProps, { isDateUnavailable: isDateUnavailable ? (date) => isDateUnavailable(date, 'end') : undefined, validationState: ((_e = state.endValidation) === null || _e === void 0 ? void 0 : _e.isInvalid) ? 'invalid' : undefined, errorMessage: ((_g = (_f = state.endValidation) === null || _f === void 0 ? void 0 : _f.errors) === null || _g === void 0 ? void 0 : _g.join('\n')) || (0, i18n_1.i18n)('Value is incorrect.'), placeholderValue: (_h = props.placeholderValue) === null || _h === void 0 ? void 0 : _h.endOf('day'), label: (0, i18n_1.i18n)('To'), value: state.end, onUpdate: state.setEnd, roundUp: true }))] }), props.withApplyButton && !props.readOnly ? ((0, jsx_runtime_1.jsx)(uikit_1.Button, { disabled: state.isInvalid, size: props.size, onClick: () => {
+                        } })] })), (0, jsx_runtime_1.jsxs)("div", { className: b('pickers'), children: [(0, jsx_runtime_1.jsx)(RelativeDatePicker_1.RelativeDatePicker, Object.assign({}, fieldProps, { isDateUnavailable: isDateUnavailable ? (date) => isDateUnavailable(date, 'start') : undefined, validationState: ((_a = state.startValidation) === null || _a === void 0 ? void 0 : _a.isInvalid) ? 'invalid' : undefined, errorMessage: ((_c = (_b = state.startValidation) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c.join('\n')) || t('Value is incorrect.'), placeholderValue: (_d = props.placeholderValue) === null || _d === void 0 ? void 0 : _d.startOf('day'), label: t('From'), value: state.start, onUpdate: state.setStart })), (0, jsx_runtime_1.jsx)(RelativeDatePicker_1.RelativeDatePicker, Object.assign({}, fieldProps, { isDateUnavailable: isDateUnavailable ? (date) => isDateUnavailable(date, 'end') : undefined, validationState: ((_e = state.endValidation) === null || _e === void 0 ? void 0 : _e.isInvalid) ? 'invalid' : undefined, errorMessage: ((_g = (_f = state.endValidation) === null || _f === void 0 ? void 0 : _f.errors) === null || _g === void 0 ? void 0 : _g.join('\n')) || t('Value is incorrect.'), placeholderValue: (_h = props.placeholderValue) === null || _h === void 0 ? void 0 : _h.endOf('day'), label: t('To'), value: state.end, onUpdate: state.setEnd, roundUp: true }))] }), props.withApplyButton && !props.readOnly ? ((0, jsx_runtime_1.jsx)(uikit_1.Button, { disabled: state.isInvalid, size: props.size, onClick: () => {
                     state.applyValue();
                     props.onApply();
-                }, className: b('apply'), width: "max", children: (0, i18n_1.i18n)('Apply') })) : null, props.withPresets && !props.readOnly ? ((0, jsx_runtime_1.jsx)(Presets_1.Presets, { size: props.size, presetTabs: props.presetTabs, onChoosePreset: (start, end) => {
+                }, className: b('apply'), width: "max", children: t('Apply') })) : null, props.withPresets && !props.readOnly ? ((0, jsx_runtime_1.jsx)(Presets_1.Presets, { size: props.size, presetTabs: props.presetTabs, onChoosePreset: (start, end) => {
                     state.setRange({ type: 'relative', value: start }, { type: 'relative', value: end }, props.applyPresetsImmediately);
                     if (!props.withApplyButton || props.applyPresetsImmediately) {
                         props.onApply();

package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PickerForm.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {Button, Text} from '@gravity-ui/uikit';\nimport type {TextInputSize} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {RelativeDatePicker} from '../../../RelativeDatePicker';\nimport type {RelativeDatePickerProps} from '../../../RelativeDatePicker';\nimport type {DomProps, StyleProps} from '../../../types';\nimport type {RelativeRangeDatePickerStateOptions} from '../../hooks/useRelativeRangeDatePickerState';\nimport {Presets} from '../Presets/Presets';\nimport type {Preset} from '../Presets/defaultPresets';\nimport type {PresetTab} from '../Presets/utils';\nimport {Zones} from '../Zones/Zones';\n\nimport {PickerDoc} from './PickerDoc';\nimport {i18n} from './i18n';\nimport {useRelativeRangeDatePickerDialogState} from './useRelativeRangeDatePickerDialogState';\n\nimport './PickerForm.scss';\n\nconst b = block('relative-range-date-picker-form');\n\nexport interface PickerFormProps extends RelativeRangeDatePickerStateOptions, DomProps, StyleProps {\n    /** The size of the element */\n    size?: TextInputSize;\n    /**\n     * Whether the values is immutable.\n     * @default false\n     */\n    readOnly?: boolean;\n    /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */\n    format?: string;\n    /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */\n    placeholderValue?: DateTime;\n    /** Apply changes with button */\n    withApplyButton?: boolean;\n    /** Show time zone selector */\n    withZonesList?: boolean;\n    /** Show relative range presets */\n    withPresets?: boolean;\n    /** Apply presets immediately */\n    applyPresetsImmediately?: boolean;\n    /** Show header with docs tooltip */\n    withHeader?: boolean;\n    /** Custom preset tabs */\n    presetTabs?: PresetTab[];\n    /** Custom docs for picker, if empty array docs will be hidden */\n    docs?: Preset[];\n}\n\nexport function PickerForm(\n    props: PickerFormProps & {\n        onApply: () => void;\n    },\n) {\n    const state = useRelativeRangeDatePickerDialogState(props);\n\n    const fieldProps: RelativeDatePickerProps = {\n        timeZone: state.timeZone,\n        format: props.format,\n        minValue: props.minValue,\n        maxValue: props.maxValue,\n        hasClear: props.allowNullableValues,\n        readOnly: props.readOnly,\n        size: props.size,\n        errorPlacement: 'inside',\n    };\n    const {isDateUnavailable, withHeader = false} = props;\n    return (\n        <div className={b({size: props.size}, props.className)} style={props.style}>\n            {withHeader && (\n                <div className={b('header')}>\n                    <Text variant={props.size === 'xl' ? 'subheader-3' : 'subheader-2'}>\n                        {i18n('Select the interval')}\n                    </Text>\n                    <PickerDoc\n                        size={props.size}\n                        docs={props.docs}\n                        onStartUpdate={(start) => {\n                            state.setStart({type: 'relative', value: start});\n                        }}\n                        onEndUpdate={(end) => {\n                            state.setEnd({type: 'relative', value: end});\n                        }}\n                    />\n                </div>\n            )}\n\n            <div className={b('pickers')}>\n                <RelativeDatePicker\n                    {...fieldProps}\n                    isDateUnavailable={\n                        isDateUnavailable ? (date) => isDateUnavailable(date, 'start') : undefined\n                    }\n                    validationState={state.startValidation?.isInvalid ? 'invalid' : undefined}\n                    errorMessage={\n                        state.startValidation?.errors?.join('\\n') || i18n('Value is incorrect.')\n                    }\n                    placeholderValue={props.placeholderValue?.startOf('day')}\n                    label={i18n('From')}\n                    value={state.start}\n                    onUpdate={state.setStart}\n                />\n                <RelativeDatePicker\n                    {...fieldProps}\n                    isDateUnavailable={\n                        isDateUnavailable ? (date) => isDateUnavailable(date, 'end') : undefined\n                    }\n                    validationState={state.endValidation?.isInvalid ? 'invalid' : undefined}\n                    errorMessage={\n                        state.endValidation?.errors?.join('\\n') || i18n('Value is incorrect.')\n                    }\n                    placeholderValue={props.placeholderValue?.endOf('day')}\n                    label={i18n('To')}\n                    value={state.end}\n                    onUpdate={state.setEnd}\n                    roundUp\n                />\n            </div>\n            {props.withApplyButton && !props.readOnly ? (\n                <Button\n                    disabled={state.isInvalid}\n                    size={props.size}\n                    onClick={() => {\n                        state.applyValue();\n                        props.onApply();\n                    }}\n                    className={b('apply')}\n                    width=\"max\"\n                >\n                    {i18n('Apply')}\n                </Button>\n            ) : null}\n            {props.withPresets && !props.readOnly ? (\n                <Presets\n                    size={props.size}\n                    presetTabs={props.presetTabs}\n                    onChoosePreset={(start, end) => {\n                        state.setRange(\n                            {type: 'relative', value: start},\n                            {type: 'relative', value: end},\n                            props.applyPresetsImmediately,\n                        );\n                        if (!props.withApplyButton || props.applyPresetsImmediately) {\n                            props.onApply();\n                        }\n                    }}\n                    minValue={props.minValue}\n                    className={b('presets')}\n                />\n            ) : null}\n            {props.withZonesList ? (\n                <div className={b('zone')}>\n                    <Zones\n                        value={state.timeZone}\n                        onUpdate={state.setTimeZone}\n                        disabled={props.readOnly}\n                        size={props.size}\n                    />\n                </div>\n            ) : null}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"PickerForm.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {Button, Text} from '@gravity-ui/uikit';\nimport type {TextInputSize} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {RelativeDatePicker} from '../../../RelativeDatePicker';\nimport type {RelativeDatePickerProps} from '../../../RelativeDatePicker';\nimport type {DomProps, StyleProps} from '../../../types';\nimport type {RelativeRangeDatePickerStateOptions} from '../../hooks/useRelativeRangeDatePickerState';\nimport {Presets} from '../Presets/Presets';\nimport type {Preset} from '../Presets/defaultPresets';\nimport type {PresetTab} from '../Presets/utils';\nimport {Zones} from '../Zones/Zones';\n\nimport {PickerDoc} from './PickerDoc';\nimport {i18n} from './i18n';\nimport {useRelativeRangeDatePickerDialogState} from './useRelativeRangeDatePickerDialogState';\n\nimport './PickerForm.scss';\n\nconst b = block('relative-range-date-picker-form');\n\nexport interface PickerFormProps extends RelativeRangeDatePickerStateOptions, DomProps, StyleProps {\n    /** The size of the element */\n    size?: TextInputSize;\n    /**\n     * Whether the values is immutable.\n     * @default false\n     */\n    readOnly?: boolean;\n    /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */\n    format?: string;\n    /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */\n    placeholderValue?: DateTime;\n    /** Apply changes with button */\n    withApplyButton?: boolean;\n    /** Show time zone selector */\n    withZonesList?: boolean;\n    /** Show relative range presets */\n    withPresets?: boolean;\n    /** Apply presets immediately */\n    applyPresetsImmediately?: boolean;\n    /** Show header with docs tooltip */\n    withHeader?: boolean;\n    /** Custom preset tabs */\n    presetTabs?: PresetTab[];\n    /** Custom docs for picker, if empty array docs will be hidden */\n    docs?: Preset[];\n}\n\nexport function PickerForm(\n    props: PickerFormProps & {\n        onApply: () => void;\n    },\n) {\n    const state = useRelativeRangeDatePickerDialogState(props);\n\n    const fieldProps: RelativeDatePickerProps = {\n        timeZone: state.timeZone,\n        format: props.format,\n        minValue: props.minValue,\n        maxValue: props.maxValue,\n        hasClear: props.allowNullableValues,\n        readOnly: props.readOnly,\n        size: props.size,\n        errorPlacement: 'inside',\n    };\n    const {isDateUnavailable, withHeader = false} = props;\n    const {t} = i18n.useTranslation();\n    return (\n        <div className={b({size: props.size}, props.className)} style={props.style}>\n            {withHeader && (\n                <div className={b('header')}>\n                    <Text variant={props.size === 'xl' ? 'subheader-3' : 'subheader-2'}>\n                        {t('Select the interval')}\n                    </Text>\n                    <PickerDoc\n                        size={props.size}\n                        docs={props.docs}\n                        onStartUpdate={(start) => {\n                            state.setStart({type: 'relative', value: start});\n                        }}\n                        onEndUpdate={(end) => {\n                            state.setEnd({type: 'relative', value: end});\n                        }}\n                    />\n                </div>\n            )}\n\n            <div className={b('pickers')}>\n                <RelativeDatePicker\n                    {...fieldProps}\n                    isDateUnavailable={\n                        isDateUnavailable ? (date) => isDateUnavailable(date, 'start') : undefined\n                    }\n                    validationState={state.startValidation?.isInvalid ? 'invalid' : undefined}\n                    errorMessage={\n                        state.startValidation?.errors?.join('\\n') || t('Value is incorrect.')\n                    }\n                    placeholderValue={props.placeholderValue?.startOf('day')}\n                    label={t('From')}\n                    value={state.start}\n                    onUpdate={state.setStart}\n                />\n                <RelativeDatePicker\n                    {...fieldProps}\n                    isDateUnavailable={\n                        isDateUnavailable ? (date) => isDateUnavailable(date, 'end') : undefined\n                    }\n                    validationState={state.endValidation?.isInvalid ? 'invalid' : undefined}\n                    errorMessage={\n                        state.endValidation?.errors?.join('\\n') || t('Value is incorrect.')\n                    }\n                    placeholderValue={props.placeholderValue?.endOf('day')}\n                    label={t('To')}\n                    value={state.end}\n                    onUpdate={state.setEnd}\n                    roundUp\n                />\n            </div>\n            {props.withApplyButton && !props.readOnly ? (\n                <Button\n                    disabled={state.isInvalid}\n                    size={props.size}\n                    onClick={() => {\n                        state.applyValue();\n                        props.onApply();\n                    }}\n                    className={b('apply')}\n                    width=\"max\"\n                >\n                    {t('Apply')}\n                </Button>\n            ) : null}\n            {props.withPresets && !props.readOnly ? (\n                <Presets\n                    size={props.size}\n                    presetTabs={props.presetTabs}\n                    onChoosePreset={(start, end) => {\n                        state.setRange(\n                            {type: 'relative', value: start},\n                            {type: 'relative', value: end},\n                            props.applyPresetsImmediately,\n                        );\n                        if (!props.withApplyButton || props.applyPresetsImmediately) {\n                            props.onApply();\n                        }\n                    }}\n                    minValue={props.minValue}\n                    className={b('presets')}\n                />\n            ) : null}\n            {props.withZonesList ? (\n                <div className={b('zone')}>\n                    <Zones\n                        value={state.timeZone}\n                        onUpdate={state.setTimeZone}\n                        disabled={props.readOnly}\n                        size={props.size}\n                    />\n                </div>\n            ) : null}\n        </div>\n    );\n}\n"]}

package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/i18n/index.d.ts

@@ -1,5 +1,13 @@
-export declare const i18n: ((key: "Value is required." | "\"From\" can't be after \"To\"." | "From" | "To" | "Value is incorrect." | "Apply" | "Select the interval", params?: import("@gravity-ui/i18n").Params) => string) & {
+export declare const i18n: ((key: "\"From\" can't be after \"To\"." | "Value is required." | "From" | "To" | "Value is incorrect." | "Apply" | "Select the interval", params?: import("@gravity-ui/i18n").Params) => string) & {
+    Translation: import("react").ComponentType<{
+        children: (props: {
+            t: (key: "\"From\" can't be after \"To\"." | "Value is required." | "From" | "To" | "Value is incorrect." | "Apply" | "Select the interval", params?: import("@gravity-ui/i18n").Params) => string;
+        }) => React.ReactNode;
+    }>;
+    useTranslation: () => {
+        t: (key: "\"From\" can't be after \"To\"." | "Value is required." | "From" | "To" | "Value is incorrect." | "Apply" | "Select the interval", params?: import("@gravity-ui/i18n").Params) => string;
+    };
     keysetData: {
-        "g-date-relative-range-date-picker-dialog": Record<"Value is required." | "\"From\" can't be after \"To\"." | "From" | "To" | "Value is incorrect." | "Apply" | "Select the interval", import("@gravity-ui/i18n").KeyData>;
+        "g-date-relative-range-date-picker-dialog": Record<"\"From\" can't be after \"To\"." | "Value is required." | "From" | "To" | "Value is incorrect." | "Apply" | "Select the interval", import("@gravity-ui/i18n").KeyData>;
     };
 };

package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/useRelativeRangeDatePickerDialogState.js

@@ -4,7 +4,8 @@ exports.useRelativeRangeDatePickerDialogState = useRelativeRangeDatePickerDialog
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
-const useRelativeRangeDatePickerState_1 = require("../../hooks/useRelativeRangeDatePickerState.js");
+const i18n_1 = require("../../../utils/validation/i18n/index.js");
+const relativeRangeDatePicker_1 = require("../../../utils/validation/relativeRangeDatePicker.js");
 function useRelativeRangeDatePickerDialogState(props) {
     var _a, _b, _c, _d;
     const [userTimeZone, setUserTimeZone] = (0, uikit_1.useControlledState)(props.timeZone, (_a = props.defaultTimeZone) !== null && _a !== void 0 ? _a : 'default', props.onUpdateTimeZone);
@@ -74,7 +75,8 @@ function useRelativeRangeDatePickerDialogState(props) {
         }
         setValue(getRangeValue(start, end, Object.assign(Object.assign({}, props), { timeZone, allowNullableValues })), timeZone);
     }
-    const validation = react_1.default.useMemo(() => (0, useRelativeRangeDatePickerState_1.getRangeValidationResult)(start || end ? { start, end } : null, allowNullableValues, props.minValue, props.maxValue, props.isDateUnavailable, timeZone), [
+    const { t } = i18n_1.i18n.useTranslation();
+    const validation = react_1.default.useMemo(() => (0, relativeRangeDatePicker_1.getRangeValidationResult)(start || end ? { start, end } : null, allowNullableValues, props.minValue, props.maxValue, props.isDateUnavailable, timeZone, t), [
         allowNullableValues,
         end,
         props.isDateUnavailable,
@@ -82,6 +84,7 @@ function useRelativeRangeDatePickerDialogState(props) {
         props.minValue,
         start,
         timeZone,
+        t,
     ]);
     return {
         start,
@@ -102,7 +105,7 @@ function getRangeValue(start, end, options = {}) {
     if (!start && !end) {
         return null;
     }
-    const { isInvalid } = (0, useRelativeRangeDatePickerState_1.getRangeValidationResult)({ start, end }, options.allowNullableValues, options.minValue, options.maxValue, options.isDateUnavailable, (_a = options.timeZone) !== null && _a !== void 0 ? _a : 'default');
+    const { isInvalid } = (0, relativeRangeDatePicker_1.getRangeValidationResult)({ start, end }, options.allowNullableValues, options.minValue, options.maxValue, options.isDateUnavailable, (_a = options.timeZone) !== null && _a !== void 0 ? _a : 'default');
     if (isInvalid) {
         return null;
     }

package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/useRelativeRangeDatePickerDialogState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRelativeRangeDatePickerDialogState.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/useRelativeRangeDatePickerDialogState.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {useControlledState} from '@gravity-ui/uikit';\n\nimport type {Value} from '../../../RelativeDatePicker';\nimport type {RangeValue} from '../../../types';\nimport {getRangeValidationResult} from '../../hooks/useRelativeRangeDatePickerState';\n\nimport type {PickerFormProps} from './PickerForm';\n\nexport function useRelativeRangeDatePickerDialogState(props: PickerFormProps) {\n    const [userTimeZone, setUserTimeZone] = useControlledState(\n        props.timeZone,\n        props.defaultTimeZone ?? 'default',\n        props.onUpdateTimeZone,\n    );\n\n    const [value, setValue] = useControlledState(\n        props.value,\n        props.defaultValue ?? null,\n        (v, tz: string) => {\n            setUserTimeZone(tz);\n            if (value !== v || (value && userTimeZone !== tz)) {\n                props.onUpdate?.(v, tz);\n            }\n        },\n    );\n\n    const {withApplyButton} = props;\n\n    const [start, setStart] = React.useState<Value | null>(value?.start ?? null);\n    const [end, setEnd] = React.useState<Value | null>(value?.end ?? null);\n    const [innerTimeZone, setTimeZone] = React.useState(userTimeZone);\n\n    const timeZone = withApplyButton ? innerTimeZone : userTimeZone;\n    const allowNullableValues = props.allowNullableValues;\n\n    function setStartValue(newValue: Value | null) {\n        if (props.readOnly) {\n            return;\n        }\n        setStart(newValue);\n        if (!withApplyButton) {\n            setValue(\n                getRangeValue(newValue, end, {...props, timeZone, allowNullableValues}),\n                timeZone,\n            );\n        }\n    }\n\n    function setEndValue(newValue: Value | null) {\n        if (props.readOnly) {\n            return;\n        }\n        setEnd(newValue);\n        if (!withApplyButton) {\n            setValue(\n                getRangeValue(start, newValue, {...props, timeZone, allowNullableValues}),\n                timeZone,\n            );\n        }\n    }\n\n    function setTimeZoneValue(newTimeZone: string) {\n        if (props.readOnly) {\n            return;\n        }\n        setTimeZone(newTimeZone);\n        const newStart = start ? {...start} : null;\n        if (newStart?.type === 'absolute') {\n            newStart.value = newStart.value.timeZone(newTimeZone, true);\n            setStart(newStart);\n        }\n        const newEnd = end ? {...end} : null;\n        if (newEnd?.type === 'absolute') {\n            newEnd.value = newEnd.value.timeZone(newTimeZone, true);\n            setEnd(newEnd);\n        }\n        if (!withApplyButton) {\n            setValue(\n                getRangeValue(newStart, newEnd, {\n                    ...props,\n                    timeZone: newTimeZone,\n                    allowNullableValues,\n                }),\n                newTimeZone,\n            );\n        }\n    }\n\n    function setRange(newStart: Value, newEnd: Value, force?: boolean) {\n        if (props.readOnly) {\n            return;\n        }\n        setStart(newStart);\n        setEnd(newEnd);\n        if (!withApplyButton || force) {\n            setValue(\n                getRangeValue(newStart, newEnd, {...props, timeZone, allowNullableValues}),\n                timeZone,\n            );\n        }\n    }\n\n    function applyValue() {\n        if (props.readOnly) {\n            return;\n        }\n        setValue(getRangeValue(start, end, {...props, timeZone, allowNullableValues}), timeZone);\n    }\n\n    const validation = React.useMemo(\n        () =>\n            getRangeValidationResult(\n                start || end ? {start, end} : null,\n                allowNullableValues,\n                props.minValue,\n                props.maxValue,\n                props.isDateUnavailable,\n                timeZone,\n            ),\n        [\n            allowNullableValues,\n            end,\n            props.isDateUnavailable,\n            props.maxValue,\n            props.minValue,\n            start,\n            timeZone,\n        ],\n    );\n\n    return {\n        start,\n        end,\n        timeZone,\n        setStart: setStartValue,\n        setEnd: setEndValue,\n        setRange,\n        setTimeZone: setTimeZoneValue,\n        applyValue,\n        isInvalid: validation.isInvalid,\n        startValidation: validation.startValidationResult,\n        endValidation: validation.endValidationResult,\n    };\n}\n\ninterface GetRangeValueOptions {\n    allowNullableValues?: boolean;\n    minValue?: DateTime;\n    maxValue?: DateTime;\n    isDateUnavailable?: (v: DateTime, endPoint: 'start' | 'end') => boolean;\n    timeZone?: string;\n}\nfunction getRangeValue(\n    start: Value | null,\n    end: Value | null,\n    options: GetRangeValueOptions = {},\n): RangeValue<Value | null> | null {\n    if (!start && !end) {\n        return null;\n    }\n\n    const {isInvalid} = getRangeValidationResult(\n        {start, end},\n        options.allowNullableValues,\n        options.minValue,\n        options.maxValue,\n        options.isDateUnavailable,\n        options.timeZone ?? 'default',\n    );\n\n    if (isInvalid) {\n        return null;\n    }\n\n    return {start, end};\n}\n"]}
+{"version":3,"file":"useRelativeRangeDatePickerDialogState.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/useRelativeRangeDatePickerDialogState.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {useControlledState} from '@gravity-ui/uikit';\n\nimport type {Value} from '../../../RelativeDatePicker';\nimport type {RangeValue} from '../../../types';\nimport {i18n} from '../../../utils/validation/i18n';\nimport {getRangeValidationResult} from '../../../utils/validation/relativeRangeDatePicker';\n\nimport type {PickerFormProps} from './PickerForm';\n\nexport function useRelativeRangeDatePickerDialogState(props: PickerFormProps) {\n    const [userTimeZone, setUserTimeZone] = useControlledState(\n        props.timeZone,\n        props.defaultTimeZone ?? 'default',\n        props.onUpdateTimeZone,\n    );\n\n    const [value, setValue] = useControlledState(\n        props.value,\n        props.defaultValue ?? null,\n        (v, tz: string) => {\n            setUserTimeZone(tz);\n            if (value !== v || (value && userTimeZone !== tz)) {\n                props.onUpdate?.(v, tz);\n            }\n        },\n    );\n\n    const {withApplyButton} = props;\n\n    const [start, setStart] = React.useState<Value | null>(value?.start ?? null);\n    const [end, setEnd] = React.useState<Value | null>(value?.end ?? null);\n    const [innerTimeZone, setTimeZone] = React.useState(userTimeZone);\n\n    const timeZone = withApplyButton ? innerTimeZone : userTimeZone;\n    const allowNullableValues = props.allowNullableValues;\n\n    function setStartValue(newValue: Value | null) {\n        if (props.readOnly) {\n            return;\n        }\n        setStart(newValue);\n        if (!withApplyButton) {\n            setValue(\n                getRangeValue(newValue, end, {...props, timeZone, allowNullableValues}),\n                timeZone,\n            );\n        }\n    }\n\n    function setEndValue(newValue: Value | null) {\n        if (props.readOnly) {\n            return;\n        }\n        setEnd(newValue);\n        if (!withApplyButton) {\n            setValue(\n                getRangeValue(start, newValue, {...props, timeZone, allowNullableValues}),\n                timeZone,\n            );\n        }\n    }\n\n    function setTimeZoneValue(newTimeZone: string) {\n        if (props.readOnly) {\n            return;\n        }\n        setTimeZone(newTimeZone);\n        const newStart = start ? {...start} : null;\n        if (newStart?.type === 'absolute') {\n            newStart.value = newStart.value.timeZone(newTimeZone, true);\n            setStart(newStart);\n        }\n        const newEnd = end ? {...end} : null;\n        if (newEnd?.type === 'absolute') {\n            newEnd.value = newEnd.value.timeZone(newTimeZone, true);\n            setEnd(newEnd);\n        }\n        if (!withApplyButton) {\n            setValue(\n                getRangeValue(newStart, newEnd, {\n                    ...props,\n                    timeZone: newTimeZone,\n                    allowNullableValues,\n                }),\n                newTimeZone,\n            );\n        }\n    }\n\n    function setRange(newStart: Value, newEnd: Value, force?: boolean) {\n        if (props.readOnly) {\n            return;\n        }\n        setStart(newStart);\n        setEnd(newEnd);\n        if (!withApplyButton || force) {\n            setValue(\n                getRangeValue(newStart, newEnd, {...props, timeZone, allowNullableValues}),\n                timeZone,\n            );\n        }\n    }\n\n    function applyValue() {\n        if (props.readOnly) {\n            return;\n        }\n        setValue(getRangeValue(start, end, {...props, timeZone, allowNullableValues}), timeZone);\n    }\n\n    const {t} = i18n.useTranslation();\n    const validation = React.useMemo(\n        () =>\n            getRangeValidationResult(\n                start || end ? {start, end} : null,\n                allowNullableValues,\n                props.minValue,\n                props.maxValue,\n                props.isDateUnavailable,\n                timeZone,\n                t,\n            ),\n        [\n            allowNullableValues,\n            end,\n            props.isDateUnavailable,\n            props.maxValue,\n            props.minValue,\n            start,\n            timeZone,\n            t,\n        ],\n    );\n\n    return {\n        start,\n        end,\n        timeZone,\n        setStart: setStartValue,\n        setEnd: setEndValue,\n        setRange,\n        setTimeZone: setTimeZoneValue,\n        applyValue,\n        isInvalid: validation.isInvalid,\n        startValidation: validation.startValidationResult,\n        endValidation: validation.endValidationResult,\n    };\n}\n\ninterface GetRangeValueOptions {\n    allowNullableValues?: boolean;\n    minValue?: DateTime;\n    maxValue?: DateTime;\n    isDateUnavailable?: (v: DateTime, endPoint: 'start' | 'end') => boolean;\n    timeZone?: string;\n}\nfunction getRangeValue(\n    start: Value | null,\n    end: Value | null,\n    options: GetRangeValueOptions = {},\n): RangeValue<Value | null> | null {\n    if (!start && !end) {\n        return null;\n    }\n\n    const {isInvalid} = getRangeValidationResult(\n        {start, end},\n        options.allowNullableValues,\n        options.minValue,\n        options.maxValue,\n        options.isDateUnavailable,\n        options.timeZone ?? 'default',\n    );\n\n    if (isInvalid) {\n        return null;\n    }\n\n    return {start, end};\n}\n"]}

package/dist/cjs/components/RelativeRangeDatePicker/components/Presets/Presets.css.map

@@ -1 +1 @@
-{"version":3,"sources":["components/RelativeRangeDatePicker/components/Presets/Presets.scss","home/runner/work/date-components/date-components/node_modules/@gravity-ui/uikit/styles/mixins.scss"],"names":[],"mappings":"AAKA;EACI;;AAEA;EACI;EAEA;EACA;EACA;EAEA;EAEA;;AAGJ;EACI;;AAGJ;EACI;EAEA;;AAKI;EACI;;AAIJ;EACI;ECwIZ;EACA;EACA;EACA","sourcesContent":["@use '@gravity-ui/uikit/styles/mixins';\n@use '../../../variables';\n\n$block: '.#{variables.$ns}relative-range-date-picker-presets';\n\n#{$block} {\n    --g-list-item-padding: 0 var(--_--g-date-picker-presets-padding, 0);\n\n    &__tabs {\n        --g-tabs-border-width: 0;\n\n        display: flex;\n        align-items: center;\n        gap: var(--g-spacing-2);\n\n        padding-inline: var(--_--g-date-picker-presets-padding, 0);\n\n        box-shadow: inset 0 -1px var(--g-color-line-generic);\n    }\n\n    &__list-container {\n        outline: none;\n    }\n\n    &__content {\n        overflow: auto;\n\n        height: 128px;\n    }\n\n    &_size {\n        &_l {\n            #{$block}__content {\n                height: 144px;\n            }\n        }\n        &_xl {\n            #{$block}__content {\n                height: 162px;\n                @include mixins.text-body-2();\n            }\n        }\n    }\n}\n","@use 'sass:list';\n@use 'sass:selector';\n\n@mixin overflow-ellipsis($type: ellipsis) {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: $type;\n}\n\n@mixin button-reset() {\n    padding: 0;\n\n    font-family: var(--g-text-body-font-family);\n    font-size: inherit;\n    font-weight: var(--g-text-body-font-weight);\n\n    color: inherit;\n    background: none;\n    border: none;\n    outline: none;\n    cursor: pointer;\n}\n\n@mixin link-reset() {\n    color: inherit;\n    text-decoration: inherit;\n}\n\n@mixin expand-interactive-area($h: 4px, $v: $h) {\n    position: relative;\n\n    &::after {\n        content: '';\n        position: absolute;\n        inset: logical (-$v) (-$h);\n    }\n}\n\n@mixin max-height($height) {\n    max-height: $height;\n    overflow-y: auto;\n}\n\n@mixin max-text-width($width: 100%) {\n    @include overflow-ellipsis();\n\n    max-width: $width;\n}\n\n@mixin aspect-ratio($ratio) {\n    position: relative;\n\n    &::before {\n        display: block;\n        content: '';\n        width: 100%;\n        padding-block-start: $ratio * 100%;\n    }\n\n    > *:only-child {\n        position: absolute;\n        inset: 0;\n    }\n}\n\n@function get-pin-selector($mod, $selector, $append: true) {\n    @if $append {\n        @return selector.append($mod, $selector);\n    } @else {\n        @return list.join($mod, $selector, $separator: space);\n    }\n}\n\n@mixin pin($block, $selectors, $radius, $append: true) {\n    @each $selector in $selectors {\n        &#{get-pin-selector(#{$block}_pin_round-round, $selector, $append)} {\n            border-radius: $radius;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-brick, $selector, $append)} {\n            border-radius: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-clear, $selector, $append)} {\n            border-radius: 0;\n            border-inline: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_circle-circle, $selector, $append)} {\n            border-radius: 100px;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_round-brick, $selector, $append)} {\n            border-start-start-radius: $radius;\n            border-start-end-radius: 0;\n            border-end-start-radius: $radius;\n            border-end-end-radius: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-round, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: $radius;\n            border-end-start-radius: 0;\n            border-end-end-radius: $radius;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_round-clear, $selector, $append)} {\n            border-start-start-radius: $radius;\n            border-start-end-radius: 0;\n            border-end-start-radius: $radius;\n            border-end-end-radius: 0;\n            border-inline-end: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-round, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: $radius;\n            border-end-start-radius: 0;\n            border-end-end-radius: $radius;\n            border-inline-start: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-clear, $selector, $append)} {\n            border-radius: 0;\n            border-inline-end: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-brick, $selector, $append)} {\n            border-radius: 0;\n            border-inline-start: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_circle-brick, $selector, $append)} {\n            border-start-start-radius: 100px;\n            border-start-end-radius: 0;\n            border-end-start-radius: 100px;\n            border-end-end-radius: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-circle, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: 100px;\n            border-end-start-radius: 0;\n            border-end-end-radius: 100px;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_circle-clear, $selector, $append)} {\n            border-start-start-radius: 100px;\n            border-start-end-radius: 0;\n            border-end-start-radius: 100px;\n            border-end-end-radius: 0;\n            border-inline-end: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-circle, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: 100px;\n            border-end-start-radius: 0;\n            border-end-end-radius: 100px;\n            border-inline-start: 0;\n        }\n    }\n}\n\n// Typography\n\n@mixin text-body-1() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-1-font-size);\n    line-height: var(--g-text-body-1-line-height);\n}\n\n@mixin text-body-2() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-2-font-size);\n    line-height: var(--g-text-body-2-line-height);\n}\n\n@mixin text-body-3() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-3-font-size);\n    line-height: var(--g-text-body-3-line-height);\n}\n\n@mixin text-body-short() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-short-font-size);\n    line-height: var(--g-text-body-short-line-height);\n}\n\n@mixin text-caption-1() {\n    font-family: var(--g-text-caption-font-family);\n    font-weight: var(--g-text-caption-font-weight);\n    font-size: var(--g-text-caption-1-font-size);\n    line-height: var(--g-text-caption-1-line-height);\n}\n\n@mixin text-caption-2() {\n    font-family: var(--g-text-caption-font-family);\n    font-weight: var(--g-text-caption-font-weight);\n    font-size: var(--g-text-caption-2-font-size);\n    line-height: var(--g-text-caption-2-line-height);\n}\n\n@mixin text-header-1() {\n    font-family: var(--g-text-header-font-family);\n    font-weight: var(--g-text-header-font-weight);\n    font-size: var(--g-text-header-1-font-size);\n    line-height: var(--g-text-header-1-line-height);\n}\n\n@mixin text-header-2() {\n    font-family: var(--g-text-header-font-family);\n    font-weight: var(--g-text-header-font-weight);\n    font-size: var(--g-text-header-2-font-size);\n    line-height: var(--g-text-header-2-line-height);\n}\n\n@mixin text-subheader-1() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-1-font-size);\n    line-height: var(--g-text-subheader-1-line-height);\n}\n\n@mixin text-subheader-2() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-2-font-size);\n    line-height: var(--g-text-subheader-2-line-height);\n}\n\n@mixin text-subheader-3() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-3-font-size);\n    line-height: var(--g-text-subheader-3-line-height);\n}\n\n@mixin text-display-1() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-1-font-size);\n    line-height: var(--g-text-display-1-line-height);\n}\n\n@mixin text-display-2() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-2-font-size);\n    line-height: var(--g-text-display-2-line-height);\n}\n\n@mixin text-display-3() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-3-font-size);\n    line-height: var(--g-text-display-3-line-height);\n}\n\n@mixin text-display-4() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-4-font-size);\n    line-height: var(--g-text-display-4-line-height);\n}\n\n@mixin text-code-1() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-1-font-size);\n    line-height: var(--g-text-code-1-line-height);\n}\n\n@mixin text-code-2() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-2-font-size);\n    line-height: var(--g-text-code-2-line-height);\n}\n\n@mixin text-code-3() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-3-font-size);\n    line-height: var(--g-text-code-3-line-height);\n}\n\n@mixin text-code-inline-1() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-1-font-size);\n    line-height: var(--g-text-code-inline-1-line-height);\n}\n\n@mixin text-code-inline-2() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-2-font-size);\n    line-height: var(--g-text-code-inline-2-line-height);\n}\n\n@mixin text-code-inline-3() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-3-font-size);\n    line-height: var(--g-text-code-inline-3-line-height);\n}\n\n@mixin text-accent() {\n    font-weight: var(--g-text-accent-font-weight);\n}\n\n@mixin loading($loading-color-1: rgba(255, 255, 255, 0.3), $loading-color-2: transparent) {\n    background-image: repeating-linear-gradient(\n        -45deg,\n        $loading-color-1,\n        $loading-color-1 4px,\n        $loading-color-2 4px,\n        $loading-color-2 8px\n    );\n    background-size: 150%;\n    background-clip: padding-box;\n\n    // stylelint-disable-next-line no-unknown-animations\n    animation: g-loading-animation 0.5s linear infinite;\n}\n\n@mixin scrollbar() {\n    &::-webkit-scrollbar,\n    *::-webkit-scrollbar {\n        width: var(--g-scrollbar-width);\n        height: var(--g-scrollbar-width);\n        background: var(--g-color-scroll-track);\n    }\n\n    &::-webkit-scrollbar-track,\n    *::-webkit-scrollbar-track {\n        background: var(--g-color-scroll-track);\n    }\n\n    &::-webkit-scrollbar-corner,\n    *::-webkit-scrollbar-corner {\n        background: var(--g-color-scroll-corner);\n    }\n\n    &::-webkit-scrollbar-thumb,\n    *::-webkit-scrollbar-thumb {\n        background: var(--g-color-scroll-handle);\n    }\n\n    &::-webkit-scrollbar-thumb:hover,\n    *::-webkit-scrollbar-thumb:hover {\n        background: var(--g-color-scroll-handle-hover);\n    }\n}\n"],"file":"Presets.css"}
+{"version":3,"sources":["components/RelativeRangeDatePicker/components/Presets/Presets.scss","home/runner/work/date-components/date-components/node_modules/@gravity-ui/uikit/styles/mixins.scss"],"names":[],"mappings":"AAKA;EACI;;AAEA;EACI;EAEA;EACA;EACA;EAEA;EAEA;;AAGJ;EACI;;AAGJ;EACI;EAEA;;AAKI;EACI;;AAIJ;EACI;ECwIZ;EACA;EACA;EACA","sourcesContent":["@use '@gravity-ui/uikit/styles/mixins';\n@use '../../../variables';\n\n$block: '.#{variables.$ns}relative-range-date-picker-presets';\n\n#{$block} {\n    --g-list-item-padding: 0 var(--_--g-date-picker-presets-padding, 0);\n\n    &__tabs {\n        --g-tabs-border-width: 0;\n\n        display: flex;\n        align-items: center;\n        gap: var(--g-spacing-2);\n\n        padding-inline: var(--_--g-date-picker-presets-padding, 0);\n\n        box-shadow: inset 0 -1px var(--g-color-line-generic);\n    }\n\n    &__list-container {\n        outline: none;\n    }\n\n    &__content {\n        overflow: auto;\n\n        height: 128px;\n    }\n\n    &_size {\n        &_l {\n            #{$block}__content {\n                height: 144px;\n            }\n        }\n        &_xl {\n            #{$block}__content {\n                height: 162px;\n                @include mixins.text-body-2();\n            }\n        }\n    }\n}\n","@use 'sass:list';\n@use 'sass:selector';\n\n@mixin overflow-ellipsis($type: ellipsis) {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: $type;\n}\n\n@mixin button-reset() {\n    padding: 0;\n\n    font-family: var(--g-text-body-font-family);\n    font-size: inherit;\n    font-weight: var(--g-text-body-font-weight);\n\n    color: inherit;\n    background: none;\n    border: none;\n    outline: none;\n    cursor: pointer;\n}\n\n@mixin link-reset() {\n    color: inherit;\n    text-decoration: inherit;\n}\n\n@mixin expand-interactive-area($h: 4px, $v: $h) {\n    position: relative;\n\n    &::after {\n        content: '';\n        position: absolute;\n        inset: logical (-$v) (-$h);\n    }\n}\n\n@mixin max-height($height) {\n    max-height: $height;\n    overflow-y: auto;\n}\n\n@mixin max-text-width($width: 100%) {\n    @include overflow-ellipsis();\n\n    max-width: $width;\n}\n\n@mixin aspect-ratio($ratio) {\n    position: relative;\n\n    &::before {\n        display: block;\n        content: '';\n        width: 100%;\n        padding-block-start: $ratio * 100%;\n    }\n\n    > *:only-child {\n        position: absolute;\n        inset: 0;\n    }\n}\n\n@function get-pin-selector($mod, $selector, $append: true) {\n    @if $append {\n        @return selector.append($mod, $selector);\n    } @else {\n        @return list.join($mod, $selector, $separator: space);\n    }\n}\n\n@mixin pin($block, $selectors, $radius, $append: true) {\n    @each $selector in $selectors {\n        @at-root #{get-pin-selector(#{$block}_pin_round-round, $selector, $append)} {\n            border-radius: $radius;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_brick-brick, $selector, $append)} {\n            border-radius: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_clear-clear, $selector, $append)} {\n            border-radius: 0;\n            border-inline: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_circle-circle, $selector, $append)} {\n            border-radius: 100px;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_round-brick, $selector, $append)} {\n            border-start-start-radius: $radius;\n            border-start-end-radius: 0;\n            border-end-start-radius: $radius;\n            border-end-end-radius: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_brick-round, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: $radius;\n            border-end-start-radius: 0;\n            border-end-end-radius: $radius;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_round-clear, $selector, $append)} {\n            border-start-start-radius: $radius;\n            border-start-end-radius: 0;\n            border-end-start-radius: $radius;\n            border-end-end-radius: 0;\n            border-inline-end: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_clear-round, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: $radius;\n            border-end-start-radius: 0;\n            border-end-end-radius: $radius;\n            border-inline-start: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_brick-clear, $selector, $append)} {\n            border-radius: 0;\n            border-inline-end: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_clear-brick, $selector, $append)} {\n            border-radius: 0;\n            border-inline-start: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_circle-brick, $selector, $append)} {\n            border-start-start-radius: 100px;\n            border-start-end-radius: 0;\n            border-end-start-radius: 100px;\n            border-end-end-radius: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_brick-circle, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: 100px;\n            border-end-start-radius: 0;\n            border-end-end-radius: 100px;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_circle-clear, $selector, $append)} {\n            border-start-start-radius: 100px;\n            border-start-end-radius: 0;\n            border-end-start-radius: 100px;\n            border-end-end-radius: 0;\n            border-inline-end: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_clear-circle, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: 100px;\n            border-end-start-radius: 0;\n            border-end-end-radius: 100px;\n            border-inline-start: 0;\n        }\n    }\n}\n\n// Typography\n\n@mixin text-body-1() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-1-font-size);\n    line-height: var(--g-text-body-1-line-height);\n}\n\n@mixin text-body-2() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-2-font-size);\n    line-height: var(--g-text-body-2-line-height);\n}\n\n@mixin text-body-3() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-3-font-size);\n    line-height: var(--g-text-body-3-line-height);\n}\n\n@mixin text-body-short() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-short-font-size);\n    line-height: var(--g-text-body-short-line-height);\n}\n\n@mixin text-caption-1() {\n    font-family: var(--g-text-caption-font-family);\n    font-weight: var(--g-text-caption-font-weight);\n    font-size: var(--g-text-caption-1-font-size);\n    line-height: var(--g-text-caption-1-line-height);\n}\n\n@mixin text-caption-2() {\n    font-family: var(--g-text-caption-font-family);\n    font-weight: var(--g-text-caption-font-weight);\n    font-size: var(--g-text-caption-2-font-size);\n    line-height: var(--g-text-caption-2-line-height);\n}\n\n@mixin text-header-1() {\n    font-family: var(--g-text-header-font-family);\n    font-weight: var(--g-text-header-font-weight);\n    font-size: var(--g-text-header-1-font-size);\n    line-height: var(--g-text-header-1-line-height);\n}\n\n@mixin text-header-2() {\n    font-family: var(--g-text-header-font-family);\n    font-weight: var(--g-text-header-font-weight);\n    font-size: var(--g-text-header-2-font-size);\n    line-height: var(--g-text-header-2-line-height);\n}\n\n@mixin text-subheader-1() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-1-font-size);\n    line-height: var(--g-text-subheader-1-line-height);\n}\n\n@mixin text-subheader-2() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-2-font-size);\n    line-height: var(--g-text-subheader-2-line-height);\n}\n\n@mixin text-subheader-3() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-3-font-size);\n    line-height: var(--g-text-subheader-3-line-height);\n}\n\n@mixin text-display-1() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-1-font-size);\n    line-height: var(--g-text-display-1-line-height);\n}\n\n@mixin text-display-2() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-2-font-size);\n    line-height: var(--g-text-display-2-line-height);\n}\n\n@mixin text-display-3() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-3-font-size);\n    line-height: var(--g-text-display-3-line-height);\n}\n\n@mixin text-display-4() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-4-font-size);\n    line-height: var(--g-text-display-4-line-height);\n}\n\n@mixin text-code-1() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-1-font-size);\n    line-height: var(--g-text-code-1-line-height);\n}\n\n@mixin text-code-2() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-2-font-size);\n    line-height: var(--g-text-code-2-line-height);\n}\n\n@mixin text-code-3() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-3-font-size);\n    line-height: var(--g-text-code-3-line-height);\n}\n\n@mixin text-code-inline-1() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-1-font-size);\n    line-height: var(--g-text-code-inline-1-line-height);\n}\n\n@mixin text-code-inline-2() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-2-font-size);\n    line-height: var(--g-text-code-inline-2-line-height);\n}\n\n@mixin text-code-inline-3() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-3-font-size);\n    line-height: var(--g-text-code-inline-3-line-height);\n}\n\n@mixin text-accent() {\n    font-weight: var(--g-text-accent-font-weight);\n}\n\n@mixin loading($loading-color-1: rgba(255, 255, 255, 0.3), $loading-color-2: transparent) {\n    background-image: repeating-linear-gradient(\n        -45deg,\n        $loading-color-1,\n        $loading-color-1 4px,\n        $loading-color-2 4px,\n        $loading-color-2 8px\n    );\n    background-size: 150%;\n    background-clip: padding-box;\n\n    // stylelint-disable-next-line no-unknown-animations\n    animation: g-loading-animation 0.5s linear infinite;\n\n    @media (prefers-reduced-motion: reduce) {\n        animation: none;\n    }\n}\n\n@mixin scrollbar() {\n    &::-webkit-scrollbar,\n    *::-webkit-scrollbar {\n        width: var(--g-scrollbar-width);\n        height: var(--g-scrollbar-width);\n        background: var(--g-color-scroll-track);\n    }\n\n    &::-webkit-scrollbar-track,\n    *::-webkit-scrollbar-track {\n        background: var(--g-color-scroll-track);\n    }\n\n    &::-webkit-scrollbar-corner,\n    *::-webkit-scrollbar-corner {\n        background: var(--g-color-scroll-corner);\n    }\n\n    &::-webkit-scrollbar-thumb,\n    *::-webkit-scrollbar-thumb {\n        background: var(--g-color-scroll-handle);\n    }\n\n    &::-webkit-scrollbar-thumb:hover,\n    *::-webkit-scrollbar-thumb:hover {\n        background: var(--g-color-scroll-handle-hover);\n    }\n}\n"],"file":"Presets.css"}

package/dist/cjs/components/RelativeRangeDatePicker/components/Presets/Presets.js

@@ -8,14 +8,16 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../../../utils/cn.js");
+const i18n_1 = require("./i18n/index.js");
 const utils_1 = require("./utils.js");
 require("./Presets.css");
 const b = (0, cn_1.block)('relative-range-date-picker-presets');
 function Presets({ className, size = 'm', minValue, withTime, onChoosePreset, presetTabs, }) {
     var _a, _b;
+    const { t } = i18n_1.i18n.useTranslation();
     const tabs = react_1.default.useMemo(() => {
-        return (0, utils_1.filterPresetTabs)(presetTabs !== null && presetTabs !== void 0 ? presetTabs : (0, utils_1.getDefaultPresetTabs)({ withTime }), { minValue });
-    }, [withTime, minValue, presetTabs]);
+        return (0, utils_1.filterPresetTabs)(presetTabs !== null && presetTabs !== void 0 ? presetTabs : (0, utils_1.getDefaultPresetTabs)({ withTime, t }), { minValue });
+    }, [withTime, minValue, presetTabs, t]);
     const [activeTabId, setActiveTab] = react_1.default.useState((_a = tabs[0]) === null || _a === void 0 ? void 0 : _a.id);
     if (tabs.length === 0) {
         return null;

package/dist/cjs/components/RelativeRangeDatePicker/components/Presets/Presets.js.map

@@ -1 +1 @@
-{"version":3,"file":"Presets.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/Presets/Presets.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 {List, Tab, TabList, TabPanel, TabProvider} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\n\nimport type {Preset} from './defaultPresets';\nimport {filterPresetTabs, getDefaultPresetTabs} from './utils';\nimport type {PresetTab} from './utils';\n\nimport './Presets.scss';\n\nconst b = block('relative-range-date-picker-presets');\n\nexport interface PresetProps {\n    className?: string;\n    onChoosePreset: (start: string, end: string) => void;\n    withTime?: boolean;\n    minValue?: DateTime;\n    size?: 's' | 'm' | 'l' | 'xl';\n    presetTabs?: PresetTab[];\n}\nexport function Presets({\n    className,\n    size = 'm',\n    minValue,\n    withTime,\n    onChoosePreset,\n    presetTabs,\n}: PresetProps) {\n    const tabs = React.useMemo(() => {\n        return filterPresetTabs(presetTabs ?? getDefaultPresetTabs({withTime}), {minValue});\n    }, [withTime, minValue, presetTabs]);\n\n    const [activeTabId, setActiveTab] = React.useState(tabs[0]?.id);\n\n    if (tabs.length === 0) {\n        return null;\n    }\n\n    const activeTab = tabs.find((tab) => tab.id === activeTabId) ?? tabs[0];\n    if (!activeTab) {\n        return null;\n    }\n\n    if (activeTab.id !== activeTabId) {\n        setActiveTab(activeTab.id);\n    }\n\n    return (\n        <div className={b({size}, className)}>\n            <TabProvider value={activeTabId} onUpdate={setActiveTab}>\n                <div className={b('tabs')}>\n                    <TabList size={size === 's' ? 'm' : size}>\n                        {tabs.map(({id, title}) => (\n                            <Tab key={id} value={id}>\n                                {title}\n                            </Tab>\n                        ))}\n                    </TabList>\n                </div>\n                <TabPanel className={b('content')} value={activeTabId}>\n                    <PresetsList\n                        presets={activeTab.presets}\n                        onChoosePreset={onChoosePreset}\n                        size={size}\n                    />\n                </TabPanel>\n            </TabProvider>\n        </div>\n    );\n}\nexport const SIZE_TO_ITEM_HEIGHT = {\n    s: 28,\n    m: 28,\n    l: 32,\n    xl: 36,\n};\n\ninterface PresetsListProps {\n    size?: 's' | 'm' | 'l' | 'xl';\n    presets: Preset[];\n    onChoosePreset: (start: string, end: string) => void;\n}\nfunction PresetsList({presets, onChoosePreset, size = 'm'}: PresetsListProps) {\n    const ref = React.useRef<List<Preset>>(null);\n\n    React.useEffect(() => {\n        const list = ref.current;\n        const container = ref.current?.refContainer.current?.node as HTMLDivElement | undefined;\n        if (list && container) {\n            try {\n                container.setAttribute('tabindex', '0');\n                container.setAttribute('class', b('list-container'));\n                const handleFocus = () => {\n                    if (list.getActiveItem() === null) {\n                        list.activateItem(0, true);\n                    }\n                };\n                container.addEventListener('focus', handleFocus);\n                return () => {\n                    container.removeEventListener('focus', handleFocus);\n                };\n            } catch {\n                // Oooops\n            }\n        }\n        return undefined;\n    }, []);\n\n    return (\n        <List\n            ref={ref}\n            className={b('list')}\n            itemClassName={b('item')}\n            items={presets}\n            filterable={false}\n            virtualized={false}\n            renderItem={(item) => item.title}\n            itemHeight={SIZE_TO_ITEM_HEIGHT[size]}\n            onItemClick={(item) => {\n                onChoosePreset(item.from, item.to);\n            }}\n        />\n    );\n}\n"]}
+{"version":3,"file":"Presets.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/Presets/Presets.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;AA0Bb,0BAkDC;;;AA1ED,0DAA0B;AAG1B,6CAA4E;AAE5E,gDAA2C;AAG3C,0CAA4B;AAC5B,sCAA+D;AAG/D,yBAAwB;AAExB,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,oCAAoC,CAAC,CAAC;AAUtD,SAAgB,OAAO,CAAC,EACpB,SAAS,EACT,IAAI,GAAG,GAAG,EACV,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,UAAU,GACA;;IACV,MAAM,EAAC,CAAC,EAAC,GAAG,WAAI,CAAC,cAAc,EAAE,CAAC;IAClC,MAAM,IAAI,GAAG,eAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC5B,OAAO,IAAA,wBAAgB,EAAC,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,IAAA,4BAAoB,EAAC,EAAC,QAAQ,EAAE,CAAC,EAAC,CAAC,EAAE,EAAC,QAAQ,EAAC,CAAC,CAAC;IAC3F,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;IAExC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,MAAA,IAAI,CAAC,CAAC,CAAC,0CAAE,EAAE,CAAC,CAAC;IAEhE,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACpB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,mCAAI,IAAI,CAAC,CAAC,CAAC,CAAC;IACxE,IAAI,CAAC,SAAS,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,IAAI,SAAS,CAAC,EAAE,KAAK,WAAW,EAAE,CAAC;QAC/B,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IAC/B,CAAC;IAED,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAC,EAAE,SAAS,CAAC,YAChC,wBAAC,mBAAW,IAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,aACnD,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,uBAAC,eAAO,IAAC,IAAI,EAAE,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,YACnC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAC,EAAE,EAAE,KAAK,EAAC,EAAE,EAAE,CAAC,CACvB,uBAAC,WAAG,IAAU,KAAK,EAAE,EAAE,YAClB,KAAK,IADA,EAAE,CAEN,CACT,CAAC,GACI,GACR,EACN,uBAAC,gBAAQ,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,WAAW,YACjD,uBAAC,WAAW,IACR,OAAO,EAAE,SAAS,CAAC,OAAO,EAC1B,cAAc,EAAE,cAAc,EAC9B,IAAI,EAAE,IAAI,GACZ,GACK,IACD,GACZ,CACT,CAAC;AACN,CAAC;AACY,QAAA,mBAAmB,GAAG;IAC/B,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,EAAE,EAAE,EAAE;CACT,CAAC;AAOF,SAAS,WAAW,CAAC,EAAC,OAAO,EAAE,cAAc,EAAE,IAAI,GAAG,GAAG,EAAmB;IACxE,MAAM,GAAG,GAAG,eAAK,CAAC,MAAM,CAAe,IAAI,CAAC,CAAC;IAE7C,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;;QACjB,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO,CAAC;QACzB,MAAM,SAAS,GAAG,MAAA,MAAA,GAAG,CAAC,OAAO,0CAAE,YAAY,CAAC,OAAO,0CAAE,IAAkC,CAAC;QACxF,IAAI,IAAI,IAAI,SAAS,EAAE,CAAC;YACpB,IAAI,CAAC;gBACD,SAAS,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;gBACxC,SAAS,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC;gBACrD,MAAM,WAAW,GAAG,GAAG,EAAE;oBACrB,IAAI,IAAI,CAAC,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC;wBAChC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;oBAC/B,CAAC;gBACL,CAAC,CAAC;gBACF,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;gBACjD,OAAO,GAAG,EAAE;oBACR,SAAS,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;gBACxD,CAAC,CAAC;YACN,CAAC;YAAC,WAAM,CAAC;gBACL,SAAS;YACb,CAAC;QACL,CAAC;QACD,OAAO,SAAS,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,uBAAC,YAAI,IACD,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EACpB,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,EACxB,KAAK,EAAE,OAAO,EACd,UAAU,EAAE,KAAK,EACjB,WAAW,EAAE,KAAK,EAClB,UAAU,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,EAChC,UAAU,EAAE,2BAAmB,CAAC,IAAI,CAAC,EACrC,WAAW,EAAE,CAAC,IAAI,EAAE,EAAE;YAClB,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QACvC,CAAC,GACH,CACL,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {List, Tab, TabList, TabPanel, TabProvider} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\n\nimport type {Preset} from './defaultPresets';\nimport {i18n} from './i18n';\nimport {filterPresetTabs, getDefaultPresetTabs} from './utils';\nimport type {PresetTab} from './utils';\n\nimport './Presets.scss';\n\nconst b = block('relative-range-date-picker-presets');\n\nexport interface PresetProps {\n    className?: string;\n    onChoosePreset: (start: string, end: string) => void;\n    withTime?: boolean;\n    minValue?: DateTime;\n    size?: 's' | 'm' | 'l' | 'xl';\n    presetTabs?: PresetTab[];\n}\nexport function Presets({\n    className,\n    size = 'm',\n    minValue,\n    withTime,\n    onChoosePreset,\n    presetTabs,\n}: PresetProps) {\n    const {t} = i18n.useTranslation();\n    const tabs = React.useMemo(() => {\n        return filterPresetTabs(presetTabs ?? getDefaultPresetTabs({withTime, t}), {minValue});\n    }, [withTime, minValue, presetTabs, t]);\n\n    const [activeTabId, setActiveTab] = React.useState(tabs[0]?.id);\n\n    if (tabs.length === 0) {\n        return null;\n    }\n\n    const activeTab = tabs.find((tab) => tab.id === activeTabId) ?? tabs[0];\n    if (!activeTab) {\n        return null;\n    }\n\n    if (activeTab.id !== activeTabId) {\n        setActiveTab(activeTab.id);\n    }\n\n    return (\n        <div className={b({size}, className)}>\n            <TabProvider value={activeTabId} onUpdate={setActiveTab}>\n                <div className={b('tabs')}>\n                    <TabList size={size === 's' ? 'm' : size}>\n                        {tabs.map(({id, title}) => (\n                            <Tab key={id} value={id}>\n                                {title}\n                            </Tab>\n                        ))}\n                    </TabList>\n                </div>\n                <TabPanel className={b('content')} value={activeTabId}>\n                    <PresetsList\n                        presets={activeTab.presets}\n                        onChoosePreset={onChoosePreset}\n                        size={size}\n                    />\n                </TabPanel>\n            </TabProvider>\n        </div>\n    );\n}\nexport const SIZE_TO_ITEM_HEIGHT = {\n    s: 28,\n    m: 28,\n    l: 32,\n    xl: 36,\n};\n\ninterface PresetsListProps {\n    size?: 's' | 'm' | 'l' | 'xl';\n    presets: Preset[];\n    onChoosePreset: (start: string, end: string) => void;\n}\nfunction PresetsList({presets, onChoosePreset, size = 'm'}: PresetsListProps) {\n    const ref = React.useRef<List<Preset>>(null);\n\n    React.useEffect(() => {\n        const list = ref.current;\n        const container = ref.current?.refContainer.current?.node as HTMLDivElement | undefined;\n        if (list && container) {\n            try {\n                container.setAttribute('tabindex', '0');\n                container.setAttribute('class', b('list-container'));\n                const handleFocus = () => {\n                    if (list.getActiveItem() === null) {\n                        list.activateItem(0, true);\n                    }\n                };\n                container.addEventListener('focus', handleFocus);\n                return () => {\n                    container.removeEventListener('focus', handleFocus);\n                };\n            } catch {\n                // Oooops\n            }\n        }\n        return undefined;\n    }, []);\n\n    return (\n        <List\n            ref={ref}\n            className={b('list')}\n            itemClassName={b('item')}\n            items={presets}\n            filterable={false}\n            virtualized={false}\n            renderItem={(item) => item.title}\n            itemHeight={SIZE_TO_ITEM_HEIGHT[size]}\n            onItemClick={(item) => {\n                onChoosePreset(item.from, item.to);\n            }}\n        />\n    );\n}\n"]}

package/dist/cjs/components/RelativeRangeDatePicker/components/Presets/defaultPresets.d.ts

@@ -1,8 +1,12 @@
+import { i18n } from "./i18n/index.js";
 export interface Preset {
     from: string;
     to: string;
-    title: string;
+    title: React.ReactNode;
 }
+export declare function PresetTitle({ title, }: {
+    title: keyof (typeof i18n.keysetData)['g-date-relative-range-date-picker-presets'];
+}): string;
 export declare const DEFAULT_DATE_PRESETS: Preset[];
 export declare const DEFAULT_TIME_PRESETS: Preset[];
 export declare const DEFAULT_OTHERS_PRESETS: Preset[];