@via-profit/ui-kit 0.2.1-alpha.1 → 0.2.1-alpha.3

package/Color/index.js

@@ -1,476 +1,21 @@
 "use strict";
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _Color_color, _Color_cache;
 Object.defineProperty(exports, "__esModule", { value: true });
-class Color {
-    constructor(value) {
-        _Color_color.set(this, void 0);
-        _Color_cache.set(this, void 0);
-        if (value instanceof Color) {
-            __classPrivateFieldSet(this, _Color_color, Object.assign({}, value.rgb()), "f");
-        }
-        else {
-            __classPrivateFieldSet(this, _Color_color, Color.parseColor(value), "f");
-        }
-        __classPrivateFieldSet(this, _Color_cache, Object.assign({}, __classPrivateFieldGet(this, _Color_color, "f")), "f");
-        return this;
-    }
-    /**
-     * Lightens the current color by the \
-     * transmitted number of conventional units.\
-     * \
-     * Example:
-     * ```tsx
-     * const color = theme.colors
-     *   .accentPrimary
-     *   .lighten(60)
-     *   .toString();
-     * ```
-     *
-     */
-    lighten(decimal) {
-        return this.shade(decimal);
-    }
-    /**
-     * Darkens the current color by\
-     * the transmitted number of conventional units.
-     * \
-     * Example:
-     * ```tsx
-     * const color = theme.colors
-     *   .accentPrimary
-     *   .darken(60)
-     *   .toString();
-     * ```
-     */
-    darken(decimal) {
-        return this.shade(-decimal);
-    }
-    /**
-     * Applies transparency (alpha channel) to the current color\
-     * Takes as an argument a number from 0 to 1
-     * \
-     * Example:
-     * ```tsx
-     * const color = theme.colors
-     *   .accentPrimary
-     *   .alpha(0.5)
-     *   .toString();
-     * ```
-     */
-    alpha(decimal) {
-        __classPrivateFieldGet(this, _Color_color, "f").a = decimal;
-        return this;
-    }
-    /**
-     * Returns color luminance value
-     */
-    getLuminance() {
-        const RED = 0.2126;
-        const GREEN = 0.7152;
-        const BLUE = 0.0722;
-        const GAMMA = 2.4;
-        const a = [__classPrivateFieldGet(this, _Color_color, "f").r, __classPrivateFieldGet(this, _Color_color, "f").g, __classPrivateFieldGet(this, _Color_color, "f").b].map(v => {
-            v /= 255;
-            return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, GAMMA);
-        });
-        return a[0] * RED + a[1] * GREEN + a[2] * BLUE;
-    }
-    /**
-     * Returns the contrast level between the\
-     * current and transmitted colors
-     * \
-     * Example:
-     * ```tsx
-     * const { colors } = themes;
-     * const contrast = colors
-     *   .accentPrimary
-     *   .getContrast(color.textPrimary.rgbString());
-     *
-     * if (contrast > 5) {
-     *   return color.textPrimary.toString();
-     * } else {
-     *   return color.textSecondary.toString()
-     * }
-     * ```
-     */
-    getContrast(rgb2) {
-        const color2 = rgb2 instanceof Color ? rgb2 : new Color(rgb2);
-        const lum1 = this.getLuminance();
-        const lum2 = color2.getLuminance();
-        const brightest = Math.max(lum1, lum2);
-        const darkest = Math.min(lum1, lum2);
-        return (brightest + 0.05) / (darkest + 0.05);
-    }
-    /**
-     * Lighten or darknest color to lum steps
-     * lum - 0-25
-     */
-    shade(lum) {
-        __classPrivateFieldGet(this, _Color_color, "f").r = parseInt('0' + Math.min(255, Math.max(0, __classPrivateFieldGet(this, _Color_color, "f").r + lum)), 10);
-        __classPrivateFieldGet(this, _Color_color, "f").g = parseInt('0' + Math.min(255, Math.max(0, __classPrivateFieldGet(this, _Color_color, "f").g + lum)), 10);
-        __classPrivateFieldGet(this, _Color_color, "f").b = parseInt('0' + Math.min(255, Math.max(0, __classPrivateFieldGet(this, _Color_color, "f").b + lum)), 10);
-        return this;
-    }
-    luminance(lum) {
-        const { r, g, b } = __classPrivateFieldGet(this, _Color_color, "f");
-        __classPrivateFieldGet(this, _Color_color, "f").r = Math.round(Math.min(Math.max(0, r + r * lum), 255));
-        __classPrivateFieldGet(this, _Color_color, "f").g = Math.round(Math.min(Math.max(0, g + g * lum), 255));
-        __classPrivateFieldGet(this, _Color_color, "f").b = Math.round(Math.min(Math.max(0, b + b * lum), 255));
-        return this;
-    }
-    static stringToHashCode(str) {
-        let hash = 0;
-        for (let i = 0; i < str.length; i++) {
-            const char = str.charCodeAt(i);
-            hash = (hash << 5) - hash + char;
-            hash |= 0; // Convert to a 32-bit integer
-        }
-        return hash;
-    }
-    /**
-     * Convert the integer value to a string color value
-     */
-    static intToRGB(i) {
-        const red = (i >> 16) & 0xff;
-        const green = (i >> 8) & 0xff;
-        const blue = i & 0xff;
-        return `rgb(${red},${green},${blue})`;
-    }
-    /**
-     * Convert GUID string value to a color string
-     */
-    static uuidToColor(uuid) {
-        const hash = Color.stringToHashCode(uuid);
-        return Color.intToRGB(hash);
-    }
-    /**
-     * Returns the current color as separate rgb channels
-     */
-    rgb() {
-        const result = Object.assign({}, __classPrivateFieldGet(this, _Color_color, "f"));
-        __classPrivateFieldSet(this, _Color_color, Object.assign({}, __classPrivateFieldGet(this, _Color_cache, "f")), "f");
-        return result;
-    }
-    /**
-     * Returns the current color as an rgba string
-     */
-    toString() {
-        const result = this.rgbString();
-        __classPrivateFieldSet(this, _Color_color, Object.assign({}, __classPrivateFieldGet(this, _Color_cache, "f")), "f");
-        return result;
-    }
-    /**
-     * Returns the current color as an rgba string
-     */
-    rgbString() {
-        const result = `rgba(${__classPrivateFieldGet(this, _Color_color, "f").r}, ${__classPrivateFieldGet(this, _Color_color, "f").g}, ${__classPrivateFieldGet(this, _Color_color, "f").b}, ${__classPrivateFieldGet(this, _Color_color, "f").a})`;
-        __classPrivateFieldSet(this, _Color_color, Object.assign({}, __classPrivateFieldGet(this, _Color_cache, "f")), "f");
-        return result;
-    }
-    /**
-     * Returns the current color as a hex string
-     */
-    hexString() {
-        const colorToHex = (color) => {
-            const hexadecimal = color.toString(16);
-            return hexadecimal.length === 1 ? `0${hexadecimal}` : hexadecimal;
-        };
-        const result = '#' + colorToHex(__classPrivateFieldGet(this, _Color_color, "f").r) + colorToHex(__classPrivateFieldGet(this, _Color_color, "f").g) + colorToHex(__classPrivateFieldGet(this, _Color_color, "f").b);
-        __classPrivateFieldSet(this, _Color_color, Object.assign({}, __classPrivateFieldGet(this, _Color_cache, "f")), "f");
-        return result;
-    }
-    /**
-     * Parse the transmitted color and returns its\
-     * representation as separate rgba channels
-     */
-    static parseColor(value) {
-        const inputColor = value.trim().toLowerCase();
-        const hsl = inputColor.indexOf('hsl') === 0;
-        const hex3 = inputColor.replace(/[^#0-9a-f]/g, '').match(/^#([0-9a-f]{3})$/i);
-        const hex6 = inputColor.replace(/[^#0-9a-f]/g, '').match(/^#([0-9a-f]{6})$/i);
-        const rgb = inputColor
-            .replace(/[^rgb(),.0-9]/g, '')
-            .match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
-        const rgba = inputColor
-            .replace(/[^rgba(),.0-9]/g, '')
-            .match(/^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+.*\d*)\s*\)$/i) ||
-            inputColor
-                .replace(/[^rgba(),.0-9]/g, '')
-                .match(/^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
-        if (hex3 && hex3.length > 1) {
-            // in three-character format, each value is multiplied by 0x11 to give an
-            // even scale from 0x00 to 0xff
-            return {
-                r: parseInt(hex3[1].charAt(0), 16) * 0x11,
-                g: parseInt(hex3[1].charAt(1), 16) * 0x11,
-                b: parseInt(hex3[1].charAt(2), 16) * 0x11,
-                a: 1,
-            };
-        }
-        if (hex6 && hex6.length >= 1) {
-            return {
-                r: parseInt(hex6[1].substring(0, 2), 16),
-                g: parseInt(hex6[1].substring(2, 4), 16),
-                b: parseInt(hex6[1].substring(4, 6), 16),
-                a: 1,
-            };
-        }
-        if (rgb && rgb.length >= 3) {
-            return {
-                r: parseInt(rgb[1], 10),
-                g: parseInt(rgb[2], 10),
-                b: parseInt(rgb[3], 10),
-                a: 1,
-            };
-        }
-        if (rgba && rgba.length >= 3) {
-            return {
-                r: parseInt(rgba[1], 10),
-                g: parseInt(rgba[2], 10),
-                b: parseInt(rgba[3], 10),
-                a: rgba[4] === undefined ? 1 : Number(rgba[4]),
-            };
-        }
-        if (hsl) {
-            return Color.hslToRgb(inputColor);
-        }
-        const webHex = Color.getHextByWebColor(inputColor);
-        if (webHex) {
-            return Color.parseColor(webHex);
-        }
-        console.error(`Failed to parse color value «${value}»`);
-        return {
-            r: 0,
-            g: 0,
-            b: 0,
-            a: 1,
-        };
-    }
-    /**
-     * Decodes the transmitted color value in hsl format to rgba
-     */
-    static hslToRgb(value) {
-        const hsl = value.match(/(\d+(\.\d+)?)/g);
-        if (!hsl || hsl.length < 3) {
-            throw new Error(`[@via-profit/ui-kit] «${hsl}» Is not a valid hsl color`);
-        }
-        const h = Number(hsl[0]) / 360;
-        const s = Number(hsl[1]) / 100;
-        const l = Number(hsl[2]) / 100;
-        const a = hsl[3] === undefined ? 1 : Number(hsl[3]);
-        let t1;
-        let t2;
-        let t3;
-        let rgb;
-        let val;
-        if (s === 0) {
-            val = Math.round(l * 255);
-            rgb = [val, val, val, a];
-        }
-        else {
-            if (l < 0.5) {
-                t2 = l * (1 + s);
-            }
-            else {
-                t2 = l + s - l * s;
-            }
-            t1 = 2 * l - t2;
-            rgb = [0, 0, 0];
-            for (let i = 0; i < 3; i++) {
-                t3 = h + (1 / 3) * -(i - 1);
-                t3 < 0 && t3++;
-                t3 > 1 && t3--;
-                if (6 * t3 < 1) {
-                    val = t1 + (t2 - t1) * 6 * t3;
-                }
-                else if (2 * t3 < 1) {
-                    val = t2;
-                }
-                else if (3 * t3 < 2) {
-                    val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
-                }
-                else {
-                    val = t1;
-                }
-                rgb[i] = Math.round(val * 255);
-            }
-        }
-        rgb.push(a);
-        return {
-            r: Number(rgb[0]),
-            g: Number(rgb[1]),
-            b: Number(rgb[2]),
-            a: typeof rgb[3] === 'undefined' ? 1 : Number(rgb[3]),
-        };
-    }
-    /**
-     * Returns color code by web color name
-     */
-    static getHextByWebColor(value) {
-        const webColors = {
-            aliceblue: '#F0F8FF',
-            antiquewhite: '#FAEBD7',
-            aqua: '#00FFFF',
-            aquamarine: '#7FFFD4',
-            azure: '#F0FFFF',
-            beige: '#F5F5DC',
-            bisque: '#FFE4C4',
-            black: '#000000',
-            blanchedalmond: '#FFEBCD',
-            blue: '#0000FF',
-            blueviolet: '#8A2BE2',
-            brown: '#A52A2A',
-            burlywood: '#DEB887',
-            cadetblue: '#5F9EA0',
-            chartreuse: '#7FFF00',
-            chocolate: '#D2691E',
-            coral: '#FF7F50',
-            cornflowerblue: '#6495ED',
-            cornsilk: '#FFF8DC',
-            crimson: '#DC143C',
-            cyan: '#00FFFF',
-            darkblue: '#00008B',
-            darkcyan: '#008B8B',
-            darkgoldenrod: '#B8860B',
-            darkgray: '#A9A9A9',
-            darkgrey: '#A9A9A9',
-            darkgreen: '#006400',
-            darkkhaki: '#BDB76B',
-            darkmagenta: '#8B008B',
-            darkolivegreen: '#556B2F',
-            darkorange: '#FF8C00',
-            darkorchid: '#9932CC',
-            darkred: '#8B0000',
-            darksalmon: '#E9967A',
-            darkseagreen: '#8FBC8F',
-            darkslateblue: '#483D8B',
-            darkslategray: '#2F4F4F',
-            darkslategrey: '#2F4F4F',
-            darkturquoise: '#00CED1',
-            darkviolet: '#9400D3',
-            deeppink: '#FF1493',
-            deepskyblue: '#00BFFF',
-            dimgray: '#696969',
-            dimgrey: '#696969',
-            dodgerblue: '#1E90FF',
-            firebrick: '#B22222',
-            floralwhite: '#FFFAF0',
-            forestgreen: '#228B22',
-            fuchsia: '#FF00FF',
-            gainsboro: '#DCDCDC',
-            ghostwhite: '#F8F8FF',
-            gold: '#FFD700',
-            goldenrod: '#DAA520',
-            gray: '#808080',
-            grey: '#808080',
-            green: '#008000',
-            greenyellow: '#ADFF2F',
-            honeydew: '#F0FFF0',
-            hotpink: '#FF69B4',
-            'indianred ': '#CD5C5C',
-            'indigo ': '#4B0082',
-            ivory: '#FFFFF0',
-            khaki: '#F0E68C',
-            lavender: '#E6E6FA',
-            lavenderblush: '#FFF0F5',
-            lawngreen: '#7CFC00',
-            lemonchiffon: '#FFFACD',
-            lightblue: '#ADD8E6',
-            lightcoral: '#F08080',
-            lightcyan: '#E0FFFF',
-            lightgoldenrodyellow: '#FAFAD2',
-            lightgray: '#D3D3D3',
-            lightgrey: '#D3D3D3',
-            lightgreen: '#90EE90',
-            lightpink: '#FFB6C1',
-            lightsalmon: '#FFA07A',
-            lightseagreen: '#20B2AA',
-            lightskyblue: '#87CEFA',
-            lightslategray: '#778899',
-            lightslategrey: '#778899',
-            lightsteelblue: '#B0C4DE',
-            lightyellow: '#FFFFE0',
-            lime: '#00FF00',
-            limegreen: '#32CD32',
-            linen: '#FAF0E6',
-            magenta: '#FF00FF',
-            maroon: '#800000',
-            mediumaquamarine: '#66CDAA',
-            mediumblue: '#0000CD',
-            mediumorchid: '#BA55D3',
-            mediumpurple: '#9370DB',
-            mediumseagreen: '#3CB371',
-            mediumslateblue: '#7B68EE',
-            mediumspringgreen: '#00FA9A',
-            mediumturquoise: '#48D1CC',
-            mediumvioletred: '#C71585',
-            midnightblue: '#191970',
-            mintcream: '#F5FFFA',
-            mistyrose: '#FFE4E1',
-            moccasin: '#FFE4B5',
-            navajowhite: '#FFDEAD',
-            navy: '#000080',
-            oldlace: '#FDF5E6',
-            olive: '#808000',
-            olivedrab: '#6B8E23',
-            orange: '#FFA500',
-            orangered: '#FF4500',
-            orchid: '#DA70D6',
-            palegoldenrod: '#EEE8AA',
-            palegreen: '#98FB98',
-            paleturquoise: '#AFEEEE',
-            palevioletred: '#DB7093',
-            papayawhip: '#FFEFD5',
-            peachpuff: '#FFDAB9',
-            peru: '#CD853F',
-            pink: '#FFC0CB',
-            plum: '#DDA0DD',
-            powderblue: '#B0E0E6',
-            purple: '#800080',
-            rebeccapurple: '#663399',
-            red: '#FF0000',
-            rosybrown: '#BC8F8F',
-            royalblue: '#4169E1',
-            saddlebrown: '#8B4513',
-            salmon: '#FA8072',
-            sandybrown: '#F4A460',
-            seagreen: '#2E8B57',
-            seashell: '#FFF5EE',
-            sienna: '#A0522D',
-            silver: '#C0C0C0',
-            skyblue: '#87CEEB',
-            slateblue: '#6A5ACD',
-            slategray: '#708090',
-            slategrey: '#708090',
-            snow: '#FFFAFA',
-            springgreen: '#00FF7F',
-            steelblue: '#4682B4',
-            tan: '#D2B48C',
-            teal: '#008080',
-            thistle: '#D8BFD8',
-            tomato: '#FF6347',
-            turquoise: '#40E0D0',
-            violet: '#EE82EE',
-            wheat: '#F5DEB3',
-            white: '#FFFFFF',
-            whitesmoke: '#F5F5F5',
-            yellow: '#FFFF00',
-            yellowgreen: '#9ACD32',
-        };
-        const v = value.trim().toLowerCase();
-        return webColors[v];
-    }
-}
-_Color_color = new WeakMap(), _Color_cache = new WeakMap();
-exports.default = Color;
+const Color_1 = require("./Color");
+__exportStar(require("./Color"), exports);
+__exportStar(require("./ColorParser"), exports);
+__exportStar(require("./ColorGenerator"), exports);
+exports.default = Color_1.Color;

package/DatePicker/index.d.ts

@@ -56,22 +56,6 @@ export type DatePickerProps = Omit<TextFieldProps, 'value' | 'onChange' | 'overr
      * array of badges
      */
     readonly badges?: readonly CalendarBadge[];
-    /**
-     * Tooltip for the Prev month button
-     */
-    readonly prevMonthButtonTooltip?: string;
-    /**
-     * Tooltip for the Next month button
-     */
-    readonly nextMonthButtonTooltip?: string;
-    /**
-     * Tooltip for tne month selector button
-     */
-    readonly changeMonthButtonTooltip?: string;
-    /**
-     * Tooltip for the year selector button
-     */
-    readonly changeYearButtonTooltip?: string;
     /**
      * Label for the Reset button. If label passed, then button will be rendered
      */
@@ -91,7 +75,8 @@ export type DatePickerProps = Omit<TextFieldProps, 'value' | 'onChange' | 'overr
     /**
      * Initial name of the view
      */
-    readonly initialView?: CalendarView;
+    readonly view?: CalendarView;
+    readonly views?: readonly CalendarView[];
     /**
      * Custom footer elements
      */

package/DatePicker/index.js

@@ -49,10 +49,10 @@ 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, prevMonthButtonTooltip, nextMonthButtonTooltip, changeMonthButtonTooltip, changeYearButtonTooltip, resetButtonLabel, toodayButtonLabel, heading, subheading, initialView, footer, overrides } = props, restInputProps = __rest(props, ["value", "template", "onChange", "calendarButtonTooltip", "readOnly", "disabled", "minDate", "maxDate", "weekStartDay", "locale", "badges", "displayLeadingZero", "prevMonthButtonTooltip", "nextMonthButtonTooltip", "changeMonthButtonTooltip", "changeYearButtonTooltip", "resetButtonLabel", "toodayButtonLabel", "heading", "subheading", "initialView", "footer", "overrides"]);
+    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, toodayButtonLabel, heading, subheading, view, views, footer, overrides } = props, restInputProps = __rest(props, ["value", "template", "onChange", "calendarButtonTooltip", "readOnly", "disabled", "minDate", "maxDate", "weekStartDay", "locale", "badges", "displayLeadingZero", "resetButtonLabel", "toodayButtonLabel", "heading", "subheading", "view", "views", "footer", "overrides"]);
     const { 
     // Calendar overrides
-    Body, Cell, EmptyCell, Paper, Header, WeekRow, DateContainer, Toolbar, YearsSelector, MonthsSelector, MonthCell, YearCell, DayBadge, Footer, ControlButton, Heading, Subheading, IconPrev, IconNext, WeekDaysBar, 
+    Body, Cell, EmptyCell, Paper, Header, WeekRow, DateContainer, Toolbar, YearsSelector, MonthsSelector, MonthCell, DayBadge, Footer, ControlButton, Heading, Subheading, IconPrev, IconNext, WeekDaysBar, 
     // Textfield overrides
     Input, ErrorText, IconWrapper, InputWrapper, Label, Asterisk, Container, } = overrides || {};
     const [currentValue, setCurrentValue] = react_1.default.useState(value);
@@ -80,69 +80,55 @@ const DatePicker = props => {
         const b = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
         return b.getTime() <= a.getTime();
     }, [maxDate]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(StyledMaskedField, Object.assign({ onClick: () => {
-                if (readOnly) {
-                    setOpenSate(!isOpen);
+    const handleClick = react_1.default.useCallback(() => {
+        if (readOnly) {
+            setOpenSate(!isOpen);
+        }
+    }, [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]);
+    const handleChange = react_1.default.useCallback(({ isValid, text }) => {
+        if (isValid) {
+            const parsedDate = parseInputByTemplate(text, template);
+            // Trying to parse the input date value
+            if (parsedDate instanceof Date && !isNaN(parsedDate.getTime())) {
+                // if the date satisfies the restrictions
+                if (isGreatherThenMinDate(parsedDate) && isLessThenMaxDate(parsedDate)) {
+                    onChange(parsedDate);
+                    // if the date violates the restrictions
                 }
-            }, disabled: disabled, mask: getMaskByTemplate(template), ref: setTextFieldRef, readOnly: readOnly, endIcon: react_1.default.createElement(Button_1.default, { disabled: disabled, iconOnly: true, type: "button", onClick: () => setOpenSate(true), title: calendarButtonTooltip },
-                react_1.default.createElement(DatePickerIcon_1.default, null)) }, restInputProps, { value: currentValue ? formatInputByTemplate(currentValue, template) : '', onChange: ({ isValid, text }) => {
-                if (isValid) {
-                    const parsedDate = parseInputByTemplate(text, template);
-                    // Trying to parse the input date value
-                    if (parsedDate instanceof Date && !isNaN(parsedDate.getTime())) {
-                        // if the date satisfies the restrictions
-                        if (isGreatherThenMinDate(parsedDate) && isLessThenMaxDate(parsedDate)) {
-                            onChange(parsedDate);
-                            // if the date violates the restrictions
-                        }
-                        else {
-                            // set as minDate if parsed date less then minDate value constraint
-                            if (!isGreatherThenMinDate(parsedDate)) {
-                                onChange(minDate);
-                            }
-                            // set as maxDate if parsed date greather then maxDate value constraint
-                            if (!isLessThenMaxDate(parsedDate)) {
-                                onChange(maxDate);
-                            }
-                        }
+                else {
+                    // set as minDate if parsed date less then minDate value constraint
+                    if (!isGreatherThenMinDate(parsedDate)) {
+                        onChange(minDate);
+                    }
+                    // set as maxDate if parsed date greather then maxDate value constraint
+                    if (!isLessThenMaxDate(parsedDate)) {
+                        onChange(maxDate);
                     }
                 }
-            }, overrides: {
-                Input,
-                ErrorText,
-                IconWrapper,
-                InputWrapper,
-                Label,
-                Asterisk,
-                Container,
-            } })),
+            }
+        }
+    }, [
+        isGreatherThenMinDate,
+        isLessThenMaxDate,
+        maxDate,
+        minDate,
+        onChange,
+        parseInputByTemplate,
+        template,
+    ]);
+    const calendarValue = react_1.default.useMemo(() => currentValue || new Date(), [currentValue]);
+    const calendarChange = react_1.default.useCallback(date => {
+        if (date) {
+            onChange(date);
+        }
+        setOpenSate(false);
+    }, [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 })),
         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, prevMonthButtonTooltip: prevMonthButtonTooltip, nextMonthButtonTooltip: nextMonthButtonTooltip, changeMonthButtonTooltip: changeMonthButtonTooltip, changeYearButtonTooltip: changeYearButtonTooltip, resetButtonLabel: resetButtonLabel, todayButtonLabel: toodayButtonLabel, heading: heading, subheading: subheading, initialView: initialView, footer: footer, value: currentValue || new Date(), onChange: date => {
-                        onChange(date);
-                        setOpenSate(false);
-                    }, overrides: {
-                        Body,
-                        Cell,
-                        EmptyCell,
-                        Paper,
-                        Header,
-                        WeekRow,
-                        DateContainer,
-                        Toolbar,
-                        YearsSelector,
-                        MonthsSelector,
-                        MonthCell,
-                        YearCell,
-                        DayBadge,
-                        Footer,
-                        ControlButton,
-                        Heading,
-                        Subheading,
-                        IconPrev,
-                        IconNext,
-                        WeekDaysBar,
-                    } })))));
+                react_1.default.createElement(Calendar_1.default, { minDate: minDate, maxDate: maxDate, weekStartDay: weekStartDay, locale: locale, badges: badges, displayLeadingZero: displayLeadingZero, resetButtonLabel: resetButtonLabel, todayButtonLabel: toodayButtonLabel, heading: heading, subheading: subheading, view: view, views: views, footer: footer, value: calendarValue, onChange: calendarChange })))));
 };
 exports.default = DatePicker;