@via-profit/ui-kit 0.1.0-rc.63 → 0.1.0-rc.64

package/Autocomplete/AutocompleteContainer.d.ts

@@ -34,6 +34,10 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined = und
      * Should the autocomplete element be cleared when blur and if no element is selected
      */
     readonly clearIfNotSelected?: boolean;
+    /**
+     * Show clear button if clearable is true
+     */
+    readonly clearable?: boolean;
     /**
      * items render function
      */
@@ -44,7 +48,7 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined = und
     readonly getOptionSelected?: GetOptionSelected<T>;
     readonly onRequestClose?: OnRequestClose;
     readonly onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
-    readonly onRequestOpen?: (event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLInputElement> | React.FocusEvent<HTMLInputElement, Element>) => void;
+    readonly onRequestOpen?: (event: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLInputElement, Element>) => void;
     /**
      * Overridable components map
      */

package/Autocomplete/AutocompleteContainer.js

@@ -46,7 +46,7 @@ const context_1 = __importStar(require("./context"));
 const IconClear_1 = __importDefault(require("./IconClear"));
 const ClickOutside_1 = require("../ClickOutside");
 const Autocomplete = react_1.default.forwardRef((props, ref) => {
-    const { items, value, multiple, isOpen = false, isLoading = false, clearIfNotSelected = true, anchorPos = 'auto-start-end', requiredAsterisk, startIcon, fullWidth, placeholder, label, error, errorText, inputRef, filterItems, children, onChange, selectedItemToString, onInputChange, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides } = props, nativeInputProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "clearIfNotSelected", "anchorPos", "requiredAsterisk", "startIcon", "fullWidth", "placeholder", "label", "error", "errorText", "inputRef", "filterItems", "children", "onChange", "selectedItemToString", "onInputChange", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides"]);
+    const { items, value, multiple, isOpen = false, isLoading = false, clearIfNotSelected = true, anchorPos = 'auto-start-end', requiredAsterisk, startIcon, fullWidth, placeholder, label, error, errorText, inputRef, filterItems, children, onChange, selectedItemToString, clearable = true, onInputChange, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides } = props, nativeInputProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "clearIfNotSelected", "anchorPos", "requiredAsterisk", "startIcon", "fullWidth", "placeholder", "label", "error", "errorText", "inputRef", "filterItems", "children", "onChange", "selectedItemToString", "clearable", "onInputChange", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides"]);
     const menuRef = react_1.default.useRef(null);
     const fieldInputRef = react_1.default.useRef(null);
     const isFocusedRef = react_1.default.useRef(false);
@@ -178,7 +178,7 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
         };
     }, [onRequestClose, anchorElement]);
     return (react_1.default.createElement("div", null,
-        react_1.default.useMemo(() => (react_1.default.createElement(overridesMap.TextField, Object.assign({ placeholder: placeholder, label: label, error: error, requiredAsterisk: requiredAsterisk, errorText: errorText, fullWidth: fullWidth, startIcon: startIcon, isLoading: currentLoading, endIcon: react_1.default.createElement(Button_1.default, { iconOnly: true, type: "button", onClick: () => (currentLoading ? 'undefined' : clear()) }, currentLoading ? react_1.default.createElement(Spinner_1.default, null) : react_1.default.createElement(IconClear_1.default, null)) }, nativeInputProps, { onKeyDown: event => {
+        react_1.default.useMemo(() => (react_1.default.createElement(overridesMap.TextField, Object.assign({ placeholder: placeholder, label: label, error: error, requiredAsterisk: requiredAsterisk, errorText: errorText, fullWidth: fullWidth, startIcon: startIcon, isLoading: currentLoading, endIcon: clearable ? (react_1.default.createElement(Button_1.default, { iconOnly: true, type: "button", onClick: () => (currentLoading ? 'undefined' : clear()) }, currentLoading ? react_1.default.createElement(Spinner_1.default, null) : react_1.default.createElement(IconClear_1.default, null))) : undefined }, nativeInputProps, { onKeyDown: event => {
                 inputKeydownEvent(event);
                 if (typeof nativeInputProps.onKeyDown === 'function') {
                     nativeInputProps.onKeyDown(event);
@@ -228,6 +228,7 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
                 }));
                 // dispatch(actionSetPartial({ inputValue: event.currentTarget.value }));
             } }))), [
+            overridesMap,
             placeholder,
             label,
             error,
@@ -236,14 +237,14 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             fullWidth,
             startIcon,
             currentLoading,
-            inputKeydownEvent,
+            clearable,
+            nativeInputProps,
             inputValue,
             clear,
-            overridesMap,
+            inputKeydownEvent,
             anchorElement,
             dispatch,
             inputRef,
-            nativeInputProps,
             onRequestOpen,
             onInputChange,
             filterItems,

package/Autocomplete/AutocompleteTextField.js

@@ -5,5 +5,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const TextField_1 = __importDefault(require("../TextField"));
-const AutocompletetextField = (props, ref) => react_1.default.createElement(TextField_1.default, Object.assign({}, props, { ref: ref }));
-exports.default = react_1.default.forwardRef(AutocompletetextField);
+const AutocompleteTextField = (props, ref) => react_1.default.createElement(TextField_1.default, Object.assign({}, props, { ref: ref }));
+exports.default = react_1.default.forwardRef(AutocompleteTextField);

package/Calendar/CalendarWeekDaysBar.js

@@ -24,9 +24,11 @@ const Container = styled_1.default.div `
 `;
 const CalendarWeekDaysBar = (props, ref) => {
     const { locale, week, format } = props, restProps = __rest(props, ["locale", "week", "format"]);
-    const weekDayLabels = react_1.default.useMemo(() => week.days.map(day => new Intl.DateTimeFormat(locale, {
-        weekday: format,
-    }).format(day.date)), [format, locale, week]);
+    const weekDayLabels = react_1.default.useMemo(() => week.days.map(day => typeof Intl !== 'undefined'
+        ? new Intl.DateTimeFormat(locale, {
+            weekday: format,
+        }).format(day.date)
+        : '\u{0020}'), [format, locale, week]);
     return (react_1.default.createElement(Container, Object.assign({}, restProps, { ref: ref }), weekDayLabels.map(label => (react_1.default.createElement(CalendarWeekDayLabel_1.default, { key: label }, label)))));
 };
 exports.default = react_1.default.forwardRef(CalendarWeekDaysBar);

package/Calendar/index.d.ts

@@ -3,11 +3,9 @@ import { WeekNameLabelFormat } from './CalendarWeekDaysBar';
 import { WeekDayName } from './use-calendar';
 export type CalendarProps = {
     readonly value?: Date;
-    readonly onChange?: (date: Date) => void;
-    readonly onDateSelect?: (date: readonly Date[]) => void;
+    readonly defaultValue?: Date;
+    readonly onChange: (dates: Date) => void;
     readonly locale?: string;
-    readonly selected?: readonly Date[];
-    readonly selectMultiple?: boolean;
     readonly badges?: readonly CalendarDadge[];
     readonly maxDate?: Date;
     readonly minDate?: Date;

package/Calendar/index.js

@@ -25,6 +25,7 @@ const CalendarControlButton_1 = __importDefault(require("./CalendarControlButton
 const CalendarHeading_1 = __importDefault(require("./CalendarHeading"));
 const CalendarSubheading_1 = __importDefault(require("./CalendarSubheading"));
 const defaultState = {
+    calendarValue: new Date(),
     calendarDate: new Date(),
     calendarCurrentView: 'days',
     calendarViewVariants: ['years', 'monthes', 'days'],
@@ -38,9 +39,22 @@ const reducer = (state, action) => {
     }
 };
 const Calendar = props => {
-    const { 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', displayLeadingZero = false, onDateSelect, onChange, selected = [], badges = [], selectMultiple = false, value, markToday, weekDayLabelFormat = 'short', accentColor = 'primary', prevMonthButtonTooltip, nextMonthButtonTooltip, changeMonthButtonTooltip, changeYearButtonTooltip, views = defaultState.calendarViewVariants, initialView = defaultState.calendarCurrentView, resetButtonLabel, toodayButtonLabel, heading, subheading, footer, } = props;
-    const initialProps = react_1.default.useRef({ value, selected, badges, initialView });
-    const [state, dispatch] = react_1.default.useReducer(reducer, Object.assign(Object.assign({}, defaultState), { calendarDate: typeof value === 'undefined' ? new Date() : value, calendarViewVariants: views, calendarCurrentView: initialView }));
+    const { 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', displayLeadingZero = false, onChange, 
+    // selected = [],
+    badges = [], 
+    // selectMultiple = false,
+    value, defaultValue, markToday, weekDayLabelFormat = 'short', accentColor = 'primary', prevMonthButtonTooltip, nextMonthButtonTooltip, changeMonthButtonTooltip, changeYearButtonTooltip, views = defaultState.calendarViewVariants, initialView = defaultState.calendarCurrentView, resetButtonLabel, toodayButtonLabel, heading, subheading, footer, } = props;
+    const realValue = react_1.default.useMemo(() => typeof value !== 'undefined'
+        ? value
+        : typeof defaultValue !== 'undefined'
+            ? defaultValue
+            : new Date(), [value, defaultValue]);
+    const initialProps = react_1.default.useRef({
+        value: realValue,
+        badges,
+        initialView,
+    });
+    const [state, dispatch] = react_1.default.useReducer(reducer, Object.assign(Object.assign({}, defaultState), { calendarValue: realValue, calendarViewVariants: views, calendarDate: realValue, calendarCurrentView: initialView }));
     const { isSameDay, getWeeks, getDayLabel, getMonthLabel, getYearLabel, getYearsRange, getMonthesRange, } = (0, use_calendar_1.useCalendar)({
         minDate,
         maxDate,
@@ -48,42 +62,57 @@ const Calendar = props => {
         locale,
         displayLeadingZero,
     });
-    const { calendarCurrentView, calendarViewVariants, calendarDate } = state;
+    const { calendarCurrentView, calendarViewVariants, calendarValue, calendarDate } = state;
+    /**
+     * Prev and next month buttons
+     */
     const handleChangeMonthClick = react_1.default.useCallback((type) => () => {
         const newDate = type === 'prev'
             ? new Date(calendarDate.getFullYear(), calendarDate.getMonth() - 1, 1)
             : new Date(calendarDate.getFullYear(), calendarDate.getMonth() + 1, 1);
-        if (!isSameDay(newDate, calendarDate)) {
-            dispatch({ type: 'setPartial', payload: { calendarDate: newDate } });
-            if (typeof onChange === 'function') {
-                onChange(newDate);
-            }
-        }
-    }, [calendarDate, isSameDay, onChange]);
-    // Date props was changed
+        dispatch({ type: 'setPartial', payload: { calendarDate: newDate } });
+    }, [calendarDate]);
+    /**
+     * Date props was changed
+     */
     react_1.default.useEffect(() => {
-        if (typeof value !== 'undefined' && !isSameDay(value, calendarDate)) {
-            dispatch({ type: 'setPartial', payload: { calendarDate: value } });
+        if (typeof value !== 'undefined' && !isSameDay(value, calendarValue)) {
+            dispatch({
+                type: 'setPartial',
+                payload: {
+                    calendarValue: value,
+                    calendarDate: value,
+                },
+            });
         }
-    }, [value, calendarDate, isSameDay, dispatch]);
+    }, [value, calendarValue, isSameDay, dispatch]);
+    /**
+     * Handle click on Day button
+     */
     const handleCellDateClick = react_1.default.useCallback((selectedDate) => () => {
-        if (typeof onDateSelect === 'function') {
-            if (selectMultiple) {
-                const selectedAsTime = selectedDate.getTime();
-                const selectedSet = new Set(selected.map(s => s.getTime()));
-                if (selectedSet.has(selectedAsTime)) {
-                    selectedSet.delete(selectedAsTime);
-                }
-                else {
-                    selectedSet.add(selectedAsTime);
-                }
-                onDateSelect([...selectedSet].map(s => new Date(s)));
-            }
-            else {
-                onDateSelect([selectedDate]);
-            }
+        if (typeof onChange === 'function') {
+            // if (selectMultiple) {
+            //   const selectedAsTime = selectedDate.getTime();
+            //   const selectedSet = new Set(selected.map(s => s.getTime()));
+            //   if (selectedSet.has(selectedAsTime)) {
+            //     selectedSet.delete(selectedAsTime);
+            //   } else {
+            //     selectedSet.add(selectedAsTime);
+            //   }
+            //   onChange([...selectedSet].map(s => new Date(s)));
+            // } else {
+            // }
+            onChange(selectedDate);
+        }
+        if (!value) {
+            dispatch({
+                type: 'setPartial',
+                payload: {
+                    calendarValue: selectedDate,
+                },
+            });
         }
-    }, [onDateSelect, selected, selectMultiple]);
+    }, [onChange, value]);
     const getNextPossibleView = react_1.default.useCallback(() => {
         const currentViewIndex = calendarViewVariants.findIndex(v => v === calendarCurrentView);
         if (currentViewIndex !== -1 && calendarViewVariants.length > currentViewIndex + 1) {
@@ -98,6 +127,9 @@ const Calendar = props => {
         }
         return calendarViewVariants[calendarViewVariants.length - 1];
     }, [calendarCurrentView, calendarViewVariants]);
+    /**
+     * Handle of click on year item
+     */
     const handleYearSelected = react_1.default.useCallback((selectedYear) => () => {
         const newDate = new Date(calendarDate);
         newDate.setFullYear(selectedYear);
@@ -115,11 +147,11 @@ const Calendar = props => {
                     calendarCurrentView: nextView,
                 },
             });
-            if (typeof onChange === 'function') {
-                onChange(newDate);
-            }
         }
-    }, [calendarDate, getNextPossibleView, onChange]);
+    }, [calendarDate, getNextPossibleView]);
+    /**
+     * Handle of click on month item
+     */
     const handleMonthSelected = react_1.default.useCallback((monthIndex) => () => {
         const newDate = new Date(calendarDate);
         newDate.setMonth(monthIndex);
@@ -135,11 +167,11 @@ const Calendar = props => {
                     calendarCurrentView: getNextPossibleView(),
                 },
             });
-            if (typeof onChange === 'function') {
-                onChange(newDate);
-            }
         }
-    }, [calendarDate, getNextPossibleView, onChange]);
+    }, [calendarDate, getNextPossibleView]);
+    /**
+     * Manual view changing
+     */
     const handleChangeView = react_1.default.useCallback((selectedView) => () => {
         dispatch({
             type: 'setPartial',
@@ -148,21 +180,25 @@ const Calendar = props => {
             },
         });
     }, []);
+    /**
+     * Handle click on «Reset» button
+     */
     const handleReset = react_1.default.useCallback(() => {
         dispatch({
             type: 'setPartial',
             payload: {
                 calendarCurrentView: initialProps.current.initialView,
                 calendarDate: initialProps.current.value,
+                calendarValue: initialProps.current.value,
             },
         });
-        if (typeof onChange === 'function' && initialProps.current.value instanceof Date) {
+        if (typeof onChange === 'function') {
             onChange(initialProps.current.value);
         }
-        if (typeof onDateSelect === 'function') {
-            onDateSelect(initialProps.current.selected);
-        }
-    }, [onChange, onDateSelect]);
+    }, [onChange]);
+    /**
+     * Handle click on «Today» button
+     */
     const handleToday = react_1.default.useCallback(() => {
         const today = new Date();
         today.setHours(0);
@@ -172,17 +208,10 @@ const Calendar = props => {
         dispatch({
             type: 'setPartial',
             payload: {
-                // calendarCurrentView: initialProps.current.initialView,
                 calendarDate: today,
             },
         });
-        if (typeof onChange === 'function') {
-            onChange(today);
-        }
-        if (typeof onDateSelect === 'function' && !selectMultiple) {
-            onDateSelect([today]);
-        }
-    }, [onChange, onDateSelect, selectMultiple]);
+    }, []);
     return (react_1.default.createElement(CalendarPaper_1.default, null,
         react_1.default.createElement(CalendarHeader_1.default, null,
             typeof heading !== 'undefined' && react_1.default.createElement(CalendarHeading_1.default, null, heading),
@@ -194,12 +223,12 @@ const Calendar = props => {
                 react_1.default.createElement(CalendarMonthControl_1.default, { displayIcon: "next", onClick: handleChangeMonthClick('next'), title: nextMonthButtonTooltip, disabled: calendarCurrentView !== 'days' }))),
         react_1.default.createElement(CalendarWeekDaysBar_1.default, { locale: locale, week: getWeeks(calendarDate)[0], format: weekDayLabelFormat || 'short' }),
         react_1.default.createElement(CalendarBody_1.default, null,
-            calendarCurrentView === 'years' && (react_1.default.createElement(CalendarYearsSelector_1.default, null, getYearsRange(minDate, maxDate).map(year => (react_1.default.createElement(CalendarYearCell_1.default, { key: year, accentColor: accentColor, isSelected: year === calendarDate.getFullYear(), onClick: handleYearSelected(year) }, getYearLabel(new Date(year, calendarDate.getMonth(), calendarDate.getDate(), 0, 0, 0, 0))))))),
-            calendarCurrentView === 'monthes' && (react_1.default.createElement(CalendarMonthesSelector_1.default, null, getMonthesRange(minDate, maxDate).map(monthIndex => (react_1.default.createElement(CalendarMonthCell_1.default, { key: monthIndex, accentColor: accentColor, isSelected: monthIndex === calendarDate.getMonth(), onClick: handleMonthSelected(monthIndex) }, getMonthLabel(new Date(calendarDate.getFullYear(), monthIndex, 1, 0, 0, 0, 0))))))),
+            calendarCurrentView === 'years' && (react_1.default.createElement(CalendarYearsSelector_1.default, null, getYearsRange(minDate, maxDate).map(year => (react_1.default.createElement(CalendarYearCell_1.default, { key: year, accentColor: accentColor, isSelected: year === calendarValue.getFullYear(), onClick: handleYearSelected(year) }, getYearLabel(new Date(year, calendarDate.getMonth(), calendarDate.getDate(), 0, 0, 0, 0))))))),
+            calendarCurrentView === 'monthes' && (react_1.default.createElement(CalendarMonthesSelector_1.default, null, getMonthesRange(minDate, maxDate).map(monthIndex => (react_1.default.createElement(CalendarMonthCell_1.default, { key: monthIndex, accentColor: accentColor, isSelected: monthIndex === calendarValue.getMonth(), onClick: handleMonthSelected(monthIndex) }, getMonthLabel(new Date(calendarDate.getFullYear(), monthIndex, 1, 0, 0, 0, 0))))))),
             calendarCurrentView === 'days' && (react_1.default.createElement(CalendarDateContainer_1.default, null, getWeeks(calendarDate).map(week => (react_1.default.createElement(CalendarWeekRow_1.default, { key: week.weekNumber.toString() }, week.days.map(day => {
                 if (day.date.getMonth() === calendarDate.getMonth()) {
                     const badge = badges.find(b => isSameDay(b.date, day.date));
-                    return (react_1.default.createElement(CalendarCell_1.default, { key: day.date.getTime(), isToday: markToday && day.isToday, isDisabled: day.isDisabled, accentColor: accentColor, isSelected: selected.find(s => isSameDay(s, day.date)) !== undefined, onClick: handleCellDateClick(day.date) },
+                    return (react_1.default.createElement(CalendarCell_1.default, { key: day.date.getTime(), isToday: markToday && day.isToday, isDisabled: day.isDisabled, accentColor: accentColor, isSelected: isSameDay(calendarValue, day.date), onClick: handleCellDateClick(day.date) },
                         getDayLabel(day.date),
                         typeof badge !== 'undefined' && (react_1.default.createElement(CalendarDayBadge_1.default, { badgeContent: badge.badgeContent, isToday: day.isToday, accentColor: badge.accentColor }))));
                 }

package/Calendar/use-calendar.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCalendar = void 0;
 const react_1 = __importDefault(require("react"));
+const WHITESPACE = '\u{0020}';
 const useCalendar = (props) => {
     const { minDate, maxDate, weekStartDay, displayLeadingZero, locale } = props;
     const isSameDay = react_1.default.useCallback((a, b) => a.getFullYear() === b.getFullYear() &&
@@ -46,18 +47,18 @@ const useCalendar = (props) => {
         return numStr.substring(numStr.length - 2);
     }, [displayLeadingZero]);
     const getMonthLabel = react_1.default.useCallback((dateValue) => {
-        const intl = new Intl.DateTimeFormat(locale, {
-            month: 'long',
-        });
-        const title = intl.format(dateValue);
+        const title = typeof Intl !== 'undefined'
+            ? new Intl.DateTimeFormat(locale, {
+                month: 'long',
+            }).format(dateValue)
+            : WHITESPACE;
         return title.charAt(0).toUpperCase() + title.slice(1);
     }, [locale]);
-    const getYearLabel = react_1.default.useCallback((dateValue) => {
-        const intl = new Intl.DateTimeFormat(locale, {
+    const getYearLabel = react_1.default.useCallback((dateValue) => typeof Intl !== 'undefined'
+        ? new Intl.DateTimeFormat(locale, {
             year: 'numeric',
-        });
-        return intl.format(dateValue);
-    }, [locale]);
+        }).format(dateValue)
+        : WHITESPACE, [locale]);
     const getYearsRange = react_1.default.useCallback((minDate, maxDate) => {
         const y = [];
         for (let year = minDate.getFullYear(); year >= minDate.getFullYear() && year <= maxDate.getFullYear(); year++) {

package/DatePicker/DatePickerIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default _default;

package/DatePicker/DatePickerIcon.js

@@ -0,0 +1,9 @@
+"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 DatePickerIcon = (props, ref) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "1em", height: "1em", viewBox: "0 0 512 512" }, props, { ref: ref }),
+    react_1.default.createElement("path", { d: "m128 32a16 16 0 0 0-16 16v16h-16c-35.179 0-64 28.821-64 64v288c0 35.179 28.821 64 64 64h320c35.179 0 64-28.821 64-64v-288c0-35.179-28.821-64-64-64h-16v-16a16 16 0 0 0-16-16 16 16 0 0 0-16 16v16h-224v-16a16 16 0 0 0-16-16zm-32 64h320c18.005 0 32 13.995 32 32v16h-384v-16c0-18.005 13.995-32 32-32zm-32 80h384v240c0 18.005-13.995 32-32 32h-320c-18.005 0-32-13.995-32-32v-240zm232 32a24 24 0 0 0-24 24 24 24 0 0 0 24 24 24 24 0 0 0 24-24 24 24 0 0 0-24-24zm80 0a24 24 0 0 0-24 24 24 24 0 0 0 24 24 24 24 0 0 0 24-24 24 24 0 0 0-24-24zm-240 80a24 24 0 0 0-24 24 24 24 0 0 0 24 24 24 24 0 0 0 24-24 24 24 0 0 0-24-24zm80 0a24 24 0 0 0-24 24 24 24 0 0 0 24 24 24 24 0 0 0 24-24 24 24 0 0 0-24-24zm80 0a24 24 0 0 0-24 24 24 24 0 0 0 24 24 24 24 0 0 0 24-24 24 24 0 0 0-24-24zm80 0a24 24 0 0 0-24 24 24 24 0 0 0 24 24 24 24 0 0 0 24-24 24 24 0 0 0-24-24zm-240 80a24 24 0 0 0-24 24 24 24 0 0 0 24 24 24 24 0 0 0 24-24 24 24 0 0 0-24-24zm80 0a24 24 0 0 0-24 24 24 24 0 0 0 24 24 24 24 0 0 0 24-24 24 24 0 0 0-24-24zm80 0a24 24 0 0 0-24 24 24 24 0 0 0 24 24 24 24 0 0 0 24-24 24 24 0 0 0-24-24z", fill: "currentColor" })));
+exports.default = react_1.default.forwardRef(DatePickerIcon);

package/DatePicker/index.d.ts

@@ -1,3 +1,29 @@
 import React from 'react';
-declare const DatePicker: React.FC;
+import { CalendarProps } from '../Calendar';
+import type { TextFieldProps } from '../TextField';
+export type DatePickerProps = Omit<TextFieldProps, 'value' | 'onChange'> & Omit<CalendarProps, 'defaultValue' | 'value' | 'onChange'> & {
+    /**
+     * Current date
+     */
+    readonly value: Date | null;
+    /**
+     * Will be invoked when date would be changed
+     */
+    readonly onChange: (date: Date) => 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`
+     */
+    readonly template: string;
+    /**
+     * Tooltip text for a calendar button
+     */
+    readonly calendarButtonTooltip?: string;
+    /**
+     * Calendar properties
+     */
+    readonly calendarProps?: Omit<CalendarProps, 'value' | 'defaultValue' | 'onChange'>;
+};
+declare const DatePicker: React.FC<DatePickerProps>;
 export default DatePicker;

package/DatePicker/index.js

@@ -1,8 +1,74 @@
 "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 DatePicker = () => react_1.default.createElement(react_1.default.Fragment, null, "Date picker");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const Calendar_1 = __importDefault(require("../Calendar"));
+const Button_1 = __importDefault(require("../Button"));
+const Popper_1 = __importDefault(require("../Popper"));
+const ClickOutside_1 = __importDefault(require("../ClickOutside"));
+const MaskedField_1 = __importDefault(require("../MaskedField"));
+const DatePickerIcon_1 = __importDefault(require("./DatePickerIcon"));
+const useDatePickerFormat_1 = __importDefault(require("./useDatePickerFormat"));
+const StyledMaskedField = (0, styled_1.default)(MaskedField_1.default) `
+  ${({ readOnly, disabled }) => readOnly &&
+    !disabled &&
+    (0, react_2.css) `
+      & input {
+        cursor: pointer;
+      }
+    `}
+`;
+const DatePicker = props => {
+    const { value, template, onChange, calendarProps, calendarButtonTooltip, readOnly, disabled } = props, restProps = __rest(props, ["value", "template", "onChange", "calendarProps", "calendarButtonTooltip", "readOnly", "disabled"]);
+    const [currentValue, setCurrentValue] = react_1.default.useState(value);
+    const valueRef = react_1.default.useRef(value);
+    const [textFieldRef, setTextFieldRef] = react_1.default.useState(null);
+    const [isOpen, setOpenSate] = react_1.default.useState(false);
+    const { getMaskByTemplate, formatInputByTemplate, parseInputByTemplate } = (0, useDatePickerFormat_1.default)();
+    react_1.default.useEffect(() => {
+        const a = value || new Date();
+        const b = valueRef.current || new Date();
+        if (a.getFullYear() !== b.getFullYear() ||
+            a.getMonth() !== b.getMonth() ||
+            a.getDate() !== b.getDate()) {
+            valueRef.current = value;
+            setCurrentValue(value);
+        }
+    }, [value]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StyledMaskedField, Object.assign({ onClick: () => {
+                if (readOnly) {
+                    setOpenSate(!isOpen);
+                }
+            }, 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)) }, restProps, { value: currentValue ? formatInputByTemplate(currentValue, template) : '', onChange: ({ isValid, text }) => {
+                if (isValid) {
+                    const parsedDate = parseInputByTemplate(text, template);
+                    if (parsedDate instanceof Date && !isNaN(parsedDate.getTime())) {
+                        onChange(parsedDate);
+                    }
+                }
+            } })),
+        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, Object.assign({}, calendarProps, { value: currentValue || new Date(), onChange: date => {
+                        onChange(date);
+                        setOpenSate(false);
+                    } }))))));
+};
 exports.default = DatePicker;

package/DatePicker/useDatePickerFormat.d.ts

@@ -0,0 +1,9 @@
+export declare const useDatePickerFormat: () => {
+    templateValidChars: string[];
+    isValidTemplate: (template: string) => boolean;
+    validateTemplate: (template: string) => void;
+    getMaskByTemplate: (template: string) => (string | RegExp)[];
+    parseInputByTemplate: (input: string, template: string) => Date | null;
+    formatInputByTemplate: (date: Date, template: string) => string;
+};
+export default useDatePickerFormat;

package/DatePicker/useDatePickerFormat.js

@@ -0,0 +1,111 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDatePickerFormat = void 0;
+const react_1 = __importDefault(require("react"));
+const useDatePickerFormat = () => {
+    const templateValidChars = react_1.default.useMemo(() => ['y', 'Y', 'yy', 'yyyy', 'd', 'dd', 'D', 'm', 'mm', 'M'], []);
+    const isValidTemplate = react_1.default.useCallback((template) => {
+        const matches = template.match(/[yYmMdD]+/g);
+        if (!matches) {
+            return false;
+        }
+        return matches.every(char => templateValidChars.includes(char));
+    }, [templateValidChars]);
+    const validateTemplate = react_1.default.useCallback((template) => {
+        if (!isValidTemplate(template)) {
+            throw new Error(`The template «${template}» is not valid. Check the posibility chars: [${templateValidChars.join(', ')}]`);
+        }
+    }, [isValidTemplate, templateValidChars]);
+    /**
+     * Generate the array of RegExp by template string
+     */
+    const getMaskByTemplate = react_1.default.useCallback((template) => {
+        validateTemplate(template);
+        return template.split('').map(char => {
+            if (['m', 'M', 'd', 'D', 'y', 'Y'].includes(char)) {
+                return /\d/;
+            }
+            return char;
+        });
+    }, [validateTemplate]);
+    /**
+     * Parse input string ny template
+     * @returns Date
+     */
+    const parseInputByTemplate = react_1.default.useCallback((input, template) => {
+        validateTemplate(template);
+        if (input.length !== template.length) {
+            return null;
+        }
+        const data = {
+            days: [],
+            monthes: [],
+            years: [],
+        };
+        template.split('').forEach((char, charIndex) => {
+            switch (char) {
+                case 'y':
+                    data.years.push(input[charIndex]);
+                    break;
+                case 'm':
+                    data.monthes.push(input[charIndex]);
+                    break;
+                case 'd':
+                    data.days.push(input[charIndex]);
+                    break;
+                default:
+                    // do nothing
+                    break;
+            }
+        });
+        return new Date(parseInt(data.years.join(''), 10), parseInt(data.monthes.join(''), 10) - 1, // Fucking month indexes
+        parseInt(data.days.join(''), 10));
+    }, [validateTemplate]);
+    /**
+     * Format date to string by template
+     */
+    const formatInputByTemplate = react_1.default.useCallback((date, template) => {
+        validateTemplate(template);
+        return (template
+            .replace(/(d{1,2}|D{1,2})/, entries => {
+            const day = `${date.getDate()}`;
+            if (['DD', 'D', 'dd'].includes(entries)) {
+                const str = `0${day}`;
+                return str.substring(str.length - entries.length);
+            }
+            return day;
+        })
+            // mm or M - month with leading zero
+            // m - month without leading zero
+            .replace(/(m{1,2}|M{1,2})/, entries => {
+            const month = `${date.getMonth() + 1}`;
+            if (['MM', 'M', 'mm'].includes(entries)) {
+                const str = `0${month}`;
+                return str.substring(str.length - entries.length);
+            }
+            return month;
+        })
+            // yyyy or Y - full year
+            // yy or y - last two digits
+            .replace(/(y{4}|y{1,2}|Y{1,2})/, entries => {
+            const str = `${date.getFullYear()}`;
+            if (['YY', 'Y'].includes(entries)) {
+                return str;
+            }
+            return str.substring(str.length - entries.length);
+        }));
+    }, [validateTemplate]);
+    return {
+        templateValidChars,
+        isValidTemplate,
+        validateTemplate,
+        getMaskByTemplate,
+        parseInputByTemplate,
+        formatInputByTemplate,
+    };
+};
+exports.useDatePickerFormat = useDatePickerFormat;
+exports.default = exports.useDatePickerFormat;

package/MaskedField/index.d.ts

@@ -2,11 +2,6 @@ import React from 'react';
 import { Mask, FormatParsedPayload, ParseInput } from './useMasked';
 import { TextFieldProps } from '../TextField';
 export type GetMask = (input: string) => Mask;
-export interface Payload {
-    readonly text: string;
-    readonly caret: number;
-    readonly isValid: boolean;
-}
 export interface MaskedFieldProps extends Omit<TextFieldProps, 'value' | 'onChange'> {
     /**
      * Field value

package/MaskedField/index.js

@@ -19,6 +19,7 @@ const useMasked_1 = require("./useMasked");
 const TextField_1 = __importDefault(require("../TextField"));
 const MaskedField = (props, ref) => {
     const { value: propValue, mask, parseInput, onChange, transform } = props, nativeProps = __rest(props, ["value", "mask", "parseInput", "onChange", "transform"]);
+    const propValueRef = react_1.default.useRef(propValue);
     const textInputRef = react_1.default.useRef(null);
     const decoratorsErrorDisplayed = react_1.default.useRef(false);
     const masked = (0, useMasked_1.useMasked)();
@@ -34,13 +35,20 @@ const MaskedField = (props, ref) => {
         }
         return currentMask;
     }, [mask, parseInput]);
-    const [inputValue, setInputValue] = react_1.default.useState(() => {
+    const getInputValue = react_1.default.useCallback((v) => {
         var _a;
-        const mask = getMask(propValue || '');
-        const parsed = parseInputFn(propValue || '', mask, ((_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) || 0);
+        const mask = getMask(v || '');
+        const parsed = parseInputFn(v || '', mask, ((_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) || 0);
         const { text } = masked.formatParsedInput(parsed.text, mask, parsed.caret);
         return text;
-    });
+    }, [getMask, masked, parseInputFn]);
+    const [inputValue, setInputValue] = react_1.default.useState(getInputValue(propValue || ''));
+    react_1.default.useEffect(() => {
+        if (propValueRef.current !== propValue) {
+            propValueRef.current = propValue;
+            setInputValue(getInputValue(propValue || ''));
+        }
+    }, [getInputValue, getMask, parseInputFn, masked, propValue]);
     const handleOnChange = react_1.default.useCallback(event => {
         var _a;
         const mask = getMask(event.currentTarget.value);

package/Selectbox/IconShow.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default _default;

package/Selectbox/IconShow.js

@@ -0,0 +1,9 @@
+"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 IconShow = (props, ref) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "1em", height: "1em", viewBox: "0 0 512 512" }, props, { ref: ref }),
+    react_1.default.createElement("path", { d: "m105.79 160.82a24 24 0 0 0-10.76 6.2109 24 24 0 0 0 0 33.941l144 144a24.002 24.002 0 0 0 33.941 0l144-144a24 24 0 0 0 0-33.941 24 24 0 0 0-33.941 0l-127.03 127.03-127.03-127.03a24 24 0 0 0-23.182-6.2109z", fill: "currentColor" })));
+exports.default = react_1.default.forwardRef(IconShow);

package/Selectbox/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { AutocompleteProps, AutocompleteRef } from '../Autocomplete';
+import SelectboxItem from '../Menu/MenuItem';
+export * from '../Autocomplete/AutocompleteContainer';
+export { SelectboxItem };
+declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: AutocompleteProps<T, Multiple> & {
+    ref?: React.Ref<AutocompleteRef> | undefined;
+}) => JSX.Element;
+export default _default;

package/Selectbox/index.js

@@ -0,0 +1,69 @@
+"use strict";
+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 __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 });
+exports.SelectboxItem = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const Button_1 = __importDefault(require("../Button"));
+const IconShow_1 = __importDefault(require("./IconShow"));
+const Autocomplete_1 = __importDefault(require("../Autocomplete"));
+const MenuItem_1 = __importDefault(require("../Menu/MenuItem"));
+exports.SelectboxItem = MenuItem_1.default;
+const TextField_1 = __importDefault(require("../TextField"));
+__exportStar(require("../Autocomplete/AutocompleteContainer"), exports);
+const StyledTextField = (0, styled_1.default)(TextField_1.default) `
+  ${({ readOnly, disabled }) => readOnly &&
+    !disabled &&
+    (0, react_2.css) `
+      & input {
+        cursor: pointer;
+      }
+    `}
+`;
+const Selectbox = react_1.default.forwardRef((props, ref) => {
+    const { children, onRequestOpen, onRequestClose, isOpen } = props, restProps = __rest(props, ["children", "onRequestOpen", "onRequestClose", "isOpen"]);
+    const toggle = react_1.default.useCallback((e) => {
+        if (isOpen) {
+            onRequestClose && onRequestClose(e);
+        }
+        else {
+            onRequestOpen && onRequestOpen(e);
+        }
+    }, [onRequestOpen, onRequestClose, isOpen]);
+    return (react_1.default.createElement(Autocomplete_1.default, Object.assign({ clearable: false, endIcon: react_1.default.createElement(Button_1.default, { onClick: toggle, iconOnly: true },
+            react_1.default.createElement(IconShow_1.default, null)), overrides: {
+            TextField: react_1.default.forwardRef(function TextFieldOverride(p, r) {
+                return react_1.default.createElement(StyledTextField, Object.assign({ onClick: toggle, readOnly: true }, p, { ref: r }));
+            }),
+        } }, restProps, { ref: ref, onRequestOpen: onRequestOpen, onRequestClose: onRequestClose, isOpen: isOpen }), children));
+});
+Selectbox.displayName = 'Selectbox';
+exports.default = Selectbox;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.0-rc.63",
+  "version": "0.1.0-rc.64",
   "description": "UI Kit",
   "repository": {
     "type": "git",