@ultraviolet/ui 1.51.0 → 1.51.2

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

@@ -1,82 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useTheme } from '@emotion/react';
-import { useReducer } from 'react';
-import { Button, SIZE_HEIGHT } from '../Button/index.js';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/index.js';
-import { GlobalAlertLink } from './GlobalAlertLink.js';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-
-const CloseButton = /*#__PURE__*/_styled(Button, {
-  target: "ewvyccp1"
-})("background:none;position:absolute;right:", SIZE_HEIGHT.xsmall, "px;&:hover,&:focus,&:active{background:none;}");
-const Container = /*#__PURE__*/_styled(Stack, {
-  target: "ewvyccp0"
-})("width:100%;height:56px;padding:0 ", ({
-  theme
-}) => theme.space['2'], ";&[data-variant='info']{background-color:", ({
-  theme
-}) => theme.colors.info.backgroundStrong, ";}&[data-variant='danger']{background-color:", ({
-  theme
-}) => theme.colors.danger.backgroundStrong, ";}&[data-variant='promotional']{background:", ({
-  theme
-}) => theme.colors.other.gradients.background.linear.aqua, ";}");
-/**
- * GlobalAlert is a component that is used to display a global alert message.
- * It has its own internal state and can be closed by clicking on the close button.
- */
-const GlobalAlert = ({
-  children,
-  variant = 'info',
-  onClose,
-  closable = true,
-  buttonText,
-  onClickButton,
-  className,
-  'data-testid': dataTestId
-}) => {
-  const {
-    theme
-  } = useTheme();
-  const [opened, toggleOpened] = useReducer(value => !value, true);
-  if (!opened) return null;
-  return jsxs(Container, {
-    justifyContent: "center",
-    alignItems: "center",
-    direction: "row",
-    "data-variant": variant,
-    "data-testid": dataTestId,
-    className: className,
-    children: [jsxs(Stack, {
-      gap: 2,
-      direction: "row",
-      justifyContent: "center",
-      alignItems: "center",
-      children: [jsx(Text, {
-        variant: "bodySmall",
-        as: "p",
-        sentiment: "neutral",
-        prominence: theme === 'light' ? 'stronger' : 'strong',
-        children: children
-      }), onClickButton && buttonText ? jsx(Button, {
-        onClick: onClickButton,
-        variant: "filled",
-        sentiment: "neutral",
-        size: "small",
-        children: buttonText
-      }) : null]
-    }), closable ? jsx(CloseButton, {
-      variant: "filled",
-      size: "xsmall",
-      icon: "close",
-      sentiment: "primary",
-      onClick: () => {
-        toggleOpened();
-        onClose?.();
-      }
-    }) : null]
-  });
-};
-GlobalAlert.Link = GlobalAlertLink;
-
-export { GlobalAlert };

package/dist/src/components/LineChart/CustomLegend.js

@@ -1,138 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { css } from '@emotion/react';
-import { getLegendColor } from '../../helpers/legend.js';
-import { Checkbox } from '../Checkbox/index.js';
-import { Text } from '../Text/index.js';
-import { getSelected, getMin, getMax, getAverage, getCurrent } from './helpers.js';
-import { jsxs, jsx } 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 styles = {
-  body: theme => /*#__PURE__*/css(">:not(:last-child){border-bottom:1px solid ", theme.colors.neutral.backgroundStrong, ";}"),
-  head: theme => /*#__PURE__*/css("display:flex;padding-bottom:8px;border-bottom:1px solid ", theme.colors.neutral.backgroundStrong, ";>:not(:last-child){margin-right:8px;}"),
-  legend: index => theme => /*#__PURE__*/css("margin-left:16px;width:32px;height:2px;background-color:", getLegendColor(theme)[index], ";"),
-  row: process.env.NODE_ENV === "production" ? {
-    name: "fevtnc",
-    styles: "display:flex;padding:4px 0;>:not(:last-child){margin-right:8px;}"
-  } : {
-    name: "fevtnc",
-    styles: "display:flex;padding:4px 0;>:not(:last-child){margin-right:8px;}",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  }
-};
-const StyledText = /*#__PURE__*/_styled(Text, {
-  target: "erndk5t3"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1rtr7zh",
-  styles: "text-align:right;flex:1;min-width:72px;align-self:center"
-} : {
-  name: "1rtr7zh",
-  styles: "text-align:right;flex:1;min-width:72px;align-self:center",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const Cell = ({
-  value,
-  variant
-}) => jsx(StyledText, {
-  variant: variant,
-  color: "neutral",
-  as: "span",
-  children: value
-});
-const CellValueContainer = /*#__PURE__*/_styled("div", {
-  target: "erndk5t2"
-})(process.env.NODE_ENV === "production" ? {
-  name: "s5xdrg",
-  styles: "display:flex;align-items:center"
-} : {
-  name: "s5xdrg",
-  styles: "display:flex;align-items:center",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const LongContainer = /*#__PURE__*/_styled("div", {
-  target: "erndk5t1"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1ajplif",
-  styles: "display:flex;flex:6"
-} : {
-  name: "1ajplif",
-  styles: "display:flex;flex:6",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const noop = value => value.toString();
-const StyledContainer = /*#__PURE__*/_styled("div", {
-  target: "erndk5t0"
-})("margin-top:", ({
-  theme
-}) => theme.space[2], ";");
-const CustomLegend = ({
-  axisTransformer = noop,
-  data,
-  selected,
-  setSelected,
-  className,
-  'data-testid': dataTestId
-}) => jsxs(StyledContainer, {
-  className: className,
-  "data-testid": dataTestId,
-  children: [jsxs("div", {
-    css: styles.head,
-    children: [jsx(LongContainer, {
-      children: "Legend"
-    }), jsx(Cell, {
-      variant: "body",
-      value: "Minimum"
-    }), jsx(Cell, {
-      variant: "body",
-      value: "Maximum"
-    }), jsx(Cell, {
-      variant: "body",
-      value: "Average"
-    }), jsx(Cell, {
-      variant: "body",
-      value: "Current"
-    })]
-  }), jsx("div", {
-    css: styles.body,
-    children: data?.map((row, index) => {
-      const values = row.data.map(val => val.y);
-      const labelIndexed = `${row.id}${index}`;
-      const id = row.id.toString();
-      return jsxs("div", {
-        css: styles.row,
-        children: [jsx(LongContainer, {
-          children: jsx(Checkbox, {
-            checked: selected.includes(labelIndexed),
-            name: id,
-            onChange: () => setSelected([...getSelected(id, index, selected)]),
-            children: jsxs(CellValueContainer, {
-              children: [jsx(Text, {
-                as: "span",
-                variant: "bodySmall",
-                sentiment: "neutral",
-                children: row?.['label']
-              }), jsx("div", {
-                "data-testid": `label-${id}`,
-                css: styles.legend(index)
-              })]
-            })
-          })
-        }), jsx(Cell, {
-          variant: "bodySmall",
-          value: axisTransformer(getMin(values))
-        }), jsx(Cell, {
-          variant: "bodySmall",
-          value: axisTransformer(getMax(values))
-        }), jsx(Cell, {
-          variant: "bodySmall",
-          value: axisTransformer(getAverage(values))
-        }), jsx(Cell, {
-          variant: "bodySmall",
-          value: axisTransformer(getCurrent(values))
-        })]
-      }, labelIndexed);
-    })
-  })]
-});
-
-export { CustomLegend };

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

@@ -1,43 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Text } from '../Text/index.js';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-
-const LineTooltipContainer = /*#__PURE__*/_styled("div", {
-  target: "e11niu3b1"
-})("display:flex;background:", ({
-  theme
-}) => theme.colors.neutral.backgroundStronger, ";border-radius:", ({
-  theme
-}) => theme.radii.small, ";box-shadow:", ({
-  theme
-}) => theme.shadows.tooltip, ";padding:5px 9px;align-items:center;");
-const LineColorSquare = /*#__PURE__*/_styled("span", {
-  target: "e11niu3b0"
-})("display:block;width:12px;height:12px;background:", ({
-  color
-}) => color, ";margin-right:12px;");
-const LineChartTooltip = ({
-  point
-}) => jsxs(LineTooltipContainer, {
-  children: [jsx("div", {
-    children: jsx(LineColorSquare, {
-      color: point.serieColor
-    })
-  }), jsxs("div", {
-    children: [jsx(Text, {
-      variant: "bodyStronger",
-      sentiment: "neutral",
-      prominence: "stronger",
-      as: "div",
-      children: point.data.yFormatted
-    }), jsx(Text, {
-      variant: "bodySmall",
-      sentiment: "neutral",
-      prominence: "stronger",
-      as: "div",
-      children: point.data.xFormatted
-    })]
-  })]
-});
-
-export { LineChartTooltip };

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

@@ -1,40 +0,0 @@
-const parse = data => {
-  if (typeof data === 'number') return data || 0;
-  if (typeof data === 'string') return parseFloat(data) || 0;
-  if (data instanceof Date) return data.getTime();
-  return 0;
-};
-const getMin = (values = []) => values.length ? Math.min(...values.map(parse)) : 0;
-const getMax = (values = []) => values.length ? Math.max(...values.map(parse)) : 0;
-const getAverage = (values = []) => values.length ? Math.round(values.reduce((sum, curr) => sum + parse(curr), 0) / values.length * 100) / 100 : 0;
-const getMaxChartValue = preppedData => {
-  if (!preppedData?.length) return 0;
-  const maximum = Math.max(...preppedData.map(({
-    data
-  }) => getMax(data.map(({
-    y
-  }) => y || 0))));
-  return Math.ceil(maximum + maximum * 0.1);
-};
-const getMinChartValue = preppedData => {
-  if (!preppedData?.length) return 0;
-  const minimum = Math.min(...preppedData.map(({
-    data
-  }) => getMin(data.map(({
-    y
-  }) => y || 0))));
-  return Math.floor(minimum - minimum * 0.1);
-};
-const getCurrent = (values = []) => values.length ? values[values.length - 1] : 0;
-const getSelected = (label, index, selected = []) => {
-  const labelIndexed = label + index.toString();
-  const found = selected.indexOf(labelIndexed);
-  if (found > -1) {
-    selected.splice(found, 1);
-  } else {
-    selected.push(labelIndexed);
-  }
-  return selected;
-};
-
-export { getAverage, getCurrent, getMax, getMaxChartValue, getMin, getMinChartValue, getSelected };

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

@@ -1,131 +0,0 @@
-import { useTheme } from '@emotion/react';
-import { ResponsiveLine } from '@nivo/line';
-import { useState, useEffect } from 'react';
-import { getLegendColor } from '../../helpers/legend.js';
-import { CustomLegend } from './CustomLegend.js';
-import { LineChartTooltip } from './Tooltip.js';
-import { getMaxChartValue, getMinChartValue } from './helpers.js';
-import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
-
-const DEFAULT_MARGIN = {
-  bottom: 50,
-  left: 60,
-  right: 25,
-  top: 50
-};
-const DEFAULT_XSCALE = {
-  format: '%Y-%m-%dT%H:%M:%S%Z',
-  // 2021-08-30T02:56:07Z
-  precision: 'minute',
-  type: 'time',
-  useUTC: false
-};
-const DEFAULT_YSCALE = {
-  type: 'linear'
-};
-const DEFAULT_CHARTPROPS = {};
-
-/**
- * LineChart component is a wrapper around Nivo's ResponsiveLine component used to display data in a line chart.
- * See https://nivo.rocks/line/ for more information.
- * @experimental This component is experimental and may be subject to breaking changes in the future.
- */
-const LineChart = ({
-  height = '537px',
-  // to maintain aspect ratio based on our standard 1074px width
-  margin = DEFAULT_MARGIN,
-  xScale = DEFAULT_XSCALE,
-  yScale = DEFAULT_YSCALE,
-  data,
-  withLegend = false,
-  axisFormatters,
-  pointFormatters,
-  tickValues,
-  chartProps = DEFAULT_CHARTPROPS,
-  'data-testid': dataTestId
-}) => {
-  const theme = useTheme();
-  const dataset = {
-    datasets: data?.map(d => ({
-      data: d.data,
-      id: d.id,
-      label: d?.['label']
-    }))
-  };
-  const chartTheme = {
-    axis: {
-      ticks: {
-        line: {
-          stroke: theme.colors.neutral.backgroundStrong,
-          strokeWidth: 1
-        }
-      }
-    },
-    fontFamily: theme.typography.body.fontFamily,
-    fontSize: 12,
-    textColor: theme.colors.neutral.textWeak
-  };
-  const [selected, setSelected] = useState(dataset.datasets?.map(({
-    id
-  }, index) => `${id}${index}`));
-  const finalData = dataset.datasets?.filter(({
-    id
-  }, index) => selected ? selected.includes(`${id}${index}`) : false);
-  useEffect(() => {
-    if (selected !== undefined) {
-      return;
-    }
-    setSelected(dataset.datasets?.map(({
-      id
-    }, index) => `${id}${index}`));
-  }, [dataset.datasets, selected]);
-  const localColors = getLegendColor(theme);
-  return jsxs(Fragment, {
-    children: [jsx("div", {
-      style: {
-        height
-      },
-      children: jsx(ResponsiveLine, {
-        colors: localColors,
-        data: finalData ?? [],
-        margin: margin,
-        xScale: xScale,
-        yScale: {
-          max: getMaxChartValue(finalData),
-          min: getMinChartValue(finalData),
-          ...yScale
-        },
-        xFormat: pointFormatters?.x,
-        yFormat: pointFormatters?.y,
-        axisBottom: {
-          format: axisFormatters?.bottom,
-          tickPadding: 5,
-          tickRotation: 0,
-          tickSize: 5,
-          tickValues: tickValues?.bottom
-        },
-        axisLeft: {
-          format: axisFormatters?.left,
-          tickPadding: 5,
-          tickRotation: 0,
-          tickSize: 5,
-          tickValues: tickValues?.left
-        },
-        pointSize: 10,
-        useMesh: true,
-        theme: chartTheme,
-        curve: "monotoneX",
-        tooltip: LineChartTooltip,
-        "data-testid": dataTestId,
-        ...chartProps
-      })
-    }), withLegend && jsx(CustomLegend, {
-      data: dataset.datasets,
-      selected: selected ?? [],
-      setSelected: setSelected,
-      axisTransformer: axisFormatters?.left
-    })]
-  });
-};
-
-export { LineChart };

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

@@ -1,147 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { forwardRef, useState, useRef, useEffect } from 'react';
-import recursivelyGetChildrenString from '../../helpers/recursivelyGetChildrenString.js';
-import capitalize from '../../utils/capitalize.js';
-import { Tooltip } from '../Tooltip/index.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-const StyledIcon = /*#__PURE__*/_styled(Icon, {
-  target: "e1afnb7a2"
-})();
-const PROMINENCES = {
-  default: '',
-  weak: 'weak',
-  strong: 'strong',
-  stronger: 'stronger'
-};
-const ICON_SIZE = 16;
-const BLANK_TARGET_ICON_SIZE = 14;
-const TRANSITION_DURATION = 250;
-const StyledExternalIconContainer = /*#__PURE__*/_styled("span", {
-  target: "e1afnb7a1"
-})("display:inline-flex;padding-bottom:", ({
-  theme
-}) => theme.space['0.5'], ";");
-const StyledLink = /*#__PURE__*/_styled('a', {
-  shouldForwardProp: prop => !['sentiment', 'iconPosition', 'as', 'oneLine'].includes(prop),
-  target: "e1afnb7a0"
-})("background-color:transparent;border:none;padding:0;color:", ({
-  theme,
-  sentiment,
-  prominence
-}) => {
-  const definedProminence = capitalize(PROMINENCES[prominence ?? 'default']);
-  theme.colors[sentiment];
-  const text = `text${definedProminence}`;
-  return theme.colors[sentiment]?.[text] ?? theme.colors.neutral.text;
-}, ";text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:transparent;display:inline-flex;flex-direction:row;align-items:center;transition:text-decoration-color ", TRANSITION_DURATION, "ms ease-out;", StyledIcon, "{transition:transform ", TRANSITION_DURATION, "ms ease-out;}gap:", ({
-  theme
-}) => theme.space['1'], ";position:relative;cursor:pointer;>*{pointer-events:none;}", ({
-  oneLine
-}) => oneLine ? `white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: block;` : 'width: fit-content;', " ", ({
-  size,
-  theme
-}) => {
-  const variant = size === 'small' ? 'bodySmallStrong' : 'bodyStrong';
-  return `
-      font-size: ${theme.typography[variant].fontSize};
-      font-family: ${theme.typography[variant].fontFamily};
-      font-weight: ${theme.typography[variant].weight};
-      letter-spacing: ${theme.typography[variant].letterSpacing};
-      line-height: ${theme.typography[variant].lineHeight};
-      paragraph-spacing: ${theme.typography[variant].paragraphSpacing};
-      text-case: ${theme.typography[variant].textCase};
-    `;
-}, " &:hover,&:focus{outline:none;text-decoration:underline;text-decoration-thickness:1px;", ({
-  theme,
-  sentiment,
-  prominence
-}) => {
-  const definedProminence = capitalize(PROMINENCES[prominence ?? 'default']);
-  theme.colors[sentiment];
-  const text = `text${definedProminence}Hover`;
-  return `
-        color: ${theme.colors[sentiment]?.[text] ?? theme.colors.neutral.textHover};
-        text-decoration-color: ${theme.colors[sentiment]?.[text] ?? theme.colors.neutral.textHover};`;
-}, ";", StyledIcon, "{transform:", ({
-  theme,
-  iconPosition
-}) => iconPosition === 'left' ? `translate(${theme.space['0.5']}, 0)` : `translate(-${theme.space['0.5']}, 0)`, ";}}&[data-variant='inline']{text-decoration:underline;text-decoration-thickness:1px;}&:hover::after,&:focus::after{background-color:", ({
-  theme,
-  sentiment
-}) => theme.colors[sentiment]?.text ?? theme.colors.neutral.text, ";}&:active{text-decoration-thickness:2px;}");
-
-/**
- * Link is a component used to navigate between pages or to external websites.
- */
-const Link = /*#__PURE__*/forwardRef(({
-  children,
-  href,
-  target,
-  download,
-  sentiment = 'info',
-  prominence,
-  size = 'large',
-  iconPosition,
-  rel,
-  className,
-  onClick,
-  'aria-label': ariaLabel,
-  oneLine = false,
-  'data-testid': dataTestId,
-  variant = 'standalone'
-}, ref) => {
-  const isBlank = target === '_blank';
-  const computedRel = rel || (isBlank ? 'noopener noreferrer' : undefined);
-  const [isTruncated, setIsTruncated] = useState(false);
-  const elementRef = useRef(null);
-  const usedRef = ref ?? elementRef;
-  const finalStringChildren = recursivelyGetChildrenString(children);
-  useEffect(() => {
-    if (oneLine && usedRef?.current) {
-      const {
-        offsetWidth,
-        scrollWidth
-      } = usedRef.current;
-      setIsTruncated(offsetWidth < scrollWidth);
-    }
-  }, [oneLine, ref, usedRef]);
-  return jsx(Tooltip, {
-    text: oneLine && isTruncated ? finalStringChildren : '',
-    children: jsxs(StyledLink, {
-      href: href,
-      target: target,
-      download: download,
-      ref: usedRef,
-      sentiment: sentiment,
-      prominence: prominence,
-      rel: computedRel,
-      className: className,
-      size: size,
-      onClick: onClick,
-      iconPosition: iconPosition,
-      "aria-label": ariaLabel,
-      oneLine: oneLine,
-      "data-testid": dataTestId,
-      "data-variant": variant,
-      children: [!isBlank && iconPosition === 'left' ? jsx(StyledIcon, {
-        name: "arrow-left",
-        size: ICON_SIZE
-      }) : null, children, isBlank ? jsx(StyledExternalIconContainer, {
-        children: jsx(StyledIcon, {
-          name: "open-in-new",
-          size: BLANK_TARGET_ICON_SIZE
-        })
-      }) : null, !isBlank && iconPosition === 'right' ? jsx(StyledIcon, {
-        name: "arrow-right",
-        size: ICON_SIZE
-      }) : null]
-    })
-  });
-});
-
-export { Link, PROMINENCES };

package/dist/src/components/List/Body.js

@@ -1,16 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const StyledBody = /*#__PURE__*/_styled("div", {
-  target: "e1wm4no70"
-})("display:flex;flex-direction:column;gap:", ({
-  theme
-}) => theme.space['2'], ";");
-const Body = ({
-  children
-}) => jsx(StyledBody, {
-  role: "rowgroup",
-  children: children
-});
-
-export { Body };

package/dist/src/components/List/Cell.js

@@ -1,43 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { forwardRef } from 'react';
-import { jsx } 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 StyledCell = /*#__PURE__*/_styled("div", {
-  target: "e1e6rck40"
-})(process.env.NODE_ENV === "production" ? {
-  name: "humxtf",
-  styles: "display:flex;justify-content:center;flex-direction:column;min-height:60px"
-} : {
-  name: "humxtf",
-  styles: "display:flex;justify-content:center;flex-direction:column;min-height:60px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const Cell = /*#__PURE__*/forwardRef(({
-  children,
-  className,
-  preventClick,
-  'data-testid': dataTestid
-}, ref) => {
-  const handleClick = event => {
-    if (preventClick) {
-      event.stopPropagation();
-    }
-  };
-  const handleKeyDown = event => {
-    if (preventClick) {
-      event.stopPropagation();
-    }
-  };
-  return jsx(StyledCell, {
-    ref: ref,
-    role: "cell",
-    className: className,
-    onClick: handleClick,
-    onKeyDown: handleKeyDown,
-    "data-testid": dataTestid,
-    children: children
-  });
-});
-
-export { Cell };