@alfalab/core-components 44.7.0-beta.1 → 45.0.0

package/underlay/esm/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { BorderColorType, GapType, ShadowType } from "./index-72dda473";
+import { BorderColorType, GapType, ShadowType } from "./index-064acd29";
 type UnderlayPaddingSize = Exclude<GapType, '7xl' | '8xl'>;
 type UnderlayBorderRadius = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | '3xl';
 type BorderSizeType = 1 | 2 | 4;

package/underlay/esm/utils/getBorderCorners.js

@@ -1,4 +1,4 @@
-import { s as styles } from '../index.module-cd48ae89.js';
+import { s as styles } from '../index.module-497fe5cb.js';
 
 var getBorderCorners = function (borderRadius) {
     var _a;

package/underlay/esm/utils/getClasses.d.ts

@@ -1,4 +1,4 @@
-import { BorderColorType, ShadowType } from "../index-72dda473";
+import { BorderColorType, ShadowType } from "../index-064acd29";
 import { BorderSizeType } from "../types";
 declare const isBackgroundToken: (token: string | undefined) => boolean | "" | undefined;
 declare const getClasses: (backgroundColor: string | undefined, borderColor: BorderColorType | undefined, borderSize: BorderSizeType | undefined, shadow: ShadowType | undefined) => {

package/underlay/esm/utils/getClasses.js

@@ -1,5 +1,5 @@
 import { BACKGROUND } from '../constants.js';
-import { s as styles } from '../index.module-cd48ae89.js';
+import { s as styles } from '../index.module-497fe5cb.js';
 
 var isBackgroundToken = function (token) { return token && BACKGROUND.includes(token); };
 var getClasses = function (backgroundColor, borderColor, borderSize, shadow) {

package/underlay/index-064acd29.d.ts

@@ -0,0 +1,13 @@
+type BackgroundColorType = 'accent' | 'info' | 'attention-muted' | 'positive-muted' | 'negative-muted' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'specialbg-component' | 'specialbg-component-inverted' | 'specialbg-primary-grouped' | 'specialbg-secondary-grouped' | 'specialbg-tertiary-grouped' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
+type BorderColorType = 'accent' | 'key' | 'key-inverted' | 'link' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'underline' | 'underline-inverted' | 'graphic-attention' | 'graphic-link' | 'graphic-negative' | 'graphic-positive' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
+type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
+type ShadowType = 'shadow-xs' | 'shadow-s' | 'shadow-m' | 'shadow-l' | 'shadow-xl' | 'shadow-xs-hard' | 'shadow-s-hard' | 'shadow-m-hard' | 'shadow-l-hard' | 'shadow-xl-hard' | 'shadow-xs-up' | 'shadow-s-up' | 'shadow-m-up' | 'shadow-l-up' | 'shadow-xl-up' | 'shadow-xs-hard-up' | 'shadow-s-hard-up' | 'shadow-m-hard-up' | 'shadow-l-hard-up' | 'shadow-xl-hard-up';
+type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
+type PaddingType = number | string | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+type TypographyType = 'accent-caps' | 'accent-component-primary' | 'accent-component-secondary' | 'accent-primary-large' | 'accent-primary-medium' | 'accent-primary-small' | 'accent-secondary-large' | 'accent-secondary-medium' | 'accent-secondary-small' | 'action-caps' | 'action-component-primary' | 'action-component-secondary' | 'action-primary-large' | 'action-primary-medium' | 'action-primary-small' | 'action-secondary-large' | 'action-secondary-medium' | 'action-secondary-small' | 'headline-mobile-large' | 'headline-mobile-medium' | 'headline-mobile-small' | 'headline-mobile-xlarge' | 'headline-mobile-xsmall' | 'headline-system-mobile-large' | 'headline-system-mobile-medium' | 'headline-system-mobile-small' | 'headline-system-mobile-xlarge' | 'headline-system-mobile-xsmall' | 'headline-system-large' | 'headline-system-medium' | 'headline-system-small' | 'headline-system-xlarge' | 'headline-system-xsmall' | 'headline-large' | 'headline-medium' | 'headline-small' | 'headline-xlarge' | 'headline-xsmall' | 'key-large' | 'key-medium' | 'key-small' | 'key-xlarge' | 'key-xsmall' | 'paragraph-caps' | 'paragraph-component-primary' | 'paragraph-component-secondary' | 'paragraph-primary-large' | 'paragraph-primary-medium' | 'paragraph-primary-small' | 'paragraph-secondary-large' | 'paragraph-secondary-medium' | 'paragraph-secondary-small' | 'promo-mobile-large' | 'promo-mobile-medium' | 'promo-mobile-small' | 'promo-mobile-xlarge' | 'promo-mobile-xsmall' | 'promo-system-mobile-large' | 'promo-system-mobile-medium' | 'promo-system-mobile-small' | 'promo-system-mobile-xlarge' | 'promo-system-mobile-xsmall' | 'promo-system-large' | 'promo-system-medium' | 'promo-system-small' | 'promo-system-xlarge' | 'promo-system-xsmall' | 'promo-large' | 'promo-medium' | 'promo-small' | 'promo-xlarge' | 'promo-xsmall' | 'accent-component' | 'action-component' | 'paragraph-component';
+export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType, TypographyType };

package/underlay/index.css

@@ -1,5 +1,5 @@
 /* hash: 1t8jg */
-:root {
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-accent-primary: #ef3124;
     --color-light-bg-accent: #ef3124;

package/underlay/modern/Component.d.ts

@@ -14,9 +14,9 @@ declare const Underlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
     borderRadius?: import("./types").UnderlayBorderRadius | import("./types").CornersRadiusType | undefined;
     backgroundColor?: string | undefined;
     borderSize?: import("./types").BorderSizeType | undefined;
-    borderColor?: import("./index-72dda473").BorderColorType | undefined;
+    borderColor?: import("./index-064acd29").BorderColorType | undefined;
     overflow?: boolean | undefined;
-    shadow?: import("./index-72dda473").ShadowType | undefined;
+    shadow?: import("./index-064acd29").ShadowType | undefined;
     className?: string | undefined;
     dataTestId?: string | undefined;
     contentProps?: import("./types").ContentPropsType | undefined;

package/underlay/modern/Component.js

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { getBorderCorners } from './utils/getBorderCorners.js';
 import { isBackgroundToken, getClasses } from './utils/getClasses.js';
-import { s as styles } from './index.module-25e10496.js';
+import { s as styles } from './index.module-8c61d50e.js';
 import './constants.js';
 
 const Underlay = forwardRef(({ children, borderRadius, shadow, dimensions, borderSize, backgroundColor, borderColor, className, padding, dataTestId, overflow = true, contentProps, ...restProps }, ref) => {

package/underlay/modern/index-064acd29.d.ts

@@ -0,0 +1,13 @@
+type BackgroundColorType = 'accent' | 'info' | 'attention-muted' | 'positive-muted' | 'negative-muted' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'specialbg-component' | 'specialbg-component-inverted' | 'specialbg-primary-grouped' | 'specialbg-secondary-grouped' | 'specialbg-tertiary-grouped' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
+type BorderColorType = 'accent' | 'key' | 'key-inverted' | 'link' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'underline' | 'underline-inverted' | 'graphic-attention' | 'graphic-link' | 'graphic-negative' | 'graphic-positive' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
+type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
+type ShadowType = 'shadow-xs' | 'shadow-s' | 'shadow-m' | 'shadow-l' | 'shadow-xl' | 'shadow-xs-hard' | 'shadow-s-hard' | 'shadow-m-hard' | 'shadow-l-hard' | 'shadow-xl-hard' | 'shadow-xs-up' | 'shadow-s-up' | 'shadow-m-up' | 'shadow-l-up' | 'shadow-xl-up' | 'shadow-xs-hard-up' | 'shadow-s-hard-up' | 'shadow-m-hard-up' | 'shadow-l-hard-up' | 'shadow-xl-hard-up';
+type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
+type PaddingType = number | string | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+type TypographyType = 'accent-caps' | 'accent-component-primary' | 'accent-component-secondary' | 'accent-primary-large' | 'accent-primary-medium' | 'accent-primary-small' | 'accent-secondary-large' | 'accent-secondary-medium' | 'accent-secondary-small' | 'action-caps' | 'action-component-primary' | 'action-component-secondary' | 'action-primary-large' | 'action-primary-medium' | 'action-primary-small' | 'action-secondary-large' | 'action-secondary-medium' | 'action-secondary-small' | 'headline-mobile-large' | 'headline-mobile-medium' | 'headline-mobile-small' | 'headline-mobile-xlarge' | 'headline-mobile-xsmall' | 'headline-system-mobile-large' | 'headline-system-mobile-medium' | 'headline-system-mobile-small' | 'headline-system-mobile-xlarge' | 'headline-system-mobile-xsmall' | 'headline-system-large' | 'headline-system-medium' | 'headline-system-small' | 'headline-system-xlarge' | 'headline-system-xsmall' | 'headline-large' | 'headline-medium' | 'headline-small' | 'headline-xlarge' | 'headline-xsmall' | 'key-large' | 'key-medium' | 'key-small' | 'key-xlarge' | 'key-xsmall' | 'paragraph-caps' | 'paragraph-component-primary' | 'paragraph-component-secondary' | 'paragraph-primary-large' | 'paragraph-primary-medium' | 'paragraph-primary-small' | 'paragraph-secondary-large' | 'paragraph-secondary-medium' | 'paragraph-secondary-small' | 'promo-mobile-large' | 'promo-mobile-medium' | 'promo-mobile-small' | 'promo-mobile-xlarge' | 'promo-mobile-xsmall' | 'promo-system-mobile-large' | 'promo-system-mobile-medium' | 'promo-system-mobile-small' | 'promo-system-mobile-xlarge' | 'promo-system-mobile-xsmall' | 'promo-system-large' | 'promo-system-medium' | 'promo-system-small' | 'promo-system-xlarge' | 'promo-system-xsmall' | 'promo-large' | 'promo-medium' | 'promo-small' | 'promo-xlarge' | 'promo-xsmall' | 'accent-component' | 'action-component' | 'paragraph-component';
+export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType, TypographyType };

package/underlay/modern/index.css

@@ -1,5 +1,5 @@
 /* hash: 1t8jg */
-:root {
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-accent-primary: #ef3124;
     --color-light-bg-accent: #ef3124;

package/underlay/modern/index.js

@@ -2,6 +2,6 @@ export { Underlay } from './Component.js';
 import 'react';
 import 'classnames';
 import './utils/getBorderCorners.js';
-import './index.module-25e10496.js';
+import './index.module-8c61d50e.js';
 import './utils/getClasses.js';
 import './constants.js';

package/underlay/modern/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { BorderColorType, GapType, ShadowType } from "./index-72dda473";
+import { BorderColorType, GapType, ShadowType } from "./index-064acd29";
 type UnderlayPaddingSize = Exclude<GapType, '7xl' | '8xl'>;
 type UnderlayBorderRadius = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | '3xl';
 type BorderSizeType = 1 | 2 | 4;

package/underlay/modern/utils/getBorderCorners.js

@@ -1,4 +1,4 @@
-import { s as styles } from '../index.module-25e10496.js';
+import { s as styles } from '../index.module-8c61d50e.js';
 
 const getBorderCorners = (borderRadius) => {
     const bordersSize = typeof borderRadius === 'string'

package/underlay/modern/utils/getClasses.d.ts

@@ -1,4 +1,4 @@
-import { BorderColorType, ShadowType } from "../index-72dda473";
+import { BorderColorType, ShadowType } from "../index-064acd29";
 import { BorderSizeType } from "../types";
 declare const isBackgroundToken: (token: string | undefined) => boolean | "" | undefined;
 declare const getClasses: (backgroundColor: string | undefined, borderColor: BorderColorType | undefined, borderSize: BorderSizeType | undefined, shadow: ShadowType | undefined) => {

package/underlay/modern/utils/getClasses.js

@@ -1,5 +1,5 @@
 import { BACKGROUND } from '../constants.js';
-import { s as styles } from '../index.module-25e10496.js';
+import { s as styles } from '../index.module-8c61d50e.js';
 
 const isBackgroundToken = (token) => token && BACKGROUND.includes(token);
 const getClasses = (backgroundColor, borderColor, borderSize, shadow) => ({

package/underlay/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { BorderColorType, GapType, ShadowType } from "./index-72dda473";
+import { BorderColorType, GapType, ShadowType } from "./index-064acd29";
 type UnderlayPaddingSize = Exclude<GapType, '7xl' | '8xl'>;
 type UnderlayBorderRadius = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | '3xl';
 type BorderSizeType = 1 | 2 | 4;

package/underlay/utils/getBorderCorners.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index_module = require('../index.module-6a9b8036.js');
+var index_module = require('../index.module-4f228ce1.js');
 
 var getBorderCorners = function (borderRadius) {
     var _a;

package/underlay/utils/getClasses.d.ts

@@ -1,4 +1,4 @@
-import { BorderColorType, ShadowType } from "../index-72dda473";
+import { BorderColorType, ShadowType } from "../index-064acd29";
 import { BorderSizeType } from "../types";
 declare const isBackgroundToken: (token: string | undefined) => boolean | "" | undefined;
 declare const getClasses: (backgroundColor: string | undefined, borderColor: BorderColorType | undefined, borderSize: BorderSizeType | undefined, shadow: ShadowType | undefined) => {

package/underlay/utils/getClasses.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var constants = require('../constants.js');
-var index_module = require('../index.module-6a9b8036.js');
+var index_module = require('../index.module-4f228ce1.js');
 
 var isBackgroundToken = function (token) { return token && constants.BACKGROUND.includes(token); };
 var getClasses = function (backgroundColor, borderColor, borderSize, shadow) {

package/universal-date-input/Component-61e2321e.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { CommonButtonProps, PrivateButtonProps } from "./typings-61e2321e";
+type SpinnerProps = {
+    /**
+     * Управление видимостью компонента
+     */
+    visible?: boolean;
+    /**
+     * Размер компонента
+     * @description xs, s, m deprecated, используйте вместо них 16, 24, 48 соответственно
+     */
+    size?: "xs" | "s" | "m" | 16 | 24 | 48;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор компонента в DOM
+     */
+    id?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Палитра, в контексте которой используется спиннер
+     */
+    colors?: "default" | "inverted";
+};
+declare const SIZE_TO_CLASSNAME_MAP: {
+    xs: string;
+    s: string;
+    m: string;
+    16: string;
+    24: string;
+    48: string;
+};
+declare const Spinner: FC<SpinnerProps>;
+/**
+ * Минимальное время отображения лоадера - 500мс,
+ * чтобы при быстрых ответах от сервера кнопка не «моргала».
+ */
+declare const LOADER_MIN_DISPLAY_INTERVAL = 500;
+declare const BaseButton: React.ForwardRefExoticComponent<(CommonButtonProps & PrivateButtonProps) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { SpinnerProps, SIZE_TO_CLASSNAME_MAP, Spinner, LOADER_MIN_DISPLAY_INTERVAL, BaseButton };

package/universal-date-input/Component.responsive-71043c62.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-import { ButtonProps } from "./typings-c241b310";
+import { ButtonProps } from "./typings-61e2321e";
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export { Button };

package/universal-date-input/components/base-universal-date-input/Component.js

@@ -12,7 +12,7 @@ var mask_index = require('../../mask/index.js');
 var components_dateInput_Component = require('../date-input/Component.js');
 var components_dateRangeInput_Component = require('../date-range-input/Component.js');
 var components_timeInput_Component = require('../time-input/Component.js');
-var index_module = require('../../index.module-2cc54af5.js');
+var index_module = require('../../index.module-c0805834.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/universal-date-input/components/date-input/Component.js

@@ -4,32 +4,37 @@ var tslib = require('tslib');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
+var isValid = require('date-fns/isValid');
 var coreComponentsInput = require('../../../input');
 var coreComponentsPopover = require('../../../popover');
 var coreComponentsShared = require('../../../shared');
 var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
 var consts = require('../../consts.js');
 var utils_index = require('../../utils/index.js');
-var index_module = require('../../index.module-2cc54af5.js');
+var index_module = require('../../index.module-c0805834.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var isValid__default = /*#__PURE__*/_interopDefaultCompat(isValid);
 
+function getDefaultValue(defaultValue, withTime) {
+    if (defaultValue && isValid__default.default(new Date(defaultValue))) {
+        return utils_index.formatDate(defaultValue, withTime ? consts.DATE_TIME_FORMAT : consts.DATE_FORMAT);
+    }
+    return '';
+}
 var DateInput = React.forwardRef(function (_a, ref) {
     var _b;
-    var _c;
-    var autoCorrection = _a.autoCorrection, open = _a.open, valueProp = _a.value, _d = _a.inputWrapperRef, inputWrapperRefProp = _d === void 0 ? null : _d, defaultValue = _a.defaultValue, _e = _a.minDate, minDate = _e === void 0 ? consts.DEFAULT_MIN_DATE : _e, _f = _a.maxDate, maxDate = _f === void 0 ? consts.DEFAULT_MAX_DATE : _f, picker = _a.picker, rightAddons = _a.rightAddons, Calendar = _a.Calendar, _g = _a.calendarProps, calendarProps = _g === void 0 ? {} : _g, platform = _a.platform, calendarRef = _a.calendarRef, onComplete = _a.onComplete, onChange = _a.onChange, onBlur = _a.onBlur, onCalendarClose = _a.onCalendarClose, onPickerClick = _a.onPickerClick, error = _a.error, popoverProps = _a.popoverProps, dataTestId = _a.dataTestId, wrapperClassName = _a.wrapperClassName, wrapperHandlers = _a.wrapperHandlers, block = _a.block, withTime = _a.withTime, breakpoint = _a.breakpoint, restProps = tslib.__rest(_a, ["autoCorrection", "open", "value", "inputWrapperRef", "defaultValue", "minDate", "maxDate", "picker", "rightAddons", "Calendar", "calendarProps", "platform", "calendarRef", "onComplete", "onChange", "onBlur", "onCalendarClose", "onPickerClick", "error", "popoverProps", "dataTestId", "wrapperClassName", "wrapperHandlers", "block", "withTime", "breakpoint"]);
-    var _h = React.useState(defaultValue), value = _h[0], setValue = _h[1];
+    var autoCorrection = _a.autoCorrection, open = _a.open, valueProp = _a.value, _c = _a.inputWrapperRef, inputWrapperRefProp = _c === void 0 ? null : _c, defaultValue = _a.defaultValue, _d = _a.minDate, minDate = _d === void 0 ? consts.DEFAULT_MIN_DATE : _d, _e = _a.maxDate, maxDate = _e === void 0 ? consts.DEFAULT_MAX_DATE : _e, picker = _a.picker, rightAddons = _a.rightAddons, Calendar = _a.Calendar, _f = _a.calendarProps, calendarProps = _f === void 0 ? {} : _f, platform = _a.platform, calendarRef = _a.calendarRef, onInputChange = _a.onInputChange, onChange = _a.onChange, onBlur = _a.onBlur, onCalendarClose = _a.onCalendarClose, onPickerClick = _a.onPickerClick, error = _a.error, popoverProps = _a.popoverProps, dataTestId = _a.dataTestId, wrapperClassName = _a.wrapperClassName, wrapperHandlers = _a.wrapperHandlers, block = _a.block, withTime = _a.withTime, breakpoint = _a.breakpoint, clear = _a.clear, onClear = _a.onClear, restProps = tslib.__rest(_a, ["autoCorrection", "open", "value", "inputWrapperRef", "defaultValue", "minDate", "maxDate", "picker", "rightAddons", "Calendar", "calendarProps", "platform", "calendarRef", "onInputChange", "onChange", "onBlur", "onCalendarClose", "onPickerClick", "error", "popoverProps", "dataTestId", "wrapperClassName", "wrapperHandlers", "block", "withTime", "breakpoint", "clear", "onClear"]);
+    var _g = React.useState(function () { return getDefaultValue(defaultValue, withTime); }), inputValue = _g[0], setInputValue = _g[1];
     var lastValidDate = React.useRef('');
     var inputRef = React.useRef(null);
     var inputWrapperRef = React.useRef(null);
-    var uncontrolled = valueProp === undefined;
     var offDays = calendarProps.offDays;
-    var inputValue = (_c = valueProp !== null && valueProp !== void 0 ? valueProp : value) !== null && _c !== void 0 ? _c : '';
-    var _j = inputValue.split(consts.DATE_TIME_SEPARATOR), inputDate = _j[0], inputTime = _j[1];
+    var _h = inputValue.split(consts.DATE_TIME_SEPARATOR), inputDate = _h[0], inputTime = _h[1];
     var isValidValue = utils_index.isValidDate({ value: inputDate, minDate: minDate, maxDate: maxDate, offDays: offDays });
     React.useEffect(function () {
         if (autoCorrection) {
@@ -41,6 +46,13 @@ var DateInput = React.forwardRef(function (_a, ref) {
             }
         }
     }, [autoCorrection, minDate, withTime, isValidValue, inputValue]);
+    React.useEffect(function () {
+        if (valueProp !== undefined) {
+            setInputValue(valueProp && isValid__default.default(valueProp)
+                ? utils_index.formatDate(valueProp, withTime ? consts.DATE_TIME_FORMAT : consts.DATE_FORMAT)
+                : '');
+        }
+    }, [valueProp, withTime]);
     var getInnerError = function () {
         if (autoCorrection) {
             var isComplete = utils_index.isCompleteDate(inputDate) && utils_index.isCompleteTime(inputTime, withTime);
@@ -48,24 +60,24 @@ var DateInput = React.forwardRef(function (_a, ref) {
         }
         return false;
     };
-    var callOnComplete = function (val) {
-        onComplete === null || onComplete === void 0 ? void 0 : onComplete(val, utils_index.parseDateString(val, withTime ? consts.DATE_TIME_FORMAT : consts.DATE_FORMAT));
+    var callOnChange = function (val) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(val ? utils_index.parseDateString(val, withTime ? consts.DATE_TIME_FORMAT : consts.DATE_FORMAT) : null, val);
         lastValidDate.current = val;
     };
-    var changeValue = function (val, event) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(event, { value: val });
+    var changeInputValue = function (val, event) {
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, { value: val });
         var _a = val.split(consts.DATE_TIME_SEPARATOR), date = _a[0], _b = _a[1], time = _b === void 0 ? '' : _b;
-        if (uncontrolled)
-            setValue(val);
-        if (utils_index.isCompleteDate(date) && utils_index.isCompleteTime(time, withTime))
-            callOnComplete(val);
+        setInputValue(val);
+        if (val === '' || (utils_index.isCompleteDate(date) && utils_index.isCompleteTime(time, withTime))) {
+            callOnChange(val);
+        }
     };
-    var handleChange = function (event) {
-        changeValue(event.target.value, event);
+    var handleInputChange = function (event) {
+        changeInputValue(event.target.value, event);
     };
     var handleCalendarChange = function (date) {
         if (date) {
-            changeValue(utils_index.formatDate(date, withTime ? consts.DATE_TIME_FORMAT : consts.DATE_FORMAT), null);
+            changeInputValue(utils_index.formatDate(date, withTime ? consts.DATE_TIME_FORMAT : consts.DATE_FORMAT), null);
             requestAnimationFrame(function () {
                 var _a;
                 var dateLen = consts.DATE_FORMAT.length;
@@ -82,13 +94,17 @@ var DateInput = React.forwardRef(function (_a, ref) {
             var dateFilled = utils_index.isCompleteDate(inputDate);
             if (dateFilled && !utils_index.isCompleteTime(inputTime, withTime)) {
                 var _a = lastValidDate.current.split(consts.DATE_TIME_SEPARATOR), prevTime = _a[1];
-                changeValue("".concat(inputDate).concat(consts.DATE_TIME_SEPARATOR).concat(prevTime), null);
+                changeInputValue("".concat(inputDate).concat(consts.DATE_TIME_SEPARATOR).concat(prevTime), null);
             }
             if (inputValue && !dateFilled) {
-                changeValue(lastValidDate.current, null);
+                changeInputValue(lastValidDate.current, null);
             }
         }
     };
+    var handleClear = function (event) {
+        changeInputValue('', null);
+        onClear === null || onClear === void 0 ? void 0 : onClear(event);
+    };
     var renderCalendar = function () {
         if (picker && Calendar) {
             return (
@@ -101,7 +117,7 @@ var DateInput = React.forwardRef(function (_a, ref) {
     return (React__default.default.createElement("div", tslib.__assign({}, wrapperHandlers, { className: cn__default.default(index_module.styles.wrapper, wrapperClassName, (_b = {},
             _b[index_module.styles.block] = block,
             _b)), tabIndex: -1, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'wrapper') }),
-        React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { breakpoint: breakpoint, dataTestId: dataTestId, wrapperRef: mergeRefs__default.default([inputWrapperRef, inputWrapperRefProp]), ref: mergeRefs__default.default([ref, inputRef]), value: inputValue, inputMode: 'decimal', onInput: handleChange, onBlur: handleBlur, error: error || getInnerError(), block: true, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { clear: clear && utils_index.isCompleteDate(inputDate) && utils_index.isCompleteTime(inputTime, withTime), onClear: valueProp === undefined ? handleClear : onClear, breakpoint: breakpoint, dataTestId: dataTestId, wrapperRef: mergeRefs__default.default([inputWrapperRef, inputWrapperRefProp]), ref: mergeRefs__default.default([ref, inputRef]), value: inputValue, inputMode: 'decimal', onInput: handleInputChange, onBlur: handleBlur, error: error || getInnerError(), block: true, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
                 rightAddons,
                 picker && (React__default.default.createElement(CalendarMIcon.CalendarMIcon, { onClick: onPickerClick, className: index_module.styles.calendarIcon, onMouseDown: utils_index.preventDefault }))) })),
         platform === 'desktop' ? (React__default.default.createElement(coreComponentsPopover.Popover, tslib.__assign({ offset: [0, 4], position: 'bottom-start', dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'popover') }, popoverProps, { open: open, anchorElement: inputWrapperRef.current, popperClassName: cn__default.default(index_module.styles.calendarContainer, popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.popperClassName), withTransition: false }), renderCalendar())) : (renderCalendar())));

package/universal-date-input/components/date-range-input/Component.js

@@ -4,6 +4,8 @@ var tslib = require('tslib');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
+var isAfter = require('date-fns/isAfter');
+var isValid = require('date-fns/isValid');
 var startOfMonth = require('date-fns/startOfMonth');
 var coreComponentsInput = require('../../../input');
 var coreComponentsPopover = require('../../../popover');
@@ -11,29 +13,36 @@ var coreComponentsShared = require('../../../shared');
 var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
 var consts = require('../../consts.js');
 var utils_index = require('../../utils/index.js');
-var index_module = require('../../index.module-2cc54af5.js');
+var index_module = require('../../index.module-c0805834.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var isAfter__default = /*#__PURE__*/_interopDefaultCompat(isAfter);
+var isValid__default = /*#__PURE__*/_interopDefaultCompat(isValid);
 var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
 
+function getDefaultValue(defaultValue) {
+    if (defaultValue && isValid__default.default(defaultValue.dateFrom) && isValid__default.default(defaultValue.dateTo)) {
+        return utils_index.formatDateRange(defaultValue);
+    }
+    return '';
+}
 var DateRangeInput = React.forwardRef(function (_a, ref) {
     var _b;
-    var _c;
-    var autoCorrection = _a.autoCorrection, breakpoint = _a.breakpoint, wrapperClassName = _a.wrapperClassName, open = _a.open, onCalendarClose = _a.onCalendarClose, valueProp = _a.value, defaultValue = _a.defaultValue, _d = _a.inputWrapperRef, inputWrapperRefProp = _d === void 0 ? null : _d, onComplete = _a.onComplete, onChange = _a.onChange, onBlur = _a.onBlur, Calendar = _a.Calendar, wrapperHandlers = _a.wrapperHandlers, calendarRef = _a.calendarRef, _e = _a.calendarProps, calendarProps = _e === void 0 ? {} : _e, _f = _a.minDate, minDate = _f === void 0 ? consts.DEFAULT_MAX_DATE : _f, _g = _a.maxDate, maxDate = _g === void 0 ? consts.DEFAULT_MIN_DATE : _g, block = _a.block, dataTestId = _a.dataTestId, error = _a.error, popoverProps = _a.popoverProps, rightAddons = _a.rightAddons, picker = _a.picker, platform = _a.platform, onPickerClick = _a.onPickerClick, _h = _a.rangeBehavior, rangeBehavior = _h === void 0 ? 'clarification' : _h, restProps = tslib.__rest(_a, ["autoCorrection", "breakpoint", "wrapperClassName", "open", "onCalendarClose", "value", "defaultValue", "inputWrapperRef", "onComplete", "onChange", "onBlur", "Calendar", "wrapperHandlers", "calendarRef", "calendarProps", "minDate", "maxDate", "block", "dataTestId", "error", "popoverProps", "rightAddons", "picker", "platform", "onPickerClick", "rangeBehavior"]);
-    var _j = React.useState(defaultValue), value = _j[0], setValue = _j[1];
-    var _k = React.useState(calendarProps.defaultMonth), calendarMonth = _k[0], setCalendarMonth = _k[1];
+    var autoCorrection = _a.autoCorrection, breakpoint = _a.breakpoint, wrapperClassName = _a.wrapperClassName, open = _a.open, onCalendarClose = _a.onCalendarClose, valueProp = _a.value, defaultValue = _a.defaultValue, _c = _a.inputWrapperRef, inputWrapperRefProp = _c === void 0 ? null : _c, onInputChange = _a.onInputChange, onChange = _a.onChange, onBlur = _a.onBlur, Calendar = _a.Calendar, wrapperHandlers = _a.wrapperHandlers, calendarRef = _a.calendarRef, _d = _a.calendarProps, calendarProps = _d === void 0 ? {} : _d, _e = _a.minDate, minDate = _e === void 0 ? consts.DEFAULT_MAX_DATE : _e, _f = _a.maxDate, maxDate = _f === void 0 ? consts.DEFAULT_MIN_DATE : _f, block = _a.block, dataTestId = _a.dataTestId, error = _a.error, popoverProps = _a.popoverProps, rightAddons = _a.rightAddons, picker = _a.picker, platform = _a.platform, onPickerClick = _a.onPickerClick, _g = _a.rangeBehavior, rangeBehavior = _g === void 0 ? 'clarification' : _g, clear = _a.clear, onClear = _a.onClear, restProps = tslib.__rest(_a, ["autoCorrection", "breakpoint", "wrapperClassName", "open", "onCalendarClose", "value", "defaultValue", "inputWrapperRef", "onInputChange", "onChange", "onBlur", "Calendar", "wrapperHandlers", "calendarRef", "calendarProps", "minDate", "maxDate", "block", "dataTestId", "error", "popoverProps", "rightAddons", "picker", "platform", "onPickerClick", "rangeBehavior", "clear", "onClear"]);
+    var _h = React.useState(function () { return getDefaultValue(defaultValue); }), inputValue = _h[0], setInputValue = _h[1];
+    var _j = React.useState(calendarProps.defaultMonth), calendarMonth = _j[0], setCalendarMonth = _j[1];
     var lastValidRange = React.useRef('');
     var inputRef = React.useRef(null);
     var inputWrapperRef = React.useRef(null);
-    var uncontrolled = valueProp === undefined;
-    var inputValue = (_c = valueProp !== null && valueProp !== void 0 ? valueProp : value) !== null && _c !== void 0 ? _c : '';
     var offDays = calendarProps.offDays;
-    var _l = inputValue.split(consts.DATE_RANGE_SEPARATOR), _m = _l[0], from = _m === void 0 ? '' : _m, _o = _l[1], to = _o === void 0 ? '' : _o;
-    var _p = React.useMemo(function () { return utils_index.getValidRange({ from: from, to: to, offDays: offDays, minDate: minDate, maxDate: maxDate }); }, [from, to, offDays, maxDate, minDate]), validFrom = _p.validFrom, validTo = _p.validTo;
+    var _k = inputValue.split(consts.DATE_RANGE_SEPARATOR), _l = _k[0], from = _l === void 0 ? '' : _l, _m = _k[1], to = _m === void 0 ? '' : _m;
+    var dateFromProp = valueProp === null || valueProp === void 0 ? void 0 : valueProp.dateFrom;
+    var dateToProp = valueProp === null || valueProp === void 0 ? void 0 : valueProp.dateTo;
+    var _o = React.useMemo(function () { return utils_index.getValidRange({ from: from, to: to, offDays: offDays, minDate: minDate, maxDate: maxDate }); }, [from, to, offDays, maxDate, minDate]), validFrom = _o.validFrom, validTo = _o.validTo;
     React.useEffect(function () {
         if (autoCorrection && (!lastValidRange.current || !inputValue)) {
             var min = utils_index.formatDate(minDate);
@@ -46,42 +55,60 @@ var DateRangeInput = React.forwardRef(function (_a, ref) {
             setCalendarMonth(startOfMonth__default.default(validTo || validFrom || Date.now()).getTime());
         }
     }, [validFrom, validTo, open, picker]);
+    React.useEffect(function () {
+        if (dateFromProp !== undefined && dateToProp !== undefined) {
+            setInputValue(dateFromProp && dateToProp && isValid__default.default(dateFromProp) && isValid__default.default(dateToProp)
+                ? utils_index.formatDateRange({ dateFrom: dateFromProp, dateTo: dateToProp })
+                : '');
+        }
+    }, [dateFromProp, dateToProp]);
     var getInnerError = function () {
         if (autoCorrection) {
-            return (utils_index.isCompleteDate(from) && !validFrom) || (utils_index.isCompleteDate(to) && !validTo)
+            var isCompleteFrom = utils_index.isCompleteDate(from);
+            var isCompleteTo = utils_index.isCompleteDate(to);
+            var isComplete = isCompleteFrom && isCompleteTo;
+            return (isCompleteFrom && !validFrom) ||
+                (isCompleteTo && !validTo) ||
+                (isComplete && isAfter__default.default(utils_index.parseDateString(from), utils_index.parseDateString(to)))
                 ? 'Эта дата недоступна'
                 : false;
         }
         return false;
     };
-    var callOnComplete = function (val) {
-        var _a = val.split(consts.DATE_RANGE_SEPARATOR), dateFrom = _a[0], dateTo = _a[1];
-        onComplete === null || onComplete === void 0 ? void 0 : onComplete(val, utils_index.parseDateString(dateFrom), utils_index.parseDateString(dateTo));
+    var callOnChange = function (val) {
+        var _a = val.split(consts.DATE_RANGE_SEPARATOR), _b = _a[0], dateFrom = _b === void 0 ? '' : _b, _c = _a[1], dateTo = _c === void 0 ? '' : _c;
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+            dateFrom: dateFrom ? utils_index.parseDateString(dateFrom) : null,
+            dateTo: dateFrom ? utils_index.parseDateString(dateTo) : null,
+        }, val);
         lastValidRange.current = val;
     };
-    var changeValue = function (val, event) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(event, { value: val });
-        if (uncontrolled)
-            setValue(val);
-        if (utils_index.isCompleteDateRange(val))
-            callOnComplete(val);
+    var changeInputValue = function (val, event) {
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, { value: val });
+        setInputValue(val);
+        if (val === '' || utils_index.isCompleteDateRange(val))
+            callOnChange(val);
     };
     var handleMonthChange = function (date) {
         var _a;
         setCalendarMonth(date);
         (_a = calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.onMonthChange) === null || _a === void 0 ? void 0 : _a.call(calendarProps, date);
     };
-    var handleChange = function (event) {
-        changeValue(event.target.value, event);
+    var handleInputChange = function (event) {
+        changeInputValue(event.target.value, event);
     };
     var handleCalendarChange = function (date) {
         var newValue = utils_index.updateRange({ date: date, validFrom: validFrom, validTo: validTo, rangeBehavior: rangeBehavior });
-        changeValue(newValue, null);
+        changeInputValue(newValue, null);
         requestAnimationFrame(function () {
             var _a;
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(newValue.length, newValue.length);
         });
     };
+    var handleClear = function (event) {
+        changeInputValue('', null);
+        onClear === null || onClear === void 0 ? void 0 : onClear(event);
+    };
     var handleBlur = function (event) {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
         if (autoCorrection) {
@@ -90,7 +117,7 @@ var DateRangeInput = React.forwardRef(function (_a, ref) {
                 var _a = lastValidRange.current.split(consts.DATE_RANGE_SEPARATOR), prevFrom = _a[0], prevTo = _a[1];
                 var newFrom = validFrom ? utils_index.formatDate(validFrom) : prevFrom;
                 var newTo = validTo ? utils_index.formatDate(validTo) : prevTo;
-                changeValue("".concat(newFrom).concat(consts.DATE_RANGE_SEPARATOR).concat(newTo), null);
+                changeInputValue("".concat(newFrom).concat(consts.DATE_RANGE_SEPARATOR).concat(newTo), null);
             }
         }
     };
@@ -106,7 +133,7 @@ var DateRangeInput = React.forwardRef(function (_a, ref) {
     return (React__default.default.createElement("div", tslib.__assign({}, wrapperHandlers, { className: cn__default.default(index_module.styles.wrapper, wrapperClassName, (_b = {},
             _b[index_module.styles.block] = block,
             _b)), tabIndex: -1, "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'wrapper') }),
-        React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { dataTestId: dataTestId, breakpoint: breakpoint, wrapperRef: mergeRefs__default.default([inputWrapperRef, inputWrapperRefProp]), ref: mergeRefs__default.default([ref, inputRef]), value: inputValue, inputMode: 'decimal', onInput: handleChange, onBlur: handleBlur, error: error || getInnerError(), block: true, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { clear: clear && utils_index.isCompleteDateRange(inputValue), onClear: valueProp === undefined ? handleClear : onClear, dataTestId: dataTestId, breakpoint: breakpoint, wrapperRef: mergeRefs__default.default([inputWrapperRef, inputWrapperRefProp]), ref: mergeRefs__default.default([ref, inputRef]), value: inputValue, inputMode: 'decimal', onInput: handleInputChange, onBlur: handleBlur, error: error || getInnerError(), block: true, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
                 rightAddons,
                 picker && (React__default.default.createElement(CalendarMIcon.CalendarMIcon, { onClick: onPickerClick, className: index_module.styles.calendarIcon, onMouseDown: utils_index.preventDefault }))) })),
         platform === 'desktop' ? (React__default.default.createElement(coreComponentsPopover.Popover, tslib.__assign({ offset: [0, 4], position: 'bottom-start', dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'popover') }, popoverProps, { open: open, anchorElement: inputWrapperRef.current, popperClassName: cn__default.default(index_module.styles.calendarContainer, popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.popperClassName), withTransition: false }), renderCalendar())) : (renderCalendar())));