@wavv/ui 2.3.2 → 2.3.3

package/build/components/DropZone.d.ts

@@ -1,10 +1,10 @@
-import type { ReactNode } from 'react';
-import { type DropZoneProps } from 'react-aria-components';
+import { type DropZoneProps, type FileTriggerProps } from 'react-aria-components';
 import type { MarginPadding, WidthHeight } from './types';
 type Props = {
-    children?: ReactNode;
     /** The label to display inside the drop zone */
     label?: string;
+    /** Whether to show the file names in the drop zone */
+    showFileNames?: boolean;
     /** Whether the drop target is disabled. If true, the drop target will not accept any drops. */
     disabled?: DropZoneProps['isDisabled'];
     className?: DropZoneProps['className'];
@@ -18,6 +18,11 @@ type Props = {
     onHoverChange?: DropZoneProps['onHoverChange'];
     onHoverStart?: DropZoneProps['onHoverStart'];
     onHoverEnd?: DropZoneProps['onHoverEnd'];
-} & MarginPadding & WidthHeight & Omit<DropZoneProps, 'isDisabled' | 'children'>;
-declare const DropZone: ({ children, label, disabled, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+    acceptedFileTypes?: FileTriggerProps['acceptedFileTypes'];
+    allowsMultiple?: FileTriggerProps['allowsMultiple'];
+    defaultCamera?: FileTriggerProps['defaultCamera'];
+    acceptDirectory?: FileTriggerProps['acceptDirectory'];
+    onSelect?: FileTriggerProps['onSelect'];
+} & MarginPadding & WidthHeight & Omit<DropZoneProps, 'isDisabled' | 'children'> & Omit<FileTriggerProps, 'children'>;
+declare const DropZone: ({ label, showFileNames, disabled, acceptedFileTypes, allowsMultiple, defaultCamera, acceptDirectory, onDrop, onSelect, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default DropZone;

package/build/components/DropZone.js

@@ -1,18 +1,57 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import styled from "@emotion/styled";
+import { useState } from "react";
 import { DropZone, Text } from "react-aria-components";
+import matchesFileTypes from "../utils/matchesFileTypes.js";
+import Ellipsis from "./Ellipsis.js";
+import FileTrigger from "./FileTrigger.js";
 import { marginProps, paddingProps, widthHeightProps } from "./helpers/styledProps.js";
-const DropZone_DropZone = ({ children, label = 'Drop here', disabled, ...rest })=>/*#__PURE__*/ jsxs(StyledDropZone, {
+const DropZone_DropZone = ({ label = 'Drop here', showFileNames = true, disabled, acceptedFileTypes, allowsMultiple, defaultCamera, acceptDirectory, onDrop, onSelect, ...rest })=>{
+    const [displayFiles, setDisplayFiles] = useState('');
+    const showFileTrigger = !!acceptedFileTypes || !!allowsMultiple || !!defaultCamera || !!acceptDirectory || !!onSelect || showFileNames;
+    const handleFileDrop = (event)=>{
+        let files = event.items.filter((file)=>'file' === file.kind);
+        if (acceptedFileTypes && acceptedFileTypes.length > 0) files = files.filter((file)=>matchesFileTypes(file, acceptedFileTypes));
+        if (!allowsMultiple && files.length > 1) files = files.slice(0, 1);
+        const fileNames = files.map(({ name })=>name).join(', ');
+        setDisplayFiles(fileNames);
+        if (onDrop) onDrop(event);
+    };
+    const handleFileSelect = (selected)=>{
+        if (!selected) return;
+        const files = Array.from(selected);
+        const fileNames = files.map(({ name })=>name).join(', ');
+        setDisplayFiles(fileNames);
+        if (onSelect) onSelect(selected);
+    };
+    return /*#__PURE__*/ jsxs(StyledDropZone, {
         isDisabled: disabled,
+        onDrop: showFileTrigger ? handleFileDrop : onDrop,
         ...rest,
         children: [
             /*#__PURE__*/ jsx(StyledText, {
                 slot: "label",
                 children: label
             }),
-            children
+            showFileTrigger && /*#__PURE__*/ jsx(SeparatorText, {
+                children: "or"
+            }),
+            showFileTrigger && /*#__PURE__*/ jsx(FileTrigger, {
+                acceptedFileTypes: acceptedFileTypes,
+                allowsMultiple: allowsMultiple,
+                defaultCamera: defaultCamera,
+                acceptDirectory: acceptDirectory,
+                onSelect: handleFileSelect
+            }),
+            displayFiles && showFileNames && /*#__PURE__*/ jsx(FilesContainer, {
+                title: displayFiles,
+                children: /*#__PURE__*/ jsx(Ellipsis, {
+                    children: displayFiles
+                })
+            })
         ]
     });
+};
 const StyledDropZone = styled(DropZone)(({ theme })=>({
         display: 'flex',
         flexDirection: 'column',
@@ -47,7 +86,22 @@ const StyledDropZone = styled(DropZone)(({ theme })=>({
     }), widthHeightProps, marginProps, paddingProps);
 const StyledText = styled(Text)(({ theme })=>({
         fontSize: theme.font.size.md,
-        fontWeight: theme.font.weight.medium
+        fontWeight: theme.font.weight.medium,
+        lineHeight: '14px',
+        textAlign: 'center'
+    }));
+const SeparatorText = styled(Text)(({ theme })=>({
+        fontSize: theme.font.size.md,
+        color: theme.scale6,
+        lineHeight: '14px'
+    }));
+const FilesContainer = styled.div(({ theme })=>({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: theme.font.size.sm,
+        color: theme.scale6,
+        width: '100%'
     }));
 const components_DropZone = DropZone_DropZone;
 export { components_DropZone as default };

package/build/index.d.ts

@@ -90,3 +90,4 @@ export { default as formatDate } from './utils/formatDate';
 export { default as formatNumber } from './utils/formatNumber';
 export { default as numberWithCommas } from './utils/numberWithCommas';
 export { createEditorContent, editorContentToText } from './components/Editor';
+export { default as matchesFileTypes } from './utils/matchesFileTypes';

package/build/index.js

@@ -79,4 +79,5 @@ import copyToClipboard from "./utils/copyToClipboard.js";
 import formatDate from "./utils/formatDate.js";
 import formatNumber from "./utils/formatNumber.js";
 import numberWithCommas from "./utils/numberWithCommas.js";
-export { Accordion, Audio, BarChart, Button, Calendar, Checkbox, Code, ComboBox, CommandMenu, DatePicker, DateRangePicker, DateRangeSelect, DocTable, Dot, DraftEditor, DropZone, Dropdown, DropdownMenu, DropdownSelect, Editor, Ellipsis, FileTrigger, Form, Grid, Icon, ImageViewer, InlineCode, InlineInput, InputHelpers as InputUtils, Label, LineChart, Menu, Message, MessageHr, Modal, MultiSelect, NumberInput, Pagination, PhoneInput, PieChart, Popover, PortalScope, Progress, Radio, RangeCalendar, ResetStyles, ScrollbarStyles, SearchInput, Select, Slider, Spinner, Table, Tabs, Tag, TextArea, TextInput, TimeInput, ToastStyles, Toggle, ToggleButton, ToggleButtonGroup, Tooltip, TransferList, Tree, UnstyledButton, colors, copyToClipboard, createEditorContent, darkScale, editorContentToText, formatDate, formatNumber, lightScale, marginProps, numberWithCommas, paddingProps, positionProps, theme, themeClasses, themeOptions, useConfirm, useCopy, useElementObserver, useEventListener, useOnClickOutside, usePrevious, useSelectAll, useWindowSize, widthHeightProps };
+import matchesFileTypes from "./utils/matchesFileTypes.js";
+export { Accordion, Audio, BarChart, Button, Calendar, Checkbox, Code, ComboBox, CommandMenu, DatePicker, DateRangePicker, DateRangeSelect, DocTable, Dot, DraftEditor, DropZone, Dropdown, DropdownMenu, DropdownSelect, Editor, Ellipsis, FileTrigger, Form, Grid, Icon, ImageViewer, InlineCode, InlineInput, InputHelpers as InputUtils, Label, LineChart, Menu, Message, MessageHr, Modal, MultiSelect, NumberInput, Pagination, PhoneInput, PieChart, Popover, PortalScope, Progress, Radio, RangeCalendar, ResetStyles, ScrollbarStyles, SearchInput, Select, Slider, Spinner, Table, Tabs, Tag, TextArea, TextInput, TimeInput, ToastStyles, Toggle, ToggleButton, ToggleButtonGroup, Tooltip, TransferList, Tree, UnstyledButton, colors, copyToClipboard, createEditorContent, darkScale, editorContentToText, formatDate, formatNumber, lightScale, marginProps, matchesFileTypes, numberWithCommas, paddingProps, positionProps, theme, themeClasses, themeOptions, useConfirm, useCopy, useElementObserver, useEventListener, useOnClickOutside, usePrevious, useSelectAll, useWindowSize, widthHeightProps };

package/build/utils/matchesFileTypes.d.ts

@@ -0,0 +1,9 @@
+import type { FileDropItem } from 'react-aria';
+/**
+ * Checks if a file matches any of the accepted file types
+ * @param file - The file to check
+ * @param acceptedFileTypes - The accepted file types
+ * @returns True if the file matches any of the accepted file types, false otherwise
+ */
+declare const matchesFileTypes: (file: FileDropItem, acceptedFileTypes?: readonly string[]) => boolean;
+export default matchesFileTypes;

package/build/utils/matchesFileTypes.js

@@ -0,0 +1,16 @@
+const matchesFileTypes = (file, acceptedFileTypes)=>{
+    if (!acceptedFileTypes || 0 === acceptedFileTypes.length) return true;
+    const fileType = file.type || '';
+    const fileName = file.name || '';
+    return acceptedFileTypes.some((acceptedType)=>{
+        if (acceptedType === fileType) return true;
+        if (acceptedType.endsWith('/*')) {
+            const baseType = acceptedType.slice(0, -2);
+            return fileType.startsWith(`${baseType}/`);
+        }
+        if (acceptedType.startsWith('.')) return fileName.toLowerCase().endsWith(acceptedType.toLowerCase());
+        return false;
+    });
+};
+const utils_matchesFileTypes = matchesFileTypes;
+export { utils_matchesFileTypes as default };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "2.3.2",
+	"version": "2.3.3",
 	"type": "module",
 	"exports": {
 		".": {