@ultraviolet/ui 1.10.1 → 1.11.0

package/dist/index.d.ts

@@ -1453,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;
@@ -2285,25 +2304,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 +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/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/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.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {