@ultraviolet/ui 1.40.1 → 1.41.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1780,6 +1780,7 @@ type ColumnProps$1 = Pick<ComponentProps<typeof HeaderCell$1>, 'isOrdered' | 'on
1780
1780
  info?: string;
1781
1781
  };
1782
1782
  type ListProps = {
1783
+ expandButton?: boolean;
1783
1784
  selectable?: boolean;
1784
1785
  columns: ColumnProps$1[];
1785
1786
  children: ReactNode;
@@ -1820,6 +1821,7 @@ declare const List: react.ForwardRefExoticComponent<ListProps & react.RefAttribu
1820
1821
  };
1821
1822
  expandRow: (rowId: string) => void;
1822
1823
  collapseRow: (rowId: string) => void;
1824
+ expandButton: boolean;
1823
1825
  registerSelectableRow: (rowId: string) => () => void;
1824
1826
  selectedRowIds: {
1825
1827
  [x: string]: boolean;
@@ -2588,9 +2590,11 @@ type ContentProps = {
2588
2590
  };
2589
2591
  type ItemProps = {
2590
2592
  sentiment?: ComponentProps<typeof Bullet>['sentiment'];
2593
+ prominence?: ComponentProps<typeof Bullet>['prominence'];
2591
2594
  size?: Sizes;
2592
2595
  disabled?: boolean;
2593
2596
  children: ReactNode;
2597
+ onClick?: () => void;
2594
2598
  className?: string;
2595
2599
  } & ContentProps;
2596
2600
  type StepListProps = {
@@ -2604,7 +2608,7 @@ type StepListProps = {
2604
2608
  */
2605
2609
  declare const StepList: {
2606
2610
  ({ children, className, "data-testid": dataTestId, }: StepListProps): _emotion_react_jsx_runtime.JSX.Element;
2607
- Item: ({ bulletText, bulletIcon, sentiment, children, size, disabled, className, }: ItemProps) => _emotion_react_jsx_runtime.JSX.Element;
2611
+ Item: ({ bulletText, bulletIcon, sentiment, prominence, children, onClick, size, disabled, className, }: ItemProps) => _emotion_react_jsx_runtime.JSX.Element;
2608
2612
  };
2609
2613
 
2610
2614
  type StepperProps = {
@@ -3089,13 +3093,13 @@ type TimeInputType = ((props: TimeInputProps) => JSX.Element) & {
3089
3093
  declare const TimeInput: TimeInputType;
3090
3094
 
3091
3095
  declare const toast: {
3092
- error: (children: ReactNode, options?: ToastOptions) => number | string;
3096
+ error: (children: ReactNode, options?: ToastOptions, containerId?: string) => number | string;
3093
3097
  /**
3094
3098
  * @deprecated "Deprecated, please use another variant instead"
3095
3099
  */
3096
- info: (children: ReactNode, options?: ToastOptions) => number | string;
3097
- success: (children: ReactNode, options?: ToastOptions) => number | string;
3098
- warning: (children: ReactNode, options?: ToastOptions) => number | string;
3100
+ info: (children: ReactNode, options?: ToastOptions, containerId?: string) => number | string;
3101
+ success: (children: ReactNode, options?: ToastOptions, containerId?: string) => number | string;
3102
+ warning: (children: ReactNode, options?: ToastOptions, containerId?: string) => number | string;
3099
3103
  };
3100
3104
  type ToastContainerProps = {
3101
3105
  /**
@@ -3117,6 +3121,10 @@ type ToastContainerProps = {
3117
3121
  * Delay before the toast is automatically closed, if not set the default value is 6000ms
3118
3122
  */
3119
3123
  autoClose?: number;
3124
+ /**
3125
+ * Set a custom containerId to be able to define multiple ToastContainers
3126
+ */
3127
+ containerId?: string;
3120
3128
  };
3121
3129
  /**
3122
3130
  * Display short information about an event that happen in the interface in a floating alert.
@@ -3126,7 +3134,7 @@ type ToastContainerProps = {
3126
3134
  * Toaster is separated in two parts, first the `ToastContainer` which is where the div of the toast will be rendered,
3127
3135
  * and second the `toast()` function which is used to display the toast.
3128
3136
  */
3129
- declare const ToastContainer: ({ newestOnTop, limit, position, "data-testid": dataTestId, className, autoClose, }: ToastContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
3137
+ declare const ToastContainer: ({ newestOnTop, limit, position, "data-testid": dataTestId, className, autoClose, containerId, }: ToastContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
3130
3138
 
3131
3139
  /**
3132
3140
  * Toggle component is used to toggle between two states (on/off, true/false, etc.).
@@ -3324,7 +3332,7 @@ type CloseButtonProps = {
3324
3332
  ariaLabel?: string;
3325
3333
  theme: Theme$1;
3326
3334
  };
3327
- declare const notification: (children: ReactNode | ((props: CloseButtonProps) => ReactNode), title: string, icon?: ReactNode, isClosable?: boolean, options?: ToastOptions) => react_toastify.Id;
3335
+ declare const notification: (children: ReactNode | ((props: CloseButtonProps) => ReactNode), title: string, icon?: ReactNode, isClosable?: boolean, containerId?: string, options?: ToastOptions) => react_toastify.Id;
3328
3336
  type NotificationContainerProps = {
3329
3337
  /**
3330
3338
  * Delay (in ms) before the notification autocloses. To disable autoclose, set to false
@@ -3345,8 +3353,33 @@ type NotificationContainerProps = {
3345
3353
  position?: ToastOptions['position'];
3346
3354
  'data-testid'?: string;
3347
3355
  className?: string;
3356
+ /**
3357
+ * Give a personalized containerId in case there are multiple notifications with different styled to display
3358
+ */
3359
+ containerId?: string;
3360
+ };
3361
+ declare const NotificationContainer: ({ newestOnTop, limit, autoClose, position, "data-testid": dataTestId, className, containerId, }: NotificationContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
3362
+
3363
+ type CardSelectableCardProps = Omit<ComponentProps<typeof SelectableCard>, 'onChange' | 'checked' | 'type' | 'showTick'>;
3364
+ type SelectableCardGroupProps = {
3365
+ legend?: string;
3366
+ value: string | number | (string | number)[];
3367
+ className?: string;
3368
+ helper?: ReactNode;
3369
+ error?: ReactNode;
3370
+ columns?: number;
3371
+ children: ReactNode;
3372
+ type: 'radio' | 'checkbox';
3373
+ required?: boolean;
3374
+ showTick?: boolean;
3375
+ } & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name'>>;
3376
+ /**
3377
+ * SelectableCardGroup is a component that allows users to select cards from a list of cards using SelectableCard.
3378
+ */
3379
+ declare const SelectableCardGroup: {
3380
+ ({ legend, value, className, helper, error, columns, children, onChange, name, required, type, showTick, }: SelectableCardGroupProps): _emotion_react_jsx_runtime.JSX.Element;
3381
+ Card: ({ value, disabled, children, className, isError, onFocus, onBlur, tooltip, id, label, "data-testid": dataTestId, }: CardSelectableCardProps) => _emotion_react_jsx_runtime.JSX.Element;
3348
3382
  };
3349
- declare const NotificationContainer: ({ newestOnTop, limit, autoClose, position, "data-testid": dataTestId, className, }: NotificationContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
3350
3383
 
3351
3384
  declare const getUUID: (prefix?: string) => string;
3352
3385
 
@@ -3391,4 +3424,4 @@ declare const down: (size: ScreenSize, rules: string) => string;
3391
3424
 
3392
3425
  declare const normalize: () => string;
3393
3426
 
3394
- export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CheckboxGroup, CheckboxGroupCheckbox, CopyButton, DateInput, EmptyState, Expandable, GlobalAlert, LineChart, Link, List, Loader, Menu, MenuV2, Meter, Modal, Notice, NotificationContainer, NumberInput, NumberInputV2, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, Popup, ProgressBar, Radio, RadioGroup, Row, type SCWUITheme, SelectInput, SelectableCard, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextArea, TextInput, TextInputV2, TimeInput, ToastContainer, Toggle, ToggleGroup, Tooltip, type UltravioletUITheme, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, notification, 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 };
3427
+ export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CheckboxGroup, CheckboxGroupCheckbox, CopyButton, DateInput, EmptyState, Expandable, GlobalAlert, LineChart, Link, List, Loader, Menu, MenuV2, Meter, Modal, Notice, NotificationContainer, NumberInput, NumberInputV2, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, Popup, ProgressBar, Radio, RadioGroup, Row, type SCWUITheme, SelectInput, SelectableCard, SelectableCardGroup, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextArea, TextInput, TextInputV2, TimeInput, ToastContainer, Toggle, ToggleGroup, Tooltip, type UltravioletUITheme, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, notification, 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 };
@@ -19,7 +19,8 @@ const HeaderRow = ({
19
19
  allRowSelectValue,
20
20
  selectAll,
21
21
  unselectAll,
22
- selectedRowIds
22
+ selectedRowIds,
23
+ expandButton
23
24
  } = useListContext();
24
25
  const selectableRowCount = Object.keys(selectedRowIds).length;
25
26
  return jsxs(StyledHeaderRow, {
@@ -33,6 +34,8 @@ const HeaderRow = ({
33
34
  onChange: allRowSelectValue === false ? selectAll : unselectAll,
34
35
  disabled: selectableRowCount === 0
35
36
  })
37
+ }) : null, expandButton ? jsx(HeaderCell, {
38
+ children: null
36
39
  }) : null, children]
37
40
  });
38
41
  };
@@ -5,7 +5,8 @@ const ListContext = /*#__PURE__*/createContext(undefined);
5
5
  const ListProvider = ({
6
6
  children,
7
7
  autoCollapse,
8
- selectable
8
+ selectable,
9
+ expandButton
9
10
  }) => {
10
11
  const [expandedRowIds, setExpandedRowIds] = useState({});
11
12
  const [selectedRowIds, setSelectedRowIds] = useState({});
@@ -101,8 +102,9 @@ const ListProvider = ({
101
102
  selectable,
102
103
  selectAll,
103
104
  unselectAll,
104
- allRowSelectValue
105
- }), [registerExpandableRow, expandedRowIds, expandRow, collapseRow, registerSelectableRow, selectedRowIds, selectRow, unselectRow, selectable, selectAll, unselectAll, allRowSelectValue]);
105
+ allRowSelectValue,
106
+ expandButton
107
+ }), [registerExpandableRow, expandedRowIds, expandRow, collapseRow, registerSelectableRow, selectedRowIds, selectRow, unselectRow, selectable, selectAll, unselectAll, allRowSelectValue, expandButton]);
106
108
  return jsx(ListContext.Provider, {
107
109
  value: value,
108
110
  children: children
@@ -1,5 +1,6 @@
1
1
  import _styled from '@emotion/styled/base';
2
2
  import { forwardRef, useEffect } from 'react';
3
+ import { Button } from '../Button/index.js';
3
4
  import { Checkbox } from '../Checkbox/index.js';
4
5
  import { Tooltip } from '../Tooltip/index.js';
5
6
  import { Cell } from './Cell.js';
@@ -88,7 +89,8 @@ const Row = /*#__PURE__*/forwardRef(({
88
89
  registerSelectableRow,
89
90
  selectedRowIds,
90
91
  selectRow,
91
- unselectRow
92
+ unselectRow,
93
+ expandButton
92
94
  } = useListContext();
93
95
  const isSelectDisabled = disabled || selectDisabled !== undefined && selectDisabled !== false;
94
96
  const hasExpandable = !!expandable;
@@ -152,6 +154,16 @@ const Row = /*#__PURE__*/forwardRef(({
152
154
  })
153
155
  })
154
156
  })
157
+ }) : null, expandButton ? jsx(Cell, {
158
+ preventClick: true,
159
+ children: jsx(Button, {
160
+ disabled: disabled || !expandable,
161
+ icon: expandedRowIds[id] ? 'arrow-up' : 'arrow-down',
162
+ onClick: toggleRowExpand,
163
+ size: "xsmall",
164
+ sentiment: "neutral",
165
+ variant: "ghost"
166
+ })
155
167
  }) : null, children, expandable && expandedRowIds[id] ? jsx(ExpandableWrapper, {
156
168
  "data-expandable-content": true,
157
169
  onClick: e => {
@@ -1,3 +1,4 @@
1
1
  const SELECTABLE_CHECKBOX_SIZE = 24;
2
+ const EXPAND_BUTTON_SIZE = 24;
2
3
 
3
- export { SELECTABLE_CHECKBOX_SIZE };
4
+ export { EXPAND_BUTTON_SIZE, SELECTABLE_CHECKBOX_SIZE };
@@ -8,7 +8,7 @@ import { useListContext, ListProvider } from './ListContext.js';
8
8
  import { Row } from './Row.js';
9
9
  import { SelectBar } from './SelectBar.js';
10
10
  import { SkeletonRows } from './SkeletonRows.js';
11
- import { SELECTABLE_CHECKBOX_SIZE } from './constants.js';
11
+ import { SELECTABLE_CHECKBOX_SIZE, EXPAND_BUTTON_SIZE } from './constants.js';
12
12
  import { jsx, jsxs } from '@emotion/react/jsx-runtime';
13
13
 
14
14
  const StyledList = /*#__PURE__*/_styled('div', {
@@ -20,17 +20,19 @@ const StyledList = /*#__PURE__*/_styled('div', {
20
20
  template
21
21
  }) => template, ";align-items:center;}");
22
22
  const BaseList = /*#__PURE__*/forwardRef(({
23
+ expandButton = false,
23
24
  selectable = false,
24
25
  columns,
25
26
  children,
26
27
  loading,
27
28
  autoCollapse = false
28
29
  }, ref) => {
29
- const computeTemplate = `${selectable ? `${SELECTABLE_CHECKBOX_SIZE}px ` : ''}${columns.map(({
30
+ const computeTemplate = `${selectable ? `${SELECTABLE_CHECKBOX_SIZE}px ` : ''}${expandButton ? `${EXPAND_BUTTON_SIZE}px ` : ''}${columns.map(({
30
31
  width
31
32
  }) => width ?? 'minmax(0, 1fr)').join(' ')}`;
32
33
  return jsx(ListProvider, {
33
34
  selectable: selectable,
35
+ expandButton: expandButton,
34
36
  autoCollapse: autoCollapse,
35
37
  children: jsxs(StyledList, {
36
38
  ref: ref,
@@ -18,6 +18,7 @@ const itemCoreStyle = ({
18
18
  ${borderless ? '' : `border-bottom: 1px solid ${theme.colors.neutral.border};`}
19
19
  cursor: pointer;
20
20
  min-width: 110px;
21
+ width: 100%;
21
22
 
22
23
  color: ${theme.colors[sentiment][disabled ? 'textDisabled' : 'text']};
23
24
  svg {
@@ -10,7 +10,7 @@ const PREFIX = '.Toastify';
10
10
  const styles = {
11
11
  toast: ({
12
12
  theme
13
- }) => /*#__PURE__*/css("border-radius:", theme.radii.default, ";&", PREFIX, "__toast{background-color:", theme.colors.neutral.background, ";color:", theme.colors.neutral.text, ";padding:", theme.space['2'], ";box-shadow:", theme.shadows.defaultShadow, ";}&", PREFIX, "__toast-container{width:312px;}", PREFIX, "__toast-body{margin:0;padding:0;}")
13
+ }) => /*#__PURE__*/css("border-radius:", theme.radii.default, ";&", PREFIX, "__toast{background-color:", theme.colors.neutral.background, ";color:", theme.colors.neutral.text, ";padding:", theme.space['2'], ";box-shadow:", theme.shadows.defaultShadow, ";}&", PREFIX, "__toast-container{width:312px;}", PREFIX, "__toast-body{margin:0;padding:0;display:none;}")
14
14
  };
15
15
  const closeButton = props => jsx(Button, {
16
16
  "aria-label": "close",
@@ -20,7 +20,7 @@ const closeButton = props => jsx(Button, {
20
20
  onClick: props.closeToast,
21
21
  size: "xsmall"
22
22
  });
23
- const notification = (children, title, icon, isClosable, options) => toast('', {
23
+ const notification = (children, title, icon, isClosable, containerId, options) => toast('', {
24
24
  ...options,
25
25
  closeButton: props => jsxs(Stack, {
26
26
  direction: "row",
@@ -35,7 +35,8 @@ const notification = (children, title, icon, isClosable, options) => toast('', {
35
35
  children: title
36
36
  }), typeof children === 'function' ? children(props) : children]
37
37
  }), isClosable ? closeButton(props) : null]
38
- })
38
+ }),
39
+ containerId: containerId ?? 'notification'
39
40
  });
40
41
  const NotificationContainer = ({
41
42
  newestOnTop,
@@ -43,7 +44,8 @@ const NotificationContainer = ({
43
44
  autoClose = false,
44
45
  position = 'top-right',
45
46
  'data-testid': dataTestId,
46
- className
47
+ className,
48
+ containerId = 'notification'
47
49
  }) => {
48
50
  const theme = useTheme();
49
51
  return jsxs(Fragment, {
@@ -65,7 +67,8 @@ const NotificationContainer = ({
65
67
  hideProgressBar: true,
66
68
  draggable: false,
67
69
  transition: Slide,
68
- className: className
70
+ className: className,
71
+ containerId: containerId
69
72
  })
70
73
  })]
71
74
  });
@@ -0,0 +1,141 @@
1
+ import _styled from '@emotion/styled/base';
2
+ import { Icon } from '@ultraviolet/icons';
3
+ import { useMemo, createContext, useContext } from 'react';
4
+ import { Row } from '../Row/index.js';
5
+ import { SelectableCard } from '../SelectableCard/index.js';
6
+ import { Stack } from '../Stack/index.js';
7
+ import { Text } from '../Text/index.js';
8
+ import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
9
+
10
+ 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)."; }
11
+ const SelectableCardGroupContext = /*#__PURE__*/createContext(undefined);
12
+ const CardSelectableCard = ({
13
+ value,
14
+ disabled,
15
+ children,
16
+ className,
17
+ isError,
18
+ onFocus,
19
+ onBlur,
20
+ tooltip,
21
+ id,
22
+ label,
23
+ 'data-testid': dataTestId
24
+ }) => {
25
+ const context = useContext(SelectableCardGroupContext);
26
+ if (!context) {
27
+ throw new Error('SelectableCardGroup.Card can only be used inside a SelectableCardGroup');
28
+ }
29
+ const {
30
+ groupName,
31
+ onChange,
32
+ groupValue,
33
+ type,
34
+ showTick
35
+ } = context;
36
+ return jsx(SelectableCard, {
37
+ name: groupName,
38
+ value: value,
39
+ showTick: showTick,
40
+ type: type,
41
+ disabled: disabled,
42
+ className: className,
43
+ isError: isError,
44
+ onFocus: onFocus,
45
+ onBlur: onBlur,
46
+ tooltip: tooltip,
47
+ id: id,
48
+ label: label,
49
+ onChange: onChange,
50
+ checked: typeof groupValue === 'object' ? groupValue.includes(value) : groupValue === value,
51
+ "data-testid": dataTestId,
52
+ children: children
53
+ });
54
+ };
55
+ const FieldSet = /*#__PURE__*/_styled("fieldset", {
56
+ target: "e1cxe6lb1"
57
+ })(process.env.NODE_ENV === "production" ? {
58
+ name: "7o2an9",
59
+ styles: "border:none;padding:0;margin:0"
60
+ } : {
61
+ name: "7o2an9",
62
+ styles: "border:none;padding:0;margin:0",
63
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
64
+ });
65
+ const StyledRequiredIcon = /*#__PURE__*/_styled(Icon, {
66
+ target: "e1cxe6lb0"
67
+ })(process.env.NODE_ENV === "production" ? {
68
+ name: "1nglpc5",
69
+ styles: "vertical-align:super"
70
+ } : {
71
+ name: "1nglpc5",
72
+ styles: "vertical-align:super",
73
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
74
+ });
75
+ /**
76
+ * SelectableCardGroup is a component that allows users to select cards from a list of cards using SelectableCard.
77
+ */
78
+ const SelectableCardGroup = ({
79
+ legend,
80
+ value,
81
+ className,
82
+ helper,
83
+ error,
84
+ columns = 1,
85
+ children,
86
+ onChange,
87
+ name,
88
+ required = false,
89
+ type,
90
+ showTick = false
91
+ }) => {
92
+ const contextValue = useMemo(() => ({
93
+ groupName: name,
94
+ groupValue: value,
95
+ onChange,
96
+ required,
97
+ type,
98
+ showTick
99
+ }), [name, value, onChange, required, type, showTick]);
100
+ return jsx(SelectableCardGroupContext.Provider, {
101
+ value: contextValue,
102
+ children: jsxs(Stack, {
103
+ gap: 1,
104
+ children: [jsx(FieldSet, {
105
+ className: className,
106
+ children: jsxs(Stack, {
107
+ gap: 1.5,
108
+ children: [jsxs(Text, {
109
+ as: "legend",
110
+ variant: "bodyStrong",
111
+ children: [legend && jsxs(Fragment, {
112
+ children: [legend, " \xA0"]
113
+ }), required ? jsx(StyledRequiredIcon, {
114
+ name: "asterisk",
115
+ color: "danger",
116
+ size: 8
117
+ }) : null]
118
+ }), jsx(Row, {
119
+ gap: 2,
120
+ templateColumns: `repeat(${columns}, auto)`,
121
+ children: children
122
+ })]
123
+ })
124
+ }), helper ? jsx(Text, {
125
+ as: "span",
126
+ variant: "caption",
127
+ prominence: "weak",
128
+ sentiment: "neutral",
129
+ children: helper
130
+ }) : null, error ? jsx(Text, {
131
+ as: "span",
132
+ variant: "caption",
133
+ sentiment: "danger",
134
+ children: error
135
+ }) : null]
136
+ })
137
+ });
138
+ };
139
+ SelectableCardGroup.Card = CardSelectableCard;
140
+
141
+ export { SelectableCardGroup };
@@ -26,21 +26,26 @@ const Item = ({
26
26
  bulletText,
27
27
  bulletIcon,
28
28
  sentiment,
29
+ prominence,
29
30
  children,
31
+ onClick,
30
32
  size = 'medium',
31
33
  disabled = false,
32
34
  className
33
35
  }) => jsxs(Step, {
34
36
  disabled: disabled,
35
37
  className: className,
38
+ onClick: onClick,
36
39
  children: [bulletIcon ? jsx(Bullet, {
37
40
  icon: bulletIcon,
38
41
  size: size,
39
- sentiment: disabled ? 'disabled' : sentiment
42
+ sentiment: disabled ? 'disabled' : sentiment,
43
+ prominence: prominence
40
44
  }) : null, bulletText ? jsx(Bullet, {
41
45
  text: bulletText,
42
46
  size: size,
43
- sentiment: disabled ? 'disabled' : sentiment
47
+ sentiment: disabled ? 'disabled' : sentiment,
48
+ prominence: prominence
44
49
  }) : null, jsx(StyledDiv, {
45
50
  size: size,
46
51
  children: children
@@ -46,41 +46,45 @@ const Content = ({
46
46
  })
47
47
  });
48
48
  const toast = {
49
- error: (children, options) => toast$1.error(jsx(Content, {
49
+ error: (children, options, containerId) => toast$1.error(jsx(Content, {
50
50
  children: children
51
51
  }), {
52
52
  ...options,
53
53
  closeButton: jsx(CloseButton, {
54
54
  sentiment: "danger"
55
- })
55
+ }),
56
+ containerId: containerId ?? 'toaster'
56
57
  }),
57
58
  /**
58
59
  * @deprecated "Deprecated, please use another variant instead"
59
60
  */
60
61
  // eslint-disable-next-line deprecation/deprecation
61
- info: (children, options) => toast$1.info(jsx(Content, {
62
+ info: (children, options, containerId) => toast$1.info(jsx(Content, {
62
63
  children: children
63
64
  }), {
64
65
  ...options,
65
66
  closeButton: jsx(CloseButton, {
66
67
  sentiment: "info"
67
- })
68
+ }),
69
+ containerId: containerId ?? 'toaster'
68
70
  }),
69
- success: (children, options) => toast$1.success(jsx(Content, {
71
+ success: (children, options, containerId) => toast$1.success(jsx(Content, {
70
72
  children: children
71
73
  }), {
72
74
  ...options,
73
75
  closeButton: jsx(CloseButton, {
74
76
  sentiment: "success"
75
- })
77
+ }),
78
+ containerId: containerId ?? 'toaster'
76
79
  }),
77
- warning: (children, options) => toast$1.warn(jsx(Content, {
80
+ warning: (children, options, containerId) => toast$1.warn(jsx(Content, {
78
81
  children: children
79
82
  }), {
80
83
  ...options,
81
84
  closeButton: jsx(CloseButton, {
82
85
  sentiment: "warning"
83
- })
86
+ }),
87
+ containerId: containerId ?? 'toaster'
84
88
  })
85
89
  };
86
90
  /**
@@ -97,7 +101,8 @@ const ToastContainer = ({
97
101
  position = 'top-right',
98
102
  'data-testid': dataTestId,
99
103
  className,
100
- autoClose
104
+ autoClose,
105
+ containerId = 'toaster'
101
106
  }) => {
102
107
  const theme = useTheme();
103
108
  return jsxs(Fragment, {
@@ -117,7 +122,8 @@ const ToastContainer = ({
117
122
  stacked: true,
118
123
  hideProgressBar: true,
119
124
  className: className,
120
- transition: Slide
125
+ transition: Slide,
126
+ containerId: containerId
121
127
  })
122
128
  })]
123
129
  });
package/dist/src/index.js CHANGED
@@ -72,3 +72,4 @@ export { Icon } from '@ultraviolet/icons';
72
72
  export { MenuV2 } from './components/MenuV2/index.js';
73
73
  export { GlobalAlert } from './components/GlobalAlert/index.js';
74
74
  export { NotificationContainer, notification } from './components/Notification/index.js';
75
+ export { SelectableCardGroup } from './components/SelectableCardGroup/index.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ultraviolet/ui",
3
- "version": "1.40.1",
3
+ "version": "1.41.0",
4
4
  "description": "Ultraviolet UI",
5
5
  "homepage": "https://github.com/scaleway/ultraviolet#readme",
6
6
  "repository": {