@sqlrooms/dropzone 0.26.0-rc.0 → 0.26.0-rc.2

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.
@@ -2,7 +2,6 @@ import { FC } from 'react';
2
2
  /**
3
3
  * A customizable file dropzone component that handles file uploads through drag-and-drop or click interactions.
4
4
  *
5
- * @component
6
5
  * @example
7
6
  * ```tsx
8
7
  * // Basic usage
@@ -1 +1 @@
1
- {"version":3,"file":"file-dropzone.d.ts","sourceRoot":"","sources":["../src/file-dropzone.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,EAAE,EAAW,MAAM,OAAO,CAAC;AAKnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAsEA,CAAC"}
1
+ {"version":3,"file":"file-dropzone.d.ts","sourceRoot":"","sources":["../src/file-dropzone.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,EAAE,EAAW,MAAM,OAAO,CAAC;AAKnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAsEA,CAAC"}
@@ -6,7 +6,6 @@ import { cn, Spinner } from '@sqlrooms/ui';
6
6
  /**
7
7
  * A customizable file dropzone component that handles file uploads through drag-and-drop or click interactions.
8
8
  *
9
- * @component
10
9
  * @example
11
10
  * ```tsx
12
11
  * // Basic usage
@@ -1 +1 @@
1
- {"version":3,"file":"file-dropzone.js","sourceRoot":"","sources":["../src/file-dropzone.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AACnC,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAC;AAClC,OAAO,EAAC,EAAE,EAAE,OAAO,EAAC,MAAM,cAAc,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,CAAC,MAAM,YAAY,GAOpB,CAAC,KAAK,EAAE,EAAE;IACb,MAAM,EACJ,SAAS,EACT,MAAM,EACN,QAAQ,GAAG,IAAI,EACf,SAAS,EACT,eAAe,EACf,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,MAAM,EAAC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,IAAI,EAAC,GAAG,WAAW,CAAC;QACpE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;YACtB,kBAAkB,CAAC,IAAI,CAAC,CAAC;YACzB,IAAI,CAAC;gBACH,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC;oBAAS,CAAC;gBACT,kBAAkB,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC;QACH,CAAC;QACD,MAAM,EAAE,eAAe;QACvB,QAAQ;QACR,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,IAAI;KACjB,CAAC,CAAC;IAEH,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,oIAAoI,EACpI,YAAY,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,cAAc,EAC1D,SAAS,IAAI,oBAAoB,EACjC,CAAC,eAAe,IAAI,oBAAoB,EACxC,SAAS,CACV,KACG,YAAY,EAAE,EAClB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,YAE1C,eAAe,CAAC,CAAC,CAAC,CACjB,eAAK,SAAS,EAAC,oFAAoF,aACjG,KAAC,OAAO,IAAC,SAAS,EAAC,SAAS,GAAG,uBAE3B,CACP,CAAC,CAAC,CAAC,CACF,8BACE,mBAAW,aAAa,EAAE,GAAI,EAC9B,cAAK,SAAS,EAAC,+BAA+B,YAC5C,eAAK,SAAS,EAAC,wDAAwD,aACrE,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,IAAI,IAAC,SAAS,EAAC,SAAS,GAAG,EAC5B,YAAG,SAAS,EAAC,+BAA+B,YACzC,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,GAC3C,IACA,EACL,eAAe,IAAI,CAClB,eAAK,SAAS,EAAC,qCAAqC,aAClD,YAAG,SAAS,EAAC,mBAAmB,mCAAuB,EACvD,YAAG,SAAS,EAAC,+BAA+B,YACzC,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,GAC/C,IACA,CACP,EACA,QAAQ,IACL,GACF,IACL,CACJ,GACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {FC, useState} from 'react';\nimport {useDropzone} from 'react-dropzone';\nimport {Plus} from 'lucide-react';\nimport {cn, Spinner} from '@sqlrooms/ui';\n\n/**\n * A customizable file dropzone component that handles file uploads through drag-and-drop or click interactions.\n *\n * @component\n * @example\n * ```tsx\n * // Basic usage\n * <FileDropzone\n * onDrop={async (files) => {\n * console.log('Dropped files:', files);\n * // Handle file upload\n * }}\n * />\n *\n * // With file type restrictions and single file upload\n * <FileDropzone\n * multiple={false}\n * acceptedFormats={{\n * 'text/csv': ['.csv'],\n * 'application/json': ['.json']\n * }}\n * onDrop={async (files) => {\n * const file = files[0];\n * // Handle single file upload\n * }}\n * >\n * <p>Custom dropzone content</p>\n * </FileDropzone>\n * ```\n *\n * @param props - Component props\n * @param props.className - Optional CSS class name for styling\n * @param props.isInvalid - Optional flag to indicate validation error state\n * @param props.onDrop - Async callback function called when files are dropped or selected\n * @param props.multiple - Optional flag to allow multiple file selection (default: true)\n * @param props.acceptedFormats - Optional object defining accepted MIME types and their extensions\n * @param props.children - Optional React nodes to render inside the dropzone\n */\nexport const FileDropzone: FC<{\n className?: string;\n isInvalid?: boolean;\n onDrop: (files: File[]) => Promise<void>;\n multiple?: boolean;\n acceptedFormats?: Record<string, string[]>;\n children?: React.ReactNode;\n}> = (props) => {\n const {\n isInvalid,\n onDrop,\n multiple = true,\n className,\n acceptedFormats,\n children,\n } = props;\n\n const [isAddingDropped, setIsAddingDropped] = useState(false);\n\n const {getRootProps, getInputProps, isDragActive, open} = useDropzone({\n onDrop: async (files) => {\n setIsAddingDropped(true);\n try {\n await onDrop(files);\n } finally {\n setIsAddingDropped(false);\n }\n },\n accept: acceptedFormats,\n multiple,\n noClick: true,\n noKeyboard: true,\n });\n\n return (\n <div\n className={cn(\n 'relative flex h-full min-h-[180px] cursor-pointer flex-col overflow-hidden rounded-lg border-2 border-dashed p-2 transition-colors',\n isDragActive ? 'border-muted bg-muted/50' : 'border-muted',\n isInvalid && 'border-destructive',\n !isAddingDropped && 'hover:border-muted',\n className,\n )}\n {...getRootProps()}\n onClick={isAddingDropped ? undefined : open}\n >\n {isAddingDropped ? (\n <div className=\"text-muted-foreground flex h-full w-full items-center justify-center gap-4 text-xs\">\n <Spinner className=\"h-4 w-4\" />\n Adding files...\n </div>\n ) : (\n <>\n <input {...getInputProps()} />\n <div className=\"relative flex h-full flex-col\">\n <div className=\"flex h-full flex-col items-center justify-center gap-2\">\n <div className=\"flex items-center gap-2\">\n <Plus className=\"h-6 w-6\" />\n <p className=\"text-muted-foreground text-sm\">\n {isDragActive ? 'Drop here ...' : 'Add files'}\n </p>\n </div>\n {acceptedFormats && (\n <div className=\"flex flex-wrap justify-center gap-2\">\n <p className=\"text-xs font-bold\">Supported formats:</p>\n <p className=\"text-muted-foreground text-xs\">\n {Object.values(acceptedFormats).flat().join(', ')}\n </p>\n </div>\n )}\n {children}\n </div>\n </div>\n </>\n )}\n </div>\n );\n};\n"]}
1
+ {"version":3,"file":"file-dropzone.js","sourceRoot":"","sources":["../src/file-dropzone.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AACnC,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAC;AAClC,OAAO,EAAC,EAAE,EAAE,OAAO,EAAC,MAAM,cAAc,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,CAAC,MAAM,YAAY,GAOpB,CAAC,KAAK,EAAE,EAAE;IACb,MAAM,EACJ,SAAS,EACT,MAAM,EACN,QAAQ,GAAG,IAAI,EACf,SAAS,EACT,eAAe,EACf,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,MAAM,EAAC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,IAAI,EAAC,GAAG,WAAW,CAAC;QACpE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;YACtB,kBAAkB,CAAC,IAAI,CAAC,CAAC;YACzB,IAAI,CAAC;gBACH,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC;oBAAS,CAAC;gBACT,kBAAkB,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC;QACH,CAAC;QACD,MAAM,EAAE,eAAe;QACvB,QAAQ;QACR,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,IAAI;KACjB,CAAC,CAAC;IAEH,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,oIAAoI,EACpI,YAAY,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,cAAc,EAC1D,SAAS,IAAI,oBAAoB,EACjC,CAAC,eAAe,IAAI,oBAAoB,EACxC,SAAS,CACV,KACG,YAAY,EAAE,EAClB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,YAE1C,eAAe,CAAC,CAAC,CAAC,CACjB,eAAK,SAAS,EAAC,oFAAoF,aACjG,KAAC,OAAO,IAAC,SAAS,EAAC,SAAS,GAAG,uBAE3B,CACP,CAAC,CAAC,CAAC,CACF,8BACE,mBAAW,aAAa,EAAE,GAAI,EAC9B,cAAK,SAAS,EAAC,+BAA+B,YAC5C,eAAK,SAAS,EAAC,wDAAwD,aACrE,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,IAAI,IAAC,SAAS,EAAC,SAAS,GAAG,EAC5B,YAAG,SAAS,EAAC,+BAA+B,YACzC,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,GAC3C,IACA,EACL,eAAe,IAAI,CAClB,eAAK,SAAS,EAAC,qCAAqC,aAClD,YAAG,SAAS,EAAC,mBAAmB,mCAAuB,EACvD,YAAG,SAAS,EAAC,+BAA+B,YACzC,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,GAC/C,IACA,CACP,EACA,QAAQ,IACL,GACF,IACL,CACJ,GACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {FC, useState} from 'react';\nimport {useDropzone} from 'react-dropzone';\nimport {Plus} from 'lucide-react';\nimport {cn, Spinner} from '@sqlrooms/ui';\n\n/**\n * A customizable file dropzone component that handles file uploads through drag-and-drop or click interactions.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <FileDropzone\n * onDrop={async (files) => {\n * console.log('Dropped files:', files);\n * // Handle file upload\n * }}\n * />\n *\n * // With file type restrictions and single file upload\n * <FileDropzone\n * multiple={false}\n * acceptedFormats={{\n * 'text/csv': ['.csv'],\n * 'application/json': ['.json']\n * }}\n * onDrop={async (files) => {\n * const file = files[0];\n * // Handle single file upload\n * }}\n * >\n * <p>Custom dropzone content</p>\n * </FileDropzone>\n * ```\n *\n * @param props - Component props\n * @param props.className - Optional CSS class name for styling\n * @param props.isInvalid - Optional flag to indicate validation error state\n * @param props.onDrop - Async callback function called when files are dropped or selected\n * @param props.multiple - Optional flag to allow multiple file selection (default: true)\n * @param props.acceptedFormats - Optional object defining accepted MIME types and their extensions\n * @param props.children - Optional React nodes to render inside the dropzone\n */\nexport const FileDropzone: FC<{\n className?: string;\n isInvalid?: boolean;\n onDrop: (files: File[]) => Promise<void>;\n multiple?: boolean;\n acceptedFormats?: Record<string, string[]>;\n children?: React.ReactNode;\n}> = (props) => {\n const {\n isInvalid,\n onDrop,\n multiple = true,\n className,\n acceptedFormats,\n children,\n } = props;\n\n const [isAddingDropped, setIsAddingDropped] = useState(false);\n\n const {getRootProps, getInputProps, isDragActive, open} = useDropzone({\n onDrop: async (files) => {\n setIsAddingDropped(true);\n try {\n await onDrop(files);\n } finally {\n setIsAddingDropped(false);\n }\n },\n accept: acceptedFormats,\n multiple,\n noClick: true,\n noKeyboard: true,\n });\n\n return (\n <div\n className={cn(\n 'relative flex h-full min-h-[180px] cursor-pointer flex-col overflow-hidden rounded-lg border-2 border-dashed p-2 transition-colors',\n isDragActive ? 'border-muted bg-muted/50' : 'border-muted',\n isInvalid && 'border-destructive',\n !isAddingDropped && 'hover:border-muted',\n className,\n )}\n {...getRootProps()}\n onClick={isAddingDropped ? undefined : open}\n >\n {isAddingDropped ? (\n <div className=\"text-muted-foreground flex h-full w-full items-center justify-center gap-4 text-xs\">\n <Spinner className=\"h-4 w-4\" />\n Adding files...\n </div>\n ) : (\n <>\n <input {...getInputProps()} />\n <div className=\"relative flex h-full flex-col\">\n <div className=\"flex h-full flex-col items-center justify-center gap-2\">\n <div className=\"flex items-center gap-2\">\n <Plus className=\"h-6 w-6\" />\n <p className=\"text-muted-foreground text-sm\">\n {isDragActive ? 'Drop here ...' : 'Add files'}\n </p>\n </div>\n {acceptedFormats && (\n <div className=\"flex flex-wrap justify-center gap-2\">\n <p className=\"text-xs font-bold\">Supported formats:</p>\n <p className=\"text-muted-foreground text-xs\">\n {Object.values(acceptedFormats).flat().join(', ')}\n </p>\n </div>\n )}\n {children}\n </div>\n </div>\n </>\n )}\n </div>\n );\n};\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sqlrooms/dropzone",
3
- "version": "0.26.0-rc.0",
3
+ "version": "0.26.0-rc.2",
4
4
  "type": "module",
5
5
  "author": "Ilya Boyandin <ilya@boyandin.me>",
6
6
  "license": "MIT",
@@ -32,9 +32,9 @@
32
32
  "typedoc": "typedoc"
33
33
  },
34
34
  "dependencies": {
35
- "@sqlrooms/ui": "0.26.0-rc.0",
36
- "lucide-react": "^0.474.0",
35
+ "@sqlrooms/ui": "0.26.0-rc.2",
36
+ "lucide-react": "^0.544.0",
37
37
  "react-dropzone": "^14.3.8"
38
38
  },
39
- "gitHead": "05d355acee6ea65b33b09c6e49d7746ffacb866e"
39
+ "gitHead": "86e1f2915278944e6bec6b19ab8ac16dc094cbb9"
40
40
  }