@homecode/ui 5.0.1 → 5.1.0

package/dist/esm/index.js

@@ -12,6 +12,7 @@ export { DatePickerInput } from './src/components/DatePickerInput/DatePickerInpu
 export { DateTime, formatDate } from './src/components/DateTime/DateTime.js';
 export { Dialogue } from './src/components/Dialogue/Dialogue.js';
 export { Draggable } from './src/components/Draggable/Draggable.js';
+export { DropZone } from './src/components/DropZone/DropZone.js';
 export { Expand } from './src/components/Expand/Expand.js';
 export { Flex } from './src/components/Flex/Flex.js';
 export { Form } from './src/components/Form/Form.js';

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

@@ -36,6 +36,7 @@ import '../DatePickerInput/DatePickerInput.styl.js';
 import '../Dialogue/Dialogue.js';
 import '../../tools/queryParams.js';
 import '../Draggable/Draggable.styl.js';
+import '../DropZone/DropZone.styl.js';
 import '../Expand/Expand.styl.js';
 import '../Flex/Flex.styl.js';
 import '../Form/Form.styl.js';

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

@@ -0,0 +1,112 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import { generateUID } from '../../tools/uid.js';
+import S from './DropZone.styl.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 fallbackInputIdRef = useRef(generateUID());
+    const inputId = id ?? fallbackInputIdRef.current;
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        setIsDragging(false);
+        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;
+        if (!raw?.length)
+            return;
+        const list = Array.from(raw).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);
+            }
+        }
+        e.target.value = '';
+    }, [accept, disabled, props]);
+    useEffect(() => {
+        const dialog = dropAreaRef.current?.closest('[role="dialog"]');
+        const targetElement = dialog || document.body;
+        const handleGlobalDragOver = (e) => {
+            e.preventDefault();
+            setIsDragging(true);
+        };
+        const handleGlobalDragLeave = (e) => {
+            if (!e.relatedTarget ||
+                !targetElement.contains(e.relatedTarget)) {
+                setIsDragging(false);
+            }
+        };
+        const handleGlobalDrop = () => {
+            setIsDragging(false);
+        };
+        targetElement.addEventListener('dragover', handleGlobalDragOver);
+        targetElement.addEventListener('dragleave', handleGlobalDragLeave);
+        targetElement.addEventListener('drop', handleGlobalDrop);
+        return () => {
+            targetElement.removeEventListener('dragover', handleGlobalDragOver);
+            targetElement.removeEventListener('dragleave', handleGlobalDragLeave);
+            targetElement.removeEventListener('drop', handleGlobalDrop);
+        };
+    }, []);
+    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: {
+                            cursor: disabled ? 'not-allowed' : 'pointer',
+                        }, children: label })] })), error && jsx("div", { className: S.error, children: error })] }));
+}
+
+export { DropZone };

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+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 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"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -39,6 +39,7 @@ import 'moment';
 import '../DatePickerInput/DatePickerInput.styl.js';
 import '../Dialogue/Dialogue.js';
 import { Draggable } from '../Draggable/Draggable.js';
+import '../DropZone/DropZone.styl.js';
 import '../Expand/Expand.styl.js';
 import '../Flex/Flex.styl.js';
 import '../Form/Form.styl.js';

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

@@ -0,0 +1,3 @@
+import type * as T from './DropZone.types';
+export type DropZoneProps = T.Props;
+export declare function DropZone(props: T.Props): JSX.Element;

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

@@ -0,0 +1,18 @@
+export interface DropZoneBaseProps {
+    accept: string;
+    label: string;
+    error?: string | null;
+    disabled?: boolean;
+    ghost?: boolean;
+    id?: string;
+    className?: string;
+}
+export interface DropZoneSingleProps extends DropZoneBaseProps {
+    multiple?: false;
+    onFile: (file: File) => void;
+}
+export interface DropZoneMultiProps extends DropZoneBaseProps {
+    multiple: true;
+    onFiles: (files: File[]) => void;
+}
+export type Props = DropZoneSingleProps | DropZoneMultiProps;

package/dist/esm/types/src/components/index.d.ts

@@ -12,6 +12,7 @@ export * from './DatePickerInput/DatePickerInput';
 export * from './DateTime/DateTime';
 export * from './Dialogue';
 export * from './Draggable/Draggable';
+export * from './DropZone/DropZone';
 export * from './Expand/Expand';
 export * from './Flex/Flex';
 export * from './Form/Form';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",