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

package/Autocomplete/AutocompleteContainer.d.ts

@@ -34,6 +34,15 @@ 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;
+    /**
+     * should the Menu component opening when input focused\
+     * **Default:** `true`
+     */
+    readonly openOnFocus?: boolean;
     /**
      * items render function
      */
@@ -44,7 +53,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> | React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Overridable components map
      */

package/Autocomplete/AutocompleteContainer.js

@@ -46,13 +46,16 @@ 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', 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", "clearIfNotSelected", "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);
+    const itemsRef = react_1.default.useRef(items);
     const { state, dispatch } = (0, context_1.default)();
     const { currentOpen, filteredItems, inputValue, currentValue, anchorElement, currentLoading } = state;
-    const overridesMap = react_1.default.useMemo(() => (Object.assign({ TextField: AutocompleteTextField_1.default }, overrides)), [overrides]);
+    const overridesMap = react_1.default.useMemo(() => ({
+        TextField: (overrides === null || overrides === void 0 ? void 0 : overrides.TextField) || AutocompleteTextField_1.default,
+    }), [overrides]);
     const clear = react_1.default.useCallback(() => {
         if (onChange) {
             onChange((multiple ? [] : null));
@@ -93,10 +96,12 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             case 'ArrowDown':
                 {
                     event.preventDefault();
-                    (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.hightlightNextItem();
                     if (!currentOpen) {
                         onRequestOpen(event);
                     }
+                    if (currentOpen) {
+                        (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.hightlightNextItem();
+                    }
                 }
                 break;
             case 'Home':
@@ -126,6 +131,14 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
                 break;
         }
     }, [currentOpen, onRequestClose, onRequestOpen]);
+    const applyFilterForItems = react_1.default.useCallback((inputValue, itemList) => {
+        const query = inputValue.toLowerCase().trim();
+        // Apply filter
+        const newItems = typeof filterItems !== 'function' || query.length === 0
+            ? itemList
+            : filterItems(itemList, { query, inputValue });
+        return newItems;
+    }, [filterItems]);
     /**
      * Only affected value change action
      */
@@ -154,8 +167,18 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
         }
     }, [filteredItems]);
     react_1.default.useEffect(() => {
-        dispatch((0, context_1.actionSetPartial)({ currentOpen: isOpen, currentLoading: isLoading, filteredItems: items }));
-    }, [isOpen, isLoading, items, dispatch]);
+        if (currentOpen !== isOpen || currentLoading !== isLoading) {
+            // console.debug('Use effect 1', { currentOpen: isOpen, currentLoading: isLoading });
+            dispatch((0, context_1.actionSetPartial)({ currentOpen: isOpen, currentLoading: isLoading }));
+        }
+    }, [isOpen, isLoading, dispatch, currentOpen, currentLoading]);
+    react_1.default.useEffect(() => {
+        if (JSON.stringify(items) !== JSON.stringify(itemsRef.current)) {
+            // console.debug('Use effect 2', { filteredItems: applyFilterForItems(inputValue, items) });
+            itemsRef.current = items;
+            dispatch((0, context_1.actionSetPartial)({ filteredItems: applyFilterForItems(inputValue, items) }));
+        }
+    }, [items, inputValue, applyFilterForItems, dispatch]);
     react_1.default.useEffect(() => {
         const mouseDownEvent = (event) => {
             var _a;
@@ -177,8 +200,8 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             window.document.removeEventListener(ClickOutside_1.mouseEventMap.onMouseDown, mouseDownEvent);
         };
     }, [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 => {
+    return (react_1.default.createElement(react_1.default.Fragment, 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: 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);
@@ -202,14 +225,19 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
                 }
             }, onFocus: event => {
                 isFocusedRef.current = true;
-                onRequestOpen(event);
+                if (openOnFocus) {
+                    onRequestOpen(event);
+                }
+                if (!openOnFocus && !currentOpen && inputValue !== '') {
+                    onRequestOpen(event);
+                }
                 if (typeof nativeInputProps.onFocus === 'function') {
                     nativeInputProps.onFocus(event);
                 }
             }, onClick: event => {
-                if (isFocusedRef.current) {
-                    onRequestOpen(event);
-                }
+                // if (isFocusedRef.current) {
+                //   onRequestOpen(event);
+                // }
                 if (typeof nativeInputProps.onClick === 'function') {
                     nativeInputProps.onClick(event);
                 }
@@ -217,17 +245,18 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
                 if (typeof onInputChange === 'function') {
                     onInputChange(event);
                 }
-                const query = event.currentTarget.value.toLowerCase().trim();
-                // Apply filter
-                const newItems = typeof filterItems !== 'function' || query.length === 0
-                    ? items
-                    : filterItems(items, { query, inputValue });
+                // If openOnFocus is false, but value is not empty
+                // we should open menu list if is not opened
+                if (!openOnFocus && isFocusedRef.current && !currentOpen) {
+                    onRequestOpen(event);
+                }
+                // console.debug('set filteredItems');
                 dispatch((0, context_1.actionSetPartial)({
-                    filteredItems: newItems,
+                    filteredItems: applyFilterForItems(event.currentTarget.value, items),
                     inputValue: event.currentTarget.value,
                 }));
-                // dispatch(actionSetPartial({ inputValue: event.currentTarget.value }));
             } }))), [
+            overridesMap,
             placeholder,
             label,
             error,
@@ -236,17 +265,19 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             fullWidth,
             startIcon,
             currentLoading,
-            inputKeydownEvent,
+            clearable,
+            nativeInputProps,
             inputValue,
             clear,
-            overridesMap,
+            inputKeydownEvent,
             anchorElement,
             dispatch,
             inputRef,
-            nativeInputProps,
+            openOnFocus,
+            currentOpen,
             onRequestOpen,
             onInputChange,
-            filterItems,
+            applyFilterForItems,
             items,
         ]),
         react_1.default.useMemo(() => (react_1.default.createElement(Menu_1.default, { ref: menuRef, anchorPos: anchorPos, multiple: multiple, items: filteredItems, value: currentValue, isOpen: currentOpen && filteredItems.length > 0, autofocus: false, anchorElement: anchorElement, closeOutsideClick: false, getOptionSelected: getOptionSelected, onSelectItem: item => {

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/Autocomplete/context.d.ts

@@ -18,6 +18,7 @@ export declare const defaultState: State;
 export declare const reducer: React.Reducer<State, Action>;
 interface ContextProviderProps {
     readonly children: React.ReactNode | readonly React.ReactNode[];
+    readonly initialState?: Partial<State>;
 }
 export declare const ContextProvider: React.FC<ContextProviderProps>;
 export declare const useContext: () => {

package/Autocomplete/context.js

@@ -32,8 +32,8 @@ const context = react_1.default.createContext({
     dispatch: () => undefined,
 });
 const ContextProvider = props => {
-    const { children } = props;
-    const [state, dispatch] = react_1.default.useReducer(exports.reducer, exports.defaultState);
+    const { children, initialState } = props;
+    const [state, dispatch] = react_1.default.useReducer(exports.reducer, Object.assign(Object.assign({}, exports.defaultState), initialState));
     return react_1.default.createElement(context.Provider, { value: { state, dispatch } }, children);
 };
 exports.ContextProvider = ContextProvider;

package/Autocomplete/index.js

@@ -36,9 +36,9 @@ const AutocompleteContainer_1 = __importDefault(require("./AutocompleteContainer
 const context_1 = require("./context");
 __exportStar(require("./AutocompleteContainer"), exports);
 const Autocomplete = react_1.default.forwardRef((props, ref) => {
-    const { children } = props, restProps = __rest(props, ["children"]);
-    return (react_1.default.createElement(context_1.ContextProvider, null,
-        react_1.default.createElement(AutocompleteContainer_1.default, Object.assign({}, restProps, { ref: ref }), children)));
+    const { children, items, isOpen, value } = props, restProps = __rest(props, ["children", "items", "isOpen", "value"]);
+    return (react_1.default.createElement(context_1.ContextProvider, { initialState: { filteredItems: items, currentOpen: isOpen, currentValue: value } },
+        react_1.default.createElement(AutocompleteContainer_1.default, Object.assign({}, restProps, { items: items, isOpen: isOpen, value: value, ref: ref }), children)));
 });
 Autocomplete.displayName = 'Autocomplete';
 exports.default = Autocomplete;

package/Badge/BadgeBase.js

@@ -21,10 +21,12 @@ const BadgeContainer_1 = __importDefault(require("./BadgeContainer"));
 const BadgeDeleteButton_1 = __importDefault(require("./BadgeDeleteButton"));
 const BadgeBase = (props, ref) => {
     const { children, startIcon, color, variant, overrides, onDelete } = props, nativeProps = __rest(props, ["children", "startIcon", "color", "variant", "overrides", "onDelete"]);
-    const overridesMap = react_1.default.useMemo(() => (Object.assign({ TextWrapper: BadgeTextWrapper_1.default,
-        IconWrapper: BadgeIconWrapper_1.default,
-        Container: BadgeContainer_1.default,
-        ButtonDelete: BadgeDeleteButton_1.default }, overrides)), [overrides]);
+    const overridesMap = react_1.default.useMemo(() => ({
+        TextWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.TextWrapper) || BadgeTextWrapper_1.default,
+        IconWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.IconWrapper) || BadgeIconWrapper_1.default,
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || BadgeContainer_1.default,
+        ButtonDelete: (overrides === null || overrides === void 0 ? void 0 : overrides.ButtonDelete) || BadgeDeleteButton_1.default,
+    }), [overrides]);
     return (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { color: color, ref: ref }),
         typeof startIcon !== 'undefined' && startIcon !== null && (react_1.default.createElement(overridesMap.IconWrapper, null, startIcon)),
         react_1.default.createElement(overridesMap.TextWrapper, null, children),

package/Button/ButtonBase.js

@@ -20,9 +20,11 @@ const ButtonTextWrapper_1 = __importDefault(require("./ButtonTextWrapper"));
 const ButtonContainer_1 = __importDefault(require("./ButtonContainer"));
 const ButtonBase = (props, ref) => {
     const { children, startIcon, endIcon, color, overrides, iconOnly, type } = props, nativeProps = __rest(props, ["children", "startIcon", "endIcon", "color", "overrides", "iconOnly", "type"]);
-    const overridesMap = react_1.default.useMemo(() => (Object.assign({ TextWrapper: ButtonTextWrapper_1.default,
-        IconWrapper: ButtonIconWrapper_1.default,
-        Container: ButtonContainer_1.default }, overrides)), [overrides]);
+    const overridesMap = react_1.default.useMemo(() => ({
+        TextWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.TextWrapper) || ButtonTextWrapper_1.default,
+        IconWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.IconWrapper) || ButtonIconWrapper_1.default,
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || ButtonContainer_1.default,
+    }), [overrides]);
     if (iconOnly &&
         ((typeof startIcon !== 'undefined' && startIcon !== null) ||
             (typeof endIcon !== 'undefined' && endIcon !== null))) {

package/Calendar/CalendarBody.d.ts

@@ -1,6 +1,4 @@
-/// <reference types="react" />
-declare const CalendarBody: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export default CalendarBody;
+import React from 'react';
+export type CalendarBodyProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<CalendarBodyProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Calendar/CalendarBody.js

@@ -1,14 +1,30 @@
 "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 CalendarBody = styled_1.default.div `
+const StyledCalendarBody = styled_1.default.div `
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: stretch;
   height: 15em;
 `;
-exports.default = CalendarBody;
+const CalendarBody = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(StyledCalendarBody, Object.assign({}, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(CalendarBody);

package/Calendar/CalendarCell.d.ts

@@ -1,8 +1,21 @@
 import React from 'react';
 export interface CalendarCellProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * if cell day is today, then property will be true
+     */
     readonly isToday?: boolean;
+    /**
+     * if cell day is selected, then property will be true
+     */
     readonly isSelected?: boolean;
+    /**
+     * if cell day is disabled, then property will be true
+     */
     readonly isDisabled?: boolean;
+    /**
+     * Cell accent color\
+     * Possibility variants: `primary` `secondary` or custom color string like hex or rgb format
+     */
     readonly accentColor?: 'primary' | 'secondary' | string;
 }
 declare const _default: React.ForwardRefExoticComponent<CalendarCellProps & React.RefAttributes<HTMLButtonElement>>;

package/Calendar/CalendarCell.js

@@ -32,6 +32,6 @@ const Btn = (0, styled_1.default)(Button_1.default) `
 `;
 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({}, restProps, { iconOnly: true, type: "button", variant: isSelected ? 'standard' : isToday ? 'outlined' : 'plain', ref: ref, color: isSelected || isToday ? accentColor : 'default', tabIndex: isDisabled ? -1 : restProps.tabIndex, disabled: isDisabled }), children));
+    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));
 };
 exports.default = react_1.default.forwardRef(CalendarCell);

package/Calendar/CalendarControlButton.d.ts

@@ -1,7 +1,11 @@
 import React from 'react';
 import { ButtonProps } from '../Button';
-export type CalendarControlButtonProps = ButtonProps;
+export type CalendarControlButtonProps = ButtonProps & {
+    readonly isActive?: boolean;
+};
 declare const _default: React.ForwardRefExoticComponent<import("../Button/ButtonBase").ButtonBaseProps & {
     readonly variant?: "standard" | "outlined" | "plain" | undefined;
+} & {
+    readonly isActive?: boolean | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 export default _default;

package/Calendar/CalendarControlButton.js

@@ -15,11 +15,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const react_2 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
 const Button_1 = __importDefault(require("../Button"));
+const StyledCalendarControlButton = (0, styled_1.default)(Button_1.default) `
+  color: ${({ theme }) => theme.color.accentSecondaryContrast.toString()};
+  background-color: ${({ theme }) => theme.color.accentSecondaryContrast.alpha(0).toString()};
+  cursor: pointer;
+  &:hover {
+    color: ${({ theme }) => theme.color.accentSecondaryContrast.toString()};
+    background-color: ${({ theme }) => theme.color.accentSecondaryContrast.alpha(0.2).toString()};
+  }
+  &:active {
+    color: ${({ theme }) => theme.color.accentSecondaryContrast.toString()};
+    background-color: ${({ theme }) => theme.color.accentSecondaryContrast.alpha(0.5).toString()};
+  }
+`;
 const CalendarControlButton = (props, ref) => {
-    const { children } = props, restProps = __rest(props, ["children"]);
-    const { color } = (0, react_2.useTheme)();
-    return (react_1.default.createElement(Button_1.default, Object.assign({ type: "button", variant: "plain", color: color.accentSecondaryContrast.toString() }, restProps, { ref: ref }), children));
+    const { children, isActive } = props, restProps = __rest(props, ["children", "isActive"]);
+    return (react_1.default.createElement(StyledCalendarControlButton, Object.assign({ type: "button", variant: "plain", "$isActive": isActive }, restProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(CalendarControlButton);

package/Calendar/CalendarDateContainer.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
-declare const _default: React.NamedExoticComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any> | undefined;
-} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+export type CalendarDateContainerProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<CalendarDateContainerProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Calendar/CalendarDateContainer.js

@@ -1,14 +1,29 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
-const CalendarDateContainer = styled_1.default.div `
+const StyledCalendarDateContainer = styled_1.default.div `
   display: flex;
   flex-direction: column;
   justify-content: stretch;
   padding: 0.4em;
 `;
-exports.default = react_1.default.memo(CalendarDateContainer);
+const CalendarDateContainer = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(StyledCalendarDateContainer, Object.assign({}, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(CalendarDateContainer);

package/Calendar/CalendarEmptyCell.js

@@ -21,6 +21,9 @@ const Elem = styled_1.default.span `
   width: 3em;
   height: 3em;
   min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 const CalendarEmptyCell = (props, ref) => {
     const { children } = props, restProps = __rest(props, ["children"]);

package/Calendar/CalendarIconPrev.d.ts

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

package/Calendar/{IconChevronLeft.js → CalendarIconPrev.js}

@@ -4,6 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const IconChevronLeft = (props, ref) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "1em", height: "1em", ref: ref }, props),
+const CalendarIconPrev = (props, ref) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "1em", height: "1em", ref: ref }, props),
     react_1.default.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 48, d: "M328 112 184 256l144 144" })));
-exports.default = react_1.default.forwardRef(IconChevronLeft);
+exports.default = react_1.default.forwardRef(CalendarIconPrev);

package/Calendar/CalendarMonthCell.d.ts

@@ -1,6 +1,12 @@
 import React from 'react';
 export interface CalendarMonthCellProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * If month selected, then property will be true
+     */
     readonly isSelected?: boolean;
+    /**
+     * accent color
+     */
     readonly accentColor?: 'primary' | 'secondary' | string;
 }
 declare const _default: React.ForwardRefExoticComponent<CalendarMonthCellProps & React.RefAttributes<HTMLButtonElement>>;

package/Calendar/CalendarPaper.d.ts

@@ -1,6 +1,4 @@
-/// <reference types="react" />
-declare const CalendarPaper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export default CalendarPaper;
+import React from 'react';
+export type CalendarPaperProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<CalendarPaperProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Calendar/CalendarPaper.js

@@ -1,10 +1,22 @@
 "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 CalendarPaper = styled_1.default.div `
+const StyledCalendarPaper = styled_1.default.div `
   width: 18em;
   position: relative;
   display: inline-flex;
@@ -14,4 +26,8 @@ const CalendarPaper = styled_1.default.div `
   border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
   box-shadow: 0 4px 24px ${({ theme }) => theme.color.surface.darken(50).alpha(0.6).toString()};
 `;
-exports.default = CalendarPaper;
+const CalendarPaper = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(StyledCalendarPaper, Object.assign({}, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(CalendarPaper);

package/Calendar/CalendarWeekDaysBar.d.ts

@@ -1,10 +1,20 @@
 import React from 'react';
 import type { Week } from './use-calendar';
 export type WeekNameLabelFormat = 'short' | 'long' | 'narrow';
-export interface CalendarTopBarProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface CalendarWeekDaysBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Data of the weak
+     */
     readonly week: Week;
+    /**
+     * Int weekday format\
+     * **Default:** `short`
+     */
     readonly format: WeekNameLabelFormat;
+    /**
+     * Intl locale
+     */
     readonly locale?: string;
 }
-declare const _default: React.ForwardRefExoticComponent<CalendarTopBarProps & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.ForwardRefExoticComponent<CalendarWeekDaysBarProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;

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/CalendarWeekRow.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
-declare const _default: React.NamedExoticComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any> | undefined;
-} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+export type CalendarWeekRowProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<CalendarWeekRowProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Calendar/CalendarWeekRow.js

@@ -1,14 +1,29 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
-const CalendarWeekRow = styled_1.default.div `
+const StyledCalendarWeekRow = styled_1.default.div `
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: stretch;
 `;
-exports.default = react_1.default.memo(CalendarWeekRow);
+const CalendarWeekRow = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(StyledCalendarWeekRow, Object.assign({}, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(CalendarWeekRow);

package/Calendar/CalendarYearCell.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 export interface CalendarYearCellProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * If year selected, then property will be true
+     */
     readonly isSelected?: boolean;
     readonly accentColor?: 'primary' | 'secondary' | string;
 }

package/Calendar/IconChevronRight.d.ts

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