@yamada-ui/dropzone 1.0.43 → 1.0.44-dev-20240917033401
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/dist/{chunk-YLUHIJHZ.mjs → chunk-JRWTNYMT.mjs} +4 -4
- package/dist/chunk-JRWTNYMT.mjs.map +1 -0
- package/dist/dropzone.d.mts +5 -3
- package/dist/dropzone.d.ts +5 -3
- package/dist/dropzone.js +2 -2
- package/dist/dropzone.js.map +1 -1
- package/dist/dropzone.mjs +1 -1
- package/dist/index.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +6 -6
- package/dist/chunk-YLUHIJHZ.mjs.map +0 -1
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
ui,
|
|
6
6
|
forwardRef,
|
|
7
7
|
omitThemeProps,
|
|
8
|
-
|
|
8
|
+
useComponentMultiStyle
|
|
9
9
|
} from "@yamada-ui/core";
|
|
10
10
|
import {
|
|
11
11
|
formControlProperties,
|
|
@@ -29,7 +29,7 @@ var [DropzoneProvider, useDropzoneContext] = createContext({
|
|
|
29
29
|
errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in "<Dropzone />"`
|
|
30
30
|
});
|
|
31
31
|
var Dropzone = forwardRef((props, ref) => {
|
|
32
|
-
const [styles, mergedProps] =
|
|
32
|
+
const [styles, mergedProps] = useComponentMultiStyle("Dropzone", props);
|
|
33
33
|
const {
|
|
34
34
|
id,
|
|
35
35
|
name,
|
|
@@ -106,7 +106,7 @@ var Dropzone = forwardRef((props, ref) => {
|
|
|
106
106
|
className: cx("ui-dropzone", className),
|
|
107
107
|
__css: css,
|
|
108
108
|
...containerProps,
|
|
109
|
-
...getRootProps(),
|
|
109
|
+
...getRootProps({}),
|
|
110
110
|
"data-accept": dataAttr(isDragAccept),
|
|
111
111
|
"data-reject": dataAttr(isDragReject),
|
|
112
112
|
"data-idle": dataAttr(isDragIdle),
|
|
@@ -181,4 +181,4 @@ export {
|
|
|
181
181
|
DropzoneReject,
|
|
182
182
|
DropzoneIdle
|
|
183
183
|
};
|
|
184
|
-
//# sourceMappingURL=chunk-
|
|
184
|
+
//# sourceMappingURL=chunk-JRWTNYMT.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/dropzone.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n ColorModeToken,\n CSS,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport type { FadeProps } from \"@yamada-ui/transitions\"\nimport { Fade } from \"@yamada-ui/transitions\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport {\n assignRef,\n createContext,\n cx,\n dataAttr,\n isArray,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport type { FC, ForwardedRef, PropsWithChildren } from \"react\"\nimport { Fragment } from \"react\"\nimport type {\n Accept,\n DropzoneOptions as ReactDropzoneOptions,\n} from \"react-dropzone-esm\"\nimport { useDropzone } from \"react-dropzone-esm\"\n\ninterface DropzoneContext {\n isLoading?: boolean\n isDragAccept: boolean\n isDragReject: boolean\n isDragIdle: boolean\n styles: { [key: string]: CSSUIObject }\n}\n\nconst [DropzoneProvider, useDropzoneContext] = createContext<DropzoneContext>({\n name: \"DropzoneContext\",\n errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Dropzone />\"`,\n})\n\ninterface DropzoneOptions {\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * Props for dropzone overlay element.\n */\n overlayProps?: FadeProps\n /**\n * Props for dropzone loading icon element.\n */\n loadingProps?: LoadingProps\n /**\n * File types to accept.\n */\n accept?: Accept | string[]\n /**\n * Ref to a open function.\n */\n openRef?: ForwardedRef<() => void | undefined>\n}\n\nexport interface DropzoneProps\n extends Merge<HTMLUIProps, Omit<ReactDropzoneOptions, \"accept\">>,\n ThemeProps<\"Dropzone\">,\n DropzoneOptions,\n FormControlOptions {}\n\n/**\n * `Dropzone` is a component used for uploading files via drag and drop.\n *\n * @see Docs https://yamada-ui.com/components/forms/dropzone\n */\nexport const Dropzone = forwardRef<DropzoneProps, \"input\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Dropzone\", props)\n const {\n id,\n name,\n className,\n isLoading,\n overlayProps,\n loadingProps,\n openRef,\n accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n children,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n\n const disabled = isLoading || rest.disabled || rest.readOnly\n\n const [formControlProps, containerProps] = splitObject(\n rest,\n formControlProperties,\n )\n\n const { getRootProps, getInputProps, isDragAccept, isDragReject, open } =\n useDropzone({\n disabled,\n accept: isArray(accept)\n ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {})\n : accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n })\n\n assignRef(openRef, open)\n\n const isDragIdle = !isDragAccept && !isDragReject\n\n const css: CSSUIObject = {\n position: \"relative\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n return (\n <DropzoneProvider\n value={{ isLoading, isDragAccept, isDragReject, isDragIdle, styles }}\n >\n <ui.div\n className={cx(\"ui-dropzone\", className)}\n __css={css}\n {...containerProps}\n {...getRootProps({})}\n data-accept={dataAttr(isDragAccept)}\n data-reject={dataAttr(isDragReject)}\n data-idle={dataAttr(isDragIdle)}\n data-loading={dataAttr(isLoading)}\n >\n <LoadingOverlay loadingProps={loadingProps} {...overlayProps} />\n <ui.input\n ref={ref}\n id={id}\n name={name}\n {...formControlProps}\n {...getInputProps()}\n />\n {children}\n </ui.div>\n </DropzoneProvider>\n )\n})\n\ninterface LoadingOverlayProps extends FadeProps {\n loadingProps?: LoadingProps\n}\n\nconst LoadingOverlay: FC<LoadingOverlayProps> = ({ loadingProps, ...rest }) => {\n const { isLoading, styles } = useDropzoneContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: 0,\n left: 0,\n w: \"100%\",\n h: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.overlay,\n }\n\n return (\n <Fade\n isOpen={isLoading}\n unmountOnExit\n className=\"ui-dropzone__overlay\"\n __css={css}\n {...rest}\n >\n <Loading\n className=\"ui-dropzone__overlay__loading\"\n fontSize=\"4xl\"\n {...loadingProps}\n />\n </Fade>\n )\n}\n\nexport const DropzoneAccept: FC<PropsWithChildren> = ({ children }) => {\n const { isDragAccept } = useDropzoneContext()\n\n return isDragAccept ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneReject: FC<PropsWithChildren> = ({ children }) => {\n const { isDragReject } = useDropzoneContext()\n\n return isDragReject ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneIdle: FC<PropsWithChildren> = ({ children }) => {\n const { isDragIdle } = useDropzoneContext()\n\n return isDragIdle ? <Fragment>{children}</Fragment> : null\n}\n"],"mappings":"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","names":[]}
|
package/dist/dropzone.d.mts
CHANGED
|
@@ -3,10 +3,11 @@ import { HTMLUIProps, ThemeProps, ColorModeToken, CSS } from '@yamada-ui/core';
|
|
|
3
3
|
import { FormControlOptions } from '@yamada-ui/form-control';
|
|
4
4
|
import { LoadingProps } from '@yamada-ui/loading';
|
|
5
5
|
import { FadeProps } from '@yamada-ui/transitions';
|
|
6
|
+
import { Merge } from '@yamada-ui/utils';
|
|
6
7
|
import { FC, PropsWithChildren, ForwardedRef } from 'react';
|
|
7
8
|
import { DropzoneOptions as DropzoneOptions$1, Accept } from 'react-dropzone-esm';
|
|
8
9
|
|
|
9
|
-
|
|
10
|
+
interface DropzoneOptions {
|
|
10
11
|
/**
|
|
11
12
|
* The border color when the input is focused.
|
|
12
13
|
*/
|
|
@@ -37,8 +38,9 @@ type DropzoneOptions = {
|
|
|
37
38
|
* Ref to a open function.
|
|
38
39
|
*/
|
|
39
40
|
openRef?: ForwardedRef<() => void | undefined>;
|
|
40
|
-
}
|
|
41
|
-
|
|
41
|
+
}
|
|
42
|
+
interface DropzoneProps extends Merge<HTMLUIProps, Omit<DropzoneOptions$1, "accept">>, ThemeProps<"Dropzone">, DropzoneOptions, FormControlOptions {
|
|
43
|
+
}
|
|
42
44
|
/**
|
|
43
45
|
* `Dropzone` is a component used for uploading files via drag and drop.
|
|
44
46
|
*
|
package/dist/dropzone.d.ts
CHANGED
|
@@ -3,10 +3,11 @@ import { HTMLUIProps, ThemeProps, ColorModeToken, CSS } from '@yamada-ui/core';
|
|
|
3
3
|
import { FormControlOptions } from '@yamada-ui/form-control';
|
|
4
4
|
import { LoadingProps } from '@yamada-ui/loading';
|
|
5
5
|
import { FadeProps } from '@yamada-ui/transitions';
|
|
6
|
+
import { Merge } from '@yamada-ui/utils';
|
|
6
7
|
import { FC, PropsWithChildren, ForwardedRef } from 'react';
|
|
7
8
|
import { DropzoneOptions as DropzoneOptions$1, Accept } from 'react-dropzone-esm';
|
|
8
9
|
|
|
9
|
-
|
|
10
|
+
interface DropzoneOptions {
|
|
10
11
|
/**
|
|
11
12
|
* The border color when the input is focused.
|
|
12
13
|
*/
|
|
@@ -37,8 +38,9 @@ type DropzoneOptions = {
|
|
|
37
38
|
* Ref to a open function.
|
|
38
39
|
*/
|
|
39
40
|
openRef?: ForwardedRef<() => void | undefined>;
|
|
40
|
-
}
|
|
41
|
-
|
|
41
|
+
}
|
|
42
|
+
interface DropzoneProps extends Merge<HTMLUIProps, Omit<DropzoneOptions$1, "accept">>, ThemeProps<"Dropzone">, DropzoneOptions, FormControlOptions {
|
|
43
|
+
}
|
|
42
44
|
/**
|
|
43
45
|
* `Dropzone` is a component used for uploading files via drag and drop.
|
|
44
46
|
*
|
package/dist/dropzone.js
CHANGED
|
@@ -40,7 +40,7 @@ var [DropzoneProvider, useDropzoneContext] = (0, import_utils.createContext)({
|
|
|
40
40
|
errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in "<Dropzone />"`
|
|
41
41
|
});
|
|
42
42
|
var Dropzone = (0, import_core.forwardRef)((props, ref) => {
|
|
43
|
-
const [styles, mergedProps] = (0, import_core.
|
|
43
|
+
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Dropzone", props);
|
|
44
44
|
const {
|
|
45
45
|
id,
|
|
46
46
|
name,
|
|
@@ -117,7 +117,7 @@ var Dropzone = (0, import_core.forwardRef)((props, ref) => {
|
|
|
117
117
|
className: (0, import_utils.cx)("ui-dropzone", className),
|
|
118
118
|
__css: css,
|
|
119
119
|
...containerProps,
|
|
120
|
-
...getRootProps(),
|
|
120
|
+
...getRootProps({}),
|
|
121
121
|
"data-accept": (0, import_utils.dataAttr)(isDragAccept),
|
|
122
122
|
"data-reject": (0, import_utils.dataAttr)(isDragReject),
|
|
123
123
|
"data-idle": (0, import_utils.dataAttr)(isDragIdle),
|
package/dist/dropzone.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/dropzone.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n ColorModeToken,\n CSS,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n
|
|
1
|
+
{"version":3,"sources":["../src/dropzone.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n ColorModeToken,\n CSS,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport type { FadeProps } from \"@yamada-ui/transitions\"\nimport { Fade } from \"@yamada-ui/transitions\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport {\n assignRef,\n createContext,\n cx,\n dataAttr,\n isArray,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport type { FC, ForwardedRef, PropsWithChildren } from \"react\"\nimport { Fragment } from \"react\"\nimport type {\n Accept,\n DropzoneOptions as ReactDropzoneOptions,\n} from \"react-dropzone-esm\"\nimport { useDropzone } from \"react-dropzone-esm\"\n\ninterface DropzoneContext {\n isLoading?: boolean\n isDragAccept: boolean\n isDragReject: boolean\n isDragIdle: boolean\n styles: { [key: string]: CSSUIObject }\n}\n\nconst [DropzoneProvider, useDropzoneContext] = createContext<DropzoneContext>({\n name: \"DropzoneContext\",\n errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Dropzone />\"`,\n})\n\ninterface DropzoneOptions {\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * Props for dropzone overlay element.\n */\n overlayProps?: FadeProps\n /**\n * Props for dropzone loading icon element.\n */\n loadingProps?: LoadingProps\n /**\n * File types to accept.\n */\n accept?: Accept | string[]\n /**\n * Ref to a open function.\n */\n openRef?: ForwardedRef<() => void | undefined>\n}\n\nexport interface DropzoneProps\n extends Merge<HTMLUIProps, Omit<ReactDropzoneOptions, \"accept\">>,\n ThemeProps<\"Dropzone\">,\n DropzoneOptions,\n FormControlOptions {}\n\n/**\n * `Dropzone` is a component used for uploading files via drag and drop.\n *\n * @see Docs https://yamada-ui.com/components/forms/dropzone\n */\nexport const Dropzone = forwardRef<DropzoneProps, \"input\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Dropzone\", props)\n const {\n id,\n name,\n className,\n isLoading,\n overlayProps,\n loadingProps,\n openRef,\n accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n children,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n\n const disabled = isLoading || rest.disabled || rest.readOnly\n\n const [formControlProps, containerProps] = splitObject(\n rest,\n formControlProperties,\n )\n\n const { getRootProps, getInputProps, isDragAccept, isDragReject, open } =\n useDropzone({\n disabled,\n accept: isArray(accept)\n ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {})\n : accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n })\n\n assignRef(openRef, open)\n\n const isDragIdle = !isDragAccept && !isDragReject\n\n const css: CSSUIObject = {\n position: \"relative\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n return (\n <DropzoneProvider\n value={{ isLoading, isDragAccept, isDragReject, isDragIdle, styles }}\n >\n <ui.div\n className={cx(\"ui-dropzone\", className)}\n __css={css}\n {...containerProps}\n {...getRootProps({})}\n data-accept={dataAttr(isDragAccept)}\n data-reject={dataAttr(isDragReject)}\n data-idle={dataAttr(isDragIdle)}\n data-loading={dataAttr(isLoading)}\n >\n <LoadingOverlay loadingProps={loadingProps} {...overlayProps} />\n <ui.input\n ref={ref}\n id={id}\n name={name}\n {...formControlProps}\n {...getInputProps()}\n />\n {children}\n </ui.div>\n </DropzoneProvider>\n )\n})\n\ninterface LoadingOverlayProps extends FadeProps {\n loadingProps?: LoadingProps\n}\n\nconst LoadingOverlay: FC<LoadingOverlayProps> = ({ loadingProps, ...rest }) => {\n const { isLoading, styles } = useDropzoneContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: 0,\n left: 0,\n w: \"100%\",\n h: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.overlay,\n }\n\n return (\n <Fade\n isOpen={isLoading}\n unmountOnExit\n className=\"ui-dropzone__overlay\"\n __css={css}\n {...rest}\n >\n <Loading\n className=\"ui-dropzone__overlay__loading\"\n fontSize=\"4xl\"\n {...loadingProps}\n />\n </Fade>\n )\n}\n\nexport const DropzoneAccept: FC<PropsWithChildren> = ({ children }) => {\n const { isDragAccept } = useDropzoneContext()\n\n return isDragAccept ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneReject: FC<PropsWithChildren> = ({ children }) => {\n const { isDragReject } = useDropzoneContext()\n\n return isDragReject ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneIdle: FC<PropsWithChildren> = ({ children }) => {\n const { isDragIdle } = useDropzoneContext()\n\n return isDragIdle ? <Fragment>{children}</Fragment> : null\n}\n"],"mappings":"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","names":[]}
|
package/dist/dropzone.mjs
CHANGED
package/dist/index.d.mts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -49,7 +49,7 @@ var [DropzoneProvider, useDropzoneContext] = (0, import_utils.createContext)({
|
|
|
49
49
|
errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in "<Dropzone />"`
|
|
50
50
|
});
|
|
51
51
|
var Dropzone = (0, import_core.forwardRef)((props, ref) => {
|
|
52
|
-
const [styles, mergedProps] = (0, import_core.
|
|
52
|
+
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Dropzone", props);
|
|
53
53
|
const {
|
|
54
54
|
id,
|
|
55
55
|
name,
|
|
@@ -126,7 +126,7 @@ var Dropzone = (0, import_core.forwardRef)((props, ref) => {
|
|
|
126
126
|
className: (0, import_utils.cx)("ui-dropzone", className),
|
|
127
127
|
__css: css,
|
|
128
128
|
...containerProps,
|
|
129
|
-
...getRootProps(),
|
|
129
|
+
...getRootProps({}),
|
|
130
130
|
"data-accept": (0, import_utils.dataAttr)(isDragAccept),
|
|
131
131
|
"data-reject": (0, import_utils.dataAttr)(isDragReject),
|
|
132
132
|
"data-idle": (0, import_utils.dataAttr)(isDragIdle),
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/dropzone.tsx","../src/accept-types.ts"],"sourcesContent":["export {\n Dropzone,\n DropzoneAccept,\n DropzoneIdle,\n DropzoneReject,\n} from \"./dropzone\"\nexport type { DropzoneProps } from \"./dropzone\"\nexport * from \"./accept-types\"\nexport type {\n FileRejection,\n FileError,\n ErrorCode,\n DropEvent,\n} from \"react-dropzone-esm\"\n","import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n ColorModeToken,\n CSS,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport type { FadeProps } from \"@yamada-ui/transitions\"\nimport { Fade } from \"@yamada-ui/transitions\"\nimport {\n assignRef,\n createContext,\n cx,\n dataAttr,\n isArray,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport type { FC, ForwardedRef, PropsWithChildren } from \"react\"\nimport { Fragment } from \"react\"\nimport type {\n Accept,\n DropzoneOptions as ReactDropzoneOptions,\n} from \"react-dropzone-esm\"\nimport { useDropzone } from \"react-dropzone-esm\"\n\ntype DropzoneContext = {\n isLoading?: boolean\n isDragAccept: boolean\n isDragReject: boolean\n isDragIdle: boolean\n styles: Record<string, CSSUIObject>\n}\n\nconst [DropzoneProvider, useDropzoneContext] = createContext<DropzoneContext>({\n name: \"DropzoneContext\",\n errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Dropzone />\"`,\n})\n\ntype DropzoneOptions = {\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * Props for dropzone overlay element.\n */\n overlayProps?: FadeProps\n /**\n * Props for dropzone loading icon element.\n */\n loadingProps?: LoadingProps\n /**\n * File types to accept.\n */\n accept?: Accept | string[]\n /**\n * Ref to a open function.\n */\n openRef?: ForwardedRef<() => void | undefined>\n}\n\nexport type DropzoneProps = Omit<HTMLUIProps<\"div\">, \"onDrop\"> &\n ThemeProps<\"Dropzone\"> &\n DropzoneOptions &\n FormControlOptions &\n Omit<ReactDropzoneOptions, \"accept\">\n\n/**\n * `Dropzone` is a component used for uploading files via drag and drop.\n *\n * @see Docs https://yamada-ui.com/components/forms/dropzone\n */\nexport const Dropzone = forwardRef<DropzoneProps, \"input\">((props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Dropzone\", props)\n const {\n id,\n name,\n className,\n isLoading,\n overlayProps,\n loadingProps,\n openRef,\n accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n children,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n\n const disabled = isLoading || rest.disabled || rest.readOnly\n\n const [formControlProps, containerProps] = splitObject(\n rest,\n formControlProperties,\n )\n\n const { getRootProps, getInputProps, isDragAccept, isDragReject, open } =\n useDropzone({\n disabled,\n accept: isArray(accept)\n ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {})\n : accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n })\n\n assignRef(openRef, open)\n\n const isDragIdle = !isDragAccept && !isDragReject\n\n const css: CSSUIObject = {\n position: \"relative\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n return (\n <DropzoneProvider\n value={{ isLoading, isDragAccept, isDragReject, isDragIdle, styles }}\n >\n <ui.div\n className={cx(\"ui-dropzone\", className)}\n __css={css}\n {...containerProps}\n {...getRootProps()}\n data-accept={dataAttr(isDragAccept)}\n data-reject={dataAttr(isDragReject)}\n data-idle={dataAttr(isDragIdle)}\n data-loading={dataAttr(isLoading)}\n >\n <LoadingOverlay loadingProps={loadingProps} {...overlayProps} />\n <ui.input\n ref={ref}\n id={id}\n name={name}\n {...formControlProps}\n {...getInputProps()}\n />\n {children}\n </ui.div>\n </DropzoneProvider>\n )\n})\n\ntype LoadingOverlayProps = FadeProps & { loadingProps?: LoadingProps }\n\nconst LoadingOverlay: FC<LoadingOverlayProps> = ({ loadingProps, ...rest }) => {\n const { isLoading, styles } = useDropzoneContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: 0,\n left: 0,\n w: \"100%\",\n h: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.overlay,\n }\n\n return (\n <Fade\n isOpen={isLoading}\n unmountOnExit\n className=\"ui-dropzone__overlay\"\n __css={css}\n {...rest}\n >\n <Loading\n className=\"ui-dropzone__overlay__loading\"\n fontSize=\"4xl\"\n {...loadingProps}\n />\n </Fade>\n )\n}\n\nexport const DropzoneAccept: FC<PropsWithChildren> = ({ children }) => {\n const { isDragAccept } = useDropzoneContext()\n\n return isDragAccept ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneReject: FC<PropsWithChildren> = ({ children }) => {\n const { isDragReject } = useDropzoneContext()\n\n return isDragReject ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneIdle: FC<PropsWithChildren> = ({ children }) => {\n const { isDragIdle } = useDropzoneContext()\n\n return isDragIdle ? <Fragment>{children}</Fragment> : null\n}\n","export const ACCEPT_TYPES = {\n txt: \"text/plain\",\n html: \"text/html\",\n csv: \"text/csv\",\n png: \"image/png\",\n gif: \"image/gif\",\n jpeg: \"image/jpeg\",\n svg: \"image/svg+xml\",\n webp: \"image/webp\",\n mp3: \"audio/mpeg\",\n mpeg: \"video/mpeg\",\n mp4: \"video/mp4\",\n zip: \"application/zip\",\n pdf: \"application/pdf\",\n doc: \"application/msword\",\n docx: \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\",\n xls: \"application/vnd.ms-excel\",\n xlsx: \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n ppt: \"application/vnd.ms-powerpoint\",\n pptx: \"application/vnd.openxmlformats-officedocument.presentationml.presentation\",\n exe: \"application/vnd.microsoft.portable-executable\",\n} as const\n\nexport const IMAGE_ACCEPT_TYPE = [\n ACCEPT_TYPES.png,\n ACCEPT_TYPES.gif,\n ACCEPT_TYPES.jpeg,\n ACCEPT_TYPES.svg,\n ACCEPT_TYPES.webp,\n]\nexport const PDF_ACCEPT_TYPE = [ACCEPT_TYPES.pdf]\nexport const MS_WORD_ACCEPT_TYPE = [ACCEPT_TYPES.doc, ACCEPT_TYPES.docx]\nexport const MS_EXCEL_ACCEPT_TYPE = [ACCEPT_TYPES.xls, ACCEPT_TYPES.xlsx]\nexport const MS_POWER_POINT_ACCEPT_TYPE = [ACCEPT_TYPES.ppt, ACCEPT_TYPES.pptx]\nexport const EXE_ACCEPT_TYPE = [ACCEPT_TYPES.exe]\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACOA,kBAKO;AAEP,0BAGO;AAEP,qBAAwB;AAExB,yBAAqB;AACrB,mBAOO;AAEP,mBAAyB;AAKzB,gCAA4B;AA6ItB;AAnIN,IAAM,CAAC,kBAAkB,kBAAkB,QAAI,4BAA+B;AAAA,EAC5E,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AA8CM,IAAM,eAAW,wBAAmC,CAAC,OAAO,QAAQ;AACzE,QAAM,CAAC,QAAQ,WAAW,QAAI,oCAAuB,YAAY,KAAK;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,6CAAoB,4BAAe,WAAW,CAAC;AAEnD,QAAM,WAAW,aAAa,KAAK,YAAY,KAAK;AAEpD,QAAM,CAAC,kBAAkB,cAAc,QAAI;AAAA,IACzC;AAAA,IACA;AAAA,EACF;AAEA,QAAM,EAAE,cAAc,eAAe,cAAc,cAAc,KAAK,QACpE,uCAAY;AAAA,IACV;AAAA,IACA,YAAQ,sBAAQ,MAAM,IAClB,OAAO,OAAO,CAAC,MAAM,aAAa,EAAE,GAAG,MAAM,CAAC,OAAO,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC,IACjE;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAEH,8BAAU,SAAS,IAAI;AAEvB,QAAM,aAAa,CAAC,gBAAgB,CAAC;AAErC,QAAM,MAAmB;AAAA,IACvB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,GAAG,OAAO;AAAA,EACZ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,WAAW,cAAc,cAAc,YAAY,OAAO;AAAA,MAEnE;AAAA,QAAC,eAAG;AAAA,QAAH;AAAA,UACC,eAAW,iBAAG,eAAe,SAAS;AAAA,UACtC,OAAO;AAAA,UACN,GAAG;AAAA,UACH,GAAG,aAAa;AAAA,UACjB,mBAAa,uBAAS,YAAY;AAAA,UAClC,mBAAa,uBAAS,YAAY;AAAA,UAClC,iBAAW,uBAAS,UAAU;AAAA,UAC9B,oBAAc,uBAAS,SAAS;AAAA,UAEhC;AAAA,wDAAC,kBAAe,cAA6B,GAAG,cAAc;AAAA,YAC9D;AAAA,cAAC,eAAG;AAAA,cAAH;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACC,GAAG;AAAA,gBACH,GAAG,cAAc;AAAA;AAAA,YACpB;AAAA,YACC;AAAA;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ,CAAC;AAID,IAAM,iBAA0C,CAAC,EAAE,cAAc,GAAG,KAAK,MAAM;AAC7E,QAAM,EAAE,WAAW,OAAO,IAAI,mBAAmB;AAEjD,QAAM,MAAmB;AAAA,IACvB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,GAAG;AAAA,IACH,GAAG;AAAA,IACH,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,GAAG,OAAO;AAAA,EACZ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ;AAAA,MACR,eAAa;AAAA,MACb,WAAU;AAAA,MACV,OAAO;AAAA,MACN,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,UAAS;AAAA,UACR,GAAG;AAAA;AAAA,MACN;AAAA;AAAA,EACF;AAEJ;AAEO,IAAM,iBAAwC,CAAC,EAAE,SAAS,MAAM;AACrE,QAAM,EAAE,aAAa,IAAI,mBAAmB;AAE5C,SAAO,eAAe,4CAAC,yBAAU,UAAS,IAAc;AAC1D;AAEO,IAAM,iBAAwC,CAAC,EAAE,SAAS,MAAM;AACrE,QAAM,EAAE,aAAa,IAAI,mBAAmB;AAE5C,SAAO,eAAe,4CAAC,yBAAU,UAAS,IAAc;AAC1D;AAEO,IAAM,eAAsC,CAAC,EAAE,SAAS,MAAM;AACnE,QAAM,EAAE,WAAW,IAAI,mBAAmB;AAE1C,SAAO,aAAa,4CAAC,yBAAU,UAAS,IAAc;AACxD;;;AC3PO,IAAM,eAAe;AAAA,EAC1B,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AACP;AAEO,IAAM,oBAAoB;AAAA,EAC/B,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AACf;AACO,IAAM,kBAAkB,CAAC,aAAa,GAAG;AACzC,IAAM,sBAAsB,CAAC,aAAa,KAAK,aAAa,IAAI;AAChE,IAAM,uBAAuB,CAAC,aAAa,KAAK,aAAa,IAAI;AACjE,IAAM,6BAA6B,CAAC,aAAa,KAAK,aAAa,IAAI;AACvE,IAAM,kBAAkB,CAAC,aAAa,GAAG;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/dropzone.tsx","../src/accept-types.ts"],"sourcesContent":["export {\n Dropzone,\n DropzoneAccept,\n DropzoneIdle,\n DropzoneReject,\n} from \"./dropzone\"\nexport type { DropzoneProps } from \"./dropzone\"\nexport * from \"./accept-types\"\nexport type {\n FileRejection,\n FileError,\n ErrorCode,\n DropEvent,\n} from \"react-dropzone-esm\"\n","import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n ColorModeToken,\n CSS,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport type { FadeProps } from \"@yamada-ui/transitions\"\nimport { Fade } from \"@yamada-ui/transitions\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport {\n assignRef,\n createContext,\n cx,\n dataAttr,\n isArray,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport type { FC, ForwardedRef, PropsWithChildren } from \"react\"\nimport { Fragment } from \"react\"\nimport type {\n Accept,\n DropzoneOptions as ReactDropzoneOptions,\n} from \"react-dropzone-esm\"\nimport { useDropzone } from \"react-dropzone-esm\"\n\ninterface DropzoneContext {\n isLoading?: boolean\n isDragAccept: boolean\n isDragReject: boolean\n isDragIdle: boolean\n styles: { [key: string]: CSSUIObject }\n}\n\nconst [DropzoneProvider, useDropzoneContext] = createContext<DropzoneContext>({\n name: \"DropzoneContext\",\n errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Dropzone />\"`,\n})\n\ninterface DropzoneOptions {\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * Props for dropzone overlay element.\n */\n overlayProps?: FadeProps\n /**\n * Props for dropzone loading icon element.\n */\n loadingProps?: LoadingProps\n /**\n * File types to accept.\n */\n accept?: Accept | string[]\n /**\n * Ref to a open function.\n */\n openRef?: ForwardedRef<() => void | undefined>\n}\n\nexport interface DropzoneProps\n extends Merge<HTMLUIProps, Omit<ReactDropzoneOptions, \"accept\">>,\n ThemeProps<\"Dropzone\">,\n DropzoneOptions,\n FormControlOptions {}\n\n/**\n * `Dropzone` is a component used for uploading files via drag and drop.\n *\n * @see Docs https://yamada-ui.com/components/forms/dropzone\n */\nexport const Dropzone = forwardRef<DropzoneProps, \"input\">((props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Dropzone\", props)\n const {\n id,\n name,\n className,\n isLoading,\n overlayProps,\n loadingProps,\n openRef,\n accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n children,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n\n const disabled = isLoading || rest.disabled || rest.readOnly\n\n const [formControlProps, containerProps] = splitObject(\n rest,\n formControlProperties,\n )\n\n const { getRootProps, getInputProps, isDragAccept, isDragReject, open } =\n useDropzone({\n disabled,\n accept: isArray(accept)\n ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {})\n : accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n })\n\n assignRef(openRef, open)\n\n const isDragIdle = !isDragAccept && !isDragReject\n\n const css: CSSUIObject = {\n position: \"relative\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n return (\n <DropzoneProvider\n value={{ isLoading, isDragAccept, isDragReject, isDragIdle, styles }}\n >\n <ui.div\n className={cx(\"ui-dropzone\", className)}\n __css={css}\n {...containerProps}\n {...getRootProps({})}\n data-accept={dataAttr(isDragAccept)}\n data-reject={dataAttr(isDragReject)}\n data-idle={dataAttr(isDragIdle)}\n data-loading={dataAttr(isLoading)}\n >\n <LoadingOverlay loadingProps={loadingProps} {...overlayProps} />\n <ui.input\n ref={ref}\n id={id}\n name={name}\n {...formControlProps}\n {...getInputProps()}\n />\n {children}\n </ui.div>\n </DropzoneProvider>\n )\n})\n\ninterface LoadingOverlayProps extends FadeProps {\n loadingProps?: LoadingProps\n}\n\nconst LoadingOverlay: FC<LoadingOverlayProps> = ({ loadingProps, ...rest }) => {\n const { isLoading, styles } = useDropzoneContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: 0,\n left: 0,\n w: \"100%\",\n h: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.overlay,\n }\n\n return (\n <Fade\n isOpen={isLoading}\n unmountOnExit\n className=\"ui-dropzone__overlay\"\n __css={css}\n {...rest}\n >\n <Loading\n className=\"ui-dropzone__overlay__loading\"\n fontSize=\"4xl\"\n {...loadingProps}\n />\n </Fade>\n )\n}\n\nexport const DropzoneAccept: FC<PropsWithChildren> = ({ children }) => {\n const { isDragAccept } = useDropzoneContext()\n\n return isDragAccept ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneReject: FC<PropsWithChildren> = ({ children }) => {\n const { isDragReject } = useDropzoneContext()\n\n return isDragReject ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneIdle: FC<PropsWithChildren> = ({ children }) => {\n const { isDragIdle } = useDropzoneContext()\n\n return isDragIdle ? <Fragment>{children}</Fragment> : null\n}\n","export const ACCEPT_TYPES = {\n txt: \"text/plain\",\n html: \"text/html\",\n csv: \"text/csv\",\n png: \"image/png\",\n gif: \"image/gif\",\n jpeg: \"image/jpeg\",\n svg: \"image/svg+xml\",\n webp: \"image/webp\",\n mp3: \"audio/mpeg\",\n mpeg: \"video/mpeg\",\n mp4: \"video/mp4\",\n zip: \"application/zip\",\n pdf: \"application/pdf\",\n doc: \"application/msword\",\n docx: \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\",\n xls: \"application/vnd.ms-excel\",\n xlsx: \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n ppt: \"application/vnd.ms-powerpoint\",\n pptx: \"application/vnd.openxmlformats-officedocument.presentationml.presentation\",\n exe: \"application/vnd.microsoft.portable-executable\",\n} as const\n\nexport const IMAGE_ACCEPT_TYPE = [\n ACCEPT_TYPES.png,\n ACCEPT_TYPES.gif,\n ACCEPT_TYPES.jpeg,\n ACCEPT_TYPES.svg,\n ACCEPT_TYPES.webp,\n]\nexport const PDF_ACCEPT_TYPE = [ACCEPT_TYPES.pdf]\nexport const MS_WORD_ACCEPT_TYPE = [ACCEPT_TYPES.doc, ACCEPT_TYPES.docx]\nexport const MS_EXCEL_ACCEPT_TYPE = [ACCEPT_TYPES.xls, ACCEPT_TYPES.xlsx]\nexport const MS_POWER_POINT_ACCEPT_TYPE = [ACCEPT_TYPES.ppt, ACCEPT_TYPES.pptx]\nexport const EXE_ACCEPT_TYPE = [ACCEPT_TYPES.exe]\n"],"mappings":"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","names":[]}
|
package/dist/index.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/dropzone",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.44-dev-20240917033401",
|
|
4
4
|
"description": "Yamada UI dropzone component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"yamada",
|
|
@@ -37,11 +37,11 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"react-dropzone-esm": "^15.0.1",
|
|
40
|
-
"@yamada-ui/
|
|
41
|
-
"@yamada-ui/utils": "1.5.
|
|
42
|
-
"@yamada-ui/
|
|
43
|
-
"@yamada-ui/
|
|
44
|
-
"@yamada-ui/
|
|
40
|
+
"@yamada-ui/core": "1.14.1-dev-20240917033401",
|
|
41
|
+
"@yamada-ui/utils": "1.5.1-dev-20240917033401",
|
|
42
|
+
"@yamada-ui/form-control": "2.1.2-dev-20240917033401",
|
|
43
|
+
"@yamada-ui/loading": "1.1.16-dev-20240917033401",
|
|
44
|
+
"@yamada-ui/transitions": "1.1.5-dev-20240917033401"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"clean-package": "2.2.0",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/dropzone.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n ColorModeToken,\n CSS,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport type { FadeProps } from \"@yamada-ui/transitions\"\nimport { Fade } from \"@yamada-ui/transitions\"\nimport {\n assignRef,\n createContext,\n cx,\n dataAttr,\n isArray,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport type { FC, ForwardedRef, PropsWithChildren } from \"react\"\nimport { Fragment } from \"react\"\nimport type {\n Accept,\n DropzoneOptions as ReactDropzoneOptions,\n} from \"react-dropzone-esm\"\nimport { useDropzone } from \"react-dropzone-esm\"\n\ntype DropzoneContext = {\n isLoading?: boolean\n isDragAccept: boolean\n isDragReject: boolean\n isDragIdle: boolean\n styles: Record<string, CSSUIObject>\n}\n\nconst [DropzoneProvider, useDropzoneContext] = createContext<DropzoneContext>({\n name: \"DropzoneContext\",\n errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Dropzone />\"`,\n})\n\ntype DropzoneOptions = {\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * Props for dropzone overlay element.\n */\n overlayProps?: FadeProps\n /**\n * Props for dropzone loading icon element.\n */\n loadingProps?: LoadingProps\n /**\n * File types to accept.\n */\n accept?: Accept | string[]\n /**\n * Ref to a open function.\n */\n openRef?: ForwardedRef<() => void | undefined>\n}\n\nexport type DropzoneProps = Omit<HTMLUIProps<\"div\">, \"onDrop\"> &\n ThemeProps<\"Dropzone\"> &\n DropzoneOptions &\n FormControlOptions &\n Omit<ReactDropzoneOptions, \"accept\">\n\n/**\n * `Dropzone` is a component used for uploading files via drag and drop.\n *\n * @see Docs https://yamada-ui.com/components/forms/dropzone\n */\nexport const Dropzone = forwardRef<DropzoneProps, \"input\">((props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Dropzone\", props)\n const {\n id,\n name,\n className,\n isLoading,\n overlayProps,\n loadingProps,\n openRef,\n accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n children,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n\n const disabled = isLoading || rest.disabled || rest.readOnly\n\n const [formControlProps, containerProps] = splitObject(\n rest,\n formControlProperties,\n )\n\n const { getRootProps, getInputProps, isDragAccept, isDragReject, open } =\n useDropzone({\n disabled,\n accept: isArray(accept)\n ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {})\n : accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n })\n\n assignRef(openRef, open)\n\n const isDragIdle = !isDragAccept && !isDragReject\n\n const css: CSSUIObject = {\n position: \"relative\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n return (\n <DropzoneProvider\n value={{ isLoading, isDragAccept, isDragReject, isDragIdle, styles }}\n >\n <ui.div\n className={cx(\"ui-dropzone\", className)}\n __css={css}\n {...containerProps}\n {...getRootProps()}\n data-accept={dataAttr(isDragAccept)}\n data-reject={dataAttr(isDragReject)}\n data-idle={dataAttr(isDragIdle)}\n data-loading={dataAttr(isLoading)}\n >\n <LoadingOverlay loadingProps={loadingProps} {...overlayProps} />\n <ui.input\n ref={ref}\n id={id}\n name={name}\n {...formControlProps}\n {...getInputProps()}\n />\n {children}\n </ui.div>\n </DropzoneProvider>\n )\n})\n\ntype LoadingOverlayProps = FadeProps & { loadingProps?: LoadingProps }\n\nconst LoadingOverlay: FC<LoadingOverlayProps> = ({ loadingProps, ...rest }) => {\n const { isLoading, styles } = useDropzoneContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: 0,\n left: 0,\n w: \"100%\",\n h: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.overlay,\n }\n\n return (\n <Fade\n isOpen={isLoading}\n unmountOnExit\n className=\"ui-dropzone__overlay\"\n __css={css}\n {...rest}\n >\n <Loading\n className=\"ui-dropzone__overlay__loading\"\n fontSize=\"4xl\"\n {...loadingProps}\n />\n </Fade>\n )\n}\n\nexport const DropzoneAccept: FC<PropsWithChildren> = ({ children }) => {\n const { isDragAccept } = useDropzoneContext()\n\n return isDragAccept ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneReject: FC<PropsWithChildren> = ({ children }) => {\n const { isDragReject } = useDropzoneContext()\n\n return isDragReject ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneIdle: FC<PropsWithChildren> = ({ children }) => {\n const { isDragIdle } = useDropzoneContext()\n\n return isDragIdle ? <Fragment>{children}</Fragment> : null\n}\n"],"mappings":"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","names":[]}
|