@ultraviolet/ui 1.27.3 → 1.28.0

package/dist/index.d.ts

@@ -1368,19 +1368,23 @@ type CheckboxProps = {
 declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
 
 type CopyButtonProps = {
-    size?: 'small' | 'large';
+    size?: 'xsmall' | 'small' | 'medium' | 'large';
     value: string;
     copyText?: string;
     copiedText?: string;
     sentiment?: 'primary' | 'neutral';
+    /**
+     * @deprecated Use `bordered` instead
+     */
     noBorder?: boolean;
+    bordered?: boolean;
     className?: string;
     'data-testid'?: string;
 };
 /**
  * CopyButton is a button that copies a given value to the clipboard.
  */
-declare const CopyButton: ({ size, value, copyText, copiedText, sentiment, noBorder, className, "data-testid": dataTestId, }: CopyButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const CopyButton: ({ size, value, copyText, copiedText, sentiment, noBorder, bordered, className, "data-testid": dataTestId, }: CopyButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type DateInputProps = Pick<ReactDatePickerProps<string, boolean>, 'locale' | 'onChange'> & {
     autoFocus?: boolean;

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

@@ -3,7 +3,6 @@ import { useTheme } from '@emotion/react';
 import { Icon } from '@ultraviolet/icons';
 import { forwardRef, useState, useId, useEffect, useCallback } from 'react';
 import { Loader } from '../Loader/index.js';
-import { Row } from '../Row/index.js';
 import { Stack } from '../Stack/index.js';
 import { Text } from '../Text/index.js';
 import { Tooltip } from '../Tooltip/index.js';
@@ -85,7 +84,14 @@ const StyledIcon = /*#__PURE__*/_styled('svg', {
 }, ";transform:translate(2px, 2px);transform:scale(0);}");
 const StyledLabel = /*#__PURE__*/_styled('label', {
   target: "eqr7bqq3"
-})();
+})(process.env.NODE_ENV === "production" ? {
+  name: "1d3w5wq",
+  styles: "width:100%"
+} : {
+  name: "1d3w5wq",
+  styles: "width:100%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 const CheckboxInput = /*#__PURE__*/_styled('input', {
   shouldForwardProp: prop => !['size'].includes(prop),
   target: "eqr7bqq2"
@@ -177,7 +183,7 @@ const CheckboxContainer = /*#__PURE__*/_styled("div", {
     theme
   } = _ref27;
   return theme.space['1'];
-}, ";", StyledLabel, "{cursor:pointer;}&[aria-disabled='true']{cursor:not-allowed;color:", _ref28 => {
+}, ";width:100%;", StyledLabel, "{cursor:pointer;}&[aria-disabled='true']{cursor:not-allowed;color:", _ref28 => {
   let {
     theme
   } = _ref28;
@@ -459,9 +465,12 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref64, ref) => {
         })
       }) : null, jsxs(Stack, {
         gap: 0.25,
-        children: [jsxs(Row, {
-          templateColumns: "11fr 1fr",
+        flex: 1,
+        children: [jsxs(Stack, {
+          gap: 0.5,
+          direction: "row",
           alignItems: "center",
+          flex: 1,
           children: [children ? jsx(StyledLabel, {
             htmlFor: computedName,
             children: children

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

@@ -14,6 +14,7 @@ const CopyButton = _ref => {
     copiedText = 'Copied!',
     sentiment = 'primary',
     noBorder,
+    bordered,
     className,
     'data-testid': dataTestId
   } = _ref;
@@ -25,7 +26,7 @@ const CopyButton = _ref => {
     onClick: setCopied,
     size: size,
     sentiment: sentiment,
-    variant: noBorder ? 'ghost' : 'outlined',
+    variant: noBorder || !bordered ? 'ghost' : 'outlined',
     className: className,
     "data-testid": dataTestId,
     "aria-label": "Copy",

package/dist/src/components/Popup/helpers.js

@@ -24,17 +24,17 @@ const computePlacement = _ref => {
   const {
     top: childrenTop,
     left: childrenLeft,
-    right: childrenRight
+    right: childrenRight,
+    width: childrenWidth
   } = childrenStructuredRef;
   const {
     top: parentTop,
-    left: parentLeft,
-    right: parentRight
+    left: parentLeft
   } = offsetParentRect;
   const isPopupPortalTargetBody = popupPortalTarget === document.body || offsetParent === document.body;
   const overloadedChildrenLeft = isPopupPortalTargetBody ? childrenLeft : childrenLeft - parentLeft;
   const overloadedChildrenTop = isPopupPortalTargetBody ? childrenTop : childrenTop - parentTop;
-  const overloadedChildrenRight = isPopupPortalTargetBody ? childrenRight : childrenRight - parentRight;
+  const overloadedChildrenRight = isPopupPortalTargetBody ? childrenRight : childrenLeft - parentLeft + childrenWidth;
   const {
     width: popupWidth,
     height: popupHeight
@@ -113,8 +113,7 @@ const computePositions = _ref2 => {
   } = childrenRect;
   const {
     top: parentTop,
-    left: parentLeft,
-    right: parentRight
+    left: parentLeft
   } = offsetParentRect;
   const {
     width: popupWidth,
@@ -130,7 +129,7 @@ const computePositions = _ref2 => {
   // We need to compute the position of the popup based on the parent element in the case the popup is not in the body
   const overloadedChildrenLeft = isPopupPortalTargetBody ? childrenLeft : childrenLeft - parentLeft;
   const overloadedChildrenTop = isPopupPortalTargetBody ? childrenTop : childrenTop - parentTop;
-  const overloadedChildrenRight = isPopupPortalTargetBody ? childrenRight : childrenRight + childrenWidth + ARROW_WIDTH + SPACE - parentRight / 2;
+  const overloadedChildrenRight = isPopupPortalTargetBody ? childrenRight : childrenLeft - parentLeft + childrenWidth;
   switch (placementBasedOnWindowSize) {
     case 'bottom':
       {

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

@@ -244,8 +244,8 @@ const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
         // We want to detect scroll and resize in order to recompute positions of popup
         // Adding true as third parameter to event listener will detect nested scrolls.
         window.addEventListener('scroll', onWindowChangeDetected, true);
-        window.addEventListener('resize', onWindowChangeDetected, true);
       }
+      window.addEventListener('resize', onWindowChangeDetected, true);
     }
     return () => {
       window.removeEventListener('scroll', onWindowChangeDetected, true);

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

@@ -5,12 +5,13 @@ import { Text } from '../Text/index.js';
 import { Tooltip } from '../Tooltip/index.js';
 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 SIZE = 24;
 const InnerCircleRing = /*#__PURE__*/_styled("circle", {
-  target: "ehkrmld5"
+  target: "ehkrmld6"
 })();
 const RadioMark = /*#__PURE__*/_styled("circle", {
-  target: "ehkrmld4"
+  target: "ehkrmld5"
 })();
 const RadioMarkedIcon = () => jsxs("g", {
   children: [jsx("circle", {
@@ -29,7 +30,7 @@ const RadioMarkedIcon = () => jsxs("g", {
   })]
 });
 const Ring = /*#__PURE__*/_styled("svg", {
-  target: "ehkrmld3"
+  target: "ehkrmld4"
 })("height:", SIZE, "px;width:", SIZE, "px;min-width:", SIZE, "px;min-height:", SIZE, "px;border-radius:", _ref => {
   let {
     theme
@@ -47,7 +48,7 @@ const Ring = /*#__PURE__*/_styled("svg", {
   return theme.colors.neutral.background;
 }, ";}");
 const RadioInput = /*#__PURE__*/_styled("input", {
-  target: "ehkrmld2"
+  target: "ehkrmld3"
 })("cursor:pointer;position:absolute;height:", SIZE, "px;width:", SIZE, "px;opacity:0;white-space:nowrap;border-width:0;&+", Ring, "{", RadioMark, "{transform-origin:center;transition:200ms transform ease-in-out;transform:scale(0);}}&:checked+svg{", RadioMark, "{transform:scale(1);}}&:checked[aria-disabled='false'][aria-invalid='false']+", Ring, "{fill:", _ref4 => {
   let {
     theme
@@ -80,8 +81,8 @@ const RadioInput = /*#__PURE__*/_styled("input", {
   return theme.colors.danger.background;
 }, ";}}");
 const RadioContainer = /*#__PURE__*/_styled("div", {
-  target: "ehkrmld1"
-})("position:relative;display:flex;align-items:flex-start;gap:", _ref10 => {
+  target: "ehkrmld2"
+})("position:relative;display:flex;flex:1;align-items:flex-start;gap:", _ref10 => {
   let {
     theme
   } = _ref10;
@@ -122,6 +123,16 @@ const RadioContainer = /*#__PURE__*/_styled("div", {
   } = _ref17;
   return theme.colors.neutral.backgroundDisabled;
 }, ";}}}");
+const StyledLabel = /*#__PURE__*/_styled("label", {
+  target: "ehkrmld1"
+})(process.env.NODE_ENV === "production" ? {
+  name: "82a6rk",
+  styles: "flex:1"
+} : {
+  name: "82a6rk",
+  styles: "flex:1",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 const MargedText = /*#__PURE__*/_styled(Text, {
   target: "ehkrmld0"
 })("margin-left:", _ref18 => {
@@ -158,6 +169,7 @@ const Radio = /*#__PURE__*/forwardRef((_ref19, ref) => {
     text: tooltip,
     children: jsxs(Stack, {
       gap: 0.5,
+      width: "100%",
       children: [jsxs(RadioContainer, {
         "aria-disabled": disabled,
         className: className,
@@ -183,7 +195,7 @@ const Radio = /*#__PURE__*/forwardRef((_ref19, ref) => {
         }), jsx(Ring, {
           viewBox: "0 0 24 24",
           children: jsx(RadioMarkedIcon, {})
-        }), label ? jsx("label", {
+        }), label ? jsx(StyledLabel, {
           htmlFor: `${computedName}-${value}`,
           children: label
         }) : null]

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

@@ -5,8 +5,9 @@ import { Radio } from '../Radio/index.js';
 import { Tooltip } from '../Tooltip/index.js';
 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("div", {
-  target: "e1s5n3hj1"
+  target: "e1s5n3hj2"
 })("display:inline-flex;flex-direction:column;align-items:start;padding:", _ref => {
   let {
     theme
@@ -70,7 +71,7 @@ const Container = /*#__PURE__*/_styled("div", {
 }, ";}}}");
 const StyledElement = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['showTick', 'hasLabel'].includes(prop),
-  target: "e1s5n3hj0"
+  target: "e1s5n3hj1"
 })("display:inline-flex;align-items:start;&[data-checked='true']{color:", _ref13 => {
   let {
     theme
@@ -99,11 +100,21 @@ const StyledElement = /*#__PURE__*/_styled('div', {
   return !showTick && !hasLabel ? `display: none;` : null;
 }, ";}");
 const StyledRadio = /*#__PURE__*/StyledElement.withComponent(Radio, {
-  target: "e1s5n3hj2"
-});
-const StyledCheckbox = /*#__PURE__*/StyledElement.withComponent(Checkbox, {
   target: "e1s5n3hj3"
 });
+const OverloadedCheckbox = /*#__PURE__*/StyledElement.withComponent(Checkbox, {
+  target: "e1s5n3hj4"
+});
+const StyledCheckbox = /*#__PURE__*/_styled(OverloadedCheckbox, {
+  target: "e1s5n3hj0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "qxc5j0",
+  styles: "label{width:100%;}"
+} : {
+  name: "qxc5j0",
+  styles: "label{width:100%;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 /**
  * SelectableCard is a component that can be used to create a radio or checkbox card.
  * It can be used to create a list of selectable items or a single selectable item.

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

@@ -5,7 +5,7 @@ import _styled from '@emotion/styled/base';
  * it accepts few props to deal with spacing and align.
  */
 const Stack = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['gap', 'direction', 'alignItems', 'justifyContent', 'wrap'].includes(prop),
+  shouldForwardProp: prop => !['gap', 'direction', 'alignItems', 'justifyContent', 'wrap', 'width'].includes(prop),
   target: "ehpbis70"
 })("display:flex;", _ref => {
   let {

package/dist/src/components/Tabs/TabMenu.js

@@ -1,21 +1,34 @@
 import _styled from '@emotion/styled/base';
 import { Icon } from '@ultraviolet/icons';
 import { forwardRef } from 'react';
-import { Menu } from '../Menu/index.js';
+import { MenuV2 } from '../MenuV2/index.js';
 import { StyledTabButton } from './Tab.js';
 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 ArrowIcon = /*#__PURE__*/_styled(Icon, {
-  target: "edb1sh91"
+  target: "edb1sh92"
 })();
 const StyledMenu = /*#__PURE__*/_styled(StyledTabButton, {
-  target: "edb1sh90"
+  target: "edb1sh91"
 })(ArrowIcon, "{color:inherit;margin-left:", _ref => {
   let {
     theme
   } = _ref;
   return theme.space['1'];
 }, ";transition:300ms transform ease-out;}&[aria-expanded='true'] ", ArrowIcon, "{transform:rotate(-180deg);}");
+
+// This will wrap and give the positioning to the popup div that is added onto the disclosure
+const StyledPositioningWrapper = /*#__PURE__*/_styled("div", {
+  target: "edb1sh90"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1hlymjl",
+  styles: "display:flex;position:sticky;top:0;bottom:0;right:0"
+} : {
+  name: "1hlymjl",
+  styles: "display:flex;position:sticky;top:0;bottom:0;right:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 const TabMenu = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     children,
@@ -26,22 +39,26 @@ const TabMenu = /*#__PURE__*/forwardRef((_ref2, ref) => {
     className,
     ...props
   } = _ref2;
-  return jsx(Menu, {
-    visible: visible,
-    id: id,
-    ref: ref,
-    disclosure: jsxs(StyledMenu, {
-      role: "tab",
-      "aria-disabled": disabled ?? 'false',
-      disabled: disabled,
-      "aria-haspopup": "menu",
-      className: className,
-      ...props,
-      children: [disclosure, jsx(ArrowIcon, {
-        name: "arrow-down"
-      })]
-    }),
-    children: children
+  return jsx(StyledPositioningWrapper, {
+    children: jsx(MenuV2, {
+      visible: visible,
+      id: id,
+      ref: ref,
+      portalTarget: document.body // We need to attach it to the body to avoid overflow issues
+      ,
+      disclosure: jsxs(StyledMenu, {
+        role: "tab",
+        "aria-disabled": disabled ?? 'false',
+        disabled: disabled,
+        "aria-haspopup": "menu",
+        className: className,
+        ...props,
+        children: [disclosure, jsx(ArrowIcon, {
+          name: "arrow-down"
+        })]
+      }),
+      children: children
+    })
   });
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.27.3",
+  "version": "1.28.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -39,13 +39,13 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.23.3",
+    "@babel/core": "7.23.5",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@types/react": "18.2.37",
+    "@types/react": "18.2.43",
     "@types/react-datepicker": "4.19.3",
-    "@types/react-dom": "18.2.15",
+    "@types/react-dom": "18.2.17",
     "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.5.0",
-    "@ultraviolet/icons": "2.6.0"
+    "@ultraviolet/icons": "2.7.0"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs"