@aurora-ds/components 0.24.5 → 0.24.6

package/dist/cjs/components/forms/file-picker/FilePicker.styles.d.ts

@@ -5,6 +5,7 @@ type StyleParams = {
     previewMaxHeight?: CSSProperties['maxHeight'];
     previewMaxWidth?: CSSProperties['maxWidth'];
     previewObjectFit?: CSSProperties['objectFit'];
+    isDragOver?: boolean;
 };
 export declare const FILE_PICKER_STYLES: {
     root: (params?: StyleParams | undefined) => string;

package/dist/cjs/index.js

@@ -1211,10 +1211,10 @@ const MoreHorizontalIcon = () => {
     return (jsxRuntime.jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', className: 'lucide lucide-ellipsis-icon lucide-ellipsis', children: [jsxRuntime.jsx("circle", { cx: '12', cy: '12', r: '1' }), jsxRuntime.jsx("circle", { cx: '19', cy: '12', r: '1' }), jsxRuntime.jsx("circle", { cx: '5', cy: '12', r: '1' })] }));
 };
 
-const PlusIcon = () => (jsxRuntime.jsx("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: jsxRuntime.jsx("path", { d: 'M8 3.33337V12.6667M3.33333 8H12.6667', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) }));
-
 const TrashIcon = () => (jsxRuntime.jsxs("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: [jsxRuntime.jsx("path", { d: 'M2 4H3.33333H14', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }), jsxRuntime.jsx("path", { d: 'M5.33325 4.00004V2.66671C5.33325 2.31309 5.47373 1.97395 5.72378 1.7239C5.97382 1.47385 6.31296 1.33337 6.66659 1.33337H9.33325C9.68687 1.33337 10.026 1.47385 10.276 1.7239C10.5261 1.97395 10.6666 2.31309 10.6666 2.66671V4.00004M12.6666 4.00004V13.3334C12.6666 13.687 12.5261 14.0261 12.276 14.2762C12.026 14.5262 11.6868 14.6667 11.3333 14.6667H4.66659C4.31296 14.6667 3.97382 14.5262 3.72378 14.2762C3.47373 14.0261 3.33325 13.687 3.33325 13.3334V4.00004H12.6666Z', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' })] }));
 
+const UploadIcon = () => (jsxRuntime.jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', "stroke-width": '2', "stroke-linecap": 'round', "stroke-linejoin": 'round', className: 'lucide lucide-upload-icon lucide-upload', children: [jsxRuntime.jsx("path", { d: 'M12 3v12' }), jsxRuntime.jsx("path", { d: 'm17 8-5-5-5 5' }), jsxRuntime.jsx("path", { d: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' })] }));
+
 /**
  * Input component
  */
@@ -2111,17 +2111,20 @@ const FILE_PICKER_STYLES = theme.createStyles((theme) => ({
         alignItems: 'center',
         justifyContent: 'center',
         gap: theme.spacing.sm,
-        padding: theme.spacing.lg,
-        border: `2px dashed ${theme.colors.border}`,
+        padding: theme.spacing.md,
+        border: `2px dashed ${params?.isDragOver ? theme.colors.primary : theme.colors.border}`,
         borderRadius: theme.radius.md,
-        backgroundColor: theme.colors.surface,
+        backgroundColor: params?.isDragOver ? theme.colors.surfaceHover : theme.colors.surface,
         cursor: 'pointer',
         transition: `all ${theme.transition.fast}`,
-        minHeight: params?.dropzoneHeight ?? '120px',
+        minHeight: params?.dropzoneHeight ?? undefined,
         '&:hover': {
             borderColor: theme.colors.primary,
             backgroundColor: theme.colors.surfaceHover,
         },
+        '& > *': {
+            pointerEvents: 'none',
+        },
     }),
     dropzoneDisabled: {
         opacity: 0.5,
@@ -2183,6 +2186,8 @@ const FILE_PICKER_STYLES = theme.createStyles((theme) => ({
 const FilePicker = ({ label, accept, preview, previewIsImage = true, previewAlt = 'Preview', error, onSelect, onClear, disabled = false, placeholder = 'Click to upload a file', hint, icon: IconComponent, clearIcon: ClearIconComponent, clearAriaLabel = 'Remove file', width, dropzoneHeight, previewMaxHeight, previewMaxWidth, previewObjectFit, }) => {
     // refs
     const inputRef = React.useRef(null);
+    // state
+    const [isDragOver, setIsDragOver] = React.useState(false);
     // handlers
     const handleClick = () => {
         if (!disabled && inputRef.current) {
@@ -2207,6 +2212,56 @@ const FilePicker = ({ label, accept, preview, previewIsImage = true, previewAlt
             handleClick();
         }
     };
+    const handleDragEnter = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!disabled) {
+            setIsDragOver(true);
+        }
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    const handleDragLeave = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // Only set isDragOver to false if we're actually leaving the dropzone
+        // (not just entering a child element)
+        if (e.currentTarget === e.target || !e.currentTarget.contains(e.relatedTarget)) {
+            setIsDragOver(false);
+        }
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+        if (!disabled) {
+            const file = e.dataTransfer.files?.[0] || null;
+            if (file) {
+                // Validate file type if accept is specified
+                if (accept) {
+                    const acceptedTypes = accept.split(',').map(type => type.trim());
+                    const isAccepted = acceptedTypes.some(type => {
+                        if (type.startsWith('.')) {
+                            // Extension check
+                            return file.name.toLowerCase().endsWith(type.toLowerCase());
+                        }
+                        else {
+                            // MIME type check
+                            return file.type === type || file.type.match(new RegExp(type.replace('*', '.*')));
+                        }
+                    });
+                    if (isAccepted) {
+                        onSelect(file);
+                    }
+                }
+                else {
+                    onSelect(file);
+                }
+            }
+        }
+    };
     // Determine if preview is a string (image URL) or ReactNode
     const isImagePreview = typeof preview === 'string' && previewIsImage;
     const hasPreview = preview !== null && preview !== undefined;
@@ -2217,8 +2272,9 @@ const FilePicker = ({ label, accept, preview, previewIsImage = true, previewAlt
         previewMaxHeight,
         previewMaxWidth,
         previewObjectFit,
+        isDragOver,
     };
-    return (jsxRuntime.jsxs("div", { className: FILE_PICKER_STYLES.root(styleParams), children: [label && (jsxRuntime.jsx(Text, { fontSize: 'sm', variant: 'label', children: label })), jsxRuntime.jsx("input", { ref: inputRef, type: 'file', accept: accept, className: FILE_PICKER_STYLES.hiddenInput, onChange: handleChange, disabled: disabled }), hasPreview ? (jsxRuntime.jsxs("div", { className: FILE_PICKER_STYLES.previewContainer, children: [isImagePreview ? (jsxRuntime.jsx("img", { src: preview, alt: previewAlt, className: FILE_PICKER_STYLES.preview(styleParams) })) : (preview), !disabled && ClearIconComponent && (jsxRuntime.jsx("div", { className: FILE_PICKER_STYLES.clearButton, children: jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(ClearIconComponent, {}), onClick: handleClear, ariaLabel: clearAriaLabel, variant: 'contained', size: 'small', textColor: 'surface' }) }))] })) : (jsxRuntime.jsxs("div", { className: `${FILE_PICKER_STYLES.dropzone(styleParams)} ${disabled ? FILE_PICKER_STYLES.dropzoneDisabled : ''}`, onClick: handleClick, role: 'button', tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, children: [IconComponent && (jsxRuntime.jsx(Icon, { size: 'lg', color: 'text', children: jsxRuntime.jsx(IconComponent, {}) })), jsxRuntime.jsx(Text, { children: placeholder }), hint && (jsxRuntime.jsx(Text, { fontSize: 'xs', color: 'textSecondary', children: hint }))] })), error && (jsxRuntime.jsx(Text, { fontSize: 'sm', color: 'error', children: error }))] }));
+    return (jsxRuntime.jsxs("div", { className: FILE_PICKER_STYLES.root(styleParams), children: [label && (jsxRuntime.jsx(Text, { fontSize: 'sm', variant: 'label', children: label })), jsxRuntime.jsx("input", { ref: inputRef, type: 'file', accept: accept, className: FILE_PICKER_STYLES.hiddenInput, onChange: handleChange, disabled: disabled }), hasPreview ? (jsxRuntime.jsxs("div", { className: FILE_PICKER_STYLES.previewContainer, children: [isImagePreview ? (jsxRuntime.jsx("img", { src: preview, alt: previewAlt, className: FILE_PICKER_STYLES.preview(styleParams) })) : (preview), !disabled && ClearIconComponent && (jsxRuntime.jsx("div", { className: FILE_PICKER_STYLES.clearButton, children: jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(ClearIconComponent, {}), onClick: handleClear, ariaLabel: clearAriaLabel, variant: 'contained', size: 'small', textColor: 'surface' }) }))] })) : (jsxRuntime.jsxs("div", { className: `${FILE_PICKER_STYLES.dropzone(styleParams)} ${disabled ? FILE_PICKER_STYLES.dropzoneDisabled : ''}`, onClick: handleClick, role: 'button', tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [jsxRuntime.jsxs(Stack, { children: [IconComponent && (jsxRuntime.jsx(Icon, { size: 'md', color: 'text', children: jsxRuntime.jsx(IconComponent, {}) })), jsxRuntime.jsx(Text, { children: placeholder })] }), hint && (jsxRuntime.jsx(Text, { fontSize: 'xs', color: 'textSecondary', children: hint }))] })), error && (jsxRuntime.jsx(Text, { fontSize: 'sm', color: 'error', children: error }))] }));
 };
 FilePicker.displayName = 'FilePicker';
 
@@ -2237,7 +2293,7 @@ FilePicker.displayName = 'FilePicker';
  * ```
  */
 const ImagePicker = ({ label, preview, error, onSelect, onClear, disabled = false, placeholder = 'Click to upload an image', hint = 'JPEG, PNG or WebP', previewAlt = 'Image preview', clearAriaLabel = 'Remove image', width, dropzoneHeight, previewMaxHeight, previewMaxWidth, previewObjectFit, }) => {
-    return (jsxRuntime.jsx(FilePicker, { label: label, accept: 'image/jpeg,image/png,image/webp', preview: preview, previewIsImage: true, previewAlt: previewAlt, error: error, onSelect: onSelect, onClear: onClear, disabled: disabled, placeholder: placeholder, hint: hint, icon: PlusIcon, clearIcon: TrashIcon, clearAriaLabel: clearAriaLabel, width: width, dropzoneHeight: dropzoneHeight, previewMaxHeight: previewMaxHeight, previewMaxWidth: previewMaxWidth, previewObjectFit: previewObjectFit }));
+    return (jsxRuntime.jsx(FilePicker, { label: label, accept: 'image/jpeg,image/png,image/webp', preview: preview, previewIsImage: true, previewAlt: previewAlt, error: error, onSelect: onSelect, onClear: onClear, disabled: disabled, placeholder: placeholder, hint: hint, icon: UploadIcon, clearIcon: TrashIcon, clearAriaLabel: clearAriaLabel, width: width, dropzoneHeight: dropzoneHeight, previewMaxHeight: previewMaxHeight, previewMaxWidth: previewMaxWidth, previewObjectFit: previewObjectFit }));
 };
 ImagePicker.displayName = 'ImagePicker';