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

package/Autocomplete/AutocompleteContainer.d.ts

@@ -38,6 +38,11 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined = und
      * 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
      */
@@ -48,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<HTMLElement> | React.MouseEvent<HTMLElement> | 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, clearable = true, onInputChange, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides } = props, nativeInputProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "clearIfNotSelected", "anchorPos", "requiredAsterisk", "startIcon", "fullWidth", "placeholder", "label", "error", "errorText", "inputRef", "filterItems", "children", "onChange", "selectedItemToString", "clearable", "onInputChange", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides"]);
+    const { 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,7 +200,7 @@ 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,
+    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') {
@@ -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,16 +245,16 @@ 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,
@@ -245,9 +273,11 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
             anchorElement,
             dispatch,
             inputRef,
+            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/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/Avatar/AvatarBase.d.ts

@@ -0,0 +1,73 @@
+import React from 'react';
+import { AvatarIconWrapperProps } from './AvatarIconWrapper';
+import { AvatarTextWrapperProps } from './AvatarTextWrapper';
+import { AvatarContainerProps } from './AvatarContainer';
+import { AvatarPictureProps } from './AvatarPicture';
+type AvatarNativeProps = React.HTMLAttributes<HTMLSpanElement>;
+export interface AvatarBaseProps extends Omit<AvatarNativeProps, 'color'> {
+    /**
+     * image object of Avatar component
+     * Example:
+     * ```tsx
+     * <Avatar src={[{
+     *  srcSet: 'https://google.com/images/img.png',
+     *  type: 'image/png',
+     *  isDefault: true,
+     * }]}>
+     *   Label
+     * </Avatar>
+     * ```
+     */
+    readonly src?: AvatarPictureProps['src'];
+    /**
+     * Avatar style variant\
+     * Allowed variants: `circular`,`rounded` or `square`\
+     * \
+     * **Default**: `circular`
+     */
+    readonly variant?: 'circular' | 'rounded' | 'square';
+    /**
+     * Avatar size variant\
+     * \
+     * **Default**: `2.5em`
+     */
+    readonly size?: string;
+    /**
+     * Show avatar online badge\
+     * \
+     * **Default**: `undefined`
+     */
+    readonly isOnline?: boolean;
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value
+     */
+    readonly color?: AvatarContainerProps['color'];
+    /**
+     * Overridable components map
+     */
+    readonly overrides?: AvatarBaseOverrides;
+    /**
+     * HTML image alt attribute
+     */
+    readonly alt?: string;
+}
+export interface AvatarBaseOverrides {
+    /**
+     * Element container
+     */
+    readonly Container?: React.ForwardRefExoticComponent<AvatarContainerProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * icon wrapper
+     */
+    readonly IconWrapper?: React.ForwardRefExoticComponent<AvatarIconWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * text wrapper
+     */
+    readonly TextWrapper?: React.ForwardRefExoticComponent<AvatarTextWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    /**
+     * picture tag
+     */
+    readonly Picture?: React.ForwardRefExoticComponent<AvatarPictureProps & React.RefAttributes<HTMLPictureElement>>;
+}
+declare const _default: React.ForwardRefExoticComponent<AvatarBaseProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Avatar/AvatarBase.js

@@ -0,0 +1,33 @@
+"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 AvatarIconWrapper_1 = __importDefault(require("./AvatarIconWrapper"));
+const AvatarTextWrapper_1 = __importDefault(require("./AvatarTextWrapper"));
+const AvatarContainer_1 = __importDefault(require("./AvatarContainer"));
+const AvatarPicture_1 = __importDefault(require("./AvatarPicture"));
+const AvatarBase = (props, ref) => {
+    const { children, src, color, alt, variant, overrides, isOnline } = props, nativeProps = __rest(props, ["children", "src", "color", "alt", "variant", "overrides", "isOnline"]);
+    const overridesMap = react_1.default.useMemo(() => (Object.assign({ TextWrapper: AvatarTextWrapper_1.default,
+        IconWrapper: AvatarIconWrapper_1.default,
+        Container: AvatarContainer_1.default,
+        Picture: AvatarPicture_1.default }, overrides)), [overrides]);
+    return (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { color: color, ref: ref }),
+        typeof src !== 'undefined' && src !== null && (src === null || src === void 0 ? void 0 : src.length) !== 0 && (react_1.default.createElement(overridesMap.IconWrapper, null,
+            react_1.default.createElement(overridesMap.Picture, { src: src }))),
+        (!src || src === null || (src === null || src === void 0 ? void 0 : src.length) === 0) && (react_1.default.createElement(overridesMap.TextWrapper, null, children))));
+};
+exports.default = react_1.default.forwardRef(AvatarBase);

package/Avatar/AvatarContainer.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export type AvatarContainerProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value
+     */
+    readonly color?: 'default' | 'primary' | 'secondary' | string;
+    /**
+     * Avatar size variant\
+     * \
+     * **Default**: `2.5em`
+     */
+    readonly size?: string;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value
+     */
+    readonly color?: string | undefined;
+    /**
+     * Avatar size variant\
+     * \
+     * **Default**: `2.5em`
+     */
+    readonly size?: string | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Avatar/AvatarContainer.js

@@ -0,0 +1,45 @@
+"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 StyledAvatar = styled_1.default.span `
+  font-size: 1em;
+  border-width: 0;
+  outline-style: solid;
+  outline-color: transparent;
+  outline-width: 0.14em;
+  transition: all 180ms ease-out 0s;
+  background: none;
+  position: relative;
+  width: ${({ size }) => size || '2.5em'};
+  height: ${({ size }) => size || '2.5em'};
+  display: inline-flex;
+  overflow: hidden;
+  align-items: center;
+  color: ${({ color, theme }) => {
+    switch (true) {
+        case typeof color === 'undefined':
+        default:
+            return theme.color.textPrimary.toString();
+    }
+}};
+`;
+const AvatarContainer = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(StyledAvatar, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(AvatarContainer);

package/Avatar/AvatarIconWrapper.d.ts

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

package/Avatar/AvatarIconWrapper.js

@@ -0,0 +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 Wrapper = styled_1.default.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+`;
+const AvatarIconWrapper = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(Wrapper, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(AvatarIconWrapper);

package/Avatar/AvatarOnlineBadge.d.ts

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

package/Avatar/AvatarOnlineBadge.js

@@ -0,0 +1,36 @@
+"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 OnlineBadge = styled_1.default.span `
+  display: block;
+  position: absolute;
+  border-radius: 50%;
+  bottom: 14%;
+  right: 7%;
+  width: 0.6em;
+  height: 0.6em;
+  transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transform: scale(1) translate(50%, 50%);
+  transform-origin: 100% 100%;
+  background-color: ${({ theme }) => theme.color.success.toString()};
+`;
+const AvatarOnlineBadge = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return react_1.default.createElement(OnlineBadge, Object.assign({}, nativeProps, { ref: ref }));
+};
+exports.default = react_1.default.forwardRef(AvatarOnlineBadge);

package/Avatar/AvatarPicture.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+export type MimeType = 'image/webp' | 'image/jpeg' | 'image/png' | 'image/gif' | 'image/apng' | 'image/svg+xml' | 'image/bmp' | 'image/x-icon';
+export type SrcObject = {
+    srcSet: string;
+    type: MimeType;
+    isDefault?: boolean;
+};
+export type AvatarPictureProps = React.HTMLAttributes<HTMLPictureElement> & {
+    /**
+     * image object of Avatar component
+     * Example:
+     * ```tsx
+     * <Avatar src={[{
+     *  srcSet: 'https://google.com/images/img.png',
+     *  type: 'image/png',
+     *  isDefault: true,
+     * }]}>
+     *   Label
+     * </Avatar>
+     * ```
+     */
+    readonly src: SrcObject[];
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLPictureElement> & {
+    /**
+     * image object of Avatar component
+     * Example:
+     * ```tsx
+     * <Avatar src={[{
+     *  srcSet: 'https://google.com/images/img.png',
+     *  type: 'image/png',
+     *  isDefault: true,
+     * }]}>
+     *   Label
+     * </Avatar>
+     * ```
+     */
+    readonly src: SrcObject[];
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Avatar/AvatarPicture.js

@@ -0,0 +1,54 @@
+"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 Picture = styled_1.default.picture `
+  background-position: center;
+  background-size: cover;
+  width: 100%;
+  height: 100%;
+  & img {
+    width: 100%;
+    height: 100%;
+  }
+`;
+const generateKey = () => (Math.random() * 10000).toFixed();
+const AvatarPicture = (props, ref) => {
+    const { src } = props, nativeProps = __rest(props, ["src"]);
+    const defaultSrc = react_1.default.useMemo(() => {
+        if (typeof src === 'undefined' || (src === null || src === void 0 ? void 0 : src.length) === 0) {
+            return null;
+        }
+        let retData = src.find(({ isDefault }) => isDefault);
+        if (retData) {
+            return retData;
+        }
+        retData = src.find(src => src.type === 'image/png');
+        if (retData) {
+            return retData;
+        }
+        retData = src.find(src => src.type === 'image/jpeg');
+        return retData ? retData : null;
+    }, [src]);
+    return (react_1.default.createElement(Picture, Object.assign({}, nativeProps, { ref: ref }),
+        src.map((_a) => {
+            var { isDefault } = _a, srcProps = __rest(_a, ["isDefault"]);
+            return (react_1.default.createElement("source", Object.assign({ key: generateKey() }, srcProps)));
+        }),
+        react_1.default.createElement("img", { src: (defaultSrc === null || defaultSrc === void 0 ? void 0 : defaultSrc.srcSet) || '' })));
+};
+exports.default = react_1.default.forwardRef(AvatarPicture);

package/Avatar/AvatarStandard.d.ts

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