@ultraviolet/ui 1.11.1 → 1.13.1

package/dist/index.d.ts

@@ -1096,6 +1096,7 @@ type CheckboxProps = {
     ['data-visibility']?: string;
     required?: boolean;
     'data-testid'?: string;
+    tooltip?: string;
 } & Pick<InputHTMLAttributes<HTMLInputElement>, 'onFocus' | 'onBlur' | 'name' | 'value' | 'autoFocus' | 'id' | 'onChange'> & XOR<[
     {
         /**
@@ -1691,6 +1692,7 @@ type RadioProps = {
     helper?: ReactNode;
     className?: string;
     'data-testid'?: string;
+    tooltip?: string;
 } & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange'>> & Pick<InputHTMLAttributes<HTMLInputElement>, 'onFocus' | 'onBlur' | 'disabled' | 'autoFocus' | 'onKeyDown' | 'id' | 'name' | 'required'> & ({
     'aria-label': string;
     label?: never;
@@ -1863,6 +1865,8 @@ type StackProps = {
     alignItems?: CSSProperties['alignItems'];
     justifyContent?: CSSProperties['justifyContent'];
     wrap?: boolean | CSSProperties['flexWrap'];
+    width?: CSSProperties['width'];
+    flex?: CSSProperties['flex'];
     className?: string;
     children: ReactNode;
     'data-testid'?: string;

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

@@ -6,7 +6,8 @@ import { Loader } from '../Loader/index.js';
 import { Row } from '../Row/index.js';
 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';
 
 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 ErrorText = /*#__PURE__*/_styled(Text, {
@@ -107,7 +108,7 @@ const CheckboxInput = /*#__PURE__*/_styled('input', {
   let {
     theme
   } = _ref14;
-  return theme.colors.primary.backgroundStrong;
+  return theme.colors.primary.borderStrong;
 }, ";}}&[aria-invalid='true']+", StyledIcon, ",&[aria-invalid='mixed']+", StyledIcon, "{fill:", _ref15 => {
   let {
     theme
@@ -190,7 +191,7 @@ const CheckboxContainer = /*#__PURE__*/_styled("div", {
   let {
     theme
   } = _ref30;
-  return theme.colors.neutral.borderDisabled;
+  return theme.colors.neutral.borderStrongDisabled;
 }, ";fill:", _ref31 => {
   let {
     theme
@@ -200,17 +201,17 @@ const CheckboxContainer = /*#__PURE__*/_styled("div", {
   let {
     theme
   } = _ref32;
-  return theme.colors.danger.borderDisabled;
+  return theme.colors.danger.backgroundStrongDisabled;
 }, ";", InnerCheckbox, "{stroke:", _ref33 => {
   let {
     theme
   } = _ref33;
-  return theme.colors.danger.borderDisabled;
+  return theme.colors.danger.borderStrongDisabled;
 }, ";fill:", _ref34 => {
   let {
     theme
   } = _ref34;
-  return theme.colors.danger.borderDisabled;
+  return theme.colors.danger.backgroundStrongDisabled;
 }, ";}}", CheckboxInput, "[aria-invalid=\"true\"]+", StyledIcon, "{fill:", _ref35 => {
   let {
     theme
@@ -230,7 +231,7 @@ const CheckboxContainer = /*#__PURE__*/_styled("div", {
   let {
     theme
   } = _ref38;
-  return theme.colors.primary.borderDisabled;
+  return theme.colors.primary.backgroundStrongDisabled;
 }, ";", InnerCheckbox, "{stroke:", _ref39 => {
   let {
     theme
@@ -245,37 +246,37 @@ const CheckboxContainer = /*#__PURE__*/_styled("div", {
   let {
     theme
   } = _ref41;
-  return theme.colors.primary.borderDisabled;
+  return theme.colors.primary.backgroundStrongDisabled;
 }, ";", InnerCheckbox, "{stroke:", _ref42 => {
   let {
     theme
   } = _ref42;
-  return theme.colors.primary.borderDisabled;
+  return theme.colors.primary.borderStrongDisabled;
 }, ";fill:", _ref43 => {
   let {
     theme
   } = _ref43;
-  return theme.colors.primary.borderDisabled;
+  return theme.colors.primary.backgroundStrongDisabled;
 }, ";}}}", CheckboxInput, ":checked+", StyledIcon, " path{transform-origin:center;transition:200ms transform ease-in-out;transform:scale(1);transform:translate(2px, 2px);}", CheckboxInput, ":checked+", StyledIcon, " ", InnerCheckbox, "{fill:", _ref44 => {
   let {
     theme
   } = _ref44;
-  return theme.colors.primary.border;
+  return theme.colors.primary.backgroundStrong;
 }, ";stroke:", _ref45 => {
   let {
     theme
   } = _ref45;
-  return theme.colors.primary.border;
+  return theme.colors.primary.borderStrong;
 }, ";}", CheckboxInput, "[aria-invalid=\"true\"]:checked+", StyledIcon, " ", InnerCheckbox, "{fill:", _ref46 => {
   let {
     theme
   } = _ref46;
-  return theme.colors.danger.border;
+  return theme.colors.danger.backgroundStrong;
 }, ";stroke:", _ref47 => {
   let {
     theme
   } = _ref47;
-  return theme.colors.danger.border;
+  return theme.colors.danger.borderStrong;
 }, ";}", CheckboxInput, "[aria-checked=\"mixed\"]+", StyledIcon, "{", CheckMixedMark, "{fill:", _ref48 => {
   let {
     theme
@@ -285,12 +286,12 @@ const CheckboxContainer = /*#__PURE__*/_styled("div", {
   let {
     theme
   } = _ref49;
-  return theme.colors.primary.border;
+  return theme.colors.primary.backgroundStrong;
 }, ";stroke:", _ref50 => {
   let {
     theme
   } = _ref50;
-  return theme.colors.primary.border;
+  return theme.colors.primary.borderStrong;
 }, ";}}&:hover[aria-disabled='false']{", CheckboxInput, "[aria-invalid='false']{&[aria-checked='false']+", StyledIcon, " ", InnerCheckbox, "{stroke:", _ref51 => {
   let {
     theme
@@ -301,30 +302,60 @@ const CheckboxContainer = /*#__PURE__*/_styled("div", {
     theme
   } = _ref52;
   return theme.colors.primary.backgroundHover;
-}, ";}}", CheckboxInput, "[aria-invalid='true']{&[aria-checked='false']+", StyledIcon, " ", InnerCheckbox, "{stroke:", _ref53 => {
+}, ";}&[aria-checked='true']+", StyledIcon, " ", InnerCheckbox, "{stroke:", _ref53 => {
   let {
     theme
   } = _ref53;
-  return theme.colors.danger.borderHover;
+  return theme.colors.primary.borderStrongHover;
 }, ";fill:", _ref54 => {
   let {
     theme
   } = _ref54;
-  return theme.colors.danger.backgroundHover;
-}, ";}}}", CheckboxInput, "[aria-invalid=\"true\"]+", StyledIcon, "{fill:", _ref55 => {
+  return theme.colors.primary.backgroundStrongHover;
+}, ";}&[aria-checked='mixed']+", StyledIcon, " ", InnerCheckbox, "{stroke:", _ref55 => {
   let {
     theme
   } = _ref55;
-  return theme.colors.danger.backgroundStrong;
-}, ";", InnerCheckbox, "{stroke:", _ref56 => {
+  return theme.colors.primary.borderStrongHover;
+}, ";fill:", _ref56 => {
   let {
     theme
   } = _ref56;
-  return theme.colors.danger.backgroundStrong;
-}, ";fill:", _ref57 => {
+  return theme.colors.primary.backgroundStrongHover;
+}, ";}}", CheckboxInput, "[aria-invalid='true']{&[aria-checked='false']+", StyledIcon, " ", InnerCheckbox, "{stroke:", _ref57 => {
   let {
     theme
   } = _ref57;
+  return theme.colors.danger.borderHover;
+}, ";fill:", _ref58 => {
+  let {
+    theme
+  } = _ref58;
+  return theme.colors.danger.backgroundHover;
+}, ";}&[aria-checked='true']+", StyledIcon, " ", InnerCheckbox, "{stroke:", _ref59 => {
+  let {
+    theme
+  } = _ref59;
+  return theme.colors.danger.borderStrongHover;
+}, ";fill:", _ref60 => {
+  let {
+    theme
+  } = _ref60;
+  return theme.colors.danger.backgroundStrongHover;
+}, ";}}}", CheckboxInput, "[aria-invalid=\"true\"]+", StyledIcon, "{fill:", _ref61 => {
+  let {
+    theme
+  } = _ref61;
+  return theme.colors.danger.backgroundStrong;
+}, ";", InnerCheckbox, "{stroke:", _ref62 => {
+  let {
+    theme
+  } = _ref62;
+  return theme.colors.danger.backgroundStrong;
+}, ";fill:", _ref63 => {
+  let {
+    theme
+  } = _ref63;
   return theme.colors.danger.background;
 }, ";}}");
 const StyledActivityContainer = /*#__PURE__*/_styled("div", {
@@ -337,7 +368,7 @@ const StyledActivityContainer = /*#__PURE__*/_styled("div", {
   styles: "display:flex",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-const Checkbox = /*#__PURE__*/forwardRef((_ref58, ref) => {
+const Checkbox = /*#__PURE__*/forwardRef((_ref64, ref) => {
   let {
     checked = false,
     onChange,
@@ -356,8 +387,9 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref58, ref) => {
     'data-visibility': dataVisibility,
     'aria-label': ariaLabel,
     required,
-    'data-testid': dataTestId
-  } = _ref58;
+    'data-testid': dataTestId,
+    tooltip
+  } = _ref64;
   const [state, setState] = useState(checked);
   const id = useId();
   const computedName = name ?? id;
@@ -374,84 +406,87 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref58, ref) => {
       setState(current => !current);
     }
   }, []);
-  return jsxs(CheckboxContainer, {
-    className: className,
-    "aria-disabled": disabled,
-    "data-visibility": dataVisibility,
-    "data-checked": state,
-    "data-error": !!error,
-    "data-testid": dataTestId,
-    children: [progress ? jsx(StyledActivityContainer, {
-      children: jsx(Loader, {
-        active: true,
-        size: size
-      })
-    }) : null, jsx(CheckboxInput, {
-      id: computedName,
-      type: "checkbox",
-      "aria-invalid": !!error,
-      "aria-describedby": error ? `${computedName}-hint` : undefined,
-      "aria-checked": state === 'indeterminate' ? 'mixed' : state,
-      "aria-label": ariaLabel,
-      checked: state === 'indeterminate' ? false : state,
-      size: size,
-      onChange: onLocalChange,
-      onKeyDown: onKeyDown,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      disabled: disabled,
-      value: value,
-      name: computedName,
-      autoFocus: autoFocus,
-      ref: ref,
-      required: required
-    }), !progress ? jsx(StyledIcon, {
-      size: size,
-      viewBox: "0 0 24 24",
-      children: jsx(CheckboxIconContainer, {
-        children: state !== 'indeterminate' ? jsx("path", {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          width: 14,
-          height: 14,
-          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, {
-          x: "6",
-          y: "11",
-          rx: "1",
-          width: "12",
-          height: "2"
+  return jsx(Tooltip, {
+    text: tooltip,
+    children: jsxs(CheckboxContainer, {
+      className: className,
+      "aria-disabled": disabled,
+      "data-visibility": dataVisibility,
+      "data-checked": state,
+      "data-error": !!error,
+      "data-testid": dataTestId,
+      children: [progress ? jsx(StyledActivityContainer, {
+        children: jsx(Loader, {
+          active: true,
+          size: size
         })
-      })
-    }) : null, jsxs(Stack, {
-      gap: 0.25,
-      children: [jsxs(Row, {
-        templateColumns: "11fr 1fr",
-        alignItems: "center",
-        children: [children ? jsx(StyledLabel, {
-          htmlFor: computedName,
-          children: children
-        }) : null, required ? jsx("sup", {
-          children: jsx(Icon, {
-            name: "asterisk",
-            size: 10,
-            color: "danger"
+      }) : null, jsx(CheckboxInput, {
+        id: computedName,
+        type: "checkbox",
+        "aria-invalid": !!error,
+        "aria-describedby": error ? `${computedName}-hint` : undefined,
+        "aria-checked": state === 'indeterminate' ? 'mixed' : state,
+        "aria-label": ariaLabel,
+        checked: state === 'indeterminate' ? false : state,
+        size: size,
+        onChange: onLocalChange,
+        onKeyDown: onKeyDown,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        disabled: disabled,
+        value: value,
+        name: computedName,
+        autoFocus: autoFocus,
+        ref: ref,
+        required: required
+      }), !progress ? jsx(StyledIcon, {
+        size: size,
+        viewBox: "0 0 24 24",
+        children: jsx(CheckboxIconContainer, {
+          children: state !== 'indeterminate' ? jsx("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            width: 14,
+            height: 14,
+            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, {
+            x: "6",
+            y: "11",
+            rx: "1",
+            width: "12",
+            height: "2"
           })
+        })
+      }) : null, jsxs(Stack, {
+        gap: 0.25,
+        children: [jsxs(Row, {
+          templateColumns: "11fr 1fr",
+          alignItems: "center",
+          children: [children ? jsx(StyledLabel, {
+            htmlFor: computedName,
+            children: children
+          }) : null, required ? jsx("sup", {
+            children: jsx(Icon, {
+              name: "asterisk",
+              size: 10,
+              color: "danger"
+            })
+          }) : null]
+        }), helper ? jsx(Text, {
+          variant: "bodySmall",
+          as: "p",
+          prominence: "weak",
+          color: "neutral",
+          children: helper
+        }) : null, error ? jsx(ErrorText, {
+          variant: "bodySmall",
+          as: "p",
+          color: "danger",
+          children: error
         }) : null]
-      }), helper ? jsx(Text, {
-        variant: "bodySmall",
-        as: "p",
-        prominence: "weak",
-        color: "neutral",
-        children: helper
-      }) : null, error ? jsx(ErrorText, {
-        variant: "bodySmall",
-        as: "p",
-        color: "danger",
-        children: error
-      }) : null]
-    })]
+      })]
+    })
   });
 });
 

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

@@ -81,7 +81,6 @@ const Dialog = _ref9 => {
     const element = containerRef.current;
     if (open) {
       document.body.appendChild(element);
-      dialogRef.current?.focus();
     }
     return () => {
       if (document.body.contains(element)) {
@@ -105,6 +104,7 @@ const Dialog = _ref9 => {
       }
     };
     if (open) {
+      dialogRef.current?.focus();
       document.body.addEventListener('keyup', handleEscPress, {
         capture: true
       });
@@ -124,11 +124,13 @@ const Dialog = _ref9 => {
 
   // Handle body scroll
   useEffect(() => {
+    const previousOverflow = document.body.style.overflow;
     if (open && preventBodyScroll) {
       document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = 'auto';
     }
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
   }, [preventBodyScroll, open]);
 
   // Stop focus to prevent unexpected body loose focus
@@ -166,11 +168,11 @@ const Dialog = _ref9 => {
     const firstFocusableEl = focusableEls[0];
     const lastFocusableEl = focusableEls[focusableEls.length - 1];
     if (event.shiftKey) {
-      if (document.activeElement === firstFocusableEl) {
+      if (document.activeElement === firstFocusableEl || document.activeElement === dialogRef.current) {
         lastFocusableEl.focus();
         event.preventDefault();
       }
-    } else if (document.activeElement === lastFocusableEl) {
+    } else if (document.activeElement === lastFocusableEl || document.activeElement === dialogRef.current) {
       firstFocusableEl.focus();
       event.preventDefault();
     }
@@ -204,6 +206,7 @@ const Dialog = _ref9 => {
       onClose: stopCancel,
       "aria-modal": true,
       ref: dialogRef,
+      tabIndex: 0,
       children: open ? children : null
     })
   }), containerRef.current);

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

@@ -17,11 +17,6 @@ const Disclosure = _ref => {
       element?.removeEventListener('click', handleOpen);
     };
   }, [handleOpen, disclosureRef]);
-  useEffect(() => {
-    if (!visible) {
-      disclosureRef.current?.focus();
-    }
-  }, [visible, disclosureRef]);
   if (typeof disclosure === 'function') {
     return disclosure({
       visible,

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", {
@@ -144,48 +145,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/Stack/index.js

@@ -10,7 +10,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 +20,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.11.1",
+  "version": "1.13.1",
   "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.15",
+    "@babel/core": "7.22.17",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@types/react": "18.2.14",
+    "@types/react": "18.2.21",
     "@types/react-datepicker": "4.15.0",
-    "@types/react-dom": "18.2.6",
+    "@types/react-dom": "18.2.7",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -68,6 +68,6 @@
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.2.1",
-    "@ultraviolet/icons": "2.0.0"
+    "@ultraviolet/icons": "2.0.2"
   }
 }