@ultraviolet/ui 1.37.0 → 1.38.0

package/dist/index.d.ts

@@ -15,7 +15,8 @@ import { Serie, LineSvgProps } from '@nivo/line';
 import { ScaleSpec } from '@nivo/scales';
 import { PopoverStateReturn } from 'reakit/Popover';
 import Select, { OptionProps, Props, CommonProps as CommonProps$1, GroupBase } from 'react-select';
-import { ToastOptions } from 'react-toastify';
+import * as react_toastify from 'react-toastify';
+import { ToastOptions, TypeOptions, Theme as Theme$1 } from 'react-toastify';
 
 type ActionBarProps = {
     children: ReactNode;
@@ -3317,6 +3318,36 @@ declare const GlobalAlert: {
     } & react.RefAttributes<HTMLAnchorElement>, "size" | "sentiment" | "prominence">) => _emotion_react_jsx_runtime.JSX.Element;
 };
 
+type CloseButtonProps = {
+    closeToast: (event: React.MouseEvent<HTMLElement>) => void;
+    type: TypeOptions;
+    ariaLabel?: string;
+    theme: Theme$1;
+};
+declare const notification: (children: ReactNode | ((props: CloseButtonProps) => ReactNode), title: string, icon?: ReactNode, isClosable?: boolean, options?: ToastOptions) => react_toastify.Id;
+type NotificationContainerProps = {
+    /**
+     * Delay (in ms) before the notification autocloses. To disable autoclose, set to false
+     */
+    autoClose?: false | number;
+    /**
+     * Whether to display the newest toast on top.
+     * `Default: false`
+     */
+    newestOnTop?: boolean;
+    /**
+     * Limit the number of toast displayed at the same time
+     */
+    limit?: number;
+    /**
+     * Position on the notification container
+     */
+    position?: ToastOptions['position'];
+    'data-testid'?: string;
+    className?: string;
+};
+declare const NotificationContainer: ({ newestOnTop, limit, autoClose, position, "data-testid": dataTestId, className, }: NotificationContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
+
 declare const getUUID: (prefix?: string) => string;
 
 declare const bounce: _emotion_react.Keyframes;
@@ -3360,4 +3391,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, CheckboxGroup, CheckboxGroupCheckbox, CopyButton, DateInput, EmptyState, Expandable, GlobalAlert, LineChart, Link, List, Loader, Menu, MenuV2, Meter, Modal, Notice, 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, 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, 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 };

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

@@ -0,0 +1,74 @@
+import { useTheme, Global, ClassNames, css } from '@emotion/react';
+import { toast, ToastContainer, Slide } from 'react-toastify';
+import css_248z from '../../../react-toastify/dist/ReactToastify.min.css.js';
+import { Button } from '../Button/index.js';
+import { Stack } from '../Stack/index.js';
+import { Text } from '../Text/index.js';
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+
+const PREFIX = '.Toastify';
+const styles = {
+  toast: ({
+    theme
+  }) => /*#__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;}")
+};
+const closeButton = props => jsx(Button, {
+  "aria-label": "close",
+  icon: "close",
+  sentiment: "neutral",
+  variant: "ghost",
+  onClick: props.closeToast,
+  size: "xsmall"
+});
+const notification = (children, title, icon, isClosable, options) => toast('', {
+  ...options,
+  closeButton: props => jsxs(Stack, {
+    direction: "row",
+    gap: 2,
+    children: [jsx("div", {
+      children: icon
+    }), jsxs(Stack, {
+      direction: "column",
+      children: [jsx(Text, {
+        as: "h3",
+        variant: "bodySmallStronger",
+        children: title
+      }), typeof children === 'function' ? children(props) : children]
+    }), isClosable ? closeButton(props) : null]
+  })
+});
+const NotificationContainer = ({
+  newestOnTop,
+  limit,
+  autoClose = false,
+  position = 'top-right',
+  'data-testid': dataTestId,
+  className
+}) => {
+  const theme = useTheme();
+  return jsxs(Fragment, {
+    children: [jsx(Global, {
+      styles: css_248z
+    }), jsx(ClassNames, {
+      children: ({
+        css: localCss
+      }) => jsx(ToastContainer, {
+        "data-testid": dataTestId,
+        toastClassName: localCss(styles.toast({
+          theme
+        })),
+        icon: false,
+        autoClose: autoClose,
+        newestOnTop: newestOnTop,
+        limit: limit,
+        position: position,
+        hideProgressBar: true,
+        draggable: false,
+        transition: Slide,
+        className: className
+      })
+    })]
+  });
+};
+
+export { NotificationContainer, notification };

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

@@ -179,11 +179,11 @@ const NumberInputV2 = /*#__PURE__*/forwardRef(({
   return jsxs(Stack, {
     gap: "0.5",
     className: className,
-    children: [jsxs(Stack, {
+    children: [label || labelDescription ? jsxs(Stack, {
       direction: "row",
       gap: "1",
       alignItems: "center",
-      children: [jsxs(Stack, {
+      children: [label ? jsxs(Stack, {
         direction: "row",
         gap: "0.5",
         alignItems: "start",
@@ -198,8 +198,8 @@ const NumberInputV2 = /*#__PURE__*/forwardRef(({
           color: "danger",
           size: 8
         }) : null]
-      }), labelDescription ?? null]
-    }), jsx("div", {
+      }) : null, labelDescription ?? null]
+    }) : null, jsx("div", {
       children: jsx(Tooltip, {
         text: tooltip,
         children: jsxs(Container, {

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

@@ -9,7 +9,9 @@ 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 Container = /*#__PURE__*/_styled(Stack, {
   target: "e1s5n3hj2"
-})("padding:", ({
+})("&[data-has-label='false']>:first-child{margin-bottom:-", ({
+  theme
+}) => theme.space['0.5'], ";}padding:", ({
   theme
 }) => theme.space['2'], ";border-radius:", ({
   theme
@@ -117,6 +119,7 @@ const SelectableCard = /*#__PURE__*/forwardRef(({
       "data-error": isError,
       "data-testid": dataTestId,
       "data-type": type,
+      "data-has-label": !!label,
       ref: ref,
       alignItems: "start",
       direction: "column",

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

@@ -66,6 +66,8 @@ const Skeleton = ({
   const Component = variants[variant];
   return jsxs(StyledContainer, {
     className: className,
+    "aria-busy": true,
+    "aria-live": "polite",
     children: [jsx(Component, {
       length: length,
       col: col

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

@@ -216,11 +216,11 @@ const TagInput = ({
   return jsxs(Stack, {
     gap: "0.5",
     className: className,
-    children: [jsxs(Stack, {
+    children: [label || labelDescription ? jsxs(Stack, {
       direction: "row",
       gap: "1",
       alignItems: "center",
-      children: [jsxs(Stack, {
+      children: [label ? jsxs(Stack, {
         direction: "row",
         gap: "0.5",
         alignItems: "start",
@@ -228,15 +228,15 @@ const TagInput = ({
           as: "label",
           variant: "bodyStrong",
           sentiment: "neutral",
-          htmlFor: localId,
+          htmlFor: id ?? localId,
           children: label
         }), required ? jsx(Icon, {
           name: "asterisk",
           color: "danger",
           size: 8
         }) : null]
-      }), labelDescription ?? null]
-    }), jsx("div", {
+      }) : null, labelDescription ?? null]
+    }) : null, jsx("div", {
       children: jsx(Tooltip, {
         text: tooltip,
         children: jsxs(TagInputContainer, {

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

@@ -112,11 +112,11 @@ const TextArea = /*#__PURE__*/forwardRef(({
   return jsxs(Stack, {
     gap: "0.5",
     className: className,
-    children: [jsxs(Stack, {
+    children: [label || labelDescription ? jsxs(Stack, {
       direction: "row",
       gap: "1",
       alignItems: "center",
-      children: [jsxs(Stack, {
+      children: [label ? jsxs(Stack, {
         direction: "row",
         gap: "0.5",
         alignItems: "start",
@@ -131,8 +131,8 @@ const TextArea = /*#__PURE__*/forwardRef(({
           color: "danger",
           size: 8
         }) : null]
-      }), labelDescription ?? null]
-    }), jsx(Tooltip, {
+      }) : null, labelDescription ?? null]
+    }) : null, jsx(Tooltip, {
       text: tooltip,
       children: jsxs(StyledTextAreaWrapper, {
         children: [jsx(StyledTextArea, {

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

@@ -132,11 +132,11 @@ const TextInputV2 = /*#__PURE__*/forwardRef(({
   return jsxs(Stack, {
     gap: 0.5,
     className: className,
-    children: [jsxs(Stack, {
+    children: [label || labelDescription ? jsxs(Stack, {
       direction: "row",
       gap: "1",
       alignItems: "center",
-      children: [jsxs(Stack, {
+      children: [label ? jsxs(Stack, {
         direction: "row",
         gap: "0.5",
         alignItems: "start",
@@ -151,8 +151,8 @@ const TextInputV2 = /*#__PURE__*/forwardRef(({
           color: "danger",
           size: 8
         }) : null]
-      }), labelDescription ?? null]
-    }), jsx("div", {
+      }) : null, labelDescription ?? null]
+    }) : null, jsx("div", {
       children: jsx(Tooltip, {
         text: tooltip,
         children: jsxs(StyledInputWrapper, {

package/dist/src/index.js

@@ -71,3 +71,4 @@ export { RadioGroup } from './components/RadioGroup/index.js';
 export { Icon } from '@ultraviolet/icons';
 export { MenuV2 } from './components/MenuV2/index.js';
 export { GlobalAlert } from './components/GlobalAlert/index.js';
+export { NotificationContainer, notification } from './components/Notification/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.37.0",
+  "version": "1.38.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.3",
     "@emotion/styled": "11.11.0",
-    "@types/react": "18.2.52",
+    "@types/react": "18.2.55",
     "@types/react-datepicker": "4.19.6",
-    "@types/react-dom": "18.2.18",
+    "@types/react-dom": "18.2.19",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -67,7 +67,7 @@
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.9.0",
-    "@ultraviolet/icons": "2.9.0"
+    "@ultraviolet/icons": "2.9.1"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",