@via-profit/ui-kit 0.3.0 → 0.5.0

package/Checkbox/CheckboxWrapper.js

@@ -0,0 +1,29 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const StyledWrapper = styled_1.default.span `
+  font-size: 1em;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+const CheckboxWrapper = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(StyledWrapper, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(CheckboxWrapper);

package/Checkbox/index.d.ts

@@ -0,0 +1,144 @@
+import React from 'react';
+import { CheckboxWrapperProps } from './CheckboxWrapper';
+import { CheckboxContainerProps, CheckboxLabelPosition } from './CheckboxContainer';
+import { CheckboxBoxProps } from './CheckboxBox';
+import { CheckboxIconProps } from './CheckboxIcon';
+import { CheckboxTextWrapperProps } from './CheckboxTextWrapper';
+import { CheckboxAsteriskProps } from './CheckboxAsterisk';
+import { CheckboxErrorTextProps } from './CheckboxErrorText';
+export type { CheckboxLabelPosition };
+export type CheckboxProps = Omit<CheckboxBoxProps, 'checked' | 'defaultChecked' | 'onChange' | 'disabled' | 'color' | 'error' | 'indeterminate'> & {
+    /**
+     * The state of the controlled checkbox. Pass it together with `onChange`
+     * Default: undefined
+     */
+    readonly checked?: boolean;
+    /**
+     * The initial state of the uncontrolled checkbox
+     * Default: false
+     */
+    readonly defaultChecked?: boolean;
+    /**
+     * Called when the user toggles the checkbox. The new value is `event.currentTarget.checked`
+     */
+    readonly onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Shows the dash instead of the check mark, e.g. «select all» when only some items are selected.\
+     * Only the look changes: `checked` keeps its value
+     * Default: false
+     */
+    readonly indeterminate?: boolean;
+    /**
+     * If `true` the checkbox state can not be changed
+     * Default: false
+     */
+    readonly disabled?: boolean;
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value
+     * Default: `default`
+     */
+    readonly color?: 'default' | 'primary' | 'secondary' | string;
+    /**
+     * Position of the label relative to the checkbox
+     * Default: `end`
+     */
+    readonly labelPosition?: CheckboxLabelPosition;
+    /**
+     * If true then `errorText` value will be displayed under the checkbox
+     */
+    readonly error?: boolean;
+    /**
+     * Text or ReactNode to show in the error element.\
+     * Will be displayed only if `error` property is true
+     */
+    readonly errorText?: React.ReactNode;
+    /**
+     * If is true then the asterisk will be displayed in label\
+     * If is ReactNode then ReactNode will be displayed in label
+     */
+    readonly requiredAsterisk?: boolean | React.ReactNode;
+    readonly overrides?: CheckboxOverrides;
+};
+export interface CheckboxOverrides {
+    /**
+     * The root element: the checkbox with the label and the error text
+     */
+    readonly Wrapper?: React.ComponentType<CheckboxWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * The label element with the checkbox and the text
+     */
+    readonly Container?: React.ComponentType<CheckboxContainerProps & React.RefAttributes<HTMLLabelElement>>;
+    /**
+     * The square with the native input
+     */
+    readonly Box?: React.ComponentType<CheckboxBoxProps & React.RefAttributes<HTMLInputElement>>;
+    /**
+     * The check mark and the dash of the indeterminate state
+     */
+    readonly Icon?: React.ComponentType<CheckboxIconProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * The text wrapper
+     */
+    readonly TextWrapper?: React.ComponentType<CheckboxTextWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * The asterisk of the required field
+     */
+    readonly Asterisk?: React.ComponentType<CheckboxAsteriskProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * The error text wrapper
+     */
+    readonly ErrorText?: React.ComponentType<CheckboxErrorTextProps & React.RefAttributes<HTMLDivElement>>;
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<CheckboxBoxProps, "color" | "error" | "defaultChecked" | "onChange" | "checked" | "disabled" | "indeterminate"> & {
+    /**
+     * The state of the controlled checkbox. Pass it together with `onChange`
+     * Default: undefined
+     */
+    readonly checked?: boolean | undefined;
+    /**
+     * The initial state of the uncontrolled checkbox
+     * Default: false
+     */
+    readonly defaultChecked?: boolean | undefined;
+    /**
+     * Called when the user toggles the checkbox. The new value is `event.currentTarget.checked`
+     */
+    readonly onChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    /**
+     * Shows the dash instead of the check mark, e.g. «select all» when only some items are selected.\
+     * Only the look changes: `checked` keeps its value
+     * Default: false
+     */
+    readonly indeterminate?: boolean | undefined;
+    /**
+     * If `true` the checkbox state can not be changed
+     * Default: false
+     */
+    readonly disabled?: boolean | undefined;
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value
+     * Default: `default`
+     */
+    readonly color?: string | undefined;
+    /**
+     * Position of the label relative to the checkbox
+     * Default: `end`
+     */
+    readonly labelPosition?: CheckboxLabelPosition | undefined;
+    /**
+     * If true then `errorText` value will be displayed under the checkbox
+     */
+    readonly error?: boolean | undefined;
+    /**
+     * Text or ReactNode to show in the error element.\
+     * Will be displayed only if `error` property is true
+     */
+    readonly errorText?: React.ReactNode;
+    /**
+     * If is true then the asterisk will be displayed in label\
+     * If is ReactNode then ReactNode will be displayed in label
+     */
+    readonly requiredAsterisk?: React.ReactNode;
+    readonly overrides?: CheckboxOverrides | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/Checkbox/index.js

@@ -0,0 +1,72 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const CheckboxWrapper_1 = __importDefault(require("./CheckboxWrapper"));
+const CheckboxContainer_1 = __importDefault(require("./CheckboxContainer"));
+const CheckboxBox_1 = __importDefault(require("./CheckboxBox"));
+const CheckboxIcon_1 = __importDefault(require("./CheckboxIcon"));
+const CheckboxTextWrapper_1 = __importDefault(require("./CheckboxTextWrapper"));
+const CheckboxAsterisk_1 = __importDefault(require("./CheckboxAsterisk"));
+const CheckboxErrorText_1 = __importDefault(require("./CheckboxErrorText"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
+const Checkbox = (props, ref) => {
+    const _a = (0, useThemeProps_1.default)('Checkbox', props), { checked, defaultChecked, onChange, indeterminate = false, disabled, color, labelPosition, error, errorText, requiredAsterisk, overrides, children, className, style } = _a, nativeProps = __rest(_a, ["checked", "defaultChecked", "onChange", "indeterminate", "disabled", "color", "labelPosition", "error", "errorText", "requiredAsterisk", "overrides", "children", "className", "style"]);
+    const inputRef = react_1.default.useRef(null);
+    const [internalChecked, setInternalChecked] = react_1.default.useState(Boolean(defaultChecked));
+    const isControlled = typeof checked !== 'undefined';
+    const isChecked = isControlled ? Boolean(checked) : internalChecked;
+    const overridesMap = react_1.default.useMemo(() => ({
+        Wrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.Wrapper) || CheckboxWrapper_1.default,
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || CheckboxContainer_1.default,
+        Box: (overrides === null || overrides === void 0 ? void 0 : overrides.Box) || CheckboxBox_1.default,
+        Icon: (overrides === null || overrides === void 0 ? void 0 : overrides.Icon) || CheckboxIcon_1.default,
+        TextWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.TextWrapper) || CheckboxTextWrapper_1.default,
+        Asterisk: (overrides === null || overrides === void 0 ? void 0 : overrides.Asterisk) || CheckboxAsterisk_1.default,
+        ErrorText: (overrides === null || overrides === void 0 ? void 0 : overrides.ErrorText) || CheckboxErrorText_1.default,
+    }), [overrides]);
+    react_1.default.useImperativeHandle(ref, () => inputRef.current);
+    // `indeterminate` exists only as the DOM property, not as the attribute.
+    // The browser resets it on click, so it is restored after every change
+    react_1.default.useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate, isChecked]);
+    // Warn once, not on every render
+    const isControlledWithoutOnChange = isControlled && typeof onChange === 'undefined';
+    react_1.default.useEffect(() => {
+        if (isControlledWithoutOnChange) {
+            console.error('The property «onChange» should be passed with prop «checked» to make component controlled');
+        }
+    }, [isControlledWithoutOnChange]);
+    const handleChange = event => {
+        if (!isControlled) {
+            setInternalChecked(event.currentTarget.checked);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    };
+    return (react_1.default.createElement(overridesMap.Wrapper, { className: className, style: style },
+        react_1.default.createElement(overridesMap.Container, { labelPosition: labelPosition, disabled: disabled },
+            react_1.default.createElement(overridesMap.Box, Object.assign({}, nativeProps, { checked: isChecked, onChange: handleChange, disabled: disabled, indeterminate: indeterminate, color: color, error: error, "aria-invalid": error || undefined, ref: inputRef }),
+                react_1.default.createElement(overridesMap.Icon, { checked: isChecked, indeterminate: indeterminate })),
+            (typeof children !== 'undefined' ||
+                (requiredAsterisk != null && requiredAsterisk !== false)) && (react_1.default.createElement(overridesMap.TextWrapper, null,
+                children,
+                requiredAsterisk != null && requiredAsterisk !== false && (react_1.default.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk))))),
+        typeof errorText !== 'undefined' && (react_1.default.createElement(overridesMap.ErrorText, { error: error }, errorText))));
+};
+exports.default = react_1.default.forwardRef(Checkbox);

package/Checkbox/useCheckboxColor.d.ts

@@ -0,0 +1,6 @@
+import Color from '../Color';
+/**
+ * Resolves the `color` property of the Checkbox to the Color instance
+ */
+declare const useCheckboxColor: (color: 'default' | 'primary' | 'secondary' | string | undefined) => Color;
+export default useCheckboxColor;

package/Checkbox/useCheckboxColor.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@emotion/react");
+const Color_1 = __importDefault(require("../Color"));
+/**
+ * Resolves the `color` property of the Checkbox to the Color instance
+ */
+const useCheckboxColor = (color) => {
+    const theme = (0, react_2.useTheme)();
+    return react_1.default.useMemo(() => {
+        switch (true) {
+            case color === 'secondary':
+                return theme.color.accentSecondary;
+            case typeof color === 'undefined':
+            case color === 'default':
+            case color === 'primary':
+                return theme.color.accentPrimary;
+            default:
+                try {
+                    return Color_1.default.fromString(String(color));
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                    return theme.color.accentPrimary;
+                }
+        }
+    }, [color, theme.color]);
+};
+exports.default = useCheckboxColor;

package/ClickOutside/index.d.ts

@@ -15,6 +15,12 @@ export interface ClickOutsideProps {
      * **Default**: `onMouseDown`
      */
     readonly mouseEvent?: OutsideMouseEventName | false;
+    /**
+     * Elements whose clicks are not treated as outside clicks,
+     * e.g. the button that toggles a popper.\
+     * `null` and `undefined` entries are skipped
+     */
+    readonly ignoreElements?: readonly (Element | null | undefined)[];
 }
 type OutsideMouseEventName = 'onClick' | 'onMouseDown' | 'onMouseUp';
 export declare const mouseEventMap: Record<OutsideMouseEventName, 'click' | 'mousedown' | 'mouseup'>;

package/ClickOutside/index.js

@@ -11,14 +11,19 @@ exports.mouseEventMap = {
     onMouseUp: 'mouseup',
 };
 const ClickOutside = props => {
-    const { children, mouseEvent = 'onMouseDown', onOutsideClick } = props;
+    const { children, mouseEvent = 'onMouseDown', onOutsideClick, ignoreElements } = props;
     const ref = react_1.default.useRef(null);
+    // A ref keeps an inline array from resubscribing the listener on every render
+    const ignoreElementsRef = react_1.default.useRef(ignoreElements);
+    ignoreElementsRef.current = ignoreElements;
     react_1.default.useEffect(() => {
         const mouseDownEvent = (event) => {
+            var _a;
             let parentElem = event.target;
             let needToClose = true;
             while (parentElem && 'parentNode' in parentElem) {
-                if (parentElem === ref.current) {
+                if (parentElem === ref.current ||
+                    ((_a = ignoreElementsRef.current) === null || _a === void 0 ? void 0 : _a.some(element => element === parentElem))) {
                     needToClose = false;
                     break;
                 }

package/Color/Color.d.ts

@@ -1,5 +1,5 @@
 import { ParsedColor } from './ColorParser';
-import { ColorGenerator } from './ColorGenerator';
+import { PaletteName } from './ColorGenerator';
 export type ColorFormat = 'rgb' | 'rgba' | 'hex' | 'hsl' | 'hsla';
 export declare class Color {
     private readonly _r;
@@ -30,7 +30,7 @@ export declare class Color {
     /**
      * Создает цвет из UUID (использует генератор)
      */
-    static fromUuid(uuid: string, palette?: keyof typeof ColorGenerator.getPalettes): Color;
+    static fromUuid(uuid: string, palette?: PaletteName): Color;
     /**
      * Создает цвет из строки с хешированием
      */
@@ -73,11 +73,11 @@ export declare class Color {
      */
     getContrast(other: Color | string): number;
     /**
-     * Проверяет, достаточно ли контрастен цвет для белого текста
+     * Проверяет, светлый ли цвет: относительная яркость больше 0.5
      */
     isLight(): boolean;
     /**
-     * Возвращает наиболее контрастный цвет (черный или белый)
+     * Возвращает цвет текста (черный или белый), наиболее контрастный с текущим цветом
      */
     getContrastColor(): Color;
     /**

package/Color/Color.js

@@ -126,16 +126,20 @@ class Color {
         return (brightest + 0.05) / (darkest + 0.05);
     }
     /**
-     * Проверяет, достаточно ли контрастен цвет для белого текста
+     * Проверяет, светлый ли цвет: относительная яркость больше 0.5
      */
     isLight() {
         return this.getLuminance() > 0.5;
     }
     /**
-     * Возвращает наиболее контрастный цвет (черный или белый)
+     * Возвращает цвет текста (черный или белый), наиболее контрастный с текущим цветом
      */
     getContrastColor() {
-        return this.isLight() ? Color.fromString('#000000') : Color.fromString('#FFFFFF');
+        const black = Color.fromString('#000000');
+        const white = Color.fromString('#FFFFFF');
+        // Compared by the contrast ratio: a luminance threshold picks white text
+        // for mid colors like orange, where black text is several times more readable
+        return this.getContrast(black) >= this.getContrast(white) ? black : white;
     }
     /**
      * Возвращает новый цвет, смешанный с другим цветом
@@ -297,9 +301,9 @@ class Color {
     static getHextByWebColor(value) {
         if (process.env.NODE_ENV !== 'production') {
             console.warn('[Color] getHextByWebColor() is deprecated. ' +
-                'Use Color.fromString(value).toHslString() instead');
+                'Use Color.fromString(value).toHexString() instead');
         }
-        return Color.fromString(value).toHslString();
+        return Color.fromString(value).toHexString();
     }
     /**
      * @deprecated Do not use.

package/Color/ColorGenerator.d.ts

@@ -4,7 +4,7 @@ export declare class ColorGenerator {
     /**
      * Генерирует цвет на основе UUID
      */
-    static fromUuid(uuid: string, palette?: keyof typeof ColorGenerator.palettes): Color;
+    static fromUuid(uuid: string, palette?: PaletteName): Color;
     /**
      * Генерирует цвет на основе строки с использованием хеш-функции
      */
@@ -26,4 +26,8 @@ export declare class ColorGenerator {
     };
     private static stringToHashCode;
 }
+/**
+ * Name of a palette of ColorGenerator: `pastel`, `vibrant`, `muted`, `autumn`, `ocean` or `forest`
+ */
+export type PaletteName = keyof ReturnType<typeof ColorGenerator.getPalettes>;
 export default ColorGenerator;

package/DatePicker/index.d.ts

@@ -8,19 +8,32 @@ export type DatePickerProps = Omit<TextFieldProps, 'value' | 'onChange' | 'overr
      */
     readonly value: Date | null;
     /**
-     * Will be invoked when date would be changed
+     * Will be invoked when date would be changed.\
+     * Receives `null` when the field was cleared
      */
-    readonly onChange: (date: Date) => void;
+    readonly onChange: (date: Date | null) => void;
     /**
-     * Date template like one of format: \
-     * `dd.mm.yyyy` or `yyyy/mm/dd`, etc.\
-     * Posibility chars: `y`, `Y`, `yy`, `yyyy`, `d`, `dd`, `D`, `m`, `mm`, `M`
+     * Date template, e.g. `dd.mm.yyyy` or `yyyy-mm-dd`.\
+     * Every char of the template is one char of the field, so use the fixed width parts:
+     * `dd` — day, `mm` — month, `yyyy` — year (`yy` — two digits of the year)
      */
     readonly template: string;
     /**
-     * Tooltip text for a calendar button
+     * The label of the calendar button for screen readers and the tooltip.
+     * Also the label of the calendar popup\
+     * **Default:** `Choose date`
      */
     readonly calendarButtonTooltip?: string;
+    /**
+     * The label of the «previous» button of the calendar\
+     * **Default:** `Previous`
+     */
+    readonly prevButtonLabel?: string;
+    /**
+     * The label of the «next» button of the calendar\
+     * **Default:** `Next`
+     */
+    readonly nextButtonLabel?: string;
     /**
      * Minimum date limit
      */

package/DatePicker/index.js

@@ -49,7 +49,23 @@ const StyledMaskedField = (0, styled_1.default)(MaskedField_1.default) `
     `}
 `;
 const DatePicker = props => {
-    const { value, template, onChange, calendarButtonTooltip, readOnly, disabled, minDate = new Date(new Date().getFullYear() - 100, 0, 1, 0, 0, 0), maxDate = new Date(new Date().getFullYear() + 100, 0, 1, 0, 0, 0), weekStartDay = 'monday', locale = 'ru-RU', badges = [], displayLeadingZero = false, resetButtonLabel, todayButtonLabel: todayButtonLabelProp, toodayButtonLabel, markToday, weekDayLabelFormat, heading, subheading, view, views, footer, overrides } = props, restInputProps = __rest(props, ["value", "template", "onChange", "calendarButtonTooltip", "readOnly", "disabled", "minDate", "maxDate", "weekStartDay", "locale", "badges", "displayLeadingZero", "resetButtonLabel", "todayButtonLabel", "toodayButtonLabel", "markToday", "weekDayLabelFormat", "heading", "subheading", "view", "views", "footer", "overrides"]);
+    const { value, template, onChange, calendarButtonTooltip, readOnly, disabled, minDate: inputMinDate, maxDate: inputMaxDate, weekStartDay = 'monday', locale = 'ru-RU', badges = [], displayLeadingZero = false, resetButtonLabel, todayButtonLabel: todayButtonLabelProp, toodayButtonLabel, markToday, weekDayLabelFormat, heading, subheading, view, views, footer, overrides, prevButtonLabel, nextButtonLabel, inputRef: userInputRef } = props, restInputProps = __rest(props, ["value", "template", "onChange", "calendarButtonTooltip", "readOnly", "disabled", "minDate", "maxDate", "weekStartDay", "locale", "badges", "displayLeadingZero", "resetButtonLabel", "todayButtonLabel", "toodayButtonLabel", "markToday", "weekDayLabelFormat", "heading", "subheading", "view", "views", "footer", "overrides", "prevButtonLabel", "nextButtonLabel", "inputRef"]);
+    const calendarLabel = calendarButtonTooltip !== null && calendarButtonTooltip !== void 0 ? calendarButtonTooltip : 'Choose date';
+    // The default limits are created once, otherwise every render invalidates the memoized values
+    const minDate = react_1.default.useMemo(() => inputMinDate !== null && inputMinDate !== void 0 ? inputMinDate : new Date(new Date().getFullYear() - 100, 0, 1, 0, 0, 0), [inputMinDate]);
+    const maxDate = react_1.default.useMemo(() => inputMaxDate !== null && inputMaxDate !== void 0 ? inputMaxDate : new Date(new Date().getFullYear() + 100, 0, 1, 0, 0, 0), [inputMaxDate]);
+    const inputRef = react_1.default.useRef(null);
+    const buttonRef = react_1.default.useRef(null);
+    const popperRef = react_1.default.useRef(null);
+    const setInputRef = react_1.default.useCallback((el) => {
+        inputRef.current = el;
+        if (typeof userInputRef === 'function') {
+            userInputRef(el);
+        }
+        else if (userInputRef) {
+            userInputRef.current = el;
+        }
+    }, [userInputRef]);
     const todayButtonLabel = todayButtonLabelProp !== null && todayButtonLabelProp !== void 0 ? todayButtonLabelProp : toodayButtonLabel;
     const calendarOverrides = react_1.default.useMemo(() => {
         if (!overrides) {
@@ -97,12 +113,41 @@ const DatePicker = props => {
     }, [maxDate]);
     const handleClick = react_1.default.useCallback(() => {
         if (readOnly) {
-            setOpenSate(!isOpen);
+            setOpenSate(open => !open);
         }
-    }, [isOpen, readOnly]);
-    const endIcon = react_1.default.useMemo(() => (react_1.default.createElement(Button_1.default, { disabled: disabled, iconOnly: true, variant: "plain", type: "button", onClick: () => setOpenSate(true), title: calendarButtonTooltip },
-        react_1.default.createElement(DatePickerIcon_1.default, null))), [calendarButtonTooltip, disabled]);
+    }, [readOnly]);
+    // The keyboard focus goes to the calendar when it is opened: the selected day, today or the first one
+    react_1.default.useEffect(() => {
+        if (!isOpen)
+            return undefined;
+        const frame = requestAnimationFrame(() => {
+            var _a, _b;
+            (_b = (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[data-date][tabindex="0"]')) === null || _b === void 0 ? void 0 : _b.focus();
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [isOpen]);
+    const close = react_1.default.useCallback(() => {
+        var _a, _b;
+        setOpenSate(false);
+        // Back to the field, so the keyboard user continues from the same place
+        (_b = (readOnly ? inputRef.current : ((_a = buttonRef.current) !== null && _a !== void 0 ? _a : inputRef.current))) === null || _b === void 0 ? void 0 : _b.focus();
+    }, [readOnly]);
+    const handlePopperKeyDown = react_1.default.useCallback((event) => {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            close();
+        }
+    }, [close]);
+    const endIcon = react_1.default.useMemo(() => (react_1.default.createElement(Button_1.default, { ref: buttonRef, disabled: disabled, iconOnly: true, variant: "plain", type: "button", onClick: () => setOpenSate(open => !open), title: calendarLabel, "aria-label": calendarLabel, "aria-haspopup": "dialog", "aria-expanded": isOpen },
+        react_1.default.createElement(DatePickerIcon_1.default, null))), [calendarLabel, disabled, isOpen]);
     const handleChange = react_1.default.useCallback(({ isValid, text }) => {
+        // The field was cleared: the date is reset
+        if (text.trim() === '') {
+            if (currentValue !== null) {
+                onChange(null);
+            }
+            return;
+        }
         if (isValid) {
             const parsedDate = parseInputByTemplate(text, template);
             // Trying to parse the input date value
@@ -125,6 +170,7 @@ const DatePicker = props => {
             }
         }
     }, [
+        currentValue,
         isGreatherThenMinDate,
         isLessThenMaxDate,
         maxDate,
@@ -134,15 +180,16 @@ const DatePicker = props => {
         template,
     ]);
     const calendarChange = react_1.default.useCallback(date => {
-        if (date) {
-            onChange(date);
-        }
+        var _a;
+        // null comes from the «Reset» button of the calendar
+        onChange(date !== null && date !== void 0 ? date : null);
         setOpenSate(false);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [onChange]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(StyledMaskedField, Object.assign({ onClick: handleClick, disabled: disabled, mask: getMaskByTemplate(template), ref: setTextFieldRef, readOnly: readOnly, endIcon: endIcon }, restInputProps, { value: currentValue ? formatInputByTemplate(currentValue, template) : '', onChange: handleChange, overrides: textFieldOverrides })),
-        react_1.default.createElement(ClickOutside_1.default, { onOutsideClick: () => setOpenSate(false), mouseEvent: "onMouseDown" },
-            react_1.default.createElement(Popper_1.default, { isOpen: isOpen, anchorElement: textFieldRef },
-                react_1.default.createElement(Calendar_1.default, { minDate: minDate, maxDate: maxDate, weekStartDay: weekStartDay, locale: locale, badges: badges, displayLeadingZero: displayLeadingZero, resetButtonLabel: resetButtonLabel, todayButtonLabel: todayButtonLabel, markToday: markToday, weekDayLabelFormat: weekDayLabelFormat, heading: heading, subheading: subheading, view: view, views: views, footer: footer, value: currentValue, onChange: calendarChange, overrides: calendarOverrides })))));
+        react_1.default.createElement(StyledMaskedField, Object.assign({ onClick: handleClick, disabled: disabled, mask: getMaskByTemplate(template), ref: setTextFieldRef, readOnly: readOnly, endIcon: endIcon }, restInputProps, { inputRef: setInputRef, value: currentValue ? formatInputByTemplate(currentValue, template) : '', onChange: handleChange, overrides: textFieldOverrides })),
+        react_1.default.createElement(ClickOutside_1.default, { onOutsideClick: () => setOpenSate(false), mouseEvent: "onMouseDown", ignoreElements: [textFieldRef] },
+            react_1.default.createElement(Popper_1.default, { ref: popperRef, isOpen: isOpen, anchorElement: textFieldRef, role: "dialog", "aria-label": calendarLabel, onKeyDown: handlePopperKeyDown },
+                react_1.default.createElement(Calendar_1.default, { minDate: minDate, maxDate: maxDate, weekStartDay: weekStartDay, locale: locale, badges: badges, displayLeadingZero: displayLeadingZero, resetButtonLabel: resetButtonLabel, todayButtonLabel: todayButtonLabel, markToday: markToday, weekDayLabelFormat: weekDayLabelFormat, heading: heading, subheading: subheading, view: view, views: views, footer: footer, prevButtonLabel: prevButtonLabel, nextButtonLabel: nextButtonLabel, value: currentValue, onChange: calendarChange, overrides: calendarOverrides })))));
 };
 exports.default = DatePicker;

package/ErrorBoundary/RenderError.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 type RenderErrorProps = {
     readonly error?: Error | unknown;
+    readonly title?: React.ReactNode;
+    readonly description?: React.ReactNode;
 };
 declare const RenderError: React.FC<RenderErrorProps>;
 export default RenderError;

package/ErrorBoundary/RenderError.js

@@ -27,7 +27,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
-const react_intl_1 = require("react-intl");
 const styled_1 = __importDefault(require("@emotion/styled"));
 const createTheme_1 = __importDefault(require("../ThemeProvider/createTheme"));
 const H1_1 = __importDefault(require("../Typography/H1"));
@@ -46,7 +45,7 @@ const StyledHeading = (0, styled_1.default)(H1_1.default) `
   margin-top: 0;
 `;
 const RenderError = props => {
-    const { error } = props;
+    const { error, title = 'Something went wrong', description = 'Please let the developers know', } = props;
     const isDev = process.env.NODE_ENV === 'development';
     const { name, message, stack } = React.useMemo(() => {
         let name = '';
@@ -72,9 +71,7 @@ const RenderError = props => {
                 React.createElement(StyledHeading, null, name),
                 React.createElement(Strong_1.default, null, message),
                 stack !== '' && React.createElement(Paragraph_1.default, null, stack))) : (React.createElement(React.Fragment, null,
-                React.createElement(StyledHeading, null,
-                    React.createElement(react_intl_1.FormattedMessage, { defaultMessage: "\u041F\u0440\u043E\u0438\u0437\u043E\u0448\u043B\u0430 \u043E\u0448\u0438\u0431\u043A\u0430" })),
-                React.createElement(Paragraph_1.default, null,
-                    React.createElement(react_intl_1.FormattedMessage, { defaultMessage: "\u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0441\u043E\u043E\u0431\u0449\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A\u0430\u043C" }))))))));
+                React.createElement(StyledHeading, null, title),
+                React.createElement(Paragraph_1.default, null, description)))))));
 };
 exports.default = RenderError;

package/ErrorBoundary/index.d.ts

@@ -1,15 +1,28 @@
 import React from 'react';
 type State = {
     readonly error: Error | null;
-    readonly errorInfo: React.ErrorInfo | null;
 };
-type Props = {
+export type ErrorBoundaryProps = {
     readonly children: React.ReactNode;
-    readonly fallback?: React.ReactNode | undefined | null;
+    /**
+     * What is shown instead of the children after an error. Without it the error message is shown:
+     * the name, the message and the stack in the development mode, `title` and `description` in production
+     */
+    readonly fallback?: React.ReactNode;
+    /**
+     * The heading of the error message in production
+     * Default: `Something went wrong`
+     */
+    readonly title?: React.ReactNode;
+    /**
+     * The text of the error message in production
+     * Default: `Please let the developers know`
+     */
+    readonly description?: React.ReactNode;
 };
-declare class ErrorBoundary extends React.Component<Props, State> {
-    constructor(props: Props);
-    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, State> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): State;
     render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
 }
 export default ErrorBoundary;