react-asc 23.6.1 → 23.7.2

package/components/Backdrop/Backdrop.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-interface IBackdropProps extends React.ComponentProps<'div'> {
+export interface IBackdropProps extends React.ComponentProps<'div'> {
     target?: HTMLElement;
     isTransparent?: boolean;
 }
-export declare const Backdrop: (props: IBackdropProps) => React.ReactPortal;
-export {};
+export declare const Backdrop: (props: IBackdropProps) => JSX.Element;

package/components/Drawer/Drawer.d.ts

@@ -6,4 +6,4 @@ export interface IDrawerProps extends React.ComponentProps<'div'> {
     permanent?: boolean;
     target?: HTMLElement;
 }
-export declare const Drawer: (props: IDrawerProps) => React.ReactPortal;
+export declare const Drawer: (props: IDrawerProps) => JSX.Element;

package/components/Menu/MenuBody.d.ts

@@ -9,4 +9,4 @@ export interface IMenuBodyProps {
     shadow?: boolean;
     onClickBackdrop?: () => void;
 }
-export declare const MenuBody: (props: IMenuBodyProps) => React.ReactPortal;
+export declare const MenuBody: (props: IMenuBodyProps) => JSX.Element;

package/components/Modal/Modal.d.ts

@@ -1,9 +1,10 @@
 import { ReactElement, ReactNode } from 'react';
 import { SIZE } from '../component.enums';
 export interface IModalProps {
+    target?: HTMLElement;
     className?: string;
     children?: ReactNode;
-    header?: string;
+    header?: string | ReactElement;
     footer?: string | ReactElement;
     onHeaderCloseClick?: () => void;
     onBackdropClick?: () => void;

package/components/Portal/Portal.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface IPortalProps {
+    children: React.ReactNode;
+    target?: HTMLElement;
+    className?: string;
+}
+export declare const Portal: ({ children, target, className }: IPortalProps) => import("react").ReactPortal;

package/components/Portal/index.d.ts

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

package/components/index.d.ts

@@ -26,6 +26,7 @@ export * from './List';
 export * from './LoadingIndicator';
 export * from './Modal';
 export * from './NumberSelect';
+export * from './Portal';
 export * from './ProgressBar';
 export * from './Sidebar';
 export * from './Snackbar';

package/index.es.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, createContext, useContext, Fragment, Component, createRef, cloneElement } from 'react';
+import React, { useRef, useEffect, useState, useMemo, createContext, useContext, Fragment, Component, createRef, cloneElement } from 'react';
 import { createPortal, render, unmountComponentAtNode } from 'react-dom';
 import { createPopper } from '@popperjs/core';
 
@@ -308,6 +308,18 @@ const useOnDestroy = (callBack) => {
     }, []);
 };
 
+const Portal = ({ children, target = document.body, className }) => {
+    const containerEl = useMemo(() => document.createElement('div'), []);
+    useEffect(() => {
+        className && className.split(' ').forEach(cssClass => containerEl.classList.add(cssClass));
+        target.appendChild(containerEl);
+        return () => {
+            target.removeChild(containerEl);
+        };
+    }, []);
+    return createPortal(children, containerEl);
+};
+
 var css_248z$10 = ".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}\n.Backdrop-module_backdrop__IRMoL.Backdrop-module_isTransparent__F5nA5 {\n  opacity: 0;\n}";
 var styles$10 = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
 styleInject(css_248z$10);
@@ -325,10 +337,10 @@ const Backdrop = (props) => {
         return cssClasses.filter(css => css).join(' ');
     };
     const getStyles = () => {
-        const styles = Object.assign({ height: '100%', width: '100%', position: 'absolute' }, style);
-        return styles;
+        return Object.assign({ height: '100%', width: '100%', position: 'absolute' }, style);
     };
-    return (createPortal(React.createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest)), target));
+    return (React.createElement(Portal, { className: 'backdrop-root', target: target },
+        React.createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest))));
 };
 
 var css_248z$$ = ".List-module_list__gpZ41 {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  padding-left: 0;\n  margin-bottom: 0;\n  margin-top: 0;\n  background-color: var(--white);\n}";
@@ -1116,13 +1128,13 @@ const Select = (props) => {
             React.createElement(Icon, { className: "ml-2" },
                 React.createElement(ChevronDownSolidIcon, null))),
         isShow &&
-            createPortal(React.createElement(React.Fragment, null,
+            React.createElement(Portal, { className: 'backdrop-root' },
                 React.createElement("div", { className: styles$D.selectMenu, style: { left: (_a = selectConainter.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().x, top: (_b = selectConainter.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().y, width: (_c = selectConainter.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width } },
                     React.createElement(List, null, options && options.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), active: isActive(option) },
                         multiple &&
                             React.createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
                         React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
-                React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body)));
+                React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() }))));
 };
 
 var css_248z$C = ".Textarea-module_textarea__L5zqa {\n  min-height: calc(10em + 0.75rem + 2px);\n  display: block;\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  background-clip: padding-box;\n  border: 2px solid var(--input-border-color);\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border-radius: var(--borderRadius);\n  resize: vertical;\n  color: #212529;\n  background-color: #fff;\n  background-clip: padding-box;\n  appearance: none;\n  border-radius: 0.25rem;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039);\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  border: 1px solid #ced4da;\n}\n.Textarea-module_textarea__L5zqa:focus:not(.Textarea-module_textarea__L5zqa.Textarea-module_disabled__OqqOF) {\n  outline: none !important;\n  border-color: var(--primary);\n}\n.Textarea-module_textarea__L5zqa.Textarea-module_isInvalid__JI01W {\n  border-color: #dc3545;\n  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.2509803922);\n}";
@@ -1550,9 +1562,9 @@ const Drawer = (props) => {
     const handleClickBackdrop = () => {
         onClickBackdrop && onClickBackdrop();
     };
-    return createPortal(React.createElement(React.Fragment, null,
+    return (React.createElement(Portal, { className: 'drawer-root', target: target },
         React.createElement(DrawerContent, Object.assign({ className: className, position: position, permanent: permanent, shadow: shadow }, rest), children),
-        !permanent && React.createElement(Backdrop, { onClick: handleClickBackdrop })), target);
+        !permanent && React.createElement(Backdrop, { onClick: handleClickBackdrop })));
 };
 const DrawerContent = (props) => {
     const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
@@ -1616,9 +1628,9 @@ const MenuBody = (props) => {
     const handleClickBackdrop = () => {
         onClickBackdrop && onClickBackdrop();
     };
-    return (createPortal(React.createElement(React.Fragment, null,
+    return (React.createElement(Portal, { className: 'menu-root' },
         React.createElement("div", { ref: menuBodyRef, className: getCssClasses() }, children),
-        React.createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })), document.body));
+        React.createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })));
 };
 
 var css_248z$x = ".Menu-module_menu__p8QL- {\n  display: flex;\n}";
@@ -1846,7 +1858,7 @@ var styles$l = {"modal":"Modal-module_modal__HMxWV","modal-dialog":"Modal-module
 styleInject(css_248z$l);
 
 const Modal = (props) => {
-    const { className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
+    const { target = document.body, className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
     const getCssClass = () => {
         const cssClasses = [];
         cssClasses.push(styles$l.modalDialog);
@@ -1863,17 +1875,19 @@ const Modal = (props) => {
         };
     }, []);
     const handleClickBackdrop = () => {
+        console.warn('backdrop clicked');
         onBackdropClick && onBackdropClick();
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: styles$l.modal },
-            React.createElement("div", { className: getCssClass() },
-                React.createElement("div", { className: styles$l.modalContent },
-                    header &&
-                        React.createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
-                    React.createElement(ModalBody, null, children),
-                    footer &&
-                        React.createElement(ModalFooter, null, footer)))),
+        React.createElement(Portal, { className: 'modal-root', target: target },
+            React.createElement("div", { className: styles$l.modal },
+                React.createElement("div", { className: getCssClass() },
+                    React.createElement("div", { className: styles$l.modalContent },
+                        header &&
+                            React.createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
+                        React.createElement(ModalBody, null, children),
+                        footer &&
+                            React.createElement(ModalFooter, null, footer))))),
         React.createElement(Backdrop, { onClick: handleClickBackdrop })));
 };
 
@@ -2033,7 +2047,7 @@ const Tooltip = (props) => {
                 React.createElement("div", { id: "arrow", "data-popper-arrow": true }))));
 };
 
-var css_248z$j = ".ProgressBar-module_progressBarContainer__vtbBw {\n  display: flex;\n  height: var(--progress-height);\n  overflow: hidden;\n  background-color: var(--progress-bg);\n}\n\n.ProgressBar-module_progressBar__hr8I8 {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n  color: var(--progress-bar-color);\n  text-align: center;\n  white-space: nowrap;\n  transition: var(--progress-bar-transition);\n  background-color: var(--progress-bar-bg);\n}\n.ProgressBar-module_progressBar__hr8I8.ProgressBar-module_indeterminate__WcQdD {\n  width: 100%;\n  height: 100%;\n  animation: ProgressBar-module_indeterminateAnimation__SlBFt 1s infinite linear;\n  transform-origin: 0% 50%;\n}\n\n@keyframes ProgressBar-module_indeterminateAnimation__SlBFt {\n  0% {\n    transform: translateX(0) scaleX(0);\n  }\n  40% {\n    transform: translateX(0) scaleX(0.4);\n  }\n  100% {\n    transform: translateX(100%) scaleX(0.5);\n  }\n}";
+var css_248z$j = ":root {\n  --progress-height: 0.5rem;\n  --progress-bg: #e9ecef;\n  --progress-box-shadow: var(--shadow);\n  --progress-bar-color: #fff;\n  --progress-bar-bg: var(--primary);\n  --progress-bar-transition: width 0.6s ease;\n}\n\n.ProgressBar-module_progressBarContainer__vtbBw {\n  display: flex;\n  height: var(--progress-height);\n  overflow: hidden;\n  background-color: var(--progress-bg);\n}\n\n.ProgressBar-module_progressBar__hr8I8 {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n  color: var(--progress-bar-color);\n  text-align: center;\n  white-space: nowrap;\n  transition: var(--progress-bar-transition);\n  background-color: var(--progress-bar-bg);\n}\n.ProgressBar-module_progressBar__hr8I8.ProgressBar-module_indeterminate__WcQdD {\n  width: 100%;\n  height: 100%;\n  animation: ProgressBar-module_indeterminateAnimation__SlBFt 1s infinite linear;\n  transform-origin: 0% 50%;\n}\n\n@keyframes ProgressBar-module_indeterminateAnimation__SlBFt {\n  0% {\n    transform: translateX(0) scaleX(0);\n  }\n  40% {\n    transform: translateX(0) scaleX(0.4);\n  }\n  100% {\n    transform: translateX(100%) scaleX(0.5);\n  }\n}";
 var styles$j = {"progressBarContainer":"ProgressBar-module_progressBarContainer__vtbBw","progressBar":"ProgressBar-module_progressBar__hr8I8","indeterminate":"ProgressBar-module_indeterminate__WcQdD","indeterminateAnimation":"ProgressBar-module_indeterminateAnimation__SlBFt"};
 styleInject(css_248z$j);
 
@@ -2072,7 +2086,7 @@ const ProgressBar = (props) => {
         }
         return `${width}%`;
     };
-    return (React.createElement(Tooltip, { text: model === null || model === void 0 ? void 0 : model.toString() },
+    return (React.createElement(Tooltip, { text: !indeterminate ? model === null || model === void 0 ? void 0 : model.toString() : '' },
         React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
             React.createElement("div", { className: getCssClassesBar(), style: { 'width': getStyle() }, role: "progressbar" }))));
 };
@@ -2554,8 +2568,8 @@ const SkeletonImage = (props) => {
         React.createElement("div", { className: styles$6.img })));
 };
 
-var css_248z$5 = ".Table-module_table__DHKNv {\n  --bs-table-bg: transparent;\n  --bs-table-accent-bg: transparent;\n  --bs-table-striped-color: #212529;\n  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);\n  --bs-table-active-color: #212529;\n  --bs-table-active-bg: rgba(0, 0, 0, 0.1);\n  --bs-table-hover-color: #212529;\n  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);\n  width: 100%;\n  margin-bottom: 1rem;\n  color: #212529;\n  vertical-align: top;\n  border-color: #dee2e6;\n}\n.Table-module_table__DHKNv thead {\n  vertical-align: bottom;\n}\n.Table-module_table__DHKNv > :not(caption) > * > * {\n  padding: 0.5rem 0.5rem;\n  background-color: var(--bs-table-bg);\n  border-bottom-width: 1px;\n  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);\n}\n.Table-module_table__DHKNv > :not(:first-child) {\n  border-top: 2px solid currentColor;\n}\n\n.Table-module_bordered__1Kp1p > :not(caption) > * > * {\n  border-width: 0 1px;\n}\n.Table-module_bordered__1Kp1p > :not(caption) > * {\n  border-width: 1px 0;\n}\n\n.Table-module_striped__jmxgE > tbody > tr:nth-of-type(odd) > * {\n  --bs-table-accent-bg: var(--bs-table-striped-bg);\n  color: var(--bs-table-striped-color);\n}\n\n.Table-module_hover__P6r3y > tbody > tr:hover > * {\n  --bs-table-accent-bg: var(--bs-table-hover-bg);\n  color: var(--bs-table-hover-color);\n}\n\n.Table-module_tableResponsive__ykttB {\n  overflow-x: auto;\n}";
-var styles$5 = {"table":"Table-module_table__DHKNv","bordered":"Table-module_bordered__1Kp1p","striped":"Table-module_striped__jmxgE","hover":"Table-module_hover__P6r3y","tableResponsive":"Table-module_tableResponsive__ykttB"};
+var css_248z$5 = ":root {\n  --table-bg: transparent;\n  --table-accent-bg: transparent;\n  --table-striped-color: #212529;\n  --table-striped-bg: rgba(0, 0, 0, 0.05);\n  --table-active-color: #212529;\n  --table-active-bg: rgba(0, 0, 0, 0.1);\n  --table-hover-color: #212529;\n  --table-hover-bg: rgba(0, 0, 0, 0.075);\n}\n\n.Table-module_tableResponsive__ykttB {\n  overflow-x: auto;\n}\n\n.Table-module_table__DHKNv {\n  display: table;\n  width: 100%;\n  border-collapse: collapse;\n  border-spacing: 0px;\n  min-width: 650px;\n}\n.Table-module_table__DHKNv thead {\n  display: table-header-group;\n}\n.Table-module_table__DHKNv tbody {\n  display: table-row-group;\n}\n.Table-module_table__DHKNv tr {\n  color: inherit;\n  display: table-row;\n  vertical-align: middle;\n  outline: 0px;\n}\n.Table-module_table__DHKNv th {\n  font-size: 0.875rem;\n  line-height: 1.5rem;\n  letter-spacing: 0.01071em;\n  display: table-cell;\n  vertical-align: inherit;\n  border-bottom: 1px solid rgb(224, 224, 224);\n  text-align: left;\n  padding: 16px;\n  color: rgba(0, 0, 0, 0.87);\n  border-collapse: collapse;\n  border-spacing: 0px;\n}\n.Table-module_table__DHKNv td {\n  font-size: 0.875rem;\n  line-height: 1.43;\n  letter-spacing: 0.01071em;\n  display: table-cell;\n  vertical-align: inherit;\n  border-bottom: 1px solid rgb(224, 224, 224);\n  padding: 16px;\n  color: rgba(0, 0, 0, 0.87);\n  flex-direction: row-reverse;\n}\n\n.Table-module_hover__P6r3y > tbody > tr:hover > * {\n  background-color: var(--table-hover-bg);\n  color: var(--table-hover-color);\n}";
+var styles$5 = {"tableResponsive":"Table-module_tableResponsive__ykttB","table":"Table-module_table__DHKNv","hover":"Table-module_hover__P6r3y"};
 styleInject(css_248z$5);
 
 const Table = (props) => {
@@ -2878,4 +2892,4 @@ const TreeItem = (props) => {
         children && _isExpanded ? React.createElement("ul", null, children) : null));
 };
 
-export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, 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, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinValidator, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, ProgressBar, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, SkeletonAvatar, SkeletonFooter, SkeletonImage, SkeletonText, 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, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, useWindowSize };
+export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, 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, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinValidator, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Portal, ProgressBar, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, SkeletonAvatar, SkeletonFooter, SkeletonImage, SkeletonText, 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, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, useWindowSize };

package/index.js

@@ -316,6 +316,18 @@ const useOnDestroy = (callBack) => {
     }, []);
 };
 
+const Portal = ({ children, target = document.body, className }) => {
+    const containerEl = React.useMemo(() => document.createElement('div'), []);
+    React.useEffect(() => {
+        className && className.split(' ').forEach(cssClass => containerEl.classList.add(cssClass));
+        target.appendChild(containerEl);
+        return () => {
+            target.removeChild(containerEl);
+        };
+    }, []);
+    return reactDom.createPortal(children, containerEl);
+};
+
 var css_248z$10 = ".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}\n.Backdrop-module_backdrop__IRMoL.Backdrop-module_isTransparent__F5nA5 {\n  opacity: 0;\n}";
 var styles$10 = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
 styleInject(css_248z$10);
@@ -333,10 +345,10 @@ const Backdrop = (props) => {
         return cssClasses.filter(css => css).join(' ');
     };
     const getStyles = () => {
-        const styles = Object.assign({ height: '100%', width: '100%', position: 'absolute' }, style);
-        return styles;
+        return Object.assign({ height: '100%', width: '100%', position: 'absolute' }, style);
     };
-    return (reactDom.createPortal(React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest)), target));
+    return (React__default["default"].createElement(Portal, { className: 'backdrop-root', target: target },
+        React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest))));
 };
 
 var css_248z$$ = ".List-module_list__gpZ41 {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  padding-left: 0;\n  margin-bottom: 0;\n  margin-top: 0;\n  background-color: var(--white);\n}";
@@ -1124,13 +1136,13 @@ const Select = (props) => {
             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,
+            React__default["default"].createElement(Portal, { className: 'backdrop-root' },
                 React__default["default"].createElement("div", { className: styles$D.selectMenu, style: { left: (_a = selectConainter.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().x, top: (_b = selectConainter.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().y, width: (_c = selectConainter.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width } },
                     React__default["default"].createElement(List, null, options && options.map((option, index) => React__default["default"].createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), active: isActive(option) },
                         multiple &&
                             React__default["default"].createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
                         React__default["default"].createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
-                React__default["default"].createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body)));
+                React__default["default"].createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() }))));
 };
 
 var css_248z$C = ".Textarea-module_textarea__L5zqa {\n  min-height: calc(10em + 0.75rem + 2px);\n  display: block;\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  background-clip: padding-box;\n  border: 2px solid var(--input-border-color);\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border-radius: var(--borderRadius);\n  resize: vertical;\n  color: #212529;\n  background-color: #fff;\n  background-clip: padding-box;\n  appearance: none;\n  border-radius: 0.25rem;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039);\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  border: 1px solid #ced4da;\n}\n.Textarea-module_textarea__L5zqa:focus:not(.Textarea-module_textarea__L5zqa.Textarea-module_disabled__OqqOF) {\n  outline: none !important;\n  border-color: var(--primary);\n}\n.Textarea-module_textarea__L5zqa.Textarea-module_isInvalid__JI01W {\n  border-color: #dc3545;\n  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.2509803922);\n}";
@@ -1558,9 +1570,9 @@ const Drawer = (props) => {
     const handleClickBackdrop = () => {
         onClickBackdrop && onClickBackdrop();
     };
-    return reactDom.createPortal(React__default["default"].createElement(React__default["default"].Fragment, null,
+    return (React__default["default"].createElement(Portal, { className: 'drawer-root', target: target },
         React__default["default"].createElement(DrawerContent, Object.assign({ className: className, position: position, permanent: permanent, shadow: shadow }, rest), children),
-        !permanent && React__default["default"].createElement(Backdrop, { onClick: handleClickBackdrop })), target);
+        !permanent && React__default["default"].createElement(Backdrop, { onClick: handleClickBackdrop })));
 };
 const DrawerContent = (props) => {
     const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
@@ -1624,9 +1636,9 @@ const MenuBody = (props) => {
     const handleClickBackdrop = () => {
         onClickBackdrop && onClickBackdrop();
     };
-    return (reactDom.createPortal(React__default["default"].createElement(React__default["default"].Fragment, null,
+    return (React__default["default"].createElement(Portal, { className: 'menu-root' },
         React__default["default"].createElement("div", { ref: menuBodyRef, className: getCssClasses() }, children),
-        React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })), document.body));
+        React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })));
 };
 
 var css_248z$x = ".Menu-module_menu__p8QL- {\n  display: flex;\n}";
@@ -1854,7 +1866,7 @@ var styles$l = {"modal":"Modal-module_modal__HMxWV","modal-dialog":"Modal-module
 styleInject(css_248z$l);
 
 const Modal = (props) => {
-    const { className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
+    const { target = document.body, className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
     const getCssClass = () => {
         const cssClasses = [];
         cssClasses.push(styles$l.modalDialog);
@@ -1871,17 +1883,19 @@ const Modal = (props) => {
         };
     }, []);
     const handleClickBackdrop = () => {
+        console.warn('backdrop clicked');
         onBackdropClick && onBackdropClick();
     };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: styles$l.modal },
-            React__default["default"].createElement("div", { className: getCssClass() },
-                React__default["default"].createElement("div", { className: styles$l.modalContent },
-                    header &&
-                        React__default["default"].createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
-                    React__default["default"].createElement(ModalBody, null, children),
-                    footer &&
-                        React__default["default"].createElement(ModalFooter, null, footer)))),
+        React__default["default"].createElement(Portal, { className: 'modal-root', target: target },
+            React__default["default"].createElement("div", { className: styles$l.modal },
+                React__default["default"].createElement("div", { className: getCssClass() },
+                    React__default["default"].createElement("div", { className: styles$l.modalContent },
+                        header &&
+                            React__default["default"].createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
+                        React__default["default"].createElement(ModalBody, null, children),
+                        footer &&
+                            React__default["default"].createElement(ModalFooter, null, footer))))),
         React__default["default"].createElement(Backdrop, { onClick: handleClickBackdrop })));
 };
 
@@ -2041,7 +2055,7 @@ const Tooltip = (props) => {
                 React__default["default"].createElement("div", { id: "arrow", "data-popper-arrow": true }))));
 };
 
-var css_248z$j = ".ProgressBar-module_progressBarContainer__vtbBw {\n  display: flex;\n  height: var(--progress-height);\n  overflow: hidden;\n  background-color: var(--progress-bg);\n}\n\n.ProgressBar-module_progressBar__hr8I8 {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n  color: var(--progress-bar-color);\n  text-align: center;\n  white-space: nowrap;\n  transition: var(--progress-bar-transition);\n  background-color: var(--progress-bar-bg);\n}\n.ProgressBar-module_progressBar__hr8I8.ProgressBar-module_indeterminate__WcQdD {\n  width: 100%;\n  height: 100%;\n  animation: ProgressBar-module_indeterminateAnimation__SlBFt 1s infinite linear;\n  transform-origin: 0% 50%;\n}\n\n@keyframes ProgressBar-module_indeterminateAnimation__SlBFt {\n  0% {\n    transform: translateX(0) scaleX(0);\n  }\n  40% {\n    transform: translateX(0) scaleX(0.4);\n  }\n  100% {\n    transform: translateX(100%) scaleX(0.5);\n  }\n}";
+var css_248z$j = ":root {\n  --progress-height: 0.5rem;\n  --progress-bg: #e9ecef;\n  --progress-box-shadow: var(--shadow);\n  --progress-bar-color: #fff;\n  --progress-bar-bg: var(--primary);\n  --progress-bar-transition: width 0.6s ease;\n}\n\n.ProgressBar-module_progressBarContainer__vtbBw {\n  display: flex;\n  height: var(--progress-height);\n  overflow: hidden;\n  background-color: var(--progress-bg);\n}\n\n.ProgressBar-module_progressBar__hr8I8 {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n  color: var(--progress-bar-color);\n  text-align: center;\n  white-space: nowrap;\n  transition: var(--progress-bar-transition);\n  background-color: var(--progress-bar-bg);\n}\n.ProgressBar-module_progressBar__hr8I8.ProgressBar-module_indeterminate__WcQdD {\n  width: 100%;\n  height: 100%;\n  animation: ProgressBar-module_indeterminateAnimation__SlBFt 1s infinite linear;\n  transform-origin: 0% 50%;\n}\n\n@keyframes ProgressBar-module_indeterminateAnimation__SlBFt {\n  0% {\n    transform: translateX(0) scaleX(0);\n  }\n  40% {\n    transform: translateX(0) scaleX(0.4);\n  }\n  100% {\n    transform: translateX(100%) scaleX(0.5);\n  }\n}";
 var styles$j = {"progressBarContainer":"ProgressBar-module_progressBarContainer__vtbBw","progressBar":"ProgressBar-module_progressBar__hr8I8","indeterminate":"ProgressBar-module_indeterminate__WcQdD","indeterminateAnimation":"ProgressBar-module_indeterminateAnimation__SlBFt"};
 styleInject(css_248z$j);
 
@@ -2080,7 +2094,7 @@ const ProgressBar = (props) => {
         }
         return `${width}%`;
     };
-    return (React__default["default"].createElement(Tooltip, { text: model === null || model === void 0 ? void 0 : model.toString() },
+    return (React__default["default"].createElement(Tooltip, { text: !indeterminate ? model === null || model === void 0 ? void 0 : model.toString() : '' },
         React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
             React__default["default"].createElement("div", { className: getCssClassesBar(), style: { 'width': getStyle() }, role: "progressbar" }))));
 };
@@ -2562,8 +2576,8 @@ const SkeletonImage = (props) => {
         React__default["default"].createElement("div", { className: styles$6.img })));
 };
 
-var css_248z$5 = ".Table-module_table__DHKNv {\n  --bs-table-bg: transparent;\n  --bs-table-accent-bg: transparent;\n  --bs-table-striped-color: #212529;\n  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);\n  --bs-table-active-color: #212529;\n  --bs-table-active-bg: rgba(0, 0, 0, 0.1);\n  --bs-table-hover-color: #212529;\n  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);\n  width: 100%;\n  margin-bottom: 1rem;\n  color: #212529;\n  vertical-align: top;\n  border-color: #dee2e6;\n}\n.Table-module_table__DHKNv thead {\n  vertical-align: bottom;\n}\n.Table-module_table__DHKNv > :not(caption) > * > * {\n  padding: 0.5rem 0.5rem;\n  background-color: var(--bs-table-bg);\n  border-bottom-width: 1px;\n  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);\n}\n.Table-module_table__DHKNv > :not(:first-child) {\n  border-top: 2px solid currentColor;\n}\n\n.Table-module_bordered__1Kp1p > :not(caption) > * > * {\n  border-width: 0 1px;\n}\n.Table-module_bordered__1Kp1p > :not(caption) > * {\n  border-width: 1px 0;\n}\n\n.Table-module_striped__jmxgE > tbody > tr:nth-of-type(odd) > * {\n  --bs-table-accent-bg: var(--bs-table-striped-bg);\n  color: var(--bs-table-striped-color);\n}\n\n.Table-module_hover__P6r3y > tbody > tr:hover > * {\n  --bs-table-accent-bg: var(--bs-table-hover-bg);\n  color: var(--bs-table-hover-color);\n}\n\n.Table-module_tableResponsive__ykttB {\n  overflow-x: auto;\n}";
-var styles$5 = {"table":"Table-module_table__DHKNv","bordered":"Table-module_bordered__1Kp1p","striped":"Table-module_striped__jmxgE","hover":"Table-module_hover__P6r3y","tableResponsive":"Table-module_tableResponsive__ykttB"};
+var css_248z$5 = ":root {\n  --table-bg: transparent;\n  --table-accent-bg: transparent;\n  --table-striped-color: #212529;\n  --table-striped-bg: rgba(0, 0, 0, 0.05);\n  --table-active-color: #212529;\n  --table-active-bg: rgba(0, 0, 0, 0.1);\n  --table-hover-color: #212529;\n  --table-hover-bg: rgba(0, 0, 0, 0.075);\n}\n\n.Table-module_tableResponsive__ykttB {\n  overflow-x: auto;\n}\n\n.Table-module_table__DHKNv {\n  display: table;\n  width: 100%;\n  border-collapse: collapse;\n  border-spacing: 0px;\n  min-width: 650px;\n}\n.Table-module_table__DHKNv thead {\n  display: table-header-group;\n}\n.Table-module_table__DHKNv tbody {\n  display: table-row-group;\n}\n.Table-module_table__DHKNv tr {\n  color: inherit;\n  display: table-row;\n  vertical-align: middle;\n  outline: 0px;\n}\n.Table-module_table__DHKNv th {\n  font-size: 0.875rem;\n  line-height: 1.5rem;\n  letter-spacing: 0.01071em;\n  display: table-cell;\n  vertical-align: inherit;\n  border-bottom: 1px solid rgb(224, 224, 224);\n  text-align: left;\n  padding: 16px;\n  color: rgba(0, 0, 0, 0.87);\n  border-collapse: collapse;\n  border-spacing: 0px;\n}\n.Table-module_table__DHKNv td {\n  font-size: 0.875rem;\n  line-height: 1.43;\n  letter-spacing: 0.01071em;\n  display: table-cell;\n  vertical-align: inherit;\n  border-bottom: 1px solid rgb(224, 224, 224);\n  padding: 16px;\n  color: rgba(0, 0, 0, 0.87);\n  flex-direction: row-reverse;\n}\n\n.Table-module_hover__P6r3y > tbody > tr:hover > * {\n  background-color: var(--table-hover-bg);\n  color: var(--table-hover-color);\n}";
+var styles$5 = {"tableResponsive":"Table-module_tableResponsive__ykttB","table":"Table-module_table__DHKNv","hover":"Table-module_hover__P6r3y"};
 styleInject(css_248z$5);
 
 const Table = (props) => {
@@ -2965,6 +2979,7 @@ exports.ModalHeader = ModalHeader;
 exports.MonthSelect = MonthSelect;
 exports.NumberSelect = NumberSelect;
 exports.PlusSolidIcon = PlusSolidIcon;
+exports.Portal = Portal;
 exports.ProgressBar = ProgressBar;
 exports.Row = Row;
 exports.STATUS = STATUS;

package/package.json

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

package/react-asc.scss

@@ -212,17 +212,6 @@
 	}
 }
 
-:root {
-	--progress-height: 0.5rem;
-	// --progress-font-size: 0.75rem;
-	--progress-bg: #e9ecef;
-	// --progress-border-radius: 0.375rem;
-	--progress-box-shadow: var(--shadow);
-	--progress-bar-color: #fff;
-	--progress-bar-bg: var(--primary);
-	--progress-bar-transition: width 0.6s ease;
-}
-
 :root {
 	--borderRadius: 5px;
 	--0: 0px !important;
@@ -248,6 +237,10 @@
 	color: var(--muted);
 }
 
+.flex-1 {
+	flex: 1;
+}
+
 .d-flex {
 	display: flex !important;
 }
@@ -288,8 +281,6 @@
 	height: 100%;
 }
 
-
-
 .text-center {
 	text-align: center;
 }

package/readme.md

@@ -69,8 +69,10 @@ react-asc provides built-in ts definition
 -   Menu
 -   Modal + ModalService
 -   NumberSelect
+	Portal
 -   Select
 -   Sidebar
+-	Skeleton (Avatar, Image, Text, SkeletonFooter)
 -   Snackbar + SnackbarService
 -   SpeedDial
 -   Stepper (beta)

package/components/Menu/MenuBackdrop.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-interface IMenuBackdropProps {
-    onClick?: () => void;
-}
-export declare const MenuBackdrop: ({ onClick }: IMenuBackdropProps) => React.ReactPortal;
-export {};