@ultraviolet/ui 1.8.4 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.8.4",
+  "version": "1.10.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -39,7 +39,7 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.22.10",
+    "@babel/core": "7.22.11",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
@@ -68,6 +68,6 @@
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.2.1",
-    "@ultraviolet/icons": "1.2.3"
+    "@ultraviolet/icons": "1.3.1"
   }
 }

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

@@ -1,283 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { css } from '@emotion/react';
-import { memo, useEffect, useCallback, isValidElement, useRef, cloneElement } from 'react';
-import { useDialogState, DialogBackdrop, Dialog, DialogDisclosure } from 'reakit/Dialog';
-import { Button } from '../Button/index.js';
-import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
-import { unfoldIn, unfoldOut, scaleForward, scaleBack, scaleUp, scaleDown, sketchIn, sketchOut, slideFromBottom, slideToBottom, slideFromLeft, slideToLeft, slideFromRight, slideToRight, slideFromTop, slideToTop, zoomIn, zoomOut } from '../../utils/animations.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 MODAL_WIDTH = {
-  large: 850,
-  medium: 708,
-  small: 616,
-  xsmall: 400,
-  xxsmall: 360
-};
-const MODAL_PLACEMENT = {
-  bottom: `
-    margin: auto;
-    margin-bottom: 0;
-  `,
-  'bottom-left': `
-    margin: auto;
-    margin-left: 0;
-    margin-bottom: 0;
-  `,
-  'bottom-right': `
-    margin: auto;
-    margin-right: 0;
-    margin-bottom: 0;
-  `,
-  center: `
-    margin: auto;
-  `,
-  left: `
-    margin: auto;
-    margin-left: 0;
-  `,
-  right: `
-    margin: auto;
-    margin-right: 0;
-  `,
-  top: `
-    margin: auto;
-    margin-top: 0px;
-  `,
-  'top-left': `
-    margin: auto;
-    margin-left: 0;
-    margin-top: 0;
-  `,
-  'top-right': `
-    margin: auto;
-    margin-right: 0;
-    margin-top: 0;
-  `
-};
-const MODAL_ANIMATION = {
-  fold: {
-    enter: unfoldIn,
-    leave: unfoldOut
-  },
-  scaleBack: {
-    enter: scaleForward,
-    leave: scaleBack
-  },
-  scaleUp: {
-    enter: scaleUp,
-    leave: scaleDown
-  },
-  sketch: {
-    enter: sketchIn,
-    leave: sketchOut
-  },
-  slideBottom: {
-    enter: slideFromBottom,
-    leave: slideToBottom
-  },
-  slideLeft: {
-    enter: slideFromLeft,
-    leave: slideToLeft
-  },
-  slideRight: {
-    enter: slideFromRight,
-    leave: slideToRight
-  },
-  slideTop: {
-    enter: slideFromTop,
-    leave: slideToTop
-  },
-  zoom: {
-    enter: zoomIn,
-    leave: zoomOut
-  }
-};
-const backdropAnimatedStyle = `
-  opacity: 0;
-  transition: opacity 250ms ease-in-out;
-  &[data-enter] {
-    opacity: 1;
-    transition: opacity 250ms ease-in-out;
-  }
-  &[data-leave] {
-    opacity: 0;
-    transition: opacity 400ms ease-in-out;
-  }
-`;
-const dialogAnimatedStyle = _ref => {
-  let {
-    animation
-  } = _ref;
-  return /*#__PURE__*/css("opacity:0;&[data-enter]{opacity:1;transition:opacity 500ms ease-in-out;animation:", MODAL_ANIMATION[animation].enter, " 500ms cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}&[data-leave]{opacity:0;transition:opacity 500ms ease-in-out;animation:", MODAL_ANIMATION[animation].leave, " 500ms cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}");
-};
-const Disclosure = _ref2 => {
-  let {
-    disclosure,
-    dialog
-  } = _ref2;
-  // if you need dialog inside your component, use function, otherwise component is fine
-  const target = /*#__PURE__*/isValidElement(disclosure) ? disclosure : disclosure(dialog);
-  const innerRef = useRef(target);
-  return (
-    // @ts-expect-error reakit types are invalid, no need to pass as something, default is div
-    jsx(DialogDisclosure, {
-      ...dialog,
-      onClick: event => {
-        // This allow to use onClick for speficique case like traking.
-        target?.props?.onClick?.(event);
-      },
-      ref: innerRef,
-      children: disclosureProps => /*#__PURE__*/cloneElement(target, disclosureProps)
-    })
-  );
-};
-const MemoDisclosure = /*#__PURE__*/memo(Disclosure);
-const StyledDialogBackdrop = /*#__PURE__*/_styled(DialogBackdrop, {
-  target: "ebywm9u2"
-})("display:flex;position:fixed;overflow:auto;padding:16px;top:0;bottom:0;right:0;left:0;opacity:1;background-color:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.colors.overlay;
-}, ";", _ref4 => {
-  let {
-    animated
-  } = _ref4;
-  return animated && backdropAnimatedStyle;
-}, ";");
-const StyledDialog = /*#__PURE__*/_styled(Dialog, {
-  shouldForwardProp: prop => !['animation', 'placement', 'width', 'height', 'bordered'].includes(prop),
-  target: "ebywm9u1"
-})("background-color:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.colors.neutral.backgroundWeakElevated;
-}, ";position:relative;border-radius:", _ref6 => {
-  let {
-    bordered,
-    theme
-  } = _ref6;
-  return bordered ? theme.radii.default : theme.radii.none;
-}, ";border:0;padding:32px;", _ref7 => {
-  let {
-    placement
-  } = _ref7;
-  return MODAL_PLACEMENT[placement];
-}, " width:", _ref8 => {
-  let {
-    width
-  } = _ref8;
-  return MODAL_WIDTH[width];
-}, "px;min-height:", _ref9 => {
-  let {
-    height
-  } = _ref9;
-  return height;
-}, ";box-shadow:", _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.shadows.modal;
-}, ";opacity:1;&::before{content:'';height:100%;width:100%;}", _ref11 => {
-  let {
-    animated,
-    animation
-  } = _ref11;
-  return animated && dialogAnimatedStyle({
-    animation
-  });
-}, ";");
-const StyledContainer = /*#__PURE__*/_styled("div", {
-  target: "ebywm9u0"
-})(process.env.NODE_ENV === "production" ? {
-  name: "et21s3",
-  styles: "display:flex;flex-grow:1;flex-wrap:wrap;justify-content:flex-end;position:absolute;top:16px;right:16px;left:16px"
-} : {
-  name: "et21s3",
-  styles: "display:flex;flex-grow:1;flex-wrap:wrap;justify-content:flex-end;position:absolute;top:16px;right:16px;left:16px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const Modal = /*#__PURE__*/memo(_ref12 => {
-  let {
-    animated = false,
-    animation = 'zoom',
-    ariaLabel = 'modal',
-    id,
-    bordered = true,
-    children,
-    customDialogBackdropStyles,
-    customDialogStyles = {},
-    disclosure,
-    height = 'initial',
-    hideOnClickOutside = true,
-    hideOnEsc = true,
-    isClosable = true,
-    modal = true,
-    onClose,
-    onBeforeClose,
-    opened = false,
-    placement = 'center',
-    preventBodyScroll = true,
-    width = 'small',
-    className,
-    'data-testid': dataTestId
-  } = _ref12;
-  const dialog = useDialogState({
-    animated,
-    baseId: id,
-    modal,
-    visible: opened
-  });
-  const {
-    setVisible
-  } = dialog;
-  useEffect(() => setVisible(opened), [setVisible, opened]);
-  const onCloseCallBack = useCallback(async () => {
-    await onBeforeClose?.();
-    dialog.toggle();
-  }, [dialog, onBeforeClose]);
-  return jsxs(Fragment, {
-    children: [disclosure && jsx(MemoDisclosure, {
-      dialog: dialog,
-      disclosure: disclosure
-    }), jsx(StyledDialogBackdrop, {
-      ...dialog,
-      css: customDialogBackdropStyles,
-      children: jsx(StyledDialog, {
-        "aria-label": ariaLabel,
-        role: "dialog",
-        tabIndex: 0,
-        animation: animation,
-        bordered: bordered,
-        height: height,
-        placement: placement,
-        width: width,
-        css: customDialogStyles,
-        hideOnClickOutside: hideOnClickOutside,
-        hideOnEsc: hideOnEsc,
-        preventBodyScroll: preventBodyScroll,
-        ...dialog,
-        hide: onClose || onCloseCallBack,
-        className: className,
-        "data-testid": dataTestId,
-        children: jsxs(Fragment, {
-          children: [dialog.visible && (typeof children === 'function' ? children(dialog) : children), jsx(StyledContainer, {
-            children: isClosable && jsx(Button, {
-              "data-testid": dataTestId ? `${dataTestId}-close-button` : undefined,
-              onClick: onClose || onCloseCallBack,
-              variant: "ghost",
-              size: "small",
-              icon: "close",
-              sentiment: "neutral",
-              "aria-label": "close"
-            })
-          })]
-        })
-      })
-    })]
-  });
-});
-
-export { MODAL_ANIMATION, MODAL_PLACEMENT, MODAL_WIDTH, Modal };