@ultraviolet/ui 1.10.0 → 1.11.0

package/dist/index.d.ts

@@ -1408,6 +1408,10 @@ type ModalState = {
     toggle: () => void;
     visible: boolean;
     modalId: string;
+    /**
+     * @deprecated use onClose
+     */
+    hide: () => void;
 };
 
 type ModalProps = {
@@ -1449,6 +1453,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;
@@ -1617,6 +1640,10 @@ type TooltipProps$1 = {
      */
     text?: ReactNode;
     className?: string;
+    /**
+     * It will add `width: 100%` to the tooltip container.
+     */
+    containerFullWidth?: boolean;
     /**
      * It will force display tooltip. This can be useful if you need to always display the tooltip without hover needed.
      */
@@ -2277,27 +2304,44 @@ 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'>;
+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>>;
 
 type VerificationCodeProps = {
@@ -2388,4 +2432,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/Button/index.js

@@ -260,6 +260,7 @@ const Button = /*#__PURE__*/forwardRef((_ref10, ref) => {
     const Component = VARIANTS_COMPONENTS[variant].link;
     return jsx(Tooltip, {
       text: tooltip,
+      containerFullWidth: fullWidth,
       children: jsx(Component, {
         role: role,
         className: className,
@@ -289,6 +290,7 @@ const Button = /*#__PURE__*/forwardRef((_ref10, ref) => {
   const Component = VARIANTS_COMPONENTS[variant].button;
   return jsx(Tooltip, {
     text: tooltip,
+    containerFullWidth: fullWidth,
     children: jsx(Component, {
       role: role,
       className: className,

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/Disclosure.js

@@ -23,7 +23,8 @@ const Disclosure = _ref => {
       onClose: handleClose,
       toggle,
       onOpen: handleOpen,
-      modalId: id
+      modalId: id,
+      hide: handleClose
     });
   }
   if ( /*#__PURE__*/isValidElement(disclosure)) {

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,
@@ -90,7 +93,8 @@ const Modal = _ref3 => {
           onClose: handleClose,
           onOpen: handleOpen,
           toggle: handleToggle,
-          modalId: finalId
+          modalId: finalId,
+          hide: handleClose
         }) : children, jsx(StyledContainer, {
           children: isClosable ? jsx(Button, {
             "data-testid": dataTestId ? `${dataTestId}-close-button` : undefined,

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

@@ -9,6 +9,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref, tooltipRef) => {
     placement = 'auto',
     id,
     className,
+    containerFullWidth,
     maxWidth = 232,
     visible,
     innerRef,
@@ -21,6 +22,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref, tooltipRef) => {
     role: role,
     "data-testid": dataTestId,
     className: className,
+    containerFullWidth: containerFullWidth,
     maxWidth: maxWidth,
     visible: visible,
     placement: placement,

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

@@ -57,7 +57,7 @@ const StyledTooltip = /*#__PURE__*/_styled('div', {
     maxWidth
   } = _ref5;
   return maxWidth;
-}, "px;font-size:0.8rem;inset:0 auto auto 0;top:0;left:0;transform:", _ref6 => {
+}, "px;word-break:break-all;font-size:0.8rem;inset:0 auto auto 0;top:0;left:0;transform:", _ref6 => {
   let {
     positions
   } = _ref6;
@@ -97,11 +97,11 @@ const StyledTooltip = /*#__PURE__*/_styled('div', {
 const StyledChildrenContainer = /*#__PURE__*/_styled("div", {
   target: "efkq4700"
 })(process.env.NODE_ENV === "production" ? {
-  name: "ck88l6",
-  styles: "display:inherit"
+  name: "jhu4ja",
+  styles: "display:inherit;&[data-container-full-width='true']{width:100%;}"
 } : {
-  name: "ck88l6",
-  styles: "display:inherit",
+  name: "jhu4ja",
+  styles: "display:inherit;&[data-container-full-width='true']{width:100%;}",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
@@ -111,6 +111,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
     placement = 'auto',
     id,
     className,
+    containerFullWidth,
     maxWidth = 232,
     visible,
     innerRef,
@@ -250,9 +251,10 @@ const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
       ref: childrenRef,
       tabIndex: 0,
       onKeyDown: onKeyDown,
+      "data-container-full-width": containerFullWidth,
       children: children
     });
-  }, [children, generatedId, isControlled, onKeyDown, onPointerEvent]);
+  }, [children, containerFullWidth, generatedId, isControlled, onKeyDown, onPointerEvent]);
   if (!text) {
     if (typeof children === 'function') return null;
     return jsx(Fragment, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -43,9 +43,9 @@
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@types/react": "18.2.8",
+    "@types/react": "18.2.14",
     "@types/react-datepicker": "4.15.0",
-    "@types/react-dom": "18.2.4",
+    "@types/react-dom": "18.2.6",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },