react-asc 23.1.0 → 23.3.1

package/components/CssTransition/CssTransition.d.ts

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

package/components/Typography/Typography.d.ts

@@ -3,8 +3,10 @@ export interface IWrapperProps {
     as?: string;
     children: React.ReactNode;
     className?: string;
+    wrap?: boolean;
 }
 export interface ITypographyProps extends React.ComponentProps<"span"> {
     as?: string;
+    wrap?: boolean;
 }
-export declare const Typography: ({ children, as, ...rest }: ITypographyProps) => JSX.Element;
+export declare const Typography: ({ children, as, wrap, ...rest }: ITypographyProps) => JSX.Element;

package/hooks/index.d.ts

@@ -4,3 +4,4 @@ export * from './useCssClasses';
 export * from './useHover';
 export * from './useMobileDetect';
 export * from './useWindowSize';
+export * from './useOnDestroy';

package/hooks/useOnDestroy.d.ts

@@ -0,0 +1 @@
+export declare const useOnDestroy: (callBack: () => void) => void;

package/index.es.js

@@ -242,8 +242,7 @@ const useConstructor = (callBack) => {
 };
 
 function useCssClasses(cssClasses) {
-    const cssClassName = (cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || '';
-    return [cssClassName];
+    return [(cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || ''];
 }
 
 function useHover() {
@@ -301,6 +300,14 @@ function useMobileDetect() {
     return { isMobile };
 }
 
+const useOnDestroy = (callBack) => {
+    useEffect(() => {
+        return () => {
+            callBack();
+        };
+    }, []);
+};
+
 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";
 var styles$X = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
 styleInject(css_248z$X);
@@ -498,21 +505,22 @@ styleInject(css_248z$P);
 
 const Badge = (props) => {
     const { children, content, className, color = COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
-    const getCssClassesBadgeContainer = () => {
-        const cssClasses = [];
-        cssClasses.push(styles$P.badgeContainer);
-        className && cssClasses.push(className);
-        return cssClasses.filter(css => css).join(' ');
-    };
-    const getCssClassesBadge = () => {
-        const cssClasses = [];
-        cssClasses.push(styles$P.badge);
-        cssClasses.push(styles$P[color]);
-        return cssClasses.filter(css => css).join(' ');
-    };
-    return (React.createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
+    const [cssClassName] = useCssClasses([
+        styles$P.badge,
+        styles$P[color],
+        className
+    ]);
+    return (React.createElement(BadgeContainer, null,
         children,
-        React.createElement("span", { className: getCssClassesBadge() }, content)));
+        React.createElement("span", Object.assign({ className: cssClassName }, rest), content)));
+};
+const BadgeContainer = (props) => {
+    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const [cssClassName] = useCssClasses([
+        styles$P.badgeContainer,
+        className,
+    ]);
+    return (React.createElement("div", Object.assign({ className: cssClassName }, rest), children));
 };
 
 var css_248z$O = ".Button-module_button__qeIer {\n  text-transform: uppercase;\n  flex-shrink: 0;\n  background-color: transparent;\n  display: inline-block;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  user-select: none;\n  border: 1px solid transparent;\n  padding: 0.375rem 0.75rem;\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  min-width: 64px;\n  font-size: 0.875rem;\n  border-radius: var(--borderRadius); }\n  .Button-module_button__qeIer.Button-module_shadow__6N2nE {\n    box-shadow: var(--shadow); }\n  .Button-module_button__qeIer.Button-module_block__JIazf {\n    width: 100%; }\n  .Button-module_button__qeIer:hover:not(:disabled) {\n    cursor: pointer; }\n  .Button-module_button__qeIer:focus:not(:disabled) {\n    border-color: #86b7fe;\n    outline: 0;\n    box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary); }\n  .Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover:not(:disabled) {\n    background-color: var(--primary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent); }\n  .Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover:not(:disabled) {\n    background-color: var(--accent-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary); }\n  .Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover:not(:disabled) {\n    background-color: var(--secondary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy {\n  color: var(--light-contrast-text);\n  background-color: var(--light); }\n  .Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover:not(:disabled) {\n    background-color: var(--light-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark); }\n  .Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover:not(:disabled) {\n    background-color: var(--dark-dark); }\n\n.Button-module_btnContained__16y5l:disabled {\n  color: rgba(0, 0, 0, 0.26);\n  box-shadow: none;\n  background-color: rgba(0, 0, 0, 0.12); }\n  .Button-module_btnContained__16y5l:disabled:hover {\n    cursor: not-allowed; }\n\n.Button-module_btnText__N5Gys {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n    color: var(--primary); }\n    .Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--primary-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n    color: var(--secondary); }\n    .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--secondary-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n    color: var(--accent); }\n    .Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--accent-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n    color: var(--light-contrast-text); }\n    .Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--light-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n    color: var(--dark); }\n    .Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--dark-highlight); }\n\n.Button-module_btnOutline__CCFPI {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n    color: var(--primary);\n    border-color: var(--primary); }\n    .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover:not(:disabled) {\n      background: var(--primary-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n    color: var(--secondary);\n    border-color: var(--secondary); }\n    .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover:not(:disabled) {\n      background: var(--secondary-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n    color: var(--accent);\n    border-color: var(--accent); }\n    .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover:not(:disabled) {\n      background: var(--accent-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n    color: var(--light-contrast-text);\n    border-color: var(--light); }\n    .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover:not(:disabled) {\n      background: var(--light-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n    color: var(--dark);\n    border-color: var(--dark); }\n    .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover:not(:disabled) {\n      background: var(--dark-highlight); }\n  .Button-module_btnOutline__CCFPI:disabled {\n    color: rgba(0, 0, 0, 0.26);\n    border: 1px solid rgba(0, 0, 0, 0.12); }\n\n.Button-module_startIcon__Eylwr {\n  display: inherit;\n  margin-left: -4px;\n  margin-right: 8px; }\n  .Button-module_startIcon__Eylwr svg {\n    width: 18px;\n    height: 18px; }\n\n.Button-module_endIcon__pCffL {\n  display: inherit;\n  margin-left: 8px; }\n  .Button-module_endIcon__pCffL svg {\n    width: 18px;\n    height: 18px; }\n";
@@ -792,14 +800,22 @@ const Chip = (props) => {
 
 const CssTransition = (props) => {
     const { className, children, show } = props;
+    const [isInit, setIsInit] = useState(false);
+    const [isRenderChild, setIsRenderChild] = useState(undefined);
     const [isShow, setIsShow] = useState(undefined);
     const [cssState, setCssState] = useState({
         hidden: true
     });
     const transitionConainter = useRef(null);
     useEffect(() => {
-        if (show !== undefined) {
+        if (isInit && show !== undefined) {
             setIsShow(show);
+            if (show === true) {
+                setIsRenderChild(true);
+            }
+        }
+        if (!isInit) {
+            setIsInit(true);
         }
     }, [show]);
     const nextFrame = () => {
@@ -834,6 +850,7 @@ const CssTransition = (props) => {
             setCssState({ leave: true, leaveEnd: true });
             await afterTransition(transitionConainter.current);
             setCssState({ hidden: true });
+            setIsRenderChild(false);
         }
     };
     useEffect(() => {
@@ -852,7 +869,8 @@ const CssTransition = (props) => {
         (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));
+    return (React.createElement(React.Fragment, null, isRenderChild &&
+        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";
@@ -2301,24 +2319,25 @@ 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  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"};
+var css_248z$8 = ".Typography-module_typography__sw-td {\n  font-family: var(--fontFamily); }\n  .Typography-module_typography__sw-td.Typography-module_wrap__W7G0R {\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","wrap":"Typography-module_wrap__W7G0R"};
 styleInject(css_248z$8);
 
 const Wrapper = (props) => {
-    const { as = 'span', children, className } = props, rest = __rest(props, ["as", "children", "className"]);
+    const { as = 'span', wrap, children, className } = props, rest = __rest(props, ["as", "wrap", "children", "className"]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$8.typography);
         cssClasses.push(styles$8.as);
+        wrap && cssClasses.push(styles$8.wrap);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     return React.createElement(as, Object.assign(Object.assign({}, rest), { className: getCssClasses() }), children);
 };
 const Typography = (_a) => {
-    var { children, as = 'span' } = _a, rest = __rest(_a, ["children", "as"]);
-    return (React.createElement(Wrapper, Object.assign({ as: as }, rest), children));
+    var { children, as = 'span', wrap } = _a, rest = __rest(_a, ["children", "as", "wrap"]);
+    return (React.createElement(Wrapper, Object.assign({ as: as, wrap: wrap }, rest), children));
 };
 
 var css_248z$7 = ".Step-module_stepWrapper__IQwq1 {\n  display: flex;\n  align-items: center;\n  padding-left: 8px;\n  padding-right: 8px;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .Step-module_stepWrapper__IQwq1.Step-module_hasLabel__LZNvd:not(.Step-module_disabled__JnxUP):hover {\n    cursor: pointer;\n    background-color: rgba(0, 0, 0, 0.04);\n    border-radius: var(--borderRadius); }\n\n.Step-module_step__k42go {\n  width: 40px;\n  height: 40px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .Step-module_step__k42go:not(.Step-module_hasLabel__LZNvd):not(.Step-module_disabled__JnxUP):hover {\n    border-radius: 100%;\n    cursor: pointer;\n    background-color: rgba(0, 0, 0, 0.04); }\n  .Step-module_step__k42go.Step-module_hasLabel__LZNvd svg {\n    width: 18px !important;\n    height: 18px !important; }\n\n.Step-module_stepIconCircle__hnxIV svg {\n  width: 24px;\n  height: 24px; }\n\n.Step-module_stepValue__B0-xv {\n  position: absolute;\n  color: var(--secondary-contrast-text); }\n  .Step-module_stepValue__B0-xv .Step-module_isActive__3GGcl {\n    color: var(--primary-contrast-text); }\n";
@@ -2732,4 +2751,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, 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 };
+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, useOnDestroy, useWindowSize };

package/index.js

@@ -250,8 +250,7 @@ const useConstructor = (callBack) => {
 };
 
 function useCssClasses(cssClasses) {
-    const cssClassName = (cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || '';
-    return [cssClassName];
+    return [(cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || ''];
 }
 
 function useHover() {
@@ -309,6 +308,14 @@ function useMobileDetect() {
     return { isMobile };
 }
 
+const useOnDestroy = (callBack) => {
+    React.useEffect(() => {
+        return () => {
+            callBack();
+        };
+    }, []);
+};
+
 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";
 var styles$X = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
 styleInject(css_248z$X);
@@ -506,21 +513,22 @@ styleInject(css_248z$P);
 
 const Badge = (props) => {
     const { children, content, className, color = exports.COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
-    const getCssClassesBadgeContainer = () => {
-        const cssClasses = [];
-        cssClasses.push(styles$P.badgeContainer);
-        className && cssClasses.push(className);
-        return cssClasses.filter(css => css).join(' ');
-    };
-    const getCssClassesBadge = () => {
-        const cssClasses = [];
-        cssClasses.push(styles$P.badge);
-        cssClasses.push(styles$P[color]);
-        return cssClasses.filter(css => css).join(' ');
-    };
-    return (React__default["default"].createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
+    const [cssClassName] = useCssClasses([
+        styles$P.badge,
+        styles$P[color],
+        className
+    ]);
+    return (React__default["default"].createElement(BadgeContainer, null,
         children,
-        React__default["default"].createElement("span", { className: getCssClassesBadge() }, content)));
+        React__default["default"].createElement("span", Object.assign({ className: cssClassName }, rest), content)));
+};
+const BadgeContainer = (props) => {
+    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const [cssClassName] = useCssClasses([
+        styles$P.badgeContainer,
+        className,
+    ]);
+    return (React__default["default"].createElement("div", Object.assign({ className: cssClassName }, rest), children));
 };
 
 var css_248z$O = ".Button-module_button__qeIer {\n  text-transform: uppercase;\n  flex-shrink: 0;\n  background-color: transparent;\n  display: inline-block;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  user-select: none;\n  border: 1px solid transparent;\n  padding: 0.375rem 0.75rem;\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  min-width: 64px;\n  font-size: 0.875rem;\n  border-radius: var(--borderRadius); }\n  .Button-module_button__qeIer.Button-module_shadow__6N2nE {\n    box-shadow: var(--shadow); }\n  .Button-module_button__qeIer.Button-module_block__JIazf {\n    width: 100%; }\n  .Button-module_button__qeIer:hover:not(:disabled) {\n    cursor: pointer; }\n  .Button-module_button__qeIer:focus:not(:disabled) {\n    border-color: #86b7fe;\n    outline: 0;\n    box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary); }\n  .Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover:not(:disabled) {\n    background-color: var(--primary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent); }\n  .Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover:not(:disabled) {\n    background-color: var(--accent-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary); }\n  .Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover:not(:disabled) {\n    background-color: var(--secondary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy {\n  color: var(--light-contrast-text);\n  background-color: var(--light); }\n  .Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover:not(:disabled) {\n    background-color: var(--light-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark); }\n  .Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover:not(:disabled) {\n    background-color: var(--dark-dark); }\n\n.Button-module_btnContained__16y5l:disabled {\n  color: rgba(0, 0, 0, 0.26);\n  box-shadow: none;\n  background-color: rgba(0, 0, 0, 0.12); }\n  .Button-module_btnContained__16y5l:disabled:hover {\n    cursor: not-allowed; }\n\n.Button-module_btnText__N5Gys {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n    color: var(--primary); }\n    .Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--primary-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n    color: var(--secondary); }\n    .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--secondary-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n    color: var(--accent); }\n    .Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--accent-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n    color: var(--light-contrast-text); }\n    .Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--light-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n    color: var(--dark); }\n    .Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--dark-highlight); }\n\n.Button-module_btnOutline__CCFPI {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n    color: var(--primary);\n    border-color: var(--primary); }\n    .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover:not(:disabled) {\n      background: var(--primary-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n    color: var(--secondary);\n    border-color: var(--secondary); }\n    .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover:not(:disabled) {\n      background: var(--secondary-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n    color: var(--accent);\n    border-color: var(--accent); }\n    .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover:not(:disabled) {\n      background: var(--accent-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n    color: var(--light-contrast-text);\n    border-color: var(--light); }\n    .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover:not(:disabled) {\n      background: var(--light-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n    color: var(--dark);\n    border-color: var(--dark); }\n    .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover:not(:disabled) {\n      background: var(--dark-highlight); }\n  .Button-module_btnOutline__CCFPI:disabled {\n    color: rgba(0, 0, 0, 0.26);\n    border: 1px solid rgba(0, 0, 0, 0.12); }\n\n.Button-module_startIcon__Eylwr {\n  display: inherit;\n  margin-left: -4px;\n  margin-right: 8px; }\n  .Button-module_startIcon__Eylwr svg {\n    width: 18px;\n    height: 18px; }\n\n.Button-module_endIcon__pCffL {\n  display: inherit;\n  margin-left: 8px; }\n  .Button-module_endIcon__pCffL svg {\n    width: 18px;\n    height: 18px; }\n";
@@ -800,14 +808,22 @@ const Chip = (props) => {
 
 const CssTransition = (props) => {
     const { className, children, show } = props;
+    const [isInit, setIsInit] = React.useState(false);
+    const [isRenderChild, setIsRenderChild] = React.useState(undefined);
     const [isShow, setIsShow] = React.useState(undefined);
     const [cssState, setCssState] = React.useState({
         hidden: true
     });
     const transitionConainter = React.useRef(null);
     React.useEffect(() => {
-        if (show !== undefined) {
+        if (isInit && show !== undefined) {
             setIsShow(show);
+            if (show === true) {
+                setIsRenderChild(true);
+            }
+        }
+        if (!isInit) {
+            setIsInit(true);
         }
     }, [show]);
     const nextFrame = () => {
@@ -842,6 +858,7 @@ const CssTransition = (props) => {
             setCssState({ leave: true, leaveEnd: true });
             await afterTransition(transitionConainter.current);
             setCssState({ hidden: true });
+            setIsRenderChild(false);
         }
     };
     React.useEffect(() => {
@@ -860,7 +877,8 @@ const CssTransition = (props) => {
         (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));
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, isRenderChild &&
+        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";
@@ -2309,24 +2327,25 @@ 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  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"};
+var css_248z$8 = ".Typography-module_typography__sw-td {\n  font-family: var(--fontFamily); }\n  .Typography-module_typography__sw-td.Typography-module_wrap__W7G0R {\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","wrap":"Typography-module_wrap__W7G0R"};
 styleInject(css_248z$8);
 
 const Wrapper = (props) => {
-    const { as = 'span', children, className } = props, rest = __rest(props, ["as", "children", "className"]);
+    const { as = 'span', wrap, children, className } = props, rest = __rest(props, ["as", "wrap", "children", "className"]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$8.typography);
         cssClasses.push(styles$8.as);
+        wrap && cssClasses.push(styles$8.wrap);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     return React__default["default"].createElement(as, Object.assign(Object.assign({}, rest), { className: getCssClasses() }), children);
 };
 const Typography = (_a) => {
-    var { children, as = 'span' } = _a, rest = __rest(_a, ["children", "as"]);
-    return (React__default["default"].createElement(Wrapper, Object.assign({ as: as }, rest), children));
+    var { children, as = 'span', wrap } = _a, rest = __rest(_a, ["children", "as", "wrap"]);
+    return (React__default["default"].createElement(Wrapper, Object.assign({ as: as, wrap: wrap }, rest), children));
 };
 
 var css_248z$7 = ".Step-module_stepWrapper__IQwq1 {\n  display: flex;\n  align-items: center;\n  padding-left: 8px;\n  padding-right: 8px;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .Step-module_stepWrapper__IQwq1.Step-module_hasLabel__LZNvd:not(.Step-module_disabled__JnxUP):hover {\n    cursor: pointer;\n    background-color: rgba(0, 0, 0, 0.04);\n    border-radius: var(--borderRadius); }\n\n.Step-module_step__k42go {\n  width: 40px;\n  height: 40px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .Step-module_step__k42go:not(.Step-module_hasLabel__LZNvd):not(.Step-module_disabled__JnxUP):hover {\n    border-radius: 100%;\n    cursor: pointer;\n    background-color: rgba(0, 0, 0, 0.04); }\n  .Step-module_step__k42go.Step-module_hasLabel__LZNvd svg {\n    width: 18px !important;\n    height: 18px !important; }\n\n.Step-module_stepIconCircle__hnxIV svg {\n  width: 24px;\n  height: 24px; }\n\n.Step-module_stepValue__B0-xv {\n  position: absolute;\n  color: var(--secondary-contrast-text); }\n  .Step-module_stepValue__B0-xv .Step-module_isActive__3GGcl {\n    color: var(--primary-contrast-text); }\n";
@@ -2855,4 +2874,5 @@ exports.useCssClasses = useCssClasses;
 exports.useDebounce = useDebounce;
 exports.useHover = useHover;
 exports.useMobileDetect = useMobileDetect;
+exports.useOnDestroy = useOnDestroy;
 exports.useWindowSize = useWindowSize;

package/package.json

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