@mage-ui/components 1.0.139 → 1.0.140

package/dist/components/controls/dropzone/DropzoneBase.d.mts

@@ -64,7 +64,8 @@ type DropzoneBaseProps = {
   subtitle?: ReactNode;
   hint?: ReactNode;
   inputId?: string;
-  onFileUploaded?: (file: FileData) => void;
+  onFileUploaded?: (file: FileData) => void; /** Called when a file is about to be removed. Use to trigger server-side deletion. Fire-and-forget — errors are swallowed. */
+  onRemoveFile?: (file: FileData) => void | Promise<void>;
   hideWhenFull?: boolean;
   classNames?: {
     dropzoneBase?: string;

package/dist/components/controls/dropzone/DropzoneBase.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"DropzoneBase.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone/DropzoneBase.tsx"],"mappings":";;;;;;KAkCY,QAAA;EACV,IAAA;EACA,IAAA;EACA,IAAA;EACA,IAAA;EACA,QAAA;EACA,OAAA;EACA,GAAA;EACA,KAAA;EACA,KAAA;EACA,QAAA;AAAA;AAAA,KAGU,iBAAA;EACV,QAAA;IACE,KAAA;IACA,WAAA;IACA;EAAA;IAEA,KAAA,EAAO,MAAA,SAAe,QAAA;IACtB,WAAA;IACA,UAAA,GAAa,QAAA;EAAA,MACT,SAAA;EACN,YAAA,GAAe,MAAA,SAAe,QAAA;EAC9B,QAAA;EAXU;;;;;EAiBV,GAAA;EAXwB;;;;;EAiBxB,QAAA,GAAW,QAAA,EAMQ;EAJnB,QAAA,YAMU;EAJV,OAAA,WAoBQ;EAlBR,QAAA,IAAY,KAAA,EAAO,IAAA;EACnB,IAAA,GAAO,MAAA;EACP,OAAA,GAAU,MAAA;EA8BO;;;;;;;;;;;;;;EAfjB,MAAA,cAAoB,MAAA;EACpB,KAAA,GAAQ,SAAA;EACR,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,SAAA;EACP,OAAA;EACA,cAAA,IAAkB,IAAA,EAAM,QAAA;EACxB,YAAA;EACA,UAAA;IACE,YAAA;IACA,IAAA;IACA,KAAA;MACE,IAAA;MACA,KAAA;IAAA;IAEF,QAAA;IACA,YAAA,GAAe,SAAA;IACf,MAAA,GAAS,eAAA;IACT,QAAA;IACA,KAAA;IACA,QAAA;IACA,IAAA;EAAA;EAEF,SAAA;AAAA"}
+{"version":3,"file":"DropzoneBase.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone/DropzoneBase.tsx"],"mappings":";;;;;;KAkCY,QAAA;EACV,IAAA;EACA,IAAA;EACA,IAAA;EACA,IAAA;EACA,QAAA;EACA,OAAA;EACA,GAAA;EACA,KAAA;EACA,KAAA;EACA,QAAA;AAAA;AAAA,KAGU,iBAAA;EACV,QAAA;IACE,KAAA;IACA,WAAA;IACA;EAAA;IAEA,KAAA,EAAO,MAAA,SAAe,QAAA;IACtB,WAAA;IACA,UAAA,GAAa,QAAA;EAAA,MACT,SAAA;EACN,YAAA,GAAe,MAAA,SAAe,QAAA;EAC9B,QAAA;EAXU;;;;;EAiBV,GAAA;EAXwB;;;;;EAiBxB,QAAA,GAAW,QAAA,EAMQ;EAJnB,QAAA,YAMU;EAJV,OAAA,WAoBQ;EAlBR,QAAA,IAAY,KAAA,EAAO,IAAA;EACnB,IAAA,GAAO,MAAA;EACP,OAAA,GAAU,MAAA;EAsBY;;;;;;;;;;;;;;EAPtB,MAAA,cAAoB,MAAA;EACpB,KAAA,GAAQ,SAAA;EACR,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,SAAA;EACP,OAAA;EACA,cAAA,IAAkB,IAAA,EAAM,QAAA,WAzCxB;EA2CA,YAAA,IAAgB,IAAA,EAAM,QAAA,YAAoB,OAAA;EAC1C,YAAA;EACA,UAAA;IACE,YAAA;IACA,IAAA;IACA,KAAA;MACE,IAAA;MACA,KAAA;IAAA;IAEF,QAAA;IACA,YAAA,GAAe,SAAA;IACf,MAAA,GAAS,eAAA;IACT,QAAA;IACA,KAAA;IACA,QAAA;IACA,IAAA;EAAA;EAEF,SAAA;AAAA"}

package/dist/components/controls/dropzone/DropzoneBase.mjs

@@ -1,2 +1,2 @@
-import{Icon as e}from"../../data-display/icons/icon/Icon.mjs";import{LoaderOval as t}from"../../data-display/loader-oval/LoaderOval.mjs";import{useDropzoneState as n}from"./use-dropzone-state.mjs";import{cx as r}from"@mage-ui/styled-system/css";import{dropzoneBase as i,dropzoneBaseHint as a,dropzoneBaseIcon as o,dropzoneBaseIconSlot as s,dropzoneBaseInput as c,dropzoneBaseInputInner as l,dropzoneBaseLoader as u,dropzoneBaseLoaderRoot as d,dropzoneBaseRoot as f,dropzoneBaseSubtitle as p,dropzoneBaseTextSlot as m,dropzoneBaseTitle as h}from"@mage-ui/styled-system/recipes";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";import{useCallback as y,useRef as b}from"react";import{Dropzone as x}from"@mantine/dropzone";const S=({data:S,headers:C,children:w,initialFiles:T={},maxFiles:E,url:D,uploader:O,autoSend:k=!0,maxSize:A,onChange:j,accept:M,title:N,subtitle:P,hint:F,inputId:I,onFileUploaded:L,classNames:R,direction:z=`default`,hideWhenFull:B=!1})=>{let V=b(null),H=b(new Map),{files:U,isUploading:W,uploadMultipleFiles:G,addFile:K,removeFile:q}=n(D,T,L,C,O),J=y(e=>{q(e),H.current.delete(e),!k&&j&&j(Array.from(H.current.values()))},[q,k,j]),Y=y(async e=>{let t=Object.keys(U).length,n=(E??1/0)-t;if(n<=0)return;let r=e.slice(0,n);if(k)await G(r,S);else{for(let e of r)K(e),H.current.set(e.name,e);j?.(Array.from(H.current.values()))}},[k,G,K,S,U,E,j]),X=E!==void 0&&Object.keys(U).length>=E;return v(`div`,{className:r(R?.dropzoneBase??i(),R?.root??f()),"data-direction":z,children:[(!B||!X)&&v(x,{ref:V,onDrop:Y,disabled:X,loading:W,accept:M,maxSize:A,preventDropOnDocument:!0,inputProps:{id:I},classNames:{root:R?.input?.root??r(c(),`group`),inner:R?.input?.inner??l()},children:[_(`div`,{className:R?.iconSlot??s(),children:W?_(t,{classNames:{loader:R?.loader?.loader??u(),root:R?.loader?.root??d()}}):v(g,{children:[_(x.Idle,{children:_(e,{name:`mage-dropzone-upload-01`,path:`/icons/sprite-mage.svg`,classNames:{icon:R?.dropzoneIcon?.icon??o()}})}),_(x.Accept,{children:_(e,{name:`mage-dropzone-thumbs-up`,path:`/icons/sprite-mage.svg`,classNames:{icon:R?.dropzoneIcon?.icon??o()}})}),_(x.Reject,{children:_(e,{name:`mage-dropzone-thumbs-down`,path:`/icons/sprite-mage.svg`,classNames:{icon:R?.dropzoneIcon?.icon??o()}})})]})}),v(`div`,{className:R?.textSlot??m(),children:[_(`span`,{className:R?.title??h(),children:N||`Upload files`}),_(`span`,{className:R?.subtitle??p(),children:P||`Drag images here or click to select files`}),_(`span`,{className:R?.hint??a(),children:F||`Attach as many files as you like, each file should not exceed 5mb`})]})]}),w({files:U,isUploading:W,removeFile:J})]})};export{S as DropzoneBase};
+import{Icon as e}from"../../data-display/icons/icon/Icon.mjs";import{LoaderOval as t}from"../../data-display/loader-oval/LoaderOval.mjs";import{useDropzoneState as n}from"./use-dropzone-state.mjs";import{cx as r}from"@mage-ui/styled-system/css";import{dropzoneBase as i,dropzoneBaseHint as a,dropzoneBaseIcon as o,dropzoneBaseIconSlot as s,dropzoneBaseInput as c,dropzoneBaseInputInner as l,dropzoneBaseLoader as u,dropzoneBaseLoaderRoot as d,dropzoneBaseRoot as f,dropzoneBaseSubtitle as p,dropzoneBaseTextSlot as m,dropzoneBaseTitle as h}from"@mage-ui/styled-system/recipes";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";import{useCallback as y,useRef as b}from"react";import{Dropzone as x}from"@mantine/dropzone";const S=({data:S,headers:C,children:w,initialFiles:T={},maxFiles:E,url:D,uploader:O,autoSend:k=!0,maxSize:A,onChange:j,accept:M,title:N,subtitle:P,hint:F,inputId:I,onFileUploaded:L,onRemoveFile:R,classNames:z,direction:B=`default`,hideWhenFull:V=!1})=>{let H=b(null),U=b(new Map),{files:W,isUploading:G,uploadMultipleFiles:K,addFile:q,removeFile:J}=n(D,T,L,C,O),Y=b(W);Y.current=W;let X=y(e=>{if(R){let t=Y.current[e];t&&Promise.resolve(R(t)).catch(console.error)}J(e),U.current.delete(e),!k&&j&&j(Array.from(U.current.values()))},[J,k,j,R]),Z=y(async e=>{let t=Object.keys(W).length,n=(E??1/0)-t;if(n<=0)return;let r=e.slice(0,n);if(k)await K(r,S);else{for(let e of r)q(e),U.current.set(e.name,e);j?.(Array.from(U.current.values()))}},[k,K,q,S,W,E,j]),Q=E!==void 0&&Object.keys(W).length>=E;return v(`div`,{className:r(z?.dropzoneBase??i(),z?.root??f()),"data-direction":B,children:[(!V||!Q)&&v(x,{ref:H,onDrop:Z,disabled:Q,loading:G,accept:M,maxSize:A,preventDropOnDocument:!0,inputProps:{id:I},classNames:{root:z?.input?.root??r(c(),`group`),inner:z?.input?.inner??l()},children:[_(`div`,{className:z?.iconSlot??s(),children:G?_(t,{classNames:{loader:z?.loader?.loader??u(),root:z?.loader?.root??d()}}):v(g,{children:[_(x.Idle,{children:_(e,{name:`mage-dropzone-upload-01`,path:`/icons/sprite-mage.svg`,classNames:{icon:z?.dropzoneIcon?.icon??o()}})}),_(x.Accept,{children:_(e,{name:`mage-dropzone-thumbs-up`,path:`/icons/sprite-mage.svg`,classNames:{icon:z?.dropzoneIcon?.icon??o()}})}),_(x.Reject,{children:_(e,{name:`mage-dropzone-thumbs-down`,path:`/icons/sprite-mage.svg`,classNames:{icon:z?.dropzoneIcon?.icon??o()}})})]})}),v(`div`,{className:z?.textSlot??m(),children:[_(`span`,{className:z?.title??h(),children:N||`Upload files`}),_(`span`,{className:z?.subtitle??p(),children:P||`Drag images here or click to select files`}),_(`span`,{className:z?.hint??a(),children:F||`Attach as many files as you like, each file should not exceed 5mb`})]})]}),w({files:W,isUploading:G,removeFile:X})]})};export{S as DropzoneBase};
 //# sourceMappingURL=DropzoneBase.mjs.map

package/dist/components/controls/dropzone/DropzoneBase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropzoneBase.mjs","names":["MantineDropzone"],"sources":["../../../../src/components/controls/dropzone/DropzoneBase.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useRef } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  dropzoneBase,\n  dropzoneBaseHint,\n  dropzoneBaseIcon,\n  dropzoneBaseIconSlot,\n  dropzoneBaseInput,\n  dropzoneBaseInputInner,\n  dropzoneBaseLoader,\n  dropzoneBaseLoaderRoot,\n  dropzoneBaseRoot,\n  dropzoneBaseSubtitle,\n  dropzoneBaseTextSlot,\n  dropzoneBaseTitle,\n} from '@mage-ui/styled-system/recipes';\nimport { Dropzone as MantineDropzone } from '@mantine/dropzone';\nimport {\n  Icon,\n  type IconProps,\n  LoaderOval,\n  type LoaderOvalProps,\n} from '@/components/data-display';\n\nimport type {\n  Uploader,\n  UploadProgress,\n  UploadResponse,\n} from './upload-service';\nimport { useDropzoneState } from './use-dropzone-state';\n\nexport type { Uploader, UploadProgress, UploadResponse };\n\nexport type FileData = {\n  name: string;\n  size: number;\n  type: string;\n  date: string;\n  uploaded: boolean;\n  loading: boolean;\n  url: string;\n  token?: string;\n  error?: string;\n  progress?: number; // (0-100)\n};\n\nexport type DropzoneBaseProps = {\n  children: ({\n    files,\n    isUploading,\n    removeFile,\n  }: {\n    files: Record<string, FileData>;\n    isUploading: boolean;\n    removeFile: (fileName: string) => void;\n  }) => ReactNode;\n  initialFiles?: Record<string, FileData>;\n  maxFiles?: number;\n  /**\n   * Endpoint used by the built-in FormData uploader. Required when\n   * `autoSend=true` (default) AND no custom `uploader` is provided.\n   * Ignored if `uploader` is provided.\n   */\n  url?: string;\n  /**\n   * Custom upload function that replaces the built-in FormData POST.\n   * Use it for multi-step flows (e.g. presigned S3) or any non-standard\n   * transport. When set, the `url` prop is ignored.\n   */\n  uploader?: Uploader;\n  /** When false, files are added to state but not uploaded automatically. Default: true. */\n  autoSend?: boolean;\n  /** Maximum file size in bytes. Files exceeding this will be rejected. */\n  maxSize?: number;\n  /** Called when the file list changes (added or removed). Useful when autoSend=false. */\n  onChange?: (files: File[]) => void;\n  data?: Record<string, unknown>;\n  headers?: Record<string, string>;\n  /**\n   * Files the dropzone accepts. Forwarded directly to Mantine's\n   * `<Dropzone accept>`.\n   *\n   * Two formats are supported:\n   * - **Map (preferred)**: `{ [mimeType]: ['.ext', ...] }` — matches\n   *   the native `react-dropzone` shape and produces a correct\n   *   `<input accept>` with MIME + extension pairs. Required when any\n   *   key would otherwise be a bare extension string.\n   * - **Array**: `string[]` of MIME types (no `.ext` entries) — kept\n   *   for backward compatibility. Mixing `.ext` strings into the\n   *   array triggers a `Skipped \"...\" because it is not a valid MIME\n   *   type` warning from `react-dropzone` v15+.\n   */\n  accept?: string[] | Record<string, string[]>;\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  hint?: ReactNode;\n  inputId?: string;\n  onFileUploaded?: (file: FileData) => void;\n  hideWhenFull?: boolean;\n  classNames?: {\n    dropzoneBase?: string;\n    root?: string;\n    input?: {\n      root?: string;\n      inner?: string;\n    };\n    iconSlot?: string;\n    dropzoneIcon?: IconProps['classNames'];\n    loader?: LoaderOvalProps['classNames'];\n    textSlot?: string;\n    title?: string;\n    subtitle?: string;\n    hint?: string;\n  };\n  direction?: 'default' | 'reverse';\n};\n\nexport const DropzoneBase = ({\n  data,\n  headers,\n  children,\n  initialFiles = {},\n  maxFiles,\n  url,\n  uploader,\n  autoSend = true,\n  maxSize,\n  onChange,\n  accept,\n  title,\n  subtitle,\n  hint,\n  inputId,\n  onFileUploaded,\n  classNames,\n  direction = 'default',\n  hideWhenFull = false,\n}: DropzoneBaseProps) => {\n  const dropzoneRef = useRef<HTMLDivElement>(null);\n  const rawFilesRef = useRef<Map<string, File>>(new Map());\n  const {\n    files,\n    isUploading,\n    uploadMultipleFiles,\n    addFile,\n    removeFile: hookRemoveFile,\n  } = useDropzoneState(url, initialFiles, onFileUploaded, headers, uploader);\n\n  const removeFile = useCallback(\n    (fileName: string) => {\n      hookRemoveFile(fileName);\n      rawFilesRef.current.delete(fileName);\n      if (!autoSend && onChange) {\n        onChange(Array.from(rawFilesRef.current.values()));\n      }\n    },\n    [hookRemoveFile, autoSend, onChange],\n  );\n\n  const handleDrop = useCallback(\n    async (acceptedFiles: File[]) => {\n      const currentCount = Object.keys(files).length;\n      const max = maxFiles ?? Number.POSITIVE_INFINITY;\n      const remainingSlots = max - currentCount;\n      if (remainingSlots <= 0) {\n        return;\n      }\n      const filesToProcess = acceptedFiles.slice(0, remainingSlots);\n      if (autoSend) {\n        await uploadMultipleFiles(filesToProcess, data);\n      } else {\n        for (const file of filesToProcess) {\n          addFile(file);\n          rawFilesRef.current.set(file.name, file);\n        }\n        onChange?.(Array.from(rawFilesRef.current.values()));\n      }\n    },\n    [autoSend, uploadMultipleFiles, addFile, data, files, maxFiles, onChange],\n  );\n\n  const isFull =\n    maxFiles !== undefined && Object.keys(files).length >= maxFiles;\n\n  return (\n    <div\n      className={cx(\n        classNames?.dropzoneBase ?? dropzoneBase(),\n        classNames?.root ?? dropzoneBaseRoot(),\n      )}\n      data-direction={direction}\n    >\n      {(!hideWhenFull || !isFull) && (\n        <MantineDropzone\n          ref={dropzoneRef}\n          onDrop={handleDrop}\n          disabled={isFull}\n          loading={isUploading}\n          accept={accept}\n          maxSize={maxSize}\n          preventDropOnDocument\n          inputProps={{ id: inputId }}\n          classNames={{\n            root: classNames?.input?.root ?? cx(dropzoneBaseInput(), 'group'),\n            inner: classNames?.input?.inner ?? dropzoneBaseInputInner(),\n          }}\n        >\n          <div className={classNames?.iconSlot ?? dropzoneBaseIconSlot()}>\n            {isUploading ? (\n              <LoaderOval\n                classNames={{\n                  loader: classNames?.loader?.loader ?? dropzoneBaseLoader(),\n                  root: classNames?.loader?.root ?? dropzoneBaseLoaderRoot(),\n                }}\n              />\n            ) : (\n              <>\n                <MantineDropzone.Idle>\n                  <Icon\n                    name='mage-dropzone-upload-01'\n                    path='/icons/sprite-mage.svg'\n                    classNames={{\n                      icon:\n                        classNames?.dropzoneIcon?.icon ?? dropzoneBaseIcon(),\n                    }}\n                  />\n                </MantineDropzone.Idle>\n                <MantineDropzone.Accept>\n                  <Icon\n                    name='mage-dropzone-thumbs-up'\n                    path='/icons/sprite-mage.svg'\n                    classNames={{\n                      icon:\n                        classNames?.dropzoneIcon?.icon ?? dropzoneBaseIcon(),\n                    }}\n                  />\n                </MantineDropzone.Accept>\n                <MantineDropzone.Reject>\n                  <Icon\n                    name='mage-dropzone-thumbs-down'\n                    path='/icons/sprite-mage.svg'\n                    classNames={{\n                      icon:\n                        classNames?.dropzoneIcon?.icon ?? dropzoneBaseIcon(),\n                    }}\n                  />\n                </MantineDropzone.Reject>\n              </>\n            )}\n          </div>\n          <div className={classNames?.textSlot ?? dropzoneBaseTextSlot()}>\n            <span className={classNames?.title ?? dropzoneBaseTitle()}>\n              {title || 'Upload files'}\n            </span>\n            <span className={classNames?.subtitle ?? dropzoneBaseSubtitle()}>\n              {subtitle || 'Drag images here or click to select files'}\n            </span>\n            <span className={classNames?.hint ?? dropzoneBaseHint()}>\n              {hint ||\n                'Attach as many files as you like, each file should not exceed 5mb'}\n            </span>\n          </div>\n        </MantineDropzone>\n      )}\n      {children({ files, isUploading, removeFile })}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"DropzoneBase.mjs","names":["MantineDropzone"],"sources":["../../../../src/components/controls/dropzone/DropzoneBase.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useRef } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  dropzoneBase,\n  dropzoneBaseHint,\n  dropzoneBaseIcon,\n  dropzoneBaseIconSlot,\n  dropzoneBaseInput,\n  dropzoneBaseInputInner,\n  dropzoneBaseLoader,\n  dropzoneBaseLoaderRoot,\n  dropzoneBaseRoot,\n  dropzoneBaseSubtitle,\n  dropzoneBaseTextSlot,\n  dropzoneBaseTitle,\n} from '@mage-ui/styled-system/recipes';\nimport { Dropzone as MantineDropzone } from '@mantine/dropzone';\nimport {\n  Icon,\n  type IconProps,\n  LoaderOval,\n  type LoaderOvalProps,\n} from '@/components/data-display';\n\nimport type {\n  Uploader,\n  UploadProgress,\n  UploadResponse,\n} from './upload-service';\nimport { useDropzoneState } from './use-dropzone-state';\n\nexport type { Uploader, UploadProgress, UploadResponse };\n\nexport type FileData = {\n  name: string;\n  size: number;\n  type: string;\n  date: string;\n  uploaded: boolean;\n  loading: boolean;\n  url: string;\n  token?: string;\n  error?: string;\n  progress?: number; // (0-100)\n};\n\nexport type DropzoneBaseProps = {\n  children: ({\n    files,\n    isUploading,\n    removeFile,\n  }: {\n    files: Record<string, FileData>;\n    isUploading: boolean;\n    removeFile: (fileName: string) => void;\n  }) => ReactNode;\n  initialFiles?: Record<string, FileData>;\n  maxFiles?: number;\n  /**\n   * Endpoint used by the built-in FormData uploader. Required when\n   * `autoSend=true` (default) AND no custom `uploader` is provided.\n   * Ignored if `uploader` is provided.\n   */\n  url?: string;\n  /**\n   * Custom upload function that replaces the built-in FormData POST.\n   * Use it for multi-step flows (e.g. presigned S3) or any non-standard\n   * transport. When set, the `url` prop is ignored.\n   */\n  uploader?: Uploader;\n  /** When false, files are added to state but not uploaded automatically. Default: true. */\n  autoSend?: boolean;\n  /** Maximum file size in bytes. Files exceeding this will be rejected. */\n  maxSize?: number;\n  /** Called when the file list changes (added or removed). Useful when autoSend=false. */\n  onChange?: (files: File[]) => void;\n  data?: Record<string, unknown>;\n  headers?: Record<string, string>;\n  /**\n   * Files the dropzone accepts. Forwarded directly to Mantine's\n   * `<Dropzone accept>`.\n   *\n   * Two formats are supported:\n   * - **Map (preferred)**: `{ [mimeType]: ['.ext', ...] }` — matches\n   *   the native `react-dropzone` shape and produces a correct\n   *   `<input accept>` with MIME + extension pairs. Required when any\n   *   key would otherwise be a bare extension string.\n   * - **Array**: `string[]` of MIME types (no `.ext` entries) — kept\n   *   for backward compatibility. Mixing `.ext` strings into the\n   *   array triggers a `Skipped \"...\" because it is not a valid MIME\n   *   type` warning from `react-dropzone` v15+.\n   */\n  accept?: string[] | Record<string, string[]>;\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  hint?: ReactNode;\n  inputId?: string;\n  onFileUploaded?: (file: FileData) => void;\n  /** Called when a file is about to be removed. Use to trigger server-side deletion. Fire-and-forget — errors are swallowed. */\n  onRemoveFile?: (file: FileData) => void | Promise<void>;\n  hideWhenFull?: boolean;\n  classNames?: {\n    dropzoneBase?: string;\n    root?: string;\n    input?: {\n      root?: string;\n      inner?: string;\n    };\n    iconSlot?: string;\n    dropzoneIcon?: IconProps['classNames'];\n    loader?: LoaderOvalProps['classNames'];\n    textSlot?: string;\n    title?: string;\n    subtitle?: string;\n    hint?: string;\n  };\n  direction?: 'default' | 'reverse';\n};\n\nexport const DropzoneBase = ({\n  data,\n  headers,\n  children,\n  initialFiles = {},\n  maxFiles,\n  url,\n  uploader,\n  autoSend = true,\n  maxSize,\n  onChange,\n  accept,\n  title,\n  subtitle,\n  hint,\n  inputId,\n  onFileUploaded,\n  onRemoveFile,\n  classNames,\n  direction = 'default',\n  hideWhenFull = false,\n}: DropzoneBaseProps) => {\n  const dropzoneRef = useRef<HTMLDivElement>(null);\n  const rawFilesRef = useRef<Map<string, File>>(new Map());\n  const {\n    files,\n    isUploading,\n    uploadMultipleFiles,\n    addFile,\n    removeFile: hookRemoveFile,\n  } = useDropzoneState(url, initialFiles, onFileUploaded, headers, uploader);\n\n  const filesRef = useRef<Record<string, FileData>>(files);\n  filesRef.current = files;\n\n  const removeFile = useCallback(\n    (fileName: string) => {\n      if (onRemoveFile) {\n        const fileData = filesRef.current[fileName];\n        if (fileData) {\n          Promise.resolve(onRemoveFile(fileData)).catch(console.error);\n        }\n      }\n      hookRemoveFile(fileName);\n      rawFilesRef.current.delete(fileName);\n      if (!autoSend && onChange) {\n        onChange(Array.from(rawFilesRef.current.values()));\n      }\n    },\n    [hookRemoveFile, autoSend, onChange, onRemoveFile],\n  );\n\n  const handleDrop = useCallback(\n    async (acceptedFiles: File[]) => {\n      const currentCount = Object.keys(files).length;\n      const max = maxFiles ?? Number.POSITIVE_INFINITY;\n      const remainingSlots = max - currentCount;\n      if (remainingSlots <= 0) {\n        return;\n      }\n      const filesToProcess = acceptedFiles.slice(0, remainingSlots);\n      if (autoSend) {\n        await uploadMultipleFiles(filesToProcess, data);\n      } else {\n        for (const file of filesToProcess) {\n          addFile(file);\n          rawFilesRef.current.set(file.name, file);\n        }\n        onChange?.(Array.from(rawFilesRef.current.values()));\n      }\n    },\n    [autoSend, uploadMultipleFiles, addFile, data, files, maxFiles, onChange],\n  );\n\n  const isFull =\n    maxFiles !== undefined && Object.keys(files).length >= maxFiles;\n\n  return (\n    <div\n      className={cx(\n        classNames?.dropzoneBase ?? dropzoneBase(),\n        classNames?.root ?? dropzoneBaseRoot(),\n      )}\n      data-direction={direction}\n    >\n      {(!hideWhenFull || !isFull) && (\n        <MantineDropzone\n          ref={dropzoneRef}\n          onDrop={handleDrop}\n          disabled={isFull}\n          loading={isUploading}\n          accept={accept}\n          maxSize={maxSize}\n          preventDropOnDocument\n          inputProps={{ id: inputId }}\n          classNames={{\n            root: classNames?.input?.root ?? cx(dropzoneBaseInput(), 'group'),\n            inner: classNames?.input?.inner ?? dropzoneBaseInputInner(),\n          }}\n        >\n          <div className={classNames?.iconSlot ?? dropzoneBaseIconSlot()}>\n            {isUploading ? (\n              <LoaderOval\n                classNames={{\n                  loader: classNames?.loader?.loader ?? dropzoneBaseLoader(),\n                  root: classNames?.loader?.root ?? dropzoneBaseLoaderRoot(),\n                }}\n              />\n            ) : (\n              <>\n                <MantineDropzone.Idle>\n                  <Icon\n                    name='mage-dropzone-upload-01'\n                    path='/icons/sprite-mage.svg'\n                    classNames={{\n                      icon:\n                        classNames?.dropzoneIcon?.icon ?? dropzoneBaseIcon(),\n                    }}\n                  />\n                </MantineDropzone.Idle>\n                <MantineDropzone.Accept>\n                  <Icon\n                    name='mage-dropzone-thumbs-up'\n                    path='/icons/sprite-mage.svg'\n                    classNames={{\n                      icon:\n                        classNames?.dropzoneIcon?.icon ?? dropzoneBaseIcon(),\n                    }}\n                  />\n                </MantineDropzone.Accept>\n                <MantineDropzone.Reject>\n                  <Icon\n                    name='mage-dropzone-thumbs-down'\n                    path='/icons/sprite-mage.svg'\n                    classNames={{\n                      icon:\n                        classNames?.dropzoneIcon?.icon ?? dropzoneBaseIcon(),\n                    }}\n                  />\n                </MantineDropzone.Reject>\n              </>\n            )}\n          </div>\n          <div className={classNames?.textSlot ?? dropzoneBaseTextSlot()}>\n            <span className={classNames?.title ?? dropzoneBaseTitle()}>\n              {title || 'Upload files'}\n            </span>\n            <span className={classNames?.subtitle ?? dropzoneBaseSubtitle()}>\n              {subtitle || 'Drag images here or click to select files'}\n            </span>\n            <span className={classNames?.hint ?? dropzoneBaseHint()}>\n              {hint ||\n                'Attach as many files as you like, each file should not exceed 5mb'}\n            </span>\n          </div>\n        </MantineDropzone>\n      )}\n      {children({ files, isUploading, removeFile })}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mage-ui/components",
-  "version": "1.0.139",
+  "version": "1.0.140",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,8 +25,8 @@
     "rimraf": "^6.1.3",
     "tsdown": "^0.21.4",
     "typescript": "^5.9.3",
-    "@mage-ui/preset": "1.0.139",
-    "@mage-ui/styled-system": "1.0.8"
+    "@mage-ui/styled-system": "1.0.8",
+    "@mage-ui/preset": "1.0.140"
   },
   "peerDependencies": {
     "@dnd-kit/core": "^6.3.1",