react-asc 21.3.0 → 23.0.0

package/components/CssTransition/CssTransition.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface ICssTransitionProps {
+    className: string;
+    children: React.ReactNode;
+    show: boolean | undefined;
+}
+export declare const CssTransition: (props: ICssTransitionProps) => JSX.Element;
+export {};

package/components/CssTransition/index.d.ts

@@ -0,0 +1 @@
+export * from './CssTransition';

package/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -7,6 +7,7 @@ export interface IFloatingActionButtonProps extends React.DetailedHTMLProps<Reac
     fixed?: boolean;
     isActive?: boolean;
     disabled?: boolean;
+    position?: 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
     onClick?: (e: React.MouseEvent) => void;
 }
 export declare const FloatingActionButton: (props: IFloatingActionButtonProps) => JSX.Element;

package/components/index.d.ts

@@ -10,6 +10,7 @@ export * from './Card';
 export * from './ConditionalWrapper';
 export * from './Checkbox';
 export * from './Chip';
+export * from './CssTransition';
 export * from './DateSelect';
 export * from './Drawer';
 export * from './Menu';

package/hooks/index.d.ts

@@ -1,5 +1,6 @@
-export * from './useWindowSize';
-export * from './useHover';
-export * from './useConstructor';
 export * from './useDebounce';
+export * from './useConstructor';
 export * from './useCssClasses';
+export * from './useHover';
+export * from './useMobileDetect';
+export * from './useWindowSize';

package/hooks/useMobileDetect.d.ts

@@ -0,0 +1,3 @@
+export declare function useMobileDetect(): {
+    isMobile: boolean;
+};

package/index.es.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, Fragment, Component, createRef, cloneElement, createContext, useContext } from 'react';
+import React, { useRef, useEffect, useState, Fragment, Component, createRef, cloneElement, createContext, useContext } from 'react';
 import { createPortal, render, unmountComponentAtNode } from 'react-dom';
 import { createPopper } from '@popperjs/core';
 
@@ -224,23 +224,26 @@ const CircleSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true
 const ChevronLeftSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" },
     React.createElement("path", { fill: "currentColor", d: "M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z" })));
 
-function useWindowSize() {
-    const [windowSize, setWindowSize] = useState({
-        width: 0,
-        height: 0,
-    });
+function useDebounce(callback, timeout, deps) {
+    const timeoutId = useRef();
     useEffect(() => {
-        function handleResize() {
-            setWindowSize({
-                width: window.innerWidth,
-                height: window.innerHeight,
-            });
-        }
-        window.addEventListener("resize", handleResize);
-        handleResize();
-        return () => window.removeEventListener("resize", handleResize);
-    }, []);
-    return windowSize;
+        clearTimeout(timeoutId.current);
+        timeoutId.current = setTimeout(callback, timeout);
+        return () => clearTimeout(timeoutId.current);
+    }, deps);
+}
+
+const useConstructor = (callBack) => {
+    const [hasBeenCalled, setHasBeenCalled] = useState(false);
+    if (hasBeenCalled)
+        return;
+    callBack();
+    setHasBeenCalled(true);
+};
+
+function useCssClasses(cssClasses) {
+    const cssClassName = (cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || '';
+    return [cssClassName];
 }
 
 function useHover() {
@@ -265,26 +268,37 @@ function useHover() {
     return [ref, value];
 }
 
-const useConstructor = (callBack) => {
-    const [hasBeenCalled, setHasBeenCalled] = useState(false);
-    if (hasBeenCalled)
-        return;
-    callBack();
-    setHasBeenCalled(true);
-};
-
-function useDebounce(callback, timeout, deps) {
-    const timeoutId = useRef();
+function useWindowSize() {
+    const [windowSize, setWindowSize] = useState({
+        width: 0,
+        height: 0,
+    });
     useEffect(() => {
-        clearTimeout(timeoutId.current);
-        timeoutId.current = setTimeout(callback, timeout);
-        return () => clearTimeout(timeoutId.current);
-    }, deps);
+        function handleResize() {
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+        window.addEventListener("resize", handleResize);
+        handleResize();
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    return windowSize;
 }
 
-function useCssClasses(cssClasses) {
-    const cssClassName = (cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || '';
-    return [cssClassName];
+function useMobileDetect() {
+    const [isMobile, setIsMobile] = useState(false);
+    const windowSize = useWindowSize();
+    const checkIsMobile = (height, width) => {
+        if (height > 0 && width > 0) {
+            setIsMobile(!(width >= 1024));
+        }
+    };
+    useEffect(() => {
+        windowSize && checkIsMobile(windowSize.height, windowSize.width);
+    }, [windowSize]);
+    return { isMobile };
 }
 
 var css_248z$X = ".Backdrop-module_backdrop__IRMoL {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  opacity: 0.5;\n  z-index: 1040;\n  top: 0;\n  left: 0;\n  background-color: #000; }\n  .Backdrop-module_backdrop__IRMoL.Backdrop-module_isTransparent__F5nA5 {\n    opacity: 0; }\n";
@@ -752,7 +766,7 @@ const Checkbox = (props) => {
         React.createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
 };
 
-var css_248z$C = ".Chip-module_chip__dZ5qz {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.5rem;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: baseline;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  font-size: 75%;\n  font-weight: 700;\n  border-radius: 10rem;\n  line-height: 1; }\n  .Chip-module_chip__dZ5qz svg {\n    width: 18px;\n    height: 18px; }\n  .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx {\n    margin-left: 5px; }\n    .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx:hover {\n      cursor: pointer; }\n  .Chip-module_chip__dZ5qz.Chip-module_primary__YVDi9 {\n    background: var(--primary);\n    color: var(--primary-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_secondary__-e4xP {\n    background: var(--secondary);\n    color: var(--secondary-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_accent__ZCTwu {\n    background: var(--accent);\n    color: var(--accent-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_light__vKs7O {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .Chip-module_chip__dZ5qz.Chip-module_dark__G-FLQ {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n  .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover {\n    cursor: pointer; }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_primary__YVDi9 {\n      background: var(--primary-dark); }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_secondary__-e4xP {\n      background: var(--secondary-dark); }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_accent__ZCTwu {\n      background: var(--accent-dark); }\n  .Chip-module_chip__dZ5qz.Chip-module_shadow__v11NF {\n    box-shadow: var(--shadow); }\n";
+var css_248z$C = ".Chip-module_chip__dZ5qz {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.5rem;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: baseline;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\r box-shadow 0.15s ease-in-out;\n  font-size: 75%;\n  font-weight: 700;\n  border-radius: 10rem;\n  line-height: 1; }\n  .Chip-module_chip__dZ5qz span {\n    margin-bottom: 2px; }\n  .Chip-module_chip__dZ5qz svg {\n    width: 18px;\n    height: 18px; }\n  .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx {\n    margin-left: 5px; }\n    .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx:hover {\n      cursor: pointer; }\n  .Chip-module_chip__dZ5qz.Chip-module_primary__YVDi9 {\n    background: var(--primary);\n    color: var(--primary-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_secondary__-e4xP {\n    background: var(--secondary);\n    color: var(--secondary-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_accent__ZCTwu {\n    background: var(--accent);\n    color: var(--accent-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_light__vKs7O {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .Chip-module_chip__dZ5qz.Chip-module_dark__G-FLQ {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n  .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover {\n    cursor: pointer; }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_primary__YVDi9 {\n      background: var(--primary-dark); }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_secondary__-e4xP {\n      background: var(--secondary-dark); }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_accent__ZCTwu {\n      background: var(--accent-dark); }\n  .Chip-module_chip__dZ5qz.Chip-module_shadow__v11NF {\n    box-shadow: var(--shadow); }\n";
 var styles$C = {"chip":"Chip-module_chip__dZ5qz","deleteIcon":"Chip-module_deleteIcon__--rUx","primary":"Chip-module_primary__YVDi9","secondary":"Chip-module_secondary__-e4xP","accent":"Chip-module_accent__ZCTwu","light":"Chip-module_light__vKs7O","dark":"Chip-module_dark__G-FLQ","clickable":"Chip-module_clickable__qAqVH","shadow":"Chip-module_shadow__v11NF"};
 styleInject(css_248z$C);
 
@@ -772,11 +786,76 @@ const Chip = (props) => {
         onDelete && onDelete(e);
     };
     return (React.createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
-        React.createElement("div", null, children),
+        React.createElement("span", null, children),
         isDeletable && (React.createElement("div", { className: styles$C.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
 };
 
-var css_248z$B = ".Column-module_column__fcTgl {\n  flex: 1 0 0%; }\n";
+const CssTransition = (props) => {
+    const { className, children, show } = props;
+    const [isShow, setIsShow] = useState(undefined);
+    const [cssState, setCssState] = useState({
+        hidden: true
+    });
+    const transitionConainter = useRef(null);
+    useEffect(() => {
+        if (show !== undefined) {
+            setIsShow(show);
+        }
+    }, [show]);
+    const nextFrame = () => {
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(resolve);
+            });
+        });
+    };
+    const afterTransition = (element) => {
+        return new Promise((resolve) => {
+            if (element) {
+                const duration = Number(getComputedStyle(element).transitionDuration.replace("s", "")) * 1000;
+                setTimeout(() => { resolve(); }, duration);
+            }
+            else {
+                resolve();
+            }
+        });
+    };
+    const renderAnimation = async (show) => {
+        if (show === true) {
+            setCssState({ enter: true, enterStart: true });
+            await nextFrame();
+            setCssState({ enter: true, enterEnd: true });
+            await afterTransition(transitionConainter.current);
+            setCssState(undefined);
+        }
+        if (show === false) {
+            setCssState({ leave: true, leaveStart: true });
+            await nextFrame();
+            setCssState({ leave: true, leaveEnd: true });
+            await afterTransition(transitionConainter.current);
+            setCssState({ hidden: true });
+        }
+    };
+    useEffect(() => {
+        if (isShow !== undefined && (isShow === true || isShow === false)) {
+            renderAnimation(isShow);
+        }
+    }, [isShow]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        (cssState === null || cssState === void 0 ? void 0 : cssState.hidden) && cssClasses.push(`hidden`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.enter) && cssClasses.push(`${className}-enter`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.enterStart) && cssClasses.push(`${className}-enter-start`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.enterEnd) && cssClasses.push(`${className}-enter-end`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.leave) && cssClasses.push(`${className}-leave`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.leaveStart) && cssClasses.push(`${className}-leave-start`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.leaveEnd) && cssClasses.push(`${className}-leave-end`);
+        return cssClasses.filter((css) => css).join(" ");
+    };
+    return (React.createElement("div", { ref: transitionConainter, className: getCssClasses() }, children));
+};
+
+var css_248z$B = ".Column-module_column__fcTgl {\n  flex: 1 0 0%; }\n\n@media (max-width: 575.98px) {\n  .Column-module_column__fcTgl {\n    flex: 1; } }\n";
 var styles$B = {"column":"Column-module_column__fcTgl"};
 styleInject(css_248z$B);
 
@@ -864,8 +943,8 @@ const FileInput = (props) => {
         React.createElement("input", Object.assign({ type: "file", ref: inputFileElement, className: getCssClasses(), id: id, name: name, multiple: multiple, accept: accept, disabled: disabled, readOnly: readOnly, hidden: true, onChange: handleOnChange, value: model }, rest))));
 };
 
-var css_248z$y = ".Select-module_selectContainer__DHFDZ {\n  position: relative; }\n\n.Select-module_select__Fbn38 {\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  color: #212529;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid #ced4da;\n  appearance: none;\n  border-radius: 0.25rem;\n  box-shadow: inset 0 1px 2px #00000013;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  align-items: center;\n  min-height: calc(1.5em + 0.75rem + 2px);\n  height: auto;\n  display: flex; }\n  .Select-module_select__Fbn38:hover {\n    cursor: pointer; }\n  .Select-module_select__Fbn38:focus:not(.Select-module_select__Fbn38.Select-module_disabled__2XXut) {\n    color: #212529;\n    background-color: #fff;\n    border-color: #86b7fe;\n    outline: 0;\n    box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n  .Select-module_select__Fbn38.Select-module_disabled__2XXut, .Select-module_select__Fbn38.Select-module_readOnly__VoTER {\n    background-color: #e9ecef; }\n  .Select-module_select__Fbn38.Select-module_disabled__2XXut:hover {\n    cursor: not-allowed; }\n  .Select-module_select__Fbn38.Select-module_readOnly__VoTER:hover {\n    cursor: inherit; }\n\n.Select-module_selectMenu__8y4kQ {\n  background-color: var(--light);\n  position: absolute;\n  box-shadow: var(--shadow);\n  border-radius: var(--borderRadius);\n  width: 100%;\n  top: 2px;\n  z-index: 1112;\n  max-height: 280px;\n  overflow: auto; }\n";
-var styles$y = {"selectContainer":"Select-module_selectContainer__DHFDZ","select":"Select-module_select__Fbn38","disabled":"Select-module_disabled__2XXut","readOnly":"Select-module_readOnly__VoTER","selectMenu":"Select-module_selectMenu__8y4kQ"};
+var css_248z$y = ".Select-module_selectContainer__DHFDZ {\n  position: relative; }\n\n.Select-module_select__Fbn38 {\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  color: #212529;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid #ced4da;\n  appearance: none;\n  border-radius: 0.25rem;\n  box-shadow: inset 0 1px 2px #00000013;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  align-items: center;\n  min-height: calc(1.5em + 0.75rem + 2px);\n  height: auto;\n  display: flex;\n  flex-wrap: wrap; }\n  .Select-module_select__Fbn38 > span {\n    flex: 1; }\n  .Select-module_select__Fbn38:hover {\n    cursor: pointer; }\n  .Select-module_select__Fbn38:focus:not(.Select-module_select__Fbn38.Select-module_disabled__2XXut) {\n    color: #212529;\n    background-color: #fff;\n    border-color: #86b7fe;\n    outline: 0;\n    box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n  .Select-module_select__Fbn38.Select-module_disabled__2XXut, .Select-module_select__Fbn38.Select-module_readOnly__VoTER {\n    background-color: #e9ecef; }\n  .Select-module_select__Fbn38.Select-module_disabled__2XXut:hover {\n    cursor: not-allowed; }\n  .Select-module_select__Fbn38.Select-module_readOnly__VoTER:hover {\n    cursor: inherit; }\n\n.Select-module_chipContainer__1poFF {\n  gap: 10px;\n  flex: 1;\n  display: inline-flex;\n  flex-wrap: wrap; }\n\n.Select-module_selectMenu__8y4kQ {\n  background-color: var(--light);\n  position: absolute;\n  box-shadow: var(--shadow);\n  border-radius: var(--borderRadius);\n  width: 100%;\n  top: 2px;\n  z-index: 1112;\n  max-height: 280px;\n  overflow: auto; }\n";
+var styles$y = {"selectContainer":"Select-module_selectContainer__DHFDZ","select":"Select-module_select__Fbn38","disabled":"Select-module_disabled__2XXut","readOnly":"Select-module_readOnly__VoTER","chipContainer":"Select-module_chipContainer__1poFF","selectMenu":"Select-module_selectMenu__8y4kQ"};
 styleInject(css_248z$y);
 
 const Select = (props) => {
@@ -961,7 +1040,7 @@ const Select = (props) => {
         let result = null;
         if (selectedOptions.length <= multipleMaxCountItems && selectedOptions.length > 0) {
             result = selectedOptions
-                .map(option => React.createElement(Chip, { key: option.value, className: "mr-2", color: COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, option) }, option.label));
+                .map(option => React.createElement(Chip, { key: option.value, color: COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, option) }, option.label));
         }
         else {
             result = React.createElement("span", null,
@@ -1006,8 +1085,9 @@ const Select = (props) => {
     return (React.createElement("div", { ref: selectConainter, className: styles$y.selectContainer },
         React.createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
             !multiple && renderSingleViewModel(),
-            multiple && renderMultipleViewModel(),
-            React.createElement(Icon, { className: "ml-auto" },
+            multiple &&
+                React.createElement("div", { className: styles$y.chipContainer }, renderMultipleViewModel()),
+            React.createElement(Icon, { className: "ml-2" },
                 React.createElement(ChevronDownSolidIcon, null))),
         isShow &&
             createPortal(React.createElement(React.Fragment, null,
@@ -1415,7 +1495,7 @@ const DateSelect = (props) => {
 // 	return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
 // };
 
-var css_248z$u = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 280px;\n  overflow-y: auto; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n    position: inherit;\n    z-index: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n    order: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n    order: 2; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n    box-shadow: var(--shadow); }\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden; }\n";
+var css_248z$u = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 320px;\n  overflow-y: auto; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n    position: inherit;\n    z-index: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n    order: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n    order: 2; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n    box-shadow: var(--shadow); }\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden; }\n";
 var styles$u = {"drawer":"Drawer-module_drawer__kdQCk","permanent":"Drawer-module_permanent__c-y8y","left":"Drawer-module_left__loQVO","right":"Drawer-module_right__sJ3mZ","shadow":"Drawer-module_shadow__Myo3n","drawerOpen":"Drawer-module_drawerOpen__07ptP"};
 styleInject(css_248z$u);
 
@@ -1608,16 +1688,17 @@ const ExpansionPanel = (props) => {
             React.createElement(ExpansionPanelContent, null, children)));
 };
 
-var css_248z$m = ".FloatingActionButton-module_fab__Rw3kd {\n  box-shadow: var(--shadow); }\n  .FloatingActionButton-module_fab__Rw3kd.FloatingActionButton-module_fixed__XQOkG {\n    position: fixed;\n    bottom: 16px;\n    right: 16px;\n    z-index: 1000; }\n";
-var styles$m = {"fab":"FloatingActionButton-module_fab__Rw3kd","fixed":"FloatingActionButton-module_fixed__XQOkG"};
+var css_248z$m = ".FloatingActionButton-module_fab__Rw3kd {\n  box-shadow: var(--shadow); }\n\n.FloatingActionButton-module_fixed__XQOkG {\n  position: fixed;\n  z-index: 1000; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftTop__ZiHQN {\n    top: 16px;\n    left: 16px; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftBottom__210sl {\n    bottom: 16px;\n    left: 16px; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightTop__VUsvT {\n    top: 64px;\n    right: 16px; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightBottom__FaUFl {\n    bottom: 16px;\n    right: 16px; }\n";
+var styles$m = {"fab":"FloatingActionButton-module_fab__Rw3kd","fixed":"FloatingActionButton-module_fixed__XQOkG","leftTop":"FloatingActionButton-module_leftTop__ZiHQN","leftBottom":"FloatingActionButton-module_leftBottom__210sl","rightTop":"FloatingActionButton-module_rightTop__VUsvT","rightBottom":"FloatingActionButton-module_rightBottom__FaUFl"};
 styleInject(css_248z$m);
 
 const FloatingActionButton = (props) => {
-    const { className, icon, color = COLOR.primary, fixed, size = SIZE.lg, isActive, disabled, onClick } = props;
+    const { className, icon, color = COLOR.primary, fixed, position = 'rightBottom', size = SIZE.lg, isActive, disabled, onClick } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$m.fab);
-        fixed && cssClasses.push(styles$m['fixed']);
+        fixed && cssClasses.push(styles$m.fixed);
+        position && fixed && cssClasses.push(styles$m[position]);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
@@ -2650,4 +2731,4 @@ const TreeItem = (props) => {
         children && _isExpanded ? React.createElement("ul", null, children) : null));
 };
 
-export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeItem, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useConstructor, useCssClasses, useDebounce, useHover, useWindowSize };
+export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, CssTransition, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeItem, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useWindowSize };

package/index.js

@@ -232,23 +232,26 @@ const CircleSolidIcon = () => (React__default["default"].createElement("svg", {
 const ChevronLeftSolidIcon = () => (React__default["default"].createElement("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" },
     React__default["default"].createElement("path", { fill: "currentColor", d: "M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z" })));
 
-function useWindowSize() {
-    const [windowSize, setWindowSize] = React.useState({
-        width: 0,
-        height: 0,
-    });
+function useDebounce(callback, timeout, deps) {
+    const timeoutId = React.useRef();
     React.useEffect(() => {
-        function handleResize() {
-            setWindowSize({
-                width: window.innerWidth,
-                height: window.innerHeight,
-            });
-        }
-        window.addEventListener("resize", handleResize);
-        handleResize();
-        return () => window.removeEventListener("resize", handleResize);
-    }, []);
-    return windowSize;
+        clearTimeout(timeoutId.current);
+        timeoutId.current = setTimeout(callback, timeout);
+        return () => clearTimeout(timeoutId.current);
+    }, deps);
+}
+
+const useConstructor = (callBack) => {
+    const [hasBeenCalled, setHasBeenCalled] = React.useState(false);
+    if (hasBeenCalled)
+        return;
+    callBack();
+    setHasBeenCalled(true);
+};
+
+function useCssClasses(cssClasses) {
+    const cssClassName = (cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || '';
+    return [cssClassName];
 }
 
 function useHover() {
@@ -273,26 +276,37 @@ function useHover() {
     return [ref, value];
 }
 
-const useConstructor = (callBack) => {
-    const [hasBeenCalled, setHasBeenCalled] = React.useState(false);
-    if (hasBeenCalled)
-        return;
-    callBack();
-    setHasBeenCalled(true);
-};
-
-function useDebounce(callback, timeout, deps) {
-    const timeoutId = React.useRef();
+function useWindowSize() {
+    const [windowSize, setWindowSize] = React.useState({
+        width: 0,
+        height: 0,
+    });
     React.useEffect(() => {
-        clearTimeout(timeoutId.current);
-        timeoutId.current = setTimeout(callback, timeout);
-        return () => clearTimeout(timeoutId.current);
-    }, deps);
+        function handleResize() {
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+        window.addEventListener("resize", handleResize);
+        handleResize();
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    return windowSize;
 }
 
-function useCssClasses(cssClasses) {
-    const cssClassName = (cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || '';
-    return [cssClassName];
+function useMobileDetect() {
+    const [isMobile, setIsMobile] = React.useState(false);
+    const windowSize = useWindowSize();
+    const checkIsMobile = (height, width) => {
+        if (height > 0 && width > 0) {
+            setIsMobile(!(width >= 1024));
+        }
+    };
+    React.useEffect(() => {
+        windowSize && checkIsMobile(windowSize.height, windowSize.width);
+    }, [windowSize]);
+    return { isMobile };
 }
 
 var css_248z$X = ".Backdrop-module_backdrop__IRMoL {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  opacity: 0.5;\n  z-index: 1040;\n  top: 0;\n  left: 0;\n  background-color: #000; }\n  .Backdrop-module_backdrop__IRMoL.Backdrop-module_isTransparent__F5nA5 {\n    opacity: 0; }\n";
@@ -760,7 +774,7 @@ const Checkbox = (props) => {
         React__default["default"].createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
 };
 
-var css_248z$C = ".Chip-module_chip__dZ5qz {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.5rem;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: baseline;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  font-size: 75%;\n  font-weight: 700;\n  border-radius: 10rem;\n  line-height: 1; }\n  .Chip-module_chip__dZ5qz svg {\n    width: 18px;\n    height: 18px; }\n  .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx {\n    margin-left: 5px; }\n    .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx:hover {\n      cursor: pointer; }\n  .Chip-module_chip__dZ5qz.Chip-module_primary__YVDi9 {\n    background: var(--primary);\n    color: var(--primary-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_secondary__-e4xP {\n    background: var(--secondary);\n    color: var(--secondary-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_accent__ZCTwu {\n    background: var(--accent);\n    color: var(--accent-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_light__vKs7O {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .Chip-module_chip__dZ5qz.Chip-module_dark__G-FLQ {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n  .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover {\n    cursor: pointer; }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_primary__YVDi9 {\n      background: var(--primary-dark); }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_secondary__-e4xP {\n      background: var(--secondary-dark); }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_accent__ZCTwu {\n      background: var(--accent-dark); }\n  .Chip-module_chip__dZ5qz.Chip-module_shadow__v11NF {\n    box-shadow: var(--shadow); }\n";
+var css_248z$C = ".Chip-module_chip__dZ5qz {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.5rem;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: baseline;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\r box-shadow 0.15s ease-in-out;\n  font-size: 75%;\n  font-weight: 700;\n  border-radius: 10rem;\n  line-height: 1; }\n  .Chip-module_chip__dZ5qz span {\n    margin-bottom: 2px; }\n  .Chip-module_chip__dZ5qz svg {\n    width: 18px;\n    height: 18px; }\n  .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx {\n    margin-left: 5px; }\n    .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx:hover {\n      cursor: pointer; }\n  .Chip-module_chip__dZ5qz.Chip-module_primary__YVDi9 {\n    background: var(--primary);\n    color: var(--primary-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_secondary__-e4xP {\n    background: var(--secondary);\n    color: var(--secondary-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_accent__ZCTwu {\n    background: var(--accent);\n    color: var(--accent-contrast-text); }\n  .Chip-module_chip__dZ5qz.Chip-module_light__vKs7O {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .Chip-module_chip__dZ5qz.Chip-module_dark__G-FLQ {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n  .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover {\n    cursor: pointer; }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_primary__YVDi9 {\n      background: var(--primary-dark); }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_secondary__-e4xP {\n      background: var(--secondary-dark); }\n    .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_accent__ZCTwu {\n      background: var(--accent-dark); }\n  .Chip-module_chip__dZ5qz.Chip-module_shadow__v11NF {\n    box-shadow: var(--shadow); }\n";
 var styles$C = {"chip":"Chip-module_chip__dZ5qz","deleteIcon":"Chip-module_deleteIcon__--rUx","primary":"Chip-module_primary__YVDi9","secondary":"Chip-module_secondary__-e4xP","accent":"Chip-module_accent__ZCTwu","light":"Chip-module_light__vKs7O","dark":"Chip-module_dark__G-FLQ","clickable":"Chip-module_clickable__qAqVH","shadow":"Chip-module_shadow__v11NF"};
 styleInject(css_248z$C);
 
@@ -780,11 +794,76 @@ const Chip = (props) => {
         onDelete && onDelete(e);
     };
     return (React__default["default"].createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
-        React__default["default"].createElement("div", null, children),
+        React__default["default"].createElement("span", null, children),
         isDeletable && (React__default["default"].createElement("div", { className: styles$C.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
 };
 
-var css_248z$B = ".Column-module_column__fcTgl {\n  flex: 1 0 0%; }\n";
+const CssTransition = (props) => {
+    const { className, children, show } = props;
+    const [isShow, setIsShow] = React.useState(undefined);
+    const [cssState, setCssState] = React.useState({
+        hidden: true
+    });
+    const transitionConainter = React.useRef(null);
+    React.useEffect(() => {
+        if (show !== undefined) {
+            setIsShow(show);
+        }
+    }, [show]);
+    const nextFrame = () => {
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(resolve);
+            });
+        });
+    };
+    const afterTransition = (element) => {
+        return new Promise((resolve) => {
+            if (element) {
+                const duration = Number(getComputedStyle(element).transitionDuration.replace("s", "")) * 1000;
+                setTimeout(() => { resolve(); }, duration);
+            }
+            else {
+                resolve();
+            }
+        });
+    };
+    const renderAnimation = async (show) => {
+        if (show === true) {
+            setCssState({ enter: true, enterStart: true });
+            await nextFrame();
+            setCssState({ enter: true, enterEnd: true });
+            await afterTransition(transitionConainter.current);
+            setCssState(undefined);
+        }
+        if (show === false) {
+            setCssState({ leave: true, leaveStart: true });
+            await nextFrame();
+            setCssState({ leave: true, leaveEnd: true });
+            await afterTransition(transitionConainter.current);
+            setCssState({ hidden: true });
+        }
+    };
+    React.useEffect(() => {
+        if (isShow !== undefined && (isShow === true || isShow === false)) {
+            renderAnimation(isShow);
+        }
+    }, [isShow]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        (cssState === null || cssState === void 0 ? void 0 : cssState.hidden) && cssClasses.push(`hidden`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.enter) && cssClasses.push(`${className}-enter`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.enterStart) && cssClasses.push(`${className}-enter-start`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.enterEnd) && cssClasses.push(`${className}-enter-end`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.leave) && cssClasses.push(`${className}-leave`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.leaveStart) && cssClasses.push(`${className}-leave-start`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.leaveEnd) && cssClasses.push(`${className}-leave-end`);
+        return cssClasses.filter((css) => css).join(" ");
+    };
+    return (React__default["default"].createElement("div", { ref: transitionConainter, className: getCssClasses() }, children));
+};
+
+var css_248z$B = ".Column-module_column__fcTgl {\n  flex: 1 0 0%; }\n\n@media (max-width: 575.98px) {\n  .Column-module_column__fcTgl {\n    flex: 1; } }\n";
 var styles$B = {"column":"Column-module_column__fcTgl"};
 styleInject(css_248z$B);
 
@@ -872,8 +951,8 @@ const FileInput = (props) => {
         React__default["default"].createElement("input", Object.assign({ type: "file", ref: inputFileElement, className: getCssClasses(), id: id, name: name, multiple: multiple, accept: accept, disabled: disabled, readOnly: readOnly, hidden: true, onChange: handleOnChange, value: model }, rest))));
 };
 
-var css_248z$y = ".Select-module_selectContainer__DHFDZ {\n  position: relative; }\n\n.Select-module_select__Fbn38 {\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  color: #212529;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid #ced4da;\n  appearance: none;\n  border-radius: 0.25rem;\n  box-shadow: inset 0 1px 2px #00000013;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  align-items: center;\n  min-height: calc(1.5em + 0.75rem + 2px);\n  height: auto;\n  display: flex; }\n  .Select-module_select__Fbn38:hover {\n    cursor: pointer; }\n  .Select-module_select__Fbn38:focus:not(.Select-module_select__Fbn38.Select-module_disabled__2XXut) {\n    color: #212529;\n    background-color: #fff;\n    border-color: #86b7fe;\n    outline: 0;\n    box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n  .Select-module_select__Fbn38.Select-module_disabled__2XXut, .Select-module_select__Fbn38.Select-module_readOnly__VoTER {\n    background-color: #e9ecef; }\n  .Select-module_select__Fbn38.Select-module_disabled__2XXut:hover {\n    cursor: not-allowed; }\n  .Select-module_select__Fbn38.Select-module_readOnly__VoTER:hover {\n    cursor: inherit; }\n\n.Select-module_selectMenu__8y4kQ {\n  background-color: var(--light);\n  position: absolute;\n  box-shadow: var(--shadow);\n  border-radius: var(--borderRadius);\n  width: 100%;\n  top: 2px;\n  z-index: 1112;\n  max-height: 280px;\n  overflow: auto; }\n";
-var styles$y = {"selectContainer":"Select-module_selectContainer__DHFDZ","select":"Select-module_select__Fbn38","disabled":"Select-module_disabled__2XXut","readOnly":"Select-module_readOnly__VoTER","selectMenu":"Select-module_selectMenu__8y4kQ"};
+var css_248z$y = ".Select-module_selectContainer__DHFDZ {\n  position: relative; }\n\n.Select-module_select__Fbn38 {\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  color: #212529;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid #ced4da;\n  appearance: none;\n  border-radius: 0.25rem;\n  box-shadow: inset 0 1px 2px #00000013;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  align-items: center;\n  min-height: calc(1.5em + 0.75rem + 2px);\n  height: auto;\n  display: flex;\n  flex-wrap: wrap; }\n  .Select-module_select__Fbn38 > span {\n    flex: 1; }\n  .Select-module_select__Fbn38:hover {\n    cursor: pointer; }\n  .Select-module_select__Fbn38:focus:not(.Select-module_select__Fbn38.Select-module_disabled__2XXut) {\n    color: #212529;\n    background-color: #fff;\n    border-color: #86b7fe;\n    outline: 0;\n    box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n  .Select-module_select__Fbn38.Select-module_disabled__2XXut, .Select-module_select__Fbn38.Select-module_readOnly__VoTER {\n    background-color: #e9ecef; }\n  .Select-module_select__Fbn38.Select-module_disabled__2XXut:hover {\n    cursor: not-allowed; }\n  .Select-module_select__Fbn38.Select-module_readOnly__VoTER:hover {\n    cursor: inherit; }\n\n.Select-module_chipContainer__1poFF {\n  gap: 10px;\n  flex: 1;\n  display: inline-flex;\n  flex-wrap: wrap; }\n\n.Select-module_selectMenu__8y4kQ {\n  background-color: var(--light);\n  position: absolute;\n  box-shadow: var(--shadow);\n  border-radius: var(--borderRadius);\n  width: 100%;\n  top: 2px;\n  z-index: 1112;\n  max-height: 280px;\n  overflow: auto; }\n";
+var styles$y = {"selectContainer":"Select-module_selectContainer__DHFDZ","select":"Select-module_select__Fbn38","disabled":"Select-module_disabled__2XXut","readOnly":"Select-module_readOnly__VoTER","chipContainer":"Select-module_chipContainer__1poFF","selectMenu":"Select-module_selectMenu__8y4kQ"};
 styleInject(css_248z$y);
 
 const Select = (props) => {
@@ -969,7 +1048,7 @@ const Select = (props) => {
         let result = null;
         if (selectedOptions.length <= multipleMaxCountItems && selectedOptions.length > 0) {
             result = selectedOptions
-                .map(option => React__default["default"].createElement(Chip, { key: option.value, className: "mr-2", color: exports.COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, option) }, option.label));
+                .map(option => React__default["default"].createElement(Chip, { key: option.value, color: exports.COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, option) }, option.label));
         }
         else {
             result = React__default["default"].createElement("span", null,
@@ -1014,8 +1093,9 @@ const Select = (props) => {
     return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$y.selectContainer },
         React__default["default"].createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
             !multiple && renderSingleViewModel(),
-            multiple && renderMultipleViewModel(),
-            React__default["default"].createElement(Icon, { className: "ml-auto" },
+            multiple &&
+                React__default["default"].createElement("div", { className: styles$y.chipContainer }, renderMultipleViewModel()),
+            React__default["default"].createElement(Icon, { className: "ml-2" },
                 React__default["default"].createElement(ChevronDownSolidIcon, null))),
         isShow &&
             reactDom.createPortal(React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -1423,7 +1503,7 @@ const DateSelect = (props) => {
 // 	return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
 // };
 
-var css_248z$u = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 280px;\n  overflow-y: auto; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n    position: inherit;\n    z-index: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n    order: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n    order: 2; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n    box-shadow: var(--shadow); }\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden; }\n";
+var css_248z$u = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 320px;\n  overflow-y: auto; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n    position: inherit;\n    z-index: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n    order: 0; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n    order: 2; }\n  .Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n    box-shadow: var(--shadow); }\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden; }\n";
 var styles$u = {"drawer":"Drawer-module_drawer__kdQCk","permanent":"Drawer-module_permanent__c-y8y","left":"Drawer-module_left__loQVO","right":"Drawer-module_right__sJ3mZ","shadow":"Drawer-module_shadow__Myo3n","drawerOpen":"Drawer-module_drawerOpen__07ptP"};
 styleInject(css_248z$u);
 
@@ -1616,16 +1696,17 @@ const ExpansionPanel = (props) => {
             React__default["default"].createElement(ExpansionPanelContent, null, children)));
 };
 
-var css_248z$m = ".FloatingActionButton-module_fab__Rw3kd {\n  box-shadow: var(--shadow); }\n  .FloatingActionButton-module_fab__Rw3kd.FloatingActionButton-module_fixed__XQOkG {\n    position: fixed;\n    bottom: 16px;\n    right: 16px;\n    z-index: 1000; }\n";
-var styles$m = {"fab":"FloatingActionButton-module_fab__Rw3kd","fixed":"FloatingActionButton-module_fixed__XQOkG"};
+var css_248z$m = ".FloatingActionButton-module_fab__Rw3kd {\n  box-shadow: var(--shadow); }\n\n.FloatingActionButton-module_fixed__XQOkG {\n  position: fixed;\n  z-index: 1000; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftTop__ZiHQN {\n    top: 16px;\n    left: 16px; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftBottom__210sl {\n    bottom: 16px;\n    left: 16px; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightTop__VUsvT {\n    top: 64px;\n    right: 16px; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightBottom__FaUFl {\n    bottom: 16px;\n    right: 16px; }\n";
+var styles$m = {"fab":"FloatingActionButton-module_fab__Rw3kd","fixed":"FloatingActionButton-module_fixed__XQOkG","leftTop":"FloatingActionButton-module_leftTop__ZiHQN","leftBottom":"FloatingActionButton-module_leftBottom__210sl","rightTop":"FloatingActionButton-module_rightTop__VUsvT","rightBottom":"FloatingActionButton-module_rightBottom__FaUFl"};
 styleInject(css_248z$m);
 
 const FloatingActionButton = (props) => {
-    const { className, icon, color = exports.COLOR.primary, fixed, size = exports.SIZE.lg, isActive, disabled, onClick } = props;
+    const { className, icon, color = exports.COLOR.primary, fixed, position = 'rightBottom', size = exports.SIZE.lg, isActive, disabled, onClick } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$m.fab);
-        fixed && cssClasses.push(styles$m['fixed']);
+        fixed && cssClasses.push(styles$m.fixed);
+        position && fixed && cssClasses.push(styles$m[position]);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
@@ -2687,6 +2768,7 @@ exports.Chip = Chip;
 exports.CircleSolidIcon = CircleSolidIcon;
 exports.Column = Column;
 exports.ConditionalWrapper = ConditionalWrapper;
+exports.CssTransition = CssTransition;
 exports.DateSelect = DateSelect;
 exports.DaySelect = DaySelect;
 exports.Drawer = Drawer;
@@ -2771,4 +2853,5 @@ exports.useConstructor = useConstructor;
 exports.useCssClasses = useCssClasses;
 exports.useDebounce = useDebounce;
 exports.useHover = useHover;
+exports.useMobileDetect = useMobileDetect;
 exports.useWindowSize = useWindowSize;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-asc",
-	"version": "21.3.0",
+	"version": "23.0.0",
 	"description": "handcrafted react components",
 	"main": "index.js",
 	"module": "index.es.js",

package/readme.md

@@ -47,6 +47,7 @@ const MyApp = () => {
 -   Card
 -   Checkbox
 -   Chip
+-	CssTransition
 -   ConditionalWrapper
 -   DateSelect
 -   Drawer