@ultraviolet/ui 1.16.0 → 1.17.0

package/README.md

@@ -20,13 +20,13 @@ You will also need to import fonts in your project by adding:
 ### Usage
 
 ```js
-import { theme, normalize, Button } from '@ultraviolet/ui'
-import { Global, css, ThemeProvider } from '@emotion/react'
+import { Global, ThemeProvider, css } from '@emotion/react'
+import { Button, normalize, theme } from '@ultraviolet/ui'
 
 const App = () => (
   <ThemeProvider theme={theme}>
     <Global styles={css`${normalize()}`} />
-    <Button variant="primary" onClick={() => console.log('clicked')}>
+    <Button onClick={() => console.log('clicked')}>
       Click Me
     </Button>
   </ThemeProvider>
@@ -42,10 +42,10 @@ Example, in a `emotion.d.ts` file:
 
 ```ts
 import '@emotion/react'
-import type { SCWUITheme } from '@ultraviolet/ui'
+import type { UltravioletUITheme } from '@ultraviolet/ui'
 
 declare module '@emotion/react' {
-  export interface Theme extends SCWUITheme {}
+  export interface Theme extends UltravioletUITheme {}
 }
 ```
 

package/dist/index.d.ts

@@ -37,7 +37,11 @@ type ActionBarProps = {
 declare const ActionBar: ({ children, role, rank, className, "data-testid": dataTestId, }: ActionBarProps) => react.ReactPortal;
 
 type ScreenSize = keyof typeof consoleLightTheme.screens;
+/**
+ * @deprecated use UltravioletUITheme instead
+ */
 type SCWUITheme = typeof consoleLightTheme;
+type UltravioletUITheme = typeof consoleLightTheme;
 declare const typography: {
     body: {
         fontFamily: string;
@@ -177,10 +181,10 @@ type RecursivePartial<T> = {
 };
 /**
  * Will extend theme with new theme properties
- * @param {SCWUITheme} baseTheme the theme you want to extend from, by default it is set to light theme
- * @param {RecursivePartial<SCWUITheme>} extendedTheme the properties of a new theme you want to apply from baseTheme
+ * @param {UltravioletUITheme} baseTheme the theme you want to extend from, by default it is set to light theme
+ * @param {RecursivePartial<UltravioletUITheme>} extendedTheme the properties of a new theme you want to apply from baseTheme
  */
-declare const extendTheme: (extendedTheme: RecursivePartial<SCWUITheme>) => {
+declare const extendTheme: (extendedTheme: RecursivePartial<UltravioletUITheme>) => {
     colors: {
         danger: {
             background: string;
@@ -803,6 +807,9 @@ type CommonProps = {
     onClick?: MouseEventHandler<HTMLElement>;
     tooltip?: string;
     tabIndex?: ButtonHTMLAttributes<HTMLButtonElement>['tabIndex'];
+    onMouseDown?: MouseEventHandler<HTMLElement>;
+    onMouseUp?: MouseEventHandler<HTMLElement>;
+    onMouseOut?: MouseEventHandler<HTMLElement>;
 };
 type FinalProps = CommonProps & ({
     children: ReactNode;
@@ -1827,7 +1834,7 @@ type RowProps = {
     'data-testid'?: string;
     children: ReactNode;
     templateColumns: string;
-    gap?: keyof SCWUITheme['space'] | number;
+    gap?: keyof UltravioletUITheme['space'] | number;
     alignItems?: CSSProperties['alignItems'];
     justifyContent?: CSSProperties['justifyContent'];
 };
@@ -2004,7 +2011,7 @@ type SnippetProps = {
 declare const Snippet: ({ children, copyText, copiedText, showText, hideText, prefix, className, "data-testid": dataTestId, }: SnippetProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type StackProps = {
-    gap?: keyof SCWUITheme['space'] | number;
+    gap?: keyof UltravioletUITheme['space'] | number;
     direction?: 'row' | 'column';
     alignItems?: CSSProperties['alignItems'];
     justifyContent?: CSSProperties['justifyContent'];
@@ -2674,4 +2681,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, LineChart, Link, List, Loader, Menu, MenuV2, 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 };
+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, MenuV2, 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, 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 };

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

@@ -115,7 +115,7 @@ const Alert = _ref6 => {
           children: [title ? jsx(Text, {
             variant: "bodyStronger",
             as: "span",
-            color: sentiment,
+            sentiment: sentiment,
             children: title
           }) : null, typeof children === 'string' ? jsx(Text, {
             variant: "body",

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

@@ -135,13 +135,13 @@ const Banner = _ref8 => {
         children: [jsx(Text, {
           as: "p",
           variant: size === 'medium' ? 'headingSmall' : 'bodyStronger',
-          color: variant === 'promotional' && theme !== 'light' ? 'neutral' : 'primary',
+          sentiment: variant === 'promotional' && theme !== 'light' ? 'neutral' : 'primary',
           prominence: variant === 'intro' ? 'default' : 'strong',
           children: title
         }), jsx(Text, {
           as: "p",
           variant: "body",
-          color: "neutral",
+          sentiment: "neutral",
           prominence: variant === 'intro' || variant === 'promotional' && theme !== 'light' ? 'default' : 'stronger',
           children: children
         })]

package/dist/src/components/BarChart/Tooltip.js

@@ -48,7 +48,7 @@ const BarChartToolTip = _ref5 => {
       children: [jsx(Text, {
         variant: "bodyStronger",
         as: "p",
-        color: "primary",
+        sentiment: "primary",
         children: formattedValue
       }), jsx(Text, {
         variant: "bodySmall",

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

@@ -231,6 +231,9 @@ const Button = /*#__PURE__*/forwardRef((_ref10, ref) => {
     isLoading = false,
     children,
     onClick,
+    onMouseDown,
+    onMouseUp,
+    onMouseOut,
     name,
     'aria-label': ariaLabel,
     'aria-current': ariaCurrent,
@@ -289,6 +292,9 @@ const Button = /*#__PURE__*/forwardRef((_ref10, ref) => {
         iconOnly: !!icon && !children,
         tabIndex: tabIndex,
         autoFocus: autoFocus,
+        onMouseDown: onMouseDown,
+        onMouseUp: onMouseUp,
+        onMouseOut: onMouseOut,
         children: content
       })
     });
@@ -318,6 +324,9 @@ const Button = /*#__PURE__*/forwardRef((_ref10, ref) => {
       iconOnly: !!icon && !children,
       tabIndex: tabIndex,
       autoFocus: autoFocus,
+      onMouseDown: onMouseDown,
+      onMouseUp: onMouseUp,
+      onMouseOut: onMouseOut,
       children: content
     })
   });

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

@@ -480,12 +480,12 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref64, ref) => {
           variant: "bodySmall",
           as: "p",
           prominence: "weak",
-          color: "neutral",
+          sentiment: "neutral",
           children: helper
         }) : null, error ? jsx(ErrorText, {
           variant: "bodySmall",
           as: "p",
-          color: "danger",
+          sentiment: "danger",
           children: error
         }) : null]
       })]

package/dist/src/components/LineChart/CustomLegend.js

@@ -117,7 +117,7 @@ const CustomLegend = _ref3 => {
                 children: [jsx(Text, {
                   as: "span",
                   variant: "bodySmall",
-                  color: "neutral",
+                  sentiment: "neutral",
                   children: row?.['label']
                 }), jsx("div", {
                   "data-testid": `label-${id}`,

package/dist/src/components/LineChart/Tooltip.js

@@ -40,13 +40,13 @@ const LineChartTooltip = _ref5 => {
     }), jsxs("div", {
       children: [jsx(Text, {
         variant: "bodyStronger",
-        color: "neutral",
+        sentiment: "neutral",
         prominence: "stronger",
         as: "div",
         children: point.data.yFormatted
       }), jsx(Text, {
         variant: "bodySmall",
-        color: "neutral",
+        sentiment: "neutral",
         prominence: "stronger",
         as: "div",
         children: point.data.xFormatted

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

@@ -359,7 +359,7 @@ const NumberInput = _ref21 => {
       }), typeof error === 'string' ? jsx(Text, {
         as: "span",
         variant: "bodySmall",
-        color: "danger",
+        sentiment: "danger",
         prominence: "weak",
         children: error
       }) : null]

package/dist/src/components/Table/HeaderRow.js

@@ -3,7 +3,6 @@ import { HeaderCell } from './HeaderCell.js';
 import { useTableContext } from './TableContext.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
-const SELECT_CHECKBOX_SIZE = 24;
 const HeaderRow = _ref => {
   let {
     children,
@@ -18,18 +17,17 @@ const HeaderRow = _ref => {
   const selectableRowCount = Object.keys(selectedRowIds).length;
   return jsxs("tr", {
     children: [hasSelectAllColumn ? jsx(HeaderCell, {
-      width: `${SELECT_CHECKBOX_SIZE}px`,
+      width: "24px",
       children: jsx(Checkbox, {
         name: "table-select-all-checkbox",
         value: "all",
         "aria-label": "select all",
         checked: allRowSelectValue,
         onChange: allRowSelectValue === false ? selectAll : unselectAll,
-        disabled: selectableRowCount === 0,
-        size: SELECT_CHECKBOX_SIZE
+        disabled: selectableRowCount === 0
       })
     }) : null, children]
   });
 };
 
-export { HeaderRow, SELECT_CHECKBOX_SIZE };
+export { HeaderRow };

package/dist/src/components/Table/Row.js

@@ -3,7 +3,6 @@ import { useEffect } from 'react';
 import { Checkbox } from '../Checkbox/index.js';
 import { Tooltip } from '../Tooltip/index.js';
 import { Cell } from './Cell.js';
-import { SELECT_CHECKBOX_SIZE } from './HeaderRow.js';
 import { useTableContext } from './TableContext.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
@@ -58,8 +57,7 @@ const Row = _ref2 => {
                 selectRow(id);
               }
             },
-            disabled: selectDisabled !== undefined,
-            size: SELECT_CHECKBOX_SIZE
+            disabled: selectDisabled !== undefined
           })
         })
       })

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

@@ -50,34 +50,34 @@ const CloseButton = _ref3 => {
 };
 const Content = _ref4 => {
   let {
-    variant,
+    sentiment,
     children
   } = _ref4;
   return jsxs(Stack, {
     gap: 2,
     direction: "row",
     children: [jsx(Icon, {
-      name: TOAST_ICONS[variant],
+      name: TOAST_ICONS[sentiment],
       size: 24
     }), jsx(Text, {
       variant: "body",
       as: "span",
-      color: variant,
+      sentiment: sentiment,
       children: children
     })]
   });
 };
 const toast = {
   error: (children, options) => toast$1.error(jsx(Content, {
-    variant: "danger",
+    sentiment: "danger",
     children: children
   }), options),
   info: (children, options) => toast$1.info(jsx(Content, {
-    variant: "info",
+    sentiment: "info",
     children: children
   }), options),
   success: (children, options) => toast$1.success(jsx(Content, {
-    variant: "success",
+    sentiment: "success",
     children: children
   }), options)
 };

package/dist/src/theme/index.js

@@ -2,6 +2,10 @@ import { consoleLightTheme } from '@ultraviolet/themes';
 export { consoleDarkTheme as darkTheme, consoleLightTheme as default } from '@ultraviolet/themes';
 import deepmerge from 'deepmerge';
 
+/**
+ * @deprecated use UltravioletUITheme instead
+ */
+
 const {
   colors,
   shadows,
@@ -12,8 +16,8 @@ const {
 } = consoleLightTheme;
 /**
  * Will extend theme with new theme properties
- * @param {SCWUITheme} baseTheme the theme you want to extend from, by default it is set to light theme
- * @param {RecursivePartial<SCWUITheme>} extendedTheme the properties of a new theme you want to apply from baseTheme
+ * @param {UltravioletUITheme} baseTheme the theme you want to extend from, by default it is set to light theme
+ * @param {RecursivePartial<UltravioletUITheme>} extendedTheme the properties of a new theme you want to apply from baseTheme
  */
 const extendTheme = extendedTheme => deepmerge(consoleLightTheme, extendedTheme);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -39,11 +39,11 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.22.19",
+    "@babel/core": "7.22.20",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@types/react": "18.2.21",
+    "@types/react": "18.2.22",
     "@types/react-datepicker": "4.15.0",
     "@types/react-dom": "18.2.7",
     "react": "18.2.0",
@@ -62,11 +62,11 @@
     "deepmerge": "4.3.1",
     "react-datepicker": "4.18.0",
     "react-flatten-children": "1.1.2",
-    "react-select": "5.7.4",
+    "react-select": "5.7.5",
     "react-toastify": "9.1.3",
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.2.1",
-    "@ultraviolet/icons": "2.0.3"
+    "@ultraviolet/icons": "2.1.0"
   }
 }