@ultraviolet/ui 1.51.0 → 1.51.2

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

@@ -1,169 +0,0 @@
-import _styled from '@emotion/styled/base';
-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';
-import { jsx, jsxs, Fragment } 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 COPY_DURATION = 2500;
-const StyledContainer = /*#__PURE__*/_styled('span', {
-  shouldForwardProp: prop => !['sentiment', 'copiable'].includes(prop),
-  target: "el6733p2"
-})("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 = /*#__PURE__*/_styled(Text, {
-  target: "el6733p1"
-})(process.env.NODE_ENV === "production" ? {
-  name: "12vzl34",
-  styles: "max-width:232px"
-} : {
-  name: "12vzl34",
-  styles: "max-width:232px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledCloseButton = /*#__PURE__*/_styled(Button, {
-  target: "el6733p0"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1z1k76",
-  styles: "width:fit-content;height:fit-content;padding:2px"
-} : {
-  name: "1z1k76",
-  styles: "width:fit-content;height:fit-content;padding:2px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const TagInner = ({
-  children,
-  isLoading = false,
-  onClose,
-  icon,
-  disabled = false
-}) => jsxs(Fragment, {
-  children: [icon ? jsx(Icon, {
-    name: icon,
-    size: 16
-  }) : null, jsx(StyledText, {
-    as: "span",
-    variant: "caption",
-    oneLine: true,
-    "aria-disabled": disabled,
-    children: children
-  }), onClose && !isLoading ? jsx(StyledCloseButton, {
-    onClick: onClose,
-    disabled: disabled,
-    "aria-label": "Close tag",
-    "data-testid": "close-tag",
-    variant: "ghost",
-    sentiment: "neutral",
-    icon: "close",
-    size: "small"
-  }) : null, isLoading ? jsx(Loader, {
-    active: true,
-    size: 16
-  }) : null]
-});
-
-/**
- * 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.
- */
-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', {
-      target: "el6733p3"
-    });
-    return jsx(Tooltip, {
-      text: isCopied ? copiedText : copyText,
-      children: jsx(Container
-      // @note: sending disabled as a special sentiment is a bit weird
-      , {
-        sentiment: disabled ? 'disabled' : sentiment,
-        copiable: true,
-        onClick: setCopied,
-        className: className,
-        "data-testid": dataTestId,
-        children: jsx(TagInner, {
-          isLoading: isLoading,
-          onClose: onClose,
-          icon: icon,
-          disabled: disabled,
-          children: children
-        })
-      })
-    });
-  }
-  return jsx(StyledContainer, {
-    sentiment: disabled ? 'disabled' : sentiment,
-    className: className,
-    "data-testid": dataTestId,
-    children: jsx(TagInner, {
-      isLoading: isLoading,
-      onClose: onClose,
-      icon: icon,
-      disabled: disabled,
-      children: children
-    })
-  });
-};
-
-export { Tag };

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

@@ -1,309 +0,0 @@
-import _styled from '@emotion/styled/base';
-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 { jsxs, jsx } from '@emotion/react/jsx-runtime';
-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 = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['size'].includes(prop),
-  target: "ea7vc6o3"
-})("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 = /*#__PURE__*/_styled('div', {
-  target: "ea7vc6o2"
-})("height:100%;display:flex;flex-wrap:wrap;align-items:center;gap:", ({
-  theme
-}) => theme.space['1'], ";flex:1;");
-const StateContainer = /*#__PURE__*/_styled('div', {
-  target: "ea7vc6o1"
-})("display:flex;align-items:center;gap:", ({
-  theme
-}) => theme.space['1'], ";");
-const StyledInput = /*#__PURE__*/_styled("input", {
-  target: "ea7vc6o0"
-})("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
-});
-/**
- * TagInput is a component that allows users to input tags.
- */
-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 jsxs(Stack, {
-    gap: "0.5",
-    className: className,
-    children: [label || labelDescription ? jsxs(Stack, {
-      direction: "row",
-      gap: "1",
-      alignItems: "center",
-      children: [label ? jsxs(Stack, {
-        direction: "row",
-        gap: "0.5",
-        alignItems: "start",
-        children: [jsx(Text, {
-          as: "label",
-          variant: "bodyStrong",
-          sentiment: "neutral",
-          htmlFor: id ?? localId,
-          children: label
-        }), required ? jsx(Icon, {
-          name: "asterisk",
-          color: "danger",
-          size: 8
-        }) : null]
-      }) : null, labelDescription ?? null]
-    }) : null, jsx("div", {
-      children: jsx(Tooltip, {
-        text: tooltip,
-        children: jsxs(TagInputContainer, {
-          onClick: handleContainerClick,
-          className: className,
-          "data-testid": dataTestId,
-          size: size,
-          "data-disabled": disabled,
-          "data-readonly": readOnly,
-          "data-error": !!error,
-          "data-success": !!success,
-          children: [jsxs(DataContainer, {
-            children: [tagInputState.map(tag => jsx(Tag, {
-              sentiment: "neutral",
-              disabled: disabled,
-              isLoading: status[tag.index] === STATUS.LOADING,
-              onClose: !readOnly ? e => {
-                e.stopPropagation();
-                deleteTag(tag.index);
-              } : undefined,
-              children: tag.label
-            }, tag.index)), !disabled ? jsx(StyledInput, {
-              id: localId,
-              name: name,
-              "aria-label": name,
-              type: "text",
-              placeholder: !tagInputState.length ? placeholder : '',
-              value: input,
-              onBlur: addTag,
-              onChange: onInputChange,
-              onKeyDown: handleInputKeydown,
-              onPaste: handlePaste,
-              ref: inputRef,
-              readOnly: readOnly
-            }) : null]
-          }), computedClearable || success || error ? jsxs(StateContainer, {
-            children: [computedClearable ? jsx(Button, {
-              "aria-label": "clear value",
-              disabled: disabled,
-              variant: "ghost",
-              size: "xsmall",
-              icon: "close",
-              onClick: clearAll,
-              sentiment: "neutral"
-            }) : null, success ? jsx(Icon, {
-              name: "checkbox-circle-outline",
-              color: "success",
-              size: 16,
-              disabled: disabled
-            }) : null, error ? jsx(Icon, {
-              name: "alert",
-              color: "danger",
-              size: 16,
-              disabled: disabled
-            }) : null]
-          }) : null]
-        })
-      })
-    }), error || typeof success === 'string' || helper ? jsx(Text, {
-      variant: "caption",
-      as: "span",
-      prominence: !error && !success ? 'weak' : undefined,
-      sentiment: helperSentiment,
-      disabled: disabled || readOnly,
-      children: error || success || helper
-    }) : null]
-  });
-};
-
-export { TAGINPUT_SIZE_PADDING, TagInput };

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

@@ -1,106 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useState } from 'react';
-import { Popover } from '../Popover/index.js';
-import { Tag } from '../Tag/index.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 StyledContainer = /*#__PURE__*/_styled("div", {
-  target: "eb6op482"
-})(process.env.NODE_ENV === "production" ? {
-  name: "zjik7",
-  styles: "display:flex"
-} : {
-  name: "zjik7",
-  styles: "display:flex",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const TagsWrapper = /*#__PURE__*/_styled("span", {
-  target: "eb6op481"
-})("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 = /*#__PURE__*/_styled("div", {
-  target: "eb6op480"
-})("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;
-
-/**
- * This component is used to display a list of tags with a threshold and a popover when there are too many tags.
- */
-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) {
-    // If total tags length in characters is above maxLength,
-    // threshold is decremented in order to prevent too many long tags displayed.
-    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 jsxs(StyledContainer, {
-    className: className,
-    "data-testid": dataTestId,
-    children: [jsx(StyledTagContainer, {
-      multiline: multiline,
-      children: tags.slice(0, visibleTagsCount).map((tag, index) => jsx(Tag
-      // useful when two tags are identical `${tag}-${index}`
-      // eslint-disable-next-line react/no-array-index-key
-      , {
-        copiable: copiable,
-        copyText: copyText,
-        copiedText: copiedText,
-        icon: typeof tag === 'object' ? tag.icon : undefined,
-        children: getTagLabel(tag)
-      }, `${getTagLabel(tag)}-${index}`))
-    }), hasManyTags ? jsx(Popover, {
-      title: popoverTitle,
-      visible: isVisible,
-      size: "small",
-      onClose: () => setIsVisible(false),
-      placement: popoverPlacement,
-      content: jsx(StyledTagContainer, {
-        multiline: true,
-        children: tags.slice(visibleTagsCount).map((tag, index) => jsx(Tag
-        // useful when two tags are identical `${tag}-${index}`
-        // eslint-disable-next-line react/no-array-index-key
-        , {
-          copiable: copiable,
-          copyText: copyText,
-          copiedText: copiedText,
-          icon: typeof tag === 'object' ? tag.icon : undefined,
-          children: getTagLabel(tag)
-        }, `${getTagLabel(tag)}-${index}`))
-      }),
-      children: jsxs(TagsWrapper, {
-        "data-testid": `${dataTestId ?? 'taglist'}-open`,
-        onClick: () => setIsVisible(true),
-        children: ["+", tags.length - tmpThreshold]
-      })
-    }) : null]
-  });
-};
-
-export { TagList };

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

@@ -1,107 +0,0 @@
-import _styled from '@emotion/styled/base';
-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';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const PROMINENCES = {
-  default: '',
-  strong: 'strong',
-  stronger: 'stronger',
-  weak: 'weak'
-};
-
-/**
- * Generate all styles available for text based on prominence and variants
- */
-const generateStyles = ({
-  placement,
-  prominence,
-  sentiment,
-  variant,
-  theme,
-  oneLine,
-  disabled,
-  italic,
-  underline
-}) => {
-  // stronger is available only for neutral sentiment
-  const definedProminence = sentiment !== 'neutral' && prominence === 'stronger' ? capitalize(PROMINENCES.default) : capitalize(PROMINENCES[prominence]);
-  sentiment ? theme.colors[sentiment] : undefined;
-  const text = `text${definedProminence}${disabled ? 'Disabled' : ''}`;
-  const textColor = sentiment ? theme.colors[sentiment][text] : undefined;
-  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 = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['as', 'placement', 'variant', 'sentiment', 'prominence', 'oneLine', 'disabled', 'italic', 'underline'].includes(prop),
-  target: "e13y3mga0"
-})(generateStyles);
-
-/**
- * Text component is used to display text with different variants and sentiments.
- */
-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 jsx(Tooltip, {
-    text: oneLine && isOverflowing ? finalStringChildren : '',
-    children: jsx(StyledText, {
-      ref: elementRef,
-      as: as,
-      placement: placement,
-      prominence: prominence,
-      sentiment: computedSentiment,
-      variant: variant,
-      oneLine: oneLine,
-      className: className,
-      disabled: disabled,
-      italic: italic,
-      underline: underline,
-      id: id,
-      dir: dir,
-      htmlFor: htmlFor,
-      "data-testid": dataTestId,
-      children: children
-    })
-  });
-};
-
-export { Text };