@ultraviolet/ui 1.6.1 → 1.8.0

package/dist/src/components/Tooltip/index.js

@@ -1,109 +1,8 @@
-import _styled from '@emotion/styled/base';
-import { css, keyframes } from '@emotion/react';
-import { forwardRef, useRef, useImperativeHandle, useState, useId, useCallback, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { DEFAULT_POSITIONS, computePositions, ARROW_WIDTH } from './helpers.js';
-import { jsx, Fragment, jsxs } from '@emotion/react/jsx-runtime';
+import { forwardRef } from 'react';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Popup } from '../../internalComponents/Popup/index.js';
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const ANIMATION_DURATION = 230; // in ms
-
-function noop() {}
-const animation = positions => keyframes`
-  0% {
-    opacity: 0;
-    transform: ${positions.tooltipInitialPosition};
-  }
-  100% {
-    opacity: 1;
-    transform: ${positions.tooltipPosition};
-  }
-`;
-const exitAnimation = positions => keyframes`
-  0% {
-    opacity: 1;
-    transform: ${positions.tooltipPosition};
-  }
-  100% {
-    opacity: 0;
-    transform: ${positions.tooltipInitialPosition};
-  }
-`;
-const StyledTooltip = /*#__PURE__*/_styled("div", {
-  target: "e1h4zly11"
-})("background:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.backgroundStronger;
-}, ";color:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.colors.neutral.textStronger;
-}, ";border-radius:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.radii.default;
-}, ";padding:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return `${theme.space['0.5']} ${theme.space['1']}`;
-}, ";text-align:center;position:absolute;max-width:", _ref5 => {
-  let {
-    maxWidth
-  } = _ref5;
-  return maxWidth;
-}, "px;font-size:0.8rem;inset:0 auto auto 0;top:0;left:0;transform:", _ref6 => {
-  let {
-    positions
-  } = _ref6;
-  return positions.tooltipPosition;
-}, ";animation:", _ref7 => {
-  let {
-    positions,
-    reverseAnimation
-  } = _ref7;
-  return /*#__PURE__*/css(ANIMATION_DURATION, "ms ", !reverseAnimation ? animation(positions) : exitAnimation(positions), " forwards;");
-}, ";&::after{content:' ';position:absolute;top:", _ref8 => {
-  let {
-    positions
-  } = _ref8;
-  return positions.arrowTop;
-}, "px;left:", _ref9 => {
-  let {
-    positions
-  } = _ref9;
-  return positions.arrowLeft;
-}, "px;transform:", _ref10 => {
-  let {
-    positions
-  } = _ref10;
-  return positions.arrowTransform;
-}, " rotate(", _ref11 => {
-  let {
-    positions
-  } = _ref11;
-  return positions.rotate;
-}, "deg);margin-left:-", ARROW_WIDTH, "px;border-width:", ARROW_WIDTH, "px;border-style:solid;border-color:", _ref12 => {
-  let {
-    theme
-  } = _ref12;
-  return theme.colors.neutral.backgroundStronger;
-}, " transparent transparent transparent;pointer-events:none;}");
-const StyledChildrenContainer = /*#__PURE__*/_styled("div", {
-  target: "e1h4zly10"
-})(process.env.NODE_ENV === "production" ? {
-  name: "ck88l6",
-  styles: "display:inherit"
-} : {
-  name: "ck88l6",
-  styles: "display:inherit",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const Tooltip = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
+const Tooltip = /*#__PURE__*/forwardRef((_ref, tooltipRef) => {
   let {
     children,
     text = '',
@@ -115,160 +14,19 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
     innerRef,
     role = 'tooltip',
     'data-testid': dataTestId
-  } = _ref13;
-  const childrenRef = useRef(null);
-  useImperativeHandle(innerRef, () => childrenRef.current);
-  const tempTooltipRef = useRef(null);
-  const innerTooltipRef = tooltipRef || tempTooltipRef;
-  const timer = useRef();
-
-  // Debounce timer will be used to prevent the tooltip from flickering when the user moves the mouse out and in the children element.
-  const debounceTimer = useRef();
-  const [visibleInDom, setVisibleInDom] = useState(false);
-  const [reverseAnimation, setReverseAnimation] = useState(false);
-  const [positions, setPositions] = useState({
-    ...DEFAULT_POSITIONS
-  });
-  const uniqueId = useId();
-  const generatedId = id ?? uniqueId;
-  const isControlled = visible !== undefined;
-  const generatePositions = useCallback(() => {
-    if (childrenRef.current && innerTooltipRef.current) {
-      setPositions(computePositions({
-        childrenRef,
-        placement,
-        tooltipRef: innerTooltipRef
-      }));
-    }
-  }, [innerTooltipRef, placement]);
-  const onScrollDetected = useCallback(() => {
-    // We remove animation on scroll or the animation will restart on every scroll
-    if (innerTooltipRef.current) {
-      innerTooltipRef.current.style.animation = 'none';
-    }
-    generatePositions();
-  }, [generatePositions, innerTooltipRef]);
-
-  /**
-   * This function is called when we need to remove tooltip portal from DOM and remove event listener to it.
-   */
-  const unmountTooltip = useCallback(() => {
-    setVisibleInDom(false);
-    setReverseAnimation(false);
-    window.removeEventListener('scroll', onScrollDetected, true);
-  }, [onScrollDetected]);
-
-  /**
-   * When mouse hover or stop hovering children this function display or hide tooltip. A timeout is set to allow animation
-   * end, then remove tooltip from dom.
-   */
-  const onPointerEvent = useCallback(isVisible => () => {
-    // This condition is for when we want to unmount the tooltip
-    // There is debounce in order to avoid tooltip to flicker when we move the mouse from children to tooltip
-    // Timer is used to follow the animation duration
-    if (!isVisible && innerTooltipRef.current && !debounceTimer.current) {
-      debounceTimer.current = setTimeout(() => {
-        setReverseAnimation(true);
-        timer.current = setTimeout(() => unmountTooltip(), ANIMATION_DURATION);
-      }, 200);
-    } else if (isVisible) {
-      // This condition is for when we want to mount the tooltip
-      // If the timer exists it means the tooltip was about to umount, but we hovered the children again,
-      // so we clear the timer and the tooltip will not be unmounted
-      if (timer.current) {
-        setReverseAnimation(false);
-        clearTimeout(timer.current);
-        timer.current = undefined;
-      }
-      // And here is when we currently are in a debounce timer, it means tooltip was hovered during
-      // that period, and so we can clear debounce timer
-      if (debounceTimer.current) {
-        clearTimeout(debounceTimer.current);
-        debounceTimer.current = undefined;
-      }
-      setVisibleInDom(true);
-    }
-  }, [innerTooltipRef, unmountTooltip]);
-
-  /**
-   * Once tooltip is visible in the dom we can compute positions, then set it visible on screen and add event to
-   * recompute positions on scroll or screen resize.
-   */
-  useEffect(() => {
-    if (visibleInDom) {
-      generatePositions();
-
-      // We want to detect scroll in order to recompute positions of tooltip
-      // Adding true as third parameter to event listener will detect nested scrolls.
-      window.addEventListener('scroll', onScrollDetected, true);
-    }
-    return () => {
-      window.removeEventListener('scroll', onScrollDetected, true);
-      if (timer.current) {
-        clearTimeout(timer.current);
-        timer.current = undefined;
-      }
-    };
-  }, [generatePositions, onScrollDetected, visibleInDom]);
-
-  /**
-   * If tooltip has `visible` prop it means the tooltip is manually controlled through this prop.
-   * In this cas we don't want to display tooltip on hover, but only when `visible` is true.
-   */
-  useEffect(() => {
-    if (isControlled) {
-      onPointerEvent(visible)();
-    }
-  }, [isControlled, onPointerEvent, visible]);
-  const onKeyDown = useCallback(event => {
-    if (event.code === 'Escape') {
-      unmountTooltip();
-    }
-  }, [unmountTooltip]);
-
-  /**
-   * Will render children conditionally if children is a function or not.
-   */
-  const renderChildren = useCallback(() => {
-    if (typeof children === 'function') {
-      return children({
-        onBlur: !isControlled ? onPointerEvent(false) : noop,
-        onFocus: !isControlled ? onPointerEvent(true) : noop,
-        onPointerEnter: !isControlled ? onPointerEvent(true) : noop,
-        onPointerLeave: !isControlled ? onPointerEvent(false) : noop,
-        ref: childrenRef
-      });
-    }
-    return jsx(StyledChildrenContainer, {
-      "aria-describedby": generatedId,
-      onBlur: !isControlled ? onPointerEvent(false) : noop,
-      onFocus: !isControlled ? onPointerEvent(true) : noop,
-      onPointerEnter: !isControlled ? onPointerEvent(true) : noop,
-      onPointerLeave: !isControlled ? onPointerEvent(false) : noop,
-      ref: childrenRef,
-      tabIndex: 0,
-      onKeyDown: onKeyDown,
-      children: children
-    });
-  }, [children, generatedId, isControlled, onKeyDown, onPointerEvent]);
-  if (!text) {
-    if (typeof children === 'function') return null;
-    return jsx(Fragment, {
-      children: children
-    });
-  }
-  return jsxs(Fragment, {
-    children: [renderChildren(), visibleInDom ? /*#__PURE__*/createPortal(jsx(StyledTooltip, {
-      ref: innerTooltipRef,
-      positions: positions,
-      maxWidth: maxWidth,
-      role: role,
-      id: generatedId,
-      className: className,
-      reverseAnimation: reverseAnimation,
-      "data-testid": dataTestId,
-      children: text
-    }), document.body) : null]
+  } = _ref;
+  return jsx(Popup, {
+    id: id,
+    ref: tooltipRef,
+    role: role,
+    "data-testid": dataTestId,
+    className: className,
+    maxWidth: maxWidth,
+    visible: visible,
+    placement: placement,
+    text: text,
+    innerRef: innerRef,
+    children: children
   });
 });
 

package/dist/src/internalComponents/Popup/index.js

@@ -0,0 +1,278 @@
+import _styled from '@emotion/styled/base';
+import { css, keyframes } from '@emotion/react';
+import { forwardRef, useRef, useImperativeHandle, useState, useId, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { DEFAULT_POSITIONS, computePositions, ARROW_WIDTH } from './helpers.js';
+import { jsx, Fragment, jsxs } from '@emotion/react/jsx-runtime';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const ANIMATION_DURATION = 230; // in ms
+
+function noop() {}
+const animation = positions => keyframes`
+  0% {
+    opacity: 0;
+    transform: ${positions.tooltipInitialPosition};
+  }
+  100% {
+    opacity: 1;
+    transform: ${positions.tooltipPosition};
+  }
+`;
+const exitAnimation = positions => keyframes`
+  0% {
+    opacity: 1;
+    transform: ${positions.tooltipPosition};
+  }
+  100% {
+    opacity: 0;
+    transform: ${positions.tooltipInitialPosition};
+  }
+`;
+const StyledTooltip = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['maxWidth', 'positions', 'reverseAnimation'].includes(prop),
+  target: "efkq4701"
+})("background:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.backgroundStronger;
+}, ";color:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.neutral.textStronger;
+}, ";border-radius:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.radii.default;
+}, ";padding:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return `${theme.space['0.5']} ${theme.space['1']}`;
+}, ";text-align:center;position:absolute;max-width:", _ref5 => {
+  let {
+    maxWidth
+  } = _ref5;
+  return maxWidth;
+}, "px;font-size:0.8rem;inset:0 auto auto 0;top:0;left:0;transform:", _ref6 => {
+  let {
+    positions
+  } = _ref6;
+  return positions.tooltipPosition;
+}, ";animation:", _ref7 => {
+  let {
+    positions,
+    reverseAnimation
+  } = _ref7;
+  return /*#__PURE__*/css(ANIMATION_DURATION, "ms ", !reverseAnimation ? animation(positions) : exitAnimation(positions), " forwards;");
+}, ";&[data-has-arrow='true']{&::after{content:' ';position:absolute;top:", _ref8 => {
+  let {
+    positions
+  } = _ref8;
+  return positions.arrowTop;
+}, "px;left:", _ref9 => {
+  let {
+    positions
+  } = _ref9;
+  return positions.arrowLeft;
+}, "px;transform:", _ref10 => {
+  let {
+    positions
+  } = _ref10;
+  return positions.arrowTransform;
+}, " rotate(", _ref11 => {
+  let {
+    positions
+  } = _ref11;
+  return positions.rotate;
+}, "deg);margin-left:-", ARROW_WIDTH, "px;border-width:", ARROW_WIDTH, "px;border-style:solid;border-color:", _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.colors.neutral.backgroundStronger;
+}, " transparent transparent transparent;pointer-events:none;}}");
+const StyledChildrenContainer = /*#__PURE__*/_styled("div", {
+  target: "efkq4700"
+})(process.env.NODE_ENV === "production" ? {
+  name: "ck88l6",
+  styles: "display:inherit"
+} : {
+  name: "ck88l6",
+  styles: "display:inherit",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
+  let {
+    children,
+    text = '',
+    placement = 'auto',
+    id,
+    className,
+    maxWidth = 232,
+    visible,
+    innerRef,
+    role = 'tooltip',
+    'data-testid': dataTestId,
+    hasArrow = true
+  } = _ref13;
+  const childrenRef = useRef(null);
+  useImperativeHandle(innerRef, () => childrenRef.current);
+  const tempTooltipRef = useRef(null);
+  const innerTooltipRef = tooltipRef || tempTooltipRef;
+  const timer = useRef();
+
+  // Debounce timer will be used to prevent the tooltip from flickering when the user moves the mouse out and in the children element.
+  const debounceTimer = useRef();
+  const [visibleInDom, setVisibleInDom] = useState(false);
+  const [reverseAnimation, setReverseAnimation] = useState(false);
+  const [positions, setPositions] = useState({
+    ...DEFAULT_POSITIONS
+  });
+  const uniqueId = useId();
+  const generatedId = id ?? uniqueId;
+  const isControlled = visible !== undefined;
+  const generatePositions = useCallback(() => {
+    if (childrenRef.current && innerTooltipRef.current) {
+      setPositions(computePositions({
+        childrenRef,
+        placement,
+        tooltipRef: innerTooltipRef
+      }));
+    }
+  }, [innerTooltipRef, placement]);
+  const onScrollDetected = useCallback(() => {
+    // We remove animation on scroll or the animation will restart on every scroll
+    if (innerTooltipRef.current) {
+      innerTooltipRef.current.style.animation = 'none';
+    }
+    generatePositions();
+  }, [generatePositions, innerTooltipRef]);
+
+  /**
+   * This function is called when we need to remove tooltip portal from DOM and remove event listener to it.
+   */
+  const unmountTooltip = useCallback(() => {
+    setVisibleInDom(false);
+    setReverseAnimation(false);
+    window.removeEventListener('scroll', onScrollDetected, true);
+  }, [onScrollDetected]);
+
+  /**
+   * When mouse hover or stop hovering children this function display or hide tooltip. A timeout is set to allow animation
+   * end, then remove tooltip from dom.
+   */
+  const onPointerEvent = useCallback(isVisible => () => {
+    // This condition is for when we want to unmount the tooltip
+    // There is debounce in order to avoid tooltip to flicker when we move the mouse from children to tooltip
+    // Timer is used to follow the animation duration
+    if (!isVisible && innerTooltipRef.current && !debounceTimer.current) {
+      debounceTimer.current = setTimeout(() => {
+        setReverseAnimation(true);
+        timer.current = setTimeout(() => unmountTooltip(), ANIMATION_DURATION);
+      }, 200);
+    } else if (isVisible) {
+      // This condition is for when we want to mount the tooltip
+      // If the timer exists it means the tooltip was about to umount, but we hovered the children again,
+      // so we clear the timer and the tooltip will not be unmounted
+      if (timer.current) {
+        setReverseAnimation(false);
+        clearTimeout(timer.current);
+        timer.current = undefined;
+      }
+      // And here is when we currently are in a debounce timer, it means tooltip was hovered during
+      // that period, and so we can clear debounce timer
+      if (debounceTimer.current) {
+        clearTimeout(debounceTimer.current);
+        debounceTimer.current = undefined;
+      }
+      setVisibleInDom(true);
+    }
+  }, [innerTooltipRef, unmountTooltip]);
+
+  /**
+   * Once tooltip is visible in the dom we can compute positions, then set it visible on screen and add event to
+   * recompute positions on scroll or screen resize.
+   */
+  useEffect(() => {
+    if (visibleInDom) {
+      generatePositions();
+
+      // We want to detect scroll in order to recompute positions of tooltip
+      // Adding true as third parameter to event listener will detect nested scrolls.
+      window.addEventListener('scroll', onScrollDetected, true);
+    }
+    return () => {
+      window.removeEventListener('scroll', onScrollDetected, true);
+      if (timer.current) {
+        clearTimeout(timer.current);
+        timer.current = undefined;
+      }
+    };
+  }, [generatePositions, onScrollDetected, visibleInDom]);
+
+  /**
+   * If tooltip has `visible` prop it means the tooltip is manually controlled through this prop.
+   * In this cas we don't want to display tooltip on hover, but only when `visible` is true.
+   */
+  useEffect(() => {
+    if (isControlled) {
+      onPointerEvent(visible)();
+    }
+  }, [isControlled, onPointerEvent, visible]);
+  const onKeyDown = useCallback(event => {
+    if (event.code === 'Escape') {
+      unmountTooltip();
+    }
+  }, [unmountTooltip]);
+
+  /**
+   * Will render children conditionally if children is a function or not.
+   */
+  const renderChildren = useCallback(() => {
+    if (typeof children === 'function') {
+      return children({
+        onBlur: !isControlled ? onPointerEvent(false) : noop,
+        onFocus: !isControlled ? onPointerEvent(true) : noop,
+        onPointerEnter: !isControlled ? onPointerEvent(true) : noop,
+        onPointerLeave: !isControlled ? onPointerEvent(false) : noop,
+        ref: childrenRef
+      });
+    }
+    return jsx(StyledChildrenContainer, {
+      "aria-describedby": generatedId,
+      onBlur: !isControlled ? onPointerEvent(false) : noop,
+      onFocus: !isControlled ? onPointerEvent(true) : noop,
+      onPointerEnter: !isControlled ? onPointerEvent(true) : noop,
+      onPointerLeave: !isControlled ? onPointerEvent(false) : noop,
+      ref: childrenRef,
+      tabIndex: 0,
+      onKeyDown: onKeyDown,
+      children: children
+    });
+  }, [children, generatedId, isControlled, onKeyDown, onPointerEvent]);
+  if (!text) {
+    if (typeof children === 'function') return null;
+    return jsx(Fragment, {
+      children: children
+    });
+  }
+  return jsxs(Fragment, {
+    children: [renderChildren(), visibleInDom ? /*#__PURE__*/createPortal(jsx(StyledTooltip, {
+      ref: innerTooltipRef,
+      positions: positions,
+      maxWidth: maxWidth,
+      role: role,
+      id: generatedId,
+      className: className,
+      reverseAnimation: reverseAnimation,
+      "data-testid": dataTestId,
+      "data-has-arrow": hasArrow,
+      children: text
+    }), document.body) : null]
+  });
+});
+
+export { Popup };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.6.1",
+  "version": "1.8.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -39,7 +39,7 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.22.8",
+    "@babel/core": "7.22.9",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
@@ -67,6 +67,6 @@
     "react-toastify": "9.1.3",
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
-    "@ultraviolet/themes": "1.2.0"
+    "@ultraviolet/themes": "1.2.1"
   }
 }