react-asc 25.7.2 → 25.7.3

package/index.d.ts

@@ -253,12 +253,12 @@ interface IDrawerProps extends React$1.ComponentProps<'div'> {
 }
 declare const Drawer: (props: IDrawerProps) => JSX.Element;
 
-interface IExpansionPanelProps {
+interface IExpansionPanelProps extends React$1.ComponentProps<'div'> {
     header: ReactNode;
     children: ReactNode;
     isExpanded?: boolean;
     shadow?: boolean;
-    onChange?: (event: React$1.MouseEvent, isExpanded: boolean) => void;
+    onToggle?: (event: React$1.MouseEvent, isExpanded: boolean) => void;
 }
 declare const ExpansionPanel: (props: IExpansionPanelProps) => JSX.Element;
 

package/index.es.js

@@ -5681,17 +5681,21 @@ const DrawerContent = (props) => {
     return (jsx("div", { className: getCssClasses(), style: getStyles(), ...rest, children: children }));
 };
 
-var css_248z$x = ".ExpansionPanelContent-module_expansionPanelContent__aXNfH {\n  padding: 8px 16px 16px;\n}";
-var styles$x = {"expansionPanelContent":"ExpansionPanelContent-module_expansionPanelContent__aXNfH"};
+var css_248z$x = ".ExpansionPanel-module_expansionPanel__m1yQq {\n  background-color: var(--white);\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_shadow__zIjJ6 {\n  box-shadow: var(--shadow);\n}\n.ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n  margin-top: 0;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n  margin-bottom: 0;\n}";
+var styles$x = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","shadow":"ExpansionPanel-module_shadow__zIjJ6","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
 styleInject(css_248z$x);
 
+var css_248z$w = ".ExpansionPanelContent-module_expansionPanelContent__aXNfH {\n  padding: 8px 16px 16px;\n}";
+var styles$w = {"expansionPanelContent":"ExpansionPanelContent-module_expansionPanelContent__aXNfH"};
+styleInject(css_248z$w);
+
 const ExpansionPanelContent = ({ children }) => {
-    return (jsx("div", { className: styles$x.expansionPanelContent, children: children }));
+    return (jsx("div", { className: styles$w.expansionPanelContent, children: children }));
 };
 
-var css_248z$w = ".ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq {\n  display: flex;\n  align-items: center;\n  padding: 12px 16px;\n  min-height: 48px;\n}\n.ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq:hover {\n  cursor: pointer;\n  background-color: var(--highlight);\n}";
-var styles$w = {"expansionPanelHeader":"ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq"};
-styleInject(css_248z$w);
+var css_248z$v = ".ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq {\n  display: flex;\n  align-items: center;\n  padding: 12px 16px;\n  min-height: 48px;\n}\n.ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq:hover {\n  cursor: pointer;\n  background-color: var(--highlight);\n}";
+var styles$v = {"expansionPanelHeader":"ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq"};
+styleInject(css_248z$v);
 
 const ExpansionPanelHeader = (props) => {
     const { children, isExpanded, onClick } = props;
@@ -5699,34 +5703,29 @@ const ExpansionPanelHeader = (props) => {
         e.stopPropagation();
         onClick && onClick(e);
     };
-    return (jsxs("div", { className: styles$w.expansionPanelHeader, onClick: handleClick, children: [children, jsx("span", { className: "ml-auto text-muted", children: jsx(Icon, { children: isExpanded ? jsx(ChevronUpSolidIcon, {}) : jsx(ChevronDownSolidIcon, {}) }) })] }));
+    return (jsxs("div", { className: styles$v.expansionPanelHeader, onClick: handleClick, children: [children, jsx("span", { className: "ml-auto text-muted", children: jsx(Icon, { children: isExpanded ? jsx(ChevronUpSolidIcon, {}) : jsx(ChevronDownSolidIcon, {}) }) })] }));
 };
 
-var css_248z$v = ".ExpansionPanel-module_expansionPanel__m1yQq {\n  background-color: var(--white);\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_shadow__zIjJ6 {\n  box-shadow: var(--shadow);\n}\n.ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n  margin-top: 0;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n  margin-bottom: 0;\n}";
-var styles$v = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","shadow":"ExpansionPanel-module_shadow__zIjJ6","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
-styleInject(css_248z$v);
-
 const ExpansionPanel = (props) => {
-    const { header, children, isExpanded = false, shadow, onChange } = props;
+    const { header, children, isExpanded = false, shadow, onToggle } = props;
     const [_isExpanded, setIsExpanded] = useState(false);
     useEffect(() => {
         setIsExpanded(isExpanded);
     }, [isExpanded]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$v.expansionPanel);
+        cssClasses.push(styles$x.expansionPanel);
         if (_isExpanded) {
-            cssClasses.push(styles$v.isExpanded);
+            cssClasses.push(styles$x.isExpanded);
         }
-        shadow && cssClasses.push(styles$v.shadow);
+        shadow && cssClasses.push(styles$x.shadow);
         return cssClasses.filter(css => css).join(' ');
     };
     const handleClickHeader = (event) => {
         setIsExpanded(!_isExpanded);
-        onChange && onChange(event, !_isExpanded);
+        onToggle && onToggle(event, !_isExpanded);
     };
-    return (jsxs("div", { className: getCssClasses(), children: [jsx(ExpansionPanelHeader, { isExpanded: _isExpanded, onClick: handleClickHeader, children: header }), _isExpanded &&
-                jsx(ExpansionPanelContent, { children: children })] }));
+    return (jsxs("div", { className: getCssClasses(), children: [jsx(ExpansionPanelHeader, { isExpanded: _isExpanded, onClick: handleClickHeader, children: header }), _isExpanded && jsx(ExpansionPanelContent, { children: children })] }));
 };
 
 var css_248z$u = ".FloatingActionButton-module_fab__Rw3kd {\n  box-shadow: var(--shadow);\n}\n\n.FloatingActionButton-module_fixed__XQOkG {\n  position: fixed;\n  z-index: 1000;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftTop__ZiHQN {\n  top: 16px;\n  left: 16px;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftBottom__210sl {\n  bottom: 16px;\n  left: 16px;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightTop__VUsvT {\n  top: 64px;\n  right: 16px;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightBottom__FaUFl {\n  bottom: 16px;\n  right: 16px;\n}";

package/index.js

@@ -5683,17 +5683,21 @@ const DrawerContent = (props) => {
     return (jsxRuntime.jsx("div", { className: getCssClasses(), style: getStyles(), ...rest, children: children }));
 };
 
-var css_248z$x = ".ExpansionPanelContent-module_expansionPanelContent__aXNfH {\n  padding: 8px 16px 16px;\n}";
-var styles$x = {"expansionPanelContent":"ExpansionPanelContent-module_expansionPanelContent__aXNfH"};
+var css_248z$x = ".ExpansionPanel-module_expansionPanel__m1yQq {\n  background-color: var(--white);\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_shadow__zIjJ6 {\n  box-shadow: var(--shadow);\n}\n.ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n  margin-top: 0;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n  margin-bottom: 0;\n}";
+var styles$x = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","shadow":"ExpansionPanel-module_shadow__zIjJ6","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
 styleInject(css_248z$x);
 
+var css_248z$w = ".ExpansionPanelContent-module_expansionPanelContent__aXNfH {\n  padding: 8px 16px 16px;\n}";
+var styles$w = {"expansionPanelContent":"ExpansionPanelContent-module_expansionPanelContent__aXNfH"};
+styleInject(css_248z$w);
+
 const ExpansionPanelContent = ({ children }) => {
-    return (jsxRuntime.jsx("div", { className: styles$x.expansionPanelContent, children: children }));
+    return (jsxRuntime.jsx("div", { className: styles$w.expansionPanelContent, children: children }));
 };
 
-var css_248z$w = ".ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq {\n  display: flex;\n  align-items: center;\n  padding: 12px 16px;\n  min-height: 48px;\n}\n.ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq:hover {\n  cursor: pointer;\n  background-color: var(--highlight);\n}";
-var styles$w = {"expansionPanelHeader":"ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq"};
-styleInject(css_248z$w);
+var css_248z$v = ".ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq {\n  display: flex;\n  align-items: center;\n  padding: 12px 16px;\n  min-height: 48px;\n}\n.ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq:hover {\n  cursor: pointer;\n  background-color: var(--highlight);\n}";
+var styles$v = {"expansionPanelHeader":"ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq"};
+styleInject(css_248z$v);
 
 const ExpansionPanelHeader = (props) => {
     const { children, isExpanded, onClick } = props;
@@ -5701,34 +5705,29 @@ const ExpansionPanelHeader = (props) => {
         e.stopPropagation();
         onClick && onClick(e);
     };
-    return (jsxRuntime.jsxs("div", { className: styles$w.expansionPanelHeader, onClick: handleClick, children: [children, jsxRuntime.jsx("span", { className: "ml-auto text-muted", children: jsxRuntime.jsx(Icon, { children: isExpanded ? jsxRuntime.jsx(ChevronUpSolidIcon, {}) : jsxRuntime.jsx(ChevronDownSolidIcon, {}) }) })] }));
+    return (jsxRuntime.jsxs("div", { className: styles$v.expansionPanelHeader, onClick: handleClick, children: [children, jsxRuntime.jsx("span", { className: "ml-auto text-muted", children: jsxRuntime.jsx(Icon, { children: isExpanded ? jsxRuntime.jsx(ChevronUpSolidIcon, {}) : jsxRuntime.jsx(ChevronDownSolidIcon, {}) }) })] }));
 };
 
-var css_248z$v = ".ExpansionPanel-module_expansionPanel__m1yQq {\n  background-color: var(--white);\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_shadow__zIjJ6 {\n  box-shadow: var(--shadow);\n}\n.ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n  margin-top: 0;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n  margin-bottom: 0;\n}";
-var styles$v = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","shadow":"ExpansionPanel-module_shadow__zIjJ6","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
-styleInject(css_248z$v);
-
 const ExpansionPanel = (props) => {
-    const { header, children, isExpanded = false, shadow, onChange } = props;
+    const { header, children, isExpanded = false, shadow, onToggle } = props;
     const [_isExpanded, setIsExpanded] = React.useState(false);
     React.useEffect(() => {
         setIsExpanded(isExpanded);
     }, [isExpanded]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$v.expansionPanel);
+        cssClasses.push(styles$x.expansionPanel);
         if (_isExpanded) {
-            cssClasses.push(styles$v.isExpanded);
+            cssClasses.push(styles$x.isExpanded);
         }
-        shadow && cssClasses.push(styles$v.shadow);
+        shadow && cssClasses.push(styles$x.shadow);
         return cssClasses.filter(css => css).join(' ');
     };
     const handleClickHeader = (event) => {
         setIsExpanded(!_isExpanded);
-        onChange && onChange(event, !_isExpanded);
+        onToggle && onToggle(event, !_isExpanded);
     };
-    return (jsxRuntime.jsxs("div", { className: getCssClasses(), children: [jsxRuntime.jsx(ExpansionPanelHeader, { isExpanded: _isExpanded, onClick: handleClickHeader, children: header }), _isExpanded &&
-                jsxRuntime.jsx(ExpansionPanelContent, { children: children })] }));
+    return (jsxRuntime.jsxs("div", { className: getCssClasses(), children: [jsxRuntime.jsx(ExpansionPanelHeader, { isExpanded: _isExpanded, onClick: handleClickHeader, children: header }), _isExpanded && jsxRuntime.jsx(ExpansionPanelContent, { children: children })] }));
 };
 
 var css_248z$u = ".FloatingActionButton-module_fab__Rw3kd {\n  box-shadow: var(--shadow);\n}\n\n.FloatingActionButton-module_fixed__XQOkG {\n  position: fixed;\n  z-index: 1000;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftTop__ZiHQN {\n  top: 16px;\n  left: 16px;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftBottom__210sl {\n  bottom: 16px;\n  left: 16px;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightTop__VUsvT {\n  top: 64px;\n  right: 16px;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightBottom__FaUFl {\n  bottom: 16px;\n  right: 16px;\n}";

package/lib/components/ExpansionPanel/ExpansionPanel.d.ts

@@ -1,10 +1,10 @@
 import type { ReactNode } from 'react';
 import React from 'react';
-export interface IExpansionPanelProps {
+export interface IExpansionPanelProps extends React.ComponentProps<'div'> {
     header: ReactNode;
     children: ReactNode;
     isExpanded?: boolean;
     shadow?: boolean;
-    onChange?: (event: React.MouseEvent, isExpanded: boolean) => void;
+    onToggle?: (event: React.MouseEvent, isExpanded: boolean) => void;
 }
 export declare const ExpansionPanel: (props: IExpansionPanelProps) => JSX.Element;

package/package.json

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