react-asc 18.9.3 → 18.9.4

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/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)));
@@ -1542,7 +1546,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,7 +1560,7 @@ 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";