@gravity-ui/date-components 3.0.2 → 3.1.0

package/dist/esm/components/RelativeRangeDatePicker/types.d.ts

@@ -12,6 +12,7 @@ export interface RelativeRangeDatePickerRenderControlProps {
     errorMessage?: React.ReactNode;
     validationState?: 'invalid';
     open: boolean;
+    setOpen: (open: boolean) => void;
     triggerProps: RelativeRangeDatePickerTriggerProps;
 }
 export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerStateOptions, DomProps, AccessibilityProps, InputBase, InputDOMProps, TextInputProps, Validation, FocusableProps, StyleProps, PopupStyleProps {
@@ -25,9 +26,11 @@ export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerSta
     withZonesList?: boolean;
     /** Show relative range presets */
     withPresets?: boolean;
+    /** Show header with docs tooltip */
+    withHeader?: boolean;
     /** Custom preset tabs */
     presetTabs?: PresetTab[];
-    /** Custom docs for presets, if empty array docs will be hidden */
+    /** Custom docs for picker, if empty array docs will be hidden */
     docs?: Preset[];
     /** Show selected relative values as absolute dates */
     alwaysShowAsAbsolute?: boolean;

package/dist/esm/components/RelativeRangeDatePicker/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"../../../../src","sources":["components/RelativeRangeDatePicker/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {DateTime} from '@gravity-ui/date-utils';\n\nimport type {Value} from '../RelativeDatePicker';\nimport type {\n    AccessibilityProps,\n    DomProps,\n    FocusableProps,\n    InputBase,\n    InputDOMProps,\n    PopupStyleProps,\n    RangeValue,\n    StyleProps,\n    TextInputProps,\n    Validation,\n} from '../types';\n\nimport type {Preset} from './components/Presets/defaultPresets';\nimport type {PresetTab} from './components/Presets/utils';\nimport type {\n    RelativeRangeDatePickerStateOptions,\n    RelativeRangeDatePickerValue,\n} from './hooks/useRelativeRangeDatePickerState';\n\nexport type RelativeRangeDatePickerTriggerProps = Pick<\n    React.AllHTMLAttributes<HTMLElement>,\n    | 'id'\n    | 'role'\n    | 'aria-controls'\n    | 'aria-haspopup'\n    | 'aria-expanded'\n    | 'aria-label'\n    | 'aria-labelledby'\n    | 'aria-describedby'\n    | 'aria-details'\n    | 'onClick'\n    | 'onKeyDown'\n    | 'disabled'\n    | 'readOnly'\n>;\n\nexport interface RelativeRangeDatePickerRenderControlProps {\n    ref: React.Ref<HTMLElement>;\n    value: RelativeRangeDatePickerValue | null;\n    title: string;\n    errorMessage?: React.ReactNode;\n    validationState?: 'invalid';\n    open: boolean;\n    triggerProps: RelativeRangeDatePickerTriggerProps;\n}\n\nexport interface RelativeRangeDatePickerProps\n    extends RelativeRangeDatePickerStateOptions,\n        DomProps,\n        AccessibilityProps,\n        InputBase,\n        InputDOMProps,\n        TextInputProps,\n        Validation,\n        FocusableProps,\n        StyleProps,\n        PopupStyleProps {\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    /** Custom preset tabs */\n    presetTabs?: PresetTab[];\n    /** Custom docs for presets, if empty array docs will be hidden */\n    docs?: Preset[];\n    /** Show selected relative values as absolute dates */\n    alwaysShowAsAbsolute?: boolean;\n    /** */\n    getRangeTitle?: (value: RangeValue<Value | null> | null, timeZone: string) => string;\n    /** Handler that is called when the popup's open state changes. */\n    onOpenChange?: (open: boolean) => void;\n    /** Used to render control. */\n    renderControl?: (props: RelativeRangeDatePickerRenderControlProps) => React.ReactElement;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"../../../../src","sources":["components/RelativeRangeDatePicker/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {DateTime} from '@gravity-ui/date-utils';\n\nimport type {Value} from '../RelativeDatePicker';\nimport type {\n    AccessibilityProps,\n    DomProps,\n    FocusableProps,\n    InputBase,\n    InputDOMProps,\n    PopupStyleProps,\n    RangeValue,\n    StyleProps,\n    TextInputProps,\n    Validation,\n} from '../types';\n\nimport type {Preset} from './components/Presets/defaultPresets';\nimport type {PresetTab} from './components/Presets/utils';\nimport type {\n    RelativeRangeDatePickerStateOptions,\n    RelativeRangeDatePickerValue,\n} from './hooks/useRelativeRangeDatePickerState';\n\nexport type RelativeRangeDatePickerTriggerProps = Pick<\n    React.AllHTMLAttributes<HTMLElement>,\n    | 'id'\n    | 'role'\n    | 'aria-controls'\n    | 'aria-haspopup'\n    | 'aria-expanded'\n    | 'aria-label'\n    | 'aria-labelledby'\n    | 'aria-describedby'\n    | 'aria-details'\n    | 'onClick'\n    | 'onKeyDown'\n    | 'disabled'\n    | 'readOnly'\n>;\n\nexport interface RelativeRangeDatePickerRenderControlProps {\n    ref: React.Ref<HTMLElement>;\n    value: RelativeRangeDatePickerValue | null;\n    title: string;\n    errorMessage?: React.ReactNode;\n    validationState?: 'invalid';\n    open: boolean;\n    setOpen: (open: boolean) => void;\n    triggerProps: RelativeRangeDatePickerTriggerProps;\n}\n\nexport interface RelativeRangeDatePickerProps\n    extends RelativeRangeDatePickerStateOptions,\n        DomProps,\n        AccessibilityProps,\n        InputBase,\n        InputDOMProps,\n        TextInputProps,\n        Validation,\n        FocusableProps,\n        StyleProps,\n        PopupStyleProps {\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    /** 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    /** Show selected relative values as absolute dates */\n    alwaysShowAsAbsolute?: boolean;\n    /** */\n    getRangeTitle?: (value: RangeValue<Value | null> | null, timeZone: string) => string;\n    /** Handler that is called when the popup's open state changes. */\n    onOpenChange?: (open: boolean) => void;\n    /** Used to render control. */\n    renderControl?: (props: RelativeRangeDatePickerRenderControlProps) => React.ReactElement;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/date-components",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "",
   "license": "MIT",
   "type": "commonjs",

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

@@ -1,16 +0,0 @@
-.g-date-relative-range-date-picker-presets-doc {
-  padding: var(--g-spacing-4);
-}
-.g-date-relative-range-date-picker-presets-doc__button {
-  --g-button-background-color-hover: transparent;
-}
-.g-date-relative-range-date-picker-presets-doc__table_size_xl {
-  font-family: var(--g-text-body-font-family);
-  font-weight: var(--g-text-body-font-weight);
-  font-size: var(--g-text-body-2-font-size);
-  line-height: var(--g-text-body-2-line-height);
-}
-.g-date-relative-range-date-picker-presets-doc__table > table {
-  width: 100%;
-}
-/*# sourceMappingURL=PresetsDoc.css.map */

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

@@ -1 +0,0 @@
-{"version":3,"sources":["components/RelativeRangeDatePicker/components/Presets/data:;charset=utf-8,@use%20'@gravity-ui/uikit/variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drelative-range-date-picker-presets-doc';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20padding:%20var(--g-spacing-4);%0A%0A%20%20%20%20&__button%20%7B%0A%20%20%20%20%20%20%20%20--g-button-background-color-hover:%20transparent;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__table%20%7B%0A%20%20%20%20%20%20%20%20&_size_xl%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20@include%20mixins.text-body-2();%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&%20%3E%20table%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A","components/RelativeRangeDatePicker/components/Presets/file:/home/runner/work/date-components/date-components/node_modules/@gravity-ui/uikit/styles/mixins.scss"],"names":[],"mappings":"AAKA;EACI;;AAEA;EACI;;AAIA;EC4JJ;EACA;EACA;EACA;;AD3JI;EACI","sourcesContent":["@use '@gravity-ui/uikit/styles/mixins';\n@use '../../../variables';\n\n$block: '.#{variables.$ns}relative-range-date-picker-presets-doc';\n\n#{$block} {\n    padding: var(--g-spacing-4);\n\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 expand-interactive-area($h: 4px, $v: $h) {\n    position: relative;\n\n    &::after {\n        content: '';\n        position: absolute;\n        inset: logical (-$v) (-$h) (-$v);\n    }\n}\n\n@mixin max-height($height) {\n    max-height: $height;\n    overflow-y: auto;\n}\n\n@mixin max-text-width($width: 100%) {\n    @include overflow-ellipsis();\n\n    max-width: $width;\n}\n\n@mixin aspect-ratio($ratio) {\n    position: relative;\n\n    &::before {\n        display: block;\n        content: '';\n        width: 100%;\n        padding-block-start: $ratio * 100%;\n    }\n\n    > *:only-child {\n        position: absolute;\n        inset: 0;\n    }\n}\n\n@function get-pin-selector($mod, $selector, $append: true) {\n    @if $append {\n        @return selector.append($mod, $selector);\n    } @else {\n        @return list.join($mod, $selector, $separator: space);\n    }\n}\n\n@mixin pin($block, $selectors, $radius, $append: true) {\n    @each $selector in $selectors {\n        &#{get-pin-selector(#{$block}_pin_round-round, $selector, $append)} {\n            border-radius: $radius;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-brick, $selector, $append)} {\n            border-radius: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-clear, $selector, $append)} {\n            border-radius: 0;\n            border-inline: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_circle-circle, $selector, $append)} {\n            border-radius: 100px;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_round-brick, $selector, $append)} {\n            border-start-start-radius: $radius;\n            border-start-end-radius: 0;\n            border-end-start-radius: $radius;\n            border-end-end-radius: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-round, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: $radius;\n            border-end-start-radius: 0;\n            border-end-end-radius: $radius;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_round-clear, $selector, $append)} {\n            border-start-start-radius: $radius;\n            border-start-end-radius: 0;\n            border-end-start-radius: $radius;\n            border-end-end-radius: 0;\n            border-inline-end: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-round, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: $radius;\n            border-end-start-radius: 0;\n            border-end-end-radius: $radius;\n            border-inline-start: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-clear, $selector, $append)} {\n            border-radius: 0;\n            border-inline-end: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-brick, $selector, $append)} {\n            border-radius: 0;\n            border-inline-start: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_circle-brick, $selector, $append)} {\n            border-start-start-radius: 100px;\n            border-start-end-radius: 0;\n            border-end-start-radius: 100px;\n            border-end-end-radius: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-circle, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: 100px;\n            border-end-start-radius: 0;\n            border-end-end-radius: 100px;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_circle-clear, $selector, $append)} {\n            border-start-start-radius: 100px;\n            border-start-end-radius: 0;\n            border-end-start-radius: 100px;\n            border-end-end-radius: 0;\n            border-inline-end: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-circle, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: 100px;\n            border-end-start-radius: 0;\n            border-end-end-radius: 100px;\n            border-inline-start: 0;\n        }\n    }\n}\n\n// Typography\n\n@mixin text-body-1() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-1-font-size);\n    line-height: var(--g-text-body-1-line-height);\n}\n\n@mixin text-body-2() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-2-font-size);\n    line-height: var(--g-text-body-2-line-height);\n}\n\n@mixin text-body-3() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-3-font-size);\n    line-height: var(--g-text-body-3-line-height);\n}\n\n@mixin text-body-short() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-short-font-size);\n    line-height: var(--g-text-body-short-line-height);\n}\n\n@mixin text-caption-1() {\n    font-family: var(--g-text-caption-font-family);\n    font-weight: var(--g-text-caption-font-weight);\n    font-size: var(--g-text-caption-1-font-size);\n    line-height: var(--g-text-caption-1-line-height);\n}\n\n@mixin text-caption-2() {\n    font-family: var(--g-text-caption-font-family);\n    font-weight: var(--g-text-caption-font-weight);\n    font-size: var(--g-text-caption-2-font-size);\n    line-height: var(--g-text-caption-2-line-height);\n}\n\n@mixin text-header-1() {\n    font-family: var(--g-text-header-font-family);\n    font-weight: var(--g-text-header-font-weight);\n    font-size: var(--g-text-header-1-font-size);\n    line-height: var(--g-text-header-1-line-height);\n}\n\n@mixin text-header-2() {\n    font-family: var(--g-text-header-font-family);\n    font-weight: var(--g-text-header-font-weight);\n    font-size: var(--g-text-header-2-font-size);\n    line-height: var(--g-text-header-2-line-height);\n}\n\n@mixin text-subheader-1() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-1-font-size);\n    line-height: var(--g-text-subheader-1-line-height);\n}\n\n@mixin text-subheader-2() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-2-font-size);\n    line-height: var(--g-text-subheader-2-line-height);\n}\n\n@mixin text-subheader-3() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-3-font-size);\n    line-height: var(--g-text-subheader-3-line-height);\n}\n\n@mixin text-display-1() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-1-font-size);\n    line-height: var(--g-text-display-1-line-height);\n}\n\n@mixin text-display-2() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-2-font-size);\n    line-height: var(--g-text-display-2-line-height);\n}\n\n@mixin text-display-3() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-3-font-size);\n    line-height: var(--g-text-display-3-line-height);\n}\n\n@mixin text-display-4() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-4-font-size);\n    line-height: var(--g-text-display-4-line-height);\n}\n\n@mixin text-code-1() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-1-font-size);\n    line-height: var(--g-text-code-1-line-height);\n}\n\n@mixin text-code-2() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-2-font-size);\n    line-height: var(--g-text-code-2-line-height);\n}\n\n@mixin text-code-3() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-3-font-size);\n    line-height: var(--g-text-code-3-line-height);\n}\n\n@mixin text-code-inline-1() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-1-font-size);\n    line-height: var(--g-text-code-inline-1-line-height);\n}\n\n@mixin text-code-inline-2() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-2-font-size);\n    line-height: var(--g-text-code-inline-2-line-height);\n}\n\n@mixin text-code-inline-3() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-3-font-size);\n    line-height: var(--g-text-code-inline-3-line-height);\n}\n\n@mixin text-accent() {\n    font-weight: var(--g-text-accent-font-weight);\n}\n\n@mixin loading($loading-color-1: rgba(255, 255, 255, 0.3), $loading-color-2: transparent) {\n    background-image: repeating-linear-gradient(\n        -45deg,\n        $loading-color-1,\n        $loading-color-1 4px,\n        $loading-color-2 4px,\n        $loading-color-2 8px\n    );\n    background-size: 150%;\n    background-clip: padding-box;\n\n    // stylelint-disable-next-line no-unknown-animations\n    animation: g-loading-animation 0.5s linear infinite;\n}\n\n@mixin scrollbar() {\n    &::-webkit-scrollbar,\n    *::-webkit-scrollbar {\n        width: var(--g-scrollbar-width);\n        height: var(--g-scrollbar-width);\n        background: var(--g-color-scroll-track);\n    }\n\n    &::-webkit-scrollbar-track,\n    *::-webkit-scrollbar-track {\n        background: var(--g-color-scroll-track);\n    }\n\n    &::-webkit-scrollbar-corner,\n    *::-webkit-scrollbar-corner {\n        background: var(--g-color-scroll-corner);\n    }\n\n    &::-webkit-scrollbar-thumb,\n    *::-webkit-scrollbar-thumb {\n        background: var(--g-color-scroll-handle);\n    }\n\n    &::-webkit-scrollbar-thumb:hover,\n    *::-webkit-scrollbar-thumb:hover {\n        background: var(--g-color-scroll-handle-hover);\n    }\n}\n"],"file":"PresetsDoc.css"}

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

@@ -1,9 +0,0 @@
-import type { Preset } from "./defaultPresets.js";
-import "./PresetsDoc.css";
-interface PresetsDocProps {
-    className?: string;
-    size?: 's' | 'm' | 'l' | 'xl';
-    docs?: Preset[];
-}
-export declare function PresetsDoc({ className, size, docs }: PresetsDocProps): import("react/jsx-runtime").JSX.Element | null;
-export {};

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

@@ -1,94 +0,0 @@
-'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PresetsDoc = PresetsDoc;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-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 i18n_1 = require("./i18n/index.js");
-require("./PresetsDoc.css");
-const b = (0, cn_1.block)('relative-range-date-picker-presets-doc');
-const columns = [
-    {
-        id: 'title',
-        name: () => {
-            return (0, i18n_1.i18n)('Range');
-        },
-    },
-    {
-        id: 'from',
-        name: () => {
-            return (0, i18n_1.i18n)('From');
-        },
-    },
-    {
-        id: 'to',
-        name: () => {
-            return (0, i18n_1.i18n)('To');
-        },
-    },
-];
-const data = [
-    {
-        get title() {
-            return (0, i18n_1.i18n)('Last 5 minutes');
-        },
-        from: 'now - 5m',
-        to: 'now',
-    },
-    {
-        get title() {
-            return (0, i18n_1.i18n)('From start of day');
-        },
-        from: 'now/d',
-        to: 'now',
-    },
-    {
-        get title() {
-            return (0, i18n_1.i18n)('This week');
-        },
-        from: 'now/w',
-        to: 'now/w',
-    },
-    {
-        get title() {
-            return (0, i18n_1.i18n)('From start of week');
-        },
-        from: 'now/w',
-        to: 'now',
-    },
-    {
-        get title() {
-            return (0, i18n_1.i18n)('Previous month');
-        },
-        from: 'now - 1M/M',
-        to: 'now - 1M/M',
-    },
-];
-function PresetsExamples({ size, docs }) {
-    return (0, jsx_runtime_1.jsx)(uikit_1.Table, { columns: columns, data: docs, className: b('table', { size }) });
-}
-function DesktopDoc({ className, size, docs }) {
-    return ((0, jsx_runtime_1.jsx)(uikit_1.Popover, { className: b(null), hasArrow: false, content: (0, jsx_runtime_1.jsx)(PresetsExamples, { size: size, docs: docs }), children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('button', className), view: "flat-secondary", size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(size), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.CircleQuestion }) }) }));
-}
-function MobileDoc({ className, size, docs }) {
-    const [open, setOpen] = react_1.default.useState(false);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('button'), view: "flat-secondary", size: "l", onClick: () => {
-                    setOpen(true);
-                }, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.CircleQuestion }) }), (0, jsx_runtime_1.jsx)(uikit_1.Sheet, { visible: open, onClose: () => setOpen(false), children: (0, jsx_runtime_1.jsx)(PresetsExamples, { size: size, docs: docs }) })] }));
-}
-function PresetsDoc({ className, size, docs = data }) {
-    const isMobile = (0, uikit_1.useMobile)();
-    if (!Array.isArray(docs) || docs.length === 0) {
-        return null;
-    }
-    if (isMobile) {
-        return (0, jsx_runtime_1.jsx)(MobileDoc, { className: className, size: size, docs: docs });
-    }
-    return (0, jsx_runtime_1.jsx)(DesktopDoc, { className: className, size: size, docs: docs });
-}
-//# sourceMappingURL=PresetsDoc.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"PresetsDoc.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/Presets/PresetsDoc.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';\n\nimport type {Preset} from './defaultPresets';\nimport {i18n} from './i18n';\n\nimport './PresetsDoc.scss';\n\nconst b = block('relative-range-date-picker-presets-doc');\n\nconst columns: TableColumnConfig<Preset>[] = [\n    {\n        id: 'title',\n        name: () => {\n            return i18n('Range');\n        },\n    },\n    {\n        id: 'from',\n        name: () => {\n            return i18n('From');\n        },\n    },\n    {\n        id: 'to',\n        name: () => {\n            return i18n('To');\n        },\n    },\n];\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 PresetsExamplesProps {\n    size?: 's' | 'm' | 'l' | 'xl';\n    docs: Preset[];\n}\nfunction PresetsExamples({size, docs}: PresetsExamplesProps) {\n    return <Table columns={columns} data={docs} className={b('table', {size})} />;\n}\n\ninterface DesktopDocProps {\n    className?: string;\n    size?: 's' | 'm' | 'l' | 'xl';\n    docs: Preset[];\n}\nfunction DesktopDoc({className, size, docs}: DesktopDocProps) {\n    return (\n        <Popover\n            className={b(null)}\n            hasArrow={false}\n            content={<PresetsExamples size={size} docs={docs} />}\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 {\n    className?: string;\n    size?: 's' | 'm' | 'l' | 'xl';\n    docs: Preset[];\n}\nfunction MobileDoc({className, size, docs}: 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                <PresetsExamples size={size} docs={docs} />\n            </Sheet>\n        </div>\n    );\n}\n\ninterface PresetsDocProps {\n    className?: string;\n    size?: 's' | 'm' | 'l' | 'xl';\n    docs?: Preset[];\n}\n\nexport function PresetsDoc({className, size, docs = data}: 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 className={className} size={size} docs={docs} />;\n    }\n\n    return <DesktopDoc className={className} size={size} docs={docs} />;\n}\n"]}

package/dist/esm/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.css

@@ -1,16 +0,0 @@
-.g-date-relative-range-date-picker-presets-doc {
-  padding: var(--g-spacing-4);
-}
-.g-date-relative-range-date-picker-presets-doc__button {
-  --g-button-background-color-hover: transparent;
-}
-.g-date-relative-range-date-picker-presets-doc__table_size_xl {
-  font-family: var(--g-text-body-font-family);
-  font-weight: var(--g-text-body-font-weight);
-  font-size: var(--g-text-body-2-font-size);
-  line-height: var(--g-text-body-2-line-height);
-}
-.g-date-relative-range-date-picker-presets-doc__table > table {
-  width: 100%;
-}
-/*# sourceMappingURL=PresetsDoc.css.map */

package/dist/esm/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["components/RelativeRangeDatePicker/components/Presets/data:;charset=utf-8,@use%20'@gravity-ui/uikit/variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drelative-range-date-picker-presets-doc';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20padding:%20var(--g-spacing-4);%0A%0A%20%20%20%20&__button%20%7B%0A%20%20%20%20%20%20%20%20--g-button-background-color-hover:%20transparent;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__table%20%7B%0A%20%20%20%20%20%20%20%20&_size_xl%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20@include%20mixins.text-body-2();%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&%20%3E%20table%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A","components/RelativeRangeDatePicker/components/Presets/file:/home/runner/work/date-components/date-components/node_modules/@gravity-ui/uikit/styles/mixins.scss"],"names":[],"mappings":"AAKA;EACI;;AAEA;EACI;;AAIA;EC4JJ;EACA;EACA;EACA;;AD3JI;EACI","sourcesContent":["@use '@gravity-ui/uikit/styles/mixins';\n@use '../../../variables';\n\n$block: '.#{variables.$ns}relative-range-date-picker-presets-doc';\n\n#{$block} {\n    padding: var(--g-spacing-4);\n\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 expand-interactive-area($h: 4px, $v: $h) {\n    position: relative;\n\n    &::after {\n        content: '';\n        position: absolute;\n        inset: logical (-$v) (-$h) (-$v);\n    }\n}\n\n@mixin max-height($height) {\n    max-height: $height;\n    overflow-y: auto;\n}\n\n@mixin max-text-width($width: 100%) {\n    @include overflow-ellipsis();\n\n    max-width: $width;\n}\n\n@mixin aspect-ratio($ratio) {\n    position: relative;\n\n    &::before {\n        display: block;\n        content: '';\n        width: 100%;\n        padding-block-start: $ratio * 100%;\n    }\n\n    > *:only-child {\n        position: absolute;\n        inset: 0;\n    }\n}\n\n@function get-pin-selector($mod, $selector, $append: true) {\n    @if $append {\n        @return selector.append($mod, $selector);\n    } @else {\n        @return list.join($mod, $selector, $separator: space);\n    }\n}\n\n@mixin pin($block, $selectors, $radius, $append: true) {\n    @each $selector in $selectors {\n        &#{get-pin-selector(#{$block}_pin_round-round, $selector, $append)} {\n            border-radius: $radius;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-brick, $selector, $append)} {\n            border-radius: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-clear, $selector, $append)} {\n            border-radius: 0;\n            border-inline: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_circle-circle, $selector, $append)} {\n            border-radius: 100px;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_round-brick, $selector, $append)} {\n            border-start-start-radius: $radius;\n            border-start-end-radius: 0;\n            border-end-start-radius: $radius;\n            border-end-end-radius: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-round, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: $radius;\n            border-end-start-radius: 0;\n            border-end-end-radius: $radius;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_round-clear, $selector, $append)} {\n            border-start-start-radius: $radius;\n            border-start-end-radius: 0;\n            border-end-start-radius: $radius;\n            border-end-end-radius: 0;\n            border-inline-end: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-round, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: $radius;\n            border-end-start-radius: 0;\n            border-end-end-radius: $radius;\n            border-inline-start: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-clear, $selector, $append)} {\n            border-radius: 0;\n            border-inline-end: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-brick, $selector, $append)} {\n            border-radius: 0;\n            border-inline-start: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_circle-brick, $selector, $append)} {\n            border-start-start-radius: 100px;\n            border-start-end-radius: 0;\n            border-end-start-radius: 100px;\n            border-end-end-radius: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-circle, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: 100px;\n            border-end-start-radius: 0;\n            border-end-end-radius: 100px;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_circle-clear, $selector, $append)} {\n            border-start-start-radius: 100px;\n            border-start-end-radius: 0;\n            border-end-start-radius: 100px;\n            border-end-end-radius: 0;\n            border-inline-end: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-circle, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: 100px;\n            border-end-start-radius: 0;\n            border-end-end-radius: 100px;\n            border-inline-start: 0;\n        }\n    }\n}\n\n// Typography\n\n@mixin text-body-1() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-1-font-size);\n    line-height: var(--g-text-body-1-line-height);\n}\n\n@mixin text-body-2() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-2-font-size);\n    line-height: var(--g-text-body-2-line-height);\n}\n\n@mixin text-body-3() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-3-font-size);\n    line-height: var(--g-text-body-3-line-height);\n}\n\n@mixin text-body-short() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-short-font-size);\n    line-height: var(--g-text-body-short-line-height);\n}\n\n@mixin text-caption-1() {\n    font-family: var(--g-text-caption-font-family);\n    font-weight: var(--g-text-caption-font-weight);\n    font-size: var(--g-text-caption-1-font-size);\n    line-height: var(--g-text-caption-1-line-height);\n}\n\n@mixin text-caption-2() {\n    font-family: var(--g-text-caption-font-family);\n    font-weight: var(--g-text-caption-font-weight);\n    font-size: var(--g-text-caption-2-font-size);\n    line-height: var(--g-text-caption-2-line-height);\n}\n\n@mixin text-header-1() {\n    font-family: var(--g-text-header-font-family);\n    font-weight: var(--g-text-header-font-weight);\n    font-size: var(--g-text-header-1-font-size);\n    line-height: var(--g-text-header-1-line-height);\n}\n\n@mixin text-header-2() {\n    font-family: var(--g-text-header-font-family);\n    font-weight: var(--g-text-header-font-weight);\n    font-size: var(--g-text-header-2-font-size);\n    line-height: var(--g-text-header-2-line-height);\n}\n\n@mixin text-subheader-1() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-1-font-size);\n    line-height: var(--g-text-subheader-1-line-height);\n}\n\n@mixin text-subheader-2() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-2-font-size);\n    line-height: var(--g-text-subheader-2-line-height);\n}\n\n@mixin text-subheader-3() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-3-font-size);\n    line-height: var(--g-text-subheader-3-line-height);\n}\n\n@mixin text-display-1() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-1-font-size);\n    line-height: var(--g-text-display-1-line-height);\n}\n\n@mixin text-display-2() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-2-font-size);\n    line-height: var(--g-text-display-2-line-height);\n}\n\n@mixin text-display-3() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-3-font-size);\n    line-height: var(--g-text-display-3-line-height);\n}\n\n@mixin text-display-4() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-4-font-size);\n    line-height: var(--g-text-display-4-line-height);\n}\n\n@mixin text-code-1() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-1-font-size);\n    line-height: var(--g-text-code-1-line-height);\n}\n\n@mixin text-code-2() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-2-font-size);\n    line-height: var(--g-text-code-2-line-height);\n}\n\n@mixin text-code-3() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-3-font-size);\n    line-height: var(--g-text-code-3-line-height);\n}\n\n@mixin text-code-inline-1() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-1-font-size);\n    line-height: var(--g-text-code-inline-1-line-height);\n}\n\n@mixin text-code-inline-2() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-2-font-size);\n    line-height: var(--g-text-code-inline-2-line-height);\n}\n\n@mixin text-code-inline-3() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-3-font-size);\n    line-height: var(--g-text-code-inline-3-line-height);\n}\n\n@mixin text-accent() {\n    font-weight: var(--g-text-accent-font-weight);\n}\n\n@mixin loading($loading-color-1: rgba(255, 255, 255, 0.3), $loading-color-2: transparent) {\n    background-image: repeating-linear-gradient(\n        -45deg,\n        $loading-color-1,\n        $loading-color-1 4px,\n        $loading-color-2 4px,\n        $loading-color-2 8px\n    );\n    background-size: 150%;\n    background-clip: padding-box;\n\n    // stylelint-disable-next-line no-unknown-animations\n    animation: g-loading-animation 0.5s linear infinite;\n}\n\n@mixin scrollbar() {\n    &::-webkit-scrollbar,\n    *::-webkit-scrollbar {\n        width: var(--g-scrollbar-width);\n        height: var(--g-scrollbar-width);\n        background: var(--g-color-scroll-track);\n    }\n\n    &::-webkit-scrollbar-track,\n    *::-webkit-scrollbar-track {\n        background: var(--g-color-scroll-track);\n    }\n\n    &::-webkit-scrollbar-corner,\n    *::-webkit-scrollbar-corner {\n        background: var(--g-color-scroll-corner);\n    }\n\n    &::-webkit-scrollbar-thumb,\n    *::-webkit-scrollbar-thumb {\n        background: var(--g-color-scroll-handle);\n    }\n\n    &::-webkit-scrollbar-thumb:hover,\n    *::-webkit-scrollbar-thumb:hover {\n        background: var(--g-color-scroll-handle-hover);\n    }\n}\n"],"file":"PresetsDoc.css"}

package/dist/esm/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.d.ts

@@ -1,9 +0,0 @@
-import type { Preset } from "./defaultPresets.js";
-import "./PresetsDoc.css";
-interface PresetsDocProps {
-    className?: string;
-    size?: 's' | 'm' | 'l' | 'xl';
-    docs?: Preset[];
-}
-export declare function PresetsDoc({ className, size, docs }: PresetsDocProps): import("react/jsx-runtime").JSX.Element | null;
-export {};

package/dist/esm/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.js

@@ -1,90 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { CircleQuestion } from '@gravity-ui/icons';
-import { Button, Icon, Popover, Sheet, Table, useMobile } from '@gravity-ui/uikit';
-import { block } from "../../../../utils/cn.js";
-import { getButtonSizeForInput } from "../../../utils/getButtonSizeForInput.js";
-import { i18n } from "./i18n/index.js";
-import "./PresetsDoc.css";
-const b = block('relative-range-date-picker-presets-doc');
-const columns = [
-    {
-        id: 'title',
-        name: () => {
-            return i18n('Range');
-        },
-    },
-    {
-        id: 'from',
-        name: () => {
-            return i18n('From');
-        },
-    },
-    {
-        id: 'to',
-        name: () => {
-            return i18n('To');
-        },
-    },
-];
-const data = [
-    {
-        get title() {
-            return i18n('Last 5 minutes');
-        },
-        from: 'now - 5m',
-        to: 'now',
-    },
-    {
-        get title() {
-            return i18n('From start of day');
-        },
-        from: 'now/d',
-        to: 'now',
-    },
-    {
-        get title() {
-            return i18n('This week');
-        },
-        from: 'now/w',
-        to: 'now/w',
-    },
-    {
-        get title() {
-            return i18n('From start of week');
-        },
-        from: 'now/w',
-        to: 'now',
-    },
-    {
-        get title() {
-            return i18n('Previous month');
-        },
-        from: 'now - 1M/M',
-        to: 'now - 1M/M',
-    },
-];
-function PresetsExamples({ size, docs }) {
-    return _jsx(Table, { columns: columns, data: docs, className: b('table', { size }) });
-}
-function DesktopDoc({ className, size, docs }) {
-    return (_jsx(Popover, { className: b(null), hasArrow: false, content: _jsx(PresetsExamples, { size: size, docs: docs }), children: _jsx(Button, { className: b('button', className), view: "flat-secondary", size: getButtonSizeForInput(size), children: _jsx(Icon, { data: CircleQuestion }) }) }));
-}
-function MobileDoc({ className, size, docs }) {
-    const [open, setOpen] = React.useState(false);
-    return (_jsxs("div", { className: b(null, className), children: [_jsx(Button, { className: b('button'), view: "flat-secondary", size: "l", onClick: () => {
-                    setOpen(true);
-                }, children: _jsx(Icon, { data: CircleQuestion }) }), _jsx(Sheet, { visible: open, onClose: () => setOpen(false), children: _jsx(PresetsExamples, { size: size, docs: docs }) })] }));
-}
-export function PresetsDoc({ className, size, docs = data }) {
-    const isMobile = useMobile();
-    if (!Array.isArray(docs) || docs.length === 0) {
-        return null;
-    }
-    if (isMobile) {
-        return _jsx(MobileDoc, { className: className, size: size, docs: docs });
-    }
-    return _jsx(DesktopDoc, { className: className, size: size, docs: docs });
-}
-//# sourceMappingURL=PresetsDoc.js.map

package/dist/esm/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PresetsDoc.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/Presets/PresetsDoc.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';\n\nimport type {Preset} from './defaultPresets';\nimport {i18n} from './i18n';\n\nimport './PresetsDoc.scss';\n\nconst b = block('relative-range-date-picker-presets-doc');\n\nconst columns: TableColumnConfig<Preset>[] = [\n    {\n        id: 'title',\n        name: () => {\n            return i18n('Range');\n        },\n    },\n    {\n        id: 'from',\n        name: () => {\n            return i18n('From');\n        },\n    },\n    {\n        id: 'to',\n        name: () => {\n            return i18n('To');\n        },\n    },\n];\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 PresetsExamplesProps {\n    size?: 's' | 'm' | 'l' | 'xl';\n    docs: Preset[];\n}\nfunction PresetsExamples({size, docs}: PresetsExamplesProps) {\n    return <Table columns={columns} data={docs} className={b('table', {size})} />;\n}\n\ninterface DesktopDocProps {\n    className?: string;\n    size?: 's' | 'm' | 'l' | 'xl';\n    docs: Preset[];\n}\nfunction DesktopDoc({className, size, docs}: DesktopDocProps) {\n    return (\n        <Popover\n            className={b(null)}\n            hasArrow={false}\n            content={<PresetsExamples size={size} docs={docs} />}\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 {\n    className?: string;\n    size?: 's' | 'm' | 'l' | 'xl';\n    docs: Preset[];\n}\nfunction MobileDoc({className, size, docs}: 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                <PresetsExamples size={size} docs={docs} />\n            </Sheet>\n        </div>\n    );\n}\n\ninterface PresetsDocProps {\n    className?: string;\n    size?: 's' | 'm' | 'l' | 'xl';\n    docs?: Preset[];\n}\n\nexport function PresetsDoc({className, size, docs = data}: 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 className={className} size={size} docs={docs} />;\n    }\n\n    return <DesktopDoc className={className} size={size} docs={docs} />;\n}\n"]}