react-asc 25.2.13 → 25.3.1

package/components/Tooltip/Tooltip.d.ts

@@ -2,5 +2,8 @@ import React from 'react';
 export interface ITooltipProps extends React.ComponentProps<'div'> {
     placement?: 'top' | 'bottom' | 'right' | 'left';
     text?: string;
+    delay?: number;
+    isOpen?: boolean;
+    isShowClose?: boolean;
 }
 export declare const Tooltip: (props: ITooltipProps) => JSX.Element;

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)),
@@ -2019,14 +2027,27 @@ var styles$l = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","too
 styleInject(css_248z$l);
 
 const Tooltip = (props) => {
-    const { children, text, placement = 'bottom' } = props;
-    const [show, setShow] = useState(false);
+    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);
+    const [showClose, setShowClose] = useState(isShowClose);
     const refChild = useRef();
     const refTooltip = useRef();
+    useDebounce(() => { setOpen(show); }, debounce, [show]);
+    useEffect(() => {
+        setShow(isOpen);
+    }, [isOpen]);
     useEffect(() => {
-        if (show === true && refChild && refChild.current && refTooltip && refTooltip.current) {
-            // TODO - extract to own component?
-            createPopper(refChild.current, refTooltip.current, {
+        setShowClose(isShowClose);
+    }, [isShowClose]);
+    useEffect(() => {
+        setDebounce(delay);
+    }, [delay]);
+    useEffect(() => {
+        if (open === true && refChild && refChild.current && refTooltip && refTooltip.current) {
+            const popperInstance = createPopper(refChild.current, refTooltip.current, {
                 placement: placement,
                 modifiers: [
                     {
@@ -2035,22 +2056,39 @@ const Tooltip = (props) => {
                     },
                 ]
             });
+            setPopperInstance(popperInstance);
         }
-    }, [show]);
+        else {
+            popperInstance?.destroy();
+        }
+    }, [open]);
     const handleMouseOver = () => {
         setShow(true);
     };
     const handleMouseLeave = () => {
         setShow(false);
     };
+    const handleFocus = () => {
+        setShow(true);
+    };
+    const handleBlur = () => {
+        setShow(false);
+    };
+    const handleClickClose = () => {
+        setShow(false);
+    };
+    useOnDestroy(() => {
+        popperInstance?.destroy();
+    });
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: styles$l.tooltipContainer, ref: refChild, id: "tooltip-container" }, cloneElement(children, {
-            onMouseOver: handleMouseOver,
-            onMouseLeave: handleMouseLeave,
-        })),
-        show && text &&
+        React.createElement("div", { ref: refChild, className: styles$l.tooltipContainer, onMouseOver: handleMouseOver, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur }, children),
+        open && text &&
             React.createElement("div", { className: styles$l.tooltip, ref: refTooltip, id: "tooltip" },
-                text,
+                React.createElement("div", { className: 'd-flex align-items-center' },
+                    text,
+                    showClose &&
+                        React.createElement(Icon, { className: 'ml-1', onClick: handleClickClose },
+                            React.createElement(TimesSolidIcon, null))),
                 React.createElement("div", { id: "arrow", "data-popper-arrow": true }))));
 };
 
@@ -2498,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 = () => {
@@ -2675,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(() => {
@@ -2724,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)),
@@ -2028,14 +2036,27 @@ var styles$l = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","too
 styleInject(css_248z$l);
 
 const Tooltip = (props) => {
-    const { children, text, placement = 'bottom' } = props;
-    const [show, setShow] = React.useState(false);
+    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);
+    const [showClose, setShowClose] = React.useState(isShowClose);
     const refChild = React.useRef();
     const refTooltip = React.useRef();
+    useDebounce(() => { setOpen(show); }, debounce, [show]);
+    React.useEffect(() => {
+        setShow(isOpen);
+    }, [isOpen]);
     React.useEffect(() => {
-        if (show === true && refChild && refChild.current && refTooltip && refTooltip.current) {
-            // TODO - extract to own component?
-            core.createPopper(refChild.current, refTooltip.current, {
+        setShowClose(isShowClose);
+    }, [isShowClose]);
+    React.useEffect(() => {
+        setDebounce(delay);
+    }, [delay]);
+    React.useEffect(() => {
+        if (open === true && refChild && refChild.current && refTooltip && refTooltip.current) {
+            const popperInstance = core.createPopper(refChild.current, refTooltip.current, {
                 placement: placement,
                 modifiers: [
                     {
@@ -2044,22 +2065,39 @@ const Tooltip = (props) => {
                     },
                 ]
             });
+            setPopperInstance(popperInstance);
         }
-    }, [show]);
+        else {
+            popperInstance?.destroy();
+        }
+    }, [open]);
     const handleMouseOver = () => {
         setShow(true);
     };
     const handleMouseLeave = () => {
         setShow(false);
     };
+    const handleFocus = () => {
+        setShow(true);
+    };
+    const handleBlur = () => {
+        setShow(false);
+    };
+    const handleClickClose = () => {
+        setShow(false);
+    };
+    useOnDestroy(() => {
+        popperInstance?.destroy();
+    });
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: styles$l.tooltipContainer, ref: refChild, id: "tooltip-container" }, React.cloneElement(children, {
-            onMouseOver: handleMouseOver,
-            onMouseLeave: handleMouseLeave,
-        })),
-        show && text &&
+        React__default["default"].createElement("div", { ref: refChild, className: styles$l.tooltipContainer, onMouseOver: handleMouseOver, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur }, children),
+        open && text &&
             React__default["default"].createElement("div", { className: styles$l.tooltip, ref: refTooltip, id: "tooltip" },
-                text,
+                React__default["default"].createElement("div", { className: 'd-flex align-items-center' },
+                    text,
+                    showClose &&
+                        React__default["default"].createElement(Icon, { className: 'ml-1', onClick: handleClickClose },
+                            React__default["default"].createElement(TimesSolidIcon, null))),
                 React__default["default"].createElement("div", { id: "arrow", "data-popper-arrow": true }))));
 };
 
@@ -2507,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 = () => {
@@ -2684,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(() => {
@@ -2733,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.2.13",
+	"version": "25.3.1",
 	"description": "handcrafted react components",
 	"main": "index.js",
 	"module": "index.es.js",