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

package/Accordion/index.d.ts

@@ -38,19 +38,19 @@ export interface AccordionOverrides {
     /**
      * Accordion container component
      */
-    readonly Container?: React.ForwardRefExoticComponent<AccordionContainerProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Container?: React.ComponentType<AccordionContainerProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Accordion header component
      */
-    readonly Header?: React.ForwardRefExoticComponent<AccordionHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Header?: React.ComponentType<AccordionHeaderProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Accordion content component
      */
-    readonly Content?: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Content?: React.ComponentType<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Accordion footer component
      */
-    readonly Actions?: React.ForwardRefExoticComponent<AccordionActionsProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Actions?: React.ComponentType<AccordionActionsProps & React.RefAttributes<HTMLDivElement>>;
 }
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     readonly children: React.ReactNode | React.ReactNode[];

package/Autocomplete/AutocompleteContainer.d.ts

@@ -110,7 +110,7 @@ export interface AutocompleteOverrides {
     /**
      * Element wrapper
      */
-    readonly TextField?: React.ForwardRefExoticComponent<AutocompleteTextFieldProps & React.RefAttributes<HTMLDivElement>>;
+    readonly TextField?: React.ComponentType<AutocompleteTextFieldProps & React.RefAttributes<HTMLDivElement>>;
 }
 export type Children<T> = (data: {
     item: T;

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, clearOnBlur = true, anchorPos = 'auto-start-end', openOnFocus = true, 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", "clearOnBlur", "anchorPos", "openOnFocus", "requiredAsterisk", "startIcon", "fullWidth", "placeholder", "label", "error", "errorText", "inputRef", "filterItems", "children", "onChange", "selectedItemToString", "clearable", "onInputChange", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides"]);
+    const { items, value, multiple, isOpen = false, isLoading = false, clearOnBlur = true, anchorPos = 'bottom', openOnFocus = true, 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", "clearOnBlur", "anchorPos", "openOnFocus", "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);

package/Avatar/AvatarBase.d.ts

@@ -55,19 +55,19 @@ export interface AvatarBaseOverrides {
     /**
      * Element container
      */
-    readonly Container?: React.ForwardRefExoticComponent<AvatarContainerProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly Container?: React.ComponentType<AvatarContainerProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * icon wrapper
      */
-    readonly IconWrapper?: React.ForwardRefExoticComponent<AvatarIconWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly IconWrapper?: React.ComponentType<AvatarIconWrapperProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * text wrapper
      */
-    readonly TextWrapper?: React.ForwardRefExoticComponent<AvatarTextWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly TextWrapper?: React.ComponentType<AvatarTextWrapperProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * picture tag
      */
-    readonly Picture?: React.ForwardRefExoticComponent<AvatarPictureProps & React.RefAttributes<HTMLPictureElement>>;
+    readonly Picture?: React.ComponentType<AvatarPictureProps & React.RefAttributes<HTMLPictureElement>>;
 }
 declare const _default: React.ForwardRefExoticComponent<AvatarBaseProps & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

package/Badge/BadgeBase.d.ts

@@ -36,19 +36,19 @@ export interface BadgeBaseOverrides {
     /**
      * Element container
      */
-    readonly Container?: React.ForwardRefExoticComponent<BadgeContainerProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly Container?: React.ComponentType<BadgeContainerProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * icon wrapper
      */
-    readonly IconWrapper?: React.ForwardRefExoticComponent<BadgeIconWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly IconWrapper?: React.ComponentType<BadgeIconWrapperProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * text wrapper
      */
-    readonly TextWrapper?: React.ForwardRefExoticComponent<BadgeTextWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly TextWrapper?: React.ComponentType<BadgeTextWrapperProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * Icon delete
      */
-    readonly ButtonDelete?: React.ForwardRefExoticComponent<BadgeDeleteButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    readonly ButtonDelete?: React.ComponentType<BadgeDeleteButtonProps & React.RefAttributes<HTMLButtonElement>>;
 }
 declare const _default: React.ForwardRefExoticComponent<BadgeBaseProps & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

package/Button/ButtonBase.d.ts

@@ -48,15 +48,15 @@ export interface ButtonBaseOverrides {
     /**
      * Element container
      */
-    readonly Container?: React.ForwardRefExoticComponent<ButtonContainerProps & React.RefAttributes<HTMLButtonElement>>;
+    readonly Container?: React.ComponentType<ButtonContainerProps & React.RefAttributes<HTMLButtonElement>>;
     /**
      * icon wrapper
      */
-    readonly IconWrapper?: React.ForwardRefExoticComponent<ButtonIconWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly IconWrapper?: React.ComponentType<ButtonIconWrapperProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * text wrapper
      */
-    readonly TextWrapper?: React.ForwardRefExoticComponent<ButtonTextWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly TextWrapper?: React.ComponentType<ButtonTextWrapperProps & React.RefAttributes<HTMLSpanElement>>;
 }
 declare const _default: React.ForwardRefExoticComponent<ButtonBaseProps & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Calendar/CalendarCell.js

@@ -29,14 +29,28 @@ const Btn = (0, styled_1.default)(Button_1.default) `
   min-width: 0;
   outline: none;
   position: relative;
-  border-radius: ${({ theme, $fill }) => ($fill ? 0 : theme.shape.radiusFactor * 3)}em;
-  ${({ $fill, theme }) => $fill &&
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 3}em;
+  ${({ $fill, theme, $isSelected }) => $fill &&
+    !$isSelected &&
     (0, react_2.css) `
-      background-color: ${theme.color.accentPrimary.alpha(0.2).toString()};
+      background-color: none;
+      position: relative;
+
+      &:before {
+        position: absolute;
+        border-radius: ${theme.shape.radiusFactor * 0.8}em;
+        inset: 0.6em;
+        content: '';
+        background-color: ${theme.color.accentPrimary.alpha(0.9).toString()};
+      }
+      & > span {
+        position: relative;
+        color: ${theme.color.accentPrimaryContrast.toString()};
+      }
     `};
 `;
 const CalendarCell = (props, ref) => {
     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));
+    return (react_1.default.createElement(Btn, Object.assign({ iconOnly: true, type: "button", "$fill": fill, "$isSelected": isSelected, 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/CalendarMonthCell.js

@@ -30,11 +30,6 @@ const Btn = (0, styled_1.default)(Button_1.default) `
 const CalendarMonthCell = (props, ref) => {
     const { children, isSelected, accentColor } = props, restProps = __rest(props, ["children", "isSelected", "accentColor"]);
     const myRef = react_1.default.useRef(null);
-    react_1.default.useEffect(() => {
-        if (isSelected && myRef.current) {
-            myRef.current.scrollIntoView({ behavior: 'instant' });
-        }
-    }, [isSelected]);
     return (react_1.default.createElement(Btn, Object.assign({}, restProps, { type: "button", variant: isSelected ? 'standard' : 'plain', color: isSelected ? accentColor : 'default', ref: el => {
             if (typeof ref === 'function') {
                 ref(el);

package/Calendar/CalendarYearCell.js

@@ -30,11 +30,11 @@ const Btn = (0, styled_1.default)(Button_1.default) `
 const CalendarYearCell = (props, ref) => {
     const { children, isSelected, accentColor } = props, restProps = __rest(props, ["children", "isSelected", "accentColor"]);
     const myRef = react_1.default.useRef(null);
-    react_1.default.useEffect(() => {
-        if (isSelected && myRef.current) {
-            myRef.current.scrollIntoView({ behavior: 'instant' });
-        }
-    }, [isSelected]);
+    // React.useEffect(() => {
+    //   if (isSelected && myRef.current) {
+    //     myRef.current.scrollIntoView({ behavior: 'instant' });
+    //   }
+    // }, [isSelected]);
     return (react_1.default.createElement(Btn, Object.assign({}, restProps, { type: "button", variant: isSelected ? 'standard' : 'plain', color: isSelected ? accentColor : 'default', ref: el => {
             if (typeof ref === 'function') {
                 ref(el);

package/Calendar/index.d.ts

@@ -106,7 +106,7 @@ export type CalendarProps<Range extends boolean | undefined = undefined> = {
     /**
      * Label for the Today button. If label passed, then button will be rendered
      */
-    readonly toodayButtonLabel?: string;
+    readonly todayButtonLabel?: string;
     /**
      * Heading
      */
@@ -120,6 +120,10 @@ export type CalendarProps<Range extends boolean | undefined = undefined> = {
      * **Default:** `days`
      */
     readonly initialView?: CalendarView;
+    /**
+     * Posibility calendar views list
+     */
+    readonly views?: readonly CalendarView[];
     /**
      * Custom footer elements
      */
@@ -133,83 +137,83 @@ export interface CalendarOverrides {
     /**
      * Element container
      */
-    readonly Body?: React.ForwardRefExoticComponent<CalendarBodyProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Body?: React.ComponentType<CalendarBodyProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Day element
      */
-    readonly Cell?: React.ForwardRefExoticComponent<CalendarCellProps & React.RefAttributes<HTMLButtonElement>>;
+    readonly Cell?: React.ComponentType<CalendarCellProps & React.RefAttributes<HTMLButtonElement>>;
     /**
      * Empty cell element
      */
-    readonly EmptyCell?: React.ForwardRefExoticComponent<CalendarEmptyCellProps & React.RefAttributes<HTMLButtonElement>>;
+    readonly EmptyCell?: React.ComponentType<CalendarEmptyCellProps & React.RefAttributes<HTMLButtonElement>>;
     /**
      * Common container element
      */
-    readonly Paper?: React.ForwardRefExoticComponent<CalendarPaperProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Paper?: React.ComponentType<CalendarPaperProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Header wrapper element
      */
-    readonly Header?: React.ForwardRefExoticComponent<CalendarHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Header?: React.ComponentType<CalendarHeaderProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Week row container element
      */
-    readonly WeekRow?: React.ForwardRefExoticComponent<CalendarWeekRowProps & React.RefAttributes<HTMLDivElement>>;
+    readonly WeekRow?: React.ComponentType<CalendarWeekRowProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Days wrapper element
      */
-    readonly DateContainer?: React.ForwardRefExoticComponent<CalendarDateContainerProps & React.RefAttributes<HTMLDivElement>>;
+    readonly DateContainer?: React.ComponentType<CalendarDateContainerProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Toolbar wrapper element
      */
-    readonly Toolbar?: React.ForwardRefExoticComponent<CalendarToolbarProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Toolbar?: React.ComponentType<CalendarToolbarProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Years list element (year view)
      */
-    readonly YearsSelector?: React.ForwardRefExoticComponent<CalendarYearsSelectorProps & React.RefAttributes<HTMLDivElement>>;
+    readonly YearsSelector?: React.ComponentType<CalendarYearsSelectorProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Monthes list element (month view)
      */
-    readonly MonthsSelector?: React.ForwardRefExoticComponent<CalendarMonthsSelectorProps & React.RefAttributes<HTMLDivElement>>;
+    readonly MonthsSelector?: React.ComponentType<CalendarMonthsSelectorProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Month cell element in monthes list
      */
-    readonly MonthCell?: React.ForwardRefExoticComponent<CalendarMonthCellProps & React.RefAttributes<HTMLButtonElement>>;
+    readonly MonthCell?: React.ComponentType<CalendarMonthCellProps & React.RefAttributes<HTMLButtonElement>>;
     /**
      * Year cell element in years list
      */
-    readonly YearCell?: React.ForwardRefExoticComponent<CalendarYearCellProps & React.RefAttributes<HTMLButtonElement>>;
+    readonly YearCell?: React.ComponentType<CalendarYearCellProps & React.RefAttributes<HTMLButtonElement>>;
     /**
      * Badge of the day cell element
      */
-    readonly DayBadge?: React.ForwardRefExoticComponent<CalendarDayBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly DayBadge?: React.ComponentType<CalendarDayBadgeProps & React.RefAttributes<HTMLSpanElement>>;
     /**
      * Footer container element
      */
-    readonly Footer?: React.ForwardRefExoticComponent<CalendarFooterProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Footer?: React.ComponentType<CalendarFooterProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Common button element
      */
-    readonly ControlButton?: React.ForwardRefExoticComponent<CalendarControlButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    readonly ControlButton?: React.ComponentType<CalendarControlButtonProps & React.RefAttributes<HTMLButtonElement>>;
     /**
      * Heading element
      */
-    readonly Heading?: React.ForwardRefExoticComponent<CalendarHeadingProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Heading?: React.ComponentType<CalendarHeadingProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Subheading element
      */
-    readonly Subheading?: React.ForwardRefExoticComponent<CalendarSubheadingProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Subheading?: React.ComponentType<CalendarSubheadingProps & React.RefAttributes<HTMLDivElement>>;
     /**
      * Prev icon element in prev month button
      */
-    readonly IconPrev?: React.ForwardRefExoticComponent<CalendarIconPrevProps & React.RefAttributes<SVGElement>>;
+    readonly IconPrev?: React.ComponentType<CalendarIconPrevProps & React.RefAttributes<SVGElement>>;
     /**
      * Next icon element in next month button
      */
-    readonly IconNext?: React.ForwardRefExoticComponent<CalendarIconNextProps & React.RefAttributes<SVGElement>>;
+    readonly IconNext?: React.ComponentType<CalendarIconNextProps & React.RefAttributes<SVGElement>>;
     /**
      * Weeks bar  element
      */
-    readonly WeekDaysBar?: React.ForwardRefExoticComponent<CalendarWeekDaysBarProps & React.RefAttributes<HTMLDivElement>>;
+    readonly WeekDaysBar?: React.ComponentType<CalendarWeekDaysBarProps & React.RefAttributes<HTMLDivElement>>;
 }
 export type CalendarBadge = {
     readonly date: Date;

package/Calendar/index.js

@@ -43,7 +43,7 @@ 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 = (0, reducer_1.createDefaultState)(false).calendarCurrentView, resetButtonLabel, toodayButtonLabel, heading, subheading, footer, overrides, range = false, } = 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, views, resetButtonLabel, todayButtonLabel, 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`.');
     }
@@ -78,8 +78,12 @@ const Calendar = (props) => {
         value: realValue,
         badges,
         initialView,
+        views,
     });
-    const initialState = Object.assign(Object.assign({}, (0, reducer_1.createDefaultState)(range)), { calendarValue: realValue, calendarDate: Array.isArray(realValue) ? realValue[0] : realValue, calendarCurrentView: initialView });
+    const initialState = Object.assign(Object.assign({}, (0, reducer_1.createDefaultState)(range, {
+        initialView,
+        views,
+    })), { calendarValue: realValue, calendarDate: Array.isArray(realValue) ? realValue[0] : realValue });
     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,
@@ -113,52 +117,41 @@ const Calendar = (props) => {
         }
     }, [value, calendarValue, isSameDay, dispatch]);
     /**
-     * Handle click on Day button
+     * Handles click on a day cell.
+     * Range selection follows a simple two‑click model:
+     * 1) First click sets the start date.
+     * 2) Second click sets the end date.
+     * If a full range is already selected, a new click starts a new range.
      */
     const handleCellDateClick = react_1.default.useCallback((selectedDate) => () => {
-        if (typeof onChange === 'function') {
-            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');
+        if (!onChange) {
+            return;
+        }
+        // Single-date mode
+        if (!range) {
+            onChange(selectedDate);
+            return;
+        }
+        const [from, to] = calendarValue;
+        // No range selected yet → first click
+        if (!from && !to) {
+            onChange([selectedDate, selectedDate]);
+            return;
+        }
+        // Only start date selected → second click
+        if (from && (!to || from.getTime() === to.getTime())) {
+            if (selectedDate < from) {
+                // User clicked before the start → swap
+                onChange([selectedDate, from]);
             }
             else {
-                onChange(selectedDate);
+                // Normal forward range
+                onChange([from, selectedDate]);
             }
+            return;
         }
-        if (!calendarValue) {
-            dispatch({
-                type: 'setPartial',
-                payload: {
-                    calendarValue: selectedDate,
-                },
-            });
-        }
+        // Full range already selected → start a new range
+        onChange([selectedDate, selectedDate]);
     }, [onChange, calendarValue, range]);
     /**
      * Handle of click on year item
@@ -171,16 +164,18 @@ const Calendar = (props) => {
         newDate.setHours(0);
         newDate.setMinutes(0);
         newDate.setMilliseconds(0);
-        if (calendarDate.getFullYear() !== newDate.getFullYear()) {
-            dispatch({
-                type: 'setPartial',
-                payload: {
-                    calendarDate: newDate,
-                    calendarCurrentView: 'days',
-                },
-            });
+        const nextView = calendarViewVariants.includes('days') ? 'days' : undefined;
+        dispatch({
+            type: 'setPartial',
+            payload: {
+                calendarDate: newDate,
+                calendarCurrentView: nextView !== null && nextView !== void 0 ? nextView : calendarCurrentView,
+            },
+        });
+        if (!nextView && typeof onChange === 'function') {
+            handleCellDateClick(newDate)();
         }
-    }, [calendarDate]);
+    }, [calendarCurrentView, calendarDate, calendarViewVariants, handleCellDateClick, onChange]);
     /**
      * Handle of click on month item
      */
@@ -191,27 +186,32 @@ const Calendar = (props) => {
         newDate.setHours(0);
         newDate.setMinutes(0);
         newDate.setMilliseconds(0);
-        if (calendarDate.getMonth() !== newDate.getMonth()) {
-            dispatch({
-                type: 'setPartial',
-                payload: {
-                    calendarDate: newDate,
-                    calendarCurrentView: 'days',
-                },
-            });
+        const nextView = calendarViewVariants.includes('days') ? 'days' : undefined;
+        dispatch({
+            type: 'setPartial',
+            payload: {
+                calendarDate: newDate,
+                calendarCurrentView: nextView !== null && nextView !== void 0 ? nextView : calendarCurrentView,
+            },
+        });
+        if (!nextView && typeof onChange === 'function') {
+            handleCellDateClick(newDate)();
         }
-    }, [calendarDate]);
+    }, [calendarDate, calendarViewVariants, handleCellDateClick, onChange, calendarCurrentView]);
     /**
      * Manual view changing
      */
     const handleChangeView = react_1.default.useCallback((selectedView) => () => {
+        if (!calendarViewVariants.includes(selectedView)) {
+            return;
+        }
         dispatch({
             type: 'setPartial',
             payload: {
                 calendarCurrentView: selectedView,
             },
         });
-    }, []);
+    }, [calendarViewVariants]);
     /**
      * Handle click on «Reset» button
      */
@@ -244,6 +244,17 @@ const Calendar = (props) => {
             },
         });
     }, []);
+    const weeks = react_1.default.useMemo(() => (calendarCurrentView === 'days' ? getWeeks(calendarDate) : []), [calendarCurrentView, calendarDate, getWeeks]);
+    const yearsRange = react_1.default.useMemo(() => (calendarCurrentView === 'years' ? getYearsRange(minDate, maxDate) : []), [calendarCurrentView, minDate, maxDate, getYearsRange]);
+    const monthsRange = react_1.default.useMemo(() => (calendarCurrentView === 'months' ? getMonthsRange(minDate, maxDate) : []), [calendarCurrentView, minDate, maxDate, getMonthsRange]);
+    const normalizedRange = react_1.default.useMemo(() => {
+        const [from, to] = Array.isArray(calendarValue)
+            ? calendarValue[0].getTime() <= calendarValue[1].getTime()
+                ? calendarValue
+                : [calendarValue[1], calendarValue[0]]
+            : [calendarValue, calendarValue];
+        return [from, to];
+    }, [calendarValue]);
     return (react_1.default.createElement(overridesMap.Paper, null,
         react_1.default.createElement(overridesMap.Header, null,
             typeof heading !== 'undefined' && react_1.default.createElement(overridesMap.Heading, null, heading),
@@ -255,40 +266,36 @@ const Calendar = (props) => {
                 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' }),
+        calendarCurrentView === 'days' && (react_1.default.createElement(overridesMap.WeekDaysBar, { locale: locale, week: weeks[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 => {
-                const a = Array.isArray(calendarValue) ? calendarValue : [calendarValue];
-                const isSelected = a.find(d => d.getFullYear() === year) !== undefined;
+            calendarCurrentView === 'years' && (react_1.default.createElement(overridesMap.YearsSelector, null, yearsRange.map(year => {
+                const isSelected = calendarDate.getFullYear() === year;
                 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 === 'months' && (react_1.default.createElement(overridesMap.MonthsSelector, null, monthsRange.map(monthIndex => {
+                const isSelected = calendarDate.getMonth() === monthIndex;
+                return (react_1.default.createElement(overridesMap.MonthCell, { key: monthIndex + monthsRange[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 => {
+            calendarCurrentView === 'days' && (react_1.default.createElement(overridesMap.DateContainer, null, getWeeks(calendarDate).map(week => (react_1.default.createElement(overridesMap.WeekRow, { key: week.weekNumber }, week.days.map(day => {
                 if (day.date.getMonth() === calendarDate.getMonth()) {
                     const badge = badges.find(b => isSameDay(b.date, day.date));
-                    const a = Array.isArray(calendarValue)
-                        ? 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 },
+                    // Normalize range order
+                    const [from, to] = normalizedRange;
+                    const fill = Array.isArray(calendarValue) &&
+                        day.date.getTime() >= from.getTime() &&
+                        day.date.getTime() <= to.getTime();
+                    const isSelected = isSameDay(from, day.date) || isSameDay(to, day.date);
+                    return (react_1.default.createElement(overridesMap.Cell, { key: day.date.getTime(), isToday: markToday && day.isToday, isDisabled: day.isDisabled, accentColor: accentColor, isSelected: isSelected, fill: fill, onClick: handleCellDateClick(day.date) },
                         getDayLabel(day.date),
-                        typeof badge !== 'undefined' && (react_1.default.createElement(overridesMap.DayBadge, { badgeContent: badge.badgeContent, isToday: day.isToday, accentColor: badge.accentColor }))));
+                        badge && (react_1.default.createElement(overridesMap.DayBadge, { badgeContent: badge.badgeContent, isToday: day.isToday, accentColor: badge.accentColor }))));
                 }
                 return react_1.default.createElement(overridesMap.EmptyCell, { key: day.date.getTime() });
             }))))))),
         (typeof resetButtonLabel !== 'undefined' ||
-            typeof toodayButtonLabel !== 'undefined' ||
+            typeof todayButtonLabel !== 'undefined' ||
             typeof footer !== 'undefined') && (react_1.default.createElement(overridesMap.Footer, null,
             typeof footer !== 'undefined' && react_1.default.createElement(react_1.default.Fragment, null, footer),
-            typeof toodayButtonLabel !== 'undefined' && (react_1.default.createElement(overridesMap.ControlButton, { onClick: handleToday }, toodayButtonLabel)),
+            typeof todayButtonLabel !== 'undefined' && (react_1.default.createElement(overridesMap.ControlButton, { onClick: handleToday }, todayButtonLabel)),
             typeof resetButtonLabel !== 'undefined' && (react_1.default.createElement(overridesMap.ControlButton, { onClick: handleReset }, resetButtonLabel))))));
 };
 exports.default = Calendar;

package/Calendar/reducer.d.ts

@@ -6,7 +6,10 @@ export type State<Range extends boolean | undefined = undefined> = {
     readonly calendarViewVariants: readonly CalendarView[];
 };
 export type CalendarView = 'days' | 'months' | 'years';
-export declare const createDefaultState: <Range_1 extends boolean | undefined = undefined>(range?: Range_1 | undefined) => State<Range_1>;
+export declare const createDefaultState: <Range_1 extends boolean | undefined = undefined>(range?: Range_1 | undefined, params?: {
+    views?: readonly CalendarView[];
+    initialView?: CalendarView;
+}) => State<Range_1>;
 export type Action<Range extends boolean | undefined = undefined> = {
     readonly type: 'setPartial';
     readonly payload: Partial<State<Range>>;

package/Calendar/reducer.js

@@ -1,17 +1,41 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.reducer = exports.createDefaultState = void 0;
-const createDefaultState = (range) => {
+const createDefaultState = (range, params) => {
+    const { views, initialView } = params || {};
     const currentDate = new Date();
     const nextDate = new Date();
     nextDate.setDate(nextDate.getDate() + 3);
+    let calendarViewVariants = ['days', 'months', 'years'];
+    let calendarCurrentView = 'days';
+    if (views && typeof initialView === 'string') {
+        if (!views.includes(initialView)) {
+            throw new Error(`Property views must be contained prperty initialView`);
+        }
+        calendarCurrentView = initialView;
+        calendarViewVariants = views;
+    }
+    if (views && typeof initialView !== 'string') {
+        if (views.includes('days')) {
+            calendarCurrentView = 'days';
+            calendarViewVariants = views;
+        }
+        else {
+            calendarCurrentView = views[0];
+            calendarViewVariants = views;
+        }
+    }
+    if (!views && typeof initialView === 'string') {
+        calendarViewVariants = ['days', 'months', 'years'];
+        calendarCurrentView = initialView;
+    }
     return {
         calendarValue: range
             ? [currentDate, nextDate]
             : new Date(),
         calendarDate: range ? currentDate : new Date(),
-        calendarCurrentView: 'days',
-        calendarViewVariants: ['years', 'months', 'days'],
+        calendarCurrentView,
+        calendarViewVariants,
     };
 };
 exports.createDefaultState = createDefaultState;