react-asc 25.3.0 → 25.3.1

package/index.es.js

@@ -269,7 +269,7 @@ function useMobileDetect() {
     useEffect(() => {
         windowSize && checkIsMobile(windowSize.height, windowSize.width);
     }, [windowSize]);
-    return { isMobile };
+    return { isMobile: isMobile };
 }
 
 const useOnDestroy = (callBack) => {
@@ -1117,11 +1117,11 @@ const FormInput = (props) => {
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleOnInput = (value, type, name) => {
-        onInput && onInput({ value, type, name });
+        onInput && onInput({ value: value, type: type, name: name });
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleOnChange = (value, type, name) => {
-        onChange && onChange({ value, type, name });
+        onChange && onChange({ value: value, type: type, name: name });
     };
     return (React.createElement(React.Fragment, null,
         (type === 'text' ||
@@ -1547,10 +1547,11 @@ styleInject(css_248z$x);
 
 const MenuBody = (props) => {
     const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
+    const [popperInstance, setPopperInstance] = useState();
     const menuBodyRef = useRef(null);
     useEffect(() => {
         if (menuBodyRef && parentRef.current && menuBodyRef.current) {
-            createPopper(parentRef.current, menuBodyRef.current, {
+            const popperInstance = createPopper(parentRef.current, menuBodyRef.current, {
                 placement: `${menuPosition}-start`,
                 modifiers: [
                     {
@@ -1570,6 +1571,10 @@ const MenuBody = (props) => {
                     },
                 ]
             });
+            setPopperInstance(popperInstance);
+        }
+        else {
+            popperInstance?.destroy();
         }
     }, [menuBodyRef]);
     const getCssClasses = () => {
@@ -1582,6 +1587,9 @@ const MenuBody = (props) => {
     const handleClickBackdrop = () => {
         onClickBackdrop && onClickBackdrop();
     };
+    useOnDestroy(() => {
+        popperInstance?.destroy();
+    });
     return (React.createElement(Portal, { className: 'menu-root' },
         React.createElement("div", { ref: menuBodyRef, className: getCssClasses() },
             React.createElement(List, null, children)),
@@ -2020,6 +2028,7 @@ styleInject(css_248z$l);
 
 const Tooltip = (props) => {
     const { children, text, placement = 'bottom', isOpen = false, isShowClose = false, delay = 0 } = props;
+    const [popperInstance, setPopperInstance] = useState();
     const [debounce, setDebounce] = useState(delay);
     const [open, setOpen] = useState(isOpen);
     const [show, setShow] = useState(isOpen);
@@ -2038,7 +2047,7 @@ const Tooltip = (props) => {
     }, [delay]);
     useEffect(() => {
         if (open === true && refChild && refChild.current && refTooltip && refTooltip.current) {
-            createPopper(refChild.current, refTooltip.current, {
+            const popperInstance = createPopper(refChild.current, refTooltip.current, {
                 placement: placement,
                 modifiers: [
                     {
@@ -2047,6 +2056,10 @@ const Tooltip = (props) => {
                     },
                 ]
             });
+            setPopperInstance(popperInstance);
+        }
+        else {
+            popperInstance?.destroy();
         }
     }, [open]);
     const handleMouseOver = () => {
@@ -2064,6 +2077,9 @@ const Tooltip = (props) => {
     const handleClickClose = () => {
         setShow(false);
     };
+    useOnDestroy(() => {
+        popperInstance?.destroy();
+    });
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { ref: refChild, className: styles$l.tooltipContainer, onMouseOver: handleMouseOver, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur }, children),
         open && text &&
@@ -2520,7 +2536,7 @@ const Step = (props) => {
     const [hoverRef, isHovered] = useHover();
     const handleClick = (event) => {
         if (!isDisabled) {
-            onClick && onClick({ event, value });
+            onClick && onClick({ event: event, value: value });
         }
     };
     const getCssClasses = () => {
@@ -2697,9 +2713,9 @@ const Tabs = (props) => {
     const [selectedValue, setSelectedValue] = useState('');
     const [selectedIndex, setSelectedIndex] = useState(0);
     const tabContext = ({
-        selectedValue,
-        setSelectedValue,
-        fixed
+        selectedValue: selectedValue,
+        setSelectedValue: setSelectedValue,
+        fixed: fixed
     });
     const prevSelectedValueRef = useRef();
     useEffect(() => {
@@ -2746,7 +2762,7 @@ const Tab = (props) => {
         return cssClasses.filter(css => css).join(' ');
     };
     const handleClick = (event) => {
-        onClick && onClick({ event, value });
+        onClick && onClick({ event: event, value: value });
         setSelectedValue && setSelectedValue(value);
     };
     return (React.createElement(Button, { className: getCssClasses(), onClick: handleClick, isActive: selectedValue === value, disabled: disabled }, label));

package/index.js

@@ -278,7 +278,7 @@ function useMobileDetect() {
     React.useEffect(() => {
         windowSize && checkIsMobile(windowSize.height, windowSize.width);
     }, [windowSize]);
-    return { isMobile };
+    return { isMobile: isMobile };
 }
 
 const useOnDestroy = (callBack) => {
@@ -1126,11 +1126,11 @@ const FormInput = (props) => {
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleOnInput = (value, type, name) => {
-        onInput && onInput({ value, type, name });
+        onInput && onInput({ value: value, type: type, name: name });
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleOnChange = (value, type, name) => {
-        onChange && onChange({ value, type, name });
+        onChange && onChange({ value: value, type: type, name: name });
     };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         (type === 'text' ||
@@ -1556,10 +1556,11 @@ styleInject(css_248z$x);
 
 const MenuBody = (props) => {
     const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
+    const [popperInstance, setPopperInstance] = React.useState();
     const menuBodyRef = React.useRef(null);
     React.useEffect(() => {
         if (menuBodyRef && parentRef.current && menuBodyRef.current) {
-            core.createPopper(parentRef.current, menuBodyRef.current, {
+            const popperInstance = core.createPopper(parentRef.current, menuBodyRef.current, {
                 placement: `${menuPosition}-start`,
                 modifiers: [
                     {
@@ -1579,6 +1580,10 @@ const MenuBody = (props) => {
                     },
                 ]
             });
+            setPopperInstance(popperInstance);
+        }
+        else {
+            popperInstance?.destroy();
         }
     }, [menuBodyRef]);
     const getCssClasses = () => {
@@ -1591,6 +1596,9 @@ const MenuBody = (props) => {
     const handleClickBackdrop = () => {
         onClickBackdrop && onClickBackdrop();
     };
+    useOnDestroy(() => {
+        popperInstance?.destroy();
+    });
     return (React__default["default"].createElement(Portal, { className: 'menu-root' },
         React__default["default"].createElement("div", { ref: menuBodyRef, className: getCssClasses() },
             React__default["default"].createElement(List, null, children)),
@@ -2029,6 +2037,7 @@ styleInject(css_248z$l);
 
 const Tooltip = (props) => {
     const { children, text, placement = 'bottom', isOpen = false, isShowClose = false, delay = 0 } = props;
+    const [popperInstance, setPopperInstance] = React.useState();
     const [debounce, setDebounce] = React.useState(delay);
     const [open, setOpen] = React.useState(isOpen);
     const [show, setShow] = React.useState(isOpen);
@@ -2047,7 +2056,7 @@ const Tooltip = (props) => {
     }, [delay]);
     React.useEffect(() => {
         if (open === true && refChild && refChild.current && refTooltip && refTooltip.current) {
-            core.createPopper(refChild.current, refTooltip.current, {
+            const popperInstance = core.createPopper(refChild.current, refTooltip.current, {
                 placement: placement,
                 modifiers: [
                     {
@@ -2056,6 +2065,10 @@ const Tooltip = (props) => {
                     },
                 ]
             });
+            setPopperInstance(popperInstance);
+        }
+        else {
+            popperInstance?.destroy();
         }
     }, [open]);
     const handleMouseOver = () => {
@@ -2073,6 +2086,9 @@ const Tooltip = (props) => {
     const handleClickClose = () => {
         setShow(false);
     };
+    useOnDestroy(() => {
+        popperInstance?.destroy();
+    });
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { ref: refChild, className: styles$l.tooltipContainer, onMouseOver: handleMouseOver, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur }, children),
         open && text &&
@@ -2529,7 +2545,7 @@ const Step = (props) => {
     const [hoverRef, isHovered] = useHover();
     const handleClick = (event) => {
         if (!isDisabled) {
-            onClick && onClick({ event, value });
+            onClick && onClick({ event: event, value: value });
         }
     };
     const getCssClasses = () => {
@@ -2706,9 +2722,9 @@ const Tabs = (props) => {
     const [selectedValue, setSelectedValue] = React.useState('');
     const [selectedIndex, setSelectedIndex] = React.useState(0);
     const tabContext = ({
-        selectedValue,
-        setSelectedValue,
-        fixed
+        selectedValue: selectedValue,
+        setSelectedValue: setSelectedValue,
+        fixed: fixed
     });
     const prevSelectedValueRef = React.useRef();
     React.useEffect(() => {
@@ -2755,7 +2771,7 @@ const Tab = (props) => {
         return cssClasses.filter(css => css).join(' ');
     };
     const handleClick = (event) => {
-        onClick && onClick({ event, value });
+        onClick && onClick({ event: event, value: value });
         setSelectedValue && setSelectedValue(value);
     };
     return (React__default["default"].createElement(Button, { className: getCssClasses(), onClick: handleClick, isActive: selectedValue === value, disabled: disabled }, label));

package/package.json

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