react-asc 21.3.1 → 23.1.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/ExpansionPanel/ExpansionPanel.d.ts

@@ -3,6 +3,7 @@ export interface IExpansionPanelProps {
     header: ReactNode;
     children: ReactNode;
     isExpanded?: boolean;
+    shadow?: boolean;
     onChange?: (event: React.MouseEvent, isExpanded: boolean) => void;
 }
 export declare const ExpansionPanel: (props: IExpansionPanelProps) => JSX.Element;

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";
@@ -557,7 +571,7 @@ const ButtonGroup = (props) => {
     return (React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
 };
 
-var css_248z$M = ".Breadcrumb-module_breadcrumb__-pvAn {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0;\n  margin-bottom: 0;\n  list-style: none;\n  margin-bottom: 1rem; }\n";
+var css_248z$M = ".Breadcrumb-module_breadcrumb__-pvAn {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0;\n  list-style: none;\n  margin: 0; }\n";
 var styles$M = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
 styleInject(css_248z$M);
 
@@ -776,6 +790,71 @@ const Chip = (props) => {
         isDeletable && (React.createElement("div", { className: styles$C.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
 };
 
+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);
@@ -1581,12 +1660,12 @@ const ExpansionPanelHeader = (props) => {
             React.createElement(Icon, null, isExpanded ? React.createElement(ChevronUpSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null)))));
 };
 
-var css_248z$n = ".ExpansionPanel-module_expansionPanel__m1yQq {\n  background-color: var(--white);\n  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\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  .ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px; }\n  .ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n    border-bottom-left-radius: 4px;\n    border-bottom-right-radius: 4px; }\n  .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph {\n    margin: 16px 0; }\n    .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n      margin-top: 0; }\n    .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n      margin-bottom: 0; }\n";
-var styles$n = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
+var css_248z$n = ".ExpansionPanel-module_expansionPanel__m1yQq {\n  background-color: var(--white);\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  .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_shadow__zIjJ6 {\n    box-shadow: var(--shadow); }\n  .ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px; }\n  .ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n    border-bottom-left-radius: 4px;\n    border-bottom-right-radius: 4px; }\n  .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n    margin-top: 0; }\n  .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n    margin-bottom: 0; }\n";
+var styles$n = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","shadow":"ExpansionPanel-module_shadow__zIjJ6","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
 styleInject(css_248z$n);
 
 const ExpansionPanel = (props) => {
-    const { header, children, isExpanded = false, onChange } = props;
+    const { header, children, isExpanded = false, shadow, onChange } = props;
     const [_isExpanded, setIsExpanded] = useState(false);
     useEffect(() => {
         setIsExpanded(isExpanded);
@@ -1597,6 +1676,7 @@ const ExpansionPanel = (props) => {
         if (_isExpanded) {
             cssClasses.push(styles$n.isExpanded);
         }
+        shadow && cssClasses.push(styles$n.shadow);
         return cssClasses.filter(css => css).join(' ');
     };
     const handleClickHeader = (event) => {
@@ -1609,16 +1689,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(' ');
     };
@@ -2220,7 +2301,7 @@ const Stepper = (props) => {
             React.createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
 };
 
-var css_248z$8 = ".Typography-module_typography__sw-td {\n  text-overflow: ellipsis;\n  font-family: var(--fontFamily); }\n\nh1 {\n  font-size: calc(1.375rem + 1.5vw); }\n\nh2 {\n  font-size: calc(1.325rem + 0.9vw); }\n\nh3 {\n  font-size: calc(1.3rem + 0.6vw); }\n\nh4 {\n  font-size: calc(1.275rem + 0.3vw); }\n\nh5 {\n  font-size: 1.25rem; }\n\nh6 {\n  font-size: 1rem; }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: 500 !important;\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  line-height: 1.2; }\n";
+var css_248z$8 = ".Typography-module_typography__sw-td {\n  font-family: var(--fontFamily);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis; }\n\nh1 {\n  font-size: calc(1.375rem + 1.5vw); }\n\nh2 {\n  font-size: calc(1.325rem + 0.9vw); }\n\nh3 {\n  font-size: calc(1.3rem + 0.6vw); }\n\nh4 {\n  font-size: calc(1.275rem + 0.3vw); }\n\nh5 {\n  font-size: 1.25rem; }\n\nh6 {\n  font-size: 1rem; }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: 500 !important;\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  line-height: 1.2; }\n";
 var styles$8 = {"typography":"Typography-module_typography__sw-td"};
 styleInject(css_248z$8);
 
@@ -2651,4 +2732,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";
@@ -565,7 +579,7 @@ const ButtonGroup = (props) => {
     return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
 };
 
-var css_248z$M = ".Breadcrumb-module_breadcrumb__-pvAn {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0;\n  margin-bottom: 0;\n  list-style: none;\n  margin-bottom: 1rem; }\n";
+var css_248z$M = ".Breadcrumb-module_breadcrumb__-pvAn {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0;\n  list-style: none;\n  margin: 0; }\n";
 var styles$M = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
 styleInject(css_248z$M);
 
@@ -784,6 +798,71 @@ const Chip = (props) => {
         isDeletable && (React__default["default"].createElement("div", { className: styles$C.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
 };
 
+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);
@@ -1589,12 +1668,12 @@ const ExpansionPanelHeader = (props) => {
             React__default["default"].createElement(Icon, null, isExpanded ? React__default["default"].createElement(ChevronUpSolidIcon, null) : React__default["default"].createElement(ChevronDownSolidIcon, null)))));
 };
 
-var css_248z$n = ".ExpansionPanel-module_expansionPanel__m1yQq {\n  background-color: var(--white);\n  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\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  .ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px; }\n  .ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n    border-bottom-left-radius: 4px;\n    border-bottom-right-radius: 4px; }\n  .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph {\n    margin: 16px 0; }\n    .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n      margin-top: 0; }\n    .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n      margin-bottom: 0; }\n";
-var styles$n = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
+var css_248z$n = ".ExpansionPanel-module_expansionPanel__m1yQq {\n  background-color: var(--white);\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  .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_shadow__zIjJ6 {\n    box-shadow: var(--shadow); }\n  .ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px; }\n  .ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n    border-bottom-left-radius: 4px;\n    border-bottom-right-radius: 4px; }\n  .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n    margin-top: 0; }\n  .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n    margin-bottom: 0; }\n";
+var styles$n = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","shadow":"ExpansionPanel-module_shadow__zIjJ6","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
 styleInject(css_248z$n);
 
 const ExpansionPanel = (props) => {
-    const { header, children, isExpanded = false, onChange } = props;
+    const { header, children, isExpanded = false, shadow, onChange } = props;
     const [_isExpanded, setIsExpanded] = React.useState(false);
     React.useEffect(() => {
         setIsExpanded(isExpanded);
@@ -1605,6 +1684,7 @@ const ExpansionPanel = (props) => {
         if (_isExpanded) {
             cssClasses.push(styles$n.isExpanded);
         }
+        shadow && cssClasses.push(styles$n.shadow);
         return cssClasses.filter(css => css).join(' ');
     };
     const handleClickHeader = (event) => {
@@ -1617,16 +1697,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(' ');
     };
@@ -2228,7 +2309,7 @@ const Stepper = (props) => {
             React__default["default"].createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
 };
 
-var css_248z$8 = ".Typography-module_typography__sw-td {\n  text-overflow: ellipsis;\n  font-family: var(--fontFamily); }\n\nh1 {\n  font-size: calc(1.375rem + 1.5vw); }\n\nh2 {\n  font-size: calc(1.325rem + 0.9vw); }\n\nh3 {\n  font-size: calc(1.3rem + 0.6vw); }\n\nh4 {\n  font-size: calc(1.275rem + 0.3vw); }\n\nh5 {\n  font-size: 1.25rem; }\n\nh6 {\n  font-size: 1rem; }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: 500 !important;\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  line-height: 1.2; }\n";
+var css_248z$8 = ".Typography-module_typography__sw-td {\n  font-family: var(--fontFamily);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis; }\n\nh1 {\n  font-size: calc(1.375rem + 1.5vw); }\n\nh2 {\n  font-size: calc(1.325rem + 0.9vw); }\n\nh3 {\n  font-size: calc(1.3rem + 0.6vw); }\n\nh4 {\n  font-size: calc(1.275rem + 0.3vw); }\n\nh5 {\n  font-size: 1.25rem; }\n\nh6 {\n  font-size: 1rem; }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: 500 !important;\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  line-height: 1.2; }\n";
 var styles$8 = {"typography":"Typography-module_typography__sw-td"};
 styleInject(css_248z$8);
 
@@ -2688,6 +2769,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;
@@ -2772,4 +2854,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.1",
+	"version": "23.1.0",
 	"description": "handcrafted react components",
 	"main": "index.js",
 	"module": "index.es.js",

package/react-asc.scss

@@ -306,6 +306,11 @@
 }
 
 
+* {
+	min-width: 0;
+	min-height: 0;
+}
+
 label.required {
 	&::after {
 		display: inline-block;

package/readme.md

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