@flipdish/portal-library 7.12.0 → 8.0.0

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 { getAssetsKey, uploadAsset, type UploadAssetParams } from '../services/asset.service';\nimport type { UploadAssetResponse } from '../types';\n\n/**\n * Hook to upload assets to the API\n * Automatically invalidates the assets query 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    mutationFn: uploadAsset,\n    onSuccess: (_, variables) => {\n      // Invalidate assets query for the specific orgId and brandId to refetch the list\n      void queryClient.invalidateQueries({\n        queryKey: [getAssetsKey, variables.orgId, variables.brandId],\n      });\n    },\n  });\n};\n"],"names":["queryClient","useQueryClient","useMutation","mutationFn","uploadAsset","onSuccess","_","variables","invalidateQueries","queryKey","getAssetsKey","orgId","brandId"],"mappings":"yHAU8B,KAC5B,MAAMA,EAAcC,EAAAA,iBAEpB,OAAOC,cAA2D,CAChEC,WAAYC,EAAAA,YACZC,UAAW,CAACC,EAAGC,KAERP,EAAYQ,kBAAkB,CACjCC,SAAU,CAACC,EAAAA,aAAcH,EAAUI,MAAOJ,EAAUK"}
+{"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 { AssetResponse, UploadAssetResponse } from '../types';\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<AssetResponse>(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,aAA4BN,GAAWO,IAAI,CACrDF,KAAM,IAAID,KAAeG,GAAMF,MAAQ"}

package/dist/components/organisms/AssetManager/hooks/useUploadAsset.d.ts

@@ -4,7 +4,7 @@ import { UploadAssetResponse } from '../types/index.js';
 
 /**
  * Hook to upload assets to the API
- * Automatically invalidates the assets query after successful upload
+ * Automatically updates the assets query cache after successful upload
  * @returns Mutation result with mutate function, loading state, and error state
  */
 declare const useUploadAsset: () => UseMutationResult<UploadAssetResponse, Error, UploadAssetParams>;

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

@@ -1,2 +1,2 @@
-import{useQueryClient as e,useMutation as r}from"@tanstack/react-query";import{uploadAsset as t,getAssetsKey as s}from"../services/asset.service.js";const o=()=>{const o=e();return r({mutationFn:t,onSuccess:(e,r)=>{o.invalidateQueries({queryKey:[s,r.orgId,r.brandId]})}})};export{o 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 { getAssetsKey, uploadAsset, type UploadAssetParams } from '../services/asset.service';\nimport type { UploadAssetResponse } from '../types';\n\n/**\n * Hook to upload assets to the API\n * Automatically invalidates the assets query 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    mutationFn: uploadAsset,\n    onSuccess: (_, variables) => {\n      // Invalidate assets query for the specific orgId and brandId to refetch the list\n      void queryClient.invalidateQueries({\n        queryKey: [getAssetsKey, variables.orgId, variables.brandId],\n      });\n    },\n  });\n};\n"],"names":["useUploadAsset","queryClient","useQueryClient","useMutation","mutationFn","uploadAsset","onSuccess","_","variables","invalidateQueries","queryKey","getAssetsKey","orgId","brandId"],"mappings":"qJAUO,MAAMA,EAAiB,KAC5B,MAAMC,EAAcC,IAEpB,OAAOC,EAA2D,CAChEC,WAAYC,EACZC,UAAW,CAACC,EAAGC,KAERP,EAAYQ,kBAAkB,CACjCC,SAAU,CAACC,EAAcH,EAAUI,MAAOJ,EAAUK"}
+{"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 { AssetResponse, UploadAssetResponse } from '../types';\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<AssetResponse>(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,aAA4BN,GAAWO,IAAI,CACrDF,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("../../atoms/Tab/index.cjs.js"),l=require("../../molecules/Modal/index.cjs.js"),r=require("../../molecules/Tabs/index.cjs.js"),n=require("@tanstack/react-query"),i=require("./hooks/useUploadAsset.cjs.js"),t=require("./LibraryTabContent/index.cjs.js"),o=require("./UploadTabContent/index.cjs.js");const c=new n.QueryClient,d=({open:n,onClose:c,onSelect:d,orgId:u,brandId:b,maxSelect:p=1})=>{const[j,m]=a.useState(new Map),[C,y]=a.useState("library"),[g,x]=a.useState([]),k=i.useUploadAsset();a.useEffect((()=>{n||(m(new Map),x([]))}),[n]);const f=a.useCallback((()=>{m(new Map),c()}),[c]),v=a.useCallback((()=>{const e=Array.from(j.values());d&&e.length>0&&d(e),m(new Map),c()}),[d,j,c]),q=a.useCallback((e=>{m((a=>{const s=a.has(e.id),l=new Map(a);return s?l.delete(e.id):1===p?(l.clear(),l.set(e.id,e)):l.size<p&&l.set(e.id,e),l}))}),[p]),h=a.useCallback((()=>{k.mutate({orgId:u,brandId:b,files:g.map((e=>e.file))},{onSuccess:()=>{x([]),y("library")},onError:e=>{console.error("Upload failed:",e)}})}),[u,b,g,k]),S=a.useCallback((e=>{const a=e.map((e=>({file:e})));x((e=>[...e,...a]))}),[]),I=a.useCallback((e=>{x((a=>a.filter((a=>a.file!==e))))}),[]),M=a.useMemo((()=>{const e={label:"Cancel",onClick:f,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},a={library:[e,{label:"Select",onClick:v,variant:"primary",disabled:0===j.size,id:"asset-manager-select"}],upload:[e,{label:"Save",onClick:h,disabled:0===g.length||k.isPending,variant:"primary",id:"asset-manager-upload"}]};return a[C]??a.library}),[C,j.size,g.length,k.isPending,f,v,h]);return e.jsxs(l,{actions:M,onClose:f,open:n,size:"large",title:"library"===C?"Select Images":"Upload Images",children:[e.jsxs(r,{fdKey:"asset-manager-tabs",onChange:(e,a)=>y(a),value:C,children:[e.jsx(s,{label:"Upload",value:"upload"}),e.jsx(s,{label:"Library",value:"library"})]}),"library"===C?e.jsx(t,{brandId:b,enabled:n,onAssetClick:q,orgId:u,selectedAssets:j}):e.jsx(o,{files:g,onRemove:I,onUpload:S})]})};module.exports=a=>e.jsx(n.QueryClientProvider,{client:c,children:e.jsx(d,{...a})});
+"use strict";var e=require("react/jsx-runtime"),a=require("react"),s=require("@mui/material/styles"),r=require("@mui/material/Box"),i=require("../../atoms/Tab/index.cjs.js"),l=require("../../molecules/Modal/index.cjs.js"),t=require("../../molecules/Tabs/index.cjs.js"),n=require("../../../providers/TranslationProvider.cjs.js"),o=require("@tanstack/react-query"),c=require("./hooks/useGetAssets.cjs.js"),u=require("./hooks/useUploadAsset.cjs.js"),d=require("./LibraryTabContent/index.cjs.js"),p=require("./UploadTabContent/index.cjs.js");const b=s.styled(r)((({theme:e})=>({height:"calc(70vh - 200px)",overflowY:"auto",marginTop:e.spacing(2),marginRight:e.spacing(-2),paddingRight:e.spacing(2)}))),m=new o.QueryClient,j=({open:s,onClose:r,onSelect:o,orgId:m,brandId:j,maxSelect:g=1})=>{const[x,y]=a.useState(new Map),[C,f]=a.useState("library"),[h,v]=a.useState([]),q=u.useUploadAsset(),{translate:k}=n.useTranslation(),{data:S,isLoading:w,error:M}=c.useGetAssets(m,s,j);a.useEffect((()=>{s||(y(new Map),v([]))}),[s]);const A=a.useCallback((()=>{y(new Map),r()}),[r]),T=a.useCallback((()=>{if(0===x.size)return;const e=Array.from(x.values());o&&e.length>0&&o(e),y(new Map),r()}),[o,x,r]),U=a.useCallback((e=>{y((a=>{const s=a.has(e.id),r=new Map(a);return s?r.delete(e.id):1===g?(r.clear(),r.set(e.id,e)):r.size<g&&r.set(e.id,e),r}))}),[g]),I=a.useCallback((()=>{q.mutate({orgId:m,brandId:j,files:h.map((e=>e.file))},{onSuccess:e=>{const a=e.data||[];y((e=>{const s=new Map(e);for(const e of a)s.size<g&&s.set(e.id,e);return s})),v([]),f("library")},onError:e=>{console.error("Upload failed:",e)}})}),[m,j,h,q,g]),z=a.useCallback((e=>{if(0===e.length)return;const a=e.map((e=>({file:e})));v((e=>[...e,...a]))}),[]),L=a.useCallback((e=>{v((a=>a.filter((a=>a.file!==e))))}),[]),P=a.useMemo((()=>{const e={label:k("Cancel"),onClick:A,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},a={library:[e,{label:k("Select"),onClick:T,variant:"primary",id:"asset-manager-select"}],upload:[e,{label:k("Save"),onClick:I,disabled:q.isPending,variant:"primary",id:"asset-manager-upload"}]};return a[C]??a.library}),[C,q.isPending,A,T,I,k]);return e.jsxs(l,{actions:P,onClose:A,open:s,size:"large",title:k("library"===C?"Select_Images":"Upload_Images"),children:[e.jsxs(t,{fdKey:"asset-manager-tabs",onChange:(e,a)=>{f(a),v([])},value:C,children:[e.jsx(i,{label:k("Upload"),value:"upload"}),e.jsx(i,{label:k("Library"),value:"library"})]}),e.jsx(b,{children:"library"===C?e.jsx(d,{assets:S?.data,error:M,isLoading:w,onAssetClick:U,selectedAssets:x}):e.jsx(p,{files:h,onRemove:L,onUpload:z})})]})};module.exports=a=>e.jsx(o.QueryClientProvider,{client:m,children:e.jsx(j,{...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 Tab from '@fd/components/atoms/Tab';\nimport Modal, { type ModalAction } from '@fd/components/molecules/Modal';\nimport Tabs from '@fd/components/molecules/Tabs';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\n\nimport type { FileUploadState } from '../FileUpload';\nimport { useUploadAsset } from './hooks/useUploadAsset';\nimport LibraryTabContent from './LibraryTabContent';\nimport type { Asset } from './types';\nimport UploadAssetContent from './UploadTabContent';\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\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  // Use Map for O(1) lookup performance and direct access to Asset objects\n  const [selectedAssetsMap, setSelectedAssetsMap] = useState<Map<string, Asset>>(new Map());\n  const [selectedTab, setSelectedTab] = useState<string>('library');\n  const [uploadedFiles, setUploadedFiles] = useState<FileUploadState[]>([]);\n  const uploadMutation = useUploadAsset();\n\n  // Reset selection when modal opens/closes\n  useEffect(() => {\n    if (!open) {\n      setSelectedAssetsMap(new Map());\n      setUploadedFiles([]);\n    }\n  }, [open]);\n\n  const handleCancel = useCallback((): void => {\n    setSelectedAssetsMap(new Map());\n    onClose();\n  }, [onClose]);\n\n  const handleSelect = useCallback((): void => {\n    const selectedAssets = Array.from(selectedAssetsMap.values());\n    if (onSelect && selectedAssets.length > 0) {\n      onSelect(selectedAssets);\n    }\n    setSelectedAssetsMap(new Map());\n    onClose();\n  }, [onSelect, selectedAssetsMap, onClose]);\n\n  // TODO: translate titles\n  const getTitle = (): string => {\n    switch (selectedTab) {\n      case 'library':\n        return 'Select Images';\n      default:\n        return 'Upload Images';\n    }\n  };\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 handleSaveAssets = useCallback((): void => {\n    uploadMutation.mutate(\n      {\n        orgId,\n        brandId,\n        files: uploadedFiles.map((file) => file.file),\n      },\n      {\n        onSuccess: () => {\n          // Clear uploaded files and switch to library tab\n          setUploadedFiles([]);\n          setSelectedTab('library');\n        },\n        onError: (error) => {\n          console.error('Upload failed:', error);\n          // Error handling - you could add a snackbar notification here\n        },\n      },\n    );\n  }, [orgId, brandId, uploadedFiles, uploadMutation]);\n\n  const handleUpload = useCallback((files: File[]): void => {\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  // Tab-specific action button configurations\n  // TODO: translate button labels\n  const actionButtons = useMemo<ModalAction[]>(() => {\n    // Common cancel button configuration\n    const cancelButton: ModalAction = {\n      label: '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: 'Select',\n          onClick: handleSelect,\n          variant: 'primary',\n          disabled: selectedAssetsMap.size === 0,\n          id: 'asset-manager-select',\n        },\n      ],\n      upload: [\n        cancelButton,\n        {\n          label: 'Save',\n          onClick: handleSaveAssets,\n          disabled: uploadedFiles.length === 0 || uploadMutation.isPending,\n          variant: 'primary',\n          id: 'asset-manager-upload',\n        },\n      ],\n    };\n\n    return tabActions[selectedTab] ?? (tabActions['library'] as ModalAction[]);\n  }, [\n    selectedTab,\n    selectedAssetsMap.size,\n    uploadedFiles.length,\n    uploadMutation.isPending,\n    handleCancel,\n    handleSelect,\n    handleSaveAssets,\n  ]);\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) => setSelectedTab(value)}\n        value={selectedTab}\n      >\n        <Tab label=\"Upload\" value=\"upload\" />\n        <Tab label=\"Library\" value=\"library\" />\n      </Tabs>\n      {selectedTab === 'library' ? (\n        <LibraryTabContent\n          brandId={brandId}\n          enabled={open}\n          onAssetClick={handleAssetClick}\n          orgId={orgId}\n          selectedAssets={selectedAssetsMap}\n        />\n      ) : (\n        <UploadAssetContent files={uploadedFiles} onRemove={handleRemove} onUpload={handleUpload} />\n      )}\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 default AssetManager;\n"],"names":["queryClient","QueryClient","AssetManagerContent","open","onClose","onSelect","orgId","brandId","maxSelect","selectedAssetsMap","setSelectedAssetsMap","useState","Map","selectedTab","setSelectedTab","uploadedFiles","setUploadedFiles","uploadMutation","useUploadAsset","useEffect","handleCancel","useCallback","handleSelect","selectedAssets","Array","from","values","length","handleAssetClick","asset","prevMap","isSelected","has","id","newMap","delete","clear","set","size","handleSaveAssets","mutate","files","map","file","onSuccess","onError","error","console","handleUpload","newFiles","prev","handleRemove","fileToRemove","filter","fileState","actionButtons","useMemo","cancelButton","label","onClick","variant","tone","tabActions","library","disabled","upload","isPending","_jsxs","Modal","actions","title","children","Tabs","fdKey","onChange","_","value","_jsx","Tab","LibraryTabContent","enabled","onAssetClick","UploadAssetContent","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 type { FileUploadState } from '../FileUpload';\nimport { useGetAssets } from './hooks/useGetAssets';\nimport { useUploadAsset } from './hooks/useUploadAsset';\nimport LibraryTabContent from './LibraryTabContent';\nimport type { Asset } from './types';\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  paddingRight: theme.spacing(2), // 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\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  // Use Map for O(1) lookup performance and direct access to Asset objects\n  const [selectedAssetsMap, setSelectedAssetsMap] = useState<Map<string, Asset>>(new Map());\n  const [selectedTab, setSelectedTab] = useState<string>('library');\n  const [uploadedFiles, setUploadedFiles] = useState<FileUploadState[]>([]);\n  const uploadMutation = useUploadAsset();\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  // Reset selection when modal opens/closes\n  useEffect(() => {\n    if (!open) {\n      setSelectedAssetsMap(new Map());\n      setUploadedFiles([]);\n    }\n  }, [open]);\n\n  const handleCancel = useCallback((): void => {\n    setSelectedAssetsMap(new Map());\n    onClose();\n  }, [onClose]);\n\n  const handleSelect = useCallback((): void => {\n    if (selectedAssetsMap.size === 0) {\n      return;\n    }\n    const selectedAssets = Array.from(selectedAssetsMap.values());\n    if (onSelect && selectedAssets.length > 0) {\n      onSelect(selectedAssets);\n    }\n    setSelectedAssetsMap(new Map());\n    onClose();\n  }, [onSelect, selectedAssetsMap, onClose]);\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  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 handleSaveAssets = useCallback((): void => {\n    uploadMutation.mutate(\n      {\n        orgId,\n        brandId,\n        files: uploadedFiles.map((file) => file.file),\n      },\n      {\n        onSuccess: (response) => {\n          // Select the newly uploaded assets\n          const uploadedAssets = response.data || [];\n          setSelectedAssetsMap((prevMap) => {\n            const newMap = new Map(prevMap);\n            // Add uploaded assets to selection, respecting maxSelect limit\n            for (const asset of uploadedAssets) {\n              if (newMap.size < maxSelect) {\n                newMap.set(asset.id, asset);\n              }\n            }\n            return newMap;\n          });\n          // Clear uploaded files and switch to library tab\n          setUploadedFiles([]);\n          setSelectedTab('library');\n        },\n        onError: (error) => {\n          console.error('Upload failed:', error);\n          // Error handling - you could add a snackbar notification here\n        },\n      },\n    );\n  }, [orgId, brandId, uploadedFiles, uploadMutation, maxSelect]);\n\n  const handleUpload = useCallback((files: File[]): void => {\n    if (files.length === 0) {\n      return;\n    }\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  // 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: handleSelect,\n          variant: 'primary',\n          id: 'asset-manager-select',\n        },\n      ],\n      upload: [\n        cancelButton,\n        {\n          label: translate('Save'),\n          onClick: handleSaveAssets,\n          disabled: uploadMutation.isPending,\n          variant: 'primary',\n          id: 'asset-manager-upload',\n        },\n      ],\n    };\n\n    return tabActions[selectedTab] ?? (tabActions['library'] as ModalAction[]);\n  }, [selectedTab, uploadMutation.isPending, handleCancel, handleSelect, handleSaveAssets, 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          setUploadedFiles([]);\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 files={uploadedFiles} onRemove={handleRemove} onUpload={handleUpload} />\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 default AssetManager;\n"],"names":["StyledScrollableContent","styled","Box","theme","height","overflowY","marginTop","spacing","marginRight","paddingRight","queryClient","QueryClient","AssetManagerContent","open","onClose","onSelect","orgId","brandId","maxSelect","selectedAssetsMap","setSelectedAssetsMap","useState","Map","selectedTab","setSelectedTab","uploadedFiles","setUploadedFiles","uploadMutation","useUploadAsset","translate","useTranslation","data","assetResponse","isLoading","isLoadingAssets","error","assetsError","useGetAssets","useEffect","handleCancel","useCallback","handleSelect","size","selectedAssets","Array","from","values","length","handleAssetClick","asset","prevMap","isSelected","has","id","newMap","delete","clear","set","handleSaveAssets","mutate","files","map","file","onSuccess","response","uploadedAssets","onError","console","handleUpload","newFiles","prev","handleRemove","fileToRemove","filter","fileState","actionButtons","useMemo","cancelButton","label","onClick","variant","tone","tabActions","library","upload","disabled","isPending","_jsxs","Modal","actions","title","Tabs","fdKey","onChange","_","value","_jsx","Tab","children","LibraryTabContent","assets","onAssetClick","UploadAssetContent","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 l,useCallback as n,useMemo as o}from"react";import t from"../../atoms/Tab/index.js";import i from"../../molecules/Modal/index.js";import s from"../../molecules/Tabs/index.js";import{QueryClient as d,QueryClientProvider as c}from"@tanstack/react-query";import{useUploadAsset as m}from"./hooks/useUploadAsset.js";import p from"./LibraryTabContent/index.js";import b from"./UploadTabContent/index.js";const f=new d,u=({open:d,onClose:c,onSelect:f,orgId:u,brandId:g,maxSelect:y=1})=>{const[C,h]=r(new Map),[v,x]=r("library"),[I,j]=r([]),k=m();l((()=>{d||(h(new Map),j([]))}),[d]);const w=n((()=>{h(new Map),c()}),[c]),M=n((()=>{const e=Array.from(C.values());f&&e.length>0&&f(e),h(new Map),c()}),[f,C,c]),S=n((e=>{h((a=>{const r=a.has(e.id),l=new Map(a);return r?l.delete(e.id):1===y?(l.clear(),l.set(e.id,e)):l.size<y&&l.set(e.id,e),l}))}),[y]),U=n((()=>{k.mutate({orgId:u,brandId:g,files:I.map((e=>e.file))},{onSuccess:()=>{j([]),x("library")},onError:e=>{console.error("Upload failed:",e)}})}),[u,g,I,k]),z=n((e=>{const a=e.map((e=>({file:e})));j((e=>[...e,...a]))}),[]),A=n((e=>{j((a=>a.filter((a=>a.file!==e))))}),[]),T=o((()=>{const e={label:"Cancel",onClick:w,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},a={library:[e,{label:"Select",onClick:M,variant:"primary",disabled:0===C.size,id:"asset-manager-select"}],upload:[e,{label:"Save",onClick:U,disabled:0===I.length||k.isPending,variant:"primary",id:"asset-manager-upload"}]};return a[v]??a.library}),[v,C.size,I.length,k.isPending,w,M,U]);return a(i,{actions:T,onClose:w,open:d,size:"large",title:"library"===v?"Select Images":"Upload Images",children:[a(s,{fdKey:"asset-manager-tabs",onChange:(e,a)=>x(a),value:v,children:[e(t,{label:"Upload",value:"upload"}),e(t,{label:"Library",value:"library"})]}),"library"===v?e(p,{brandId:g,enabled:d,onAssetClick:S,orgId:u,selectedAssets:C}):e(b,{files:I,onRemove:A,onUpload:z})]})},g=a=>e(c,{client:f,children:e(u,{...a})});export{g as default};
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useState as r,useEffect as o,useCallback as t,useMemo as i}from"react";import{styled as n}from"@mui/material/styles";import s from"@mui/material/Box";import l 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 f}from"@tanstack/react-query";import{useGetAssets as u}from"./hooks/useGetAssets.js";import{useUploadAsset as g}from"./hooks/useUploadAsset.js";import b from"./LibraryTabContent/index.js";import h from"./UploadTabContent/index.js";const y=n(s)((({theme:e})=>({height:"calc(70vh - 200px)",overflowY:"auto",marginTop:e.spacing(2),marginRight:e.spacing(-2),paddingRight:e.spacing(2)}))),v=new p,x=({open:n,onClose:s,onSelect:p,orgId:f,brandId:v,maxSelect:x=1})=>{const[C,j]=r(new Map),[w,k]=r("library"),[M,I]=r([]),S=g(),{translate:T}=c(),{data:U,isLoading:A,error:z}=u(f,n,v);o((()=>{n||(j(new Map),I([]))}),[n]);const L=t((()=>{j(new Map),s()}),[s]),P=t((()=>{if(0===C.size)return;const e=Array.from(C.values());p&&e.length>0&&p(e),j(new Map),s()}),[p,C,s]),R=t((e=>{j((a=>{const r=a.has(e.id),o=new Map(a);return r?o.delete(e.id):1===x?(o.clear(),o.set(e.id,e)):o.size<x&&o.set(e.id,e),o}))}),[x]),_=t((()=>{S.mutate({orgId:f,brandId:v,files:M.map((e=>e.file))},{onSuccess:e=>{const a=e.data||[];j((e=>{const r=new Map(e);for(const e of a)r.size<x&&r.set(e.id,e);return r})),I([]),k("library")},onError:e=>{console.error("Upload failed:",e)}})}),[f,v,M,S,x]),q=t((e=>{if(0===e.length)return;const a=e.map((e=>({file:e})));I((e=>[...e,...a]))}),[]),B=t((e=>{I((a=>a.filter((a=>a.file!==e))))}),[]),E=i((()=>{const e={label:T("Cancel"),onClick:L,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},a={library:[e,{label:T("Select"),onClick:P,variant:"primary",id:"asset-manager-select"}],upload:[e,{label:T("Save"),onClick:_,disabled:S.isPending,variant:"primary",id:"asset-manager-upload"}]};return a[w]??a.library}),[w,S.isPending,L,P,_,T]);return a(d,{actions:E,onClose:L,open:n,size:"large",title:T("library"===w?"Select_Images":"Upload_Images"),children:[a(m,{fdKey:"asset-manager-tabs",onChange:(e,a)=>{k(a),I([])},value:w,children:[e(l,{label:T("Upload"),value:"upload"}),e(l,{label:T("Library"),value:"library"})]}),e(y,{children:"library"===w?e(b,{assets:U?.data,error:z,isLoading:A,onAssetClick:R,selectedAssets:C}):e(h,{files:M,onRemove:B,onUpload:q})})]})},C=a=>e(f,{client:v,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 Tab from '@fd/components/atoms/Tab';\nimport Modal, { type ModalAction } from '@fd/components/molecules/Modal';\nimport Tabs from '@fd/components/molecules/Tabs';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\n\nimport type { FileUploadState } from '../FileUpload';\nimport { useUploadAsset } from './hooks/useUploadAsset';\nimport LibraryTabContent from './LibraryTabContent';\nimport type { Asset } from './types';\nimport UploadAssetContent from './UploadTabContent';\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\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  // Use Map for O(1) lookup performance and direct access to Asset objects\n  const [selectedAssetsMap, setSelectedAssetsMap] = useState<Map<string, Asset>>(new Map());\n  const [selectedTab, setSelectedTab] = useState<string>('library');\n  const [uploadedFiles, setUploadedFiles] = useState<FileUploadState[]>([]);\n  const uploadMutation = useUploadAsset();\n\n  // Reset selection when modal opens/closes\n  useEffect(() => {\n    if (!open) {\n      setSelectedAssetsMap(new Map());\n      setUploadedFiles([]);\n    }\n  }, [open]);\n\n  const handleCancel = useCallback((): void => {\n    setSelectedAssetsMap(new Map());\n    onClose();\n  }, [onClose]);\n\n  const handleSelect = useCallback((): void => {\n    const selectedAssets = Array.from(selectedAssetsMap.values());\n    if (onSelect && selectedAssets.length > 0) {\n      onSelect(selectedAssets);\n    }\n    setSelectedAssetsMap(new Map());\n    onClose();\n  }, [onSelect, selectedAssetsMap, onClose]);\n\n  // TODO: translate titles\n  const getTitle = (): string => {\n    switch (selectedTab) {\n      case 'library':\n        return 'Select Images';\n      default:\n        return 'Upload Images';\n    }\n  };\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 handleSaveAssets = useCallback((): void => {\n    uploadMutation.mutate(\n      {\n        orgId,\n        brandId,\n        files: uploadedFiles.map((file) => file.file),\n      },\n      {\n        onSuccess: () => {\n          // Clear uploaded files and switch to library tab\n          setUploadedFiles([]);\n          setSelectedTab('library');\n        },\n        onError: (error) => {\n          console.error('Upload failed:', error);\n          // Error handling - you could add a snackbar notification here\n        },\n      },\n    );\n  }, [orgId, brandId, uploadedFiles, uploadMutation]);\n\n  const handleUpload = useCallback((files: File[]): void => {\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  // Tab-specific action button configurations\n  // TODO: translate button labels\n  const actionButtons = useMemo<ModalAction[]>(() => {\n    // Common cancel button configuration\n    const cancelButton: ModalAction = {\n      label: '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: 'Select',\n          onClick: handleSelect,\n          variant: 'primary',\n          disabled: selectedAssetsMap.size === 0,\n          id: 'asset-manager-select',\n        },\n      ],\n      upload: [\n        cancelButton,\n        {\n          label: 'Save',\n          onClick: handleSaveAssets,\n          disabled: uploadedFiles.length === 0 || uploadMutation.isPending,\n          variant: 'primary',\n          id: 'asset-manager-upload',\n        },\n      ],\n    };\n\n    return tabActions[selectedTab] ?? (tabActions['library'] as ModalAction[]);\n  }, [\n    selectedTab,\n    selectedAssetsMap.size,\n    uploadedFiles.length,\n    uploadMutation.isPending,\n    handleCancel,\n    handleSelect,\n    handleSaveAssets,\n  ]);\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) => setSelectedTab(value)}\n        value={selectedTab}\n      >\n        <Tab label=\"Upload\" value=\"upload\" />\n        <Tab label=\"Library\" value=\"library\" />\n      </Tabs>\n      {selectedTab === 'library' ? (\n        <LibraryTabContent\n          brandId={brandId}\n          enabled={open}\n          onAssetClick={handleAssetClick}\n          orgId={orgId}\n          selectedAssets={selectedAssetsMap}\n        />\n      ) : (\n        <UploadAssetContent files={uploadedFiles} onRemove={handleRemove} onUpload={handleUpload} />\n      )}\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 default AssetManager;\n"],"names":["queryClient","QueryClient","AssetManagerContent","open","onClose","onSelect","orgId","brandId","maxSelect","selectedAssetsMap","setSelectedAssetsMap","useState","Map","selectedTab","setSelectedTab","uploadedFiles","setUploadedFiles","uploadMutation","useUploadAsset","useEffect","handleCancel","useCallback","handleSelect","selectedAssets","Array","from","values","length","handleAssetClick","asset","prevMap","isSelected","has","id","newMap","delete","clear","set","size","handleSaveAssets","mutate","files","map","file","onSuccess","onError","error","console","handleUpload","newFiles","prev","handleRemove","fileToRemove","filter","fileState","actionButtons","useMemo","cancelButton","label","onClick","variant","tone","tabActions","library","disabled","upload","isPending","_jsxs","Modal","actions","title","children","Tabs","fdKey","onChange","_","value","_jsx","Tab","LibraryTabContent","enabled","onAssetClick","UploadAssetContent","onRemove","onUpload","AssetManager","props","QueryClientProvider","client"],"mappings":"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"}
+{"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 type { FileUploadState } from '../FileUpload';\nimport { useGetAssets } from './hooks/useGetAssets';\nimport { useUploadAsset } from './hooks/useUploadAsset';\nimport LibraryTabContent from './LibraryTabContent';\nimport type { Asset } from './types';\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  paddingRight: theme.spacing(2), // 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\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  // Use Map for O(1) lookup performance and direct access to Asset objects\n  const [selectedAssetsMap, setSelectedAssetsMap] = useState<Map<string, Asset>>(new Map());\n  const [selectedTab, setSelectedTab] = useState<string>('library');\n  const [uploadedFiles, setUploadedFiles] = useState<FileUploadState[]>([]);\n  const uploadMutation = useUploadAsset();\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  // Reset selection when modal opens/closes\n  useEffect(() => {\n    if (!open) {\n      setSelectedAssetsMap(new Map());\n      setUploadedFiles([]);\n    }\n  }, [open]);\n\n  const handleCancel = useCallback((): void => {\n    setSelectedAssetsMap(new Map());\n    onClose();\n  }, [onClose]);\n\n  const handleSelect = useCallback((): void => {\n    if (selectedAssetsMap.size === 0) {\n      return;\n    }\n    const selectedAssets = Array.from(selectedAssetsMap.values());\n    if (onSelect && selectedAssets.length > 0) {\n      onSelect(selectedAssets);\n    }\n    setSelectedAssetsMap(new Map());\n    onClose();\n  }, [onSelect, selectedAssetsMap, onClose]);\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  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 handleSaveAssets = useCallback((): void => {\n    uploadMutation.mutate(\n      {\n        orgId,\n        brandId,\n        files: uploadedFiles.map((file) => file.file),\n      },\n      {\n        onSuccess: (response) => {\n          // Select the newly uploaded assets\n          const uploadedAssets = response.data || [];\n          setSelectedAssetsMap((prevMap) => {\n            const newMap = new Map(prevMap);\n            // Add uploaded assets to selection, respecting maxSelect limit\n            for (const asset of uploadedAssets) {\n              if (newMap.size < maxSelect) {\n                newMap.set(asset.id, asset);\n              }\n            }\n            return newMap;\n          });\n          // Clear uploaded files and switch to library tab\n          setUploadedFiles([]);\n          setSelectedTab('library');\n        },\n        onError: (error) => {\n          console.error('Upload failed:', error);\n          // Error handling - you could add a snackbar notification here\n        },\n      },\n    );\n  }, [orgId, brandId, uploadedFiles, uploadMutation, maxSelect]);\n\n  const handleUpload = useCallback((files: File[]): void => {\n    if (files.length === 0) {\n      return;\n    }\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  // 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: handleSelect,\n          variant: 'primary',\n          id: 'asset-manager-select',\n        },\n      ],\n      upload: [\n        cancelButton,\n        {\n          label: translate('Save'),\n          onClick: handleSaveAssets,\n          disabled: uploadMutation.isPending,\n          variant: 'primary',\n          id: 'asset-manager-upload',\n        },\n      ],\n    };\n\n    return tabActions[selectedTab] ?? (tabActions['library'] as ModalAction[]);\n  }, [selectedTab, uploadMutation.isPending, handleCancel, handleSelect, handleSaveAssets, 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          setUploadedFiles([]);\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 files={uploadedFiles} onRemove={handleRemove} onUpload={handleUpload} />\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 default AssetManager;\n"],"names":["StyledScrollableContent","styled","Box","theme","height","overflowY","marginTop","spacing","marginRight","paddingRight","queryClient","QueryClient","AssetManagerContent","open","onClose","onSelect","orgId","brandId","maxSelect","selectedAssetsMap","setSelectedAssetsMap","useState","Map","selectedTab","setSelectedTab","uploadedFiles","setUploadedFiles","uploadMutation","useUploadAsset","translate","useTranslation","data","assetResponse","isLoading","isLoadingAssets","error","assetsError","useGetAssets","useEffect","handleCancel","useCallback","handleSelect","size","selectedAssets","Array","from","values","length","handleAssetClick","asset","prevMap","isSelected","has","id","newMap","delete","clear","set","handleSaveAssets","mutate","files","map","file","onSuccess","response","uploadedAssets","onError","console","handleUpload","newFiles","prev","handleRemove","fileToRemove","filter","fileState","actionButtons","useMemo","cancelButton","label","onClick","variant","tone","tabActions","library","upload","disabled","isPending","_jsxs","Modal","actions","title","Tabs","fdKey","onChange","_","value","_jsx","Tab","children","LibraryTabContent","assets","onAssetClick","UploadAssetContent","onRemove","onUpload","AssetManager","props","QueryClientProvider","client"],"mappings":"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"}

package/dist/components/organisms/AssetManager/services/asset.service.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const t=()=>{const t=window.location?.host?.includes("portal.flipdish.com");return t?"https://api.portal.flipdish.com/assets":"https://api-prod-staging.portal.flipdishdev.com/assets"};exports.getAssets=async(s,e)=>{const o=((s,e)=>{if(!s)return;const o=e?`?brandId=${e}`:"";return`${t()}/orgs/${s}/assets${o}`})(s,e);if(!o)throw new Error("Organization ID is required to fetch assets");const r=await fetch(o,{method:"GET",credentials:"include"});if(!r.ok)throw new Error(`Failed to fetch assets: ${r.statusText}`);return await r.json()},exports.getAssetsKey="getAssets",exports.uploadAsset=async s=>{const{orgId:e,brandId:o,files:r}=s;if(!e)throw new Error("Organization ID is required to upload assets");if(!r||0===r.length)throw new Error("At least one file is required to upload");const a=`${t()}/orgs/${e}/assets/upload`,i=new FormData;r.forEach((t=>{i.append("files",t)})),o&&i.append("brandId",o);const n=await fetch(a,{method:"POST",credentials:"include",body:i});if(!n.ok)throw new Error(`Failed to upload assets: ${n.statusText}`);return await n.json()},exports.uploadAssetKey="uploadAsset";
+"use strict";const t=()=>{const t=window.location?.host?.includes("portal.flipdish.com");return t?"https://api.portal.flipdish.com/assets":"https://api-prod-staging.portal.flipdishdev.com/assets"};exports.getAssets=async(s,e)=>{const o=((s,e)=>{if(!s)return;const o=e?`?brandId=${e}`:"";return`${t()}/orgs/${s}/assets${o}`})(s,e);if(!o)throw new Error("Organization ID is required to fetch assets");const r=await fetch(o,{method:"GET",credentials:"include"});if(!r.ok)throw new Error(`Failed to fetch assets: ${r.statusText}`);return await r.json()},exports.uploadAsset=async s=>{const{orgId:e,brandId:o,files:r}=s;if(!e)throw new Error("Organization ID is required to upload assets");if(!r||0===r.length)throw new Error("At least one file is required to upload");const a=`${t()}/orgs/${e}/assets/upload`,i=new FormData;r.forEach((t=>{i.append("files",t)})),o&&i.append("brandId",o);const n=await fetch(a,{method:"POST",credentials:"include",body:i});if(!n.ok)throw new Error(`Failed to upload assets: ${n.statusText}`);return await n.json()};
 //# sourceMappingURL=asset.service.cjs.js.map

package/dist/components/organisms/AssetManager/services/asset.service.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"asset.service.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/services/asset.service.ts"],"sourcesContent":["import type { AssetResponse, UploadAssetResponse } from '../types';\n\nexport const getAssetsKey = 'getAssets';\nexport const uploadAssetKey = 'uploadAsset';\n\nconst PROD_API_URL = 'https://api.portal.flipdish.com/assets';\nconst DEV_STAGING_API_URL = 'https://api-prod-staging.portal.flipdishdev.com/assets';\n\n/**\n * Gets the asset management API base URL based on the current environment\n * @returns The appropriate API URL for the current environment\n */\nconst getAssetManagementApiUrl = (): string => {\n  const isProd = window.location?.host?.includes('portal.flipdish.com');\n\n  if (isProd) {\n    return PROD_API_URL;\n  }\n\n  return DEV_STAGING_API_URL;\n};\n\n/**\n * Builds the complete API URL for fetching assets\n * @param orgId - Optional organization ID.\n * @param brandId - Optional brand ID.\n * @returns The complete API URL or undefined if no orgId available\n */\nconst buildApiUrl = (orgId: string, brandId?: string): string | undefined => {\n  if (!orgId) return undefined;\n  const brandIdQueryParam = brandId ? `?brandId=${brandId}` : '';\n  const baseUrl = getAssetManagementApiUrl();\n  return `${baseUrl}/orgs/${orgId}/assets${brandIdQueryParam}`;\n};\n\n/**\n * Fetches assets from the asset management service API\n * @param orgId - organization ID.\n * @param brandId - brand ID.\n * @returns Promise resolving to an array of assets\n */\nexport const getAssets = async (orgId: string, brandId?: string): Promise<AssetResponse> => {\n  const apiUrl = buildApiUrl(orgId, brandId);\n\n  if (!apiUrl) {\n    throw new Error('Organization ID is required to fetch assets');\n  }\n\n  const response = await fetch(apiUrl, {\n    method: 'GET',\n    credentials: 'include',\n  });\n\n  if (!response.ok) {\n    throw new Error(`Failed to fetch assets: ${response.statusText}`);\n  }\n\n  return (await response.json()) as AssetResponse;\n};\n\n/**\n * Upload parameters for asset upload\n */\nexport interface UploadAssetParams {\n  /** Organization ID */\n  orgId: string;\n  /** Optional brand ID */\n  brandId?: string;\n  /** The files to upload */\n  files: File[];\n}\n\n/**\n * Uploads multiple assets to the asset management service API\n * @param params - Upload parameters containing orgId, brandId, and files\n * @returns Promise resolving to an array of uploaded assets\n */\nexport const uploadAsset = async (params: UploadAssetParams): Promise<UploadAssetResponse> => {\n  const { orgId, brandId, files } = params;\n\n  if (!orgId) {\n    throw new Error('Organization ID is required to upload assets');\n  }\n\n  if (!files || files.length === 0) {\n    throw new Error('At least one file is required to upload');\n  }\n\n  const baseUrl = getAssetManagementApiUrl();\n  const apiUrl = `${baseUrl}/orgs/${orgId}/assets/upload`;\n\n  const formData = new FormData();\n\n  // Append all files under the 'files' key\n  files.forEach((file) => {\n    formData.append('files', file);\n  });\n\n  if (brandId) {\n    formData.append('brandId', brandId);\n  }\n\n  const response = await fetch(apiUrl, {\n    method: 'POST',\n    credentials: 'include',\n    body: formData,\n  });\n\n  if (!response.ok) {\n    throw new Error(`Failed to upload assets: ${response.statusText}`);\n  }\n\n  return (await response.json()) as UploadAssetResponse;\n};\n"],"names":["getAssetManagementApiUrl","isProd","window","location","host","includes","async","orgId","brandId","apiUrl","brandIdQueryParam","buildApiUrl","Error","response","fetch","method","credentials","ok","statusText","json","params","files","length","formData","FormData","forEach","file","append","body"],"mappings":"aAEO,MAUDA,EAA2B,KAC/B,MAAMC,EAASC,OAAOC,UAAUC,MAAMC,SAAS,uBAE/C,OAAIJ,EAVe,yCACO,4EAmCHK,MAAOC,EAAeC,KAC7C,MAAMC,EAdY,EAACF,EAAeC,KAClC,IAAKD,EAAO,OACZ,MAAMG,EAAoBF,EAAU,YAAYA,IAAY,GAE5D,MAAO,GADSR,YACUO,WAAeG,KAU1BC,CAAYJ,EAAOC,GAElC,IAAKC,EACH,MAAM,IAAIG,MAAM,+CAGlB,MAAMC,QAAiBC,MAAML,EAAQ,CACnCM,OAAQ,MACRC,YAAa,YAGf,IAAKH,EAASI,GACZ,MAAM,IAAIL,MAAM,2BAA2BC,EAASK,cAGtD,aAAcL,EAASM,6BAvDG,gCA2EDb,MAAOc,IAChC,MAAMb,MAAEA,EAAKC,QAAEA,EAAOa,MAAEA,GAAUD,EAElC,IAAKb,EACH,MAAM,IAAIK,MAAM,gDAGlB,IAAKS,GAA0B,IAAjBA,EAAMC,OAClB,MAAM,IAAIV,MAAM,2CAGlB,MACMH,EAAS,GADCT,YACkBO,kBAE5BgB,EAAW,IAAIC,SAGrBH,EAAMI,SAASC,IACbH,EAASI,OAAO,QAASD,MAGvBlB,GACFe,EAASI,OAAO,UAAWnB,GAG7B,MAAMK,QAAiBC,MAAML,EAAQ,CACnCM,OAAQ,OACRC,YAAa,UACbY,KAAML,IAGR,IAAKV,EAASI,GACZ,MAAM,IAAIL,MAAM,4BAA4BC,EAASK,cAGvD,aAAcL,EAASM,+BA7GK"}
+{"version":3,"file":"asset.service.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/services/asset.service.ts"],"sourcesContent":["import type { AssetResponse, UploadAssetResponse } from '../types';\n\nconst PROD_API_URL = 'https://api.portal.flipdish.com/assets';\nconst DEV_STAGING_API_URL = 'https://api-prod-staging.portal.flipdishdev.com/assets';\n\n/**\n * Gets the asset management API base URL based on the current environment\n * @returns The appropriate API URL for the current environment\n */\nconst getAssetManagementApiUrl = (): string => {\n  const isProd = window.location?.host?.includes('portal.flipdish.com');\n\n  if (isProd) {\n    return PROD_API_URL;\n  }\n\n  return DEV_STAGING_API_URL;\n};\n\n/**\n * Builds the complete API URL for fetching assets\n * @param orgId - Optional organization ID.\n * @param brandId - Optional brand ID.\n * @returns The complete API URL or undefined if no orgId available\n */\nconst buildApiUrl = (orgId: string, brandId?: string): string | undefined => {\n  if (!orgId) return undefined;\n  const brandIdQueryParam = brandId ? `?brandId=${brandId}` : '';\n  const baseUrl = getAssetManagementApiUrl();\n  return `${baseUrl}/orgs/${orgId}/assets${brandIdQueryParam}`;\n};\n\n/**\n * Fetches assets from the asset management service API\n * @param orgId - organization ID.\n * @param brandId - brand ID.\n * @returns Promise resolving to an array of assets\n */\nexport const getAssets = async (orgId: string, brandId?: string): Promise<AssetResponse> => {\n  const apiUrl = buildApiUrl(orgId, brandId);\n\n  if (!apiUrl) {\n    throw new Error('Organization ID is required to fetch assets');\n  }\n\n  const response = await fetch(apiUrl, {\n    method: 'GET',\n    credentials: 'include',\n  });\n\n  if (!response.ok) {\n    throw new Error(`Failed to fetch assets: ${response.statusText}`);\n  }\n\n  return (await response.json()) as AssetResponse;\n};\n\n/**\n * Upload parameters for asset upload\n */\nexport interface UploadAssetParams {\n  /** Organization ID */\n  orgId: string;\n  /** Optional brand ID */\n  brandId?: string;\n  /** The files to upload */\n  files: File[];\n}\n\n/**\n * Uploads multiple assets to the asset management service API\n * @param params - Upload parameters containing orgId, brandId, and files\n * @returns Promise resolving to an array of uploaded assets\n */\nexport const uploadAsset = async (params: UploadAssetParams): Promise<UploadAssetResponse> => {\n  const { orgId, brandId, files } = params;\n\n  if (!orgId) {\n    throw new Error('Organization ID is required to upload assets');\n  }\n\n  if (!files || files.length === 0) {\n    throw new Error('At least one file is required to upload');\n  }\n\n  const baseUrl = getAssetManagementApiUrl();\n  const apiUrl = `${baseUrl}/orgs/${orgId}/assets/upload`;\n\n  const formData = new FormData();\n\n  // Append all files under the 'files' key\n  files.forEach((file) => {\n    formData.append('files', file);\n  });\n\n  if (brandId) {\n    formData.append('brandId', brandId);\n  }\n\n  const response = await fetch(apiUrl, {\n    method: 'POST',\n    credentials: 'include',\n    body: formData,\n  });\n\n  if (!response.ok) {\n    throw new Error(`Failed to upload assets: ${response.statusText}`);\n  }\n\n  return (await response.json()) as UploadAssetResponse;\n};\n"],"names":["getAssetManagementApiUrl","isProd","window","location","host","includes","async","orgId","brandId","apiUrl","brandIdQueryParam","buildApiUrl","Error","response","fetch","method","credentials","ok","statusText","json","params","files","length","formData","FormData","forEach","file","append","body"],"mappings":"aAEA,MAOMA,EAA2B,KAC/B,MAAMC,EAASC,OAAOC,UAAUC,MAAMC,SAAS,uBAE/C,OAAIJ,EAVe,yCACO,4EAmCHK,MAAOC,EAAeC,KAC7C,MAAMC,EAdY,EAACF,EAAeC,KAClC,IAAKD,EAAO,OACZ,MAAMG,EAAoBF,EAAU,YAAYA,IAAY,GAE5D,MAAO,GADSR,YACUO,WAAeG,KAU1BC,CAAYJ,EAAOC,GAElC,IAAKC,EACH,MAAM,IAAIG,MAAM,+CAGlB,MAAMC,QAAiBC,MAAML,EAAQ,CACnCM,OAAQ,MACRC,YAAa,YAGf,IAAKH,EAASI,GACZ,MAAM,IAAIL,MAAM,2BAA2BC,EAASK,cAGtD,aAAcL,EAASM,4BAoBEb,MAAOc,IAChC,MAAMb,MAAEA,EAAKC,QAAEA,EAAOa,MAAEA,GAAUD,EAElC,IAAKb,EACH,MAAM,IAAIK,MAAM,gDAGlB,IAAKS,GAA0B,IAAjBA,EAAMC,OAClB,MAAM,IAAIV,MAAM,2CAGlB,MACMH,EAAS,GADCT,YACkBO,kBAE5BgB,EAAW,IAAIC,SAGrBH,EAAMI,SAASC,IACbH,EAASI,OAAO,QAASD,MAGvBlB,GACFe,EAASI,OAAO,UAAWnB,GAG7B,MAAMK,QAAiBC,MAAML,EAAQ,CACnCM,OAAQ,OACRC,YAAa,UACbY,KAAML,IAGR,IAAKV,EAASI,GACZ,MAAM,IAAIL,MAAM,4BAA4BC,EAASK,cAGvD,aAAcL,EAASM"}

package/dist/components/organisms/AssetManager/services/asset.service.d.ts

@@ -1,7 +1,5 @@
 import { AssetResponse, UploadAssetResponse } from '../types/index.js';
 
-declare const getAssetsKey = "getAssets";
-declare const uploadAssetKey = "uploadAsset";
 /**
  * Fetches assets from the asset management service API
  * @param orgId - organization ID.
@@ -27,5 +25,5 @@ interface UploadAssetParams {
  */
 declare const uploadAsset: (params: UploadAssetParams) => Promise<UploadAssetResponse>;
 
-export { getAssets, getAssetsKey, uploadAsset, uploadAssetKey };
+export { getAssets, uploadAsset };
 export type { UploadAssetParams };

package/dist/components/organisms/AssetManager/services/asset.service.js

@@ -1,2 +1,2 @@
-const t="getAssets",s="uploadAsset",e=()=>{const t=window.location?.host?.includes("portal.flipdish.com");return t?"https://api.portal.flipdish.com/assets":"https://api-prod-staging.portal.flipdishdev.com/assets"},o=async(t,s)=>{const o=((t,s)=>{if(!t)return;const o=s?`?brandId=${s}`:"";return`${e()}/orgs/${t}/assets${o}`})(t,s);if(!o)throw new Error("Organization ID is required to fetch assets");const r=await fetch(o,{method:"GET",credentials:"include"});if(!r.ok)throw new Error(`Failed to fetch assets: ${r.statusText}`);return await r.json()},r=async t=>{const{orgId:s,brandId:o,files:r}=t;if(!s)throw new Error("Organization ID is required to upload assets");if(!r||0===r.length)throw new Error("At least one file is required to upload");const a=`${e()}/orgs/${s}/assets/upload`,n=new FormData;r.forEach((t=>{n.append("files",t)})),o&&n.append("brandId",o);const i=await fetch(a,{method:"POST",credentials:"include",body:n});if(!i.ok)throw new Error(`Failed to upload assets: ${i.statusText}`);return await i.json()};export{o as getAssets,t as getAssetsKey,r as uploadAsset,s as uploadAssetKey};
+const t=()=>{const t=window.location?.host?.includes("portal.flipdish.com");return t?"https://api.portal.flipdish.com/assets":"https://api-prod-staging.portal.flipdishdev.com/assets"},s=async(s,o)=>{const r=((s,o)=>{if(!s)return;const r=o?`?brandId=${o}`:"";return`${t()}/orgs/${s}/assets${r}`})(s,o);if(!r)throw new Error("Organization ID is required to fetch assets");const e=await fetch(r,{method:"GET",credentials:"include"});if(!e.ok)throw new Error(`Failed to fetch assets: ${e.statusText}`);return await e.json()},o=async s=>{const{orgId:o,brandId:r,files:e}=s;if(!o)throw new Error("Organization ID is required to upload assets");if(!e||0===e.length)throw new Error("At least one file is required to upload");const a=`${t()}/orgs/${o}/assets/upload`,n=new FormData;e.forEach((t=>{n.append("files",t)})),r&&n.append("brandId",r);const i=await fetch(a,{method:"POST",credentials:"include",body:n});if(!i.ok)throw new Error(`Failed to upload assets: ${i.statusText}`);return await i.json()};export{s as getAssets,o as uploadAsset};
 //# sourceMappingURL=asset.service.js.map

package/dist/components/organisms/AssetManager/services/asset.service.js.map

@@ -1 +1 @@
-{"version":3,"file":"asset.service.js","sources":["../../../../../src/components/organisms/AssetManager/services/asset.service.ts"],"sourcesContent":["import type { AssetResponse, UploadAssetResponse } from '../types';\n\nexport const getAssetsKey = 'getAssets';\nexport const uploadAssetKey = 'uploadAsset';\n\nconst PROD_API_URL = 'https://api.portal.flipdish.com/assets';\nconst DEV_STAGING_API_URL = 'https://api-prod-staging.portal.flipdishdev.com/assets';\n\n/**\n * Gets the asset management API base URL based on the current environment\n * @returns The appropriate API URL for the current environment\n */\nconst getAssetManagementApiUrl = (): string => {\n  const isProd = window.location?.host?.includes('portal.flipdish.com');\n\n  if (isProd) {\n    return PROD_API_URL;\n  }\n\n  return DEV_STAGING_API_URL;\n};\n\n/**\n * Builds the complete API URL for fetching assets\n * @param orgId - Optional organization ID.\n * @param brandId - Optional brand ID.\n * @returns The complete API URL or undefined if no orgId available\n */\nconst buildApiUrl = (orgId: string, brandId?: string): string | undefined => {\n  if (!orgId) return undefined;\n  const brandIdQueryParam = brandId ? `?brandId=${brandId}` : '';\n  const baseUrl = getAssetManagementApiUrl();\n  return `${baseUrl}/orgs/${orgId}/assets${brandIdQueryParam}`;\n};\n\n/**\n * Fetches assets from the asset management service API\n * @param orgId - organization ID.\n * @param brandId - brand ID.\n * @returns Promise resolving to an array of assets\n */\nexport const getAssets = async (orgId: string, brandId?: string): Promise<AssetResponse> => {\n  const apiUrl = buildApiUrl(orgId, brandId);\n\n  if (!apiUrl) {\n    throw new Error('Organization ID is required to fetch assets');\n  }\n\n  const response = await fetch(apiUrl, {\n    method: 'GET',\n    credentials: 'include',\n  });\n\n  if (!response.ok) {\n    throw new Error(`Failed to fetch assets: ${response.statusText}`);\n  }\n\n  return (await response.json()) as AssetResponse;\n};\n\n/**\n * Upload parameters for asset upload\n */\nexport interface UploadAssetParams {\n  /** Organization ID */\n  orgId: string;\n  /** Optional brand ID */\n  brandId?: string;\n  /** The files to upload */\n  files: File[];\n}\n\n/**\n * Uploads multiple assets to the asset management service API\n * @param params - Upload parameters containing orgId, brandId, and files\n * @returns Promise resolving to an array of uploaded assets\n */\nexport const uploadAsset = async (params: UploadAssetParams): Promise<UploadAssetResponse> => {\n  const { orgId, brandId, files } = params;\n\n  if (!orgId) {\n    throw new Error('Organization ID is required to upload assets');\n  }\n\n  if (!files || files.length === 0) {\n    throw new Error('At least one file is required to upload');\n  }\n\n  const baseUrl = getAssetManagementApiUrl();\n  const apiUrl = `${baseUrl}/orgs/${orgId}/assets/upload`;\n\n  const formData = new FormData();\n\n  // Append all files under the 'files' key\n  files.forEach((file) => {\n    formData.append('files', file);\n  });\n\n  if (brandId) {\n    formData.append('brandId', brandId);\n  }\n\n  const response = await fetch(apiUrl, {\n    method: 'POST',\n    credentials: 'include',\n    body: formData,\n  });\n\n  if (!response.ok) {\n    throw new Error(`Failed to upload assets: ${response.statusText}`);\n  }\n\n  return (await response.json()) as UploadAssetResponse;\n};\n"],"names":["getAssetsKey","uploadAssetKey","getAssetManagementApiUrl","isProd","window","location","host","includes","getAssets","async","orgId","brandId","apiUrl","brandIdQueryParam","buildApiUrl","Error","response","fetch","method","credentials","ok","statusText","json","uploadAsset","params","files","length","formData","FormData","forEach","file","append","body"],"mappings":"AAEO,MAAMA,EAAe,YACfC,EAAiB,cASxBC,EAA2B,KAC/B,MAAMC,EAASC,OAAOC,UAAUC,MAAMC,SAAS,uBAE/C,OAAIJ,EAVe,yCACO,0DAmCfK,EAAYC,MAAOC,EAAeC,KAC7C,MAAMC,EAdY,EAACF,EAAeC,KAClC,IAAKD,EAAO,OACZ,MAAMG,EAAoBF,EAAU,YAAYA,IAAY,GAE5D,MAAO,GADST,YACUQ,WAAeG,KAU1BC,CAAYJ,EAAOC,GAElC,IAAKC,EACH,MAAM,IAAIG,MAAM,+CAGlB,MAAMC,QAAiBC,MAAML,EAAQ,CACnCM,OAAQ,MACRC,YAAa,YAGf,IAAKH,EAASI,GACZ,MAAM,IAAIL,MAAM,2BAA2BC,EAASK,cAGtD,aAAcL,EAASM,QAoBZC,EAAcd,MAAOe,IAChC,MAAMd,MAAEA,EAAKC,QAAEA,EAAOc,MAAEA,GAAUD,EAElC,IAAKd,EACH,MAAM,IAAIK,MAAM,gDAGlB,IAAKU,GAA0B,IAAjBA,EAAMC,OAClB,MAAM,IAAIX,MAAM,2CAGlB,MACMH,EAAS,GADCV,YACkBQ,kBAE5BiB,EAAW,IAAIC,SAGrBH,EAAMI,SAASC,IACbH,EAASI,OAAO,QAASD,MAGvBnB,GACFgB,EAASI,OAAO,UAAWpB,GAG7B,MAAMK,QAAiBC,MAAML,EAAQ,CACnCM,OAAQ,OACRC,YAAa,UACba,KAAML,IAGR,IAAKX,EAASI,GACZ,MAAM,IAAIL,MAAM,4BAA4BC,EAASK,cAGvD,aAAcL,EAASM"}
+{"version":3,"file":"asset.service.js","sources":["../../../../../src/components/organisms/AssetManager/services/asset.service.ts"],"sourcesContent":["import type { AssetResponse, UploadAssetResponse } from '../types';\n\nconst PROD_API_URL = 'https://api.portal.flipdish.com/assets';\nconst DEV_STAGING_API_URL = 'https://api-prod-staging.portal.flipdishdev.com/assets';\n\n/**\n * Gets the asset management API base URL based on the current environment\n * @returns The appropriate API URL for the current environment\n */\nconst getAssetManagementApiUrl = (): string => {\n  const isProd = window.location?.host?.includes('portal.flipdish.com');\n\n  if (isProd) {\n    return PROD_API_URL;\n  }\n\n  return DEV_STAGING_API_URL;\n};\n\n/**\n * Builds the complete API URL for fetching assets\n * @param orgId - Optional organization ID.\n * @param brandId - Optional brand ID.\n * @returns The complete API URL or undefined if no orgId available\n */\nconst buildApiUrl = (orgId: string, brandId?: string): string | undefined => {\n  if (!orgId) return undefined;\n  const brandIdQueryParam = brandId ? `?brandId=${brandId}` : '';\n  const baseUrl = getAssetManagementApiUrl();\n  return `${baseUrl}/orgs/${orgId}/assets${brandIdQueryParam}`;\n};\n\n/**\n * Fetches assets from the asset management service API\n * @param orgId - organization ID.\n * @param brandId - brand ID.\n * @returns Promise resolving to an array of assets\n */\nexport const getAssets = async (orgId: string, brandId?: string): Promise<AssetResponse> => {\n  const apiUrl = buildApiUrl(orgId, brandId);\n\n  if (!apiUrl) {\n    throw new Error('Organization ID is required to fetch assets');\n  }\n\n  const response = await fetch(apiUrl, {\n    method: 'GET',\n    credentials: 'include',\n  });\n\n  if (!response.ok) {\n    throw new Error(`Failed to fetch assets: ${response.statusText}`);\n  }\n\n  return (await response.json()) as AssetResponse;\n};\n\n/**\n * Upload parameters for asset upload\n */\nexport interface UploadAssetParams {\n  /** Organization ID */\n  orgId: string;\n  /** Optional brand ID */\n  brandId?: string;\n  /** The files to upload */\n  files: File[];\n}\n\n/**\n * Uploads multiple assets to the asset management service API\n * @param params - Upload parameters containing orgId, brandId, and files\n * @returns Promise resolving to an array of uploaded assets\n */\nexport const uploadAsset = async (params: UploadAssetParams): Promise<UploadAssetResponse> => {\n  const { orgId, brandId, files } = params;\n\n  if (!orgId) {\n    throw new Error('Organization ID is required to upload assets');\n  }\n\n  if (!files || files.length === 0) {\n    throw new Error('At least one file is required to upload');\n  }\n\n  const baseUrl = getAssetManagementApiUrl();\n  const apiUrl = `${baseUrl}/orgs/${orgId}/assets/upload`;\n\n  const formData = new FormData();\n\n  // Append all files under the 'files' key\n  files.forEach((file) => {\n    formData.append('files', file);\n  });\n\n  if (brandId) {\n    formData.append('brandId', brandId);\n  }\n\n  const response = await fetch(apiUrl, {\n    method: 'POST',\n    credentials: 'include',\n    body: formData,\n  });\n\n  if (!response.ok) {\n    throw new Error(`Failed to upload assets: ${response.statusText}`);\n  }\n\n  return (await response.json()) as UploadAssetResponse;\n};\n"],"names":["getAssetManagementApiUrl","isProd","window","location","host","includes","getAssets","async","orgId","brandId","apiUrl","brandIdQueryParam","buildApiUrl","Error","response","fetch","method","credentials","ok","statusText","json","uploadAsset","params","files","length","formData","FormData","forEach","file","append","body"],"mappings":"AAEA,MAOMA,EAA2B,KAC/B,MAAMC,EAASC,OAAOC,UAAUC,MAAMC,SAAS,uBAE/C,OAAIJ,EAVe,yCACO,0DAmCfK,EAAYC,MAAOC,EAAeC,KAC7C,MAAMC,EAdY,EAACF,EAAeC,KAClC,IAAKD,EAAO,OACZ,MAAMG,EAAoBF,EAAU,YAAYA,IAAY,GAE5D,MAAO,GADST,YACUQ,WAAeG,KAU1BC,CAAYJ,EAAOC,GAElC,IAAKC,EACH,MAAM,IAAIG,MAAM,+CAGlB,MAAMC,QAAiBC,MAAML,EAAQ,CACnCM,OAAQ,MACRC,YAAa,YAGf,IAAKH,EAASI,GACZ,MAAM,IAAIL,MAAM,2BAA2BC,EAASK,cAGtD,aAAcL,EAASM,QAoBZC,EAAcd,MAAOe,IAChC,MAAMd,MAAEA,EAAKC,QAAEA,EAAOc,MAAEA,GAAUD,EAElC,IAAKd,EACH,MAAM,IAAIK,MAAM,gDAGlB,IAAKU,GAA0B,IAAjBA,EAAMC,OAClB,MAAM,IAAIX,MAAM,2CAGlB,MACMH,EAAS,GADCV,YACkBQ,kBAE5BiB,EAAW,IAAIC,SAGrBH,EAAMI,SAASC,IACbH,EAASI,OAAO,QAASD,MAGvBnB,GACFgB,EAASI,OAAO,UAAWpB,GAG7B,MAAMK,QAAiBC,MAAML,EAAQ,CACnCM,OAAQ,OACRC,YAAa,UACba,KAAML,IAGR,IAAKX,EAASI,GACZ,MAAM,IAAIL,MAAM,4BAA4BC,EAASK,cAGvD,aAAcL,EAASM"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/types/index.ts"],"sourcesContent":["export enum AssetType {\n  VIDEO = 'VIDEO',\n  IMAGE = 'IMAGE',\n}\n\nexport interface AssetMetadata {\n  altText?: string;\n  tags: string[];\n  dimensions?: {\n    width: number;\n    height: number;\n  };\n}\n\nexport interface Asset {\n  id: string;\n  fileName: string;\n  contentType: string; // MIME type like \"image/jpeg\", \"video/mp4\"\n  createdBy: string;\n  updatedBy: string;\n  updatedAt: string;\n  uploadedAt: string;\n  url: string;\n  orgId: string;\n  brandId: string | null;\n  type: AssetType;\n  metadata: AssetMetadata;\n}\n\nexport interface AssetResponse {\n  data: Asset[];\n}\n\nexport interface UploadedAsset {\n  id: string;\n  fileName: string;\n  uploadedAt: string;\n  url: string;\n}\n\nexport interface UploadAssetResponse {\n  data: UploadedAsset[];\n}\n"],"names":["AssetType"],"mappings":"aAAA,IAAYA,EAAAA,QAAAA,eAAAA,GAAAA,EAAAA,QAAAA,YAAAA,kBAAS,CAAA,IACnB,MAAA,QACAA,EAAA,MAAA"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/types/index.ts"],"sourcesContent":["export enum AssetType {\n  VIDEO = 'VIDEO',\n  IMAGE = 'IMAGE',\n}\n\nexport interface AssetMetadata {\n  altText?: string;\n  tags: string[];\n  dimensions?: {\n    width: number;\n    height: number;\n  };\n}\n\nexport interface Asset {\n  id: string;\n  fileName: string;\n  fileSize: number;\n  contentType: string; // MIME type like \"image/jpeg\", \"video/mp4\"\n  createdBy: string;\n  updatedBy: string;\n  updatedAt: string;\n  createdAt: string;\n  url: string;\n  orgId: string;\n  brandId: string | null;\n  type: AssetType;\n  metadata: AssetMetadata;\n}\n\nexport interface AssetResponse {\n  data: Asset[];\n}\n\nexport interface UploadAssetResponse {\n  data: Asset[];\n}\n"],"names":["AssetType"],"mappings":"aAAA,IAAYA,EAAAA,QAAAA,eAAAA,GAAAA,EAAAA,QAAAA,YAAAA,kBAAS,CAAA,IACnB,MAAA,QACAA,EAAA,MAAA"}

package/dist/components/organisms/AssetManager/types/index.d.ts

@@ -13,11 +13,12 @@ interface AssetMetadata {
 interface Asset {
     id: string;
     fileName: string;
+    fileSize: number;
     contentType: string;
     createdBy: string;
     updatedBy: string;
     updatedAt: string;
-    uploadedAt: string;
+    createdAt: string;
     url: string;
     orgId: string;
     brandId: string | null;
@@ -27,15 +28,9 @@ interface Asset {
 interface AssetResponse {
     data: Asset[];
 }
-interface UploadedAsset {
-    id: string;
-    fileName: string;
-    uploadedAt: string;
-    url: string;
-}
 interface UploadAssetResponse {
-    data: UploadedAsset[];
+    data: Asset[];
 }
 
 export { AssetType };
-export type { Asset, AssetMetadata, AssetResponse, UploadAssetResponse, UploadedAsset };
+export type { Asset, AssetMetadata, AssetResponse, UploadAssetResponse };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/organisms/AssetManager/types/index.ts"],"sourcesContent":["export enum AssetType {\n  VIDEO = 'VIDEO',\n  IMAGE = 'IMAGE',\n}\n\nexport interface AssetMetadata {\n  altText?: string;\n  tags: string[];\n  dimensions?: {\n    width: number;\n    height: number;\n  };\n}\n\nexport interface Asset {\n  id: string;\n  fileName: string;\n  contentType: string; // MIME type like \"image/jpeg\", \"video/mp4\"\n  createdBy: string;\n  updatedBy: string;\n  updatedAt: string;\n  uploadedAt: string;\n  url: string;\n  orgId: string;\n  brandId: string | null;\n  type: AssetType;\n  metadata: AssetMetadata;\n}\n\nexport interface AssetResponse {\n  data: Asset[];\n}\n\nexport interface UploadedAsset {\n  id: string;\n  fileName: string;\n  uploadedAt: string;\n  url: string;\n}\n\nexport interface UploadAssetResponse {\n  data: UploadedAsset[];\n}\n"],"names":["AssetType"],"mappings":"IAAYA,GAAZ,SAAYA,GACVA,EAAA,MAAA,QACAA,EAAA,MAAA,OACD,CAHD,CAAYA,IAAAA,EAAS,CAAA"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/organisms/AssetManager/types/index.ts"],"sourcesContent":["export enum AssetType {\n  VIDEO = 'VIDEO',\n  IMAGE = 'IMAGE',\n}\n\nexport interface AssetMetadata {\n  altText?: string;\n  tags: string[];\n  dimensions?: {\n    width: number;\n    height: number;\n  };\n}\n\nexport interface Asset {\n  id: string;\n  fileName: string;\n  fileSize: number;\n  contentType: string; // MIME type like \"image/jpeg\", \"video/mp4\"\n  createdBy: string;\n  updatedBy: string;\n  updatedAt: string;\n  createdAt: string;\n  url: string;\n  orgId: string;\n  brandId: string | null;\n  type: AssetType;\n  metadata: AssetMetadata;\n}\n\nexport interface AssetResponse {\n  data: Asset[];\n}\n\nexport interface UploadAssetResponse {\n  data: Asset[];\n}\n"],"names":["AssetType"],"mappings":"IAAYA,GAAZ,SAAYA,GACVA,EAAA,MAAA,QACAA,EAAA,MAAA,OACD,CAHD,CAAYA,IAAAA,EAAS,CAAA"}

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"),s=require("@mui/material/FormHelperText"),o=require("@mui/material/Typography"),c=require("../../../../icons/CancelCircle/index.cjs.js"),u=require("../../../../icons/Upload/index.cjs.js");const d=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)}}))),p=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}),m=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"]}))),f=a(n.Button)({alignSelf:"center"});module.exports=({handleUpload:t,multiple:a,maxFiles:n,maxFileSize:h,allowedFileTypes:x=[],disabled:g=!1,dragActiveText:b="Drop files here",dragInactiveText:k="Drag and drop files here",browseButtonText:y="Browse files",invalidFileTypesText:j="File type is not allowed. Allowed types: {allowedFileTypes}",invalidFileSizeText:w="File size is too large. Maximum size: {maxFileSize}",invalidFileCountText:C="Too many files selected. Maximum allowed: {maxFiles}"})=>{const v=l(),[F,T]=r.useState(!1),D=r.useRef(null),[q,S]=r.useState(null),z=r.useCallback((e=>{if(h&&e.size>h)return S(w),!1;const r=e.name.split(".").pop()?.toLowerCase();return!(x.length>0&&r&&!x.includes(r))||(S(j),!1)}),[h,x]),E=r.useCallback((e=>{const r=Array.from(e),i=[];n&&r.length>n?S(C):(r.forEach((e=>{z(e)&&i.push(e)})),i.length>0&&(S(null),t(i)))}),[n,z,t]),P=r.useCallback((e=>{e.preventDefault(),e.stopPropagation(),g||T(!0)}),[g]),B=r.useCallback((e=>{e.preventDefault(),e.stopPropagation(),g||T(!1)}),[g]),I=r.useCallback((e=>{e.preventDefault(),e.stopPropagation()}),[]),A=r.useCallback((e=>{if(e.preventDefault(),e.stopPropagation(),g)return;T(!1);const r=e.dataTransfer.files;r&&r.length>0&&E(r)}),[g,E]),R=r.useCallback((e=>{if(g)return;const r=e.target.files;r&&r.length>0&&E(r),D.current&&(D.current.value="")}),[g,E]),L=r.useCallback((e=>{e.preventDefault(),e.stopPropagation(),D.current?.click()}),[]),M=r.useCallback((()=>{g||D.current?.click()}),[g]);return e.jsxs(e.Fragment,{children:[!!q&&e.jsxs(s,{error:!0,children:[e.jsx(c,{}),q]}),e.jsxs(d,{"data-testid":"file-drop-zone",hasError:!!q,onClick:g?void 0:M,onDragEnter:P,onDragLeave:B,onDragOver:I,onDrop:A,children:[e.jsx(p,{ref:D,"data-testid":"file-upload-input",disabled:g,multiple:a,onChange:R,type:"file"}),e.jsxs(i,{alignItems:"center",direction:"column",gap:v.spacing(2),justifyContent:"center",width:"100%",children:[e.jsx(m,{hasError:!!q,children:e.jsx(u,{color:q?v.palette.semantic.icon["icon-error"]:v.palette.semantic.icon["icon-primary"]})}),e.jsx(o,{variant:"b1Strong",children:F?b:k}),e.jsx(f,{disabled:g,fdKey:"file-upload-btn",onClick:g?void 0:L,variant:"secondary",children:y})]})]})]})};
+"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"),s=require("@mui/material/FormHelperText"),o=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,dragActiveText:k,dragInactiveText:j,browseButtonText:y,invalidFileTypesText:v,invalidFileSizeText:C,invalidFileCountText:w})=>{const _=l(),[T,F]=r.useState(!1),D=r.useRef(null),[S,q]=r.useState(null),{translate:P}=d.useTranslation(),E=r.useCallback((e=>{if(g&&e.size>g)return q(C||P("File_size_is_too_large",{maxFileSize:g?.toString()||""})),!1;const r=e.name.split(".").pop()?.toLowerCase();return!(x.length>0&&r&&!x.includes(r))||(q(v||P("File_type_is_not_allowed",{allowedFileTypes:x.join(", ")})),!1)}),[g,x,v,C,P]),z=r.useCallback((e=>{const r=Array.from(e),i=[];n&&r.length>n?q(w||P("Too_many_files_selected",{maxFiles:n.toString()})):(r.forEach((e=>{E(e)&&i.push(e)})),i.length>0&&(q(null),t(i)))}),[n,E,t,w,P]),B=r.useCallback((e=>{e.preventDefault(),e.stopPropagation(),b||F(!0)}),[b]),I=r.useCallback((e=>{e.preventDefault(),e.stopPropagation(),b||F(!1)}),[b]),R=r.useCallback((e=>{e.preventDefault(),e.stopPropagation()}),[]),A=r.useCallback((e=>{if(e.preventDefault(),e.stopPropagation(),b)return;F(!1);const r=e.dataTransfer.files;r&&r.length>0&&z(r)}),[b,z]),L=r.useCallback((e=>{if(b)return;const r=e.target.files;r&&r.length>0&&z(r),D.current&&(D.current.value="")}),[b,z]),U=r.useCallback((e=>{e.preventDefault(),e.stopPropagation(),D.current?.click()}),[]),$=r.useCallback((()=>{b||D.current?.click()}),[b]);return e.jsxs(e.Fragment,{children:[!!S&&e.jsxs(s,{error:!0,children:[e.jsx(c,{}),S]}),e.jsxs(p,{"data-testid":"file-drop-zone",hasError:!!S,onClick:b?void 0:$,onDragEnter:B,onDragLeave:I,onDragOver:R,onDrop:A,children:[e.jsx(m,{ref:D,"data-testid":"file-upload-input",disabled:b,multiple:a,onChange:L,type:"file"}),e.jsxs(i,{alignItems:"center",direction:"column",gap:_.spacing(2),justifyContent:"center",width:"100%",children:[e.jsx(f,{hasError:!!S,children:e.jsx(u,{color:S?_.palette.semantic.icon["icon-error"]:_.palette.semantic.icon["icon-primary"]})}),e.jsx(o,{variant:"b1Strong",children:T?k||P("Drop_files_here"):j||P("Drag_and_drop_files_here")}),e.jsx(h,{disabled:b,fdKey:"file-upload-btn",onClick:b?void 0:U,variant:"secondary",children:y||P("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, 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';\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   * 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  dragActiveText = 'Drop files here',\n  dragInactiveText = 'Drag and drop files here',\n  browseButtonText = 'Browse files',\n  invalidFileTypesText = 'File type is not allowed. Allowed types: {allowedFileTypes}',\n  invalidFileSizeText = 'File size is too large. Maximum size: {maxFileSize}',\n  invalidFileCountText = 'Too many files selected. Maximum allowed: {maxFiles}',\n}) => {\n  const theme = useTheme();\n  const [isDragActive, setIsDragActive] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  const validateFile = useCallback(\n    (file: File): boolean => {\n      // Check file size\n      if (maxFileSize && file.size > maxFileSize) {\n        setError(invalidFileSizeText);\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        setError(invalidFileTypesText);\n        return false;\n      }\n\n      return true;\n    },\n    [maxFileSize, allowedFileTypes],\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        setError(invalidFileCountText);\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        setError(null);\n        handleUpload(validFiles);\n      }\n    },\n    [maxFiles, validateFile, handleUpload],\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      {!!error && (\n        <FlipdishFormHelperText error>\n          <CancelCircleIcon />\n          {error}\n        </FlipdishFormHelperText>\n      )}\n      <StyledUploadAreaContainer\n        data-testid=\"file-drop-zone\"\n        hasError={!!error}\n        onClick={disabled ? undefined : handleContainerClick}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n      >\n        <VisuallyHiddenInput\n          ref={fileInputRef}\n          data-testid=\"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={!!error}>\n            <UploadIcon\n              color={\n                error\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 ? dragActiveText : dragInactiveText}\n          </FlipdishTypography>\n\n          <StyledButton\n            disabled={disabled}\n            fdKey=\"file-upload-btn\"\n            onClick={disabled ? undefined : handleButtonClick}\n            variant=\"secondary\"\n          >\n            {browseButtonText}\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","dragActiveText","dragInactiveText","browseButtonText","invalidFileTypesText","invalidFileSizeText","invalidFileCountText","useTheme","isDragActive","setIsDragActive","useState","fileInputRef","useRef","error","setError","validateFile","useCallback","file","size","fileExtension","name","split","pop","toLowerCase","length","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","onChange","type","Stack","direction","UploadIcon","color","icon","FlipdishTypography","variant","fdKey"],"mappings":"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"}
+{"version":3,"file":"FileDropZone.cjs.js","sources":["../../../../../src/components/organisms/FileUpload/components/FileDropZone.tsx"],"sourcesContent":["import React, { useCallback, 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   * 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  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 [error, setError] = useState<string | null>(null);\n  const { translate } = useTranslation();\n\n  const validateFile = useCallback(\n    (file: File): boolean => {\n      // Check file size\n      if (maxFileSize && file.size > maxFileSize) {\n        setError(\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        setError(\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        setError(\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        setError(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      {!!error && (\n        <FlipdishFormHelperText error>\n          <CancelCircleIcon />\n          {error}\n        </FlipdishFormHelperText>\n      )}\n      <StyledUploadAreaContainer\n        data-testid=\"file-drop-zone\"\n        hasError={!!error}\n        onClick={disabled ? undefined : handleContainerClick}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n      >\n        <VisuallyHiddenInput\n          ref={fileInputRef}\n          data-testid=\"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={!!error}>\n            <UploadIcon\n              color={\n                error\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","dragActiveText","dragInactiveText","browseButtonText","invalidFileTypesText","invalidFileSizeText","invalidFileCountText","useTheme","isDragActive","setIsDragActive","useState","fileInputRef","useRef","error","setError","translate","useTranslation","validateFile","useCallback","file","size","toString","fileExtension","name","split","pop","toLowerCase","length","includes","join","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","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,useCallback as a}from"react";import l from"@mui/material/Box/Box";import n from"@mui/material/Stack/Stack";import s from"@mui/material/styles/styled";import p from"@mui/material/styles/useTheme";import{Button as d}from"../../../atoms/Button/index.js";import c from"@mui/material/FormHelperText";import m from"@mui/material/Typography";import u from"../../../../icons/CancelCircle/index.js";import f from"../../../../icons/Upload/index.js";const h=s(l,{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)}}))),g=s("input")({clip:"rect(0 0 0 0)",clipPath:"inset(50%)",height:1,overflow:"hidden",position:"absolute",bottom:0,left:0,whiteSpace:"nowrap",width:1}),x=s(l,{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"]}))),y=s(d)({alignSelf:"center"}),w=({handleUpload:l,multiple:s,maxFiles:d,maxFileSize:w,allowedFileTypes:b=[],disabled:k=!1,dragActiveText:v="Drop files here",dragInactiveText:F="Drag and drop files here",browseButtonText:T="Browse files",invalidFileTypesText:D="File type is not allowed. Allowed types: {allowedFileTypes}",invalidFileSizeText:C="File size is too large. Maximum size: {maxFileSize}",invalidFileCountText:S="Too many files selected. Maximum allowed: {maxFiles}"})=>{const j=p(),[z,E]=i(!1),P=o(null),[B,I]=i(null),A=a((e=>{if(w&&e.size>w)return I(C),!1;const r=e.name.split(".").pop()?.toLowerCase();return!(b.length>0&&r&&!b.includes(r))||(I(D),!1)}),[w,b]),L=a((e=>{const r=Array.from(e),t=[];d&&r.length>d?I(S):(r.forEach((e=>{A(e)&&t.push(e)})),t.length>0&&(I(null),l(t)))}),[d,A,l]),M=a((e=>{e.preventDefault(),e.stopPropagation(),k||E(!0)}),[k]),R=a((e=>{e.preventDefault(),e.stopPropagation(),k||E(!1)}),[k]),U=a((e=>{e.preventDefault(),e.stopPropagation()}),[]),$=a((e=>{if(e.preventDefault(),e.stopPropagation(),k)return;E(!1);const r=e.dataTransfer.files;r&&r.length>0&&L(r)}),[k,L]),H=a((e=>{if(k)return;const r=e.target.files;r&&r.length>0&&L(r),P.current&&(P.current.value="")}),[k,L]),K=a((e=>{e.preventDefault(),e.stopPropagation(),P.current?.click()}),[]),O=a((()=>{k||P.current?.click()}),[k]);return e(r,{children:[!!B&&e(c,{error:!0,children:[t(u,{}),B]}),e(h,{"data-testid":"file-drop-zone",hasError:!!B,onClick:k?void 0:O,onDragEnter:M,onDragLeave:R,onDragOver:U,onDrop:$,children:[t(g,{ref:P,"data-testid":"file-upload-input",disabled:k,multiple:s,onChange:H,type:"file"}),e(n,{alignItems:"center",direction:"column",gap:j.spacing(2),justifyContent:"center",width:"100%",children:[t(x,{hasError:!!B,children:t(f,{color:B?j.palette.semantic.icon["icon-error"]:j.palette.semantic.icon["icon-primary"]})}),t(m,{variant:"b1Strong",children:z?v:F}),t(y,{disabled:k,fdKey:"file-upload-btn",onClick:k?void 0:K,variant:"secondary",children:T})]})]})]})};export{w as default};
+import{jsxs as e,Fragment as r,jsx as t}from"react/jsx-runtime";import{useState as i,useRef as o,useCallback as a}from"react";import l from"@mui/material/Box/Box";import n from"@mui/material/Stack/Stack";import s from"@mui/material/styles/styled";import p from"@mui/material/styles/useTheme";import{Button as d}from"../../../atoms/Button/index.js";import c from"@mui/material/FormHelperText";import m from"@mui/material/Typography";import u from"../../../../icons/CancelCircle/index.js";import f from"../../../../icons/Upload/index.js";import{useTranslation as h}from"../../../../providers/TranslationProvider.js";const g=s(l,{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)}}))),x=s("input")({clip:"rect(0 0 0 0)",clipPath:"inset(50%)",height:1,overflow:"hidden",position:"absolute",bottom:0,left:0,whiteSpace:"nowrap",width:1}),y=s(l,{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"]}))),v=s(d)({alignSelf:"center"}),w=({handleUpload:l,multiple:s,maxFiles:d,maxFileSize:w,allowedFileTypes:b=[],disabled:k=!1,dragActiveText:_,dragInactiveText:T,browseButtonText:F,invalidFileTypesText:D,invalidFileSizeText:C,invalidFileCountText:S})=>{const j=p(),[P,E]=i(!1),z=o(null),[B,I]=i(null),{translate:A}=h(),L=a((e=>{if(w&&e.size>w)return I(C||A("File_size_is_too_large",{maxFileSize:w?.toString()||""})),!1;const r=e.name.split(".").pop()?.toLowerCase();return!(b.length>0&&r&&!b.includes(r))||(I(D||A("File_type_is_not_allowed",{allowedFileTypes:b.join(", ")})),!1)}),[w,b,D,C,A]),R=a((e=>{const r=Array.from(e),t=[];d&&r.length>d?I(S||A("Too_many_files_selected",{maxFiles:d.toString()})):(r.forEach((e=>{L(e)&&t.push(e)})),t.length>0&&(I(null),l(t)))}),[d,L,l,S,A]),U=a((e=>{e.preventDefault(),e.stopPropagation(),k||E(!0)}),[k]),$=a((e=>{e.preventDefault(),e.stopPropagation(),k||E(!1)}),[k]),H=a((e=>{e.preventDefault(),e.stopPropagation()}),[]),K=a((e=>{if(e.preventDefault(),e.stopPropagation(),k)return;E(!1);const r=e.dataTransfer.files;r&&r.length>0&&R(r)}),[k,R]),O=a((e=>{if(k)return;const r=e.target.files;r&&r.length>0&&R(r),z.current&&(z.current.value="")}),[k,R]),q=a((e=>{e.preventDefault(),e.stopPropagation(),z.current?.click()}),[]),G=a((()=>{k||z.current?.click()}),[k]);return e(r,{children:[!!B&&e(c,{error:!0,children:[t(u,{}),B]}),e(g,{"data-testid":"file-drop-zone",hasError:!!B,onClick:k?void 0:G,onDragEnter:U,onDragLeave:$,onDragOver:H,onDrop:K,children:[t(x,{ref:z,"data-testid":"file-upload-input",disabled:k,multiple:s,onChange:O,type:"file"}),e(n,{alignItems:"center",direction:"column",gap:j.spacing(2),justifyContent:"center",width:"100%",children:[t(y,{hasError:!!B,children:t(f,{color:B?j.palette.semantic.icon["icon-error"]:j.palette.semantic.icon["icon-primary"]})}),t(m,{variant:"b1Strong",children:P?_||A("Drop_files_here"):T||A("Drag_and_drop_files_here")}),t(v,{disabled:k,fdKey:"file-upload-btn",onClick:k?void 0:q,variant:"secondary",children:F||A("Browse_files")})]})]})]})};export{w as default};
 //# sourceMappingURL=FileDropZone.js.map