@ultraviolet/ui 1.17.0 → 1.18.0

package/dist/index.d.ts

@@ -1769,6 +1769,8 @@ type PopupProps = {
     tabIndex?: number;
     onKeyDown?: KeyboardEventHandler;
     'aria-haspopup'?: HTMLAttributes<HTMLDivElement>['aria-haspopup'];
+    hideOnClickOutside?: boolean;
+    needDebounce?: boolean;
 };
 declare const Popup: react.ForwardRefExoticComponent<PopupProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -1975,6 +1977,10 @@ declare const variants$1: {
     readonly slider: ({ length }: {
         length?: number | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
+    readonly square: _emotion_styled.StyledComponent<{
+        theme?: _emotion_react.Theme | undefined;
+        as?: react.ElementType<any> | undefined;
+    }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 };
 type SkeletonVariant = keyof typeof variants$1;
 type SkeletonProps = {

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

@@ -41,10 +41,10 @@ const CheckboxIconContainer = _ref4 => {
   const theme = useTheme();
   return jsxs("g", {
     children: [jsx(InnerCheckbox, {
-      x: "2",
-      y: "2",
-      width: "20",
-      height: "20",
+      x: "4",
+      y: "4",
+      width: "16",
+      height: "16",
       rx: theme.radii.small,
       strokeWidth: "2"
     }), children]
@@ -129,11 +129,11 @@ const CheckboxInput = /*#__PURE__*/_styled('input', {
     theme
   } = _ref18;
   return theme.colors.danger.background;
-}, ";outline:2px solid ", _ref19 => {
+}, ";outline:1px solid ", _ref19 => {
   let {
     theme
   } = _ref19;
-  return theme.colors.primary.backgroundHover;
+  return theme.shadows.focusPrimary;
 }, ";", InnerCheckbox, "{stroke:", _ref20 => {
   let {
     theme
@@ -154,11 +154,11 @@ const CheckboxInput = /*#__PURE__*/_styled('input', {
     theme
   } = _ref23;
   return theme.colors.danger.background;
-}, ";outline:2px solid ", _ref24 => {
+}, ";outline:1px solid ", _ref24 => {
   let {
     theme
   } = _ref24;
-  return theme.colors.danger.backgroundHover;
+  return theme.shadows.focusDanger;
 }, ";", InnerCheckbox, "{stroke:", _ref25 => {
   let {
     theme
@@ -445,12 +445,15 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref64, ref) => {
       }), !progress ? jsx(StyledIcon, {
         size: size,
         viewBox: "0 0 24 24",
+        fill: "none",
         children: jsx(CheckboxIconContainer, {
           children: state !== 'indeterminate' ? jsx("path", {
             fillRule: "evenodd",
             clipRule: "evenodd",
-            width: 14,
-            height: 14,
+            width: 12,
+            height: 9,
+            x: "5",
+            y: "4",
             d: "M15.6678 5.26709C16.0849 5.6463 16.113 6.28907 15.7307 6.70276L9.29172 13.6705C9.10291 13.8748 8.83818 13.9937 8.55884 13.9998C8.2795 14.0058 8.0098 13.8984 7.81223 13.7024L4.30004 10.2185C3.89999 9.82169 3.89999 9.17831 4.30004 8.78149C4.70009 8.38467 5.34869 8.38467 5.74874 8.78149L8.50441 11.5149L14.2205 5.32951C14.6028 4.91583 15.2508 4.88788 15.6678 5.26709Z",
             fill: "white"
           }) : jsx(CheckMixedMark, {

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

@@ -92,6 +92,8 @@ const FwdMenu = /*#__PURE__*/forwardRef((_ref7, ref) => {
     ref: disclosureRef
   });
   return jsx(StyledPopup, {
+    needDebounce: false,
+    hideOnClickOutside: true,
     "aria-label": ariaLabel,
     className: className,
     visible: isVisible,

package/dist/src/components/Modal/Dialog.js

@@ -94,33 +94,12 @@ const Dialog = _ref9 => {
     onCloseRef.current = onClose;
   }, [onClose]);
 
-  // Handle hide on esc press
+  // On open focus the modal
   useEffect(() => {
-    const handleEscPress = event => {
-      if (event.key === 'Escape' && hideOnEsc) {
-        event.preventDefault();
-        event.stopPropagation();
-        onCloseRef.current();
-      }
-    };
     if (open) {
       dialogRef.current?.focus();
-      document.body.addEventListener('keyup', handleEscPress, {
-        capture: true
-      });
-      document.body.addEventListener('keydown', handleEscPress, {
-        capture: true
-      });
     }
-    return () => {
-      document.body.removeEventListener('keyup', handleEscPress, {
-        capture: true
-      });
-      document.body.removeEventListener('keydown', handleEscPress, {
-        capture: true
-      });
-    };
-  }, [open, onCloseRef, hideOnEsc]);
+  }, [open]);
 
   // Handle body scroll
   useEffect(() => {
@@ -143,10 +122,23 @@ const Dialog = _ref9 => {
     event.stopPropagation();
   }, []);
 
-  // Stop key up : used when having inputs in modals
-  const stopKeyUp = useCallback(event => {
+  // handle key up : used when having inputs in modals - useful for hideOnEsc
+  const handleKeyUp = useCallback(event => {
     event.stopPropagation();
-  }, []);
+    if (event.key === 'Escape' && hideOnEsc) {
+      event.preventDefault();
+      onCloseRef.current();
+    }
+  }, [hideOnEsc]);
+  const handleClose = useCallback(event => {
+    event.stopPropagation();
+    if (hideOnClickOutside) {
+      onCloseRef.current();
+    } else {
+      // Because overlay is not focusable we can't handle hideOnEsc properly
+      dialogRef.current?.focus();
+    }
+  }, [hideOnClickOutside]);
 
   // Enable focus trap inside the modal
   const handleFocusTrap = useCallback(event => {
@@ -185,14 +177,14 @@ const Dialog = _ref9 => {
   };
   return /*#__PURE__*/createPortal(jsx(StyledBackdrop, {
     "data-open": open,
-    onClick: hideOnClickOutside ? onClose : undefined,
+    onClick: handleClose,
     className: backdropClassName,
     css: backdropCss,
     "data-testid": dataTestId ? `${dataTestId}-backdrop` : undefined,
     onFocus: stopFocus,
     children: jsx(StyledDialog, {
       css: dialogCss,
-      onKeyUp: stopKeyUp,
+      onKeyUp: handleKeyUp,
       onKeyDown: handleFocusTrap,
       className: className,
       id: id,

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

@@ -118,17 +118,6 @@ const Popover = _ref6 => {
   useEffect(() => {
     setLocalVisible(visible);
   }, [visible]);
-  const handleClickOutside = useCallback(event => {
-    if (ref.current && !ref.current.contains(event.target)) {
-      onClose?.();
-    }
-  }, [onClose]);
-  useEffect(() => {
-    document.addEventListener('click', handleClickOutside, true);
-    return () => {
-      document.removeEventListener('click', handleClickOutside, true);
-    };
-  }, [handleClickOutside]);
 
   // When space key is pressed we show the popover
   const onKeyDownSpace = useCallback(event => {
@@ -146,6 +135,8 @@ const Popover = _ref6 => {
     innerRef.current?.focus();
   }, [onClose]);
   return jsx(StyledPopup, {
+    hideOnClickOutside: true,
+    needDebounce: false,
     visible: localVisible,
     placement: placement,
     text: jsx(ContentWrapper, {

package/dist/src/components/Skeleton/Square.js

@@ -0,0 +1,12 @@
+import _styled from '@emotion/styled/base';
+
+const Square = /*#__PURE__*/_styled("div", {
+  target: "e1uz28830"
+})("height:100%;width:100%;max-width:100%;background-color:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral.borderWeak;
+}, ";");
+
+export { Square };

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

@@ -7,6 +7,7 @@ import { Donut } from './Donut.js';
 import { Line } from './Line.js';
 import { List } from './List.js';
 import { Slider } from './Slider.js';
+import { Square } from './Square.js';
 import { jsxs, jsx } 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)."; }
@@ -21,11 +22,11 @@ const shineAnimation = keyframes`
 const StyledContainer = /*#__PURE__*/_styled("div", {
   target: "e183x2r81"
 })(process.env.NODE_ENV === "production" ? {
-  name: "po0r11",
-  styles: "position:relative;display:block;width:100%;overflow:hidden;cursor:progress"
+  name: "158ltsb",
+  styles: "position:relative;width:100%;overflow:hidden;cursor:progress;display:flex;flex-flow:column;height:100%"
 } : {
-  name: "po0r11",
-  styles: "position:relative;display:block;width:100%;overflow:hidden;cursor:progress",
+  name: "158ltsb",
+  styles: "position:relative;width:100%;overflow:hidden;cursor:progress;display:flex;flex-flow:column;height:100%",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 const StyledDiv = /*#__PURE__*/_styled("div", {
@@ -63,7 +64,8 @@ const variants = {
   donut: Donut,
   line: Line,
   list: List,
-  slider: Slider
+  slider: Slider,
+  square: Square
 };
 /**
  * Skeleton component is used to indicate that the data is loading.

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

@@ -7,7 +7,7 @@ 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
-
+const DEBOUNCE_DURATION = 200;
 function noop() {}
 const animation = positions => keyframes`
   0% {
@@ -121,7 +121,9 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
     onClose,
     tabIndex = 0,
     onKeyDown,
-    'aria-haspopup': ariaHasPopup
+    'aria-haspopup': ariaHasPopup,
+    hideOnClickOutside = false,
+    needDebounce = true
   } = _ref13;
   const childrenRef = useRef(null);
   useImperativeHandle(innerRef, () => childrenRef.current);
@@ -176,8 +178,8 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
         unmountTooltip();
         onClose?.();
       }, ANIMATION_DURATION);
-    }, 200);
-  }, [onClose, unmountTooltip]);
+    }, needDebounce ? DEBOUNCE_DURATION : 0);
+  }, [needDebounce, onClose, unmountTooltip]);
 
   /**
    * When mouse hover or stop hovering children this function display or hide tooltip. A timeout is set to allow animation
@@ -244,7 +246,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
     }
   }, [unmountTooltip]);
 
-  // Handle hide on esc press
+  // Handle hide on esc press and hide on click outside
   useEffect(() => {
     const handleEscPress = event => {
       if (event.key === 'Escape') {
@@ -253,23 +255,26 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
         hideTooltip();
       }
     };
+    const handleClickOutside = event => {
+      const tooltipCurrent = innerTooltipRef.current;
+      const childrenCurrent = childrenRef.current;
+      if (tooltipCurrent && hideOnClickOutside) {
+        if (event.target && event.target !== tooltipCurrent && event.target !== childrenCurrent && !childrenCurrent?.contains(event.target) && !tooltipCurrent.contains(event.target)) {
+          event.preventDefault();
+          event.stopPropagation();
+          hideTooltip();
+        }
+      }
+    };
     if (visibleInDom) {
-      document.body.addEventListener('keyup', handleEscPress, {
-        capture: true
-      });
-      document.body.addEventListener('keydown', handleEscPress, {
-        capture: true
-      });
+      document.body.addEventListener('keyup', handleEscPress);
+      document.body.addEventListener('click', handleClickOutside);
     }
     return () => {
-      document.body.removeEventListener('keyup', handleEscPress, {
-        capture: true
-      });
-      document.body.addEventListener('keydown', handleEscPress, {
-        capture: true
-      });
+      document.body.removeEventListener('keyup', handleEscPress);
+      document.body.removeEventListener('click', handleClickOutside);
     };
-  }, [hideTooltip, onClose, unmountTooltip, visibleInDom]);
+  }, [hideTooltip, visibleInDom, innerTooltipRef, childrenRef, hideOnClickOutside]);
 
   /**
    * Will render children conditionally if children is a function or not.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -39,13 +39,13 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.22.20",
+    "@babel/core": "7.23.0",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@types/react": "18.2.22",
-    "@types/react-datepicker": "4.15.0",
-    "@types/react-dom": "18.2.7",
+    "@types/react": "18.2.25",
+    "@types/react-datepicker": "4.15.1",
+    "@types/react-dom": "18.2.10",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -62,11 +62,11 @@
     "deepmerge": "4.3.1",
     "react-datepicker": "4.18.0",
     "react-flatten-children": "1.1.2",
-    "react-select": "5.7.5",
+    "react-select": "5.7.7",
     "react-toastify": "9.1.3",
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.2.1",
-    "@ultraviolet/icons": "2.1.0"
+    "@ultraviolet/icons": "2.2.0"
   }
 }