@ultraviolet/ui 1.11.2 → 1.14.0

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

@@ -2,7 +2,8 @@ import _styled from '@emotion/styled/base';
 import { forwardRef, useId } from 'react';
 import { Stack } from '../Stack/index.js';
 import { Text } from '../Text/index.js';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { Tooltip } from '../Tooltip/index.js';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 
 const SIZE = 24;
 const InnerCircleRing = /*#__PURE__*/_styled("circle", {
@@ -129,6 +130,9 @@ const MargedText = /*#__PURE__*/_styled(Text, {
   } = _ref18;
   return theme.space['4'];
 }, ";");
+/**
+ * Radio component is used to select a single option from a list of options. It is a type of input component.
+ */
 const Radio = /*#__PURE__*/forwardRef((_ref19, ref) => {
   let {
     checked = false,
@@ -144,48 +148,52 @@ const Radio = /*#__PURE__*/forwardRef((_ref19, ref) => {
     className,
     autoFocus,
     onKeyDown,
+    tooltip,
     'aria-label': ariaLabel,
     'data-testid': dataTestId
   } = _ref19;
   const id = useId();
   const computedName = name ?? id;
-  return jsxs(Stack, {
-    gap: 0.5,
-    children: [jsxs(RadioContainer, {
-      "aria-disabled": disabled,
-      className: className,
-      "data-checked": checked,
-      "data-error": error,
-      "data-testid": dataTestId,
-      children: [jsx(RadioInput, {
-        type: "radio",
-        "aria-invalid": !!error,
+  return jsx(Tooltip, {
+    text: tooltip,
+    children: jsxs(Stack, {
+      gap: 0.5,
+      children: [jsxs(RadioContainer, {
         "aria-disabled": disabled,
-        "aria-label": ariaLabel,
-        checked: checked,
-        id: `${computedName}-${value}`,
-        onChange: onChange,
-        onFocus: onFocus,
-        onKeyDown: onKeyDown,
-        onBlur: onBlur,
-        value: value,
-        disabled: disabled,
-        name: computedName,
-        autoFocus: autoFocus,
-        ref: ref
-      }), jsx(Ring, {
-        viewBox: "0 0 24 24",
-        children: jsx(RadioMarkedIcon, {})
-      }), label ? jsx("label", {
-        htmlFor: `${computedName}-${value}`,
-        children: label
+        className: className,
+        "data-checked": checked,
+        "data-error": error,
+        "data-testid": dataTestId,
+        children: [jsx(RadioInput, {
+          type: "radio",
+          "aria-invalid": !!error,
+          "aria-disabled": disabled,
+          "aria-label": ariaLabel,
+          checked: checked,
+          id: `${computedName}-${value}`,
+          onChange: onChange,
+          onFocus: onFocus,
+          onKeyDown: onKeyDown,
+          onBlur: onBlur,
+          value: value,
+          disabled: disabled,
+          name: computedName,
+          autoFocus: autoFocus,
+          ref: ref
+        }), jsx(Ring, {
+          viewBox: "0 0 24 24",
+          children: jsx(RadioMarkedIcon, {})
+        }), label ? jsx("label", {
+          htmlFor: `${computedName}-${value}`,
+          children: label
+        }) : null]
+      }), helper ? jsx(MargedText, {
+        as: "p",
+        variant: "bodySmall",
+        prominence: "weak",
+        children: helper
       }) : null]
-    }), helper ? jsx(MargedText, {
-      as: "p",
-      variant: "bodySmall",
-      prominence: "weak",
-      children: helper
-    }) : null]
+    })
   });
 });
 

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

@@ -70,6 +70,9 @@ const StyledRequiredIcon = /*#__PURE__*/_styled(Icon, {
   styles: "vertical-align:super",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
+/**
+ * RadioGroup is a component that allows users to select one option from a list of options using radio.
+ */
 const RadioGroup = _ref2 => {
   let {
     legend,

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

@@ -19,6 +19,10 @@ const StyledRow = /*#__PURE__*/_styled('div', {
     justify-content: ${justifyContent};
   `;
 }, ";");
+/**
+ * Row component is a wrapper for grid layout.
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
 const Row = _ref2 => {
   let {
     className,

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

@@ -655,6 +655,10 @@ const FwdSelectInput = _ref20 => {
     "data-testid": dataTestId
   });
 };
+/**
+ * SelectInput component is a wrapper around [react-select](https://react-select.com) component.
+ * It provides a styled select input with a label and an error message.
+ */
 const SelectInput = /*#__PURE__*/forwardRef((props, ref) => jsx(FwdSelectInput, {
   innerRef: ref,
   ...props

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

@@ -104,6 +104,10 @@ const StyledRadio = /*#__PURE__*/StyledElement.withComponent(Radio, {
 const StyledCheckbox = /*#__PURE__*/StyledElement.withComponent(Checkbox, {
   target: "e1s5n3hj3"
 });
+/**
+ * SelectableCard is a component that can be used to create a radio or checkbox card.
+ * It can be used to create a list of selectable items or a single selectable item.
+ */
 const SelectableCard = /*#__PURE__*/forwardRef((_ref18, ref) => {
   let {
     name,

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

@@ -47,6 +47,9 @@ const StyledHr = /*#__PURE__*/_styled('hr', {
   } = _ref6;
   return hasIcon && `flex: 1;`;
 }, ";");
+/**
+ * Separator component used to separate content with a horizontal or vertical line.
+ */
 const Separator = _ref7 => {
   let {
     direction = 'horizontal',

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

@@ -65,6 +65,11 @@ const variants = {
   list: List,
   slider: Slider
 };
+/**
+ * Skeleton component is used to indicate that the data is loading.
+ * It is used to provide a better user experience by showing a temporary placeholder reflecting the dimensions of the
+ * content that will eventually be loaded on the screen.
+ */
 const Skeleton = _ref6 => {
   let {
     variant = 'blocks',

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

@@ -183,6 +183,10 @@ const CodeContent = _ref18 => {
     })
   });
 };
+/**
+ * Snippet component is used to display code snippets with the ability to copy the code.
+ * It also has the ability to show/hide the code snippet if it has more than 4 lines.
+ */
 const Snippet = _ref19 => {
   let {
     children,

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

@@ -1,5 +1,9 @@
 import _styled from '@emotion/styled/base';
 
+/**
+ * A Stack is a widget that organize children in a vertical or horizontal layout based on css Flex,
+ * it accepts few props to deal with spacing and align.
+ */
 const Stack = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['gap', 'direction', 'alignItems', 'justifyContent', 'wrap'].includes(prop),
   target: "ehpbis70"
@@ -10,7 +14,9 @@ const Stack = /*#__PURE__*/_styled('div', {
     direction = 'column',
     alignItems = 'normal',
     justifyContent = 'normal',
-    wrap = 'nowrap'
+    wrap = 'nowrap',
+    width,
+    flex
   } = _ref;
   return `
     gap: ${theme.space[gap]};
@@ -18,6 +24,8 @@ const Stack = /*#__PURE__*/_styled('div', {
     align-items: ${alignItems};
     justify-content: ${justifyContent};
     flex-wrap: ${typeof wrap === 'boolean' ? 'wrap' : wrap};
+    ${flex ? `flex: ${flex};` : ''}
+    ${width ? `width: ${width};` : ''}
   `;
 }, ";");
 

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

@@ -76,6 +76,9 @@ const StyledAnimatedCircle = /*#__PURE__*/_styled("span", {
 const Container = /*#__PURE__*/_styled("span", {
   target: "eny0xmn0"
 })("display:flex;width:", WIDTH, ";height:", HEIGHT, ";");
+/**
+ * Status component used to display a colored circle with a tooltip for additional information.
+ */
 const Status = _ref10 => {
   let {
     animated = false,

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

@@ -62,6 +62,7 @@ const Item = _ref5 => {
   });
 };
 /**
+ * StepList component is used to display a list of steps.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
 const StepList = _ref6 => {

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

@@ -124,6 +124,9 @@ const StepperNumbers = _ref14 => {
     })]
   });
 };
+/**
+ * Stepper component to show the progress of a process in a linear way.
+ */
 const Stepper = _ref15 => {
   let {
     children,

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

@@ -56,6 +56,9 @@ const StyledSelectableCard = /*#__PURE__*/_styled(SelectableCard, {
   } = _ref9;
   return theme.colors.primary.textWeak;
 }, ";}}");
+/**
+ * SwitchButton is a component that allows the user to select between two options.
+ */
 const SwitchButton = _ref10 => {
   let {
     value,

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

@@ -73,6 +73,10 @@ const BaseTable = /*#__PURE__*/forwardRef((_ref2, ref) => {
     })
   });
 });
+
+/**
+ * Table is a component that displays data in a tabular format.
+ */
 const Table = /*#__PURE__*/Object.assign(BaseTable, {
   Body,
   Row,

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

@@ -46,6 +46,10 @@ const TabsContainer = /*#__PURE__*/_styled("div", {
   return theme.colors.neutral.border;
 }, ";}&::-webkit-scrollbar{display:none;}");
 const SHADOW_THRESHOLD = 10;
+
+/**
+ * Tabs component is used to display a set of tabs with a single tab selected at a time.
+ */
 const Tabs = _ref7 => {
   let {
     children = null,

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

@@ -119,6 +119,11 @@ const TagInner = _ref6 => {
     }) : null]
   });
 };
+
+/**
+ * Tag component is used to display a short text description of an item. It can be used to display a category
+ * or any other metadata.
+ */
 const Tag = _ref7 => {
   let {
     children,

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

@@ -129,6 +129,7 @@ const convertTagArrayToTagStateArray = tags => (tags || [])?.map((tag, index) =>
   label: tag
 });
 /**
+ * TagInput is a component that allows users to input tags.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
 const TagInput = _ref9 => {

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

@@ -43,6 +43,10 @@ const StyledTagContainer = /*#__PURE__*/_styled("div", {
 }, ";");
 const DEFAULT_TAGS = [];
 const getTagLabel = tag => typeof tag === 'object' ? tag.label : tag;
+
+/**
+ * This component is used to display a list of tags with a threshold and a popover when there are too many tags.
+ */
 const TagList = _ref5 => {
   let {
     maxLength = 600,

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

@@ -54,6 +54,10 @@ const StyledText = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['as', 'placement', 'variant', 'sentiment', 'prominence', 'oneLine', 'disabled', 'italic', 'underline'].includes(prop),
   target: "e13y3mga0"
 })(generateStyles);
+
+/**
+ * Text component is used to display text with different variants and sentiments.
+ */
 const Text = _ref2 => {
   let {
     variant,

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

@@ -326,6 +326,11 @@ const UnitLabel = /*#__PURE__*/_styled(Text, {
   } = _ref33;
   return theme.space['1'];
 }, " 0;line-height:18px;");
+
+/**
+ * TextInput component allows users to input text, with options for customization and validation.
+ * It supports various input types and should be appropriately sized with clear labeling.
+ */
 const TextInput = /*#__PURE__*/forwardRef((_ref34, ref) => {
   let {
     'data-testid': dataTestId,

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

@@ -18,6 +18,8 @@ const defaultValue = {
   value: '00:00'
 };
 /**
+ * A time input component that allows users to select a time from a dropdown. The component is built on top of the
+ * `SelectInput` component.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
 const TimeInput = function (_temp) {

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

@@ -81,6 +81,14 @@ const toast = {
     children: children
   }), options)
 };
+/**
+ * Display short information about an event that happen in the interface in a floating alert.
+ * Toaster is based on **react-tostify**, you can find a complete documentation
+ * [here](https://fkhadra.github.io/react-toastify/introduction/).
+ *
+ * Toaster is separated in two parts, first the `ToastContainer` which is where the div of the toast will be rendered,
+ * and second the `toast()` function which is used to display the toast.
+ */
 const ToastContainer = _ref5 => {
   let {
     newestOnTop,

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

@@ -153,6 +153,9 @@ const RequiredIcon = () => jsx("sup", {
     color: "danger"
   })
 });
+/**
+ * Toggle component is used to toggle between two states (on/off, true/false, etc.).
+ */
 const Toggle = /*#__PURE__*/forwardRef((_ref23, ref) => {
   let {
     checked = false,

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

@@ -8,6 +8,9 @@ import { jsx, 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 ToggleGroupContext = /*#__PURE__*/createContext(undefined);
+/**
+ * ToggleGroup is a component that allows you to group a set of Toggle components together under the same legend.
+ */
 const ToggleGroupToggle = _ref => {
   let {
     disabled,

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

@@ -2,6 +2,10 @@ import { forwardRef } from 'react';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { Popup } from '../../internalComponents/Popup/index.js';
 
+/**
+ * Tooltip component is used to display additional information on hover or focus.
+ * It is used to explain the purpose of the element it is attached to.
+ */
 const Tooltip = /*#__PURE__*/forwardRef((_ref, tooltipRef) => {
   let {
     children,

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

@@ -52,6 +52,10 @@ const StyledInput = /*#__PURE__*/_styled("input", {
   return theme.colors.neutral.textWeak;
 }, ";}");
 const DEFAULT_ON_FUNCTION = () => {};
+
+/**
+ * Verification code allows you to enter a code in multiple fields (4 by default).
+ */
 const VerificationCode = _ref9 => {
   let {
     disabled = false,

package/dist/src/index.js

@@ -27,8 +27,8 @@ export { Link } from './components/Link/index.js';
 export { List } from './components/List/index.js';
 export { Loader } from './components/Loader/index.js';
 export { Menu } from './components/Menu/index.js';
-export { Meter } from './components/Meter/Meter.js';
-export { Modal } from './components/Modal/Modal.js';
+export { Meter } from './components/Meter/index.js';
+export { Modal } from './components/Modal/index.js';
 export { Notice } from './components/Notice/index.js';
 export { CheckboxGroup, CheckboxGroupCheckbox } from './components/CheckboxGroup/index.js';
 export { NumberInput } from './components/NumberInput/index.js';

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

@@ -57,7 +57,7 @@ const StyledTooltip = /*#__PURE__*/_styled('div', {
     maxWidth
   } = _ref5;
   return maxWidth;
-}, "px;word-break:break-all;font-size:0.8rem;inset:0 auto auto 0;top:0;left:0;transform:", _ref6 => {
+}, "px;overflow-wrap:break-word;font-size:0.8rem;inset:0 auto auto 0;top:0;left:0;transform:", _ref6 => {
   let {
     positions
   } = _ref6;
@@ -117,7 +117,8 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
     innerRef,
     role = 'tooltip',
     'data-testid': dataTestId,
-    hasArrow = true
+    hasArrow = true,
+    onClose
   } = _ref13;
   const childrenRef = useRef(null);
   useImperativeHandle(innerRef, () => childrenRef.current);
@@ -161,6 +162,20 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
     window.removeEventListener('scroll', onScrollDetected, true);
   }, [onScrollDetected]);
 
+  /**
+   * This function is called when we need to hide tooltip. A timeout is set to allow animation end, then remove
+   * tooltip from dom.
+   */
+  const hideTooltip = useCallback(() => {
+    debounceTimer.current = setTimeout(() => {
+      setReverseAnimation(true);
+      timer.current = setTimeout(() => {
+        unmountTooltip();
+        onClose?.();
+      }, ANIMATION_DURATION);
+    }, 200);
+  }, [onClose, unmountTooltip]);
+
   /**
    * 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.
@@ -170,10 +185,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
     // 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);
+      hideTooltip();
     } 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,
@@ -191,7 +203,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
       }
       setVisibleInDom(true);
     }
-  }, [innerTooltipRef, unmountTooltip]);
+  }, [hideTooltip, innerTooltipRef]);
 
   /**
    * Once tooltip is visible in the dom we can compute positions, then set it visible on screen and add event to
@@ -229,6 +241,33 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
     }
   }, [unmountTooltip]);
 
+  // Handle hide on esc press
+  useEffect(() => {
+    const handleEscPress = event => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        hideTooltip();
+      }
+    };
+    if (visibleInDom) {
+      document.body.addEventListener('keyup', handleEscPress, {
+        capture: true
+      });
+      document.body.addEventListener('keydown', handleEscPress, {
+        capture: true
+      });
+    }
+    return () => {
+      document.body.removeEventListener('keyup', handleEscPress, {
+        capture: true
+      });
+      document.body.addEventListener('keydown', handleEscPress, {
+        capture: true
+      });
+    };
+  }, [hideTooltip, onClose, unmountTooltip, visibleInDom]);
+
   /**
    * Will render children conditionally if children is a function or not.
    */
@@ -244,6 +283,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
     }
     return jsx(StyledChildrenContainer, {
       "aria-describedby": generatedId,
+      "aria-controls": generatedId,
       onBlur: !isControlled ? onPointerEvent(false) : noop,
       onFocus: !isControlled ? onPointerEvent(true) : noop,
       onPointerEnter: !isControlled ? onPointerEvent(true) : noop,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.11.2",
+  "version": "1.14.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.15",
+    "@babel/core": "7.22.17",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
@@ -61,13 +61,13 @@
     "@scaleway/use-media": "2.0.1",
     "deepmerge": "4.3.1",
     "prop-types": "15.8.1",
-    "react-datepicker": "4.16.0",
+    "react-datepicker": "4.17.0",
     "react-flatten-children": "1.1.2",
     "react-select": "5.7.4",
     "react-toastify": "9.1.3",
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.2.1",
-    "@ultraviolet/icons": "2.0.1"
+    "@ultraviolet/icons": "2.0.2"
   }
 }