@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/components/Tabs/TabMenu.js

@@ -0,0 +1,63 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Icon } from "@ultraviolet/icons";
+import { forwardRef } from "react";
+import { MenuV2 } from "../MenuV2/index.js";
+import { StyledTabButton } from "./Tab.js";
+const ArrowIcon = styled(Icon)``;
+const StyledMenu = styled(StyledTabButton)`
+  ${ArrowIcon} {
+    color: inherit;
+    margin-left: ${({ theme }) => theme.space["1"]};
+    transition: 300ms transform ease-out;
+  }
+
+  &[aria-expanded='true'] ${ArrowIcon} {
+    transform: rotate(-180deg);
+  }
+`;
+const StyledPositioningWrapper = styled.div`
+  display: flex;
+  position: sticky;
+  top: 0;
+  bottom: 0;
+  right: 0;
+`;
+const TabMenu = forwardRef(
+  ({
+    children,
+    disclosure,
+    visible,
+    id,
+    disabled,
+    className,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(StyledPositioningWrapper, { children: /* @__PURE__ */ jsx(
+    MenuV2,
+    {
+      visible,
+      id,
+      ref,
+      portalTarget: document.body,
+      disclosure: /* @__PURE__ */ jsxs(
+        StyledMenu,
+        {
+          role: "tab",
+          "aria-disabled": disabled ?? "false",
+          disabled,
+          "aria-haspopup": "menu",
+          className,
+          ...props,
+          children: [
+            disclosure,
+            /* @__PURE__ */ jsx(ArrowIcon, { name: "arrow-down" })
+          ]
+        }
+      ),
+      children
+    }
+  ) })
+);
+export {
+  TabMenu
+};

package/dist/components/Tabs/TabMenuItem.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react';
+declare const StyledMenuItem: import("@emotion/styled").StyledComponent<{
+    href?: string | undefined;
+    disabled?: boolean | undefined;
+    tooltip?: string | undefined;
+    className?: string | undefined;
+    children: import("react").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> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+type TabMenuItemProps = {
+    value?: string | number;
+} & ComponentProps<typeof StyledMenuItem>;
+export declare const TabMenuItem: ({ value, children, onClick, ...props }: TabMenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Tabs/TabMenuItem.js

@@ -0,0 +1,39 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useMemo } from "react";
+import Item from "../MenuV2/Item.js";
+import { useTabsContext } from "./TabsContext.js";
+const StyledMenuItem = styled(Item)`
+  &[aria-selected='true'] {
+    color: ${({ theme }) => theme.colors.primary.text};
+  }
+`;
+const TabMenuItem = ({
+  value,
+  children,
+  onClick,
+  ...props
+}) => {
+  const { selected, onChange } = useTabsContext();
+  const isSelected = useMemo(
+    () => value !== void 0 && selected === value,
+    [value, selected]
+  );
+  return /* @__PURE__ */ jsx(
+    StyledMenuItem,
+    {
+      onClick: (event) => {
+        if (value !== void 0) {
+          onChange(value);
+        }
+        onClick?.(event);
+      },
+      "aria-selected": isSelected,
+      ...props,
+      children
+    }
+  );
+};
+export {
+  TabMenuItem
+};

package/dist/components/Tabs/TabsContext.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type TabsContextValue = {
+    selected?: string | number;
+    onChange: (nameOrIndex: string | number) => void;
+};
+export declare const TabsContext: import("react").Context<TabsContextValue>;
+export declare const useTabsContext: () => TabsContextValue;
+export {};

package/dist/components/Tabs/TabsContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+const TabsContext = createContext(
+  {}
+);
+const useTabsContext = () => useContext(TabsContext);
+export {
+  TabsContext,
+  useTabsContext
+};

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

@@ -0,0 +1,50 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+type TabsProps = {
+    selected?: string | number;
+    onChange: (data: string | number) => void;
+    moreDisclosure?: ReactNode;
+    className?: string;
+    'data-testid'?: string;
+} & Omit<HTMLAttributes<HTMLElement>, 'onChange' | 'role'>;
+/**
+ * Tabs component is used to display a set of tabs with a single tab selected at a time.
+ */
+export declare const Tabs: {
+    ({ children, onChange, moreDisclosure, selected, className, "data-testid": dataTestId, ...props }: TabsProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    Tab: import("react").ForwardRefExoticComponent<Omit<{
+        as?: import("react").ElementType | undefined;
+        badge?: ReactNode;
+        children?: ReactNode;
+        className?: string | undefined;
+        counter?: string | number | undefined;
+        disabled?: boolean | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
+        onKeyDown?: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+        subtitle?: string | undefined;
+        tooltip?: string | undefined;
+        value?: string | number | undefined;
+    } & Omit<any, "tooltip" | "children" | "role" | "className" | "as" | "disabled" | "value" | "badge" | "counter">, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    Menu: import("react").ForwardRefExoticComponent<{
+        children: ReactNode;
+        disclosure: ReactNode;
+        visible?: boolean | undefined;
+        id?: string | undefined;
+    } & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "aria-disabled"> & import("react").RefAttributes<HTMLButtonElement>>;
+    MenuItem: ({ value, children, onClick, ...props }: {
+        value?: string | number | undefined;
+    } & {
+        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> & {
+        theme?: import("@emotion/react").Theme | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/components/Tabs/index.js

@@ -0,0 +1,137 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useRef, useState, useMemo, useEffect, Children, isValidElement, cloneElement } from "react";
+import { StyledTabButton, Tab } from "./Tab.js";
+import { TabMenu } from "./TabMenu.js";
+import { TabMenuItem } from "./TabMenuItem.js";
+import { TabsContext } from "./TabsContext.js";
+const MenuContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  ${StyledTabButton} {
+    font-size: ${({ theme }) => theme.typography.bodySmall.fontSize};
+    line-height: ${({ theme }) => theme.typography.bodySmall.lineHeight};
+    font-weight: inherit;
+    padding: ${({ theme }) => `${theme.space["1"]} ${theme.space["2"]}`};
+    border-bottom-width: 1.5px;
+    width: 100%;
+    cursor: pointer;
+    min-width: 110px;
+    background-color: transparent;
+    &[aria-disabled='true'],
+    &:disabled {
+      cursor: not-allowed;
+      filter: grayscale(1) opacity(50%);
+    }
+  }
+`;
+const StyledTabMenu = styled(TabMenu)`
+  position: sticky;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: ${({ theme }) => theme.colors.neutral.background};
+  box-shadow: ${({ theme }) => theme.shadows.menu};
+`;
+const TabsContainer = styled.div`
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: scroll;
+  position: relative;
+  z-index: 0;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+
+  &::after {
+    z-index: -1;
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: ${({ theme }) => theme.colors.neutral.border};
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+const SHADOW_THRESHOLD = 10;
+const Tabs = ({
+  children = null,
+  onChange,
+  moreDisclosure = "More",
+  selected,
+  className,
+  "data-testid": dataTestId,
+  ...props
+}) => {
+  const tabsRef = useRef({});
+  const moreStaticRef = useRef(null);
+  const [displayMore, setDisplayMore] = useState(false);
+  const value = useMemo(
+    () => ({
+      onChange,
+      selected
+    }),
+    [selected, onChange]
+  );
+  useEffect(() => {
+    setDisplayMore(tabsRef.current.scrollWidth > tabsRef.current.clientWidth);
+  }, [children]);
+  useEffect(() => {
+    const tab = tabsRef.current.querySelector(
+      `[role='tab'][aria-selected='true']`
+    );
+    if (tab && tabsRef.current.scrollTo) {
+      tabsRef.current.scrollTo({ left: tab.offsetLeft, behavior: "smooth" });
+    }
+  }, [selected]);
+  useEffect(() => {
+    const element = tabsRef.current;
+    const moreElement = moreStaticRef.current;
+    const handler = () => {
+      if (moreElement?.style) {
+        moreElement.style.boxShadow = element.scrollLeft + SHADOW_THRESHOLD > element.scrollWidth - element.clientWidth ? "none" : "";
+      }
+    };
+    if (displayMore) {
+      element.addEventListener("scroll", handler);
+    }
+    return () => {
+      if (displayMore)
+        element.removeEventListener("scroll", handler);
+    };
+  }, [displayMore]);
+  const menuItemChildren = Children.map(children, (child) => {
+    if (isValidElement(child)) {
+      return cloneElement(child, {
+        ...child.props,
+        subtitle: null
+      });
+    }
+    return null;
+  });
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value, children: /* @__PURE__ */ jsxs(
+    TabsContainer,
+    {
+      ref: tabsRef,
+      role: "tablist",
+      className,
+      "data-testid": dataTestId,
+      ...props,
+      children: [
+        children,
+        displayMore ? /* @__PURE__ */ jsx(StyledTabMenu, { ref: moreStaticRef, disclosure: moreDisclosure, children: /* @__PURE__ */ jsx(MenuContainer, { children: menuItemChildren }) }) : null
+      ]
+    }
+  ) });
+};
+Tabs.Tab = Tab;
+Tabs.Menu = TabMenu;
+Tabs.MenuItem = TabMenuItem;
+export {
+  Tabs
+};

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

@@ -0,0 +1,26 @@
+import { Icon } from '@ultraviolet/icons';
+import type { ComponentProps, MouseEventHandler, ReactNode } from 'react';
+import type { Color } from '../../theme';
+type IconName = ComponentProps<typeof Icon>['name'];
+type TagProps = {
+    isLoading?: boolean;
+    onClose?: MouseEventHandler<HTMLButtonElement>;
+    sentiment?: Color;
+    disabled?: boolean;
+    /**
+     * Defines icon to display on left side of badge. **Only available on medium and large sizes**.
+     */
+    icon?: IconName;
+    copiable?: boolean;
+    copyText?: string;
+    copiedText?: string;
+    className?: string;
+    children: ReactNode;
+    'data-testid'?: string;
+};
+/**
+ * Tag component is used to display a short text description of an item. It can be used to display a category
+ * or any other metadata.
+ */
+export declare const Tag: ({ children, isLoading, onClose, icon, copiable, copyText, copiedText, disabled, sentiment, className, "data-testid": dataTestId, }: TagProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Tag/index.js

@@ -0,0 +1,153 @@
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Icon } from "@ultraviolet/icons";
+import useClipboard from "react-use-clipboard";
+import { Button } from "../Button/index.js";
+import { Loader } from "../Loader/index.js";
+import { Text } from "../Text/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+const COPY_DURATION = 2500;
+const StyledContainer = styled("span", {
+  shouldForwardProp: (prop) => !["sentiment", "copiable"].includes(prop)
+})`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: ${({ theme }) => theme.radii.default};
+  padding: 0 ${({ theme }) => theme.space["1"]};
+  gap: ${({ theme }) => theme.space["1"]};
+  width: fit-content;
+  height: 24px;
+  ${({ copiable, theme }) => copiable && `
+    &:hover, &:active {
+      cursor: pointer;
+      background: ${theme.colors.neutral.backgroundWeakHover};
+      border-color: ${theme.colors.neutral.borderStrongHover};
+    }
+
+    &:active {
+      box-shadow: ${theme.shadows.focusNeutral};
+    }
+  `}
+
+  ${({ sentiment, theme }) => {
+  if (sentiment === "disabled") {
+    return `
+      color: ${theme.colors.neutral.textDisabled};
+      background: ${theme.colors.neutral.backgroundDisabled};
+      border: solid 1px ${theme.colors.neutral.borderDisabled};
+      cursor: not-allowed
+
+    `;
+  }
+  if (sentiment === "neutral") {
+    return `
+      color: ${theme.colors.neutral.text};
+      background: ${theme.colors.neutral.background};
+      border: solid 1px ${theme.colors.neutral.border};
+    `;
+  }
+  return `
+      color: ${theme.colors[sentiment].text};
+      background: ${theme.colors[sentiment].background};
+      border: solid 1px ${theme.colors[sentiment].background};
+    `;
+}}
+`;
+const StyledText = styled(Text)`
+  max-width: 232px;
+`;
+const StyledCloseButton = styled(Button)`
+  width: fit-content;
+  height: fit-content;
+  padding: 2px;
+`;
+const TagInner = ({
+  children,
+  isLoading = false,
+  onClose,
+  icon,
+  disabled = false
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: 16 }) : null,
+  /* @__PURE__ */ jsx(StyledText, { as: "span", variant: "caption", oneLine: true, "aria-disabled": disabled, children }),
+  onClose && !isLoading ? /* @__PURE__ */ jsx(
+    StyledCloseButton,
+    {
+      onClick: onClose,
+      disabled,
+      "aria-label": "Close tag",
+      "data-testid": "close-tag",
+      variant: "ghost",
+      sentiment: "neutral",
+      icon: "close",
+      size: "small"
+    }
+  ) : null,
+  isLoading ? /* @__PURE__ */ jsx(Loader, { active: true, size: 16 }) : null
+] });
+const Tag = ({
+  children,
+  isLoading,
+  onClose,
+  icon,
+  copiable = false,
+  copyText = "Copy",
+  copiedText = "Copied!",
+  disabled,
+  sentiment = "neutral",
+  className,
+  "data-testid": dataTestId
+}) => {
+  const [isCopied, setCopied] = useClipboard(
+    typeof children === "string" ? children : "",
+    {
+      successDuration: COPY_DURATION
+    }
+  );
+  if (copiable && !disabled) {
+    const Container = StyledContainer.withComponent("button");
+    return /* @__PURE__ */ jsx(Tooltip, { text: isCopied ? copiedText : copyText, children: /* @__PURE__ */ jsx(
+      Container,
+      {
+        sentiment: disabled ? "disabled" : sentiment,
+        copiable: true,
+        onClick: setCopied,
+        className,
+        "data-testid": dataTestId,
+        children: /* @__PURE__ */ jsx(
+          TagInner,
+          {
+            isLoading,
+            onClose,
+            icon,
+            disabled,
+            children
+          }
+        )
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    StyledContainer,
+    {
+      sentiment: disabled ? "disabled" : sentiment,
+      className,
+      "data-testid": dataTestId,
+      children: /* @__PURE__ */ jsx(
+        TagInner,
+        {
+          isLoading,
+          onClose,
+          icon,
+          disabled,
+          children
+        }
+      )
+    }
+  );
+};
+export {
+  Tag
+};

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

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react';
+export declare const TAGINPUT_SIZE_PADDING: {
+    readonly large: "1.5";
+    readonly medium: "1";
+    readonly small: "0.5";
+};
+type TagInputSize = keyof typeof TAGINPUT_SIZE_PADDING;
+type TagInputProp = (string | {
+    label: string;
+    index: string;
+})[];
+type TagInputProps = {
+    disabled?: boolean;
+    id?: string;
+    /**
+     * @deprecated this prop has no more effect
+     */
+    manualInput?: boolean;
+    name?: string;
+    onChange?: (tags: string[]) => void;
+    /**
+     * @deprecated this prop has no more effect
+     */
+    onChangeError?: (error: Error | string) => void;
+    placeholder?: string;
+    /**
+     * @deprecated use `value` property instead, both properties work the same way
+     */
+    tags?: TagInputProp;
+    value?: TagInputProp;
+    /**
+     * @deprecated there is only one variant now, this prop has no more effect
+     */
+    variant?: string;
+    className?: string;
+    'data-testid'?: string;
+    label?: string;
+    /**
+     * Label description displayed right next to the label. It allows you to customize the label content.
+     */
+    labelDescription?: ReactNode;
+    required?: boolean;
+    size?: TagInputSize;
+    error?: string;
+    success?: string | boolean;
+    helper?: ReactNode;
+    readOnly?: boolean;
+    tooltip?: string;
+    clearable?: boolean;
+};
+/**
+ * TagInput is a component that allows users to input tags.
+ */
+export declare const TagInput: ({ disabled, id, name, onChange, placeholder, tags, value, className, "data-testid": dataTestId, label, labelDescription, required, size, error, success, helper, readOnly, tooltip, clearable, }: TagInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};