@ultraviolet/ui 1.28.0 → 1.29.0

package/dist/src/components/PieChart/Legends.js

@@ -29,41 +29,23 @@ const List = /*#__PURE__*/_styled("ul", {
 });
 const ListItem = /*#__PURE__*/_styled("li", {
   target: "e12qyakg7"
-})("display:flex;align-items:center;margin-top:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['1'];
-}, ";width:100%;color:", _ref2 => {
-  let {
-    isFocused,
-    theme
-  } = _ref2;
-  return isFocused ? theme.colors.primary.text : theme.colors.neutral.text;
-}, ";");
+})("display:flex;align-items:center;margin-top:", ({
+  theme
+}) => theme.space['1'], ";width:100%;color:", ({
+  isFocused,
+  theme
+}) => isFocused ? theme.colors.primary.text : theme.colors.neutral.text, ";");
 const Bullet = /*#__PURE__*/_styled("div", {
   target: "e12qyakg6"
-})("display:inline-block;border-radius:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.radii.circle;
-}, ";width:10px;height:10px;margin:0 ", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.space['1'];
-}, ";background:", _ref5 => {
-  let {
-    color
-  } = _ref5;
-  return color;
-}, ";", _ref6 => {
-  let {
-    isFocused
-  } = _ref6;
-  return animationFlash(isFocused);
-}, ";");
+})("display:inline-block;border-radius:", ({
+  theme
+}) => theme.radii.circle, ";width:10px;height:10px;margin:0 ", ({
+  theme
+}) => theme.space['1'], ";background:", ({
+  color
+}) => color, ";", ({
+  isFocused
+}) => animationFlash(isFocused), ";");
 const Label = /*#__PURE__*/_styled("div", {
   target: "e12qyakg5"
 })(process.env.NODE_ENV === "production" ? {
@@ -76,20 +58,14 @@ const Label = /*#__PURE__*/_styled("div", {
 });
 const Value = /*#__PURE__*/_styled("div", {
   target: "e12qyakg4"
-})("margin-left:6px;font-weight:", _ref7 => {
-  let {
-    isFocused
-  } = _ref7;
-  return isFocused ? 500 : 400;
-}, ";");
+})("margin-left:6px;font-weight:", ({
+  isFocused
+}) => isFocused ? 500 : 400, ";");
 const Text = /*#__PURE__*/_styled("span", {
   target: "e12qyakg3"
-})("flex:none;margin-right:6px;font-weight:", _ref8 => {
-  let {
-    isFocused
-  } = _ref8;
-  return isFocused ? 500 : 400;
-}, ";");
+})("flex:none;margin-right:6px;font-weight:", ({
+  isFocused
+}) => isFocused ? 500 : 400, ";");
 const ToggleBox = /*#__PURE__*/_styled("div", {
   target: "e12qyakg2"
 })(process.env.NODE_ENV === "production" ? {
@@ -102,73 +78,61 @@ const ToggleBox = /*#__PURE__*/_styled("div", {
 });
 const Line = /*#__PURE__*/_styled("span", {
   target: "e12qyakg1"
-})("border-bottom:1px solid ", _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.colors.neutral.border;
-}, ";position:relative;width:100%;");
+})("border-bottom:1px solid ", ({
+  theme
+}) => theme.colors.neutral.border, ";position:relative;width:100%;");
 const ProgressiveLine = /*#__PURE__*/_styled("span", {
   target: "e12qyakg0"
-})("border-bottom:1px solid ", _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.colors.primary.border;
-}, ";position:absolute;left:0;top:0;bottom:-1px;transition:width 500ms ease;width:", _ref11 => {
-  let {
-    isFocused
-  } = _ref11;
-  return isFocused ? 100 : 0;
-}, "%;");
-const Legends = _ref12 => {
-  let {
-    focused,
-    data,
-    onFocusChange,
-    colors
-  } = _ref12;
-  return jsx(List, {
-    children: data?.map((item, index) => {
-      const isSegmentFocused = focused !== undefined && item.id === focused;
-      const id = `chart-legend-${item.id}`;
-      return jsx(Tooltip, {
-        visible: isSegmentFocused,
-        id: id,
-        text: jsx(TooltipContainer, {
-          data: item
-        }),
-        children: jsxs(ListItem, {
+})("border-bottom:1px solid ", ({
+  theme
+}) => theme.colors.primary.border, ";position:absolute;left:0;top:0;bottom:-1px;transition:width 500ms ease;width:", ({
+  isFocused
+}) => isFocused ? 100 : 0, "%;");
+const Legends = ({
+  focused,
+  data,
+  onFocusChange,
+  colors
+}) => jsx(List, {
+  children: data?.map((item, index) => {
+    const isSegmentFocused = focused !== undefined && item.id === focused;
+    const id = `chart-legend-${item.id}`;
+    return jsx(Tooltip, {
+      visible: isSegmentFocused,
+      id: id,
+      text: jsx(TooltipContainer, {
+        data: item
+      }),
+      children: jsxs(ListItem, {
+        isFocused: isSegmentFocused,
+        children: [jsx(ToggleBox, {
+          "data-testid": id,
+          onMouseOver: () => onFocusChange(item.id),
+          onFocus: () => onFocusChange(item.id),
+          onMouseOut: () => onFocusChange(),
+          onBlur: () => onFocusChange()
+        }), jsx(Bullet, {
+          color: colors[index],
           isFocused: isSegmentFocused,
-          children: [jsx(ToggleBox, {
-            "data-testid": id,
-            onMouseOver: () => onFocusChange(item.id),
-            onFocus: () => onFocusChange(item.id),
-            onMouseOut: () => onFocusChange(),
-            onBlur: () => onFocusChange()
-          }), jsx(Bullet, {
-            color: colors[index],
+          needPattern: item.needPattern,
+          id: `chart-legend-${item.id}`
+        }), jsxs(Label, {
+          children: [jsx(Text, {
             isFocused: isSegmentFocused,
-            needPattern: item.needPattern,
-            id: `chart-legend-${item.id}`
-          }), jsxs(Label, {
-            children: [jsx(Text, {
-              isFocused: isSegmentFocused,
-              children: item.name
-            }), jsx(Line, {
-              children: jsx(ProgressiveLine, {
-                isFocused: isSegmentFocused
-              })
-            })]
-          }), jsx(Value, {
-            isFocused: isSegmentFocused,
-            children: item.value
+            children: item.name
+          }), jsx(Line, {
+            children: jsx(ProgressiveLine, {
+              isFocused: isSegmentFocused
+            })
           })]
-        })
-      }, item.id);
-    })
-  });
-};
+        }), jsx(Value, {
+          isFocused: isSegmentFocused,
+          children: item.value
+        })]
+      })
+    }, item.id);
+  })
+});
 var Legends$1 = Legends;
 
 export { Legends$1 as default };

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

@@ -23,42 +23,39 @@ const StyledItem = /*#__PURE__*/_styled("li", {
   styles: "display:flex;margin-top:6px;width:100%;justify-content:space-between;text-align:left;gap:8px",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-const Tooltip = _ref => {
-  let {
-    data
-  } = _ref;
-  return jsx("div", {
-    tabIndex: -1,
-    role: "tooltip",
-    children: jsxs(StyledList, {
-      children: [jsxs(StyledItem, {
-        children: [jsx(Text, {
-          as: "p",
-          variant: "body",
-          prominence: "stronger",
-          children: data.name
-        }), jsx(Text, {
-          as: "p",
-          variant: "body",
-          prominence: "stronger",
-          children: data.value
-        })]
-      }), data.details?.map(detail => jsxs(StyledItem, {
-        children: [jsx(Text, {
-          as: "p",
-          variant: "bodySmall",
-          prominence: "stronger",
-          children: detail.name
-        }), jsx(Text, {
-          as: "p",
-          variant: "bodySmall",
-          prominence: "stronger",
-          children: detail.value
-        })]
-      }, detail.name))]
-    })
-  });
-};
+const Tooltip = ({
+  data
+}) => jsx("div", {
+  tabIndex: -1,
+  role: "tooltip",
+  children: jsxs(StyledList, {
+    children: [jsxs(StyledItem, {
+      children: [jsx(Text, {
+        as: "p",
+        variant: "body",
+        prominence: "stronger",
+        children: data.name
+      }), jsx(Text, {
+        as: "p",
+        variant: "body",
+        prominence: "stronger",
+        children: data.value
+      })]
+    }), data.details?.map(detail => jsxs(StyledItem, {
+      children: [jsx(Text, {
+        as: "p",
+        variant: "bodySmall",
+        prominence: "stronger",
+        children: detail.name
+      }), jsx(Text, {
+        as: "p",
+        variant: "bodySmall",
+        prominence: "stronger",
+        children: detail.value
+      })]
+    }, detail.name))]
+  })
+});
 var TooltipContainer = Tooltip;
 
 export { TooltipContainer as default };

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

@@ -10,12 +10,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("div", {
   target: "epjfe5p2"
-})("display:flex;align-items:center;height:", _ref => {
-  let {
-    height
-  } = _ref;
-  return `${height}px`;
-}, ";");
+})("display:flex;align-items:center;height:", ({
+  height
+}) => `${height}px`, ";");
 const EmptyLegend = /*#__PURE__*/_styled("div", {
   target: "epjfe5p1"
 })(process.env.NODE_ENV === "production" ? {
@@ -49,17 +46,16 @@ const DEFAULT_MARGIN = {
  * See https://nivo.rocks/pie/ for more information.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-const PieChart = _ref2 => {
-  let {
-    height = 206,
-    width = 206,
-    data = undefined,
-    emptyLegend,
-    content,
-    withLegend = false,
-    margin = DEFAULT_MARGIN,
-    chartProps = DEFAULT_CHARTPROPS
-  } = _ref2;
+const PieChart = ({
+  height = 206,
+  width = 206,
+  data = undefined,
+  emptyLegend,
+  content,
+  withLegend = false,
+  margin = DEFAULT_MARGIN,
+  chartProps = DEFAULT_CHARTPROPS
+}) => {
   const theme = useTheme();
   const [currentFocusIndex, setCurrentFocusIndex] = useState();
   const emptyTooltip = useCallback(() => jsx("span", {}), []);

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

@@ -14,26 +14,16 @@ const SIZES_WIDTH = {
 const StyledPopup = /*#__PURE__*/_styled(Popup, {
   shouldForwardProp: prop => !['sentiment', 'size'].includes(prop),
   target: "ejpxv5a1"
-})("padding:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['2'];
-}, ";width:", _ref2 => {
-  let {
-    size
-  } = _ref2;
-  return SIZES_WIDTH[size];
-}, "px;max-width:", _ref3 => {
-  let {
-    size
-  } = _ref3;
-  return SIZES_WIDTH[size];
-}, "px;text-align:initial;", _ref4 => {
-  let {
-    theme,
-    sentiment
-  } = _ref4;
+})("padding:", ({
+  theme
+}) => theme.space['2'], ";width:", ({
+  size
+}) => SIZES_WIDTH[size], "px;max-width:", ({
+  size
+}) => SIZES_WIDTH[size], "px;text-align:initial;", ({
+  theme,
+  sentiment
+}) => {
   if (sentiment === 'neutral') {
     return `
       background: ${theme.colors.neutral.background};
@@ -59,67 +49,60 @@ const StyledPopup = /*#__PURE__*/_styled(Popup, {
 // This is to avoid having text inherit color from popup (which is white on white background)
 const StyledStack = /*#__PURE__*/_styled(Stack, {
   target: "ejpxv5a0"
-})("color:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.colors.neutral.text;
-}, ";");
-const ContentWrapper = _ref6 => {
-  let {
-    title,
-    onClose,
-    children,
-    sentiment
-  } = _ref6;
-  return jsxs(StyledStack, {
-    gap: 1,
-    children: [jsxs(Stack, {
-      direction: "row",
-      justifyContent: "space-between",
-      children: [jsx(Text, {
-        variant: "bodyStrong",
-        as: "h3",
-        sentiment: "neutral",
-        prominence: sentiment === 'neutral' ? 'strong' : 'stronger',
-        children: title
-      }), jsx(Button, {
-        variant: sentiment === 'neutral' ? 'ghost' : 'filled',
-        sentiment: sentiment === 'neutral' ? 'neutral' : 'primary',
-        onClick: onClose,
-        size: "small",
-        icon: "close",
-        "aria-label": "close"
-      })]
-    }), typeof children === 'string' ? jsx(Text, {
-      variant: "bodySmall",
-      as: "p",
+})("color:", ({
+  theme
+}) => theme.colors.neutral.text, ";");
+const ContentWrapper = ({
+  title,
+  onClose,
+  children,
+  sentiment
+}) => jsxs(StyledStack, {
+  gap: 1,
+  children: [jsxs(Stack, {
+    direction: "row",
+    justifyContent: "space-between",
+    children: [jsx(Text, {
+      variant: "bodyStrong",
+      as: "h3",
       sentiment: "neutral",
       prominence: sentiment === 'neutral' ? 'strong' : 'stronger',
-      children: children
-    }) : children]
-  });
-};
+      children: title
+    }), jsx(Button, {
+      variant: sentiment === 'neutral' ? 'ghost' : 'filled',
+      sentiment: sentiment === 'neutral' ? 'neutral' : 'primary',
+      onClick: onClose,
+      size: "small",
+      icon: "close",
+      "aria-label": "close"
+    })]
+  }), typeof children === 'string' ? jsx(Text, {
+    variant: "bodySmall",
+    as: "p",
+    sentiment: "neutral",
+    prominence: sentiment === 'neutral' ? 'strong' : 'stronger',
+    children: children
+  }) : children]
+});
 /**
  * Popover component is used to display additional information or actions on top of the main content of the page.
  * It is usually triggered by clicking on a button. It includes a title, a close button and a content area.
  */
-const Popover = /*#__PURE__*/forwardRef((_ref7, ref) => {
-  let {
-    visible = false,
-    children,
-    placement,
-    content,
-    title,
-    sentiment = 'neutral',
-    size = 'medium',
-    onClose,
-    className,
-    maxWidth,
-    maxHeight,
-    'data-testid': dataTestId,
-    portalTarget
-  } = _ref7;
+const Popover = /*#__PURE__*/forwardRef(({
+  visible = false,
+  children,
+  placement,
+  content,
+  title,
+  sentiment = 'neutral',
+  size = 'medium',
+  onClose,
+  className,
+  maxWidth,
+  maxHeight,
+  'data-testid': dataTestId,
+  portalTarget
+}, ref) => {
   const innerRef = useRef(null);
   const [localVisible, setLocalVisible] = useState(visible);
 

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

@@ -13,14 +13,13 @@ const DEFAULT_POSITIONS = {
 /**
  * This function will find the best placement in a window for popup based on children position and popup size
  */
-const computePlacement = _ref => {
-  let {
-    childrenStructuredRef,
-    popupStructuredRef,
-    offsetParentRect,
-    offsetParent,
-    popupPortalTarget
-  } = _ref;
+const computePlacement = ({
+  childrenStructuredRef,
+  popupStructuredRef,
+  offsetParentRect,
+  offsetParent,
+  popupPortalTarget
+}) => {
   const {
     top: childrenTop,
     left: childrenLeft,
@@ -82,13 +81,12 @@ const findOffsetParent = element => {
 /**
  * This function will compute the positions of popup and arrow based on children position and popup size
  */
-const computePositions = _ref2 => {
-  let {
-    placement,
-    childrenRef,
-    popupRef,
-    popupPortalTarget
-  } = _ref2;
+const computePositions = ({
+  placement,
+  childrenRef,
+  popupRef,
+  popupPortalTarget
+}) => {
   const childrenRect = childrenRef.current.getBoundingClientRect();
   const offsetParent = findOffsetParent(childrenRef);
   const offsetParentRect = offsetParent?.getBoundingClientRect() ?? {