npm - @gravity-ui/date-components - Versions diffs - 3.2.3 → 3.3.0 - Mend

@gravity-ui/date-components 3.2.3 → 3.3.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 (236) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/RangeDatePicker/data:;charset=utf-8,@use%20'../variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drange-date-picker';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20position:%20relative;%0A%0A%20%20%20%20display:%20inline-block;%0A%0A%20%20%20%20outline:%20none;%0A%0A%20%20%20%20&__field%20%7B%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__popup-anchor%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20z-index:%20-1;%0A%20%20%20%20%20%20%20%20inset:%200;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__popup-content%20%7B%0A%20%20%20%20%20%20%20%20outline:%20none;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__time-field%20%7B%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20&-wrapper%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2010px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A"],"names":[],"mappings":"AAIA;EACI;EAEA;EAEA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAEA;EACI","sourcesContent":["@use '../variables';\n\n$block: '.#{variables.$ns}range-date-picker';\n\n#{$block} {\n position: relative;\n\n display: inline-block;\n\n outline: none;\n\n &__field {\n width: 100%;\n }\n\n &__popup-anchor {\n position: absolute;\n z-index: -1;\n inset: 0;\n }\n\n &__popup-content {\n outline: none;\n }\n\n &__time-field {\n width: 100%;\n\n &-wrapper {\n padding: 10px;\n }\n }\n}\n"],"file":"RangeDatePicker.css"}
1	+ {"version":3,"sources":["components/RangeDatePicker/RangeDatePicker.scss"],"names":[],"mappings":"AAIA;EACI;EAEA;EAEA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAEA;EACI","sourcesContent":["@use '../variables';\n\n$block: '.#{variables.$ns}range-date-picker';\n\n#{$block} {\n position: relative;\n\n display: inline-block;\n\n outline: none;\n\n &__field {\n width: 100%;\n }\n\n &__popup-anchor {\n position: absolute;\n z-index: -1;\n inset: 0;\n }\n\n &__popup-content {\n outline: none;\n }\n\n &__time-field {\n width: 100%;\n\n &-wrapper {\n padding: 10px;\n }\n }\n}\n"],"file":"RangeDatePicker.css"}

package/dist/esm/components/RangeDateSelection/RangeDateSelection.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/RangeDateSelection/data:;charset=utf-8,@use%20'../variables';%0A@use%20'../mixins';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drange-date-selection';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20display:%20grid;%0A%20%20%20%20align-items:%20center;%0A%20%20%20%20grid-template-areas:%20'buttons-start%20ruler%20buttons-end';%0A%20%20%20%20grid-template-columns:%20auto%201fr%20auto;%0A%0A%20%20%20%20border-block:%201px%20solid%20var(--g-color-line-generic);%0A%0A%20%20%20%20&__ruler%20%7B%0A%20%20%20%20%20%20%20%20grid-area:%20ruler;%0A%0A%20%20%20%20%20%20%20%20&_dragging%20%23%7B$block%7D__selection%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20pointer-events:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__buttons%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%0A%20%20%20%20%20%20%20%20height:%2022px;%0A%0A%20%20%20%20%20%20%20%20&_position_start%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20grid-area:%20buttons-start;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20padding-inline-end:%20var(--g-spacing-half);%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20border-inline-end:%201px%20solid%20var(--g-color-line-generic);%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&_position_end%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20grid-area:%20buttons-end;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20padding-inline-start:%20var(--g-spacing-half);%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20border-inline-start:%201px%20solid%20var(--g-color-line-generic);%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A"],"names":[],"mappings":"AAKA;EACI;EACA;EACA;EACA;EAEA;;AAEA;EACI;;AAEA;EACI;;AAIR;EACI;EACA;EAEA;;AAEA;EACI;EAEA;EAEA;;AAGJ;EACI;EAEA;EAEA","sourcesContent":["@use '../variables';\n@use '../mixins';\n\n$block: '.#{variables.$ns}range-date-selection';\n\n#{$block} {\n display: grid;\n align-items: center;\n grid-template-areas: 'buttons-start ruler buttons-end';\n grid-template-columns: auto 1fr auto;\n\n border-block: 1px solid var(--g-color-line-generic);\n\n &__ruler {\n grid-area: ruler;\n\n &_dragging #{$block}__selection {\n pointer-events: none;\n }\n }\n\n &__buttons {\n display: flex;\n align-items: center;\n\n height: 22px;\n\n &_position_start {\n grid-area: buttons-start;\n\n padding-inline-end: var(--g-spacing-half);\n\n border-inline-end: 1px solid var(--g-color-line-generic);\n }\n\n &_position_end {\n grid-area: buttons-end;\n\n padding-inline-start: var(--g-spacing-half);\n\n border-inline-start: 1px solid var(--g-color-line-generic);\n }\n }\n}\n"],"file":"RangeDateSelection.css"}
1	+ {"version":3,"sources":["components/RangeDateSelection/RangeDateSelection.scss"],"names":[],"mappings":"AAKA;EACI;EACA;EACA;EACA;EAEA;;AAEA;EACI;;AAEA;EACI;;AAIR;EACI;EACA;EAEA;;AAEA;EACI;EAEA;EAEA;;AAGJ;EACI;EAEA;EAEA","sourcesContent":["@use '../variables';\n@use '../mixins';\n\n$block: '.#{variables.$ns}range-date-selection';\n\n#{$block} {\n display: grid;\n align-items: center;\n grid-template-areas: 'buttons-start ruler buttons-end';\n grid-template-columns: auto 1fr auto;\n\n border-block: 1px solid var(--g-color-line-generic);\n\n &__ruler {\n grid-area: ruler;\n\n &_dragging #{$block}__selection {\n pointer-events: none;\n }\n }\n\n &__buttons {\n display: flex;\n align-items: center;\n\n height: 22px;\n\n &_position_start {\n grid-area: buttons-start;\n\n padding-inline-end: var(--g-spacing-half);\n\n border-inline-end: 1px solid var(--g-color-line-generic);\n }\n\n &_position_end {\n grid-area: buttons-end;\n\n padding-inline-start: var(--g-spacing-half);\n\n border-inline-start: 1px solid var(--g-color-line-generic);\n }\n }\n}\n"],"file":"RangeDateSelection.css"}

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

@@ -30,15 +30,16 @@ export function RangeDateSelection(props) {
     };
     let id = React.useId();
     id = (_a = props.id) !== null && _a !== void 0 ? _a : id;
+    const { t } = i18n.useTranslation();
     return (_jsxs("div", Object.assign({}, filterDOMProps(props, { labelable: true }), { id: id, className: b(null, props.className), style: props.style, dir: "ltr" // TODO: RTL support
         , children: [_jsx(DateTimeRuler, Object.assign({ className: b('ruler', { dragging: isDraggingRuler }) }, state.viewportInterval, { onMoveStart: handleRulerMoveStart, onMove: props.draggableRuler ? handleRulerMove : undefined, onMoveEnd: handleRulerMoveEnd, dragDisabled: state.isDragging, displayNow: props.displayNow, minValue: props.minValue, maxValue: props.maxValue, formatTime: props.formatTime, timeZone: state.timeZone, renderAdditionalRulerContent: props.renderAdditionalRulerContent, children: _jsx(SelectionControl, { className: b('selection'), state: state, "aria-labelledby": id }) })), props.hasScaleButtons ? (_jsxs("div", { className: b('buttons', { position: (_b = props.scaleButtonsPosition) !== null && _b !== void 0 ? _b : 'start' }), children: [_jsx(Button, { view: "flat-secondary", size: "xs", onClick: () => {
                             state.startDragging();
                             state.scale(0.5);
                             state.endDragging();
-                        }, "aria-label": i18n('Decrease range'), children: _jsx(Icon, { data: Minus }) }), _jsx(Button, { view: "flat-secondary", size: "xs", onClick: () => {
+                        }, "aria-label": t('Decrease range'), children: _jsx(Icon, { data: Minus }) }), _jsx(Button, { view: "flat-secondary", size: "xs", onClick: () => {
                             state.startDragging();
                             state.scale(1.5);
                             state.endDragging();
-                        }, "aria-label": i18n('Increase range'), children: _jsx(Icon, { data: Plus }) })] })) : null] })));
+                        }, "aria-label": t('Increase range'), children: _jsx(Icon, { data: Plus }) })] })) : null] })));
 }
 //# sourceMappingURL=RangeDateSelection.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RangeDateSelection.js","sourceRoot":"../../../../src","sources":["components/RangeDateSelection/RangeDateSelection.tsx"],"names":[],"mappings":"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~~IAAI~~,CAAC,gBAAgB,CAAC,~~YAElC~~,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,GAAI,GAChB,EACT,KAAC,MAAM,IACH,IAAI,EAAC,gBAAgB,EACrB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE;4BACV,KAAK,CAAC,aAAa,EAAE,CAAC;4BACtB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;4BACjB,KAAK,CAAC,WAAW,EAAE,CAAC;wBACxB,CAAC,gBACW,~~IAAI~~,CAAC,gBAAgB,CAAC,~~YAElC~~,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,GACf,IACP,CACT,CAAC,CAAC,CAAC,IAAI,KACN,CACT,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {Minus, Plus} from '@gravity-ui/icons';\nimport {Button, Icon} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport type {AccessibilityProps, DomProps, StyleProps} from '../types';\nimport {filterDOMProps} from '../utils/filterDOMProps';\n\nimport {DateTimeRuler} from './components/Ruler/Ruler';\nimport type {ViewportDimensions, ViewportInterval} from './components/Ruler/Ruler';\nimport {SelectionControl} from './components/SelectionControl/SelectionControl';\nimport {useRangeDateSelectionState} from './hooks/useRangeDateSelectionState';\nimport type {RangeDateSelectionOptions} from './hooks/useRangeDateSelectionState';\nimport {i18n} from './i18n';\n\nimport './RangeDateSelection.scss';\n\nconst b = block('range-date-selection');\n\nexport interface RangeDateSelectionProps\n extends RangeDateSelectionOptions,\n DomProps,\n StyleProps,\n AccessibilityProps {\n /** Formats time ticks /\n formatTime?: (time: DateTime) => string;\n /* Displays now line /\n displayNow?: boolean;\n /* Enables dragging ruler /\n draggableRuler?: boolean;\n /* Displays buttons to scale selection /\n hasScaleButtons?: boolean;\n /* Position of scale buttons /\n scaleButtonsPosition?: 'start' \| 'end';\n /* Renders additional svg content in the ruler /\n renderAdditionalRulerContent?: (props: {\n interval: ViewportInterval;\n dimensions: ViewportDimensions;\n }) => React.ReactNode;\n}\n\nexport function RangeDateSelection(props: RangeDateSelectionProps) {\n const state = useRangeDateSelectionState(props);\n\n const [isDraggingRuler, setDraggingRuler] = React.useState(false);\n\n const handleRulerMoveStart = () => {\n state.setDraggingValue(state.value);\n setDraggingRuler(true);\n };\n const handleRulerMove = (d: number) => {\n const intervalWidth = state.viewportInterval.end.diff(state.viewportInterval.start);\n const delta = -Math.floor((d intervalWidth) / 100);\n state.move(delta);\n };\n const handleRulerMoveEnd = () => {\n setDraggingRuler(false);\n state.endDragging();\n };\n\n let id = React.useId();\n id = props.id ?? id;\n\n return (\n <div\n {...filterDOMProps(props, {labelable: true})}\n id={id}\n className={b(null, props.className)}\n style={props.style}\n dir=\"ltr\" // TODO: RTL support\n >\n <DateTimeRuler\n className={b('ruler', {dragging: isDraggingRuler})}\n {...state.viewportInterval}\n onMoveStart={handleRulerMoveStart}\n onMove={props.draggableRuler ? handleRulerMove : undefined}\n onMoveEnd={handleRulerMoveEnd}\n dragDisabled={state.isDragging}\n displayNow={props.displayNow}\n minValue={props.minValue}\n maxValue={props.maxValue}\n formatTime={props.formatTime}\n timeZone={state.timeZone}\n renderAdditionalRulerContent={props.renderAdditionalRulerContent}\n >\n <SelectionControl className={b('selection')} state={state} aria-labelledby={id} />\n </DateTimeRuler>\n {props.hasScaleButtons ? (\n <div className={b('buttons', {position: props.scaleButtonsPosition ?? 'start'})}>\n <Button\n view=\"flat-secondary\"\n size=\"xs\"\n onClick={() => {\n state.startDragging();\n state.scale(0.5);\n state.endDragging();\n }}\n aria-label={~~i18n~~('Decrease range')}\n >\n <Icon data={Minus} />\n </Button>\n <Button\n view=\"flat-secondary\"\n size=\"xs\"\n onClick={() => {\n state.startDragging();\n state.scale(1.5);\n state.endDragging();\n }}\n aria-label={~~i18n~~('Increase range')}\n >\n <Icon data={Plus} />\n </Button>\n </div>\n ) : null}\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"RangeDateSelection.js","sourceRoot":"../../../../src","sources":["components/RangeDateSelection/RangeDateSelection.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 {Minus, Plus} from '@gravity-ui/icons';\nimport {Button, Icon} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport type {AccessibilityProps, DomProps, StyleProps} from '../types';\nimport {filterDOMProps} from '../utils/filterDOMProps';\n\nimport {DateTimeRuler} from './components/Ruler/Ruler';\nimport type {ViewportDimensions, ViewportInterval} from './components/Ruler/Ruler';\nimport {SelectionControl} from './components/SelectionControl/SelectionControl';\nimport {useRangeDateSelectionState} from './hooks/useRangeDateSelectionState';\nimport type {RangeDateSelectionOptions} from './hooks/useRangeDateSelectionState';\nimport {i18n} from './i18n';\n\nimport './RangeDateSelection.scss';\n\nconst b = block('range-date-selection');\n\nexport interface RangeDateSelectionProps\n extends RangeDateSelectionOptions,\n DomProps,\n StyleProps,\n AccessibilityProps {\n /** Formats time ticks /\n formatTime?: (time: DateTime) => string;\n /* Displays now line /\n displayNow?: boolean;\n /* Enables dragging ruler /\n draggableRuler?: boolean;\n /* Displays buttons to scale selection /\n hasScaleButtons?: boolean;\n /* Position of scale buttons /\n scaleButtonsPosition?: 'start' \| 'end';\n /* Renders additional svg content in the ruler /\n renderAdditionalRulerContent?: (props: {\n interval: ViewportInterval;\n dimensions: ViewportDimensions;\n }) => React.ReactNode;\n}\n\nexport function RangeDateSelection(props: RangeDateSelectionProps) {\n const state = useRangeDateSelectionState(props);\n\n const [isDraggingRuler, setDraggingRuler] = React.useState(false);\n\n const handleRulerMoveStart = () => {\n state.setDraggingValue(state.value);\n setDraggingRuler(true);\n };\n const handleRulerMove = (d: number) => {\n const intervalWidth = state.viewportInterval.end.diff(state.viewportInterval.start);\n const delta = -Math.floor((d intervalWidth) / 100);\n state.move(delta);\n };\n const handleRulerMoveEnd = () => {\n setDraggingRuler(false);\n state.endDragging();\n };\n\n let id = React.useId();\n id = props.id ?? id;\n\n const {t} = i18n.useTranslation();\n\n return (\n <div\n {...filterDOMProps(props, {labelable: true})}\n id={id}\n className={b(null, props.className)}\n style={props.style}\n dir=\"ltr\" // TODO: RTL support\n >\n <DateTimeRuler\n className={b('ruler', {dragging: isDraggingRuler})}\n {...state.viewportInterval}\n onMoveStart={handleRulerMoveStart}\n onMove={props.draggableRuler ? handleRulerMove : undefined}\n onMoveEnd={handleRulerMoveEnd}\n dragDisabled={state.isDragging}\n displayNow={props.displayNow}\n minValue={props.minValue}\n maxValue={props.maxValue}\n formatTime={props.formatTime}\n timeZone={state.timeZone}\n renderAdditionalRulerContent={props.renderAdditionalRulerContent}\n >\n <SelectionControl className={b('selection')} state={state} aria-labelledby={id} />\n </DateTimeRuler>\n {props.hasScaleButtons ? (\n <div className={b('buttons', {position: props.scaleButtonsPosition ?? 'start'})}>\n <Button\n view=\"flat-secondary\"\n size=\"xs\"\n onClick={() => {\n state.startDragging();\n state.scale(0.5);\n state.endDragging();\n }}\n aria-label={t('Decrease range')}\n >\n <Icon data={Minus} />\n </Button>\n <Button\n view=\"flat-secondary\"\n size=\"xs\"\n onClick={() => {\n state.startDragging();\n state.scale(1.5);\n state.endDragging();\n }}\n aria-label={t('Increase range')}\n >\n <Icon data={Plus} />\n </Button>\n </div>\n ) : null}\n </div>\n );\n}\n"]}

package/dist/esm/components/RangeDateSelection/components/NowLine/NowLine.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/RangeDateSelection/components/variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Dtimeline-now-line';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20stroke:%20var(--g-date-thin-timeline-now-color);%0A%20%20%20%20stroke-width:%202px;%0A%7D%0A"],"names":[],"mappings":"AAIA;EACI;EACA","sourcesContent":["@use '../../../variables';\n\n$block: '.#{variables.$ns}timeline-now-line';\n\n#{$block} {\n stroke: var(--g-date-thin-timeline-now-color);\n stroke-width: 2px;\n}\n"],"file":"NowLine.css"}
1	+ {"version":3,"sources":["components/RangeDateSelection/components/NowLine/NowLine.scss"],"names":[],"mappings":"AAIA;EACI;EACA","sourcesContent":["@use '../../../variables';\n\n$block: '.#{variables.$ns}timeline-now-line';\n\n#{$block} {\n stroke: var(--g-date-thin-timeline-now-color);\n stroke-width: 2px;\n}\n"],"file":"NowLine.css"}

package/dist/esm/components/RangeDateSelection/components/RulerViewport/RulerViewport.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/RangeDateSelection/components/variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Druler-viewport';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20--_--g-date-ruler-viewport-background:%20var(%0A%20%20%20%20%20%20%20%20--g-date-ruler-viewport-background,%0A%20%20%20%20%20%20%20%20var(--g-color-base-background)%0A%20%20%20%20);%0A%0A%20%20%20%20--g-date-thin-timeline-height:%2022px;%0A%20%20%20%20--g-date-thin-timeline-now-color:%20var(--g-color-line-danger);%0A%0A%20%20%20%20position:%20relative;%0A%0A%20%20%20%20box-sizing:%20border-box;%0A%20%20%20%20height:%20var(--g-date-thin-timeline-height);%0A%0A%20%20%20%20&__dragger%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20inset:%200;%0A%0A%20%20%20%20%20%20%20%20cursor:%20grab;%0A%0A%20%20%20%20%20%20%20%20&:focus-visible%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20outline:%202px%20solid%20var(--g-color-line-focus);%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&_disabled%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20pointer-events:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__svg%20%7B%0A%20%20%20%20%20%20%20%20pointer-events:%20none;%0A%20%20%20%20%7D%0A%7D%0A"],"names":[],"mappings":"AAIA;EACI;AAAA;AAAA;AAAA;EAKA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EAEA;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI","sourcesContent":["@use '../../../variables';\n\n$block: '.#{variables.$ns}ruler-viewport';\n\n#{$block} {\n --_--g-date-ruler-viewport-background: var(\n --g-date-ruler-viewport-background,\n var(--g-color-base-background)\n );\n\n --g-date-thin-timeline-height: 22px;\n --g-date-thin-timeline-now-color: var(--g-color-line-danger);\n\n position: relative;\n\n box-sizing: border-box;\n height: var(--g-date-thin-timeline-height);\n\n &__dragger {\n position: absolute;\n inset: 0;\n\n cursor: grab;\n\n &:focus-visible {\n outline: 2px solid var(--g-color-line-focus);\n }\n\n &_disabled {\n pointer-events: none;\n }\n }\n\n &__svg {\n pointer-events: none;\n }\n}\n"],"file":"RulerViewport.css"}
1	+ {"version":3,"sources":["components/RangeDateSelection/components/RulerViewport/RulerViewport.scss"],"names":[],"mappings":"AAIA;EACI;AAAA;AAAA;AAAA;EAKA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EAEA;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI","sourcesContent":["@use '../../../variables';\n\n$block: '.#{variables.$ns}ruler-viewport';\n\n#{$block} {\n --_--g-date-ruler-viewport-background: var(\n --g-date-ruler-viewport-background,\n var(--g-color-base-background)\n );\n\n --g-date-thin-timeline-height: 22px;\n --g-date-thin-timeline-now-color: var(--g-color-line-danger);\n\n position: relative;\n\n box-sizing: border-box;\n height: var(--g-date-thin-timeline-height);\n\n &__dragger {\n position: absolute;\n inset: 0;\n\n cursor: grab;\n\n &:focus-visible {\n outline: 2px solid var(--g-color-line-focus);\n }\n\n &_disabled {\n pointer-events: none;\n }\n }\n\n &__svg {\n pointer-events: none;\n }\n}\n"],"file":"RulerViewport.css"}

package/dist/esm/components/RangeDateSelection/components/SelectionControl/SelectionControl.css CHANGED Viewed

@@ -1,11 +1,11 @@
 .g-date-range-date-selection-control {
   --_--g-date-timeline-color-selection: var(
       --g-date-timeline-color-selection,
-      var(--g-color-base-info-light)
+      var(--g-color-base-selection)
   );
   --_--g-date-timeline-color-selection-hover: var(
       --g-date-timeline-color-selection-hover,
-      var(--g-color-base-info-light-hover)
+      var(--g-color-base-selection-hover)
   );
   --_--g-date-timeline-color-selection-handle: var(
       --g-date-timeline-color-selection-handle,

package/dist/esm/components/RangeDateSelection/components/SelectionControl/SelectionControl.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/RangeDateSelection/mixins';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drange-date-selection-control';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20--_--g-date-timeline-color-selection:%20var(%0A%20%20%20%20%20%20%20%20--g-date-timeline-color-selection,%0A%20%20%20%20%20%20%20%20var(--g-color-base-info-light)%0A%20%20%20%20);%0A%0A%20%20%20%20--_--g-date-timeline-color-selection-hover:%20var(%0A%20%20%20%20%20%20%20%20--g-date-timeline-color-selection-hover,%0A%20%20%20%20%20%20%20%20var(--g-color-base-info-light-hover)%0A%20%20%20%20);%0A%0A%20%20%20%20--_--g-date-timeline-color-selection-handle:%20var(%0A%20%20%20%20%20%20%20%20--g-date-timeline-color-selection-handle,%0A%20%20%20%20%20%20%20%20var(--g-color-base-brand)%0A%20%20%20%20);%0A%0A%20%20%20%20--_--g-date-timeline-color-selection-handle-hover:%20var(%0A%20%20%20%20%20%20%20%20--g-date-timeline-color-selection-handle-hover,%0A%20%20%20%20%20%20%20%20var(--g-color-base-brand-hover)%0A%20%20%20%20);%0A%0A%20%20%20%20position:%20absolute;%0A%20%20%20%20z-index:%201;%0A%20%20%20%20inset-block:%200;%0A%0A%20%20%20%20@supports%20(selector(:has()))%20and%20(selector(:focus-visible))%20%7B%0A%20%20%20%20%20%20%20%20&__start:has(&__slider-input:focus-visible),%0A%20%20%20%20%20%20%20%20&__end:has(&__slider-input:focus-visible),%0A%20%20%20%20%20%20%20%20&__dragger:has(&__slider-input:focus-visible)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius:%20var(--g-border-radius-xs);%0A%20%20%20%20%20%20%20%20%20%20%20%20outline:%20var(--g-color-line-focus)%20solid%202px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20@supports%20not%20(selector(:has()))%20%7B%0A%20%20%20%20%20%20%20%20&__start:focus-within,%0A%20%20%20%20%20%20%20%20&__end:focus-within,%0A%20%20%20%20%20%20%20%20&__dragger:focus-within%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius:%20var(--g-border-radius-xs);%0A%20%20%20%20%20%20%20%20%20%20%20%20outline:%20var(--g-color-line-focus)%20solid%202px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__dragger%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20inset-block:%200;%0A%20%20%20%20%20%20%20%20inset-inline:%202px;%0A%0A%20%20%20%20%20%20%20%20cursor:%20move;%0A%0A%20%20%20%20%20%20%20%20background:%20var(--_--g-date-timeline-color-selection);%0A%0A%20%20%20%20%20%20%20%20&:hover,%0A%20%20%20%20%20%20%20%20&_dragging%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20var(--_--g-date-timeline-color-selection-hover);%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&_disabled%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20pointer-events:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__start%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20inset-block:%200;%0A%20%20%20%20%20%20%20%20inset-inline-start:%200;%0A%0A%20%20%20%20%20%20%20%20width:%204px;%0A%0A%20%20%20%20%20%20%20%20background:%20var(--_--g-date-timeline-color-selection-handle);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__end%20%7B%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20inset-inline-end:%200;%0A%0A%20%20%20%20%20%20%20%20width:%204px;%0A%20%20%20%20%20%20%20%20height:%20100%25;%0A%0A%20%20%20%20%20%20%20%20background:%20var(--_--g-date-timeline-color-selection-handle);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__start,%0A%20%20%20%20&__end%20%7B%0A%20%20%20%20%20%20%20%20cursor:%20ew-resize;%0A%0A%20%20%20%20%20%20%20%20&:hover,%0A%20%20%20%20%20%20%20%20&_dragging%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background:%20var(--_--g-date-timeline-color-selection-handle-hover);%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__slider-input-wrapper%20%7B%0A%20%20%20%20%20%20%20%20@include%20mixins.~~visually-hidden();%0A%20%20%20%20%7D%0A%7D%0A~~","components/~~RangeDateSelection/components/SelectionControl/file:/home/runner/work/date-components/date-components/src/components/~~mixins.scss"],"names":[],"mappings":"AAKA;EACI;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;EAKA;EACA;EACA;;AAEA;EACI;IAGI;IACA;;;AAIR;EACI;IAGI;IACA;;;AAIR;EACI;EACA;EACA;EAEA;EAEA;;AAEA;EAEI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EAEA;EAEA;;AAGJ;EACI;EACA;EAEA;EACA;EAEA;;AAGJ;EAEI;;AAEA;EAEI;;AAIR;EChGA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA","sourcesContent":["@use '../../../variables';\n@use '../../../mixins';\n\n$block: '.#{variables.$ns}range-date-selection-control';\n\n#{$block} {\n --_--g-date-timeline-color-selection: var(\n --g-date-timeline-color-selection,\n var(--g-color-base-~~info-light~~)\n );\n\n --_--g-date-timeline-color-selection-hover: var(\n --g-date-timeline-color-selection-hover,\n var(--g-color-base-~~info~~-~~light-~~hover)\n );\n\n --_--g-date-timeline-color-selection-handle: var(\n --g-date-timeline-color-selection-handle,\n var(--g-color-base-brand)\n );\n\n --_--g-date-timeline-color-selection-handle-hover: var(\n --g-date-timeline-color-selection-handle-hover,\n var(--g-color-base-brand-hover)\n );\n\n position: absolute;\n z-index: 1;\n inset-block: 0;\n\n @supports (selector(:has())) and (selector(:focus-visible)) {\n &__start:has(&__slider-input:focus-visible),\n &__end:has(&__slider-input:focus-visible),\n &__dragger:has(&__slider-input:focus-visible) {\n border-radius: var(--g-border-radius-xs);\n outline: var(--g-color-line-focus) solid 2px;\n }\n }\n\n @supports not (selector(:has())) {\n &__start:focus-within,\n &__end:focus-within,\n &__dragger:focus-within {\n border-radius: var(--g-border-radius-xs);\n outline: var(--g-color-line-focus) solid 2px;\n }\n }\n\n &__dragger {\n position: absolute;\n inset-block: 0;\n inset-inline: 2px;\n\n cursor: move;\n\n background: var(--_--g-date-timeline-color-selection);\n\n &:hover,\n &_dragging {\n background: var(--_--g-date-timeline-color-selection-hover);\n }\n\n &_disabled {\n pointer-events: none;\n }\n }\n\n &__start {\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n\n width: 4px;\n\n background: var(--_--g-date-timeline-color-selection-handle);\n }\n\n &__end {\n position: absolute;\n inset-inline-end: 0;\n\n width: 4px;\n height: 100%;\n\n background: var(--_--g-date-timeline-color-selection-handle);\n }\n\n &__start,\n &__end {\n cursor: ew-resize;\n\n &:hover,\n &_dragging {\n background: var(--_--g-date-timeline-color-selection-handle-hover);\n }\n }\n\n &__slider-input-wrapper {\n @include mixins.visually-hidden();\n }\n}\n","@mixin visually-hidden() {\n position: absolute;\n\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n\n white-space: nowrap;\n\n border: 0;\n clip-path: inset(50%);\n}\n"],"file":"SelectionControl.css"}
1	+ {"version":3,"sources":["components/RangeDateSelection/components/SelectionControl/SelectionControl.scss","components/mixins.scss"],"names":[],"mappings":"AAKA;EACI;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;EAKA;EACA;EACA;;AAEA;EACI;IAGI;IACA;;;AAIR;EACI;IAGI;IACA;;;AAIR;EACI;EACA;EACA;EAEA;EAEA;;AAEA;EAEI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EAEA;EAEA;;AAGJ;EACI;EACA;EAEA;EACA;EAEA;;AAGJ;EAEI;;AAEA;EAEI;;AAIR;EChGA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA","sourcesContent":["@use '../../../variables';\n@use '../../../mixins';\n\n$block: '.#{variables.$ns}range-date-selection-control';\n\n#{$block} {\n --_--g-date-timeline-color-selection: var(\n --g-date-timeline-color-selection,\n var(--g-color-base-selection)\n );\n\n --_--g-date-timeline-color-selection-hover: var(\n --g-date-timeline-color-selection-hover,\n var(--g-color-base-selection-hover)\n );\n\n --_--g-date-timeline-color-selection-handle: var(\n --g-date-timeline-color-selection-handle,\n var(--g-color-base-brand)\n );\n\n --_--g-date-timeline-color-selection-handle-hover: var(\n --g-date-timeline-color-selection-handle-hover,\n var(--g-color-base-brand-hover)\n );\n\n position: absolute;\n z-index: 1;\n inset-block: 0;\n\n @supports (selector(:has())) and (selector(:focus-visible)) {\n &__start:has(&__slider-input:focus-visible),\n &__end:has(&__slider-input:focus-visible),\n &__dragger:has(&__slider-input:focus-visible) {\n border-radius: var(--g-border-radius-xs);\n outline: var(--g-color-line-focus) solid 2px;\n }\n }\n\n @supports not (selector(:has())) {\n &__start:focus-within,\n &__end:focus-within,\n &__dragger:focus-within {\n border-radius: var(--g-border-radius-xs);\n outline: var(--g-color-line-focus) solid 2px;\n }\n }\n\n &__dragger {\n position: absolute;\n inset-block: 0;\n inset-inline: 2px;\n\n cursor: move;\n\n background: var(--_--g-date-timeline-color-selection);\n\n &:hover,\n &_dragging {\n background: var(--_--g-date-timeline-color-selection-hover);\n }\n\n &_disabled {\n pointer-events: none;\n }\n }\n\n &__start {\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n\n width: 4px;\n\n background: var(--_--g-date-timeline-color-selection-handle);\n }\n\n &__end {\n position: absolute;\n inset-inline-end: 0;\n\n width: 4px;\n height: 100%;\n\n background: var(--_--g-date-timeline-color-selection-handle);\n }\n\n &__start,\n &__end {\n cursor: ew-resize;\n\n &:hover,\n &_dragging {\n background: var(--_--g-date-timeline-color-selection-handle-hover);\n }\n }\n\n &__slider-input-wrapper {\n @include mixins.visually-hidden();\n }\n}\n","@mixin visually-hidden() {\n position: absolute;\n\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n\n white-space: nowrap;\n\n border: 0;\n clip-path: inset(50%);\n}\n"],"file":"SelectionControl.css"}

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

@@ -100,13 +100,14 @@ export function SelectionControl(_a) {
     const endInputRef = React.useRef(null);
     let id = React.useId();
     id = (_b = props.id) !== null && _b !== void 0 ? _b : id;
+    const { t } = i18n.useTranslation();
     return (_jsxs("div", { className: b(null, className), style: Object.assign(Object.assign({}, style), { left: startX, width: endX - startX }), children: [_jsx("div", Object.assign({ className: b('dragger', {
                     dragging: isDragging === 'dragger',
                     disabled: Boolean(isDragging && isDragging !== 'dragger'),
                 }) }, moveProps, { onClick: () => {
                     var _a;
                     (_a = draggerInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                }, children: _jsx("div", { className: b('slider-input-wrapper'), children: _jsx("input", { id: `${id}-range`, ref: draggerInputRef, className: b('slider-input'), type: "range", step: 1, "aria-label": i18n('Range'), "aria-labelledby": [`${id}-range`, props['aria-labelledby']]
+                }, children: _jsx("div", { className: b('slider-input-wrapper'), children: _jsx("input", { id: `${id}-range`, ref: draggerInputRef, className: b('slider-input'), type: "range", step: 1, "aria-label": t('Range'), "aria-labelledby": [`${id}-range`, props['aria-labelledby']]
                             .filter(Boolean)
                             .join(' '), "aria-orientation": "horizontal", "aria-valuetext": `${startValue.format()} - ${endValue.format()}`, value: 0, onChange: () => { } }) }) })), state.canResize ? (
             /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
@@ -116,7 +117,7 @@ export function SelectionControl(_a) {
                 }) }, moveStartProps, { onClick: () => {
                     var _a;
                     (_a = startInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                }, children: _jsx("div", { className: b('slider-input-wrapper'), children: _jsx("input", { id: `${id}-start`, ref: startInputRef, className: b('slider-input'), type: "range", step: 1, "aria-label": i18n('Start of range'), "aria-labelledby": [`${id}-start`, props['aria-labelledby']]
+                }, children: _jsx("div", { className: b('slider-input-wrapper'), children: _jsx("input", { id: `${id}-start`, ref: startInputRef, className: b('slider-input'), type: "range", step: 1, "aria-label": t('Start of range'), "aria-labelledby": [`${id}-start`, props['aria-labelledby']]
                             .filter(Boolean)
                             .join(' '), "aria-orientation": "horizontal", "aria-valuetext": `${startValue.format()}`, value: 0, onChange: () => { } }) }) }))) : null, state.canResize ? (
             /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
@@ -126,7 +127,7 @@ export function SelectionControl(_a) {
                 }) }, moveEndProps, { onClick: () => {
                     var _a;
                     (_a = endInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                }, children: _jsx("div", { className: b('slider-input-wrapper'), children: _jsx("input", { id: `${id}-end`, ref: endInputRef, className: b('slider-input'), type: "range", step: 1, "aria-label": i18n('End of range'), "aria-labelledby": [`${id}-end`, props['aria-labelledby']]
+                }, children: _jsx("div", { className: b('slider-input-wrapper'), children: _jsx("input", { id: `${id}-end`, ref: endInputRef, className: b('slider-input'), type: "range", step: 1, "aria-label": t('End of range'), "aria-labelledby": [`${id}-end`, props['aria-labelledby']]
                             .filter(Boolean)
                             .join(' '), "aria-orientation": "horizontal", "aria-valuetext": `${endValue.format()}`, value: 0, onChange: () => { } }) }) }))) : null] }));
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectionControl.js","sourceRoot":"../../../../../../src","sources":["components/RangeDateSelection/components/SelectionControl/SelectionControl.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {useMove} from '../../../../hooks/useMove';\nimport {block} from '../../../../utils/cn';\nimport type {AccessibilityProps, DomProps, StyleProps} from '../../../types';\nimport type {RangeDateSelectionState} from '../../hooks/useRangeDateSelectionState';\nimport {i18n} from '../../i18n';\nimport {lerp} from '../../utils/span';\nimport {useViewportDimensions, useViewportInterval} from '../Ruler/Ruler';\n\nimport './SelectionControl.scss';\n\nconst b = block('range-date-selection-control');\n\nconst MIN_SELECTION_WIDTH = 12; // px;\nconst MIN_DRAG_SCALE = 0.01;\nconst MAX_DRAG_SCALE = 100;\nconst DRAG_SCALE_STRENGTH = 20;\n\ninterface SelectionControlProps extends DomProps, StyleProps, AccessibilityProps {\n state: RangeDateSelectionState;\n}\n\nexport function SelectionControl({state, style, className, ...props}: SelectionControlProps) {\n const {start: startDate, end: endDate} = useViewportInterval();\n const viewport = useViewportDimensions();\n\n const [isDragging, setIsDragging] = React.useState<'dragger' \| 'start' \| 'end' \| null>(null);\n\n const moveDataRef = React.useRef<{isZooming: boolean}>({\n isZooming: false,\n });\n\n const visualMinDuration =\n (MIN_SELECTION_WIDTH * (endDate.valueOf() - startDate.valueOf())) / viewport.width;\n\n const handleMoveEnd = () => {\n state.endDragging();\n setIsDragging(null);\n };\n\n const {moveProps} = useMove({\n onMoveStart: (e) => {\n setIsDragging('dragger');\n state.startDragging();\n moveDataRef.current = {\n isZooming: state.canResize && (e.ctrlKey \|\| e.metaKey),\n };\n },\n onMoveEnd: handleMoveEnd,\n onMove: (e) => {\n if (e.deltaX === 0) {\n return;\n }\n if (moveDataRef.current.isZooming) {\n let scale = Math.exp((e.deltaX * DRAG_SCALE_STRENGTH) / viewport.width);\n scale = Math.min(Math.max(scale, MIN_DRAG_SCALE), MAX_DRAG_SCALE);\n state.scale(scale, {visualMinDuration});\n } else {\n let delta = (e.deltaX * (endDate.valueOf() - startDate.valueOf())) / viewport.width;\n if (e.pointerType === 'keyboard') {\n delta =\n delta > 0\n ? Math.max(delta, state.align)\n : Math.min(delta, -1 * state.align);\n }\n state.move(delta, {visualMinDuration});\n }\n },\n });\n const {moveProps: moveStartProps} = useMove({\n onMoveStart: () => {\n setIsDragging('start');\n state.startDragging();\n },\n onMoveEnd: handleMoveEnd,\n onMove: (e) => {\n if (e.deltaX === 0) {\n return;\n }\n let delta = (e.deltaX * (endDate.valueOf() - startDate.valueOf())) / viewport.width;\n if (e.pointerType === 'keyboard') {\n delta =\n delta > 0 ? Math.max(delta, state.align) : Math.min(delta, -1 * state.align);\n }\n state.moveStart(delta, {visualMinDuration});\n },\n });\n const {moveProps: moveEndProps} = useMove({\n onMoveStart: () => {\n setIsDragging('end');\n state.startDragging();\n },\n onMoveEnd: handleMoveEnd,\n onMove: (e) => {\n if (e.deltaX === 0) {\n return;\n }\n let delta = (e.deltaX * (endDate.valueOf() - startDate.valueOf())) / viewport.width;\n if (e.pointerType === 'keyboard') {\n delta =\n delta > 0 ? Math.max(delta, state.align) : Math.min(delta, -1 * state.align);\n }\n state.moveEnd(delta, {visualMinDuration});\n },\n });\n\n const {start: startValue, end: endValue} = state.value;\n const startX = lerp(\n {start: startDate.valueOf(), end: endDate.valueOf()},\n {start: 0, end: viewport.width},\n startValue.valueOf(),\n );\n const endX = lerp(\n {start: startDate.valueOf(), end: endDate.valueOf()},\n {start: 0, end: viewport.width},\n endValue.valueOf(),\n );\n\n const draggerInputRef = React.useRef<HTMLInputElement>(null);\n const startInputRef = React.useRef<HTMLInputElement>(null);\n const endInputRef = React.useRef<HTMLInputElement>(null);\n\n let id = React.useId();\n id = props.id ?? id;\n\n return (\n <div className={b(null, className)} style={{...style, left: startX, width: endX - startX}}>\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions /}\n <div\n className={b('dragger', {\n dragging: isDragging === 'dragger',\n disabled: Boolean(isDragging && isDragging !== 'dragger'),\n })}\n {...moveProps}\n onClick={() => {\n draggerInputRef.current?.focus();\n }}\n >\n <div className={b('slider-input-wrapper')}>\n <input\n id={`${id}-range`}\n ref={draggerInputRef}\n className={b('slider-input')}\n type=\"range\"\n step={1}\n aria-label={i18n('Range')}\n aria-labelledby={[`${id}-range`, props['aria-labelledby']]\n .filter(Boolean)\n .join(' ')}\n aria-orientation=\"horizontal\"\n aria-valuetext={`${startValue.format()} - ${endValue.format()}`}\n value={0}\n onChange={() => {}}\n />\n </div>\n </div>\n {state.canResize ? (\n / eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions /\n <div\n className={b('start', {\n dragging: isDragging === 'start',\n disabled: Boolean(isDragging && isDragging !== 'start'),\n })}\n {...moveStartProps}\n onClick={() => {\n startInputRef.current?.focus();\n }}\n >\n <div className={b('slider-input-wrapper')}>\n <input\n id={`${id}-start`}\n ref={startInputRef}\n className={b('slider-input')}\n type=\"range\"\n step={1}\n aria-label={i18n('Start of range')}\n aria-labelledby={[`${id}-start`, props['aria-labelledby']]\n .filter(Boolean)\n .join(' ')}\n aria-orientation=\"horizontal\"\n aria-valuetext={`${startValue.format()}`}\n value={0}\n onChange={() => {}}\n />\n </div>\n </div>\n ) : null}\n {state.canResize ? (\n / eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */\n <div\n className={b('end', {\n dragging: isDragging === 'end',\n disabled: Boolean(isDragging && isDragging !== 'end'),\n })}\n {...moveEndProps}\n onClick={() => {\n endInputRef.current?.focus();\n }}\n >\n <div className={b('slider-input-wrapper')}>\n <input\n id={`${id}-end`}\n ref={endInputRef}\n className={b('slider-input')}\n type=\"range\"\n step={1}\n aria-label={i18n('End of range')}\n aria-labelledby={[`${id}-end`, props['aria-labelledby']]\n .filter(Boolean)\n .join(' ')}\n aria-orientation=\"horizontal\"\n aria-valuetext={`${endValue.format()}`}\n value={0}\n onChange={() => {}}\n />\n </div>\n </div>\n ) : null}\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"SelectionControl.js","sourceRoot":"../../../../../../src","sources":["components/RangeDateSelection/components/SelectionControl/SelectionControl.tsx"],"names":[],"mappings":";;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,OAAO,EAAC,qCAAkC;AAClD,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAG3C,OAAO,EAAC,IAAI,EAAC,4BAAmB;AAChC,OAAO,EAAC,IAAI,EAAC,4BAAyB;AACtC,OAAO,EAAC,qBAAqB,EAAE,mBAAmB,EAAC,0BAAuB;AAE1E,gCAAiC;AAEjC,MAAM,CAAC,GAAG,KAAK,CAAC,8BAA8B,CAAC,CAAC;AAEhD,MAAM,mBAAmB,GAAG,EAAE,CAAC,CAAC,MAAM;AACtC,MAAM,cAAc,GAAG,IAAI,CAAC;AAC5B,MAAM,cAAc,GAAG,GAAG,CAAC;AAC3B,MAAM,mBAAmB,GAAG,EAAE,CAAC;AAM/B,MAAM,UAAU,gBAAgB,CAAC,EAA0D;;QAA1D,EAAC,KAAK,EAAE,KAAK,EAAE,SAAS,OAAkC,EAA7B,KAAK,cAAlC,+BAAmC,CAAD;IAC/D,MAAM,EAAC,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO,EAAC,GAAG,mBAAmB,EAAE,CAAC;IAC/D,MAAM,QAAQ,GAAG,qBAAqB,EAAE,CAAC;IAEzC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAqC,IAAI,CAAC,CAAC;IAE7F,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAuB;QACnD,SAAS,EAAE,KAAK;KACnB,CAAC,CAAC;IAEH,MAAM,iBAAiB,GACnB,CAAC,mBAAmB,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAEvF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,KAAK,CAAC,WAAW,EAAE,CAAC;QACpB,aAAa,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,EAAC,SAAS,EAAC,GAAG,OAAO,CAAC;QACxB,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,aAAa,CAAC,SAAS,CAAC,CAAC;YACzB,KAAK,CAAC,aAAa,EAAE,CAAC;YACtB,WAAW,CAAC,OAAO,GAAG;gBAClB,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC;aACzD,CAAC;QACN,CAAC;QACD,SAAS,EAAE,aAAa;QACxB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;YACV,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACjB,OAAO;YACX,CAAC;YACD,IAAI,WAAW,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC;gBAChC,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;gBACxE,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE,cAAc,CAAC,CAAC;gBAClE,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,EAAC,iBAAiB,EAAC,CAAC,CAAC;YAC5C,CAAC;iBAAM,CAAC;gBACJ,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;gBACpF,IAAI,CAAC,CAAC,WAAW,KAAK,UAAU,EAAE,CAAC;oBAC/B,KAAK;wBACD,KAAK,GAAG,CAAC;4BACL,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC;4BAC9B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;gBAChD,CAAC;gBACD,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,EAAC,iBAAiB,EAAC,CAAC,CAAC;YAC3C,CAAC;QACL,CAAC;KACJ,CAAC,CAAC;IACH,MAAM,EAAC,SAAS,EAAE,cAAc,EAAC,GAAG,OAAO,CAAC;QACxC,WAAW,EAAE,GAAG,EAAE;YACd,aAAa,CAAC,OAAO,CAAC,CAAC;YACvB,KAAK,CAAC,aAAa,EAAE,CAAC;QAC1B,CAAC;QACD,SAAS,EAAE,aAAa;QACxB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;YACV,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACjB,OAAO;YACX,CAAC;YACD,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;YACpF,IAAI,CAAC,CAAC,WAAW,KAAK,UAAU,EAAE,CAAC;gBAC/B,KAAK;oBACD,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;YACrF,CAAC;YACD,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,EAAC,iBAAiB,EAAC,CAAC,CAAC;QAChD,CAAC;KACJ,CAAC,CAAC;IACH,MAAM,EAAC,SAAS,EAAE,YAAY,EAAC,GAAG,OAAO,CAAC;QACtC,WAAW,EAAE,GAAG,EAAE;YACd,aAAa,CAAC,KAAK,CAAC,CAAC;YACrB,KAAK,CAAC,aAAa,EAAE,CAAC;QAC1B,CAAC;QACD,SAAS,EAAE,aAAa;QACxB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;YACV,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACjB,OAAO;YACX,CAAC;YACD,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;YACpF,IAAI,CAAC,CAAC,WAAW,KAAK,UAAU,EAAE,CAAC;gBAC/B,KAAK;oBACD,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;YACrF,CAAC;YACD,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAC,iBAAiB,EAAC,CAAC,CAAC;QAC9C,CAAC;KACJ,CAAC,CAAC;IAEH,MAAM,EAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAC,GAAG,KAAK,CAAC,KAAK,CAAC;IACvD,MAAM,MAAM,GAAG,IAAI,CACf,EAAC,KAAK,EAAE,SAAS,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,OAAO,CAAC,OAAO,EAAE,EAAC,EACpD,EAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,QAAQ,CAAC,KAAK,EAAC,EAC/B,UAAU,CAAC,OAAO,EAAE,CACvB,CAAC;IACF,MAAM,IAAI,GAAG,IAAI,CACb,EAAC,KAAK,EAAE,SAAS,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,OAAO,CAAC,OAAO,EAAE,EAAC,EACpD,EAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,QAAQ,CAAC,KAAK,EAAC,EAC/B,QAAQ,CAAC,OAAO,EAAE,CACrB,CAAC;IAEF,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC7D,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC3D,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEzD,IAAI,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;IACvB,EAAE,GAAG,MAAA,KAAK,CAAC,EAAE,mCAAI,EAAE,CAAC;IAEpB,MAAM,EAAC,CAAC,EAAC,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;IAElC,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,KAAK,kCAAM,KAAK,KAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,GAAG,MAAM,gBAEpF,4BACI,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE;oBACpB,QAAQ,EAAE,UAAU,KAAK,SAAS;oBAClC,QAAQ,EAAE,OAAO,CAAC,UAAU,IAAI,UAAU,KAAK,SAAS,CAAC;iBAC5D,CAAC,IACE,SAAS,IACb,OAAO,EAAE,GAAG,EAAE;;oBACV,MAAA,eAAe,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBACrC,CAAC,YAED,cAAK,SAAS,EAAE,CAAC,CAAC,sBAAsB,CAAC,YACrC,gBACI,EAAE,EAAE,GAAG,EAAE,QAAQ,EACjB,GAAG,EAAE,eAAe,EACpB,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAC5B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,CAAC,gBACK,CAAC,CAAC,OAAO,CAAC,qBACL,CAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;6BACrD,MAAM,CAAC,OAAO,CAAC;6BACf,IAAI,CAAC,GAAG,CAAC,sBACG,YAAY,oBACb,GAAG,UAAU,CAAC,MAAM,EAAE,MAAM,QAAQ,CAAC,MAAM,EAAE,EAAE,EAC/D,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GACpB,GACA,IACJ,EACL,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;YACf,6GAA6G;YAC7G,4BACI,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE;oBAClB,QAAQ,EAAE,UAAU,KAAK,OAAO;oBAChC,QAAQ,EAAE,OAAO,CAAC,UAAU,IAAI,UAAU,KAAK,OAAO,CAAC;iBAC1D,CAAC,IACE,cAAc,IAClB,OAAO,EAAE,GAAG,EAAE;;oBACV,MAAA,aAAa,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBACnC,CAAC,YAED,cAAK,SAAS,EAAE,CAAC,CAAC,sBAAsB,CAAC,YACrC,gBACI,EAAE,EAAE,GAAG,EAAE,QAAQ,EACjB,GAAG,EAAE,aAAa,EAClB,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAC5B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,CAAC,gBACK,CAAC,CAAC,gBAAgB,CAAC,qBACd,CAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;6BACrD,MAAM,CAAC,OAAO,CAAC;6BACf,IAAI,CAAC,GAAG,CAAC,sBACG,YAAY,oBACb,GAAG,UAAU,CAAC,MAAM,EAAE,EAAE,EACxC,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GACpB,GACA,IACJ,CACT,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;YACf,6GAA6G;YAC7G,4BACI,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE;oBAChB,QAAQ,EAAE,UAAU,KAAK,KAAK;oBAC9B,QAAQ,EAAE,OAAO,CAAC,UAAU,IAAI,UAAU,KAAK,KAAK,CAAC;iBACxD,CAAC,IACE,YAAY,IAChB,OAAO,EAAE,GAAG,EAAE;;oBACV,MAAA,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBACjC,CAAC,YAED,cAAK,SAAS,EAAE,CAAC,CAAC,sBAAsB,CAAC,YACrC,gBACI,EAAE,EAAE,GAAG,EAAE,MAAM,EACf,GAAG,EAAE,WAAW,EAChB,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAC5B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,CAAC,gBACK,CAAC,CAAC,cAAc,CAAC,qBACZ,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;6BACnD,MAAM,CAAC,OAAO,CAAC;6BACf,IAAI,CAAC,GAAG,CAAC,sBACG,YAAY,oBACb,GAAG,QAAQ,CAAC,MAAM,EAAE,EAAE,EACtC,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GACpB,GACA,IACJ,CACT,CAAC,CAAC,CAAC,IAAI,IACN,CACT,CAAC;AACN,CAAC","sourcesContent":["import React from 'react';\n\nimport {useMove} from '../../../../hooks/useMove';\nimport {block} from '../../../../utils/cn';\nimport type {AccessibilityProps, DomProps, StyleProps} from '../../../types';\nimport type {RangeDateSelectionState} from '../../hooks/useRangeDateSelectionState';\nimport {i18n} from '../../i18n';\nimport {lerp} from '../../utils/span';\nimport {useViewportDimensions, useViewportInterval} from '../Ruler/Ruler';\n\nimport './SelectionControl.scss';\n\nconst b = block('range-date-selection-control');\n\nconst MIN_SELECTION_WIDTH = 12; // px;\nconst MIN_DRAG_SCALE = 0.01;\nconst MAX_DRAG_SCALE = 100;\nconst DRAG_SCALE_STRENGTH = 20;\n\ninterface SelectionControlProps extends DomProps, StyleProps, AccessibilityProps {\n state: RangeDateSelectionState;\n}\n\nexport function SelectionControl({state, style, className, ...props}: SelectionControlProps) {\n const {start: startDate, end: endDate} = useViewportInterval();\n const viewport = useViewportDimensions();\n\n const [isDragging, setIsDragging] = React.useState<'dragger' \| 'start' \| 'end' \| null>(null);\n\n const moveDataRef = React.useRef<{isZooming: boolean}>({\n isZooming: false,\n });\n\n const visualMinDuration =\n (MIN_SELECTION_WIDTH * (endDate.valueOf() - startDate.valueOf())) / viewport.width;\n\n const handleMoveEnd = () => {\n state.endDragging();\n setIsDragging(null);\n };\n\n const {moveProps} = useMove({\n onMoveStart: (e) => {\n setIsDragging('dragger');\n state.startDragging();\n moveDataRef.current = {\n isZooming: state.canResize && (e.ctrlKey \|\| e.metaKey),\n };\n },\n onMoveEnd: handleMoveEnd,\n onMove: (e) => {\n if (e.deltaX === 0) {\n return;\n }\n if (moveDataRef.current.isZooming) {\n let scale = Math.exp((e.deltaX * DRAG_SCALE_STRENGTH) / viewport.width);\n scale = Math.min(Math.max(scale, MIN_DRAG_SCALE), MAX_DRAG_SCALE);\n state.scale(scale, {visualMinDuration});\n } else {\n let delta = (e.deltaX * (endDate.valueOf() - startDate.valueOf())) / viewport.width;\n if (e.pointerType === 'keyboard') {\n delta =\n delta > 0\n ? Math.max(delta, state.align)\n : Math.min(delta, -1 * state.align);\n }\n state.move(delta, {visualMinDuration});\n }\n },\n });\n const {moveProps: moveStartProps} = useMove({\n onMoveStart: () => {\n setIsDragging('start');\n state.startDragging();\n },\n onMoveEnd: handleMoveEnd,\n onMove: (e) => {\n if (e.deltaX === 0) {\n return;\n }\n let delta = (e.deltaX * (endDate.valueOf() - startDate.valueOf())) / viewport.width;\n if (e.pointerType === 'keyboard') {\n delta =\n delta > 0 ? Math.max(delta, state.align) : Math.min(delta, -1 * state.align);\n }\n state.moveStart(delta, {visualMinDuration});\n },\n });\n const {moveProps: moveEndProps} = useMove({\n onMoveStart: () => {\n setIsDragging('end');\n state.startDragging();\n },\n onMoveEnd: handleMoveEnd,\n onMove: (e) => {\n if (e.deltaX === 0) {\n return;\n }\n let delta = (e.deltaX * (endDate.valueOf() - startDate.valueOf())) / viewport.width;\n if (e.pointerType === 'keyboard') {\n delta =\n delta > 0 ? Math.max(delta, state.align) : Math.min(delta, -1 * state.align);\n }\n state.moveEnd(delta, {visualMinDuration});\n },\n });\n\n const {start: startValue, end: endValue} = state.value;\n const startX = lerp(\n {start: startDate.valueOf(), end: endDate.valueOf()},\n {start: 0, end: viewport.width},\n startValue.valueOf(),\n );\n const endX = lerp(\n {start: startDate.valueOf(), end: endDate.valueOf()},\n {start: 0, end: viewport.width},\n endValue.valueOf(),\n );\n\n const draggerInputRef = React.useRef<HTMLInputElement>(null);\n const startInputRef = React.useRef<HTMLInputElement>(null);\n const endInputRef = React.useRef<HTMLInputElement>(null);\n\n let id = React.useId();\n id = props.id ?? id;\n\n const {t} = i18n.useTranslation();\n\n return (\n <div className={b(null, className)} style={{...style, left: startX, width: endX - startX}}>\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions /}\n <div\n className={b('dragger', {\n dragging: isDragging === 'dragger',\n disabled: Boolean(isDragging && isDragging !== 'dragger'),\n })}\n {...moveProps}\n onClick={() => {\n draggerInputRef.current?.focus();\n }}\n >\n <div className={b('slider-input-wrapper')}>\n <input\n id={`${id}-range`}\n ref={draggerInputRef}\n className={b('slider-input')}\n type=\"range\"\n step={1}\n aria-label={t('Range')}\n aria-labelledby={[`${id}-range`, props['aria-labelledby']]\n .filter(Boolean)\n .join(' ')}\n aria-orientation=\"horizontal\"\n aria-valuetext={`${startValue.format()} - ${endValue.format()}`}\n value={0}\n onChange={() => {}}\n />\n </div>\n </div>\n {state.canResize ? (\n / eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions /\n <div\n className={b('start', {\n dragging: isDragging === 'start',\n disabled: Boolean(isDragging && isDragging !== 'start'),\n })}\n {...moveStartProps}\n onClick={() => {\n startInputRef.current?.focus();\n }}\n >\n <div className={b('slider-input-wrapper')}>\n <input\n id={`${id}-start`}\n ref={startInputRef}\n className={b('slider-input')}\n type=\"range\"\n step={1}\n aria-label={t('Start of range')}\n aria-labelledby={[`${id}-start`, props['aria-labelledby']]\n .filter(Boolean)\n .join(' ')}\n aria-orientation=\"horizontal\"\n aria-valuetext={`${startValue.format()}`}\n value={0}\n onChange={() => {}}\n />\n </div>\n </div>\n ) : null}\n {state.canResize ? (\n / eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */\n <div\n className={b('end', {\n dragging: isDragging === 'end',\n disabled: Boolean(isDragging && isDragging !== 'end'),\n })}\n {...moveEndProps}\n onClick={() => {\n endInputRef.current?.focus();\n }}\n >\n <div className={b('slider-input-wrapper')}>\n <input\n id={`${id}-end`}\n ref={endInputRef}\n className={b('slider-input')}\n type=\"range\"\n step={1}\n aria-label={t('End of range')}\n aria-labelledby={[`${id}-end`, props['aria-labelledby']]\n .filter(Boolean)\n .join(' ')}\n aria-orientation=\"horizontal\"\n aria-valuetext={`${endValue.format()}`}\n value={0}\n onChange={() => {}}\n />\n </div>\n </div>\n ) : null}\n </div>\n );\n}\n"]}

package/dist/esm/components/RangeDateSelection/components/Ticks/Ticks.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/RangeDateSelection/components/variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Dtimeline-ticks';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20stroke:%20var(--g-color-text-secondary);%0A%0A%20%20%20%20fill:%20var(--g-color-text-secondary);%0A%20%20%20%20stroke-width:%201px;%0A%0A%20%20%20%20&_theme_dim%20%7B%0A%20%20%20%20%20%20%20%20stroke:%20var(--g-color-line-generic-accent);%0A%0A%20%20%20%20%20%20%20%20fill:%20var(--g-color-line-generic-accent);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__label%20%7B%0A%20%20%20%20%20%20%20%20font-size:%2011px;%0A%20%20%20%20%20%20%20%20line-height:%2014px;%0A%20%20%20%20%20%20%20%20user-select:%20none;%0A%0A%20%20%20%20%20%20%20%20fill:%20var(--g-color-text-secondary);%0A%20%20%20%20%20%20%20%20text-anchor:%20middle;%0A%20%20%20%20%7D%0A%7D%0A"],"names":[],"mappings":"AAIA;EACI;EAEA;EACA;;AAEA;EACI;EAEA;;AAGJ;EACI;EACA;EACA;EAEA;EACA","sourcesContent":["@use '../../../variables';\n\n$block: '.#{variables.$ns}timeline-ticks';\n\n#{$block} {\n stroke: var(--g-color-text-secondary);\n\n fill: var(--g-color-text-secondary);\n stroke-width: 1px;\n\n &_theme_dim {\n stroke: var(--g-color-line-generic-accent);\n\n fill: var(--g-color-line-generic-accent);\n }\n\n &__label {\n font-size: 11px;\n line-height: 14px;\n user-select: none;\n\n fill: var(--g-color-text-secondary);\n text-anchor: middle;\n }\n}\n"],"file":"Ticks.css"}
1	+ {"version":3,"sources":["components/RangeDateSelection/components/Ticks/Ticks.scss"],"names":[],"mappings":"AAIA;EACI;EAEA;EACA;;AAEA;EACI;EAEA;;AAGJ;EACI;EACA;EACA;EAEA;EACA","sourcesContent":["@use '../../../variables';\n\n$block: '.#{variables.$ns}timeline-ticks';\n\n#{$block} {\n stroke: var(--g-color-text-secondary);\n\n fill: var(--g-color-text-secondary);\n stroke-width: 1px;\n\n &_theme_dim {\n stroke: var(--g-color-line-generic-accent);\n\n fill: var(--g-color-line-generic-accent);\n }\n\n &__label {\n font-size: 11px;\n line-height: 14px;\n user-select: none;\n\n fill: var(--g-color-text-secondary);\n text-anchor: middle;\n }\n}\n"],"file":"Ticks.css"}

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

@@ -11,32 +11,32 @@ export function UnavailableTicks({ theme, geometry, tickWidth, minValue, maxValu
     const interval = useViewportInterval();
     const endPoint = calculatePosition(minValue, interval, viewport.width);
     const startPoint = calculatePosition(maxValue, interval, viewport.width);
-    const tickCoords = [];
-    if (!isNaN(endPoint) && endPoint > 0) {
-        let x = endPoint - tickWidth;
-        if (endPoint > viewport.width) {
-            x = endPoint - tickWidth * Math.floor((endPoint - viewport.width) / tickWidth);
-        }
-        tickCoords.push(x);
-        while (x > 0) {
-            x -= tickWidth;
+    const ticksGeometry = React.useMemo(() => {
+        const tickCoords = [];
+        if (!isNaN(endPoint) && endPoint > 0) {
+            let x = endPoint - tickWidth;
+            if (endPoint > viewport.width) {
+                x = endPoint - tickWidth * Math.floor((endPoint - viewport.width) / tickWidth);
+            }
             tickCoords.push(x);
+            while (x > 0) {
+                x -= tickWidth;
+                tickCoords.push(x);
+            }
         }
-    }
-    if (!isNaN(startPoint) && startPoint < viewport.width) {
-        let x = startPoint;
-        if (startPoint < 0) {
-            x = startPoint + tickWidth * Math.floor((0 - startPoint) / tickWidth) - tickWidth;
-        }
-        tickCoords.push(x);
-        while (x < viewport.width) {
-            x += tickWidth;
+        if (!isNaN(startPoint) && startPoint < viewport.width) {
+            let x = startPoint;
+            if (startPoint < 0) {
+                x = startPoint + tickWidth * Math.floor((0 - startPoint) / tickWidth) - tickWidth;
+            }
             tickCoords.push(x);
+            while (x < viewport.width) {
+                x += tickWidth;
+                tickCoords.push(x);
+            }
         }
-    }
-    const ticksGeometry = React.useMemo(() => {
         return tickCoords.map(geometry).join('');
-    }, [geometry, tickCoords]);
+    }, [endPoint, geometry, startPoint, tickWidth, viewport.width]);
     const ticksPath = _jsx("path", { className: b({ theme }, className), d: ticksGeometry });
     return _jsx(React.Fragment, { children: ticksPath });
 }

package/dist/esm/components/RangeDateSelection/components/Ticks/UnavialableTicks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UnavialableTicks.js","sourceRoot":"../../../../../../src","sources":["components/RangeDateSelection/components/Ticks/UnavialableTicks.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAC3C,OAAO,EAAC,qBAAqB,EAAE,mBAAmB,EAAC,0BAAuB;AAG1E,OAAO,EAAC,iBAAiB,EAAE,uBAAuB,EAAE,qBAAqB,EAAC,mBAAgB;AAE1F,qBAAsB;AAYtB,MAAM,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;AAElC,OAAO,EAAC,uBAAuB,EAAE,qBAAqB,EAAC,CAAC;AAGxD,MAAM,UAAU,gBAAgB,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,SAAS,GACA;IACT,MAAM,QAAQ,GAAG,qBAAqB,EAAE,CAAC;IACzC,MAAM,QAAQ,GAAG,mBAAmB,EAAE,CAAC;IAEvC,MAAM,QAAQ,GAAG,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IACvE,MAAM,UAAU,GAAG,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEzE,MAAM,UAAU,GAAa,EAAE,CAAC;~~IAChC~~,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;~~QACnC~~,IAAI,CAAC,GAAG,QAAQ,GAAG,SAAS,CAAC;~~QAC7B~~,IAAI,QAAQ,GAAG,QAAQ,CAAC,KAAK,EAAE,CAAC;~~YAC5B~~,CAAC,GAAG,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC,CAAC;~~QACnF~~,CAAC;~~QACD~~,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;~~QACnB~~,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;~~YACX~~,CAAC,IAAI,SAAS,CAAC;~~YACf~~,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;~~QACvB~~,CAAC;~~IACL~~,CAAC;~~IAED~~,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,UAAU,GAAG,QAAQ,CAAC,KAAK,EAAE,CAAC;~~QACpD~~,IAAI,CAAC,GAAG,UAAU,CAAC;~~QACnB~~,IAAI,UAAU,GAAG,CAAC,EAAE,CAAC;~~YACjB~~,CAAC,GAAG,UAAU,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;~~QACtF~~,CAAC;~~QACD~~,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;~~QACnB~~,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,EAAE,CAAC;~~YACxB~~,CAAC,IAAI,SAAS,CAAC;~~YACf~~,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;~~QACvB~~,CAAC;~~IACL~~,CAAC;~~IAED~~,~~MAAM,aAAa,GAAG,KAAK,CAAC,~~OAAO,~~CAAC,GAAG,EAAE;QACrC,OAAO,~~UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC7C,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;~~IAE3B~~,MAAM,SAAS,GAAG,eAAM,SAAS,EAAE,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,SAAS,CAAC,EAAE,CAAC,EAAE,aAAa,GAAI,CAAC;IAE/E,OAAO,KAAC,KAAK,CAAC,QAAQ,cAAE,SAAS,GAAkB,CAAC;AACxD,CAAC","sourcesContent":["import React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\n\nimport {block} from '../../../../utils/cn';\nimport {useViewportDimensions, useViewportInterval} from '../Ruler/Ruler';\n\nimport type {Geometry} from './utils';\nimport {calculatePosition, makeMiddleTicksGeometry, makeSlitTicksGeometry} from './utils';\n\nimport './Ticks.scss';\n\ninterface TicksProps {\n theme: 'normal' \| 'dim';\n tickWidth: number;\n minValue?: DateTime;\n maxValue?: DateTime;\n\n geometry: Geometry;\n className?: string;\n}\n\nconst b = block('timeline-ticks');\n\nexport {makeMiddleTicksGeometry, makeSlitTicksGeometry};\nexport type {Geometry};\n\nexport function UnavailableTicks({\n theme,\n geometry,\n tickWidth,\n minValue,\n maxValue,\n className,\n}: TicksProps) {\n const viewport = useViewportDimensions();\n const interval = useViewportInterval();\n\n const endPoint = calculatePosition(minValue, interval, viewport.width);\n const startPoint = calculatePosition(maxValue, interval, viewport.width);\n\n const tickCoords: number[] = [];\n if (!isNaN(endPoint) && endPoint > 0) {\n let x = endPoint - tickWidth;\n if (endPoint > viewport.width) {\n x = endPoint - tickWidth * Math.floor((endPoint - viewport.width) / tickWidth);\n }\n tickCoords.push(x);\n while (x > 0) {\n x -= tickWidth;\n tickCoords.push(x);\n }\n }\n\n if (!isNaN(startPoint) && startPoint < viewport.width) {\n let x = startPoint;\n if (startPoint < 0) {\n x = startPoint + tickWidth * Math.floor((0 - startPoint) / tickWidth) - tickWidth;\n }\n tickCoords.push(x);\n while (x < viewport.width) {\n x += tickWidth;\n tickCoords.push(x);\n }\n }\n~~\n const ticksGeometry = React.useMemo(() => {\n~~ return tickCoords.map(geometry).join('');\n }, [geometry, ~~tickCoords~~]);\n\n const ticksPath = <path className={b({theme}, className)} d={ticksGeometry} />;\n\n return <React.Fragment>{ticksPath}</React.Fragment>;\n}\n"]}
1	+ {"version":3,"file":"UnavialableTicks.js","sourceRoot":"../../../../../../src","sources":["components/RangeDateSelection/components/Ticks/UnavialableTicks.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAC3C,OAAO,EAAC,qBAAqB,EAAE,mBAAmB,EAAC,0BAAuB;AAG1E,OAAO,EAAC,iBAAiB,EAAE,uBAAuB,EAAE,qBAAqB,EAAC,mBAAgB;AAE1F,qBAAsB;AAYtB,MAAM,CAAC,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;AAElC,OAAO,EAAC,uBAAuB,EAAE,qBAAqB,EAAC,CAAC;AAGxD,MAAM,UAAU,gBAAgB,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,SAAS,GACA;IACT,MAAM,QAAQ,GAAG,qBAAqB,EAAE,CAAC;IACzC,MAAM,QAAQ,GAAG,mBAAmB,EAAE,CAAC;IAEvC,MAAM,QAAQ,GAAG,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IACvE,MAAM,UAAU,GAAG,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEzE,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACrC,MAAM,UAAU,GAAa,EAAE,CAAC;QAChC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,GAAG,QAAQ,GAAG,SAAS,CAAC;YAC7B,IAAI,QAAQ,GAAG,QAAQ,CAAC,KAAK,EAAE,CAAC;gBAC5B,CAAC,GAAG,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC,CAAC;YACnF,CAAC;YACD,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YACnB,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;gBACX,CAAC,IAAI,SAAS,CAAC;gBACf,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YACvB,CAAC;QACL,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,UAAU,GAAG,QAAQ,CAAC,KAAK,EAAE,CAAC;YACpD,IAAI,CAAC,GAAG,UAAU,CAAC;YACnB,IAAI,UAAU,GAAG,CAAC,EAAE,CAAC;gBACjB,CAAC,GAAG,UAAU,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;YACtF,CAAC;YACD,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YACnB,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,EAAE,CAAC;gBACxB,CAAC,IAAI,SAAS,CAAC;gBACf,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YACvB,CAAC;QACL,CAAC;QACD,OAAO,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC7C,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAEhE,MAAM,SAAS,GAAG,eAAM,SAAS,EAAE,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,SAAS,CAAC,EAAE,CAAC,EAAE,aAAa,GAAI,CAAC;IAE/E,OAAO,KAAC,KAAK,CAAC,QAAQ,cAAE,SAAS,GAAkB,CAAC;AACxD,CAAC","sourcesContent":["import React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\n\nimport {block} from '../../../../utils/cn';\nimport {useViewportDimensions, useViewportInterval} from '../Ruler/Ruler';\n\nimport type {Geometry} from './utils';\nimport {calculatePosition, makeMiddleTicksGeometry, makeSlitTicksGeometry} from './utils';\n\nimport './Ticks.scss';\n\ninterface TicksProps {\n theme: 'normal' \| 'dim';\n tickWidth: number;\n minValue?: DateTime;\n maxValue?: DateTime;\n\n geometry: Geometry;\n className?: string;\n}\n\nconst b = block('timeline-ticks');\n\nexport {makeMiddleTicksGeometry, makeSlitTicksGeometry};\nexport type {Geometry};\n\nexport function UnavailableTicks({\n theme,\n geometry,\n tickWidth,\n minValue,\n maxValue,\n className,\n}: TicksProps) {\n const viewport = useViewportDimensions();\n const interval = useViewportInterval();\n\n const endPoint = calculatePosition(minValue, interval, viewport.width);\n const startPoint = calculatePosition(maxValue, interval, viewport.width);\n\n const ticksGeometry = React.useMemo(() => {\n const tickCoords: number[] = [];\n if (!isNaN(endPoint) && endPoint > 0) {\n let x = endPoint - tickWidth;\n if (endPoint > viewport.width) {\n x = endPoint - tickWidth * Math.floor((endPoint - viewport.width) / tickWidth);\n }\n tickCoords.push(x);\n while (x > 0) {\n x -= tickWidth;\n tickCoords.push(x);\n }\n }\n\n if (!isNaN(startPoint) && startPoint < viewport.width) {\n let x = startPoint;\n if (startPoint < 0) {\n x = startPoint + tickWidth * Math.floor((0 - startPoint) / tickWidth) - tickWidth;\n }\n tickCoords.push(x);\n while (x < viewport.width) {\n x += tickWidth;\n tickCoords.push(x);\n }\n }\n return tickCoords.map(geometry).join('');\n }, [endPoint, geometry, startPoint, tickWidth, viewport.width]);\n\n const ticksPath = <path className={b({theme}, className)} d={ticksGeometry} />;\n\n return <React.Fragment>{ticksPath}</React.Fragment>;\n}\n"]}

package/dist/esm/components/RangeDateSelection/hooks/useRangeDateSelectionState.d.ts CHANGED Viewed

@@ -45,14 +45,12 @@ export interface RangeDateSelectionOptions extends ValueBase<RangeValue<DateTime
     timeZone?: string;
     /**
      * The number of selection intervals that fit into the underlying ruler.
-     *
      * @default 4
      */
     numberOfIntervals?: number;
     /**
      * Place of the selection on the underlying ruler.
      * Value must be between 0 and 1, where 0 is the start of the ruler and 1 is the end.
-     *
      * @default 0.5 - center of the ruler
      */
     placeOnRuler?: number;

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

@@ -36,7 +36,7 @@ export function useRangeDateSelectionState(props) {
         start: value.start.timeZone(timeZone),
         end: value.end.timeZone(timeZone),
     };
-    const interval = isDragging ? displayValue : currentValue !== null && currentValue !== void 0 ? currentValue : displayValue;
+    const interval = isDragging ? displayValue : (currentValue !== null && currentValue !== void 0 ? currentValue : displayValue);
     const viewportInterval = getViewportIntervalFromDates(interval.start, interval.end, props.numberOfIntervals, props.placeOnRuler);
     const minValue = ((_d = props.minValue) === null || _d === void 0 ? void 0 : _d.isAfter(viewportInterval.start))
         ? props.minValue

package/dist/esm/components/RangeDateSelection/hooks/useRangeDateSelectionState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useRangeDateSelectionState.js","sourceRoot":"../../../../../src","sources":["components/RangeDateSelection/hooks/useRangeDateSelectionState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,kBAAkB,EAAC,MAAM,mBAAmB,CAAC;AAGrD,OAAO,EAAC,MAAM,EAAE,IAAI,EAAC,iCAA8B;AACnD,OAAO,EAAC,cAAc,EAAE,sBAAsB,EAAC,6BAA0B;AACzE,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAClE,OAAO,EAAC,aAAa,EAAC,yBAAsB;AAE5C,SAAS,4BAA4B,CACjC,KAAe,EACf,GAAa,EACb,iBAAiB,GAAG,CAAC,EACrB,eAAe,GAAG,GAAG;IAErB,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7B,OAAO;QACH,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAC,iBAAiB,GAAG,CAAC,CAAC,GAAG,eAAe,CAAC;QACvE,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,iBAAiB,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC;KACvE,CAAC;AACN,CAAC;AAoDD,MAAM,UAAU,0BAA0B,CACtC,KAAgC;;IAEhC,MAAM,aAAa,GAAG,kBAAkB,CACpC,CAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,KAAK,MAAI,MAAA,KAAK,CAAC,YAAY,0CAAE,KAAK,CAAA,IAAI,KAAK,CAAC,gBAAgB,CAC5E,CAAC;IACF,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,aAAa,CAAC;IAEjD,MAAM,gBAAgB,GAAG,sBAAsB,CAAC;QAC5C,gBAAgB,EAAE,KAAK,CAAC,gBAAgB;QACxC,QAAQ;KACX,CAAC,CAAC;IAEH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAA8B,IAAI,CAAC,CAAC;IAE1F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,kBAAkB,CACxC,KAAK,CAAC,KAAK,EACX,MAAA,KAAK,CAAC,YAAY,mCAAI;QAClB,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC;QAC9D,GAAG,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC;KAC7D,EACD,KAAK,CAAC,QAAQ,CACjB,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,QAA8B,EAAE,EAAE;QACnD,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,QAAQ,CAAC;YACL,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC;YACzE,GAAG,EAAE,aAAa,CAAC,QAAQ,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC;SACxE,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG;QACjB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC;QACrC,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC;KACpC,CAAC;IACF,MAAM,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,YAAY,CAAC;IAE1E,MAAM,gBAAgB,GAAG,4BAA4B,CACjD,QAAQ,CAAC,KAAK,EACd,QAAQ,CAAC,GAAG,EACZ,KAAK,CAAC,iBAAiB,EACvB,KAAK,CAAC,YAAY,CACrB,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAA,MAAA,KAAK,CAAC,QAAQ,0CAAE,OAAO,CAAC,gBAAgB,CAAC,KAAK,CAAC;QAC5D,CAAC,CAAC,KAAK,CAAC,QAAQ;QAChB,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;IAC7B,MAAM,QAAQ,GAAG,CAAA,MAAA,KAAK,CAAC,QAAQ,0CAAE,QAAQ,CAAC,gBAAgB,CAAC,GAAG,CAAC;QAC3D,CAAC,CAAC,KAAK,CAAC,QAAQ;QAChB,CAAC,CAAC,gBAAgB,CAAC,GAAG,CAAC;IAE3B,MAAM,KAAK,GAAG,MAAA,KAAK,CAAC,KAAK,mCAAI,MAAM,CAAC;IACpC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,MAAA,KAAK,CAAC,WAAW,mCAAI,MAAM,EAAE,KAAK,CAAC,CAAC;IACjE,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CACxB,IAAI,CAAC,GAAG,CAAC,MAAA,KAAK,CAAC,WAAW,mCAAI,EAAE,GAAG,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,EACjE,WAAW,CACd,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,GAAG,WAAW,CAAC;IAE5C,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAA8B,IAAI,CAAC,CAAC;IACtE,MAAM,gBAAgB,GAAG,CAAC,CAA8B,EAAE,EAAE;QACxD,aAAa,CAAC,OAAO,GAAG,CAAC,CAAC;QAC1B,eAAe,CAAC,CAAC,CAAC,CAAC;IACvB,CAAC,CAAC;IACF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,gBAAgB,CAAC,YAAY,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACrB,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;YACxB,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACvC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;QACnC,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;YACzB,OAAO;QACX,CAAC;QACD,MAAM,EAAC,KAAK,EAAE,GAAG,EAAC,GAAG,aAAa,CAAC,OAAO,CAAC;QAC3C,IAAI,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;QAC/C,IAAI,MAAM,GAAG,GAAG,CAAC,GAAG,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;QAC3C,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACnC,IAAI,QAAQ,CAAC,OAAO,EAAE,GAAG,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC;YAC1C,QAAQ,GAAG,QAAQ,CAAC;YACpB,MAAM,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACnF,CAAC;aAAM,IAAI,MAAM,CAAC,OAAO,EAAE,GAAG,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC;YAC/C,MAAM,GAAG,QAAQ,CAAC;YAClB,QAAQ,GAAG,cAAc,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;QACtF,CAAC;QACD,gBAAgB,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAC,CAAC,CAAC;IACrD,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CACd,KAAa,EACb,EAAC,iBAAiB,GAAG,WAAW,KAAkC,EAAE,EACtE,EAAE;QACA,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;YACzB,OAAO;QACX,CAAC;QACD,MAAM,EAAC,KAAK,EAAE,GAAG,EAAC,GAAG,aAAa,CAAC,OAAO,CAAC;QAC3C,IAAI,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;QAC/C,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC;QAC1D,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC3D,QAAQ,GAAG,cAAc,CACrB,QAAQ,EACR,GAAG,CAAC,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC,EACrC,GAAG,CAAC,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC,CACxC,CAAC;QACF,gBAAgB,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAC,CAAC,CAAC;IAC7C,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,CACZ,KAAa,EACb,EAAC,iBAAiB,GAAG,WAAW,KAAkC,EAAE,EACtE,EAAE;QACA,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;YACzB,OAAO;QACX,CAAC;QACD,MAAM,EAAC,KAAK,EAAE,GAAG,EAAC,GAAG,aAAa,CAAC,OAAO,CAAC;QAC3C,IAAI,MAAM,GAAG,GAAG,CAAC,GAAG,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;QAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC;QAC1D,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QAE7D,MAAM,GAAG,cAAc,CACnB,GAAG,CAAC,GAAG,CAAC,KAAK,EAAE,aAAa,CAAC,EAC7B,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,aAAa,CAAC,EAClC,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,aAAa,CAAC,CACrC,CAAC;QAEF,gBAAgB,CAAC,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAC,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CACjB,KAAa,EACb,EACI,iBAAiB,GAAG,WAAW,EAC/B,UAAU,GAAG,GAAG,MACmC,EAAE,EAC3D,EAAE;QACA,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;YACzB,OAAO;QACX,CAAC;QACD,MAAM,EAAC,KAAK,EAAE,GAAG,EAAC,GAAG,aAAa,CAAC,OAAO,CAAC;QAC3C,MAAM,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5B,IAAI,OAAO,GAAG,GAAG,GAAG,KAAK,CAAC;QAC1B,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC;QAC9C,OAAO,GAAG,IAAI,CAAC,GAAG,CACd,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC,EAC3D,WAAW,CACd,CAAC;QACF,IAAI,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,UAAU,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC;QAC5D,IAAI,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;QAClD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACnC,IAAI,QAAQ,CAAC,OAAO,EAAE,GAAG,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC;YAC1C,QAAQ,GAAG,QAAQ,CAAC;YACpB,MAAM,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACnF,CAAC;aAAM,IAAI,MAAM,CAAC,OAAO,EAAE,GAAG,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC;YAC/C,MAAM,GAAG,QAAQ,CAAC;YAClB,QAAQ,GAAG,cAAc,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;QACtF,CAAC;QAED,gBAAgB,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAC,CAAC,CAAC;IACrD,CAAC,CAAC;IAEF,OAAO;QACH,gBAAgB;QAChB,KAAK,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,YAAY;QACnC,QAAQ,EAAE,WAAW;QACrB,gBAAgB;QAChB,SAAS;QACT,aAAa;QACb,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,YAAY;QACnB,SAAS;QACT,OAAO;QACP,WAAW;QACX,QAAQ;QACR,KAAK;QACL,UAAU;KACb,CAAC;AACN,CAAC","sourcesContent":["import React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {useControlledState} from '@gravity-ui/uikit';\n\nimport type {RangeValue, ValueBase} from '../../types';\nimport {SECOND, YEAR} from '../../utils/constants';\nimport {constrainValue, createPlaceholderValue} from '../../utils/dates';\nimport {useDefaultTimeZone} from '../../utils/useDefaultTimeZone';\nimport {alignDateTime} from '../utils/date';\n\nfunction getViewportIntervalFromDates(\n start: DateTime,\n end: DateTime,\n numberOfIntervals = 4,\n placeInViewport = 0.5,\n) {\n const diff = end.diff(start);\n return {\n start: start.subtract(diff * (numberOfIntervals - 1) * placeInViewport),\n end: end.add(diff * (numberOfIntervals - 1) * (1 - placeInViewport)),\n };\n}\n\nexport interface RangeDateSelectionState {\n viewportInterval: RangeValue<DateTime>;\n value: RangeValue<DateTime>;\n setValue: (value: RangeValue<DateTime>) => void;\n timeZone: string;\n setDraggingValue: (value: RangeValue<DateTime> \| null) => void;\n canResize: boolean;\n startDragging: () => void;\n move: (delta: number, options?: {visualMinDuration?: number}) => void;\n scale: (scale: number, options?: {visualMinDuration?: number; fixedPoint?: number}) => void;\n moveStart: (delta: number, options?: {visualMinDuration?: number}) => void;\n moveEnd: (delta: number, options?: {visualMinDuration?: number}) => void;\n endDragging: () => void;\n align: number;\n isDragging: boolean;\n}\n\nexport interface RangeDateSelectionOptions extends ValueBase<RangeValue<DateTime>> {\n /** The minimum allowed date that a user may select. /\n minValue?: DateTime;\n /* The maximum allowed date that a user may select. /\n maxValue?: DateTime;\n /* Minimum duration of the selection in milliseconds. Defaults to 1 second. /\n minDuration?: number;\n /* Maximum duration of the selection in milliseconds. Defaults to 15 years. /\n maxDuration?: number;\n /* Alignment of the selection in milliseconds. Defaults to 1 second. /\n align?: number;\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 /\n Which timezone use to show values. Example: 'default', 'system', 'Europe/Amsterdam'.\n * @default The timezone of the `value` or `defaultValue` or `placeholderValue`, 'default' otherwise.\n /\n timeZone?: string;\n /\n The number of selection intervals that fit into the underlying ruler.\n \n @default 4\n /\n numberOfIntervals?: number;\n /\n Place of the selection on the underlying ruler.\n * Value must be between 0 and 1, where 0 is the start of the ruler and 1 is the end.\n \n @default 0.5 - center of the ruler\n /\n placeOnRuler?: number;\n}\n\nexport function useRangeDateSelectionState(\n props: RangeDateSelectionOptions,\n): RangeDateSelectionState {\n const inputTimeZone = useDefaultTimeZone(\n props.value?.start \|\| props.defaultValue?.start \|\| props.placeholderValue,\n );\n const timeZone = props.timeZone \|\| inputTimeZone;\n\n const placeholderValue = createPlaceholderValue({\n placeholderValue: props.placeholderValue,\n timeZone,\n });\n\n const [isDragging, setIsDragging] = React.useState(false);\n const [currentValue, setCurrentValue] = React.useState<RangeValue<DateTime> \| null>(null);\n\n const [value, setValue] = useControlledState(\n props.value,\n props.defaultValue ?? {\n start: placeholderValue.startOf('day').timeZone(inputTimeZone),\n end: placeholderValue.endOf('day').timeZone(inputTimeZone),\n },\n props.onUpdate,\n );\n\n const setInterval = (newValue: RangeValue<DateTime>) => {\n setCurrentValue(null);\n setValue({\n start: alignDateTime(newValue.start, props.align).timeZone(inputTimeZone),\n end: alignDateTime(newValue.end, props.align).timeZone(inputTimeZone),\n });\n };\n\n const displayValue = {\n start: value.start.timeZone(timeZone),\n end: value.end.timeZone(timeZone),\n };\n const interval = isDragging ? displayValue : currentValue ?? displayValue;\n\n const viewportInterval = getViewportIntervalFromDates(\n interval.start,\n interval.end,\n props.numberOfIntervals,\n props.placeOnRuler,\n );\n\n const minValue = props.minValue?.isAfter(viewportInterval.start)\n ? props.minValue\n : viewportInterval.start;\n const maxValue = props.maxValue?.isBefore(viewportInterval.end)\n ? props.maxValue\n : viewportInterval.end;\n\n const align = props.align ?? SECOND;\n const minDuration = Math.max(props.minDuration ?? SECOND, align);\n const maxDuration = Math.max(\n Math.min(props.maxDuration ?? 15 YEAR, maxValue.diff(minValue)),\n minDuration,\n );\n\n const canResize = minDuration < maxDuration;\n\n const draggingState = React.useRef<RangeValue<DateTime> \| null>(null);\n const setDraggingValue = (v: RangeValue<DateTime> \| null) => {\n draggingState.current = v;\n setCurrentValue(v);\n };\n const startDragging = () => {\n setIsDragging(true);\n setDraggingValue(displayValue);\n };\n\n const endDragging = () => {\n setIsDragging(false);\n if (draggingState.current) {\n setInterval(draggingState.current);\n }\n };\n\n const moveInterval = (delta: number) => {\n if (!draggingState.current) {\n return;\n }\n const {start, end} = draggingState.current;\n let newStart = start.add(delta, 'millisecond');\n let newEnd = end.add(delta, 'millisecond');\n const diff = newEnd.diff(newStart);\n if (newStart.valueOf() < minValue.valueOf()) {\n newStart = minValue;\n newEnd = constrainValue(newStart.add(diff, 'millisecond'), newStart, maxValue);\n } else if (newEnd.valueOf() > maxValue.valueOf()) {\n newEnd = maxValue;\n newStart = constrainValue(newEnd.subtract(diff, 'millisecond'), minValue, newEnd);\n }\n setDraggingValue({start: newStart, end: newEnd});\n };\n\n const moveStart = (\n delta: number,\n {visualMinDuration = minDuration}: {visualMinDuration?: number} = {},\n ) => {\n if (!draggingState.current) {\n return;\n }\n const {start, end} = draggingState.current;\n let newStart = start.add(delta, 'millisecond');\n const deltaMin = Math.max(visualMinDuration, minDuration);\n const deltaMax = Math.min(maxDuration, end.diff(minValue));\n newStart = constrainValue(\n newStart,\n end.subtract(deltaMax, 'millisecond'),\n end.subtract(deltaMin, 'millisecond'),\n );\n setDraggingValue({start: newStart, end});\n };\n\n const moveEnd = (\n delta: number,\n {visualMinDuration = minDuration}: {visualMinDuration?: number} = {},\n ) => {\n if (!draggingState.current) {\n return;\n }\n const {start, end} = draggingState.current;\n let newEnd = end.add(delta, 'millisecond');\n const deltaMin = Math.max(visualMinDuration, minDuration);\n const deltaMax = Math.min(maxDuration, maxValue.diff(start));\n\n newEnd = constrainValue(\n end.add(delta, 'millisecond'),\n start.add(deltaMin, 'millisecond'),\n start.add(deltaMax, 'millisecond'),\n );\n\n setDraggingValue({start, end: newEnd});\n };\n\n const zoomInterval = (\n scale: number,\n {\n visualMinDuration = minDuration,\n fixedPoint = 0.5,\n }: {visualMinDuration?: number; fixedPoint?: number} = {},\n ) => {\n if (!draggingState.current) {\n return;\n }\n const {start, end} = draggingState.current;\n const len = end.diff(start);\n let newDiff = len * scale;\n newDiff = align * Math.round(newDiff / align);\n newDiff = Math.min(\n Math.max(newDiff, Math.max(visualMinDuration, minDuration)),\n maxDuration,\n );\n let newStart = start.subtract(fixedPoint * (newDiff - len));\n let newEnd = newStart.add(newDiff, 'millisecond');\n const diff = newEnd.diff(newStart);\n if (newStart.valueOf() < minValue.valueOf()) {\n newStart = minValue;\n newEnd = constrainValue(newStart.add(diff, 'millisecond'), newStart, maxValue);\n } else if (newEnd.valueOf() > maxValue.valueOf()) {\n newEnd = maxValue;\n newStart = constrainValue(newEnd.subtract(diff, 'millisecond'), minValue, newEnd);\n }\n\n setDraggingValue({start: newStart, end: newEnd});\n };\n\n return {\n viewportInterval,\n value: currentValue ?? displayValue,\n setValue: setInterval,\n setDraggingValue,\n canResize,\n startDragging,\n move: moveInterval,\n scale: zoomInterval,\n moveStart,\n moveEnd,\n endDragging,\n timeZone,\n align,\n isDragging,\n };\n}\n"]}
1	+ {"version":3,"file":"useRangeDateSelectionState.js","sourceRoot":"../../../../../src","sources":["components/RangeDateSelection/hooks/useRangeDateSelectionState.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {useControlledState} from '@gravity-ui/uikit';\n\nimport type {RangeValue, ValueBase} from '../../types';\nimport {SECOND, YEAR} from '../../utils/constants';\nimport {constrainValue, createPlaceholderValue} from '../../utils/dates';\nimport {useDefaultTimeZone} from '../../utils/useDefaultTimeZone';\nimport {alignDateTime} from '../utils/date';\n\nfunction getViewportIntervalFromDates(\n start: DateTime,\n end: DateTime,\n numberOfIntervals = 4,\n placeInViewport = 0.5,\n) {\n const diff = end.diff(start);\n return {\n start: start.subtract(diff * (numberOfIntervals - 1) * placeInViewport),\n end: end.add(diff * (numberOfIntervals - 1) * (1 - placeInViewport)),\n };\n}\n\nexport interface RangeDateSelectionState {\n viewportInterval: RangeValue<DateTime>;\n value: RangeValue<DateTime>;\n setValue: (value: RangeValue<DateTime>) => void;\n timeZone: string;\n setDraggingValue: (value: RangeValue<DateTime> \| null) => void;\n canResize: boolean;\n startDragging: () => void;\n move: (delta: number, options?: {visualMinDuration?: number}) => void;\n scale: (scale: number, options?: {visualMinDuration?: number; fixedPoint?: number}) => void;\n moveStart: (delta: number, options?: {visualMinDuration?: number}) => void;\n moveEnd: (delta: number, options?: {visualMinDuration?: number}) => void;\n endDragging: () => void;\n align: number;\n isDragging: boolean;\n}\n\nexport interface RangeDateSelectionOptions extends ValueBase<RangeValue<DateTime>> {\n /** The minimum allowed date that a user may select. /\n minValue?: DateTime;\n /* The maximum allowed date that a user may select. /\n maxValue?: DateTime;\n /* Minimum duration of the selection in milliseconds. Defaults to 1 second. /\n minDuration?: number;\n /* Maximum duration of the selection in milliseconds. Defaults to 15 years. /\n maxDuration?: number;\n /* Alignment of the selection in milliseconds. Defaults to 1 second. /\n align?: number;\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 /\n Which timezone use to show values. Example: 'default', 'system', 'Europe/Amsterdam'.\n * @default The timezone of the `value` or `defaultValue` or `placeholderValue`, 'default' otherwise.\n /\n timeZone?: string;\n /\n The number of selection intervals that fit into the underlying ruler.\n * @default 4\n /\n numberOfIntervals?: number;\n /\n Place of the selection on the underlying ruler.\n * Value must be between 0 and 1, where 0 is the start of the ruler and 1 is the end.\n * @default 0.5 - center of the ruler\n /\n placeOnRuler?: number;\n}\n\nexport function useRangeDateSelectionState(\n props: RangeDateSelectionOptions,\n): RangeDateSelectionState {\n const inputTimeZone = useDefaultTimeZone(\n props.value?.start \|\| props.defaultValue?.start \|\| props.placeholderValue,\n );\n const timeZone = props.timeZone \|\| inputTimeZone;\n\n const placeholderValue = createPlaceholderValue({\n placeholderValue: props.placeholderValue,\n timeZone,\n });\n\n const [isDragging, setIsDragging] = React.useState(false);\n const [currentValue, setCurrentValue] = React.useState<RangeValue<DateTime> \| null>(null);\n\n const [value, setValue] = useControlledState(\n props.value,\n props.defaultValue ?? {\n start: placeholderValue.startOf('day').timeZone(inputTimeZone),\n end: placeholderValue.endOf('day').timeZone(inputTimeZone),\n },\n props.onUpdate,\n );\n\n const setInterval = (newValue: RangeValue<DateTime>) => {\n setCurrentValue(null);\n setValue({\n start: alignDateTime(newValue.start, props.align).timeZone(inputTimeZone),\n end: alignDateTime(newValue.end, props.align).timeZone(inputTimeZone),\n });\n };\n\n const displayValue = {\n start: value.start.timeZone(timeZone),\n end: value.end.timeZone(timeZone),\n };\n const interval = isDragging ? displayValue : (currentValue ?? displayValue);\n\n const viewportInterval = getViewportIntervalFromDates(\n interval.start,\n interval.end,\n props.numberOfIntervals,\n props.placeOnRuler,\n );\n\n const minValue = props.minValue?.isAfter(viewportInterval.start)\n ? props.minValue\n : viewportInterval.start;\n const maxValue = props.maxValue?.isBefore(viewportInterval.end)\n ? props.maxValue\n : viewportInterval.end;\n\n const align = props.align ?? SECOND;\n const minDuration = Math.max(props.minDuration ?? SECOND, align);\n const maxDuration = Math.max(\n Math.min(props.maxDuration ?? 15 YEAR, maxValue.diff(minValue)),\n minDuration,\n );\n\n const canResize = minDuration < maxDuration;\n\n const draggingState = React.useRef<RangeValue<DateTime> \| null>(null);\n const setDraggingValue = (v: RangeValue<DateTime> \| null) => {\n draggingState.current = v;\n setCurrentValue(v);\n };\n const startDragging = () => {\n setIsDragging(true);\n setDraggingValue(displayValue);\n };\n\n const endDragging = () => {\n setIsDragging(false);\n if (draggingState.current) {\n setInterval(draggingState.current);\n }\n };\n\n const moveInterval = (delta: number) => {\n if (!draggingState.current) {\n return;\n }\n const {start, end} = draggingState.current;\n let newStart = start.add(delta, 'millisecond');\n let newEnd = end.add(delta, 'millisecond');\n const diff = newEnd.diff(newStart);\n if (newStart.valueOf() < minValue.valueOf()) {\n newStart = minValue;\n newEnd = constrainValue(newStart.add(diff, 'millisecond'), newStart, maxValue);\n } else if (newEnd.valueOf() > maxValue.valueOf()) {\n newEnd = maxValue;\n newStart = constrainValue(newEnd.subtract(diff, 'millisecond'), minValue, newEnd);\n }\n setDraggingValue({start: newStart, end: newEnd});\n };\n\n const moveStart = (\n delta: number,\n {visualMinDuration = minDuration}: {visualMinDuration?: number} = {},\n ) => {\n if (!draggingState.current) {\n return;\n }\n const {start, end} = draggingState.current;\n let newStart = start.add(delta, 'millisecond');\n const deltaMin = Math.max(visualMinDuration, minDuration);\n const deltaMax = Math.min(maxDuration, end.diff(minValue));\n newStart = constrainValue(\n newStart,\n end.subtract(deltaMax, 'millisecond'),\n end.subtract(deltaMin, 'millisecond'),\n );\n setDraggingValue({start: newStart, end});\n };\n\n const moveEnd = (\n delta: number,\n {visualMinDuration = minDuration}: {visualMinDuration?: number} = {},\n ) => {\n if (!draggingState.current) {\n return;\n }\n const {start, end} = draggingState.current;\n let newEnd = end.add(delta, 'millisecond');\n const deltaMin = Math.max(visualMinDuration, minDuration);\n const deltaMax = Math.min(maxDuration, maxValue.diff(start));\n\n newEnd = constrainValue(\n end.add(delta, 'millisecond'),\n start.add(deltaMin, 'millisecond'),\n start.add(deltaMax, 'millisecond'),\n );\n\n setDraggingValue({start, end: newEnd});\n };\n\n const zoomInterval = (\n scale: number,\n {\n visualMinDuration = minDuration,\n fixedPoint = 0.5,\n }: {visualMinDuration?: number; fixedPoint?: number} = {},\n ) => {\n if (!draggingState.current) {\n return;\n }\n const {start, end} = draggingState.current;\n const len = end.diff(start);\n let newDiff = len * scale;\n newDiff = align * Math.round(newDiff / align);\n newDiff = Math.min(\n Math.max(newDiff, Math.max(visualMinDuration, minDuration)),\n maxDuration,\n );\n let newStart = start.subtract(fixedPoint * (newDiff - len));\n let newEnd = newStart.add(newDiff, 'millisecond');\n const diff = newEnd.diff(newStart);\n if (newStart.valueOf() < minValue.valueOf()) {\n newStart = minValue;\n newEnd = constrainValue(newStart.add(diff, 'millisecond'), newStart, maxValue);\n } else if (newEnd.valueOf() > maxValue.valueOf()) {\n newEnd = maxValue;\n newStart = constrainValue(newEnd.subtract(diff, 'millisecond'), minValue, newEnd);\n }\n\n setDraggingValue({start: newStart, end: newEnd});\n };\n\n return {\n viewportInterval,\n value: currentValue ?? displayValue,\n setValue: setInterval,\n setDraggingValue,\n canResize,\n startDragging,\n move: moveInterval,\n scale: zoomInterval,\n moveStart,\n moveEnd,\n endDragging,\n timeZone,\n align,\n isDragging,\n };\n}\n"]}

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

@@ -1,4 +1,12 @@
 export declare const i18n: ((key: "Range" | "Start of range" | "End of range" | "Increase range" | "Decrease range", params?: import("@gravity-ui/i18n").Params) => string) & {
+    Translation: import("react").ComponentType<{
+        children: (props: {
+            t: (key: "Range" | "Start of range" | "End of range" | "Increase range" | "Decrease range", params?: import("@gravity-ui/i18n").Params) => string;
+        }) => React.ReactNode;
+    }>;
+    useTranslation: () => {
+        t: (key: "Range" | "Start of range" | "End of range" | "Increase range" | "Decrease range", params?: import("@gravity-ui/i18n").Params) => string;
+    };
     keysetData: {
         "g-date-range-date-selection": Record<"Range" | "Start of range" | "End of range" | "Increase range" | "Decrease range", import("@gravity-ui/i18n").KeyData>;
     };

package/dist/esm/components/RelativeDateField/RelativeDateField.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/RelativeDateField/data:;charset=utf-8,@use%20'../variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drelative-date-field';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20position:%20relative;%0A%0A%20%20%20%20display:%20inline-block;%0A%0A%20%20%20%20&__field%20%7B%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__popup-content%20%7B%0A%20%20%20%20%20%20%20%20outline:%20none;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__time-field%20%7B%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20&-wrapper%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2010px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A"],"names":[],"mappings":"AAIA;EACI;EAEA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAEA;EACI","sourcesContent":["@use '../variables';\n\n$block: '.#{variables.$ns}relative-date-field';\n\n#{$block} {\n position: relative;\n\n display: inline-block;\n\n &__field {\n width: 100%;\n }\n\n &__popup-content {\n outline: none;\n }\n\n &__time-field {\n width: 100%;\n\n &-wrapper {\n padding: 10px;\n }\n }\n}\n"],"file":"RelativeDateField.css"}
1	+ {"version":3,"sources":["components/RelativeDateField/RelativeDateField.scss"],"names":[],"mappings":"AAIA;EACI;EAEA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAEA;EACI","sourcesContent":["@use '../variables';\n\n$block: '.#{variables.$ns}relative-date-field';\n\n#{$block} {\n position: relative;\n\n display: inline-block;\n\n &__field {\n width: 100%;\n }\n\n &__popup-content {\n outline: none;\n }\n\n &__time-field {\n width: 100%;\n\n &-wrapper {\n padding: 10px;\n }\n }\n}\n"],"file":"RelativeDateField.css"}

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

@@ -6,6 +6,7 @@ import { block } from "../../utils/cn.js";
 import { Calendar } from "../Calendar/index.js";
 import { DateField } from "../DateField/index.js";
 import { HiddenInput } from "../HiddenInput/HiddenInput.js";
+import { filterDOMProps } from "../utils/filterDOMProps.js";
 import { useRelativeDateFieldProps } from "./hooks/useRelativeDateFieldProps.js";
 import { useRelativeDateFieldState } from "./hooks/useRelativeDateFieldState.js";
 import "./RelativeDateField.css";
@@ -25,7 +26,9 @@ export function RelativeDateField(props) {
         },
         isDisabled: isMobile,
     });
-    return (_jsxs("div", Object.assign({ role: "group", className: b(null, props.className), style: props.style }, focusWithinProps, { children: [_jsx(TextInput, Object.assign({}, inputProps, { className: b('field'), ref: setAnchor, onBlur: props.onBlur, onKeyDown: (e) => {
+    const DOMProps = filterDOMProps(props);
+    delete DOMProps.id;
+    return (_jsxs("div", Object.assign({}, DOMProps, { role: "group", className: b(null, props.className), style: props.style }, focusWithinProps, { children: [_jsx(TextInput, Object.assign({}, inputProps, { className: b('field'), ref: setAnchor, onBlur: props.onBlur, onKeyDown: (e) => {
                     var _a;
                     (_a = inputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
                     if (!e.defaultPrevented &&

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RelativeDateField.js","sourceRoot":"../../../../src","sources":["components/RelativeDateField/RelativeDateField.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAE9E,OAAO,EAAC,KAAK,EAAC,0BAAuB;AACrC,OAAO,EAAC,QAAQ,EAAC,6BAAoB;AACrC,OAAO,EAAC,SAAS,EAAC,8BAAqB;AACvC,OAAO,EAAC,WAAW,EAAC,sCAAmC;~~AAavD~~,OAAO,EAAC,yBAAyB,EAAC,6CAA0C;AAC5E,OAAO,EAAC,yBAAyB,EAAC,6CAA0C;AAG5E,iCAAkC;AAElC,MAAM,CAAC,GAAG,KAAK,CAAC,qBAAqB,CAAC,CAAC;AAmBvC,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC3D,MAAM,KAAK,GAAG,yBAAyB,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,EAAC,UAAU,EAAE,aAAa,EAAE,cAAc,EAAC,GAAG,yBAAyB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAE5F,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAE7B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAErE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAE1C,MAAM,EAAC,gBAAgB,EAAC,GAAG,cAAc,CAAC;QACtC,mBAAmB,EAAE,CAAC,aAAa,EAAE,EAAE;YACnC,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;gBACzB,OAAO,CAAC,aAAa,CAAC,CAAC;YAC3B,CAAC;QACL,CAAC;QACD,UAAU,EAAE,QAAQ;KACvB,CAAC,CAAC;IAEH,OAAO,CACH,~~6BACI~~,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,EACnC,KAAK,EAAE,KAAK,CAAC,KAAK,IACd,gBAAgB,eAEpB,KAAC,SAAS,oBACF,UAAU,IACd,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;;oBACb,MAAA,UAAU,CAAC,SAAS,2DAAG,CAAC,CAAC,CAAC;oBAC1B,IACI,CAAC,CAAC,CAAC,gBAAgB;wBACnB,CAAC,CAAC,MAAM;wBACR,CAAC,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,CAAC,EAChD,CAAC;wBACC,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;wBACpB,OAAO,CAAC,IAAI,CAAC,CAAC;oBAClB,CAAC;gBACL,CAAC,EACD,YAAY,kCACL,UAAU,CAAC,YAAY,KAC1B,OAAO,EAAE,GAAG,EAAE;wBACV,OAAO,CAAC,IAAI,CAAC,CAAC;oBAClB,CAAC,OAEP,EACF,KAAC,WAAW,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;oBACf,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAC1B,CAAC,EACD,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,GAClB,EACD,CAAC,QAAQ,IAAI,CACV,KAAC,KAAK,IACF,aAAa,EAAE,MAAM,EACrB,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE;oBACnB,IAAI,CAAC,IAAI,EAAE,CAAC;wBACR,OAAO,CAAC,KAAK,CAAC,CAAC;oBACnB,CAAC;oBACD,aAAa,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC;gBAClC,CAAC,EACD,uBAAuB,EAAE,GAAG,EAAE;oBAC1B,UAAU,CAAC,GAAG,EAAE;wBACZ,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;oBAClC,CAAC,CAAC,CAAC;gBACP,CAAC,EACD,SAAS,EAAE,KAAK,CAAC,cAAc,EAC/B,MAAM,EAAE,KAAK,CAAC,WAAW,EACzB,SAAS,EAAE,KAAK,CAAC,cAAc,EAC/B,KAAK,EAAE,KAAK,CAAC,UAAU,YAEvB,eAAK,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,aAC9B,KAAC,QAAQ,oBAAK,aAAa,EAAI,EAC9B,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CACb,cAAK,SAAS,EAAE,CAAC,CAAC,oBAAoB,CAAC,YACnC,KAAC,SAAS,kBAAC,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,IAAM,cAAc,EAAI,GAC3D,CACT,CAAC,CAAC,CAAC,IAAI,IACN,GACF,CACX,KACC,CACT,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport {Popup, TextInput, useFocusWithin, useMobile} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {Calendar} from '../Calendar';\nimport {DateField} from '../DateField';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\nimport type {\n AccessibilityProps,\n DomProps,\n FocusableProps,\n InputDOMProps,\n KeyboardEvents,\n PopupStyleProps,\n StyleProps,\n TextInputExtendProps,\n TextInputProps,\n} from '../types';\n\nimport {useRelativeDateFieldProps} from './hooks/useRelativeDateFieldProps';\nimport {useRelativeDateFieldState} from './hooks/useRelativeDateFieldState';\nimport type {RelativeDateFieldOptions} from './hooks/useRelativeDateFieldState';\n\nimport './RelativeDateField.scss';\n\nconst b = block('relative-date-field');\n\nexport interface RelativeDateFieldProps\n extends RelativeDateFieldOptions,\n TextInputProps,\n TextInputExtendProps,\n DomProps,\n InputDOMProps,\n StyleProps,\n AccessibilityProps,\n FocusableProps,\n KeyboardEvents,\n PopupStyleProps {\n /*\n Show time field in popup\n * @default false\n */\n hasTime?: boolean;\n}\nexport function RelativeDateField(props: RelativeDateFieldProps) {\n const state = useRelativeDateFieldState(props);\n const {inputProps, calendarProps, timeInputProps} = useRelativeDateFieldProps(state, props);\n\n const isMobile = useMobile();\n\n const [anchor, setAnchor] = React.useState<HTMLElement \| null>(null);\n\n const [isOpen, setOpen] = React.useState(false);\n const dialogClosing = React.useRef(false);\n\n const {focusWithinProps} = useFocusWithin({\n onFocusWithinChange: (isFocusWithin) => {\n if (!dialogClosing.current) {\n setOpen(isFocusWithin);\n }\n },\n isDisabled: isMobile,\n });\n\n return (\n <div\n role=\"group\"\n className={b(null, props.className)}\n style={props.style}\n {...focusWithinProps}\n >\n <TextInput\n {...inputProps}\n className={b('field')}\n ref={setAnchor}\n onBlur={props.onBlur}\n onKeyDown={(e) => {\n inputProps.onKeyDown?.(e);\n if (\n !e.defaultPrevented &&\n e.altKey &&\n (e.key === 'ArrowDown' \|\| e.key === 'ArrowUp')\n ) {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n }\n }}\n controlProps={{\n ...inputProps.controlProps,\n onClick: () => {\n setOpen(true);\n },\n }}\n />\n <HiddenInput\n name={props.name}\n value={state.value}\n onReset={(value) => {\n state.setValue(value);\n }}\n disabled={state.disabled}\n form={props.form}\n />\n {!isMobile && (\n <Popup\n anchorElement={anchor}\n open={isOpen}\n onOpenChange={(open) => {\n if (!open) {\n setOpen(false);\n }\n dialogClosing.current = !open;\n }}\n onTransitionOutComplete={() => {\n setTimeout(() => {\n dialogClosing.current = false;\n });\n }}\n placement={props.popupPlacement}\n offset={props.popupOffset}\n className={props.popupClassName}\n style={props.popupStyle}\n >\n <div className={b('popup-content')}>\n <Calendar {...calendarProps} />\n {props.hasTime ? (\n <div className={b('time-field-wrapper')}>\n <DateField className={b('time-field')} {...timeInputProps} />\n </div>\n ) : null}\n </div>\n </Popup>\n )}\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"RelativeDateField.js","sourceRoot":"../../../../src","sources":["components/RelativeDateField/RelativeDateField.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport {Popup, TextInput, useFocusWithin, useMobile} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {Calendar} from '../Calendar';\nimport {DateField} from '../DateField';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\nimport type {\n AccessibilityProps,\n DomProps,\n FocusableProps,\n InputDOMProps,\n KeyboardEvents,\n PopupStyleProps,\n StyleProps,\n TextInputExtendProps,\n TextInputProps,\n} from '../types';\nimport {filterDOMProps} from '../utils/filterDOMProps';\n\nimport {useRelativeDateFieldProps} from './hooks/useRelativeDateFieldProps';\nimport {useRelativeDateFieldState} from './hooks/useRelativeDateFieldState';\nimport type {RelativeDateFieldOptions} from './hooks/useRelativeDateFieldState';\n\nimport './RelativeDateField.scss';\n\nconst b = block('relative-date-field');\n\nexport interface RelativeDateFieldProps\n extends RelativeDateFieldOptions,\n TextInputProps,\n TextInputExtendProps,\n DomProps,\n InputDOMProps,\n StyleProps,\n AccessibilityProps,\n FocusableProps,\n KeyboardEvents,\n PopupStyleProps {\n /*\n Show time field in popup\n * @default false\n */\n hasTime?: boolean;\n}\nexport function RelativeDateField(props: RelativeDateFieldProps) {\n const state = useRelativeDateFieldState(props);\n const {inputProps, calendarProps, timeInputProps} = useRelativeDateFieldProps(state, props);\n\n const isMobile = useMobile();\n\n const [anchor, setAnchor] = React.useState<HTMLElement \| null>(null);\n\n const [isOpen, setOpen] = React.useState(false);\n const dialogClosing = React.useRef(false);\n\n const {focusWithinProps} = useFocusWithin({\n onFocusWithinChange: (isFocusWithin) => {\n if (!dialogClosing.current) {\n setOpen(isFocusWithin);\n }\n },\n isDisabled: isMobile,\n });\n\n const DOMProps = filterDOMProps(props);\n delete DOMProps.id;\n\n return (\n <div\n {...DOMProps}\n role=\"group\"\n className={b(null, props.className)}\n style={props.style}\n {...focusWithinProps}\n >\n <TextInput\n {...inputProps}\n className={b('field')}\n ref={setAnchor}\n onBlur={props.onBlur}\n onKeyDown={(e) => {\n inputProps.onKeyDown?.(e);\n if (\n !e.defaultPrevented &&\n e.altKey &&\n (e.key === 'ArrowDown' \|\| e.key === 'ArrowUp')\n ) {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n }\n }}\n controlProps={{\n ...inputProps.controlProps,\n onClick: () => {\n setOpen(true);\n },\n }}\n />\n <HiddenInput\n name={props.name}\n value={state.value}\n onReset={(value) => {\n state.setValue(value);\n }}\n disabled={state.disabled}\n form={props.form}\n />\n {!isMobile && (\n <Popup\n anchorElement={anchor}\n open={isOpen}\n onOpenChange={(open) => {\n if (!open) {\n setOpen(false);\n }\n dialogClosing.current = !open;\n }}\n onTransitionOutComplete={() => {\n setTimeout(() => {\n dialogClosing.current = false;\n });\n }}\n placement={props.popupPlacement}\n offset={props.popupOffset}\n className={props.popupClassName}\n style={props.popupStyle}\n >\n <div className={b('popup-content')}>\n <Calendar {...calendarProps} />\n {props.hasTime ? (\n <div className={b('time-field-wrapper')}>\n <DateField className={b('time-field')} {...timeInputProps} />\n </div>\n ) : null}\n </div>\n </Popup>\n )}\n </div>\n );\n}\n"]}

package/dist/esm/components/RelativeDatePicker/RelativeDatePicker.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/RelativeDatePicker/data:;charset=utf-8,@use%20'../variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drelative-date-picker';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20position:%20relative;%0A%0A%20%20%20%20display:%20inline-flex;%0A%0A%20%20%20%20outline:%20none;%0A%0A%20%20%20%20&__input%20%7B%0A%20%20%20%20%20%20%20%20&_mobile%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20pointer-events:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__field%20%7B%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__popup-content%20%7B%0A%20%20%20%20%20%20%20%20outline:%20none;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__time-field%20%7B%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20&-wrapper%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding:%2010px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A"],"names":[],"mappings":"AAIA;EACI;EAEA;EAEA;;AAGI;EACI;;AAIR;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAEA;EACI","sourcesContent":["@use '../variables';\n\n$block: '.#{variables.$ns}relative-date-picker';\n\n#{$block} {\n position: relative;\n\n display: inline-flex;\n\n outline: none;\n\n &__input {\n &_mobile {\n pointer-events: none;\n }\n }\n\n &__field {\n width: 100%;\n }\n\n &__popup-content {\n outline: none;\n }\n\n &__time-field {\n width: 100%;\n\n &-wrapper {\n padding: 10px;\n }\n }\n}\n"],"file":"RelativeDatePicker.css"}
1	+ {"version":3,"sources":["components/RelativeDatePicker/RelativeDatePicker.scss"],"names":[],"mappings":"AAIA;EACI;EAEA;EAEA;;AAGI;EACI;;AAIR;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAEA;EACI","sourcesContent":["@use '../variables';\n\n$block: '.#{variables.$ns}relative-date-picker';\n\n#{$block} {\n position: relative;\n\n display: inline-flex;\n\n outline: none;\n\n &__input {\n &_mobile {\n pointer-events: none;\n }\n }\n\n &__field {\n width: 100%;\n }\n\n &__popup-content {\n outline: none;\n }\n\n &__time-field {\n width: 100%;\n\n &-wrapper {\n padding: 10px;\n }\n }\n}\n"],"file":"RelativeDatePicker.css"}