@ultraviolet/ui 1.32.2 → 1.33.0

package/dist/index.d.ts

@@ -1343,9 +1343,9 @@ type BadgeProps = {
  */
 declare const Badge: ({ sentiment, size, prominence, icon, disabled, className, children, "data-testid": dataTestId, }: BadgeProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type Variant$1 = 'intro' | 'promotional';
+type Variant = 'intro' | 'promotional';
 type BannerProps = {
-    variant?: Variant$1;
+    variant?: Variant;
     size?: 'small' | 'medium';
     title: string;
     children: ReactNode;
@@ -2455,7 +2455,7 @@ type SeparatorProps = {
  */
 declare const Separator: ({ direction, thickness, color, icon, className, "data-testid": dataTestId, }: SeparatorProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-declare const variants$1: {
+declare const variants: {
     readonly block: ({ length }: {
         length?: number | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
@@ -2484,7 +2484,7 @@ declare const variants$1: {
         as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
     }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 };
-type SkeletonVariant = keyof typeof variants$1;
+type SkeletonVariant = keyof typeof variants;
 type SkeletonProps = {
     variant?: SkeletonVariant;
     length?: number;
@@ -2791,18 +2791,12 @@ type TagProps = {
  */
 declare const Tag: ({ children, isLoading, onClose, icon, copiable, copyText, copiedText, disabled, sentiment, className, "data-testid": dataTestId, }: TagProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-declare const variants: {
-    readonly base: ({ theme: { colors, shadows, radii } }: {
-        theme: Theme;
-    }) => string;
-    readonly bordered: ({ theme: { shadows } }: {
-        theme: Theme;
-    }) => string;
-    readonly 'no-border': ({ theme: { shadows } }: {
-        theme: Theme;
-    }) => string;
+declare const TAGINPUT_SIZE_PADDING: {
+    readonly large: "1.5";
+    readonly medium: "1";
+    readonly small: "0.5";
 };
-type Variant = keyof typeof variants;
+type TagInputSize = keyof typeof TAGINPUT_SIZE_PADDING;
 type TagInputProp = (string | {
     label: string;
     index: string;
@@ -2810,21 +2804,46 @@ type TagInputProp = (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;
-    variant?: Variant;
+    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.
- * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-declare const TagInput: ({ disabled, id, manualInput, name, onChange, onChangeError, placeholder, tags, variant, className, "data-testid": dataTestId, }: TagInputProps) => _emotion_react_jsx_runtime.JSX.Element;
+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) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TagListProps = {
     /**

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

@@ -1,104 +1,83 @@
 import _styled from '@emotion/styled/base';
-import { useState, useEffect, useRef } from 'react';
+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 variants = {
-  base: ({
-    theme: {
-      colors,
-      shadows,
-      radii
-    }
-  }) => `
-    padding: 8px;
-    cursor: text;
-    border-radius: ${radii.default};
-    border: 1px solid ${colors.neutral.border};
-    &:focus-within {
-      border: 1px solid ${colors.primary.border};
-      box-shadow: ${shadows.focusPrimary};
-    }
-
-    &:hover {
-      border: 1px solid ${colors.primary.border};
-    }
-
-    & > * {
-      margin: 6px;
-    }
-  `,
-  bordered: ({
-    theme: {
-      shadows
-    }
-  }) => `
-    margin-top: 0;
-    padding: 8px 0;
-
-    > input:focus {
-      box-shadow: ${shadows.focusPrimary};
-    }
-
-    > * {
-      margin-bottom: 6px;
-      &:not(:last-child) {
-        margin-right: 6px;
-      }
-    }
-  `,
-  'no-border': ({
-    theme: {
-      shadows
-    }
-  }) => `
-    &:focus-within {
-      box-shadow: ${shadows.focusPrimary};
-    }
-
-    > * {
-      margin-right: 6px;
-      margin-bottom: 6px;
-    }
-  `
-};
 const TagInputContainer = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['variant'].includes(prop),
-  target: "ea7vc6o1"
-})("display:flex;flex-wrap:wrap;background-color:", ({
+  shouldForwardProp: prop => !['size'].includes(prop),
+  target: "ea7vc6o3"
+})("display:flex;gap:", ({
+  theme
+}) => theme.space['1'], ";background-color:", ({
   theme: {
     colors
   }
-}) => colors.neutral.background, ";", ({
-  variant,
+}) => colors.neutral.background, ";padding:", ({
+  theme,
+  size
+}) => `calc(${theme.space[TAGINPUT_SIZE_PADDING[size]]} - 1px) ${theme.space['2']}`, ";cursor:text;background:", ({
   theme
-}) => variants[variant] ? variants[variant]({
+}) => theme.colors.neutral.background, ";border:1px solid ", ({
   theme
-}) : variants.base({
+}) => 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, ";color:", ({
-  theme: {
-    colors
-  }
-}) => colors.neutral.text, ";border:none;outline:none;background-color:", ({
+}) => theme.typography.body.fontSize, ";background:inherit;color:", ({
   theme: {
     colors
   }
-}) => colors.neutral.background, ";&::placeholder{color:", ({
+}) => colors.neutral.text, ";border:none;outline:none;&::placeholder{color:", ({
   theme: {
     colors
   }
-}) => colors.neutral.textWeak, ";}");
+}) => colors.neutral.textWeak, ";}height:100%;");
 const convertTagArrayToTagStateArray = tags => (tags || [])?.map((tag, index) => typeof tag === 'object' ? {
   ...tag,
   index: getUUID(`tag-${index}`)
@@ -108,27 +87,37 @@ const convertTagArrayToTagStateArray = tags => (tags || [])?.map((tag, index) =>
 });
 /**
  * TagInput is a component that allows users to input tags.
- * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
 const TagInput = ({
   disabled = false,
   id,
-  manualInput = true,
   name,
   onChange,
-  onChangeError,
   placeholder,
   tags,
-  variant = 'base',
+  value,
   className,
-  'data-testid': dataTestId
+  'data-testid': dataTestId,
+  label,
+  labelDescription,
+  required = false,
+  size = 'medium',
+  error,
+  success,
+  helper,
+  readOnly = false,
+  tooltip,
+  clearable = false
 }) => {
-  const [tagInputState, setTagInput] = useState(convertTagArrayToTagStateArray(tags ?? []));
+  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(tags));
-  }, [tags, setTagInput]);
+    setTagInput(convertTagArrayToTagStateArray(tagsProp));
+  }, [tagsProp, setTagInput]);
   const inputRef = useRef(null);
   const dispatchOnChange = newState => {
     const changes = newState.map(tag => typeof tag === 'object' ? tag?.label : tag);
@@ -157,8 +146,7 @@ const TagInput = ({
       setStatus({
         [newTagInput[newTagInput.length - 1].index]: STATUS.IDLE
       });
-    } catch (error) {
-      onChangeError?.(error);
+    } catch (e) {
       setTagInput(tagInputState);
     }
   };
@@ -177,8 +165,7 @@ const TagInput = ({
       setStatus({
         [tagIndex]: STATUS.IDLE
       });
-    } catch (error) {
-      onChangeError?.(error);
+    } catch (e) {
       setTagInput(tagInputState);
     }
   };
@@ -207,39 +194,116 @@ const TagInput = ({
       setStatus({
         [newTagInput.length - 1]: STATUS.IDLE
       });
-    } catch (error) {
-      onChangeError?.(error);
+    } catch (err) {
       setTagInput(tagInputState);
     }
   };
-  return jsxs(TagInputContainer, {
-    onClick: handleContainerClick,
-    variant: variant,
+  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,
-    "data-testid": dataTestId,
-    children: [tagInputState.map(tag => jsx(Tag, {
-      sentiment: "neutral",
-      disabled: disabled,
-      isLoading: status[tag.index] === STATUS.LOADING,
-      onClose: e => {
-        e.stopPropagation();
-        deleteTag(tag.index);
-      },
-      children: tag.label
-    }, tag.index)), !disabled && manualInput ? jsx(StyledInput, {
-      id: id,
-      name: name,
-      "aria-label": name,
-      type: "text",
-      placeholder: !tagInputState.length ? placeholder : '',
-      value: input,
-      onBlur: addTag,
-      onChange: onInputChange,
-      onKeyDown: handleInputKeydown,
-      onPaste: handlePaste,
-      ref: inputRef
+    children: [jsxs(Stack, {
+      direction: "row",
+      gap: "1",
+      alignItems: "center",
+      children: [jsxs(Stack, {
+        direction: "row",
+        gap: "0.5",
+        alignItems: "start",
+        children: [jsx(Text, {
+          as: "label",
+          variant: "bodyStrong",
+          sentiment: "neutral",
+          htmlFor: localId,
+          children: label
+        }), required ? jsx(Icon, {
+          name: "asterisk",
+          color: "danger",
+          size: 8
+        }) : null]
+      }), labelDescription ?? 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 };
+export { TAGINPUT_SIZE_PADDING, TagInput };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.32.2",
+  "version": "1.33.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {