@ultraviolet/ui 1.51.1 → 1.51.3

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

@@ -1,61 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Text } from '../Text/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 StyledList = /*#__PURE__*/_styled("ul", {
-  target: "e44jccr1"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1vatjen",
-  styles: "padding:0 8px 8px 8px;margin:0;width:100%"
-} : {
-  name: "1vatjen",
-  styles: "padding:0 8px 8px 8px;margin:0;width:100%",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledItem = /*#__PURE__*/_styled("li", {
-  target: "e44jccr0"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1duinrf",
-  styles: "display:flex;margin-top:6px;width:100%;justify-content:space-between;text-align:left;gap:8px"
-} : {
-  name: "1duinrf",
-  styles: "display:flex;margin-top:6px;width:100%;justify-content:space-between;text-align:left;gap:8px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-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

@@ -1,125 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useTheme } from '@emotion/react';
-import { Pie } from '@nivo/pie';
-import { useState, useCallback } from 'react';
-import { getLegendColor } from '../../helpers/legend.js';
-import { Text } from '../Text/index.js';
-import Legends from './Legends.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: "epjfe5p2"
-})("display:flex;align-items:center;height:", ({
-  height
-}) => `${height}px`, ";");
-const EmptyLegend = /*#__PURE__*/_styled("div", {
-  target: "epjfe5p1"
-})(process.env.NODE_ENV === "production" ? {
-  name: "dwqz7h",
-  styles: "display:flex;align-items:center;margin-left:20px"
-} : {
-  name: "dwqz7h",
-  styles: "display:flex;align-items:center;margin-left:20px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledContent = /*#__PURE__*/_styled("div", {
-  target: "epjfe5p0"
-})(process.env.NODE_ENV === "production" ? {
-  name: "qcd8cv",
-  styles: "display:inline-block;position:absolute;bottom:0;left:0;right:0;top:0;font-size:25px;line-height:100px;height:100px;width:100px;margin:auto;text-align:center;vertical-align:middle"
-} : {
-  name: "qcd8cv",
-  styles: "display:inline-block;position:absolute;bottom:0;left:0;right:0;top:0;font-size:25px;line-height:100px;height:100px;width:100px;margin:auto;text-align:center;vertical-align:middle",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const DEFAULT_CHARTPROPS = {};
-const DEFAULT_MARGIN = {
-  bottom: 10,
-  left: 10,
-  right: 10,
-  top: 10
-};
-
-/**
- * PieChart component is a wrapper around the Nivo Pie component to display a pie chart.
- * 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 = ({
-  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", {}), []);
-  const isEmpty = !data || data.length === 0;
-  const EmptyLegendDisplayed = useCallback(() => emptyLegend ? jsx(EmptyLegend, {
-    children: jsx(Text, {
-      variant: "body",
-      as: "p",
-      children: emptyLegend
-    })
-  }) : null, [emptyLegend]);
-  const localColors = getLegendColor(theme);
-  const LegendDisplayer = useCallback(() => isEmpty ? jsx(EmptyLegendDisplayed, {}) : jsx(Legends, {
-    focused: currentFocusIndex,
-    data: data,
-    onFocusChange: setCurrentFocusIndex,
-    colors: localColors
-  }), [isEmpty, currentFocusIndex, data, EmptyLegendDisplayed, localColors]);
-  return jsxs(Container, {
-    height: height,
-    children: [jsxs("div", {
-      style: {
-        position: 'relative'
-      },
-      children: [jsx(Pie, {
-        colors: localColors,
-        height: height,
-        width: width,
-        value: "percent",
-        enableArcLabels: false,
-        enableArcLinkLabels: false,
-        data: !isEmpty ? data : [{
-          id: 'empty',
-          percent: 100
-        }],
-        defs: [{
-          background: 'inherit',
-          color: theme.colors.neutral.textStrong,
-          id: 'lines',
-          lineWidth: 2,
-          rotation: 0,
-          spacing: 5,
-          type: 'patternLines'
-        }],
-        margin: margin,
-        innerRadius: 0.8,
-        cornerRadius: 0,
-        padAngle: 1,
-        activeOuterRadiusOffset: !isEmpty ? 4 : 0,
-        tooltip: emptyTooltip,
-        onMouseEnter: (datum, event) => {
-          if (!isEmpty) {
-            const pie = event.currentTarget;
-            pie.style.cursor = 'pointer';
-            setCurrentFocusIndex(datum.id.toString());
-          }
-        },
-        onMouseLeave: () => setCurrentFocusIndex(undefined),
-        ...chartProps
-      }), content ? jsx(StyledContent, {
-        children: content
-      }) : null]
-    }), withLegend ? jsx(LegendDisplayer, {}) : null]
-  });
-};
-
-export { PieChart };

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

@@ -1,146 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { forwardRef, 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';
-
-const SIZES_WIDTH = {
-  small: 320,
-  medium: 420,
-  large: 520
-};
-const StyledPopup = /*#__PURE__*/_styled(Popup, {
-  shouldForwardProp: prop => !['sentiment', 'size'].includes(prop),
-  target: "ejpxv5a1"
-})("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};
-      box-shadow: ${theme.shadows.popover};
-      &[data-has-arrow='true'] {
-        &::after {
-          border-color: ${theme.colors.neutral.background} transparent transparent transparent;
-        }
-      }
-      `;
-  }
-  return `
-      background: ${theme.colors.primary.backgroundStrong};
-      box-shadow: ${theme.shadows.popover};
-      &[data-has-arrow='true'] {
-        &::after {
-          border-color: ${theme.colors.primary.backgroundStrong} transparent transparent transparent;
-        }
-      }
-      `;
-}, ";");
-
-// This is to avoid having text inherit color from popup (which is white on white background)
-const StyledStack = /*#__PURE__*/_styled(Stack, {
-  target: "ejpxv5a0"
-})("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: 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(({
-  visible = false,
-  children,
-  placement,
-  content,
-  title,
-  sentiment = 'neutral',
-  size = 'medium',
-  onClose,
-  className,
-  maxWidth,
-  maxHeight,
-  'data-testid': dataTestId,
-  portalTarget,
-  dynamicDomRendering
-}, ref) => {
-  const innerRef = useRef(null);
-  const [localVisible, setLocalVisible] = useState(visible);
-
-  // We change local value if visible prop changes
-  useEffect(() => {
-    setLocalVisible(visible);
-  }, [visible]);
-  const localOnClose = useCallback(() => {
-    setLocalVisible(false);
-    onClose?.();
-  }, [onClose]);
-  return jsx(StyledPopup, {
-    hideOnClickOutside: true,
-    debounceDelay: 0,
-    visible: localVisible,
-    placement: placement,
-    text: jsx(ContentWrapper, {
-      title: title,
-      onClose: localOnClose,
-      sentiment: sentiment,
-      children: content
-    }),
-    className: className,
-    sentiment: sentiment,
-    "data-testid": dataTestId,
-    size: size,
-    role: "dialog",
-    ref: ref,
-    tabIndex: -1,
-    innerRef: innerRef,
-    onClose: localOnClose,
-    maxWidth: maxWidth,
-    maxHeight: maxHeight,
-    portalTarget: portalTarget,
-    dynamicDomRendering: dynamicDomRendering,
-    children: children
-  });
-});
-
-export { Popover };

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

@@ -1,252 +0,0 @@
-const ARROW_WIDTH = 8; // in px
-const SPACE = 4; // in px
-const TOTAL_USED_SPACE = 0; // in px
-const DEFAULT_POSITIONS = {
-  arrowLeft: 0,
-  arrowTop: 0,
-  arrowTransform: 'translate(-50%, -50)',
-  placement: 'top',
-  rotate: 135,
-  popupInitialPosition: 'translate3d(0px, 0px, 0)',
-  popupPosition: 'translate3d(0px, 0px, 0)'
-};
-/**
- * This function will find the best placement in a window for popup based on children position and popup size
- */
-const computePlacement = ({
-  childrenStructuredRef,
-  popupStructuredRef,
-  offsetParentRect,
-  offsetParent,
-  popupPortalTarget
-}) => {
-  const {
-    top: childrenTop,
-    left: childrenLeft,
-    right: childrenRight,
-    width: childrenWidth
-  } = childrenStructuredRef;
-  const {
-    top: parentTop,
-    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 : childrenLeft - parentLeft + childrenWidth;
-  const {
-    width: popupWidth,
-    height: popupHeight
-  } = popupStructuredRef;
-  if (overloadedChildrenTop - popupHeight - TOTAL_USED_SPACE < 0) {
-    return 'bottom';
-  }
-  if (overloadedChildrenLeft - popupWidth - TOTAL_USED_SPACE < 0) {
-    return 'right';
-  }
-  if (overloadedChildrenRight + popupWidth + TOTAL_USED_SPACE > window.innerWidth) {
-    return 'left';
-  }
-  return 'top';
-};
-
-/**
- * This function will check if the offset parent is usable for popup positioning
- * If not it will loop and search for a compatible parent until document.body is reached
- */
-const findOffsetParent = element => {
-  const offsetParent = element?.current?.offsetParent;
-
-  // We need to check if offsetParent is a table cell or a table because they are not suitable for positioning
-  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
-  if (offsetParent && !['TH', 'TD', 'TABLE'].includes(offsetParent.tagName)) {
-    return offsetParent;
-  }
-  let currentElement = element?.current;
-  while (currentElement && currentElement.tagName !== 'BODY') {
-    const {
-      position
-    } = window.getComputedStyle(currentElement);
-
-    // Check if the current element is a potential offset parent
-    if (position !== 'static') {
-      return currentElement;
-    }
-    currentElement = currentElement.parentElement;
-  }
-
-  // If no suitable offset parent is found, return the body element
-  return document.body;
-};
-
-/**
- * This function will check if there is an overflow of the popup compared to the parent it is set in.
- * Depending on the position, for top and bottom the overflow will be on X axis and for left and right
- * the overflow will be Y axis. The function return the number of pixels the popup is overflowing.
- * @param position the position of the popup
- * @param offsetParentRect the rect of the parent element where the children is located in
- * @param childrenRect the rect of the children element, the children element is the one that will trigger the popup
- * @param popupStructuredRef the rect of the popup, the popup itself
- */
-const getPopupOverflowFromParent = (position, offsetParentRect, childrenRect, popupStructuredRef) => {
-  const {
-    top: parentTop,
-    left: parentLeft,
-    right: parentRight
-  } = offsetParentRect;
-  const {
-    top: childrenTop,
-    bottom: childrenBottom,
-    left: childrenLeft,
-    right: childrenRight,
-    width: childrenWidth
-  } = childrenRect;
-  const {
-    width: popupWidth,
-    height: popupHeight
-  } = popupStructuredRef;
-  const popupHalfWidthWithArrow = popupWidth / 2 - ARROW_WIDTH;
-  const popupHalfHeightWithArrow = popupHeight / 2 - ARROW_WIDTH;
-  if (position === 'top' || position === 'bottom') {
-    const popupOverflowRight = childrenRight - childrenWidth / 2 + popupWidth / 2;
-    const popupOverflowLeft = childrenLeft + childrenWidth / 2 - parentLeft - popupWidth / 2;
-    if (popupOverflowRight > parentRight) {
-      if (Math.abs(popupOverflowRight - parentRight) > popupHalfWidthWithArrow) {
-        return -popupHalfWidthWithArrow;
-      }
-      return parentRight - popupOverflowRight;
-    }
-    if (popupOverflowLeft < 0) {
-      if (Math.abs(popupOverflowLeft) > popupHalfWidthWithArrow) {
-        return popupHalfWidthWithArrow;
-      }
-      return Math.abs(popupOverflowLeft);
-    }
-  }
-  if (position === 'left' || position === 'right') {
-    const popupOverflowTop = childrenTop - parentTop - popupHeight / 2;
-    if (popupOverflowTop < 0) {
-      if (Math.abs(childrenTop - parentTop - popupHalfHeightWithArrow) > popupHalfHeightWithArrow) {
-        return popupHalfHeightWithArrow;
-      }
-      return Math.abs(popupOverflowTop);
-    }
-    if (childrenBottom + popupHeight > window.innerHeight) {
-      return -popupHalfHeightWithArrow;
-    }
-  }
-  return 0;
-};
-/**
- * This function will compute the positions of popup and arrow based on children position and popup size
- */
-const computePositions = ({
-  placement,
-  childrenRef,
-  popupRef,
-  popupPortalTarget
-}) => {
-  const childrenRect = childrenRef.current.getBoundingClientRect();
-  const offsetParent = findOffsetParent(childrenRef);
-  const offsetParentRect = offsetParent?.getBoundingClientRect() ?? {
-    top: 0,
-    left: 0,
-    right: 0
-  };
-  const popupStructuredRef = popupRef.current.getBoundingClientRect();
-  const placementBasedOnWindowSize = placement === 'auto' ? computePlacement({
-    childrenStructuredRef: childrenRect,
-    popupStructuredRef,
-    offsetParentRect,
-    popupPortalTarget,
-    offsetParent
-  }) : placement;
-  const {
-    top: childrenTop,
-    left: childrenLeft,
-    right: childrenRight,
-    width: childrenWidth,
-    height: childrenHeight
-  } = childrenRect;
-  const {
-    top: parentTop,
-    left: parentLeft
-  } = offsetParentRect;
-  const {
-    width: popupWidth,
-    height: popupHeight
-  } = popupStructuredRef;
-
-  // offSetParent is the closest positioned ancestor. If the element is not positioned, the nearest table cell or root element is used.
-  const isPopupPortalTargetBody = popupPortalTarget === document.body || offsetParent === document.body;
-
-  // It will get how much scroll is done on the page to compute the position of the popup
-  const scrollTopValue = isPopupPortalTargetBody ? document.documentElement.scrollTop : offsetParent.scrollTop;
-
-  // 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 : childrenLeft - parentLeft + childrenWidth;
-  const popupOverflow = getPopupOverflowFromParent(placementBasedOnWindowSize, offsetParentRect, childrenRect, popupStructuredRef);
-  switch (placementBasedOnWindowSize) {
-    case 'bottom':
-      {
-        const positionX = overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
-        const positionY = overloadedChildrenTop + scrollTopValue + childrenHeight + ARROW_WIDTH + SPACE;
-        return {
-          arrowLeft: popupWidth / 2 + popupOverflow * -1,
-          arrowTop: -ARROW_WIDTH - 5,
-          arrowTransform: '',
-          placement: 'bottom',
-          rotate: 180,
-          popupInitialPosition: `translate3d(${positionX + popupOverflow}px, ${positionY - TOTAL_USED_SPACE}px, 0)`,
-          popupPosition: `translate3d(${positionX + popupOverflow}px, ${positionY}px, 0)`
-        };
-      }
-    case 'left':
-      {
-        const positionX = overloadedChildrenLeft - popupWidth - ARROW_WIDTH - SPACE * 2;
-        const positionY = overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
-        return {
-          arrowLeft: popupWidth + ARROW_WIDTH + 5,
-          arrowTop: popupHeight / 2 + popupOverflow * -1,
-          arrowTransform: 'translate(-50%, -50%)',
-          placement: 'left',
-          rotate: -90,
-          popupInitialPosition: `translate3d(${positionX + TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
-          popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`
-        };
-      }
-    case 'right':
-      {
-        const positionX = overloadedChildrenRight + ARROW_WIDTH + SPACE * 2;
-        const positionY = overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
-        return {
-          arrowLeft: -ARROW_WIDTH - 5,
-          arrowTop: popupHeight / 2 + popupOverflow * -1,
-          arrowTransform: 'translate(50%, -50%)',
-          placement: 'right',
-          rotate: 90,
-          popupInitialPosition: `translate3d(${positionX - TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
-          popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`
-        };
-      }
-    default:
-      {
-        // top placement is default value
-        const positionX = overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
-        const positionY = overloadedChildrenTop + scrollTopValue - popupHeight - ARROW_WIDTH - SPACE;
-        return {
-          arrowLeft: popupWidth / 2 + popupOverflow * -1,
-          arrowTop: popupHeight - 1,
-          arrowTransform: '',
-          placement: 'top',
-          rotate: 0,
-          popupInitialPosition: `translate3d(${positionX + popupOverflow}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
-          popupPosition: `translate3d(${positionX + popupOverflow}px, ${positionY}px, 0)`
-        };
-      }
-  }
-};
-
-export { ARROW_WIDTH, DEFAULT_POSITIONS, computePositions };