@vectara/vectara-ui 18.4.0 → 19.1.0

package/lib/components/composer/Composer.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { BiPaperclip } from "react-icons/bi";
+import classNames from "classnames";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiIcon } from "../icon/Icon";
+import { VuiIconButton } from "../button/IconButton";
+import { VuiButtonPrimary } from "../button/ButtonPrimary";
+import { VuiBadge } from "../badge/Badge";
+import { VuiSpacer } from "../spacer/Spacer";
+import { VuiTextArea } from "../form";
+import { VuiFileDropTarget } from "../fileDropTarget/FileDropTarget";
+import { useComposerHistory } from "./useComposerHistory";
+const MOD_ORDER = ["mod", "alt", "shift"];
+// Single-character keys are matched case-insensitively; named keys keep their case.
+const normalizeKeyName = (key) => (key.length === 1 ? key.toLowerCase() : key);
+const canonical = (mods, key) => [...MOD_ORDER.filter((mod) => mods.has(mod)), normalizeKeyName(key)].join("+");
+const eventSignature = (e) => {
+    const mods = new Set();
+    // Treat Cmd and Ctrl interchangeably so "Mod+k" works across platforms.
+    if (e.metaKey || e.ctrlKey)
+        mods.add("mod");
+    if (e.altKey)
+        mods.add("alt");
+    if (e.shiftKey)
+        mods.add("shift");
+    return canonical(mods, e.key);
+};
+const comboSignature = (combo) => {
+    var _a;
+    const segments = combo.split("+").map((segment) => segment.trim());
+    const key = (_a = segments.pop()) !== null && _a !== void 0 ? _a : "";
+    const mods = new Set();
+    for (const segment of segments) {
+        const mod = segment.toLowerCase();
+        mods.add(mod === "ctrl" || mod === "meta" ? "mod" : mod);
+    }
+    return canonical(mods, key);
+};
+export const VuiComposer = ({ onSubmit, isRunning, onCancel, isSendDisabled, sendLabel = "Send", cancelLabel = "Cancel", placeholder, autoFocus, onChange, value, enableHistory, historyKey, canUploadFiles, accept, validateFile, onFilesRejected, fileDropScope = "document", fileDropMessage, onShortcutKeys, leadingActions, footer, className, "data-testid": dataTestId }) => {
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = useState("");
+    const [files, setFiles] = useState([]);
+    const fileInputRef = useRef(null);
+    const composerRef = useRef(null);
+    const currentValue = isControlled ? value : internalValue;
+    const setValue = (next) => {
+        if (!isControlled)
+            setInternalValue(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    };
+    const clear = () => setValue("");
+    const history = useComposerHistory({ storageKey: historyKey, value: currentValue, setValue });
+    const isEmptyMessage = currentValue.trim() === "" && files.length === 0;
+    const addFiles = (incoming) => {
+        const existingNames = new Set(files.map((file) => file.name));
+        const deduped = incoming.filter((file) => !existingNames.has(file.name));
+        if (!validateFile) {
+            if (deduped.length > 0)
+                setFiles((prev) => [...prev, ...deduped]);
+            return;
+        }
+        const valid = [];
+        const rejected = [];
+        for (const file of deduped) {
+            const message = validateFile(file);
+            if (message)
+                rejected.push({ file, message });
+            else
+                valid.push(file);
+        }
+        if (valid.length > 0)
+            setFiles((prev) => [...prev, ...valid]);
+        if (rejected.length > 0)
+            onFilesRejected === null || onFilesRejected === void 0 ? void 0 : onFilesRejected(rejected);
+    };
+    const removeFile = (index) => {
+        setFiles((prev) => prev.filter((_, i) => i !== index));
+    };
+    const submit = () => {
+        if (isEmptyMessage || isSendDisabled)
+            return;
+        onSubmit({ text: currentValue, files });
+        if (enableHistory)
+            history.record(currentValue);
+        setValue("");
+        setFiles([]);
+    };
+    const handleChange = (e) => {
+        setValue(e.target.value);
+        // Any edit cancels in-progress history navigation.
+        if (enableHistory)
+            history.reset();
+    };
+    const handleKeyDown = (e) => {
+        var _a;
+        // Consumer shortcuts run first; preventDefault suppresses built-in handling.
+        if (onShortcutKeys) {
+            const signature = eventSignature(e);
+            for (const combo in onShortcutKeys) {
+                if (comboSignature(combo) === signature) {
+                    onShortcutKeys[combo](e, { value: currentValue, setValue, clear });
+                    break;
+                }
+            }
+            if (e.defaultPrevented)
+                return;
+        }
+        // Enter submits; Shift+Enter falls through so the textarea inserts a newline.
+        if (!e.shiftKey && e.code === "Enter") {
+            e.preventDefault();
+            submit();
+            return;
+        }
+        // Only let history cycling kick in when the caret is at the textarea's
+        // vertical boundary in the direction of the arrow key — otherwise the native
+        // textarea must move the caret between internal lines. Without this gate, the
+        // hook's primed→cycling state machine (designed for a single-line input)
+        // would replace the textarea contents regardless of caret position.
+        if (enableHistory && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+            const el = e.currentTarget;
+            const pos = (_a = el.selectionStart) !== null && _a !== void 0 ? _a : 0;
+            // A caret at position 0 is always on the first line. We special-case it
+            // because lastIndexOf("\n", -1) clamps its negative fromIndex to 0 and then
+            // inspects index 0 — so a value that begins with a newline would be wrongly
+            // reported as "not first line", trapping history navigation. Otherwise,
+            // lastIndexOf("\n", pos - 1) scans backward from the character just before
+            // the caret; -1 means no newline precedes it, so it is on the first line.
+            const cursorOnFirstLine = pos === 0 || el.value.lastIndexOf("\n", pos - 1) === -1;
+            // indexOf("\n", pos) scans forward from the caret; -1 means no newline at or
+            // after it, so it is on the last line.
+            const cursorOnLastLine = el.value.indexOf("\n", pos) === -1;
+            if (e.key === "ArrowUp" && !cursorOnFirstLine)
+                return;
+            if (e.key === "ArrowDown" && !cursorOnLastLine)
+                return;
+            history.handleKeyDown(e);
+        }
+    };
+    const handleFileInputChange = (e) => {
+        if (e.target.files)
+            addFiles(Array.from(e.target.files));
+        // Reset so selecting the same file again still fires a change event.
+        e.target.value = "";
+    };
+    return (_jsxs("div", Object.assign({ className: classNames("vuiComposer", className), "data-testid": dataTestId, ref: composerRef }, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "end", fullWidth: true, spacing: "xs" }, { children: [canUploadFiles && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { color: "neutral", "aria-label": "Attach files", icon: _jsx(VuiIcon, { children: _jsx(BiPaperclip, {}) }), onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); } }) })), leadingActions, _jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsx(VuiTextArea, { autoFocus: autoFocus, autoGrow: true, fullWidth: true, rows: 1, placeholder: placeholder, value: currentValue, onChange: handleChange, onKeyDown: handleKeyDown }) })), _jsx(VuiFlexItem, { children: isRunning ? (_jsx(VuiButtonPrimary, Object.assign({ color: "subdued", size: "l", onClick: onCancel }, { children: cancelLabel }))) : (_jsx(VuiButtonPrimary, Object.assign({ color: "primary", size: "l", onClick: submit, isDisabled: isEmptyMessage || isSendDisabled }, { children: sendLabel }))) })] })), canUploadFiles && (_jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: accept, style: { display: "none" }, onChange: handleFileInputChange })), files.length > 0 && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiFlexContainer, Object.assign({ fullWidth: true, wrap: true, spacing: "xxs" }, { children: files.map((file, index) => (_jsx(VuiBadge, Object.assign({ color: "primary", onClose: () => removeFile(index) }, { children: file.name }), file.name))) }))] })), footer, canUploadFiles && (_jsx(VuiFileDropTarget, { onFilesDropped: addFiles, message: fileDropMessage, scopeRef: fileDropScope === "composer" ? composerRef : undefined }))] })));
+};

package/lib/components/composer/_index.scss

@@ -0,0 +1,4 @@
+.vuiComposer {
+  position: relative;
+  width: 100%;
+}

package/lib/components/composer/useComposerHistory.d.ts

@@ -0,0 +1,34 @@
+import { KeyboardEvent } from "react";
+type Args = {
+    storageKey?: string;
+    value: string;
+    setValue: (value: string) => void;
+};
+/**
+ * Cycles through previous submissions with UP/DOWN arrow keys.
+ *
+ * State machine for navigation (3 phases):
+ *
+ *   idle    — no navigation active.
+ *   primed  — first key press (UP/DOWN) consumed by native cursor movement.
+ *   cycling — UP/DOWN keys walk through the history stack.
+ *
+ * Transitions on arrow key press:
+ *
+ *   idle  + empty input + UP    → cycling  (skip primed, start navigating immediately)
+ *   idle  + empty input + DOWN  → idle     (nothing to cycle to)
+ *   idle  + has text    + UP/DN → primed   (let native cursor move first)
+ *   primed  + same direction    → cycling  (second press enters history)
+ *   primed  + diff direction    → primed   (re-prime for the new direction)
+ *   cycling + same direction    → cycling  (keep walking history)
+ *   cycling + diff direction    → primed   (let native cursor adjust, re-prime)
+ *
+ * The composer calls reset() on any user edit and record() on submit, both of
+ * which return the machine to idle.
+ */
+export declare function useComposerHistory({ storageKey, value, setValue }: Args): {
+    handleKeyDown: (e: KeyboardEvent) => void;
+    record: (input: string) => void;
+    reset: () => void;
+};
+export {};

package/lib/components/composer/useComposerHistory.js

@@ -0,0 +1,127 @@
+import { useRef, useState } from "react";
+function loadHistory(storageKey) {
+    try {
+        const stored = sessionStorage.getItem(storageKey);
+        return stored ? JSON.parse(stored) : [];
+    }
+    catch (_a) {
+        return [];
+    }
+}
+function saveHistory(storageKey, history) {
+    try {
+        sessionStorage.setItem(storageKey, JSON.stringify(history));
+    }
+    catch (_a) {
+        // Quota exceeded or unavailable — silently drop.
+    }
+}
+/**
+ * Cycles through previous submissions with UP/DOWN arrow keys.
+ *
+ * State machine for navigation (3 phases):
+ *
+ *   idle    — no navigation active.
+ *   primed  — first key press (UP/DOWN) consumed by native cursor movement.
+ *   cycling — UP/DOWN keys walk through the history stack.
+ *
+ * Transitions on arrow key press:
+ *
+ *   idle  + empty input + UP    → cycling  (skip primed, start navigating immediately)
+ *   idle  + empty input + DOWN  → idle     (nothing to cycle to)
+ *   idle  + has text    + UP/DN → primed   (let native cursor move first)
+ *   primed  + same direction    → cycling  (second press enters history)
+ *   primed  + diff direction    → primed   (re-prime for the new direction)
+ *   cycling + same direction    → cycling  (keep walking history)
+ *   cycling + diff direction    → primed   (let native cursor adjust, re-prime)
+ *
+ * The composer calls reset() on any user edit and record() on submit, both of
+ * which return the machine to idle.
+ */
+export function useComposerHistory({ storageKey, value, setValue }) {
+    const historyRef = useRef(storageKey ? loadHistory(storageKey) : []);
+    const [historyIndex, setHistoryIndex] = useState(null);
+    const draftRef = useRef("");
+    const phaseRef = useRef("idle");
+    const directionRef = useRef(null);
+    const reset = () => {
+        setHistoryIndex(null);
+        phaseRef.current = "idle";
+        directionRef.current = null;
+    };
+    const record = (input) => {
+        if (input.trim()) {
+            historyRef.current = [...historyRef.current, input];
+            if (storageKey)
+                saveHistory(storageKey, historyRef.current);
+        }
+        reset();
+    };
+    const handleKeyDown = (e) => {
+        if (e.key !== "ArrowUp" && e.key !== "ArrowDown")
+            return;
+        const history = historyRef.current;
+        if (history.length === 0)
+            return;
+        const direction = e.key === "ArrowUp" ? "up" : "down";
+        const phase = phaseRef.current;
+        const lastDirection = directionRef.current;
+        // Idle with text in input — let native cursor handle the first press.
+        if (phase === "idle" && value.length > 0) {
+            phaseRef.current = "primed";
+            directionRef.current = direction;
+            return;
+        }
+        // Idle with empty input — skip primed and start cycling immediately on UP; ignore DOWN.
+        if (phase === "idle") {
+            if (direction === "down")
+                return;
+            e.preventDefault();
+            draftRef.current = value;
+            const newIndex = history.length - 1;
+            setHistoryIndex(newIndex);
+            setValue(history[newIndex]);
+            phaseRef.current = "cycling";
+            directionRef.current = direction;
+            return;
+        }
+        // Direction changed — let native cursor handle it, re-prime.
+        if (direction !== lastDirection) {
+            phaseRef.current = "primed";
+            directionRef.current = direction;
+            return;
+        }
+        // Same direction: primed → cycling, or cycling → cycling.
+        // Primed DOWN with no active cycling — nothing to cycle to.
+        if (direction === "down" && historyIndex === null)
+            return;
+        e.preventDefault();
+        if (direction === "up") {
+            if (historyIndex === null) {
+                draftRef.current = value;
+                const newIndex = history.length - 1;
+                setHistoryIndex(newIndex);
+                setValue(history[newIndex]);
+            }
+            else if (historyIndex > 0) {
+                const newIndex = historyIndex - 1;
+                setHistoryIndex(newIndex);
+                setValue(history[newIndex]);
+            }
+        }
+        else {
+            if (historyIndex !== null && historyIndex < history.length - 1) {
+                const newIndex = historyIndex + 1;
+                setHistoryIndex(newIndex);
+                setValue(history[newIndex]);
+            }
+            else if (historyIndex !== null) {
+                setHistoryIndex(null);
+                setValue(draftRef.current);
+            }
+        }
+        phaseRef.current = "cycling";
+        directionRef.current = direction;
+    };
+    return { handleKeyDown, record, reset };
+}

package/lib/components/context/Theme.d.ts

@@ -55,6 +55,38 @@ export type Theme = {
     colorBorderMediumRgb?: string;
     colorBorderLight?: string;
     colorBorderLightRgb?: string;
+    colorIndigoBackground?: string;
+    colorIndigoText?: string;
+    colorEmeraldBackground?: string;
+    colorEmeraldText?: string;
+    colorAmberBackground?: string;
+    colorAmberText?: string;
+    colorPinkBackground?: string;
+    colorPinkText?: string;
+    colorSkyBackground?: string;
+    colorSkyText?: string;
+    colorOrangeBackground?: string;
+    colorOrangeText?: string;
+    colorSlateBackground?: string;
+    colorSlateText?: string;
+    colorTealBackground?: string;
+    colorTealText?: string;
+    colorLimeBackground?: string;
+    colorLimeText?: string;
+    colorPurpleBackground?: string;
+    colorPurpleText?: string;
+    colorFuchsiaBackground?: string;
+    colorFuchsiaText?: string;
+    colorRedBackground?: string;
+    colorRedText?: string;
+    colorChart1?: string;
+    colorChart2?: string;
+    colorChart3?: string;
+    colorChart4?: string;
+    colorChart5?: string;
+    colorChart6?: string;
+    colorChart7?: string;
+    colorChart8?: string;
 };
 export declare const toRgba: (hex: string, alpha: number) => string;
 export declare const toRgb: (hex: string) => string;

package/lib/components/context/Theme.js

@@ -42,6 +42,45 @@ const colorDarkerShade = "#1c1d22";
 const colorFullShade = "#0b0c0e";
 // Border colors
 const colorBorderLightShade = "#e3e4f3";
+// Categorical colors
+// Each hue pairs a tinted background with a saturated foreground for text and icons.
+const colorIndigoBackground = "#eef2ff";
+const colorIndigoText = "#4f46e5";
+const colorEmeraldBackground = "#ecfdf5";
+const colorEmeraldText = "#059669";
+const colorAmberBackground = "#fef3c7";
+const colorAmberText = "#b45309";
+const colorPinkBackground = "#fce7f3";
+const colorPinkText = "#be185d";
+const colorSkyBackground = "#e0f2fe";
+const colorSkyText = "#0369a1";
+const colorOrangeBackground = "#ffedd5";
+const colorOrangeText = "#c2410c";
+const colorSlateBackground = "#f1f5f9";
+const colorSlateText = "#475569";
+const colorTealBackground = "#ccfbf1";
+const colorTealText = "#0f766e";
+const colorLimeBackground = "#ecfccb";
+const colorLimeText = "#4d7c0f";
+const colorPurpleBackground = "#f3e8ff";
+const colorPurpleText = "#7e22ce";
+const colorFuchsiaBackground = "#fae8ff";
+const colorFuchsiaText = "#a21caf";
+const colorRedBackground = "#fee2e2";
+const colorRedText = "#b91c1c";
+// Chart colors
+// Grounded in the Okabe-Ito colorblind-safe palette, ordered for maximum
+// contrast between adjacent series and anchored to the brand's blue and purple.
+// The light gold and pure black of the original palette are darkened and
+// softened so they read on a light background.
+const colorChart1 = "#0072b2"; // Blue, neighbors the brand primary.
+const colorChart2 = "#e69f00"; // Orange.
+const colorChart3 = "#009e73"; // Teal-green.
+const colorChart4 = "#cc79a7"; // Mauve, echoes the brand accent.
+const colorChart5 = "#56b4e9"; // Sky.
+const colorChart6 = "#d55e00"; // Vermillion.
+const colorChart7 = "#9a8200"; // Deep gold.
+const colorChart8 = "#3f4551"; // Dark slate.
 export const LIGHT_THEME = {
     // Font
     fontFamily,
@@ -104,7 +143,41 @@ export const LIGHT_THEME = {
     colorBorderMedium: colorMediumShade,
     colorBorderMediumRgb: toRgb(colorMediumShade),
     colorBorderLight: colorBorderLightShade,
-    colorBorderLightRgb: toRgb(colorBorderLightShade)
+    colorBorderLightRgb: toRgb(colorBorderLightShade),
+    // Categorical colors
+    colorIndigoBackground,
+    colorIndigoText,
+    colorEmeraldBackground,
+    colorEmeraldText,
+    colorAmberBackground,
+    colorAmberText,
+    colorPinkBackground,
+    colorPinkText,
+    colorSkyBackground,
+    colorSkyText,
+    colorOrangeBackground,
+    colorOrangeText,
+    colorSlateBackground,
+    colorSlateText,
+    colorTealBackground,
+    colorTealText,
+    colorLimeBackground,
+    colorLimeText,
+    colorPurpleBackground,
+    colorPurpleText,
+    colorFuchsiaBackground,
+    colorFuchsiaText,
+    colorRedBackground,
+    colorRedText,
+    // Chart colors
+    colorChart1,
+    colorChart2,
+    colorChart3,
+    colorChart4,
+    colorChart5,
+    colorChart6,
+    colorChart7,
+    colorChart8
 };
 export const DARK_THEME = {
     // Special colors
@@ -129,7 +202,13 @@ export const DARK_THEME = {
     colorText: colorLightShade,
     colorLabel: colorLightShade,
     // Border color
-    colorBorderLight: "#323338"
+    colorBorderLight: "#323338",
+    // Chart colors
+    // Lighten the dark anchors so series stay legible on a dark background; the
+    // mid-toned hues fall through to their light-theme values.
+    colorChart1: "#4aa3e0",
+    colorChart7: "#d4b400",
+    colorChart8: "#aab3c2" // Light slate.
 };
 export const toStyle = (theme) => {
     const vars = {
@@ -194,7 +273,41 @@ export const toStyle = (theme) => {
         "--vui-color-border-medium": theme.colorBorderMedium,
         "--vui-color-border-medium-rgb": theme.colorBorderMediumRgb,
         "--vui-color-border-light": theme.colorBorderLight,
-        "--vui-color-border-light-rgb": theme.colorBorderLightRgb
+        "--vui-color-border-light-rgb": theme.colorBorderLightRgb,
+        // Categorical colors
+        "--vui-color-indigo-background": theme.colorIndigoBackground,
+        "--vui-color-indigo-text": theme.colorIndigoText,
+        "--vui-color-emerald-background": theme.colorEmeraldBackground,
+        "--vui-color-emerald-text": theme.colorEmeraldText,
+        "--vui-color-amber-background": theme.colorAmberBackground,
+        "--vui-color-amber-text": theme.colorAmberText,
+        "--vui-color-pink-background": theme.colorPinkBackground,
+        "--vui-color-pink-text": theme.colorPinkText,
+        "--vui-color-sky-background": theme.colorSkyBackground,
+        "--vui-color-sky-text": theme.colorSkyText,
+        "--vui-color-orange-background": theme.colorOrangeBackground,
+        "--vui-color-orange-text": theme.colorOrangeText,
+        "--vui-color-slate-background": theme.colorSlateBackground,
+        "--vui-color-slate-text": theme.colorSlateText,
+        "--vui-color-teal-background": theme.colorTealBackground,
+        "--vui-color-teal-text": theme.colorTealText,
+        "--vui-color-lime-background": theme.colorLimeBackground,
+        "--vui-color-lime-text": theme.colorLimeText,
+        "--vui-color-purple-background": theme.colorPurpleBackground,
+        "--vui-color-purple-text": theme.colorPurpleText,
+        "--vui-color-fuchsia-background": theme.colorFuchsiaBackground,
+        "--vui-color-fuchsia-text": theme.colorFuchsiaText,
+        "--vui-color-red-background": theme.colorRedBackground,
+        "--vui-color-red-text": theme.colorRedText,
+        // Chart colors
+        "--vui-chart-1": theme.colorChart1,
+        "--vui-chart-2": theme.colorChart2,
+        "--vui-chart-3": theme.colorChart3,
+        "--vui-chart-4": theme.colorChart4,
+        "--vui-chart-5": theme.colorChart5,
+        "--vui-chart-6": theme.colorChart6,
+        "--vui-chart-7": theme.colorChart7,
+        "--vui-chart-8": theme.colorChart8
     };
     // Remove undefined values.
     return Object.fromEntries(Object.entries(vars).filter(([_, v]) => v !== undefined));

package/lib/components/fileDropTarget/FileDropTarget.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode, RefObject } from "react";
+type Props = {
+    onFilesDropped: (files: File[]) => void;
+    scopeRef?: RefObject<HTMLElement>;
+    message?: ReactNode;
+};
+export declare const VuiFileDropTarget: ({ onFilesDropped, scopeRef, message }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/components/fileDropTarget/FileDropTarget.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { BiUpload } from "react-icons/bi";
+import { VuiScreenBlock } from "../screenBlock/ScreenBlock";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiIcon } from "../icon/Icon";
+import { VuiText } from "../typography/Text";
+const defaultMessage = (_jsxs(VuiFlexContainer, Object.assign({ direction: "column", alignItems: "center", justifyContent: "center" }, { children: [_jsx(VuiFlexItem, { children: _jsx(VuiIcon, Object.assign({ size: "xxxl", color: "empty" }, { children: _jsx(BiUpload, {}) })) }), _jsx(VuiFlexItem, { children: _jsx(VuiText, Object.assign({ align: "center", size: "l" }, { children: _jsx("p", { children: "Drop files to add to upload" }) })) })] })));
+export const VuiFileDropTarget = ({ onFilesDropped, scopeRef, message = defaultMessage }) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const dragCounterRef = useRef(0);
+    useEffect(() => {
+        var _a;
+        const target = (_a = scopeRef === null || scopeRef === void 0 ? void 0 : scopeRef.current) !== null && _a !== void 0 ? _a : document;
+        // Reset whenever the target changes (e.g. when scopeRef attaches or the parent
+        // swaps between scoped and global modes) so a stale counter doesn't suppress events.
+        dragCounterRef.current = 0;
+        setIsDragging(false);
+        const handleDragEnter = (e) => {
+            var _a;
+            e.preventDefault();
+            dragCounterRef.current += 1;
+            // Only show the overlay for drags that carry files, not e.g. selected text.
+            if (dragCounterRef.current === 1 && ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.items) && e.dataTransfer.items.length > 0) {
+                setIsDragging(true);
+            }
+        };
+        const handleDragLeave = (e) => {
+            e.preventDefault();
+            dragCounterRef.current -= 1;
+            if (dragCounterRef.current === 0) {
+                setIsDragging(false);
+            }
+        };
+        const handleDragOver = (e) => {
+            e.preventDefault();
+        };
+        const handleDrop = (e) => {
+            var _a;
+            e.preventDefault();
+            setIsDragging(false);
+            dragCounterRef.current = 0;
+            const files = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files;
+            if (files && files.length > 0) {
+                onFilesDropped(Array.from(files));
+            }
+        };
+        target.addEventListener("dragenter", handleDragEnter);
+        target.addEventListener("dragleave", handleDragLeave);
+        target.addEventListener("dragover", handleDragOver);
+        target.addEventListener("drop", handleDrop);
+        return () => {
+            target.removeEventListener("dragenter", handleDragEnter);
+            target.removeEventListener("dragleave", handleDragLeave);
+            target.removeEventListener("dragover", handleDragOver);
+            target.removeEventListener("drop", handleDrop);
+        };
+    }, [scopeRef, onFilesDropped]);
+    if (!isDragging)
+        return null;
+    // Scoped mode: overlay covers only the parent element.
+    if (scopeRef === null || scopeRef === void 0 ? void 0 : scopeRef.current) {
+        return createPortal(_jsx("div", Object.assign({ className: "vuiFileDropTarget__scopedOverlay" }, { children: _jsx("div", Object.assign({ className: "vuiFileDropTarget__message" }, { children: message })) })), scopeRef.current);
+    }
+    // Global mode: full-screen overlay.
+    return (_jsx(VuiScreenBlock, Object.assign({ color: "primary" }, { children: _jsx("div", Object.assign({ className: "vuiFileDropTarget__messageContainer" }, { children: _jsx("div", Object.assign({ className: "vuiFileDropTarget__message" }, { children: message })) })) })));
+};

package/lib/components/fileDropTarget/_index.scss

@@ -0,0 +1,34 @@
+.vuiFileDropTarget__messageContainer {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.vuiFileDropTarget__message {
+  padding: $sizeL;
+  max-width: 400px;
+  width: 100%;
+  pointer-events: none;
+
+  p,
+  span {
+    color: var(--vui-color-empty-shade) !important;
+  }
+}
+
+// Scoped mode: portal-mounted overlay covering only the parent element (which
+// must be non-statically positioned).
+.vuiFileDropTarget__scopedOverlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(var(--vui-color-primary-shade-rgb), 0.6);
+  z-index: 10;
+}