npm - @gravity-ui/date-components - Versions diffs - 3.0.2 → 3.1.0 - Mend

@gravity-ui/date-components 3.0.2 → 3.1.0

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

Files changed (93) hide show

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.js CHANGED Viewed

@@ -7,10 +7,13 @@ import { PickerForm } from "./PickerForm.js";
 import "./PickerDialog.css";
 const b = block('relative-range-date-picker-dialog');
 export function PickerDialog(_a) {
-    var { open, onClose, isMobile, anchor, popupClassName, popupStyle, popupPlacement, popupOffset, modal } = _a, props = __rest(_a, ["open", "onClose", "isMobile", "anchor", "popupClassName", "popupStyle", "popupPlacement", "popupOffset", "modal"]);
+    var { open, onClose, isMobile, anchor, popupClassName, popupStyle, popupPlacement, popupOffset, modal, returnFocus = false, onRemove } = _a, props = __rest(_a, ["open", "onClose", "isMobile", "anchor", "popupClassName", "popupStyle", "popupPlacement", "popupOffset", "modal", "returnFocus", "onRemove"]);
     if (isMobile) {
         return (_jsx(Sheet, { visible: open, onClose: () => {
                 onClose('outside-press');
+                setTimeout(() => {
+                    onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+                });
             }, contentClassName: b('content', { mobile: true, size: 'xl' }, popupClassName), children: _jsx(PickerForm, Object.assign({}, props, { size: "xl", onApply: () => {
                     onClose('apply');
                 } })) }));
@@ -19,7 +22,7 @@ export function PickerDialog(_a) {
             if (!isOpen) {
                 onClose(reason);
             }
-        }, placement: popupPlacement, offset: popupOffset, role: "dialog", anchorElement: anchor, className: b('content', { size: props.size }, popupClassName), style: popupStyle, modal: modal, children: _jsx(PickerForm, Object.assign({}, props, { onApply: () => {
+        }, placement: popupPlacement, offset: popupOffset, role: "dialog", anchorElement: anchor, className: b('content', { size: props.size }, popupClassName), style: popupStyle, modal: modal, returnFocus: returnFocus, onTransitionOutComplete: onRemove, children: _jsx(PickerForm, Object.assign({}, props, { onApply: () => {
                 onClose('apply');
             } })) }));
 }

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PickerDialog.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AAEb,OAAO,EAAC,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAG/C,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAG3C,OAAO,EAAC,UAAU,EAAC,wBAAqB;AAGxC,4BAA6B;AAE7B,MAAM,CAAC,GAAG,KAAK,CAAC,mCAAmC,CAAC,CAAC;~~AAerD~~,MAAM,UAAU,YAAY,CAAC,~~EAWT~~;~~QAXS~~,EACzB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,MAAM,EACN,cAAc,EACd,UAAU,EACV,cAAc,EACd,WAAW,EACX,KAAK,~~OAEW~~,EADb,KAAK,~~cAViB~~,~~mHAW5B~~,CADW;IAER,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,CACH,KAAC,KAAK,IACF,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,GAAG,EAAE;gBACV,OAAO,CAAC,eAAe,CAAC,CAAC;~~YAC7B~~,CAAC,EACD,gBAAgB,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,EAAE,cAAc,CAAC,YAE1E,KAAC,UAAU,oBACH,KAAK,IACT,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE;oBACV,OAAO,CAAC,OAAO,CAAC,CAAC;gBACrB,CAAC,IACH,GACE,CACX,CAAC;IACN,CAAC;IAED,OAAO,CACH,KAAC,KAAK,IACF,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE;YACrC,IAAI,CAAC,MAAM,EAAE,CAAC;gBACV,OAAO,CAAC,MAAM,CAAC,CAAC;YACpB,CAAC;QACL,CAAC,EACD,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,WAAW,EACnB,IAAI,EAAC,QAAQ,EACb,aAAa,EAAE,MAAM,EACrB,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAC,EAAE,cAAc,CAAC,EAC3D,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,KAAK,~~YAEZ~~,KAAC,UAAU,oBACH,KAAK,IACT,OAAO,EAAE,GAAG,EAAE;gBACV,OAAO,CAAC,OAAO,CAAC,CAAC;YACrB,CAAC,IACH,GACE,CACX,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport {Popup, Sheet} from '@gravity-ui/uikit';\nimport type {PopupProps} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport type {PopupStyleProps} from '../../../types';\n\nimport {PickerForm} from './PickerForm';\nimport type {PickerFormProps} from './PickerForm';\n\nimport './PickerDialog.scss';\n\nconst b = block('relative-range-date-picker-dialog');\n\nexport interface PickerDialogProps extends PickerFormProps, PopupStyleProps {\n /** Popup anchor /\n anchor: HTMLElement \| null;\n /* Manages `Popup` visibility /\n open: boolean;\n /* Handles popup close event /\n onClose: (reason?: Parameters<NonNullable<PopupProps['onOpenChange']>>[2] \| 'apply') => void;\n /* If true `Popup` act like a modal dialog /\n modal?: boolean;\n /* If true `Sheet` is used instead of `Popup` */\n isMobile?: boolean;\n}\n\nexport function PickerDialog({\n open,\n onClose,\n isMobile,\n anchor,\n popupClassName,\n popupStyle,\n popupPlacement,\n popupOffset,\n modal,\n ...props\n}: PickerDialogProps) {\n if (isMobile) {\n return (\n <Sheet\n visible={open}\n onClose={() => {\n onClose('outside-press');\n }}\n contentClassName={b('content', {mobile: true, size: 'xl'}, popupClassName)}\n >\n <PickerForm\n {...props}\n size=\"xl\"\n onApply={() => {\n onClose('apply');\n }}\n />\n </Sheet>\n );\n }\n\n return (\n <Popup\n open={open}\n onOpenChange={(isOpen, _event, reason) => {\n if (!isOpen) {\n onClose(reason);\n }\n }}\n placement={popupPlacement}\n offset={popupOffset}\n role=\"dialog\"\n anchorElement={anchor}\n className={b('content', {size: props.size}, popupClassName)}\n style={popupStyle}\n modal={modal}\n >\n <PickerForm\n {...props}\n onApply={() => {\n onClose('apply');\n }}\n />\n </Popup>\n );\n}\n"]}
1	+ {"version":3,"file":"PickerDialog.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AAEb,OAAO,EAAC,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAG/C,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAG3C,OAAO,EAAC,UAAU,EAAC,wBAAqB;AAGxC,4BAA6B;AAE7B,MAAM,CAAC,GAAG,KAAK,CAAC,mCAAmC,CAAC,CAAC;AAmBrD,MAAM,UAAU,YAAY,CAAC,EAaT;QAbS,EACzB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,MAAM,EACN,cAAc,EACd,UAAU,EACV,cAAc,EACd,WAAW,EACX,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,QAAQ,OAEQ,EADb,KAAK,cAZiB,8IAa5B,CADW;IAER,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,CACH,KAAC,KAAK,IACF,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,GAAG,EAAE;gBACV,OAAO,CAAC,eAAe,CAAC,CAAC;gBACzB,UAAU,CAAC,GAAG,EAAE;oBACZ,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAC;gBACjB,CAAC,CAAC,CAAC;YACP,CAAC,EACD,gBAAgB,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,EAAE,cAAc,CAAC,YAE1E,KAAC,UAAU,oBACH,KAAK,IACT,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE;oBACV,OAAO,CAAC,OAAO,CAAC,CAAC;gBACrB,CAAC,IACH,GACE,CACX,CAAC;IACN,CAAC;IAED,OAAO,CACH,KAAC,KAAK,IACF,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE;YACrC,IAAI,CAAC,MAAM,EAAE,CAAC;gBACV,OAAO,CAAC,MAAM,CAAC,CAAC;YACpB,CAAC;QACL,CAAC,EACD,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,WAAW,EACnB,IAAI,EAAC,QAAQ,EACb,aAAa,EAAE,MAAM,EACrB,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAC,EAAE,cAAc,CAAC,EAC3D,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,uBAAuB,EAAE,QAAQ,YAEjC,KAAC,UAAU,oBACH,KAAK,IACT,OAAO,EAAE,GAAG,EAAE;gBACV,OAAO,CAAC,OAAO,CAAC,CAAC;YACrB,CAAC,IACH,GACE,CACX,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport {Popup, Sheet} from '@gravity-ui/uikit';\nimport type {PopupProps} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport type {PopupStyleProps} from '../../../types';\n\nimport {PickerForm} from './PickerForm';\nimport type {PickerFormProps} from './PickerForm';\n\nimport './PickerDialog.scss';\n\nconst b = block('relative-range-date-picker-dialog');\n\nexport interface PickerDialogProps extends PickerFormProps, PopupStyleProps {\n /** Popup anchor /\n anchor: HTMLElement \| null;\n /* Manages `Popup` visibility /\n open: boolean;\n /* Handles popup close event /\n onClose: (reason?: Parameters<NonNullable<PopupProps['onOpenChange']>>[2] \| 'apply') => void;\n /* Handles popup remove from DOM event /\n onRemove?: () => void;\n /* If true `Popup` act like a modal dialog /\n modal?: boolean;\n /* Element which focus should be returned to /\n returnFocus?: PopupProps['returnFocus'];\n /* If true `Sheet` is used instead of `Popup` */\n isMobile?: boolean;\n}\n\nexport function PickerDialog({\n open,\n onClose,\n isMobile,\n anchor,\n popupClassName,\n popupStyle,\n popupPlacement,\n popupOffset,\n modal,\n returnFocus = false,\n onRemove,\n ...props\n}: PickerDialogProps) {\n if (isMobile) {\n return (\n <Sheet\n visible={open}\n onClose={() => {\n onClose('outside-press');\n setTimeout(() => {\n onRemove?.();\n });\n }}\n contentClassName={b('content', {mobile: true, size: 'xl'}, popupClassName)}\n >\n <PickerForm\n {...props}\n size=\"xl\"\n onApply={() => {\n onClose('apply');\n }}\n />\n </Sheet>\n );\n }\n\n return (\n <Popup\n open={open}\n onOpenChange={(isOpen, _event, reason) => {\n if (!isOpen) {\n onClose(reason);\n }\n }}\n placement={popupPlacement}\n offset={popupOffset}\n role=\"dialog\"\n anchorElement={anchor}\n className={b('content', {size: props.size}, popupClassName)}\n style={popupStyle}\n modal={modal}\n returnFocus={returnFocus}\n onTransitionOutComplete={onRemove}\n >\n <PickerForm\n {...props}\n onApply={() => {\n onClose('apply');\n }}\n />\n </Popup>\n );\n}\n"]}

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.css ADDED Viewed

@@ -0,0 +1,13 @@
+.g-date-relative-range-date-picker-doc__button {
+  --g-button-background-color-hover: transparent;
+}
+.g-date-relative-range-date-picker-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-doc__table > table {
+  width: 100%;
+}
+/*# sourceMappingURL=PickerDoc.css.map */

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.css.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["components/RelativeRangeDatePicker/components/PickerDialog/data:;charset=utf-8,@use%20'@gravity-ui/uikit/variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drelative-range-date-picker-doc';%0A%0A%23%7B$block%7D%20%7B%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/PickerDialog/file:/home/runner/work/date-components/date-components/node_modules/@gravity-ui/uikit/styles/mixins.scss"],"names":[],"mappings":"AAMI;EACI;;AAIA;EC8JJ;EACA;EACA;EACA;;AD7JI;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 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":"PickerDoc.css"}

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Preset } from "../Presets/defaultPresets.js";
+import "./PickerDoc.css";
+interface PresetsDocProps {
+    className?: string;
+    size?: 's' | 'm' | 'l' | 'xl';
+    docs?: Preset[];
+    onStartUpdate: (start: string) => void;
+    onEndUpdate: (end: string) => void;
+}
+export declare function PickerDoc({ docs, ...props }: PresetsDocProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.js ADDED Viewed

@@ -0,0 +1,97 @@
+'use client';
+import { __rest } from "tslib";
+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 "../Presets/i18n/index.js";
+import "./PickerDoc.css";
+const b = block('relative-range-date-picker-doc');
+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 DocContent({ size, docs, onStartUpdate, onEndUpdate }) {
+    const isMobile = useMobile();
+    const columns = React.useMemo(() => [
+        {
+            id: 'title',
+            name: () => {
+                return i18n('Range');
+            },
+        },
+        {
+            id: 'from',
+            name: () => {
+                return i18n('From');
+            },
+            template: (item) => (_jsx(Button, { size: isMobile ? 'l' : getButtonSizeForInput(size), onClick: () => onStartUpdate(item.from), children: item.from })),
+        },
+        {
+            id: 'to',
+            name: () => {
+                return i18n('To');
+            },
+            template: (item) => (_jsx(Button, { size: isMobile ? 'l' : getButtonSizeForInput(size), onClick: () => onEndUpdate(item.to), children: item.to })),
+        },
+    ], [isMobile, onEndUpdate, onStartUpdate, size]);
+    return _jsx(Table, { columns: columns, data: docs, className: b('table', { size }), wordWrap: true });
+}
+function DesktopDoc(_a) {
+    var { className, size } = _a, props = __rest(_a, ["className", "size"]);
+    return (_jsx(Popover, { className: b(null), hasArrow: false, placement: ['right-start', 'left-start'], content: _jsx(DocContent, Object.assign({ size: size }, props)), children: _jsx(Button, { className: b('button', className), view: "flat-secondary", size: getButtonSizeForInput(size), children: _jsx(Icon, { data: CircleQuestion }) }) }));
+}
+function MobileDoc(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    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(DocContent, Object.assign({}, props)) })] }));
+}
+export function PickerDoc(_a) {
+    var { docs = data } = _a, props = __rest(_a, ["docs"]);
+    const isMobile = useMobile();
+    if (!Array.isArray(docs) || docs.length === 0) {
+        return null;
+    }
+    if (isMobile) {
+        return _jsx(MobileDoc, Object.assign({}, props, { docs: docs }));
+    }
+    return _jsx(DesktopDoc, Object.assign({}, props, { docs: docs }));
+}
+//# sourceMappingURL=PickerDoc.js.map

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"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 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"]}

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.css CHANGED Viewed

@@ -9,6 +9,12 @@
 .g-date-relative-range-date-picker-form_size_xl .g-date-relative-range-date-picker-form__pickers .g-text-input__label {
   width: 50px;
 }
+.g-date-relative-range-date-picker-form__header {
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-1);
+  margin-block-end: var(--g-spacing-2);
+}
 .g-date-relative-range-date-picker-form__apply {
   margin-block-start: var(--g-spacing-2);
 }

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/RelativeRangeDatePicker/components/variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drelative-range-date-picker-form';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20&__pickers%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20gap:%20var(--g-spacing-2);%0A%0A%20%20%20%20%20%20%20%20.g-text-input__label%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%2040px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%7B$block%7D_size_xl%20&%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%2050px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__apply%20%7B%0A%20%20%20%20%20%20%20%20margin-block-start:%20var(--g-spacing-2);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__zone%20%7B%0A%20%20%20%20%20%20%20%20margin-block:%20var(--g-spacing-2)%20calc(-1%20%20var(--_--popup-content-padding));%0A%20%20%20%20%20%20%20%20margin-inline:%20calc(-1%20%20var(--_--popup-content-padding));%0A%0A%20%20%20%20%20%20%20%20border-block-start:%201px%20solid%20var(--g-color-line-generic);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__presets%20%7B%0A%20%20%20%20%20%20%20%20margin-inline:%20calc(-1%20%20var(--_--popup-content-padding));%0A%20%20%20%20%7D%0A%7D%0A"],"names":[],"mappings":"AAKI;EACI;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAKZ;EACI;;AAGJ;EACI;EACA;EAEA;;AAGJ;EACI","sourcesContent":["@use '../../../variables';\n\n$block: '.#{variables.$ns}relative-range-date-picker-form';\n\n#{$block} {\n &__pickers {\n display: flex;\n flex-direction: column;\n gap: var(--g-spacing-2);\n\n .g-text-input__label {\n width: 40px;\n\n #{$block}_size_xl & {\n width: 50px;\n }\n }\n }\n\n &__apply {\n margin-block-start: var(--g-spacing-2);\n }\n\n &__zone {\n margin-block: var(--g-spacing-2) calc(-1 var(--_--popup-content-padding));\n margin-inline: calc(-1 * var(--_--popup-content-padding));\n\n border-block-start: 1px solid var(--g-color-line-generic);\n }\n\n &__presets {\n margin-inline: calc(-1 * var(--_--popup-content-padding));\n }\n}\n"],"file":"PickerForm.css"}
1	+ {"version":3,"sources":["components/RelativeRangeDatePicker/components/variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drelative-range-date-picker-form';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20&__pickers%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20gap:%20var(--g-spacing-2);%0A%0A%20%20%20%20%20%20%20%20.g-text-input__label%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%2040px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%7B$block%7D_size_xl%20&%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%2050px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__header%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20gap:%20var(--g-spacing-1);%0A%0A%20%20%20%20%20%20%20%20margin-block-end:%20var(--g-spacing-2);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__apply%20%7B%0A%20%20%20%20%20%20%20%20margin-block-start:%20var(--g-spacing-2);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__zone%20%7B%0A%20%20%20%20%20%20%20%20margin-block:%20var(--g-spacing-2)%20calc(-1%20%20var(--_--popup-content-padding));%0A%20%20%20%20%20%20%20%20margin-inline:%20calc(-1%20%20var(--_--popup-content-padding));%0A%0A%20%20%20%20%20%20%20%20border-block-start:%201px%20solid%20var(--g-color-line-generic);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__presets%20%7B%0A%20%20%20%20%20%20%20%20margin-inline:%20calc(-1%20%20var(--_--popup-content-padding));%0A%20%20%20%20%7D%0A%7D%0A"],"names":[],"mappings":"AAKI;EACI;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;EAEA;;AAGJ;EACI;;AAGJ;EACI;EACA;EAEA;;AAGJ;EACI","sourcesContent":["@use '../../../variables';\n\n$block: '.#{variables.$ns}relative-range-date-picker-form';\n\n#{$block} {\n &__pickers {\n display: flex;\n flex-direction: column;\n gap: var(--g-spacing-2);\n\n .g-text-input__label {\n width: 40px;\n\n #{$block}_size_xl & {\n width: 50px;\n }\n }\n }\n\n &__header {\n display: flex;\n align-items: center;\n gap: var(--g-spacing-1);\n\n margin-block-end: var(--g-spacing-2);\n }\n\n &__apply {\n margin-block-start: var(--g-spacing-2);\n }\n\n &__zone {\n margin-block: var(--g-spacing-2) calc(-1 var(--_--popup-content-padding));\n margin-inline: calc(-1 * var(--_--popup-content-padding));\n\n border-block-start: 1px solid var(--g-color-line-generic);\n }\n\n &__presets {\n margin-inline: calc(-1 * var(--_--popup-content-padding));\n }\n}\n"],"file":"PickerForm.css"}

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.d.ts CHANGED Viewed

@@ -23,9 +23,11 @@ export interface PickerFormProps extends RelativeRangeDatePickerStateOptions, Do
     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[];
 }
 export declare function PickerForm(props: PickerFormProps & {

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.js CHANGED Viewed

@@ -1,10 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '@gravity-ui/uikit';
+import { Button, Text } from '@gravity-ui/uikit';
 import { block } from "../../../../utils/cn.js";
 import { RelativeDatePicker } from "../../../RelativeDatePicker/index.js";
 import { Presets } from "../Presets/Presets.js";
 import { Zones } from "../Zones/Zones.js";
+import { PickerDoc } from "./PickerDoc.js";
 import { i18n } from "./i18n/index.js";
 import { useRelativeRangeDatePickerDialogState } from "./useRelativeRangeDatePickerDialogState.js";
 import "./PickerForm.css";
@@ -22,8 +23,12 @@ export function PickerForm(props) {
         size: props.size,
         errorPlacement: 'inside',
     };
-    const { isDateUnavailable } = props;
-    return (_jsxs("div", { className: b({ size: props.size }, props.className), style: props.style, children: [_jsxs("div", { className: b('pickers'), children: [_jsx(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')) || i18n('Value is incorrect.'), placeholderValue: (_d = props.placeholderValue) === null || _d === void 0 ? void 0 : _d.startOf('day'), label: i18n('From'), value: state.start, onUpdate: state.setStart })), _jsx(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')) || i18n('Value is incorrect.'), placeholderValue: (_h = props.placeholderValue) === null || _h === void 0 ? void 0 : _h.endOf('day'), label: i18n('To'), value: state.end, onUpdate: state.setEnd, roundUp: true }))] }), props.withApplyButton && !props.readOnly ? (_jsx(Button, { disabled: state.isInvalid, size: props.size, onClick: () => {
+    const { isDateUnavailable, withHeader = false } = props;
+    return (_jsxs("div", { className: b({ size: props.size }, props.className), style: props.style, children: [withHeader && (_jsxs("div", { className: b('header'), children: [_jsx(Text, { variant: props.size === 'xl' ? 'subheader-3' : 'subheader-2', children: i18n('Select the interval') }), _jsx(PickerDoc, { size: props.size, docs: props.docs, onStartUpdate: (start) => {
+                            state.setStart({ type: 'relative', value: start });
+                        }, onEndUpdate: (end) => {
+                            state.setEnd({ type: 'relative', value: end });
+                        } })] })), _jsxs("div", { className: b('pickers'), children: [_jsx(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')) || i18n('Value is incorrect.'), placeholderValue: (_d = props.placeholderValue) === null || _d === void 0 ? void 0 : _d.startOf('day'), label: i18n('From'), value: state.start, onUpdate: state.setStart })), _jsx(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')) || i18n('Value is incorrect.'), placeholderValue: (_h = props.placeholderValue) === null || _h === void 0 ? void 0 : _h.endOf('day'), label: i18n('To'), value: state.end, onUpdate: state.setEnd, roundUp: true }))] }), props.withApplyButton && !props.readOnly ? (_jsx(Button, { disabled: state.isInvalid, size: props.size, onClick: () => {
                     state.applyValue();
                     props.onApply();
                 }, className: b('apply'), width: "max", children: i18n('Apply') })) : null, props.withPresets && !props.readOnly ? (_jsx(Presets, { size: props.size, presetTabs: props.presetTabs, onChoosePreset: (start, end) => {
@@ -31,6 +36,6 @@ export function PickerForm(props) {
                     if (!props.withApplyButton) {
                         props.onApply();
                     }
-                }, minValue: props.minValue, docs: props.docs, className: b('presets') })) : null, props.withZonesList ? (_jsx("div", { className: b('zone'), children: _jsx(Zones, { value: state.timeZone, onUpdate: state.setTimeZone, disabled: props.readOnly, size: props.size }) })) : null] }));
+                }, minValue: props.minValue, className: b('presets') })) : null, props.withZonesList ? (_jsx("div", { className: b('zone'), children: _jsx(Zones, { value: state.timeZone, onUpdate: state.setTimeZone, disabled: props.readOnly, size: props.size }) })) : null] }));
 }
 //# sourceMappingURL=PickerForm.js.map

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.js.map CHANGED Viewed

	@@ -1 +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} 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 {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 /* Custom preset tabs /\n presetTabs?: PresetTab[];\n /* Custom docs for presets, 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} = props;\n return (\n <div className={b({size: props.size}, props.className)} style={props.style}>\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 );\n if (!props.withApplyButton) {\n props.onApply();\n }\n }}\n minValue={props.minValue}\n docs={props.docs}\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"]}
1	+ {"version":3,"file":"PickerForm.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAC,MAAM,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAG/C,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAC3C,OAAO,EAAC,kBAAkB,EAAC,6CAAoC;AAI/D,OAAO,EAAC,OAAO,EAAC,8BAA2B;AAG3C,OAAO,EAAC,KAAK,EAAC,0BAAuB;AAErC,OAAO,EAAC,SAAS,EAAC,uBAAoB;AACtC,OAAO,EAAC,IAAI,EAAC,wBAAe;AAC5B,OAAO,EAAC,qCAAqC,EAAC,mDAAgD;AAE9F,0BAA2B;AAE3B,MAAM,CAAC,GAAG,KAAK,CAAC,iCAAiC,CAAC,CAAC;AA4BnD,MAAM,UAAU,UAAU,CACtB,KAEC;;IAED,MAAM,KAAK,GAAG,qCAAqC,CAAC,KAAK,CAAC,CAAC;IAE3D,MAAM,UAAU,GAA4B;QACxC,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,mBAAmB;QACnC,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,cAAc,EAAE,QAAQ;KAC3B,CAAC;IACF,MAAM,EAAC,iBAAiB,EAAE,UAAU,GAAG,KAAK,EAAC,GAAG,KAAK,CAAC;IACtD,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAC,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,aACrE,UAAU,IAAI,CACX,eAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,aACvB,KAAC,IAAI,IAAC,OAAO,EAAE,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,YAC7D,IAAI,CAAC,qBAAqB,CAAC,GACzB,EACP,KAAC,SAAS,IACN,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;4BACrB,KAAK,CAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAC,CAAC,CAAC;wBACrD,CAAC,EACD,WAAW,EAAE,CAAC,GAAG,EAAE,EAAE;4BACjB,KAAK,CAAC,MAAM,CAAC,EAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC,CAAC,CAAC;wBACjD,CAAC,GACH,IACA,CACT,EAED,eAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,aACxB,KAAC,kBAAkB,oBACX,UAAU,IACd,iBAAiB,EACb,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iBAAiB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,EAE9E,eAAe,EAAE,CAAA,MAAA,KAAK,CAAC,eAAe,0CAAE,SAAS,EAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACzE,YAAY,EACR,CAAA,MAAA,MAAA,KAAK,CAAC,eAAe,0CAAE,MAAM,0CAAE,IAAI,CAAC,IAAI,CAAC,KAAI,IAAI,CAAC,qBAAqB,CAAC,EAE5E,gBAAgB,EAAE,MAAA,KAAK,CAAC,gBAAgB,0CAAE,OAAO,CAAC,KAAK,CAAC,EACxD,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,EACnB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAC1B,EACF,KAAC,kBAAkB,oBACX,UAAU,IACd,iBAAiB,EACb,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EAE5E,eAAe,EAAE,CAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,SAAS,EAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACvE,YAAY,EACR,CAAA,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,MAAM,0CAAE,IAAI,CAAC,IAAI,CAAC,KAAI,IAAI,CAAC,qBAAqB,CAAC,EAE1E,gBAAgB,EAAE,MAAA,KAAK,CAAC,gBAAgB,0CAAE,KAAK,CAAC,KAAK,CAAC,EACtD,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,EACjB,KAAK,EAAE,KAAK,CAAC,GAAG,EAChB,QAAQ,EAAE,KAAK,CAAC,MAAM,EACtB,OAAO,UACT,IACA,EACL,KAAK,CAAC,eAAe,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CACxC,KAAC,MAAM,IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE;oBACV,KAAK,CAAC,UAAU,EAAE,CAAC;oBACnB,KAAK,CAAC,OAAO,EAAE,CAAC;gBACpB,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,KAAK,EAAC,KAAK,YAEV,IAAI,CAAC,OAAO,CAAC,GACT,CACZ,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CACpC,KAAC,OAAO,IACJ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,cAAc,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;oBAC3B,KAAK,CAAC,QAAQ,CACV,EAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAC,EAChC,EAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC,CACjC,CAAC;oBACF,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;wBACzB,KAAK,CAAC,OAAO,EAAE,CAAC;oBACpB,CAAC;gBACL,CAAC,EACD,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,GACzB,CACL,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CACnB,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,KAAC,KAAK,IACF,KAAK,EAAE,KAAK,CAAC,QAAQ,EACrB,QAAQ,EAAE,KAAK,CAAC,WAAW,EAC3B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,GAClB,GACA,CACT,CAAC,CAAC,CAAC,IAAI,IACN,CACT,CAAC;AACN,CAAC","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 /* 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 );\n if (!props.withApplyButton) {\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/esm/components/RelativeRangeDatePicker/components/PickerDialog/i18n/en.json CHANGED Viewed

@@ -4,5 +4,6 @@
   "\"From\" can't be after \"To\".": "\"From\" can't be after \"To\".",
   "From": "From",
   "To": "To",
-  "Apply": "Apply"
+  "Apply": "Apply",
+  "Select the interval": "Select the interval"
 }

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

@@ -1,5 +1,5 @@
-export declare const i18n: ((key: "Value is required." | "\"From\" can't be after \"To\"." | "From" | "To" | "Value is incorrect." | "Apply", params?: import("@gravity-ui/i18n").Params) => string) & {
+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) & {
     keysetData: {
-        "g-date-relative-range-date-picker-dialog": Record<"Value is required." | "\"From\" can't be after \"To\"." | "From" | "To" | "Value is incorrect." | "Apply", import("@gravity-ui/i18n").KeyData>;
+        "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>;
     };
 };

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/i18n/ru.json CHANGED Viewed

@@ -4,5 +4,6 @@
   "\"From\" can't be after \"To\".": "Значение «От» не может быть позже чем «До».",
   "From": "От",
   "To": "Дo",
-  "Apply": "Применить"
+  "Apply": "Применить",
+  "Select the interval": "Выберите интервал"
 }

package/dist/esm/components/RelativeRangeDatePicker/components/Presets/Presets.css CHANGED Viewed

@@ -12,9 +12,6 @@
 .g-date-relative-range-date-picker-presets__list-container {
   outline: none;
 }
-.g-date-relative-range-date-picker-presets__doc {
-  margin-inline-start: auto;
-}
 .g-date-relative-range-date-picker-presets__content {
   overflow: auto;
   height: 128px;

package/dist/esm/components/RelativeRangeDatePicker/components/Presets/Presets.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20--g-list-item-padding:%200%20var(--_--g-date-picker-presets-padding,%200);%0A%0A%20%20%20%20&__tabs%20%7B%0A%20%20%20%20%20%20%20%20--g-tabs-border-width:%200;%0A%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20gap:%20var(--g-spacing-2);%0A%0A%20%20%20%20%20%20%20%20padding-inline:%20var(--_--g-date-picker-presets-padding,%200);%0A%0A%20%20%20%20%20%20%20%20box-shadow:%20inset%200%20-1px%20var(--g-color-line-generic);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__list-container%20%7B%0A%20%20%20%20%20%20%20%20outline:%20none;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__doc%20%7B%0A%20%20%20%20%20%20%20%20margin-inline-start:%20auto;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__content%20%7B%0A%20%20%20%20%20%20%20%20overflow:%20auto;%0A%0A%20%20%20%20%20%20%20%20height:%20128px;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&_size%20%7B%0A%20%20%20%20%20%20%20%20&_l%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%7B$block%7D__content%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20144px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20&_xl%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%7B$block%7D__content%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20162px;%0A%20%20%20%20%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%20%20%20%20%7D%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;EAEA;EACA;EACA;EAEA;EAEA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EAEA;;AAKI;EACI;;AAIJ;EACI;EC+HZ;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 &__doc {\n margin-inline-start: auto;\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 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":"Presets.css"}
1	+ {"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';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20--g-list-item-padding:%200%20var(--_--g-date-picker-presets-padding,%200);%0A%0A%20%20%20%20&__tabs%20%7B%0A%20%20%20%20%20%20%20%20--g-tabs-border-width:%200;%0A%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20gap:%20var(--g-spacing-2);%0A%0A%20%20%20%20%20%20%20%20padding-inline:%20var(--_--g-date-picker-presets-padding,%200);%0A%0A%20%20%20%20%20%20%20%20box-shadow:%20inset%200%20-1px%20var(--g-color-line-generic);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__list-container%20%7B%0A%20%20%20%20%20%20%20%20outline:%20none;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__content%20%7B%0A%20%20%20%20%20%20%20%20overflow:%20auto;%0A%0A%20%20%20%20%20%20%20%20height:%20128px;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&_size%20%7B%0A%20%20%20%20%20%20%20%20&_l%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%7B$block%7D__content%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20144px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20&_xl%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%7B$block%7D__content%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20162px;%0A%20%20%20%20%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%20%20%20%20%7D%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;EAEA;EACA;EACA;EAEA;EAEA;;AAGJ;EACI;;AAGJ;EACI;EAEA;;AAKI;EACI;;AAIJ;EACI;ECmIZ;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 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":"Presets.css"}

package/dist/esm/components/RelativeRangeDatePicker/components/Presets/Presets.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import type { DateTime } from '@gravity-ui/date-utils';
-import type { Preset } from "./defaultPresets.js";
 import type { PresetTab } from "./utils.js";
 import "./Presets.css";
 export interface PresetProps {
@@ -9,9 +8,8 @@ export interface PresetProps {
     minValue?: DateTime;
     size?: 's' | 'm' | 'l' | 'xl';
     presetTabs?: PresetTab[];
-    docs?: Preset[];
 }
-export declare function Presets({ className, size, minValue, withTime, onChoosePreset, presetTabs, docs, }: PresetProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Presets({ className, size, minValue, withTime, onChoosePreset, presetTabs, }: PresetProps): import("react/jsx-runtime").JSX.Element | null;
 export declare const SIZE_TO_ITEM_HEIGHT: {
     s: number;
     m: number;

package/dist/esm/components/RelativeRangeDatePicker/components/Presets/Presets.js CHANGED Viewed

@@ -3,11 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { List, Tab, TabList, TabPanel, TabProvider } from '@gravity-ui/uikit';
 import { block } from "../../../../utils/cn.js";
-import { PresetsDoc } from "./PresetsDoc.js";
 import { filterPresetTabs, getDefaultPresetTabs } from "./utils.js";
 import "./Presets.css";
 const b = block('relative-range-date-picker-presets');
-export function Presets({ className, size = 'm', minValue, withTime, onChoosePreset, presetTabs, docs, }) {
+export function Presets({ className, size = 'm', minValue, withTime, onChoosePreset, presetTabs, }) {
     var _a, _b;
     const tabs = React.useMemo(() => {
         return filterPresetTabs(presetTabs !== null && presetTabs !== void 0 ? presetTabs : getDefaultPresetTabs({ withTime }), { minValue });
@@ -23,7 +22,7 @@ export function Presets({ className, size = 'm', minValue, withTime, onChoosePre
     if (activeTab.id !== activeTabId) {
         setActiveTab(activeTab.id);
     }
-    return (_jsx("div", { className: b({ size }, className), children: _jsxs(TabProvider, { value: activeTabId, onUpdate: setActiveTab, children: [_jsxs("div", { className: b('tabs'), children: [_jsx(TabList, { size: size === 's' ? 'm' : size, children: tabs.map(({ id, title }) => (_jsx(Tab, { value: id, children: title }, id))) }), _jsx(PresetsDoc, { className: b('doc'), size: size, docs: docs })] }), _jsx(TabPanel, { className: b('content'), value: activeTabId, children: _jsx(PresetsList, { presets: activeTab.presets, onChoosePreset: onChoosePreset, size: size }) })] }) }));
+    return (_jsx("div", { className: b({ size }, className), children: _jsxs(TabProvider, { value: activeTabId, onUpdate: setActiveTab, children: [_jsx("div", { className: b('tabs'), children: _jsx(TabList, { size: size === 's' ? 'm' : size, children: tabs.map(({ id, title }) => (_jsx(Tab, { value: id, children: title }, id))) }) }), _jsx(TabPanel, { className: b('content'), value: activeTabId, children: _jsx(PresetsList, { presets: activeTab.presets, onChoosePreset: onChoosePreset, size: size }) })] }) }));
 }
 export const SIZE_TO_ITEM_HEIGHT = {
     s: 28,

package/dist/esm/components/RelativeRangeDatePicker/components/Presets/Presets.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Presets.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/Presets/Presets.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAE5E,OAAO,EAAC,KAAK,EAAC,gCAA6B;~~AAE3C~~,OAAO,EAAC,~~UAAU,EAAC,wBAAqB;AAExC,OAAO,EAAC,~~gBAAgB,EAAE,oBAAoB,EAAC,mBAAgB;AAG/D,uBAAwB;AAExB,MAAM,CAAC,GAAG,KAAK,CAAC,oCAAoC,CAAC,CAAC;~~AAWtD~~,MAAM,UAAU,OAAO,CAAC,EACpB,SAAS,EACT,IAAI,GAAG,GAAG,EACV,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,UAAU,~~EACV,IAAI,GACM~~;;IACV,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC5B,OAAO,gBAAgB,CAAC,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,oBAAoB,CAAC,EAAC,QAAQ,EAAC,CAAC,EAAE,EAAC,QAAQ,EAAC,CAAC,CAAC;IACxF,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;IAErC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,KAAK,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,cAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAC,EAAE,SAAS,CAAC,YAChC,MAAC,WAAW,IAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,aACnD,~~eAAK~~,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,~~aACrB~~,KAAC,OAAO,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,KAAC,GAAG,IAAU,KAAK,EAAE,EAAE,YAClB,KAAK,IADA,EAAE,CAEN,CACT,CAAC,GACI,~~EACV~~,~~KAAC,UAAU,IAAC,SAAS,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,IACzD,~~EACN,KAAC,QAAQ,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,WAAW,YACjD,KAAC,WAAW,IACR,OAAO,EAAE,SAAS,CAAC,OAAO,EAC1B,cAAc,EAAE,cAAc,EAC9B,IAAI,EAAE,IAAI,GACZ,GACK,IACD,GACZ,CACT,CAAC;AACN,CAAC;AACD,MAAM,CAAC,MAAM,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,KAAK,CAAC,MAAM,CAAe,IAAI,CAAC,CAAC;IAE7C,KAAK,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,KAAC,IAAI,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,mBAAmB,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 ~~{PresetsDoc} from './PresetsDoc';\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 ~~docs?: Preset[];\n~~}\nexport function Presets({\n className,\n size = 'm',\n minValue,\n withTime,\n onChoosePreset,\n presetTabs,\n ~~docs,\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 ~~<PresetsDoc className={b('doc')} size={size} docs={docs} />\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"]}
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"]}

package/dist/esm/components/RelativeRangeDatePicker/index.d.ts CHANGED Viewed

@@ -9,3 +9,4 @@ export { DEFAULT_DATE_PRESETS, DEFAULT_TIME_PRESETS, DEFAULT_OTHERS_PRESETS, } f
 export { getDefaultPresetTabs } from "./components/Presets/utils.js";
 export type { Preset as RelativeRangeDatePickerPreset } from "./components/Presets/defaultPresets.js";
 export type { PresetTab as RelativeRangeDatePickerPresetTab } from "./components/Presets/utils.js";
+export { getPresetTitle as getRelativeRangeDatePickerPresetTitle } from "./components/Presets/utils.js";

package/dist/esm/components/RelativeRangeDatePicker/index.js CHANGED Viewed

@@ -5,4 +5,5 @@ export { PickerForm as RelativeRangeDatePickerForm } from "./components/PickerDi
 export * from "./hooks/useRelativeRangeDatePickerState.js";
 export { DEFAULT_DATE_PRESETS, DEFAULT_TIME_PRESETS, DEFAULT_OTHERS_PRESETS, } from "./components/Presets/defaultPresets.js";
 export { getDefaultPresetTabs } from "./components/Presets/utils.js";
+export { getPresetTitle as getRelativeRangeDatePickerPresetTitle } from "./components/Presets/utils.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/RelativeRangeDatePicker/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["components/RelativeRangeDatePicker/index.ts"],"names":[],"mappings":"AAAA,6CAA0C;AAC1C,2BAAwB;AACxB,OAAO,EAAC,YAAY,IAAI,6BAA6B,EAAC,kDAA+C;AAErG,OAAO,EAAC,UAAU,IAAI,2BAA2B,EAAC,gDAA6C;AAE/F,2DAAwD;AACxD,OAAO,EACH,oBAAoB,EACpB,oBAAoB,EACpB,sBAAsB,GACzB,+CAA4C;AAC7C,OAAO,EAAC,oBAAoB,EAAC,sCAAmC","sourcesContent":["export * from './RelativeRangeDatePicker';\nexport * from './types';\nexport {PickerDialog as RelativeRangeDatePickerDialog} from './components/PickerDialog/PickerDialog';\nexport type {PickerDialogProps as RelativeRangeDatePickerDialogProps} from './components/PickerDialog/PickerDialog';\nexport {PickerForm as RelativeRangeDatePickerForm} from './components/PickerDialog/PickerForm';\nexport type {PickerFormProps as RelativeRangeDatePickerFormProps} from './components/PickerDialog/PickerForm';\nexport * from './hooks/useRelativeRangeDatePickerState';\nexport {\n DEFAULT_DATE_PRESETS,\n DEFAULT_TIME_PRESETS,\n DEFAULT_OTHERS_PRESETS,\n} from './components/Presets/defaultPresets';\nexport {getDefaultPresetTabs} from './components/Presets/utils';\nexport type {Preset as RelativeRangeDatePickerPreset} from './components/Presets/defaultPresets';\nexport type {PresetTab as RelativeRangeDatePickerPresetTab} from './components/Presets/utils';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["components/RelativeRangeDatePicker/index.ts"],"names":[],"mappings":"AAAA,6CAA0C;AAC1C,2BAAwB;AACxB,OAAO,EAAC,YAAY,IAAI,6BAA6B,EAAC,kDAA+C;AAErG,OAAO,EAAC,UAAU,IAAI,2BAA2B,EAAC,gDAA6C;AAE/F,2DAAwD;AACxD,OAAO,EACH,oBAAoB,EACpB,oBAAoB,EACpB,sBAAsB,GACzB,+CAA4C;AAC7C,OAAO,EAAC,oBAAoB,EAAC,sCAAmC;AAGhE,OAAO,EAAC,cAAc,IAAI,qCAAqC,EAAC,sCAAmC","sourcesContent":["export * from './RelativeRangeDatePicker';\nexport * from './types';\nexport {PickerDialog as RelativeRangeDatePickerDialog} from './components/PickerDialog/PickerDialog';\nexport type {PickerDialogProps as RelativeRangeDatePickerDialogProps} from './components/PickerDialog/PickerDialog';\nexport {PickerForm as RelativeRangeDatePickerForm} from './components/PickerDialog/PickerForm';\nexport type {PickerFormProps as RelativeRangeDatePickerFormProps} from './components/PickerDialog/PickerForm';\nexport * from './hooks/useRelativeRangeDatePickerState';\nexport {\n DEFAULT_DATE_PRESETS,\n DEFAULT_TIME_PRESETS,\n DEFAULT_OTHERS_PRESETS,\n} from './components/Presets/defaultPresets';\nexport {getDefaultPresetTabs} from './components/Presets/utils';\nexport type {Preset as RelativeRangeDatePickerPreset} from './components/Presets/defaultPresets';\nexport type {PresetTab as RelativeRangeDatePickerPresetTab} from './components/Presets/utils';\nexport {getPresetTitle as getRelativeRangeDatePickerPresetTitle} from './components/Presets/utils';\n"]}