@ultraviolet/ui 1.51.0 → 1.51.2

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

@@ -0,0 +1,90 @@
+import type { ButtonHTMLAttributes, ReactElement, ReactNode, Ref } from 'react';
+export type DisclosureProps = {
+    visible: boolean;
+};
+type DisclosureElement = ((disclosure: DisclosureProps) => ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>) | (ReactElement<ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: Ref<HTMLButtonElement>;
+});
+type ChildMenuProps = {
+    toggle: () => void;
+};
+/**
+ * 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.
+ */
+export declare const MenuV2: import("react").ForwardRefExoticComponent<{
+    id?: string | undefined;
+    ariaLabel?: string | undefined;
+    children?: ReactNode | (({ toggle }: ChildMenuProps) => ReactNode);
+    className?: string | undefined;
+    disclosure: DisclosureElement;
+    hasArrow?: boolean | undefined;
+    visible?: boolean | undefined;
+    'data-testid'?: string | undefined;
+    maxHeight?: string | undefined;
+    /**
+     * @deprecated: use `size` instead
+     */
+    maxWidth?: string | undefined;
+    /**
+     * By default, the portal target is children container or document.body if children is a function. You can override this
+     * behavior by setting a portalTarget prop.
+     */
+    portalTarget?: HTMLElement | undefined;
+    size?: "large" | "small" | "medium" | undefined;
+    /**
+     * The behavior of the menu when it is opened. If set to `click`, the menu will open when the user clicks on the disclosure.
+     * If set to `hover`, the menu will open when the user hovers over the disclosure.
+     */
+    triggerMethod?: "click" | "hover" | undefined;
+} & Pick<{
+    id?: string | undefined;
+    children: ReactNode | ((renderProps: {
+        className?: string | undefined;
+        onBlur: () => void;
+        onFocus: () => void;
+        onPointerEnter: () => void;
+        onPointerLeave: () => void;
+        ref: import("react").RefObject<HTMLDivElement>;
+    }) => ReactNode);
+    maxWidth?: string | number | undefined;
+    placement?: import("../Popup/helpers").PopupPlacement | undefined;
+    text?: ReactNode;
+    className?: string | undefined;
+    containerFullWidth?: boolean | undefined;
+    visible?: boolean | undefined;
+    innerRef?: Ref<HTMLDivElement | null> | undefined;
+    role?: string | undefined;
+    'data-testid'?: string | undefined;
+    hasArrow?: boolean | undefined;
+    onClose?: (() => void) | undefined;
+    tabIndex?: number | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler | undefined;
+    'aria-haspopup'?: boolean | "menu" | "dialog" | "grid" | "listbox" | "tree" | "false" | "true" | undefined;
+    hideOnClickOutside?: boolean | undefined;
+    debounceDelay?: number | undefined;
+    maxHeight?: string | number | undefined;
+    disableAnimation?: boolean | undefined;
+    portalTarget?: HTMLElement | undefined;
+    dynamicDomRendering?: boolean | undefined;
+} & import("react").RefAttributes<HTMLDivElement>, "placement" | "dynamicDomRendering"> & 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?: ("primary" | "neutral" | "danger") | undefined;
+        active?: boolean | undefined;
+        'data-testid'?: string | undefined;
+    } & import("react").RefAttributes<HTMLElement>>;
+    Group: ({ label, children }: {
+        label: string;
+        children: ReactNode;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/components/MenuV2/index.js

@@ -0,0 +1,124 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { forwardRef, useState, useRef, useId, isValidElement, useImperativeHandle, cloneElement } from "react";
+import { Popup } from "../Popup/index.js";
+import { Stack } from "../Stack/index.js";
+import { Group } from "./Group.js";
+import Item from "./Item.js";
+const SIZES = {
+  small: "180px",
+  medium: "280px",
+  large: "380px"
+};
+const StyledPopup = styled(Popup, {
+  shouldForwardProp: (prop) => !["size"].includes(prop)
+})`
+  background-color: ${({ theme }) => theme.colors.neutral.background};
+  box-shadow: ${({ theme }) => theme.shadows.menu};
+  padding: 0;
+
+  &[data-has-arrow='true'] {
+    &::after {
+      border-color: ${({ theme }) => theme.colors.neutral.background}
+        transparent transparent transparent;
+    }
+  }
+
+  width: ${({ size }) => SIZES[size]};
+  max-width: none;
+  padding: ${({ theme }) => `${theme.space["0.25"]} 0`};
+`;
+const MenuList = styled(Stack)`
+  overflow-y: auto;
+  overflow-x: hidden;
+  &: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};
+  color: ${({ theme }) => theme.colors.neutral.text};
+  border-radius: ${({ theme }) => theme.radii.default};
+  position: relative;
+`;
+const FwdMenu = forwardRef(
+  ({
+    id,
+    ariaLabel = "Menu",
+    children,
+    disclosure,
+    hasArrow = false,
+    placement = "bottom",
+    visible = false,
+    className,
+    "data-testid": dataTestId,
+    maxHeight,
+    maxWidth,
+    portalTarget,
+    size = "small",
+    triggerMethod = "click",
+    dynamicDomRendering
+  }, ref) => {
+    const [isVisible, setIsVisible] = useState(visible);
+    const popupRef = useRef(null);
+    const disclosureRef = useRef(null);
+    const tempId = useId();
+    const finalId = `menu-${id ?? tempId}`;
+    const target = isValidElement(
+      disclosure
+    ) ? disclosure : disclosure({ visible: isVisible });
+    const innerRef = useRef(target);
+    useImperativeHandle(ref, () => innerRef.current);
+    const finalDisclosure = cloneElement(target, {
+      onClick: (event) => {
+        target.props.onClick?.(event);
+        setIsVisible(!isVisible);
+      },
+      "aria-haspopup": "dialog",
+      "aria-expanded": isVisible,
+      // @ts-expect-error not sure how to fix this
+      ref: disclosureRef
+    });
+    return /* @__PURE__ */ jsx(
+      StyledPopup,
+      {
+        debounceDelay: triggerMethod === "hover" ? 250 : 0,
+        hideOnClickOutside: true,
+        "aria-label": ariaLabel,
+        className,
+        visible: triggerMethod === "click" ? isVisible : void 0,
+        placement,
+        hasArrow,
+        "data-has-arrow": hasArrow,
+        role: "dialog",
+        id: finalId,
+        ref: popupRef,
+        onClose: () => setIsVisible(false),
+        tabIndex: -1,
+        maxHeight: maxHeight ?? "480px",
+        maxWidth,
+        size,
+        text: /* @__PURE__ */ jsx(MenuList, { "data-testid": dataTestId, className, role: "menu", children: typeof children === "function" ? children({ toggle: () => setIsVisible(!isVisible) }) : children }),
+        portalTarget,
+        dynamicDomRendering,
+        children: finalDisclosure
+      }
+    );
+  }
+);
+const MenuV2 = Object.assign(FwdMenu, { Item, Group });
+export {
+  MenuV2
+};

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

@@ -0,0 +1,26 @@
+type Strength = {
+    /**
+     * Color to display
+     */
+    color: string;
+    /**
+     * Text to display
+     */
+    text: string;
+};
+type PasswordStrengthMeterProps = {
+    /**
+     * Strength is used for defining different color and text associated with it.
+     */
+    strength: Strength[];
+    title: string;
+    value: number;
+    className?: string;
+    'data-testid'?: string;
+    id?: string;
+};
+/**
+ * Show strength of a password based on different criteria.
+ */
+export declare const Meter: ({ strength, title, value, className, "data-testid": dataTestId, id, }: PasswordStrengthMeterProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Meter/index.js

@@ -0,0 +1,76 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Text } from "../Text/index.js";
+const StyledStrength = styled(Text, {
+  shouldForwardProp: (prop) => !["color"].includes(prop)
+})`
+  float: right;
+  vertical-align: top;
+  color: ${({ strength }) => strength.color};
+`;
+const StyledWrapper = styled.div`
+  background-color: ${({ theme }) => theme.colors.neutral.backgroundDisabled};
+  border-radius: ${({ theme }) => theme.radii.default};
+  height: ${({ theme }) => theme.space["1"]};
+  margin-top: ${({ theme }) => theme.space["1"]};
+  margin-bottom: ${({ theme }) => theme.space["2"]};
+`;
+const StyledMeter = styled.div`
+  border-radius: ${({ theme }) => theme.radii.default};
+  height: 100%;
+  transition: all 0.5s;
+`;
+const Meter = ({
+  strength,
+  title,
+  value,
+  className,
+  "data-testid": dataTestId,
+  id
+}) => {
+  const toValue = (value + 1) / strength.length * 100;
+  const width = `${toValue}%`;
+  const backgroundColor = strength[value]?.color ?? strength[0].color;
+  const text = strength[value]?.text ?? strength[0].text;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-live": "polite",
+      "aria-valuemax": strength.length ?? 0,
+      "aria-valuemin": 0,
+      "aria-valuenow": value,
+      className,
+      "data-testid": dataTestId,
+      id,
+      role: "meter",
+      title,
+      "aria-labelledby": "meter-label",
+      children: [
+        /* @__PURE__ */ jsxs(Text, { id: "meter-label", variant: "bodySmallStrong", as: "p", children: [
+          title,
+          /* @__PURE__ */ jsx(
+            StyledStrength,
+            {
+              as: "span",
+              variant: "bodySmallStrong",
+              strength: strength[value],
+              children: text
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(StyledWrapper, { children: /* @__PURE__ */ jsx(
+          StyledMeter,
+          {
+            style: {
+              backgroundColor,
+              width
+            }
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  Meter
+};

package/dist/components/Modal/Dialog.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { DialogProps } from './types';
+export declare const Dialog: ({ children, open, placement, onClose, hideOnClickOutside, size, id, ariaLabel, className, "data-testid": dataTestId, preventBodyScroll, hideOnEsc, backdropClassName, dialogCss, backdropCss, }: DialogProps) => import("react").ReactPortal | null;

package/dist/components/Modal/Dialog.js

@@ -0,0 +1,197 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useRef, useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { MODAL_WIDTH, MODAL_PLACEMENT } from "./constants.js";
+const StyledBackdrop = styled.div`
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 0;
+  width: 0;
+  overflow: hidden;
+  background-color: ${({ theme }) => theme.colors.overlay};
+  z-index: 1;
+
+  &[data-open='true'] {
+    padding: ${({ theme }) => theme.space["2"]};
+    overflow: auto;
+    display: flex;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+  }
+`;
+const StyledDialog = styled.dialog`
+  background-color: ${({ theme }) => theme.colors.neutral.backgroundWeakElevated};
+  position: relative;
+  border-radius: ${({ theme }) => theme.radii.default};
+  border: 0;
+  padding: ${({ theme }) => theme.space["3"]};
+  width: ${MODAL_WIDTH.medium}px;
+  box-shadow: ${({ theme }) => theme.shadows.modal};
+
+  ${Object.entries(MODAL_WIDTH).map(
+  ([size, value]) => `
+      &[data-size="${size}"] {
+        width: ${value}px;
+      }
+      `
+)}
+
+  ${Object.entries(MODAL_PLACEMENT).map(
+  ([placement, value]) => `
+        &[data-placement="${placement}"] {
+          ${value}
+        }
+        `
+)}
+`;
+const Dialog = ({
+  children,
+  open,
+  placement,
+  onClose,
+  hideOnClickOutside,
+  size,
+  id,
+  ariaLabel,
+  className,
+  "data-testid": dataTestId,
+  preventBodyScroll,
+  hideOnEsc,
+  backdropClassName,
+  dialogCss,
+  backdropCss
+}) => {
+  const containerRef = useRef(document.createElement("div"));
+  const dialogRef = useRef(null);
+  const onCloseRef = useRef(onClose);
+  useEffect(() => {
+    const element = containerRef.current;
+    if (open) {
+      document.body.appendChild(element);
+    }
+    return () => {
+      if (document.body.contains(element)) {
+        document.body.removeChild(element);
+      }
+    };
+  }, [open]);
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
+  useEffect(() => {
+    if (open) {
+      dialogRef.current?.focus();
+    }
+  }, [open]);
+  useEffect(() => {
+    const previousOverflow = document.body.style.overflow;
+    if (open && preventBodyScroll) {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [preventBodyScroll, open]);
+  const stopFocus = useCallback((event) => {
+    event.stopPropagation();
+  }, []);
+  const stopClick = useCallback((event) => {
+    event.stopPropagation();
+  }, []);
+  const handleKeyUp = useCallback(
+    (event) => {
+      event.stopPropagation();
+      if (event.key === "Escape" && hideOnEsc) {
+        event.preventDefault();
+        onCloseRef.current();
+      }
+    },
+    [hideOnEsc]
+  );
+  const handleClose = useCallback(
+    (event) => {
+      event.stopPropagation();
+      if (hideOnClickOutside) {
+        onCloseRef.current();
+      } else {
+        dialogRef.current?.focus();
+      }
+    },
+    [hideOnClickOutside]
+  );
+  const handleFocusTrap = useCallback((event) => {
+    event.stopPropagation();
+    if (event.key === "Escape") {
+      event.preventDefault();
+      return;
+    }
+    const isTabPressed = event.key === "Tab";
+    if (!isTabPressed) {
+      return;
+    }
+    const focusableEls = dialogRef.current?.querySelectorAll(
+      "a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])"
+    ) ?? [];
+    if (focusableEls.length === 0) {
+      event.preventDefault();
+    }
+    const firstFocusableEl = focusableEls[0];
+    const lastFocusableEl = focusableEls[focusableEls.length - 1];
+    if (event.shiftKey) {
+      if (document.activeElement === firstFocusableEl || document.activeElement === dialogRef.current) {
+        lastFocusableEl.focus();
+        event.preventDefault();
+      }
+    } else if (document.activeElement === lastFocusableEl || document.activeElement === dialogRef.current) {
+      firstFocusableEl.focus();
+      event.preventDefault();
+    }
+  }, []);
+  const stopCancel = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  return open ? createPortal(
+    /* @__PURE__ */ jsx(
+      StyledBackdrop,
+      {
+        "data-open": open,
+        onClick: handleClose,
+        className: backdropClassName,
+        css: backdropCss,
+        "data-testid": dataTestId ? `${dataTestId}-backdrop` : void 0,
+        onFocus: stopFocus,
+        children: /* @__PURE__ */ jsx(
+          StyledDialog,
+          {
+            css: dialogCss,
+            onKeyUp: handleKeyUp,
+            onKeyDown: handleFocusTrap,
+            className,
+            id,
+            "data-testid": dataTestId,
+            "aria-label": ariaLabel,
+            "data-placement": placement,
+            "data-size": size,
+            open,
+            onClick: stopClick,
+            onCancel: stopCancel,
+            onClose: stopCancel,
+            "aria-modal": true,
+            ref: dialogRef,
+            tabIndex: 0,
+            children: open ? children : null
+          }
+        )
+      }
+    ),
+    containerRef.current
+  ) : null;
+};
+export {
+  Dialog
+};

package/dist/components/Modal/Disclosure.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { DisclosureProps } from './types';
+export declare const Disclosure: ({ disclosure, handleOpen, visible, handleClose, toggle, id, }: DisclosureProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/dist/{src/components → components}/Modal/Disclosure.js

@@ -1,5 +1,4 @@
-import { useEffect, useMemo, isValidElement, cloneElement, createRef } from 'react';
-
+import { createRef, useEffect, useMemo, isValidElement, cloneElement } from "react";
 const Disclosure = ({
   disclosure,
   handleOpen,
@@ -8,16 +7,16 @@ const Disclosure = ({
   toggle,
   id
 }) => {
-  const disclosureRef = /*#__PURE__*/createRef();
+  const disclosureRef = createRef();
   useEffect(() => {
     const element = disclosureRef.current;
-    element?.addEventListener('click', handleOpen);
+    element?.addEventListener("click", handleOpen);
     return () => {
-      element?.removeEventListener('click', handleOpen);
+      element?.removeEventListener("click", handleOpen);
     };
   }, [handleOpen, disclosureRef]);
   const finalDisclosure = useMemo(() => {
-    if (typeof disclosure === 'function') {
+    if (typeof disclosure === "function") {
       return disclosure({
         visible,
         onClose: handleClose,
@@ -31,14 +30,15 @@ const Disclosure = ({
     }
     return disclosure;
   }, [disclosure, handleOpen, handleClose, id, toggle, visible]);
-  if (! /*#__PURE__*/isValidElement(finalDisclosure)) {
+  if (!isValidElement(finalDisclosure)) {
     return null;
   }
-  return /*#__PURE__*/cloneElement(finalDisclosure, {
+  return cloneElement(finalDisclosure, {
     ref: disclosureRef,
-    'aria-controls': id,
-    'aria-haspopup': 'dialog'
+    "aria-controls": id,
+    "aria-haspopup": "dialog"
   });
 };
-
-export { Disclosure };
+export {
+  Disclosure
+};

package/dist/components/Modal/constants.d.ts

@@ -0,0 +1,3 @@
+import type { ModalPlacement, ModalSize } from './types';
+export declare const MODAL_WIDTH: Record<ModalSize, number>;
+export declare const MODAL_PLACEMENT: Record<ModalPlacement, string>;

package/dist/{src/components → components}/Modal/constants.js

@@ -10,12 +10,12 @@ const MODAL_PLACEMENT = {
     margin: auto;
     margin-bottom: 0;
   `,
-  'bottom-left': `
+  "bottom-left": `
     margin: auto;
     margin-left: 0;
     margin-bottom: 0;
   `,
-  'bottom-right': `
+  "bottom-right": `
     margin: auto;
     margin-right: 0;
     margin-bottom: 0;
@@ -35,16 +35,18 @@ const MODAL_PLACEMENT = {
     margin: auto;
     margin-top: 0px;
   `,
-  'top-left': `
+  "top-left": `
     margin: auto;
     margin-left: 0;
     margin-top: 0;
   `,
-  'top-right': `
+  "top-right": `
     margin: auto;
     margin-right: 0;
     margin-top: 0;
   `
 };
-
-export { MODAL_PLACEMENT, MODAL_WIDTH };
+export {
+  MODAL_PLACEMENT,
+  MODAL_WIDTH
+};

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

@@ -0,0 +1,42 @@
+import type { ReactElement, ReactNode } from 'react';
+import type React from 'react';
+import type { ModalPlacement, ModalSize, ModalState } from './types';
+export type ModalProps = {
+    id?: string;
+    hideOnEsc?: boolean;
+    hideOnClickOutside?: boolean;
+    preventBodyScroll?: boolean;
+    ariaLabel?: string;
+    disclosure?: ReactElement | ((state: ModalState) => ReactElement);
+    isClosable?: boolean;
+    onClose?: () => void;
+    onBeforeClose?: () => Promise<void> | void;
+    open?: boolean;
+    /**
+     * @deprecated You should use open prop instead
+     */
+    opened?: boolean;
+    placement?: ModalPlacement;
+    size?: ModalSize;
+    /**
+     * @deprecated You should use size prop instead
+     */
+    width?: ModalSize;
+    children: ReactNode | ((args: ModalState) => ReactNode);
+    className?: string;
+    'data-testid'?: string;
+    backdropClassName?: string;
+    /**
+     * @deprecated You should use backdropClassName instead
+     */
+    customDialogBackdropStyles?: React.JSX.IntrinsicAttributes['css'];
+    /**
+     * @deprecated You should use className instead
+     */
+    customDialogStyles?: React.JSX.IntrinsicAttributes['css'];
+};
+/**
+ * Modal is a component that allows you to display content on top of other content.
+ * It is often used to display a dialog with additional information or to ask for a confirmation.
+ */
+export declare const Modal: ({ ariaLabel, id, children, disclosure, hideOnClickOutside, hideOnEsc, isClosable, onClose, onBeforeClose, open, opened, placement, preventBodyScroll, size, className, "data-testid": dataTestId, backdropClassName, width, customDialogStyles, customDialogBackdropStyles, }: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element;