@gravity-ui/date-components 2.8.3 → 2.10.0

package/dist/esm/components/RelativeRangeDatePicker/components/Control/Control.css

@@ -0,0 +1,34 @@
+.g-date-relative-range-date-picker-control__input {
+  caret-color: transparent;
+}
+.g-date-relative-range-date-picker-control__input_mobile {
+  pointer-events: none;
+}
+.g-date-relative-range-date-picker-control__mobile-trigger {
+  --_--g-date-mobile-trigger-clear-width: 0px;
+  --_--g-date-mobile-trigger-errors-width: 0px;
+  --_--g-date-mobile-trigger-button-width: 24px;
+  position: absolute;
+  inset: 0;
+  inset-inline-end: calc(var(--g-spacing-2) + var(--_--g-date-mobile-trigger-button-width) + var(--_--g-date-mobile-trigger-clear-width) + var(--_--g-date-mobile-trigger-errors-width));
+  opacity: 0;
+}
+.g-date-relative-range-date-picker-control__mobile-trigger_size_s {
+  --_--g-date-mobile-trigger-button-width: 20px;
+}
+.g-date-relative-range-date-picker-control__mobile-trigger_size_l {
+  --_--g-date-mobile-trigger-button-width: 28px;
+}
+.g-date-relative-range-date-picker-control__mobile-trigger_size_xl {
+  --_--g-date-mobile-trigger-button-width: 36px;
+}
+.g-date-relative-range-date-picker-control__mobile-trigger_has-clear {
+  --_--g-date-mobile-trigger-clear-width: calc(
+      var(--_--g-date-mobile-trigger-button-width) + 2px
+  );
+}
+.g-date-relative-range-date-picker-control__mobile-trigger_has-errors {
+  --_--g-date-mobile-trigger-errors-width: calc(
+      var(--_--g-date-mobile-trigger-button-width) + 2px
+  );
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { RelativeRangeDatePickerState } from '../../hooks/useRelativeRangeDatePickerState';
+import type { RelativeRangeDatePickerProps } from '../../types';
+import './Control.css';
+export type ControlProps = {
+    props: RelativeRangeDatePickerProps;
+    state: RelativeRangeDatePickerState;
+    open: boolean;
+    isMobile?: boolean;
+    onClick: (e: React.MouseEvent<HTMLElement>) => void;
+    onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
+    onFocus: (e: React.FocusEvent<HTMLElement>) => void;
+    onClickCalendar: (e: React.MouseEvent<HTMLElement>) => void;
+    onUpdate: (value: string) => void;
+};
+export declare const Control: React.ForwardRefExoticComponent<ControlProps & React.RefAttributes<HTMLInputElement>>;

package/dist/esm/components/RelativeRangeDatePicker/components/Control/Control.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Calendar as CalendarIcon } from '@gravity-ui/icons';
+import { Button, Icon, TextInput } from '@gravity-ui/uikit';
+import { block } from '../../../../utils/cn';
+import { getButtonSizeForInput } from '../../../utils/getButtonSizeForInput';
+import { getDefaultTitle } from '../../utils';
+import { i18n } from './i18n';
+import './Control.css';
+const b = block('relative-range-date-picker-control');
+export const Control = React.forwardRef(({ props, state, open, isMobile, onClick, onKeyDown, onFocus, onClickCalendar, onUpdate }, ref) => {
+    var _a;
+    const { alwaysShowAsAbsolute, presetTabs, getRangeTitle } = props;
+    const format = props.format || 'L';
+    const text = React.useMemo(() => typeof getRangeTitle === 'function'
+        ? getRangeTitle(state.value, state.timeZone)
+        : getDefaultTitle({
+            value: state.value,
+            timeZone: state.timeZone,
+            alwaysShowAsAbsolute,
+            format,
+            presets: presetTabs === null || presetTabs === void 0 ? void 0 : presetTabs.flatMap(({ presets }) => presets),
+        }), [alwaysShowAsAbsolute, format, getRangeTitle, presetTabs, state.timeZone, state.value]);
+    const validationState = props.validationState || (state.isInvalid ? 'invalid' : undefined);
+    const errorMessage = (_a = props.errorMessage) !== null && _a !== void 0 ? _a : state.errors.join('\n');
+    const triggerProps = {
+        id: props.id,
+        role: 'combobox',
+        'aria-haspopup': 'dialog',
+        'aria-expanded': open,
+        'aria-label': props['aria-label'],
+        'aria-labelledby': props['aria-labelledby'],
+        'aria-describedby': props['aria-describedby'],
+        'aria-details': props['aria-details'],
+        disabled: props.disabled,
+        readOnly: props.readOnly,
+        onClick: onClickCalendar,
+        onKeyDown,
+    };
+    return props.renderControl ? (props.renderControl({
+        ref,
+        value: state.value,
+        title: text,
+        validationState,
+        errorMessage,
+        open,
+        triggerProps,
+    })) : (_jsxs(React.Fragment, { children: [_jsx(TextInput, { id: props.id, autoFocus: props.autoFocus, controlRef: ref, value: text, placeholder: props.placeholder, onUpdate: onUpdate, controlProps: Object.assign(Object.assign({ className: b('input', { mobile: isMobile }) }, triggerProps), { disabled: isMobile, onClick }), onKeyDown: onKeyDown, onFocus: onFocus, validationState: validationState, errorMessage: errorMessage, errorPlacement: props.errorPlacement, pin: props.pin, size: props.size, label: props.label, hasClear: props.hasClear, disabled: props.disabled, endContent: _jsx(Button, { view: "flat-secondary", size: getButtonSizeForInput(props.size), disabled: props.disabled, extraProps: {
+                        'aria-haspopup': 'dialog',
+                        'aria-expanded': open,
+                        'aria-label': i18n('Range date picker'),
+                    }, onClick: onClickCalendar, children: _jsx(Icon, { data: CalendarIcon }) }) }), isMobile ? (_jsx("button", { className: b('mobile-trigger', {
+                    'has-clear': Boolean(props.hasClear && state.value),
+                    'has-errors': state.isInvalid && props.errorPlacement === 'inside',
+                    size: props.size,
+                }), onClick: onClick })) : null] }));
+});
+Control.displayName = 'Control';

package/dist/esm/components/RelativeRangeDatePicker/components/Control/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "Range date picker": "Range date picker"
+}

package/dist/esm/components/RelativeRangeDatePicker/components/Control/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const i18n: (key: "Range date picker", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/esm/components/RelativeRangeDatePicker/components/Control/i18n/index.js

@@ -0,0 +1,5 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../../../utils/cn';
+import en from './en.json';
+import ru from './ru.json';
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}relative-range-date-picker-control`);

package/dist/esm/components/RelativeRangeDatePicker/components/Control/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "Range date picker": "Выбор диапазона дат"
+}

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

@@ -1,5 +1,5 @@
-import type { RelativeRangeDatePickerProps } from '../../RelativeRangeDatePicker';
 import type { RelativeRangeDatePickerState } from '../../hooks/useRelativeRangeDatePickerState';
+import type { RelativeRangeDatePickerProps } from '../../types';
 import './PickerDialog.css';
 export interface PickerDialogProps {
     className?: string;

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/useRelativeRangeDatePickerDialogState.d.ts

@@ -1,6 +1,6 @@
 import type { Value } from '../../../RelativeDatePicker';
-import type { RelativeRangeDatePickerProps } from '../../RelativeRangeDatePicker';
 import type { RelativeRangeDatePickerState } from '../../hooks/useRelativeRangeDatePickerState';
+import type { RelativeRangeDatePickerProps } from '../../types';
 export declare function useRelativeRangeDatePickerDialogState(state: RelativeRangeDatePickerState, props: RelativeRangeDatePickerProps): {
     start: Value | null;
     end: Value | null;

package/dist/esm/components/RelativeRangeDatePicker/components/Zones/Zones.js

@@ -40,14 +40,14 @@ const b = block('relative-range-date-picker-zones');
 export function Zones(props) {
     const timeZone = normalizeTimeZone(props.value);
     const size = props.isMobile ? 'xl' : props.size;
-    return (_jsx(Select, { value: [timeZone], options: zones, size: size, onUpdate: (v) => {
+    return (_jsx(Select, { disabled: props.disabled, value: [timeZone], options: zones, size: size, onUpdate: (v) => {
             const tz = v[0];
             if (tz) {
                 props.onUpdate(tz);
             }
         }, width: "max", renderControl: (controlProps) => {
             const value = timeZone === 'system' || timeZone === 'default' ? i18n(timeZone) : timeZone;
-            return (_jsxs(Button, { onClick: controlProps.onClick, ref: controlProps.ref, view: "flat-secondary", width: "max", pin: "clear-clear", size: size, extraProps: {
+            return (_jsxs(Button, { onClick: controlProps.onClick, ref: controlProps.ref, view: "flat-secondary", width: "max", pin: "clear-clear", size: size, disabled: props.disabled, extraProps: {
                     'aria-haspopup': 'listbox',
                     'aria-expanded': controlProps.open,
                     onKeyDown: controlProps.onKeyDown,

package/dist/esm/components/RelativeRangeDatePicker/i18n/en.json

@@ -4,6 +4,5 @@
   "\"To\"": "\"To\"",
   "\"To\" is required.": "\"To\" is required.",
   "\"From\" can't be after \"To\".": "\"From\" can't be after \"To\".",
-  "to": "to",
-  "Range date picker": "Range date picker"
+  "to": "to"
 }

package/dist/esm/components/RelativeRangeDatePicker/i18n/index.d.ts

@@ -1 +1 @@
-export declare const i18n: (key: "\"From\"" | "\"From\" is required." | "\"To\"" | "\"To\" is required." | "\"From\" can't be after \"To\"." | "to" | "Range date picker", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const i18n: (key: "\"From\"" | "\"From\" is required." | "\"To\"" | "\"To\" is required." | "\"From\" can't be after \"To\"." | "to", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/esm/components/RelativeRangeDatePicker/i18n/ru.json

@@ -4,6 +4,5 @@
   "\"To\"": "«До»",
   "\"To\" is required.": "«До» обязательно.",
   "\"From\" can't be after \"To\".": "«От» не может быть позже чем «До».",
-  "to": "до",
-  "Range date picker": "Выбор диапазона дат"
+  "to": "до"
 }

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

@@ -0,0 +1,42 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { Value } from '../RelativeDatePicker';
+import type { AccessibilityProps, DomProps, FocusableProps, InputBase, InputDOMProps, RangeValue, StyleProps, TextInputProps, Validation } from '../types';
+import type { Preset } from './components/Presets/defaultPresets';
+import type { PresetTab } from './components/Presets/utils';
+import type { RelativeRangeDatePickerStateOptions, RelativeRangeDatePickerValue } from './hooks/useRelativeRangeDatePickerState';
+export type RelativeRangeDatePickerTriggerProps = Pick<React.InputHTMLAttributes<HTMLElement>, 'id' | 'role' | 'aria-controls' | 'aria-haspopup' | 'aria-expanded' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details' | 'onClick' | 'onKeyDown' | 'disabled' | 'readOnly'>;
+export interface RelativeRangeDatePickerRenderControlProps {
+    ref: React.Ref<HTMLElement>;
+    value: RelativeRangeDatePickerValue | null;
+    title: string;
+    errorMessage?: React.ReactNode;
+    validationState?: 'invalid';
+    open: boolean;
+    triggerProps: RelativeRangeDatePickerTriggerProps;
+}
+export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerStateOptions, DomProps, AccessibilityProps, InputBase, InputDOMProps, TextInputProps, Validation, FocusableProps, StyleProps {
+    /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */
+    format?: string;
+    /** 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. */
+    placeholderValue?: DateTime;
+    /** Apply changes with button */
+    withApplyButton?: boolean;
+    /** Show time zone selector */
+    withZonesList?: boolean;
+    /** Show relative range presets */
+    withPresets?: boolean;
+    /** Custom preset tabs */
+    presetTabs?: PresetTab[];
+    /** Custom docs for presets, if empty array docs will be hidden */
+    docs?: Preset[];
+    /** Show selected relative values as absolute dates */
+    alwaysShowAsAbsolute?: boolean;
+    /** */
+    getRangeTitle?: (value: RangeValue<Value | null> | null, timeZone: string) => string;
+    /** Sets the CSS className for the popup element. */
+    popupClassName?: string;
+    /** Handler that is called when the popup's open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Used to render control. */
+    renderControl?: (props: RelativeRangeDatePickerRenderControlProps) => React.ReactElement;
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/utils/dates.d.ts

@@ -1,8 +1,11 @@
 import type { DateTime } from '@gravity-ui/date-utils';
+export declare function isWeekend(date: DateTime): boolean;
 export interface PlaceholderValueOptions {
     placeholderValue?: DateTime;
     timeZone?: string;
 }
 export declare function createPlaceholderValue({ placeholderValue, timeZone }: PlaceholderValueOptions): DateTime;
 export declare function isInvalid(value: DateTime | null | undefined, minValue: DateTime | undefined, maxValue: DateTime | undefined): boolean;
+export declare function constrainValue(value: DateTime, minValue: DateTime | undefined, maxValue: DateTime | undefined): DateTime;
 export declare function mergeDateTime(date: DateTime, time: DateTime): DateTime;
+export declare function formatDateTime(date: DateTime, format: string, timezone: string): string;

package/dist/esm/components/utils/dates.js

@@ -1,4 +1,7 @@
 import { dateTime } from '@gravity-ui/date-utils';
+export function isWeekend(date) {
+    return [0, 6].includes(date.day());
+}
 export function createPlaceholderValue({ placeholderValue, timeZone }) {
     return (placeholderValue !== null && placeholderValue !== void 0 ? placeholderValue : dateTime({ timeZone }).set('hour', 0).set('minute', 0).set('second', 0));
 }
@@ -14,9 +17,21 @@ export function isInvalid(value, minValue, maxValue) {
     }
     return false;
 }
+export function constrainValue(value, minValue, maxValue) {
+    if (minValue && value.isBefore(minValue)) {
+        return minValue;
+    }
+    if (maxValue && maxValue.isBefore(value)) {
+        return maxValue;
+    }
+    return value;
+}
 export function mergeDateTime(date, time) {
     return date
         .set('hours', time.hour())
         .set('minutes', time.minute())
         .set('seconds', time.second());
 }
+export function formatDateTime(date, format, timezone) {
+    return dateTime({ input: date, timeZone: timezone }).format(format);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/date-components",
-  "version": "2.8.3",
+  "version": "2.10.0",
   "description": "",
   "license": "MIT",
   "main": "dist/cjs/index.js",