@flipdish/portal-library 8.5.0 → 8.5.2

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("react");var t=require("@mui/material/styles"),r=require("@mui/material/Box"),i=require("../../../atoms/Card/index.cjs.js"),s=require("@mui/material/Grid2"),o=require("../../../molecules/EmptyState/index.cjs.js"),a=require("../../../../icons/CheckmarkCircleSolid/index.cjs.js"),l=require("../../../../providers/TranslationProvider.cjs.js"),n=require("./LibraryTabContentSkeleton.cjs.js");const d=t.styled(s)((({theme:e})=>({listStyle:"none",margin:0,padding:e.spacing(1)}))),c=t.styled(r,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({width:"100%",cursor:"pointer",position:"relative","& .MuiCard-root":{borderWidth:"2px",borderColor:t?e.palette.semantic.stroke["stroke-selected"]:e.palette.semantic.stroke["stroke-weak"]},"&:focus-visible .MuiCard-root":{borderColor:e.palette.semantic.stroke["stroke-selected"],boxShadow:"none"},"&:hover .MuiCard-root":{boxShadow:"0px 4px 16px rgba(0, 0, 0, 0.2)"}}))),m=t.styled(a)((({theme:e})=>({position:"absolute",top:e.spacing(2),left:e.spacing(2),zIndex:1,color:e.palette.semantic.icon["icon-primary"],"& circle":{fill:e.palette.common.white}}))),p=t.styled(r)((({theme:e})=>({padding:e.spacing(4),maxWidth:"100%",overflow:"hidden",boxSizing:"border-box"})));module.exports=({assets:t,isLoading:r,error:a,selectedAssets:u,onAssetClick:x})=>{const{translate:h}=l.useTranslation();return r?e.jsx(n,{}):a?e.jsx(p,{children:e.jsx(o.EmptyState,{description:"Failed to load assets. Please try again later.",title:"Error loading assets"})}):t&&0!==t.length?e.jsx(d,{container:!0,component:"ul",spacing:1,children:t.map((t=>{const r=u.has(t.id);return e.jsx(s,{"aria-selected":r,component:"li",size:{widescreen:4,desktop:4,mobile:6,tablet:4},children:e.jsxs(c,{"aria-label":`${h("Select")} ${t.fileName}`,onClick:()=>x(t),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),x(t))},role:"button",selected:r,tabIndex:0,children:[r&&e.jsx(m,{size:"lg"}),e.jsx(i,{content:t.fileName,heading:"",imageAlt:t.metadata.altText,imageSrc:`${t.url}?h=203&fit=crop`})]})},t.id)}))}):e.jsx(p,{children:e.jsx(o.EmptyState,{description:"No assets available to display.",title:"No assets found"})})};
+"use strict";var e=require("react/jsx-runtime");require("react");var t=require("@mui/material/styles"),r=require("@mui/material/Box"),s=require("../../../atoms/Card/index.cjs.js"),i=require("@mui/material/Grid2"),o=require("../../../molecules/EmptyState/index.cjs.js"),a=require("../../../../icons/CheckmarkCircleSolid/index.cjs.js"),l=require("../../../../providers/TranslationProvider.cjs.js"),n=require("./LibraryTabContentSkeleton.cjs.js");const d=t.styled(i)((({theme:e})=>({listStyle:"none",margin:0,padding:e.spacing(1)}))),c=t.styled(r,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({width:"100%",cursor:"pointer",position:"relative","& .MuiCard-root":{borderWidth:"2px",borderColor:t?e.palette.semantic.stroke["stroke-selected"]:e.palette.semantic.stroke["stroke-weak"]},"&:focus-visible .MuiCard-root":{borderColor:e.palette.semantic.stroke["stroke-selected"],boxShadow:"none"},"&:hover .MuiCard-root":{boxShadow:"0px 4px 16px rgba(0, 0, 0, 0.2)"}}))),p=t.styled(a)((({theme:e})=>({position:"absolute",top:e.spacing(2),left:e.spacing(2),zIndex:1,color:e.palette.semantic.icon["icon-primary"],"& circle":{fill:e.palette.common.white}}))),m=t.styled(r)((({theme:e})=>({padding:e.spacing(4),maxWidth:"100%",overflow:"hidden",boxSizing:"border-box"})));module.exports=({assets:t,isLoading:r,error:a,selectedAssets:u,onAssetClick:x})=>{const{translate:h}=l.useTranslation();return r?e.jsx(n,{}):a?e.jsx(m,{children:e.jsx(o.EmptyState,{description:h("Failed_to_load_assets_please_try_again_later"),title:h("Error_loading_assets")})}):t&&0!==t.length?e.jsx(d,{container:!0,component:"ul",spacing:1,children:t.map((t=>{const r=u.has(t.id);return e.jsx(i,{"aria-selected":r,component:"li",size:{widescreen:4,desktop:4,mobile:6,tablet:4},children:e.jsxs(c,{"aria-label":`${h("Select")} ${t.fileName}`,onClick:()=>x(t),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),x(t))},role:"button",selected:r,tabIndex:0,children:[r&&e.jsx(p,{size:"lg"}),e.jsx(s,{content:t.fileName,heading:"",imageAlt:t.metadata.altText,imageSrc:`${t.url}?h=203&fit=crop`})]})},t.id)}))}):e.jsx(m,{children:e.jsx(o.EmptyState,{description:h("There_are_no_assets_to_display"),title:h("No_assets_found")})})};
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/LibraryTabContent/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Card from '@fd/components/atoms/Card';\nimport Grid from '@fd/components/atoms/Grid';\nimport EmptyState from '@fd/components/molecules/EmptyState';\nimport CheckmarkCircleSolidIcon from '@fd/icons/CheckmarkCircleSolid';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nimport type { Asset } from '../types/assets.type';\nimport LibraryTabContentSkeleton from './LibraryTabContentSkeleton';\n\nconst StyledList = styled(Grid)<{ component: string }>(({ theme }) => ({\n  listStyle: 'none',\n  margin: 0,\n  padding: theme.spacing(1),\n}));\n\nconst StyledCardWrapper = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'selected',\n})<{ selected?: boolean }>(({ theme, selected }) => ({\n  width: '100%',\n  cursor: 'pointer',\n  position: 'relative',\n  '& .MuiCard-root': {\n    // Always use 2px border to prevent layout shift\n    borderWidth: '2px',\n    borderColor: selected\n      ? theme.palette.semantic.stroke['stroke-selected']\n      : theme.palette.semantic.stroke['stroke-weak'],\n  },\n  '&:focus-visible .MuiCard-root': {\n    borderColor: theme.palette.semantic.stroke['stroke-selected'],\n    boxShadow: 'none',\n  },\n  '&:hover .MuiCard-root': {\n    boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2)',\n  },\n}));\n\nconst StyledCheckmarkIcon = styled(CheckmarkCircleSolidIcon)(({ theme }) => ({\n  position: 'absolute',\n  top: theme.spacing(2),\n  left: theme.spacing(2),\n  zIndex: 1,\n  color: theme.palette.semantic.icon['icon-primary'],\n  '& circle': {\n    fill: theme.palette.common.white,\n  },\n}));\n\nconst StyledErrorContainer = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(4),\n  maxWidth: '100%',\n  overflow: 'hidden',\n  boxSizing: 'border-box',\n}));\n\n/**\n * Props for the LibraryTabContent component.\n * @param assets - Array of assets to display\n * @param isLoading - Whether the assets are being loaded\n * @param error - Error object if fetching assets failed\n * @param selectedAssets - Map of selected assets (id -> Asset) for O(1) lookup performance\n * @param onAssetClick - Callback when an asset is clicked\n */\nexport interface LibraryTabContentProps {\n  /** Array of assets to display */\n  assets?: Asset[];\n  /** Whether the assets are being loaded */\n  isLoading: boolean;\n  /** Error object if fetching assets failed */\n  error: Error | null;\n  /** Map of selected assets (id -> Asset) for O(1) lookup performance */\n  selectedAssets: Map<string, Asset>;\n  /** Callback when an asset is clicked */\n  onAssetClick: (asset: Asset) => void;\n}\n\n/**\n * LibraryTab component displays a grid of assets that can be selected.\n * Receives assets data from parent and displays loading/error states.\n *\n * @param props - The component props\n * @returns The library tab content\n */\nconst LibraryTabContent: React.FC<LibraryTabContentProps> = ({\n  assets,\n  isLoading,\n  error,\n  selectedAssets,\n  onAssetClick,\n}) => {\n  const { translate } = useTranslation();\n\n  if (isLoading) {\n    return <LibraryTabContentSkeleton />;\n  }\n\n  if (error) {\n    return (\n      // TODO: Update empty state when confirmed with design\n      <StyledErrorContainer>\n        <EmptyState\n          description=\"Failed to load assets. Please try again later.\"\n          title=\"Error loading assets\"\n        />\n      </StyledErrorContainer>\n    );\n  }\n\n  if (!assets || assets.length === 0) {\n    return (\n      // TODO: Update empty state when confirmed with design\n      <StyledErrorContainer>\n        <EmptyState description=\"No assets available to display.\" title=\"No assets found\" />\n      </StyledErrorContainer>\n    );\n  }\n\n  return (\n    <StyledList container component=\"ul\" spacing={1}>\n      {assets.map((asset: Asset) => {\n        const isSelected = selectedAssets.has(asset.id);\n        return (\n          <Grid\n            key={asset.id}\n            aria-selected={isSelected}\n            component=\"li\"\n            size={{ widescreen: 4, desktop: 4, mobile: 6, tablet: 4 }}\n          >\n            <StyledCardWrapper\n              aria-label={`${translate('Select')} ${asset.fileName}`}\n              onClick={() => onAssetClick(asset)}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault();\n                  onAssetClick(asset);\n                }\n              }}\n              role=\"button\"\n              selected={isSelected}\n              tabIndex={0}\n            >\n              {isSelected && <StyledCheckmarkIcon size=\"lg\" />}\n              <Card\n                content={asset.fileName}\n                heading=\"\"\n                imageAlt={asset.metadata.altText}\n                // Image source will be an imgix url, utilise params to render the image in the correct size and format\n                imageSrc={`${asset.url}?h=203&fit=crop`}\n              />\n            </StyledCardWrapper>\n          </Grid>\n        );\n      })}\n    </StyledList>\n  );\n};\n\nexport default LibraryTabContent;\n"],"names":["StyledList","styled","Grid","theme","listStyle","margin","padding","spacing","StyledCardWrapper","Box","shouldForwardProp","prop","selected","width","cursor","position","borderWidth","borderColor","palette","semantic","stroke","boxShadow","StyledCheckmarkIcon","CheckmarkCircleSolidIcon","top","left","zIndex","color","icon","fill","common","white","StyledErrorContainer","maxWidth","overflow","boxSizing","assets","isLoading","error","selectedAssets","onAssetClick","translate","useTranslation","_jsx","LibraryTabContentSkeleton","children","EmptyState","description","title","length","container","component","map","asset","isSelected","has","id","size","widescreen","desktop","mobile","tablet","_jsxs","fileName","onClick","onKeyDown","e","key","preventDefault","role","tabIndex","Card","content","heading","imageAlt","metadata","altText","imageSrc","url"],"mappings":"4bAcA,MAAMA,EAAaC,EAAAA,OAAOC,EAAPD,EAAoC,EAAGE,YAAO,CAC/DC,UAAW,OACXC,OAAQ,EACRC,QAASH,EAAMI,QAAQ,OAGnBC,EAAoBP,EAAAA,OAAOQ,EAAK,CACpCC,kBAAoBC,GAAkB,aAATA,GADLV,EAEC,EAAGE,QAAOS,eAAU,CAC7CC,MAAO,OACPC,OAAQ,UACRC,SAAU,WACV,kBAAmB,CAEjBC,YAAa,MACbC,YAAaL,EACTT,EAAMe,QAAQC,SAASC,OAAO,mBAC9BjB,EAAMe,QAAQC,SAASC,OAAO,gBAEpC,gCAAiC,CAC/BH,YAAad,EAAMe,QAAQC,SAASC,OAAO,mBAC3CC,UAAW,QAEb,wBAAyB,CACvBA,UAAW,uCAITC,EAAsBrB,EAAAA,OAAOsB,EAAPtB,EAAiC,EAAGE,YAAO,CACrEY,SAAU,WACVS,IAAKrB,EAAMI,QAAQ,GACnBkB,KAAMtB,EAAMI,QAAQ,GACpBmB,OAAQ,EACRC,MAAOxB,EAAMe,QAAQC,SAASS,KAAK,gBACnC,WAAY,CACVC,KAAM1B,EAAMe,QAAQY,OAAOC,WAIzBC,EAAuB/B,EAAAA,OAAOQ,EAAPR,EAAY,EAAGE,YAAO,CACjDG,QAASH,EAAMI,QAAQ,GACvB0B,SAAU,OACVC,SAAU,SACVC,UAAW,gCA+B+C,EAC1DC,SACAC,YACAC,QACAC,iBACAC,mBAEA,MAAMC,UAAEA,GAAcC,mBAEtB,OAAIL,EACKM,EAAAA,IAACC,EAAyB,IAG/BN,EAGAK,EAAAA,IAACX,EAAoB,CAAAa,SACnBF,EAAAA,IAACG,EAAAA,YACCC,YAAY,iDACZC,MAAM,2BAMTZ,GAA4B,IAAlBA,EAAOa,OAUpBN,EAAAA,IAAC3C,EAAU,CAACkD,WAAS,EAACC,UAAU,KAAK5C,QAAS,WAC3C6B,EAAOgB,KAAKC,IACX,MAAMC,EAAaf,EAAegB,IAAIF,EAAMG,IAC5C,OACEb,EAAAA,IAACzC,EAAI,CAAA,gBAEYoD,EACfH,UAAU,KACVM,KAAM,CAAEC,WAAY,EAAGC,QAAS,EAAGC,OAAQ,EAAGC,OAAQ,GAAGhB,SAEzDiB,EAAAA,KAACtD,EAAiB,CAAA,aACJ,GAAGiC,EAAU,aAAaY,EAAMU,WAC5CC,QAAS,IAAMxB,EAAaa,GAC5BY,UAAYC,IACI,UAAVA,EAAEC,KAA6B,MAAVD,EAAEC,MACzBD,EAAEE,iBACF5B,EAAaa,KAGjBgB,KAAK,SACLzD,SAAU0C,EACVgB,SAAU,YAEThB,GAAcX,EAAAA,IAACrB,EAAmB,CAACmC,KAAK,OACzCd,EAAAA,IAAC4B,EAAI,CACHC,QAASnB,EAAMU,SACfU,QAAQ,GACRC,SAAUrB,EAAMsB,SAASC,QAEzBC,SAAU,GAAGxB,EAAMyB,2BAxBlBzB,EAAMG,SAZjBb,EAAAA,IAACX,EAAoB,CAAAa,SACnBF,EAAAA,IAACG,EAAAA,YAAWC,YAAY,kCAAkCC,MAAM"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/LibraryTabContent/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Card from '@fd/components/atoms/Card';\nimport Grid from '@fd/components/atoms/Grid';\nimport EmptyState from '@fd/components/molecules/EmptyState';\nimport CheckmarkCircleSolidIcon from '@fd/icons/CheckmarkCircleSolid';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nimport type { Asset } from '../types/assets.type';\nimport LibraryTabContentSkeleton from './LibraryTabContentSkeleton';\n\nconst StyledList = styled(Grid)<{ component: string }>(({ theme }) => ({\n  listStyle: 'none',\n  margin: 0,\n  padding: theme.spacing(1),\n}));\n\nconst StyledCardWrapper = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'selected',\n})<{ selected?: boolean }>(({ theme, selected }) => ({\n  width: '100%',\n  cursor: 'pointer',\n  position: 'relative',\n  '& .MuiCard-root': {\n    // Always use 2px border to prevent layout shift\n    borderWidth: '2px',\n    borderColor: selected\n      ? theme.palette.semantic.stroke['stroke-selected']\n      : theme.palette.semantic.stroke['stroke-weak'],\n  },\n  '&:focus-visible .MuiCard-root': {\n    borderColor: theme.palette.semantic.stroke['stroke-selected'],\n    boxShadow: 'none',\n  },\n  '&:hover .MuiCard-root': {\n    boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2)',\n  },\n}));\n\nconst StyledCheckmarkIcon = styled(CheckmarkCircleSolidIcon)(({ theme }) => ({\n  position: 'absolute',\n  top: theme.spacing(2),\n  left: theme.spacing(2),\n  zIndex: 1,\n  color: theme.palette.semantic.icon['icon-primary'],\n  '& circle': {\n    fill: theme.palette.common.white,\n  },\n}));\n\nconst StyledErrorContainer = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(4),\n  maxWidth: '100%',\n  overflow: 'hidden',\n  boxSizing: 'border-box',\n}));\n\n/**\n * Props for the LibraryTabContent component.\n * @param assets - Array of assets to display\n * @param isLoading - Whether the assets are being loaded\n * @param error - Error object if fetching assets failed\n * @param selectedAssets - Map of selected assets (id -> Asset) for O(1) lookup performance\n * @param onAssetClick - Callback when an asset is clicked\n */\nexport interface LibraryTabContentProps {\n  /** Array of assets to display */\n  assets?: Asset[];\n  /** Whether the assets are being loaded */\n  isLoading: boolean;\n  /** Error object if fetching assets failed */\n  error: Error | null;\n  /** Map of selected assets (id -> Asset) for O(1) lookup performance */\n  selectedAssets: Map<string, Asset>;\n  /** Callback when an asset is clicked */\n  onAssetClick: (asset: Asset) => void;\n}\n\n/**\n * LibraryTab component displays a grid of assets that can be selected.\n * Receives assets data from parent and displays loading/error states.\n *\n * @param props - The component props\n * @returns The library tab content\n */\nconst LibraryTabContent: React.FC<LibraryTabContentProps> = ({\n  assets,\n  isLoading,\n  error,\n  selectedAssets,\n  onAssetClick,\n}) => {\n  const { translate } = useTranslation();\n\n  if (isLoading) {\n    return <LibraryTabContentSkeleton />;\n  }\n\n  if (error) {\n    return (\n      <StyledErrorContainer>\n        <EmptyState\n          description={translate('Failed_to_load_assets_please_try_again_later')}\n          title={translate('Error_loading_assets')}\n        />\n      </StyledErrorContainer>\n    );\n  }\n\n  if (!assets || assets.length === 0) {\n    return (\n      // TODO: Update empty state when confirmed with design\n      <StyledErrorContainer>\n        <EmptyState\n          description={translate('There_are_no_assets_to_display')}\n          title={translate('No_assets_found')}\n        />\n      </StyledErrorContainer>\n    );\n  }\n\n  return (\n    <StyledList container component=\"ul\" spacing={1}>\n      {assets.map((asset: Asset) => {\n        const isSelected = selectedAssets.has(asset.id);\n        return (\n          <Grid\n            key={asset.id}\n            aria-selected={isSelected}\n            component=\"li\"\n            size={{ widescreen: 4, desktop: 4, mobile: 6, tablet: 4 }}\n          >\n            <StyledCardWrapper\n              aria-label={`${translate('Select')} ${asset.fileName}`}\n              onClick={() => onAssetClick(asset)}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault();\n                  onAssetClick(asset);\n                }\n              }}\n              role=\"button\"\n              selected={isSelected}\n              tabIndex={0}\n            >\n              {isSelected && <StyledCheckmarkIcon size=\"lg\" />}\n              <Card\n                content={asset.fileName}\n                heading=\"\"\n                imageAlt={asset.metadata.altText}\n                // Image source will be an imgix url, utilise params to render the image in the correct size and format\n                imageSrc={`${asset.url}?h=203&fit=crop`}\n              />\n            </StyledCardWrapper>\n          </Grid>\n        );\n      })}\n    </StyledList>\n  );\n};\n\nexport default LibraryTabContent;\n"],"names":["StyledList","styled","Grid","theme","listStyle","margin","padding","spacing","StyledCardWrapper","Box","shouldForwardProp","prop","selected","width","cursor","position","borderWidth","borderColor","palette","semantic","stroke","boxShadow","StyledCheckmarkIcon","CheckmarkCircleSolidIcon","top","left","zIndex","color","icon","fill","common","white","StyledErrorContainer","maxWidth","overflow","boxSizing","assets","isLoading","error","selectedAssets","onAssetClick","translate","useTranslation","_jsx","LibraryTabContentSkeleton","children","EmptyState","description","title","length","container","component","map","asset","isSelected","has","id","size","widescreen","desktop","mobile","tablet","_jsxs","fileName","onClick","onKeyDown","e","key","preventDefault","role","tabIndex","Card","content","heading","imageAlt","metadata","altText","imageSrc","url"],"mappings":"4bAcA,MAAMA,EAAaC,EAAAA,OAAOC,EAAPD,EAAoC,EAAGE,YAAO,CAC/DC,UAAW,OACXC,OAAQ,EACRC,QAASH,EAAMI,QAAQ,OAGnBC,EAAoBP,EAAAA,OAAOQ,EAAK,CACpCC,kBAAoBC,GAAkB,aAATA,GADLV,EAEC,EAAGE,QAAOS,eAAU,CAC7CC,MAAO,OACPC,OAAQ,UACRC,SAAU,WACV,kBAAmB,CAEjBC,YAAa,MACbC,YAAaL,EACTT,EAAMe,QAAQC,SAASC,OAAO,mBAC9BjB,EAAMe,QAAQC,SAASC,OAAO,gBAEpC,gCAAiC,CAC/BH,YAAad,EAAMe,QAAQC,SAASC,OAAO,mBAC3CC,UAAW,QAEb,wBAAyB,CACvBA,UAAW,uCAITC,EAAsBrB,EAAAA,OAAOsB,EAAPtB,EAAiC,EAAGE,YAAO,CACrEY,SAAU,WACVS,IAAKrB,EAAMI,QAAQ,GACnBkB,KAAMtB,EAAMI,QAAQ,GACpBmB,OAAQ,EACRC,MAAOxB,EAAMe,QAAQC,SAASS,KAAK,gBACnC,WAAY,CACVC,KAAM1B,EAAMe,QAAQY,OAAOC,WAIzBC,EAAuB/B,EAAAA,OAAOQ,EAAPR,EAAY,EAAGE,YAAO,CACjDG,QAASH,EAAMI,QAAQ,GACvB0B,SAAU,OACVC,SAAU,SACVC,UAAW,gCA+B+C,EAC1DC,SACAC,YACAC,QACAC,iBACAC,mBAEA,MAAMC,UAAEA,GAAcC,mBAEtB,OAAIL,EACKM,EAAAA,IAACC,EAAyB,IAG/BN,EAEAK,EAAAA,IAACX,EAAoB,CAAAa,SACnBF,EAAAA,IAACG,EAAAA,WAAU,CACTC,YAAaN,EAAU,gDACvBO,MAAOP,EAAU,4BAMpBL,GAA4B,IAAlBA,EAAOa,OAapBN,EAAAA,IAAC3C,EAAU,CAACkD,WAAS,EAACC,UAAU,KAAK5C,QAAS,WAC3C6B,EAAOgB,KAAKC,IACX,MAAMC,EAAaf,EAAegB,IAAIF,EAAMG,IAC5C,OACEb,EAAAA,IAACzC,EAAI,CAAA,gBAEYoD,EACfH,UAAU,KACVM,KAAM,CAAEC,WAAY,EAAGC,QAAS,EAAGC,OAAQ,EAAGC,OAAQ,GAAGhB,SAEzDiB,EAAAA,KAACtD,EAAiB,CAAA,aACJ,GAAGiC,EAAU,aAAaY,EAAMU,WAC5CC,QAAS,IAAMxB,EAAaa,GAC5BY,UAAYC,IACI,UAAVA,EAAEC,KAA6B,MAAVD,EAAEC,MACzBD,EAAEE,iBACF5B,EAAaa,KAGjBgB,KAAK,SACLzD,SAAU0C,EACVgB,SAAU,YAEThB,GAAcX,EAAAA,IAACrB,EAAmB,CAACmC,KAAK,OACzCd,EAAAA,IAAC4B,EAAI,CACHC,QAASnB,EAAMU,SACfU,QAAQ,GACRC,SAAUrB,EAAMsB,SAASC,QAEzBC,SAAU,GAAGxB,EAAMyB,2BAxBlBzB,EAAMG,SAfjBb,EAAAA,IAACX,YACCW,EAAAA,IAACG,EAAAA,YACCC,YAAaN,EAAU,kCACvBO,MAAOP,EAAU"}

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

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{styled as o}from"@mui/material/styles";import r from"@mui/material/Box";import i from"../../../atoms/Card/index.js";import a from"@mui/material/Grid2";import{EmptyState as s}from"../../../molecules/EmptyState/index.js";import l from"../../../../icons/CheckmarkCircleSolid/index.js";import{useTranslation as n}from"../../../../providers/TranslationProvider.js";import d from"./LibraryTabContentSkeleton.js";const m=o(a)((({theme:e})=>({listStyle:"none",margin:0,padding:e.spacing(1)}))),c=o(r,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({width:"100%",cursor:"pointer",position:"relative","& .MuiCard-root":{borderWidth:"2px",borderColor:t?e.palette.semantic.stroke["stroke-selected"]:e.palette.semantic.stroke["stroke-weak"]},"&:focus-visible .MuiCard-root":{borderColor:e.palette.semantic.stroke["stroke-selected"],boxShadow:"none"},"&:hover .MuiCard-root":{boxShadow:"0px 4px 16px rgba(0, 0, 0, 0.2)"}}))),p=o(l)((({theme:e})=>({position:"absolute",top:e.spacing(2),left:e.spacing(2),zIndex:1,color:e.palette.semantic.icon["icon-primary"],"& circle":{fill:e.palette.common.white}}))),h=o(r)((({theme:e})=>({padding:e.spacing(4),maxWidth:"100%",overflow:"hidden",boxSizing:"border-box"}))),u=({assets:o,isLoading:r,error:l,selectedAssets:u,onAssetClick:b})=>{const{translate:f}=n();return r?e(d,{}):l?e(h,{children:e(s,{description:"Failed to load assets. Please try again later.",title:"Error loading assets"})}):o&&0!==o.length?e(m,{container:!0,component:"ul",spacing:1,children:o.map((o=>{const r=u.has(o.id);return e(a,{"aria-selected":r,component:"li",size:{widescreen:4,desktop:4,mobile:6,tablet:4},children:t(c,{"aria-label":`${f("Select")} ${o.fileName}`,onClick:()=>b(o),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),b(o))},role:"button",selected:r,tabIndex:0,children:[r&&e(p,{size:"lg"}),e(i,{content:o.fileName,heading:"",imageAlt:o.metadata.altText,imageSrc:`${o.url}?h=203&fit=crop`})]})},o.id)}))}):e(h,{children:e(s,{description:"No assets available to display.",title:"No assets found"})})};export{u as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{styled as o}from"@mui/material/styles";import r from"@mui/material/Box";import i from"../../../atoms/Card/index.js";import a from"@mui/material/Grid2";import{EmptyState as s}from"../../../molecules/EmptyState/index.js";import n from"../../../../icons/CheckmarkCircleSolid/index.js";import{useTranslation as l}from"../../../../providers/TranslationProvider.js";import d from"./LibraryTabContentSkeleton.js";const m=o(a)((({theme:e})=>({listStyle:"none",margin:0,padding:e.spacing(1)}))),c=o(r,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({width:"100%",cursor:"pointer",position:"relative","& .MuiCard-root":{borderWidth:"2px",borderColor:t?e.palette.semantic.stroke["stroke-selected"]:e.palette.semantic.stroke["stroke-weak"]},"&:focus-visible .MuiCard-root":{borderColor:e.palette.semantic.stroke["stroke-selected"],boxShadow:"none"},"&:hover .MuiCard-root":{boxShadow:"0px 4px 16px rgba(0, 0, 0, 0.2)"}}))),p=o(n)((({theme:e})=>({position:"absolute",top:e.spacing(2),left:e.spacing(2),zIndex:1,color:e.palette.semantic.icon["icon-primary"],"& circle":{fill:e.palette.common.white}}))),h=o(r)((({theme:e})=>({padding:e.spacing(4),maxWidth:"100%",overflow:"hidden",boxSizing:"border-box"}))),u=({assets:o,isLoading:r,error:n,selectedAssets:u,onAssetClick:f})=>{const{translate:b}=l();return r?e(d,{}):n?e(h,{children:e(s,{description:b("Failed_to_load_assets_please_try_again_later"),title:b("Error_loading_assets")})}):o&&0!==o.length?e(m,{container:!0,component:"ul",spacing:1,children:o.map((o=>{const r=u.has(o.id);return e(a,{"aria-selected":r,component:"li",size:{widescreen:4,desktop:4,mobile:6,tablet:4},children:t(c,{"aria-label":`${b("Select")} ${o.fileName}`,onClick:()=>f(o),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),f(o))},role:"button",selected:r,tabIndex:0,children:[r&&e(p,{size:"lg"}),e(i,{content:o.fileName,heading:"",imageAlt:o.metadata.altText,imageSrc:`${o.url}?h=203&fit=crop`})]})},o.id)}))}):e(h,{children:e(s,{description:b("There_are_no_assets_to_display"),title:b("No_assets_found")})})};export{u as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/organisms/AssetManager/LibraryTabContent/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Card from '@fd/components/atoms/Card';\nimport Grid from '@fd/components/atoms/Grid';\nimport EmptyState from '@fd/components/molecules/EmptyState';\nimport CheckmarkCircleSolidIcon from '@fd/icons/CheckmarkCircleSolid';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nimport type { Asset } from '../types/assets.type';\nimport LibraryTabContentSkeleton from './LibraryTabContentSkeleton';\n\nconst StyledList = styled(Grid)<{ component: string }>(({ theme }) => ({\n  listStyle: 'none',\n  margin: 0,\n  padding: theme.spacing(1),\n}));\n\nconst StyledCardWrapper = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'selected',\n})<{ selected?: boolean }>(({ theme, selected }) => ({\n  width: '100%',\n  cursor: 'pointer',\n  position: 'relative',\n  '& .MuiCard-root': {\n    // Always use 2px border to prevent layout shift\n    borderWidth: '2px',\n    borderColor: selected\n      ? theme.palette.semantic.stroke['stroke-selected']\n      : theme.palette.semantic.stroke['stroke-weak'],\n  },\n  '&:focus-visible .MuiCard-root': {\n    borderColor: theme.palette.semantic.stroke['stroke-selected'],\n    boxShadow: 'none',\n  },\n  '&:hover .MuiCard-root': {\n    boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2)',\n  },\n}));\n\nconst StyledCheckmarkIcon = styled(CheckmarkCircleSolidIcon)(({ theme }) => ({\n  position: 'absolute',\n  top: theme.spacing(2),\n  left: theme.spacing(2),\n  zIndex: 1,\n  color: theme.palette.semantic.icon['icon-primary'],\n  '& circle': {\n    fill: theme.palette.common.white,\n  },\n}));\n\nconst StyledErrorContainer = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(4),\n  maxWidth: '100%',\n  overflow: 'hidden',\n  boxSizing: 'border-box',\n}));\n\n/**\n * Props for the LibraryTabContent component.\n * @param assets - Array of assets to display\n * @param isLoading - Whether the assets are being loaded\n * @param error - Error object if fetching assets failed\n * @param selectedAssets - Map of selected assets (id -> Asset) for O(1) lookup performance\n * @param onAssetClick - Callback when an asset is clicked\n */\nexport interface LibraryTabContentProps {\n  /** Array of assets to display */\n  assets?: Asset[];\n  /** Whether the assets are being loaded */\n  isLoading: boolean;\n  /** Error object if fetching assets failed */\n  error: Error | null;\n  /** Map of selected assets (id -> Asset) for O(1) lookup performance */\n  selectedAssets: Map<string, Asset>;\n  /** Callback when an asset is clicked */\n  onAssetClick: (asset: Asset) => void;\n}\n\n/**\n * LibraryTab component displays a grid of assets that can be selected.\n * Receives assets data from parent and displays loading/error states.\n *\n * @param props - The component props\n * @returns The library tab content\n */\nconst LibraryTabContent: React.FC<LibraryTabContentProps> = ({\n  assets,\n  isLoading,\n  error,\n  selectedAssets,\n  onAssetClick,\n}) => {\n  const { translate } = useTranslation();\n\n  if (isLoading) {\n    return <LibraryTabContentSkeleton />;\n  }\n\n  if (error) {\n    return (\n      // TODO: Update empty state when confirmed with design\n      <StyledErrorContainer>\n        <EmptyState\n          description=\"Failed to load assets. Please try again later.\"\n          title=\"Error loading assets\"\n        />\n      </StyledErrorContainer>\n    );\n  }\n\n  if (!assets || assets.length === 0) {\n    return (\n      // TODO: Update empty state when confirmed with design\n      <StyledErrorContainer>\n        <EmptyState description=\"No assets available to display.\" title=\"No assets found\" />\n      </StyledErrorContainer>\n    );\n  }\n\n  return (\n    <StyledList container component=\"ul\" spacing={1}>\n      {assets.map((asset: Asset) => {\n        const isSelected = selectedAssets.has(asset.id);\n        return (\n          <Grid\n            key={asset.id}\n            aria-selected={isSelected}\n            component=\"li\"\n            size={{ widescreen: 4, desktop: 4, mobile: 6, tablet: 4 }}\n          >\n            <StyledCardWrapper\n              aria-label={`${translate('Select')} ${asset.fileName}`}\n              onClick={() => onAssetClick(asset)}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault();\n                  onAssetClick(asset);\n                }\n              }}\n              role=\"button\"\n              selected={isSelected}\n              tabIndex={0}\n            >\n              {isSelected && <StyledCheckmarkIcon size=\"lg\" />}\n              <Card\n                content={asset.fileName}\n                heading=\"\"\n                imageAlt={asset.metadata.altText}\n                // Image source will be an imgix url, utilise params to render the image in the correct size and format\n                imageSrc={`${asset.url}?h=203&fit=crop`}\n              />\n            </StyledCardWrapper>\n          </Grid>\n        );\n      })}\n    </StyledList>\n  );\n};\n\nexport default LibraryTabContent;\n"],"names":["StyledList","styled","Grid","theme","listStyle","margin","padding","spacing","StyledCardWrapper","Box","shouldForwardProp","prop","selected","width","cursor","position","borderWidth","borderColor","palette","semantic","stroke","boxShadow","StyledCheckmarkIcon","CheckmarkCircleSolidIcon","top","left","zIndex","color","icon","fill","common","white","StyledErrorContainer","maxWidth","overflow","boxSizing","LibraryTabContent","assets","isLoading","error","selectedAssets","onAssetClick","translate","useTranslation","_jsx","LibraryTabContentSkeleton","children","EmptyState","description","title","length","container","component","map","asset","isSelected","has","id","size","widescreen","desktop","mobile","tablet","_jsxs","fileName","onClick","onKeyDown","e","key","preventDefault","role","tabIndex","Card","content","heading","imageAlt","metadata","altText","imageSrc","url"],"mappings":"6dAcA,MAAMA,EAAaC,EAAOC,EAAPD,EAAoC,EAAGE,YAAO,CAC/DC,UAAW,OACXC,OAAQ,EACRC,QAASH,EAAMI,QAAQ,OAGnBC,EAAoBP,EAAOQ,EAAK,CACpCC,kBAAoBC,GAAkB,aAATA,GADLV,EAEC,EAAGE,QAAOS,eAAU,CAC7CC,MAAO,OACPC,OAAQ,UACRC,SAAU,WACV,kBAAmB,CAEjBC,YAAa,MACbC,YAAaL,EACTT,EAAMe,QAAQC,SAASC,OAAO,mBAC9BjB,EAAMe,QAAQC,SAASC,OAAO,gBAEpC,gCAAiC,CAC/BH,YAAad,EAAMe,QAAQC,SAASC,OAAO,mBAC3CC,UAAW,QAEb,wBAAyB,CACvBA,UAAW,uCAITC,EAAsBrB,EAAOsB,EAAPtB,EAAiC,EAAGE,YAAO,CACrEY,SAAU,WACVS,IAAKrB,EAAMI,QAAQ,GACnBkB,KAAMtB,EAAMI,QAAQ,GACpBmB,OAAQ,EACRC,MAAOxB,EAAMe,QAAQC,SAASS,KAAK,gBACnC,WAAY,CACVC,KAAM1B,EAAMe,QAAQY,OAAOC,WAIzBC,EAAuB/B,EAAOQ,EAAPR,EAAY,EAAGE,YAAO,CACjDG,QAASH,EAAMI,QAAQ,GACvB0B,SAAU,OACVC,SAAU,SACVC,UAAW,iBA+BPC,EAAsD,EAC1DC,SACAC,YACAC,QACAC,iBACAC,mBAEA,MAAMC,UAAEA,GAAcC,IAEtB,OAAIL,EACKM,EAACC,EAAyB,IAG/BN,EAGAK,EAACZ,EAAoB,CAAAc,SACnBF,EAACG,GACCC,YAAY,iDACZC,MAAM,2BAMTZ,GAA4B,IAAlBA,EAAOa,OAUpBN,EAAC5C,EAAU,CAACmD,WAAS,EAACC,UAAU,KAAK7C,QAAS,WAC3C8B,EAAOgB,KAAKC,IACX,MAAMC,EAAaf,EAAegB,IAAIF,EAAMG,IAC5C,OACEb,EAAC1C,EAAI,CAAA,gBAEYqD,EACfH,UAAU,KACVM,KAAM,CAAEC,WAAY,EAAGC,QAAS,EAAGC,OAAQ,EAAGC,OAAQ,GAAGhB,SAEzDiB,EAACvD,EAAiB,CAAA,aACJ,GAAGkC,EAAU,aAAaY,EAAMU,WAC5CC,QAAS,IAAMxB,EAAaa,GAC5BY,UAAYC,IACI,UAAVA,EAAEC,KAA6B,MAAVD,EAAEC,MACzBD,EAAEE,iBACF5B,EAAaa,KAGjBgB,KAAK,SACL1D,SAAU2C,EACVgB,SAAU,YAEThB,GAAcX,EAACtB,EAAmB,CAACoC,KAAK,OACzCd,EAAC4B,EAAI,CACHC,QAASnB,EAAMU,SACfU,QAAQ,GACRC,SAAUrB,EAAMsB,SAASC,QAEzBC,SAAU,GAAGxB,EAAMyB,2BAxBlBzB,EAAMG,SAZjBb,EAACZ,EAAoB,CAAAc,SACnBF,EAACG,GAAWC,YAAY,kCAAkCC,MAAM"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/organisms/AssetManager/LibraryTabContent/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Card from '@fd/components/atoms/Card';\nimport Grid from '@fd/components/atoms/Grid';\nimport EmptyState from '@fd/components/molecules/EmptyState';\nimport CheckmarkCircleSolidIcon from '@fd/icons/CheckmarkCircleSolid';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nimport type { Asset } from '../types/assets.type';\nimport LibraryTabContentSkeleton from './LibraryTabContentSkeleton';\n\nconst StyledList = styled(Grid)<{ component: string }>(({ theme }) => ({\n  listStyle: 'none',\n  margin: 0,\n  padding: theme.spacing(1),\n}));\n\nconst StyledCardWrapper = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'selected',\n})<{ selected?: boolean }>(({ theme, selected }) => ({\n  width: '100%',\n  cursor: 'pointer',\n  position: 'relative',\n  '& .MuiCard-root': {\n    // Always use 2px border to prevent layout shift\n    borderWidth: '2px',\n    borderColor: selected\n      ? theme.palette.semantic.stroke['stroke-selected']\n      : theme.palette.semantic.stroke['stroke-weak'],\n  },\n  '&:focus-visible .MuiCard-root': {\n    borderColor: theme.palette.semantic.stroke['stroke-selected'],\n    boxShadow: 'none',\n  },\n  '&:hover .MuiCard-root': {\n    boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2)',\n  },\n}));\n\nconst StyledCheckmarkIcon = styled(CheckmarkCircleSolidIcon)(({ theme }) => ({\n  position: 'absolute',\n  top: theme.spacing(2),\n  left: theme.spacing(2),\n  zIndex: 1,\n  color: theme.palette.semantic.icon['icon-primary'],\n  '& circle': {\n    fill: theme.palette.common.white,\n  },\n}));\n\nconst StyledErrorContainer = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(4),\n  maxWidth: '100%',\n  overflow: 'hidden',\n  boxSizing: 'border-box',\n}));\n\n/**\n * Props for the LibraryTabContent component.\n * @param assets - Array of assets to display\n * @param isLoading - Whether the assets are being loaded\n * @param error - Error object if fetching assets failed\n * @param selectedAssets - Map of selected assets (id -> Asset) for O(1) lookup performance\n * @param onAssetClick - Callback when an asset is clicked\n */\nexport interface LibraryTabContentProps {\n  /** Array of assets to display */\n  assets?: Asset[];\n  /** Whether the assets are being loaded */\n  isLoading: boolean;\n  /** Error object if fetching assets failed */\n  error: Error | null;\n  /** Map of selected assets (id -> Asset) for O(1) lookup performance */\n  selectedAssets: Map<string, Asset>;\n  /** Callback when an asset is clicked */\n  onAssetClick: (asset: Asset) => void;\n}\n\n/**\n * LibraryTab component displays a grid of assets that can be selected.\n * Receives assets data from parent and displays loading/error states.\n *\n * @param props - The component props\n * @returns The library tab content\n */\nconst LibraryTabContent: React.FC<LibraryTabContentProps> = ({\n  assets,\n  isLoading,\n  error,\n  selectedAssets,\n  onAssetClick,\n}) => {\n  const { translate } = useTranslation();\n\n  if (isLoading) {\n    return <LibraryTabContentSkeleton />;\n  }\n\n  if (error) {\n    return (\n      <StyledErrorContainer>\n        <EmptyState\n          description={translate('Failed_to_load_assets_please_try_again_later')}\n          title={translate('Error_loading_assets')}\n        />\n      </StyledErrorContainer>\n    );\n  }\n\n  if (!assets || assets.length === 0) {\n    return (\n      // TODO: Update empty state when confirmed with design\n      <StyledErrorContainer>\n        <EmptyState\n          description={translate('There_are_no_assets_to_display')}\n          title={translate('No_assets_found')}\n        />\n      </StyledErrorContainer>\n    );\n  }\n\n  return (\n    <StyledList container component=\"ul\" spacing={1}>\n      {assets.map((asset: Asset) => {\n        const isSelected = selectedAssets.has(asset.id);\n        return (\n          <Grid\n            key={asset.id}\n            aria-selected={isSelected}\n            component=\"li\"\n            size={{ widescreen: 4, desktop: 4, mobile: 6, tablet: 4 }}\n          >\n            <StyledCardWrapper\n              aria-label={`${translate('Select')} ${asset.fileName}`}\n              onClick={() => onAssetClick(asset)}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault();\n                  onAssetClick(asset);\n                }\n              }}\n              role=\"button\"\n              selected={isSelected}\n              tabIndex={0}\n            >\n              {isSelected && <StyledCheckmarkIcon size=\"lg\" />}\n              <Card\n                content={asset.fileName}\n                heading=\"\"\n                imageAlt={asset.metadata.altText}\n                // Image source will be an imgix url, utilise params to render the image in the correct size and format\n                imageSrc={`${asset.url}?h=203&fit=crop`}\n              />\n            </StyledCardWrapper>\n          </Grid>\n        );\n      })}\n    </StyledList>\n  );\n};\n\nexport default LibraryTabContent;\n"],"names":["StyledList","styled","Grid","theme","listStyle","margin","padding","spacing","StyledCardWrapper","Box","shouldForwardProp","prop","selected","width","cursor","position","borderWidth","borderColor","palette","semantic","stroke","boxShadow","StyledCheckmarkIcon","CheckmarkCircleSolidIcon","top","left","zIndex","color","icon","fill","common","white","StyledErrorContainer","maxWidth","overflow","boxSizing","LibraryTabContent","assets","isLoading","error","selectedAssets","onAssetClick","translate","useTranslation","_jsx","LibraryTabContentSkeleton","children","EmptyState","description","title","length","container","component","map","asset","isSelected","has","id","size","widescreen","desktop","mobile","tablet","_jsxs","fileName","onClick","onKeyDown","e","key","preventDefault","role","tabIndex","Card","content","heading","imageAlt","metadata","altText","imageSrc","url"],"mappings":"6dAcA,MAAMA,EAAaC,EAAOC,EAAPD,EAAoC,EAAGE,YAAO,CAC/DC,UAAW,OACXC,OAAQ,EACRC,QAASH,EAAMI,QAAQ,OAGnBC,EAAoBP,EAAOQ,EAAK,CACpCC,kBAAoBC,GAAkB,aAATA,GADLV,EAEC,EAAGE,QAAOS,eAAU,CAC7CC,MAAO,OACPC,OAAQ,UACRC,SAAU,WACV,kBAAmB,CAEjBC,YAAa,MACbC,YAAaL,EACTT,EAAMe,QAAQC,SAASC,OAAO,mBAC9BjB,EAAMe,QAAQC,SAASC,OAAO,gBAEpC,gCAAiC,CAC/BH,YAAad,EAAMe,QAAQC,SAASC,OAAO,mBAC3CC,UAAW,QAEb,wBAAyB,CACvBA,UAAW,uCAITC,EAAsBrB,EAAOsB,EAAPtB,EAAiC,EAAGE,YAAO,CACrEY,SAAU,WACVS,IAAKrB,EAAMI,QAAQ,GACnBkB,KAAMtB,EAAMI,QAAQ,GACpBmB,OAAQ,EACRC,MAAOxB,EAAMe,QAAQC,SAASS,KAAK,gBACnC,WAAY,CACVC,KAAM1B,EAAMe,QAAQY,OAAOC,WAIzBC,EAAuB/B,EAAOQ,EAAPR,EAAY,EAAGE,YAAO,CACjDG,QAASH,EAAMI,QAAQ,GACvB0B,SAAU,OACVC,SAAU,SACVC,UAAW,iBA+BPC,EAAsD,EAC1DC,SACAC,YACAC,QACAC,iBACAC,mBAEA,MAAMC,UAAEA,GAAcC,IAEtB,OAAIL,EACKM,EAACC,EAAyB,IAG/BN,EAEAK,EAACZ,EAAoB,CAAAc,SACnBF,EAACG,EAAU,CACTC,YAAaN,EAAU,gDACvBO,MAAOP,EAAU,4BAMpBL,GAA4B,IAAlBA,EAAOa,OAapBN,EAAC5C,EAAU,CAACmD,WAAS,EAACC,UAAU,KAAK7C,QAAS,WAC3C8B,EAAOgB,KAAKC,IACX,MAAMC,EAAaf,EAAegB,IAAIF,EAAMG,IAC5C,OACEb,EAAC1C,EAAI,CAAA,gBAEYqD,EACfH,UAAU,KACVM,KAAM,CAAEC,WAAY,EAAGC,QAAS,EAAGC,OAAQ,EAAGC,OAAQ,GAAGhB,SAEzDiB,EAACvD,EAAiB,CAAA,aACJ,GAAGkC,EAAU,aAAaY,EAAMU,WAC5CC,QAAS,IAAMxB,EAAaa,GAC5BY,UAAYC,IACI,UAAVA,EAAEC,KAA6B,MAAVD,EAAEC,MACzBD,EAAEE,iBACF5B,EAAaa,KAGjBgB,KAAK,SACL1D,SAAU2C,EACVgB,SAAU,YAEThB,GAAcX,EAACtB,EAAmB,CAACoC,KAAK,OACzCd,EAAC4B,EAAI,CACHC,QAASnB,EAAMU,SACfU,QAAQ,GACRC,SAAUrB,EAAMsB,SAASC,QAEzBC,SAAU,GAAGxB,EAAMyB,2BAxBlBzB,EAAMG,SAfjBb,EAACZ,YACCY,EAACG,GACCC,YAAaN,EAAU,kCACvBO,MAAOP,EAAU"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("react");var i=require("../../../../utilities/fileUtils.cjs.js"),l=require("../../FileUpload/index.cjs.js");const s=["jpg","jpeg","png","gif","bmp","tiff","ico","webp"];module.exports=({files:r,onUpload:o,onRemove:a})=>e.jsx(l,{allowedFileTypes:s,files:r,label:"",maxFiles:10,maxFileSize:i.TEN_MB_IN_BYTES,onRemove:a,onUpload:o});
+"use strict";var e=require("react/jsx-runtime");require("react");var i=require("../../../../utilities/fileUtils.cjs.js"),r=require("../../../../providers/TranslationProvider.cjs.js"),l=require("../../FileUpload/index.cjs.js");const s=["jpg","jpeg","png","bmp","tiff","ico","webp"];module.exports=({files:o,onUpload:a,onRemove:t,error:n})=>{const{translate:p}=r.useTranslation(),_=p("File_is_too_large_upload_a_file_under",{maxFileSize:"10 MB"}),u=p("File_type_isnt_supported_upload_an_image",{fileTypes:s.join(", ")});return e.jsx(l,{allowedFileTypes:s,error:n,files:o,invalidFileSizeText:_,invalidFileTypesText:u,label:"",maxFiles:10,maxFileSize:i.TEN_MB_IN_BYTES,onRemove:t,onUpload:a})};
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/UploadTabContent/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TEN_MB_IN_BYTES } from '@fd/utilities/fileUtils';\n\nimport FileUpload, { type FileUploadState } from '../../FileUpload';\n\nconst ALLOWED_FILE_TYPES = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'ico', 'webp'];\nconst MAX_FILES = 10;\n\n/**\n * Props for the UploadTabContent component.\n * @param files - Array of file upload states\n * @param onUpload - Callback fired when files are uploaded\n * @param onRemove - Callback fired when a file is removed\n */\nexport interface UploadTabContentProps {\n  /** Array of file upload states */\n  files: FileUploadState[];\n  /** Callback fired when files are uploaded */\n  onUpload: (files: File[]) => void;\n  /** Callback fired when a file is removed */\n  onRemove: (file: File) => void;\n}\n\n/**\n * UploadAsset component provides a file upload interface for uploading new assets.\n *\n * @param props - The component props\n * @returns The upload tab content\n */\nconst UploadTabContent: React.FC<UploadTabContentProps> = ({ files, onUpload, onRemove }) => {\n  return (\n    <FileUpload\n      allowedFileTypes={ALLOWED_FILE_TYPES}\n      files={files}\n      label=\"\"\n      maxFiles={MAX_FILES}\n      maxFileSize={TEN_MB_IN_BYTES}\n      onRemove={onRemove}\n      onUpload={onUpload}\n    />\n  );\n};\n\nexport default UploadTabContent;\n"],"names":["ALLOWED_FILE_TYPES","files","onUpload","onRemove","_jsx","FileUpload","allowedFileTypes","label","maxFiles","maxFileSize","TEN_MB_IN_BYTES"],"mappings":"oKAMA,MAAMA,EAAqB,CAAC,MAAO,OAAQ,MAAO,MAAO,MAAO,OAAQ,MAAO,uBAwBrB,EAAGC,QAAOC,WAAUC,cAE1EC,EAAAA,IAACC,EAAU,CACTC,iBAAkBN,EAClBC,MAAOA,EACPM,MAAM,GACNC,SA7BY,GA8BZC,YAAaC,EAAAA,gBACbP,SAAUA,EACVD,SAAUA"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/UploadTabContent/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TEN_MB_IN_BYTES } from '@fd/utilities/fileUtils';\n\nimport { useTranslation } from '../../../../providers/TranslationProvider';\nimport FileUpload, { type FileUploadState } from '../../FileUpload';\n\nconst ALLOWED_FILE_TYPES = ['jpg', 'jpeg', 'png', 'bmp', 'tiff', 'ico', 'webp'];\nconst MAX_FILES = 10;\n\n/**\n * Props for the UploadTabContent component.\n * @param files - Array of file upload states\n * @param onUpload - Callback fired when files are uploaded\n * @param onRemove - Callback fired when a file is removed\n * @param error - Optional error message to display on the file upload\n */\nexport interface UploadTabContentProps {\n  /** Array of file upload states */\n  files: FileUploadState[];\n  /** Callback fired when files are uploaded */\n  onUpload: (files: File[]) => void;\n  /** Callback fired when a file is removed */\n  onRemove: (file: File) => void;\n  /** Optional error message to display on the file upload */\n  error?: string | null;\n}\n\n/**\n * UploadAsset component provides a file upload interface for uploading new assets.\n *\n * @param props - The component props\n * @returns The upload tab content\n */\nconst UploadTabContent: React.FC<UploadTabContentProps> = ({ files, onUpload, onRemove, error }) => {\n  const { translate } = useTranslation();\n  const maxFileSizeText = translate('File_is_too_large_upload_a_file_under', {\n    maxFileSize: '10 MB',\n  });\n  const invalidFileTypesText = translate('File_type_isnt_supported_upload_an_image', {\n    fileTypes: ALLOWED_FILE_TYPES.join(', '),\n  });\n\n  return (\n    <FileUpload\n      allowedFileTypes={ALLOWED_FILE_TYPES}\n      error={error}\n      files={files}\n      invalidFileSizeText={maxFileSizeText}\n      invalidFileTypesText={invalidFileTypesText}\n      label=\"\"\n      maxFiles={MAX_FILES}\n      maxFileSize={TEN_MB_IN_BYTES}\n      onRemove={onRemove}\n      onUpload={onUpload}\n    />\n  );\n};\n\nexport default UploadTabContent;\n"],"names":["ALLOWED_FILE_TYPES","files","onUpload","onRemove","error","translate","useTranslation","maxFileSizeText","maxFileSize","invalidFileTypesText","fileTypes","join","_jsx","FileUpload","allowedFileTypes","invalidFileSizeText","label","maxFiles","TEN_MB_IN_BYTES"],"mappings":"kOAOA,MAAMA,EAAqB,CAAC,MAAO,OAAQ,MAAO,MAAO,OAAQ,MAAO,uBA2Bd,EAAGC,QAAOC,WAAUC,WAAUC,YACtF,MAAMC,UAAEA,GAAcC,mBAChBC,EAAkBF,EAAU,wCAAyC,CACzEG,YAAa,UAETC,EAAuBJ,EAAU,2CAA4C,CACjFK,UAAWV,EAAmBW,KAAK,QAGrC,OACEC,MAACC,EAAU,CACTC,iBAAkBd,EAClBI,MAAOA,EACPH,MAAOA,EACPc,oBAAqBR,EACrBE,qBAAsBA,EACtBO,MAAM,GACNC,SA3CY,GA4CZT,YAAaU,EAAAA,gBACbf,SAAUA,EACVD,SAAUA"}

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

@@ -6,6 +6,7 @@ import { FileUploadState } from '../../FileUpload/index.js';
  * @param files - Array of file upload states
  * @param onUpload - Callback fired when files are uploaded
  * @param onRemove - Callback fired when a file is removed
+ * @param error - Optional error message to display on the file upload
  */
 interface UploadTabContentProps {
     /** Array of file upload states */
@@ -14,6 +15,8 @@ interface UploadTabContentProps {
     onUpload: (files: File[]) => void;
     /** Callback fired when a file is removed */
     onRemove: (file: File) => void;
+    /** Optional error message to display on the file upload */
+    error?: string | null;
 }
 /**
  * UploadAsset component provides a file upload interface for uploading new assets.

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

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import"react";import{TEN_MB_IN_BYTES as i}from"../../../../utilities/fileUtils.js";import o from"../../FileUpload/index.js";const l=["jpg","jpeg","png","gif","bmp","tiff","ico","webp"],p=({files:p,onUpload:t,onRemove:m})=>e(o,{allowedFileTypes:l,files:p,label:"",maxFiles:10,maxFileSize:i,onRemove:m,onUpload:t});export{p as default};
+import{jsx as e}from"react/jsx-runtime";import"react";import{TEN_MB_IN_BYTES as i}from"../../../../utilities/fileUtils.js";import{useTranslation as o}from"../../../../providers/TranslationProvider.js";import l from"../../FileUpload/index.js";const r=["jpg","jpeg","png","bmp","tiff","ico","webp"],t=({files:t,onUpload:a,onRemove:p,error:s})=>{const{translate:n}=o(),m=n("File_is_too_large_upload_a_file_under",{maxFileSize:"10 MB"}),d=n("File_type_isnt_supported_upload_an_image",{fileTypes:r.join(", ")});return e(l,{allowedFileTypes:r,error:s,files:t,invalidFileSizeText:m,invalidFileTypesText:d,label:"",maxFiles:10,maxFileSize:i,onRemove:p,onUpload:a})};export{t as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/organisms/AssetManager/UploadTabContent/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TEN_MB_IN_BYTES } from '@fd/utilities/fileUtils';\n\nimport FileUpload, { type FileUploadState } from '../../FileUpload';\n\nconst ALLOWED_FILE_TYPES = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'ico', 'webp'];\nconst MAX_FILES = 10;\n\n/**\n * Props for the UploadTabContent component.\n * @param files - Array of file upload states\n * @param onUpload - Callback fired when files are uploaded\n * @param onRemove - Callback fired when a file is removed\n */\nexport interface UploadTabContentProps {\n  /** Array of file upload states */\n  files: FileUploadState[];\n  /** Callback fired when files are uploaded */\n  onUpload: (files: File[]) => void;\n  /** Callback fired when a file is removed */\n  onRemove: (file: File) => void;\n}\n\n/**\n * UploadAsset component provides a file upload interface for uploading new assets.\n *\n * @param props - The component props\n * @returns The upload tab content\n */\nconst UploadTabContent: React.FC<UploadTabContentProps> = ({ files, onUpload, onRemove }) => {\n  return (\n    <FileUpload\n      allowedFileTypes={ALLOWED_FILE_TYPES}\n      files={files}\n      label=\"\"\n      maxFiles={MAX_FILES}\n      maxFileSize={TEN_MB_IN_BYTES}\n      onRemove={onRemove}\n      onUpload={onUpload}\n    />\n  );\n};\n\nexport default UploadTabContent;\n"],"names":["ALLOWED_FILE_TYPES","UploadTabContent","files","onUpload","onRemove","_jsx","FileUpload","allowedFileTypes","label","maxFiles","maxFileSize","TEN_MB_IN_BYTES"],"mappings":"oKAMA,MAAMA,EAAqB,CAAC,MAAO,OAAQ,MAAO,MAAO,MAAO,OAAQ,MAAO,QAwBzEC,EAAoD,EAAGC,QAAOC,WAAUC,cAE1EC,EAACC,EAAU,CACTC,iBAAkBP,EAClBE,MAAOA,EACPM,MAAM,GACNC,SA7BY,GA8BZC,YAAaC,EACbP,SAAUA,EACVD,SAAUA"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/organisms/AssetManager/UploadTabContent/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TEN_MB_IN_BYTES } from '@fd/utilities/fileUtils';\n\nimport { useTranslation } from '../../../../providers/TranslationProvider';\nimport FileUpload, { type FileUploadState } from '../../FileUpload';\n\nconst ALLOWED_FILE_TYPES = ['jpg', 'jpeg', 'png', 'bmp', 'tiff', 'ico', 'webp'];\nconst MAX_FILES = 10;\n\n/**\n * Props for the UploadTabContent component.\n * @param files - Array of file upload states\n * @param onUpload - Callback fired when files are uploaded\n * @param onRemove - Callback fired when a file is removed\n * @param error - Optional error message to display on the file upload\n */\nexport interface UploadTabContentProps {\n  /** Array of file upload states */\n  files: FileUploadState[];\n  /** Callback fired when files are uploaded */\n  onUpload: (files: File[]) => void;\n  /** Callback fired when a file is removed */\n  onRemove: (file: File) => void;\n  /** Optional error message to display on the file upload */\n  error?: string | null;\n}\n\n/**\n * UploadAsset component provides a file upload interface for uploading new assets.\n *\n * @param props - The component props\n * @returns The upload tab content\n */\nconst UploadTabContent: React.FC<UploadTabContentProps> = ({ files, onUpload, onRemove, error }) => {\n  const { translate } = useTranslation();\n  const maxFileSizeText = translate('File_is_too_large_upload_a_file_under', {\n    maxFileSize: '10 MB',\n  });\n  const invalidFileTypesText = translate('File_type_isnt_supported_upload_an_image', {\n    fileTypes: ALLOWED_FILE_TYPES.join(', '),\n  });\n\n  return (\n    <FileUpload\n      allowedFileTypes={ALLOWED_FILE_TYPES}\n      error={error}\n      files={files}\n      invalidFileSizeText={maxFileSizeText}\n      invalidFileTypesText={invalidFileTypesText}\n      label=\"\"\n      maxFiles={MAX_FILES}\n      maxFileSize={TEN_MB_IN_BYTES}\n      onRemove={onRemove}\n      onUpload={onUpload}\n    />\n  );\n};\n\nexport default UploadTabContent;\n"],"names":["ALLOWED_FILE_TYPES","UploadTabContent","files","onUpload","onRemove","error","translate","useTranslation","maxFileSizeText","maxFileSize","invalidFileTypesText","fileTypes","join","_jsx","FileUpload","allowedFileTypes","invalidFileSizeText","label","maxFiles","TEN_MB_IN_BYTES"],"mappings":"kPAOA,MAAMA,EAAqB,CAAC,MAAO,OAAQ,MAAO,MAAO,OAAQ,MAAO,QA2BlEC,EAAoD,EAAGC,QAAOC,WAAUC,WAAUC,YACtF,MAAMC,UAAEA,GAAcC,IAChBC,EAAkBF,EAAU,wCAAyC,CACzEG,YAAa,UAETC,EAAuBJ,EAAU,2CAA4C,CACjFK,UAAWX,EAAmBY,KAAK,QAGrC,OACEC,EAACC,EAAU,CACTC,iBAAkBf,EAClBK,MAAOA,EACPH,MAAOA,EACPc,oBAAqBR,EACrBE,qBAAsBA,EACtBO,MAAM,GACNC,SA3CY,GA4CZT,YAAaU,EACbf,SAAUA,EACVD,SAAUA"}

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

@@ -0,0 +1,2 @@
+"use strict";var e=require("react");exports.useAssetSelection=({maxSelect:s})=>{const[t,a]=e.useState(new Map);return{selectedAssetsMap:t,handleAssetClick:e.useCallback((e=>{a((t=>{const a=t.has(e.id),c=new Map(t);return a?c.delete(e.id):1===s?(c.clear(),c.set(e.id,e)):c.size<s&&c.set(e.id,e),c}))}),[s]),clearSelection:e.useCallback((()=>{a(new Map)}),[]),addAssetsToSelection:e.useCallback((e=>{a((t=>{const a=new Map(t);for(const t of e)a.size<s&&a.set(t.id,t);return a}))}),[s])}};
+//# sourceMappingURL=useAssetSelection.cjs.js.map

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

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

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

@@ -0,0 +1,19 @@
+import { Asset } from '@flipdish/asset-management';
+
+interface UseAssetSelectionOptions {
+    maxSelect: number;
+}
+interface UseAssetSelectionReturn {
+    selectedAssetsMap: Map<string, Asset>;
+    handleAssetClick: (asset: Asset) => void;
+    clearSelection: () => void;
+    addAssetsToSelection: (assets: Asset[]) => void;
+}
+/**
+ * Custom hook to manage asset selection state and logic
+ * @param options - Configuration options including maxSelect limit
+ * @returns Selection state and handlers
+ */
+declare const useAssetSelection: ({ maxSelect }: UseAssetSelectionOptions) => UseAssetSelectionReturn;
+
+export { useAssetSelection };

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

@@ -0,0 +1,2 @@
+import{useState as e,useCallback as t}from"react";const s=({maxSelect:s})=>{const[n,c]=e(new Map);return{selectedAssetsMap:n,handleAssetClick:t((e=>{c((t=>{const n=t.has(e.id),c=new Map(t);return n?c.delete(e.id):1===s?(c.clear(),c.set(e.id,e)):c.size<s&&c.set(e.id,e),c}))}),[s]),clearSelection:t((()=>{c(new Map)}),[]),addAssetsToSelection:t((e=>{c((t=>{const n=new Map(t);for(const t of e)n.size<s&&n.set(t.id,t);return n}))}),[s])}};export{s as useAssetSelection};
+//# sourceMappingURL=useAssetSelection.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,29 @@
+import { FileUploadState } from '../../FileUpload/index.js';
+import { Asset } from '@flipdish/asset-management';
+
+interface UseAssetUploadManagerOptions {
+    orgId: string;
+    brandId?: string;
+    onUploadSuccess?: (assets: Asset[]) => void;
+    getErrorMessage: (error: Error) => string;
+}
+interface UseAssetUploadManagerReturn {
+    uploadedFiles: FileUploadState[];
+    uploadError: string | null;
+    isUploading: boolean;
+    handleUpload: (files: File[]) => void;
+    handleRemove: (file: File) => void;
+    handleSave: () => void;
+    clearUploadedFiles: () => void;
+    clearSaveUploadError: () => void;
+}
+/**
+ * Custom hook to manage asset upload state and logic
+ * Handles file management, upload execution, and error handling
+ *
+ * @param options - Configuration options for upload management
+ * @returns Upload state and handlers
+ */
+declare const useAssetUploadManager: ({ orgId, brandId, onUploadSuccess, getErrorMessage, }: UseAssetUploadManagerOptions) => UseAssetUploadManagerReturn;
+
+export { useAssetUploadManager };

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,2 +1,2 @@
-"use strict";var t=require("../../../../utilities/apiUtils.cjs.js"),s=require("@flipdish/asset-management");const e=new s.Configuration({basePath:(()=>{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"})(),baseOptions:{withCredentials:!0}}),r=new s.AssetsApi(e);exports.getAssets=async(s,e)=>{if(!s)throw new Error("Organization ID is required to fetch assets");try{return(await r.listAssets(s,e)).data}catch(s){const e=t.getErrorMessage(s,"Failed to fetch assets");throw new Error(e)}},exports.uploadAsset=async s=>{const{orgId:e,brandId:a,files:i}=s;if(!e)throw new Error("Organization ID is required to upload assets");if(!i||0===i.length)throw new Error("At least one file is required to upload");try{return(await r.uploadAsset(e,i,a)).data}catch(s){const e=t.getErrorMessage(s,"Failed to upload assets");throw new Error(e)}};
+"use strict";var s=require("../../../../utilities/apiUtils.cjs.js"),t=require("@flipdish/asset-management"),e=require("../../../../utilities/fileUtils.cjs.js");const r=new t.Configuration({basePath:(()=>{const s=window.location?.host?.includes("portal.flipdish.com");return s?"https://api.portal.flipdish.com/assets":"https://api-prod-staging.portal.flipdishdev.com/assets"})(),baseOptions:{withCredentials:!0}}),i=new t.AssetsApi(r);exports.getAssets=async(t,e)=>{if(!t)throw console.error("Organization ID is required to fetch assets"),new Error("Organization ID is required to fetch assets");try{return(await i.listAssets(t,e)).data}catch(t){const e=s.getErrorMessage(t,"Failed to fetch assets");throw new Error(e)}},exports.uploadAsset=async t=>{const{orgId:r,brandId:a,files:o}=t;if(!r)throw new Error("Organization ID is required to upload assets");if(!o||0===o.length)throw new Error("At least one file is required to upload");const n=o.map(e.sanitizeFile);try{return(await i.uploadAsset(r,n,a)).data}catch(t){const e=s.getErrorMessage(t,"Failed to upload assets");throw new Error(e)}};
 //# 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 { getErrorMessage } from '@fd/utilities/apiUtils';\nimport { AssetsApi, Configuration } from '@flipdish/asset-management';\n\nimport type { ListAssetsResponse, UploadAssetResponse } from '../types/assets.type';\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 * Configuration for the asset management API client\n * - basePath: API base URL based on environment\n * - baseOptions.withCredentials: Send cookies/credentials with requests\n */\nconst configuration = new Configuration({\n  basePath: getAssetManagementApiUrl(),\n  baseOptions: {\n    withCredentials: true,\n  },\n});\n\nconst assetsApi = new AssetsApi(configuration);\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<ListAssetsResponse> => {\n  if (!orgId) {\n    throw new Error('Organization ID is required to fetch assets');\n  }\n\n  try {\n    const response = await assetsApi.listAssets(orgId, brandId);\n    return response.data;\n  } catch (error: unknown) {\n    const errorMessage = getErrorMessage(error, 'Failed to fetch assets');\n    throw new Error(errorMessage);\n  }\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  try {\n    const response = await assetsApi.uploadAsset(orgId, files, brandId);\n    return response.data;\n  } catch (error: unknown) {\n    const errorMessage = getErrorMessage(error, 'Failed to upload assets');\n    throw new Error(errorMessage);\n  }\n};\n"],"names":["configuration","Configuration","basePath","isProd","window","location","host","includes","getAssetManagementApiUrl","baseOptions","withCredentials","assetsApi","AssetsApi","async","orgId","brandId","Error","listAssets","data","error","errorMessage","getErrorMessage","params","files","length","uploadAsset"],"mappings":"4GAKA,MAsBMA,EAAgB,IAAIC,EAAAA,cAAc,CACtCC,SAhB+B,MAC/B,MAAMC,EAASC,OAAOC,UAAUC,MAAMC,SAAS,uBAE/C,OAAIJ,EAVe,yCACO,0DAsBhBK,GACVC,YAAa,CACXC,iBAAiB,KAIfC,EAAY,IAAIC,EAAAA,UAAUZ,qBAQPa,MAAOC,EAAeC,KAC7C,IAAKD,EACH,MAAM,IAAIE,MAAM,+CAGlB,IAEE,aADuBL,EAAUM,WAAWH,EAAOC,IACnCG,IAClB,CAAE,MAAOC,GACP,MAAMC,EAAeC,EAAAA,gBAAgBF,EAAO,0BAC5C,MAAM,IAAIH,MAAMI,EAClB,uBAoByBP,MAAOS,IAChC,MAAMR,MAAEA,EAAKC,QAAEA,EAAOQ,MAAEA,GAAUD,EAElC,IAAKR,EACH,MAAM,IAAIE,MAAM,gDAGlB,IAAKO,GAA0B,IAAjBA,EAAMC,OAClB,MAAM,IAAIR,MAAM,2CAGlB,IAEE,aADuBL,EAAUc,YAAYX,EAAOS,EAAOR,IAC3CG,IAClB,CAAE,MAAOC,GACP,MAAMC,EAAeC,EAAAA,gBAAgBF,EAAO,2BAC5C,MAAM,IAAIH,MAAMI,EAClB"}
+{"version":3,"file":"asset.service.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/services/asset.service.ts"],"sourcesContent":["import { getErrorMessage } from '@fd/utilities/apiUtils';\nimport { AssetsApi, Configuration } from '@flipdish/asset-management';\n\nimport { sanitizeFile } from '../../../../utilities/fileUtils';\nimport type { ListAssetsResponse, UploadAssetResponse } from '../types/assets.type';\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 * Configuration for the asset management API client\n * - basePath: API base URL based on environment\n * - baseOptions.withCredentials: Send cookies/credentials with requests\n */\nconst configuration = new Configuration({\n  basePath: getAssetManagementApiUrl(),\n  baseOptions: {\n    withCredentials: true,\n  },\n});\n\nconst assetsApi = new AssetsApi(configuration);\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<ListAssetsResponse> => {\n  if (!orgId) {\n    console.error('Organization ID is required to fetch assets');\n    throw new Error('Organization ID is required to fetch assets');\n  }\n\n  try {\n    const response = await assetsApi.listAssets(orgId, brandId);\n    return response.data;\n  } catch (error: unknown) {\n    const errorMessage = getErrorMessage(error, 'Failed to fetch assets');\n    throw new Error(errorMessage);\n  }\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 * Sanitizes filenames by replacing spaces with dashes before uploading\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  // Sanitize filenames by replacing spaces with dashes\n  const sanitizedFiles = files.map(sanitizeFile);\n\n  try {\n    const response = await assetsApi.uploadAsset(orgId, sanitizedFiles, brandId);\n    return response.data;\n  } catch (error: unknown) {\n    const errorMessage = getErrorMessage(error, 'Failed to upload assets');\n    throw new Error(errorMessage);\n  }\n};\n"],"names":["configuration","Configuration","basePath","isProd","window","location","host","includes","getAssetManagementApiUrl","baseOptions","withCredentials","assetsApi","AssetsApi","async","orgId","brandId","console","error","Error","listAssets","data","errorMessage","getErrorMessage","params","files","length","sanitizedFiles","map","sanitizeFile","uploadAsset"],"mappings":"gKAMA,MAsBMA,EAAgB,IAAIC,EAAAA,cAAc,CACtCC,SAhB+B,MAC/B,MAAMC,EAASC,OAAOC,UAAUC,MAAMC,SAAS,uBAE/C,OAAIJ,EAVe,yCACO,0DAsBhBK,GACVC,YAAa,CACXC,iBAAiB,KAIfC,EAAY,IAAIC,EAAAA,UAAUZ,qBAQPa,MAAOC,EAAeC,KAC7C,IAAKD,EAEH,MADAE,QAAQC,MAAM,+CACR,IAAIC,MAAM,+CAGlB,IAEE,aADuBP,EAAUQ,WAAWL,EAAOC,IACnCK,IAClB,CAAE,MAAOH,GACP,MAAMI,EAAeC,EAAAA,gBAAgBL,EAAO,0BAC5C,MAAM,IAAIC,MAAMG,EAClB,uBAqByBR,MAAOU,IAChC,MAAMT,MAAEA,EAAKC,QAAEA,EAAOS,MAAEA,GAAUD,EAElC,IAAKT,EACH,MAAM,IAAII,MAAM,gDAGlB,IAAKM,GAA0B,IAAjBA,EAAMC,OAClB,MAAM,IAAIP,MAAM,2CAIlB,MAAMQ,EAAiBF,EAAMG,IAAIC,gBAEjC,IAEE,aADuBjB,EAAUkB,YAAYf,EAAOY,EAAgBX,IACpDK,IAClB,CAAE,MAAOH,GACP,MAAMI,EAAeC,EAAAA,gBAAgBL,EAAO,2BAC5C,MAAM,IAAIC,MAAMG,EAClB"}

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

@@ -20,6 +20,7 @@ interface UploadAssetParams {
 }
 /**
  * Uploads multiple assets to the asset management service API
+ * Sanitizes filenames by replacing spaces with dashes before uploading
  * @param params - Upload parameters containing orgId, brandId, and files
  * @returns Promise resolving to an array of uploaded assets
  */

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

@@ -1,2 +1,2 @@
-import{getErrorMessage as t}from"../../../../utilities/apiUtils.js";import{Configuration as s,AssetsApi as r}from"@flipdish/asset-management";const a=new r(new s({basePath:(()=>{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"})(),baseOptions:{withCredentials:!0}})),o=async(s,r)=>{if(!s)throw new Error("Organization ID is required to fetch assets");try{return(await a.listAssets(s,r)).data}catch(s){const r=t(s,"Failed to fetch assets");throw new Error(r)}},e=async s=>{const{orgId:r,brandId:o,files:e}=s;if(!r)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");try{return(await a.uploadAsset(r,e,o)).data}catch(s){const r=t(s,"Failed to upload assets");throw new Error(r)}};export{o as getAssets,e as uploadAsset};
+import{getErrorMessage as t}from"../../../../utilities/apiUtils.js";import{Configuration as s,AssetsApi as r}from"@flipdish/asset-management";import{sanitizeFile as i}from"../../../../utilities/fileUtils.js";const o=new r(new s({basePath:(()=>{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"})(),baseOptions:{withCredentials:!0}})),e=async(s,r)=>{if(!s)throw console.error("Organization ID is required to fetch assets"),new Error("Organization ID is required to fetch assets");try{return(await o.listAssets(s,r)).data}catch(s){const r=t(s,"Failed to fetch assets");throw new Error(r)}},a=async s=>{const{orgId:r,brandId:e,files:a}=s;if(!r)throw new Error("Organization ID is required to upload assets");if(!a||0===a.length)throw new Error("At least one file is required to upload");const n=a.map(i);try{return(await o.uploadAsset(r,n,e)).data}catch(s){const r=t(s,"Failed to upload assets");throw new Error(r)}};export{e as getAssets,a as uploadAsset};
 //# sourceMappingURL=asset.service.js.map