react-asc 18.9.2 → 18.9.6

package/components/Grid/Column/Column.d.ts

@@ -1,7 +1,5 @@
-import { ReactNode } from 'react';
-interface IColProps {
-    children?: ReactNode;
-    className?: string;
+import React from 'react';
+interface IColProps extends React.ComponentProps<"div"> {
     xs?: number;
     sm?: number;
     md?: number;

package/components/Grid/Row/Row.d.ts

@@ -1,7 +1,2 @@
-import { ReactNode } from 'react';
-interface IRowProps {
-    children?: ReactNode;
-    className?: string;
-}
-export declare const Row: (props: IRowProps) => JSX.Element;
-export {};
+import React from 'react';
+export declare const Row: (props: React.ComponentProps<"div">) => JSX.Element;

package/components/List/List.d.ts

@@ -1,8 +1,5 @@
-import { ReactElement } from 'react';
-import { IListItemProps } from './ListItem';
-export interface IListProps {
-    children?: ReactElement<IListItemProps> | Array<ReactElement<IListItemProps>>;
-    className?: string;
+import React from 'react';
+export interface IListProps extends React.ComponentProps<"ul"> {
     isFlush?: boolean;
 }
 export declare const List: (props: IListProps) => JSX.Element;

package/components/List/ListItem.d.ts

@@ -1,13 +1,9 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { COLOR } from '../component.enums';
-export interface IListItemProps {
-    id?: string;
-    children?: ReactNode;
+export interface IListItemProps extends React.ComponentProps<"li"> {
     color?: COLOR;
     active?: boolean;
-    className?: string;
     isHoverable?: boolean;
     disabled?: boolean;
-    onClick?: (e: React.MouseEvent) => void;
 }
 export declare const ListItem: (props: IListItemProps) => JSX.Element;

package/components/List/ListItemAction.d.ts

@@ -1,7 +1,2 @@
-import React, { ReactNode } from 'react';
-interface IListItemActionProps {
-    children?: ReactNode;
-    onClick?: (e: React.MouseEvent) => void;
-}
-export declare const ListItemAction: ({ children, onClick }: IListItemActionProps) => JSX.Element;
-export {};
+import React from 'react';
+export declare const ListItemAction: ({ children, onClick, ...rest }: React.ComponentProps<"div">) => JSX.Element;

package/components/List/ListItemAvatar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-interface IListItemAvatarProps {
+interface IListItemAvatarProps extends React.ComponentProps<"div"> {
     avatar: React.SVGProps<SVGSVGElement> | React.ImgHTMLAttributes<HTMLImageElement>;
 }
-export declare const ListItemAvatar: ({ avatar }: IListItemAvatarProps) => JSX.Element;
+export declare const ListItemAvatar: ({ avatar, ...rest }: IListItemAvatarProps) => JSX.Element;
 export {};

package/components/List/ListItemIcon.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-interface IListItemIconProps {
+interface IListItemIconProps extends React.ComponentProps<"div"> {
     icon: React.SVGProps<SVGSVGElement>;
 }
-export declare const ListItemIcon: ({ icon }: IListItemIconProps) => JSX.Element;
+export declare const ListItemIcon: ({ icon, ...rest }: IListItemIconProps) => JSX.Element;
 export {};

package/components/List/ListItemText.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
-interface IListItemTextProps {
+import React, { ReactNode } from 'react';
+interface IListItemTextProps extends React.ComponentProps<"div"> {
     primary: ReactNode;
     secondary?: ReactNode;
 }
-export declare const ListItemText: ({ primary, secondary }: IListItemTextProps) => JSX.Element;
+export declare const ListItemText: ({ primary, secondary, ...rest }: IListItemTextProps) => JSX.Element;
 export {};

package/components/LoadingIndicator/LoadingIndicator.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export interface ILoadingIndicatorProps {
 }
-export declare const LoadingIndicator: () => JSX.Element;
+export declare const LoadingIndicator: ({ ...rest }: React.ComponentProps<"div">) => JSX.Element;

package/components/Sidebar/Sidebar.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from "react";
 import { ISidebarItem } from './sidebar.interfaces';
-interface ISidebarProps {
+interface ISidebarProps extends React.ComponentProps<"nav"> {
     items: Array<ISidebarItem>;
     currentUrl: string;
     onItemClicked: (path: string) => void;

package/components/Textarea/Textarea.d.ts

@@ -1,4 +1,2 @@
 import React from 'react';
-export interface ITextareaProps extends React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
-}
-export declare const Textarea: (props: ITextareaProps) => JSX.Element;
+export declare const Textarea: (props: React.ComponentProps<"textarea">) => JSX.Element;

package/components/TreeView/TreeView.d.ts

@@ -1,6 +1,2 @@
-/// <reference types="react" />
-export interface ITreeViewProps {
-    children?: any;
-    className?: string;
-}
-export declare const TreeView: (props: ITreeViewProps) => JSX.Element;
+import React from "react";
+export declare const TreeView: (props: React.ComponentProps<"ul">) => JSX.Element;

package/components/Typography/Typography.d.ts

@@ -1,13 +1,10 @@
-import { ReactElement } from 'react';
+import React from 'react';
 export interface IWrapperProps {
     as?: string;
-    children: ReactElement;
+    children: React.ReactNode;
     className?: string;
 }
-export interface ITypographyProps {
+export interface ITypographyProps extends React.ComponentProps<"span"> {
     as?: string;
-    children: any;
-    className?: string;
-    style?: any;
 }
 export declare const Typography: ({ children, as, ...rest }: ITypographyProps) => JSX.Element;

package/index.es.js

@@ -169,17 +169,15 @@ var styles$S = {"list":"List-module_list__1ax9w"};
 styleInject(css_248z$S);
 
 const List = (props) => {
-    const { children, className, isFlush } = props;
+    const { children, className, isFlush } = props, rest = __rest(props, ["children", "className", "isFlush"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        if (isFlush) {
-            cssClasses.push(styles$S.flush);
-        }
+        isFlush && cssClasses.push(styles$S.flush);
         cssClasses.push(styles$S.list);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("ul", { className: getCssClasses() }, children));
+    return (React.createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
 };
 
 var css_248z$R = ".ListItem-module_listItem__3hAZb {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0.75rem 1.25rem;\n  min-width: 100%;\n  color: var(--bodyColor);\n  text-align: inherit;\n  transition: background 0.5s ease; }\n  .ListItem-module_listItem__3hAZb:hover, .ListItem-module_listItem__3hAZb.ListItem-module_active__hyvch {\n    cursor: pointer;\n    z-index: 1;\n    text-decoration: none;\n    background-color: rgba(0, 0, 0, 0.04);\n    color: var(--primary); }\n  .ListItem-module_listItem__3hAZb + .ListItem-module_listItem__3hAZb {\n    border-top-width: 0; }\n  .ListItem-module_listItem__3hAZb.ListItem-module_primary__2OJAg {\n    color: var(--primary-contrast-text);\n    background-color: var(--primary); }\n  .ListItem-module_listItem__3hAZb.ListItem-module_accent__2RXHe {\n    color: var(--accent-contrast-text);\n    background-color: var(--accent); }\n  .ListItem-module_listItem__3hAZb.ListItem-module_secondary__3EVjH {\n    color: var(--secondary-contrast-text);\n    background-color: var(--secondary); }\n  .ListItem-module_listItem__3hAZb.ListItem-module_light__3CJBB {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .ListItem-module_listItem__3hAZb.ListItem-module_dark__SazkE {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n  .ListItem-module_listItem__3hAZb.ListItem-module_disabled__2Kh0o {\n    color: rgba(0, 0, 0, 0.26); }\n    .ListItem-module_listItem__3hAZb.ListItem-module_disabled__2Kh0o:hover {\n      cursor: not-allowed;\n      background-color: inherit; }\n";
@@ -187,55 +185,61 @@ var styles$R = {"listItem":"ListItem-module_listItem__3hAZb","active":"ListItem-
 styleInject(css_248z$R);
 
 const ListItem = (props) => {
-    const { id, children, color, active, className, isHoverable, disabled, onClick } = props;
+    const { children, color, active, className, disabled, onClick } = props, rest = __rest(props, ["children", "color", "active", "className", "disabled", "onClick"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        if (active) {
-            cssClasses.push(styles$R['active']);
-        }
-        if (disabled) {
-            cssClasses.push(styles$R['disabled']);
-        }
-        color && cssClasses.push(styles$R[color]);
         cssClasses.push(styles$R.listItem);
+        color && cssClasses.push(styles$R[color]);
+        active && cssClasses.push(styles$R['active']);
+        disabled && cssClasses.push(styles$R['disabled']);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     const handleClick = (e) => {
         !disabled && onClick && onClick(e);
     };
-    return (React.createElement("li", { id: id, onClick: handleClick, className: getCssClasses() }, children));
+    return (React.createElement("li", Object.assign({ onClick: handleClick, className: getCssClasses() }, rest), children));
 };
 
 var css_248z$Q = ".ListItemAvatar-module_avatar__1fjSE {\n  margin-right: 16px; }\n  .ListItemAvatar-module_avatar__1fjSE svg, .ListItemAvatar-module_avatar__1fjSE img {\n    width: 24px;\n    height: 24px; }\n  .ListItemAvatar-module_avatar__1fjSE img {\n    border-radius: 50%; }\n";
 var styles$Q = {"avatar":"ListItemAvatar-module_avatar__1fjSE"};
 styleInject(css_248z$Q);
 
-const ListItemAvatar = ({ avatar }) => (React.createElement("div", { className: styles$Q.avatar }, avatar));
+const ListItemAvatar = (_a) => {
+    var { avatar } = _a, rest = __rest(_a, ["avatar"]);
+    return (React.createElement("div", Object.assign({ className: styles$Q.avatar }, rest), avatar));
+};
 
 var css_248z$P = ".ListItemIcon-module_icon__-nsUy {\n  margin-right: 32px; }\n  .ListItemIcon-module_icon__-nsUy svg {\n    width: 24px;\n    height: 24px; }\n";
 var styles$P = {"icon":"ListItemIcon-module_icon__-nsUy"};
 styleInject(css_248z$P);
 
-const ListItemIcon = ({ icon }) => (React.createElement("div", { className: styles$P.icon }, icon));
+const ListItemIcon = (_a) => {
+    var { icon } = _a, rest = __rest(_a, ["icon"]);
+    return (React.createElement("div", Object.assign({ className: styles$P.icon }, rest), icon));
+};
 
 var css_248z$O = ".ListItemAction-module_listItemAction__26S66 {\n  display: flex;\n  justify-content: center;\n  min-width: 40px; }\n  .ListItemAction-module_listItemAction__26S66 svg {\n    width: 20px;\n    height: 20px; }\n";
 var styles$O = {"listItemAction":"ListItemAction-module_listItemAction__26S66"};
 styleInject(css_248z$O);
 
-const ListItemAction = ({ children, onClick }) => (React.createElement("div", { className: styles$O.listItemAction, onClick: e => onClick && onClick(e) }, children));
+const ListItemAction = (_a) => {
+    var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
+    return (React.createElement("div", Object.assign({ className: styles$O.listItemAction, onClick: e => onClick && onClick(e) }, rest), children));
+};
 
 var css_248z$N = ".ListItemTextIcon-module_listItemText__ZUWxQ {\n  flex: 1; }\n";
 var styles$N = {"listItemText":"ListItemTextIcon-module_listItemText__ZUWxQ"};
 styleInject(css_248z$N);
 
-const ListItemText = ({ primary, secondary }) => {
+const ListItemText = (_a) => {
+    var { primary, secondary } = _a, rest = __rest(_a, ["primary", "secondary"]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$N.listItemText);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("div", { className: getCssClasses() },
+    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
         React.createElement(ListItemTextPrimary, null, primary),
         secondary &&
             React.createElement(ListItemTextSecondary, null, secondary)));
@@ -890,21 +894,20 @@ const Select = (props) => {
             }
         }
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: selectConainter, className: styles$u.selectContainer },
-            React.createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
-                !multiple && renderSingleViewModel(),
-                multiple && renderMultipleViewModel(),
-                React.createElement(Icon, { className: "ml-auto" },
-                    React.createElement(ChevronDownSolidIcon, null))),
-            isShow &&
-                createPortal(React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: styles$u.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))));
+    return (React.createElement("div", { ref: selectConainter, className: styles$u.selectContainer },
+        React.createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
+            !multiple && renderSingleViewModel(),
+            multiple && renderMultipleViewModel(),
+            React.createElement(Icon, { className: "ml-auto" },
+                React.createElement(ChevronDownSolidIcon, null))),
+        isShow &&
+            createPortal(React.createElement(React.Fragment, null,
+                React.createElement("div", { className: styles$u.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)));
 };
 
 var css_248z$t = "textarea {\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  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  resize: vertical; }\n  textarea:focus {\n    outline: none !important;\n    border-color: var(--primary); }\n";
@@ -1542,7 +1545,7 @@ const Row = (props) => {
 };
 
 const Link = (props) => {
-    const { href, className, target, children } = props;
+    const { href = '#', className, target, children } = props, rest = __rest(props, ["href", "className", "target", "children"]);
     const [status, setStatus] = useState(STATUS.NORMAL);
     const getCssClasses = () => {
         const cssClasses = [];
@@ -1556,20 +1559,21 @@ const Link = (props) => {
     const onMouseLeave = () => {
         setStatus(STATUS.NORMAL);
     };
-    return (React.createElement("a", { className: getCssClasses(), href: href || '#', target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, children));
+    return (React.createElement("a", Object.assign({ className: getCssClasses(), href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
 };
 
 var css_248z$i = ".LoadingIndicator-module_loadingIndicatorContainer__3e1-3 {\n  position: fixed;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%; }\n\n.LoadingIndicator-module_loadingIndicator__tvp5i {\n  animation-name: LoadingIndicator-module_spinAnimation__PKRNn;\n  animation-duration: 5000ms;\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n  width: 24px;\n  height: 24px; }\n\n@keyframes LoadingIndicator-module_spinAnimation__PKRNn {\n  from {\n    transform: rotate(0deg); }\n  to {\n    transform: rotate(360deg); } }\n";
 var styles$i = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__3e1-3","loadingIndicator":"LoadingIndicator-module_loadingIndicator__tvp5i","spinAnimation":"LoadingIndicator-module_spinAnimation__PKRNn"};
 styleInject(css_248z$i);
 
-const LoadingIndicator = () => {
+const LoadingIndicator = (_a) => {
+    var rest = __rest(_a, []);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$i.loadingIndicator);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("div", { className: getCssClasses() },
+    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
         React.createElement(SpinnerSolidIcon, null)));
 };
 
@@ -1796,14 +1800,18 @@ class SidebarItemModel {
 }
 
 const Sidebar = (props) => {
-    const { items, currentUrl, onItemClicked } = props;
+    const { className, items, currentUrl, onItemClicked } = props, rest = __rest(props, ["className", "items", "currentUrl", "onItemClicked"]);
     const [menuItems, setMenuItems] = useState([]);
     useEffect(() => {
         if (items && items.length > 0) {
             initMenuItems();
         }
     }, []);
-    useEffect(() => { initMenuItems(); }, [currentUrl]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
     const initMenuItems = () => {
         const newItems = items.map(item => new SidebarItemModel(item.id, item.label, item.path, item.icon, isMenuItemActive(item.path), item.items && item.items.map(subItem => new SidebarItemModel(subItem.id, subItem.label, subItem.path, subItem.icon, isMenuItemActive(`${item.path}/${subItem.path}`))), item.isCollapsible, item.isCollapsed));
         setMenuItems(newItems);
@@ -1827,10 +1835,7 @@ const Sidebar = (props) => {
     const handleClickItem = (item, e) => {
         if (item.items && item.items.length > 0 && item.isCollapsible) {
             const newMenuItems = menuItems.map((menuItem) => {
-                if (item.id === menuItem.id) {
-                    const updatedItem = Object.assign(Object.assign({}, menuItem), { isCollapsed: !menuItem.isCollapsed });
-                    return updatedItem;
-                }
+                menuItem.isCollapsed = !menuItem.isCollapsed;
                 return menuItem;
             });
             setMenuItems(newMenuItems);
@@ -1842,7 +1847,7 @@ const Sidebar = (props) => {
     const handleClickSubItem = (itemPath, subItemPath, e) => {
         navigate(e, `/${itemPath}/${subItemPath}`);
     };
-    return (React.createElement("nav", { className: "sidebar" },
+    return (React.createElement("nav", Object.assign({ className: getCssClasses() }, rest),
         React.createElement(List, null, menuItems.map(item => (React.createElement(React.Fragment, { key: item.id },
             React.createElement(ListItem, { active: isMenuItemActive(item.path), onClick: (e) => handleClickItem(item, e) },
                 React.createElement(ListItemText, { primary: React.createElement(React.Fragment, null,
@@ -1861,7 +1866,7 @@ var styles$e = {"snackbar":"Snackbar-module_snackbar__3AF3D","bounceIn":"Snackba
 styleInject(css_248z$e);
 
 const Snackbar = (props) => {
-    const { children, color = COLOR.dark, actionText = 'ok', onOk } = props;
+    const { children, color = COLOR.dark, actionText = 'ok', onOk } = props, rest = __rest(props, ["children", "color", "actionText", "onOk"]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$e.snackbar);
@@ -1872,7 +1877,7 @@ const Snackbar = (props) => {
     const handleClickAction = (e) => {
         onOk && onOk(e);
     };
-    return (React.createElement("div", { className: getCssClasses() },
+    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
         React.createElement("div", { className: styles$e.text }, children),
         React.createElement("div", { className: styles$e.action + " text-accent", onClick: handleClickAction },
             React.createElement("span", null, actionText))));
@@ -2523,14 +2528,14 @@ var styles$1 = {"treeView":"TreeView-module_treeView__3kmGm"};
 styleInject(css_248z$1);
 
 const TreeView = (props) => {
-    const { children, className } = props;
+    const { children, className } = props, rest = __rest(props, ["children", "className"]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$1.treeView);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("ul", { className: getCssClasses() }, children));
+    return (React.createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
 };
 
 var css_248z = ".TreeItem-module_treeItem__2FtLe {\n  display: flex;\n  flex-direction: column;\n  min-height: 48px;\n  justify-content: center; }\n";