@yamada-ui/dropzone 1.0.52 → 1.0.53-dev-20241123052407

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.
Files changed (12) hide show
  1. package/dist/{chunk-ZCUDAOHK.mjs → chunk-HNJJPP2P.mjs} +32 -18
  2. package/dist/chunk-HNJJPP2P.mjs.map +1 -0
  3. package/dist/dropzone.d.mts +10 -2
  4. package/dist/dropzone.d.ts +10 -2
  5. package/dist/dropzone.js +31 -17
  6. package/dist/dropzone.js.map +1 -1
  7. package/dist/dropzone.mjs +1 -1
  8. package/dist/index.js +31 -17
  9. package/dist/index.js.map +1 -1
  10. package/dist/index.mjs +1 -1
  11. package/package.json +6 -6
  12. package/dist/chunk-ZCUDAOHK.mjs.map +0 -1
package/dist/{chunk-ZCUDAOHK.mjs → chunk-HNJJPP2P.mjs} RENAMED
@@ -29,7 +29,7 @@ var [DropzoneProvider, useDropzoneContext] = createContext({
29
29
  });
30
30
  var Dropzone = forwardRef((props, ref) => {
31
31
  const [styles, mergedProps] = useComponentMultiStyle("Dropzone", props);
32
- const {
32
+ let {
33
33
  id,
34
34
  name,
35
35
  className,
@@ -37,6 +37,7 @@ var Dropzone = forwardRef((props, ref) => {
37
37
  autoFocus,
38
38
  children,
39
39
  isLoading,
40
+ loading,
40
41
  maxFiles,
41
42
  maxSize,
42
43
  multiple,
@@ -59,12 +60,19 @@ var Dropzone = forwardRef((props, ref) => {
59
60
  onFileDialogOpen,
60
61
  ...rest
61
62
  } = useFormControlProps(omitThemeProps(mergedProps));
62
- const disabled = isLoading || rest.disabled || rest.readOnly;
63
+ loading != null ? loading : loading = isLoading;
64
+ const disabled = loading || rest.disabled || rest.readOnly;
63
65
  const [
64
66
  { "aria-readonly": ariaReadOnly, ...formControlProps },
65
67
  containerProps
66
68
  ] = splitObject(rest, formControlProperties);
67
- const { isDragAccept, isDragReject, open, getInputProps, getRootProps } = useDropzone({
69
+ const {
70
+ isDragAccept: dragAccept,
71
+ isDragReject: dragReject,
72
+ open,
73
+ getInputProps,
74
+ getRootProps
75
+ } = useDropzone({
68
76
  accept: isArray(accept) ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {}) : accept,
69
77
  autoFocus,
70
78
  disabled,
@@ -87,7 +95,7 @@ var Dropzone = forwardRef((props, ref) => {
87
95
  onFileDialogOpen
88
96
  });
89
97
  assignRef(openRef, open);
90
- const isDragIdle = !isDragAccept && !isDragReject;
98
+ const dragIdle = !dragAccept && !dragReject;
91
99
  const css = {
92
100
  alignItems: "center",
93
101
  display: "flex",
@@ -98,7 +106,13 @@ var Dropzone = forwardRef((props, ref) => {
98
106
  return /* @__PURE__ */ jsx(
99
107
  DropzoneProvider,
100
108
  {
101
- value: { isDragAccept, isDragIdle, isDragReject, isLoading, styles },
109
+ value: {
110
+ dragAccept,
111
+ dragIdle,
112
+ dragReject,
113
+ loading,
114
+ styles
115
+ },
102
116
  children: /* @__PURE__ */ jsxs(
103
117
  ui.div,
104
118
  {
@@ -107,10 +121,10 @@ var Dropzone = forwardRef((props, ref) => {
107
121
  ...formControlProps,
108
122
  ...containerProps,
109
123
  ...getRootProps({}),
110
- "data-accept": dataAttr(isDragAccept),
111
- "data-idle": dataAttr(isDragIdle),
112
- "data-loading": dataAttr(isLoading),
113
- "data-reject": dataAttr(isDragReject),
124
+ "data-accept": dataAttr(dragAccept),
125
+ "data-idle": dataAttr(dragIdle),
126
+ "data-loading": dataAttr(loading),
127
+ "data-reject": dataAttr(dragReject),
114
128
  children: [
115
129
  /* @__PURE__ */ jsx(DropzoneLoadingOverlay, { loadingProps, ...overlayProps }),
116
130
  /* @__PURE__ */ jsx(
@@ -137,7 +151,7 @@ var DropzoneLoadingOverlay = ({
137
151
  loadingProps,
138
152
  ...rest
139
153
  }) => {
140
- const { isLoading, styles } = useDropzoneContext();
154
+ const { loading, styles } = useDropzoneContext();
141
155
  const css = {
142
156
  alignItems: "center",
143
157
  display: "flex",
@@ -153,7 +167,7 @@ var DropzoneLoadingOverlay = ({
153
167
  Fade,
154
168
  {
155
169
  className: "ui-dropzone__overlay",
156
- isOpen: isLoading,
170
+ open: loading,
157
171
  unmountOnExit: true,
158
172
  __css: css,
159
173
  ...rest,
@@ -171,20 +185,20 @@ var DropzoneLoadingOverlay = ({
171
185
  DropzoneLoadingOverlay.displayName = "DropzoneLoadingOverlay";
172
186
  DropzoneLoadingOverlay.__ui__ = "DropzoneLoadingOverlay";
173
187
  var DropzoneAccept = ({ children }) => {
174
- const { isDragAccept } = useDropzoneContext();
175
- return isDragAccept ? children : null;
188
+ const { dragAccept } = useDropzoneContext();
189
+ return dragAccept ? children : null;
176
190
  };
177
191
  DropzoneAccept.displayName = "DropzoneAccept";
178
192
  DropzoneAccept.__ui__ = "DropzoneAccept";
179
193
  var DropzoneReject = ({ children }) => {
180
- const { isDragReject } = useDropzoneContext();
181
- return isDragReject ? children : null;
194
+ const { dragReject } = useDropzoneContext();
195
+ return dragReject ? children : null;
182
196
  };
183
197
  DropzoneReject.displayName = "DropzoneReject";
184
198
  DropzoneReject.__ui__ = "DropzoneReject";
185
199
  var DropzoneIdle = ({ children }) => {
186
- const { isDragIdle } = useDropzoneContext();
187
- return isDragIdle ? children : null;
200
+ const { dragIdle } = useDropzoneContext();
201
+ return dragIdle ? children : null;
188
202
  };
189
203
  DropzoneIdle.displayName = "DropzoneIdle";
190
204
  DropzoneIdle.__ui__ = "DropzoneIdle";
@@ -195,4 +209,4 @@ export {
195
209
  DropzoneReject,
196
210
  DropzoneIdle
197
211
  };
198
- //# sourceMappingURL=chunk-ZCUDAOHK.mjs.map
212
+ //# sourceMappingURL=chunk-HNJJPP2P.mjs.map
package/dist/chunk-HNJJPP2P.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/dropzone.tsx"],"sourcesContent":["import type {\n ColorModeToken,\n CSS,\n CSSUIObject,\n FC,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport type { FadeProps } from \"@yamada-ui/transitions\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, PropsWithChildren } from \"react\"\nimport type {\n Accept,\n DropzoneOptions as ReactDropzoneOptions,\n} from \"react-dropzone-esm\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { Loading } from \"@yamada-ui/loading\"\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 { useDropzone } from \"react-dropzone-esm\"\n\ninterface DropzoneContext {\n dragAccept: boolean\n dragIdle: boolean\n dragReject: boolean\n styles: { [key: string]: CSSUIObject | undefined }\n loading?: boolean\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 * File types to accept.\n */\n accept?: Accept | string[]\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n *\n * @deprecated Use `loading` instead.\n */\n isLoading?: boolean\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n */\n loading?: boolean\n /**\n * Ref to a open function.\n */\n openRef?: ForwardedRef<() => undefined | void>\n /**\n * Props for dropzone loading icon element.\n */\n loadingProps?: LoadingProps\n /**\n * Props for dropzone overlay element.\n */\n overlayProps?: FadeProps\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 let {\n id,\n name,\n className,\n accept,\n autoFocus,\n children,\n isLoading,\n loading,\n maxFiles,\n maxSize,\n multiple,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n openRef,\n preventDropOnDocument,\n useFsAccessApi,\n loadingProps,\n overlayProps,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onDrop,\n onDropAccepted,\n onDropRejected,\n onFileDialogCancel,\n onFileDialogOpen,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n\n loading ??= isLoading\n\n const disabled = loading || rest.disabled || rest.readOnly\n\n const [\n { \"aria-readonly\": ariaReadOnly, ...formControlProps },\n containerProps,\n ] = splitObject(rest, formControlProperties)\n\n const {\n isDragAccept: dragAccept,\n isDragReject: dragReject,\n open,\n getInputProps,\n getRootProps,\n } = useDropzone({\n accept: isArray(accept)\n ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {})\n : accept,\n autoFocus,\n disabled,\n maxFiles,\n maxSize,\n multiple,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n preventDropOnDocument,\n useFsAccessApi,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onDrop,\n onDropAccepted,\n onDropRejected,\n onFileDialogCancel,\n onFileDialogOpen,\n })\n\n assignRef(openRef, open)\n\n const dragIdle = !dragAccept && !dragReject\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n position: \"relative\",\n ...styles.container,\n }\n\n return (\n <DropzoneProvider\n value={{\n dragAccept,\n dragIdle,\n dragReject,\n loading,\n styles,\n }}\n >\n <ui.div\n className={cx(\"ui-dropzone\", className)}\n __css={css}\n {...formControlProps}\n {...containerProps}\n {...getRootProps({})}\n data-accept={dataAttr(dragAccept)}\n data-idle={dataAttr(dragIdle)}\n data-loading={dataAttr(loading)}\n data-reject={dataAttr(dragReject)}\n >\n <DropzoneLoadingOverlay loadingProps={loadingProps} {...overlayProps} />\n\n <ui.input\n id={id}\n ref={ref}\n name={name}\n aria-readonly={ariaReadOnly}\n {...formControlProps}\n {...getInputProps()}\n />\n {children}\n </ui.div>\n </DropzoneProvider>\n )\n})\n\nDropzone.displayName = \"Dropzone\"\nDropzone.__ui__ = \"Dropzone\"\n\ninterface DropzoneLoadingOverlayProps extends FadeProps {\n loadingProps?: LoadingProps\n}\n\nconst DropzoneLoadingOverlay: FC<DropzoneLoadingOverlayProps> = ({\n loadingProps,\n ...rest\n}) => {\n const { loading, styles } = useDropzoneContext()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n h: \"100%\",\n justifyContent: \"center\",\n left: 0,\n position: \"absolute\",\n top: 0,\n w: \"100%\",\n ...styles.overlay,\n }\n\n return (\n <Fade\n className=\"ui-dropzone__overlay\"\n open={loading}\n unmountOnExit\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\nDropzoneLoadingOverlay.displayName = \"DropzoneLoadingOverlay\"\nDropzoneLoadingOverlay.__ui__ = \"DropzoneLoadingOverlay\"\n\nexport const DropzoneAccept: FC<PropsWithChildren> = ({ children }) => {\n const { dragAccept } = useDropzoneContext()\n\n return dragAccept ? children : null\n}\n\nDropzoneAccept.displayName = \"DropzoneAccept\"\nDropzoneAccept.__ui__ = \"DropzoneAccept\"\n\nexport const DropzoneReject: FC<PropsWithChildren> = ({ children }) => {\n const { dragReject } = useDropzoneContext()\n\n return dragReject ? children : null\n}\n\nDropzoneReject.displayName = \"DropzoneReject\"\nDropzoneReject.__ui__ = \"DropzoneReject\"\n\nexport const DropzoneIdle: FC<PropsWithChildren> = ({ children }) => {\n const { dragIdle } = useDropzoneContext()\n\n return dragIdle ? children : null\n}\n\nDropzoneIdle.displayName = \"DropzoneIdle\"\nDropzoneIdle.__ui__ = \"DropzoneIdle\"\n"],"mappings":"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","names":[]}
package/dist/dropzone.d.mts CHANGED
@@ -1,10 +1,10 @@
1
1
  import * as _yamada_ui_core from '@yamada-ui/core';
2
- import { HTMLUIProps, ThemeProps, ColorModeToken, CSS, FC } from '@yamada-ui/core';
2
+ import { HTMLUIProps, ThemeProps, FC, 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
6
  import { Merge } from '@yamada-ui/utils';
7
- import { ForwardedRef, PropsWithChildren } from 'react';
7
+ import { PropsWithChildren, ForwardedRef } from 'react';
8
8
  import { DropzoneOptions as DropzoneOptions$1, Accept } from 'react-dropzone-esm';
9
9
 
10
10
  interface DropzoneOptions {
@@ -24,8 +24,16 @@ interface DropzoneOptions {
24
24
  * If `true`, display the dropzone loading icon.
25
25
  *
26
26
  * @default false
27
+ *
28
+ * @deprecated Use `loading` instead.
27
29
  */
28
30
  isLoading?: boolean;
31
+ /**
32
+ * If `true`, display the dropzone loading icon.
33
+ *
34
+ * @default false
35
+ */
36
+ loading?: boolean;
29
37
  /**
30
38
  * Ref to a open function.
31
39
  */
package/dist/dropzone.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import * as _yamada_ui_core from '@yamada-ui/core';
2
- import { HTMLUIProps, ThemeProps, ColorModeToken, CSS, FC } from '@yamada-ui/core';
2
+ import { HTMLUIProps, ThemeProps, FC, 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
6
  import { Merge } from '@yamada-ui/utils';
7
- import { ForwardedRef, PropsWithChildren } from 'react';
7
+ import { PropsWithChildren, ForwardedRef } from 'react';
8
8
  import { DropzoneOptions as DropzoneOptions$1, Accept } from 'react-dropzone-esm';
9
9
 
10
10
  interface DropzoneOptions {
@@ -24,8 +24,16 @@ interface DropzoneOptions {
24
24
  * If `true`, display the dropzone loading icon.
25
25
  *
26
26
  * @default false
27
+ *
28
+ * @deprecated Use `loading` instead.
27
29
  */
28
30
  isLoading?: boolean;
31
+ /**
32
+ * If `true`, display the dropzone loading icon.
33
+ *
34
+ * @default false
35
+ */
36
+ loading?: boolean;
29
37
  /**
30
38
  * Ref to a open function.
31
39
  */
package/dist/dropzone.js CHANGED
@@ -40,7 +40,7 @@ var [DropzoneProvider, useDropzoneContext] = (0, import_utils.createContext)({
40
40
  });
41
41
  var Dropzone = (0, import_core.forwardRef)((props, ref) => {
42
42
  const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Dropzone", props);
43
- const {
43
+ let {
44
44
  id,
45
45
  name,
46
46
  className,
@@ -48,6 +48,7 @@ var Dropzone = (0, import_core.forwardRef)((props, ref) => {
48
48
  autoFocus,
49
49
  children,
50
50
  isLoading,
51
+ loading,
51
52
  maxFiles,
52
53
  maxSize,
53
54
  multiple,
@@ -70,12 +71,19 @@ var Dropzone = (0, import_core.forwardRef)((props, ref) => {
70
71
  onFileDialogOpen,
71
72
  ...rest
72
73
  } = (0, import_form_control.useFormControlProps)((0, import_core.omitThemeProps)(mergedProps));
73
- const disabled = isLoading || rest.disabled || rest.readOnly;
74
+ loading != null ? loading : loading = isLoading;
75
+ const disabled = loading || rest.disabled || rest.readOnly;
74
76
  const [
75
77
  { "aria-readonly": ariaReadOnly, ...formControlProps },
76
78
  containerProps
77
79
  ] = (0, import_utils.splitObject)(rest, import_form_control.formControlProperties);
78
- const { isDragAccept, isDragReject, open, getInputProps, getRootProps } = (0, import_react_dropzone_esm.useDropzone)({
80
+ const {
81
+ isDragAccept: dragAccept,
82
+ isDragReject: dragReject,
83
+ open,
84
+ getInputProps,
85
+ getRootProps
86
+ } = (0, import_react_dropzone_esm.useDropzone)({
79
87
  accept: (0, import_utils.isArray)(accept) ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {}) : accept,
80
88
  autoFocus,
81
89
  disabled,
@@ -98,7 +106,7 @@ var Dropzone = (0, import_core.forwardRef)((props, ref) => {
98
106
  onFileDialogOpen
99
107
  });
100
108
  (0, import_utils.assignRef)(openRef, open);
101
- const isDragIdle = !isDragAccept && !isDragReject;
109
+ const dragIdle = !dragAccept && !dragReject;
102
110
  const css = {
103
111
  alignItems: "center",
104
112
  display: "flex",
@@ -109,7 +117,13 @@ var Dropzone = (0, import_core.forwardRef)((props, ref) => {
109
117
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
110
118
  DropzoneProvider,
111
119
  {
112
- value: { isDragAccept, isDragIdle, isDragReject, isLoading, styles },
120
+ value: {
121
+ dragAccept,
122
+ dragIdle,
123
+ dragReject,
124
+ loading,
125
+ styles
126
+ },
113
127
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
114
128
  import_core.ui.div,
115
129
  {
@@ -118,10 +132,10 @@ var Dropzone = (0, import_core.forwardRef)((props, ref) => {
118
132
  ...formControlProps,
119
133
  ...containerProps,
120
134
  ...getRootProps({}),
121
- "data-accept": (0, import_utils.dataAttr)(isDragAccept),
122
- "data-idle": (0, import_utils.dataAttr)(isDragIdle),
123
- "data-loading": (0, import_utils.dataAttr)(isLoading),
124
- "data-reject": (0, import_utils.dataAttr)(isDragReject),
135
+ "data-accept": (0, import_utils.dataAttr)(dragAccept),
136
+ "data-idle": (0, import_utils.dataAttr)(dragIdle),
137
+ "data-loading": (0, import_utils.dataAttr)(loading),
138
+ "data-reject": (0, import_utils.dataAttr)(dragReject),
125
139
  children: [
126
140
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropzoneLoadingOverlay, { loadingProps, ...overlayProps }),
127
141
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -148,7 +162,7 @@ var DropzoneLoadingOverlay = ({
148
162
  loadingProps,
149
163
  ...rest
150
164
  }) => {
151
- const { isLoading, styles } = useDropzoneContext();
165
+ const { loading, styles } = useDropzoneContext();
152
166
  const css = {
153
167
  alignItems: "center",
154
168
  display: "flex",
@@ -164,7 +178,7 @@ var DropzoneLoadingOverlay = ({
164
178
  import_transitions.Fade,
165
179
  {
166
180
  className: "ui-dropzone__overlay",
167
- isOpen: isLoading,
181
+ open: loading,
168
182
  unmountOnExit: true,
169
183
  __css: css,
170
184
  ...rest,
@@ -182,20 +196,20 @@ var DropzoneLoadingOverlay = ({
182
196
  DropzoneLoadingOverlay.displayName = "DropzoneLoadingOverlay";
183
197
  DropzoneLoadingOverlay.__ui__ = "DropzoneLoadingOverlay";
184
198
  var DropzoneAccept = ({ children }) => {
185
- const { isDragAccept } = useDropzoneContext();
186
- return isDragAccept ? children : null;
199
+ const { dragAccept } = useDropzoneContext();
200
+ return dragAccept ? children : null;
187
201
  };
188
202
  DropzoneAccept.displayName = "DropzoneAccept";
189
203
  DropzoneAccept.__ui__ = "DropzoneAccept";
190
204
  var DropzoneReject = ({ children }) => {
191
- const { isDragReject } = useDropzoneContext();
192
- return isDragReject ? children : null;
205
+ const { dragReject } = useDropzoneContext();
206
+ return dragReject ? children : null;
193
207
  };
194
208
  DropzoneReject.displayName = "DropzoneReject";
195
209
  DropzoneReject.__ui__ = "DropzoneReject";
196
210
  var DropzoneIdle = ({ children }) => {
197
- const { isDragIdle } = useDropzoneContext();
198
- return isDragIdle ? children : null;
211
+ const { dragIdle } = useDropzoneContext();
212
+ return dragIdle ? children : null;
199
213
  };
200
214
  DropzoneIdle.displayName = "DropzoneIdle";
201
215
  DropzoneIdle.__ui__ = "DropzoneIdle";
package/dist/dropzone.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/dropzone.tsx"],"sourcesContent":["import type {\n ColorModeToken,\n CSS,\n CSSUIObject,\n FC,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport type { FadeProps } from \"@yamada-ui/transitions\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, PropsWithChildren } from \"react\"\nimport type {\n Accept,\n DropzoneOptions as ReactDropzoneOptions,\n} from \"react-dropzone-esm\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { Loading } from \"@yamada-ui/loading\"\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 { useDropzone } from \"react-dropzone-esm\"\n\ninterface DropzoneContext {\n isDragAccept: boolean\n isDragIdle: boolean\n isDragReject: boolean\n styles: { [key: string]: CSSUIObject | undefined }\n isLoading?: boolean\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 * File types to accept.\n */\n accept?: Accept | string[]\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * Ref to a open function.\n */\n openRef?: ForwardedRef<() => undefined | void>\n /**\n * Props for dropzone loading icon element.\n */\n loadingProps?: LoadingProps\n /**\n * Props for dropzone overlay element.\n */\n overlayProps?: FadeProps\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 accept,\n autoFocus,\n children,\n isLoading,\n maxFiles,\n maxSize,\n multiple,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n openRef,\n preventDropOnDocument,\n useFsAccessApi,\n loadingProps,\n overlayProps,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onDrop,\n onDropAccepted,\n onDropRejected,\n onFileDialogCancel,\n onFileDialogOpen,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n\n const disabled = isLoading || rest.disabled || rest.readOnly\n\n const [\n { \"aria-readonly\": ariaReadOnly, ...formControlProps },\n containerProps,\n ] = splitObject(rest, formControlProperties)\n\n const { isDragAccept, isDragReject, open, getInputProps, getRootProps } =\n useDropzone({\n accept: isArray(accept)\n ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {})\n : accept,\n autoFocus,\n disabled,\n maxFiles,\n maxSize,\n multiple,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n preventDropOnDocument,\n useFsAccessApi,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onDrop,\n onDropAccepted,\n onDropRejected,\n onFileDialogCancel,\n onFileDialogOpen,\n })\n\n assignRef(openRef, open)\n\n const isDragIdle = !isDragAccept && !isDragReject\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n position: \"relative\",\n ...styles.container,\n }\n\n return (\n <DropzoneProvider\n value={{ isDragAccept, isDragIdle, isDragReject, isLoading, styles }}\n >\n <ui.div\n className={cx(\"ui-dropzone\", className)}\n __css={css}\n {...formControlProps}\n {...containerProps}\n {...getRootProps({})}\n data-accept={dataAttr(isDragAccept)}\n data-idle={dataAttr(isDragIdle)}\n data-loading={dataAttr(isLoading)}\n data-reject={dataAttr(isDragReject)}\n >\n <DropzoneLoadingOverlay loadingProps={loadingProps} {...overlayProps} />\n\n <ui.input\n id={id}\n ref={ref}\n name={name}\n aria-readonly={ariaReadOnly}\n {...formControlProps}\n {...getInputProps()}\n />\n {children}\n </ui.div>\n </DropzoneProvider>\n )\n})\n\nDropzone.displayName = \"Dropzone\"\nDropzone.__ui__ = \"Dropzone\"\n\ninterface DropzoneLoadingOverlayProps extends FadeProps {\n loadingProps?: LoadingProps\n}\n\nconst DropzoneLoadingOverlay: FC<DropzoneLoadingOverlayProps> = ({\n loadingProps,\n ...rest\n}) => {\n const { isLoading, styles } = useDropzoneContext()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n h: \"100%\",\n justifyContent: \"center\",\n left: 0,\n position: \"absolute\",\n top: 0,\n w: \"100%\",\n ...styles.overlay,\n }\n\n return (\n <Fade\n className=\"ui-dropzone__overlay\"\n isOpen={isLoading}\n unmountOnExit\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\nDropzoneLoadingOverlay.displayName = \"DropzoneLoadingOverlay\"\nDropzoneLoadingOverlay.__ui__ = \"DropzoneLoadingOverlay\"\n\nexport const DropzoneAccept: FC<PropsWithChildren> = ({ children }) => {\n const { isDragAccept } = useDropzoneContext()\n\n return isDragAccept ? children : null\n}\n\nDropzoneAccept.displayName = \"DropzoneAccept\"\nDropzoneAccept.__ui__ = \"DropzoneAccept\"\n\nexport const DropzoneReject: FC<PropsWithChildren> = ({ children }) => {\n const { isDragReject } = useDropzoneContext()\n\n return isDragReject ? children : null\n}\n\nDropzoneReject.displayName = \"DropzoneReject\"\nDropzoneReject.__ui__ = \"DropzoneReject\"\n\nexport const DropzoneIdle: FC<PropsWithChildren> = ({ children }) => {\n const { isDragIdle } = useDropzoneContext()\n\n return isDragIdle ? children : null\n}\n\nDropzoneIdle.displayName = \"DropzoneIdle\"\nDropzoneIdle.__ui__ = \"DropzoneIdle\"\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/dropzone.tsx"],"sourcesContent":["import type {\n ColorModeToken,\n CSS,\n CSSUIObject,\n FC,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport type { FadeProps } from \"@yamada-ui/transitions\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, PropsWithChildren } from \"react\"\nimport type {\n Accept,\n DropzoneOptions as ReactDropzoneOptions,\n} from \"react-dropzone-esm\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { Loading } from \"@yamada-ui/loading\"\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 { useDropzone } from \"react-dropzone-esm\"\n\ninterface DropzoneContext {\n dragAccept: boolean\n dragIdle: boolean\n dragReject: boolean\n styles: { [key: string]: CSSUIObject | undefined }\n loading?: boolean\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 * File types to accept.\n */\n accept?: Accept | string[]\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n *\n * @deprecated Use `loading` instead.\n */\n isLoading?: boolean\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n */\n loading?: boolean\n /**\n * Ref to a open function.\n */\n openRef?: ForwardedRef<() => undefined | void>\n /**\n * Props for dropzone loading icon element.\n */\n loadingProps?: LoadingProps\n /**\n * Props for dropzone overlay element.\n */\n overlayProps?: FadeProps\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 let {\n id,\n name,\n className,\n accept,\n autoFocus,\n children,\n isLoading,\n loading,\n maxFiles,\n maxSize,\n multiple,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n openRef,\n preventDropOnDocument,\n useFsAccessApi,\n loadingProps,\n overlayProps,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onDrop,\n onDropAccepted,\n onDropRejected,\n onFileDialogCancel,\n onFileDialogOpen,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n\n loading ??= isLoading\n\n const disabled = loading || rest.disabled || rest.readOnly\n\n const [\n { \"aria-readonly\": ariaReadOnly, ...formControlProps },\n containerProps,\n ] = splitObject(rest, formControlProperties)\n\n const {\n isDragAccept: dragAccept,\n isDragReject: dragReject,\n open,\n getInputProps,\n getRootProps,\n } = useDropzone({\n accept: isArray(accept)\n ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {})\n : accept,\n autoFocus,\n disabled,\n maxFiles,\n maxSize,\n multiple,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n preventDropOnDocument,\n useFsAccessApi,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onDrop,\n onDropAccepted,\n onDropRejected,\n onFileDialogCancel,\n onFileDialogOpen,\n })\n\n assignRef(openRef, open)\n\n const dragIdle = !dragAccept && !dragReject\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n position: \"relative\",\n ...styles.container,\n }\n\n return (\n <DropzoneProvider\n value={{\n dragAccept,\n dragIdle,\n dragReject,\n loading,\n styles,\n }}\n >\n <ui.div\n className={cx(\"ui-dropzone\", className)}\n __css={css}\n {...formControlProps}\n {...containerProps}\n {...getRootProps({})}\n data-accept={dataAttr(dragAccept)}\n data-idle={dataAttr(dragIdle)}\n data-loading={dataAttr(loading)}\n data-reject={dataAttr(dragReject)}\n >\n <DropzoneLoadingOverlay loadingProps={loadingProps} {...overlayProps} />\n\n <ui.input\n id={id}\n ref={ref}\n name={name}\n aria-readonly={ariaReadOnly}\n {...formControlProps}\n {...getInputProps()}\n />\n {children}\n </ui.div>\n </DropzoneProvider>\n )\n})\n\nDropzone.displayName = \"Dropzone\"\nDropzone.__ui__ = \"Dropzone\"\n\ninterface DropzoneLoadingOverlayProps extends FadeProps {\n loadingProps?: LoadingProps\n}\n\nconst DropzoneLoadingOverlay: FC<DropzoneLoadingOverlayProps> = ({\n loadingProps,\n ...rest\n}) => {\n const { loading, styles } = useDropzoneContext()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n h: \"100%\",\n justifyContent: \"center\",\n left: 0,\n position: \"absolute\",\n top: 0,\n w: \"100%\",\n ...styles.overlay,\n }\n\n return (\n <Fade\n className=\"ui-dropzone__overlay\"\n open={loading}\n unmountOnExit\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\nDropzoneLoadingOverlay.displayName = \"DropzoneLoadingOverlay\"\nDropzoneLoadingOverlay.__ui__ = \"DropzoneLoadingOverlay\"\n\nexport const DropzoneAccept: FC<PropsWithChildren> = ({ children }) => {\n const { dragAccept } = useDropzoneContext()\n\n return dragAccept ? children : null\n}\n\nDropzoneAccept.displayName = \"DropzoneAccept\"\nDropzoneAccept.__ui__ = \"DropzoneAccept\"\n\nexport const DropzoneReject: FC<PropsWithChildren> = ({ children }) => {\n const { dragReject } = useDropzoneContext()\n\n return dragReject ? children : null\n}\n\nDropzoneReject.displayName = \"DropzoneReject\"\nDropzoneReject.__ui__ = \"DropzoneReject\"\n\nexport const DropzoneIdle: FC<PropsWithChildren> = ({ children }) => {\n const { dragIdle } = useDropzoneContext()\n\n return dragIdle ? children : null\n}\n\nDropzoneIdle.displayName = \"DropzoneIdle\"\nDropzoneIdle.__ui__ = \"DropzoneIdle\"\n"],"mappings":"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","names":[]}
package/dist/dropzone.mjs CHANGED
@@ -4,7 +4,7 @@ import {
4
4
  DropzoneAccept,
5
5
  DropzoneIdle,
6
6
  DropzoneReject
7
- } from "./chunk-ZCUDAOHK.mjs";
7
+ } from "./chunk-HNJJPP2P.mjs";
8
8
  export {
9
9
  Dropzone,
10
10
  DropzoneAccept,
package/dist/index.js CHANGED
@@ -85,7 +85,7 @@ var [DropzoneProvider, useDropzoneContext] = (0, import_utils.createContext)({
85
85
  });
86
86
  var Dropzone = (0, import_core.forwardRef)((props, ref) => {
87
87
  const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Dropzone", props);
88
- const {
88
+ let {
89
89
  id,
90
90
  name,
91
91
  className,
@@ -93,6 +93,7 @@ var Dropzone = (0, import_core.forwardRef)((props, ref) => {
93
93
  autoFocus,
94
94
  children,
95
95
  isLoading,
96
+ loading,
96
97
  maxFiles,
97
98
  maxSize,
98
99
  multiple,
@@ -115,12 +116,19 @@ var Dropzone = (0, import_core.forwardRef)((props, ref) => {
115
116
  onFileDialogOpen,
116
117
  ...rest
117
118
  } = (0, import_form_control.useFormControlProps)((0, import_core.omitThemeProps)(mergedProps));
118
- const disabled = isLoading || rest.disabled || rest.readOnly;
119
+ loading != null ? loading : loading = isLoading;
120
+ const disabled = loading || rest.disabled || rest.readOnly;
119
121
  const [
120
122
  { "aria-readonly": ariaReadOnly, ...formControlProps },
121
123
  containerProps
122
124
  ] = (0, import_utils.splitObject)(rest, import_form_control.formControlProperties);
123
- const { isDragAccept, isDragReject, open, getInputProps, getRootProps } = (0, import_react_dropzone_esm.useDropzone)({
125
+ const {
126
+ isDragAccept: dragAccept,
127
+ isDragReject: dragReject,
128
+ open,
129
+ getInputProps,
130
+ getRootProps
131
+ } = (0, import_react_dropzone_esm.useDropzone)({
124
132
  accept: (0, import_utils.isArray)(accept) ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {}) : accept,
125
133
  autoFocus,
126
134
  disabled,
@@ -143,7 +151,7 @@ var Dropzone = (0, import_core.forwardRef)((props, ref) => {
143
151
  onFileDialogOpen
144
152
  });
145
153
  (0, import_utils.assignRef)(openRef, open);
146
- const isDragIdle = !isDragAccept && !isDragReject;
154
+ const dragIdle = !dragAccept && !dragReject;
147
155
  const css = {
148
156
  alignItems: "center",
149
157
  display: "flex",
@@ -154,7 +162,13 @@ var Dropzone = (0, import_core.forwardRef)((props, ref) => {
154
162
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
155
163
  DropzoneProvider,
156
164
  {
157
- value: { isDragAccept, isDragIdle, isDragReject, isLoading, styles },
165
+ value: {
166
+ dragAccept,
167
+ dragIdle,
168
+ dragReject,
169
+ loading,
170
+ styles
171
+ },
158
172
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
159
173
  import_core.ui.div,
160
174
  {
@@ -163,10 +177,10 @@ var Dropzone = (0, import_core.forwardRef)((props, ref) => {
163
177
  ...formControlProps,
164
178
  ...containerProps,
165
179
  ...getRootProps({}),
166
- "data-accept": (0, import_utils.dataAttr)(isDragAccept),
167
- "data-idle": (0, import_utils.dataAttr)(isDragIdle),
168
- "data-loading": (0, import_utils.dataAttr)(isLoading),
169
- "data-reject": (0, import_utils.dataAttr)(isDragReject),
180
+ "data-accept": (0, import_utils.dataAttr)(dragAccept),
181
+ "data-idle": (0, import_utils.dataAttr)(dragIdle),
182
+ "data-loading": (0, import_utils.dataAttr)(loading),
183
+ "data-reject": (0, import_utils.dataAttr)(dragReject),
170
184
  children: [
171
185
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropzoneLoadingOverlay, { loadingProps, ...overlayProps }),
172
186
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -193,7 +207,7 @@ var DropzoneLoadingOverlay = ({
193
207
  loadingProps,
194
208
  ...rest
195
209
  }) => {
196
- const { isLoading, styles } = useDropzoneContext();
210
+ const { loading, styles } = useDropzoneContext();
197
211
  const css = {
198
212
  alignItems: "center",
199
213
  display: "flex",
@@ -209,7 +223,7 @@ var DropzoneLoadingOverlay = ({
209
223
  import_transitions.Fade,
210
224
  {
211
225
  className: "ui-dropzone__overlay",
212
- isOpen: isLoading,
226
+ open: loading,
213
227
  unmountOnExit: true,
214
228
  __css: css,
215
229
  ...rest,
@@ -227,20 +241,20 @@ var DropzoneLoadingOverlay = ({
227
241
  DropzoneLoadingOverlay.displayName = "DropzoneLoadingOverlay";
228
242
  DropzoneLoadingOverlay.__ui__ = "DropzoneLoadingOverlay";
229
243
  var DropzoneAccept = ({ children }) => {
230
- const { isDragAccept } = useDropzoneContext();
231
- return isDragAccept ? children : null;
244
+ const { dragAccept } = useDropzoneContext();
245
+ return dragAccept ? children : null;
232
246
  };
233
247
  DropzoneAccept.displayName = "DropzoneAccept";
234
248
  DropzoneAccept.__ui__ = "DropzoneAccept";
235
249
  var DropzoneReject = ({ children }) => {
236
- const { isDragReject } = useDropzoneContext();
237
- return isDragReject ? children : null;
250
+ const { dragReject } = useDropzoneContext();
251
+ return dragReject ? children : null;
238
252
  };
239
253
  DropzoneReject.displayName = "DropzoneReject";
240
254
  DropzoneReject.__ui__ = "DropzoneReject";
241
255
  var DropzoneIdle = ({ children }) => {
242
- const { isDragIdle } = useDropzoneContext();
243
- return isDragIdle ? children : null;
256
+ const { dragIdle } = useDropzoneContext();
257
+ return dragIdle ? children : null;
244
258
  };
245
259
  DropzoneIdle.displayName = "DropzoneIdle";
246
260
  DropzoneIdle.__ui__ = "DropzoneIdle";
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/accept-types.ts","../src/dropzone.tsx"],"sourcesContent":["export * from \"./accept-types\"\nexport {\n Dropzone,\n DropzoneAccept,\n DropzoneIdle,\n DropzoneReject,\n} from \"./dropzone\"\nexport type { DropzoneProps } from \"./dropzone\"\nexport type {\n DropEvent,\n ErrorCode,\n FileError,\n FileRejection,\n} from \"react-dropzone-esm\"\n","export const ACCEPT_TYPES = {\n csv: \"text/csv\",\n doc: \"application/msword\",\n docx: \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\",\n exe: \"application/vnd.microsoft.portable-executable\",\n gif: \"image/gif\",\n html: \"text/html\",\n jpeg: \"image/jpeg\",\n mp3: \"audio/mpeg\",\n mp4: \"video/mp4\",\n mpeg: \"video/mpeg\",\n pdf: \"application/pdf\",\n png: \"image/png\",\n ppt: \"application/vnd.ms-powerpoint\",\n pptx: \"application/vnd.openxmlformats-officedocument.presentationml.presentation\",\n svg: \"image/svg+xml\",\n txt: \"text/plain\",\n webp: \"image/webp\",\n xls: \"application/vnd.ms-excel\",\n xlsx: \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n zip: \"application/zip\",\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","import type {\n ColorModeToken,\n CSS,\n CSSUIObject,\n FC,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport type { FadeProps } from \"@yamada-ui/transitions\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, PropsWithChildren } from \"react\"\nimport type {\n Accept,\n DropzoneOptions as ReactDropzoneOptions,\n} from \"react-dropzone-esm\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { Loading } from \"@yamada-ui/loading\"\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 { useDropzone } from \"react-dropzone-esm\"\n\ninterface DropzoneContext {\n isDragAccept: boolean\n isDragIdle: boolean\n isDragReject: boolean\n styles: { [key: string]: CSSUIObject | undefined }\n isLoading?: boolean\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 * File types to accept.\n */\n accept?: Accept | string[]\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * Ref to a open function.\n */\n openRef?: ForwardedRef<() => undefined | void>\n /**\n * Props for dropzone loading icon element.\n */\n loadingProps?: LoadingProps\n /**\n * Props for dropzone overlay element.\n */\n overlayProps?: FadeProps\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 accept,\n autoFocus,\n children,\n isLoading,\n maxFiles,\n maxSize,\n multiple,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n openRef,\n preventDropOnDocument,\n useFsAccessApi,\n loadingProps,\n overlayProps,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onDrop,\n onDropAccepted,\n onDropRejected,\n onFileDialogCancel,\n onFileDialogOpen,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n\n const disabled = isLoading || rest.disabled || rest.readOnly\n\n const [\n { \"aria-readonly\": ariaReadOnly, ...formControlProps },\n containerProps,\n ] = splitObject(rest, formControlProperties)\n\n const { isDragAccept, isDragReject, open, getInputProps, getRootProps } =\n useDropzone({\n accept: isArray(accept)\n ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {})\n : accept,\n autoFocus,\n disabled,\n maxFiles,\n maxSize,\n multiple,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n preventDropOnDocument,\n useFsAccessApi,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onDrop,\n onDropAccepted,\n onDropRejected,\n onFileDialogCancel,\n onFileDialogOpen,\n })\n\n assignRef(openRef, open)\n\n const isDragIdle = !isDragAccept && !isDragReject\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n position: \"relative\",\n ...styles.container,\n }\n\n return (\n <DropzoneProvider\n value={{ isDragAccept, isDragIdle, isDragReject, isLoading, styles }}\n >\n <ui.div\n className={cx(\"ui-dropzone\", className)}\n __css={css}\n {...formControlProps}\n {...containerProps}\n {...getRootProps({})}\n data-accept={dataAttr(isDragAccept)}\n data-idle={dataAttr(isDragIdle)}\n data-loading={dataAttr(isLoading)}\n data-reject={dataAttr(isDragReject)}\n >\n <DropzoneLoadingOverlay loadingProps={loadingProps} {...overlayProps} />\n\n <ui.input\n id={id}\n ref={ref}\n name={name}\n aria-readonly={ariaReadOnly}\n {...formControlProps}\n {...getInputProps()}\n />\n {children}\n </ui.div>\n </DropzoneProvider>\n )\n})\n\nDropzone.displayName = \"Dropzone\"\nDropzone.__ui__ = \"Dropzone\"\n\ninterface DropzoneLoadingOverlayProps extends FadeProps {\n loadingProps?: LoadingProps\n}\n\nconst DropzoneLoadingOverlay: FC<DropzoneLoadingOverlayProps> = ({\n loadingProps,\n ...rest\n}) => {\n const { isLoading, styles } = useDropzoneContext()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n h: \"100%\",\n justifyContent: \"center\",\n left: 0,\n position: \"absolute\",\n top: 0,\n w: \"100%\",\n ...styles.overlay,\n }\n\n return (\n <Fade\n className=\"ui-dropzone__overlay\"\n isOpen={isLoading}\n unmountOnExit\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\nDropzoneLoadingOverlay.displayName = \"DropzoneLoadingOverlay\"\nDropzoneLoadingOverlay.__ui__ = \"DropzoneLoadingOverlay\"\n\nexport const DropzoneAccept: FC<PropsWithChildren> = ({ children }) => {\n const { isDragAccept } = useDropzoneContext()\n\n return isDragAccept ? children : null\n}\n\nDropzoneAccept.displayName = \"DropzoneAccept\"\nDropzoneAccept.__ui__ = \"DropzoneAccept\"\n\nexport const DropzoneReject: FC<PropsWithChildren> = ({ children }) => {\n const { isDragReject } = useDropzoneContext()\n\n return isDragReject ? children : null\n}\n\nDropzoneReject.displayName = \"DropzoneReject\"\nDropzoneReject.__ui__ = \"DropzoneReject\"\n\nexport const DropzoneIdle: FC<PropsWithChildren> = ({ children }) => {\n const { isDragIdle } = useDropzoneContext()\n\n return isDragIdle ? children : null\n}\n\nDropzoneIdle.displayName = \"DropzoneIdle\"\nDropzoneIdle.__ui__ = \"DropzoneIdle\"\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/index.ts","../src/accept-types.ts","../src/dropzone.tsx"],"sourcesContent":["export * from \"./accept-types\"\nexport {\n Dropzone,\n DropzoneAccept,\n DropzoneIdle,\n DropzoneReject,\n} from \"./dropzone\"\nexport type { DropzoneProps } from \"./dropzone\"\nexport type {\n DropEvent,\n ErrorCode,\n FileError,\n FileRejection,\n} from \"react-dropzone-esm\"\n","export const ACCEPT_TYPES = {\n csv: \"text/csv\",\n doc: \"application/msword\",\n docx: \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\",\n exe: \"application/vnd.microsoft.portable-executable\",\n gif: \"image/gif\",\n html: \"text/html\",\n jpeg: \"image/jpeg\",\n mp3: \"audio/mpeg\",\n mp4: \"video/mp4\",\n mpeg: \"video/mpeg\",\n pdf: \"application/pdf\",\n png: \"image/png\",\n ppt: \"application/vnd.ms-powerpoint\",\n pptx: \"application/vnd.openxmlformats-officedocument.presentationml.presentation\",\n svg: \"image/svg+xml\",\n txt: \"text/plain\",\n webp: \"image/webp\",\n xls: \"application/vnd.ms-excel\",\n xlsx: \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n zip: \"application/zip\",\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","import type {\n ColorModeToken,\n CSS,\n CSSUIObject,\n FC,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport type { FadeProps } from \"@yamada-ui/transitions\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, PropsWithChildren } from \"react\"\nimport type {\n Accept,\n DropzoneOptions as ReactDropzoneOptions,\n} from \"react-dropzone-esm\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { Loading } from \"@yamada-ui/loading\"\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 { useDropzone } from \"react-dropzone-esm\"\n\ninterface DropzoneContext {\n dragAccept: boolean\n dragIdle: boolean\n dragReject: boolean\n styles: { [key: string]: CSSUIObject | undefined }\n loading?: boolean\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 * File types to accept.\n */\n accept?: Accept | string[]\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n *\n * @deprecated Use `loading` instead.\n */\n isLoading?: boolean\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n */\n loading?: boolean\n /**\n * Ref to a open function.\n */\n openRef?: ForwardedRef<() => undefined | void>\n /**\n * Props for dropzone loading icon element.\n */\n loadingProps?: LoadingProps\n /**\n * Props for dropzone overlay element.\n */\n overlayProps?: FadeProps\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 let {\n id,\n name,\n className,\n accept,\n autoFocus,\n children,\n isLoading,\n loading,\n maxFiles,\n maxSize,\n multiple,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n openRef,\n preventDropOnDocument,\n useFsAccessApi,\n loadingProps,\n overlayProps,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onDrop,\n onDropAccepted,\n onDropRejected,\n onFileDialogCancel,\n onFileDialogOpen,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n\n loading ??= isLoading\n\n const disabled = loading || rest.disabled || rest.readOnly\n\n const [\n { \"aria-readonly\": ariaReadOnly, ...formControlProps },\n containerProps,\n ] = splitObject(rest, formControlProperties)\n\n const {\n isDragAccept: dragAccept,\n isDragReject: dragReject,\n open,\n getInputProps,\n getRootProps,\n } = useDropzone({\n accept: isArray(accept)\n ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {})\n : accept,\n autoFocus,\n disabled,\n maxFiles,\n maxSize,\n multiple,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n preventDropOnDocument,\n useFsAccessApi,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onDrop,\n onDropAccepted,\n onDropRejected,\n onFileDialogCancel,\n onFileDialogOpen,\n })\n\n assignRef(openRef, open)\n\n const dragIdle = !dragAccept && !dragReject\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n position: \"relative\",\n ...styles.container,\n }\n\n return (\n <DropzoneProvider\n value={{\n dragAccept,\n dragIdle,\n dragReject,\n loading,\n styles,\n }}\n >\n <ui.div\n className={cx(\"ui-dropzone\", className)}\n __css={css}\n {...formControlProps}\n {...containerProps}\n {...getRootProps({})}\n data-accept={dataAttr(dragAccept)}\n data-idle={dataAttr(dragIdle)}\n data-loading={dataAttr(loading)}\n data-reject={dataAttr(dragReject)}\n >\n <DropzoneLoadingOverlay loadingProps={loadingProps} {...overlayProps} />\n\n <ui.input\n id={id}\n ref={ref}\n name={name}\n aria-readonly={ariaReadOnly}\n {...formControlProps}\n {...getInputProps()}\n />\n {children}\n </ui.div>\n </DropzoneProvider>\n )\n})\n\nDropzone.displayName = \"Dropzone\"\nDropzone.__ui__ = \"Dropzone\"\n\ninterface DropzoneLoadingOverlayProps extends FadeProps {\n loadingProps?: LoadingProps\n}\n\nconst DropzoneLoadingOverlay: FC<DropzoneLoadingOverlayProps> = ({\n loadingProps,\n ...rest\n}) => {\n const { loading, styles } = useDropzoneContext()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n h: \"100%\",\n justifyContent: \"center\",\n left: 0,\n position: \"absolute\",\n top: 0,\n w: \"100%\",\n ...styles.overlay,\n }\n\n return (\n <Fade\n className=\"ui-dropzone__overlay\"\n open={loading}\n unmountOnExit\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\nDropzoneLoadingOverlay.displayName = \"DropzoneLoadingOverlay\"\nDropzoneLoadingOverlay.__ui__ = \"DropzoneLoadingOverlay\"\n\nexport const DropzoneAccept: FC<PropsWithChildren> = ({ children }) => {\n const { dragAccept } = useDropzoneContext()\n\n return dragAccept ? children : null\n}\n\nDropzoneAccept.displayName = \"DropzoneAccept\"\nDropzoneAccept.__ui__ = \"DropzoneAccept\"\n\nexport const DropzoneReject: FC<PropsWithChildren> = ({ children }) => {\n const { dragReject } = useDropzoneContext()\n\n return dragReject ? children : null\n}\n\nDropzoneReject.displayName = \"DropzoneReject\"\nDropzoneReject.__ui__ = \"DropzoneReject\"\n\nexport const DropzoneIdle: FC<PropsWithChildren> = ({ children }) => {\n const { dragIdle } = useDropzoneContext()\n\n return dragIdle ? children : null\n}\n\nDropzoneIdle.displayName = \"DropzoneIdle\"\nDropzoneIdle.__ui__ = \"DropzoneIdle\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,IAAM,eAAe;AAAA,EAC1B,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,MAAM;AAAA,EACN,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,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;;;ACjBhD,kBAKO;AACP,0BAGO;AACP,qBAAwB;AACxB,yBAAqB;AACrB,mBAOO;AACP,gCAA4B;AAmKtB;AAzJN,IAAM,CAAC,kBAAkB,kBAAkB,QAAI,4BAA+B;AAAA,EAC5E,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAsDM,IAAM,eAAW,wBAAmC,CAAC,OAAO,QAAQ;AACzE,QAAM,CAAC,QAAQ,WAAW,QAAI,oCAAuB,YAAY,KAAK;AACtE,MAAI;AAAA,IACF;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;AAAA,IACA,GAAG;AAAA,EACL,QAAI,6CAAoB,4BAAe,WAAW,CAAC;AAEnD,wCAAY;AAEZ,QAAM,WAAW,WAAW,KAAK,YAAY,KAAK;AAElD,QAAM;AAAA,IACJ,EAAE,iBAAiB,cAAc,GAAG,iBAAiB;AAAA,IACrD;AAAA,EACF,QAAI,0BAAY,MAAM,yCAAqB;AAE3C,QAAM;AAAA,IACJ,cAAc;AAAA,IACd,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,uCAAY;AAAA,IACd,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,IACA;AAAA,EACF,CAAC;AAED,8BAAU,SAAS,IAAI;AAEvB,QAAM,WAAW,CAAC,cAAc,CAAC;AAEjC,QAAM,MAAmB;AAAA,IACvB,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,GAAG,OAAO;AAAA,EACZ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,QAAC,eAAG;AAAA,QAAH;AAAA,UACC,eAAW,iBAAG,eAAe,SAAS;AAAA,UACtC,OAAO;AAAA,UACN,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG,aAAa,CAAC,CAAC;AAAA,UACnB,mBAAa,uBAAS,UAAU;AAAA,UAChC,iBAAW,uBAAS,QAAQ;AAAA,UAC5B,oBAAc,uBAAS,OAAO;AAAA,UAC9B,mBAAa,uBAAS,UAAU;AAAA,UAEhC;AAAA,wDAAC,0BAAuB,cAA6B,GAAG,cAAc;AAAA,YAEtE;AAAA,cAAC,eAAG;AAAA,cAAH;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,iBAAe;AAAA,gBACd,GAAG;AAAA,gBACH,GAAG,cAAc;AAAA;AAAA,YACpB;AAAA,YACC;AAAA;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,SAAS,cAAc;AACvB,SAAS,SAAS;AAMlB,IAAM,yBAA0D,CAAC;AAAA,EAC/D;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,SAAS,OAAO,IAAI,mBAAmB;AAE/C,QAAM,MAAmB;AAAA,IACvB,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,GAAG;AAAA,IACH,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,UAAU;AAAA,IACV,KAAK;AAAA,IACL,GAAG;AAAA,IACH,GAAG,OAAO;AAAA,EACZ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAM;AAAA,MACN,eAAa;AAAA,MACb,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;AAEA,uBAAuB,cAAc;AACrC,uBAAuB,SAAS;AAEzB,IAAM,iBAAwC,CAAC,EAAE,SAAS,MAAM;AACrE,QAAM,EAAE,WAAW,IAAI,mBAAmB;AAE1C,SAAO,aAAa,WAAW;AACjC;AAEA,eAAe,cAAc;AAC7B,eAAe,SAAS;AAEjB,IAAM,iBAAwC,CAAC,EAAE,SAAS,MAAM;AACrE,QAAM,EAAE,WAAW,IAAI,mBAAmB;AAE1C,SAAO,aAAa,WAAW;AACjC;AAEA,eAAe,cAAc;AAC7B,eAAe,SAAS;AAEjB,IAAM,eAAsC,CAAC,EAAE,SAAS,MAAM;AACnE,QAAM,EAAE,SAAS,IAAI,mBAAmB;AAExC,SAAO,WAAW,WAAW;AAC/B;AAEA,aAAa,cAAc;AAC3B,aAAa,SAAS;","names":[]}
package/dist/index.mjs CHANGED
@@ -13,7 +13,7 @@ import {
13
13
  DropzoneAccept,
14
14
  DropzoneIdle,
15
15
  DropzoneReject
16
- } from "./chunk-ZCUDAOHK.mjs";
16
+ } from "./chunk-HNJJPP2P.mjs";
17
17
  export {
18
18
  ACCEPT_TYPES,
19
19
  Dropzone,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/dropzone",
3
- "version": "1.0.52",
3
+ "version": "1.0.53-dev-20241123052407",
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/core": "1.15.5",
41
- "@yamada-ui/form-control": "2.1.7",
42
- "@yamada-ui/loading": "1.1.24",
43
- "@yamada-ui/transitions": "1.1.11",
44
- "@yamada-ui/utils": "1.5.4"
40
+ "@yamada-ui/core": "1.15.6-dev-20241123052407",
41
+ "@yamada-ui/utils": "1.5.4",
42
+ "@yamada-ui/form-control": "2.1.8-dev-20241123052407",
43
+ "@yamada-ui/loading": "1.1.25-dev-20241123052407",
44
+ "@yamada-ui/transitions": "1.1.12-dev-20241123052407"
45
45
  },
46
46
  "devDependencies": {
47
47
  "clean-package": "2.2.0",
package/dist/chunk-ZCUDAOHK.mjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/dropzone.tsx"],"sourcesContent":["import type {\n ColorModeToken,\n CSS,\n CSSUIObject,\n FC,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport type { FadeProps } from \"@yamada-ui/transitions\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, PropsWithChildren } from \"react\"\nimport type {\n Accept,\n DropzoneOptions as ReactDropzoneOptions,\n} from \"react-dropzone-esm\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { Loading } from \"@yamada-ui/loading\"\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 { useDropzone } from \"react-dropzone-esm\"\n\ninterface DropzoneContext {\n isDragAccept: boolean\n isDragIdle: boolean\n isDragReject: boolean\n styles: { [key: string]: CSSUIObject | undefined }\n isLoading?: boolean\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 * File types to accept.\n */\n accept?: Accept | string[]\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * Ref to a open function.\n */\n openRef?: ForwardedRef<() => undefined | void>\n /**\n * Props for dropzone loading icon element.\n */\n loadingProps?: LoadingProps\n /**\n * Props for dropzone overlay element.\n */\n overlayProps?: FadeProps\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 accept,\n autoFocus,\n children,\n isLoading,\n maxFiles,\n maxSize,\n multiple,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n openRef,\n preventDropOnDocument,\n useFsAccessApi,\n loadingProps,\n overlayProps,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onDrop,\n onDropAccepted,\n onDropRejected,\n onFileDialogCancel,\n onFileDialogOpen,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n\n const disabled = isLoading || rest.disabled || rest.readOnly\n\n const [\n { \"aria-readonly\": ariaReadOnly, ...formControlProps },\n containerProps,\n ] = splitObject(rest, formControlProperties)\n\n const { isDragAccept, isDragReject, open, getInputProps, getRootProps } =\n useDropzone({\n accept: isArray(accept)\n ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {})\n : accept,\n autoFocus,\n disabled,\n maxFiles,\n maxSize,\n multiple,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n preventDropOnDocument,\n useFsAccessApi,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onDrop,\n onDropAccepted,\n onDropRejected,\n onFileDialogCancel,\n onFileDialogOpen,\n })\n\n assignRef(openRef, open)\n\n const isDragIdle = !isDragAccept && !isDragReject\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n justifyContent: \"center\",\n position: \"relative\",\n ...styles.container,\n }\n\n return (\n <DropzoneProvider\n value={{ isDragAccept, isDragIdle, isDragReject, isLoading, styles }}\n >\n <ui.div\n className={cx(\"ui-dropzone\", className)}\n __css={css}\n {...formControlProps}\n {...containerProps}\n {...getRootProps({})}\n data-accept={dataAttr(isDragAccept)}\n data-idle={dataAttr(isDragIdle)}\n data-loading={dataAttr(isLoading)}\n data-reject={dataAttr(isDragReject)}\n >\n <DropzoneLoadingOverlay loadingProps={loadingProps} {...overlayProps} />\n\n <ui.input\n id={id}\n ref={ref}\n name={name}\n aria-readonly={ariaReadOnly}\n {...formControlProps}\n {...getInputProps()}\n />\n {children}\n </ui.div>\n </DropzoneProvider>\n )\n})\n\nDropzone.displayName = \"Dropzone\"\nDropzone.__ui__ = \"Dropzone\"\n\ninterface DropzoneLoadingOverlayProps extends FadeProps {\n loadingProps?: LoadingProps\n}\n\nconst DropzoneLoadingOverlay: FC<DropzoneLoadingOverlayProps> = ({\n loadingProps,\n ...rest\n}) => {\n const { isLoading, styles } = useDropzoneContext()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n h: \"100%\",\n justifyContent: \"center\",\n left: 0,\n position: \"absolute\",\n top: 0,\n w: \"100%\",\n ...styles.overlay,\n }\n\n return (\n <Fade\n className=\"ui-dropzone__overlay\"\n isOpen={isLoading}\n unmountOnExit\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\nDropzoneLoadingOverlay.displayName = \"DropzoneLoadingOverlay\"\nDropzoneLoadingOverlay.__ui__ = \"DropzoneLoadingOverlay\"\n\nexport const DropzoneAccept: FC<PropsWithChildren> = ({ children }) => {\n const { isDragAccept } = useDropzoneContext()\n\n return isDragAccept ? children : null\n}\n\nDropzoneAccept.displayName = \"DropzoneAccept\"\nDropzoneAccept.__ui__ = \"DropzoneAccept\"\n\nexport const DropzoneReject: FC<PropsWithChildren> = ({ children }) => {\n const { isDragReject } = useDropzoneContext()\n\n return isDragReject ? children : null\n}\n\nDropzoneReject.displayName = \"DropzoneReject\"\nDropzoneReject.__ui__ = \"DropzoneReject\"\n\nexport const DropzoneIdle: FC<PropsWithChildren> = ({ children }) => {\n const { isDragIdle } = useDropzoneContext()\n\n return isDragIdle ? children : null\n}\n\nDropzoneIdle.displayName = \"DropzoneIdle\"\nDropzoneIdle.__ui__ = \"DropzoneIdle\"\n"],"mappings":"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","names":[]}