react-asc 18.9.4 → 18.9.5

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/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

@@ -894,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";
@@ -1567,13 +1566,14 @@ var css_248z$i = ".LoadingIndicator-module_loadingIndicatorContainer__3e1-3 {\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)));
 };
 
@@ -1800,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);
@@ -1831,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);
@@ -1846,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,
@@ -1865,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);
@@ -1876,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))));