@ultraviolet/ui 1.16.0 → 1.18.0

package/README.md

@@ -20,13 +20,13 @@ You will also need to import fonts in your project by adding:
 ### Usage
 
 ```js
-import { theme, normalize, Button } from '@ultraviolet/ui'
-import { Global, css, ThemeProvider } from '@emotion/react'
+import { Global, ThemeProvider, css } from '@emotion/react'
+import { Button, normalize, theme } from '@ultraviolet/ui'
 
 const App = () => (
   <ThemeProvider theme={theme}>
     <Global styles={css`${normalize()}`} />
-    <Button variant="primary" onClick={() => console.log('clicked')}>
+    <Button onClick={() => console.log('clicked')}>
       Click Me
     </Button>
   </ThemeProvider>
@@ -42,10 +42,10 @@ Example, in a `emotion.d.ts` file:
 
 ```ts
 import '@emotion/react'
-import type { SCWUITheme } from '@ultraviolet/ui'
+import type { UltravioletUITheme } from '@ultraviolet/ui'
 
 declare module '@emotion/react' {
-  export interface Theme extends SCWUITheme {}
+  export interface Theme extends UltravioletUITheme {}
 }
 ```
 

package/dist/index.d.ts

@@ -37,7 +37,11 @@ type ActionBarProps = {
 declare const ActionBar: ({ children, role, rank, className, "data-testid": dataTestId, }: ActionBarProps) => react.ReactPortal;
 
 type ScreenSize = keyof typeof consoleLightTheme.screens;
+/**
+ * @deprecated use UltravioletUITheme instead
+ */
 type SCWUITheme = typeof consoleLightTheme;
+type UltravioletUITheme = typeof consoleLightTheme;
 declare const typography: {
     body: {
         fontFamily: string;
@@ -177,10 +181,10 @@ type RecursivePartial<T> = {
 };
 /**
  * Will extend theme with new theme properties
- * @param {SCWUITheme} baseTheme the theme you want to extend from, by default it is set to light theme
- * @param {RecursivePartial<SCWUITheme>} extendedTheme the properties of a new theme you want to apply from baseTheme
+ * @param {UltravioletUITheme} baseTheme the theme you want to extend from, by default it is set to light theme
+ * @param {RecursivePartial<UltravioletUITheme>} extendedTheme the properties of a new theme you want to apply from baseTheme
  */
-declare const extendTheme: (extendedTheme: RecursivePartial<SCWUITheme>) => {
+declare const extendTheme: (extendedTheme: RecursivePartial<UltravioletUITheme>) => {
     colors: {
         danger: {
             background: string;
@@ -803,6 +807,9 @@ type CommonProps = {
     onClick?: MouseEventHandler<HTMLElement>;
     tooltip?: string;
     tabIndex?: ButtonHTMLAttributes<HTMLButtonElement>['tabIndex'];
+    onMouseDown?: MouseEventHandler<HTMLElement>;
+    onMouseUp?: MouseEventHandler<HTMLElement>;
+    onMouseOut?: MouseEventHandler<HTMLElement>;
 };
 type FinalProps = CommonProps & ({
     children: ReactNode;
@@ -1762,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>>;
 
@@ -1827,7 +1836,7 @@ type RowProps = {
     'data-testid'?: string;
     children: ReactNode;
     templateColumns: string;
-    gap?: keyof SCWUITheme['space'] | number;
+    gap?: keyof UltravioletUITheme['space'] | number;
     alignItems?: CSSProperties['alignItems'];
     justifyContent?: CSSProperties['justifyContent'];
 };
@@ -1968,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 = {
@@ -2004,7 +2017,7 @@ type SnippetProps = {
 declare const Snippet: ({ children, copyText, copiedText, showText, hideText, prefix, className, "data-testid": dataTestId, }: SnippetProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type StackProps = {
-    gap?: keyof SCWUITheme['space'] | number;
+    gap?: keyof UltravioletUITheme['space'] | number;
     direction?: 'row' | 'column';
     alignItems?: CSSProperties['alignItems'];
     justifyContent?: CSSProperties['justifyContent'];
@@ -2674,4 +2687,4 @@ declare const down: (size: ScreenSize, rules: string) => string;
 
 declare const normalize: () => string;
 
-export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CheckboxGroup, CheckboxGroupCheckbox, CopyButton, DateInput, EmptyState, Expandable, LineChart, Link, List, Loader, Menu, MenuV2, Meter, Modal, Notice, NumberInput, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, ProgressBar, Radio, RadioGroup, Row, type SCWUITheme, SelectInput, SelectableCard, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextInput, TimeInput, ToastContainer, Toggle, ToggleGroup, Tooltip, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, toast, unfoldIn, unfoldOut, up, zoomIn, zoomOut };
+export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CheckboxGroup, CheckboxGroupCheckbox, CopyButton, DateInput, EmptyState, Expandable, LineChart, Link, List, Loader, Menu, MenuV2, Meter, Modal, Notice, NumberInput, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, ProgressBar, Radio, RadioGroup, Row, type SCWUITheme, SelectInput, SelectableCard, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextInput, TimeInput, ToastContainer, Toggle, ToggleGroup, Tooltip, type UltravioletUITheme, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, toast, unfoldIn, unfoldOut, up, zoomIn, zoomOut };

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

@@ -115,7 +115,7 @@ const Alert = _ref6 => {
           children: [title ? jsx(Text, {
             variant: "bodyStronger",
             as: "span",
-            color: sentiment,
+            sentiment: sentiment,
             children: title
           }) : null, typeof children === 'string' ? jsx(Text, {
             variant: "body",

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

@@ -135,13 +135,13 @@ const Banner = _ref8 => {
         children: [jsx(Text, {
           as: "p",
           variant: size === 'medium' ? 'headingSmall' : 'bodyStronger',
-          color: variant === 'promotional' && theme !== 'light' ? 'neutral' : 'primary',
+          sentiment: variant === 'promotional' && theme !== 'light' ? 'neutral' : 'primary',
           prominence: variant === 'intro' ? 'default' : 'strong',
           children: title
         }), jsx(Text, {
           as: "p",
           variant: "body",
-          color: "neutral",
+          sentiment: "neutral",
           prominence: variant === 'intro' || variant === 'promotional' && theme !== 'light' ? 'default' : 'stronger',
           children: children
         })]

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

@@ -48,7 +48,7 @@ const BarChartToolTip = _ref5 => {
       children: [jsx(Text, {
         variant: "bodyStronger",
         as: "p",
-        color: "primary",
+        sentiment: "primary",
         children: formattedValue
       }), jsx(Text, {
         variant: "bodySmall",

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

@@ -231,6 +231,9 @@ const Button = /*#__PURE__*/forwardRef((_ref10, ref) => {
     isLoading = false,
     children,
     onClick,
+    onMouseDown,
+    onMouseUp,
+    onMouseOut,
     name,
     'aria-label': ariaLabel,
     'aria-current': ariaCurrent,
@@ -289,6 +292,9 @@ const Button = /*#__PURE__*/forwardRef((_ref10, ref) => {
         iconOnly: !!icon && !children,
         tabIndex: tabIndex,
         autoFocus: autoFocus,
+        onMouseDown: onMouseDown,
+        onMouseUp: onMouseUp,
+        onMouseOut: onMouseOut,
         children: content
       })
     });
@@ -318,6 +324,9 @@ const Button = /*#__PURE__*/forwardRef((_ref10, ref) => {
       iconOnly: !!icon && !children,
       tabIndex: tabIndex,
       autoFocus: autoFocus,
+      onMouseDown: onMouseDown,
+      onMouseUp: onMouseUp,
+      onMouseOut: onMouseOut,
       children: content
     })
   });

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, {
@@ -480,12 +483,12 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref64, ref) => {
           variant: "bodySmall",
           as: "p",
           prominence: "weak",
-          color: "neutral",
+          sentiment: "neutral",
           children: helper
         }) : null, error ? jsx(ErrorText, {
           variant: "bodySmall",
           as: "p",
-          color: "danger",
+          sentiment: "danger",
           children: error
         }) : null]
       })]

package/dist/src/components/LineChart/CustomLegend.js

@@ -117,7 +117,7 @@ const CustomLegend = _ref3 => {
                 children: [jsx(Text, {
                   as: "span",
                   variant: "bodySmall",
-                  color: "neutral",
+                  sentiment: "neutral",
                   children: row?.['label']
                 }), jsx("div", {
                   "data-testid": `label-${id}`,

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

@@ -40,13 +40,13 @@ const LineChartTooltip = _ref5 => {
     }), jsxs("div", {
       children: [jsx(Text, {
         variant: "bodyStronger",
-        color: "neutral",
+        sentiment: "neutral",
         prominence: "stronger",
         as: "div",
         children: point.data.yFormatted
       }), jsx(Text, {
         variant: "bodySmall",
-        color: "neutral",
+        sentiment: "neutral",
         prominence: "stronger",
         as: "div",
         children: point.data.xFormatted

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/NumberInput/index.js

@@ -359,7 +359,7 @@ const NumberInput = _ref21 => {
       }), typeof error === 'string' ? jsx(Text, {
         as: "span",
         variant: "bodySmall",
-        color: "danger",
+        sentiment: "danger",
         prominence: "weak",
         children: error
       }) : null]

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/components/Table/HeaderRow.js

@@ -3,7 +3,6 @@ import { HeaderCell } from './HeaderCell.js';
 import { useTableContext } from './TableContext.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
-const SELECT_CHECKBOX_SIZE = 24;
 const HeaderRow = _ref => {
   let {
     children,
@@ -18,18 +17,17 @@ const HeaderRow = _ref => {
   const selectableRowCount = Object.keys(selectedRowIds).length;
   return jsxs("tr", {
     children: [hasSelectAllColumn ? jsx(HeaderCell, {
-      width: `${SELECT_CHECKBOX_SIZE}px`,
+      width: "24px",
       children: jsx(Checkbox, {
         name: "table-select-all-checkbox",
         value: "all",
         "aria-label": "select all",
         checked: allRowSelectValue,
         onChange: allRowSelectValue === false ? selectAll : unselectAll,
-        disabled: selectableRowCount === 0,
-        size: SELECT_CHECKBOX_SIZE
+        disabled: selectableRowCount === 0
       })
     }) : null, children]
   });
 };
 
-export { HeaderRow, SELECT_CHECKBOX_SIZE };
+export { HeaderRow };

package/dist/src/components/Table/Row.js

@@ -3,7 +3,6 @@ import { useEffect } from 'react';
 import { Checkbox } from '../Checkbox/index.js';
 import { Tooltip } from '../Tooltip/index.js';
 import { Cell } from './Cell.js';
-import { SELECT_CHECKBOX_SIZE } from './HeaderRow.js';
 import { useTableContext } from './TableContext.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
@@ -58,8 +57,7 @@ const Row = _ref2 => {
                 selectRow(id);
               }
             },
-            disabled: selectDisabled !== undefined,
-            size: SELECT_CHECKBOX_SIZE
+            disabled: selectDisabled !== undefined
           })
         })
       })

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

@@ -50,34 +50,34 @@ const CloseButton = _ref3 => {
 };
 const Content = _ref4 => {
   let {
-    variant,
+    sentiment,
     children
   } = _ref4;
   return jsxs(Stack, {
     gap: 2,
     direction: "row",
     children: [jsx(Icon, {
-      name: TOAST_ICONS[variant],
+      name: TOAST_ICONS[sentiment],
       size: 24
     }), jsx(Text, {
       variant: "body",
       as: "span",
-      color: variant,
+      sentiment: sentiment,
       children: children
     })]
   });
 };
 const toast = {
   error: (children, options) => toast$1.error(jsx(Content, {
-    variant: "danger",
+    sentiment: "danger",
     children: children
   }), options),
   info: (children, options) => toast$1.info(jsx(Content, {
-    variant: "info",
+    sentiment: "info",
     children: children
   }), options),
   success: (children, options) => toast$1.success(jsx(Content, {
-    variant: "success",
+    sentiment: "success",
     children: children
   }), options)
 };

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/dist/src/theme/index.js

@@ -2,6 +2,10 @@ import { consoleLightTheme } from '@ultraviolet/themes';
 export { consoleDarkTheme as darkTheme, consoleLightTheme as default } from '@ultraviolet/themes';
 import deepmerge from 'deepmerge';
 
+/**
+ * @deprecated use UltravioletUITheme instead
+ */
+
 const {
   colors,
   shadows,
@@ -12,8 +16,8 @@ const {
 } = consoleLightTheme;
 /**
  * Will extend theme with new theme properties
- * @param {SCWUITheme} baseTheme the theme you want to extend from, by default it is set to light theme
- * @param {RecursivePartial<SCWUITheme>} extendedTheme the properties of a new theme you want to apply from baseTheme
+ * @param {UltravioletUITheme} baseTheme the theme you want to extend from, by default it is set to light theme
+ * @param {RecursivePartial<UltravioletUITheme>} extendedTheme the properties of a new theme you want to apply from baseTheme
  */
 const extendTheme = extendedTheme => deepmerge(consoleLightTheme, extendedTheme);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.16.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.19",
+    "@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.21",
-    "@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.4",
+    "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.0.3"
+    "@ultraviolet/icons": "2.2.0"
   }
 }