@flipdish/portal-library 8.5.7 → 8.6.0

package/dist/components/organisms/AssetManager/hooks/useAssetSelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAssetSelection.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/useAssetSelection.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport type { Asset } from '../types/assets.type';\n\ninterface UseAssetSelectionOptions {\n  maxSelect: number;\n}\n\ninterface UseAssetSelectionReturn {\n  selectedAssetsMap: Map<string, Asset>;\n  handleAssetClick: (asset: Asset) => void;\n  clearSelection: () => void;\n  addAssetsToSelection: (assets: Asset[]) => void;\n}\n\n/**\n * Custom hook to manage asset selection state and logic\n * @param options - Configuration options including maxSelect limit\n * @returns Selection state and handlers\n */\nexport const useAssetSelection = ({ maxSelect }: UseAssetSelectionOptions): UseAssetSelectionReturn => {\n  const [selectedAssetsMap, setSelectedAssetsMap] = useState<Map<string, Asset>>(new Map());\n\n  const handleAssetClick = useCallback(\n    (asset: Asset): void => {\n      setSelectedAssetsMap((prevMap) => {\n        const isSelected = prevMap.has(asset.id);\n        const newMap = new Map(prevMap);\n\n        if (isSelected) {\n          // Always allow deselecting an already selected asset\n          newMap.delete(asset.id);\n        } else if (maxSelect === 1) {\n          // Single select mode: replace selection\n          newMap.clear();\n          newMap.set(asset.id, asset);\n        } else if (newMap.size < maxSelect) {\n          // Multi-select mode: add if under limit\n          newMap.set(asset.id, asset);\n        }\n        // If at max limit and trying to select a new asset, do nothing\n        return newMap;\n      });\n    },\n    [maxSelect],\n  );\n\n  const clearSelection = useCallback((): void => {\n    setSelectedAssetsMap(new Map());\n  }, []);\n\n  const addAssetsToSelection = useCallback(\n    (assets: Asset[]): void => {\n      setSelectedAssetsMap((prevMap) => {\n        const newMap = new Map(prevMap);\n        // Add uploaded assets to selection, respecting maxSelect limit\n        for (const asset of assets) {\n          if (newMap.size < maxSelect) {\n            newMap.set(asset.id, asset);\n          }\n        }\n        return newMap;\n      });\n    },\n    [maxSelect],\n  );\n\n  return {\n    selectedAssetsMap,\n    handleAssetClick,\n    clearSelection,\n    addAssetsToSelection,\n  };\n};\n"],"names":["useAssetSelection","maxSelect","selectedAssetsMap","setSelectedAssetsMap","useState","Map","handleAssetClick","useCallback","asset","prevMap","isSelected","has","id","newMap","delete","clear","set","size","clearSelection","addAssetsToSelection","assets"],"mappings":"wDAoBaA,EAAoB,EAAGC,gBAClC,MAAOC,EAAmBC,GAAwBC,EAA6B,IAAIC,KA8CnF,MAAO,CACLH,oBACAI,iBA9CuBC,GACtBC,IACCL,GAAsBM,IACpB,MAAMC,EAAaD,EAAQE,IAAIH,EAAMI,IAC/BC,EAAS,IAAIR,IAAII,GAcvB,OAZIC,EAEFG,EAAOC,OAAON,EAAMI,IACG,IAAdX,GAETY,EAAOE,QACPF,EAAOG,IAAIR,EAAMI,GAAIJ,IACZK,EAAOI,KAAOhB,GAEvBY,EAAOG,IAAIR,EAAMI,GAAIJ,GAGhBK,OAGX,CAACZ,IA0BDiB,eAvBqBX,GAAY,KACjCJ,EAAqB,IAAIE,OACxB,IAsBDc,qBApB2BZ,GAC1Ba,IACCjB,GAAsBM,IACpB,MAAMI,EAAS,IAAIR,IAAII,GAEvB,IAAK,MAAMD,KAASY,EACdP,EAAOI,KAAOhB,GAChBY,EAAOG,IAAIR,EAAMI,GAAIJ,GAGzB,OAAOK,OAGX,CAACZ"}
+{"version":3,"file":"useAssetSelection.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/useAssetSelection.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport type { Asset } from '../types/assets.type';\n\ninterface UseAssetSelectionOptions {\n  maxSelect: number;\n}\n\ninterface UseAssetSelectionReturn {\n  selectedAssetsMap: Map<string, Asset>;\n  handleAssetClick: (asset: Asset) => void;\n  clearSelection: () => void;\n  addAssetsToSelection: (assets: Asset[]) => void;\n}\n\n/**\n * Custom hook to manage asset selection state and logic\n * @param options - Configuration options including maxSelect limit\n * @returns Selection state and handlers\n */\nexport const useAssetSelection = ({ maxSelect }: UseAssetSelectionOptions): UseAssetSelectionReturn => {\n  const [selectedAssetsMap, setSelectedAssetsMap] = useState<Map<string, Asset>>(new Map());\n\n  const handleAssetClick = useCallback(\n    (asset: Asset): void => {\n      setSelectedAssetsMap((prevMap) => {\n        const isSelected = prevMap.has(asset.id);\n        const newMap = new Map(prevMap);\n\n        if (isSelected) {\n          // Always allow deselecting an already selected asset\n          newMap.delete(asset.id);\n        } else if (maxSelect === 1) {\n          // Single select mode: replace selection\n          newMap.clear();\n          newMap.set(asset.id, asset);\n        } else if (newMap.size < maxSelect) {\n          // Multi-select mode: add if under limit\n          newMap.set(asset.id, asset);\n        }\n        // If at max limit and trying to select a new asset, do nothing\n        return newMap;\n      });\n    },\n    [maxSelect],\n  );\n\n  const clearSelection = useCallback((): void => {\n    setSelectedAssetsMap(new Map());\n  }, []);\n\n  const addAssetsToSelection = useCallback(\n    (assets: Asset[]): void => {\n      setSelectedAssetsMap((prevMap) => {\n        const newMap = new Map(prevMap);\n        // Add uploaded assets to selection, respecting maxSelect limit\n        for (const asset of assets) {\n          if (newMap.size < maxSelect) {\n            newMap.set(asset.id, asset);\n          }\n        }\n        return newMap;\n      });\n    },\n    [maxSelect],\n  );\n\n  return {\n    selectedAssetsMap,\n    handleAssetClick,\n    clearSelection,\n    addAssetsToSelection,\n  };\n};\n"],"names":["useAssetSelection","maxSelect","selectedAssetsMap","setSelectedAssetsMap","useState","Map","handleAssetClick","useCallback","asset","prevMap","isSelected","has","id","newMap","delete","clear","set","size","clearSelection","addAssetsToSelection","assets"],"mappings":"wDAoBaA,EAAoB,EAAGC,gBAClC,MAAOC,EAAmBC,GAAwBC,EAA6B,IAAIC,KA8CnF,MAAO,CACLH,oBACAI,iBA9CuBC,EACtBC,IACCL,EAAsBM,IACpB,MAAMC,EAAaD,EAAQE,IAAIH,EAAMI,IAC/BC,EAAS,IAAIR,IAAII,GAcvB,OAZIC,EAEFG,EAAOC,OAAON,EAAMI,IACG,IAAdX,GAETY,EAAOE,QACPF,EAAOG,IAAIR,EAAMI,GAAIJ,IACZK,EAAOI,KAAOhB,GAEvBY,EAAOG,IAAIR,EAAMI,GAAIJ,GAGhBK,KAGX,CAACZ,IA0BDiB,eAvBqBX,EAAY,KACjCJ,EAAqB,IAAIE,MACxB,IAsBDc,qBApB2BZ,EAC1Ba,IACCjB,EAAsBM,IACpB,MAAMI,EAAS,IAAIR,IAAII,GAEvB,IAAK,MAAMD,KAASY,EACdP,EAAOI,KAAOhB,GAChBY,EAAOG,IAAIR,EAAMI,GAAIJ,GAGzB,OAAOK,KAGX,CAACZ"}

package/dist/components/organisms/AssetManager/hooks/useAssetUploadManager.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react"),l=require("./useUploadAsset.cjs.js");exports.useAssetUploadManager=({orgId:a,brandId:s,onUploadSuccess:r,getErrorMessage:o})=>{const[d,n]=e.useState([]),[u,t]=e.useState(null),c=l.useUploadAsset(),i=e.useCallback((e=>{if(0===e.length)return;t(null);const l=e.map((e=>({file:e})));n((e=>[...e,...l]))}),[]),p=e.useCallback((e=>{n((l=>l.filter((l=>l.file!==e))))}),[]),U=e.useCallback((()=>{t(null),c.mutate({orgId:a,brandId:s,files:d.map((e=>e.file))},{onSuccess:e=>{const l=e.data||[];r&&r(l),n([])},onError:e=>{console.error("Upload failed:",e);const l=o(e);t(l)}})}),[a,s,d,c,r,o]),g=e.useCallback((()=>{n([])}),[]),b=e.useCallback((()=>{t(null)}),[]);return{uploadedFiles:d,uploadError:u,isUploading:c.isPending,handleUpload:i,handleRemove:p,handleSave:U,clearUploadedFiles:g,clearSaveUploadError:b}};
+"use strict";var e=require("react"),l=require("./useUploadAsset.cjs.js");exports.useAssetUploadManager=({orgId:a,brandId:s,onUploadSuccess:r,getErrorMessage:o})=>{const[d,n]=e.useState([]),[u,t]=e.useState(null),c=l.useUploadAsset(),i=e.useCallback(e=>{if(0===e.length)return;t(null);const l=e.map(e=>({file:e}));n(e=>[...e,...l])},[]),p=e.useCallback(e=>{n(l=>l.filter(l=>l.file!==e))},[]),U=e.useCallback(()=>{t(null),c.mutate({orgId:a,brandId:s,files:d.map(e=>e.file)},{onSuccess:e=>{const l=e.data||[];r&&r(l),n([])},onError:e=>{console.error("Upload failed:",e);const l=o(e);t(l)}})},[a,s,d,c,r,o]),g=e.useCallback(()=>{n([])},[]),b=e.useCallback(()=>{t(null)},[]);return{uploadedFiles:d,uploadError:u,isUploading:c.isPending,handleUpload:i,handleRemove:p,handleSave:U,clearUploadedFiles:g,clearSaveUploadError:b}};
 //# sourceMappingURL=useAssetUploadManager.cjs.js.map

package/dist/components/organisms/AssetManager/hooks/useAssetUploadManager.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAssetUploadManager.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/useAssetUploadManager.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport type { FileUploadState } from '../../FileUpload';\nimport type { Asset } from '../types/assets.type';\nimport { useUploadAsset } from './useUploadAsset';\n\ninterface UseAssetUploadManagerOptions {\n  orgId: string;\n  brandId?: string;\n  onUploadSuccess?: (assets: Asset[]) => void;\n  getErrorMessage: (error: Error) => string;\n}\n\ninterface UseAssetUploadManagerReturn {\n  uploadedFiles: FileUploadState[];\n  uploadError: string | null;\n  isUploading: boolean;\n  handleUpload: (files: File[]) => void;\n  handleRemove: (file: File) => void;\n  handleSave: () => void;\n  clearUploadedFiles: () => void;\n  clearSaveUploadError: () => void;\n}\n\n/**\n * Custom hook to manage asset upload state and logic\n * Handles file management, upload execution, and error handling\n *\n * @param options - Configuration options for upload management\n * @returns Upload state and handlers\n */\nexport const useAssetUploadManager = ({\n  orgId,\n  brandId,\n  onUploadSuccess,\n  getErrorMessage,\n}: UseAssetUploadManagerOptions): UseAssetUploadManagerReturn => {\n  const [uploadedFiles, setUploadedFiles] = useState<FileUploadState[]>([]);\n  const [uploadError, setUploadError] = useState<string | null>(null);\n  const uploadMutation = useUploadAsset();\n\n  const handleUpload = useCallback((files: File[]): void => {\n    if (files.length === 0) {\n      return;\n    }\n    // Clear any upload errors when files are added\n    setUploadError(null);\n    // Add files with uploading state\n    const newFiles: FileUploadState[] = files.map((file) => ({\n      file,\n    }));\n    setUploadedFiles((prev) => [...prev, ...newFiles]);\n  }, []);\n\n  const handleRemove = useCallback((fileToRemove: File): void => {\n    setUploadedFiles((prev) => prev.filter((fileState) => fileState.file !== fileToRemove));\n  }, []);\n\n  const handleSave = useCallback((): void => {\n    // Clear any previous errors\n    setUploadError(null);\n\n    uploadMutation.mutate(\n      {\n        orgId,\n        brandId,\n        files: uploadedFiles.map((file) => file.file),\n      },\n      {\n        onSuccess: (response) => {\n          const uploadedAssets = response.data || [];\n          // Notify parent component of successful upload\n          if (onUploadSuccess) {\n            onUploadSuccess(uploadedAssets);\n          }\n          // Clear uploaded files after successful upload\n          setUploadedFiles([]);\n        },\n        onError: (error) => {\n          console.error('Upload failed:', error);\n          // Display the error message\n          const errorMessage = getErrorMessage(error);\n          setUploadError(errorMessage);\n        },\n      },\n    );\n  }, [orgId, brandId, uploadedFiles, uploadMutation, onUploadSuccess, getErrorMessage]);\n\n  const clearUploadedFiles = useCallback((): void => {\n    setUploadedFiles([]);\n  }, []);\n\n  const clearSaveUploadError = useCallback((): void => {\n    setUploadError(null);\n  }, []);\n\n  return {\n    uploadedFiles,\n    uploadError,\n    isUploading: uploadMutation.isPending,\n    handleUpload,\n    handleRemove,\n    handleSave,\n    clearUploadedFiles,\n    clearSaveUploadError,\n  };\n};\n"],"names":["orgId","brandId","onUploadSuccess","getErrorMessage","uploadedFiles","setUploadedFiles","useState","uploadError","setUploadError","uploadMutation","useUploadAsset","handleUpload","useCallback","files","length","newFiles","map","file","prev","handleRemove","fileToRemove","filter","fileState","handleSave","mutate","onSuccess","response","uploadedAssets","data","onError","error","console","errorMessage","clearUploadedFiles","clearSaveUploadError","isUploading","isPending"],"mappings":"uGA+BqC,EACnCA,QACAC,UACAC,kBACAC,sBAEA,MAAOC,EAAeC,GAAoBC,EAAAA,SAA4B,KAC/DC,EAAaC,GAAkBF,EAAAA,SAAwB,MACxDG,EAAiBC,EAAAA,iBAEjBC,EAAeC,eAAaC,IAChC,GAAqB,IAAjBA,EAAMC,OACR,OAGFN,EAAe,MAEf,MAAMO,EAA8BF,EAAMG,KAAKC,IAAI,CACjDA,WAEFZ,GAAkBa,GAAS,IAAIA,KAASH,OACvC,IAEGI,EAAeP,eAAaQ,IAChCf,GAAkBa,GAASA,EAAKG,QAAQC,GAAcA,EAAUL,OAASG,QACxE,IAEGG,EAAaX,EAAAA,aAAY,KAE7BJ,EAAe,MAEfC,EAAee,OACb,CACExB,QACAC,UACAY,MAAOT,EAAcY,KAAKC,GAASA,EAAKA,QAE1C,CACEQ,UAAYC,IACV,MAAMC,EAAiBD,EAASE,MAAQ,GAEpC1B,GACFA,EAAgByB,GAGlBtB,EAAiB,KAEnBwB,QAAUC,IACRC,QAAQD,MAAM,iBAAkBA,GAEhC,MAAME,EAAe7B,EAAgB2B,GACrCtB,EAAewB,QAIpB,CAAChC,EAAOC,EAASG,EAAeK,EAAgBP,EAAiBC,IAE9D8B,EAAqBrB,EAAAA,aAAY,KACrCP,EAAiB,MAChB,IAEG6B,EAAuBtB,EAAAA,aAAY,KACvCJ,EAAe,QACd,IAEH,MAAO,CACLJ,gBACAG,cACA4B,YAAa1B,EAAe2B,UAC5BzB,eACAQ,eACAI,aACAU,qBACAC"}
+{"version":3,"file":"useAssetUploadManager.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/useAssetUploadManager.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport type { FileUploadState } from '../../FileUpload';\nimport type { Asset } from '../types/assets.type';\nimport { useUploadAsset } from './useUploadAsset';\n\ninterface UseAssetUploadManagerOptions {\n  orgId: string;\n  brandId?: string;\n  onUploadSuccess?: (assets: Asset[]) => void;\n  getErrorMessage: (error: Error) => string;\n}\n\ninterface UseAssetUploadManagerReturn {\n  uploadedFiles: FileUploadState[];\n  uploadError: string | null;\n  isUploading: boolean;\n  handleUpload: (files: File[]) => void;\n  handleRemove: (file: File) => void;\n  handleSave: () => void;\n  clearUploadedFiles: () => void;\n  clearSaveUploadError: () => void;\n}\n\n/**\n * Custom hook to manage asset upload state and logic\n * Handles file management, upload execution, and error handling\n *\n * @param options - Configuration options for upload management\n * @returns Upload state and handlers\n */\nexport const useAssetUploadManager = ({\n  orgId,\n  brandId,\n  onUploadSuccess,\n  getErrorMessage,\n}: UseAssetUploadManagerOptions): UseAssetUploadManagerReturn => {\n  const [uploadedFiles, setUploadedFiles] = useState<FileUploadState[]>([]);\n  const [uploadError, setUploadError] = useState<string | null>(null);\n  const uploadMutation = useUploadAsset();\n\n  const handleUpload = useCallback((files: File[]): void => {\n    if (files.length === 0) {\n      return;\n    }\n    // Clear any upload errors when files are added\n    setUploadError(null);\n    // Add files with uploading state\n    const newFiles: FileUploadState[] = files.map((file) => ({\n      file,\n    }));\n    setUploadedFiles((prev) => [...prev, ...newFiles]);\n  }, []);\n\n  const handleRemove = useCallback((fileToRemove: File): void => {\n    setUploadedFiles((prev) => prev.filter((fileState) => fileState.file !== fileToRemove));\n  }, []);\n\n  const handleSave = useCallback((): void => {\n    // Clear any previous errors\n    setUploadError(null);\n\n    uploadMutation.mutate(\n      {\n        orgId,\n        brandId,\n        files: uploadedFiles.map((file) => file.file),\n      },\n      {\n        onSuccess: (response) => {\n          const uploadedAssets = response.data || [];\n          // Notify parent component of successful upload\n          if (onUploadSuccess) {\n            onUploadSuccess(uploadedAssets);\n          }\n          // Clear uploaded files after successful upload\n          setUploadedFiles([]);\n        },\n        onError: (error) => {\n          console.error('Upload failed:', error);\n          // Display the error message\n          const errorMessage = getErrorMessage(error);\n          setUploadError(errorMessage);\n        },\n      },\n    );\n  }, [orgId, brandId, uploadedFiles, uploadMutation, onUploadSuccess, getErrorMessage]);\n\n  const clearUploadedFiles = useCallback((): void => {\n    setUploadedFiles([]);\n  }, []);\n\n  const clearSaveUploadError = useCallback((): void => {\n    setUploadError(null);\n  }, []);\n\n  return {\n    uploadedFiles,\n    uploadError,\n    isUploading: uploadMutation.isPending,\n    handleUpload,\n    handleRemove,\n    handleSave,\n    clearUploadedFiles,\n    clearSaveUploadError,\n  };\n};\n"],"names":["orgId","brandId","onUploadSuccess","getErrorMessage","uploadedFiles","setUploadedFiles","useState","uploadError","setUploadError","uploadMutation","useUploadAsset","handleUpload","useCallback","files","length","newFiles","map","file","prev","handleRemove","fileToRemove","filter","fileState","handleSave","mutate","onSuccess","response","uploadedAssets","data","onError","error","console","errorMessage","clearUploadedFiles","clearSaveUploadError","isUploading","isPending"],"mappings":"uGA+BqC,EACnCA,QACAC,UACAC,kBACAC,sBAEA,MAAOC,EAAeC,GAAoBC,EAAAA,SAA4B,KAC/DC,EAAaC,GAAkBF,EAAAA,SAAwB,MACxDG,EAAiBC,EAAAA,iBAEjBC,EAAeC,cAAaC,IAChC,GAAqB,IAAjBA,EAAMC,OACR,OAGFN,EAAe,MAEf,MAAMO,EAA8BF,EAAMG,IAAKC,IAAI,CACjDA,UAEFZ,EAAkBa,GAAS,IAAIA,KAASH,KACvC,IAEGI,EAAeP,cAAaQ,IAChCf,EAAkBa,GAASA,EAAKG,OAAQC,GAAcA,EAAUL,OAASG,KACxE,IAEGG,EAAaX,EAAAA,YAAY,KAE7BJ,EAAe,MAEfC,EAAee,OACb,CACExB,QACAC,UACAY,MAAOT,EAAcY,IAAKC,GAASA,EAAKA,OAE1C,CACEQ,UAAYC,IACV,MAAMC,EAAiBD,EAASE,MAAQ,GAEpC1B,GACFA,EAAgByB,GAGlBtB,EAAiB,KAEnBwB,QAAUC,IACRC,QAAQD,MAAM,iBAAkBA,GAEhC,MAAME,EAAe7B,EAAgB2B,GACrCtB,EAAewB,OAIpB,CAAChC,EAAOC,EAASG,EAAeK,EAAgBP,EAAiBC,IAE9D8B,EAAqBrB,EAAAA,YAAY,KACrCP,EAAiB,KAChB,IAEG6B,EAAuBtB,EAAAA,YAAY,KACvCJ,EAAe,OACd,IAEH,MAAO,CACLJ,gBACAG,cACA4B,YAAa1B,EAAe2B,UAC5BzB,eACAQ,eACAI,aACAU,qBACAC"}

package/dist/components/organisms/AssetManager/hooks/useAssetUploadManager.js

@@ -1,2 +1,2 @@
-import{useState as e,useCallback as l}from"react";import{useUploadAsset as o}from"./useUploadAsset.js";const r=({orgId:r,brandId:a,onUploadSuccess:n,getErrorMessage:d})=>{const[s,t]=e([]),[i,p]=e(null),c=o(),u=l((e=>{if(0===e.length)return;p(null);const l=e.map((e=>({file:e})));t((e=>[...e,...l]))}),[]),f=l((e=>{t((l=>l.filter((l=>l.file!==e))))}),[]),m=l((()=>{p(null),c.mutate({orgId:r,brandId:a,files:s.map((e=>e.file))},{onSuccess:e=>{const l=e.data||[];n&&n(l),t([])},onError:e=>{console.error("Upload failed:",e);const l=d(e);p(l)}})}),[r,a,s,c,n,d]),g=l((()=>{t([])}),[]),U=l((()=>{p(null)}),[]);return{uploadedFiles:s,uploadError:i,isUploading:c.isPending,handleUpload:u,handleRemove:f,handleSave:m,clearUploadedFiles:g,clearSaveUploadError:U}};export{r as useAssetUploadManager};
+import{useState as e,useCallback as l}from"react";import{useUploadAsset as o}from"./useUploadAsset.js";const r=({orgId:r,brandId:a,onUploadSuccess:n,getErrorMessage:d})=>{const[s,t]=e([]),[i,p]=e(null),c=o(),u=l(e=>{if(0===e.length)return;p(null);const l=e.map(e=>({file:e}));t(e=>[...e,...l])},[]),f=l(e=>{t(l=>l.filter(l=>l.file!==e))},[]),m=l(()=>{p(null),c.mutate({orgId:r,brandId:a,files:s.map(e=>e.file)},{onSuccess:e=>{const l=e.data||[];n&&n(l),t([])},onError:e=>{console.error("Upload failed:",e);const l=d(e);p(l)}})},[r,a,s,c,n,d]),g=l(()=>{t([])},[]),U=l(()=>{p(null)},[]);return{uploadedFiles:s,uploadError:i,isUploading:c.isPending,handleUpload:u,handleRemove:f,handleSave:m,clearUploadedFiles:g,clearSaveUploadError:U}};export{r as useAssetUploadManager};
 //# sourceMappingURL=useAssetUploadManager.js.map

package/dist/components/organisms/AssetManager/hooks/useAssetUploadManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAssetUploadManager.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/useAssetUploadManager.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport type { FileUploadState } from '../../FileUpload';\nimport type { Asset } from '../types/assets.type';\nimport { useUploadAsset } from './useUploadAsset';\n\ninterface UseAssetUploadManagerOptions {\n  orgId: string;\n  brandId?: string;\n  onUploadSuccess?: (assets: Asset[]) => void;\n  getErrorMessage: (error: Error) => string;\n}\n\ninterface UseAssetUploadManagerReturn {\n  uploadedFiles: FileUploadState[];\n  uploadError: string | null;\n  isUploading: boolean;\n  handleUpload: (files: File[]) => void;\n  handleRemove: (file: File) => void;\n  handleSave: () => void;\n  clearUploadedFiles: () => void;\n  clearSaveUploadError: () => void;\n}\n\n/**\n * Custom hook to manage asset upload state and logic\n * Handles file management, upload execution, and error handling\n *\n * @param options - Configuration options for upload management\n * @returns Upload state and handlers\n */\nexport const useAssetUploadManager = ({\n  orgId,\n  brandId,\n  onUploadSuccess,\n  getErrorMessage,\n}: UseAssetUploadManagerOptions): UseAssetUploadManagerReturn => {\n  const [uploadedFiles, setUploadedFiles] = useState<FileUploadState[]>([]);\n  const [uploadError, setUploadError] = useState<string | null>(null);\n  const uploadMutation = useUploadAsset();\n\n  const handleUpload = useCallback((files: File[]): void => {\n    if (files.length === 0) {\n      return;\n    }\n    // Clear any upload errors when files are added\n    setUploadError(null);\n    // Add files with uploading state\n    const newFiles: FileUploadState[] = files.map((file) => ({\n      file,\n    }));\n    setUploadedFiles((prev) => [...prev, ...newFiles]);\n  }, []);\n\n  const handleRemove = useCallback((fileToRemove: File): void => {\n    setUploadedFiles((prev) => prev.filter((fileState) => fileState.file !== fileToRemove));\n  }, []);\n\n  const handleSave = useCallback((): void => {\n    // Clear any previous errors\n    setUploadError(null);\n\n    uploadMutation.mutate(\n      {\n        orgId,\n        brandId,\n        files: uploadedFiles.map((file) => file.file),\n      },\n      {\n        onSuccess: (response) => {\n          const uploadedAssets = response.data || [];\n          // Notify parent component of successful upload\n          if (onUploadSuccess) {\n            onUploadSuccess(uploadedAssets);\n          }\n          // Clear uploaded files after successful upload\n          setUploadedFiles([]);\n        },\n        onError: (error) => {\n          console.error('Upload failed:', error);\n          // Display the error message\n          const errorMessage = getErrorMessage(error);\n          setUploadError(errorMessage);\n        },\n      },\n    );\n  }, [orgId, brandId, uploadedFiles, uploadMutation, onUploadSuccess, getErrorMessage]);\n\n  const clearUploadedFiles = useCallback((): void => {\n    setUploadedFiles([]);\n  }, []);\n\n  const clearSaveUploadError = useCallback((): void => {\n    setUploadError(null);\n  }, []);\n\n  return {\n    uploadedFiles,\n    uploadError,\n    isUploading: uploadMutation.isPending,\n    handleUpload,\n    handleRemove,\n    handleSave,\n    clearUploadedFiles,\n    clearSaveUploadError,\n  };\n};\n"],"names":["useAssetUploadManager","orgId","brandId","onUploadSuccess","getErrorMessage","uploadedFiles","setUploadedFiles","useState","uploadError","setUploadError","uploadMutation","useUploadAsset","handleUpload","useCallback","files","length","newFiles","map","file","prev","handleRemove","fileToRemove","filter","fileState","handleSave","mutate","onSuccess","response","uploadedAssets","data","onError","error","console","errorMessage","clearUploadedFiles","clearSaveUploadError","isUploading","isPending"],"mappings":"uGA+BO,MAAMA,EAAwB,EACnCC,QACAC,UACAC,kBACAC,sBAEA,MAAOC,EAAeC,GAAoBC,EAA4B,KAC/DC,EAAaC,GAAkBF,EAAwB,MACxDG,EAAiBC,IAEjBC,EAAeC,GAAaC,IAChC,GAAqB,IAAjBA,EAAMC,OACR,OAGFN,EAAe,MAEf,MAAMO,EAA8BF,EAAMG,KAAKC,IAAI,CACjDA,WAEFZ,GAAkBa,GAAS,IAAIA,KAASH,OACvC,IAEGI,EAAeP,GAAaQ,IAChCf,GAAkBa,GAASA,EAAKG,QAAQC,GAAcA,EAAUL,OAASG,QACxE,IAEGG,EAAaX,GAAY,KAE7BJ,EAAe,MAEfC,EAAee,OACb,CACExB,QACAC,UACAY,MAAOT,EAAcY,KAAKC,GAASA,EAAKA,QAE1C,CACEQ,UAAYC,IACV,MAAMC,EAAiBD,EAASE,MAAQ,GAEpC1B,GACFA,EAAgByB,GAGlBtB,EAAiB,KAEnBwB,QAAUC,IACRC,QAAQD,MAAM,iBAAkBA,GAEhC,MAAME,EAAe7B,EAAgB2B,GACrCtB,EAAewB,QAIpB,CAAChC,EAAOC,EAASG,EAAeK,EAAgBP,EAAiBC,IAE9D8B,EAAqBrB,GAAY,KACrCP,EAAiB,MAChB,IAEG6B,EAAuBtB,GAAY,KACvCJ,EAAe,QACd,IAEH,MAAO,CACLJ,gBACAG,cACA4B,YAAa1B,EAAe2B,UAC5BzB,eACAQ,eACAI,aACAU,qBACAC"}
+{"version":3,"file":"useAssetUploadManager.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/useAssetUploadManager.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport type { FileUploadState } from '../../FileUpload';\nimport type { Asset } from '../types/assets.type';\nimport { useUploadAsset } from './useUploadAsset';\n\ninterface UseAssetUploadManagerOptions {\n  orgId: string;\n  brandId?: string;\n  onUploadSuccess?: (assets: Asset[]) => void;\n  getErrorMessage: (error: Error) => string;\n}\n\ninterface UseAssetUploadManagerReturn {\n  uploadedFiles: FileUploadState[];\n  uploadError: string | null;\n  isUploading: boolean;\n  handleUpload: (files: File[]) => void;\n  handleRemove: (file: File) => void;\n  handleSave: () => void;\n  clearUploadedFiles: () => void;\n  clearSaveUploadError: () => void;\n}\n\n/**\n * Custom hook to manage asset upload state and logic\n * Handles file management, upload execution, and error handling\n *\n * @param options - Configuration options for upload management\n * @returns Upload state and handlers\n */\nexport const useAssetUploadManager = ({\n  orgId,\n  brandId,\n  onUploadSuccess,\n  getErrorMessage,\n}: UseAssetUploadManagerOptions): UseAssetUploadManagerReturn => {\n  const [uploadedFiles, setUploadedFiles] = useState<FileUploadState[]>([]);\n  const [uploadError, setUploadError] = useState<string | null>(null);\n  const uploadMutation = useUploadAsset();\n\n  const handleUpload = useCallback((files: File[]): void => {\n    if (files.length === 0) {\n      return;\n    }\n    // Clear any upload errors when files are added\n    setUploadError(null);\n    // Add files with uploading state\n    const newFiles: FileUploadState[] = files.map((file) => ({\n      file,\n    }));\n    setUploadedFiles((prev) => [...prev, ...newFiles]);\n  }, []);\n\n  const handleRemove = useCallback((fileToRemove: File): void => {\n    setUploadedFiles((prev) => prev.filter((fileState) => fileState.file !== fileToRemove));\n  }, []);\n\n  const handleSave = useCallback((): void => {\n    // Clear any previous errors\n    setUploadError(null);\n\n    uploadMutation.mutate(\n      {\n        orgId,\n        brandId,\n        files: uploadedFiles.map((file) => file.file),\n      },\n      {\n        onSuccess: (response) => {\n          const uploadedAssets = response.data || [];\n          // Notify parent component of successful upload\n          if (onUploadSuccess) {\n            onUploadSuccess(uploadedAssets);\n          }\n          // Clear uploaded files after successful upload\n          setUploadedFiles([]);\n        },\n        onError: (error) => {\n          console.error('Upload failed:', error);\n          // Display the error message\n          const errorMessage = getErrorMessage(error);\n          setUploadError(errorMessage);\n        },\n      },\n    );\n  }, [orgId, brandId, uploadedFiles, uploadMutation, onUploadSuccess, getErrorMessage]);\n\n  const clearUploadedFiles = useCallback((): void => {\n    setUploadedFiles([]);\n  }, []);\n\n  const clearSaveUploadError = useCallback((): void => {\n    setUploadError(null);\n  }, []);\n\n  return {\n    uploadedFiles,\n    uploadError,\n    isUploading: uploadMutation.isPending,\n    handleUpload,\n    handleRemove,\n    handleSave,\n    clearUploadedFiles,\n    clearSaveUploadError,\n  };\n};\n"],"names":["useAssetUploadManager","orgId","brandId","onUploadSuccess","getErrorMessage","uploadedFiles","setUploadedFiles","useState","uploadError","setUploadError","uploadMutation","useUploadAsset","handleUpload","useCallback","files","length","newFiles","map","file","prev","handleRemove","fileToRemove","filter","fileState","handleSave","mutate","onSuccess","response","uploadedAssets","data","onError","error","console","errorMessage","clearUploadedFiles","clearSaveUploadError","isUploading","isPending"],"mappings":"uGA+BO,MAAMA,EAAwB,EACnCC,QACAC,UACAC,kBACAC,sBAEA,MAAOC,EAAeC,GAAoBC,EAA4B,KAC/DC,EAAaC,GAAkBF,EAAwB,MACxDG,EAAiBC,IAEjBC,EAAeC,EAAaC,IAChC,GAAqB,IAAjBA,EAAMC,OACR,OAGFN,EAAe,MAEf,MAAMO,EAA8BF,EAAMG,IAAKC,IAAI,CACjDA,UAEFZ,EAAkBa,GAAS,IAAIA,KAASH,KACvC,IAEGI,EAAeP,EAAaQ,IAChCf,EAAkBa,GAASA,EAAKG,OAAQC,GAAcA,EAAUL,OAASG,KACxE,IAEGG,EAAaX,EAAY,KAE7BJ,EAAe,MAEfC,EAAee,OACb,CACExB,QACAC,UACAY,MAAOT,EAAcY,IAAKC,GAASA,EAAKA,OAE1C,CACEQ,UAAYC,IACV,MAAMC,EAAiBD,EAASE,MAAQ,GAEpC1B,GACFA,EAAgByB,GAGlBtB,EAAiB,KAEnBwB,QAAUC,IACRC,QAAQD,MAAM,iBAAkBA,GAEhC,MAAME,EAAe7B,EAAgB2B,GACrCtB,EAAewB,OAIpB,CAAChC,EAAOC,EAASG,EAAeK,EAAgBP,EAAiBC,IAE9D8B,EAAqBrB,EAAY,KACrCP,EAAiB,KAChB,IAEG6B,EAAuBtB,EAAY,KACvCJ,EAAe,OACd,IAEH,MAAO,CACLJ,gBACAG,cACA4B,YAAa1B,EAAe2B,UAC5BzB,eACAQ,eACAI,aACAU,qBACAC"}

package/dist/components/organisms/AssetManager/hooks/useUploadAsset.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var s=require("@tanstack/react-query"),e=require("../assets.queryKeys.cjs.js"),t=require("../services/asset.service.cjs.js");exports.useUploadAsset=()=>{const a=s.useQueryClient();return s.useMutation({mutationKey:e.assetsKeys.upload,mutationFn:t.uploadAsset,onSuccess:(s,t)=>{const r=e.assetsKeys.list({orgId:t.orgId,brandId:t.brandId}),u=s.data||[];a.setQueryData(r,(s=>({data:[...u,...s?.data||[]]})))}})};
+"use strict";var s=require("@tanstack/react-query"),e=require("../assets.queryKeys.cjs.js"),t=require("../services/asset.service.cjs.js");exports.useUploadAsset=()=>{const a=s.useQueryClient();return s.useMutation({mutationKey:e.assetsKeys.upload,mutationFn:t.uploadAsset,onSuccess:(s,t)=>{const r=e.assetsKeys.list({orgId:t.orgId,brandId:t.brandId}),u=s.data||[];a.setQueryData(r,s=>({data:[...u,...s?.data||[]]}))}})};
 //# sourceMappingURL=useUploadAsset.cjs.js.map

package/dist/components/organisms/AssetManager/hooks/useUploadAsset.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUploadAsset.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/useUploadAsset.ts"],"sourcesContent":["import { useMutation, type UseMutationResult, useQueryClient } from '@tanstack/react-query';\n\nimport { assetsKeys } from '../assets.queryKeys';\nimport { uploadAsset, type UploadAssetParams } from '../services/asset.service';\nimport { type ListAssetsResponse, type UploadAssetResponse } from '../types/assets.type';\n\n/**\n * Hook to upload assets to the API\n * Automatically updates the assets query cache after successful upload\n * @returns Mutation result with mutate function, loading state, and error state\n */\nexport const useUploadAsset = (): UseMutationResult<UploadAssetResponse, Error, UploadAssetParams> => {\n  const queryClient = useQueryClient();\n\n  return useMutation<UploadAssetResponse, Error, UploadAssetParams>({\n    mutationKey: assetsKeys.upload,\n    mutationFn: uploadAsset,\n    onSuccess: (createdAssetsResponse, variables) => {\n      const queryKey = assetsKeys.list({ orgId: variables.orgId, brandId: variables.brandId });\n      const newAssets = createdAssetsResponse.data || [];\n\n      queryClient.setQueryData<ListAssetsResponse>(queryKey, (prev) => ({\n        data: [...newAssets, ...(prev?.data || [])],\n      }));\n    },\n  });\n};\n"],"names":["queryClient","useQueryClient","useMutation","mutationKey","assetsKeys","upload","mutationFn","uploadAsset","onSuccess","createdAssetsResponse","variables","queryKey","list","orgId","brandId","newAssets","data","setQueryData","prev"],"mappings":"iKAW8B,KAC5B,MAAMA,EAAcC,EAAAA,iBAEpB,OAAOC,cAA2D,CAChEC,YAAaC,EAAAA,WAAWC,OACxBC,WAAYC,EAAAA,YACZC,UAAW,CAACC,EAAuBC,KACjC,MAAMC,EAAWP,EAAAA,WAAWQ,KAAK,CAAEC,MAAOH,EAAUG,MAAOC,QAASJ,EAAUI,UACxEC,EAAYN,EAAsBO,MAAQ,GAEhDhB,EAAYiB,aAAiCN,GAAWO,IAAI,CAC1DF,KAAM,IAAID,KAAeG,GAAMF,MAAQ"}
+{"version":3,"file":"useUploadAsset.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/useUploadAsset.ts"],"sourcesContent":["import { useMutation, type UseMutationResult, useQueryClient } from '@tanstack/react-query';\n\nimport { assetsKeys } from '../assets.queryKeys';\nimport { uploadAsset, type UploadAssetParams } from '../services/asset.service';\nimport { type ListAssetsResponse, type UploadAssetResponse } from '../types/assets.type';\n\n/**\n * Hook to upload assets to the API\n * Automatically updates the assets query cache after successful upload\n * @returns Mutation result with mutate function, loading state, and error state\n */\nexport const useUploadAsset = (): UseMutationResult<UploadAssetResponse, Error, UploadAssetParams> => {\n  const queryClient = useQueryClient();\n\n  return useMutation<UploadAssetResponse, Error, UploadAssetParams>({\n    mutationKey: assetsKeys.upload,\n    mutationFn: uploadAsset,\n    onSuccess: (createdAssetsResponse, variables) => {\n      const queryKey = assetsKeys.list({ orgId: variables.orgId, brandId: variables.brandId });\n      const newAssets = createdAssetsResponse.data || [];\n\n      queryClient.setQueryData<ListAssetsResponse>(queryKey, (prev) => ({\n        data: [...newAssets, ...(prev?.data || [])],\n      }));\n    },\n  });\n};\n"],"names":["queryClient","useQueryClient","useMutation","mutationKey","assetsKeys","upload","mutationFn","uploadAsset","onSuccess","createdAssetsResponse","variables","queryKey","list","orgId","brandId","newAssets","data","setQueryData","prev"],"mappings":"iKAW8B,KAC5B,MAAMA,EAAcC,EAAAA,iBAEpB,OAAOC,cAA2D,CAChEC,YAAaC,EAAAA,WAAWC,OACxBC,WAAYC,EAAAA,YACZC,UAAW,CAACC,EAAuBC,KACjC,MAAMC,EAAWP,EAAAA,WAAWQ,KAAK,CAAEC,MAAOH,EAAUG,MAAOC,QAASJ,EAAUI,UACxEC,EAAYN,EAAsBO,MAAQ,GAEhDhB,EAAYiB,aAAiCN,EAAWO,IAAI,CAC1DF,KAAM,IAAID,KAAeG,GAAMF,MAAQ"}

package/dist/components/organisms/AssetManager/hooks/useUploadAsset.js

@@ -1,2 +1,2 @@
-import{useQueryClient as t,useMutation as r}from"@tanstack/react-query";import{assetsKeys as s}from"../assets.queryKeys.js";import{uploadAsset as a}from"../services/asset.service.js";const e=()=>{const e=t();return r({mutationKey:s.upload,mutationFn:a,onSuccess:(t,r)=>{const a=s.list({orgId:r.orgId,brandId:r.brandId}),o=t.data||[];e.setQueryData(a,(t=>({data:[...o,...t?.data||[]]})))}})};export{e as useUploadAsset};
+import{useQueryClient as t,useMutation as r}from"@tanstack/react-query";import{assetsKeys as s}from"../assets.queryKeys.js";import{uploadAsset as a}from"../services/asset.service.js";const e=()=>{const e=t();return r({mutationKey:s.upload,mutationFn:a,onSuccess:(t,r)=>{const a=s.list({orgId:r.orgId,brandId:r.brandId}),o=t.data||[];e.setQueryData(a,t=>({data:[...o,...t?.data||[]]}))}})};export{e as useUploadAsset};
 //# sourceMappingURL=useUploadAsset.js.map

package/dist/components/organisms/AssetManager/hooks/useUploadAsset.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUploadAsset.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/useUploadAsset.ts"],"sourcesContent":["import { useMutation, type UseMutationResult, useQueryClient } from '@tanstack/react-query';\n\nimport { assetsKeys } from '../assets.queryKeys';\nimport { uploadAsset, type UploadAssetParams } from '../services/asset.service';\nimport { type ListAssetsResponse, type UploadAssetResponse } from '../types/assets.type';\n\n/**\n * Hook to upload assets to the API\n * Automatically updates the assets query cache after successful upload\n * @returns Mutation result with mutate function, loading state, and error state\n */\nexport const useUploadAsset = (): UseMutationResult<UploadAssetResponse, Error, UploadAssetParams> => {\n  const queryClient = useQueryClient();\n\n  return useMutation<UploadAssetResponse, Error, UploadAssetParams>({\n    mutationKey: assetsKeys.upload,\n    mutationFn: uploadAsset,\n    onSuccess: (createdAssetsResponse, variables) => {\n      const queryKey = assetsKeys.list({ orgId: variables.orgId, brandId: variables.brandId });\n      const newAssets = createdAssetsResponse.data || [];\n\n      queryClient.setQueryData<ListAssetsResponse>(queryKey, (prev) => ({\n        data: [...newAssets, ...(prev?.data || [])],\n      }));\n    },\n  });\n};\n"],"names":["useUploadAsset","queryClient","useQueryClient","useMutation","mutationKey","assetsKeys","upload","mutationFn","uploadAsset","onSuccess","createdAssetsResponse","variables","queryKey","list","orgId","brandId","newAssets","data","setQueryData","prev"],"mappings":"uLAWO,MAAMA,EAAiB,KAC5B,MAAMC,EAAcC,IAEpB,OAAOC,EAA2D,CAChEC,YAAaC,EAAWC,OACxBC,WAAYC,EACZC,UAAW,CAACC,EAAuBC,KACjC,MAAMC,EAAWP,EAAWQ,KAAK,CAAEC,MAAOH,EAAUG,MAAOC,QAASJ,EAAUI,UACxEC,EAAYN,EAAsBO,MAAQ,GAEhDhB,EAAYiB,aAAiCN,GAAWO,IAAI,CAC1DF,KAAM,IAAID,KAAeG,GAAMF,MAAQ"}
+{"version":3,"file":"useUploadAsset.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/useUploadAsset.ts"],"sourcesContent":["import { useMutation, type UseMutationResult, useQueryClient } from '@tanstack/react-query';\n\nimport { assetsKeys } from '../assets.queryKeys';\nimport { uploadAsset, type UploadAssetParams } from '../services/asset.service';\nimport { type ListAssetsResponse, type UploadAssetResponse } from '../types/assets.type';\n\n/**\n * Hook to upload assets to the API\n * Automatically updates the assets query cache after successful upload\n * @returns Mutation result with mutate function, loading state, and error state\n */\nexport const useUploadAsset = (): UseMutationResult<UploadAssetResponse, Error, UploadAssetParams> => {\n  const queryClient = useQueryClient();\n\n  return useMutation<UploadAssetResponse, Error, UploadAssetParams>({\n    mutationKey: assetsKeys.upload,\n    mutationFn: uploadAsset,\n    onSuccess: (createdAssetsResponse, variables) => {\n      const queryKey = assetsKeys.list({ orgId: variables.orgId, brandId: variables.brandId });\n      const newAssets = createdAssetsResponse.data || [];\n\n      queryClient.setQueryData<ListAssetsResponse>(queryKey, (prev) => ({\n        data: [...newAssets, ...(prev?.data || [])],\n      }));\n    },\n  });\n};\n"],"names":["useUploadAsset","queryClient","useQueryClient","useMutation","mutationKey","assetsKeys","upload","mutationFn","uploadAsset","onSuccess","createdAssetsResponse","variables","queryKey","list","orgId","brandId","newAssets","data","setQueryData","prev"],"mappings":"uLAWO,MAAMA,EAAiB,KAC5B,MAAMC,EAAcC,IAEpB,OAAOC,EAA2D,CAChEC,YAAaC,EAAWC,OACxBC,WAAYC,EACZC,UAAW,CAACC,EAAuBC,KACjC,MAAMC,EAAWP,EAAWQ,KAAK,CAAEC,MAAOH,EAAUG,MAAOC,QAASJ,EAAUI,UACxEC,EAAYN,EAAsBO,MAAQ,GAEhDhB,EAAYiB,aAAiCN,EAAWO,IAAI,CAC1DF,KAAM,IAAID,KAAeG,GAAMF,MAAQ"}

package/dist/components/organisms/AssetManager/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),a=require("react"),s=require("@mui/material/styles"),r=require("@mui/material/Box"),l=require("../../atoms/Tab/index.cjs.js"),i=require("../../molecules/Modal/index.cjs.js"),t=require("../../molecules/Tabs/index.cjs.js"),n=require("../../../providers/TranslationProvider.cjs.js"),o=require("@tanstack/react-query"),d=require("./hooks/useAssetSelection.cjs.js"),c=require("./hooks/useAssetUploadManager.cjs.js"),u=require("./hooks/useGetAssets.cjs.js"),g=require("./LibraryTabContent/index.cjs.js"),p=require("./UploadTabContent/index.cjs.js");const m=s.styled(r)((({theme:e})=>({height:"calc(70vh - 200px)",overflowY:"auto",marginTop:e.spacing(2),marginRight:e.spacing(-2),marginLeft:e.spacing(-1),marginBottom:e.spacing(-1),paddingRight:e.spacing(2),paddingLeft:e.spacing(1),paddingBottom:e.spacing(1)}))),j=new o.QueryClient({defaultOptions:{queries:{refetchOnWindowFocus:!1,retry:2}}}),b=({open:s,onClose:r,onSelect:o,orgId:j,brandId:b,maxSelect:y=1})=>{const[h,x]=a.useState("library"),{translate:v}=n.useTranslation(),{data:q,isLoading:C,error:S}=u.useGetAssets(j,s,b),{selectedAssetsMap:A,handleAssetClick:f,clearSelection:k,addAssetsToSelection:U}=d.useAssetSelection({maxSelect:y}),{uploadedFiles:T,uploadError:_,isUploading:I,handleUpload:L,handleRemove:M,handleSave:E,clearUploadedFiles:F,clearSaveUploadError:R}=c.useAssetUploadManager({orgId:j,brandId:b,onUploadSuccess:e=>{U(e),x("library")},getErrorMessage:()=>v("Failed_to_upload_assets_try_again")});a.useEffect((()=>{s||(k(),F(),R())}),[s,k,F,R]);const w=a.useCallback((()=>{k(),r()}),[r,k]),B=a.useCallback((()=>{if(0===A.size)return void r();const e=Array.from(A.values());o&&e.length>0&&o(e),k(),r()}),[o,A,r,k]),z=a.useMemo((()=>{const e={label:v("Cancel"),onClick:w,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},a={library:[e,{label:v("Select"),onClick:B,variant:"primary",id:"asset-manager-select"}],upload:[e,{label:v("Save"),onClick:E,loading:I,variant:"primary",id:"asset-manager-upload"}]};return a[h]??a.library}),[h,I,w,B,E,v]);return e.jsxs(i,{actions:z,onClose:w,open:s,size:"large",title:v("library"===h?"Select_Images":"Upload_Images"),children:[e.jsxs(t,{fdKey:"asset-manager-tabs",onChange:(e,a)=>{x(a),F()},value:h,children:[e.jsx(l,{label:v("Upload"),value:"upload"}),e.jsx(l,{label:v("Library"),value:"library"})]}),e.jsx(m,{children:"library"===h?e.jsx(g,{assets:q?.data,error:S,isLoading:C,onAssetClick:f,selectedAssets:A}):e.jsx(p,{error:_,files:T,onRemove:M,onUpload:L})})]})};module.exports=a=>e.jsx(o.QueryClientProvider,{client:j,children:e.jsx(b,{...a})});
+"use strict";var e=require("react/jsx-runtime"),a=require("react"),s=require("@mui/material/styles"),r=require("@mui/material/Box"),l=require("../../atoms/Tab/index.cjs.js"),i=require("../../molecules/Modal/index.cjs.js"),t=require("../../molecules/Tabs/index.cjs.js"),n=require("../../../providers/TranslationProvider.cjs.js"),o=require("@tanstack/react-query"),d=require("./hooks/useAssetSelection.cjs.js"),c=require("./hooks/useAssetUploadManager.cjs.js"),u=require("./hooks/useGetAssets.cjs.js"),g=require("./LibraryTabContent/index.cjs.js"),p=require("./UploadTabContent/index.cjs.js");const m=s.styled(r)(({theme:e})=>({height:"calc(70vh - 200px)",overflowY:"auto",marginTop:e.spacing(2),marginRight:e.spacing(-2),marginLeft:e.spacing(-1),marginBottom:e.spacing(-1),paddingRight:e.spacing(2),paddingLeft:e.spacing(1),paddingBottom:e.spacing(1)})),j=new o.QueryClient({defaultOptions:{queries:{refetchOnWindowFocus:!1,retry:2}}}),b=({open:s,onClose:r,onSelect:o,orgId:j,brandId:b,maxSelect:y=1})=>{const[h,x]=a.useState("library"),{translate:v}=n.useTranslation(),{data:q,isLoading:C,error:S}=u.useGetAssets(j,s,b),{selectedAssetsMap:A,handleAssetClick:f,clearSelection:k,addAssetsToSelection:U}=d.useAssetSelection({maxSelect:y}),{uploadedFiles:T,uploadError:_,isUploading:I,handleUpload:L,handleRemove:M,handleSave:E,clearUploadedFiles:F,clearSaveUploadError:R}=c.useAssetUploadManager({orgId:j,brandId:b,onUploadSuccess:e=>{U(e),x("library")},getErrorMessage:()=>v("Failed_to_upload_assets_try_again")});a.useEffect(()=>{s||(k(),F(),R())},[s,k,F,R]);const w=a.useCallback(()=>{k(),r()},[r,k]),B=a.useCallback(()=>{if(0===A.size)return void r();const e=Array.from(A.values());o&&e.length>0&&o(e),k(),r()},[o,A,r,k]),z=a.useMemo(()=>{const e={label:v("Cancel"),onClick:w,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},a={library:[e,{label:v("Select"),onClick:B,variant:"primary",id:"asset-manager-select"}],upload:[e,{label:v("Save"),onClick:E,loading:I,variant:"primary",id:"asset-manager-upload"}]};return a[h]??a.library},[h,I,w,B,E,v]);return e.jsxs(i,{actions:z,onClose:w,open:s,size:"large",title:v("library"===h?"Select_Images":"Upload_Images"),children:[e.jsxs(t,{fdKey:"asset-manager-tabs",onChange:(e,a)=>{x(a),F()},value:h,children:[e.jsx(l,{label:v("Upload"),value:"upload"}),e.jsx(l,{label:v("Library"),value:"library"})]}),e.jsx(m,{children:"library"===h?e.jsx(g,{assets:q?.data,error:S,isLoading:C,onAssetClick:f,selectedAssets:A}):e.jsx(p,{error:_,files:T,onRemove:M,onUpload:L})})]})};module.exports=a=>e.jsx(o.QueryClientProvider,{client:j,children:e.jsx(b,{...a})});
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/organisms/AssetManager/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/organisms/AssetManager/index.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Tab from '@fd/components/atoms/Tab';\nimport Modal, { type ModalAction } from '@fd/components/molecules/Modal';\nimport Tabs from '@fd/components/molecules/Tabs';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\n\nimport { useAssetSelection } from './hooks/useAssetSelection';\nimport { useAssetUploadManager } from './hooks/useAssetUploadManager';\nimport { useGetAssets } from './hooks/useGetAssets';\nimport LibraryTabContent from './LibraryTabContent';\nimport type { Asset } from './types/assets.type';\nimport UploadAssetContent from './UploadTabContent';\n/**\n * Scrollable container for the tab content.\n * Allows the asset list to scroll while keeping the modal title, tabs, and actions visible.\n * Uses fixed height to prevent modal resizing when switching tabs.\n */\nconst StyledScrollableContent = styled(Box)(({ theme }) => ({\n  height: 'calc(70vh - 200px)', // Fixed height for consistent modal size across tabs\n  overflowY: 'auto',\n  marginTop: theme.spacing(2),\n  marginRight: theme.spacing(-2), // Extend to edge for scrollbar\n  marginLeft: theme.spacing(-1), // Allow space for shadows on left\n  marginBottom: theme.spacing(-1), // Allow space for shadows on bottom\n  paddingRight: theme.spacing(2), // Compensate for negative margin\n  paddingLeft: theme.spacing(1), // Compensate for negative margin\n  paddingBottom: theme.spacing(1), // Compensate for negative margin\n}));\n\n/**\n * Props for the AssetManager component.\n * Provides a modal interface for selecting images from a grid display.\n * It supports both single and multiple image selection modes with configurable limits.\n *\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n *\n * ```tsx\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n */\nexport interface AssetManagerProps {\n  /** Whether the asset manager modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed or cancelled */\n  onClose: () => void;\n  /** Callback function when assets are selected */\n  onSelect?: (selectedAssets: Asset[]) => void;\n  /**\n   * Organization ID for fetching assets\n   */\n  orgId: string;\n  /** Brand ID for fetching assets */\n  brandId?: string;\n  /** Maximum number of assets that can be selected. Defaults to 1 */\n  maxSelect?: number;\n}\n\n// Create a QueryClient instance for the AssetManager component\n// This allows the component to be used without requiring clients to wrap it in QueryClientProvider\nconst queryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      refetchOnWindowFocus: false,\n      retry: 2,\n    },\n  },\n});\n\n/**\n * Inner component that contains the AssetManager logic.\n * Must be rendered inside QueryClientProvider to use React Query hooks.\n */\nconst AssetManagerContent: React.FC<AssetManagerProps> = ({\n  open,\n  onClose,\n  onSelect,\n  orgId,\n  brandId,\n  maxSelect = 1,\n}) => {\n  const [selectedTab, setSelectedTab] = useState<string>('library');\n  const { translate } = useTranslation();\n\n  // Fetch assets at the parent level to enable future reuse across tabs\n  const {\n    data: assetResponse,\n    isLoading: isLoadingAssets,\n    error: assetsError,\n  } = useGetAssets(orgId, open, brandId);\n\n  // Asset selection hook - manages selected assets from library\n  const { selectedAssetsMap, handleAssetClick, clearSelection, addAssetsToSelection } = useAssetSelection({\n    maxSelect,\n  });\n\n  // Asset upload hook - manages file uploads and upload state\n  const {\n    uploadedFiles,\n    uploadError,\n    isUploading,\n    handleUpload,\n    handleRemove,\n    handleSave,\n    clearUploadedFiles,\n    clearSaveUploadError,\n  } = useAssetUploadManager({\n    orgId,\n    brandId,\n    onUploadSuccess: (uploadedAssets) => {\n      // Add uploaded assets to selection and switch to library tab\n      addAssetsToSelection(uploadedAssets);\n      setSelectedTab('library');\n    },\n    getErrorMessage: () => translate('Failed_to_upload_assets_try_again'),\n  });\n\n  // Reset state when modal opens/closes\n  useEffect(() => {\n    if (!open) {\n      clearSelection();\n      clearUploadedFiles();\n      clearSaveUploadError();\n    }\n  }, [open, clearSelection, clearUploadedFiles, clearSaveUploadError]);\n\n  const handleCancel = useCallback((): void => {\n    clearSelection();\n    onClose();\n  }, [onClose, clearSelection]);\n\n  const handleSelectAssets = useCallback((): void => {\n    if (selectedAssetsMap.size === 0) {\n      onClose();\n      return;\n    }\n    const selectedAssets = Array.from(selectedAssetsMap.values());\n    if (onSelect && selectedAssets.length > 0) {\n      onSelect(selectedAssets);\n    }\n    clearSelection();\n    onClose();\n  }, [onSelect, selectedAssetsMap, onClose, clearSelection]);\n\n  const getTitle = (): string => {\n    switch (selectedTab) {\n      case 'library':\n        return translate('Select_Images');\n      default:\n        return translate('Upload_Images');\n    }\n  };\n\n  // Tab-specific action button configurations\n  const actionButtons = useMemo<ModalAction[]>(() => {\n    // Common cancel button configuration\n    const cancelButton: ModalAction = {\n      label: translate('Cancel'),\n      onClick: handleCancel,\n      variant: 'secondary',\n      tone: 'neutral',\n      id: 'asset-manager-cancel',\n    };\n\n    const tabActions: Record<string, ModalAction[]> = {\n      library: [\n        cancelButton,\n        {\n          label: translate('Select'),\n          onClick: handleSelectAssets,\n          variant: 'primary',\n          id: 'asset-manager-select',\n        },\n      ],\n      upload: [\n        cancelButton,\n        {\n          label: translate('Save'),\n          onClick: handleSave,\n          loading: isUploading,\n          variant: 'primary',\n          id: 'asset-manager-upload',\n        },\n      ],\n    };\n\n    return tabActions[selectedTab] ?? (tabActions['library'] as ModalAction[]);\n  }, [selectedTab, isUploading, handleCancel, handleSelectAssets, handleSave, translate]);\n\n  return (\n    <Modal actions={actionButtons} onClose={handleCancel} open={open} size=\"large\" title={getTitle()}>\n      <Tabs\n        fdKey=\"asset-manager-tabs\"\n        onChange={(_, value: string) => {\n          setSelectedTab(value);\n          clearUploadedFiles();\n        }}\n        value={selectedTab}\n      >\n        <Tab label={translate('Upload')} value=\"upload\" />\n        <Tab label={translate('Library')} value=\"library\" />\n      </Tabs>\n      <StyledScrollableContent>\n        {selectedTab === 'library' ? (\n          <LibraryTabContent\n            assets={assetResponse?.data}\n            error={assetsError}\n            isLoading={isLoadingAssets}\n            onAssetClick={handleAssetClick}\n            selectedAssets={selectedAssetsMap}\n          />\n        ) : (\n          <UploadAssetContent\n            error={uploadError}\n            files={uploadedFiles}\n            onRemove={handleRemove}\n            onUpload={handleUpload}\n          />\n        )}\n      </StyledScrollableContent>\n    </Modal>\n  );\n};\n\n/**\n * AssetManager component used to select assets from the library or upload new assets.\n * Can manage assets at a organization or brand level.\n *\n * @example\n * ```tsx\n * <AssetManager\n *   open={isOpen}\n *   onClose={() => setIsOpen(false)}\n *   onSelect={(assets) => console.log(assets)}\n *   orgId=\"org123\"\n *   brandId=\"brand456\"\n *   maxSelect={3}\n * />\n * ```\n */\nconst AssetManager: React.FC<AssetManagerProps> = (props) => {\n  return (\n    <QueryClientProvider client={queryClient}>\n      <AssetManagerContent {...props} />\n    </QueryClientProvider>\n  );\n};\n\nexport type { Asset, AssetMetadata, AssetMetadataDimensions, AssetType } from './types/assets.type';\nexport default AssetManager;\n"],"names":["StyledScrollableContent","styled","Box","theme","height","overflowY","marginTop","spacing","marginRight","marginLeft","marginBottom","paddingRight","paddingLeft","paddingBottom","queryClient","QueryClient","defaultOptions","queries","refetchOnWindowFocus","retry","AssetManagerContent","open","onClose","onSelect","orgId","brandId","maxSelect","selectedTab","setSelectedTab","useState","translate","useTranslation","data","assetResponse","isLoading","isLoadingAssets","error","assetsError","useGetAssets","selectedAssetsMap","handleAssetClick","clearSelection","addAssetsToSelection","useAssetSelection","uploadedFiles","uploadError","isUploading","handleUpload","handleRemove","handleSave","clearUploadedFiles","clearSaveUploadError","useAssetUploadManager","onUploadSuccess","uploadedAssets","getErrorMessage","useEffect","handleCancel","useCallback","handleSelectAssets","size","selectedAssets","Array","from","values","length","actionButtons","useMemo","cancelButton","label","onClick","variant","tone","id","tabActions","library","upload","loading","_jsxs","Modal","actions","title","Tabs","fdKey","onChange","_","value","_jsx","Tab","children","LibraryTabContent","assets","onAssetClick","UploadAssetContent","files","onRemove","onUpload","props","QueryClientProvider","client"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/organisms/AssetManager/index.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Tab from '@fd/components/atoms/Tab';\nimport Modal, { type ModalAction } from '@fd/components/molecules/Modal';\nimport Tabs from '@fd/components/molecules/Tabs';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\n\nimport { useAssetSelection } from './hooks/useAssetSelection';\nimport { useAssetUploadManager } from './hooks/useAssetUploadManager';\nimport { useGetAssets } from './hooks/useGetAssets';\nimport LibraryTabContent from './LibraryTabContent';\nimport type { Asset } from './types/assets.type';\nimport UploadAssetContent from './UploadTabContent';\n/**\n * Scrollable container for the tab content.\n * Allows the asset list to scroll while keeping the modal title, tabs, and actions visible.\n * Uses fixed height to prevent modal resizing when switching tabs.\n */\nconst StyledScrollableContent = styled(Box)(({ theme }) => ({\n  height: 'calc(70vh - 200px)', // Fixed height for consistent modal size across tabs\n  overflowY: 'auto',\n  marginTop: theme.spacing(2),\n  marginRight: theme.spacing(-2), // Extend to edge for scrollbar\n  marginLeft: theme.spacing(-1), // Allow space for shadows on left\n  marginBottom: theme.spacing(-1), // Allow space for shadows on bottom\n  paddingRight: theme.spacing(2), // Compensate for negative margin\n  paddingLeft: theme.spacing(1), // Compensate for negative margin\n  paddingBottom: theme.spacing(1), // Compensate for negative margin\n}));\n\n/**\n * Props for the AssetManager component.\n * Provides a modal interface for selecting images from a grid display.\n * It supports both single and multiple image selection modes with configurable limits.\n *\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n *\n * ```tsx\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n */\nexport interface AssetManagerProps {\n  /** Whether the asset manager modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed or cancelled */\n  onClose: () => void;\n  /** Callback function when assets are selected */\n  onSelect?: (selectedAssets: Asset[]) => void;\n  /**\n   * Organization ID for fetching assets\n   */\n  orgId: string;\n  /** Brand ID for fetching assets */\n  brandId?: string;\n  /** Maximum number of assets that can be selected. Defaults to 1 */\n  maxSelect?: number;\n}\n\n// Create a QueryClient instance for the AssetManager component\n// This allows the component to be used without requiring clients to wrap it in QueryClientProvider\nconst queryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      refetchOnWindowFocus: false,\n      retry: 2,\n    },\n  },\n});\n\n/**\n * Inner component that contains the AssetManager logic.\n * Must be rendered inside QueryClientProvider to use React Query hooks.\n */\nconst AssetManagerContent: React.FC<AssetManagerProps> = ({\n  open,\n  onClose,\n  onSelect,\n  orgId,\n  brandId,\n  maxSelect = 1,\n}) => {\n  const [selectedTab, setSelectedTab] = useState<string>('library');\n  const { translate } = useTranslation();\n\n  // Fetch assets at the parent level to enable future reuse across tabs\n  const {\n    data: assetResponse,\n    isLoading: isLoadingAssets,\n    error: assetsError,\n  } = useGetAssets(orgId, open, brandId);\n\n  // Asset selection hook - manages selected assets from library\n  const { selectedAssetsMap, handleAssetClick, clearSelection, addAssetsToSelection } = useAssetSelection({\n    maxSelect,\n  });\n\n  // Asset upload hook - manages file uploads and upload state\n  const {\n    uploadedFiles,\n    uploadError,\n    isUploading,\n    handleUpload,\n    handleRemove,\n    handleSave,\n    clearUploadedFiles,\n    clearSaveUploadError,\n  } = useAssetUploadManager({\n    orgId,\n    brandId,\n    onUploadSuccess: (uploadedAssets) => {\n      // Add uploaded assets to selection and switch to library tab\n      addAssetsToSelection(uploadedAssets);\n      setSelectedTab('library');\n    },\n    getErrorMessage: () => translate('Failed_to_upload_assets_try_again'),\n  });\n\n  // Reset state when modal opens/closes\n  useEffect(() => {\n    if (!open) {\n      clearSelection();\n      clearUploadedFiles();\n      clearSaveUploadError();\n    }\n  }, [open, clearSelection, clearUploadedFiles, clearSaveUploadError]);\n\n  const handleCancel = useCallback((): void => {\n    clearSelection();\n    onClose();\n  }, [onClose, clearSelection]);\n\n  const handleSelectAssets = useCallback((): void => {\n    if (selectedAssetsMap.size === 0) {\n      onClose();\n      return;\n    }\n    const selectedAssets = Array.from(selectedAssetsMap.values());\n    if (onSelect && selectedAssets.length > 0) {\n      onSelect(selectedAssets);\n    }\n    clearSelection();\n    onClose();\n  }, [onSelect, selectedAssetsMap, onClose, clearSelection]);\n\n  const getTitle = (): string => {\n    switch (selectedTab) {\n      case 'library':\n        return translate('Select_Images');\n      default:\n        return translate('Upload_Images');\n    }\n  };\n\n  // Tab-specific action button configurations\n  const actionButtons = useMemo<ModalAction[]>(() => {\n    // Common cancel button configuration\n    const cancelButton: ModalAction = {\n      label: translate('Cancel'),\n      onClick: handleCancel,\n      variant: 'secondary',\n      tone: 'neutral',\n      id: 'asset-manager-cancel',\n    };\n\n    const tabActions: Record<string, ModalAction[]> = {\n      library: [\n        cancelButton,\n        {\n          label: translate('Select'),\n          onClick: handleSelectAssets,\n          variant: 'primary',\n          id: 'asset-manager-select',\n        },\n      ],\n      upload: [\n        cancelButton,\n        {\n          label: translate('Save'),\n          onClick: handleSave,\n          loading: isUploading,\n          variant: 'primary',\n          id: 'asset-manager-upload',\n        },\n      ],\n    };\n\n    return tabActions[selectedTab] ?? (tabActions['library'] as ModalAction[]);\n  }, [selectedTab, isUploading, handleCancel, handleSelectAssets, handleSave, translate]);\n\n  return (\n    <Modal actions={actionButtons} onClose={handleCancel} open={open} size=\"large\" title={getTitle()}>\n      <Tabs\n        fdKey=\"asset-manager-tabs\"\n        onChange={(_, value: string) => {\n          setSelectedTab(value);\n          clearUploadedFiles();\n        }}\n        value={selectedTab}\n      >\n        <Tab label={translate('Upload')} value=\"upload\" />\n        <Tab label={translate('Library')} value=\"library\" />\n      </Tabs>\n      <StyledScrollableContent>\n        {selectedTab === 'library' ? (\n          <LibraryTabContent\n            assets={assetResponse?.data}\n            error={assetsError}\n            isLoading={isLoadingAssets}\n            onAssetClick={handleAssetClick}\n            selectedAssets={selectedAssetsMap}\n          />\n        ) : (\n          <UploadAssetContent\n            error={uploadError}\n            files={uploadedFiles}\n            onRemove={handleRemove}\n            onUpload={handleUpload}\n          />\n        )}\n      </StyledScrollableContent>\n    </Modal>\n  );\n};\n\n/**\n * AssetManager component used to select assets from the library or upload new assets.\n * Can manage assets at a organization or brand level.\n *\n * @example\n * ```tsx\n * <AssetManager\n *   open={isOpen}\n *   onClose={() => setIsOpen(false)}\n *   onSelect={(assets) => console.log(assets)}\n *   orgId=\"org123\"\n *   brandId=\"brand456\"\n *   maxSelect={3}\n * />\n * ```\n */\nconst AssetManager: React.FC<AssetManagerProps> = (props) => {\n  return (\n    <QueryClientProvider client={queryClient}>\n      <AssetManagerContent {...props} />\n    </QueryClientProvider>\n  );\n};\n\nexport type { Asset, AssetMetadata, AssetMetadataDimensions, AssetType } from './types/assets.type';\nexport default AssetManager;\n"],"names":["StyledScrollableContent","styled","Box","theme","height","overflowY","marginTop","spacing","marginRight","marginLeft","marginBottom","paddingRight","paddingLeft","paddingBottom","queryClient","QueryClient","defaultOptions","queries","refetchOnWindowFocus","retry","AssetManagerContent","open","onClose","onSelect","orgId","brandId","maxSelect","selectedTab","setSelectedTab","useState","translate","useTranslation","data","assetResponse","isLoading","isLoadingAssets","error","assetsError","useGetAssets","selectedAssetsMap","handleAssetClick","clearSelection","addAssetsToSelection","useAssetSelection","uploadedFiles","uploadError","isUploading","handleUpload","handleRemove","handleSave","clearUploadedFiles","clearSaveUploadError","useAssetUploadManager","onUploadSuccess","uploadedAssets","getErrorMessage","useEffect","handleCancel","useCallback","handleSelectAssets","size","selectedAssets","Array","from","values","length","actionButtons","useMemo","cancelButton","label","onClick","variant","tone","id","tabActions","library","upload","loading","_jsxs","Modal","actions","title","Tabs","fdKey","onChange","_","value","_jsx","Tab","children","LibraryTabContent","assets","onAssetClick","UploadAssetContent","files","onRemove","onUpload","props","QueryClientProvider","client"],"mappings":"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"}

package/dist/components/organisms/AssetManager/index.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useState as r,useEffect as o,useCallback as s,useMemo as t}from"react";import{styled as i}from"@mui/material/styles";import l from"@mui/material/Box";import n from"../../atoms/Tab/index.js";import d from"../../molecules/Modal/index.js";import m from"../../molecules/Tabs/index.js";import{useTranslation as c}from"../../../providers/TranslationProvider.js";import{QueryClient as p,QueryClientProvider as g}from"@tanstack/react-query";import{useAssetSelection as u}from"./hooks/useAssetSelection.js";import{useAssetUploadManager as f}from"./hooks/useAssetUploadManager.js";import{useGetAssets as b}from"./hooks/useGetAssets.js";import h from"./LibraryTabContent/index.js";import y from"./UploadTabContent/index.js";const v=i(l)((({theme:e})=>({height:"calc(70vh - 200px)",overflowY:"auto",marginTop:e.spacing(2),marginRight:e.spacing(-2),marginLeft:e.spacing(-1),marginBottom:e.spacing(-1),paddingRight:e.spacing(2),paddingLeft:e.spacing(1),paddingBottom:e.spacing(1)}))),S=new p({defaultOptions:{queries:{refetchOnWindowFocus:!1,retry:2}}}),x=({open:i,onClose:l,onSelect:p,orgId:g,brandId:S,maxSelect:x=1})=>{const[C,j]=r("library"),{translate:U}=c(),{data:k,isLoading:A,error:T}=b(g,i,S),{selectedAssetsMap:_,handleAssetClick:I,clearSelection:L,addAssetsToSelection:F}=u({maxSelect:x}),{uploadedFiles:M,uploadError:R,isUploading:w,handleUpload:B,handleRemove:E,handleSave:q,clearUploadedFiles:z,clearSaveUploadError:O}=f({orgId:g,brandId:S,onUploadSuccess:e=>{F(e),j("library")},getErrorMessage:()=>U("Failed_to_upload_assets_try_again")});o((()=>{i||(L(),z(),O())}),[i,L,z,O]);const G=s((()=>{L(),l()}),[l,L]),K=s((()=>{if(0===_.size)return void l();const e=Array.from(_.values());p&&e.length>0&&p(e),L(),l()}),[p,_,l,L]),P=t((()=>{const e={label:U("Cancel"),onClick:G,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},a={library:[e,{label:U("Select"),onClick:K,variant:"primary",id:"asset-manager-select"}],upload:[e,{label:U("Save"),onClick:q,loading:w,variant:"primary",id:"asset-manager-upload"}]};return a[C]??a.library}),[C,w,G,K,q,U]);return a(d,{actions:P,onClose:G,open:i,size:"large",title:U("library"===C?"Select_Images":"Upload_Images"),children:[a(m,{fdKey:"asset-manager-tabs",onChange:(e,a)=>{j(a),z()},value:C,children:[e(n,{label:U("Upload"),value:"upload"}),e(n,{label:U("Library"),value:"library"})]}),e(v,{children:"library"===C?e(h,{assets:k?.data,error:T,isLoading:A,onAssetClick:I,selectedAssets:_}):e(y,{error:R,files:M,onRemove:E,onUpload:B})})]})},C=a=>e(g,{client:S,children:e(x,{...a})});export{C as default};
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useState as r,useEffect as o,useCallback as s,useMemo as t}from"react";import{styled as i}from"@mui/material/styles";import l from"@mui/material/Box";import n from"../../atoms/Tab/index.js";import d from"../../molecules/Modal/index.js";import m from"../../molecules/Tabs/index.js";import{useTranslation as c}from"../../../providers/TranslationProvider.js";import{QueryClient as p,QueryClientProvider as g}from"@tanstack/react-query";import{useAssetSelection as u}from"./hooks/useAssetSelection.js";import{useAssetUploadManager as f}from"./hooks/useAssetUploadManager.js";import{useGetAssets as b}from"./hooks/useGetAssets.js";import h from"./LibraryTabContent/index.js";import y from"./UploadTabContent/index.js";const v=i(l)(({theme:e})=>({height:"calc(70vh - 200px)",overflowY:"auto",marginTop:e.spacing(2),marginRight:e.spacing(-2),marginLeft:e.spacing(-1),marginBottom:e.spacing(-1),paddingRight:e.spacing(2),paddingLeft:e.spacing(1),paddingBottom:e.spacing(1)})),S=new p({defaultOptions:{queries:{refetchOnWindowFocus:!1,retry:2}}}),x=({open:i,onClose:l,onSelect:p,orgId:g,brandId:S,maxSelect:x=1})=>{const[C,j]=r("library"),{translate:U}=c(),{data:k,isLoading:A,error:T}=b(g,i,S),{selectedAssetsMap:_,handleAssetClick:I,clearSelection:L,addAssetsToSelection:F}=u({maxSelect:x}),{uploadedFiles:M,uploadError:R,isUploading:w,handleUpload:B,handleRemove:E,handleSave:q,clearUploadedFiles:z,clearSaveUploadError:O}=f({orgId:g,brandId:S,onUploadSuccess:e=>{F(e),j("library")},getErrorMessage:()=>U("Failed_to_upload_assets_try_again")});o(()=>{i||(L(),z(),O())},[i,L,z,O]);const G=s(()=>{L(),l()},[l,L]),K=s(()=>{if(0===_.size)return void l();const e=Array.from(_.values());p&&e.length>0&&p(e),L(),l()},[p,_,l,L]),P=t(()=>{const e={label:U("Cancel"),onClick:G,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},a={library:[e,{label:U("Select"),onClick:K,variant:"primary",id:"asset-manager-select"}],upload:[e,{label:U("Save"),onClick:q,loading:w,variant:"primary",id:"asset-manager-upload"}]};return a[C]??a.library},[C,w,G,K,q,U]);return a(d,{actions:P,onClose:G,open:i,size:"large",title:U("library"===C?"Select_Images":"Upload_Images"),children:[a(m,{fdKey:"asset-manager-tabs",onChange:(e,a)=>{j(a),z()},value:C,children:[e(n,{label:U("Upload"),value:"upload"}),e(n,{label:U("Library"),value:"library"})]}),e(v,{children:"library"===C?e(h,{assets:k?.data,error:T,isLoading:A,onAssetClick:I,selectedAssets:_}):e(y,{error:R,files:M,onRemove:E,onUpload:B})})]})},C=a=>e(g,{client:S,children:e(x,{...a})});export{C as default};
 //# sourceMappingURL=index.js.map

package/dist/components/organisms/AssetManager/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/AssetManager/index.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Tab from '@fd/components/atoms/Tab';\nimport Modal, { type ModalAction } from '@fd/components/molecules/Modal';\nimport Tabs from '@fd/components/molecules/Tabs';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\n\nimport { useAssetSelection } from './hooks/useAssetSelection';\nimport { useAssetUploadManager } from './hooks/useAssetUploadManager';\nimport { useGetAssets } from './hooks/useGetAssets';\nimport LibraryTabContent from './LibraryTabContent';\nimport type { Asset } from './types/assets.type';\nimport UploadAssetContent from './UploadTabContent';\n/**\n * Scrollable container for the tab content.\n * Allows the asset list to scroll while keeping the modal title, tabs, and actions visible.\n * Uses fixed height to prevent modal resizing when switching tabs.\n */\nconst StyledScrollableContent = styled(Box)(({ theme }) => ({\n  height: 'calc(70vh - 200px)', // Fixed height for consistent modal size across tabs\n  overflowY: 'auto',\n  marginTop: theme.spacing(2),\n  marginRight: theme.spacing(-2), // Extend to edge for scrollbar\n  marginLeft: theme.spacing(-1), // Allow space for shadows on left\n  marginBottom: theme.spacing(-1), // Allow space for shadows on bottom\n  paddingRight: theme.spacing(2), // Compensate for negative margin\n  paddingLeft: theme.spacing(1), // Compensate for negative margin\n  paddingBottom: theme.spacing(1), // Compensate for negative margin\n}));\n\n/**\n * Props for the AssetManager component.\n * Provides a modal interface for selecting images from a grid display.\n * It supports both single and multiple image selection modes with configurable limits.\n *\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n *\n * ```tsx\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n */\nexport interface AssetManagerProps {\n  /** Whether the asset manager modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed or cancelled */\n  onClose: () => void;\n  /** Callback function when assets are selected */\n  onSelect?: (selectedAssets: Asset[]) => void;\n  /**\n   * Organization ID for fetching assets\n   */\n  orgId: string;\n  /** Brand ID for fetching assets */\n  brandId?: string;\n  /** Maximum number of assets that can be selected. Defaults to 1 */\n  maxSelect?: number;\n}\n\n// Create a QueryClient instance for the AssetManager component\n// This allows the component to be used without requiring clients to wrap it in QueryClientProvider\nconst queryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      refetchOnWindowFocus: false,\n      retry: 2,\n    },\n  },\n});\n\n/**\n * Inner component that contains the AssetManager logic.\n * Must be rendered inside QueryClientProvider to use React Query hooks.\n */\nconst AssetManagerContent: React.FC<AssetManagerProps> = ({\n  open,\n  onClose,\n  onSelect,\n  orgId,\n  brandId,\n  maxSelect = 1,\n}) => {\n  const [selectedTab, setSelectedTab] = useState<string>('library');\n  const { translate } = useTranslation();\n\n  // Fetch assets at the parent level to enable future reuse across tabs\n  const {\n    data: assetResponse,\n    isLoading: isLoadingAssets,\n    error: assetsError,\n  } = useGetAssets(orgId, open, brandId);\n\n  // Asset selection hook - manages selected assets from library\n  const { selectedAssetsMap, handleAssetClick, clearSelection, addAssetsToSelection } = useAssetSelection({\n    maxSelect,\n  });\n\n  // Asset upload hook - manages file uploads and upload state\n  const {\n    uploadedFiles,\n    uploadError,\n    isUploading,\n    handleUpload,\n    handleRemove,\n    handleSave,\n    clearUploadedFiles,\n    clearSaveUploadError,\n  } = useAssetUploadManager({\n    orgId,\n    brandId,\n    onUploadSuccess: (uploadedAssets) => {\n      // Add uploaded assets to selection and switch to library tab\n      addAssetsToSelection(uploadedAssets);\n      setSelectedTab('library');\n    },\n    getErrorMessage: () => translate('Failed_to_upload_assets_try_again'),\n  });\n\n  // Reset state when modal opens/closes\n  useEffect(() => {\n    if (!open) {\n      clearSelection();\n      clearUploadedFiles();\n      clearSaveUploadError();\n    }\n  }, [open, clearSelection, clearUploadedFiles, clearSaveUploadError]);\n\n  const handleCancel = useCallback((): void => {\n    clearSelection();\n    onClose();\n  }, [onClose, clearSelection]);\n\n  const handleSelectAssets = useCallback((): void => {\n    if (selectedAssetsMap.size === 0) {\n      onClose();\n      return;\n    }\n    const selectedAssets = Array.from(selectedAssetsMap.values());\n    if (onSelect && selectedAssets.length > 0) {\n      onSelect(selectedAssets);\n    }\n    clearSelection();\n    onClose();\n  }, [onSelect, selectedAssetsMap, onClose, clearSelection]);\n\n  const getTitle = (): string => {\n    switch (selectedTab) {\n      case 'library':\n        return translate('Select_Images');\n      default:\n        return translate('Upload_Images');\n    }\n  };\n\n  // Tab-specific action button configurations\n  const actionButtons = useMemo<ModalAction[]>(() => {\n    // Common cancel button configuration\n    const cancelButton: ModalAction = {\n      label: translate('Cancel'),\n      onClick: handleCancel,\n      variant: 'secondary',\n      tone: 'neutral',\n      id: 'asset-manager-cancel',\n    };\n\n    const tabActions: Record<string, ModalAction[]> = {\n      library: [\n        cancelButton,\n        {\n          label: translate('Select'),\n          onClick: handleSelectAssets,\n          variant: 'primary',\n          id: 'asset-manager-select',\n        },\n      ],\n      upload: [\n        cancelButton,\n        {\n          label: translate('Save'),\n          onClick: handleSave,\n          loading: isUploading,\n          variant: 'primary',\n          id: 'asset-manager-upload',\n        },\n      ],\n    };\n\n    return tabActions[selectedTab] ?? (tabActions['library'] as ModalAction[]);\n  }, [selectedTab, isUploading, handleCancel, handleSelectAssets, handleSave, translate]);\n\n  return (\n    <Modal actions={actionButtons} onClose={handleCancel} open={open} size=\"large\" title={getTitle()}>\n      <Tabs\n        fdKey=\"asset-manager-tabs\"\n        onChange={(_, value: string) => {\n          setSelectedTab(value);\n          clearUploadedFiles();\n        }}\n        value={selectedTab}\n      >\n        <Tab label={translate('Upload')} value=\"upload\" />\n        <Tab label={translate('Library')} value=\"library\" />\n      </Tabs>\n      <StyledScrollableContent>\n        {selectedTab === 'library' ? (\n          <LibraryTabContent\n            assets={assetResponse?.data}\n            error={assetsError}\n            isLoading={isLoadingAssets}\n            onAssetClick={handleAssetClick}\n            selectedAssets={selectedAssetsMap}\n          />\n        ) : (\n          <UploadAssetContent\n            error={uploadError}\n            files={uploadedFiles}\n            onRemove={handleRemove}\n            onUpload={handleUpload}\n          />\n        )}\n      </StyledScrollableContent>\n    </Modal>\n  );\n};\n\n/**\n * AssetManager component used to select assets from the library or upload new assets.\n * Can manage assets at a organization or brand level.\n *\n * @example\n * ```tsx\n * <AssetManager\n *   open={isOpen}\n *   onClose={() => setIsOpen(false)}\n *   onSelect={(assets) => console.log(assets)}\n *   orgId=\"org123\"\n *   brandId=\"brand456\"\n *   maxSelect={3}\n * />\n * ```\n */\nconst AssetManager: React.FC<AssetManagerProps> = (props) => {\n  return (\n    <QueryClientProvider client={queryClient}>\n      <AssetManagerContent {...props} />\n    </QueryClientProvider>\n  );\n};\n\nexport type { Asset, AssetMetadata, AssetMetadataDimensions, AssetType } from './types/assets.type';\nexport default AssetManager;\n"],"names":["StyledScrollableContent","styled","Box","theme","height","overflowY","marginTop","spacing","marginRight","marginLeft","marginBottom","paddingRight","paddingLeft","paddingBottom","queryClient","QueryClient","defaultOptions","queries","refetchOnWindowFocus","retry","AssetManagerContent","open","onClose","onSelect","orgId","brandId","maxSelect","selectedTab","setSelectedTab","useState","translate","useTranslation","data","assetResponse","isLoading","isLoadingAssets","error","assetsError","useGetAssets","selectedAssetsMap","handleAssetClick","clearSelection","addAssetsToSelection","useAssetSelection","uploadedFiles","uploadError","isUploading","handleUpload","handleRemove","handleSave","clearUploadedFiles","clearSaveUploadError","useAssetUploadManager","onUploadSuccess","uploadedAssets","getErrorMessage","useEffect","handleCancel","useCallback","handleSelectAssets","size","selectedAssets","Array","from","values","length","actionButtons","useMemo","cancelButton","label","onClick","variant","tone","id","tabActions","library","upload","loading","_jsxs","Modal","actions","title","Tabs","fdKey","onChange","_","value","_jsx","Tab","children","LibraryTabContent","assets","onAssetClick","UploadAssetContent","files","onRemove","onUpload","AssetManager","props","QueryClientProvider","client"],"mappings":"kwBAsBA,MAAMA,EAA0BC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACpDC,OAAQ,qBACRC,UAAW,OACXC,UAAWH,EAAMI,QAAQ,GACzBC,YAAaL,EAAMI,YACnBE,WAAYN,EAAMI,YAClBG,aAAcP,EAAMI,YACpBI,aAAcR,EAAMI,QAAQ,GAC5BK,YAAaT,EAAMI,QAAQ,GAC3BM,cAAeV,EAAMI,QAAQ,OAgCzBO,EAAc,IAAIC,EAAY,CAClCC,eAAgB,CACdC,QAAS,CACPC,sBAAsB,EACtBC,MAAO,MASPC,EAAmD,EACvDC,OACAC,UACAC,WACAC,QACAC,UACAC,YAAY,MAEZ,MAAOC,EAAaC,GAAkBC,EAAiB,YACjDC,UAAEA,GAAcC,KAIpBC,KAAMC,EACNC,UAAWC,EACXC,MAAOC,GACLC,EAAad,EAAOH,EAAMI,IAGxBc,kBAAEA,EAAiBC,iBAAEA,EAAgBC,eAAEA,EAAcC,qBAAEA,GAAyBC,EAAkB,CACtGjB,eAIIkB,cACJA,EAAaC,YACbA,EAAWC,YACXA,EAAWC,aACXA,EAAYC,aACZA,EAAYC,WACZA,EAAUC,mBACVA,EAAkBC,qBAClBA,GACEC,EAAsB,CACxB5B,QACAC,UACA4B,gBAAkBC,IAEhBZ,EAAqBY,GACrB1B,EAAe,YAEjB2B,gBAAiB,IAAMzB,EAAU,uCAInC0B,GAAU,KACHnC,IACHoB,IACAS,IACAC,OAED,CAAC9B,EAAMoB,EAAgBS,EAAoBC,IAE9C,MAAMM,EAAeC,GAAY,KAC/BjB,IACAnB,MACC,CAACA,EAASmB,IAEPkB,EAAqBD,GAAY,KACrC,GAA+B,IAA3BnB,EAAkBqB,KAEpB,YADAtC,IAGF,MAAMuC,EAAiBC,MAAMC,KAAKxB,EAAkByB,UAChDzC,GAAYsC,EAAeI,OAAS,GACtC1C,EAASsC,GAEXpB,IACAnB,MACC,CAACC,EAAUgB,EAAmBjB,EAASmB,IAYpCyB,EAAgBC,GAAuB,KAE3C,MAAMC,EAA4B,CAChCC,MAAOvC,EAAU,UACjBwC,QAASb,EACTc,QAAS,YACTC,KAAM,UACNC,GAAI,wBAGAC,EAA4C,CAChDC,QAAS,CACPP,EACA,CACEC,MAAOvC,EAAU,UACjBwC,QAASX,EACTY,QAAS,UACTE,GAAI,yBAGRG,OAAQ,CACNR,EACA,CACEC,MAAOvC,EAAU,QACjBwC,QAASrB,EACT4B,QAAS/B,EACTyB,QAAS,UACTE,GAAI,0BAKV,OAAOC,EAAW/C,IAAiB+C,EAAoB,UACtD,CAAC/C,EAAamB,EAAaW,EAAcE,EAAoBV,EAAYnB,IAE5E,OACEgD,EAACC,EAAK,CAACC,QAASd,EAAe5C,QAASmC,EAAcpC,KAAMA,EAAMuC,KAAK,QAAQqB,MA3CpEnD,EADJ,YADCH,EAEa,gBAEA,2BA0CnBmD,EAACI,GACCC,MAAM,qBACNC,SAAU,CAACC,EAAGC,KACZ1D,EAAe0D,GACfpC,KAEFoC,MAAO3D,YAEP4D,EAACC,GAAInB,MAAOvC,EAAU,UAAWwD,MAAM,WACvCC,EAACC,EAAG,CAACnB,MAAOvC,EAAU,WAAYwD,MAAM,eAE1CC,EAACvF,EAAuB,CAAAyF,SACL,YAAhB9D,EACC4D,EAACG,EAAiB,CAChBC,OAAQ1D,GAAeD,KACvBI,MAAOC,EACPH,UAAWC,EACXyD,aAAcpD,EACdqB,eAAgBtB,IAGlBgD,EAACM,GACCzD,MAAOS,EACPiD,MAAOlD,EACPmD,SAAU/C,EACVgD,SAAUjD,UAwBhBkD,EAA6CC,GAE/CX,EAACY,EAAmB,CAACC,OAAQtF,EAAW2E,SACtCF,EAACnE,EAAmB,IAAK8E"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/AssetManager/index.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Tab from '@fd/components/atoms/Tab';\nimport Modal, { type ModalAction } from '@fd/components/molecules/Modal';\nimport Tabs from '@fd/components/molecules/Tabs';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\n\nimport { useAssetSelection } from './hooks/useAssetSelection';\nimport { useAssetUploadManager } from './hooks/useAssetUploadManager';\nimport { useGetAssets } from './hooks/useGetAssets';\nimport LibraryTabContent from './LibraryTabContent';\nimport type { Asset } from './types/assets.type';\nimport UploadAssetContent from './UploadTabContent';\n/**\n * Scrollable container for the tab content.\n * Allows the asset list to scroll while keeping the modal title, tabs, and actions visible.\n * Uses fixed height to prevent modal resizing when switching tabs.\n */\nconst StyledScrollableContent = styled(Box)(({ theme }) => ({\n  height: 'calc(70vh - 200px)', // Fixed height for consistent modal size across tabs\n  overflowY: 'auto',\n  marginTop: theme.spacing(2),\n  marginRight: theme.spacing(-2), // Extend to edge for scrollbar\n  marginLeft: theme.spacing(-1), // Allow space for shadows on left\n  marginBottom: theme.spacing(-1), // Allow space for shadows on bottom\n  paddingRight: theme.spacing(2), // Compensate for negative margin\n  paddingLeft: theme.spacing(1), // Compensate for negative margin\n  paddingBottom: theme.spacing(1), // Compensate for negative margin\n}));\n\n/**\n * Props for the AssetManager component.\n * Provides a modal interface for selecting images from a grid display.\n * It supports both single and multiple image selection modes with configurable limits.\n *\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n *\n * ```tsx\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n */\nexport interface AssetManagerProps {\n  /** Whether the asset manager modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed or cancelled */\n  onClose: () => void;\n  /** Callback function when assets are selected */\n  onSelect?: (selectedAssets: Asset[]) => void;\n  /**\n   * Organization ID for fetching assets\n   */\n  orgId: string;\n  /** Brand ID for fetching assets */\n  brandId?: string;\n  /** Maximum number of assets that can be selected. Defaults to 1 */\n  maxSelect?: number;\n}\n\n// Create a QueryClient instance for the AssetManager component\n// This allows the component to be used without requiring clients to wrap it in QueryClientProvider\nconst queryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      refetchOnWindowFocus: false,\n      retry: 2,\n    },\n  },\n});\n\n/**\n * Inner component that contains the AssetManager logic.\n * Must be rendered inside QueryClientProvider to use React Query hooks.\n */\nconst AssetManagerContent: React.FC<AssetManagerProps> = ({\n  open,\n  onClose,\n  onSelect,\n  orgId,\n  brandId,\n  maxSelect = 1,\n}) => {\n  const [selectedTab, setSelectedTab] = useState<string>('library');\n  const { translate } = useTranslation();\n\n  // Fetch assets at the parent level to enable future reuse across tabs\n  const {\n    data: assetResponse,\n    isLoading: isLoadingAssets,\n    error: assetsError,\n  } = useGetAssets(orgId, open, brandId);\n\n  // Asset selection hook - manages selected assets from library\n  const { selectedAssetsMap, handleAssetClick, clearSelection, addAssetsToSelection } = useAssetSelection({\n    maxSelect,\n  });\n\n  // Asset upload hook - manages file uploads and upload state\n  const {\n    uploadedFiles,\n    uploadError,\n    isUploading,\n    handleUpload,\n    handleRemove,\n    handleSave,\n    clearUploadedFiles,\n    clearSaveUploadError,\n  } = useAssetUploadManager({\n    orgId,\n    brandId,\n    onUploadSuccess: (uploadedAssets) => {\n      // Add uploaded assets to selection and switch to library tab\n      addAssetsToSelection(uploadedAssets);\n      setSelectedTab('library');\n    },\n    getErrorMessage: () => translate('Failed_to_upload_assets_try_again'),\n  });\n\n  // Reset state when modal opens/closes\n  useEffect(() => {\n    if (!open) {\n      clearSelection();\n      clearUploadedFiles();\n      clearSaveUploadError();\n    }\n  }, [open, clearSelection, clearUploadedFiles, clearSaveUploadError]);\n\n  const handleCancel = useCallback((): void => {\n    clearSelection();\n    onClose();\n  }, [onClose, clearSelection]);\n\n  const handleSelectAssets = useCallback((): void => {\n    if (selectedAssetsMap.size === 0) {\n      onClose();\n      return;\n    }\n    const selectedAssets = Array.from(selectedAssetsMap.values());\n    if (onSelect && selectedAssets.length > 0) {\n      onSelect(selectedAssets);\n    }\n    clearSelection();\n    onClose();\n  }, [onSelect, selectedAssetsMap, onClose, clearSelection]);\n\n  const getTitle = (): string => {\n    switch (selectedTab) {\n      case 'library':\n        return translate('Select_Images');\n      default:\n        return translate('Upload_Images');\n    }\n  };\n\n  // Tab-specific action button configurations\n  const actionButtons = useMemo<ModalAction[]>(() => {\n    // Common cancel button configuration\n    const cancelButton: ModalAction = {\n      label: translate('Cancel'),\n      onClick: handleCancel,\n      variant: 'secondary',\n      tone: 'neutral',\n      id: 'asset-manager-cancel',\n    };\n\n    const tabActions: Record<string, ModalAction[]> = {\n      library: [\n        cancelButton,\n        {\n          label: translate('Select'),\n          onClick: handleSelectAssets,\n          variant: 'primary',\n          id: 'asset-manager-select',\n        },\n      ],\n      upload: [\n        cancelButton,\n        {\n          label: translate('Save'),\n          onClick: handleSave,\n          loading: isUploading,\n          variant: 'primary',\n          id: 'asset-manager-upload',\n        },\n      ],\n    };\n\n    return tabActions[selectedTab] ?? (tabActions['library'] as ModalAction[]);\n  }, [selectedTab, isUploading, handleCancel, handleSelectAssets, handleSave, translate]);\n\n  return (\n    <Modal actions={actionButtons} onClose={handleCancel} open={open} size=\"large\" title={getTitle()}>\n      <Tabs\n        fdKey=\"asset-manager-tabs\"\n        onChange={(_, value: string) => {\n          setSelectedTab(value);\n          clearUploadedFiles();\n        }}\n        value={selectedTab}\n      >\n        <Tab label={translate('Upload')} value=\"upload\" />\n        <Tab label={translate('Library')} value=\"library\" />\n      </Tabs>\n      <StyledScrollableContent>\n        {selectedTab === 'library' ? (\n          <LibraryTabContent\n            assets={assetResponse?.data}\n            error={assetsError}\n            isLoading={isLoadingAssets}\n            onAssetClick={handleAssetClick}\n            selectedAssets={selectedAssetsMap}\n          />\n        ) : (\n          <UploadAssetContent\n            error={uploadError}\n            files={uploadedFiles}\n            onRemove={handleRemove}\n            onUpload={handleUpload}\n          />\n        )}\n      </StyledScrollableContent>\n    </Modal>\n  );\n};\n\n/**\n * AssetManager component used to select assets from the library or upload new assets.\n * Can manage assets at a organization or brand level.\n *\n * @example\n * ```tsx\n * <AssetManager\n *   open={isOpen}\n *   onClose={() => setIsOpen(false)}\n *   onSelect={(assets) => console.log(assets)}\n *   orgId=\"org123\"\n *   brandId=\"brand456\"\n *   maxSelect={3}\n * />\n * ```\n */\nconst AssetManager: React.FC<AssetManagerProps> = (props) => {\n  return (\n    <QueryClientProvider client={queryClient}>\n      <AssetManagerContent {...props} />\n    </QueryClientProvider>\n  );\n};\n\nexport type { Asset, AssetMetadata, AssetMetadataDimensions, AssetType } from './types/assets.type';\nexport default AssetManager;\n"],"names":["StyledScrollableContent","styled","Box","theme","height","overflowY","marginTop","spacing","marginRight","marginLeft","marginBottom","paddingRight","paddingLeft","paddingBottom","queryClient","QueryClient","defaultOptions","queries","refetchOnWindowFocus","retry","AssetManagerContent","open","onClose","onSelect","orgId","brandId","maxSelect","selectedTab","setSelectedTab","useState","translate","useTranslation","data","assetResponse","isLoading","isLoadingAssets","error","assetsError","useGetAssets","selectedAssetsMap","handleAssetClick","clearSelection","addAssetsToSelection","useAssetSelection","uploadedFiles","uploadError","isUploading","handleUpload","handleRemove","handleSave","clearUploadedFiles","clearSaveUploadError","useAssetUploadManager","onUploadSuccess","uploadedAssets","getErrorMessage","useEffect","handleCancel","useCallback","handleSelectAssets","size","selectedAssets","Array","from","values","length","actionButtons","useMemo","cancelButton","label","onClick","variant","tone","id","tabActions","library","upload","loading","_jsxs","Modal","actions","title","Tabs","fdKey","onChange","_","value","_jsx","Tab","children","LibraryTabContent","assets","onAssetClick","UploadAssetContent","files","onRemove","onUpload","AssetManager","props","QueryClientProvider","client"],"mappings":"kwBAsBA,MAAMA,EAA0BC,EAAOC,EAAPD,CAAY,EAAGE,YAAO,CACpDC,OAAQ,qBACRC,UAAW,OACXC,UAAWH,EAAMI,QAAQ,GACzBC,YAAaL,EAAMI,YACnBE,WAAYN,EAAMI,YAClBG,aAAcP,EAAMI,YACpBI,aAAcR,EAAMI,QAAQ,GAC5BK,YAAaT,EAAMI,QAAQ,GAC3BM,cAAeV,EAAMI,QAAQ,MAgCzBO,EAAc,IAAIC,EAAY,CAClCC,eAAgB,CACdC,QAAS,CACPC,sBAAsB,EACtBC,MAAO,MASPC,EAAmD,EACvDC,OACAC,UACAC,WACAC,QACAC,UACAC,YAAY,MAEZ,MAAOC,EAAaC,GAAkBC,EAAiB,YACjDC,UAAEA,GAAcC,KAIpBC,KAAMC,EACNC,UAAWC,EACXC,MAAOC,GACLC,EAAad,EAAOH,EAAMI,IAGxBc,kBAAEA,EAAiBC,iBAAEA,EAAgBC,eAAEA,EAAcC,qBAAEA,GAAyBC,EAAkB,CACtGjB,eAIIkB,cACJA,EAAaC,YACbA,EAAWC,YACXA,EAAWC,aACXA,EAAYC,aACZA,EAAYC,WACZA,EAAUC,mBACVA,EAAkBC,qBAClBA,GACEC,EAAsB,CACxB5B,QACAC,UACA4B,gBAAkBC,IAEhBZ,EAAqBY,GACrB1B,EAAe,YAEjB2B,gBAAiB,IAAMzB,EAAU,uCAInC0B,EAAU,KACHnC,IACHoB,IACAS,IACAC,MAED,CAAC9B,EAAMoB,EAAgBS,EAAoBC,IAE9C,MAAMM,EAAeC,EAAY,KAC/BjB,IACAnB,KACC,CAACA,EAASmB,IAEPkB,EAAqBD,EAAY,KACrC,GAA+B,IAA3BnB,EAAkBqB,KAEpB,YADAtC,IAGF,MAAMuC,EAAiBC,MAAMC,KAAKxB,EAAkByB,UAChDzC,GAAYsC,EAAeI,OAAS,GACtC1C,EAASsC,GAEXpB,IACAnB,KACC,CAACC,EAAUgB,EAAmBjB,EAASmB,IAYpCyB,EAAgBC,EAAuB,KAE3C,MAAMC,EAA4B,CAChCC,MAAOvC,EAAU,UACjBwC,QAASb,EACTc,QAAS,YACTC,KAAM,UACNC,GAAI,wBAGAC,EAA4C,CAChDC,QAAS,CACPP,EACA,CACEC,MAAOvC,EAAU,UACjBwC,QAASX,EACTY,QAAS,UACTE,GAAI,yBAGRG,OAAQ,CACNR,EACA,CACEC,MAAOvC,EAAU,QACjBwC,QAASrB,EACT4B,QAAS/B,EACTyB,QAAS,UACTE,GAAI,0BAKV,OAAOC,EAAW/C,IAAiB+C,EAAoB,SACtD,CAAC/C,EAAamB,EAAaW,EAAcE,EAAoBV,EAAYnB,IAE5E,OACEgD,EAACC,EAAK,CAACC,QAASd,EAAe5C,QAASmC,EAAcpC,KAAMA,EAAMuC,KAAK,QAAQqB,MA3CpEnD,EADJ,YADCH,EAEa,gBAEA,2BA0CnBmD,EAACI,GACCC,MAAM,qBACNC,SAAU,CAACC,EAAGC,KACZ1D,EAAe0D,GACfpC,KAEFoC,MAAO3D,YAEP4D,EAACC,GAAInB,MAAOvC,EAAU,UAAWwD,MAAM,WACvCC,EAACC,EAAG,CAACnB,MAAOvC,EAAU,WAAYwD,MAAM,eAE1CC,EAACvF,EAAuB,CAAAyF,SACL,YAAhB9D,EACC4D,EAACG,EAAiB,CAChBC,OAAQ1D,GAAeD,KACvBI,MAAOC,EACPH,UAAWC,EACXyD,aAAcpD,EACdqB,eAAgBtB,IAGlBgD,EAACM,GACCzD,MAAOS,EACPiD,MAAOlD,EACPmD,SAAU/C,EACVgD,SAAUjD,UAwBhBkD,EAA6CC,GAE/CX,EAACY,EAAmB,CAACC,OAAQtF,EAAW2E,SACtCF,EAACnE,EAAmB,IAAK8E"}

package/dist/components/organisms/FileUpload/components/FileDropZone.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material/Box/Box"),i=require("@mui/material/Stack/Stack"),a=require("@mui/material/styles/styled"),l=require("@mui/material/styles/useTheme"),n=require("../../../atoms/Button/index.cjs.js"),o=require("@mui/material/FormHelperText"),s=require("@mui/material/Typography"),c=require("../../../../icons/CancelCircle/index.cjs.js"),u=require("../../../../icons/Upload/index.cjs.js"),d=require("../../../../providers/TranslationProvider.cjs.js");const p=a(t,{shouldForwardProp:e=>"hasError"!==e})((({theme:e,hasError:r})=>({flex:"1",display:"flex",flexDirection:"column",height:"100%",boxSizing:"border-box",alignItems:"center",justifyContent:"center",padding:e.spacing(4),borderRadius:e.radius["radius-8"],border:r?`1px solid ${e.palette.semantic.stroke["stroke-error-weak"]}`:`1px dashed ${e.palette.semantic.stroke["stroke-strong"]}`,background:r?e.palette.semantic.fill["fill-error-weak"]:e.palette.semantic.fill["fill-weaker"],cursor:"pointer",transition:"all 0.2s ease-in-out",[e.breakpoints.only("mobile")]:{justifyContent:"center",gap:e.spacing(4)}}))),m=a("input")({clip:"rect(0 0 0 0)",clipPath:"inset(50%)",height:1,overflow:"hidden",position:"absolute",bottom:0,left:0,whiteSpace:"nowrap",width:1}),f=a(t,{shouldForwardProp:e=>"hasError"!==e})((({hasError:e,theme:r})=>({display:"flex",flexDirection:"column",width:"48px",height:"48px",padding:"0px",justifyContent:"center",alignItems:"center",borderRadius:r.radius["radius-32"],backgroundColor:e?r.palette.semantic.fill["fill-error-weak"]:r.palette.semantic.fill["fill-primary-weak"]}))),h=a(n.Button)({alignSelf:"center"});module.exports=({handleUpload:t,multiple:a,maxFiles:n,maxFileSize:g,allowedFileTypes:x=[],disabled:b=!1,error:k,dragActiveText:j,dragInactiveText:y,browseButtonText:v,invalidFileTypesText:C,invalidFileSizeText:w,invalidFileCountText:_})=>{const T=l(),[F,D]=r.useState(!1),S=r.useRef(null),[q,P]=r.useState(null),{translate:E}=d.useTranslation(),z=q??k,B=r.useMemo((()=>{if(x.length)return x.filter(Boolean).map((e=>e.startsWith(".")?e:`.${e}`)).join(",")}),[x]),I=r.useCallback((e=>{if(g&&e.size>g)return P(w||E("File_size_is_too_large",{maxFileSize:g?.toString()||""})),!1;const r=e.name.split(".").pop()?.toLowerCase();return!(x.length>0&&r&&!x.includes(r))||(P(C||E("File_type_is_not_allowed",{allowedFileTypes:x.join(", ")})),!1)}),[g,x,C,w,E]),R=r.useCallback((e=>{const r=Array.from(e),i=[];n&&r.length>n?P(_||E("Too_many_files_selected",{maxFiles:n.toString()})):(r.forEach((e=>{I(e)&&i.push(e)})),i.length>0&&(P(null),t(i)))}),[n,I,t,_,E]),$=r.useCallback((e=>{e.preventDefault(),e.stopPropagation(),b||D(!0)}),[b]),A=r.useCallback((e=>{e.preventDefault(),e.stopPropagation(),b||D(!1)}),[b]),L=r.useCallback((e=>{e.preventDefault(),e.stopPropagation()}),[]),U=r.useCallback((e=>{if(e.preventDefault(),e.stopPropagation(),b)return;D(!1);const r=e.dataTransfer.files;r&&r.length>0&&R(r)}),[b,R]),H=r.useCallback((e=>{if(b)return;const r=e.target.files;r&&r.length>0&&R(r),S.current&&(S.current.value="")}),[b,R]),K=r.useCallback((e=>{e.preventDefault(),e.stopPropagation(),S.current?.click()}),[]),M=r.useCallback((()=>{b||S.current?.click()}),[b]);return e.jsxs(e.Fragment,{children:[!!z&&e.jsxs(o,{error:!0,children:[e.jsx(c,{}),z]}),e.jsxs(p,{"data-fd":"file-drop-zone",hasError:!!z,onClick:b?void 0:M,onDragEnter:$,onDragLeave:A,onDragOver:L,onDrop:U,children:[e.jsx(m,{ref:S,accept:B,"data-fd":"file-upload-input",disabled:b,multiple:a,onChange:H,type:"file"}),e.jsxs(i,{alignItems:"center",direction:"column",gap:T.spacing(2),justifyContent:"center",width:"100%",children:[e.jsx(f,{hasError:!!z,children:e.jsx(u,{color:z?T.palette.semantic.icon["icon-error"]:T.palette.semantic.icon["icon-primary"]})}),e.jsx(s,{variant:"b1Strong",children:F?j||E("Drop_files_here"):y||E("Drag_and_drop_files_here")}),e.jsx(h,{disabled:b,fdKey:"file-upload-btn",onClick:b?void 0:K,variant:"secondary",children:v||E("Browse_files")})]})]})]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material/Box/Box"),i=require("@mui/material/Stack/Stack"),a=require("@mui/material/styles/styled"),l=require("@mui/material/styles/useTheme"),n=require("../../../atoms/Button/index.cjs.js"),o=require("@mui/material/FormHelperText"),s=require("@mui/material/Typography"),c=require("../../../../icons/CancelCircle/index.cjs.js"),u=require("../../../../icons/Upload/index.cjs.js"),d=require("../../../../providers/TranslationProvider.cjs.js");const p=a(t,{shouldForwardProp:e=>"hasError"!==e})(({theme:e,hasError:r})=>({flex:"1",display:"flex",flexDirection:"column",height:"100%",boxSizing:"border-box",alignItems:"center",justifyContent:"center",padding:e.spacing(4),borderRadius:e.radius["radius-8"],border:r?`1px solid ${e.palette.semantic.stroke["stroke-error-weak"]}`:`1px dashed ${e.palette.semantic.stroke["stroke-strong"]}`,background:r?e.palette.semantic.fill["fill-error-weak"]:e.palette.semantic.fill["fill-weaker"],cursor:"pointer",transition:"all 0.2s ease-in-out",[e.breakpoints.only("mobile")]:{justifyContent:"center",gap:e.spacing(4)}})),m=a("input")({clip:"rect(0 0 0 0)",clipPath:"inset(50%)",height:1,overflow:"hidden",position:"absolute",bottom:0,left:0,whiteSpace:"nowrap",width:1}),f=a(t,{shouldForwardProp:e=>"hasError"!==e})(({hasError:e,theme:r})=>({display:"flex",flexDirection:"column",width:"48px",height:"48px",padding:"0px",justifyContent:"center",alignItems:"center",borderRadius:r.radius["radius-32"],backgroundColor:e?r.palette.semantic.fill["fill-error-weak"]:r.palette.semantic.fill["fill-primary-weak"]})),h=a(n.Button)({alignSelf:"center"});module.exports=({handleUpload:t,multiple:a,maxFiles:n,maxFileSize:g,allowedFileTypes:x=[],disabled:b=!1,error:k,dragActiveText:j,dragInactiveText:y,browseButtonText:v,invalidFileTypesText:C,invalidFileSizeText:w,invalidFileCountText:_})=>{const T=l(),[F,D]=r.useState(!1),S=r.useRef(null),[q,P]=r.useState(null),{translate:E}=d.useTranslation(),z=q??k,B=r.useMemo(()=>{if(x.length)return x.filter(Boolean).map(e=>e.startsWith(".")?e:`.${e}`).join(",")},[x]),I=r.useCallback(e=>{if(g&&e.size>g)return P(w||E("File_size_is_too_large",{maxFileSize:g?.toString()||""})),!1;const r=e.name.split(".").pop()?.toLowerCase();return!(x.length>0&&r&&!x.includes(r))||(P(C||E("File_type_is_not_allowed",{allowedFileTypes:x.join(", ")})),!1)},[g,x,C,w,E]),R=r.useCallback(e=>{const r=Array.from(e),i=[];n&&r.length>n?P(_||E("Too_many_files_selected",{maxFiles:n.toString()})):(r.forEach(e=>{I(e)&&i.push(e)}),i.length>0&&(P(null),t(i)))},[n,I,t,_,E]),$=r.useCallback(e=>{e.preventDefault(),e.stopPropagation(),b||D(!0)},[b]),A=r.useCallback(e=>{e.preventDefault(),e.stopPropagation(),b||D(!1)},[b]),L=r.useCallback(e=>{e.preventDefault(),e.stopPropagation()},[]),U=r.useCallback(e=>{if(e.preventDefault(),e.stopPropagation(),b)return;D(!1);const r=e.dataTransfer.files;r&&r.length>0&&R(r)},[b,R]),H=r.useCallback(e=>{if(b)return;const r=e.target.files;r&&r.length>0&&R(r),S.current&&(S.current.value="")},[b,R]),K=r.useCallback(e=>{e.preventDefault(),e.stopPropagation(),S.current?.click()},[]),M=r.useCallback(()=>{b||S.current?.click()},[b]);return e.jsxs(e.Fragment,{children:[!!z&&e.jsxs(o,{error:!0,children:[e.jsx(c,{}),z]}),e.jsxs(p,{"data-fd":"file-drop-zone",hasError:!!z,onClick:b?void 0:M,onDragEnter:$,onDragLeave:A,onDragOver:L,onDrop:U,children:[e.jsx(m,{ref:S,accept:B,"data-fd":"file-upload-input",disabled:b,multiple:a,onChange:H,type:"file"}),e.jsxs(i,{alignItems:"center",direction:"column",gap:T.spacing(2),justifyContent:"center",width:"100%",children:[e.jsx(f,{hasError:!!z,children:e.jsx(u,{color:z?T.palette.semantic.icon["icon-error"]:T.palette.semantic.icon["icon-primary"]})}),e.jsx(s,{variant:"b1Strong",children:F?j||E("Drop_files_here"):y||E("Drag_and_drop_files_here")}),e.jsx(h,{disabled:b,fdKey:"file-upload-btn",onClick:b?void 0:K,variant:"secondary",children:v||E("Browse_files")})]})]})]})};
 //# sourceMappingURL=FileDropZone.cjs.js.map

package/dist/components/organisms/FileUpload/components/FileDropZone.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDropZone.cjs.js","sources":["../../../../../src/components/organisms/FileUpload/components/FileDropZone.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from 'react';\n\nimport Box from '@mui/material/Box/Box';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport useTheme from '@mui/material/styles/useTheme';\n\nimport FlipdishButton from '@fd/components/atoms/Button';\nimport FlipdishFormHelperText from '@fd/components/atoms/FormHelperText';\nimport FlipdishTypography from '@fd/components/atoms/Typography';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport UploadIcon from '@fd/icons/Upload';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nconst StyledUploadAreaContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'hasError',\n})<{ hasError?: boolean }>(({ theme, hasError }) => ({\n  flex: '1',\n  display: 'flex',\n  flexDirection: 'column',\n  height: '100%',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'center',\n  padding: theme.spacing(4),\n  borderRadius: theme.radius['radius-8'],\n  border: hasError\n    ? `1px solid ${theme.palette.semantic.stroke['stroke-error-weak']}`\n    : `1px dashed ${theme.palette.semantic.stroke['stroke-strong']}`,\n  background: hasError\n    ? theme.palette.semantic.fill['fill-error-weak']\n    : theme.palette.semantic.fill['fill-weaker'],\n  cursor: 'pointer',\n  transition: 'all 0.2s ease-in-out',\n  [theme.breakpoints.only('mobile')]: {\n    justifyContent: 'center',\n    gap: theme.spacing(4),\n  },\n}));\n\nconst VisuallyHiddenInput = styled('input')({\n  clip: 'rect(0 0 0 0)',\n  clipPath: 'inset(50%)',\n  height: 1,\n  overflow: 'hidden',\n  position: 'absolute',\n  bottom: 0,\n  left: 0,\n  whiteSpace: 'nowrap',\n  width: 1,\n});\n\nconst StyledIconContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'hasError',\n})<{ hasError?: boolean }>(({ hasError, theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  width: '48px',\n  height: '48px',\n  padding: '0px',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: theme.radius['radius-32'],\n  backgroundColor: hasError\n    ? theme.palette.semantic.fill['fill-error-weak']\n    : theme.palette.semantic.fill['fill-primary-weak'],\n}));\n\nconst StyledButton = styled(FlipdishButton)({\n  alignSelf: 'center',\n});\n\n/**\n * Props for the FileDropZone component.\n * Provides a drag-and-drop file upload interface with validation.\n */\nexport interface FileDropZoneProps {\n  /**\n   * Callback function invoked when files are successfully validated and ready to upload.\n   * @param files - Array of File objects to be uploaded\n   */\n  handleUpload: (files: File[]) => void;\n\n  /**\n   * Whether multiple files can be selected at once.\n   * @default true\n   */\n  multiple?: boolean;\n\n  /**\n   * Maximum number of files that can be selected in a single operation.\n   * If exceeded, an error message will be displayed.\n   * @default undefined (no limit)\n   */\n  maxFiles?: number;\n\n  /**\n   * Maximum file size allowed in bytes.\n   * Files exceeding this size will be rejected with an error message.\n   * Example: 10 * 1024 * 1024 for 10MB\n   * @default undefined (no limit)\n   */\n  maxFileSize?: number;\n\n  /**\n   * Array of allowed file extensions (without dots).\n   * Files with extensions not in this list will be rejected.\n   * Example: ['jpg', 'png', 'pdf']\n   * @default [] (all file types allowed)\n   */\n  allowedFileTypes?: string[];\n\n  /**\n   * Whether the file drop zone is disabled.\n   * When true, prevents all file selection and drag-and-drop interactions.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Optional custom error message to display at the top.\n   */\n  error?: string | null;\n\n  /**\n   * Text displayed when files are being dragged over the drop zone.\n   * @default 'Drop files here'\n   */\n  dragActiveText?: string;\n\n  /**\n   * Text displayed when no files are being dragged (idle state).\n   * @default 'Drag and drop files here'\n   */\n  dragInactiveText?: string;\n\n  /**\n   * Text displayed on the browse/upload button.\n   * @default 'Browse files'\n   */\n  browseButtonText?: string;\n\n  /**\n   * Text displayed when a file type is not allowed.\n   * @default 'File type is not allowed. Allowed types: {allowedFileTypes}'\n   */\n  invalidFileTypesText?: string;\n\n  /**\n   * Text displayed when a file size is too large.\n   * @default 'File size is too large. Maximum size: {maxFileSize}'\n   */\n  invalidFileSizeText?: string;\n\n  /**\n   * Text displayed when too many files are selected.\n   * @default 'Too many files selected. Maximum allowed: {maxFiles}'\n   */\n  invalidFileCountText?: string;\n}\n\nconst FileDropZone: React.FC<FileDropZoneProps> = ({\n  handleUpload,\n  multiple,\n  maxFiles,\n  maxFileSize,\n  allowedFileTypes = [],\n  disabled = false,\n  error,\n  dragActiveText,\n  dragInactiveText,\n  browseButtonText,\n  invalidFileTypesText,\n  invalidFileSizeText,\n  invalidFileCountText,\n}) => {\n  const theme = useTheme();\n  const [isDragActive, setIsDragActive] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const [validationError, setValidationError] = useState<string | null>(null);\n  const { translate } = useTranslation();\n  const displayError = validationError ?? error;\n  const inputAccept = useMemo(() => {\n    if (!allowedFileTypes.length) return undefined;\n\n    return allowedFileTypes\n      .filter(Boolean)\n      .map((ext) => (ext.startsWith('.') ? ext : `.${ext}`))\n      .join(',');\n  }, [allowedFileTypes]);\n\n  const validateFile = useCallback(\n    (file: File): boolean => {\n      // Check file size\n      if (maxFileSize && file.size > maxFileSize) {\n        setValidationError(\n          invalidFileSizeText ||\n            translate('File_size_is_too_large', { maxFileSize: maxFileSize?.toString() || '' }),\n        );\n        return false;\n      }\n\n      // Check file type\n      const fileExtension = file.name.split('.').pop()?.toLowerCase();\n      if (allowedFileTypes.length > 0 && fileExtension && !allowedFileTypes.includes(fileExtension)) {\n        setValidationError(\n          invalidFileTypesText ||\n            translate('File_type_is_not_allowed', { allowedFileTypes: allowedFileTypes.join(', ') }),\n        );\n        return false;\n      }\n\n      return true;\n    },\n    [maxFileSize, allowedFileTypes, invalidFileTypesText, invalidFileSizeText, translate],\n  );\n\n  const processFiles = useCallback(\n    (files: File[] | FileList) => {\n      const fileArray = Array.from(files);\n      const validFiles: File[] = [];\n\n      // Check max files limit\n      if (maxFiles && fileArray.length > maxFiles) {\n        setValidationError(\n          invalidFileCountText || translate('Too_many_files_selected', { maxFiles: maxFiles.toString() }),\n        );\n        return;\n      }\n\n      // Validate each file\n      fileArray.forEach((file) => {\n        if (validateFile(file)) {\n          validFiles.push(file);\n        }\n      });\n\n      if (validFiles.length > 0) {\n        setValidationError(null);\n        handleUpload(validFiles);\n      }\n    },\n    [maxFiles, validateFile, handleUpload, invalidFileCountText, translate],\n  );\n\n  const handleDragEnter = useCallback(\n    (e: React.DragEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (disabled) return;\n\n      setIsDragActive(true);\n    },\n    [disabled],\n  );\n\n  const handleDragLeave = useCallback(\n    (e: React.DragEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (disabled) return;\n\n      setIsDragActive(false);\n    },\n    [disabled],\n  );\n\n  const handleDragOver = useCallback((e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n  }, []);\n\n  const handleDrop = useCallback(\n    (e: React.DragEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (disabled) return;\n\n      setIsDragActive(false);\n\n      const files = e.dataTransfer.files;\n      if (files && files.length > 0) {\n        processFiles(files);\n      }\n    },\n    [disabled, processFiles],\n  );\n\n  const handleFileInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (disabled) return;\n\n      const files = e.target.files;\n      if (files && files.length > 0) {\n        processFiles(files);\n      }\n\n      // Reset input value to allow selecting the same file again\n      if (fileInputRef.current) {\n        fileInputRef.current.value = '';\n      }\n    },\n    [disabled, processFiles],\n  );\n\n  const handleButtonClick = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    fileInputRef.current?.click();\n  }, []);\n\n  const handleContainerClick = useCallback(() => {\n    if (disabled) return;\n\n    fileInputRef.current?.click();\n  }, [disabled]);\n\n  return (\n    <>\n      {!!displayError && (\n        <FlipdishFormHelperText error>\n          <CancelCircleIcon />\n          {displayError}\n        </FlipdishFormHelperText>\n      )}\n      <StyledUploadAreaContainer\n        data-fd=\"file-drop-zone\"\n        hasError={!!displayError}\n        onClick={disabled ? undefined : handleContainerClick}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n      >\n        <VisuallyHiddenInput\n          ref={fileInputRef}\n          accept={inputAccept}\n          data-fd=\"file-upload-input\"\n          disabled={disabled}\n          multiple={multiple}\n          onChange={handleFileInputChange}\n          type=\"file\"\n        />\n\n        <Stack\n          alignItems=\"center\"\n          direction=\"column\"\n          gap={theme.spacing(2)}\n          justifyContent=\"center\"\n          width=\"100%\"\n        >\n          <StyledIconContainer hasError={!!displayError}>\n            <UploadIcon\n              color={\n                displayError\n                  ? theme.palette.semantic.icon['icon-error']\n                  : theme.palette.semantic.icon['icon-primary']\n              }\n            />\n          </StyledIconContainer>\n\n          <FlipdishTypography variant=\"b1Strong\">\n            {isDragActive\n              ? dragActiveText || translate('Drop_files_here')\n              : dragInactiveText || translate('Drag_and_drop_files_here')}\n          </FlipdishTypography>\n\n          <StyledButton\n            disabled={disabled}\n            fdKey=\"file-upload-btn\"\n            onClick={disabled ? undefined : handleButtonClick}\n            variant=\"secondary\"\n          >\n            {browseButtonText || translate('Browse_files')}\n          </StyledButton>\n        </Stack>\n      </StyledUploadAreaContainer>\n    </>\n  );\n};\n\nexport default FileDropZone;\n"],"names":["StyledUploadAreaContainer","styled","Box","shouldForwardProp","prop","theme","hasError","flex","display","flexDirection","height","boxSizing","alignItems","justifyContent","padding","spacing","borderRadius","radius","border","palette","semantic","stroke","background","fill","cursor","transition","breakpoints","only","gap","VisuallyHiddenInput","clip","clipPath","overflow","position","bottom","left","whiteSpace","width","StyledIconContainer","backgroundColor","StyledButton","FlipdishButton","alignSelf","handleUpload","multiple","maxFiles","maxFileSize","allowedFileTypes","disabled","error","dragActiveText","dragInactiveText","browseButtonText","invalidFileTypesText","invalidFileSizeText","invalidFileCountText","useTheme","isDragActive","setIsDragActive","useState","fileInputRef","useRef","validationError","setValidationError","translate","useTranslation","displayError","inputAccept","useMemo","length","filter","Boolean","map","ext","startsWith","join","validateFile","useCallback","file","size","toString","fileExtension","name","split","pop","toLowerCase","includes","processFiles","files","fileArray","Array","from","validFiles","forEach","push","handleDragEnter","e","preventDefault","stopPropagation","handleDragLeave","handleDragOver","handleDrop","dataTransfer","handleFileInputChange","target","current","value","handleButtonClick","event","click","handleContainerClick","_jsxs","_Fragment","children","FlipdishFormHelperText","_jsx","CancelCircleIcon","onClick","undefined","onDragEnter","onDragLeave","onDragOver","onDrop","ref","accept","onChange","type","Stack","direction","UploadIcon","color","icon","FlipdishTypography","variant","fdKey"],"mappings":"2gBAcA,MAAMA,EAA4BC,EAAOC,EAAK,CAC5CC,kBAAoBC,GAAkB,aAATA,GADGH,EAEP,EAAGI,QAAOC,eAAU,CAC7CC,KAAM,IACNC,QAAS,OACTC,cAAe,SACfC,OAAQ,OACRC,UAAW,aACXC,WAAY,SACZC,eAAgB,SAChBC,QAAST,EAAMU,QAAQ,GACvBC,aAAcX,EAAMY,OAAO,YAC3BC,OAAQZ,EACJ,aAAaD,EAAMc,QAAQC,SAASC,OAAO,uBAC3C,cAAchB,EAAMc,QAAQC,SAASC,OAAO,mBAChDC,WAAYhB,EACRD,EAAMc,QAAQC,SAASG,KAAK,mBAC5BlB,EAAMc,QAAQC,SAASG,KAAK,eAChCC,OAAQ,UACRC,WAAY,uBACZ,CAACpB,EAAMqB,YAAYC,KAAK,WAAY,CAClCd,eAAgB,SAChBe,IAAKvB,EAAMU,QAAQ,QAIjBc,EAAsB5B,EAAO,QAAPA,CAAgB,CAC1C6B,KAAM,gBACNC,SAAU,aACVrB,OAAQ,EACRsB,SAAU,SACVC,SAAU,WACVC,OAAQ,EACRC,KAAM,EACNC,WAAY,SACZC,MAAO,IAGHC,EAAsBrC,EAAOC,EAAK,CACtCC,kBAAoBC,GAAkB,aAATA,GADHH,EAED,EAAGK,WAAUD,YAAO,CAC7CG,QAAS,OACTC,cAAe,SACf4B,MAAO,OACP3B,OAAQ,OACRI,QAAS,MACTD,eAAgB,SAChBD,WAAY,SACZI,aAAcX,EAAMY,OAAO,aAC3BsB,gBAAiBjC,EACbD,EAAMc,QAAQC,SAASG,KAAK,mBAC5BlB,EAAMc,QAAQC,SAASG,KAAK,yBAG5BiB,EAAevC,EAAOwC,EAAAA,OAAPxC,CAAuB,CAC1CyC,UAAW,0BA4FqC,EAChDC,eACAC,WACAC,WACAC,cACAC,mBAAmB,GACnBC,YAAW,EACXC,QACAC,iBACAC,mBACAC,mBACAC,uBACAC,sBACAC,2BAEA,MAAMlD,EAAQmD,KACPC,EAAcC,GAAmBC,EAAAA,UAAS,GAC3CC,EAAeC,EAAAA,OAAyB,OACvCC,EAAiBC,GAAsBJ,EAAAA,SAAwB,OAChEK,UAAEA,GAAcC,mBAChBC,EAAeJ,GAAmBb,EAClCkB,EAAcC,EAAAA,SAAQ,KAC1B,GAAKrB,EAAiBsB,OAEtB,OAAOtB,EACJuB,OAAOC,SACPC,KAAKC,GAASA,EAAIC,WAAW,KAAOD,EAAM,IAAIA,MAC9CE,KAAK,OACP,CAAC5B,IAEE6B,EAAeC,eAClBC,IAEC,GAAIhC,GAAegC,EAAKC,KAAOjC,EAK7B,OAJAiB,EACET,GACEU,EAAU,yBAA0B,CAAElB,YAAaA,GAAakC,YAAc,OAE3E,EAIT,MAAMC,EAAgBH,EAAKI,KAAKC,MAAM,KAAKC,OAAOC,cAClD,QAAItC,EAAiBsB,OAAS,GAAKY,IAAkBlC,EAAiBuC,SAASL,MAC7ElB,EACEV,GACEW,EAAU,2BAA4B,CAAEjB,iBAAkBA,EAAiB4B,KAAK,UAE7E,KAKX,CAAC7B,EAAaC,EAAkBM,EAAsBC,EAAqBU,IAGvEuB,EAAeV,eAClBW,IACC,MAAMC,EAAYC,MAAMC,KAAKH,GACvBI,EAAqB,GAGvB/C,GAAY4C,EAAUpB,OAASxB,EACjCkB,EACER,GAAwBS,EAAU,0BAA2B,CAAEnB,SAAUA,EAASmC,eAMtFS,EAAUI,SAASf,IACbF,EAAaE,IACfc,EAAWE,KAAKhB,MAIhBc,EAAWvB,OAAS,IACtBN,EAAmB,MACnBpB,EAAaiD,OAGjB,CAAC/C,EAAU+B,EAAcjC,EAAcY,EAAsBS,IAGzD+B,EAAkBlB,eACrBmB,IACCA,EAAEC,iBACFD,EAAEE,kBAEElD,GAEJU,GAAgB,KAElB,CAACV,IAGGmD,EAAkBtB,eACrBmB,IACCA,EAAEC,iBACFD,EAAEE,kBAEElD,GAEJU,GAAgB,KAElB,CAACV,IAGGoD,EAAiBvB,eAAamB,IAClCA,EAAEC,iBACFD,EAAEE,oBACD,IAEGG,EAAaxB,eAChBmB,IAIC,GAHAA,EAAEC,iBACFD,EAAEE,kBAEElD,EAAU,OAEdU,GAAgB,GAEhB,MAAM8B,EAAQQ,EAAEM,aAAad,MACzBA,GAASA,EAAMnB,OAAS,GAC1BkB,EAAaC,KAGjB,CAACxC,EAAUuC,IAGPgB,EAAwB1B,eAC3BmB,IACC,GAAIhD,EAAU,OAEd,MAAMwC,EAAQQ,EAAEQ,OAAOhB,MACnBA,GAASA,EAAMnB,OAAS,GAC1BkB,EAAaC,GAIX5B,EAAa6C,UACf7C,EAAa6C,QAAQC,MAAQ,MAGjC,CAAC1D,EAAUuC,IAGPoB,EAAoB9B,eAAa+B,IACrCA,EAAMX,iBACNW,EAAMV,kBACNtC,EAAa6C,SAASI,UACrB,IAEGC,EAAuBjC,EAAAA,aAAY,KACnC7B,GAEJY,EAAa6C,SAASI,UACrB,CAAC7D,IAEJ,OACE+D,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,GACK/C,GACD6C,OAACG,EAAsB,CAACjE,OAAK,EAAAgE,SAAA,CAC3BE,EAAAA,IAACC,EAAgB,CAAA,GAChBlD,KAGL6C,EAAAA,KAAC/G,EAAyB,CAAA,UAChB,iBACRM,WAAY4D,EACZmD,QAASrE,OAAWsE,EAAYR,EAChCS,YAAaxB,EACbyB,YAAarB,EACbsB,WAAYrB,EACZsB,OAAQrB,EAAUY,SAAA,CAElBE,MAACtF,EAAmB,CAClB8F,IAAK/D,EACLgE,OAAQzD,EAAW,UACX,oBACRnB,SAAUA,EACVJ,SAAUA,EACViF,SAAUtB,EACVuB,KAAK,SAGPf,EAAAA,KAACgB,EAAK,CACJnH,WAAW,SACXoH,UAAU,SACVpG,IAAKvB,EAAMU,QAAQ,GACnBF,eAAe,SACfwB,MAAM,OAAM4E,SAAA,CAEZE,EAAAA,IAAC7E,EAAmB,CAAChC,WAAY4D,EAAY+C,SAC3CE,EAAAA,IAACc,EAAU,CACTC,MACEhE,EACI7D,EAAMc,QAAQC,SAAS+G,KAAK,cAC5B9H,EAAMc,QAAQC,SAAS+G,KAAK,oBAKtChB,EAAAA,IAACiB,GAAmBC,QAAQ,WAAUpB,SACnCxD,EACGP,GAAkBc,EAAU,mBAC5Bb,GAAoBa,EAAU,8BAGpCmD,EAAAA,IAAC3E,EAAY,CACXQ,SAAUA,EACVsF,MAAM,kBACNjB,QAASrE,OAAWsE,EAAYX,EAChC0B,QAAQ,YAAWpB,SAElB7D,GAAoBY,EAAU"}
+{"version":3,"file":"FileDropZone.cjs.js","sources":["../../../../../src/components/organisms/FileUpload/components/FileDropZone.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from 'react';\n\nimport Box from '@mui/material/Box/Box';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport useTheme from '@mui/material/styles/useTheme';\n\nimport FlipdishButton from '@fd/components/atoms/Button';\nimport FlipdishFormHelperText from '@fd/components/atoms/FormHelperText';\nimport FlipdishTypography from '@fd/components/atoms/Typography';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport UploadIcon from '@fd/icons/Upload';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nconst StyledUploadAreaContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'hasError',\n})<{ hasError?: boolean }>(({ theme, hasError }) => ({\n  flex: '1',\n  display: 'flex',\n  flexDirection: 'column',\n  height: '100%',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'center',\n  padding: theme.spacing(4),\n  borderRadius: theme.radius['radius-8'],\n  border: hasError\n    ? `1px solid ${theme.palette.semantic.stroke['stroke-error-weak']}`\n    : `1px dashed ${theme.palette.semantic.stroke['stroke-strong']}`,\n  background: hasError\n    ? theme.palette.semantic.fill['fill-error-weak']\n    : theme.palette.semantic.fill['fill-weaker'],\n  cursor: 'pointer',\n  transition: 'all 0.2s ease-in-out',\n  [theme.breakpoints.only('mobile')]: {\n    justifyContent: 'center',\n    gap: theme.spacing(4),\n  },\n}));\n\nconst VisuallyHiddenInput = styled('input')({\n  clip: 'rect(0 0 0 0)',\n  clipPath: 'inset(50%)',\n  height: 1,\n  overflow: 'hidden',\n  position: 'absolute',\n  bottom: 0,\n  left: 0,\n  whiteSpace: 'nowrap',\n  width: 1,\n});\n\nconst StyledIconContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'hasError',\n})<{ hasError?: boolean }>(({ hasError, theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  width: '48px',\n  height: '48px',\n  padding: '0px',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: theme.radius['radius-32'],\n  backgroundColor: hasError\n    ? theme.palette.semantic.fill['fill-error-weak']\n    : theme.palette.semantic.fill['fill-primary-weak'],\n}));\n\nconst StyledButton = styled(FlipdishButton)({\n  alignSelf: 'center',\n});\n\n/**\n * Props for the FileDropZone component.\n * Provides a drag-and-drop file upload interface with validation.\n */\nexport interface FileDropZoneProps {\n  /**\n   * Callback function invoked when files are successfully validated and ready to upload.\n   * @param files - Array of File objects to be uploaded\n   */\n  handleUpload: (files: File[]) => void;\n\n  /**\n   * Whether multiple files can be selected at once.\n   * @default true\n   */\n  multiple?: boolean;\n\n  /**\n   * Maximum number of files that can be selected in a single operation.\n   * If exceeded, an error message will be displayed.\n   * @default undefined (no limit)\n   */\n  maxFiles?: number;\n\n  /**\n   * Maximum file size allowed in bytes.\n   * Files exceeding this size will be rejected with an error message.\n   * Example: 10 * 1024 * 1024 for 10MB\n   * @default undefined (no limit)\n   */\n  maxFileSize?: number;\n\n  /**\n   * Array of allowed file extensions (without dots).\n   * Files with extensions not in this list will be rejected.\n   * Example: ['jpg', 'png', 'pdf']\n   * @default [] (all file types allowed)\n   */\n  allowedFileTypes?: string[];\n\n  /**\n   * Whether the file drop zone is disabled.\n   * When true, prevents all file selection and drag-and-drop interactions.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Optional custom error message to display at the top.\n   */\n  error?: string | null;\n\n  /**\n   * Text displayed when files are being dragged over the drop zone.\n   * @default 'Drop files here'\n   */\n  dragActiveText?: string;\n\n  /**\n   * Text displayed when no files are being dragged (idle state).\n   * @default 'Drag and drop files here'\n   */\n  dragInactiveText?: string;\n\n  /**\n   * Text displayed on the browse/upload button.\n   * @default 'Browse files'\n   */\n  browseButtonText?: string;\n\n  /**\n   * Text displayed when a file type is not allowed.\n   * @default 'File type is not allowed. Allowed types: {allowedFileTypes}'\n   */\n  invalidFileTypesText?: string;\n\n  /**\n   * Text displayed when a file size is too large.\n   * @default 'File size is too large. Maximum size: {maxFileSize}'\n   */\n  invalidFileSizeText?: string;\n\n  /**\n   * Text displayed when too many files are selected.\n   * @default 'Too many files selected. Maximum allowed: {maxFiles}'\n   */\n  invalidFileCountText?: string;\n}\n\nconst FileDropZone: React.FC<FileDropZoneProps> = ({\n  handleUpload,\n  multiple,\n  maxFiles,\n  maxFileSize,\n  allowedFileTypes = [],\n  disabled = false,\n  error,\n  dragActiveText,\n  dragInactiveText,\n  browseButtonText,\n  invalidFileTypesText,\n  invalidFileSizeText,\n  invalidFileCountText,\n}) => {\n  const theme = useTheme();\n  const [isDragActive, setIsDragActive] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const [validationError, setValidationError] = useState<string | null>(null);\n  const { translate } = useTranslation();\n  const displayError = validationError ?? error;\n  const inputAccept = useMemo(() => {\n    if (!allowedFileTypes.length) return undefined;\n\n    return allowedFileTypes\n      .filter(Boolean)\n      .map((ext) => (ext.startsWith('.') ? ext : `.${ext}`))\n      .join(',');\n  }, [allowedFileTypes]);\n\n  const validateFile = useCallback(\n    (file: File): boolean => {\n      // Check file size\n      if (maxFileSize && file.size > maxFileSize) {\n        setValidationError(\n          invalidFileSizeText ||\n            translate('File_size_is_too_large', { maxFileSize: maxFileSize?.toString() || '' }),\n        );\n        return false;\n      }\n\n      // Check file type\n      const fileExtension = file.name.split('.').pop()?.toLowerCase();\n      if (allowedFileTypes.length > 0 && fileExtension && !allowedFileTypes.includes(fileExtension)) {\n        setValidationError(\n          invalidFileTypesText ||\n            translate('File_type_is_not_allowed', { allowedFileTypes: allowedFileTypes.join(', ') }),\n        );\n        return false;\n      }\n\n      return true;\n    },\n    [maxFileSize, allowedFileTypes, invalidFileTypesText, invalidFileSizeText, translate],\n  );\n\n  const processFiles = useCallback(\n    (files: File[] | FileList) => {\n      const fileArray = Array.from(files);\n      const validFiles: File[] = [];\n\n      // Check max files limit\n      if (maxFiles && fileArray.length > maxFiles) {\n        setValidationError(\n          invalidFileCountText || translate('Too_many_files_selected', { maxFiles: maxFiles.toString() }),\n        );\n        return;\n      }\n\n      // Validate each file\n      fileArray.forEach((file) => {\n        if (validateFile(file)) {\n          validFiles.push(file);\n        }\n      });\n\n      if (validFiles.length > 0) {\n        setValidationError(null);\n        handleUpload(validFiles);\n      }\n    },\n    [maxFiles, validateFile, handleUpload, invalidFileCountText, translate],\n  );\n\n  const handleDragEnter = useCallback(\n    (e: React.DragEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (disabled) return;\n\n      setIsDragActive(true);\n    },\n    [disabled],\n  );\n\n  const handleDragLeave = useCallback(\n    (e: React.DragEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (disabled) return;\n\n      setIsDragActive(false);\n    },\n    [disabled],\n  );\n\n  const handleDragOver = useCallback((e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n  }, []);\n\n  const handleDrop = useCallback(\n    (e: React.DragEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (disabled) return;\n\n      setIsDragActive(false);\n\n      const files = e.dataTransfer.files;\n      if (files && files.length > 0) {\n        processFiles(files);\n      }\n    },\n    [disabled, processFiles],\n  );\n\n  const handleFileInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (disabled) return;\n\n      const files = e.target.files;\n      if (files && files.length > 0) {\n        processFiles(files);\n      }\n\n      // Reset input value to allow selecting the same file again\n      if (fileInputRef.current) {\n        fileInputRef.current.value = '';\n      }\n    },\n    [disabled, processFiles],\n  );\n\n  const handleButtonClick = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    fileInputRef.current?.click();\n  }, []);\n\n  const handleContainerClick = useCallback(() => {\n    if (disabled) return;\n\n    fileInputRef.current?.click();\n  }, [disabled]);\n\n  return (\n    <>\n      {!!displayError && (\n        <FlipdishFormHelperText error>\n          <CancelCircleIcon />\n          {displayError}\n        </FlipdishFormHelperText>\n      )}\n      <StyledUploadAreaContainer\n        data-fd=\"file-drop-zone\"\n        hasError={!!displayError}\n        onClick={disabled ? undefined : handleContainerClick}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n      >\n        <VisuallyHiddenInput\n          ref={fileInputRef}\n          accept={inputAccept}\n          data-fd=\"file-upload-input\"\n          disabled={disabled}\n          multiple={multiple}\n          onChange={handleFileInputChange}\n          type=\"file\"\n        />\n\n        <Stack\n          alignItems=\"center\"\n          direction=\"column\"\n          gap={theme.spacing(2)}\n          justifyContent=\"center\"\n          width=\"100%\"\n        >\n          <StyledIconContainer hasError={!!displayError}>\n            <UploadIcon\n              color={\n                displayError\n                  ? theme.palette.semantic.icon['icon-error']\n                  : theme.palette.semantic.icon['icon-primary']\n              }\n            />\n          </StyledIconContainer>\n\n          <FlipdishTypography variant=\"b1Strong\">\n            {isDragActive\n              ? dragActiveText || translate('Drop_files_here')\n              : dragInactiveText || translate('Drag_and_drop_files_here')}\n          </FlipdishTypography>\n\n          <StyledButton\n            disabled={disabled}\n            fdKey=\"file-upload-btn\"\n            onClick={disabled ? undefined : handleButtonClick}\n            variant=\"secondary\"\n          >\n            {browseButtonText || translate('Browse_files')}\n          </StyledButton>\n        </Stack>\n      </StyledUploadAreaContainer>\n    </>\n  );\n};\n\nexport default FileDropZone;\n"],"names":["StyledUploadAreaContainer","styled","Box","shouldForwardProp","prop","theme","hasError","flex","display","flexDirection","height","boxSizing","alignItems","justifyContent","padding","spacing","borderRadius","radius","border","palette","semantic","stroke","background","fill","cursor","transition","breakpoints","only","gap","VisuallyHiddenInput","clip","clipPath","overflow","position","bottom","left","whiteSpace","width","StyledIconContainer","backgroundColor","StyledButton","FlipdishButton","alignSelf","handleUpload","multiple","maxFiles","maxFileSize","allowedFileTypes","disabled","error","dragActiveText","dragInactiveText","browseButtonText","invalidFileTypesText","invalidFileSizeText","invalidFileCountText","useTheme","isDragActive","setIsDragActive","useState","fileInputRef","useRef","validationError","setValidationError","translate","useTranslation","displayError","inputAccept","useMemo","length","filter","Boolean","map","ext","startsWith","join","validateFile","useCallback","file","size","toString","fileExtension","name","split","pop","toLowerCase","includes","processFiles","files","fileArray","Array","from","validFiles","forEach","push","handleDragEnter","e","preventDefault","stopPropagation","handleDragLeave","handleDragOver","handleDrop","dataTransfer","handleFileInputChange","target","current","value","handleButtonClick","event","click","handleContainerClick","_jsxs","_Fragment","children","FlipdishFormHelperText","_jsx","CancelCircleIcon","onClick","undefined","onDragEnter","onDragLeave","onDragOver","onDrop","ref","accept","onChange","type","Stack","direction","UploadIcon","color","icon","FlipdishTypography","variant","fdKey"],"mappings":"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"}

package/dist/components/organisms/FileUpload/components/FileDropZone.js

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as r,jsx as t}from"react/jsx-runtime";import{useState as i,useRef as o,useMemo as a,useCallback as l}from"react";import n from"@mui/material/Box/Box";import s from"@mui/material/Stack/Stack";import p from"@mui/material/styles/styled";import d from"@mui/material/styles/useTheme";import{Button as c}from"../../../atoms/Button/index.js";import m from"@mui/material/FormHelperText";import f from"@mui/material/Typography";import u from"../../../../icons/CancelCircle/index.js";import h from"../../../../icons/Upload/index.js";import{useTranslation as g}from"../../../../providers/TranslationProvider.js";const x=p(n,{shouldForwardProp:e=>"hasError"!==e})((({theme:e,hasError:r})=>({flex:"1",display:"flex",flexDirection:"column",height:"100%",boxSizing:"border-box",alignItems:"center",justifyContent:"center",padding:e.spacing(4),borderRadius:e.radius["radius-8"],border:r?`1px solid ${e.palette.semantic.stroke["stroke-error-weak"]}`:`1px dashed ${e.palette.semantic.stroke["stroke-strong"]}`,background:r?e.palette.semantic.fill["fill-error-weak"]:e.palette.semantic.fill["fill-weaker"],cursor:"pointer",transition:"all 0.2s ease-in-out",[e.breakpoints.only("mobile")]:{justifyContent:"center",gap:e.spacing(4)}}))),y=p("input")({clip:"rect(0 0 0 0)",clipPath:"inset(50%)",height:1,overflow:"hidden",position:"absolute",bottom:0,left:0,whiteSpace:"nowrap",width:1}),v=p(n,{shouldForwardProp:e=>"hasError"!==e})((({hasError:e,theme:r})=>({display:"flex",flexDirection:"column",width:"48px",height:"48px",padding:"0px",justifyContent:"center",alignItems:"center",borderRadius:r.radius["radius-32"],backgroundColor:e?r.palette.semantic.fill["fill-error-weak"]:r.palette.semantic.fill["fill-primary-weak"]}))),w=p(c)({alignSelf:"center"}),b=({handleUpload:n,multiple:p,maxFiles:c,maxFileSize:b,allowedFileTypes:k=[],disabled:_=!1,error:T,dragActiveText:F,dragInactiveText:D,browseButtonText:C,invalidFileTypesText:j,invalidFileSizeText:S,invalidFileCountText:P})=>{const E=d(),[z,B]=i(!1),I=o(null),[$,A]=i(null),{translate:L}=g(),R=$??T,U=a((()=>{if(k.length)return k.filter(Boolean).map((e=>e.startsWith(".")?e:`.${e}`)).join(",")}),[k]),H=l((e=>{if(b&&e.size>b)return A(S||L("File_size_is_too_large",{maxFileSize:b?.toString()||""})),!1;const r=e.name.split(".").pop()?.toLowerCase();return!(k.length>0&&r&&!k.includes(r))||(A(j||L("File_type_is_not_allowed",{allowedFileTypes:k.join(", ")})),!1)}),[b,k,j,S,L]),K=l((e=>{const r=Array.from(e),t=[];c&&r.length>c?A(P||L("Too_many_files_selected",{maxFiles:c.toString()})):(r.forEach((e=>{H(e)&&t.push(e)})),t.length>0&&(A(null),n(t)))}),[c,H,n,P,L]),O=l((e=>{e.preventDefault(),e.stopPropagation(),_||B(!0)}),[_]),W=l((e=>{e.preventDefault(),e.stopPropagation(),_||B(!1)}),[_]),q=l((e=>{e.preventDefault(),e.stopPropagation()}),[]),G=l((e=>{if(e.preventDefault(),e.stopPropagation(),_)return;B(!1);const r=e.dataTransfer.files;r&&r.length>0&&K(r)}),[_,K]),J=l((e=>{if(_)return;const r=e.target.files;r&&r.length>0&&K(r),I.current&&(I.current.value="")}),[_,K]),M=l((e=>{e.preventDefault(),e.stopPropagation(),I.current?.click()}),[]),N=l((()=>{_||I.current?.click()}),[_]);return e(r,{children:[!!R&&e(m,{error:!0,children:[t(u,{}),R]}),e(x,{"data-fd":"file-drop-zone",hasError:!!R,onClick:_?void 0:N,onDragEnter:O,onDragLeave:W,onDragOver:q,onDrop:G,children:[t(y,{ref:I,accept:U,"data-fd":"file-upload-input",disabled:_,multiple:p,onChange:J,type:"file"}),e(s,{alignItems:"center",direction:"column",gap:E.spacing(2),justifyContent:"center",width:"100%",children:[t(v,{hasError:!!R,children:t(h,{color:R?E.palette.semantic.icon["icon-error"]:E.palette.semantic.icon["icon-primary"]})}),t(f,{variant:"b1Strong",children:z?F||L("Drop_files_here"):D||L("Drag_and_drop_files_here")}),t(w,{disabled:_,fdKey:"file-upload-btn",onClick:_?void 0:M,variant:"secondary",children:C||L("Browse_files")})]})]})]})};export{b as default};
+import{jsxs as e,Fragment as r,jsx as t}from"react/jsx-runtime";import{useState as i,useRef as o,useMemo as a,useCallback as l}from"react";import n from"@mui/material/Box/Box";import s from"@mui/material/Stack/Stack";import p from"@mui/material/styles/styled";import d from"@mui/material/styles/useTheme";import{Button as c}from"../../../atoms/Button/index.js";import m from"@mui/material/FormHelperText";import f from"@mui/material/Typography";import u from"../../../../icons/CancelCircle/index.js";import h from"../../../../icons/Upload/index.js";import{useTranslation as g}from"../../../../providers/TranslationProvider.js";const x=p(n,{shouldForwardProp:e=>"hasError"!==e})(({theme:e,hasError:r})=>({flex:"1",display:"flex",flexDirection:"column",height:"100%",boxSizing:"border-box",alignItems:"center",justifyContent:"center",padding:e.spacing(4),borderRadius:e.radius["radius-8"],border:r?`1px solid ${e.palette.semantic.stroke["stroke-error-weak"]}`:`1px dashed ${e.palette.semantic.stroke["stroke-strong"]}`,background:r?e.palette.semantic.fill["fill-error-weak"]:e.palette.semantic.fill["fill-weaker"],cursor:"pointer",transition:"all 0.2s ease-in-out",[e.breakpoints.only("mobile")]:{justifyContent:"center",gap:e.spacing(4)}})),y=p("input")({clip:"rect(0 0 0 0)",clipPath:"inset(50%)",height:1,overflow:"hidden",position:"absolute",bottom:0,left:0,whiteSpace:"nowrap",width:1}),v=p(n,{shouldForwardProp:e=>"hasError"!==e})(({hasError:e,theme:r})=>({display:"flex",flexDirection:"column",width:"48px",height:"48px",padding:"0px",justifyContent:"center",alignItems:"center",borderRadius:r.radius["radius-32"],backgroundColor:e?r.palette.semantic.fill["fill-error-weak"]:r.palette.semantic.fill["fill-primary-weak"]})),w=p(c)({alignSelf:"center"}),b=({handleUpload:n,multiple:p,maxFiles:c,maxFileSize:b,allowedFileTypes:k=[],disabled:_=!1,error:T,dragActiveText:F,dragInactiveText:D,browseButtonText:C,invalidFileTypesText:j,invalidFileSizeText:S,invalidFileCountText:P})=>{const E=d(),[z,B]=i(!1),I=o(null),[$,A]=i(null),{translate:L}=g(),R=$??T,U=a(()=>{if(k.length)return k.filter(Boolean).map(e=>e.startsWith(".")?e:`.${e}`).join(",")},[k]),H=l(e=>{if(b&&e.size>b)return A(S||L("File_size_is_too_large",{maxFileSize:b?.toString()||""})),!1;const r=e.name.split(".").pop()?.toLowerCase();return!(k.length>0&&r&&!k.includes(r))||(A(j||L("File_type_is_not_allowed",{allowedFileTypes:k.join(", ")})),!1)},[b,k,j,S,L]),K=l(e=>{const r=Array.from(e),t=[];c&&r.length>c?A(P||L("Too_many_files_selected",{maxFiles:c.toString()})):(r.forEach(e=>{H(e)&&t.push(e)}),t.length>0&&(A(null),n(t)))},[c,H,n,P,L]),O=l(e=>{e.preventDefault(),e.stopPropagation(),_||B(!0)},[_]),W=l(e=>{e.preventDefault(),e.stopPropagation(),_||B(!1)},[_]),q=l(e=>{e.preventDefault(),e.stopPropagation()},[]),G=l(e=>{if(e.preventDefault(),e.stopPropagation(),_)return;B(!1);const r=e.dataTransfer.files;r&&r.length>0&&K(r)},[_,K]),J=l(e=>{if(_)return;const r=e.target.files;r&&r.length>0&&K(r),I.current&&(I.current.value="")},[_,K]),M=l(e=>{e.preventDefault(),e.stopPropagation(),I.current?.click()},[]),N=l(()=>{_||I.current?.click()},[_]);return e(r,{children:[!!R&&e(m,{error:!0,children:[t(u,{}),R]}),e(x,{"data-fd":"file-drop-zone",hasError:!!R,onClick:_?void 0:N,onDragEnter:O,onDragLeave:W,onDragOver:q,onDrop:G,children:[t(y,{ref:I,accept:U,"data-fd":"file-upload-input",disabled:_,multiple:p,onChange:J,type:"file"}),e(s,{alignItems:"center",direction:"column",gap:E.spacing(2),justifyContent:"center",width:"100%",children:[t(v,{hasError:!!R,children:t(h,{color:R?E.palette.semantic.icon["icon-error"]:E.palette.semantic.icon["icon-primary"]})}),t(f,{variant:"b1Strong",children:z?F||L("Drop_files_here"):D||L("Drag_and_drop_files_here")}),t(w,{disabled:_,fdKey:"file-upload-btn",onClick:_?void 0:M,variant:"secondary",children:C||L("Browse_files")})]})]})]})};export{b as default};
 //# sourceMappingURL=FileDropZone.js.map

package/dist/components/organisms/FileUpload/components/FileDropZone.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDropZone.js","sources":["../../../../../src/components/organisms/FileUpload/components/FileDropZone.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from 'react';\n\nimport Box from '@mui/material/Box/Box';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport useTheme from '@mui/material/styles/useTheme';\n\nimport FlipdishButton from '@fd/components/atoms/Button';\nimport FlipdishFormHelperText from '@fd/components/atoms/FormHelperText';\nimport FlipdishTypography from '@fd/components/atoms/Typography';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport UploadIcon from '@fd/icons/Upload';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nconst StyledUploadAreaContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'hasError',\n})<{ hasError?: boolean }>(({ theme, hasError }) => ({\n  flex: '1',\n  display: 'flex',\n  flexDirection: 'column',\n  height: '100%',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'center',\n  padding: theme.spacing(4),\n  borderRadius: theme.radius['radius-8'],\n  border: hasError\n    ? `1px solid ${theme.palette.semantic.stroke['stroke-error-weak']}`\n    : `1px dashed ${theme.palette.semantic.stroke['stroke-strong']}`,\n  background: hasError\n    ? theme.palette.semantic.fill['fill-error-weak']\n    : theme.palette.semantic.fill['fill-weaker'],\n  cursor: 'pointer',\n  transition: 'all 0.2s ease-in-out',\n  [theme.breakpoints.only('mobile')]: {\n    justifyContent: 'center',\n    gap: theme.spacing(4),\n  },\n}));\n\nconst VisuallyHiddenInput = styled('input')({\n  clip: 'rect(0 0 0 0)',\n  clipPath: 'inset(50%)',\n  height: 1,\n  overflow: 'hidden',\n  position: 'absolute',\n  bottom: 0,\n  left: 0,\n  whiteSpace: 'nowrap',\n  width: 1,\n});\n\nconst StyledIconContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'hasError',\n})<{ hasError?: boolean }>(({ hasError, theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  width: '48px',\n  height: '48px',\n  padding: '0px',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: theme.radius['radius-32'],\n  backgroundColor: hasError\n    ? theme.palette.semantic.fill['fill-error-weak']\n    : theme.palette.semantic.fill['fill-primary-weak'],\n}));\n\nconst StyledButton = styled(FlipdishButton)({\n  alignSelf: 'center',\n});\n\n/**\n * Props for the FileDropZone component.\n * Provides a drag-and-drop file upload interface with validation.\n */\nexport interface FileDropZoneProps {\n  /**\n   * Callback function invoked when files are successfully validated and ready to upload.\n   * @param files - Array of File objects to be uploaded\n   */\n  handleUpload: (files: File[]) => void;\n\n  /**\n   * Whether multiple files can be selected at once.\n   * @default true\n   */\n  multiple?: boolean;\n\n  /**\n   * Maximum number of files that can be selected in a single operation.\n   * If exceeded, an error message will be displayed.\n   * @default undefined (no limit)\n   */\n  maxFiles?: number;\n\n  /**\n   * Maximum file size allowed in bytes.\n   * Files exceeding this size will be rejected with an error message.\n   * Example: 10 * 1024 * 1024 for 10MB\n   * @default undefined (no limit)\n   */\n  maxFileSize?: number;\n\n  /**\n   * Array of allowed file extensions (without dots).\n   * Files with extensions not in this list will be rejected.\n   * Example: ['jpg', 'png', 'pdf']\n   * @default [] (all file types allowed)\n   */\n  allowedFileTypes?: string[];\n\n  /**\n   * Whether the file drop zone is disabled.\n   * When true, prevents all file selection and drag-and-drop interactions.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Optional custom error message to display at the top.\n   */\n  error?: string | null;\n\n  /**\n   * Text displayed when files are being dragged over the drop zone.\n   * @default 'Drop files here'\n   */\n  dragActiveText?: string;\n\n  /**\n   * Text displayed when no files are being dragged (idle state).\n   * @default 'Drag and drop files here'\n   */\n  dragInactiveText?: string;\n\n  /**\n   * Text displayed on the browse/upload button.\n   * @default 'Browse files'\n   */\n  browseButtonText?: string;\n\n  /**\n   * Text displayed when a file type is not allowed.\n   * @default 'File type is not allowed. Allowed types: {allowedFileTypes}'\n   */\n  invalidFileTypesText?: string;\n\n  /**\n   * Text displayed when a file size is too large.\n   * @default 'File size is too large. Maximum size: {maxFileSize}'\n   */\n  invalidFileSizeText?: string;\n\n  /**\n   * Text displayed when too many files are selected.\n   * @default 'Too many files selected. Maximum allowed: {maxFiles}'\n   */\n  invalidFileCountText?: string;\n}\n\nconst FileDropZone: React.FC<FileDropZoneProps> = ({\n  handleUpload,\n  multiple,\n  maxFiles,\n  maxFileSize,\n  allowedFileTypes = [],\n  disabled = false,\n  error,\n  dragActiveText,\n  dragInactiveText,\n  browseButtonText,\n  invalidFileTypesText,\n  invalidFileSizeText,\n  invalidFileCountText,\n}) => {\n  const theme = useTheme();\n  const [isDragActive, setIsDragActive] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const [validationError, setValidationError] = useState<string | null>(null);\n  const { translate } = useTranslation();\n  const displayError = validationError ?? error;\n  const inputAccept = useMemo(() => {\n    if (!allowedFileTypes.length) return undefined;\n\n    return allowedFileTypes\n      .filter(Boolean)\n      .map((ext) => (ext.startsWith('.') ? ext : `.${ext}`))\n      .join(',');\n  }, [allowedFileTypes]);\n\n  const validateFile = useCallback(\n    (file: File): boolean => {\n      // Check file size\n      if (maxFileSize && file.size > maxFileSize) {\n        setValidationError(\n          invalidFileSizeText ||\n            translate('File_size_is_too_large', { maxFileSize: maxFileSize?.toString() || '' }),\n        );\n        return false;\n      }\n\n      // Check file type\n      const fileExtension = file.name.split('.').pop()?.toLowerCase();\n      if (allowedFileTypes.length > 0 && fileExtension && !allowedFileTypes.includes(fileExtension)) {\n        setValidationError(\n          invalidFileTypesText ||\n            translate('File_type_is_not_allowed', { allowedFileTypes: allowedFileTypes.join(', ') }),\n        );\n        return false;\n      }\n\n      return true;\n    },\n    [maxFileSize, allowedFileTypes, invalidFileTypesText, invalidFileSizeText, translate],\n  );\n\n  const processFiles = useCallback(\n    (files: File[] | FileList) => {\n      const fileArray = Array.from(files);\n      const validFiles: File[] = [];\n\n      // Check max files limit\n      if (maxFiles && fileArray.length > maxFiles) {\n        setValidationError(\n          invalidFileCountText || translate('Too_many_files_selected', { maxFiles: maxFiles.toString() }),\n        );\n        return;\n      }\n\n      // Validate each file\n      fileArray.forEach((file) => {\n        if (validateFile(file)) {\n          validFiles.push(file);\n        }\n      });\n\n      if (validFiles.length > 0) {\n        setValidationError(null);\n        handleUpload(validFiles);\n      }\n    },\n    [maxFiles, validateFile, handleUpload, invalidFileCountText, translate],\n  );\n\n  const handleDragEnter = useCallback(\n    (e: React.DragEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (disabled) return;\n\n      setIsDragActive(true);\n    },\n    [disabled],\n  );\n\n  const handleDragLeave = useCallback(\n    (e: React.DragEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (disabled) return;\n\n      setIsDragActive(false);\n    },\n    [disabled],\n  );\n\n  const handleDragOver = useCallback((e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n  }, []);\n\n  const handleDrop = useCallback(\n    (e: React.DragEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (disabled) return;\n\n      setIsDragActive(false);\n\n      const files = e.dataTransfer.files;\n      if (files && files.length > 0) {\n        processFiles(files);\n      }\n    },\n    [disabled, processFiles],\n  );\n\n  const handleFileInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (disabled) return;\n\n      const files = e.target.files;\n      if (files && files.length > 0) {\n        processFiles(files);\n      }\n\n      // Reset input value to allow selecting the same file again\n      if (fileInputRef.current) {\n        fileInputRef.current.value = '';\n      }\n    },\n    [disabled, processFiles],\n  );\n\n  const handleButtonClick = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    fileInputRef.current?.click();\n  }, []);\n\n  const handleContainerClick = useCallback(() => {\n    if (disabled) return;\n\n    fileInputRef.current?.click();\n  }, [disabled]);\n\n  return (\n    <>\n      {!!displayError && (\n        <FlipdishFormHelperText error>\n          <CancelCircleIcon />\n          {displayError}\n        </FlipdishFormHelperText>\n      )}\n      <StyledUploadAreaContainer\n        data-fd=\"file-drop-zone\"\n        hasError={!!displayError}\n        onClick={disabled ? undefined : handleContainerClick}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n      >\n        <VisuallyHiddenInput\n          ref={fileInputRef}\n          accept={inputAccept}\n          data-fd=\"file-upload-input\"\n          disabled={disabled}\n          multiple={multiple}\n          onChange={handleFileInputChange}\n          type=\"file\"\n        />\n\n        <Stack\n          alignItems=\"center\"\n          direction=\"column\"\n          gap={theme.spacing(2)}\n          justifyContent=\"center\"\n          width=\"100%\"\n        >\n          <StyledIconContainer hasError={!!displayError}>\n            <UploadIcon\n              color={\n                displayError\n                  ? theme.palette.semantic.icon['icon-error']\n                  : theme.palette.semantic.icon['icon-primary']\n              }\n            />\n          </StyledIconContainer>\n\n          <FlipdishTypography variant=\"b1Strong\">\n            {isDragActive\n              ? dragActiveText || translate('Drop_files_here')\n              : dragInactiveText || translate('Drag_and_drop_files_here')}\n          </FlipdishTypography>\n\n          <StyledButton\n            disabled={disabled}\n            fdKey=\"file-upload-btn\"\n            onClick={disabled ? undefined : handleButtonClick}\n            variant=\"secondary\"\n          >\n            {browseButtonText || translate('Browse_files')}\n          </StyledButton>\n        </Stack>\n      </StyledUploadAreaContainer>\n    </>\n  );\n};\n\nexport default FileDropZone;\n"],"names":["StyledUploadAreaContainer","styled","Box","shouldForwardProp","prop","theme","hasError","flex","display","flexDirection","height","boxSizing","alignItems","justifyContent","padding","spacing","borderRadius","radius","border","palette","semantic","stroke","background","fill","cursor","transition","breakpoints","only","gap","VisuallyHiddenInput","clip","clipPath","overflow","position","bottom","left","whiteSpace","width","StyledIconContainer","backgroundColor","StyledButton","FlipdishButton","alignSelf","FileDropZone","handleUpload","multiple","maxFiles","maxFileSize","allowedFileTypes","disabled","error","dragActiveText","dragInactiveText","browseButtonText","invalidFileTypesText","invalidFileSizeText","invalidFileCountText","useTheme","isDragActive","setIsDragActive","useState","fileInputRef","useRef","validationError","setValidationError","translate","useTranslation","displayError","inputAccept","useMemo","length","filter","Boolean","map","ext","startsWith","join","validateFile","useCallback","file","size","toString","fileExtension","name","split","pop","toLowerCase","includes","processFiles","files","fileArray","Array","from","validFiles","forEach","push","handleDragEnter","e","preventDefault","stopPropagation","handleDragLeave","handleDragOver","handleDrop","dataTransfer","handleFileInputChange","target","current","value","handleButtonClick","event","click","handleContainerClick","_jsxs","_Fragment","children","FlipdishFormHelperText","_jsx","CancelCircleIcon","onClick","undefined","onDragEnter","onDragLeave","onDragOver","onDrop","ref","accept","onChange","type","Stack","direction","UploadIcon","color","icon","FlipdishTypography","variant","fdKey"],"mappings":"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"}
+{"version":3,"file":"FileDropZone.js","sources":["../../../../../src/components/organisms/FileUpload/components/FileDropZone.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from 'react';\n\nimport Box from '@mui/material/Box/Box';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport useTheme from '@mui/material/styles/useTheme';\n\nimport FlipdishButton from '@fd/components/atoms/Button';\nimport FlipdishFormHelperText from '@fd/components/atoms/FormHelperText';\nimport FlipdishTypography from '@fd/components/atoms/Typography';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport UploadIcon from '@fd/icons/Upload';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nconst StyledUploadAreaContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'hasError',\n})<{ hasError?: boolean }>(({ theme, hasError }) => ({\n  flex: '1',\n  display: 'flex',\n  flexDirection: 'column',\n  height: '100%',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'center',\n  padding: theme.spacing(4),\n  borderRadius: theme.radius['radius-8'],\n  border: hasError\n    ? `1px solid ${theme.palette.semantic.stroke['stroke-error-weak']}`\n    : `1px dashed ${theme.palette.semantic.stroke['stroke-strong']}`,\n  background: hasError\n    ? theme.palette.semantic.fill['fill-error-weak']\n    : theme.palette.semantic.fill['fill-weaker'],\n  cursor: 'pointer',\n  transition: 'all 0.2s ease-in-out',\n  [theme.breakpoints.only('mobile')]: {\n    justifyContent: 'center',\n    gap: theme.spacing(4),\n  },\n}));\n\nconst VisuallyHiddenInput = styled('input')({\n  clip: 'rect(0 0 0 0)',\n  clipPath: 'inset(50%)',\n  height: 1,\n  overflow: 'hidden',\n  position: 'absolute',\n  bottom: 0,\n  left: 0,\n  whiteSpace: 'nowrap',\n  width: 1,\n});\n\nconst StyledIconContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'hasError',\n})<{ hasError?: boolean }>(({ hasError, theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  width: '48px',\n  height: '48px',\n  padding: '0px',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: theme.radius['radius-32'],\n  backgroundColor: hasError\n    ? theme.palette.semantic.fill['fill-error-weak']\n    : theme.palette.semantic.fill['fill-primary-weak'],\n}));\n\nconst StyledButton = styled(FlipdishButton)({\n  alignSelf: 'center',\n});\n\n/**\n * Props for the FileDropZone component.\n * Provides a drag-and-drop file upload interface with validation.\n */\nexport interface FileDropZoneProps {\n  /**\n   * Callback function invoked when files are successfully validated and ready to upload.\n   * @param files - Array of File objects to be uploaded\n   */\n  handleUpload: (files: File[]) => void;\n\n  /**\n   * Whether multiple files can be selected at once.\n   * @default true\n   */\n  multiple?: boolean;\n\n  /**\n   * Maximum number of files that can be selected in a single operation.\n   * If exceeded, an error message will be displayed.\n   * @default undefined (no limit)\n   */\n  maxFiles?: number;\n\n  /**\n   * Maximum file size allowed in bytes.\n   * Files exceeding this size will be rejected with an error message.\n   * Example: 10 * 1024 * 1024 for 10MB\n   * @default undefined (no limit)\n   */\n  maxFileSize?: number;\n\n  /**\n   * Array of allowed file extensions (without dots).\n   * Files with extensions not in this list will be rejected.\n   * Example: ['jpg', 'png', 'pdf']\n   * @default [] (all file types allowed)\n   */\n  allowedFileTypes?: string[];\n\n  /**\n   * Whether the file drop zone is disabled.\n   * When true, prevents all file selection and drag-and-drop interactions.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Optional custom error message to display at the top.\n   */\n  error?: string | null;\n\n  /**\n   * Text displayed when files are being dragged over the drop zone.\n   * @default 'Drop files here'\n   */\n  dragActiveText?: string;\n\n  /**\n   * Text displayed when no files are being dragged (idle state).\n   * @default 'Drag and drop files here'\n   */\n  dragInactiveText?: string;\n\n  /**\n   * Text displayed on the browse/upload button.\n   * @default 'Browse files'\n   */\n  browseButtonText?: string;\n\n  /**\n   * Text displayed when a file type is not allowed.\n   * @default 'File type is not allowed. Allowed types: {allowedFileTypes}'\n   */\n  invalidFileTypesText?: string;\n\n  /**\n   * Text displayed when a file size is too large.\n   * @default 'File size is too large. Maximum size: {maxFileSize}'\n   */\n  invalidFileSizeText?: string;\n\n  /**\n   * Text displayed when too many files are selected.\n   * @default 'Too many files selected. Maximum allowed: {maxFiles}'\n   */\n  invalidFileCountText?: string;\n}\n\nconst FileDropZone: React.FC<FileDropZoneProps> = ({\n  handleUpload,\n  multiple,\n  maxFiles,\n  maxFileSize,\n  allowedFileTypes = [],\n  disabled = false,\n  error,\n  dragActiveText,\n  dragInactiveText,\n  browseButtonText,\n  invalidFileTypesText,\n  invalidFileSizeText,\n  invalidFileCountText,\n}) => {\n  const theme = useTheme();\n  const [isDragActive, setIsDragActive] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const [validationError, setValidationError] = useState<string | null>(null);\n  const { translate } = useTranslation();\n  const displayError = validationError ?? error;\n  const inputAccept = useMemo(() => {\n    if (!allowedFileTypes.length) return undefined;\n\n    return allowedFileTypes\n      .filter(Boolean)\n      .map((ext) => (ext.startsWith('.') ? ext : `.${ext}`))\n      .join(',');\n  }, [allowedFileTypes]);\n\n  const validateFile = useCallback(\n    (file: File): boolean => {\n      // Check file size\n      if (maxFileSize && file.size > maxFileSize) {\n        setValidationError(\n          invalidFileSizeText ||\n            translate('File_size_is_too_large', { maxFileSize: maxFileSize?.toString() || '' }),\n        );\n        return false;\n      }\n\n      // Check file type\n      const fileExtension = file.name.split('.').pop()?.toLowerCase();\n      if (allowedFileTypes.length > 0 && fileExtension && !allowedFileTypes.includes(fileExtension)) {\n        setValidationError(\n          invalidFileTypesText ||\n            translate('File_type_is_not_allowed', { allowedFileTypes: allowedFileTypes.join(', ') }),\n        );\n        return false;\n      }\n\n      return true;\n    },\n    [maxFileSize, allowedFileTypes, invalidFileTypesText, invalidFileSizeText, translate],\n  );\n\n  const processFiles = useCallback(\n    (files: File[] | FileList) => {\n      const fileArray = Array.from(files);\n      const validFiles: File[] = [];\n\n      // Check max files limit\n      if (maxFiles && fileArray.length > maxFiles) {\n        setValidationError(\n          invalidFileCountText || translate('Too_many_files_selected', { maxFiles: maxFiles.toString() }),\n        );\n        return;\n      }\n\n      // Validate each file\n      fileArray.forEach((file) => {\n        if (validateFile(file)) {\n          validFiles.push(file);\n        }\n      });\n\n      if (validFiles.length > 0) {\n        setValidationError(null);\n        handleUpload(validFiles);\n      }\n    },\n    [maxFiles, validateFile, handleUpload, invalidFileCountText, translate],\n  );\n\n  const handleDragEnter = useCallback(\n    (e: React.DragEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (disabled) return;\n\n      setIsDragActive(true);\n    },\n    [disabled],\n  );\n\n  const handleDragLeave = useCallback(\n    (e: React.DragEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (disabled) return;\n\n      setIsDragActive(false);\n    },\n    [disabled],\n  );\n\n  const handleDragOver = useCallback((e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n  }, []);\n\n  const handleDrop = useCallback(\n    (e: React.DragEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (disabled) return;\n\n      setIsDragActive(false);\n\n      const files = e.dataTransfer.files;\n      if (files && files.length > 0) {\n        processFiles(files);\n      }\n    },\n    [disabled, processFiles],\n  );\n\n  const handleFileInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (disabled) return;\n\n      const files = e.target.files;\n      if (files && files.length > 0) {\n        processFiles(files);\n      }\n\n      // Reset input value to allow selecting the same file again\n      if (fileInputRef.current) {\n        fileInputRef.current.value = '';\n      }\n    },\n    [disabled, processFiles],\n  );\n\n  const handleButtonClick = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    fileInputRef.current?.click();\n  }, []);\n\n  const handleContainerClick = useCallback(() => {\n    if (disabled) return;\n\n    fileInputRef.current?.click();\n  }, [disabled]);\n\n  return (\n    <>\n      {!!displayError && (\n        <FlipdishFormHelperText error>\n          <CancelCircleIcon />\n          {displayError}\n        </FlipdishFormHelperText>\n      )}\n      <StyledUploadAreaContainer\n        data-fd=\"file-drop-zone\"\n        hasError={!!displayError}\n        onClick={disabled ? undefined : handleContainerClick}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n      >\n        <VisuallyHiddenInput\n          ref={fileInputRef}\n          accept={inputAccept}\n          data-fd=\"file-upload-input\"\n          disabled={disabled}\n          multiple={multiple}\n          onChange={handleFileInputChange}\n          type=\"file\"\n        />\n\n        <Stack\n          alignItems=\"center\"\n          direction=\"column\"\n          gap={theme.spacing(2)}\n          justifyContent=\"center\"\n          width=\"100%\"\n        >\n          <StyledIconContainer hasError={!!displayError}>\n            <UploadIcon\n              color={\n                displayError\n                  ? theme.palette.semantic.icon['icon-error']\n                  : theme.palette.semantic.icon['icon-primary']\n              }\n            />\n          </StyledIconContainer>\n\n          <FlipdishTypography variant=\"b1Strong\">\n            {isDragActive\n              ? dragActiveText || translate('Drop_files_here')\n              : dragInactiveText || translate('Drag_and_drop_files_here')}\n          </FlipdishTypography>\n\n          <StyledButton\n            disabled={disabled}\n            fdKey=\"file-upload-btn\"\n            onClick={disabled ? undefined : handleButtonClick}\n            variant=\"secondary\"\n          >\n            {browseButtonText || translate('Browse_files')}\n          </StyledButton>\n        </Stack>\n      </StyledUploadAreaContainer>\n    </>\n  );\n};\n\nexport default FileDropZone;\n"],"names":["StyledUploadAreaContainer","styled","Box","shouldForwardProp","prop","theme","hasError","flex","display","flexDirection","height","boxSizing","alignItems","justifyContent","padding","spacing","borderRadius","radius","border","palette","semantic","stroke","background","fill","cursor","transition","breakpoints","only","gap","VisuallyHiddenInput","clip","clipPath","overflow","position","bottom","left","whiteSpace","width","StyledIconContainer","backgroundColor","StyledButton","FlipdishButton","alignSelf","FileDropZone","handleUpload","multiple","maxFiles","maxFileSize","allowedFileTypes","disabled","error","dragActiveText","dragInactiveText","browseButtonText","invalidFileTypesText","invalidFileSizeText","invalidFileCountText","useTheme","isDragActive","setIsDragActive","useState","fileInputRef","useRef","validationError","setValidationError","translate","useTranslation","displayError","inputAccept","useMemo","length","filter","Boolean","map","ext","startsWith","join","validateFile","useCallback","file","size","toString","fileExtension","name","split","pop","toLowerCase","includes","processFiles","files","fileArray","Array","from","validFiles","forEach","push","handleDragEnter","e","preventDefault","stopPropagation","handleDragLeave","handleDragOver","handleDrop","dataTransfer","handleFileInputChange","target","current","value","handleButtonClick","event","click","handleContainerClick","_jsxs","_Fragment","children","FlipdishFormHelperText","_jsx","CancelCircleIcon","onClick","undefined","onDragEnter","onDragLeave","onDragOver","onDrop","ref","accept","onChange","type","Stack","direction","UploadIcon","color","icon","FlipdishTypography","variant","fdKey"],"mappings":"mnBAcA,MAAMA,EAA4BC,EAAOC,EAAK,CAC5CC,kBAAoBC,GAAkB,aAATA,GADGH,CAEP,EAAGI,QAAOC,eAAU,CAC7CC,KAAM,IACNC,QAAS,OACTC,cAAe,SACfC,OAAQ,OACRC,UAAW,aACXC,WAAY,SACZC,eAAgB,SAChBC,QAAST,EAAMU,QAAQ,GACvBC,aAAcX,EAAMY,OAAO,YAC3BC,OAAQZ,EACJ,aAAaD,EAAMc,QAAQC,SAASC,OAAO,uBAC3C,cAAchB,EAAMc,QAAQC,SAASC,OAAO,mBAChDC,WAAYhB,EACRD,EAAMc,QAAQC,SAASG,KAAK,mBAC5BlB,EAAMc,QAAQC,SAASG,KAAK,eAChCC,OAAQ,UACRC,WAAY,uBACZ,CAACpB,EAAMqB,YAAYC,KAAK,WAAY,CAClCd,eAAgB,SAChBe,IAAKvB,EAAMU,QAAQ,OAIjBc,EAAsB5B,EAAO,QAAPA,CAAgB,CAC1C6B,KAAM,gBACNC,SAAU,aACVrB,OAAQ,EACRsB,SAAU,SACVC,SAAU,WACVC,OAAQ,EACRC,KAAM,EACNC,WAAY,SACZC,MAAO,IAGHC,EAAsBrC,EAAOC,EAAK,CACtCC,kBAAoBC,GAAkB,aAATA,GADHH,CAED,EAAGK,WAAUD,YAAO,CAC7CG,QAAS,OACTC,cAAe,SACf4B,MAAO,OACP3B,OAAQ,OACRI,QAAS,MACTD,eAAgB,SAChBD,WAAY,SACZI,aAAcX,EAAMY,OAAO,aAC3BsB,gBAAiBjC,EACbD,EAAMc,QAAQC,SAASG,KAAK,mBAC5BlB,EAAMc,QAAQC,SAASG,KAAK,wBAG5BiB,EAAevC,EAAOwC,EAAPxC,CAAuB,CAC1CyC,UAAW,WA4FPC,EAA4C,EAChDC,eACAC,WACAC,WACAC,cACAC,mBAAmB,GACnBC,YAAW,EACXC,QACAC,iBACAC,mBACAC,mBACAC,uBACAC,sBACAC,2BAEA,MAAMnD,EAAQoD,KACPC,EAAcC,GAAmBC,GAAS,GAC3CC,EAAeC,EAAyB,OACvCC,EAAiBC,GAAsBJ,EAAwB,OAChEK,UAAEA,GAAcC,IAChBC,EAAeJ,GAAmBb,EAClCkB,EAAcC,EAAQ,KAC1B,GAAKrB,EAAiBsB,OAEtB,OAAOtB,EACJuB,OAAOC,SACPC,IAAKC,GAASA,EAAIC,WAAW,KAAOD,EAAM,IAAIA,KAC9CE,KAAK,MACP,CAAC5B,IAEE6B,EAAeC,EAClBC,IAEC,GAAIhC,GAAegC,EAAKC,KAAOjC,EAK7B,OAJAiB,EACET,GACEU,EAAU,yBAA0B,CAAElB,YAAaA,GAAakC,YAAc,OAE3E,EAIT,MAAMC,EAAgBH,EAAKI,KAAKC,MAAM,KAAKC,OAAOC,cAClD,QAAItC,EAAiBsB,OAAS,GAAKY,IAAkBlC,EAAiBuC,SAASL,MAC7ElB,EACEV,GACEW,EAAU,2BAA4B,CAAEjB,iBAAkBA,EAAiB4B,KAAK,UAE7E,IAKX,CAAC7B,EAAaC,EAAkBM,EAAsBC,EAAqBU,IAGvEuB,EAAeV,EAClBW,IACC,MAAMC,EAAYC,MAAMC,KAAKH,GACvBI,EAAqB,GAGvB/C,GAAY4C,EAAUpB,OAASxB,EACjCkB,EACER,GAAwBS,EAAU,0BAA2B,CAAEnB,SAAUA,EAASmC,eAMtFS,EAAUI,QAASf,IACbF,EAAaE,IACfc,EAAWE,KAAKhB,KAIhBc,EAAWvB,OAAS,IACtBN,EAAmB,MACnBpB,EAAaiD,MAGjB,CAAC/C,EAAU+B,EAAcjC,EAAcY,EAAsBS,IAGzD+B,EAAkBlB,EACrBmB,IACCA,EAAEC,iBACFD,EAAEE,kBAEElD,GAEJU,GAAgB,IAElB,CAACV,IAGGmD,EAAkBtB,EACrBmB,IACCA,EAAEC,iBACFD,EAAEE,kBAEElD,GAEJU,GAAgB,IAElB,CAACV,IAGGoD,EAAiBvB,EAAamB,IAClCA,EAAEC,iBACFD,EAAEE,mBACD,IAEGG,EAAaxB,EAChBmB,IAIC,GAHAA,EAAEC,iBACFD,EAAEE,kBAEElD,EAAU,OAEdU,GAAgB,GAEhB,MAAM8B,EAAQQ,EAAEM,aAAad,MACzBA,GAASA,EAAMnB,OAAS,GAC1BkB,EAAaC,IAGjB,CAACxC,EAAUuC,IAGPgB,EAAwB1B,EAC3BmB,IACC,GAAIhD,EAAU,OAEd,MAAMwC,EAAQQ,EAAEQ,OAAOhB,MACnBA,GAASA,EAAMnB,OAAS,GAC1BkB,EAAaC,GAIX5B,EAAa6C,UACf7C,EAAa6C,QAAQC,MAAQ,KAGjC,CAAC1D,EAAUuC,IAGPoB,EAAoB9B,EAAa+B,IACrCA,EAAMX,iBACNW,EAAMV,kBACNtC,EAAa6C,SAASI,SACrB,IAEGC,EAAuBjC,EAAY,KACnC7B,GAEJY,EAAa6C,SAASI,SACrB,CAAC7D,IAEJ,OACE+D,EAAAC,EAAA,CAAAC,SAAA,GACK/C,GACD6C,EAACG,EAAsB,CAACjE,OAAK,EAAAgE,SAAA,CAC3BE,EAACC,EAAgB,CAAA,GAChBlD,KAGL6C,EAAChH,EAAyB,CAAA,UAChB,iBACRM,WAAY6D,EACZmD,QAASrE,OAAWsE,EAAYR,EAChCS,YAAaxB,EACbyB,YAAarB,EACbsB,WAAYrB,EACZsB,OAAQrB,EAAUY,SAAA,CAElBE,EAACvF,EAAmB,CAClB+F,IAAK/D,EACLgE,OAAQzD,EAAW,UACX,oBACRnB,SAAUA,EACVJ,SAAUA,EACViF,SAAUtB,EACVuB,KAAK,SAGPf,EAACgB,EAAK,CACJpH,WAAW,SACXqH,UAAU,SACVrG,IAAKvB,EAAMU,QAAQ,GACnBF,eAAe,SACfwB,MAAM,OAAM6E,SAAA,CAEZE,EAAC9E,EAAmB,CAAChC,WAAY6D,EAAY+C,SAC3CE,EAACc,EAAU,CACTC,MACEhE,EACI9D,EAAMc,QAAQC,SAASgH,KAAK,cAC5B/H,EAAMc,QAAQC,SAASgH,KAAK,oBAKtChB,EAACiB,GAAmBC,QAAQ,WAAUpB,SACnCxD,EACGP,GAAkBc,EAAU,mBAC5Bb,GAAoBa,EAAU,8BAGpCmD,EAAC5E,EAAY,CACXS,SAAUA,EACVsF,MAAM,kBACNjB,QAASrE,OAAWsE,EAAYX,EAChC0B,QAAQ,YAAWpB,SAElB7D,GAAoBY,EAAU"}

package/dist/components/organisms/FileUpload/components/FileItem.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("react");var r=require("@mui/material/Box"),t=require("@mui/material/styles/styled"),i=require("@mui/material/styles/useTheme"),a=require("../../../atoms/IconButton/index.cjs.js"),s=require("../../../atoms/LinearProgress/index.cjs.js"),n=require("@mui/material/Typography"),o=require("../../../../icons/Cancel/index.cjs.js"),l=require("../../../../providers/TranslationProvider.cjs.js"),c=require("./FileThumbnail.cjs.js");const d=t(r,{shouldForwardProp:e=>"hasError"!==e})((({theme:e,hasError:r})=>({display:"flex",alignItems:"center",gap:e.spacing(2),padding:e.spacing(2),borderBottom:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`,backgroundColor:r?e.palette.semantic.fill["fill-error-weak"]:e.palette.semantic.background["background-raised"]}))),x=t(r)((({theme:e})=>({flex:1,display:"flex",flexDirection:"row",gap:e.spacing(1),overflow:"hidden",minWidth:0}))),u=t(r)((()=>({flex:1,display:"flex",overflow:"hidden",flexDirection:"column",minWidth:0}))),m=t(r)((()=>({display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"flex-end"}))),p=t(n)((()=>({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}))),h=t(s.LinearProgress)({width:"250px"});module.exports=({file:r,error:t=null,isUploading:s=!1,onRemove:j})=>{const f=i(),{translate:g}=l.useTranslation();return e.jsxs(d,{hasError:!!t,children:[e.jsx(c,{file:r}),e.jsxs(x,{children:[e.jsxs(u,{children:[e.jsx(p,{color:f.palette.semantic.text["text-strong"],variant:"captionWeak",children:r.name}),e.jsx(n,{color:f.palette.semantic.text["text-weak"],variant:"captionWeak",children:(e=>{if(0===e)return"0 Bytes";const r=Math.floor(Math.log(e)/Math.log(1024));return`${Math.round(e/Math.pow(1024,r)*100)/100} ${["B","KB","MB","GB"][r]}`})(r.size)})]}),e.jsxs(m,{children:[t&&e.jsx(n,{color:f.palette.semantic.text["text-error"],variant:"captionWeak",children:t}),s&&e.jsx(h,{})]})]}),e.jsx(a.IconButton,{"aria-label":g("Remove_file"),onClick:()=>{j(r)},size:"small",tone:"neutral",variant:"tertiary",children:e.jsx(o,{})})]})};
+"use strict";var e=require("react/jsx-runtime");require("react");var r=require("@mui/material/Box"),t=require("@mui/material/styles/styled"),i=require("@mui/material/styles/useTheme"),a=require("../../../atoms/IconButton/index.cjs.js"),s=require("../../../atoms/LinearProgress/index.cjs.js"),n=require("@mui/material/Typography"),o=require("../../../../icons/Cancel/index.cjs.js"),l=require("../../../../providers/TranslationProvider.cjs.js"),c=require("./FileThumbnail.cjs.js");const d=t(r,{shouldForwardProp:e=>"hasError"!==e})(({theme:e,hasError:r})=>({display:"flex",alignItems:"center",gap:e.spacing(2),padding:e.spacing(2),borderBottom:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`,backgroundColor:r?e.palette.semantic.fill["fill-error-weak"]:e.palette.semantic.background["background-raised"]})),x=t(r)(({theme:e})=>({flex:1,display:"flex",flexDirection:"row",gap:e.spacing(1),overflow:"hidden",minWidth:0})),u=t(r)(()=>({flex:1,display:"flex",overflow:"hidden",flexDirection:"column",minWidth:0})),m=t(r)(()=>({display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"flex-end"})),p=t(n)(()=>({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})),h=t(s.LinearProgress)({width:"250px"});module.exports=({file:r,error:t=null,isUploading:s=!1,onRemove:j})=>{const f=i(),{translate:g}=l.useTranslation();return e.jsxs(d,{hasError:!!t,children:[e.jsx(c,{file:r}),e.jsxs(x,{children:[e.jsxs(u,{children:[e.jsx(p,{color:f.palette.semantic.text["text-strong"],variant:"captionWeak",children:r.name}),e.jsx(n,{color:f.palette.semantic.text["text-weak"],variant:"captionWeak",children:(e=>{if(0===e)return"0 Bytes";const r=Math.floor(Math.log(e)/Math.log(1024));return`${Math.round(e/Math.pow(1024,r)*100)/100} ${["B","KB","MB","GB"][r]}`})(r.size)})]}),e.jsxs(m,{children:[t&&e.jsx(n,{color:f.palette.semantic.text["text-error"],variant:"captionWeak",children:t}),s&&e.jsx(h,{})]})]}),e.jsx(a.IconButton,{"aria-label":g("Remove_file"),onClick:()=>{j(r)},size:"small",tone:"neutral",variant:"tertiary",children:e.jsx(o,{})})]})};
 //# sourceMappingURL=FileItem.cjs.js.map