@ultraviolet/ui 1.10.1 → 1.11.1

package/dist/index.d.ts

@@ -24,11 +24,10 @@ type ActionBarProps = {
      */
     rank?: number;
     role?: string;
-    'aria-modal'?: 'true' | 'false';
     className?: string;
     'data-testid'?: string;
 };
-declare const ActionBar: ({ children, role, rank, "aria-modal": ariaModal, className, "data-testid": dataTestId, }: ActionBarProps) => react.ReactPortal;
+declare const ActionBar: ({ children, role, rank, className, "data-testid": dataTestId, }: ActionBarProps) => react.ReactPortal;
 
 type ScreenSize = keyof typeof consoleLightTheme.screens;
 type SCWUITheme = typeof consoleLightTheme;
@@ -1453,6 +1452,25 @@ type NoticeProps = {
 };
 declare const Notice: ({ children, className, "data-testid": dataTestId, }: NoticeProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+type CheckboxGroupCheckboxProps = Omit<ComponentProps<typeof Checkbox>, 'onChange' | 'checked' | 'required'> & {
+    value: string;
+};
+declare const CheckboxGroupCheckbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, }: CheckboxGroupCheckboxProps) => _emotion_react_jsx_runtime.JSX.Element;
+type CheckboxGroupProps = {
+    legend: string;
+    value?: string[];
+    className?: string;
+    helper?: ReactNode;
+    error?: ReactNode;
+    direction?: 'row' | 'column';
+    children: ReactNode;
+    required?: boolean;
+} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name'>> & Pick<InputHTMLAttributes<HTMLInputElement>, 'required'>;
+declare const CheckboxGroup: {
+    ({ legend, value, className, helper, error, direction, children, onChange, name, required, }: CheckboxGroupProps): _emotion_react_jsx_runtime.JSX.Element;
+    Checkbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, }: CheckboxGroupCheckboxProps) => _emotion_react_jsx_runtime.JSX.Element;
+};
+
 declare const containerSizes: {
     large: number;
     medium: number;
@@ -2285,25 +2303,42 @@ type ToastContainerProps = {
 };
 declare const ToastContainer: ({ newestOnTop, limit, position, "data-testid": dataTestId, }: ToastContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type ToggleProps = {
-    id?: string;
-    checked?: boolean;
+declare const Toggle: react.ForwardRefExoticComponent<{
+    id?: string | undefined;
+    checked?: boolean | undefined;
     name: string;
-    tooltip?: string;
+    tooltip?: string | undefined;
     /**
      * If `onChange` is given component will work as a controlled component if not it will work as an uncontrolled component.
      */
-    onChange?: ChangeEventHandler<HTMLInputElement>;
-    size?: 'large' | 'small';
-    labelPosition?: 'left' | 'right';
+    onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
+    size?: "large" | "small" | undefined;
+    labelPosition?: "left" | "right" | undefined;
     label?: ReactNode;
     helper?: ReactNode;
-    disabled?: boolean;
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+    required?: boolean | undefined;
+    'data-testid'?: string | undefined;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "value"> & react.RefAttributes<HTMLInputElement>>;
+
+type ToggleGroupToggleProps = Omit<ComponentProps<typeof Toggle>, 'onChange' | 'checked' | 'required'> & {
+    value: string;
+};
+type ToggleGroupProps = {
+    legend: string;
+    value?: string[];
     className?: string;
+    helper?: ReactNode;
+    error?: ReactNode;
+    direction?: 'row' | 'column';
+    children: ReactNode;
     required?: boolean;
-    'data-testid'?: string;
+} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name'>> & Pick<InputHTMLAttributes<HTMLInputElement>, 'required'>;
+declare const ToggleGroup: {
+    ({ legend, value, className, helper, error, direction, children, onChange, name, required, }: ToggleGroupProps): _emotion_react_jsx_runtime.JSX.Element;
+    Toggle: ({ disabled, name, value, label, helper, className, "data-testid": dataTestId, }: ToggleGroupToggleProps) => _emotion_react_jsx_runtime.JSX.Element;
 };
-declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLInputElement>>;
 
 type TooltipProps = Pick<ComponentProps<typeof Popup>, 'id' | 'children' | 'maxWidth' | 'placement' | 'text' | 'className' | 'visible' | 'innerRef' | 'role' | 'data-testid' | 'containerFullWidth'>;
 declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLDivElement>>;
@@ -2396,4 +2431,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, CopyButton, DateInput, EmptyState, Expandable, LineChart, Link, List, Loader, Menu, Meter, Modal, Notice, NumberInput, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, ProgressBar, Radio, RadioGroup, Row, SCWUITheme, SelectInput, SelectableCard, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextInput, TimeInput, ToastContainer, Toggle, 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, 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 };

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

@@ -33,14 +33,12 @@ const ActionBar = _ref5 => {
     children,
     role = 'dialog',
     rank = 0,
-    'aria-modal': ariaModal = 'true',
     className,
     'data-testid': dataTestId
   } = _ref5;
   return /*#__PURE__*/createPortal(jsx(StyledDiv, {
     rank: rank,
     role: role,
-    "aria-modal": ariaModal,
     className: className,
     "data-testid": dataTestId,
     children: children

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

@@ -0,0 +1,129 @@
+import _styled from '@emotion/styled/base';
+import { Icon } from '@ultraviolet/icons';
+import { useContext, useMemo, createContext } from 'react';
+import { Checkbox } from '../Checkbox/index.js';
+import { Stack } from '../Stack/index.js';
+import { Text } from '../Text/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 CheckboxGroupContext = /*#__PURE__*/createContext(undefined);
+const CheckboxGroupCheckbox = _ref => {
+  let {
+    onFocus,
+    onBlur,
+    disabled,
+    error,
+    name,
+    value,
+    children,
+    helper,
+    className,
+    autoFocus,
+    'data-testid': dataTestId
+  } = _ref;
+  const context = useContext(CheckboxGroupContext);
+  if (!context) {
+    throw new Error('CheckboxGroup.Checkbox can only be used inside a CheckboxGroup');
+  }
+  const {
+    groupName,
+    onChange,
+    groupValues
+  } = context;
+  const checkboxName = `${groupName}.${name ?? ''}`;
+  const checkboxValue = `${value}`;
+  return jsx(Checkbox, {
+    onChange: onChange,
+    checked: groupValues?.includes(checkboxValue),
+    onFocus: onFocus,
+    onBlur: onBlur,
+    disabled: disabled,
+    error: error,
+    name: checkboxName,
+    value: checkboxValue,
+    helper: helper,
+    className: className,
+    autoFocus: autoFocus,
+    "data-testid": dataTestId,
+    children: children
+  });
+};
+const FieldSet = /*#__PURE__*/_styled("fieldset", {
+  target: "e1k5uyng1"
+})(process.env.NODE_ENV === "production" ? {
+  name: "7o2an9",
+  styles: "border:none;padding:0;margin:0"
+} : {
+  name: "7o2an9",
+  styles: "border:none;padding:0;margin:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledRequiredIcon = /*#__PURE__*/_styled(Icon, {
+  target: "e1k5uyng0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1nglpc5",
+  styles: "vertical-align:super"
+} : {
+  name: "1nglpc5",
+  styles: "vertical-align:super",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const CheckboxGroup = _ref2 => {
+  let {
+    legend,
+    value,
+    className,
+    helper,
+    error,
+    direction = 'column',
+    children,
+    onChange,
+    name,
+    required = false
+  } = _ref2;
+  const contextValue = useMemo(() => ({
+    groupName: name,
+    groupValues: value ?? [],
+    onChange
+  }), [name, value, onChange]);
+  return jsx(CheckboxGroupContext.Provider, {
+    value: contextValue,
+    children: jsxs(Stack, {
+      gap: 1,
+      children: [jsx(FieldSet, {
+        className: className,
+        children: jsxs(Stack, {
+          gap: 1.5,
+          children: [jsxs(Text, {
+            as: "legend",
+            variant: "bodyStrong",
+            children: [legend, "\xA0", required ? jsx(StyledRequiredIcon, {
+              name: "asterisk",
+              color: "danger",
+              size: 8
+            }) : null]
+          }), jsx(Stack, {
+            gap: direction === 'column' ? 1 : 2,
+            direction: direction,
+            children: children
+          })]
+        })
+      }), helper ? jsx(Text, {
+        as: "p",
+        variant: "bodySmall",
+        prominence: "weak",
+        children: helper
+      }) : null, error ? jsx(Text, {
+        as: "p",
+        variant: "bodySmall",
+        sentiment: "danger",
+        prominence: "weak",
+        children: error
+      }) : null]
+    })
+  });
+};
+CheckboxGroup.Checkbox = CheckboxGroupCheckbox;
+
+export { CheckboxGroup, CheckboxGroupCheckbox };

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

@@ -73,6 +73,7 @@ const Dialog = _ref9 => {
     backdropCss
   } = _ref9;
   const containerRef = useRef(document.createElement('div'));
+  const dialogRef = useRef(null);
   const onCloseRef = useRef(onClose);
 
   // Portal to put the modal in
@@ -80,6 +81,7 @@ const Dialog = _ref9 => {
     const element = containerRef.current;
     if (open) {
       document.body.appendChild(element);
+      dialogRef.current?.focus();
     }
     return () => {
       if (document.body.contains(element)) {
@@ -97,14 +99,26 @@ const Dialog = _ref9 => {
   useEffect(() => {
     const handleEscPress = event => {
       if (event.key === 'Escape' && hideOnEsc) {
+        event.preventDefault();
+        event.stopPropagation();
         onCloseRef.current();
       }
     };
     if (open) {
-      document.addEventListener('keyup', handleEscPress);
+      document.body.addEventListener('keyup', handleEscPress, {
+        capture: true
+      });
+      document.body.addEventListener('keydown', handleEscPress, {
+        capture: true
+      });
     }
     return () => {
-      document.removeEventListener('keyup', handleEscPress);
+      document.body.removeEventListener('keyup', handleEscPress, {
+        capture: true
+      });
+      document.body.removeEventListener('keydown', handleEscPress, {
+        capture: true
+      });
     };
   }, [open, onCloseRef, hideOnEsc]);
 
@@ -117,6 +131,11 @@ const Dialog = _ref9 => {
     }
   }, [preventBodyScroll, open]);
 
+  // Stop focus to prevent unexpected body loose focus
+  const stopFocus = useCallback(event => {
+    event.stopPropagation();
+  }, []);
+
   // Stop click to prevent unexpected dialog close
   const stopClick = useCallback(event => {
     event.stopPropagation();
@@ -126,15 +145,53 @@ const Dialog = _ref9 => {
   const stopKeyUp = useCallback(event => {
     event.stopPropagation();
   }, []);
+
+  // Enable focus trap inside the modal
+  const handleFocusTrap = useCallback(event => {
+    event.stopPropagation();
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      return;
+    }
+    const isTabPressed = event.key === 'Tab';
+    if (!isTabPressed) {
+      return;
+    }
+    const focusableEls = dialogRef.current?.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])') ?? [];
+
+    // Handle case when no interactive element are within the modal (including close icon)
+    if (focusableEls.length === 0) {
+      event.preventDefault();
+    }
+    const firstFocusableEl = focusableEls[0];
+    const lastFocusableEl = focusableEls[focusableEls.length - 1];
+    if (event.shiftKey) {
+      if (document.activeElement === firstFocusableEl) {
+        lastFocusableEl.focus();
+        event.preventDefault();
+      }
+    } else if (document.activeElement === lastFocusableEl) {
+      firstFocusableEl.focus();
+      event.preventDefault();
+    }
+  }, []);
+
+  // Prevent default behaviour on Escape
+  const stopCancel = event => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
   return /*#__PURE__*/createPortal(jsx(StyledBackdrop, {
     "data-open": open,
     onClick: hideOnClickOutside ? onClose : undefined,
     className: backdropClassName,
     css: backdropCss,
     "data-testid": dataTestId ? `${dataTestId}-backdrop` : undefined,
+    onFocus: stopFocus,
     children: jsx(StyledDialog, {
       css: dialogCss,
       onKeyUp: stopKeyUp,
+      onKeyDown: handleFocusTrap,
       className: className,
       id: id,
       "data-testid": dataTestId,
@@ -143,6 +200,10 @@ const Dialog = _ref9 => {
       "data-size": size,
       open: open,
       onClick: stopClick,
+      onCancel: stopCancel,
+      onClose: stopCancel,
+      "aria-modal": true,
+      ref: dialogRef,
       children: open ? children : null
     })
   }), containerRef.current);

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

@@ -17,6 +17,11 @@ const Disclosure = _ref => {
       element?.removeEventListener('click', handleOpen);
     };
   }, [handleOpen, disclosureRef]);
+  useEffect(() => {
+    if (!visible) {
+      disclosureRef.current?.focus();
+    }
+  }, [visible, disclosureRef]);
   if (typeof disclosure === 'function') {
     return disclosure({
       visible,
@@ -30,7 +35,9 @@ const Disclosure = _ref => {
   if ( /*#__PURE__*/isValidElement(disclosure)) {
     return /*#__PURE__*/cloneElement(disclosure, {
       ...disclosure.props,
-      ref: disclosureRef
+      ref: disclosureRef,
+      'aria-controls': id,
+      'aria-haspopup': 'dialog'
     });
   }
   return null;

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

@@ -1,5 +1,5 @@
 import _styled from '@emotion/styled/base';
-import { useState, useId, useCallback } from 'react';
+import { useState, useId, useCallback, useEffect } from 'react';
 import { Button } from '../Button/index.js';
 import { Dialog } from './Dialog.js';
 import { Disclosure } from './Disclosure.js';
@@ -61,6 +61,9 @@ const Modal = _ref3 => {
   }, []);
   const finalId = id ?? controlId;
   const finalSize = size ?? width;
+  useEffect(() => {
+    setVisible(opened);
+  }, [opened]);
   return jsxs(Fragment, {
     children: [jsx(Disclosure, {
       id: finalId,

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

@@ -167,7 +167,8 @@ const Toggle = /*#__PURE__*/forwardRef((_ref23, ref) => {
     helper,
     required,
     className,
-    'data-testid': dataTestId
+    'data-testid': dataTestId,
+    value
   } = _ref23;
   const [state, setState] = useState(checked);
   const uniqueId = useId();
@@ -212,7 +213,8 @@ const Toggle = /*#__PURE__*/forwardRef((_ref23, ref) => {
           name: name,
           onChange: onLocalChange,
           type: "checkbox",
-          ref: ref
+          ref: ref,
+          value: value
         })
       })]
     })

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

@@ -0,0 +1,121 @@
+import _styled from '@emotion/styled/base';
+import { Icon } from '@ultraviolet/icons';
+import { useMemo, createContext, useContext } from 'react';
+import { Stack } from '../Stack/index.js';
+import { Text } from '../Text/index.js';
+import { Toggle } from '../Toggle/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 ToggleGroupContext = /*#__PURE__*/createContext(undefined);
+const ToggleGroupToggle = _ref => {
+  let {
+    disabled,
+    name,
+    value,
+    label,
+    helper,
+    className,
+    'data-testid': dataTestId
+  } = _ref;
+  const context = useContext(ToggleGroupContext);
+  if (!context) {
+    throw new Error('ToggleGroup.Toggle can only be used inside a ToggleGroup');
+  }
+  const {
+    groupName,
+    onChange,
+    groupValues
+  } = context;
+  const ToggleName = `${groupName}.${name}`;
+  const ToggleValue = `${value}`;
+  return jsx(Toggle, {
+    onChange: onChange,
+    checked: groupValues?.includes(ToggleValue),
+    disabled: disabled,
+    name: ToggleName,
+    value: ToggleValue,
+    helper: helper,
+    className: className,
+    "data-testid": dataTestId,
+    label: label
+  });
+};
+const FieldSet = /*#__PURE__*/_styled("fieldset", {
+  target: "e1qvneex1"
+})(process.env.NODE_ENV === "production" ? {
+  name: "7o2an9",
+  styles: "border:none;padding:0;margin:0"
+} : {
+  name: "7o2an9",
+  styles: "border:none;padding:0;margin:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledRequiredIcon = /*#__PURE__*/_styled(Icon, {
+  target: "e1qvneex0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1nglpc5",
+  styles: "vertical-align:super"
+} : {
+  name: "1nglpc5",
+  styles: "vertical-align:super",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const ToggleGroup = _ref2 => {
+  let {
+    legend,
+    value,
+    className,
+    helper,
+    error,
+    direction = 'column',
+    children,
+    onChange,
+    name,
+    required = false
+  } = _ref2;
+  const contextValue = useMemo(() => ({
+    groupName: name,
+    groupValues: value ?? [],
+    onChange
+  }), [name, value, onChange]);
+  return jsx(ToggleGroupContext.Provider, {
+    value: contextValue,
+    children: jsxs(Stack, {
+      gap: 1,
+      children: [jsx(FieldSet, {
+        className: className,
+        children: jsxs(Stack, {
+          gap: 1.5,
+          children: [jsxs(Text, {
+            as: "legend",
+            variant: "bodyStrong",
+            children: [legend, "\xA0", required ? jsx(StyledRequiredIcon, {
+              name: "asterisk",
+              color: "danger",
+              size: 8
+            }) : null]
+          }), jsx(Stack, {
+            gap: 2,
+            direction: direction,
+            children: children
+          })]
+        })
+      }), helper ? jsx(Text, {
+        as: "p",
+        variant: "bodySmall",
+        prominence: "weak",
+        children: helper
+      }) : null, error ? jsx(Text, {
+        as: "p",
+        variant: "bodySmall",
+        sentiment: "danger",
+        prominence: "weak",
+        children: error
+      }) : null]
+    })
+  });
+};
+ToggleGroup.Toggle = ToggleGroupToggle;
+
+export { ToggleGroup, ToggleGroupToggle };

package/dist/src/index.js

@@ -30,6 +30,7 @@ export { Menu } from './components/Menu/index.js';
 export { Meter } from './components/Meter/Meter.js';
 export { Modal } from './components/Modal/Modal.js';
 export { Notice } from './components/Notice/index.js';
+export { CheckboxGroup, CheckboxGroupCheckbox } from './components/CheckboxGroup/index.js';
 export { NumberInput } from './components/NumberInput/index.js';
 export { Pagination } from './components/Pagination/index.js';
 export { PasswordCheck } from './components/PasswordCheck/index.js';
@@ -59,6 +60,7 @@ export { TextInput } from './components/TextInput/index.js';
 export { TimeInput } from './components/TimeInput/index.js';
 export { ToastContainer, toast } from './components/Toaster/index.js';
 export { Toggle } from './components/Toggle/index.js';
+export { ToggleGroup } from './components/ToggleGroup/index.js';
 export { Tooltip } from './components/Tooltip/index.js';
 export { VerificationCode } from './components/VerificationCode/index.js';
 export { RadioGroup } from './components/RadioGroup/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.10.1",
+  "version": "1.11.1",
   "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.11",
+    "@babel/core": "7.22.15",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
@@ -68,6 +68,6 @@
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.2.1",
-    "@ultraviolet/icons": "1.3.1"
+    "@ultraviolet/icons": "2.0.0"
   }
 }