@gravity-ui/date-components 1.6.0 → 2.0.1

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

@@ -0,0 +1,8 @@
+{
+  "\"From\"": "«От»",
+  "\"From\" is required.": "«От» обязательно.",
+  "\"To\"": "«До»",
+  "\"To\" is required.": "«До» обязательно.",
+  "\"From\" can't be after \"To\".": "«От» не может быть позже чем «До».",
+  "to": "до"
+}

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

@@ -0,0 +1,4 @@
+export * from './RelativeRangeDatePicker';
+export { PickerDialog as RelativeRangeDatePickerDialog } from './components/PickerDialog/PickerDialog';
+export type { PickerDialogProps as RelativeRangeDatePickerDialogProps } from './components/PickerDialog/PickerDialog';
+export * from './hooks/useRelativeRangeDatePickerState';

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

@@ -0,0 +1,3 @@
+export * from './RelativeRangeDatePicker';
+export { PickerDialog as RelativeRangeDatePickerDialog } from './components/PickerDialog/PickerDialog';
+export * from './hooks/useRelativeRangeDatePickerState';

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

@@ -0,0 +1,15 @@
+import type { Value } from '../RelativeDatePicker';
+import type { RangeValue } from '../types';
+import type { Preset } from './components/Presets/defaultPresets';
+export declare function resolveTimeZone(timeZone: string): string;
+export declare function normalizeTimeZone(timeZone: string): string;
+export declare function getTimeZoneOffset(timeZone: string): string;
+interface GetDefaultTitleArgs {
+    value: RangeValue<Value | null> | null;
+    timeZone: string;
+    alwaysShowAsAbsolute?: boolean;
+    format?: string;
+    presets?: Preset[];
+}
+export declare function getDefaultTitle({ value, timeZone, alwaysShowAsAbsolute, format, presets, }: GetDefaultTitleArgs): string;
+export {};

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

@@ -0,0 +1,46 @@
+import { dateTime, dateTimeParse } from '@gravity-ui/date-utils';
+import { getPresetTitle } from './components/Presets/utils';
+export function resolveTimeZone(timeZone) {
+    if (timeZone === 'default' || timeZone === 'system') {
+        return dateTime({ timeZone }).timeZone();
+    }
+    return timeZone;
+}
+export function normalizeTimeZone(timeZone) {
+    const lowered = timeZone.toLowerCase();
+    if (lowered === 'default' || lowered === 'system') {
+        return lowered;
+    }
+    return resolveTimeZone(timeZone);
+}
+export function getTimeZoneOffset(timeZone) {
+    return `UTC ${dateTime({ timeZone }).format('Z')}`;
+}
+export function getDefaultTitle({ value, timeZone, alwaysShowAsAbsolute, format = 'L', presets, }) {
+    var _a, _b, _c, _d, _e, _f;
+    if (!value) {
+        return '';
+    }
+    const tz = timeZone === 'system' ? '' : ` (${getTimeZoneOffset(timeZone)})`;
+    let from = '';
+    if (value.start) {
+        from =
+            value.start.type === 'relative' && !alwaysShowAsAbsolute
+                ? value.start.value
+                : (_b = (_a = dateTimeParse(value.start.value, { timeZone })) === null || _a === void 0 ? void 0 : _a.format(format)) !== null && _b !== void 0 ? _b : '';
+    }
+    let to = '';
+    if (value.end) {
+        to =
+            value.end.type === 'relative' && !alwaysShowAsAbsolute
+                ? value.end.value
+                : (_d = (_c = dateTimeParse(value.end.value, { timeZone, roundUp: true })) === null || _c === void 0 ? void 0 : _c.format(format)) !== null && _d !== void 0 ? _d : '';
+    }
+    if (!alwaysShowAsAbsolute &&
+        ((_e = value.start) === null || _e === void 0 ? void 0 : _e.type) === 'relative' &&
+        ((_f = value.end) === null || _f === void 0 ? void 0 : _f.type) === 'relative') {
+        return `${getPresetTitle(value.start.value, value.end.value, presets)}${tz}`;
+    }
+    const delimiter = ' — ';
+    return `${from}${delimiter}${to}${tz}`;
+}

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

@@ -4,3 +4,6 @@ export * from './DateField';
 export * from './DatePicker';
 export * from './RelativeDateField';
 export * from './RelativeDatePicker';
+export * from './RangeDateField';
+export * from './RelativeRangeDatePicker';
+export type { RangeValue } from './types';

package/dist/esm/components/index.js

@@ -4,3 +4,5 @@ export * from './DateField';
 export * from './DatePicker';
 export * from './RelativeDateField';
 export * from './RelativeDatePicker';
+export * from './RangeDateField';
+export * from './RelativeRangeDatePicker';

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

@@ -1,6 +1,6 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { InputBase, Validation, ValueBase } from './inputs';
-export interface DateFieldBase<T = DateTime> extends ValueBase<T, T | null>, InputBase, Validation {
+export interface DateFieldBase<T = DateTime> extends ValueBase<T | null>, InputBase, Validation {
     /** The minimum allowed date that a user may select. */
     minValue?: DateTime;
     /** The maximum allowed date that a user may select. */
@@ -11,6 +11,9 @@ export interface DateFieldBase<T = DateTime> extends ValueBase<T, T | null>, Inp
     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;
-    /** */
+    /**
+     * Which timezone use to show values. Example: 'default', 'system', 'Europe/Amsterdam'.
+     * @default The timezone of the `value` or `defaultValue` or `placeholderValue`, 'default' otherwise.
+     */
     timeZone?: string;
 }

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

@@ -1,15 +1,15 @@
 /// <reference types="react" />
 export interface KeyboardEvents {
     /** Handler that is called when a key is pressed. */
-    onKeyDown?: (e: React.KeyboardEvent) => void;
+    onKeyDown?(e: React.KeyboardEvent): void;
     /** Handler that is called when a key is released. */
-    onKeyUp?: (e: React.KeyboardEvent) => void;
+    onKeyUp?(e: React.KeyboardEvent): void;
 }
 export interface FocusEvents<Target = Element> {
     /** Handler that is called when the element receives focus. */
-    onFocus?: (e: React.FocusEvent<Target>) => void;
+    onFocus?(e: React.FocusEvent<Target>): void;
     /** Handler that is called when the element loses focus. */
-    onBlur?: (e: React.FocusEvent<Target>) => void;
+    onBlur?(e: React.FocusEvent<Target>): void;
 }
 export interface FocusableProps<Target = Element> extends FocusEvents<Target> {
     /** Whether the element should receive focus on render. */

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { TextInputProps as TextInputBaseProps, TextInputPin, TextInputSize, TextInputView } from '@gravity-ui/uikit';
 export type ValidationState = 'invalid';
 export interface AccessibilityProps {
@@ -13,22 +12,24 @@ export interface AccessibilityProps {
 }
 export interface ValueBase<T, C = T> {
     /** The current value (controlled). */
-    value?: T | null;
+    value?: T;
     /** The default value (uncontrolled). */
     defaultValue?: T;
     /** Handler that is called when the value changes. */
     onUpdate?: (value: C) => void;
 }
-export interface Validation {
-    /** Whether the input should display its "invalid" visual styling */
-    validationState?: ValidationState;
-    /** An error message for the field */
-    errorMessage?: React.ReactNode;
+export interface Validation extends Pick<TextInputBaseProps, 'validationState' | 'errorMessage' | 'errorPlacement'> {
 }
 export interface DomProps {
     /** The element's unique identifier. */
     id?: string;
 }
+export interface InputDOMProps {
+    /**
+     * The name of the input element, used when submitting an HTML form.
+     */
+    name?: string;
+}
 export interface InputBase {
     /**
      * Whether the field is disabled.
@@ -65,11 +66,11 @@ export interface TextInputExtendProps {
     /**
      * User`s node rendered before label and input
      */
-    leftContent?: TextInputBaseProps['leftContent'];
+    startContent?: TextInputBaseProps['startContent'];
     /**
      * User`s node rendered after input and clear button
      */
-    rightContent?: TextInputBaseProps['rightContent'];
+    endContent?: TextInputBaseProps['endContent'];
 }
 export interface RangeValue<T> {
     /** The start value of the range. */

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

@@ -1,9 +1,8 @@
 import type { DateTime } from '@gravity-ui/date-utils';
-interface PlaceholderValueOptions {
+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 mergeDateTime(date: DateTime, time: DateTime): DateTime;
-export {};

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

@@ -0,0 +1,2 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+export declare function useDefaultTimeZone(date: DateTime | null | undefined): string;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export function useDefaultTimeZone(date) {
+    const defaultTimeZone = date ? date.timeZone() : 'default';
+    const [lastValue, setLastValue] = React.useState(defaultTimeZone);
+    if (date && defaultTimeZone !== lastValue) {
+        setLastValue(defaultTimeZone);
+    }
+    const timeZone = date ? defaultTimeZone : lastValue;
+    return timeZone;
+}

package/dist/esm/components/utils/validation/datePicker.d.ts

@@ -0,0 +1,6 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+export interface ValidationResult {
+    isInvalid: boolean;
+    errors: string[];
+}
+export declare function getValidationResult(value: DateTime | null | undefined, minValue: DateTime | undefined, maxValue: DateTime | undefined, isDateUnavailable: ((v: DateTime) => boolean) | undefined, timeZone: string, valueTitle?: string): ValidationResult;

package/dist/esm/components/utils/validation/datePicker.js

@@ -0,0 +1,26 @@
+import { i18n } from './i18n';
+export function getValidationResult(value, minValue, maxValue, isDateUnavailable, timeZone, valueTitle = 'Value') {
+    const rangeOverflow = value && maxValue && maxValue.isBefore(value);
+    const rangeUnderflow = value && minValue && value.isBefore(minValue);
+    const isUnavailable = (value && (isDateUnavailable === null || isDateUnavailable === void 0 ? void 0 : isDateUnavailable(value))) || false;
+    const isInvalid = rangeOverflow || rangeUnderflow || isUnavailable;
+    const errors = [];
+    if (isInvalid) {
+        if (rangeUnderflow) {
+            errors.push(i18n('Value must be {minValue} or later.', {
+                minValue: minValue.timeZone(timeZone).format(),
+                value: valueTitle,
+            }));
+        }
+        if (rangeOverflow) {
+            errors.push(i18n('Value must be {maxValue} or earlier.', {
+                maxValue: maxValue.timeZone(timeZone).format(),
+                value: valueTitle,
+            }));
+        }
+        if (isUnavailable) {
+            errors.push(i18n('Selected date unavailable.'));
+        }
+    }
+    return { isInvalid, errors };
+}

package/dist/esm/components/utils/validation/i18n/en.json

@@ -0,0 +1,6 @@
+{
+  "Value must be {minValue} or later.": "{{value}} must be {{minValue}} or later.",
+  "Value must be {maxValue} or earlier.": "{{value}} must be {{maxValue}} or earlier.",
+  "Selected date unavailable.": "Selected date unavailable.",
+  "Value is required.": "{{value}} is required."
+}

package/dist/esm/components/utils/validation/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const i18n: (key: "Selected date unavailable." | "Value must be {minValue} or later." | "Value must be {maxValue} or earlier." | "Value is required.", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/esm/components/utils/validation/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}validation`);

package/dist/esm/components/utils/validation/i18n/ru.json

@@ -0,0 +1,6 @@
+{
+  "Value must be {minValue} or later.": "{value} должно ровняться {minValue} или быть позже.",
+  "Value must be {maxValue} or earlier.": "{value} должно ровняться {maxValue} или быть раньше.",
+  "Selected date unavailable.": "Выбранная дата недоступна.",
+  "Value is required.": "{value} обязательно."
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/date-components",
-  "version": "1.6.0",
+  "version": "2.0.1",
   "description": "",
   "license": "MIT",
   "main": "dist/cjs/index.js",
@@ -30,7 +30,7 @@
   },
   "homepage": "https://github.com/gravity-ui/date-components#readme",
   "scripts": {
-    "prepare": "husky install",
+    "prepare": "husky",
     "lint": "run-p lint:*",
     "lint:js": "eslint --ext .js,.jsx,.ts,.tsx --report-unused-disable-directives .",
     "lint:styles": "stylelint --report-needless-disables 'src/**/*.scss'",
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
-    "@gravity-ui/date-utils": "^1.4.1",
+    "@gravity-ui/date-utils": "^2.0.1",
     "@gravity-ui/icons": "^2.2.0",
     "tslib": "2.6.2"
   },
@@ -60,24 +60,23 @@
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^5.0.0",
-    "@storybook/addon-a11y": "^7.6.7",
-    "@storybook/addon-essentials": "^7.6.7",
-    "@storybook/addon-viewport": "^7.6.7",
-    "@storybook/addons": "^7.6.7",
-    "@storybook/api": "^7.6.7",
-    "@storybook/blocks": "^7.6.7",
+    "@gravity-ui/uikit": "^6.1.1",
+    "@storybook/addon-a11y": "^7.6.15",
+    "@storybook/addon-essentials": "^7.6.15",
+    "@storybook/addon-viewport": "^7.6.15",
+    "@storybook/addons": "^7.6.15",
+    "@storybook/api": "^7.6.15",
+    "@storybook/blocks": "^7.6.15",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^7.6.7",
-    "@storybook/react-webpack5": "^7.6.7",
-    "@storybook/theming": "^7.6.7",
-    "@testing-library/jest-dom": "^6.1.6",
-    "@testing-library/react": "^14.1.2",
+    "@storybook/react": "^7.6.15",
+    "@storybook/react-webpack5": "^7.6.15",
+    "@storybook/theming": "^7.6.15",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.11",
-    "@types/react": "^18.2.46",
-    "@types/react-dom": "^18.2.18",
-    "cross-env": "^7.0.3",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
     "eslint": "^8.56.0",
     "eslint-plugin-testing-library": "^6.2.0",
     "gulp": "^4.0.2",
@@ -85,27 +84,28 @@
     "gulp-dart-sass": "^1.1.0",
     "gulp-replace": "^1.1.4",
     "gulp-typescript": "^5.0.1",
-    "husky": "^8.0.3",
+    "husky": "^9.0.11",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "jest-transform-css": "^6.0.1",
     "nano-staged": "^0.8.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "5.0.5",
-    "sass": "^1.69.7",
+    "sass": "^1.70.0",
     "sass-loader": "^13.3.3",
-    "storybook": "^7.6.7",
-    "style-loader": "^3.3.3",
-    "stylelint": "^15.10.2",
-    "ts-jest": "^29.1.1",
+    "storybook": "^7.6.15",
+    "style-loader": "^3.3.4",
+    "stylelint": "^15.11.0",
+    "stylelint-use-logical": "^2.1.0",
+    "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "@gravity-ui/uikit": "^5.0.0",
+    "@gravity-ui/uikit": "^6.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },

package/dist/cjs/components/CalendarBase/hooks/useRangeCalendarState.d.ts

@@ -1,7 +0,0 @@
-import type { DateTime } from '@gravity-ui/date-utils';
-import type { RangeValue, ValueBase } from '../../types';
-import type { CalendarStateOptionsBase, RangeCalendarState } from './types';
-export interface RangeCalendarStateOptions extends ValueBase<RangeValue<DateTime>>, CalendarStateOptionsBase {
-}
-export type { RangeCalendarState } from './types';
-export declare function useRangeCalendarState(props: RangeCalendarStateOptions): RangeCalendarState;

package/dist/cjs/components/hooks/useControlledState.d.ts

@@ -1 +0,0 @@
-export declare function useControlledState<T, C extends T = T>(value: T, defaultValue: T, onUpdate?: (value: C, ...args: any[]) => void): readonly [T, (newValue: C, ...args: any[]) => void];

package/dist/cjs/components/hooks/useControlledState.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useControlledState = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-function useControlledState(value, defaultValue, onUpdate) {
-    const [innerValue, setInnerValue] = react_1.default.useState(defaultValue);
-    const [wasControlled] = react_1.default.useState(value !== undefined);
-    const isControlled = value !== undefined;
-    if (wasControlled !== isControlled) {
-        console.warn(`WARN: A component changed from ${wasControlled ? 'controlled' : 'uncontrolled'} to ${isControlled ? 'controlled' : 'uncontrolled'}.`);
-    }
-    const currentValueRef = react_1.default.useRef(isControlled ? value : defaultValue);
-    react_1.default.useEffect(() => {
-        currentValueRef.current = value;
-    }, [value]);
-    const setState = react_1.default.useCallback((newValue, ...args) => {
-        if (!Object.is(currentValueRef.current, newValue)) {
-            onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(newValue, ...args);
-        }
-        if (!isControlled) {
-            currentValueRef.current = newValue;
-            setInnerValue(newValue);
-        }
-    }, [isControlled, onUpdate]);
-    return [isControlled ? value : innerValue, setState];
-}
-exports.useControlledState = useControlledState;

package/dist/esm/components/CalendarBase/hooks/useRangeCalendarState.d.ts

@@ -1,7 +0,0 @@
-import type { DateTime } from '@gravity-ui/date-utils';
-import type { RangeValue, ValueBase } from '../../types';
-import type { CalendarStateOptionsBase, RangeCalendarState } from './types';
-export interface RangeCalendarStateOptions extends ValueBase<RangeValue<DateTime>>, CalendarStateOptionsBase {
-}
-export type { RangeCalendarState } from './types';
-export declare function useRangeCalendarState(props: RangeCalendarStateOptions): RangeCalendarState;

package/dist/esm/components/hooks/useControlledState.d.ts

@@ -1 +0,0 @@
-export declare function useControlledState<T, C extends T = T>(value: T, defaultValue: T, onUpdate?: (value: C, ...args: any[]) => void): readonly [T, (newValue: C, ...args: any[]) => void];

package/dist/esm/components/hooks/useControlledState.js

@@ -1,23 +0,0 @@
-import React from 'react';
-export function useControlledState(value, defaultValue, onUpdate) {
-    const [innerValue, setInnerValue] = React.useState(defaultValue);
-    const [wasControlled] = React.useState(value !== undefined);
-    const isControlled = value !== undefined;
-    if (wasControlled !== isControlled) {
-        console.warn(`WARN: A component changed from ${wasControlled ? 'controlled' : 'uncontrolled'} to ${isControlled ? 'controlled' : 'uncontrolled'}.`);
-    }
-    const currentValueRef = React.useRef(isControlled ? value : defaultValue);
-    React.useEffect(() => {
-        currentValueRef.current = value;
-    }, [value]);
-    const setState = React.useCallback((newValue, ...args) => {
-        if (!Object.is(currentValueRef.current, newValue)) {
-            onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(newValue, ...args);
-        }
-        if (!isControlled) {
-            currentValueRef.current = newValue;
-            setInnerValue(newValue);
-        }
-    }, [isControlled, onUpdate]);
-    return [isControlled ? value : innerValue, setState];
-}