@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/components/Loader/index.js

@@ -0,0 +1,98 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useTheme, css } from "@emotion/react";
+import styled from "@emotion/styled";
+const VIEWBOX_WIDTH = 100;
+const VIEWBOX_HEIGHT = 100;
+const HALF_VIEWBOX_WIDTH = VIEWBOX_WIDTH / 2;
+const HALF_VIEWBOX_HEIGHT = VIEWBOX_HEIGHT / 2;
+const StyledSvg = styled("svg", {
+  shouldForwardProp: (prop) => !["active"].includes(prop)
+})`
+  ${({ active }) => active ? `
+        animation: spin 0.75s linear infinite;
+
+        @keyframes spin {
+          from {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(360deg);
+          }
+        }
+      ` : ""}
+`;
+const Text = styled("text", {
+  shouldForwardProp: (prop) => !["color"].includes(prop)
+})`
+  fill: ${({ theme, color }) => theme.colors[color]?.backgroundStrong || color};
+
+  font-size: 26px;
+  dominant-baseline: middle;
+  text-anchor: middle;
+`;
+const Loader = ({
+  percentage = 20,
+  text,
+  size = 40,
+  strokeWidth = 16,
+  color = "primary",
+  trailColor = "neutral",
+  active = false,
+  label = "Loading"
+}) => {
+  const theme = useTheme();
+  const circleRadius = HALF_VIEWBOX_HEIGHT - strokeWidth / 2;
+  const boundedPercentage = Math.min(Math.max(percentage, 0), 100) / 100;
+  const circleDiameter = Math.PI * 2 * circleRadius;
+  return /* @__PURE__ */ jsxs(
+    StyledSvg,
+    {
+      active,
+      role: "progressbar",
+      "aria-label": label,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": percentage,
+      "aria-valuetext": `${percentage}%`,
+      viewBox: `0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`,
+      style: {
+        height: typeof size === "string" ? size : `${size}px`,
+        width: typeof size === "string" ? size : `${size}px`
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: HALF_VIEWBOX_WIDTH,
+            cy: HALF_VIEWBOX_HEIGHT,
+            r: circleRadius,
+            fill: "none",
+            strokeWidth,
+            stroke: theme.colors[trailColor]?.border || trailColor
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            css: css`
+          transition: stroke-dashoffset 0.5s ease 0s;
+        `,
+            cx: HALF_VIEWBOX_WIDTH,
+            cy: HALF_VIEWBOX_HEIGHT,
+            r: circleRadius,
+            fill: "none",
+            strokeWidth,
+            strokeDasharray: circleDiameter,
+            strokeDashoffset: (1 - boundedPercentage) * circleDiameter,
+            stroke: theme.colors[color]?.backgroundStrong || color,
+            strokeLinecap: "round"
+          }
+        ),
+        text ? /* @__PURE__ */ jsx(Text, { color, x: HALF_VIEWBOX_WIDTH, y: HALF_VIEWBOX_HEIGHT, children: text }) : null
+      ]
+    }
+  );
+};
+export {
+  Loader
+};

package/dist/components/Menu/Item.d.ts

@@ -0,0 +1,15 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+type MenuItemSentiment = 'neutral' | 'danger';
+type ItemProps = {
+    href?: string | undefined;
+    disabled?: boolean | undefined;
+    tooltip?: string | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+    onClick?: MouseEventHandler<HTMLElement> | undefined;
+    borderless?: boolean;
+    sentiment?: MenuItemSentiment;
+    'data-testid'?: string;
+};
+declare const Item: import("react").ForwardRefExoticComponent<ItemProps & import("react").RefAttributes<HTMLElement>>;
+export default Item;

package/dist/components/Menu/Item.js

@@ -0,0 +1,101 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { forwardRef } from "react";
+import { Tooltip } from "../Tooltip/index.js";
+const itemCoreStyle = ({
+  theme,
+  borderless,
+  sentiment,
+  disabled
+}) => `
+  display: inline-block;
+  font-size: ${theme.typography.bodySmall.fontSize};
+  line-height: ${theme.typography.bodySmall.lineHeight};
+  font-weight: inherit;
+  padding: ${`${theme.space["0.5"]} ${theme.space["1"]}`};
+  border: none;
+  ${borderless ? "" : `border-bottom: 1px solid ${theme.colors.neutral.border};`}
+  cursor: pointer;
+  min-width: 110px;
+
+  color: ${theme.colors[sentiment][disabled ? "textDisabled" : "text"]};
+  svg {
+    fill: ${theme.colors[sentiment][disabled ? "textDisabled" : "text"]};
+  }
+
+  ${disabled ? `
+        cursor: not-allowed;
+      ` : `
+          &:hover,
+          &:focus {
+            color: ${theme.colors[sentiment].textHover};
+            svg {
+              fill: ${theme.colors[sentiment].textHover};
+            }
+          }`}
+  `;
+const StyledItem = styled("button", {
+  shouldForwardProp: (prop) => !["borderless", "sentiment"].includes(prop)
+})`
+  ${({ theme, borderless, sentiment, disabled }) => itemCoreStyle({ theme, borderless, sentiment, disabled })}
+  background: none;
+`;
+const StyledLinkItem = styled("a", {
+  shouldForwardProp: (prop) => !["borderless", "sentiment"].includes(prop)
+})`
+  ${({ theme, borderless, sentiment, disabled }) => itemCoreStyle({ theme, borderless, sentiment, disabled })}
+  text-decoration: none;
+
+  &:focus {
+    text-decoration: none;
+  }
+`;
+const Item = forwardRef(
+  ({
+    borderless = false,
+    disabled = false,
+    onClick,
+    sentiment = "neutral",
+    href,
+    children,
+    tooltip,
+    className,
+    "data-testid": dataTestId
+  }, ref) => {
+    if (href && !disabled) {
+      return /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsx(
+        StyledLinkItem,
+        {
+          borderless: true,
+          href,
+          ref,
+          onClick: disabled ? void 0 : onClick,
+          role: "menuitem",
+          disabled,
+          sentiment,
+          className,
+          "data-testid": dataTestId,
+          children
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsx(
+      StyledItem,
+      {
+        type: "button",
+        ref,
+        role: "menuitem",
+        disabled,
+        onClick,
+        borderless,
+        sentiment,
+        className,
+        "data-testid": dataTestId,
+        children
+      }
+    ) });
+  }
+);
+export {
+  Item as default
+};

package/dist/components/Menu/index.d.ts

@@ -0,0 +1,49 @@
+import type { Theme } from '@emotion/react';
+import type { ButtonHTMLAttributes, ReactElement, ReactNode, Ref } from 'react';
+import type { PopoverStateReturn } from 'reakit/Popover';
+export type DisclosureProps = Partial<PopoverStateReturn>;
+type DisclosureElement = ((popover: Partial<PopoverStateReturn>) => ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>) | (ReactElement<ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: Ref<HTMLButtonElement>;
+});
+declare const arrowPlacementStyles: {
+    readonly bottom: (theme: Theme) => import("@emotion/react").SerializedStyles;
+    readonly 'bottom-end': (theme: Theme) => import("@emotion/react").SerializedStyles;
+    readonly 'bottom-start': (theme: Theme) => import("@emotion/react").SerializedStyles;
+    readonly top: (theme: Theme) => import("@emotion/react").SerializedStyles;
+    readonly 'top-end': (theme: Theme) => import("@emotion/react").SerializedStyles;
+    readonly 'top-start': (theme: Theme) => import("@emotion/react").SerializedStyles;
+};
+type ArrowPlacement = keyof typeof arrowPlacementStyles;
+export declare const arrowPlacements: ("bottom" | "top" | "bottom-end" | "bottom-start" | "top-end" | "top-start")[];
+type MenuProps = {
+    ariaLabel?: string;
+    id?: string;
+    placement?: ArrowPlacement;
+    children?: ((props: PopoverStateReturn) => ReactNode) | ReactNode;
+    className?: string;
+    disclosure: DisclosureElement;
+    hasArrow?: boolean;
+    visible?: boolean;
+    'data-testid'?: string;
+};
+/**
+ * A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.
+ * A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a
+ * sub menu, or by invoking a command, such as `Shift + F10` on Windows, that opens a context specific menu.
+ * When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu.
+ * @deprecated use MenuV2 component instead
+ */
+export declare const Menu: import("react").ForwardRefExoticComponent<MenuProps & import("react").RefAttributes<HTMLButtonElement>> & {
+    Item: import("react").ForwardRefExoticComponent<{
+        href?: string | undefined;
+        disabled?: boolean | undefined;
+        tooltip?: string | undefined;
+        className?: string | undefined;
+        children: ReactNode;
+        onClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
+        borderless?: boolean | undefined;
+        sentiment?: ("neutral" | "danger") | undefined;
+        'data-testid'?: string | undefined;
+    } & import("react").RefAttributes<HTMLElement>>;
+};
+export {};

package/dist/components/Menu/index.js

@@ -0,0 +1,182 @@
+import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { forwardRef, isValidElement, useRef, useImperativeHandle, cloneElement } from "react";
+import { Popover, usePopoverState, PopoverDisclosure } from "reakit/Popover";
+import { Portal } from "reakit/Portal";
+import Item from "./Item.js";
+const StyledPopover = styled(Popover)`
+  border-radius: ${({ theme }) => theme.radii.default};
+  background-color: ${({ theme }) => theme.colors.neutral.background};
+  color: ${({ theme }) => theme.colors.neutral.text};
+  box-shadow: ${({ theme }) => theme.shadows.dropdown};
+`;
+const bottomStyles = (theme) => css`
+  box-shadow: ${theme.shadows.menu};
+  &:after,
+  &:before {
+    bottom: 100%;
+  }
+  &:after {
+    border-bottom-color: ${theme.colors.neutral.background};
+  }
+  &:before {
+    border-bottom-color: transparent;
+  }
+`;
+const topStyles = (theme) => css`
+  box-shadow: ${theme.shadows.menu};
+  &:after,
+  &:before {
+    top: 100%;
+  }
+  &:after {
+    border-top-color: ${theme.colors.neutral.background};
+  }
+  &:before {
+    border-top-color: rgba(165, 165, 205, 0.4);
+  }
+`;
+const endStyles = css`
+  &:after {
+    margin-left: -9px;
+    right: 24px;
+  }
+  &:before {
+    margin-left: -11px;
+    right: 24px;
+  }
+`;
+const startStyles = css`
+  &:after {
+    margin-right: -9px;
+    left: 24px;
+  }
+  &:before {
+    margin-right: -11px;
+    left: 24px;
+  }
+`;
+const centerStyles = css`
+  &:after,
+  &:before {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+`;
+const arrowPlacementStyles = {
+  bottom: (theme) => css`
+    ${centerStyles};
+    ${bottomStyles(theme)};
+  `,
+  "bottom-end": (theme) => css`
+    ${endStyles};
+    ${bottomStyles(theme)};
+  `,
+  "bottom-start": (theme) => css`
+    ${startStyles};
+    ${bottomStyles(theme)};
+  `,
+  top: (theme) => css`
+    ${centerStyles};
+    ${topStyles(theme)};
+  `,
+  "top-end": (theme) => css`
+    ${endStyles};
+    ${topStyles(theme)};
+  `,
+  "top-start": (theme) => css`
+    ${startStyles};
+    ${topStyles(theme)};
+  `
+};
+const MenuList = styled.div`
+  &:after,
+  &:before {
+    border: solid transparent;
+    border-width: 9px;
+    content: ' ';
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  &:after {
+    border-color: transparent;
+  }
+  &:before {
+    border-color: transparent;
+  }
+  background-color: ${({ theme }) => theme.colors.neutral.backgroundWeakElevated};
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: center;
+  color: ${({ theme }) => theme.colors.neutral.text};
+  border-radius: ${({ theme }) => theme.radii.default};
+  position: relative;
+  ${({ placement, theme, hasArrow }) => hasArrow && arrowPlacementStyles[placement]?.(theme)}
+`;
+const FwdMenu = forwardRef(
+  ({
+    ariaLabel = "Menu",
+    id,
+    children,
+    disclosure,
+    hasArrow = true,
+    placement = "bottom",
+    visible = false,
+    className,
+    "data-testid": dataTestId
+  }, ref) => {
+    const popover = usePopoverState({
+      baseId: id,
+      placement,
+      visible
+    });
+    const target = isValidElement(
+      disclosure
+    ) ? disclosure : disclosure(popover);
+    const innerRef = useRef(target);
+    useImperativeHandle(ref, () => innerRef.current);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      disclosure && // @ts-expect-error reakit types are invalid, no need to pass as something, default is div
+      /* @__PURE__ */ jsx(
+        PopoverDisclosure,
+        {
+          ...popover,
+          onClick: (event) => {
+            target?.props?.onClick?.(event);
+          },
+          ref: innerRef,
+          children: (disclosureProps) => cloneElement(target, disclosureProps)
+        }
+      ),
+      /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+        StyledPopover,
+        {
+          ...popover,
+          "aria-label": ariaLabel,
+          className,
+          /* Required to avoid loading menu content if not visible */
+          children: popover.visible ? /* @__PURE__ */ jsx(
+            MenuList,
+            {
+              "data-testid": dataTestId,
+              className,
+              hasArrow,
+              placement: popover.placement,
+              role: "menu",
+              children: typeof children === "function" ? children(popover) : children
+            }
+          ) : null
+        }
+      ) })
+    ] });
+  }
+);
+const Menu = Object.assign(FwdMenu, { Item });
+export {
+  Menu
+};

package/dist/components/MenuV2/Group.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+type GroupProps = {
+    label: string;
+    children: ReactNode;
+};
+export declare const Group: ({ label, children }: GroupProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/MenuV2/Group.js

@@ -0,0 +1,23 @@
+import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Text } from "../Text/index.js";
+const Container = styled.span`
+  padding: ${({ theme }) => `${theme.space["0.5"]} ${theme.space["1.5"]}`};
+  text-align: left;
+`;
+const Group = ({ label, children }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(
+    Text,
+    {
+      variant: "captionStrong",
+      as: "span",
+      prominence: "weak",
+      sentiment: "neutral",
+      children: label
+    }
+  ) }),
+  children
+] });
+export {
+  Group
+};

package/dist/components/MenuV2/Item.d.ts

@@ -0,0 +1,16 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+type MenuItemSentiment = 'neutral' | 'primary' | 'danger';
+type ItemProps = {
+    href?: string | undefined;
+    disabled?: boolean | undefined;
+    tooltip?: string | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+    onClick?: MouseEventHandler<HTMLElement> | undefined;
+    borderless?: boolean;
+    sentiment?: MenuItemSentiment;
+    active?: boolean;
+    'data-testid'?: string;
+};
+declare const Item: import("react").ForwardRefExoticComponent<ItemProps & import("react").RefAttributes<HTMLElement>>;
+export default Item;

package/dist/components/MenuV2/Item.js

@@ -0,0 +1,120 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { forwardRef } from "react";
+import { Tooltip } from "../Tooltip/index.js";
+const ANIMATION_DURATION = 200;
+const itemCoreStyle = ({
+  theme,
+  sentiment,
+  disabled
+}) => `
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  min-height: 32px;
+  max-height: 44px;
+  font-size: ${theme.typography.bodySmall.fontSize};
+  line-height: ${theme.typography.bodySmall.lineHeight};
+  font-weight: inherit;
+  padding: ${`${theme.space["0.5"]} ${theme.space["1"]}`};
+  border: none;
+  cursor: pointer;
+  min-width: 110px;
+  width: 100%;
+  border-radius: ${theme.radii.default};
+  transition: background-color ${ANIMATION_DURATION}ms, color ${ANIMATION_DURATION}ms;
+
+  color: ${theme.colors[sentiment][disabled ? "textDisabled" : "text"]};
+  svg {
+    fill: ${theme.colors[sentiment][disabled ? "textDisabled" : "text"]};
+  }
+
+  ${disabled ? `
+        cursor: not-allowed;
+      ` : `
+          &:hover,
+          &:focus, &[data-active='true'] {
+            background-color: ${theme.colors[sentiment].backgroundHover};
+            color: ${theme.colors[sentiment].textHover};
+            svg {
+              fill: ${theme.colors[sentiment].textHover};
+            }
+          }`}
+  `;
+const Container = styled("div", {
+  shouldForwardProp: (prop) => !["borderless"].includes(prop)
+})`
+  ${({ theme, borderless }) => borderless ? "" : `border-bottom: 1px solid ${theme.colors.neutral.border};`}
+  padding: ${({ theme, borderless }) => `${borderless ? theme.space["0.25"] : theme.space["0.5"]} ${theme.space["0.5"]}`};
+  &:last-child {
+    border: none;
+  }
+`;
+const StyledItem = styled("button", {
+  shouldForwardProp: (prop) => !["borderless", "sentiment"].includes(prop)
+})`
+  ${({ theme, borderless, sentiment, disabled }) => itemCoreStyle({ theme, borderless, sentiment, disabled })}
+  background: none;
+`;
+const StyledLinkItem = styled("a", {
+  shouldForwardProp: (prop) => !["borderless", "sentiment"].includes(prop)
+})`
+  ${({ theme, borderless, sentiment, disabled }) => itemCoreStyle({ theme, borderless, sentiment, disabled })}
+  text-decoration: none;
+
+  &:focus {
+    text-decoration: none;
+  }
+`;
+const Item = forwardRef(
+  ({
+    borderless = false,
+    disabled = false,
+    onClick,
+    sentiment = "neutral",
+    href,
+    children,
+    tooltip,
+    active,
+    className,
+    "data-testid": dataTestId
+  }, ref) => {
+    if (href && !disabled) {
+      return /* @__PURE__ */ jsx(Container, { borderless, children: /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsx(
+        StyledLinkItem,
+        {
+          "data-active": active,
+          borderless: true,
+          href,
+          ref,
+          onClick: disabled ? void 0 : onClick,
+          role: "menuitem",
+          disabled,
+          sentiment,
+          className,
+          "data-testid": dataTestId,
+          children
+        }
+      ) }) });
+    }
+    return /* @__PURE__ */ jsx(Container, { borderless, children: /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsx(
+      StyledItem,
+      {
+        type: "button",
+        ref,
+        role: "menuitem",
+        disabled,
+        onClick,
+        borderless,
+        sentiment,
+        className,
+        "data-testid": dataTestId,
+        "data-active": active,
+        children
+      }
+    ) }) });
+  }
+);
+export {
+  Item as default
+};