@onesy/ui-react 1.0.18 → 1.0.19

package/Tooltip/Tooltip.js

@@ -152,7 +152,7 @@ const Tooltip = react_1.default.forwardRef((props_, ref) => {
     const Append = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Append) || Append_1.default; }, [theme]);
     const Modal = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Modal) || Modal_1.default; }, [theme]);
     const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
-    const { tonal = true, color = 'inverted', open: open_, openDefault, name, label: label_, parent, position = 'bottom', switch: switch_ = true, alignment = 'center', portal = true, fullWidth, maxWidth = 'unset', arrow, anchor: anchor_, anchorElement, noMargin, classNameSwitch, transformOrigin, transformOriginSwitch, transformOriginRtl, transformOriginRtlSwitch, click, touch: touch_ = true, longPress: longPress_ = false, hover: hover_ = true, focus: focus_ = false, inset, nowrap, follow, interactive, onOpen: onOpen_, onClose: onClose_, onExited, TransitionComponent = Grow, TransitionComponentProps, AppendProps, ModalProps, LabelProps, 
+    const { tonal = true, color = 'inverted', open: open_, openDefault, name, label: label_, parent, position = 'bottom', switch: switch_ = true, alignment = 'center', portal = true, fullWidth, maxWidth = 'unset', arrow, anchor: anchor_, anchorElement, noMargin, classNameSwitch, transformOrigin, transformOriginSwitch, transformOriginRtl, transformOriginRtlSwitch, click, touch: touch_, longPress: longPress_ = false, hover: hover_ = true, focus: focus_ = false, inset, nowrap, follow, interactive, onOpen: onOpen_, onClose: onClose_, onExited, TransitionComponent = Grow, TransitionComponentProps, AppendProps, ModalProps, LabelProps, 
     // other
     elevation, className, style, children } = props, other = __rest(props, ["tonal", "color", "open", "openDefault", "name", "label", "parent", "position", "switch", "alignment", "portal", "fullWidth", "maxWidth", "arrow", "anchor", "anchorElement", "noMargin", "classNameSwitch", "transformOrigin", "transformOriginSwitch", "transformOriginRtl", "transformOriginRtlSwitch", "click", "touch", "longPress", "hover", "focus", "inset", "nowrap", "follow", "interactive", "onOpen", "onClose", "onExited", "TransitionComponent", "TransitionComponentProps", "AppendProps", "ModalProps", "LabelProps", "elevation", "className", "style", "children"]);
     const [init, setInit] = react_1.default.useState(false);
@@ -164,15 +164,18 @@ const Tooltip = react_1.default.forwardRef((props_, ref) => {
     const [anchor, setAnchor] = react_1.default.useState(anchor_);
     const [inProp, setInProp] = react_1.default.useState(open_);
     const refs = {
+        root: react_1.default.useRef(null),
         open: react_1.default.useRef(false),
         inProp: react_1.default.useRef(inProp),
         longPress: react_1.default.useRef(false),
-        longPressTimer: react_1.default.useRef(undefined),
+        longPressTimer: react_1.default.useRef(null),
+        touchProps: react_1.default.useRef(touch_),
         props: react_1.default.useRef(undefined)
     };
     refs.props.current = props;
     refs.open.current = open;
     refs.inProp.current = inProp;
+    refs.touchProps.current = touch_;
     const { classes } = useStyle();
     const styles = {
         name: {},
@@ -215,17 +218,19 @@ const Tooltip = react_1.default.forwardRef((props_, ref) => {
             children.props.onMouseLeave(event);
     }, []);
     const onTouchStart = react_1.default.useCallback((event) => {
-        if (touch_)
-            setTouch(true);
+        if (!refs.touchProps.current)
+            return;
+        setTouch(true);
         if ((0, utils_1.is)('function', children === null || children === void 0 ? void 0 : children.props.onTouchStart))
             children.props.onTouchStart(event);
-    }, []);
+    }, [touch_]);
     const onTouchEnd = react_1.default.useCallback((event) => {
-        if (touch_)
-            setTouch(false);
+        if (!refs.touchProps.current)
+            return;
+        setTouch(false);
         if ((0, utils_1.is)('function', children === null || children === void 0 ? void 0 : children.props.onTouchEnd))
             children.props.onTouchEnd(event);
-    }, []);
+    }, [touch_]);
     const onFocus = react_1.default.useCallback((event) => {
         if (focus_)
             setFocus(true);
@@ -284,7 +289,13 @@ const Tooltip = react_1.default.forwardRef((props_, ref) => {
         !refs.open.current ? onOpen() : onPreClose();
     }, [onOpen, onPreClose]);
     react_1.default.useEffect(() => {
+        var _a;
         setInit(true);
+        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
+        rootDocument.addEventListener('touchend', onTouchEnd);
+        return () => {
+            rootDocument.removeEventListener('touchend', onTouchEnd);
+        };
     }, []);
     react_1.default.useEffect(() => {
         setAnchor(anchor_);
@@ -419,7 +430,15 @@ const Tooltip = react_1.default.forwardRef((props_, ref) => {
                                     ]
                                 ])
                             }) })) })) })));
-        } }, { children: children && (react_1.default.cloneElement(children, Object.assign(Object.assign({ onMouseMove }, (click && {
+        } }, { children: children && (react_1.default.cloneElement(children, Object.assign(Object.assign({ ref: item => {
+                if (children === null || children === void 0 ? void 0 : children.ref) {
+                    if ((0, utils_1.is)('function', children === null || children === void 0 ? void 0 : children.ref))
+                        children === null || children === void 0 ? void 0 : children.ref(item);
+                    else
+                        children.ref.current = item;
+                }
+                refs.root.current = item;
+            }, onMouseMove }, (click && {
             onClick: (event) => {
                 var _a, _b;
                 event.stopPropagation();

package/esm/Tooltip/Tooltip.js

@@ -199,7 +199,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((props_, ref) => {
       transformOriginRtl,
       transformOriginRtlSwitch,
       click,
-      touch: touch_ = true,
+      touch: touch_,
       longPress: longPress_ = false,
       hover: hover_ = true,
       focus: focus_ = false,
@@ -231,15 +231,18 @@ const Tooltip = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const [anchor, setAnchor] = React.useState(anchor_);
   const [inProp, setInProp] = React.useState(open_);
   const refs = {
+    root: React.useRef(null),
     open: React.useRef(false),
     inProp: React.useRef(inProp),
     longPress: React.useRef(false),
-    longPressTimer: React.useRef(undefined),
+    longPressTimer: React.useRef(null),
+    touchProps: React.useRef(touch_),
     props: React.useRef(undefined)
   };
   refs.props.current = props;
   refs.open.current = open;
   refs.inProp.current = inProp;
+  refs.touchProps.current = touch_;
   const {
     classes
   } = useStyle();
@@ -274,13 +277,15 @@ const Tooltip = /*#__PURE__*/React.forwardRef((props_, ref) => {
     if (is('function', children?.props.onMouseLeave)) children.props.onMouseLeave(event);
   }, []);
   const onTouchStart = React.useCallback(event => {
-    if (touch_) setTouch(true);
+    if (!refs.touchProps.current) return;
+    setTouch(true);
     if (is('function', children?.props.onTouchStart)) children.props.onTouchStart(event);
-  }, []);
+  }, [touch_]);
   const onTouchEnd = React.useCallback(event => {
-    if (touch_) setTouch(false);
+    if (!refs.touchProps.current) return;
+    setTouch(false);
     if (is('function', children?.props.onTouchEnd)) children.props.onTouchEnd(event);
-  }, []);
+  }, [touch_]);
   const onFocus = React.useCallback(event => {
     if (focus_) setFocus(true);
     if (is('function', children?.props.onFocus)) children.props.onFocus(event);
@@ -324,6 +329,11 @@ const Tooltip = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, [onOpen, onPreClose]);
   React.useEffect(() => {
     setInit(true);
+    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+    rootDocument.addEventListener('touchend', onTouchEnd);
+    return () => {
+      rootDocument.removeEventListener('touchend', onTouchEnd);
+    };
   }, []);
   React.useEffect(() => {
     setAnchor(anchor_);
@@ -432,6 +442,12 @@ const Tooltip = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }))));
     }
   }), children && (/*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({
+    ref: item => {
+      if (children?.ref) {
+        if (is('function', children?.ref)) children?.ref(item);else children.ref.current = item;
+      }
+      refs.root.current = item;
+    },
     onMouseMove
   }, click && {
     onClick: event => {

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.18
+/** @license UiReact v1.0.19
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onesy/ui-react",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
   "author": "Lazar <lazareric2@gmail.com>",