@via-profit/ui-kit 0.1.0-rc.96 → 0.1.1

package/Autocomplete/AutocompleteContainer.js

@@ -173,9 +173,13 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
     react_1.default.useEffect(() => {
         if (JSON.stringify(items) !== JSON.stringify(itemsRef.current)) {
             itemsRef.current = items;
-            dispatch((0, context_1.actionSetPartial)({ filteredItems: applyFilterForItems(inputValue, items) }));
+            const newFilteredItems = applyFilterForItems(inputValue, items);
+            dispatch((0, context_1.actionSetPartial)({ filteredItems: newFilteredItems }));
+            if (!newFilteredItems.length) {
+                onRequestClose();
+            }
         }
-    }, [items, inputValue, applyFilterForItems, dispatch]);
+    }, [items, inputValue, applyFilterForItems, dispatch, onRequestClose]);
     react_1.default.useEffect(() => {
         const mouseDownEvent = (event) => {
             var _a;
@@ -194,8 +198,11 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
                     const newInputValue = currentValue === null
                         ? ''
                         : selectedItemToString(currentValue);
+                    const newFilteredItems = multiple
+                        ? filteredItems
+                        : applyFilterForItems(newInputValue, items);
                     dispatch((0, context_1.actionSetPartial)({
-                        filteredItems: multiple ? filteredItems : applyFilterForItems(newInputValue, items),
+                        filteredItems: newFilteredItems,
                         inputValue: newInputValue,
                     }));
                 }
@@ -251,8 +258,9 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
                 isFocusedRef.current = true;
                 if (openOnFocus &&
                     !currentOpen &&
-                    filteredItems.length > 0 &&
-                    inputValue.trim() !== '') {
+                    filteredItems.length > 0
+                // && inputValue.trim() !== ''
+                ) {
                     onRequestOpen(event);
                 }
                 if (!openOnFocus && !currentOpen && inputValue !== '' && filteredItems.length > 0) {
@@ -267,8 +275,9 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
                 }
                 if (isFocusedRef.current &&
                     !currentOpen &&
-                    filteredItems.length > 0 &&
-                    inputValue.trim() !== '') {
+                    filteredItems.length > 0
+                // && inputValue.trim() !== ''
+                ) {
                     onRequestOpen(event);
                 }
             }, onChange: event => {
@@ -284,14 +293,22 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
                     onRequestOpen(event);
                 }
                 // console.debug('set filteredItems');
+                const newFilteredItems = applyFilterForItems(event.currentTarget.value, items);
+                if (newFilteredItems.length === 0 && currentOpen) {
+                    onRequestClose();
+                }
+                if (newFilteredItems.length > 0 && !currentOpen) {
+                    onRequestOpen(event);
+                }
                 dispatch((0, context_1.actionSetPartial)({
-                    filteredItems: applyFilterForItems(event.currentTarget.value, items),
+                    filteredItems: newFilteredItems,
                     inputValue: event.currentTarget.value,
                 }));
             } }))), [
             overridesMap,
             placeholder,
             label,
+            onRequestClose,
             error,
             requiredAsterisk,
             errorText,

package/Avatar/index.js

@@ -25,7 +25,7 @@ const StyledAvatarBase = (0, styled_1.default)(AvatarBase_1.default) `
   background-color: ${({ $background }) => $background.toString()};
   ${({ $background }) => {
     switch (true) {
-        case $background.luminance() > 0.49:
+        case $background.getLuminance() > 0.49:
             return $background.darken(40).alpha(0.8).toString();
         default:
             return $background.darken(20).alpha(0.5).toString();
@@ -95,7 +95,7 @@ const Avatar = (props, ref) => {
                 }
                 return {
                     $background,
-                    $color: $background.contrast(theme.color.textPrimary) > 5
+                    $color: $background.getContrast(theme.color.textPrimary) > 5
                         ? theme.color.textPrimary
                         : theme.color.surface,
                 };

package/Badge/BadgeDeleteButton.js

@@ -73,7 +73,7 @@ const BadgeDeleteButton = (props, ref) => {
                 };
             case variant === 'standard' && typeof color === 'string':
                 return {
-                    $color: new Color_1.default(color).contrast(theme.color.textPrimary) > 5
+                    $color: new Color_1.default(color).getContrast(theme.color.textPrimary) > 5
                         ? theme.color.textPrimary
                         : theme.color.surface,
                     $background: new Color_1.default(color),

package/Badge/BadgeStandard.js

@@ -27,7 +27,7 @@ const StyledStandardBadge = (0, styled_1.default)(BadgeBase_1.default) `
   background-color: ${({ $background }) => $background.toString()};
   ${({ $background }) => {
     switch (true) {
-        case $background.luminance() > 0.49:
+        case $background.getLuminance() > 0.49:
             return $background.darken(40).alpha(0.8).toString();
         default:
             return $background.darken(20).alpha(0.5).toString();
@@ -81,7 +81,7 @@ const BadgeStandard = (props, ref) => {
                 }
                 return {
                     $background,
-                    $color: $background.contrast(theme.color.textPrimary) > 5
+                    $color: $background.getContrast(theme.color.textPrimary) > 5
                         ? theme.color.textPrimary
                         : theme.color.surface,
                 };

package/Button/ButtonStandard.js

@@ -38,7 +38,7 @@ const StyledStandardButton = (0, styled_1.default)(ButtonBase_1.default) `
 }};
   ${({ $background }) => {
     switch (true) {
-        case $background.luminance() > 0.49:
+        case $background.getLuminance() > 0.49:
             return $background.darken(40).alpha(0.8).toString();
         default:
             return $background.darken(20).alpha(0.5).toString();
@@ -94,7 +94,7 @@ const ButtonStandard = (props, ref) => {
                 }
                 return {
                     $background,
-                    $color: $background.contrast(theme.color.textPrimary.rgbString()) > 5
+                    $color: ($background === null || $background === void 0 ? void 0 : $background.getContrast(theme.color.textPrimary.rgbString())) > 5
                         ? theme.color.textPrimary
                         : theme.color.surface,
                 };

package/Calendar/CalendarCell.d.ts

@@ -17,6 +17,7 @@ export interface CalendarCellProps extends React.ButtonHTMLAttributes<HTMLButton
      * Possibility variants: `primary` `secondary` or custom color string like hex or rgb format
      */
     readonly accentColor?: 'primary' | 'secondary' | string;
+    readonly fill?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<CalendarCellProps & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Calendar/CalendarCell.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Button_1 = __importDefault(require("../Button"));
+const react_2 = require("@emotion/react");
 const Btn = (0, styled_1.default)(Button_1.default) `
   display: flex;
   align-items: center;
@@ -28,10 +29,14 @@ const Btn = (0, styled_1.default)(Button_1.default) `
   min-width: 0;
   outline: none;
   position: relative;
-  border-radius: ${({ theme }) => theme.shape.radiusFactor * 3}em;
+  border-radius: ${({ theme, $fill }) => ($fill ? 0 : theme.shape.radiusFactor * 3)}em;
+  ${({ $fill, theme }) => $fill &&
+    (0, react_2.css) `
+      background-color: ${theme.color.accentPrimary.alpha(0.2).toString()};
+    `};
 `;
 const CalendarCell = (props, ref) => {
-    const { isToday, children, isSelected, isDisabled, accentColor } = props, restProps = __rest(props, ["isToday", "children", "isSelected", "isDisabled", "accentColor"]);
-    return (react_1.default.createElement(Btn, Object.assign({ iconOnly: true, type: "button", variant: isSelected ? 'standard' : isToday ? 'outlined' : 'plain', color: isSelected || isToday ? accentColor : 'default', tabIndex: isDisabled ? -1 : restProps.tabIndex, disabled: isDisabled }, restProps, { ref: ref }), children));
+    const { isToday, children, isSelected, isDisabled, accentColor, fill } = props, restProps = __rest(props, ["isToday", "children", "isSelected", "isDisabled", "accentColor", "fill"]);
+    return (react_1.default.createElement(Btn, Object.assign({ iconOnly: true, type: "button", "$fill": fill, variant: isSelected ? 'standard' : isToday ? 'outlined' : 'plain', color: isSelected || isToday ? accentColor : 'default', tabIndex: isDisabled ? -1 : restProps.tabIndex, disabled: isDisabled }, restProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(CalendarCell);

package/Calendar/CalendarDayBadge.js

@@ -62,7 +62,7 @@ const CalendarDayBadge = (props, ref) => {
         const clr = new Color_1.default(accentColor);
         return {
             $backgroundColor: accentColor,
-            $color: clr.contrast(accentColor) > 5
+            $color: clr.getContrast(accentColor) > 5
                 ? theme.color.textPrimary.toString()
                 : theme.color.surface.toString(),
         };

package/Calendar/CalendarMonthsSelector.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type CalendarMonthsSelectorProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<CalendarMonthsSelectorProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Calendar/{CalendarMonthesSelector.js → CalendarMonthsSelector.js}

@@ -23,8 +23,8 @@ const SelectorContainer = styled_1.default.div `
   overflow-y: auto;
   padding: 0.8em;
 `;
-const CalendarMonthesSelector = (props, ref) => {
+const CalendarMonthsSelector = (props, ref) => {
     const { children } = props, restProps = __rest(props, ["children"]);
     return (react_1.default.createElement(SelectorContainer, Object.assign({}, restProps, { ref: ref }), children));
 };
-exports.default = react_1.default.forwardRef(CalendarMonthesSelector);
+exports.default = react_1.default.forwardRef(CalendarMonthsSelector);

package/Calendar/index.d.ts

@@ -8,7 +8,7 @@ import { CalendarWeekRowProps } from './CalendarWeekRow';
 import { CalendarDateContainerProps } from './CalendarDateContainer';
 import { CalendarToolbarProps } from './CalendarToolbar';
 import { CalendarYearsSelectorProps } from './CalendarYearsSelector';
-import { CalendarMonthesSelectorProps } from './CalendarMonthesSelector';
+import { CalendarMonthsSelectorProps } from './CalendarMonthsSelector';
 import { CalendarMonthCellProps } from './CalendarMonthCell';
 import { CalendarYearCellProps } from './CalendarYearCell';
 import { CalendarDayBadgeProps } from './CalendarDayBadge';
@@ -19,24 +19,25 @@ import { CalendarSubheadingProps } from './CalendarSubheading';
 import { CalendarIconPrevProps } from './CalendarIconPrev';
 import { CalendarIconNextProps } from './IconChevronRight';
 import { CalendarWeekDaysBarProps, WeekNameLabelFormat } from './CalendarWeekDaysBar';
-import { WeekDayName } from './use-calendar';
+import { CalendarValue, WeekDayName } from './use-calendar';
 import { CalendarView as CalendarViewName } from './reducer';
 export * from './use-calendar';
 export * from './CalendarWeekDaysBar';
 export type CalendarView = CalendarViewName;
-export type CalendarProps = {
+export type CalendarProps<Range extends boolean | undefined = undefined> = {
+    readonly range?: Range;
     /**
      * Selected date
      */
-    readonly value?: Date;
+    readonly value?: CalendarValue<Range>;
     /**
-     * selected value if your conponent should not be controlled
+     * selected value if your component should not be controlled
      */
-    readonly defaultValue?: Date;
+    readonly defaultValue?: CalendarValue<Range>;
     /**
      * It will be called at the moment of selecting the given
      */
-    readonly onChange: (dates: Date) => void;
+    readonly onChange: (dates: CalendarValue<Range>) => void;
     /**
      * calendar locale\
      * **Default:** `ru-RU`
@@ -168,7 +169,7 @@ export interface CalendarOverrides {
     /**
      * Monthes list element (month view)
      */
-    readonly MonthesSelector?: React.ForwardRefExoticComponent<CalendarMonthesSelectorProps & React.RefAttributes<HTMLDivElement>>;
+    readonly MonthsSelector?: React.ForwardRefExoticComponent<CalendarMonthsSelectorProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Month cell element in monthes list
      */
@@ -215,5 +216,5 @@ export type CalendarBadge = {
     readonly badgeContent: React.ReactNode;
     readonly accentColor?: 'primary' | 'secondary' | string;
 };
-declare const Calendar: React.FC<CalendarProps>;
+declare const Calendar: <Range_1 extends boolean | undefined = undefined>(props: CalendarProps<Range_1>) => React.ReactNode;
 export default Calendar;

package/Calendar/index.js

@@ -27,7 +27,7 @@ const CalendarWeekRow_1 = __importDefault(require("./CalendarWeekRow"));
 const CalendarDateContainer_1 = __importDefault(require("./CalendarDateContainer"));
 const CalendarToolbar_1 = __importDefault(require("./CalendarToolbar"));
 const CalendarYearsSelector_1 = __importDefault(require("./CalendarYearsSelector"));
-const CalendarMonthesSelector_1 = __importDefault(require("./CalendarMonthesSelector"));
+const CalendarMonthsSelector_1 = __importDefault(require("./CalendarMonthsSelector"));
 const CalendarMonthCell_1 = __importDefault(require("./CalendarMonthCell"));
 const CalendarYearCell_1 = __importDefault(require("./CalendarYearCell"));
 const CalendarDayBadge_1 = __importDefault(require("./CalendarDayBadge"));
@@ -42,8 +42,8 @@ const use_calendar_1 = require("./use-calendar");
 const reducer_1 = require("./reducer");
 __exportStar(require("./use-calendar"), exports);
 __exportStar(require("./CalendarWeekDaysBar"), exports);
-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, onChange, badges = [], value, defaultValue, markToday, weekDayLabelFormat = 'short', accentColor = 'primary', prevMonthButtonTooltip, nextMonthButtonTooltip, changeMonthButtonTooltip, changeYearButtonTooltip, initialView = reducer_1.defaultState.calendarCurrentView, resetButtonLabel, toodayButtonLabel, heading, subheading, footer, overrides, } = props;
+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, onChange, badges = [], value, defaultValue, markToday, weekDayLabelFormat = 'short', accentColor = 'primary', prevMonthButtonTooltip, nextMonthButtonTooltip, changeMonthButtonTooltip, changeYearButtonTooltip, initialView = (0, reducer_1.createDefaultState)(false).calendarCurrentView, resetButtonLabel, toodayButtonLabel, heading, subheading, footer, overrides, range = false, } = props;
     if (typeof value !== 'undefined' && typeof onChange === 'undefined') {
         throw new Error('You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange`.');
     }
@@ -57,7 +57,7 @@ const Calendar = props => {
         DateContainer: (overrides === null || overrides === void 0 ? void 0 : overrides.DateContainer) || CalendarDateContainer_1.default,
         Toolbar: (overrides === null || overrides === void 0 ? void 0 : overrides.Toolbar) || CalendarToolbar_1.default,
         YearsSelector: (overrides === null || overrides === void 0 ? void 0 : overrides.YearsSelector) || CalendarYearsSelector_1.default,
-        MonthesSelector: (overrides === null || overrides === void 0 ? void 0 : overrides.MonthesSelector) || CalendarMonthesSelector_1.default,
+        MonthsSelector: (overrides === null || overrides === void 0 ? void 0 : overrides.MonthsSelector) || CalendarMonthsSelector_1.default,
         MonthCell: (overrides === null || overrides === void 0 ? void 0 : overrides.MonthCell) || CalendarMonthCell_1.default,
         YearCell: (overrides === null || overrides === void 0 ? void 0 : overrides.YearCell) || CalendarYearCell_1.default,
         DayBadge: (overrides === null || overrides === void 0 ? void 0 : overrides.DayBadge) || CalendarDayBadge_1.default,
@@ -79,8 +79,9 @@ const Calendar = props => {
         badges,
         initialView,
     });
-    const [state, dispatch] = react_1.default.useReducer(reducer_1.reducer, Object.assign(Object.assign({}, reducer_1.defaultState), { calendarValue: realValue, calendarDate: realValue, calendarCurrentView: initialView }));
-    const { isSameDay, getWeeks, getDayLabel, getMonthLabel, getYearLabel, getYearsRange, getMonthesRange, } = (0, use_calendar_1.useCalendar)({
+    const initialState = Object.assign(Object.assign({}, (0, reducer_1.createDefaultState)(range)), { calendarValue: realValue, calendarDate: Array.isArray(realValue) ? realValue[0] : realValue, calendarCurrentView: initialView });
+    const [state, dispatch] = react_1.default.useReducer(reducer_1.reducer, initialState);
+    const { isSameDay, getWeeks, getDayLabel, getMonthLabel, getYearLabel, getYearsRange, getMonthsRange, } = (0, use_calendar_1.useCalendar)({
         minDate,
         maxDate,
         weekStartDay,
@@ -101,12 +102,12 @@ const Calendar = props => {
      * Date props was changed
      */
     react_1.default.useEffect(() => {
-        if (typeof value !== 'undefined' && !isSameDay(value, calendarValue)) {
+        if (typeof value !== 'undefined') {
             dispatch({
                 type: 'setPartial',
                 payload: {
                     calendarValue: value,
-                    calendarDate: value,
+                    // calendarDate: Array.isArray(value) ? value[0] : value,
                 },
             });
         }
@@ -116,9 +117,41 @@ const Calendar = props => {
      */
     const handleCellDateClick = react_1.default.useCallback((selectedDate) => () => {
         if (typeof onChange === 'function') {
-            onChange(selectedDate);
+            if (range) {
+                const [fromDate, toDate] = calendarValue;
+                dispatch({
+                    type: 'setPartial',
+                    payload: { calendarDate: selectedDate },
+                });
+                if (selectedDate.getTime() >= toDate.getTime()) {
+                    onChange([fromDate, selectedDate]);
+                    return;
+                }
+                if (selectedDate.getTime() < fromDate.getTime()) {
+                    onChange([selectedDate, toDate]);
+                    return;
+                }
+                if (selectedDate.getTime() > fromDate.getTime() &&
+                    selectedDate.getTime() < toDate.getTime()) {
+                    const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
+                    const daysBetweenFromDate = Math.round(Math.abs((fromDate.getTime() - selectedDate.getTime()) / oneDay));
+                    const daysBetweenToDate = Math.round(Math.abs((toDate.getTime() - selectedDate.getTime()) / oneDay));
+                    if (daysBetweenToDate <= daysBetweenFromDate) {
+                        onChange([fromDate, selectedDate]);
+                        return;
+                    }
+                    if (daysBetweenToDate > daysBetweenFromDate) {
+                        onChange([selectedDate, toDate]);
+                        return;
+                    }
+                }
+                throw new Error('Oooops. I don`t know whats is it');
+            }
+            else {
+                onChange(selectedDate);
+            }
         }
-        if (!value) {
+        if (!calendarValue) {
             dispatch({
                 type: 'setPartial',
                 payload: {
@@ -126,7 +159,7 @@ const Calendar = props => {
                 },
             });
         }
-    }, [onChange, value]);
+    }, [onChange, calendarValue, range]);
     /**
      * Handle of click on year item
      */
@@ -212,24 +245,39 @@ const Calendar = props => {
         });
     }, []);
     return (react_1.default.createElement(overridesMap.Paper, null,
+        JSON.stringify(calendarDate),
         react_1.default.createElement(overridesMap.Header, null,
             typeof heading !== 'undefined' && react_1.default.createElement(overridesMap.Heading, null, heading),
             typeof subheading !== 'undefined' && (react_1.default.createElement(overridesMap.Subheading, null, subheading)),
             react_1.default.createElement(overridesMap.Toolbar, null,
                 react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handleChangeMonthClick('prev'), title: prevMonthButtonTooltip, disabled: calendarCurrentView !== 'days' },
                     react_1.default.createElement(overridesMap.IconPrev, null)),
-                react_1.default.createElement(overridesMap.ControlButton, { title: changeMonthButtonTooltip, isActive: calendarCurrentView === 'monthes', disabled: !calendarViewVariants.includes('monthes'), onClick: handleChangeView(calendarCurrentView === 'monthes' ? 'days' : 'monthes') }, getMonthLabel(calendarDate)),
+                react_1.default.createElement(overridesMap.ControlButton, { title: changeMonthButtonTooltip, isActive: calendarCurrentView === 'months', disabled: !calendarViewVariants.includes('months'), onClick: handleChangeView(calendarCurrentView === 'months' ? 'days' : 'months') }, getMonthLabel(calendarDate)),
                 react_1.default.createElement(overridesMap.ControlButton, { isActive: calendarCurrentView === 'years', disabled: !calendarViewVariants.includes('years'), title: changeYearButtonTooltip, onClick: handleChangeView(calendarCurrentView === 'years' ? 'days' : 'years') }, getYearLabel(calendarDate)),
                 react_1.default.createElement(overridesMap.ControlButton, { iconOnly: true, onClick: handleChangeMonthClick('next'), title: nextMonthButtonTooltip, disabled: calendarCurrentView !== 'days' },
                     react_1.default.createElement(overridesMap.IconNext, null)))),
         react_1.default.createElement(overridesMap.WeekDaysBar, { locale: locale, week: getWeeks(calendarDate)[0], format: weekDayLabelFormat || 'short' }),
         react_1.default.createElement(overridesMap.Body, null,
-            calendarCurrentView === 'years' && (react_1.default.createElement(overridesMap.YearsSelector, null, getYearsRange(minDate, maxDate).map(year => (react_1.default.createElement(overridesMap.YearCell, { 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(overridesMap.MonthesSelector, null, getMonthesRange(minDate, maxDate).map(monthIndex => (react_1.default.createElement(overridesMap.MonthCell, { key: monthIndex, accentColor: accentColor, isSelected: monthIndex === calendarValue.getMonth(), onClick: handleMonthSelected(monthIndex) }, getMonthLabel(new Date(calendarDate.getFullYear(), monthIndex, 1, 0, 0, 0, 0))))))),
+            calendarCurrentView === 'years' && (react_1.default.createElement(overridesMap.YearsSelector, null, getYearsRange(minDate, maxDate).map(year => {
+                const a = Array.isArray(calendarValue) ? calendarValue : [calendarValue];
+                const isSelected = a.find(d => d.getFullYear() === year) !== undefined;
+                return (react_1.default.createElement(overridesMap.YearCell, { key: year, accentColor: accentColor, isSelected: isSelected, onClick: handleYearSelected(year) }, getYearLabel(new Date(year, calendarDate.getMonth(), calendarDate.getDate(), 0, 0, 0, 0))));
+            }))),
+            calendarCurrentView === 'months' && (react_1.default.createElement(overridesMap.MonthsSelector, null, getMonthsRange(minDate, maxDate).map(monthIndex => {
+                const a = Array.isArray(calendarValue) ? calendarValue : [calendarValue];
+                const isSelected = a.find(d => d.getMonth() === monthIndex) !== undefined;
+                return (react_1.default.createElement(overridesMap.MonthCell, { key: monthIndex, accentColor: accentColor, isSelected: isSelected, onClick: handleMonthSelected(monthIndex) }, getMonthLabel(new Date(calendarDate.getFullYear(), monthIndex, 1, 0, 0, 0, 0))));
+            }))),
             calendarCurrentView === 'days' && (react_1.default.createElement(overridesMap.DateContainer, null, getWeeks(calendarDate).map(week => (react_1.default.createElement(overridesMap.WeekRow, { 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(overridesMap.Cell, { key: day.date.getTime(), isToday: markToday && day.isToday, isDisabled: day.isDisabled, accentColor: accentColor, isSelected: isSameDay(calendarValue, day.date), onClick: handleCellDateClick(day.date) },
+                    const a = Array.isArray(calendarValue) ? calendarValue : [calendarValue];
+                    const isSelected = isSameDay(a[0], day.date) || isSameDay(a[1], day.date);
+                    const fill = Array.isArray(calendarValue)
+                        ? day.date.getTime() > calendarValue[0].getTime() &&
+                            day.date.getTime() < calendarValue[1].getTime()
+                        : false;
+                    return (react_1.default.createElement(overridesMap.Cell, { key: day.date.getTime(), isToday: markToday && day.isToday, isDisabled: day.isDisabled, accentColor: accentColor, isSelected: isSelected, onClick: handleCellDateClick(day.date), fill: fill },
                         getDayLabel(day.date),
                         typeof badge !== 'undefined' && (react_1.default.createElement(overridesMap.DayBadge, { badgeContent: badge.badgeContent, isToday: day.isToday, accentColor: badge.accentColor }))));
                 }

package/Calendar/reducer.d.ts

@@ -1,14 +1,14 @@
-/// <reference types="react" />
-export type State = {
-    readonly calendarValue: Date;
+import { CalendarValue } from './use-calendar';
+export type State<Range extends boolean | undefined = undefined> = {
     readonly calendarDate: Date;
+    readonly calendarValue: CalendarValue<Range>;
     readonly calendarCurrentView: CalendarView;
     readonly calendarViewVariants: readonly CalendarView[];
 };
-export type CalendarView = 'days' | 'monthes' | 'years';
-export declare const defaultState: State;
-export type Action = {
+export type CalendarView = 'days' | 'months' | 'years';
+export declare const createDefaultState: <Range_1 extends boolean | undefined = undefined>(range?: Range_1 | undefined) => State<Range_1>;
+export type Action<Range extends boolean | undefined = undefined> = {
     readonly type: 'setPartial';
-    readonly payload: Partial<State>;
+    readonly payload: Partial<State<Range>>;
 };
-export declare const reducer: React.Reducer<State, Action>;
+export declare const reducer: <Range_1 extends boolean | undefined = undefined>(state: State<Range_1>, action: Action<Range_1>) => State<Range_1>;

package/Calendar/reducer.js

@@ -1,12 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reducer = exports.defaultState = void 0;
-exports.defaultState = {
-    calendarValue: new Date(),
-    calendarDate: new Date(),
-    calendarCurrentView: 'days',
-    calendarViewVariants: ['years', 'monthes', 'days'],
+exports.reducer = exports.createDefaultState = void 0;
+const createDefaultState = (range) => {
+    const currentDate = new Date();
+    const nextDate = new Date();
+    nextDate.setDate(nextDate.getDate() + 3);
+    return {
+        calendarValue: range
+            ? [currentDate, nextDate]
+            : new Date(),
+        calendarDate: range ? currentDate : new Date(),
+        calendarCurrentView: 'days',
+        calendarViewVariants: ['years', 'months', 'days'],
+    };
 };
+exports.createDefaultState = createDefaultState;
 const reducer = (state, action) => {
     switch (action.type) {
         case 'setPartial':

package/Calendar/use-calendar.d.ts

@@ -1,3 +1,4 @@
+export type CalendarValue<Multiple> = Multiple extends undefined ? Date : [Date, Date];
 export type WeekDayName = 'sunday' | 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday';
 export type Day = {
     readonly date: Date;
@@ -62,7 +63,7 @@ export type UseCalendarPayload = {
     /**
      * Returns range of monthes (array of month indexes) between passed dates
      */
-    getMonthesRange: (minDate: Date, maxDate: Date) => number[];
+    getMonthsRange: (minDate: Date, maxDate: Date) => number[];
 };
 export declare const useCalendar: (props: UseCalendarProps) => UseCalendarPayload;
 export default useCalendar;

package/Calendar/use-calendar.js

@@ -66,7 +66,7 @@ const useCalendar = (props) => {
         }
         return y;
     }, []);
-    const getMonthesRange = react_1.default.useCallback((minDate, maxDate) => {
+    const getMonthsRange = react_1.default.useCallback((minDate, maxDate) => {
         const m = [];
         const y = new Date().getFullYear();
         for (let index = 0; index < 12; index++) {
@@ -201,7 +201,7 @@ const useCalendar = (props) => {
         getMonthLabel,
         getYearLabel,
         getYearsRange,
-        getMonthesRange,
+        getMonthsRange,
     };
 };
 exports.useCalendar = useCalendar;

package/Color/index.d.ts

@@ -50,7 +50,7 @@ declare class Color {
     /**
      * Returns color luminance value
      */
-    luminance(): number;
+    getLuminance(): number;
     /**
      * Returns the contrast level between the\
      * current and transmitted colors
@@ -60,7 +60,7 @@ declare class Color {
      * const { colors } = themes;
      * const contrast = colors
      *   .accentPrimary
-     *   .contrast(color.textPrimary.rgbString());
+     *   .getContrast(color.textPrimary.rgbString());
      *
      * if (contrast > 5) {
      *   return color.textPrimary.toString();
@@ -69,12 +69,13 @@ declare class Color {
      * }
      * ```
      */
-    contrast(rgb2: string | Color): number;
+    getContrast(rgb2: string | Color): number;
     /**
      * Lighten or darknest color to lum steps
      * lum - 0-25
      */
     private shade;
+    luminance(lum: number): this;
     static stringToHashCode(str: string): number;
     /**
      * Convert the integer value to a string color value
@@ -102,7 +103,7 @@ declare class Color {
      */
     rgbString(): string;
     /**
-     * Returns the current color as an hex string
+     * Returns the current color as a hex string
      */
     hexString(): string;
     /**

package/Color/index.js

@@ -75,7 +75,7 @@ class Color {
     /**
      * Returns color luminance value
      */
-    luminance() {
+    getLuminance() {
         const RED = 0.2126;
         const GREEN = 0.7152;
         const BLUE = 0.0722;
@@ -95,7 +95,7 @@ class Color {
      * const { colors } = themes;
      * const contrast = colors
      *   .accentPrimary
-     *   .contrast(color.textPrimary.rgbString());
+     *   .getContrast(color.textPrimary.rgbString());
      *
      * if (contrast > 5) {
      *   return color.textPrimary.toString();
@@ -104,10 +104,10 @@ class Color {
      * }
      * ```
      */
-    contrast(rgb2) {
+    getContrast(rgb2) {
         const color2 = rgb2 instanceof Color ? rgb2 : new Color(rgb2);
-        const lum1 = this.luminance();
-        const lum2 = color2.luminance();
+        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);
@@ -122,6 +122,13 @@ class Color {
         __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++) {
@@ -172,7 +179,7 @@ class Color {
         return result;
     }
     /**
-     * Returns the current color as an hex string
+     * Returns the current color as a hex string
      */
     hexString() {
         const colorToHex = (color) => {

package/DatePicker/index.js

@@ -52,7 +52,7 @@ 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 { 
     // Calendar overrides
-    Body, Cell, EmptyCell, Paper, Header, WeekRow, DateContainer, Toolbar, YearsSelector, MonthesSelector, MonthCell, YearCell, DayBadge, Footer, ControlButton, Heading, Subheading, IconPrev, IconNext, WeekDaysBar, 
+    Body, Cell, EmptyCell, Paper, Header, WeekRow, DateContainer, Toolbar, YearsSelector, MonthsSelector, MonthCell, YearCell, 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);
@@ -132,7 +132,7 @@ const DatePicker = props => {
                         DateContainer,
                         Toolbar,
                         YearsSelector,
-                        MonthesSelector,
+                        MonthsSelector,
                         MonthCell,
                         YearCell,
                         DayBadge,

package/DatePicker/useDatePickerFormat.js

@@ -42,7 +42,7 @@ const useDatePickerFormat = () => {
         }
         const data = {
             days: [],
-            monthes: [],
+            months: [],
             years: [],
         };
         template.split('').forEach((char, charIndex) => {
@@ -51,7 +51,7 @@ const useDatePickerFormat = () => {
                     data.years.push(input[charIndex]);
                     break;
                 case 'm':
-                    data.monthes.push(input[charIndex]);
+                    data.months.push(input[charIndex]);
                     break;
                 case 'd':
                     data.days.push(input[charIndex]);
@@ -61,7 +61,7 @@ const useDatePickerFormat = () => {
                     break;
             }
         });
-        return new Date(parseInt(data.years.join(''), 10), parseInt(data.monthes.join(''), 10) - 1, // Fucking month indexes
+        return new Date(parseInt(data.years.join(''), 10), parseInt(data.months.join(''), 10) - 1, // Fucking month indexes
         parseInt(data.days.join(''), 10));
     }, [validateTemplate]);
     /**

package/Menu/MenuContainer.js

@@ -31,8 +31,9 @@ const context_1 = __importStar(require("./context"));
 const MenuList_1 = __importDefault(require("./MenuList"));
 const Popper_1 = __importDefault(require("../Popper"));
 const ClickOutside_1 = __importDefault(require("../ClickOutside"));
+const onRequestCloseDefault = () => undefined;
 const MenuContainer = react_1.default.forwardRef((props, ref) => {
-    const { items, value, anchorElement, overrides, children, closeOutsideClick = true, isOpen = props.anchorPos === 'static' ? true : false, anchorPos = 'auto', multiple = false, autofocus = true, closeOnSelect = !multiple, onRequestClose = () => undefined, zIndex, onSelectItem, getOptionSelected, } = props;
+    const { items, value, anchorElement, overrides, children, closeOutsideClick = true, isOpen = props.anchorPos === 'static', anchorPos = 'auto', multiple = false, autofocus = true, closeOnSelect = !multiple, onRequestClose = onRequestCloseDefault, zIndex, onSelectItem, getOptionSelected, } = props;
     const overridesMap = react_1.default.useMemo(() => ({
         List: (overrides === null || overrides === void 0 ? void 0 : overrides.List) || MenuList_1.default,
         Popper: (overrides === null || overrides === void 0 ? void 0 : overrides.Popper) || Popper_1.default,

package/PhoneField/templates.js

@@ -13,6 +13,7 @@ const UA_1 = __importDefault(require("../CountryFlags/UA"));
 const JP_1 = __importDefault(require("../CountryFlags/JP"));
 const US_1 = __importDefault(require("../CountryFlags/US"));
 const IL_1 = __importDefault(require("../CountryFlags/IL"));
+const CN_1 = __importDefault(require("../CountryFlags/CN"));
 exports.templates = [
     // Russian template
     ['RU', react_1.default.createElement(RU_1.default, { key: "ru-1" }), '7', '+x (xxx) xxx-xx-xx', '+7 (987) 654-32-10', /^\+$/], // must be at first (Default RU)
@@ -27,6 +28,7 @@ exports.templates = [
     ], // +79...
     // Other fucking countries
     ['BY', react_1.default.createElement(BY_1.default, { key: "by" }), '375', '+375 (xx) xxx-xx-xx', '+375 (98) 765-43-21', /^\+{0,1}375/],
+    ['CN', react_1.default.createElement(CN_1.default, { key: "cn" }), '86', '+86 (xxx) xxxx-xxxx', '+86 (138) 0013-8000', /^\+{0,1}86/],
     ['KZ', react_1.default.createElement(KZ_1.default, { key: "kz-1" }), '7', '+997 (xx) xxx-xx-xx', '+997 (98) 765-43-21', /^\+{0,1}997/],
     [
         'KZ',

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.0-rc.96",
+  "version": "0.1.1",
   "description": "UI Kit",
   "repository": {
     "type": "git",
-    "url": "git@github.com:via-profit/ui-kit.git"
+    "url": "git+ssh://git@github.com/via-profit/ui-kit.git"
   },
   "engines": {
     "node": ">=16.x"

package/Avatar/AvatarStandard.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { AvatarBaseProps } from './AvatarBase';
-export type AvatarStandardProps = AvatarBaseProps;
-declare const _default: React.ForwardRefExoticComponent<AvatarBaseProps & React.RefAttributes<HTMLSpanElement>>;
-export default _default;

package/Avatar/AvatarStandard.js

@@ -1,119 +0,0 @@
-"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 react_2 = require("@emotion/react");
-const Color_1 = __importDefault(require("../Color"));
-const AvatarBase_1 = __importDefault(require("./AvatarBase"));
-const AvatarOnlineBadge_1 = __importDefault(require("./AvatarOnlineBadge"));
-const Container = styled_1.default.span `
-  position: relative;
-  width: ${({ size }) => (size ? size : '2.5em')};
-  height: ${({ size }) => (size ? size : '2.5em')};
-`;
-const StyledStandardAvatar = (0, styled_1.default)(AvatarBase_1.default) `
-  color: ${({ $color }) => $color.toString()};
-  background-color: ${({ $background }) => $background.toString()};
-  ${({ $background }) => {
-    switch (true) {
-        case $background.luminance() > 0.49:
-            return $background.darken(40).alpha(0.8).toString();
-        default:
-            return $background.darken(20).alpha(0.5).toString();
-    }
-}};
-  &:hover {
-    background-color: ${({ $background, $clickable }) => $clickable && $background.darken(30).toString()};
-  }
-  &:focus-visible {
-    outline-color: ${({ theme, $background }) => $background.rgbString() === theme.color.accentPrimary.rgbString()
-    ? theme.color.textPrimary.toString()
-    : theme.color.accentPrimary.toString()};
-  }
-  ${({ $clickable }) => $clickable &&
-    (0, react_2.css) `
-      cursor: pointer;
-    `}
-
-  ${({ variant, theme }) => {
-    switch (variant) {
-        case 'rounded':
-            return (0, react_2.css) `
-          border-radius: ${theme.shape.radiusFactor * 0.8}em;
-        `;
-        case 'square':
-            return (0, react_2.css) `
-          border-radius: inherit;
-        `;
-        default:
-            return (0, react_2.css) `
-          border-radius: 100%;
-        `;
-    }
-}}
-`;
-const AvatarStandard = (props, ref) => {
-    const { children, color, onClick, isOnline, size } = props, restProps = __rest(props, ["children", "color", "onClick", "isOnline", "size"]);
-    const theme = (0, react_2.useTheme)();
-    const clickable = react_1.default.useMemo(() => typeof onClick === 'function', [onClick]);
-    const { $background, $color } = react_1.default.useMemo(() => {
-        switch (true) {
-            case color === 'primary':
-                return {
-                    $color: theme.color.accentPrimaryContrast,
-                    $background: theme.color.accentPrimary,
-                };
-            case color === 'secondary':
-                return {
-                    $color: theme.color.accentSecondaryContrast,
-                    $background: theme.color.accentSecondary,
-                };
-            case typeof color === 'undefined':
-            case color === 'default':
-                return {
-                    $background: theme.color.surface.darken(10),
-                    $color: theme.color.textPrimary,
-                };
-            case typeof color === 'string': {
-                let $background = theme.color.surface;
-                try {
-                    if (color) {
-                        $background = new Color_1.default(color);
-                    }
-                }
-                catch (err) {
-                    console.error(`invalid color value «${color}»`);
-                }
-                return {
-                    $background,
-                    $color: $background.contrast(theme.color.textPrimary) > 5
-                        ? theme.color.textPrimary
-                        : theme.color.surface,
-                };
-            }
-            default:
-                return {
-                    $background: theme.color.surface,
-                    $color: theme.color.textPrimary,
-                };
-        }
-    }, [color, theme.color]);
-    return (react_1.default.createElement(Container, { size: size },
-        react_1.default.createElement(StyledStandardAvatar, Object.assign({ variant: "circular", "$clickable": clickable, "$color": $color, "$background": $background, color: color, onClick: onClick, size: size }, restProps, { tabIndex: clickable ? 0 : -1, ref: ref }), children),
-        isOnline && react_1.default.createElement(AvatarOnlineBadge_1.default, null)));
-};
-exports.default = react_1.default.forwardRef(AvatarStandard);

package/Calendar/CalendarMonthesSelector.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export type CalendarMonthesSelectorProps = React.HTMLAttributes<HTMLDivElement>;
-declare const _default: React.ForwardRefExoticComponent<CalendarMonthesSelectorProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;