@ultraviolet/ui 1.51.1 → 1.51.2

package/dist/components/TagInput/index.js

@@ -0,0 +1,316 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Icon } from "@ultraviolet/icons";
+import { useState, useId, useEffect, useRef, useMemo } from "react";
+import { Button } from "../Button/index.js";
+import { Stack } from "../Stack/index.js";
+import { Tag } from "../Tag/index.js";
+import { Text } from "../Text/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+import { getUUID } from "../../utils/ids.js";
+const TAGINPUT_SIZE_PADDING = {
+  large: "1.5",
+  medium: "1",
+  small: "0.5"
+};
+const STATUS = {
+  IDLE: "idle",
+  LOADING: "loading"
+};
+const TagInputContainer = styled("div", {
+  shouldForwardProp: (prop) => !["size"].includes(prop)
+})`
+  display: flex;
+  gap: ${({ theme }) => theme.space["1"]};
+  background-color: ${({ theme: { colors } }) => colors.neutral.background};
+
+  padding: ${({ theme, size }) => `calc(${theme.space[TAGINPUT_SIZE_PADDING[size]]} - 1px) ${theme.space["2"]}`};
+  cursor: text;
+
+  background: ${({ theme }) => theme.colors.neutral.background};
+  border: 1px solid ${({ theme }) => theme.colors.neutral.border};
+  border-radius: ${({ theme }) => theme.radii.default};
+
+  &:focus-within {
+    border-color: ${({ theme }) => theme.colors.primary.borderHover};
+    box-shadow: ${({ theme }) => theme.shadows.focusPrimary};
+  }
+
+  &[data-success='true'] {
+    border-color: ${({ theme }) => theme.colors.success.border};
+  }
+
+  &[data-error='true'] {
+    border-color: ${({ theme }) => theme.colors.danger.border};
+  }
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.primary.borderHover};
+  }
+
+  &[data-readonly='true'] {
+    border-color: ${({ theme }) => theme.colors.neutral.border};
+    background: ${({ theme }) => theme.colors.neutral.backgroundWeak};
+  }
+
+  &[data-disabled='true'] {
+    border-color: ${({ theme }) => theme.colors.neutral.borderDisabled};
+    background: ${({ theme }) => theme.colors.neutral.backgroundDisabled};
+    cursor: not-allowed;
+  }
+`;
+const DataContainer = styled("div")`
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: ${({ theme }) => theme.space["1"]};
+  flex: 1;
+`;
+const StateContainer = styled("div")`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space["1"]};
+`;
+const StyledInput = styled.input`
+  display: flex;
+  flex: 1;
+  font-size: ${({ theme }) => theme.typography.body.fontSize};
+  background: inherit;
+  color: ${({ theme: { colors } }) => colors.neutral.text};
+  border: none;
+  outline: none;
+  &::placeholder {
+    color: ${({ theme: { colors } }) => colors.neutral.textWeak};
+  }
+  height: 100%;
+`;
+const convertTagArrayToTagStateArray = (tags) => (tags || [])?.map(
+  (tag, index) => typeof tag === "object" ? { ...tag, index: getUUID(`tag-${index}`) } : { index: getUUID(`tag-${index}`), label: tag }
+);
+const TagInput = ({
+  disabled = false,
+  id,
+  name,
+  onChange,
+  placeholder,
+  tags,
+  value,
+  className,
+  "data-testid": dataTestId,
+  label,
+  labelDescription,
+  required = false,
+  size = "large",
+  error,
+  success,
+  helper,
+  readOnly = false,
+  tooltip,
+  clearable = false
+}) => {
+  const tagsProp = value ?? tags;
+  const [tagInputState, setTagInput] = useState(
+    convertTagArrayToTagStateArray(tagsProp ?? [])
+  );
+  const [input, setInput] = useState("");
+  const [status, setStatus] = useState({});
+  const uniqueId = useId();
+  const localId = id ?? uniqueId;
+  useEffect(() => {
+    setTagInput(convertTagArrayToTagStateArray(tagsProp));
+  }, [tagsProp, setTagInput]);
+  const inputRef = useRef(null);
+  const dispatchOnChange = (newState) => {
+    const changes = newState.map(
+      (tag) => typeof tag === "object" ? tag?.label : tag
+    );
+    onChange?.(changes);
+  };
+  const handleContainerClick = () => {
+    if (inputRef.current) {
+      inputRef?.current?.focus();
+    }
+  };
+  const onInputChange = (e) => setInput(e.target.value);
+  const addTag = () => {
+    const newTagInput = input ? [...tagInputState, { index: getUUID("tag"), label: input }] : tagInputState;
+    setInput("");
+    setTagInput(newTagInput);
+    if (newTagInput.length !== tagInputState.length) {
+      setStatus({ [newTagInput[newTagInput.length - 1].index]: STATUS.LOADING });
+    }
+    try {
+      dispatchOnChange(newTagInput);
+      setStatus({ [newTagInput[newTagInput.length - 1].index]: STATUS.IDLE });
+    } catch (e) {
+      setTagInput(tagInputState);
+    }
+  };
+  const deleteTag = (tagIndex) => {
+    setStatus({ [tagIndex]: STATUS.LOADING });
+    const findIndex = tagInputState.findIndex(({ index }) => index === tagIndex);
+    const newTagInput = [...tagInputState];
+    newTagInput.splice(findIndex, 1);
+    try {
+      dispatchOnChange(newTagInput);
+      setTagInput(newTagInput);
+      setStatus({ [tagIndex]: STATUS.IDLE });
+    } catch (e) {
+      setTagInput(tagInputState);
+    }
+  };
+  const handleInputKeydown = (event) => {
+    if (event.key === " " || event.key === "Enter") {
+      addTag();
+      event.preventDefault();
+    }
+    if (event.key === "Backspace" && inputRef?.current?.selectionStart === 0 && tagInputState.length) {
+      event.preventDefault();
+      deleteTag(tagInputState[tagInputState.length - 1].index);
+    }
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const newTagInput = [
+      ...tagInputState,
+      { index: getUUID("tag"), label: e?.clipboardData?.getData("Text") }
+    ];
+    setTagInput(newTagInput);
+    setStatus({ [newTagInput.length - 1]: STATUS.LOADING });
+    try {
+      dispatchOnChange(newTagInput);
+      setStatus({ [newTagInput.length - 1]: STATUS.IDLE });
+    } catch (err) {
+      setTagInput(tagInputState);
+    }
+  };
+  const clearAll = () => {
+    setInput("");
+    setTagInput([]);
+    dispatchOnChange([]);
+  };
+  const helperSentiment = useMemo(() => {
+    if (error) {
+      return "danger";
+    }
+    if (success) {
+      return "success";
+    }
+    return "neutral";
+  }, [error, success]);
+  const computedClearable = clearable && !!tagInputState.length;
+  return /* @__PURE__ */ jsxs(Stack, { gap: "0.5", className, children: [
+    label || labelDescription ? /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: "1", alignItems: "center", children: [
+      label ? /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: "0.5", alignItems: "start", children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: "label",
+            variant: "bodyStrong",
+            sentiment: "neutral",
+            htmlFor: id ?? localId,
+            children: label
+          }
+        ),
+        required ? /* @__PURE__ */ jsx(Icon, { name: "asterisk", color: "danger", size: 8 }) : null
+      ] }) : null,
+      labelDescription ?? null
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs(
+      TagInputContainer,
+      {
+        onClick: handleContainerClick,
+        className,
+        "data-testid": dataTestId,
+        size,
+        "data-disabled": disabled,
+        "data-readonly": readOnly,
+        "data-error": !!error,
+        "data-success": !!success,
+        children: [
+          /* @__PURE__ */ jsxs(DataContainer, { children: [
+            tagInputState.map((tag) => /* @__PURE__ */ jsx(
+              Tag,
+              {
+                sentiment: "neutral",
+                disabled,
+                isLoading: status[tag.index] === STATUS.LOADING,
+                onClose: !readOnly ? (e) => {
+                  e.stopPropagation();
+                  deleteTag(tag.index);
+                } : void 0,
+                children: tag.label
+              },
+              tag.index
+            )),
+            !disabled ? /* @__PURE__ */ jsx(
+              StyledInput,
+              {
+                id: localId,
+                name,
+                "aria-label": name,
+                type: "text",
+                placeholder: !tagInputState.length ? placeholder : "",
+                value: input,
+                onBlur: addTag,
+                onChange: onInputChange,
+                onKeyDown: handleInputKeydown,
+                onPaste: handlePaste,
+                ref: inputRef,
+                readOnly
+              }
+            ) : null
+          ] }),
+          computedClearable || success || error ? /* @__PURE__ */ jsxs(StateContainer, { children: [
+            computedClearable ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": "clear value",
+                disabled,
+                variant: "ghost",
+                size: "xsmall",
+                icon: "close",
+                onClick: clearAll,
+                sentiment: "neutral"
+              }
+            ) : null,
+            success ? /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: "checkbox-circle-outline",
+                color: "success",
+                size: 16,
+                disabled
+              }
+            ) : null,
+            error ? /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: "alert",
+                color: "danger",
+                size: 16,
+                disabled
+              }
+            ) : null
+          ] }) : null
+        ]
+      }
+    ) }) }),
+    error || typeof success === "string" || helper ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        variant: "caption",
+        as: "span",
+        prominence: !error && !success ? "weak" : void 0,
+        sentiment: helperSentiment,
+        disabled: disabled || readOnly,
+        children: error || success || helper
+      }
+    ) : null
+  ] });
+};
+export {
+  TAGINPUT_SIZE_PADDING,
+  TagInput
+};

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

@@ -0,0 +1,37 @@
+import type { ComponentProps } from 'react';
+import { Popover } from '../Popover';
+import { Tag } from '../Tag';
+type TagListProps = {
+    /**
+     * This property define maximum characters length of all tags until it hide tags into tooltip.
+     */
+    maxLength?: number;
+    tags?: (string | {
+        label: string;
+        icon: NonNullable<ComponentProps<typeof Tag>['icon']>;
+    })[];
+    /**
+     * This property define maximum characters length of all tags until it hide tags into tooltip.
+     */
+    threshold?: number;
+    /**
+     * This property define maximum width of each tag. This doesn't apply for tags in tooltip.
+     */
+    multiline?: boolean;
+    /**
+     * This property define the title of the Popover, when some tags are hidden because of the threshold.
+     */
+    popoverTitle: string;
+    /**
+     * The popover will be placed automatically by default. You can also specify the placement of the popover through
+     * this property.
+     */
+    popoverPlacement?: ComponentProps<typeof Popover>['placement'];
+    className?: string;
+    'data-testid'?: string;
+} & Pick<ComponentProps<typeof Tag>, 'copiable' | 'copyText' | 'copiedText'>;
+/**
+ * This component is used to display a list of tags with a threshold and a popover when there are too many tags.
+ */
+export declare const TagList: ({ maxLength, tags, threshold, multiline, popoverTitle, popoverPlacement, copiable, copyText, copiedText, className, "data-testid": dataTestId, }: TagListProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/TagList/index.js

@@ -0,0 +1,103 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useState } from "react";
+import { Popover } from "../Popover/index.js";
+import { Tag } from "../Tag/index.js";
+const StyledContainer = styled.div`
+  display: flex;
+`;
+const TagsWrapper = styled.span`
+  cursor: pointer;
+  color: ${({ theme }) => theme.colors.primary.text};
+  border: none;
+  font-size: 14px;
+  align-self: center;
+  max-width: 350px;
+  overflow: hidden;
+  white-space: pre;
+  text-overflow: ellipsis;
+  background-color: transparent;
+  padding-left: 8px;
+  padding-right: 8px;
+`;
+const StyledTagContainer = styled.div`
+  display: flex;
+  align-items: center;
+  color: ${({ theme }) => theme.colors.neutral.text};
+  gap: ${({ theme }) => theme.space["1"]};
+  ${({ multiline }) => multiline && `flex-wrap: wrap;`};
+`;
+const DEFAULT_TAGS = [];
+const getTagLabel = (tag) => typeof tag === "object" ? tag.label : tag;
+const TagList = ({
+  maxLength = 600,
+  tags = DEFAULT_TAGS,
+  threshold = 1,
+  multiline = false,
+  popoverTitle,
+  popoverPlacement,
+  copiable,
+  copyText,
+  copiedText,
+  className,
+  "data-testid": dataTestId
+}) => {
+  let tmpThreshold = threshold;
+  if (tags.length > 0 && tags.slice(0, tmpThreshold).reduce((acc, tag) => acc + getTagLabel(tag), "").length > maxLength) {
+    tmpThreshold -= 1;
+  }
+  const hasManyTags = tags.length > tmpThreshold || false;
+  const visibleTagsCount = hasManyTags ? tmpThreshold : tags.length;
+  const [isVisible, setIsVisible] = useState(false);
+  if (!tags.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(StyledContainer, { className, "data-testid": dataTestId, children: [
+    /* @__PURE__ */ jsx(StyledTagContainer, { multiline, children: tags.slice(0, visibleTagsCount).map((tag, index) => /* @__PURE__ */ jsx(
+      Tag,
+      {
+        copiable,
+        copyText,
+        copiedText,
+        icon: typeof tag === "object" ? tag.icon : void 0,
+        children: getTagLabel(tag)
+      },
+      `${getTagLabel(tag)}-${index}`
+    )) }),
+    hasManyTags ? /* @__PURE__ */ jsx(
+      Popover,
+      {
+        title: popoverTitle,
+        visible: isVisible,
+        size: "small",
+        onClose: () => setIsVisible(false),
+        placement: popoverPlacement,
+        content: /* @__PURE__ */ jsx(StyledTagContainer, { multiline: true, children: tags.slice(visibleTagsCount).map((tag, index) => /* @__PURE__ */ jsx(
+          Tag,
+          {
+            copiable,
+            copyText,
+            copiedText,
+            icon: typeof tag === "object" ? tag.icon : void 0,
+            children: getTagLabel(tag)
+          },
+          `${getTagLabel(tag)}-${index}`
+        )) }),
+        children: /* @__PURE__ */ jsxs(
+          TagsWrapper,
+          {
+            "data-testid": `${dataTestId ?? "taglist"}-open`,
+            onClick: () => setIsVisible(true),
+            children: [
+              "+",
+              tags.length - tmpThreshold
+            ]
+          }
+        )
+      }
+    ) : null
+  ] });
+};
+export {
+  TagList
+};

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

@@ -0,0 +1,40 @@
+import type React from 'react';
+import type { ElementType, ReactNode } from 'react';
+import type { Color } from '../../theme';
+import { typography } from '../../theme';
+declare const PROMINENCES: {
+    default: string;
+    strong: string;
+    stronger: string;
+    weak: string;
+};
+type ProminenceProps = keyof typeof PROMINENCES;
+type PlacementProps = React.CSSProperties['textAlign'];
+type TextVariant = keyof typeof typography;
+export declare const textVariants: ("body" | "bodySmall" | "bodySmallStrong" | "bodySmallStronger" | "bodyStrong" | "bodyStronger" | "caption" | "captionSmall" | "captionSmallStrong" | "captionSmallStronger" | "captionStrong" | "captionStronger" | "code" | "codeStrong" | "codeStronger" | "heading" | "headingLarge" | "headingLargeStrong" | "headingLargeStronger" | "headingSmall" | "headingSmallStrong" | "headingSmallStronger" | "headingStrong" | "headingStronger")[];
+type TextProps = {
+    className?: string;
+    children: ReactNode;
+    placement?: PlacementProps;
+    variant: TextVariant;
+    /**
+     * @deprecated use `sentiment` property instead
+     */
+    color?: Color;
+    sentiment?: Color;
+    prominence?: ProminenceProps;
+    as: ElementType;
+    oneLine?: boolean;
+    disabled?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    id?: string;
+    dir?: 'ltr' | 'rtl' | 'auto';
+    htmlFor?: string;
+    'data-testid'?: string;
+};
+/**
+ * Text component is used to display text with different variants and sentiments.
+ */
+export declare const Text: ({ variant, children, as, color, sentiment, oneLine, placement, prominence, className, disabled, italic, underline, id, dir, htmlFor, "data-testid": dataTestId, }: TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Text/index.js

@@ -0,0 +1,107 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useRef } from "react";
+import recursivelyGetChildrenString from "../../helpers/recursivelyGetChildrenString.js";
+import { useIsOverflowing } from "../../hooks/useIsOverflowing.js";
+import capitalize from "../../utils/capitalize.js";
+import { Tooltip } from "../Tooltip/index.js";
+const PROMINENCES = {
+  default: "",
+  strong: "strong",
+  stronger: "stronger",
+  weak: "weak"
+};
+const generateStyles = ({
+  placement,
+  prominence,
+  sentiment,
+  variant,
+  theme,
+  oneLine,
+  disabled,
+  italic,
+  underline
+}) => {
+  const definedProminence = sentiment !== "neutral" && prominence === "stronger" ? capitalize(PROMINENCES.default) : capitalize(PROMINENCES[prominence]);
+  sentiment ? theme.colors[sentiment] : void 0;
+  const text = `text${definedProminence}${disabled ? "Disabled" : ""}`;
+  const textColor = sentiment ? theme.colors[sentiment][text] : void 0;
+  return `
+    ${sentiment ? `color: ${textColor};` : ""}
+
+    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};
+    text-transform: ${theme.typography[variant].textCase};
+    text-decoration: ${theme.typography[variant].textDecoration};
+    ${placement ? ` text-align: ${placement};` : ""}
+
+    ${oneLine ? `white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;` : ""}
+    ${italic ? `font-style: italic;` : ""}
+    ${underline ? `text-decoration: underline;` : ""}
+  `;
+};
+const StyledText = styled("div", {
+  shouldForwardProp: (prop) => ![
+    "as",
+    "placement",
+    "variant",
+    "sentiment",
+    "prominence",
+    "oneLine",
+    "disabled",
+    "italic",
+    "underline"
+  ].includes(prop)
+})(generateStyles);
+const Text = ({
+  variant,
+  children,
+  as,
+  color,
+  sentiment,
+  oneLine = false,
+  placement,
+  prominence = "default",
+  className,
+  disabled = false,
+  italic = false,
+  underline = false,
+  id,
+  dir,
+  htmlFor,
+  "data-testid": dataTestId
+}) => {
+  const computedSentiment = sentiment ?? color;
+  const elementRef = useRef(null);
+  const isOverflowing = useIsOverflowing(elementRef);
+  const finalStringChildren = recursivelyGetChildrenString(children);
+  return /* @__PURE__ */ jsx(Tooltip, { text: oneLine && isOverflowing ? finalStringChildren : "", children: /* @__PURE__ */ jsx(
+    StyledText,
+    {
+      ref: elementRef,
+      as,
+      placement,
+      prominence,
+      sentiment: computedSentiment,
+      variant,
+      oneLine,
+      className,
+      disabled,
+      italic,
+      underline,
+      id,
+      dir,
+      htmlFor,
+      "data-testid": dataTestId,
+      children
+    }
+  ) });
+};
+export {
+  Text
+};

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

@@ -0,0 +1,50 @@
+import type { DOMAttributes, ReactNode } from 'react';
+type TextAreaProps = {
+    id?: string;
+    className?: string;
+    tabIndex?: number;
+    autoFocus?: boolean;
+    label: string;
+    value?: string;
+    onChange: (newValue: string) => void;
+    placeholder?: string;
+    /**
+     * Override others properties : readyOnly, success, error.
+     */
+    disabled?: boolean;
+    /**
+     * Override others properties : success, error.
+     * Ignored if following props are provided : disabled.
+     */
+    readOnly?: boolean;
+    /**
+     * Override others properties : error, helper.
+     * Ignored if following props are provided : disabled, readyOnly.
+     */
+    success?: string;
+    /**
+     * Override others properties : helper.
+     * Ignored if following props are provided : disabled, readyOnly, success.
+     */
+    error?: string;
+    /**
+     * Ignored if following props are provided : readyOnly, success.
+     */
+    helper?: ReactNode;
+    rows?: number;
+    minLength?: number;
+    maxLength?: number;
+    tooltip?: string;
+    required?: boolean;
+    'data-testid'?: string;
+    name?: string;
+    onFocus?: DOMAttributes<HTMLTextAreaElement>['onFocus'];
+    onBlur?: DOMAttributes<HTMLTextAreaElement>['onBlur'];
+    clearable?: boolean;
+    labelDescription?: ReactNode;
+};
+/**
+ * This component offers an extended textarea HTML
+ */
+export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};