@mainframework/dropzone 1.0.14 → 1.0.16
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.
package/README.md
CHANGED
|
@@ -1,57 +1,88 @@
|
|
|
1
|
-
|
|
1
|
+
# @mainframework/dropzone
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A React package that allows for the selection of files through drag and drop or the File Dialog API. Re-rendering is kept to a minimum, helping with application performance.
|
|
4
4
|
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
5
8
|
npm i @mainframework/dropzone
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
### Configuration and properties
|
|
9
|
-
|
|
10
|
-
`Hook config properties`
|
|
11
|
-
{
|
|
12
|
-
maximumUploadCount:5, //Defaults to 30
|
|
13
|
-
maximumFileSize = maxFileSize, //Defaults to 5 mb's
|
|
14
|
-
acceptedTypes = defaultTypeExtensions, //See the default extensions above
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
`Hook - returned properties`
|
|
18
|
-
|
|
19
|
-
```JS | TS
|
|
20
|
-
{
|
|
21
|
-
//Properties
|
|
22
|
-
validFiles, //These are the valid files selected
|
|
23
|
-
invalidFiles, //The invalid files a user attempted to select
|
|
24
|
-
|
|
25
|
-
//Methods
|
|
26
|
-
clearCache, // This will clear out the valid and invalid files
|
|
27
|
-
getValidFileStreams, //This will provde the actual File | Blobs that are within the valid Files
|
|
28
|
-
onCancel, //This will call clearCache
|
|
29
|
-
onIdChange, //Use this, if you want to change the name of a File.
|
|
30
|
-
onRemoveFile, //Remove a file from the valid files array
|
|
31
|
-
setMaximumFileSizeExceeded, //Use this for any errors generated, regarding the maximum file size
|
|
32
|
-
setMaximumUploadsExceeded, //Use this for any errors generated regarding the maximum number of uploads
|
|
33
|
-
|
|
34
|
-
//Component - Export the FileSelector: Use this ready made comopnent.
|
|
35
|
-
FileSelector: () => (
|
|
36
|
-
<FileSelector
|
|
37
|
-
inputId={"SomeID"} //Optional
|
|
38
|
-
messageParagraph={"A message to display in the dropzone"} //Optional - Defaults to "Drag 'n' drop some files here, or click to select files"
|
|
39
|
-
inputClassName={"some css classes"} //Optional - You can add your own css. The default is hidden, a tailwindcss class
|
|
40
|
-
clickableAreaClassName={"some css classes"} //Optional - You can add your own css. The default is composed of some tailwindclasses. It's either or.
|
|
41
|
-
dropZoneWrapperClassName={"some css classes"} //Optional - You can add your own css. The default is composed of some tailwindclasses. It's either or.
|
|
42
|
-
messageParagraphClassName={"some css classes"} //Optional - You can add your own css. The default is composed of some tailwindclasses. It's either or.
|
|
43
|
-
onChange={onInputChange}
|
|
44
|
-
onDragOver={onDragOver}
|
|
45
|
-
onDrop={onDrop}
|
|
46
|
-
onDragEnter={onDragEnter}
|
|
47
|
-
onDragLeave={onDragLeave}
|
|
48
|
-
/>
|
|
49
|
-
),
|
|
50
|
-
}
|
|
9
|
+
# or
|
|
10
|
+
yarn add @mainframework/dropzone
|
|
51
11
|
```
|
|
52
12
|
|
|
53
|
-
|
|
54
|
-
|
|
13
|
+
## Hook Configuration
|
|
14
|
+
|
|
15
|
+
The `useFileSelector` hook accepts optional configuration:
|
|
16
|
+
|
|
17
|
+
```ts
|
|
18
|
+
const { ... } = useFileSelector({
|
|
19
|
+
maximumUploadCount: 5, // Default: 30
|
|
20
|
+
maximumFileSize: 5e6, // Default: 5 MB
|
|
21
|
+
acceptedTypes: defaultTypeExtensions, // MIME type map, see below
|
|
22
|
+
});
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Hook Exports
|
|
26
|
+
|
|
27
|
+
The hook returns the following:
|
|
28
|
+
|
|
29
|
+
### Properties
|
|
30
|
+
|
|
31
|
+
| Export | Type | Description |
|
|
32
|
+
| -------------- | ------------ | ------------------------------------------------------------------------------------------------------------- |
|
|
33
|
+
| `validFiles` | `FileData[]` | Files that passed validation (accepted type, size, and count). Each item has `id`, `file`, `url`, and `type`. |
|
|
34
|
+
| `invalidFiles` | `File[]` | Files the user selected that failed validation (wrong type or rejected). |
|
|
35
|
+
|
|
36
|
+
### Methods
|
|
37
|
+
|
|
38
|
+
| Export | Signature | Description |
|
|
39
|
+
| --------------------- | -------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
|
|
40
|
+
| `clearCache` | `() => void` | Clears both `validFiles` and `invalidFiles`, and revokes blob URLs to free memory. |
|
|
41
|
+
| `getValidFileStreams` | `() => (File \| Blob)[]` | Returns the raw `File` or `Blob` instances from `validFiles` for upload or further processing. |
|
|
42
|
+
| `onCancel` | `() => void` | Same as `clearCache`; use when the user cancels selection. |
|
|
43
|
+
| `onIdChange` | `(index: number, id: string, files: FileData[]) => void` | Renames a file by ID. Pass the index, new ID, and current `validFiles` array. |
|
|
44
|
+
| `onRemoveFile` | `(index: number) => void` | Removes the file at the given index from `validFiles` and revokes its blob URL. |
|
|
45
|
+
| `clearBlobs` | `() => void` | Revokes blob URLs for all valid files to free memory. Does not clear the arrays. |
|
|
46
|
+
| `clearBlob` | `(file: File) => void` | Revokes the blob URL for a single `File` instance. |
|
|
47
|
+
|
|
48
|
+
### Error State
|
|
49
|
+
|
|
50
|
+
| Export | Type | Description |
|
|
51
|
+
| ---------------------------- | ------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
|
|
52
|
+
| `maxUploadError` | `{ status: boolean; message: string }` | Reflects whether the max upload count was exceeded. Check `status` and show `message` in your UI. |
|
|
53
|
+
| `maxFileSizeError` | `{ status: boolean; message: string }` | Reflects whether a file exceeded the max size. Check `status` and show `message` in your UI. |
|
|
54
|
+
| `setMaximumUploadsExceeded` | `(status?: boolean, fileCount?: number, maximumUploads?: number) => void` | Sets the max upload error state. Call with `true` and counts to show the error; call with `false` to clear. |
|
|
55
|
+
| `setMaximumFileSizeExceeded` | `(status?: boolean) => void` | Sets the max file size error state. Call with `true` to show the error; call with `false` to clear. |
|
|
56
|
+
|
|
57
|
+
### Component
|
|
58
|
+
|
|
59
|
+
| Export | Description |
|
|
60
|
+
| -------------- | ------------------------------------------------------------------------------------------------------------------------------ |
|
|
61
|
+
| `FileSelector` | A pre-wired dropzone component. Renders a clickable area and hidden file input, with drag-and-drop handlers bound to the hook. |
|
|
62
|
+
|
|
63
|
+
### FileSelector Props
|
|
64
|
+
|
|
65
|
+
When rendering `FileSelector`, you can pass:
|
|
66
|
+
|
|
67
|
+
| Prop | Type | Default | Description |
|
|
68
|
+
| --------------------------- | -------- | --------------------------------------------------------- | -------------------------------------------- |
|
|
69
|
+
| `inputId` | `string` | auto-generated | ID for the file input (for `aria-controls`). |
|
|
70
|
+
| `acceptTypes` | `string` | `.png, .jpg, .jpeg, .pdf, .svg, ...` | `accept` attribute for the file input. |
|
|
71
|
+
| `messageParagraph` | `string` | "Drag 'n' drop some files here, or click to select files" | Text shown in the dropzone. |
|
|
72
|
+
| `inputClassName` | `string` | `"hiddenInput"` | CSS classes for the hidden input. |
|
|
73
|
+
| `clickableAreaClassName` | `string` | Tailwind dropzone styles | CSS classes for the clickable area. |
|
|
74
|
+
| `dropZoneWrapperClassName` | `string` | Tailwind wrapper styles | CSS classes for the outer wrapper. |
|
|
75
|
+
| `messageParagraphClassName` | `string` | Tailwind text styles | CSS classes for the message text. |
|
|
76
|
+
| `ariaLabel` | `string` | "File upload drop zone" | Accessible name for the drop zone. |
|
|
77
|
+
| `ariaDescribedBy` | `string` | — | ID of element that describes the drop zone. |
|
|
78
|
+
| `ariaLabelButton` | `string` | "Choose files to upload" | Accessible label for the button. |
|
|
79
|
+
| `ariaLabelledBy` | `string` | — | ID of element that labels the button. |
|
|
80
|
+
|
|
81
|
+
## Default Accepted Types
|
|
82
|
+
|
|
83
|
+
The package validates files against a MIME type map. You can override it via `acceptedTypes` in the hook config:
|
|
84
|
+
|
|
85
|
+
```ts
|
|
55
86
|
export const defaultTypeExtensions: Record<string, string> = {
|
|
56
87
|
"image/png": ".png",
|
|
57
88
|
"image/jpeg": ".jpeg",
|
|
@@ -63,44 +94,41 @@ export const defaultTypeExtensions: Record<string, string> = {
|
|
|
63
94
|
};
|
|
64
95
|
```
|
|
65
96
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
```JS | TS
|
|
69
|
-
//Here you can set the following properties for the FileSelector. These are all optional
|
|
70
|
-
const { validFiles, onIdChange, onCancel, onRemoveFile, FileSelector } = useFileSelector({
|
|
71
|
-
acceptTypes: ".png" //Defaults to ".png, .jpg, .jpeg, .pdf, .svg, image/svg+xml, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
|
|
72
|
-
maximumUploadCount:5, //Defaults to 30
|
|
73
|
-
maximumFileSize = 5e6, //Defaults to 5 mb's
|
|
74
|
-
acceptedTypes = defaultTypeExtensions, //See the default extensions above
|
|
75
|
-
});
|
|
76
|
-
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
### Usage
|
|
97
|
+
## Usage Example
|
|
80
98
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
Once the package is installed, import the hook
|
|
84
|
-
|
|
85
|
-
```JS | TS
|
|
99
|
+
```tsx
|
|
86
100
|
import { useFileSelector } from "@mainframework/dropzone";
|
|
87
101
|
|
|
88
|
-
export const App = ()=>{
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
102
|
+
export const App = () => {
|
|
103
|
+
const {
|
|
104
|
+
validFiles,
|
|
105
|
+
invalidFiles,
|
|
106
|
+
onIdChange,
|
|
107
|
+
onCancel,
|
|
108
|
+
onRemoveFile,
|
|
109
|
+
FileSelector,
|
|
110
|
+
maxUploadError,
|
|
111
|
+
maxFileSizeError,
|
|
112
|
+
} = useFileSelector({
|
|
113
|
+
maximumUploadCount: 5,
|
|
114
|
+
maximumFileSize: 5e6,
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
const onSelect = () => {
|
|
93
118
|
if (Array.isArray(validFiles)) {
|
|
94
|
-
//
|
|
119
|
+
// Use validFiles for upload or preview
|
|
95
120
|
}
|
|
96
121
|
};
|
|
97
122
|
|
|
98
123
|
return (
|
|
99
124
|
<>
|
|
100
|
-
<FileSelector
|
|
125
|
+
<FileSelector messageParagraph="Drop files here or click to select" acceptTypes=".png,.jpg,.jpeg,.pdf" />
|
|
126
|
+
|
|
127
|
+
{maxUploadError.status && <p role="alert">{maxUploadError.message}</p>}
|
|
128
|
+
{maxFileSizeError.status && <p role="alert">{maxFileSizeError.message}</p>}
|
|
101
129
|
|
|
102
130
|
{validFiles.length > 0 && (
|
|
103
|
-
<PreviewImages
|
|
131
|
+
<PreviewImages
|
|
104
132
|
validFiles={validFiles}
|
|
105
133
|
onChange={onIdChange}
|
|
106
134
|
onSelect={onSelect}
|
|
@@ -110,5 +138,36 @@ const onSelect = () => {
|
|
|
110
138
|
)}
|
|
111
139
|
</>
|
|
112
140
|
);
|
|
113
|
-
}
|
|
141
|
+
};
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
## Manipulating validFiles in a Preview Component
|
|
145
|
+
|
|
146
|
+
As an example, when building a preview component (e.g. `PreviewImages`), use the hook’s methods to update `validFiles` based on user actions:
|
|
147
|
+
|
|
148
|
+
| User action | Hook method | How to use it |
|
|
149
|
+
| ------------------------ | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
150
|
+
| **Remove a single file** | `onRemoveFile` | Call `onRemoveFile(index)` when the user removes one file. The index is the position in `validFiles` (e.g. from a list key or map index). The hook removes that item and revokes its blob URL. |
|
|
151
|
+
| **Rename a file** | `onIdChange` | Call `onIdChange(index, newId, validFiles)` when the user changes a file’s name. Pass the index, the new ID (filename without extension), and the current `validFiles` array. The hook updates the file’s `id` and `file` in place. |
|
|
152
|
+
| **Clear all files** | `onCancel` | Call `onCancel()` when the user cancels or clears the selection. The hook clears `validFiles` and `invalidFiles` and revokes all blob URLs. |
|
|
153
|
+
|
|
154
|
+
Example `PreviewImages` wiring:
|
|
155
|
+
|
|
156
|
+
```tsx
|
|
157
|
+
const PreviewImages = ({ validFiles, onChange, onCancel, onRemoveFile }) => (
|
|
158
|
+
<div>
|
|
159
|
+
{validFiles.map((fileData, index) => (
|
|
160
|
+
<div key={fileData.id}>
|
|
161
|
+
<img src={fileData.url} alt={fileData.id} />
|
|
162
|
+
<input value={fileData.id} onChange={(e) => onChange(index, e.target.value, validFiles)} />
|
|
163
|
+
<button onClick={() => onRemoveFile(index)}>Remove</button>
|
|
164
|
+
</div>
|
|
165
|
+
))}
|
|
166
|
+
<button onClick={onCancel}>Clear all</button>
|
|
167
|
+
</div>
|
|
168
|
+
);
|
|
114
169
|
```
|
|
170
|
+
|
|
171
|
+
- **`onRemoveFile(index)`** — removes the file at `index` from `validFiles`.
|
|
172
|
+
- **`onChange(index, newId, validFiles)`** — renames the file at `index` to `newId`; pass the current `validFiles` so the hook can update state.
|
|
173
|
+
- **`onCancel()`** — clears all files and frees blob URLs.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-yellow-400:oklch(85.2% .199 91.936);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--spacing:.25rem;--font-weight-bold:700;--radius-md:.375rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.flex{display:flex}.h-full{height:100%}.min-h-0{min-height:calc(var(--spacing)*0)}.min-h-\[120px\]{min-height:120px}.w-full{width:100%}.flex-1{flex:1}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-500{border-color:var(--color-gray-500)}.border-yellow-400{border-color:var(--color-yellow-400)}.bg-inherit{background-color:inherit}.p-4{padding:calc(var(--spacing)*4)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}.text-center{text-align:center}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.text-gray-600{color:var(--color-gray-600)}.text-inherit{color:inherit}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media (hover:hover){.hover\:border-gray-400:hover{border-color:var(--color-gray-400)}}}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.hiddenInput{display:none}.glow-border{border:2px dotted #0000;border-image:linear-gradient(45deg,#0ff,#f0f) 1;box-shadow:0 0 10px #00ffffb3}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-yellow-400:oklch(85.2% .199 91.936);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--spacing:.25rem;--font-weight-bold:700;--radius-md:.375rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.flex{display:flex}.hidden{display:none}.h-full{height:100%}.min-h-0{min-height:calc(var(--spacing)*0)}.min-h-\[120px\]{min-height:120px}.w-full{width:100%}.flex-1{flex:1}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-500{border-color:var(--color-gray-500)}.border-yellow-400{border-color:var(--color-yellow-400)}.bg-inherit{background-color:inherit}.p-4{padding:calc(var(--spacing)*4)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}.text-center{text-align:center}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.text-gray-600{color:var(--color-gray-600)}.text-inherit{color:inherit}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media (hover:hover){.hover\:border-gray-400:hover{border-color:var(--color-gray-400)}}}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.hiddenInput{display:none}.glow-border{border:2px dotted #0000;border-image:linear-gradient(45deg,#0ff,#f0f) 1;box-shadow:0 0 10px #00ffffb3}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mainframework/dropzone",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.16",
|
|
4
4
|
"description": "A file selection package, without all of the re-rendering issues that come with other dropzone packages",
|
|
5
5
|
"main": "./dist/cjs/index.js",
|
|
6
6
|
"module": "./dist/esm/index.js",
|