react-asc 25.7.2 → 25.7.4

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

@@ -5089,6 +5089,7 @@ const Select = (props) => {
     const [isShow, setIsShow] = useState(false);
     const [selectedOptions, setSelectedOptions] = useState([]);
     const selectConainter = useRef(null);
+    const selectMenu = useRef(null);
     const getCssClass = () => {
         const cssClasses = [];
         className && cssClasses.push(className);
@@ -5109,13 +5110,15 @@ const Select = (props) => {
     }, [value, options]);
     useEffect(() => {
         if (hoverIndex) {
-            scrollIntoView(hoverIndex);
+            setTimeout(() => {
+                scrollIntoView(hoverIndex);
+            }, 100);
         }
     }, [hoverIndex, isShow]);
     const scrollIntoView = (index) => {
-        const htmlListItem = selectConainter.current?.querySelector(`#list-item-${index}`);
+        const htmlListItem = selectMenu.current?.children[0]?.querySelector(`#list-item-${index}`);
         if (htmlListItem) {
-            htmlListItem?.scrollIntoView({ block: 'end', behavior: 'smooth' });
+            htmlListItem?.scrollIntoView({ block: 'center', behavior: 'smooth' });
         }
     };
     const writeValue = (val) => setModel(val);
@@ -5172,8 +5175,7 @@ const Select = (props) => {
     const renderMultipleViewModel = () => {
         let result = null;
         if (selectedOptions.length <= multipleMaxCountItems && selectedOptions.length > 0) {
-            result = selectedOptions
-                .map(option => jsx(Chip, { color: COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, option), children: option.label }, option.value));
+            result = selectedOptions.map(option => (jsx(Chip, { color: COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, option), children: option.label }, option.value)));
         }
         else {
             result = jsxs("span", { children: [selectedOptions.length, " Items selected"] });
@@ -5214,10 +5216,12 @@ const Select = (props) => {
             }
         }
     };
-    return (jsxs("div", { ref: selectConainter, className: styles$E.selectContainer, children: [jsx("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: (e) => handleOnKeyDown(e), children: jsxs(Fragment$1, { children: [!multiple && renderSingleViewModel(), multiple &&
-                            jsx("div", { className: styles$E.chipContainer, children: renderMultipleViewModel() }), jsx(Icon, { className: "ml-auto", children: jsx(ChevronDownSolidIcon, {}) })] }) }), isShow &&
-                jsxs(Portal$1, { className: 'backdrop-root', children: [jsx("div", { className: styles$E.selectMenu, style: { left: selectConainter.current?.getBoundingClientRect().x, top: selectConainter.current?.getBoundingClientRect().y, width: selectConainter.current?.getBoundingClientRect().width }, children: jsx(List, { children: options && options.map((option, index) => jsxs(ListItem, { id: `list-item-${index}`, onClick: () => handleOnClick(option), active: isActive(option), children: [multiple &&
-                                            jsx(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }), jsx(ListItemText, { primary: option.label ? option.label : option.value })] }, option.value)) }) }), jsx(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })] })] }));
+    return (jsxs("div", { ref: selectConainter, className: styles$E.selectContainer, children: [jsx("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: (e) => handleOnKeyDown(e), children: jsxs(Fragment$1, { children: [!multiple && renderSingleViewModel(), multiple && jsx("div", { className: styles$E.chipContainer, children: renderMultipleViewModel() }), jsx(Icon, { className: "ml-auto", children: jsx(ChevronDownSolidIcon, {}) })] }) }), isShow && (jsxs(Portal$1, { className: "backdrop-root", children: [jsx("div", { ref: selectMenu, className: styles$E.selectMenu, style: {
+                            left: selectConainter.current?.getBoundingClientRect().x,
+                            top: selectConainter.current?.getBoundingClientRect().y,
+                            width: selectConainter.current?.getBoundingClientRect().width,
+                        }, children: jsx(List, { children: options &&
+                                options.map((option, index) => (jsxs(ListItem, { id: `list-item-${index}`, onClick: () => handleOnClick(option), active: isActive(option), children: [multiple && jsx(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }), jsx(ListItemText, { primary: option.label ? option.label : option.value })] }, option.value))) }) }), jsx(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })] }))] }));
 };
 
 var css_248z$D = ".Textarea-module_textarea__L5zqa {\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}";
@@ -5681,17 +5685,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 +5707,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

@@ -5091,6 +5091,7 @@ const Select = (props) => {
     const [isShow, setIsShow] = React.useState(false);
     const [selectedOptions, setSelectedOptions] = React.useState([]);
     const selectConainter = React.useRef(null);
+    const selectMenu = React.useRef(null);
     const getCssClass = () => {
         const cssClasses = [];
         className && cssClasses.push(className);
@@ -5111,13 +5112,15 @@ const Select = (props) => {
     }, [value, options]);
     React.useEffect(() => {
         if (hoverIndex) {
-            scrollIntoView(hoverIndex);
+            setTimeout(() => {
+                scrollIntoView(hoverIndex);
+            }, 100);
         }
     }, [hoverIndex, isShow]);
     const scrollIntoView = (index) => {
-        const htmlListItem = selectConainter.current?.querySelector(`#list-item-${index}`);
+        const htmlListItem = selectMenu.current?.children[0]?.querySelector(`#list-item-${index}`);
         if (htmlListItem) {
-            htmlListItem?.scrollIntoView({ block: 'end', behavior: 'smooth' });
+            htmlListItem?.scrollIntoView({ block: 'center', behavior: 'smooth' });
         }
     };
     const writeValue = (val) => setModel(val);
@@ -5174,8 +5177,7 @@ const Select = (props) => {
     const renderMultipleViewModel = () => {
         let result = null;
         if (selectedOptions.length <= multipleMaxCountItems && selectedOptions.length > 0) {
-            result = selectedOptions
-                .map(option => jsxRuntime.jsx(Chip, { color: exports.COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, option), children: option.label }, option.value));
+            result = selectedOptions.map(option => (jsxRuntime.jsx(Chip, { color: exports.COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, option), children: option.label }, option.value)));
         }
         else {
             result = jsxRuntime.jsxs("span", { children: [selectedOptions.length, " Items selected"] });
@@ -5216,10 +5218,12 @@ const Select = (props) => {
             }
         }
     };
-    return (jsxRuntime.jsxs("div", { ref: selectConainter, className: styles$E.selectContainer, children: [jsxRuntime.jsx("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: (e) => handleOnKeyDown(e), children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!multiple && renderSingleViewModel(), multiple &&
-                            jsxRuntime.jsx("div", { className: styles$E.chipContainer, children: renderMultipleViewModel() }), jsxRuntime.jsx(Icon, { className: "ml-auto", children: jsxRuntime.jsx(ChevronDownSolidIcon, {}) })] }) }), isShow &&
-                jsxRuntime.jsxs(Portal$1, { className: 'backdrop-root', children: [jsxRuntime.jsx("div", { className: styles$E.selectMenu, style: { left: selectConainter.current?.getBoundingClientRect().x, top: selectConainter.current?.getBoundingClientRect().y, width: selectConainter.current?.getBoundingClientRect().width }, children: jsxRuntime.jsx(List, { children: options && options.map((option, index) => jsxRuntime.jsxs(ListItem, { id: `list-item-${index}`, onClick: () => handleOnClick(option), active: isActive(option), children: [multiple &&
-                                            jsxRuntime.jsx(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }), jsxRuntime.jsx(ListItemText, { primary: option.label ? option.label : option.value })] }, option.value)) }) }), jsxRuntime.jsx(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })] })] }));
+    return (jsxRuntime.jsxs("div", { ref: selectConainter, className: styles$E.selectContainer, children: [jsxRuntime.jsx("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: (e) => handleOnKeyDown(e), children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!multiple && renderSingleViewModel(), multiple && jsxRuntime.jsx("div", { className: styles$E.chipContainer, children: renderMultipleViewModel() }), jsxRuntime.jsx(Icon, { className: "ml-auto", children: jsxRuntime.jsx(ChevronDownSolidIcon, {}) })] }) }), isShow && (jsxRuntime.jsxs(Portal$1, { className: "backdrop-root", children: [jsxRuntime.jsx("div", { ref: selectMenu, className: styles$E.selectMenu, style: {
+                            left: selectConainter.current?.getBoundingClientRect().x,
+                            top: selectConainter.current?.getBoundingClientRect().y,
+                            width: selectConainter.current?.getBoundingClientRect().width,
+                        }, children: jsxRuntime.jsx(List, { children: options &&
+                                options.map((option, index) => (jsxRuntime.jsxs(ListItem, { id: `list-item-${index}`, onClick: () => handleOnClick(option), active: isActive(option), children: [multiple && jsxRuntime.jsx(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }), jsxRuntime.jsx(ListItemText, { primary: option.label ? option.label : option.value })] }, option.value))) }) }), jsxRuntime.jsx(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })] }))] }));
 };
 
 var css_248z$D = ".Textarea-module_textarea__L5zqa {\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}";
@@ -5683,17 +5687,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 +5709,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.4",
 	"description": "handcrafted react components",
 	"main": "index.js",
 	"module": "index.es.js",