react-asc 25.2.12 → 25.3.0

package/components/Table/Table.d.ts

@@ -1,7 +1,5 @@
-import type { ReactElement } from 'react';
-export interface ITableProps {
-    children?: ReactElement | ReactElement[];
-    className?: string;
+import React from 'react';
+export interface ITableProps extends React.ComponentProps<'table'> {
     striped?: boolean;
     bordered?: boolean;
     hover?: boolean;

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

@@ -2019,13 +2019,25 @@ 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 [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(() => {
-        if (show === true && refChild && refChild.current && refTooltip && refTooltip.current) {
-            // TODO - extract to own component?
+        setShow(isOpen);
+    }, [isOpen]);
+    useEffect(() => {
+        setShowClose(isShowClose);
+    }, [isShowClose]);
+    useEffect(() => {
+        setDebounce(delay);
+    }, [delay]);
+    useEffect(() => {
+        if (open === true && refChild && refChild.current && refTooltip && refTooltip.current) {
             createPopper(refChild.current, refTooltip.current, {
                 placement: placement,
                 modifiers: [
@@ -2036,21 +2048,31 @@ const Tooltip = (props) => {
                 ]
             });
         }
-    }, [show]);
+    }, [open]);
     const handleMouseOver = () => {
         setShow(true);
     };
     const handleMouseLeave = () => {
         setShow(false);
     };
+    const handleFocus = () => {
+        setShow(true);
+    };
+    const handleBlur = () => {
+        setShow(false);
+    };
+    const handleClickClose = () => {
+        setShow(false);
+    };
     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 }))));
 };
 
@@ -2602,7 +2624,7 @@ var styles$5 = {"tableResponsive":"Table-module_tableResponsive__ykttB","table":
 styleInject(css_248z$5);
 
 const Table = (props) => {
-    const { children, className, bordered, striped, hover, responsive = false } = props;
+    const { children, className, bordered, striped, hover, responsive = false, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$5.table);
@@ -2613,7 +2635,7 @@ const Table = (props) => {
         return cssClasses.filter(css => css).join(' ');
     };
     return (React.createElement(ConditionalWrapper, { condition: responsive, wrapper: (children) => React.createElement("div", { className: styles$5.tableResponsive }, children) },
-        React.createElement("table", { className: getCssClasses() }, children)));
+        React.createElement("table", { className: getCssClasses(), ...rest }, children)));
 };
 
 const TableRow = (props) => {

package/index.js

@@ -2028,13 +2028,25 @@ 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 [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(() => {
-        if (show === true && refChild && refChild.current && refTooltip && refTooltip.current) {
-            // TODO - extract to own component?
+        setShow(isOpen);
+    }, [isOpen]);
+    React.useEffect(() => {
+        setShowClose(isShowClose);
+    }, [isShowClose]);
+    React.useEffect(() => {
+        setDebounce(delay);
+    }, [delay]);
+    React.useEffect(() => {
+        if (open === true && refChild && refChild.current && refTooltip && refTooltip.current) {
             core.createPopper(refChild.current, refTooltip.current, {
                 placement: placement,
                 modifiers: [
@@ -2045,21 +2057,31 @@ const Tooltip = (props) => {
                 ]
             });
         }
-    }, [show]);
+    }, [open]);
     const handleMouseOver = () => {
         setShow(true);
     };
     const handleMouseLeave = () => {
         setShow(false);
     };
+    const handleFocus = () => {
+        setShow(true);
+    };
+    const handleBlur = () => {
+        setShow(false);
+    };
+    const handleClickClose = () => {
+        setShow(false);
+    };
     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 }))));
 };
 
@@ -2611,7 +2633,7 @@ var styles$5 = {"tableResponsive":"Table-module_tableResponsive__ykttB","table":
 styleInject(css_248z$5);
 
 const Table = (props) => {
-    const { children, className, bordered, striped, hover, responsive = false } = props;
+    const { children, className, bordered, striped, hover, responsive = false, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$5.table);
@@ -2622,7 +2644,7 @@ const Table = (props) => {
         return cssClasses.filter(css => css).join(' ');
     };
     return (React__default["default"].createElement(ConditionalWrapper, { condition: responsive, wrapper: (children) => React__default["default"].createElement("div", { className: styles$5.tableResponsive }, children) },
-        React__default["default"].createElement("table", { className: getCssClasses() }, children)));
+        React__default["default"].createElement("table", { className: getCssClasses(), ...rest }, children)));
 };
 
 const TableRow = (props) => {

package/package.json

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