@ultraviolet/ui 3.8.2 → 3.10.0

package/dist/components/FileInput/index.js

@@ -1,298 +1,252 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { UploadIcon } from "@ultraviolet/icons/UploadIcon";
-import { useState, useId, useRef, useLayoutEffect, useEffect } from "react";
-import { Label } from "../Label/index.js";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
+import { Label } from "../Label/index.js";
+import { FileInputContext } from "./FileInputProvider.js";
 import { FileInputButton } from "./components/Button.js";
+import { fileIsAccepted } from "./helpers.js";
+import { dropzone, dropzoneOverlay, dropzoneOverlayDisabled, fileInput, overlayWrapper, titleSmall } from "./styles.css.js";
 import { ListFiles } from "./components/List.js";
-import { FileInputContext } from "./FileInputProvider.js";
-import { fileInput, overlayWrapper, dropzoneOverlayDisabled, dropzoneOverlay, dropzone, titleSmall } from "./styles.css.js";
-const FileInputBase = ({
-  style,
-  className,
-  variant = "dropzone",
-  size = "medium",
-  title,
-  children,
-  onDrop,
-  label,
-  labelDescription,
-  disabled,
-  accept,
-  "aria-label": ariaLabel,
-  defaultFiles,
-  onChangeFiles,
-  helper,
-  multiple = false,
-  bottom,
-  required,
-  error,
-  "data-testid": dataTestid
-}) => {
-  const [dragState, setDragState] = useState(
-    "default"
-  );
-  const [files, setFiles] = useState(defaultFiles ?? []);
-  const inputId = useId();
-  const inputRef = useRef(null);
-  const onDragOver = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    setDragState("over");
-  };
-  const onDragPage = () => setDragState("page");
-  const handleDrop = () => setDragState("default");
-  const handleDragLeave = (event) => {
-    const dragEvent = event;
-    if (event.type === "dragend" || dragEvent.relatedTarget === null) {
-      setDragState("default");
-    }
-  };
-  useLayoutEffect(() => {
-    window.addEventListener("dragenter", onDragPage);
-    window.addEventListener("dragend", handleDragLeave);
-    window.addEventListener("drop", handleDrop);
-    window.addEventListener("dragleave", handleDragLeave);
-    return () => {
-      window.removeEventListener("dragenter", onDragPage);
-      window.removeEventListener("dragend", handleDragLeave);
-      window.removeEventListener("drop", handleDrop);
-      window.removeEventListener("dragleave", handleDragLeave);
-    };
-  }, []);
-  useEffect(() => {
-    if (defaultFiles) {
-      setFiles(defaultFiles);
-    }
-  }, [defaultFiles]);
-  const manageDrop = (event) => {
-    event.preventDefault();
-    if (!disabled) {
-      const droppedFiles = [...event.dataTransfer?.files ?? []];
-      const newFiles = droppedFiles.map((file) => ({
-        file: URL.createObjectURL(file),
-        fileName: file.name,
-        lastModified: file.lastModified,
-        size: file.size,
-        type: file.type
-      }));
-      const formattedFiles = multiple ? [...files, ...newFiles] : newFiles;
-      setFiles(formattedFiles);
-      onDrop?.(event);
-      onChangeFiles?.(formattedFiles);
-    }
-  };
-  const onChange = (event) => {
-    event.preventDefault();
-    if (!disabled) {
-      const addedFiles = [...event.target.files ?? []];
-      const newFiles = addedFiles.map((file) => ({
-        file: URL.createObjectURL(file),
-        fileName: file.name,
-        lastModified: file.lastModified,
-        size: file.size,
-        type: file.type
-      }));
-      const formattedFiles = multiple ? [...files, ...newFiles] : newFiles;
-      setFiles(formattedFiles);
-      onChangeFiles?.(formattedFiles);
-    }
-  };
-  if (variant === "overlay") {
-    return /* @__PURE__ */ jsx(
-      FileInputContext.Provider,
-      {
-        value: {
-          disabled,
-          error: !!error,
-          files,
-          inputRef,
-          onChangeFiles,
-          setFiles
-        },
-        children: /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: 1, children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className,
-              "data-testid": "drag-container",
-              onDragOver,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    accept,
-                    className: fileInput,
-                    "data-testid": dataTestid,
-                    id: inputId,
-                    multiple,
-                    name: label ?? ariaLabel,
-                    onChange,
-                    ref: inputRef,
-                    required,
-                    type: "file"
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: overlayWrapper, children: [
-                  typeof children === "function" ? children(inputId, inputRef) : children,
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: disabled ? dropzoneOverlayDisabled[dragState] : dropzoneOverlay[dragState],
-                      onDragOver: (event) => event.preventDefault(),
-                      onDrop: (event) => {
-                        if (!disabled) {
-                          onDrop?.(event);
-                          manageDrop(event);
-                        }
-                      },
-                      style,
-                      children: title && typeof title !== "function" && dragState !== "default" ? /* @__PURE__ */ jsx(
-                        Text,
-                        {
-                          as: "div",
-                          disabled,
-                          sentiment: "primary",
-                          variant: "bodySmallStrong",
-                          children: title
-                        }
-                      ) : null
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          bottom ? /* @__PURE__ */ jsx(
-            Text,
-            {
-              as: "div",
-              disabled,
-              prominence: "weak",
-              sentiment: "neutral",
-              variant: "caption",
-              children: bottom
-            }
-          ) : null,
-          error && typeof error === "string" ? /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "danger", variant: "bodySmall", children: error }) : null
-        ] })
-      }
-    );
-  }
-  const isSmall = size === "small";
-  return /* @__PURE__ */ jsx(
-    FileInputContext.Provider,
-    {
-      value: {
-        disabled,
-        error: !!error,
-        files,
-        inputRef,
-        onChangeFiles,
-        setFiles
-      },
-      children: /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: 1, children: [
-        /* @__PURE__ */ jsxs(Stack, { className, direction: "column", gap: 0.5, children: [
-          label || labelDescription ? /* @__PURE__ */ jsx(
-            Label,
-            {
-              labelDescription,
-              required,
-              size,
-              children: label
-            }
-          ) : null,
-          /* @__PURE__ */ jsx(Text, { as: "div", disabled, sentiment: "neutral", variant: "body", children: /* @__PURE__ */ jsxs(
-            Stack,
-            {
-              alignItems: "center",
-              className: dropzone({ disabled, size, state: dragState }),
-              "data-testid": "drag-container",
-              direction: isSmall ? "row" : "column",
-              gap: isSmall ? 1 : 2,
-              justifyContent: "center",
-              onDragOver,
-              onDrop: (event) => {
-                if (!disabled) {
-                  onDrop?.(event);
-                  manageDrop(event);
-                }
-              },
-              style,
-              children: [
-                disabled ? null : /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    accept,
-                    className: fileInput,
-                    "data-testid": dataTestid,
-                    disabled,
-                    id: inputId,
-                    name: label ?? ariaLabel,
-                    onChange,
-                    ref: inputRef,
-                    required,
-                    type: "file"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  UploadIcon,
-                  {
-                    disabled,
-                    sentiment: isSmall ? "neutral" : "primary",
-                    size: isSmall ? "small" : "xlarge"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    as: isSmall ? "label" : "div",
-                    className: isSmall ? titleSmall[disabled ? "disabled" : "default"] : void 0,
-                    disabled,
-                    htmlFor: inputId,
-                    placement: "left",
-                    sentiment: "neutral",
-                    variant: isSmall ? "bodySmallStrong" : "headingSmallStrong",
-                    children: typeof title === "function" ? title(inputId, inputRef) : title
-                  }
-                ),
-                typeof children === "function" ? children(inputId, inputRef) : children
-              ]
-            }
-          ) }),
-          helper ? /* @__PURE__ */ jsx(
-            Text,
-            {
-              as: "p",
-              prominence: "weak",
-              sentiment: "neutral",
-              variant: "caption",
-              children: helper
-            }
-          ) : null
-        ] }),
-        error && typeof error === "string" ? /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "danger", variant: "bodySmall", children: error }) : null,
-        bottom ? /* @__PURE__ */ jsx(
-          Text,
-          {
-            as: "div",
-            disabled,
-            prominence: "weak",
-            sentiment: "neutral",
-            variant: "caption",
-            children: bottom
-          }
-        ) : null
-      ] })
-    }
-  );
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { UploadIcon } from "@ultraviolet/icons/UploadIcon";
+
+//#region src/components/FileInput/index.tsx
+/**
+* FileInput allow user to drag & drop and upload one or multiple files.
+*/
+const FileInputBase = ({ style, className, variant = "dropzone", size = "medium", title, children, onDrop, label, labelDescription, disabled, accept, "aria-label": ariaLabel, defaultFiles, onChangeFiles, helper, multiple = false, bottom, required, error, "data-testid": dataTestid }) => {
+	const [dragState, setDragState] = useState("default");
+	const [files, setFiles] = useState(defaultFiles !== null && defaultFiles !== void 0 ? defaultFiles : []);
+	const inputId = useId();
+	const inputRef = useRef(null);
+	const onDragOver = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		setDragState("over");
+	};
+	const onDragPage = () => setDragState("page");
+	const handleDrop = () => setDragState("default");
+	const handleDragLeave = (event) => {
+		const dragEvent = event;
+		if (event.type === "dragend" || dragEvent.relatedTarget === null) setDragState("default");
+	};
+	useLayoutEffect(() => {
+		window.addEventListener("dragenter", onDragPage);
+		window.addEventListener("dragend", handleDragLeave);
+		window.addEventListener("drop", handleDrop);
+		window.addEventListener("dragleave", handleDragLeave);
+		return () => {
+			window.removeEventListener("dragenter", onDragPage);
+			window.removeEventListener("dragend", handleDragLeave);
+			window.removeEventListener("drop", handleDrop);
+			window.removeEventListener("dragleave", handleDragLeave);
+		};
+	}, []);
+	useEffect(() => {
+		if (defaultFiles) setFiles(defaultFiles);
+	}, [defaultFiles]);
+	const addFiles = (addedFiles) => {
+		const newFiles = [...addedFiles !== null && addedFiles !== void 0 ? addedFiles : []].filter((file) => fileIsAccepted(file.type, accept)).map((file) => ({
+			file: URL.createObjectURL(file),
+			fileName: file.name,
+			lastModified: file.lastModified,
+			size: file.size,
+			type: file.type
+		}));
+		const formattedFiles = multiple ? [...files, ...newFiles] : [newFiles[0]];
+		setFiles(formattedFiles);
+		onChangeFiles === null || onChangeFiles === void 0 || onChangeFiles(formattedFiles);
+	};
+	const manageDrop = (event) => {
+		event.preventDefault();
+		if (!disabled) {
+			var _event$dataTransfer;
+			addFiles((_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.files);
+			onDrop === null || onDrop === void 0 || onDrop(event);
+		}
+	};
+	const onChange = (event) => {
+		event.preventDefault();
+		if (!disabled) addFiles(event.target.files);
+	};
+	const computedChildren = typeof children === "function" ? children(inputId, inputRef) : children;
+	const computedError = error && typeof error === "string" ? /* @__PURE__ */ jsx(Text, {
+		as: "p",
+		sentiment: "danger",
+		variant: "bodySmall",
+		children: error
+	}) : null;
+	if (variant === "overlay") return /* @__PURE__ */ jsx(FileInputContext.Provider, {
+		value: {
+			disabled,
+			error: !!error,
+			files,
+			inputRef,
+			onChangeFiles,
+			setFiles
+		},
+		children: /* @__PURE__ */ jsxs(Stack, {
+			direction: "column",
+			gap: 1,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className,
+					"data-testid": "drag-container",
+					onDragOver,
+					children: [/* @__PURE__ */ jsx("input", {
+						accept,
+						className: fileInput,
+						"data-testid": dataTestid,
+						id: inputId,
+						multiple,
+						name: label !== null && label !== void 0 ? label : ariaLabel,
+						onChange,
+						ref: inputRef,
+						required,
+						type: "file"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: overlayWrapper,
+						children: [computedChildren, /* @__PURE__ */ jsx("div", {
+							className: disabled ? dropzoneOverlayDisabled[dragState] : dropzoneOverlay[dragState],
+							onDragOver: (event) => event.preventDefault(),
+							onDrop: (event) => {
+								if (!disabled) {
+									onDrop === null || onDrop === void 0 || onDrop(event);
+									manageDrop(event);
+								}
+							},
+							style,
+							children: title && typeof title !== "function" && dragState !== "default" ? /* @__PURE__ */ jsx(Text, {
+								as: "div",
+								disabled,
+								sentiment: "primary",
+								variant: "bodySmallStrong",
+								children: title
+							}) : null
+						})]
+					})]
+				}),
+				bottom ? /* @__PURE__ */ jsx(Text, {
+					as: "div",
+					disabled,
+					prominence: "weak",
+					sentiment: "neutral",
+					variant: "caption",
+					children: bottom
+				}) : null,
+				computedError
+			]
+		})
+	});
+	const isSmall = size === "small";
+	return /* @__PURE__ */ jsx(FileInputContext.Provider, {
+		value: {
+			disabled,
+			error: !!error,
+			files,
+			inputRef,
+			onChangeFiles,
+			setFiles
+		},
+		children: /* @__PURE__ */ jsxs(Stack, {
+			direction: "column",
+			gap: 1,
+			children: [
+				/* @__PURE__ */ jsxs(Stack, {
+					className,
+					direction: "column",
+					gap: .5,
+					children: [
+						label || labelDescription ? /* @__PURE__ */ jsx(Label, {
+							labelDescription,
+							required,
+							size,
+							children: label
+						}) : null,
+						/* @__PURE__ */ jsx(Text, {
+							as: "div",
+							disabled,
+							sentiment: "neutral",
+							variant: "body",
+							children: /* @__PURE__ */ jsxs(Stack, {
+								alignItems: "center",
+								className: dropzone({
+									disabled,
+									size,
+									state: dragState
+								}),
+								"data-testid": "drag-container",
+								direction: isSmall ? "row" : "column",
+								gap: isSmall ? 1 : 2,
+								justifyContent: "center",
+								onDragOver,
+								onDrop: (event) => {
+									if (!disabled) {
+										onDrop === null || onDrop === void 0 || onDrop(event);
+										manageDrop(event);
+									}
+								},
+								style,
+								children: [
+									disabled ? null : /* @__PURE__ */ jsx("input", {
+										accept,
+										className: fileInput,
+										"data-testid": dataTestid,
+										disabled,
+										id: inputId,
+										name: label !== null && label !== void 0 ? label : ariaLabel,
+										onChange,
+										ref: inputRef,
+										required,
+										type: "file"
+									}),
+									/* @__PURE__ */ jsx(UploadIcon, {
+										disabled,
+										sentiment: isSmall ? "neutral" : "primary",
+										size: isSmall ? "small" : "xlarge"
+									}),
+									/* @__PURE__ */ jsx(Text, {
+										as: isSmall ? "label" : "div",
+										className: isSmall ? titleSmall[disabled ? "disabled" : "default"] : void 0,
+										disabled,
+										htmlFor: inputId,
+										placement: "left",
+										sentiment: "neutral",
+										variant: isSmall ? "bodySmallStrong" : "headingSmallStrong",
+										children: typeof title === "function" ? title(inputId, inputRef) : title
+									}),
+									computedChildren
+								]
+							})
+						}),
+						helper ? /* @__PURE__ */ jsx(Text, {
+							as: "p",
+							prominence: "weak",
+							sentiment: "neutral",
+							variant: "caption",
+							children: helper
+						}) : null
+					]
+				}),
+				computedError,
+				bottom ? /* @__PURE__ */ jsx(Text, {
+					as: "div",
+					disabled,
+					prominence: "weak",
+					sentiment: "neutral",
+					variant: "caption",
+					children: bottom
+				}) : null
+			]
+		})
+	});
 };
 const FileInput = Object.assign(FileInputBase, {
-  Button: FileInputButton,
-  List: ListFiles
+	Button: FileInputButton,
+	List: ListFiles
 });
-export {
-  FileInput
-};
+
+//#endregion
+export { FileInput };

package/dist/components/FileInput/styles.css.d.ts

@@ -22,9 +22,9 @@ export declare const dropzone: import("@vanilla-extract/recipes").RuntimeFn<{
 export declare const fileInput: string;
 export declare const titleSmall: Record<"default" | "disabled", string>;
 export declare const overlayWrapper: string;
-export declare const dropzoneOverlay: Record<"default" | "page" | "over", string>;
-export declare const dropzoneOverlayDisabled: Record<"default" | "page" | "over", string>;
-export declare const fileViewerContainer: Record<"default" | "strong" | "error", string>;
+export declare const dropzoneOverlay: Record<"default" | "over" | "page", string>;
+export declare const dropzoneOverlayDisabled: Record<"default" | "over" | "page", string>;
+export declare const fileViewerContainer: Record<"default" | "error" | "strong", string>;
 export declare const fileViewerImageBase: string;
 export declare const fileViewerImage: Record<"default" | "error", string>;
 export declare const fileInfo: string;

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

@@ -1,22 +1,57 @@
-/* empty css                          */
+/* empty css                      */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var dropzone = createRuntimeFn({ defaultClassName: "uv_12cubgs0", variantClassNames: { disabled: { true: "uv_12cubgs1" }, size: { medium: "uv_12cubgs2", small: "uv_12cubgs3" }, state: { "default": "uv_12cubgs4", over: "uv_12cubgs5", page: "uv_12cubgs6" } }, defaultVariants: { disabled: false, size: "medium", state: "default" }, compoundVariants: [[{ disabled: false, state: "over" }, "uv_12cubgs7"]] });
+
+//#region src/components/FileInput/styles.css.ts
+var dropzone = createRuntimeFn({
+	defaultClassName: "uv_12cubgs0",
+	variantClassNames: {
+		disabled: { true: "uv_12cubgs1" },
+		size: {
+			medium: "uv_12cubgs2",
+			small: "uv_12cubgs3"
+		},
+		state: {
+			"default": "uv_12cubgs4",
+			over: "uv_12cubgs5",
+			page: "uv_12cubgs6"
+		}
+	},
+	defaultVariants: {
+		disabled: false,
+		size: "medium",
+		state: "default"
+	},
+	compoundVariants: [[{
+		disabled: false,
+		state: "over"
+	}, "uv_12cubgs7"]]
+});
 var fileInput = "uv_12cubgs8";
-var titleSmall = { "default": "uv_12cubgs9", disabled: "uv_12cubgsa" };
+var titleSmall = {
+	"default": "uv_12cubgs9",
+	disabled: "uv_12cubgsa"
+};
 var overlayWrapper = "uv_12cubgsb";
-var dropzoneOverlay = { "default": "uv_12cubgsd uv_12cubgsc", over: "uv_12cubgse uv_12cubgsc", page: "uv_12cubgsf uv_12cubgsc" };
-var dropzoneOverlayDisabled = { "default": "uv_12cubgsh", over: "uv_12cubgsi uv_12cubgsg", page: "uv_12cubgsj uv_12cubgsg" };
-var fileViewerContainer = { "default": "uv_12cubgsl uv_12cubgsk", error: "uv_12cubgsm uv_12cubgsk", strong: "uv_12cubgsn uv_12cubgsk" };
-var fileViewerImage = { "default": "uv_12cubgsp uv_12cubgso", error: "uv_12cubgsq uv_12cubgso" };
-var fileInfo = "uv_12cubgsr";
-export {
-  dropzone,
-  dropzoneOverlay,
-  dropzoneOverlayDisabled,
-  fileInfo,
-  fileInput,
-  fileViewerContainer,
-  fileViewerImage,
-  overlayWrapper,
-  titleSmall
+var dropzoneOverlay = {
+	"default": "uv_12cubgsd uv_12cubgsc",
+	over: "uv_12cubgse uv_12cubgsc",
+	page: "uv_12cubgsf uv_12cubgsc"
+};
+var dropzoneOverlayDisabled = {
+	"default": "uv_12cubgsh",
+	over: "uv_12cubgsi uv_12cubgsg",
+	page: "uv_12cubgsj uv_12cubgsg"
 };
+var fileViewerContainer = {
+	"default": "uv_12cubgsl uv_12cubgsk",
+	error: "uv_12cubgsm uv_12cubgsk",
+	strong: "uv_12cubgsn uv_12cubgsk"
+};
+var fileViewerImage = {
+	"default": "uv_12cubgsp uv_12cubgso",
+	error: "uv_12cubgsq uv_12cubgso"
+};
+var fileInfo = "uv_12cubgsr";
+
+//#endregion
+export { dropzone, dropzoneOverlay, dropzoneOverlayDisabled, fileInfo, fileInput, fileViewerContainer, fileViewerImage, overlayWrapper, titleSmall };

package/dist/components/GlobalAlert/GlobalAlertLink.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'react';
 import { Link } from '../Link';
 type GlobalAlertLinkProps = Omit<ComponentProps<typeof Link>, 'sentiment' | 'prominence' | 'size' | 'render'> & NonNullable<Pick<ComponentProps<typeof Link>, 'href'>>;
-export declare const GlobalAlertLink: ({ children, href, target, download, rel, className, onClick, "aria-label": ariaLabel, oneLine, "data-testid": dataTestId, style, }: GlobalAlertLinkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GlobalAlertLink: ({ children, href, target, download, rel, className, onClick, 'aria-label': ariaLabel, oneLine, 'data-testid': dataTestId, style, }: GlobalAlertLinkProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=GlobalAlertLink.d.ts.map