@homecode/ui 5.18.6 → 5.18.8

package/dist/esm/src/components/DropZone/DropZone.js

@@ -3,108 +3,127 @@ import { useState, useRef, useCallback, useEffect } from 'react';
 import cn from 'classnames';
 import { generateUID } from '../../tools/uid.js';
 import S from './DropZone.styl.js';
+import { matchesAccept, dragCarriesFiles, filesForDrop, DROP_HIDE_GRACE_MS } from './dropFiles.js';
 
-function matchesAcceptPart(file, part) {
-    const p = part.trim().toLowerCase();
-    if (!p)
-        return false;
-    if (p.startsWith('.')) {
-        return file.name.toLowerCase().endsWith(p);
-    }
-    if (p.includes('/')) {
-        const t = file.type.toLowerCase();
-        if (p.endsWith('/*')) {
-            const prefix = p.slice(0, -1);
-            return t.startsWith(prefix);
-        }
-        return t === p;
-    }
-    return false;
-}
-function matchesAccept(file, accept) {
-    const trimmed = accept.trim();
-    if (!trimmed)
-        return true;
-    const parts = trimmed
-        .split(',')
-        .map(s => s.trim())
-        .filter(Boolean);
-    if (parts.length === 0)
-        return true;
-    return parts.some(part => matchesAcceptPart(file, part));
-}
 function DropZone(props) {
     const { accept, label, error, disabled = false, ghost = false, id, className, } = props;
     const [isDragging, setIsDragging] = useState(false);
-    const dropAreaRef = useRef(null);
+    const rootRef = useRef(null);
     const fallbackInputIdRef = useRef(generateUID());
     const inputId = id ?? fallbackInputIdRef.current;
-    const handleDrop = useCallback((e) => {
-        e.preventDefault();
-        setIsDragging(false);
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    const disabledRef = useRef(disabled);
+    disabledRef.current = disabled;
+    const handleFileInput = useCallback((event) => {
         if (disabled)
             return;
-        const list = Array.from(e.dataTransfer.files).filter(f => matchesAccept(f, accept));
-        if (props.multiple === true) {
-            if (list.length > 0) {
-                props.onFiles(list);
-            }
-        }
-        else {
-            const file = list[0];
-            if (file) {
-                props.onFile(file);
-            }
-        }
-    }, [accept, disabled, props]);
-    const handleFileInput = useCallback((e) => {
-        if (disabled)
-            return;
-        const raw = e.target.files;
+        const raw = event.target.files;
         if (!raw?.length)
             return;
-        const list = Array.from(raw).filter(f => matchesAccept(f, accept));
+        const list = Array.from(raw).filter(file => matchesAccept(file, accept));
         if (props.multiple === true) {
-            if (list.length > 0) {
+            if (list.length > 0)
                 props.onFiles(list);
-            }
         }
         else {
             const file = list[0];
-            if (file) {
+            if (file)
                 props.onFile(file);
-            }
         }
-        e.target.value = '';
+        event.target.value = '';
     }, [accept, disabled, props]);
     useEffect(() => {
-        const dialog = dropAreaRef.current?.closest('[role="dialog"]');
-        const targetElement = dialog || document.body;
-        const handleGlobalDragOver = (e) => {
-            e.preventDefault();
+        const dialog = rootRef.current?.closest('[role="dialog"]');
+        const target = dialog ?? window;
+        let hideTimer = 0;
+        let snapshotted = null;
+        const allowFileDrag = (event) => {
+            const transfer = event.dataTransfer;
+            if (!transfer || !dragCarriesFiles(transfer.types))
+                return;
+            event.preventDefault();
+            transfer.dropEffect = disabledRef.current ? 'none' : 'copy';
+            if (disabledRef.current)
+                return;
+            window.clearTimeout(hideTimer);
             setIsDragging(true);
         };
-        const handleGlobalDragLeave = (e) => {
-            if (!e.relatedTarget ||
-                !targetElement.contains(e.relatedTarget)) {
+        const scheduleHide = () => {
+            window.clearTimeout(hideTimer);
+            hideTimer = window.setTimeout(() => {
                 setIsDragging(false);
+            }, DROP_HIDE_GRACE_MS);
+        };
+        const onDragLeave = (event) => {
+            const related = event.relatedTarget;
+            if (related instanceof Node) {
+                const host = dialog ?? document;
+                if (host.contains(related))
+                    return;
             }
+            scheduleHide();
+        };
+        const onDropCapture = (event) => {
+            // Snapshot before later capture listeners read `items`. WebKit then
+            // clears `files`, so the bubble handler would see an empty drop.
+            snapshotted = event.dataTransfer
+                ? Array.from(event.dataTransfer.files)
+                : [];
         };
-        const handleGlobalDrop = () => {
+        const deliver = (event) => {
+            window.clearTimeout(hideTimer);
             setIsDragging(false);
+            const saved = snapshotted;
+            snapshotted = null;
+            const transfer = event.dataTransfer;
+            const claimed = event.defaultPrevented;
+            if (transfer && dragCarriesFiles(transfer.types) && !claimed) {
+                event.preventDefault();
+            }
+            if (claimed || disabledRef.current)
+                return;
+            const current = propsRef.current;
+            const dataTransfer = saved && saved.length > 0
+                ? { types: transfer?.types, files: saved, items: null }
+                : transfer;
+            const files = filesForDrop({
+                defaultPrevented: false,
+                disabled: false,
+                accept: current.accept,
+                multiple: current.multiple === true,
+                dataTransfer,
+            });
+            if (files.length === 0)
+                return;
+            if (current.multiple === true)
+                current.onFiles(files);
+            else
+                current.onFile(files[0]);
         };
-        targetElement.addEventListener('dragover', handleGlobalDragOver);
-        targetElement.addEventListener('dragleave', handleGlobalDragLeave);
-        targetElement.addEventListener('drop', handleGlobalDrop);
+        target.addEventListener('dragenter', allowFileDrag, true);
+        target.addEventListener('dragover', allowFileDrag, true);
+        target.addEventListener('dragleave', onDragLeave, true);
+        target.addEventListener('drop', onDropCapture, true);
+        target.addEventListener('drop', deliver);
         return () => {
-            targetElement.removeEventListener('dragover', handleGlobalDragOver);
-            targetElement.removeEventListener('dragleave', handleGlobalDragLeave);
-            targetElement.removeEventListener('drop', handleGlobalDrop);
+            window.clearTimeout(hideTimer);
+            target.removeEventListener('dragenter', allowFileDrag, true);
+            target.removeEventListener('dragover', allowFileDrag, true);
+            target.removeEventListener('dragleave', onDragLeave, true);
+            target.removeEventListener('drop', onDropCapture, true);
+            target.removeEventListener('drop', deliver);
         };
     }, []);
+    const keepFileDrag = (event) => {
+        if (!dragCarriesFiles(event.dataTransfer.types))
+            return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = disabled ? 'none' : 'copy';
+    };
     const shouldShowDropArea = !ghost || isDragging;
     const multiple = props.multiple === true;
-    return (jsxs("div", { className: cn(S.root, className), children: [shouldShowDropArea && (jsxs("div", { ref: dropAreaRef, className: cn(S.dropArea, isDragging && S.isDragging, disabled && S.disabled), onDrop: handleDrop, children: [jsx("input", { type: "file", accept: accept, multiple: multiple, onChange: handleFileInput, className: S.fileInput, id: inputId, disabled: disabled }), jsx("label", { htmlFor: inputId, className: S.label, style: {
+    return (jsxs("div", { ref: rootRef, className: cn(S.root, className), children: [shouldShowDropArea && (jsxs("div", { className: cn(S.dropArea, isDragging && S.isDragging, disabled && S.disabled), onDragEnter: keepFileDrag, onDragOver: keepFileDrag, children: [jsx("input", { type: "file", accept: accept, multiple: multiple, onChange: handleFileInput, className: S.fileInput, id: inputId, disabled: disabled }), jsx("label", { htmlFor: inputId, className: S.label, style: {
                             cursor: disabled ? 'not-allowed' : 'pointer',
                         }, children: label })] })), error && jsx("div", { className: S.error, children: error })] }));
 }

package/dist/esm/src/components/DropZone/DropZone.styl.js

@@ -1,4 +1,4 @@
-var css_248z = ".DropZone_root__gk-Ef{display:flex;flex-direction:column;gap:var(--p-2)}.DropZone_dropArea__u-8Ye{background-color:var(--accent-color-alpha-100);border:2px dashed var(--decent-color-alpha-200);border-radius:var(--p-4);cursor:pointer;padding:var(--p-4);position:relative;text-align:center;transition:all .2s ease}.DropZone_dropArea__u-8Ye label:before{border-radius:var(--p-4);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.DropZone_dropArea__u-8Ye.DropZone_isDragging__S-aQp,.DropZone_dropArea__u-8Ye:hover:not(.DropZone_disabled__qsAf6){border:2px dashed var(--active-color-alpha-500)}.DropZone_dropArea__u-8Ye:hover:not(.DropZone_disabled__qsAf6){background-color:var(--accent-color-alpha-50)}.DropZone_dropArea__u-8Ye.DropZone_isDragging__S-aQp{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:var(--decent-color-alpha-900)!important;display:flex;height:calc(100% - var(--p-2));justify-content:center;left:var(--p-1);position:fixed;top:var(--p-1);width:calc(100% - var(--p-2));z-index:9999}.DropZone_dropArea__u-8Ye.DropZone_disabled__qsAf6{cursor:not-allowed;opacity:.6}.DropZone_fileInput__E8DeE{display:none}.DropZone_label__u7-Pb{cursor:pointer}.DropZone_error__vSiwM{color:var(--danger-color);font-size:.875rem;padding:var(--p-1) var(--p-2)}";
+var css_248z = ".DropZone_root__gk-Ef{display:flex;flex-direction:column;gap:var(--p-2)}.DropZone_dropArea__u-8Ye{background-color:var(--accent-color-alpha-100);border:2px dashed var(--decent-color-alpha-200);border-radius:var(--p-4);cursor:pointer;padding:var(--p-4);position:relative;text-align:center;transition:all .2s ease}.DropZone_dropArea__u-8Ye label:before{border-radius:var(--p-4);content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}.DropZone_dropArea__u-8Ye.DropZone_isDragging__S-aQp,.DropZone_dropArea__u-8Ye:hover:not(.DropZone_disabled__qsAf6){border:2px dashed var(--active-color-alpha-500)}.DropZone_dropArea__u-8Ye:hover:not(.DropZone_disabled__qsAf6){background-color:var(--accent-color-alpha-50)}.DropZone_dropArea__u-8Ye.DropZone_isDragging__S-aQp{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:var(--decent-color-alpha-900)!important;display:flex;height:calc(100% - var(--p-2));justify-content:center;left:var(--p-1);position:fixed;top:var(--p-1);width:calc(100% - var(--p-2));z-index:9999}.DropZone_dropArea__u-8Ye.DropZone_isDragging__S-aQp label{pointer-events:none}.DropZone_dropArea__u-8Ye.DropZone_disabled__qsAf6{cursor:not-allowed;opacity:.6}.DropZone_fileInput__E8DeE{display:none}.DropZone_label__u7-Pb{cursor:pointer}.DropZone_error__vSiwM{color:var(--danger-color);font-size:.875rem;padding:var(--p-1) var(--p-2)}";
 var S = {"root":"DropZone_root__gk-Ef","dropArea":"DropZone_dropArea__u-8Ye","disabled":"DropZone_disabled__qsAf6","isDragging":"DropZone_isDragging__S-aQp","fileInput":"DropZone_fileInput__E8DeE","label":"DropZone_label__u7-Pb","error":"DropZone_error__vSiwM"};
             if (typeof document !== 'undefined') {
               var __uilibHead = document.head || document.getElementsByTagName('head')[0];

package/dist/esm/src/components/DropZone/dropFiles.js

@@ -0,0 +1,80 @@
+/** Finder / WKWebView file drags. Structural drag types, not language checks. */
+const FILE_DRAG_TYPES = new Set([
+    'Files',
+    'files',
+    'public.file-url',
+    'application/x-moz-file',
+]);
+/**
+ * macOS fires `dragleave` with a null `relatedTarget` while the pointer is
+ * still inside the window. `dragover` can be a few hundred milliseconds
+ * apart, so hide the overlay only after it has stopped.
+ */
+const DROP_HIDE_GRACE_MS = 400;
+function dragCarriesFiles(types) {
+    if (!types)
+        return false;
+    const list = Array.from(types);
+    // Some WebKit builds hide types until drop. Don't reject those drags.
+    if (list.length === 0)
+        return true;
+    return list.some(type => FILE_DRAG_TYPES.has(type));
+}
+function matchesAcceptPart(file, part) {
+    const token = part.trim().toLowerCase();
+    if (!token)
+        return false;
+    if (token.startsWith('.')) {
+        return file.name.toLowerCase().endsWith(token);
+    }
+    if (token.includes('/')) {
+        const mime = file.type.toLowerCase();
+        if (token.endsWith('/*'))
+            return mime.startsWith(token.slice(0, -1));
+        return mime === token;
+    }
+    return false;
+}
+function matchesAccept(file, accept) {
+    const trimmed = accept.trim();
+    if (!trimmed)
+        return true;
+    const parts = trimmed
+        .split(',')
+        .map(part => part.trim())
+        .filter(Boolean);
+    if (parts.length === 0)
+        return true;
+    return parts.some(part => matchesAcceptPart(file, part));
+}
+function filesFromItems(items) {
+    if (!items)
+        return [];
+    const files = [];
+    for (let i = 0; i < items.length; i += 1) {
+        const item = items[i];
+        if (item?.kind !== 'file')
+            continue;
+        const file = item.getAsFile?.() ?? null;
+        if (file)
+            files.push(file);
+    }
+    return files;
+}
+function filesForDrop(args) {
+    if (args.disabled || args.defaultPrevented || !args.dataTransfer)
+        return [];
+    const listed = args.dataTransfer.files
+        ? Array.from(args.dataTransfer.files)
+        : [];
+    if (!dragCarriesFiles(args.dataTransfer.types) && listed.length === 0) {
+        return [];
+    }
+    const files = listed.length > 0 ? listed : filesFromItems(args.dataTransfer.items);
+    const matched = files.filter(file => matchesAccept(file, args.accept));
+    if (args.multiple)
+        return matched;
+    return matched[0] ? [matched[0]] : [];
+}
+
+export { DROP_HIDE_GRACE_MS, dragCarriesFiles, filesForDrop, matchesAccept };

package/dist/esm/types/src/components/DropZone/DropZone.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/types/src/components/DropZone/dropFiles.d.ts

@@ -0,0 +1,31 @@
+/**
+ * macOS fires `dragleave` with a null `relatedTarget` while the pointer is
+ * still inside the window. `dragover` can be a few hundred milliseconds
+ * apart, so hide the overlay only after it has stopped.
+ */
+export declare const DROP_HIDE_GRACE_MS = 400;
+export declare function dragCarriesFiles(types: ArrayLike<string> | null | undefined): boolean;
+type DropItemLike = {
+    kind: string;
+    getAsFile?: () => File | null;
+};
+export type DropData = {
+    types?: ArrayLike<string> | null;
+    files?: ArrayLike<File> | null;
+    items?: ArrayLike<DropItemLike> | null;
+};
+export declare function matchesAccept(file: File, accept: string): boolean;
+/**
+ * Prefer `files`. On macOS WebKit that list is often empty while `items`
+ * still has the file. Reading `items` when `files` is already set clears
+ * the list in WebKit, so items are only a fallback.
+ */
+export declare function filesFromDataTransfer(dataTransfer: DropData): File[];
+export declare function filesForDrop(args: {
+    defaultPrevented: boolean;
+    disabled: boolean;
+    accept: string;
+    multiple: boolean;
+    dataTransfer: DropData | null;
+}): File[];
+export {};

package/dist/esm/types/src/components/DropZone/dropFiles.test.d.ts

@@ -0,0 +1 @@
+export {};

package/graphify-out/.graphify_labels.json

@@ -202,22 +202,8 @@
   "200": "Community 200",
   "201": "Community 201",
   "202": "Community 202",
-  "203": "Community 203",
-  "204": "Community 204",
   "205": "Community 205",
   "206": "Community 206",
-  "207": "Community 207",
-  "208": "Community 208",
-  "209": "Community 209",
-  "210": "Community 210",
-  "211": "Community 211",
-  "212": "Community 212",
-  "213": "Community 213",
-  "214": "Community 214",
-  "215": "Community 215",
   "216": "Community 216",
-  "217": "Community 217",
-  "218": "Community 218",
-  "219": "Community 219",
-  "220": "Community 220"
+  "219": "Community 219"
 }

package/graphify-out/2026-10-09/.graphify_labels.json

@@ -0,0 +1,223 @@
+{
+  "0": "Docs Examples Index",
+  "1": "PromptComposer",
+  "2": "Build Toolchain",
+  "3": "Form Examples",
+  "4": "Autocomplete Examples",
+  "5": "Checkbox Showcase",
+  "6": "Theme Config",
+  "7": "Type Props Schema",
+  "8": "Notifications System",
+  "9": "Button Checkbox Core",
+  "10": "Optional Value Props",
+  "11": "Select Component",
+  "12": "Input AssistiveText",
+  "13": "Gallery Component",
+  "14": "Virtualized Examples",
+  "15": "TypeScript Config",
+  "16": "Package Dependencies",
+  "17": "Card Component",
+  "18": "Debounce Paranja",
+  "19": "UILIB Docs Assets",
+  "20": "Component Type Props",
+  "21": "Flex Gallery",
+  "22": "DatePicker Examples",
+  "23": "Comment Value Props",
+  "24": "Docs Index Pages",
+  "25": "i18n LangSelector",
+  "26": "Package Metadata",
+  "27": "Popup Positioning",
+  "28": "Popup Component",
+  "29": "Docs Code Layout",
+  "30": "Draggable Types",
+  "31": "Slider Component",
+  "32": "Small Component Props",
+  "33": "Select Popup Types",
+  "34": "Router Core",
+  "35": "Calendar Helpers",
+  "36": "AssistiveText Menu",
+  "37": "Button DatePicker Types",
+  "38": "Container Icon",
+  "39": "Checkbox Props",
+  "40": "NPM Scripts",
+  "41": "Calendar DatePicker",
+  "42": "DateTime Types",
+  "43": "Autocomplete Core",
+  "44": "Global Type Kinds",
+  "45": "Date Type Fields",
+  "46": "Form Types",
+  "47": "Docs App Store",
+  "48": "Component Types JSON",
+  "49": "Option Value Types",
+  "50": "Generic Props",
+  "51": "Draggable Component",
+  "52": "Heading Scroll",
+  "53": "Progress Indicators",
+  "54": "Table Virtualized",
+  "55": "Virtualized Lifecycle",
+  "56": "Docs Pages",
+  "57": "Code Example Helpers",
+  "58": "Media Control Icons",
+  "59": "Text Heading",
+  "60": "Type Parser Script",
+  "61": "ButtonGroup Tabs",
+  "62": "DateTime Component",
+  "63": "Display Format Props",
+  "64": "Calendar Day Props",
+  "65": "Dialogue Props",
+  "66": "Arrow Chevron Icons",
+  "67": "InputFile Upload",
+  "68": "InputFile Types",
+  "69": "Virtualized List",
+  "70": "List Lifecycle",
+  "71": "Icon Index Exports",
+  "72": "Webpack Paths Config",
+  "73": "DatePicker Helpers",
+  "74": "Calendar Day",
+  "75": "Calendar Pointer Props",
+  "76": "Size Enum Props",
+  "77": "Code Editor",
+  "78": "Communication Icons",
+  "79": "Select Constants",
+  "80": "TextShimmer",
+  "81": "Virtualized Cards",
+  "82": "ClassName Props",
+  "83": "Ukrainian i18n",
+  "84": "Icon RequiredStar Types",
+  "85": "Navigation Icons",
+  "86": "File Action Icons",
+  "87": "Label Helpers",
+  "88": "Lazy Types",
+  "89": "Select Example Helpers",
+  "90": "Menu More Icons",
+  "91": "Social Media Icons",
+  "92": "Rollup Build Config",
+  "93": "Tabs Types",
+  "94": "VH Component",
+  "95": "Docs Navigation",
+  "96": "Footer Alignment",
+  "97": "Calendar Day Disabled",
+  "98": "Render Day Props",
+  "99": "Render Months Label",
+  "100": "Render Month Label",
+  "101": "Render Weekday Label",
+  "102": "Community 102",
+  "103": "Community 103",
+  "104": "Community 104",
+  "105": "Community 105",
+  "106": "Icon Name Helpers",
+  "107": "Media Placeholder Icons",
+  "108": "Utility Icons",
+  "109": "Commerce Icons",
+  "110": "Data Usage Icons",
+  "111": "Peer Dependencies",
+  "112": "Table Render",
+  "113": "Theme Docs",
+  "114": "Number Formatting",
+  "115": "Virtualized Index Helpers",
+  "116": "Docs Scope",
+  "117": "Auto Scroll Props",
+  "118": "Content Props",
+  "119": "Community 119",
+  "120": "Footer Props",
+  "121": "Community 121",
+  "122": "Community 122",
+  "123": "No Scroll Props",
+  "124": "Community 124",
+  "125": "Community 125",
+  "126": "Title Props",
+  "127": "Community 127",
+  "128": "Community 128",
+  "129": "Trigger ClassName",
+  "130": "Community 130",
+  "131": "Community 131",
+  "132": "Community 132",
+  "133": "Brand Avatar Icons",
+  "134": "Communication Action Icons",
+  "135": "Status Action Icons",
+  "136": "OAuth Brand Icons",
+  "137": "View Fullscreen Icons",
+  "138": "Add Remove Icons",
+  "139": "Route Navigation Icons",
+  "140": "Settings Tool Icons",
+  "141": "Input Label Constants",
+  "142": "Community 142",
+  "143": "More Docs Examples",
+  "144": "Docs Scope Pages",
+  "145": "Community 145",
+  "146": "Brand Logo Assets",
+  "147": "Test Utilities",
+  "148": "PostCSS Config",
+  "149": "Single Doc Page",
+  "150": "Gallery Dots",
+  "151": "Community 151",
+  "152": "Bookmark Icons",
+  "153": "Drag Handler Icons",
+  "154": "Lock Security Icons",
+  "155": "Save Undo Icons",
+  "156": "SVG Test Mock",
+  "157": "Store Declarations",
+  "158": "Global Window Types",
+  "159": "Gallery Singleton",
+  "160": "Minimize Prop",
+  "161": "Forward Icon",
+  "162": "Router Context",
+  "163": "Router Store",
+  "164": "Select Helpers",
+  "165": "Theme Styl Types",
+  "166": "Test Setup",
+  "167": "Community 167",
+  "168": "Community 168",
+  "169": "Community 169",
+  "170": "Community 170",
+  "171": "Community 171",
+  "172": "Community 172",
+  "173": "Community 173",
+  "174": "Community 174",
+  "175": "Community 175",
+  "176": "Community 176",
+  "177": "Community 177",
+  "178": "Community 178",
+  "179": "Community 179",
+  "180": "Community 180",
+  "181": "Community 181",
+  "182": "Community 182",
+  "183": "Community 183",
+  "184": "Community 184",
+  "185": "Community 185",
+  "186": "Community 186",
+  "187": "Community 187",
+  "188": "Community 188",
+  "189": "Community 189",
+  "190": "Community 190",
+  "191": "Community 191",
+  "192": "Community 192",
+  "193": "Community 193",
+  "194": "Community 194",
+  "195": "Community 195",
+  "196": "Community 196",
+  "197": "Community 197",
+  "198": "Community 198",
+  "199": "Community 199",
+  "200": "Community 200",
+  "201": "Community 201",
+  "202": "Community 202",
+  "203": "Community 203",
+  "204": "Community 204",
+  "205": "Community 205",
+  "206": "Community 206",
+  "207": "Community 207",
+  "208": "Community 208",
+  "209": "Community 209",
+  "210": "Community 210",
+  "211": "Community 211",
+  "212": "Community 212",
+  "213": "Community 213",
+  "214": "Community 214",
+  "215": "Community 215",
+  "216": "Community 216",
+  "217": "Community 217",
+  "218": "Community 218",
+  "219": "Community 219",
+  "220": "Community 220"
+}