@ultraviolet/ui 1.18.0 → 1.19.0

package/dist/index.d.ts

@@ -1117,6 +1117,7 @@ declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttribu
 
 type CarouselItemProps = {
     children: ReactNode;
+    width?: string;
 };
 type CarouselProps = {
     className?: string;
@@ -1128,7 +1129,7 @@ type CarouselProps = {
  */
 declare const Carousel: {
     ({ children, className, "data-testid": dataTestId, }: CarouselProps): JSX.Element;
-    Item: ({ children }: CarouselItemProps) => JSX.Element;
+    Item: ({ children, width, }: CarouselItemProps) => JSX.Element;
 };
 
 type CheckboxProps = {
@@ -1494,15 +1495,23 @@ declare const Meter: ({ strength, title, value, className, "data-testid": dataTe
 type ModalSize = 'large' | 'medium' | 'small' | 'xsmall' | 'xxsmall';
 type ModalPlacement = 'bottom' | 'bottom-left' | 'bottom-right' | 'center' | 'top' | 'top-left' | 'top-right' | 'right' | 'left';
 type ModalState = {
+    /**
+     * @deprecated use show
+     */
     onOpen: () => void;
+    /**
+     * @deprecated use close
+     */
     onClose: () => void;
     toggle: () => void;
     visible: boolean;
     modalId: string;
     /**
-     * @deprecated use onClose
+     * @deprecated use close
      */
     hide: () => void;
+    close: () => void;
+    show: () => void;
 };
 
 type ModalProps = {
@@ -1772,6 +1781,9 @@ type PopupProps = {
     hideOnClickOutside?: boolean;
     needDebounce?: boolean;
 };
+/**
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
 declare const Popup: react.ForwardRefExoticComponent<PopupProps & react.RefAttributes<HTMLDivElement>>;
 
 type SentimentType = 'neutral' | 'primary';
@@ -2687,4 +2699,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, 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, LineChart, Link, List, Loader, Menu, MenuV2, Meter, Modal, Notice, NumberInput, 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, 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/Carousel/index.js

@@ -28,17 +28,17 @@ const StyledBeforeScroll = /*#__PURE__*/_styled("span", {
 }, "\n  );cursor:w-resize;z-index:auto;");
 const StyledScrollableWrapper = /*#__PURE__*/_styled("div", {
   target: "e1id70w02"
-})("overflow-x:scroll;overflow-y:hidden;white-space:nowrap;padding:", _ref3 => {
+})("overflow-x:scroll;overflow-y:hidden;white-space:nowrap;display:flex;padding:", _ref3 => {
   let {
     theme
   } = _ref3;
   return theme.space['2'];
-}, " 100px;>*:not(:last-child){margin-right:", _ref4 => {
+}, " 100px;gap:", _ref4 => {
   let {
     theme
   } = _ref4;
   return theme.space['2'];
-}, ";}");
+}, ";");
 const StyledAfterScroll = /*#__PURE__*/_styled("span", {
   target: "e1id70w01"
 })("position:absolute;bottom:0;right:0;width:100px;height:100%;content:'';cursor:e-resize;z-index:auto;background:linear-gradient(\n    -90deg,\n    ", _ref5 => {
@@ -52,44 +52,27 @@ const StyledAfterScroll = /*#__PURE__*/_styled("span", {
   } = _ref6;
   return theme.colors.neutral.background;
 }, "ff\n  );");
-const StyledBorderWrapper = /*#__PURE__*/_styled("div", {
+const StyledBorderWrapper = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['width'].includes(prop),
   target: "e1id70w00"
-})("display:inline-block;border-radius:", _ref7 => {
+})("display:flex;align-items:stretch;width:", _ref7 => {
   let {
-    theme
+    width
   } = _ref7;
-  return theme.radii.default;
-}, ";border:1px solid ", _ref8 => {
+  return width;
+}, ";max-width:", _ref8 => {
   let {
-    theme
+    width
   } = _ref8;
-  return theme.colors.neutral.borderWeak;
-}, ";height:261px;width:248px;max-width:240px;overflow-wrap:break-word;white-space:normal;cursor:grab;&:hover,&:active,&:focus{border:1px solid ", _ref9 => {
+  return width;
+}, ";overflow-wrap:break-word;white-space:normal;height:auto;cursor:grab;flex-shrink:0;");
+const CarouselItem = _ref9 => {
   let {
-    theme
+    children,
+    width = '240px'
   } = _ref9;
-  return theme.colors.primary.border;
-}, ";transition:box-shadow 0.2s ease;box-shadow:", _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.shadows.focusPrimary;
-}, ";}img{border-radius:", _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.radii.default;
-}, " ", _ref12 => {
-  let {
-    theme
-  } = _ref12;
-  return theme.radii.default;
-}, " 0 0;}");
-const CarouselItem = _ref13 => {
-  let {
-    children
-  } = _ref13;
   return jsx(StyledBorderWrapper, {
+    width: width,
     draggable: "true",
     children: children
   });
@@ -97,12 +80,12 @@ const CarouselItem = _ref13 => {
 /**
  * Carousel component allows you to scroll horizontally through a list of items.
  */
-const Carousel = _ref14 => {
+const Carousel = _ref10 => {
   let {
     children,
     className,
     'data-testid': dataTestId = 'scrollbar'
-  } = _ref14;
+  } = _ref10;
   const scrollRef = useRef(null);
   let intervalLeft;
   let intervalRight;

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

@@ -1,9 +1,9 @@
 import _styled from '@emotion/styled/base';
 import { forwardRef, useState, useRef, useId, isValidElement, useImperativeHandle, cloneElement } from 'react';
+import { Popup } from '../Popup/index.js';
 import { Stack } from '../Stack/index.js';
 import Item from './Item.js';
 import { jsx } from '@emotion/react/jsx-runtime';
-import { Popup } from '../../internalComponents/Popup/index.js';
 
 const StyledPopup = /*#__PURE__*/_styled(Popup, {
   target: "e1jn11gg1"

package/dist/src/components/Modal/Disclosure.js

@@ -25,7 +25,9 @@ const Disclosure = _ref => {
         toggle,
         onOpen: handleOpen,
         modalId: id,
-        hide: handleClose
+        hide: handleClose,
+        close: handleClose,
+        show: handleOpen
       });
     }
     return disclosure;

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

@@ -99,7 +99,9 @@ const Modal = _ref3 => {
           onOpen: handleOpen,
           toggle: handleToggle,
           modalId: finalId,
-          hide: handleClose
+          hide: handleClose,
+          close: handleClose,
+          show: handleOpen
         }) : children, jsx(StyledContainer, {
           children: isClosable ? jsx(Button, {
             "data-testid": dataTestId ? `${dataTestId}-close-button` : undefined,

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

@@ -1,10 +1,10 @@
 import _styled from '@emotion/styled/base';
 import { useRef, useState, useEffect, useCallback } from 'react';
 import { Button } from '../Button/index.js';
+import { Popup } from '../Popup/index.js';
 import { Stack } from '../Stack/index.js';
 import { Text } from '../Text/index.js';
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-import { Popup } from '../../internalComponents/Popup/index.js';
 
 const SIZES_WIDTH = {
   small: 320,

package/dist/src/{internalComponents → components}/Popup/index.js

@@ -31,7 +31,7 @@ const exitAnimation = positions => keyframes`
 `;
 const StyledTooltip = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['maxWidth', 'positions', 'reverseAnimation'].includes(prop),
-  target: "efkq4701"
+  target: "e4h1g861"
 })("background:", _ref => {
   let {
     theme
@@ -95,7 +95,7 @@ const StyledTooltip = /*#__PURE__*/_styled('div', {
   return theme.colors.neutral.backgroundStronger;
 }, " transparent transparent transparent;pointer-events:none;}}");
 const StyledChildrenContainer = /*#__PURE__*/_styled("div", {
-  target: "efkq4700"
+  target: "e4h1g860"
 })(process.env.NODE_ENV === "production" ? {
   name: "jhu4ja",
   styles: "display:inherit;&[data-container-full-width='true']{width:100%;}"
@@ -104,6 +104,9 @@ const StyledChildrenContainer = /*#__PURE__*/_styled("div", {
   styles: "display:inherit;&[data-container-full-width='true']{width:100%;}",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
+/**
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
 const Popup = /*#__PURE__*/forwardRef((_ref13, tooltipRef) => {
   let {
     children,

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

@@ -1,7 +1,7 @@
 import _styled from '@emotion/styled/base';
 import { forwardRef } from 'react';
+import { Popup } from '../Popup/index.js';
 import { jsx } from '@emotion/react/jsx-runtime';
-import { Popup } from '../../internalComponents/Popup/index.js';
 
 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 StyledPopup = /*#__PURE__*/_styled(Popup, {

package/dist/src/index.js

@@ -37,6 +37,7 @@ export { PasswordCheck } from './components/PasswordCheck/index.js';
 export { PasswordStrengthMeter } from './components/PasswordStrengthMeter/index.js';
 export { PieChart } from './components/PieChart/index.js';
 export { Popover } from './components/Popover/index.js';
+export { Popup } from './components/Popup/index.js';
 export { ProgressBar } from './components/ProgressBar/index.js';
 export { Radio } from './components/Radio/index.js';
 export { Row } from './components/Row/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -67,6 +67,6 @@
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.2.1",
-    "@ultraviolet/icons": "2.2.0"
+    "@ultraviolet/icons": "2.4.0"
   }
 }