@wavv/ui 2.3.5 → 2.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -7,6 +7,10 @@ type Props = {
|
|
|
7
7
|
showFileNames?: boolean;
|
|
8
8
|
/** Whether the drop target is disabled. If true, the drop target will not accept any drops. */
|
|
9
9
|
disabled?: DropZoneProps['isDisabled'];
|
|
10
|
+
/** Whether the drop zone is in an invalid state */
|
|
11
|
+
invalid?: boolean;
|
|
12
|
+
/** Error message to display below the file names */
|
|
13
|
+
errorMessage?: string;
|
|
10
14
|
className?: DropZoneProps['className'];
|
|
11
15
|
style?: DropZoneProps['style'];
|
|
12
16
|
onDrop?: DropZoneProps['onDrop'];
|
|
@@ -24,5 +28,5 @@ type Props = {
|
|
|
24
28
|
acceptDirectory?: FileTriggerProps['acceptDirectory'];
|
|
25
29
|
onSelect?: FileTriggerProps['onSelect'];
|
|
26
30
|
} & MarginPadding & WidthHeight & Omit<DropZoneProps, 'isDisabled' | 'children'> & Omit<FileTriggerProps, 'children'>;
|
|
27
|
-
declare const DropZone: ({ label, showFileNames, disabled, acceptedFileTypes, allowsMultiple, defaultCamera, acceptDirectory, onDrop, onSelect, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
declare const DropZone: ({ label, showFileNames, disabled, invalid, errorMessage, acceptedFileTypes, allowsMultiple, defaultCamera, acceptDirectory, onDrop, onSelect, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
28
32
|
export default DropZone;
|
|
@@ -6,7 +6,7 @@ import matchesFileTypes from "../utils/matchesFileTypes.js";
|
|
|
6
6
|
import Ellipsis from "./Ellipsis.js";
|
|
7
7
|
import FileTrigger from "./FileTrigger.js";
|
|
8
8
|
import { marginProps, paddingProps, widthHeightProps } from "./helpers/styledProps.js";
|
|
9
|
-
const DropZone_DropZone = ({ label = 'Drop here', showFileNames = true, disabled, acceptedFileTypes, allowsMultiple, defaultCamera, acceptDirectory, onDrop, onSelect, ...rest })=>{
|
|
9
|
+
const DropZone_DropZone = ({ label = 'Drop here', showFileNames = true, disabled, invalid, errorMessage, acceptedFileTypes, allowsMultiple, defaultCamera, acceptDirectory, onDrop, onSelect, ...rest })=>{
|
|
10
10
|
const [displayFiles, setDisplayFiles] = useState('');
|
|
11
11
|
const showFileTrigger = !!acceptedFileTypes || !!allowsMultiple || !!defaultCamera || !!acceptDirectory || !!onSelect;
|
|
12
12
|
const handleFileDrop = (event)=>{
|
|
@@ -26,6 +26,7 @@ const DropZone_DropZone = ({ label = 'Drop here', showFileNames = true, disabled
|
|
|
26
26
|
};
|
|
27
27
|
return /*#__PURE__*/ jsxs(StyledDropZone, {
|
|
28
28
|
isDisabled: disabled,
|
|
29
|
+
invalid: invalid,
|
|
29
30
|
onDrop: showFileTrigger ? handleFileDrop : onDrop,
|
|
30
31
|
...rest,
|
|
31
32
|
children: [
|
|
@@ -48,18 +49,21 @@ const DropZone_DropZone = ({ label = 'Drop here', showFileNames = true, disabled
|
|
|
48
49
|
children: /*#__PURE__*/ jsx(Ellipsis, {
|
|
49
50
|
children: displayFiles
|
|
50
51
|
})
|
|
52
|
+
}),
|
|
53
|
+
errorMessage && /*#__PURE__*/ jsx(ErrorMessageText, {
|
|
54
|
+
children: errorMessage
|
|
51
55
|
})
|
|
52
56
|
]
|
|
53
57
|
});
|
|
54
58
|
};
|
|
55
|
-
const StyledDropZone = styled(DropZone)(({ theme })=>({
|
|
59
|
+
const StyledDropZone = styled(DropZone)(({ theme, invalid })=>({
|
|
56
60
|
display: 'flex',
|
|
57
61
|
flexDirection: 'column',
|
|
58
62
|
alignItems: 'center',
|
|
59
63
|
justifyContent: 'center',
|
|
60
64
|
gap: theme.size.sm,
|
|
61
65
|
padding: theme.size.md,
|
|
62
|
-
border: `1px dashed ${theme.scale4}`,
|
|
66
|
+
border: `1px dashed ${invalid ? theme.color.error : theme.scale4}`,
|
|
63
67
|
borderRadius: 8,
|
|
64
68
|
backgroundColor: 'transparent',
|
|
65
69
|
outline: 'none',
|
|
@@ -103,5 +107,8 @@ const FilesContainer = styled.div(({ theme })=>({
|
|
|
103
107
|
color: theme.scale6,
|
|
104
108
|
width: '100%'
|
|
105
109
|
}));
|
|
110
|
+
const ErrorMessageText = styled(StyledText)(({ theme })=>({
|
|
111
|
+
color: theme.color.error
|
|
112
|
+
}));
|
|
106
113
|
const components_DropZone = DropZone_DropZone;
|
|
107
114
|
export { components_DropZone as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wavv/ui",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.6",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"@babel/core": "^7.28.5",
|
|
62
62
|
"@babel/preset-env": "^7.28.5",
|
|
63
63
|
"@babel/preset-typescript": "^7.28.5",
|
|
64
|
-
"@biomejs/biome": "2.3.
|
|
64
|
+
"@biomejs/biome": "2.3.8",
|
|
65
65
|
"@chromatic-com/storybook": "^4.1.3",
|
|
66
66
|
"@emotion/babel-plugin": "^11.13.5",
|
|
67
67
|
"@emotion/react": "^11.14.0",
|
|
@@ -69,10 +69,10 @@
|
|
|
69
69
|
"@rsbuild/plugin-react": "^1.4.2",
|
|
70
70
|
"@rsbuild/plugin-svgr": "^1.2.2",
|
|
71
71
|
"@rslib/core": "^0.18.2",
|
|
72
|
-
"@storybook/addon-docs": "^
|
|
73
|
-
"@storybook/addon-links": "^
|
|
74
|
-
"@storybook/addon-themes": "^
|
|
75
|
-
"@storybook/test-runner": "^0.
|
|
72
|
+
"@storybook/addon-docs": "^10.1.2",
|
|
73
|
+
"@storybook/addon-links": "^10.1.2",
|
|
74
|
+
"@storybook/addon-themes": "^10.1.2",
|
|
75
|
+
"@storybook/test-runner": "^0.24.2",
|
|
76
76
|
"@svgr/core": "^8.1.0",
|
|
77
77
|
"@svgr/plugin-jsx": "^8.1.0",
|
|
78
78
|
"@svgr/plugin-prettier": "^8.1.0",
|
|
@@ -104,8 +104,8 @@
|
|
|
104
104
|
"react-dom": "^19.2.0",
|
|
105
105
|
"replace": "^1.2.2",
|
|
106
106
|
"signale": "^1.4.0",
|
|
107
|
-
"storybook": "^
|
|
108
|
-
"storybook-react-rsbuild": "^
|
|
107
|
+
"storybook": "^10.1.2",
|
|
108
|
+
"storybook-react-rsbuild": "^3.0.0",
|
|
109
109
|
"tsc-files": "^1.1.4",
|
|
110
110
|
"tslib": "^2.8.1",
|
|
111
111
|
"tsx": "^4.21.0",
|