react-asc 23.7.0 → 23.7.1

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/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/index.es.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, createContext, useContext, Fragment, Component, createRef, useMemo, 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}";
@@ -1535,18 +1547,6 @@ const DateSelect = (props) => {
 // 	return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
 // };
 
-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$z = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 320px;\n  overflow-y: auto;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n  position: inherit;\n  z-index: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n  order: 0;\n  left: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n  order: 2;\n  right: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n  box-shadow: var(--shadow);\n}\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden;\n}";
 var styles$z = {"drawer":"Drawer-module_drawer__kdQCk","permanent":"Drawer-module_permanent__c-y8y","left":"Drawer-module_left__loQVO","right":"Drawer-module_right__sJ3mZ","shadow":"Drawer-module_shadow__Myo3n","drawerOpen":"Drawer-module_drawerOpen__07ptP"};
 styleInject(css_248z$z);
@@ -1562,7 +1562,7 @@ const Drawer = (props) => {
     const handleClickBackdrop = () => {
         onClickBackdrop && onClickBackdrop();
     };
-    return (React.createElement(Portal, { className: 'drawer-container', target: target },
+    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 })));
 };
@@ -1628,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}";
@@ -1858,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);
@@ -1875,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 })));
 };
 
@@ -2045,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);
 
@@ -2566,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) => {

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}";
@@ -1543,18 +1555,6 @@ const DateSelect = (props) => {
 // 	return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
 // };
 
-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$z = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 320px;\n  overflow-y: auto;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n  position: inherit;\n  z-index: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n  order: 0;\n  left: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n  order: 2;\n  right: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n  box-shadow: var(--shadow);\n}\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden;\n}";
 var styles$z = {"drawer":"Drawer-module_drawer__kdQCk","permanent":"Drawer-module_permanent__c-y8y","left":"Drawer-module_left__loQVO","right":"Drawer-module_right__sJ3mZ","shadow":"Drawer-module_shadow__Myo3n","drawerOpen":"Drawer-module_drawerOpen__07ptP"};
 styleInject(css_248z$z);
@@ -1570,7 +1570,7 @@ const Drawer = (props) => {
     const handleClickBackdrop = () => {
         onClickBackdrop && onClickBackdrop();
     };
-    return (React__default["default"].createElement(Portal, { className: 'drawer-container', target: target },
+    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 })));
 };
@@ -1636,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}";
@@ -1866,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);
@@ -1883,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 })));
 };
 
@@ -2053,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);
 
@@ -2574,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) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-asc",
-	"version": "23.7.0",
+	"version": "23.7.1",
 	"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;

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 {};