@ultraviolet/ui 3.9.0 → 3.10.0

package/dist/components/TagInput/index.js

@@ -1,244 +1,203 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { AlertCircleIcon } from "@ultraviolet/icons/AlertCircleIcon";
-import { CheckCircleOutlineIcon } from "@ultraviolet/icons/CheckCircleOutlineIcon";
-import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
-import { cn, getUUID } from "@ultraviolet/utils";
-import { useState, useId, useEffect, useRef, useMemo } from "react";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectSpread2.js";
+import { Stack } from "../Stack/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+import { Text } from "../Text/index.js";
 import { Button } from "../Button/index.js";
 import { Label } from "../Label/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 { tagInputDataContainer, tagInput, tagInputStateContainer, tagInputContainer } from "./styles.css.js";
+import { tagInput, tagInputContainer, tagInputDataContainer, tagInputStateContainer } from "./styles.css.js";
+import { cn, getUUID } from "@ultraviolet/utils";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircleIcon } from "@ultraviolet/icons/AlertCircleIcon";
+import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
+import { CheckCircleOutlineIcon } from "@ultraviolet/icons/CheckCircleOutlineIcon";
+
+//#region src/components/TagInput/index.tsx
 const STATUS = {
-  IDLE: "idle",
-  LOADING: "loading"
+	IDLE: "idle",
+	LOADING: "loading"
 };
-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,
-  value,
-  className,
-  "data-testid": dataTestId,
-  "aria-label": ariaLabel,
-  label,
-  labelDescription,
-  required = false,
-  size = "large",
-  error,
-  success,
-  helper,
-  readOnly = false,
-  tooltip,
-  clearable = false,
-  style
-}) => {
-  const [tagInputState, setTagInput] = useState(
-    convertTagArrayToTagStateArray(value)
-  );
-  const [input, setInput] = useState("");
-  const [status, setStatus] = useState({});
-  const uniqueId = useId();
-  const localId = id ?? uniqueId;
-  useEffect(() => {
-    setTagInput(convertTagArrayToTagStateArray(value));
-  }, [value, 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 && newTagInput) {
-      const tag = newTagInput.at(-1);
-      if (tag) {
-        setStatus({
-          [tag.index]: STATUS.LOADING
-        });
-      }
-    }
-    try {
-      dispatchOnChange(newTagInput);
-      const tag = newTagInput.at(-1);
-      if (tag) {
-        setStatus({ [tag.index]: STATUS.IDLE });
-      }
-    } catch {
-      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 {
-      setTagInput(tagInputState);
-    }
-  };
-  const handleInputKeydown = (event) => {
-    if (event.key === " " || event.key === "Enter") {
-      addTag();
-      event.preventDefault();
-    }
-    if (event.key === "Backspace" && inputRef?.current?.selectionStart === 0 && tagInputState.length > 0) {
-      event.preventDefault();
-      if (tagInputState) {
-        const tag = tagInputState.at(-1);
-        if (tag) {
-          deleteTag(tag.index);
-        }
-      }
-    }
-  };
-  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 > 0;
-  return /* @__PURE__ */ jsxs(Stack, { className, gap: "0.5", children: [
-    label || labelDescription ? /* @__PURE__ */ jsx(
-      Label,
-      {
-        htmlFor: id ?? localId,
-        labelDescription,
-        required,
-        size,
-        children: label
-      }
-    ) : null,
-    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(className, tagInputContainer({ size })),
-        "data-disabled": disabled,
-        "data-error": !!error,
-        "data-readonly": readOnly,
-        "data-success": !!success,
-        "data-testid": dataTestId,
-        onClick: handleContainerClick,
-        onKeyDown: (event) => {
-          if ([" ", "Enter"].includes(event.key)) {
-            handleContainerClick();
-          }
-        },
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: tagInputDataContainer, children: [
-            tagInputState.map((tag) => /* @__PURE__ */ jsx(
-              Tag,
-              {
-                disabled,
-                isLoading: status[tag.index] === STATUS.LOADING,
-                onClose: readOnly ? void 0 : (e) => {
-                  e.stopPropagation();
-                  deleteTag(tag.index);
-                },
-                sentiment: "neutral",
-                children: tag.label
-              },
-              tag.index
-            )),
-            disabled ? null : /* @__PURE__ */ jsx(
-              "input",
-              {
-                "aria-label": ariaLabel,
-                className: tagInput,
-                "data-size": size,
-                id: localId,
-                name,
-                onBlur: addTag,
-                onChange: onInputChange,
-                onKeyDown: handleInputKeydown,
-                placeholder: tagInputState.length === 0 ? placeholder : "",
-                readOnly,
-                ref: inputRef,
-                style,
-                type: "text",
-                value: input
-              }
-            )
-          ] }),
-          computedClearable || success || error ? /* @__PURE__ */ jsxs("div", { className: tagInputStateContainer, children: [
-            computedClearable ? /* @__PURE__ */ jsx(
-              Button,
-              {
-                "aria-label": "clear value",
-                disabled,
-                onClick: clearAll,
-                sentiment: "neutral",
-                size: "xsmall",
-                variant: "ghost",
-                children: /* @__PURE__ */ jsx(CloseIcon, {})
-              }
-            ) : null,
-            success ? /* @__PURE__ */ jsx(
-              CheckCircleOutlineIcon,
-              {
-                disabled,
-                sentiment: "success",
-                size: "small"
-              }
-            ) : null,
-            error ? /* @__PURE__ */ jsx(
-              AlertCircleIcon,
-              {
-                disabled,
-                sentiment: "danger",
-                size: "small"
-              }
-            ) : null
-          ] }) : null
-        ]
-      }
-    ) }) }),
-    error || typeof success === "string" || helper ? /* @__PURE__ */ jsx(
-      Text,
-      {
-        as: "span",
-        disabled: disabled || readOnly,
-        prominence: error || success ? void 0 : "weak",
-        sentiment: helperSentiment,
-        variant: "caption",
-        children: error || success || helper
-      }
-    ) : null
-  ] });
+const convertTagArrayToTagStateArray = (tags) => {
+	var _ref;
+	return (_ref = tags !== null && tags !== void 0 ? tags : []) === null || _ref === void 0 ? void 0 : _ref.map((tag, index) => typeof tag === "object" ? _objectSpread2(_objectSpread2({}, tag), {}, { index: getUUID(`tag-${index}`) }) : {
+		index: getUUID(`tag-${index}`),
+		label: tag
+	});
 };
-export {
-  TagInput
+/**
+* TagInput is a component that allows users to input tags.
+*/
+const TagInput = ({ disabled = false, id, name, onChange, placeholder, value, className, "data-testid": dataTestId, "aria-label": ariaLabel, label, labelDescription, required = false, size = "large", error, success, helper, readOnly = false, tooltip, clearable = false, style }) => {
+	const [tagInputState, setTagInput] = useState(convertTagArrayToTagStateArray(value));
+	const [input, setInput] = useState("");
+	const [status, setStatus] = useState({});
+	const uniqueId = useId();
+	const localId = id !== null && id !== void 0 ? id : uniqueId;
+	useEffect(() => {
+		setTagInput(convertTagArrayToTagStateArray(value));
+	}, [value, setTagInput]);
+	const inputRef = useRef(null);
+	const dispatchOnChange = (newState) => {
+		const changes = newState.map((tag) => typeof tag === "object" ? tag === null || tag === void 0 ? void 0 : tag.label : tag);
+		onChange === null || onChange === void 0 || onChange(changes);
+	};
+	const handleContainerClick = () => {
+		if (inputRef.current) {
+			var _inputRef$current;
+			inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _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 && newTagInput) {
+			const tag = newTagInput.at(-1);
+			if (tag) setStatus({ [tag.index]: STATUS.LOADING });
+		}
+		try {
+			dispatchOnChange(newTagInput);
+			const tag = newTagInput.at(-1);
+			if (tag) setStatus({ [tag.index]: STATUS.IDLE });
+		} catch (_unused) {
+			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 (_unused2) {
+			setTagInput(tagInputState);
+		}
+	};
+	const handleInputKeydown = (event) => {
+		var _inputRef$current2;
+		if (event.key === " " || event.key === "Enter") {
+			addTag();
+			event.preventDefault();
+		}
+		if (event.key === "Backspace" && (inputRef === null || inputRef === void 0 || (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.selectionStart) === 0 && tagInputState.length > 0) {
+			event.preventDefault();
+			if (tagInputState) {
+				const tag = tagInputState.at(-1);
+				if (tag) deleteTag(tag.index);
+			}
+		}
+	};
+	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 > 0;
+	return /* @__PURE__ */ jsxs(Stack, {
+		className,
+		gap: "0.5",
+		children: [
+			label || labelDescription ? /* @__PURE__ */ jsx(Label, {
+				htmlFor: id !== null && id !== void 0 ? id : localId,
+				labelDescription,
+				required,
+				size,
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, {
+				text: tooltip,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: cn(className, tagInputContainer({ size })),
+					"data-disabled": disabled,
+					"data-error": !!error,
+					"data-readonly": readOnly,
+					"data-success": !!success,
+					"data-testid": dataTestId,
+					onClick: handleContainerClick,
+					onKeyDown: (event) => {
+						if ([" ", "Enter"].includes(event.key)) handleContainerClick();
+					},
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: tagInputDataContainer,
+						children: [tagInputState.map((tag) => /* @__PURE__ */ jsx(Tag, {
+							disabled,
+							isLoading: status[tag.index] === STATUS.LOADING,
+							onClose: readOnly ? void 0 : (e) => {
+								e.stopPropagation();
+								deleteTag(tag.index);
+							},
+							sentiment: "neutral",
+							children: tag.label
+						}, tag.index)), disabled ? null : /* @__PURE__ */ jsx("input", {
+							"aria-label": ariaLabel,
+							className: tagInput,
+							"data-size": size,
+							id: localId,
+							name,
+							onBlur: addTag,
+							onChange: onInputChange,
+							onKeyDown: handleInputKeydown,
+							placeholder: tagInputState.length === 0 ? placeholder : "",
+							readOnly,
+							ref: inputRef,
+							style,
+							type: "text",
+							value: input
+						})]
+					}), computedClearable || success || error ? /* @__PURE__ */ jsxs("div", {
+						className: tagInputStateContainer,
+						children: [
+							computedClearable ? /* @__PURE__ */ jsx(Button, {
+								"aria-label": "clear value",
+								disabled,
+								onClick: clearAll,
+								sentiment: "neutral",
+								size: "xsmall",
+								variant: "ghost",
+								children: /* @__PURE__ */ jsx(CloseIcon, {})
+							}) : null,
+							success ? /* @__PURE__ */ jsx(CheckCircleOutlineIcon, {
+								disabled,
+								sentiment: "success",
+								size: "small"
+							}) : null,
+							error ? /* @__PURE__ */ jsx(AlertCircleIcon, {
+								disabled,
+								sentiment: "danger",
+								size: "small"
+							}) : null
+						]
+					}) : null]
+				})
+			}) }),
+			error || typeof success === "string" || helper ? /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				disabled: disabled || readOnly,
+				prominence: error || success ? void 0 : "weak",
+				sentiment: helperSentiment,
+				variant: "caption",
+				children: error || success || helper
+			}) : null
+		]
+	});
 };
+
+//#endregion
+export { TagInput };

package/dist/components/TagInput/styles.css.js

@@ -1,12 +1,20 @@
-/* empty css                          */
+/* empty css                      */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var tagInputContainer = createRuntimeFn({ defaultClassName: "uv_sjgcm20", variantClassNames: { size: { large: "uv_sjgcm21", medium: "uv_sjgcm22", small: "uv_sjgcm23" } }, defaultVariants: { size: "large" }, compoundVariants: [] });
+
+//#region src/components/TagInput/styles.css.ts
+var tagInputContainer = createRuntimeFn({
+	defaultClassName: "uv_sjgcm20",
+	variantClassNames: { size: {
+		large: "uv_sjgcm21",
+		medium: "uv_sjgcm22",
+		small: "uv_sjgcm23"
+	} },
+	defaultVariants: { size: "large" },
+	compoundVariants: []
+});
 var tagInputDataContainer = "uv_sjgcm24";
 var tagInputStateContainer = "uv_sjgcm25";
 var tagInput = "uv_sjgcm26";
-export {
-  tagInput,
-  tagInputContainer,
-  tagInputDataContainer,
-  tagInputStateContainer
-};
+
+//#endregion
+export { tagInput, tagInputContainer, tagInputDataContainer, tagInputStateContainer };

package/dist/components/TagList/constant.js

@@ -1,5 +1,7 @@
 import { consoleLightTheme } from "@ultraviolet/themes";
+
+//#region src/components/TagList/constant.ts
 const TAGS_GAP = consoleLightTheme.space["1"];
-export {
-  TAGS_GAP
-};
+
+//#endregion
+export { TAGS_GAP };

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

@@ -40,6 +40,6 @@ type TagListProps = {
 /**
  * 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, popoverMaxHeight, copiable, copyText, copiedText, className, "data-testid": dataTestId, style, }: TagListProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const TagList: ({ maxLength, tags, threshold, multiline, popoverTitle, popoverPlacement, popoverMaxHeight, copiable, copyText, copiedText, className, 'data-testid': dataTestId, style, }: TagListProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagList/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAa5B,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,SAAS,CAAA;CAAE,CAAA;AAEjE,KAAK,YAAY,GAAG;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAA;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,WAAW,CAAC,CAAA;IAC9D;;OAEG;IACH,gBAAgB,CAAC,EAAE,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,WAAW,CAAC,CAAA;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,CAAC,CAAA;AAO5E;;GAEG;AACH,eAAO,MAAM,OAAO,GAAI,2KAcrB,YAAY,mDAoRd,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagList/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAa5B,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,SAAS,CAAA;CAAE,CAAA;AAEjE,KAAK,YAAY,GAAG;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAA;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,WAAW,CAAC,CAAA;IAC9D;;OAEG;IACH,gBAAgB,CAAC,EAAE,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,WAAW,CAAC,CAAA;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,CAAC,CAAA;AAO5E;;GAEG;AACH,eAAO,MAAM,OAAO,6OAkSnB,CAAA"}