@mage-ui/components 1.0.176 → 1.0.177
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/components/controls/file-input/FileInputMultiple.d.mts +20 -17
- package/dist/components/controls/file-input/FileInputMultiple.d.mts.map +1 -1
- package/dist/components/controls/file-input/FileInputMultiple.mjs +1 -1
- package/dist/components/controls/file-input/FileInputMultiple.mjs.map +1 -1
- package/dist/components/controls/file-input/FileInputMultipleS3.d.mts +2 -5
- package/dist/components/controls/file-input/FileInputMultipleS3.d.mts.map +1 -1
- package/dist/components/controls/file-input/FileInputMultipleS3.mjs +1 -1
- package/dist/components/controls/file-input/FileInputMultipleS3.mjs.map +1 -1
- package/dist/components/controls/index.d.mts +1 -1
- package/dist/components/index.d.mts +1 -1
- package/dist/index.d.mts +2 -2
- package/package.json +3 -3
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
import { BaseFileInputProps } from "./BaseFileInput.mjs";
|
|
2
|
-
import
|
|
2
|
+
import { ReactElement } from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/components/controls/file-input/FileInputMultiple.d.ts
|
|
5
|
+
type FileInputMultipleHandle = {
|
|
6
|
+
/** Returns the current pending files. */getFiles: () => File[]; /** Programmatically set the pending files. */
|
|
7
|
+
setPendingFiles: (files: File[] | null) => void; /** Clear all pending files and reset the input. */
|
|
8
|
+
clear: () => void;
|
|
9
|
+
};
|
|
5
10
|
type FileInputMultipleProps = Omit<BaseFileInputProps, 'multiple' | 'onChange' | 'valueComponent'> & {
|
|
6
11
|
onChange?: (files: File[] | null) => void;
|
|
7
12
|
badgeClassNames?: {
|
|
@@ -10,22 +15,20 @@ type FileInputMultipleProps = Omit<BaseFileInputProps, 'multiple' | 'onChange' |
|
|
|
10
15
|
section?: string;
|
|
11
16
|
label?: string;
|
|
12
17
|
};
|
|
18
|
+
/** When true, new file selections are merged with previously selected files
|
|
19
|
+
* instead of replacing them. */
|
|
20
|
+
accumulate?: boolean;
|
|
21
|
+
/** Extension → MIME type map used to build the `accept` attribute and
|
|
22
|
+
* resolve MIME types. Example: `{ pdf: 'application/pdf' }`. */
|
|
23
|
+
acceptedTypes?: Record<string, string>;
|
|
24
|
+
/** Fires when the accumulated file list changes (after merge when
|
|
25
|
+
* `accumulate` is true). Unlike `onChange`, which reflects the raw input
|
|
26
|
+
* event, this callback returns the full pending file list. */
|
|
27
|
+
onSelect?: (files: File[] | null) => void;
|
|
13
28
|
};
|
|
14
|
-
declare const FileInputMultiple: ({
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
onFocus,
|
|
18
|
-
onChange,
|
|
19
|
-
label,
|
|
20
|
-
description,
|
|
21
|
-
placeholder,
|
|
22
|
-
error,
|
|
23
|
-
accept,
|
|
24
|
-
required,
|
|
25
|
-
disabled,
|
|
26
|
-
classNames,
|
|
27
|
-
badgeClassNames
|
|
28
|
-
}: FileInputMultipleProps) => react_jsx_runtime0.JSX.Element;
|
|
29
|
+
declare const FileInputMultiple: (props: FileInputMultipleProps & {
|
|
30
|
+
ref?: React.Ref<FileInputMultipleHandle>;
|
|
31
|
+
}) => ReactElement;
|
|
29
32
|
//#endregion
|
|
30
|
-
export { FileInputMultiple, FileInputMultipleProps };
|
|
33
|
+
export { FileInputMultiple, FileInputMultipleHandle, FileInputMultipleProps };
|
|
31
34
|
//# sourceMappingURL=FileInputMultiple.d.mts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInputMultiple.d.mts","names":[],"sources":["../../../../src/components/controls/file-input/FileInputMultiple.tsx"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"FileInputMultiple.d.mts","names":[],"sources":["../../../../src/components/controls/file-input/FileInputMultiple.tsx"],"mappings":";;;;KAgBY,uBAAA;2CAEV,QAAA,QAAgB,IAAA,IAFiB;EAIjC,eAAA,GAAkB,KAAA,EAAO,IAAA,oBAAI;EAE7B,KAAA;AAAA;AAAA,KAGU,sBAAA,GAAyB,IAAA,CACnC,kBAAA;EAGA,QAAA,IAAY,KAAA,EAAO,IAAA;EACnB,eAAA;IACE,KAAA;IACA,IAAA;IACA,OAAA;IACA,KAAA;EAAA;;;EAIF,UAAA;EATmB;;EAYnB,aAAA,GAAgB,MAAA;EAIO;;;EAAvB,QAAA,IAAY,KAAA,EAAO,IAAA;AAAA;AAAA,cA2HR,iBAAA,GACX,KAAA,EAAO,sBAAA;EACL,GAAA,GAAM,KAAA,CAAM,GAAA,CAAI,uBAAA;AAAA,MAEf,YAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Badge as e}from"../../data-display/badge/Badge.mjs";import{BaseFileInput as t}from"./BaseFileInput.mjs";import{fileInputBadge as n}from"@mage-ui/styled-system/recipes";import{Fragment as r,jsx as i}from"react/jsx-runtime";const
|
|
1
|
+
import{Badge as e}from"../../data-display/badge/Badge.mjs";import{BaseFileInput as t}from"./BaseFileInput.mjs";import{fileInputBadge as n}from"@mage-ui/styled-system/recipes";import{Fragment as r,jsx as i}from"react/jsx-runtime";import{forwardRef as a,useImperativeHandle as o,useRef as s}from"react";const c=({badgeClassNames:t})=>({value:a})=>a?i(r,{children:(Array.isArray(a)?a:[a]).map(r=>i(e,{classNames:{badge:t?.badge??n(),root:t?.root,section:t?.section,label:t?.label},children:r.name},`${r.name}-${r.lastModified}`))}):null,l=e=>{if(!e)return;let t=Object.keys(e).map(e=>`.${e}`),n=[...new Set(Object.values(e))];return[...t,...n].join(`,`)};function u({name:e,onBlur:n,onFocus:r,onChange:a,onSelect:u,label:d,description:f,placeholder:p,error:m,accept:h,required:g,disabled:_,classNames:v,badgeClassNames:y,accumulate:b=!1,acceptedTypes:x},S){let C=s([]);o(S,()=>({getFiles:()=>C.current,setPendingFiles:e=>{C.current=e??[],u?.(e)},clear:()=>{C.current=[],u?.(null)}}));let w=e=>{if(!e){C.current=[],u?.(null),a?.(null);return}let t=b?[...C.current,...e]:e;C.current=t,u?.(t),a?.(e)};return i(t,{name:e,onBlur:n,onFocus:r,label:d,description:f,placeholder:p,error:m,accept:l(x)??h,required:g,disabled:_,classNames:v,multiple:!0,valueComponent:c({badgeClassNames:y}),onChange:e=>{w(e)}})}const d=a(u);export{d as FileInputMultiple};
|
|
2
2
|
//# sourceMappingURL=FileInputMultiple.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInputMultiple.mjs","names":[],"sources":["../../../../src/components/controls/file-input/FileInputMultiple.tsx"],"sourcesContent":["import { fileInputBadge } from '@mage-ui/styled-system/recipes';\nimport { Badge } from '@/components/data-display/badge/Badge';\n\nimport {\n BaseFileInput,\n type BaseFileInputProps,\n type FileInputValueComponent,\n} from './BaseFileInput';\n\nexport type FileInputMultipleProps = Omit<\n BaseFileInputProps,\n 'multiple' | 'onChange' | 'valueComponent'\n> & {\n onChange?: (files: File[] | null) => void;\n badgeClassNames?: {\n badge?: string;\n root?: string;\n section?: string;\n label?: string;\n };\n};\n\nconst createValueComponent = ({\n badgeClassNames,\n}: {\n badgeClassNames?: {\n badge?: string;\n root?: string;\n section?: string;\n label?: string;\n };\n}): FileInputValueComponent => {\n return ({ value }) => {\n if (!value) return null;\n\n const files = Array.isArray(value) ? value : [value];\n\n return (\n <>\n {files.map((file) => (\n <Badge\n key={`${file.name}-${file.lastModified}`}\n classNames={{\n badge: badgeClassNames?.badge ?? fileInputBadge(),\n root: badgeClassNames?.root,\n section: badgeClassNames?.section,\n label: badgeClassNames?.label,\n }}\n >\n {file.name}\n </Badge>\n ))}\n </>\n );\n };\n};\n\
|
|
1
|
+
{"version":3,"file":"FileInputMultiple.mjs","names":[],"sources":["../../../../src/components/controls/file-input/FileInputMultiple.tsx"],"sourcesContent":["import {\n forwardRef,\n type ReactElement,\n useImperativeHandle,\n useRef,\n} from 'react';\n\nimport { fileInputBadge } from '@mage-ui/styled-system/recipes';\nimport { Badge } from '@/components/data-display/badge/Badge';\n\nimport {\n BaseFileInput,\n type BaseFileInputProps,\n type FileInputValueComponent,\n} from './BaseFileInput';\n\nexport type FileInputMultipleHandle = {\n /** Returns the current pending files. */\n getFiles: () => File[];\n /** Programmatically set the pending files. */\n setPendingFiles: (files: File[] | null) => void;\n /** Clear all pending files and reset the input. */\n clear: () => void;\n};\n\nexport type FileInputMultipleProps = Omit<\n BaseFileInputProps,\n 'multiple' | 'onChange' | 'valueComponent'\n> & {\n onChange?: (files: File[] | null) => void;\n badgeClassNames?: {\n badge?: string;\n root?: string;\n section?: string;\n label?: string;\n };\n /** When true, new file selections are merged with previously selected files\n * instead of replacing them. */\n accumulate?: boolean;\n /** Extension → MIME type map used to build the `accept` attribute and\n * resolve MIME types. Example: `{ pdf: 'application/pdf' }`. */\n acceptedTypes?: Record<string, string>;\n /** Fires when the accumulated file list changes (after merge when\n * `accumulate` is true). Unlike `onChange`, which reflects the raw input\n * event, this callback returns the full pending file list. */\n onSelect?: (files: File[] | null) => void;\n};\n\nconst createValueComponent = ({\n badgeClassNames,\n}: {\n badgeClassNames?: {\n badge?: string;\n root?: string;\n section?: string;\n label?: string;\n };\n}): FileInputValueComponent => {\n return ({ value }) => {\n if (!value) return null;\n\n const files = Array.isArray(value) ? value : [value];\n\n return (\n <>\n {files.map((file) => (\n <Badge\n key={`${file.name}-${file.lastModified}`}\n classNames={{\n badge: badgeClassNames?.badge ?? fileInputBadge(),\n root: badgeClassNames?.root,\n section: badgeClassNames?.section,\n label: badgeClassNames?.label,\n }}\n >\n {file.name}\n </Badge>\n ))}\n </>\n );\n };\n};\n\nconst buildAcceptString = (\n acceptedTypes: Record<string, string> | undefined,\n): string | undefined => {\n if (!acceptedTypes) return undefined;\n const exts = Object.keys(acceptedTypes).map((ext) => `.${ext}`);\n const mimes = [...new Set(Object.values(acceptedTypes))];\n return [...exts, ...mimes].join(',');\n};\n\nfunction FileInputMultipleInner(\n {\n name,\n onBlur,\n onFocus,\n onChange,\n onSelect,\n label,\n description,\n placeholder,\n error,\n accept,\n required,\n disabled,\n classNames,\n badgeClassNames,\n accumulate = false,\n acceptedTypes,\n }: FileInputMultipleProps,\n ref: React.ForwardedRef<FileInputMultipleHandle>,\n) {\n const pendingFilesRef = useRef<File[]>([]);\n\n useImperativeHandle(ref, () => ({\n getFiles: () => pendingFilesRef.current,\n setPendingFiles: (files) => {\n pendingFilesRef.current = files ?? [];\n onSelect?.(files);\n },\n clear: () => {\n pendingFilesRef.current = [];\n onSelect?.(null);\n },\n }));\n\n const handleChange = (files: File[] | null) => {\n if (!files) {\n pendingFilesRef.current = [];\n onSelect?.(null);\n onChange?.(null);\n return;\n }\n\n const merged = accumulate ? [...pendingFilesRef.current, ...files] : files;\n\n pendingFilesRef.current = merged;\n onSelect?.(merged);\n onChange?.(files);\n };\n\n const acceptAttr = buildAcceptString(acceptedTypes) ?? accept;\n\n return (\n <BaseFileInput\n name={name}\n onBlur={onBlur}\n onFocus={onFocus}\n label={label}\n description={description}\n placeholder={placeholder}\n error={error}\n accept={acceptAttr}\n required={required}\n disabled={disabled}\n classNames={classNames}\n multiple={true}\n valueComponent={createValueComponent({\n badgeClassNames,\n })}\n onChange={(payload) => {\n handleChange(payload as File[] | null);\n }}\n />\n );\n}\n\nexport const FileInputMultiple = forwardRef(FileInputMultipleInner) as (\n props: FileInputMultipleProps & {\n ref?: React.Ref<FileInputMultipleHandle>;\n },\n) => ReactElement;\n"],"mappings":"6SAgDA,MAAM,GAAwB,CAC5B,sBASQ,CAAE,WACH,EAKH,EAAA,EAAA,CAAA,UAHY,MAAM,QAAQ,EAAM,CAAG,EAAQ,CAAC,EAAM,EAIzC,IAAK,GACV,EAAC,EAAD,CAEE,WAAY,CACV,MAAO,GAAiB,OAAS,GAAgB,CACjD,KAAM,GAAiB,KACvB,QAAS,GAAiB,QAC1B,MAAO,GAAiB,MACzB,UAEA,EAAK,KACA,CATD,GAAG,EAAK,KAAK,GAAG,EAAK,eASpB,CACR,CACD,CAAA,CAnBc,KAwBjB,EACJ,GACuB,CACvB,GAAI,CAAC,EAAe,OACpB,IAAM,EAAO,OAAO,KAAK,EAAc,CAAC,IAAK,GAAQ,IAAI,IAAM,CACzD,EAAQ,CAAC,GAAG,IAAI,IAAI,OAAO,OAAO,EAAc,CAAC,CAAC,CACxD,MAAO,CAAC,GAAG,EAAM,GAAG,EAAM,CAAC,KAAK,IAAI,EAGtC,SAAS,EACP,CACE,OACA,SACA,UACA,WACA,WACA,QACA,cACA,cACA,QACA,SACA,WACA,WACA,aACA,kBACA,aAAa,GACb,iBAEF,EACA,CACA,IAAM,EAAkB,EAAe,EAAE,CAAC,CAE1C,EAAoB,OAAY,CAC9B,aAAgB,EAAgB,QAChC,gBAAkB,GAAU,CAC1B,EAAgB,QAAU,GAAS,EAAE,CACrC,IAAW,EAAM,EAEnB,UAAa,CACX,EAAgB,QAAU,EAAE,CAC5B,IAAW,KAAK,EAEnB,EAAE,CAEH,IAAM,EAAgB,GAAyB,CAC7C,GAAI,CAAC,EAAO,CACV,EAAgB,QAAU,EAAE,CAC5B,IAAW,KAAK,CAChB,IAAW,KAAK,CAChB,OAGF,IAAM,EAAS,EAAa,CAAC,GAAG,EAAgB,QAAS,GAAG,EAAM,CAAG,EAErE,EAAgB,QAAU,EAC1B,IAAW,EAAO,CAClB,IAAW,EAAM,EAKnB,OACE,EAAC,EAAD,CACQ,OACE,SACC,UACF,QACM,cACA,cACN,QACP,OAXe,EAAkB,EAAc,EAAI,EAYzC,WACA,WACE,aACZ,SAAU,GACV,eAAgB,EAAqB,CACnC,kBACD,CAAC,CACF,SAAW,GAAY,CACrB,EAAa,EAAyB,EAExC,CAAA,CAIN,MAAa,EAAoB,EAAW,EAAuB"}
|
|
@@ -1,18 +1,15 @@
|
|
|
1
1
|
import { S3InitBody, S3UploadConfig } from "../dropzone/use-s3-upload.mjs";
|
|
2
|
-
import { FileInputMultipleProps } from "./FileInputMultiple.mjs";
|
|
2
|
+
import { FileInputMultipleHandle, FileInputMultipleProps } from "./FileInputMultiple.mjs";
|
|
3
3
|
import { UploadedS3File } from "./FileInputS3.mjs";
|
|
4
4
|
import { ReactElement } from "react";
|
|
5
5
|
|
|
6
6
|
//#region src/components/controls/file-input/FileInputMultipleS3.d.ts
|
|
7
|
-
type FileInputMultipleS3Handle = {
|
|
7
|
+
type FileInputMultipleS3Handle = FileInputMultipleHandle & {
|
|
8
8
|
upload: () => Promise<UploadedS3File[] | null>;
|
|
9
|
-
setPendingFiles: (files: File[] | null) => void;
|
|
10
9
|
};
|
|
11
10
|
type FileInputMultipleS3Props<TBody extends S3InitBody = S3InitBody> = Omit<FileInputMultipleProps, 'onChange'> & S3UploadConfig<TBody> & {
|
|
12
11
|
autoUpload?: boolean;
|
|
13
|
-
accumulate?: boolean;
|
|
14
12
|
onChange?: (results: UploadedS3File[] | null) => void;
|
|
15
|
-
onSelect?: (files: File[] | null) => void;
|
|
16
13
|
};
|
|
17
14
|
declare const FileInputMultipleS3: <TBody extends S3InitBody = S3InitBody>(props: FileInputMultipleS3Props<TBody> & {
|
|
18
15
|
ref?: React.Ref<FileInputMultipleS3Handle>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInputMultipleS3.d.mts","names":[],"sources":["../../../../src/components/controls/file-input/FileInputMultipleS3.tsx"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"FileInputMultipleS3.d.mts","names":[],"sources":["../../../../src/components/controls/file-input/FileInputMultipleS3.tsx"],"mappings":";;;;;;KAwBY,yBAAA,GAA4B,uBAAA;EACtC,MAAA,QAAc,OAAA,CAAQ,cAAA;AAAA;AAAA,KAGZ,wBAAA,eAAuC,UAAA,GAAa,UAAA,IAC9D,IAAA,CAAK,sBAAA,gBACH,cAAA,CAAe,KAAA;EACb,UAAA;EACA,QAAA,IAAY,OAAA,EAAS,cAAA;AAAA;AAAA,cAoGd,mBAAA,iBACG,UAAA,GAAa,UAAA,EAE3B,KAAA,EAAO,wBAAA,CAAyB,KAAA;EAC9B,GAAA,GAAM,KAAA,CAAM,GAAA,CAAI,yBAAA;AAAA,MAEf,YAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defaultGetErrorMessage as e,useS3Upload as t}from"../dropzone/use-s3-upload.mjs";import{FileInputMultiple as n}from"./FileInputMultiple.mjs";import{jsx as r}from"react/jsx-runtime";import{forwardRef as i,useImperativeHandle as a,useRef as o,useState as s}from"react";function c({onChange:i,onSelect:c,autoUpload:l=!0,accumulate:u=!1,
|
|
1
|
+
import{defaultGetErrorMessage as e,useS3Upload as t}from"../dropzone/use-s3-upload.mjs";import{FileInputMultiple as n}from"./FileInputMultiple.mjs";import{jsx as r}from"react/jsx-runtime";import{forwardRef as i,useImperativeHandle as a,useRef as o,useState as s}from"react";function c({onChange:i,onSelect:c,autoUpload:l=!0,accumulate:u=!1,acceptedTypes:d,initUrl:f,buildInitBody:p,register:m,getHeaders:h,getErrorMessage:g=e,resolveUploadedUrl:_,texts:v,error:y,disabled:b,...x},S){let[C,w]=s(null),[T,E]=s(!1),D=o(null),{upload:O}=t({initUrl:f,buildInitBody:p,register:m,getHeaders:h,getErrorMessage:g,resolveUploadedUrl:_,acceptedTypes:d,texts:v}),k=async e=>{E(!0);try{let t=[];for(let n of e)t.push(await O(n));return i?.(t),t}catch(e){return w(e instanceof Error?e.message:`Upload failed`),null}finally{E(!1)}};a(S,()=>({getFiles:()=>D.current?.getFiles()??[],setPendingFiles:e=>{D.current?.setPendingFiles(e)},clear:()=>{D.current?.clear()},upload:()=>{let e=D.current?.getFiles()??[];return e.length===0?Promise.resolve(null):k(e)}}));let A=e=>{if(w(null),!e){i?.(null);return}l&&k(e)},j=e=>{c?.(e)};return r(n,{...x,ref:D,accumulate:u,acceptedTypes:d,onChange:A,onSelect:j,disabled:b??T,error:y??C??void 0})}const l=i(c);export{l as FileInputMultipleS3};
|
|
2
2
|
//# sourceMappingURL=FileInputMultipleS3.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInputMultipleS3.mjs","names":[],"sources":["../../../../src/components/controls/file-input/FileInputMultipleS3.tsx"],"sourcesContent":["import {\n forwardRef,\n type ReactElement,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\n\nimport {\n defaultGetErrorMessage,\n type S3InitBody,\n type S3UploadConfig,\n useS3Upload,\n} from '@/components/controls/dropzone/use-s3-upload';\n\nimport {\n FileInputMultiple,\n type FileInputMultipleProps,\n} from './FileInputMultiple';\nimport type { UploadedS3File } from './FileInputS3';\n\nexport type { UploadedS3File };\n\nexport type FileInputMultipleS3Handle = {\n upload: () => Promise<UploadedS3File[] | null>;\n
|
|
1
|
+
{"version":3,"file":"FileInputMultipleS3.mjs","names":[],"sources":["../../../../src/components/controls/file-input/FileInputMultipleS3.tsx"],"sourcesContent":["import {\n forwardRef,\n type ReactElement,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\n\nimport {\n defaultGetErrorMessage,\n type S3InitBody,\n type S3UploadConfig,\n useS3Upload,\n} from '@/components/controls/dropzone/use-s3-upload';\n\nimport {\n FileInputMultiple,\n type FileInputMultipleHandle,\n type FileInputMultipleProps,\n} from './FileInputMultiple';\nimport type { UploadedS3File } from './FileInputS3';\n\nexport type { UploadedS3File };\n\nexport type FileInputMultipleS3Handle = FileInputMultipleHandle & {\n upload: () => Promise<UploadedS3File[] | null>;\n};\n\nexport type FileInputMultipleS3Props<TBody extends S3InitBody = S3InitBody> =\n Omit<FileInputMultipleProps, 'onChange'> &\n S3UploadConfig<TBody> & {\n autoUpload?: boolean;\n onChange?: (results: UploadedS3File[] | null) => void;\n };\n\nfunction FileInputMultipleS3Inner<TBody extends S3InitBody = S3InitBody>(\n {\n onChange,\n onSelect,\n autoUpload = true,\n accumulate = false,\n acceptedTypes,\n initUrl,\n buildInitBody,\n register,\n getHeaders,\n getErrorMessage = defaultGetErrorMessage,\n resolveUploadedUrl,\n texts,\n error,\n disabled,\n ...fileInputMultipleProps\n }: FileInputMultipleS3Props<TBody>,\n ref: React.ForwardedRef<FileInputMultipleS3Handle>,\n) {\n const [uploadError, setUploadError] = useState<string | null>(null);\n const [isUploading, setIsUploading] = useState(false);\n const baseRef = useRef<FileInputMultipleHandle>(null);\n\n const { upload } = useS3Upload<TBody>({\n initUrl,\n buildInitBody,\n register,\n getHeaders,\n getErrorMessage,\n resolveUploadedUrl,\n acceptedTypes,\n texts,\n });\n\n const doUpload = async (files: File[]): Promise<UploadedS3File[] | null> => {\n setIsUploading(true);\n try {\n const results: UploadedS3File[] = [];\n for (const file of files) {\n results.push(await upload(file));\n }\n onChange?.(results);\n return results;\n } catch (e) {\n setUploadError(e instanceof Error ? e.message : 'Upload failed');\n return null;\n } finally {\n setIsUploading(false);\n }\n };\n\n useImperativeHandle(ref, () => ({\n getFiles: () => baseRef.current?.getFiles() ?? [],\n setPendingFiles: (files) => {\n baseRef.current?.setPendingFiles(files);\n },\n clear: () => {\n baseRef.current?.clear();\n },\n upload: () => {\n const files = baseRef.current?.getFiles() ?? [];\n if (files.length === 0) return Promise.resolve(null);\n return doUpload(files);\n },\n }));\n\n // onChange fires with only the NEW files from the input (not accumulated).\n // Use it to trigger auto-upload so we never re-upload already-uploaded files.\n const handleNewFiles = (newFiles: File[] | null) => {\n setUploadError(null);\n if (!newFiles) {\n onChange?.(null);\n return;\n }\n if (autoUpload) doUpload(newFiles);\n };\n\n // onSelect fires with the full accumulated list. Forward to consumer.\n const handleAccumulatedFiles = (allFiles: File[] | null) => {\n onSelect?.(allFiles);\n };\n\n return (\n <FileInputMultiple\n {...fileInputMultipleProps}\n ref={baseRef}\n accumulate={accumulate}\n acceptedTypes={acceptedTypes}\n onChange={handleNewFiles}\n onSelect={handleAccumulatedFiles}\n disabled={disabled ?? isUploading}\n error={error ?? uploadError ?? undefined}\n />\n );\n}\n\nexport const FileInputMultipleS3 = forwardRef(FileInputMultipleS3Inner) as <\n TBody extends S3InitBody = S3InitBody,\n>(\n props: FileInputMultipleS3Props<TBody> & {\n ref?: React.Ref<FileInputMultipleS3Handle>;\n },\n) => ReactElement;\n"],"mappings":"kRAmCA,SAAS,EACP,CACE,WACA,WACA,aAAa,GACb,aAAa,GACb,gBACA,UACA,gBACA,WACA,aACA,kBAAkB,EAClB,qBACA,QACA,QACA,WACA,GAAG,GAEL,EACA,CACA,GAAM,CAAC,EAAa,GAAkB,EAAwB,KAAK,CAC7D,CAAC,EAAa,GAAkB,EAAS,GAAM,CAC/C,EAAU,EAAgC,KAAK,CAE/C,CAAE,UAAW,EAAmB,CACpC,UACA,gBACA,WACA,aACA,kBACA,qBACA,gBACA,QACD,CAAC,CAEI,EAAW,KAAO,IAAoD,CAC1E,EAAe,GAAK,CACpB,GAAI,CACF,IAAM,EAA4B,EAAE,CACpC,IAAK,IAAM,KAAQ,EACjB,EAAQ,KAAK,MAAM,EAAO,EAAK,CAAC,CAGlC,OADA,IAAW,EAAQ,CACZ,QACA,EAAG,CAEV,OADA,EAAe,aAAa,MAAQ,EAAE,QAAU,gBAAgB,CACzD,YACC,CACR,EAAe,GAAM,GAIzB,EAAoB,OAAY,CAC9B,aAAgB,EAAQ,SAAS,UAAU,EAAI,EAAE,CACjD,gBAAkB,GAAU,CAC1B,EAAQ,SAAS,gBAAgB,EAAM,EAEzC,UAAa,CACX,EAAQ,SAAS,OAAO,EAE1B,WAAc,CACZ,IAAM,EAAQ,EAAQ,SAAS,UAAU,EAAI,EAAE,CAE/C,OADI,EAAM,SAAW,EAAU,QAAQ,QAAQ,KAAK,CAC7C,EAAS,EAAM,EAEzB,EAAE,CAIH,IAAM,EAAkB,GAA4B,CAElD,GADA,EAAe,KAAK,CAChB,CAAC,EAAU,CACb,IAAW,KAAK,CAChB,OAEE,GAAY,EAAS,EAAS,EAI9B,EAA0B,GAA4B,CAC1D,IAAW,EAAS,EAGtB,OACE,EAAC,EAAD,CACE,GAAI,EACJ,IAAK,EACO,aACG,gBACf,SAAU,EACV,SAAU,EACV,SAAU,GAAY,EACtB,MAAO,GAAS,GAAe,IAAA,GAC/B,CAAA,CAIN,MAAa,EAAsB,EAAW,EAAyB"}
|
|
@@ -15,7 +15,7 @@ import { FileData } from "./dropzone/DropzoneBase.mjs";
|
|
|
15
15
|
import { Dropzone, DropzoneProps } from "./dropzone/Dropzone.mjs";
|
|
16
16
|
import { DropzoneS3, DropzoneS3Props } from "./dropzone/DropzoneS3.mjs";
|
|
17
17
|
import { FileInput, FileInputProps } from "./file-input/FileInput.mjs";
|
|
18
|
-
import { FileInputMultiple, FileInputMultipleProps } from "./file-input/FileInputMultiple.mjs";
|
|
18
|
+
import { FileInputMultiple, FileInputMultipleHandle, FileInputMultipleProps } from "./file-input/FileInputMultiple.mjs";
|
|
19
19
|
import { FileInputS3, FileInputS3Handle, FileInputS3Props, UploadedS3File } from "./file-input/FileInputS3.mjs";
|
|
20
20
|
import { FileInputMultipleS3, FileInputMultipleS3Handle, FileInputMultipleS3Props } from "./file-input/FileInputMultipleS3.mjs";
|
|
21
21
|
import { PasswordInput, PasswordInputProps } from "./password-input/PasswordInput.mjs";
|
|
@@ -71,7 +71,7 @@ import { FileData } from "./controls/dropzone/DropzoneBase.mjs";
|
|
|
71
71
|
import { Dropzone, DropzoneProps } from "./controls/dropzone/Dropzone.mjs";
|
|
72
72
|
import { DropzoneS3, DropzoneS3Props } from "./controls/dropzone/DropzoneS3.mjs";
|
|
73
73
|
import { FileInput, FileInputProps } from "./controls/file-input/FileInput.mjs";
|
|
74
|
-
import { FileInputMultiple, FileInputMultipleProps } from "./controls/file-input/FileInputMultiple.mjs";
|
|
74
|
+
import { FileInputMultiple, FileInputMultipleHandle, FileInputMultipleProps } from "./controls/file-input/FileInputMultiple.mjs";
|
|
75
75
|
import { FileInputS3, FileInputS3Handle, FileInputS3Props, UploadedS3File } from "./controls/file-input/FileInputS3.mjs";
|
|
76
76
|
import { FileInputMultipleS3, FileInputMultipleS3Handle, FileInputMultipleS3Props } from "./controls/file-input/FileInputMultipleS3.mjs";
|
|
77
77
|
import { PasswordInput, PasswordInputProps } from "./controls/password-input/PasswordInput.mjs";
|
package/dist/index.d.mts
CHANGED
|
@@ -71,7 +71,7 @@ import { FileData } from "./components/controls/dropzone/DropzoneBase.mjs";
|
|
|
71
71
|
import { Dropzone, DropzoneProps } from "./components/controls/dropzone/Dropzone.mjs";
|
|
72
72
|
import { DropzoneS3, DropzoneS3Props } from "./components/controls/dropzone/DropzoneS3.mjs";
|
|
73
73
|
import { FileInput, FileInputProps } from "./components/controls/file-input/FileInput.mjs";
|
|
74
|
-
import { FileInputMultiple, FileInputMultipleProps } from "./components/controls/file-input/FileInputMultiple.mjs";
|
|
74
|
+
import { FileInputMultiple, FileInputMultipleHandle, FileInputMultipleProps } from "./components/controls/file-input/FileInputMultiple.mjs";
|
|
75
75
|
import { FileInputS3, FileInputS3Handle, FileInputS3Props, UploadedS3File } from "./components/controls/file-input/FileInputS3.mjs";
|
|
76
76
|
import { FileInputMultipleS3, FileInputMultipleS3Handle, FileInputMultipleS3Props } from "./components/controls/file-input/FileInputMultipleS3.mjs";
|
|
77
77
|
import { PasswordInput, PasswordInputProps } from "./components/controls/password-input/PasswordInput.mjs";
|
|
@@ -106,4 +106,4 @@ import { Modals } from "./components/overlays/modal/index.mjs";
|
|
|
106
106
|
import { Toast, ToastIntent, ToastOptions, ToastProviderProps } from "./components/overlays/toast/Toast.mjs";
|
|
107
107
|
import { Tooltip, TooltipProps } from "./components/overlays/tooltip/Tooltip.mjs";
|
|
108
108
|
import { MageUiProvider, MageUiProviderProps } from "./providers/MageUiProvider.mjs";
|
|
109
|
-
export { Autocomplete, AutocompleteProps, Avatar, AvatarDropzone, AvatarDropzoneProps, AvatarDropzoneS3, AvatarDropzoneS3Props, AvatarProps, AvatarUpload, AvatarUploadProps, Badge, BadgeProps, Breadcrumbs, BreadcrumbsBarProps, BreadcrumbsProps, Button, ButtonAction, ButtonActionProps, ButtonIcon, ButtonIconProps, ButtonIconVisual, ButtonIconVisualProps, ButtonLoader, ButtonProps, ButtonVisual, ButtonVisualProps, Calendar, CalendarEvent, CalendarProps, CalendarView, Card, CardBase, CardBody, CardClassNames, CardFooter, CardHeader, CardProps, CardRoot, Checkbox, CheckboxProps, CheckboxTree, CheckboxTreeItem, CheckboxTreeProps, ColumnDef, Combobox, ComboboxProps, DEFAULT_DATA_TABLE_LABELS, DataTable, DataTableBottomSlot, DataTableBottomSlotProps, DataTableClassNames, DataTableColumnMeta, DataTableContextProvider, DataTableContextValue, DataTableExpansionConfig, DataTableExtraColumnConfig, DataTableFeedback, DataTableFiltersConfig, DataTableLabels, DataTablePageSize, DataTablePageSizeProps, DataTablePagination, DataTablePaginationConfig, DataTablePaginationProps, DataTableProps, DataTableRecord, DataTableSearchConfig, DataTableSelectionConfig, DataTableSortingConfig, DataTableTableConfig, DataTableTopSlot, DataTableTopSlotProps, DateLocalizer, DatePicker, DatePickerClassNames, DatePickerDate, DatePickerProps, DatePickerValue, DateTimePicker, DateTimePickerClassNames, DateTimePickerDate, DateTimePickerProps, DateTimePickerValue, DescriptionList, DescriptionListClassNames, DescriptionListItemProps, DescriptionListProps, Details, DetailsProps, DocumentItem, DocumentItemProps, Dropzone, DropzoneProps, DropzoneS3, DropzoneS3Props, DropzoneS3Texts, ExpandedState, Fieldset, FieldsetProps, FileData, FileIcon, FileIconProps, FileInput, FileInputMultiple, FileInputMultipleProps, FileInputMultipleS3, FileInputMultipleS3Handle, FileInputMultipleS3Props, FileInputProps, FileInputS3, FileInputS3Handle, FileInputS3Props, FileMetadata, FluidGrid, FluidGridProps, Form, FormDropzoneS3Props, FormProps, FormS3Context, FormS3ContextValue, Grid, GridClassNames, HorizontalDivider, HorizontalDividerProps, Icon, IconProps, IconRaw, IconRawProps, IconSvg, IconSvgProps, IconWrapped, IconWrappedProps, Indicator, IndicatorProps, LoaderDot, LoaderDotProps, LoaderOval, LoaderOvalProps, LogoImage, LogoImageProps, LogoSvg, LogoSvgProps, MageUiProvider, MageUiProviderProps, Menu, MenuProps, Modal, ModalClassNames, ModalIntent, ModalProps, ModalRegistry, ModalRegistryEntry, ModalRootProps, Modals, MultiForm, MultiFormContext, MultiFormContextValue, MultiFormProps, MultiFormStep, MultiFormStepProps, MultiStepFormProps, NavigationMenu, NavigationMenuProps, NoSsr, NotificationBanner, NotificationBannerIntent, NotificationBannerProps, PASSWORD_RULES, Pagination, PaginationClassNames, PaginationRootProps, PaginationState, PasswordInput, PasswordInputProps, PasswordRule, PasswordRuleDefinition, PasswordSegment, PasswordStrengthInput, PasswordStrengthInputProps, Progress, ProgressClassNames, ProgressProps, Radio, RadioProps, RemovableItem, RemovableItemProps, RequestResponse, ResourceItem, ResourceItemProps, RowSelectionState, S3FileMeta, S3InitBody, S3InitResponse, S3UploadCallback, Schema, SchemaProps, ScrollArea, ScrollAreaAutosize, ScrollAreaAutosizeProps, ScrollAreaClassNames, ScrollAreaProps, Select, SelectProps, Sidebar, SidebarClassNames, SidebarProps, SortingState, Stepper, StepperClassNames, StepperProps, StepperStepProps, Switch, SwitchGroup, SwitchGroupProps, SwitchProps, Table, TableBodyProps, TableCaptionProps, TableCellProps, TableClassNames, TableFootProps, TableHeadProps, TableHeaderCellProps, TableProps, TableRowProps, Tag, TagGroup, TagGroupProps, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, Toast, ToastIntent, ToastOptions, ToastProviderProps, Tooltip, TooltipProps, UploadTarget, UploadedFile, UploadedFileDetails, UploadedFileDetailsProps, UploadedFileProps, UploadedFiles, UploadedFilesClassNames, UploadedFilesItemClassNames, UploadedFilesItemProps, UploadedFilesProps, UploadedS3File, UploadingFiles, UploadingFilesClassNames, UploadingFilesItemClassNames, UploadingFilesItemErrorClassNames, UploadingFilesItemErrorProps, UploadingFilesItemProps, UploadingFilesProps, Virtual, VirtualItem, VirtualPadding, VirtualProps, VisuallyHidden, VisuallyHiddenProps, YearPicker, YearPickerClassNames, YearPickerDate, YearPickerProps, YearPickerValue, getFileExtension, useDataTableContext, useFormS3Context, useMultiFormContext, usePasswordRules, z };
|
|
109
|
+
export { Autocomplete, AutocompleteProps, Avatar, AvatarDropzone, AvatarDropzoneProps, AvatarDropzoneS3, AvatarDropzoneS3Props, AvatarProps, AvatarUpload, AvatarUploadProps, Badge, BadgeProps, Breadcrumbs, BreadcrumbsBarProps, BreadcrumbsProps, Button, ButtonAction, ButtonActionProps, ButtonIcon, ButtonIconProps, ButtonIconVisual, ButtonIconVisualProps, ButtonLoader, ButtonProps, ButtonVisual, ButtonVisualProps, Calendar, CalendarEvent, CalendarProps, CalendarView, Card, CardBase, CardBody, CardClassNames, CardFooter, CardHeader, CardProps, CardRoot, Checkbox, CheckboxProps, CheckboxTree, CheckboxTreeItem, CheckboxTreeProps, ColumnDef, Combobox, ComboboxProps, DEFAULT_DATA_TABLE_LABELS, DataTable, DataTableBottomSlot, DataTableBottomSlotProps, DataTableClassNames, DataTableColumnMeta, DataTableContextProvider, DataTableContextValue, DataTableExpansionConfig, DataTableExtraColumnConfig, DataTableFeedback, DataTableFiltersConfig, DataTableLabels, DataTablePageSize, DataTablePageSizeProps, DataTablePagination, DataTablePaginationConfig, DataTablePaginationProps, DataTableProps, DataTableRecord, DataTableSearchConfig, DataTableSelectionConfig, DataTableSortingConfig, DataTableTableConfig, DataTableTopSlot, DataTableTopSlotProps, DateLocalizer, DatePicker, DatePickerClassNames, DatePickerDate, DatePickerProps, DatePickerValue, DateTimePicker, DateTimePickerClassNames, DateTimePickerDate, DateTimePickerProps, DateTimePickerValue, DescriptionList, DescriptionListClassNames, DescriptionListItemProps, DescriptionListProps, Details, DetailsProps, DocumentItem, DocumentItemProps, Dropzone, DropzoneProps, DropzoneS3, DropzoneS3Props, DropzoneS3Texts, ExpandedState, Fieldset, FieldsetProps, FileData, FileIcon, FileIconProps, FileInput, FileInputMultiple, FileInputMultipleHandle, FileInputMultipleProps, FileInputMultipleS3, FileInputMultipleS3Handle, FileInputMultipleS3Props, FileInputProps, FileInputS3, FileInputS3Handle, FileInputS3Props, FileMetadata, FluidGrid, FluidGridProps, Form, FormDropzoneS3Props, FormProps, FormS3Context, FormS3ContextValue, Grid, GridClassNames, HorizontalDivider, HorizontalDividerProps, Icon, IconProps, IconRaw, IconRawProps, IconSvg, IconSvgProps, IconWrapped, IconWrappedProps, Indicator, IndicatorProps, LoaderDot, LoaderDotProps, LoaderOval, LoaderOvalProps, LogoImage, LogoImageProps, LogoSvg, LogoSvgProps, MageUiProvider, MageUiProviderProps, Menu, MenuProps, Modal, ModalClassNames, ModalIntent, ModalProps, ModalRegistry, ModalRegistryEntry, ModalRootProps, Modals, MultiForm, MultiFormContext, MultiFormContextValue, MultiFormProps, MultiFormStep, MultiFormStepProps, MultiStepFormProps, NavigationMenu, NavigationMenuProps, NoSsr, NotificationBanner, NotificationBannerIntent, NotificationBannerProps, PASSWORD_RULES, Pagination, PaginationClassNames, PaginationRootProps, PaginationState, PasswordInput, PasswordInputProps, PasswordRule, PasswordRuleDefinition, PasswordSegment, PasswordStrengthInput, PasswordStrengthInputProps, Progress, ProgressClassNames, ProgressProps, Radio, RadioProps, RemovableItem, RemovableItemProps, RequestResponse, ResourceItem, ResourceItemProps, RowSelectionState, S3FileMeta, S3InitBody, S3InitResponse, S3UploadCallback, Schema, SchemaProps, ScrollArea, ScrollAreaAutosize, ScrollAreaAutosizeProps, ScrollAreaClassNames, ScrollAreaProps, Select, SelectProps, Sidebar, SidebarClassNames, SidebarProps, SortingState, Stepper, StepperClassNames, StepperProps, StepperStepProps, Switch, SwitchGroup, SwitchGroupProps, SwitchProps, Table, TableBodyProps, TableCaptionProps, TableCellProps, TableClassNames, TableFootProps, TableHeadProps, TableHeaderCellProps, TableProps, TableRowProps, Tag, TagGroup, TagGroupProps, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, Toast, ToastIntent, ToastOptions, ToastProviderProps, Tooltip, TooltipProps, UploadTarget, UploadedFile, UploadedFileDetails, UploadedFileDetailsProps, UploadedFileProps, UploadedFiles, UploadedFilesClassNames, UploadedFilesItemClassNames, UploadedFilesItemProps, UploadedFilesProps, UploadedS3File, UploadingFiles, UploadingFilesClassNames, UploadingFilesItemClassNames, UploadingFilesItemErrorClassNames, UploadingFilesItemErrorProps, UploadingFilesItemProps, UploadingFilesProps, Virtual, VirtualItem, VirtualPadding, VirtualProps, VisuallyHidden, VisuallyHiddenProps, YearPicker, YearPickerClassNames, YearPickerDate, YearPickerProps, YearPickerValue, getFileExtension, useDataTableContext, useFormS3Context, useMultiFormContext, usePasswordRules, z };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mage-ui/components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.177",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [],
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"rimraf": "^6.1.3",
|
|
26
26
|
"tsdown": "^0.21.4",
|
|
27
27
|
"typescript": "^5.9.3",
|
|
28
|
-
"@mage-ui/
|
|
29
|
-
"@mage-ui/
|
|
28
|
+
"@mage-ui/styled-system": "1.0.8",
|
|
29
|
+
"@mage-ui/preset": "1.0.177"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"@dnd-kit/core": "^6.3.1",
|