@flipdish/portal-library 4.2.7 → 4.2.9

package/README.md

@@ -16,6 +16,66 @@ npm install @flipdish/portal-library
 pnpm add @flipdish/portal-library
 ```
 
+## Using the library
+
+To use Flipdish UI components in your project, you must use this library's theme provider.
+
+In some existing projects that already use Material UI theme providers, it may not be feasible to replace the theme provider in a single PR if the codebase is large. In these cases, it may be better to gradually integrate the UI library by nesting the Flipdish UI library theme provider within the esisting theme provider. Wrapping individual route components in the Flipdish UI theme provider will allow for you to migrate your project to Flipdish UI page by page, removing the need of a 'big bang' PR. To support nested theme providers, make the following changes:
+
+1. Rename your existing breakpoint variables in your `theme.ts` file to match the names defined in the UI library. e.g. If the project is using the default MUI breakpoint variable names and values, define them as this:
+
+```typescript
+breakpoints: {
+values: {
+base: 0,
+mobile: 600,
+tablet: 900,
+laptop: 1200,
+desktop: 1536,
+widescreen: 1920,
+},
+},
+```
+
+2. Rename any use of the old breakpoint variable names to the new names e.g XS → base, SM → mobile etc. This will need to be in any `theme.breakpoints.*` logic or in MUI grid props (e.g `<Grid mobile={3}>`).
+
+3. Add missing theme values that are required and defined in the Flipdish UI library. i.e. `radius` and `customShadows` values:
+
+```typescript
+  radius: {
+    'radius-4': '4px',
+    'radius-8': '8px',
+    'radius-12': '12px',
+    'radius-16': '16px',
+    'radius-20': '20px',
+    'radius-24': '24px',
+    'radius-32': '32px',
+    'radius-40': '40px',
+    'radius-48': '48px',
+    'radius-56': '56px',
+    'radius-64': '64px',
+  },
+  customShadows: {
+    base: '0px 1px 3px rgba(0, 0, 0, 0.1)',
+    sunken: 'inset 0px 1px 3px rgba(0, 0, 0, 0.1)',
+    raised: '0px 4px 8px rgba(0, 0, 0, 0.15)',
+    overlay: '0px 8px 24px rgba(0, 0, 0, 0.2)',
+  },
+```
+
+These steps will prevent type errors being introduced when nesting the UI library theme provider.
+
+To use the Flipdish UI library on particular page, go to the route definitiion for the project and import the theme provider
+
+```typescript
+import FlipdishUIThemeProvider from '@flipdish/portal-library/themes/ThemeProvider';
+...
+...
+<FlipdishUIThemeProvider>
+//Route component here
+</FlipdishUIThemeProvider>;
+```
+
 ## Using Icons
 
 To use an icon in your project, import the icon and use it like any other component. You can specify the size using the `size` prop.

package/dist/components/molecules/Tabs/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@mui/material/Tabs");module.exports=e;
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material/Tabs");module.exports=({fdKey:t,...a})=>e.jsx(r,{"data-testid":t,...a});
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/molecules/Tabs/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/Tabs/index.tsx"],"sourcesContent":["import MuiTabs, { type TabsProps as MuiTabsProps } from '@mui/material/Tabs';\n\nexport interface TabsProps extends MuiTabsProps {\n    fdKey: string;\n}\n\nconst Tabs = ({ fdKey, ...props }: TabsProps): JSX.Element => {\n    return <MuiTabs data-testid={fdKey} {...props} />;\n};\n\nexport default Tabs;\n"],"names":["fdKey","props","_jsx","MuiTabs"],"mappings":"+FAMa,EAAGA,WAAUC,KACfC,EAAAA,IAACC,EAAO,CAAA,cAAcH,KAAWC"}

package/dist/components/molecules/Tabs/index.d.ts

@@ -1,2 +1,9 @@
-import Tabs from '@mui/material/Tabs';
-export { default } from '@mui/material/Tabs';
+import { TabsProps as TabsProps$1 } from '@mui/material/Tabs';
+
+interface TabsProps extends TabsProps$1 {
+    fdKey: string;
+}
+declare const Tabs: ({ fdKey, ...props }: TabsProps) => JSX.Element;
+
+export { Tabs as default };
+export type { TabsProps };

package/dist/components/molecules/Tabs/index.js

@@ -1,2 +1,2 @@
-import a from"@mui/material/Tabs";export{default}from"@mui/material/Tabs";
+import{jsx as t}from"react/jsx-runtime";import a from"@mui/material/Tabs";const r=({fdKey:r,...e})=>t(a,{"data-testid":r,...e});export{r as default};
 //# sourceMappingURL=index.js.map

package/dist/components/molecules/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Tabs/index.tsx"],"sourcesContent":["import MuiTabs, { type TabsProps as MuiTabsProps } from '@mui/material/Tabs';\n\nexport interface TabsProps extends MuiTabsProps {\n    fdKey: string;\n}\n\nconst Tabs = ({ fdKey, ...props }: TabsProps): JSX.Element => {\n    return <MuiTabs data-testid={fdKey} {...props} />;\n};\n\nexport default Tabs;\n"],"names":["Tabs","fdKey","props","_jsx","MuiTabs"],"mappings":"0EAMA,MAAMA,EAAO,EAAGC,WAAUC,KACfC,EAACC,EAAO,CAAA,cAAcH,KAAWC"}

package/dist/components/organisms/ImageUploadWidget/components/ImageDropZone.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material/Box/Box"),t=require("@mui/material/Stack/Stack"),r=require("@mui/material/styles/styled"),o=require("@mui/material/Typography/Typography"),l=require("react-images-uploading");const n=r(i)({flex:"1",display:"flex",flexDirection:"column",gap:"32px",height:"100%",boxSizing:"border-box",alignItems:"center",padding:"40px 24px",borderRadius:"4px",border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FAFAFA"}),a=r(i)({display:"flex",flexDirection:"column",width:"48px",height:"48px",padding:"0px",justifyContent:"center",alignItems:"center",borderRadius:"32px",backgroundColor:"rgba(0, 0, 0, 0.04)"}),c=r(o)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"16px",fontStyle:"normal",fontWeight:"600",lineHeight:"24px",letterSpacing:"0px",textDecoration:"underline",textDecorationStyle:"solid",textDecorationSkipInk:"auto",textDecorationThickness:"auto",textUnderlineOffset:"25%",textUnderlinePosition:"from-font",cursor:"pointer"}),d=r(o)({fontFamily:"Roboto",fontSize:"14px",fontStyle:"normal",fontWeight:400,lineHeight:"20px",letterSpacing:"0px"}),s=r("img")({maxWidth:"100%",maxHeight:"100%",borderRadius:"4px",objectFit:"cover"}),p=["jpg","jpeg","png","gif"];module.exports=({selectedImage:i,onImageSelect:r,uploadingError:o})=>e.jsx(l,{acceptType:p,onChange:e=>{const i=e[0];i&&r(i)},value:i?[i]:[],children:({onImageUpload:r,dragProps:l})=>{const p=`Error occurred while uploading image: ${o?.message?o.message:""}`;return i?.dataURL?e.jsx(s,{src:i.dataURL}):e.jsxs(n,{...l,children:[e.jsx(a,{children:e.jsxs("svg",{fill:"none",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("title",{children:"Upload icon"}),e.jsx("path",{clipRule:"evenodd",d:"M17.8453 2.18282C16.4851 1.99996 14.7504 1.99998 12.5745 2H12.4255C10.2496 1.99998 8.51485 1.99996 7.15471 2.18282C5.75034 2.37164 4.59652 2.77175 3.68413 3.68414C2.77174 4.59653 2.37164 5.75034 2.18282 7.15471C1.99996 8.51485 1.99998 10.2496 2 12.4255V12.5745C1.99998 14.7504 1.99996 16.4851 2.18282 17.8453C2.37164 19.2497 2.77177 20.4035 3.68415 21.3159C4.59654 22.2283 5.75034 22.6284 7.15472 22.8172C8.51486 23 10.2496 23 12.4256 23H12.5744C14.7504 23 16.4851 23 17.8453 22.8172C19.2496 22.6284 20.4035 22.2282 21.3159 21.3159C22.2283 20.4035 22.6284 19.2496 22.8172 17.8453C23 16.4851 23 14.7504 23 12.5744V12.4256C23 10.2496 23 8.51486 22.8172 7.15472C22.6284 5.75034 22.2283 4.59651 21.3159 3.68412C20.4035 2.77174 19.2497 2.37164 17.8453 2.18282ZM5.09835 5.09835C5.57721 4.61949 6.23861 4.32398 7.42121 4.16499C8.63258 4.00212 10.2326 4 12.5 4C14.7674 4 16.3674 4.00212 17.5788 4.16499C18.7614 4.32399 19.4228 4.6195 19.9017 5.09836C20.3805 5.57722 20.676 6.23862 20.835 7.42121C20.9943 8.60603 20.9998 10.1626 21 12.3519C19.6026 11.7105 18.2505 11.4471 16.9403 11.5088C15.1642 11.5923 13.5635 12.2683 12.1227 13.2344C9.67205 14.8776 7.51569 17.4909 5.59833 19.8145L5.34633 20.1197C5.25795 20.0517 5.17577 19.9791 5.09836 19.9017C4.6195 19.4228 4.32399 18.7614 4.16499 17.5788C4.00212 16.3674 4 14.7674 4 12.5C4 10.2326 4.00212 8.63258 4.16499 7.42121C4.32398 6.23861 4.6195 5.5772 5.09835 5.09835ZM20.993 14.5995C19.5215 13.7462 18.2137 13.4511 17.0342 13.5065C15.7231 13.5682 14.4707 14.068 13.2366 14.8955C11.1229 16.3128 9.2346 18.5584 7.3582 20.8263L7.42121 20.835C8.63258 20.9979 10.2326 21 12.5 21C14.7674 21 16.3674 20.9979 17.5788 20.835C18.7614 20.676 19.4228 20.3805 19.9017 19.9017C20.3805 19.4228 20.676 18.7614 20.835 17.5788C20.9423 16.7808 20.9798 15.8143 20.993 14.5995Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"}),e.jsx("path",{clipRule:"evenodd",d:"M10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C7.72212 5.5 7.45482 5.54534 7.20511 5.62902C6.21409 5.96113 5.5 6.89717 5.5 8C5.5 8.84194 5.91619 9.58667 6.55407 10.0397C6.96226 10.3296 7.46123 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8ZM8 7.5C7.72386 7.5 7.5 7.72386 7.5 8C7.5 8.27614 7.72386 8.5 8 8.5C8.27614 8.5 8.5 8.27614 8.5 8C8.5 7.72386 8.27614 7.5 8 7.5Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"})]})}),e.jsxs(t,{alignItems:"center",direction:"column",gap:"8px",children:[e.jsx(c,{onClick:r,children:"Select an image"}),e.jsx(d,{color:"rgba(0, 0, 0, 0.90)",children:"Or drop it here"})]}),e.jsx(d,{color:"rgba(0, 0, 0, 0.60)",children:"Minimum dimensions: 1280 × 720 - up to 10 MB"}),e.jsx(d,{color:"rgba(184, 0, 34, 0.80)",children:o?p:""})]})}});
+"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material/Box/Box"),t=require("@mui/material/Stack/Stack"),o=require("@mui/material/styles/styled"),n=require("@mui/material/Typography/Typography"),r=require("../../../atoms/TextField/index.cjs.js"),l=require("react-images-uploading");const a=o(i)((({theme:e})=>({flex:"1",display:"flex",flexDirection:"column",height:"100%",boxSizing:"border-box",alignItems:"center",justifyContent:"space-between",padding:"12px",borderRadius:"4px",border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FAFAFA",[e.breakpoints.only("mobile")]:{justifyContent:"center",gap:"32px"}}))),d=o(i)({display:"flex",flexDirection:"column",width:"48px",height:"48px",padding:"0px",justifyContent:"center",alignItems:"center",borderRadius:"32px",backgroundColor:"rgba(0, 0, 0, 0.04)"}),s=o(n)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"16px",fontStyle:"normal",fontWeight:"600",lineHeight:"24px",letterSpacing:"0px",textDecoration:"underline",textDecorationStyle:"solid",textDecorationSkipInk:"auto",textDecorationThickness:"auto",textUnderlineOffset:"25%",textUnderlinePosition:"from-font",cursor:"pointer"}),c=o(n)({fontFamily:"Roboto",fontSize:"14px",fontStyle:"normal",fontWeight:400,lineHeight:"20px",letterSpacing:"0px",textAlign:"center"}),g=o("img")({maxWidth:"100%",maxHeight:"100%",borderRadius:"4px",objectFit:"cover"}),p=o("form")({width:"100%",maxWidth:"400px"}),x=["jpg","jpeg","png","gif","bmp"];module.exports=({selectedImage:i,onImageSelect:o,uploadingError:n,allowImageLinkUpload:C,imageLink:m,onImageLinkChange:h=()=>{},onUploadImageLink:u=()=>{}})=>{const f=e=>{e.preventDefault(),u(m)};return e.jsx(l,{acceptType:x,onChange:e=>{const i=e[0];i&&o(i)},value:i?[i]:[],children:({onImageUpload:o,dragProps:l})=>{const x=`Error occurred while uploading image: ${n?.message?n.message:""}`;return i?.dataURL?e.jsx(g,{src:i.dataURL}):e.jsxs(a,{...l,children:[e.jsx(d,{children:e.jsxs("svg",{fill:"none",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("title",{children:"Upload icon"}),e.jsx("path",{clipRule:"evenodd",d:"M17.8453 2.18282C16.4851 1.99996 14.7504 1.99998 12.5745 2H12.4255C10.2496 1.99998 8.51485 1.99996 7.15471 2.18282C5.75034 2.37164 4.59652 2.77175 3.68413 3.68414C2.77174 4.59653 2.37164 5.75034 2.18282 7.15471C1.99996 8.51485 1.99998 10.2496 2 12.4255V12.5745C1.99998 14.7504 1.99996 16.4851 2.18282 17.8453C2.37164 19.2497 2.77177 20.4035 3.68415 21.3159C4.59654 22.2283 5.75034 22.6284 7.15472 22.8172C8.51486 23 10.2496 23 12.4256 23H12.5744C14.7504 23 16.4851 23 17.8453 22.8172C19.2496 22.6284 20.4035 22.2282 21.3159 21.3159C22.2283 20.4035 22.6284 19.2496 22.8172 17.8453C23 16.4851 23 14.7504 23 12.5744V12.4256C23 10.2496 23 8.51486 22.8172 7.15472C22.6284 5.75034 22.2283 4.59651 21.3159 3.68412C20.4035 2.77174 19.2497 2.37164 17.8453 2.18282ZM5.09835 5.09835C5.57721 4.61949 6.23861 4.32398 7.42121 4.16499C8.63258 4.00212 10.2326 4 12.5 4C14.7674 4 16.3674 4.00212 17.5788 4.16499C18.7614 4.32399 19.4228 4.6195 19.9017 5.09836C20.3805 5.57722 20.676 6.23862 20.835 7.42121C20.9943 8.60603 20.9998 10.1626 21 12.3519C19.6026 11.7105 18.2505 11.4471 16.9403 11.5088C15.1642 11.5923 13.5635 12.2683 12.1227 13.2344C9.67205 14.8776 7.51569 17.4909 5.59833 19.8145L5.34633 20.1197C5.25795 20.0517 5.17577 19.9791 5.09836 19.9017C4.6195 19.4228 4.32399 18.7614 4.16499 17.5788C4.00212 16.3674 4 14.7674 4 12.5C4 10.2326 4.00212 8.63258 4.16499 7.42121C4.32398 6.23861 4.6195 5.5772 5.09835 5.09835ZM20.993 14.5995C19.5215 13.7462 18.2137 13.4511 17.0342 13.5065C15.7231 13.5682 14.4707 14.068 13.2366 14.8955C11.1229 16.3128 9.2346 18.5584 7.3582 20.8263L7.42121 20.835C8.63258 20.9979 10.2326 21 12.5 21C14.7674 21 16.3674 20.9979 17.5788 20.835C18.7614 20.676 19.4228 20.3805 19.9017 19.9017C20.3805 19.4228 20.676 18.7614 20.835 17.5788C20.9423 16.7808 20.9798 15.8143 20.993 14.5995Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"}),e.jsx("path",{clipRule:"evenodd",d:"M10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C7.72212 5.5 7.45482 5.54534 7.20511 5.62902C6.21409 5.96113 5.5 6.89717 5.5 8C5.5 8.84194 5.91619 9.58667 6.55407 10.0397C6.96226 10.3296 7.46123 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8ZM8 7.5C7.72386 7.5 7.5 7.72386 7.5 8C7.5 8.27614 7.72386 8.5 8 8.5C8.27614 8.5 8.5 8.27614 8.5 8C8.5 7.72386 8.27614 7.5 8 7.5Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"})]})}),e.jsxs(t,{alignItems:"center",direction:"column",gap:"8px",width:"100%",children:[e.jsx(s,{onClick:o,children:"Select an image"}),e.jsxs(c,{color:"rgba(0, 0, 0, 0.90)",children:["OR drop it here",C&&" OR paste the image URL below"]}),C&&e.jsx(p,{"data-testid":"image-link-form",onSubmit:f,children:e.jsx(r,{fullWidth:!0,fdKey:"img-link",onChange:e=>h(e.target.value),placeholder:"Enter image URL",value:m})})]}),e.jsx(c,{color:"rgba(0, 0, 0, 0.60)",children:"Minimum dimensions: 1280 × 720 - up to 10 MB"}),e.jsx(c,{color:"rgba(184, 0, 34, 0.80)",sx:e=>({overflowY:"scroll",height:"30px",[e.breakpoints.only("mobile")]:{height:"120px"}}),children:n?x:""})]})}})};
 //# sourceMappingURL=ImageDropZone.cjs.js.map

package/dist/components/organisms/ImageUploadWidget/components/ImageDropZone.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageDropZone.cjs.js","sources":["../../../../../src/components/organisms/ImageUploadWidget/components/ImageDropZone.tsx"],"sourcesContent":["import Box from '@mui/material/Box/Box';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport Typography from '@mui/material/Typography/Typography';\n\nimport ReactImageUploading, { type ImageListType, type ImageType } from 'react-images-uploading';\n\nconst StyledUploadAreaContainer = styled(Box)({\n  flex: '1',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '32px',\n  height: '100%',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  padding: '40px 24px',\n  borderRadius: '4px',\n  border: '1px solid rgba(0, 0, 0, 0.10)',\n  background: '#FAFAFA',\n});\n\nconst StyledIconContainer = styled(Box)({\n  display: 'flex',\n  flexDirection: 'column',\n  width: '48px',\n  height: '48px',\n  padding: '0px',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: '32px',\n  backgroundColor: 'rgba(0, 0, 0, 0.04)',\n});\n\nconst StyledPrimaryText = styled(Typography)({\n  color: 'rgba(0, 0, 0, 0.90)',\n  fontFamily: 'Roboto',\n  fontSize: '16px',\n  fontStyle: 'normal',\n  fontWeight: '600',\n  lineHeight: '24px',\n  letterSpacing: '0px',\n  textDecoration: 'underline',\n  textDecorationStyle: 'solid',\n  textDecorationSkipInk: 'auto',\n  textDecorationThickness: 'auto',\n  textUnderlineOffset: '25%',\n  textUnderlinePosition: 'from-font',\n  cursor: 'pointer',\n});\n\nconst StyledSecondaryText = styled(Typography)({\n  fontFamily: 'Roboto',\n  fontSize: '14px',\n  fontStyle: 'normal',\n  fontWeight: 400,\n  lineHeight: '20px',\n  letterSpacing: '0px',\n});\n\nconst StyledImageComponent = styled('img')({\n  maxWidth: '100%',\n  maxHeight: '100%',\n  borderRadius: '4px',\n  objectFit: 'cover',\n});\n\ninterface ImageDropZoneProps {\n  selectedImage: ImageType | null;\n  onImageSelect: (selectedImage: ImageType) => void;\n  uploadingError: Error | null;\n}\n\nconst allowedFileTypes = ['jpg', 'jpeg', 'png', 'gif'];\n\nconst ImageDropZone: React.FC<ImageDropZoneProps> = ({ selectedImage, onImageSelect, uploadingError }) => {\n  const handleImageSelect = (value: ImageListType): void => {\n    const firstImage = value[0] as ImageType | undefined;\n    if (firstImage) {\n      onImageSelect(firstImage);\n    }\n  };\n\n  return (\n    <ReactImageUploading acceptType={allowedFileTypes} onChange={handleImageSelect} value={selectedImage ? [selectedImage] : []}>\n      {({ onImageUpload, dragProps }) => {\n        const uploadErrorMessage = `Error occurred while uploading image: ${uploadingError?.message ? uploadingError.message : ''}`;\n\n        if (selectedImage?.dataURL) {\n          return <StyledImageComponent src={selectedImage.dataURL} />;\n        }\n\n        return (\n          <StyledUploadAreaContainer {...dragProps}>\n            <StyledIconContainer>\n              <svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n                <title>Upload icon</title>\n                <path\n                  clipRule=\"evenodd\"\n                  d=\"M17.8453 2.18282C16.4851 1.99996 14.7504 1.99998 12.5745 2H12.4255C10.2496 1.99998 8.51485 1.99996 7.15471 2.18282C5.75034 2.37164 4.59652 2.77175 3.68413 3.68414C2.77174 4.59653 2.37164 5.75034 2.18282 7.15471C1.99996 8.51485 1.99998 10.2496 2 12.4255V12.5745C1.99998 14.7504 1.99996 16.4851 2.18282 17.8453C2.37164 19.2497 2.77177 20.4035 3.68415 21.3159C4.59654 22.2283 5.75034 22.6284 7.15472 22.8172C8.51486 23 10.2496 23 12.4256 23H12.5744C14.7504 23 16.4851 23 17.8453 22.8172C19.2496 22.6284 20.4035 22.2282 21.3159 21.3159C22.2283 20.4035 22.6284 19.2496 22.8172 17.8453C23 16.4851 23 14.7504 23 12.5744V12.4256C23 10.2496 23 8.51486 22.8172 7.15472C22.6284 5.75034 22.2283 4.59651 21.3159 3.68412C20.4035 2.77174 19.2497 2.37164 17.8453 2.18282ZM5.09835 5.09835C5.57721 4.61949 6.23861 4.32398 7.42121 4.16499C8.63258 4.00212 10.2326 4 12.5 4C14.7674 4 16.3674 4.00212 17.5788 4.16499C18.7614 4.32399 19.4228 4.6195 19.9017 5.09836C20.3805 5.57722 20.676 6.23862 20.835 7.42121C20.9943 8.60603 20.9998 10.1626 21 12.3519C19.6026 11.7105 18.2505 11.4471 16.9403 11.5088C15.1642 11.5923 13.5635 12.2683 12.1227 13.2344C9.67205 14.8776 7.51569 17.4909 5.59833 19.8145L5.34633 20.1197C5.25795 20.0517 5.17577 19.9791 5.09836 19.9017C4.6195 19.4228 4.32399 18.7614 4.16499 17.5788C4.00212 16.3674 4 14.7674 4 12.5C4 10.2326 4.00212 8.63258 4.16499 7.42121C4.32398 6.23861 4.6195 5.5772 5.09835 5.09835ZM20.993 14.5995C19.5215 13.7462 18.2137 13.4511 17.0342 13.5065C15.7231 13.5682 14.4707 14.068 13.2366 14.8955C11.1229 16.3128 9.2346 18.5584 7.3582 20.8263L7.42121 20.835C8.63258 20.9979 10.2326 21 12.5 21C14.7674 21 16.3674 20.9979 17.5788 20.835C18.7614 20.676 19.4228 20.3805 19.9017 19.9017C20.3805 19.4228 20.676 18.7614 20.835 17.5788C20.9423 16.7808 20.9798 15.8143 20.993 14.5995Z\"\n                  fill=\"black\"\n                  fillOpacity=\"0.45\"\n                  fillRule=\"evenodd\"\n                />\n                <path\n                  clipRule=\"evenodd\"\n                  d=\"M10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C7.72212 5.5 7.45482 5.54534 7.20511 5.62902C6.21409 5.96113 5.5 6.89717 5.5 8C5.5 8.84194 5.91619 9.58667 6.55407 10.0397C6.96226 10.3296 7.46123 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8ZM8 7.5C7.72386 7.5 7.5 7.72386 7.5 8C7.5 8.27614 7.72386 8.5 8 8.5C8.27614 8.5 8.5 8.27614 8.5 8C8.5 7.72386 8.27614 7.5 8 7.5Z\"\n                  fill=\"black\"\n                  fillOpacity=\"0.45\"\n                  fillRule=\"evenodd\"\n                />\n              </svg>\n            </StyledIconContainer>\n            <Stack alignItems=\"center\" direction=\"column\" gap=\"8px\">\n              <StyledPrimaryText onClick={onImageUpload}>Select an image</StyledPrimaryText>\n              <StyledSecondaryText color=\"rgba(0, 0, 0, 0.90)\">Or drop it here</StyledSecondaryText>\n            </Stack>\n            <StyledSecondaryText color=\"rgba(0, 0, 0, 0.60)\">Minimum dimensions: 1280 × 720 - up to 10 MB</StyledSecondaryText>\n            <StyledSecondaryText color=\"rgba(184, 0, 34, 0.80)\">{uploadingError ? uploadErrorMessage : ''}</StyledSecondaryText>\n          </StyledUploadAreaContainer>\n        );\n      }}\n    </ReactImageUploading>\n  );\n};\n\nexport default ImageDropZone;\n"],"names":["StyledUploadAreaContainer","styled","Box","flex","display","flexDirection","gap","height","boxSizing","alignItems","padding","borderRadius","border","background","StyledIconContainer","width","justifyContent","backgroundColor","StyledPrimaryText","Typography","color","fontFamily","fontSize","fontStyle","fontWeight","lineHeight","letterSpacing","textDecoration","textDecorationStyle","textDecorationSkipInk","textDecorationThickness","textUnderlineOffset","textUnderlinePosition","cursor","StyledSecondaryText","StyledImageComponent","maxWidth","maxHeight","objectFit","allowedFileTypes","selectedImage","onImageSelect","uploadingError","_jsx","ReactImageUploading","acceptType","onChange","value","firstImage","children","onImageUpload","dragProps","uploadErrorMessage","message","dataURL","src","_jsxs","fill","viewBox","xmlns","clipRule","d","fillOpacity","fillRule","Stack","direction","onClick"],"mappings":"wPAOA,MAAMA,EAA4BC,EAAOC,EAAPD,CAAY,CAC5CE,KAAM,IACNC,QAAS,OACTC,cAAe,SACfC,IAAK,OACLC,OAAQ,OACRC,UAAW,aACXC,WAAY,SACZC,QAAS,YACTC,aAAc,MACdC,OAAQ,gCACRC,WAAY,YAGRC,EAAsBb,EAAOC,EAAPD,CAAY,CACtCG,QAAS,OACTC,cAAe,SACfU,MAAO,OACPR,OAAQ,OACRG,QAAS,MACTM,eAAgB,SAChBP,WAAY,SACZE,aAAc,OACdM,gBAAiB,wBAGbC,EAAoBjB,EAAOkB,EAAPlB,CAAmB,CAC3CmB,MAAO,sBACPC,WAAY,SACZC,SAAU,OACVC,UAAW,SACXC,WAAY,MACZC,WAAY,OACZC,cAAe,MACfC,eAAgB,YAChBC,oBAAqB,QACrBC,sBAAuB,OACvBC,wBAAyB,OACzBC,oBAAqB,MACrBC,sBAAuB,YACvBC,OAAQ,YAGJC,EAAsBjC,EAAOkB,EAAPlB,CAAmB,CAC7CoB,WAAY,SACZC,SAAU,OACVC,UAAW,SACXC,WAAY,IACZC,WAAY,OACZC,cAAe,QAGXS,EAAuBlC,EAAO,MAAPA,CAAc,CACzCmC,SAAU,OACVC,UAAW,OACX1B,aAAc,MACd2B,UAAW,UASPC,EAAmB,CAAC,MAAO,OAAQ,MAAO,sBAEI,EAAGC,gBAAeC,gBAAeC,oBASjFC,EAAAA,IAACC,EAAmB,CAACC,WAAYN,EAAkBO,SAR1BC,IACzB,MAAMC,EAAaD,EAAM,GACrBC,GACFP,EAAcO,IAKgED,MAAOP,EAAgB,CAACA,GAAiB,GAAES,SACxH,EAAGC,gBAAeC,gBACjB,MAAMC,EAAqB,yCAAyCV,GAAgBW,QAAUX,EAAeW,QAAU,KAEvH,OAAIb,GAAec,QACVX,EAAAA,IAACR,EAAoB,CAACoB,IAAKf,EAAcc,UAIhDE,OAACxD,EAAyB,IAAKmD,EAASF,SAAA,CACtCN,EAAAA,IAAC7B,EAAmB,CAAAmC,SAClBO,EAAAA,KAAA,MAAA,CAAKC,KAAK,OAAOlD,OAAO,KAAKmD,QAAQ,YAAY3C,MAAM,KAAK4C,MAAM,6BAA4BV,SAAA,CAC5FN,EAAAA,sCACAA,EAAAA,IAAA,OAAA,CACEiB,SAAS,UACTC,EAAE,uwDACFJ,KAAK,QACLK,YAAY,OACZC,SAAS,YAEXpB,EAAAA,IAAA,OAAA,CACEiB,SAAS,UACTC,EAAE,wWACFJ,KAAK,QACLK,YAAY,OACZC,SAAS,iBAIfP,EAAAA,KAACQ,EAAK,CAACvD,WAAW,SAASwD,UAAU,SAAS3D,IAAI,MAAK2C,SAAA,CACrDN,EAAAA,IAACzB,EAAiB,CAACgD,QAAShB,EAAaD,SAAA,oBACzCN,EAAAA,IAACT,EAAmB,CAACd,MAAM,sBAAqB6B,SAAA,uBAElDN,MAACT,EAAmB,CAACd,MAAM,sBAAqB6B,SAAA,iDAChDN,EAAAA,IAACT,EAAmB,CAACd,MAAM,yBAAwB6B,SAAEP,EAAiBU,EAAqB"}
+{"version":3,"file":"ImageDropZone.cjs.js","sources":["../../../../../src/components/organisms/ImageUploadWidget/components/ImageDropZone.tsx"],"sourcesContent":["import Box from '@mui/material/Box/Box';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport Typography from '@mui/material/Typography/Typography';\n\nimport TextField from '@fd/components/atoms/TextField';\nimport ReactImageUploading, { type ImageListType, type ImageType } from 'react-images-uploading';\n\nconst StyledUploadAreaContainer = styled(Box)(({ theme }) => ({\n  flex: '1',\n  display: 'flex',\n  flexDirection: 'column',\n  height: '100%',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: '12px',\n  borderRadius: '4px',\n  border: '1px solid rgba(0, 0, 0, 0.10)',\n  background: '#FAFAFA',\n  [theme.breakpoints.only('mobile')]: {\n    justifyContent: 'center',\n    gap: '32px',\n  }\n}));\n\nconst StyledIconContainer = styled(Box)({\n  display: 'flex',\n  flexDirection: 'column',\n  width: '48px',\n  height: '48px',\n  padding: '0px',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: '32px',\n  backgroundColor: 'rgba(0, 0, 0, 0.04)',\n});\n\nconst StyledPrimaryText = styled(Typography)({\n  color: 'rgba(0, 0, 0, 0.90)',\n  fontFamily: 'Roboto',\n  fontSize: '16px',\n  fontStyle: 'normal',\n  fontWeight: '600',\n  lineHeight: '24px',\n  letterSpacing: '0px',\n  textDecoration: 'underline',\n  textDecorationStyle: 'solid',\n  textDecorationSkipInk: 'auto',\n  textDecorationThickness: 'auto',\n  textUnderlineOffset: '25%',\n  textUnderlinePosition: 'from-font',\n  cursor: 'pointer',\n});\n\nconst StyledSecondaryText = styled(Typography)({\n  fontFamily: 'Roboto',\n  fontSize: '14px',\n  fontStyle: 'normal',\n  fontWeight: 400,\n  lineHeight: '20px',\n  letterSpacing: '0px',\n  textAlign: 'center',\n});\n\nconst StyledImageComponent = styled('img')({\n  maxWidth: '100%',\n  maxHeight: '100%',\n  borderRadius: '4px',\n  objectFit: 'cover',\n});\n\nconst StyledForm = styled('form')({\n  width: '100%',\n  maxWidth: '400px',\n})\n\ninterface ImageDropZoneProps {\n  selectedImage: ImageType | null;\n  onImageSelect: (selectedImage: ImageType) => void;\n  allowImageLinkUpload: boolean;\n  imageLink: string;\n  onUploadImageLink?: (link: string) => void;\n  onImageLinkChange?: (link: string) => void;\n  uploadingError: Error | null;\n}\n\nconst allowedFileTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];\n\nconst ImageDropZone: React.FC<ImageDropZoneProps> = ({\n  selectedImage,\n  onImageSelect,\n  uploadingError,\n  allowImageLinkUpload,\n  imageLink,\n  onImageLinkChange = (): void => {},\n  onUploadImageLink = (): void => {},\n}) => {\n  const handleImageSelect = (value: ImageListType): void => {\n    const firstImage = value[0] as ImageType | undefined;\n    if (firstImage) {\n      onImageSelect(firstImage);\n    }\n  };\n\n  const handleImageLinkUpload = (e: React.FormEvent): void => {\n    e.preventDefault();\n    onUploadImageLink(imageLink);\n  }\n\n  return (\n    <ReactImageUploading acceptType={allowedFileTypes} onChange={handleImageSelect} value={selectedImage ? [selectedImage] : []}>\n      {({ onImageUpload, dragProps }) => {\n        const uploadErrorMessage = `Error occurred while uploading image: ${uploadingError?.message ? uploadingError.message : ''}`;\n\n        if (selectedImage?.dataURL) {\n          return <StyledImageComponent src={selectedImage.dataURL} />;\n        }\n\n        return (\n          <StyledUploadAreaContainer {...dragProps}>\n            <StyledIconContainer>\n              <svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n                <title>Upload icon</title>\n                <path\n                  clipRule=\"evenodd\"\n                  d=\"M17.8453 2.18282C16.4851 1.99996 14.7504 1.99998 12.5745 2H12.4255C10.2496 1.99998 8.51485 1.99996 7.15471 2.18282C5.75034 2.37164 4.59652 2.77175 3.68413 3.68414C2.77174 4.59653 2.37164 5.75034 2.18282 7.15471C1.99996 8.51485 1.99998 10.2496 2 12.4255V12.5745C1.99998 14.7504 1.99996 16.4851 2.18282 17.8453C2.37164 19.2497 2.77177 20.4035 3.68415 21.3159C4.59654 22.2283 5.75034 22.6284 7.15472 22.8172C8.51486 23 10.2496 23 12.4256 23H12.5744C14.7504 23 16.4851 23 17.8453 22.8172C19.2496 22.6284 20.4035 22.2282 21.3159 21.3159C22.2283 20.4035 22.6284 19.2496 22.8172 17.8453C23 16.4851 23 14.7504 23 12.5744V12.4256C23 10.2496 23 8.51486 22.8172 7.15472C22.6284 5.75034 22.2283 4.59651 21.3159 3.68412C20.4035 2.77174 19.2497 2.37164 17.8453 2.18282ZM5.09835 5.09835C5.57721 4.61949 6.23861 4.32398 7.42121 4.16499C8.63258 4.00212 10.2326 4 12.5 4C14.7674 4 16.3674 4.00212 17.5788 4.16499C18.7614 4.32399 19.4228 4.6195 19.9017 5.09836C20.3805 5.57722 20.676 6.23862 20.835 7.42121C20.9943 8.60603 20.9998 10.1626 21 12.3519C19.6026 11.7105 18.2505 11.4471 16.9403 11.5088C15.1642 11.5923 13.5635 12.2683 12.1227 13.2344C9.67205 14.8776 7.51569 17.4909 5.59833 19.8145L5.34633 20.1197C5.25795 20.0517 5.17577 19.9791 5.09836 19.9017C4.6195 19.4228 4.32399 18.7614 4.16499 17.5788C4.00212 16.3674 4 14.7674 4 12.5C4 10.2326 4.00212 8.63258 4.16499 7.42121C4.32398 6.23861 4.6195 5.5772 5.09835 5.09835ZM20.993 14.5995C19.5215 13.7462 18.2137 13.4511 17.0342 13.5065C15.7231 13.5682 14.4707 14.068 13.2366 14.8955C11.1229 16.3128 9.2346 18.5584 7.3582 20.8263L7.42121 20.835C8.63258 20.9979 10.2326 21 12.5 21C14.7674 21 16.3674 20.9979 17.5788 20.835C18.7614 20.676 19.4228 20.3805 19.9017 19.9017C20.3805 19.4228 20.676 18.7614 20.835 17.5788C20.9423 16.7808 20.9798 15.8143 20.993 14.5995Z\"\n                  fill=\"black\"\n                  fillOpacity=\"0.45\"\n                  fillRule=\"evenodd\"\n                />\n                <path\n                  clipRule=\"evenodd\"\n                  d=\"M10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C7.72212 5.5 7.45482 5.54534 7.20511 5.62902C6.21409 5.96113 5.5 6.89717 5.5 8C5.5 8.84194 5.91619 9.58667 6.55407 10.0397C6.96226 10.3296 7.46123 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8ZM8 7.5C7.72386 7.5 7.5 7.72386 7.5 8C7.5 8.27614 7.72386 8.5 8 8.5C8.27614 8.5 8.5 8.27614 8.5 8C8.5 7.72386 8.27614 7.5 8 7.5Z\"\n                  fill=\"black\"\n                  fillOpacity=\"0.45\"\n                  fillRule=\"evenodd\"\n                />\n              </svg>\n            </StyledIconContainer>\n            <Stack alignItems=\"center\" direction=\"column\" gap=\"8px\" width=\"100%\">\n              <StyledPrimaryText onClick={onImageUpload}>Select an image</StyledPrimaryText>\n              <StyledSecondaryText color=\"rgba(0, 0, 0, 0.90)\">\n                OR drop it here{allowImageLinkUpload && ' OR paste the image URL below'}\n              </StyledSecondaryText>\n              {allowImageLinkUpload &&\n                <StyledForm data-testid='image-link-form' onSubmit={handleImageLinkUpload}>\n                  <TextField fullWidth fdKey='img-link' onChange={(e) => onImageLinkChange(e.target.value)} placeholder=\"Enter image URL\" value={imageLink} />\n                </StyledForm>\n              }\n            </Stack>\n            <StyledSecondaryText color=\"rgba(0, 0, 0, 0.60)\">Minimum dimensions: 1280 × 720 - up to 10 MB</StyledSecondaryText>\n            <StyledSecondaryText\n              color=\"rgba(184, 0, 34, 0.80)\"\n              sx={(theme) => ({\n                overflowY: 'scroll',\n                height: '30px',\n                [theme.breakpoints.only('mobile')]: {\n                  height: '120px'\n                }\n              })}\n            >\n              {uploadingError ? uploadErrorMessage : ''}\n            </StyledSecondaryText>\n          </StyledUploadAreaContainer>\n        );\n      }}\n    </ReactImageUploading>\n  );\n};\n\nexport default ImageDropZone;\n"],"names":["StyledUploadAreaContainer","styled","Box","theme","flex","display","flexDirection","height","boxSizing","alignItems","justifyContent","padding","borderRadius","border","background","breakpoints","only","gap","StyledIconContainer","width","backgroundColor","StyledPrimaryText","Typography","color","fontFamily","fontSize","fontStyle","fontWeight","lineHeight","letterSpacing","textDecoration","textDecorationStyle","textDecorationSkipInk","textDecorationThickness","textUnderlineOffset","textUnderlinePosition","cursor","StyledSecondaryText","textAlign","StyledImageComponent","maxWidth","maxHeight","objectFit","StyledForm","allowedFileTypes","selectedImage","onImageSelect","uploadingError","allowImageLinkUpload","imageLink","onImageLinkChange","onUploadImageLink","handleImageLinkUpload","e","preventDefault","_jsx","ReactImageUploading","acceptType","onChange","value","firstImage","children","onImageUpload","dragProps","uploadErrorMessage","message","dataURL","src","_jsxs","fill","viewBox","xmlns","clipRule","d","fillOpacity","fillRule","Stack","direction","onClick","onSubmit","TextField","fullWidth","fdKey","target","placeholder","sx","overflowY"],"mappings":"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"}

package/dist/components/organisms/ImageUploadWidget/components/ImageDropZone.d.ts

@@ -3,6 +3,10 @@ import { ImageType } from 'react-images-uploading';
 interface ImageDropZoneProps {
     selectedImage: ImageType | null;
     onImageSelect: (selectedImage: ImageType) => void;
+    allowImageLinkUpload: boolean;
+    imageLink: string;
+    onUploadImageLink?: (link: string) => void;
+    onImageLinkChange?: (link: string) => void;
     uploadingError: Error | null;
 }
 declare const ImageDropZone: React.FC<ImageDropZoneProps>;

package/dist/components/organisms/ImageUploadWidget/components/ImageDropZone.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import o from"@mui/material/Box/Box";import t from"@mui/material/Stack/Stack";import r from"@mui/material/styles/styled";import l from"@mui/material/Typography/Typography";import n from"react-images-uploading";const a=r(o)({flex:"1",display:"flex",flexDirection:"column",gap:"32px",height:"100%",boxSizing:"border-box",alignItems:"center",padding:"40px 24px",borderRadius:"4px",border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FAFAFA"}),c=r(o)({display:"flex",flexDirection:"column",width:"48px",height:"48px",padding:"0px",justifyContent:"center",alignItems:"center",borderRadius:"32px",backgroundColor:"rgba(0, 0, 0, 0.04)"}),d=r(l)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"16px",fontStyle:"normal",fontWeight:"600",lineHeight:"24px",letterSpacing:"0px",textDecoration:"underline",textDecorationStyle:"solid",textDecorationSkipInk:"auto",textDecorationThickness:"auto",textUnderlineOffset:"25%",textUnderlinePosition:"from-font",cursor:"pointer"}),p=r(l)({fontFamily:"Roboto",fontSize:"14px",fontStyle:"normal",fontWeight:400,lineHeight:"20px",letterSpacing:"0px"}),C=r("img")({maxWidth:"100%",maxHeight:"100%",borderRadius:"4px",objectFit:"cover"}),g=["jpg","jpeg","png","gif"],m=({selectedImage:o,onImageSelect:r,uploadingError:l})=>e(n,{acceptType:g,onChange:e=>{const i=e[0];i&&r(i)},value:o?[o]:[],children:({onImageUpload:r,dragProps:n})=>{const g=`Error occurred while uploading image: ${l?.message?l.message:""}`;return o?.dataURL?e(C,{src:o.dataURL}):i(a,{...n,children:[e(c,{children:i("svg",{fill:"none",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:[e("title",{children:"Upload icon"}),e("path",{clipRule:"evenodd",d:"M17.8453 2.18282C16.4851 1.99996 14.7504 1.99998 12.5745 2H12.4255C10.2496 1.99998 8.51485 1.99996 7.15471 2.18282C5.75034 2.37164 4.59652 2.77175 3.68413 3.68414C2.77174 4.59653 2.37164 5.75034 2.18282 7.15471C1.99996 8.51485 1.99998 10.2496 2 12.4255V12.5745C1.99998 14.7504 1.99996 16.4851 2.18282 17.8453C2.37164 19.2497 2.77177 20.4035 3.68415 21.3159C4.59654 22.2283 5.75034 22.6284 7.15472 22.8172C8.51486 23 10.2496 23 12.4256 23H12.5744C14.7504 23 16.4851 23 17.8453 22.8172C19.2496 22.6284 20.4035 22.2282 21.3159 21.3159C22.2283 20.4035 22.6284 19.2496 22.8172 17.8453C23 16.4851 23 14.7504 23 12.5744V12.4256C23 10.2496 23 8.51486 22.8172 7.15472C22.6284 5.75034 22.2283 4.59651 21.3159 3.68412C20.4035 2.77174 19.2497 2.37164 17.8453 2.18282ZM5.09835 5.09835C5.57721 4.61949 6.23861 4.32398 7.42121 4.16499C8.63258 4.00212 10.2326 4 12.5 4C14.7674 4 16.3674 4.00212 17.5788 4.16499C18.7614 4.32399 19.4228 4.6195 19.9017 5.09836C20.3805 5.57722 20.676 6.23862 20.835 7.42121C20.9943 8.60603 20.9998 10.1626 21 12.3519C19.6026 11.7105 18.2505 11.4471 16.9403 11.5088C15.1642 11.5923 13.5635 12.2683 12.1227 13.2344C9.67205 14.8776 7.51569 17.4909 5.59833 19.8145L5.34633 20.1197C5.25795 20.0517 5.17577 19.9791 5.09836 19.9017C4.6195 19.4228 4.32399 18.7614 4.16499 17.5788C4.00212 16.3674 4 14.7674 4 12.5C4 10.2326 4.00212 8.63258 4.16499 7.42121C4.32398 6.23861 4.6195 5.5772 5.09835 5.09835ZM20.993 14.5995C19.5215 13.7462 18.2137 13.4511 17.0342 13.5065C15.7231 13.5682 14.4707 14.068 13.2366 14.8955C11.1229 16.3128 9.2346 18.5584 7.3582 20.8263L7.42121 20.835C8.63258 20.9979 10.2326 21 12.5 21C14.7674 21 16.3674 20.9979 17.5788 20.835C18.7614 20.676 19.4228 20.3805 19.9017 19.9017C20.3805 19.4228 20.676 18.7614 20.835 17.5788C20.9423 16.7808 20.9798 15.8143 20.993 14.5995Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"}),e("path",{clipRule:"evenodd",d:"M10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C7.72212 5.5 7.45482 5.54534 7.20511 5.62902C6.21409 5.96113 5.5 6.89717 5.5 8C5.5 8.84194 5.91619 9.58667 6.55407 10.0397C6.96226 10.3296 7.46123 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8ZM8 7.5C7.72386 7.5 7.5 7.72386 7.5 8C7.5 8.27614 7.72386 8.5 8 8.5C8.27614 8.5 8.5 8.27614 8.5 8C8.5 7.72386 8.27614 7.5 8 7.5Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"})]})}),i(t,{alignItems:"center",direction:"column",gap:"8px",children:[e(d,{onClick:r,children:"Select an image"}),e(p,{color:"rgba(0, 0, 0, 0.90)",children:"Or drop it here"})]}),e(p,{color:"rgba(0, 0, 0, 0.60)",children:"Minimum dimensions: 1280 × 720 - up to 10 MB"}),e(p,{color:"rgba(184, 0, 34, 0.80)",children:l?g:""})]})}});export{m as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"@mui/material/Box/Box";import o from"@mui/material/Stack/Stack";import n from"@mui/material/styles/styled";import r from"@mui/material/Typography/Typography";import l from"../../../atoms/TextField/index.js";import a from"react-images-uploading";const d=n(i)((({theme:e})=>({flex:"1",display:"flex",flexDirection:"column",height:"100%",boxSizing:"border-box",alignItems:"center",justifyContent:"space-between",padding:"12px",borderRadius:"4px",border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FAFAFA",[e.breakpoints.only("mobile")]:{justifyContent:"center",gap:"32px"}}))),p=n(i)({display:"flex",flexDirection:"column",width:"48px",height:"48px",padding:"0px",justifyContent:"center",alignItems:"center",borderRadius:"32px",backgroundColor:"rgba(0, 0, 0, 0.04)"}),c=n(r)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"16px",fontStyle:"normal",fontWeight:"600",lineHeight:"24px",letterSpacing:"0px",textDecoration:"underline",textDecorationStyle:"solid",textDecorationSkipInk:"auto",textDecorationThickness:"auto",textUnderlineOffset:"25%",textUnderlinePosition:"from-font",cursor:"pointer"}),m=n(r)({fontFamily:"Roboto",fontSize:"14px",fontStyle:"normal",fontWeight:400,lineHeight:"20px",letterSpacing:"0px",textAlign:"center"}),g=n("img")({maxWidth:"100%",maxHeight:"100%",borderRadius:"4px",objectFit:"cover"}),C=n("form")({width:"100%",maxWidth:"400px"}),s=["jpg","jpeg","png","gif","bmp"],h=({selectedImage:i,onImageSelect:n,uploadingError:r,allowImageLinkUpload:h,imageLink:x,onImageLinkChange:f=()=>{},onUploadImageLink:u=()=>{}})=>{const b=e=>{e.preventDefault(),u(x)};return e(a,{acceptType:s,onChange:e=>{const t=e[0];t&&n(t)},value:i?[i]:[],children:({onImageUpload:n,dragProps:a})=>{const s=`Error occurred while uploading image: ${r?.message?r.message:""}`;return i?.dataURL?e(g,{src:i.dataURL}):t(d,{...a,children:[e(p,{children:t("svg",{fill:"none",height:"24",viewBox:"0 0 24 24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:[e("title",{children:"Upload icon"}),e("path",{clipRule:"evenodd",d:"M17.8453 2.18282C16.4851 1.99996 14.7504 1.99998 12.5745 2H12.4255C10.2496 1.99998 8.51485 1.99996 7.15471 2.18282C5.75034 2.37164 4.59652 2.77175 3.68413 3.68414C2.77174 4.59653 2.37164 5.75034 2.18282 7.15471C1.99996 8.51485 1.99998 10.2496 2 12.4255V12.5745C1.99998 14.7504 1.99996 16.4851 2.18282 17.8453C2.37164 19.2497 2.77177 20.4035 3.68415 21.3159C4.59654 22.2283 5.75034 22.6284 7.15472 22.8172C8.51486 23 10.2496 23 12.4256 23H12.5744C14.7504 23 16.4851 23 17.8453 22.8172C19.2496 22.6284 20.4035 22.2282 21.3159 21.3159C22.2283 20.4035 22.6284 19.2496 22.8172 17.8453C23 16.4851 23 14.7504 23 12.5744V12.4256C23 10.2496 23 8.51486 22.8172 7.15472C22.6284 5.75034 22.2283 4.59651 21.3159 3.68412C20.4035 2.77174 19.2497 2.37164 17.8453 2.18282ZM5.09835 5.09835C5.57721 4.61949 6.23861 4.32398 7.42121 4.16499C8.63258 4.00212 10.2326 4 12.5 4C14.7674 4 16.3674 4.00212 17.5788 4.16499C18.7614 4.32399 19.4228 4.6195 19.9017 5.09836C20.3805 5.57722 20.676 6.23862 20.835 7.42121C20.9943 8.60603 20.9998 10.1626 21 12.3519C19.6026 11.7105 18.2505 11.4471 16.9403 11.5088C15.1642 11.5923 13.5635 12.2683 12.1227 13.2344C9.67205 14.8776 7.51569 17.4909 5.59833 19.8145L5.34633 20.1197C5.25795 20.0517 5.17577 19.9791 5.09836 19.9017C4.6195 19.4228 4.32399 18.7614 4.16499 17.5788C4.00212 16.3674 4 14.7674 4 12.5C4 10.2326 4.00212 8.63258 4.16499 7.42121C4.32398 6.23861 4.6195 5.5772 5.09835 5.09835ZM20.993 14.5995C19.5215 13.7462 18.2137 13.4511 17.0342 13.5065C15.7231 13.5682 14.4707 14.068 13.2366 14.8955C11.1229 16.3128 9.2346 18.5584 7.3582 20.8263L7.42121 20.835C8.63258 20.9979 10.2326 21 12.5 21C14.7674 21 16.3674 20.9979 17.5788 20.835C18.7614 20.676 19.4228 20.3805 19.9017 19.9017C20.3805 19.4228 20.676 18.7614 20.835 17.5788C20.9423 16.7808 20.9798 15.8143 20.993 14.5995Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"}),e("path",{clipRule:"evenodd",d:"M10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C7.72212 5.5 7.45482 5.54534 7.20511 5.62902C6.21409 5.96113 5.5 6.89717 5.5 8C5.5 8.84194 5.91619 9.58667 6.55407 10.0397C6.96226 10.3296 7.46123 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8ZM8 7.5C7.72386 7.5 7.5 7.72386 7.5 8C7.5 8.27614 7.72386 8.5 8 8.5C8.27614 8.5 8.5 8.27614 8.5 8C8.5 7.72386 8.27614 7.5 8 7.5Z",fill:"black",fillOpacity:"0.45",fillRule:"evenodd"})]})}),t(o,{alignItems:"center",direction:"column",gap:"8px",width:"100%",children:[e(c,{onClick:n,children:"Select an image"}),t(m,{color:"rgba(0, 0, 0, 0.90)",children:["OR drop it here",h&&" OR paste the image URL below"]}),h&&e(C,{"data-testid":"image-link-form",onSubmit:b,children:e(l,{fullWidth:!0,fdKey:"img-link",onChange:e=>f(e.target.value),placeholder:"Enter image URL",value:x})})]}),e(m,{color:"rgba(0, 0, 0, 0.60)",children:"Minimum dimensions: 1280 × 720 - up to 10 MB"}),e(m,{color:"rgba(184, 0, 34, 0.80)",sx:e=>({overflowY:"scroll",height:"30px",[e.breakpoints.only("mobile")]:{height:"120px"}}),children:r?s:""})]})}})};export{h as default};
 //# sourceMappingURL=ImageDropZone.js.map

package/dist/components/organisms/ImageUploadWidget/components/ImageDropZone.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageDropZone.js","sources":["../../../../../src/components/organisms/ImageUploadWidget/components/ImageDropZone.tsx"],"sourcesContent":["import Box from '@mui/material/Box/Box';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport Typography from '@mui/material/Typography/Typography';\n\nimport ReactImageUploading, { type ImageListType, type ImageType } from 'react-images-uploading';\n\nconst StyledUploadAreaContainer = styled(Box)({\n  flex: '1',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '32px',\n  height: '100%',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  padding: '40px 24px',\n  borderRadius: '4px',\n  border: '1px solid rgba(0, 0, 0, 0.10)',\n  background: '#FAFAFA',\n});\n\nconst StyledIconContainer = styled(Box)({\n  display: 'flex',\n  flexDirection: 'column',\n  width: '48px',\n  height: '48px',\n  padding: '0px',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: '32px',\n  backgroundColor: 'rgba(0, 0, 0, 0.04)',\n});\n\nconst StyledPrimaryText = styled(Typography)({\n  color: 'rgba(0, 0, 0, 0.90)',\n  fontFamily: 'Roboto',\n  fontSize: '16px',\n  fontStyle: 'normal',\n  fontWeight: '600',\n  lineHeight: '24px',\n  letterSpacing: '0px',\n  textDecoration: 'underline',\n  textDecorationStyle: 'solid',\n  textDecorationSkipInk: 'auto',\n  textDecorationThickness: 'auto',\n  textUnderlineOffset: '25%',\n  textUnderlinePosition: 'from-font',\n  cursor: 'pointer',\n});\n\nconst StyledSecondaryText = styled(Typography)({\n  fontFamily: 'Roboto',\n  fontSize: '14px',\n  fontStyle: 'normal',\n  fontWeight: 400,\n  lineHeight: '20px',\n  letterSpacing: '0px',\n});\n\nconst StyledImageComponent = styled('img')({\n  maxWidth: '100%',\n  maxHeight: '100%',\n  borderRadius: '4px',\n  objectFit: 'cover',\n});\n\ninterface ImageDropZoneProps {\n  selectedImage: ImageType | null;\n  onImageSelect: (selectedImage: ImageType) => void;\n  uploadingError: Error | null;\n}\n\nconst allowedFileTypes = ['jpg', 'jpeg', 'png', 'gif'];\n\nconst ImageDropZone: React.FC<ImageDropZoneProps> = ({ selectedImage, onImageSelect, uploadingError }) => {\n  const handleImageSelect = (value: ImageListType): void => {\n    const firstImage = value[0] as ImageType | undefined;\n    if (firstImage) {\n      onImageSelect(firstImage);\n    }\n  };\n\n  return (\n    <ReactImageUploading acceptType={allowedFileTypes} onChange={handleImageSelect} value={selectedImage ? [selectedImage] : []}>\n      {({ onImageUpload, dragProps }) => {\n        const uploadErrorMessage = `Error occurred while uploading image: ${uploadingError?.message ? uploadingError.message : ''}`;\n\n        if (selectedImage?.dataURL) {\n          return <StyledImageComponent src={selectedImage.dataURL} />;\n        }\n\n        return (\n          <StyledUploadAreaContainer {...dragProps}>\n            <StyledIconContainer>\n              <svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n                <title>Upload icon</title>\n                <path\n                  clipRule=\"evenodd\"\n                  d=\"M17.8453 2.18282C16.4851 1.99996 14.7504 1.99998 12.5745 2H12.4255C10.2496 1.99998 8.51485 1.99996 7.15471 2.18282C5.75034 2.37164 4.59652 2.77175 3.68413 3.68414C2.77174 4.59653 2.37164 5.75034 2.18282 7.15471C1.99996 8.51485 1.99998 10.2496 2 12.4255V12.5745C1.99998 14.7504 1.99996 16.4851 2.18282 17.8453C2.37164 19.2497 2.77177 20.4035 3.68415 21.3159C4.59654 22.2283 5.75034 22.6284 7.15472 22.8172C8.51486 23 10.2496 23 12.4256 23H12.5744C14.7504 23 16.4851 23 17.8453 22.8172C19.2496 22.6284 20.4035 22.2282 21.3159 21.3159C22.2283 20.4035 22.6284 19.2496 22.8172 17.8453C23 16.4851 23 14.7504 23 12.5744V12.4256C23 10.2496 23 8.51486 22.8172 7.15472C22.6284 5.75034 22.2283 4.59651 21.3159 3.68412C20.4035 2.77174 19.2497 2.37164 17.8453 2.18282ZM5.09835 5.09835C5.57721 4.61949 6.23861 4.32398 7.42121 4.16499C8.63258 4.00212 10.2326 4 12.5 4C14.7674 4 16.3674 4.00212 17.5788 4.16499C18.7614 4.32399 19.4228 4.6195 19.9017 5.09836C20.3805 5.57722 20.676 6.23862 20.835 7.42121C20.9943 8.60603 20.9998 10.1626 21 12.3519C19.6026 11.7105 18.2505 11.4471 16.9403 11.5088C15.1642 11.5923 13.5635 12.2683 12.1227 13.2344C9.67205 14.8776 7.51569 17.4909 5.59833 19.8145L5.34633 20.1197C5.25795 20.0517 5.17577 19.9791 5.09836 19.9017C4.6195 19.4228 4.32399 18.7614 4.16499 17.5788C4.00212 16.3674 4 14.7674 4 12.5C4 10.2326 4.00212 8.63258 4.16499 7.42121C4.32398 6.23861 4.6195 5.5772 5.09835 5.09835ZM20.993 14.5995C19.5215 13.7462 18.2137 13.4511 17.0342 13.5065C15.7231 13.5682 14.4707 14.068 13.2366 14.8955C11.1229 16.3128 9.2346 18.5584 7.3582 20.8263L7.42121 20.835C8.63258 20.9979 10.2326 21 12.5 21C14.7674 21 16.3674 20.9979 17.5788 20.835C18.7614 20.676 19.4228 20.3805 19.9017 19.9017C20.3805 19.4228 20.676 18.7614 20.835 17.5788C20.9423 16.7808 20.9798 15.8143 20.993 14.5995Z\"\n                  fill=\"black\"\n                  fillOpacity=\"0.45\"\n                  fillRule=\"evenodd\"\n                />\n                <path\n                  clipRule=\"evenodd\"\n                  d=\"M10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C7.72212 5.5 7.45482 5.54534 7.20511 5.62902C6.21409 5.96113 5.5 6.89717 5.5 8C5.5 8.84194 5.91619 9.58667 6.55407 10.0397C6.96226 10.3296 7.46123 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8ZM8 7.5C7.72386 7.5 7.5 7.72386 7.5 8C7.5 8.27614 7.72386 8.5 8 8.5C8.27614 8.5 8.5 8.27614 8.5 8C8.5 7.72386 8.27614 7.5 8 7.5Z\"\n                  fill=\"black\"\n                  fillOpacity=\"0.45\"\n                  fillRule=\"evenodd\"\n                />\n              </svg>\n            </StyledIconContainer>\n            <Stack alignItems=\"center\" direction=\"column\" gap=\"8px\">\n              <StyledPrimaryText onClick={onImageUpload}>Select an image</StyledPrimaryText>\n              <StyledSecondaryText color=\"rgba(0, 0, 0, 0.90)\">Or drop it here</StyledSecondaryText>\n            </Stack>\n            <StyledSecondaryText color=\"rgba(0, 0, 0, 0.60)\">Minimum dimensions: 1280 × 720 - up to 10 MB</StyledSecondaryText>\n            <StyledSecondaryText color=\"rgba(184, 0, 34, 0.80)\">{uploadingError ? uploadErrorMessage : ''}</StyledSecondaryText>\n          </StyledUploadAreaContainer>\n        );\n      }}\n    </ReactImageUploading>\n  );\n};\n\nexport default ImageDropZone;\n"],"names":["StyledUploadAreaContainer","styled","Box","flex","display","flexDirection","gap","height","boxSizing","alignItems","padding","borderRadius","border","background","StyledIconContainer","width","justifyContent","backgroundColor","StyledPrimaryText","Typography","color","fontFamily","fontSize","fontStyle","fontWeight","lineHeight","letterSpacing","textDecoration","textDecorationStyle","textDecorationSkipInk","textDecorationThickness","textUnderlineOffset","textUnderlinePosition","cursor","StyledSecondaryText","StyledImageComponent","maxWidth","maxHeight","objectFit","allowedFileTypes","ImageDropZone","selectedImage","onImageSelect","uploadingError","_jsx","ReactImageUploading","acceptType","onChange","value","firstImage","children","onImageUpload","dragProps","uploadErrorMessage","message","dataURL","src","_jsxs","fill","viewBox","xmlns","clipRule","d","fillOpacity","fillRule","Stack","direction","onClick"],"mappings":"oQAOA,MAAMA,EAA4BC,EAAOC,EAAPD,CAAY,CAC5CE,KAAM,IACNC,QAAS,OACTC,cAAe,SACfC,IAAK,OACLC,OAAQ,OACRC,UAAW,aACXC,WAAY,SACZC,QAAS,YACTC,aAAc,MACdC,OAAQ,gCACRC,WAAY,YAGRC,EAAsBb,EAAOC,EAAPD,CAAY,CACtCG,QAAS,OACTC,cAAe,SACfU,MAAO,OACPR,OAAQ,OACRG,QAAS,MACTM,eAAgB,SAChBP,WAAY,SACZE,aAAc,OACdM,gBAAiB,wBAGbC,EAAoBjB,EAAOkB,EAAPlB,CAAmB,CAC3CmB,MAAO,sBACPC,WAAY,SACZC,SAAU,OACVC,UAAW,SACXC,WAAY,MACZC,WAAY,OACZC,cAAe,MACfC,eAAgB,YAChBC,oBAAqB,QACrBC,sBAAuB,OACvBC,wBAAyB,OACzBC,oBAAqB,MACrBC,sBAAuB,YACvBC,OAAQ,YAGJC,EAAsBjC,EAAOkB,EAAPlB,CAAmB,CAC7CoB,WAAY,SACZC,SAAU,OACVC,UAAW,SACXC,WAAY,IACZC,WAAY,OACZC,cAAe,QAGXS,EAAuBlC,EAAO,MAAPA,CAAc,CACzCmC,SAAU,OACVC,UAAW,OACX1B,aAAc,MACd2B,UAAW,UASPC,EAAmB,CAAC,MAAO,OAAQ,MAAO,OAE1CC,EAA8C,EAAGC,gBAAeC,gBAAeC,oBASjFC,EAACC,EAAmB,CAACC,WAAYP,EAAkBQ,SAR1BC,IACzB,MAAMC,EAAaD,EAAM,GACrBC,GACFP,EAAcO,IAKgED,MAAOP,EAAgB,CAACA,GAAiB,GAAES,SACxH,EAAGC,gBAAeC,gBACjB,MAAMC,EAAqB,yCAAyCV,GAAgBW,QAAUX,EAAeW,QAAU,KAEvH,OAAIb,GAAec,QACVX,EAACT,EAAoB,CAACqB,IAAKf,EAAcc,UAIhDE,EAACzD,EAAyB,IAAKoD,EAASF,SAAA,CACtCN,EAAC9B,EAAmB,CAAAoC,SAClBO,EAAA,MAAA,CAAKC,KAAK,OAAOnD,OAAO,KAAKoD,QAAQ,YAAY5C,MAAM,KAAK6C,MAAM,6BAA4BV,SAAA,CAC5FN,oCACAA,EAAA,OAAA,CACEiB,SAAS,UACTC,EAAE,uwDACFJ,KAAK,QACLK,YAAY,OACZC,SAAS,YAEXpB,EAAA,OAAA,CACEiB,SAAS,UACTC,EAAE,wWACFJ,KAAK,QACLK,YAAY,OACZC,SAAS,iBAIfP,EAACQ,EAAK,CAACxD,WAAW,SAASyD,UAAU,SAAS5D,IAAI,MAAK4C,SAAA,CACrDN,EAAC1B,EAAiB,CAACiD,QAAShB,EAAaD,SAAA,oBACzCN,EAACV,EAAmB,CAACd,MAAM,sBAAqB8B,SAAA,uBAElDN,EAACV,EAAmB,CAACd,MAAM,sBAAqB8B,SAAA,iDAChDN,EAACV,EAAmB,CAACd,MAAM,yBAAwB8B,SAAEP,EAAiBU,EAAqB"}
+{"version":3,"file":"ImageDropZone.js","sources":["../../../../../src/components/organisms/ImageUploadWidget/components/ImageDropZone.tsx"],"sourcesContent":["import Box from '@mui/material/Box/Box';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport Typography from '@mui/material/Typography/Typography';\n\nimport TextField from '@fd/components/atoms/TextField';\nimport ReactImageUploading, { type ImageListType, type ImageType } from 'react-images-uploading';\n\nconst StyledUploadAreaContainer = styled(Box)(({ theme }) => ({\n  flex: '1',\n  display: 'flex',\n  flexDirection: 'column',\n  height: '100%',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: '12px',\n  borderRadius: '4px',\n  border: '1px solid rgba(0, 0, 0, 0.10)',\n  background: '#FAFAFA',\n  [theme.breakpoints.only('mobile')]: {\n    justifyContent: 'center',\n    gap: '32px',\n  }\n}));\n\nconst StyledIconContainer = styled(Box)({\n  display: 'flex',\n  flexDirection: 'column',\n  width: '48px',\n  height: '48px',\n  padding: '0px',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: '32px',\n  backgroundColor: 'rgba(0, 0, 0, 0.04)',\n});\n\nconst StyledPrimaryText = styled(Typography)({\n  color: 'rgba(0, 0, 0, 0.90)',\n  fontFamily: 'Roboto',\n  fontSize: '16px',\n  fontStyle: 'normal',\n  fontWeight: '600',\n  lineHeight: '24px',\n  letterSpacing: '0px',\n  textDecoration: 'underline',\n  textDecorationStyle: 'solid',\n  textDecorationSkipInk: 'auto',\n  textDecorationThickness: 'auto',\n  textUnderlineOffset: '25%',\n  textUnderlinePosition: 'from-font',\n  cursor: 'pointer',\n});\n\nconst StyledSecondaryText = styled(Typography)({\n  fontFamily: 'Roboto',\n  fontSize: '14px',\n  fontStyle: 'normal',\n  fontWeight: 400,\n  lineHeight: '20px',\n  letterSpacing: '0px',\n  textAlign: 'center',\n});\n\nconst StyledImageComponent = styled('img')({\n  maxWidth: '100%',\n  maxHeight: '100%',\n  borderRadius: '4px',\n  objectFit: 'cover',\n});\n\nconst StyledForm = styled('form')({\n  width: '100%',\n  maxWidth: '400px',\n})\n\ninterface ImageDropZoneProps {\n  selectedImage: ImageType | null;\n  onImageSelect: (selectedImage: ImageType) => void;\n  allowImageLinkUpload: boolean;\n  imageLink: string;\n  onUploadImageLink?: (link: string) => void;\n  onImageLinkChange?: (link: string) => void;\n  uploadingError: Error | null;\n}\n\nconst allowedFileTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];\n\nconst ImageDropZone: React.FC<ImageDropZoneProps> = ({\n  selectedImage,\n  onImageSelect,\n  uploadingError,\n  allowImageLinkUpload,\n  imageLink,\n  onImageLinkChange = (): void => {},\n  onUploadImageLink = (): void => {},\n}) => {\n  const handleImageSelect = (value: ImageListType): void => {\n    const firstImage = value[0] as ImageType | undefined;\n    if (firstImage) {\n      onImageSelect(firstImage);\n    }\n  };\n\n  const handleImageLinkUpload = (e: React.FormEvent): void => {\n    e.preventDefault();\n    onUploadImageLink(imageLink);\n  }\n\n  return (\n    <ReactImageUploading acceptType={allowedFileTypes} onChange={handleImageSelect} value={selectedImage ? [selectedImage] : []}>\n      {({ onImageUpload, dragProps }) => {\n        const uploadErrorMessage = `Error occurred while uploading image: ${uploadingError?.message ? uploadingError.message : ''}`;\n\n        if (selectedImage?.dataURL) {\n          return <StyledImageComponent src={selectedImage.dataURL} />;\n        }\n\n        return (\n          <StyledUploadAreaContainer {...dragProps}>\n            <StyledIconContainer>\n              <svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n                <title>Upload icon</title>\n                <path\n                  clipRule=\"evenodd\"\n                  d=\"M17.8453 2.18282C16.4851 1.99996 14.7504 1.99998 12.5745 2H12.4255C10.2496 1.99998 8.51485 1.99996 7.15471 2.18282C5.75034 2.37164 4.59652 2.77175 3.68413 3.68414C2.77174 4.59653 2.37164 5.75034 2.18282 7.15471C1.99996 8.51485 1.99998 10.2496 2 12.4255V12.5745C1.99998 14.7504 1.99996 16.4851 2.18282 17.8453C2.37164 19.2497 2.77177 20.4035 3.68415 21.3159C4.59654 22.2283 5.75034 22.6284 7.15472 22.8172C8.51486 23 10.2496 23 12.4256 23H12.5744C14.7504 23 16.4851 23 17.8453 22.8172C19.2496 22.6284 20.4035 22.2282 21.3159 21.3159C22.2283 20.4035 22.6284 19.2496 22.8172 17.8453C23 16.4851 23 14.7504 23 12.5744V12.4256C23 10.2496 23 8.51486 22.8172 7.15472C22.6284 5.75034 22.2283 4.59651 21.3159 3.68412C20.4035 2.77174 19.2497 2.37164 17.8453 2.18282ZM5.09835 5.09835C5.57721 4.61949 6.23861 4.32398 7.42121 4.16499C8.63258 4.00212 10.2326 4 12.5 4C14.7674 4 16.3674 4.00212 17.5788 4.16499C18.7614 4.32399 19.4228 4.6195 19.9017 5.09836C20.3805 5.57722 20.676 6.23862 20.835 7.42121C20.9943 8.60603 20.9998 10.1626 21 12.3519C19.6026 11.7105 18.2505 11.4471 16.9403 11.5088C15.1642 11.5923 13.5635 12.2683 12.1227 13.2344C9.67205 14.8776 7.51569 17.4909 5.59833 19.8145L5.34633 20.1197C5.25795 20.0517 5.17577 19.9791 5.09836 19.9017C4.6195 19.4228 4.32399 18.7614 4.16499 17.5788C4.00212 16.3674 4 14.7674 4 12.5C4 10.2326 4.00212 8.63258 4.16499 7.42121C4.32398 6.23861 4.6195 5.5772 5.09835 5.09835ZM20.993 14.5995C19.5215 13.7462 18.2137 13.4511 17.0342 13.5065C15.7231 13.5682 14.4707 14.068 13.2366 14.8955C11.1229 16.3128 9.2346 18.5584 7.3582 20.8263L7.42121 20.835C8.63258 20.9979 10.2326 21 12.5 21C14.7674 21 16.3674 20.9979 17.5788 20.835C18.7614 20.676 19.4228 20.3805 19.9017 19.9017C20.3805 19.4228 20.676 18.7614 20.835 17.5788C20.9423 16.7808 20.9798 15.8143 20.993 14.5995Z\"\n                  fill=\"black\"\n                  fillOpacity=\"0.45\"\n                  fillRule=\"evenodd\"\n                />\n                <path\n                  clipRule=\"evenodd\"\n                  d=\"M10.5 8C10.5 6.61929 9.38071 5.5 8 5.5C7.72212 5.5 7.45482 5.54534 7.20511 5.62902C6.21409 5.96113 5.5 6.89717 5.5 8C5.5 8.84194 5.91619 9.58667 6.55407 10.0397C6.96226 10.3296 7.46123 10.5 8 10.5C9.38071 10.5 10.5 9.38071 10.5 8ZM8 7.5C7.72386 7.5 7.5 7.72386 7.5 8C7.5 8.27614 7.72386 8.5 8 8.5C8.27614 8.5 8.5 8.27614 8.5 8C8.5 7.72386 8.27614 7.5 8 7.5Z\"\n                  fill=\"black\"\n                  fillOpacity=\"0.45\"\n                  fillRule=\"evenodd\"\n                />\n              </svg>\n            </StyledIconContainer>\n            <Stack alignItems=\"center\" direction=\"column\" gap=\"8px\" width=\"100%\">\n              <StyledPrimaryText onClick={onImageUpload}>Select an image</StyledPrimaryText>\n              <StyledSecondaryText color=\"rgba(0, 0, 0, 0.90)\">\n                OR drop it here{allowImageLinkUpload && ' OR paste the image URL below'}\n              </StyledSecondaryText>\n              {allowImageLinkUpload &&\n                <StyledForm data-testid='image-link-form' onSubmit={handleImageLinkUpload}>\n                  <TextField fullWidth fdKey='img-link' onChange={(e) => onImageLinkChange(e.target.value)} placeholder=\"Enter image URL\" value={imageLink} />\n                </StyledForm>\n              }\n            </Stack>\n            <StyledSecondaryText color=\"rgba(0, 0, 0, 0.60)\">Minimum dimensions: 1280 × 720 - up to 10 MB</StyledSecondaryText>\n            <StyledSecondaryText\n              color=\"rgba(184, 0, 34, 0.80)\"\n              sx={(theme) => ({\n                overflowY: 'scroll',\n                height: '30px',\n                [theme.breakpoints.only('mobile')]: {\n                  height: '120px'\n                }\n              })}\n            >\n              {uploadingError ? uploadErrorMessage : ''}\n            </StyledSecondaryText>\n          </StyledUploadAreaContainer>\n        );\n      }}\n    </ReactImageUploading>\n  );\n};\n\nexport default ImageDropZone;\n"],"names":["StyledUploadAreaContainer","styled","Box","theme","flex","display","flexDirection","height","boxSizing","alignItems","justifyContent","padding","borderRadius","border","background","breakpoints","only","gap","StyledIconContainer","width","backgroundColor","StyledPrimaryText","Typography","color","fontFamily","fontSize","fontStyle","fontWeight","lineHeight","letterSpacing","textDecoration","textDecorationStyle","textDecorationSkipInk","textDecorationThickness","textUnderlineOffset","textUnderlinePosition","cursor","StyledSecondaryText","textAlign","StyledImageComponent","maxWidth","maxHeight","objectFit","StyledForm","allowedFileTypes","ImageDropZone","selectedImage","onImageSelect","uploadingError","allowImageLinkUpload","imageLink","onImageLinkChange","onUploadImageLink","handleImageLinkUpload","e","preventDefault","_jsx","ReactImageUploading","acceptType","onChange","value","firstImage","children","onImageUpload","dragProps","uploadErrorMessage","message","dataURL","src","_jsxs","fill","viewBox","xmlns","clipRule","d","fillOpacity","fillRule","Stack","direction","onClick","onSubmit","TextField","fullWidth","fdKey","target","placeholder","sx","overflowY"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),o=require("@mui/material/Backdrop"),i=require("@mui/material/Box"),t=require("@mui/material/Button/Button"),n=require("@mui/material/CircularProgress/CircularProgress"),a=require("@mui/material/Fade"),l=require("@mui/material/Modal"),s=require("@mui/material/Stack/Stack"),d=require("@mui/material/styles/styled"),c=require("@mui/material/Typography");require("react-images-uploading");var p=require("./components/FlipdishFonts.cjs.js"),x=require("./components/ImageDisplay.cjs.js"),u=require("./components/ImageDropZone.cjs.js");const g=d(i)({display:"flex",position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",flexDirection:"column",width:"650px",boxSizing:"border-box",height:"500px",padding:"32px",alignItems:"stretch",justifyContent:"space-between",gap:"24px",borderRadius:"16px",border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FFF",boxShadow:"0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)"}),m=d(c)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"24px",fontWeight:"600",lineHeight:"32px",letterSpacing:"0px"}),b=d(t)({textTransform:"none",padding:"12px 24px",fontFamily:"Roboto",fontSize:"16px",fontStyle:"normal",fontWeight:"600",lineHeight:"24px",letterSpacing:"0px",borderRadius:"8px",boxShadow:"0px 1px 2px 0px rgba(0, 0, 0, 0.10), 0px 2px 6px 0px rgba(0, 0, 0, 0.15)"}),h=d(b)((({disabled:e})=>({color:"#FFF",backgroundColor:e?"rgba(0, 0, 0, 0.10)":"#095FB0"}))),j=d(b)((({disabled:e})=>({color:"#B80022",border:"1px solid rgba(184, 0, 34, 0.80)",backgroundColor:e?"rgba(0, 0, 0, 0.10)":"unset"}))),f=d(b)((({disabled:e})=>({color:"rgba(0, 0, 0, 0.90)",border:"1px solid rgba(0, 0, 0, 0.45)",backgroundColor:e?"rgba(0, 0, 0, 0.10)":"unset"}))),C=d(b)((({disabled:e})=>({color:"#095FB0",border:"1px solid #095FB0",backgroundColor:e?"rgba(0, 0, 0, 0.10)":"unset"})));module.exports=i=>{const{open:t,onClose:d,widgetTitle:c="Upload Image",imageUrl:b="",isCloudinaryAsset:y=!1,cdnCloudName:q,onUpload:F,onRemove:k}=i,[w,S]=r.useState(null),[B,I]=r.useState(!1),[R,v]=r.useState(null);return e.jsxs(e.Fragment,{children:[e.jsx(p,{}),e.jsx(l,{closeAfterTransition:!0,disableEscapeKeyDown:!0,open:t,slotProps:{backdrop:{timeout:500}},slots:{backdrop:o},children:e.jsx(a,{in:t,children:e.jsxs(g,{children:[e.jsx(m,{children:c}),e.jsx(s,{alignItems:"center",direction:"row",flex:1,justifyContent:"center",maxHeight:"300px",children:b?e.jsx(x,{cdnCloudName:q,isCloudinaryAsset:y,src:b}):e.jsx(u,{onImageSelect:e=>S(e),selectedImage:w,uploadingError:R})}),e.jsxs(s,{direction:"row",justifyContent:"space-between",children:[e.jsxs(s,{direction:"row",gap:"16px",justifyContent:"space-between",children:[b?e.jsx(j,{onClick:k,children:"Remove"}):e.jsx(h,{disabled:!w||B,endIcon:B?e.jsx(n,{color:"inherit",size:"sm",sx:{width:"20px"}}):null,onClick:async()=>{I(!0),v(null);try{w?.file&&await F(w.file)}catch(e){e instanceof Error&&v(e)}finally{I(!1),S(null)}},variant:"contained",children:"Upload"}),e.jsx(f,{onClick:()=>{S(null),d()},children:"Close"})]}),e.jsx(s,{direction:"row",children:!!w&&e.jsx(C,{onClick:()=>S(null),children:"Change"})})]})]})})})]})};
+"use strict";var e=require("react/jsx-runtime"),i=require("react"),n=require("@mui/material/Backdrop"),t=require("@mui/material/Box"),r=require("@mui/material/CircularProgress/CircularProgress"),a=require("@mui/material/Fade"),o=require("@mui/material/Modal"),s=require("@mui/material/Stack/Stack"),l=require("@mui/material/styles/styled"),d=require("@mui/material/Typography"),u=require("@mui/material/useMediaQuery"),c=require("../../atoms/Button/index.cjs.js");require("react-images-uploading");var m=require("./components/FlipdishFonts.cjs.js"),p=require("./components/ImageDisplay.cjs.js"),g=require("./components/ImageDropZone.cjs.js");const x=l(t)((({theme:e})=>({display:"flex",position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",flexDirection:"column",width:"95%",padding:"16px",boxSizing:"border-box",height:"95%",alignItems:"stretch",justifyContent:"space-between",gap:e.spacing(3),borderRadius:e.radius["radius-8"],border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FFF",boxShadow:"0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)",[e.breakpoints.up("tablet")]:{width:"650px",height:"500px",padding:"32px"}}))),h=l(d)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"24px",fontWeight:"600",lineHeight:"32px",letterSpacing:"0px"});module.exports=t=>{const{open:l,onClose:d,widgetTitle:j="Upload Image",imageUrl:b="",isCloudinaryAsset:y=!1,cdnCloudName:f,onUpload:C,onUploadImageLink:k,onRemove:w}=t,[v,q]=i.useState(null),[I,z]=i.useState(!1),[B,S]=i.useState(null),[K,F]=i.useState(""),U=u((e=>e.breakpoints.up("tablet"))),L=()=>{q(null),d()},R=async()=>{z(!0),S(null);try{v?.file?await C(v.file):K&&k&&await k(K)}catch(e){e instanceof Error&&S(e)}finally{z(!1),q(null),F("")}};return e.jsxs(e.Fragment,{children:[e.jsx(m,{}),e.jsx(o,{closeAfterTransition:!0,"data-testid":"image-upload-widget",disableEscapeKeyDown:!0,open:l,slotProps:{backdrop:{timeout:500}},slots:{backdrop:n},children:e.jsx(a,{in:l,children:e.jsxs(x,{children:[e.jsx(h,{children:j}),e.jsx(s,{alignItems:"center",direction:"row",flex:1,height:"calc(100% - 300px)",justifyContent:"center",children:b?e.jsx(p,{cdnCloudName:f,isCloudinaryAsset:y,src:b}):e.jsx(g,{allowImageLinkUpload:!!k,imageLink:K,onImageLinkChange:e=>F(e),onImageSelect:e=>q(e),onUploadImageLink:()=>{R()},selectedImage:v,uploadingError:B})}),U?e.jsxs(s,{direction:"row",gap:"2px",justifyContent:"space-between",children:[e.jsx(s,{direction:"row",children:!!v&&e.jsx(c.Button,{fdKey:"img-change-button",onClick:()=>q(null),size:"medium",tone:"brand",variant:"secondary",children:"Change"})}),e.jsxs(s,{direction:"row",gap:"16px",justifyContent:"space-between",children:[e.jsx(c.Button,{fdKey:"img-close-btn",onClick:L,size:"medium",tone:"neutral",variant:"secondary",children:"Close"}),b?e.jsx(c.Button,{fdKey:"img-remove-btn",onClick:w,size:"medium",tone:"destructive",variant:"secondary",children:"Remove"}):e.jsx(c.Button,{disabled:!v&&!K||I,endIcon:I?e.jsx(r,{color:"inherit",size:"sm",sx:{width:"20px"}}):null,fdKey:"img-upload-btn",onClick:R,size:"medium",variant:"primary",children:"Upload"})]})]}):e.jsxs(s,{direction:"column",gap:e=>e.spacing(1),children:[b?e.jsx(c.Button,{fullWidth:!0,fdKey:"img-remove-btn",onClick:w,size:"medium",tone:"destructive",variant:"secondary",children:"Remove"}):e.jsx(c.Button,{fullWidth:!0,disabled:!v&&!K||I,endIcon:I?e.jsx(r,{color:"inherit",size:"sm",sx:{width:"20px"}}):null,fdKey:"img-upload-btn",onClick:R,size:"medium",variant:"primary",children:"Upload"}),!!v&&e.jsx(c.Button,{fullWidth:!0,fdKey:"img-change-button",onClick:()=>q(null),size:"medium",tone:"brand",variant:"secondary",children:"Change"}),e.jsx(c.Button,{fullWidth:!0,fdKey:"img-close-btn",onClick:L,size:"medium",tone:"neutral",variant:"secondary",children:"Close"})]})]})})})]})};
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/organisms/ImageUploadWidget/index.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport Backdrop from '@mui/material/Backdrop';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button/Button';\nimport CircularProgress from '@mui/material/CircularProgress/CircularProgress';\nimport Fade from '@mui/material/Fade';\nimport Modal from '@mui/material/Modal';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport Typography from '@mui/material/Typography';\n\nimport { type ImageType } from 'react-images-uploading';\n\nimport FlipdishFonts from './components/FlipdishFonts';\nimport ImageDisplay from './components/ImageDisplay';\nimport ImageDropZone from './components/ImageDropZone';\n\nconst StyledWidgetContainer = styled(Box)({\n  display: 'flex',\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  flexDirection: 'column',\n  width: '650px',\n  boxSizing: 'border-box',\n  height: '500px',\n  padding: '32px',\n  alignItems: 'stretch',\n  justifyContent: 'space-between',\n  gap: '24px',\n  borderRadius: '16px',\n  border: '1px solid rgba(0, 0, 0, 0.10)',\n  background: '#FFF',\n  boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)',\n});\n\nconst StyledWidgetTitle = styled(Typography)({\n  color: 'rgba(0, 0, 0, 0.90)',\n  fontFamily: 'Roboto',\n  fontSize: '24px',\n  fontWeight: '600',\n  lineHeight: '32px',\n  letterSpacing: '0px',\n});\n\nconst StyledButton = styled(Button)({\n  textTransform: 'none',\n  padding: '12px 24px',\n  fontFamily: 'Roboto',\n  fontSize: '16px',\n  fontStyle: 'normal',\n  fontWeight: '600',\n  lineHeight: '24px',\n  letterSpacing: '0px',\n  borderRadius: '8px',\n  boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.10), 0px 2px 6px 0px rgba(0, 0, 0, 0.15)',\n});\n\nconst StyledUploadButton = styled(StyledButton)(({ disabled }) => ({\n  color: '#FFF',\n  backgroundColor: disabled ? 'rgba(0, 0, 0, 0.10)' : '#095FB0',\n}));\n\nconst StyledRemoveButton = styled(StyledButton)(({ disabled }) => ({\n  color: '#B80022',\n  border: '1px solid rgba(184, 0, 34, 0.80)',\n  backgroundColor: disabled ? 'rgba(0, 0, 0, 0.10)' : 'unset',\n}));\n\nconst StyledCancelButton = styled(StyledButton)(({ disabled }) => ({\n  color: 'rgba(0, 0, 0, 0.90)',\n  border: '1px solid rgba(0, 0, 0, 0.45)',\n  backgroundColor: disabled ? 'rgba(0, 0, 0, 0.10)' : 'unset',\n}));\n\nconst StyledChangeButton = styled(StyledButton)(({ disabled }) => ({\n  color: '#095FB0',\n  border: '1px solid #095FB0',\n  backgroundColor: disabled ? 'rgba(0, 0, 0, 0.10)' : 'unset',\n}));\n\ninterface ImageUploadWidgetProps {\n  open: boolean;\n  widgetTitle?: string;\n  imageUrl?: string;\n  isCloudinaryAsset?: boolean;\n  cdnCloudName?: string;\n  onUpload: (file: File) => Promise<void>;\n  onRemove: () => void;\n  onClose: () => void;\n}\n\nconst ImageUploadWidget: React.FC<ImageUploadWidgetProps> = (props) => {\n  const { open, onClose, widgetTitle = 'Upload Image', imageUrl = '', isCloudinaryAsset = false, cdnCloudName, onUpload, onRemove } = props;\n  const [selectedImage, setSelectedImage] = useState<ImageType | null>(null);\n  const [uploading, setUploading] = useState(false);\n  const [uploadingError, setUploadingError] = useState<Error | null>(null);\n\n  const handleClose = (): void => {\n    setSelectedImage(null);\n    onClose();\n  };\n\n  const handleUpload = async (): Promise<void> => {\n    setUploading(true);\n    setUploadingError(null);\n\n    try {\n      if (selectedImage?.file) {\n        await onUpload(selectedImage.file);\n      }\n    } catch (error) {\n      if (error instanceof Error) {\n        setUploadingError(error);\n      }\n    } finally {\n      setUploading(false);\n      setSelectedImage(null);\n    }\n  };\n\n  return (\n    <>\n      <FlipdishFonts />\n      <Modal\n        closeAfterTransition\n        disableEscapeKeyDown={true}\n        open={open}\n        slotProps={{\n          backdrop: {\n            timeout: 500,\n          },\n        }}\n        slots={{ backdrop: Backdrop }}\n      >\n        <Fade in={open}>\n          <StyledWidgetContainer>\n            <StyledWidgetTitle>{widgetTitle}</StyledWidgetTitle>\n            <Stack alignItems=\"center\" direction=\"row\" flex={1} justifyContent=\"center\" maxHeight=\"300px\">\n              {imageUrl ? (\n                <ImageDisplay cdnCloudName={cdnCloudName} isCloudinaryAsset={isCloudinaryAsset} src={imageUrl} />\n              ) : (\n                <ImageDropZone onImageSelect={(image) => setSelectedImage(image)} selectedImage={selectedImage} uploadingError={uploadingError} />\n              )}\n            </Stack>\n            <Stack direction=\"row\" justifyContent=\"space-between\">\n              <Stack direction=\"row\" gap=\"16px\" justifyContent=\"space-between\">\n                {imageUrl ? (\n                  <StyledRemoveButton onClick={onRemove}>Remove</StyledRemoveButton>\n                ) : (\n                  <StyledUploadButton\n                    disabled={!selectedImage || uploading}\n                    endIcon={uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null}\n                    // eslint-disable-next-line @typescript-eslint/no-misused-promises\n                    onClick={handleUpload}\n                    variant=\"contained\"\n                  >\n                    Upload\n                  </StyledUploadButton>\n                )}\n                <StyledCancelButton onClick={handleClose}>Close</StyledCancelButton>\n              </Stack>\n              <Stack direction=\"row\">\n                {!!selectedImage && <StyledChangeButton onClick={() => setSelectedImage(null)}>Change</StyledChangeButton>}\n              </Stack>\n            </Stack>\n          </StyledWidgetContainer>\n        </Fade>\n      </Modal>\n    </>\n  );\n};\n\nexport default ImageUploadWidget;\n"],"names":["StyledWidgetContainer","styled","Box","display","position","top","left","transform","flexDirection","width","boxSizing","height","padding","alignItems","justifyContent","gap","borderRadius","border","background","boxShadow","StyledWidgetTitle","Typography","color","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","StyledButton","Button","textTransform","fontStyle","StyledUploadButton","disabled","backgroundColor","StyledRemoveButton","StyledCancelButton","StyledChangeButton","props","open","onClose","widgetTitle","imageUrl","isCloudinaryAsset","cdnCloudName","onUpload","onRemove","selectedImage","setSelectedImage","useState","uploading","setUploading","uploadingError","setUploadingError","_jsxs","_jsx","FlipdishFonts","Modal","closeAfterTransition","disableEscapeKeyDown","slotProps","backdrop","timeout","slots","Backdrop","children","Fade","in","Stack","direction","flex","maxHeight","ImageDisplay","src","ImageDropZone","onImageSelect","image","onClick","endIcon","CircularProgress","size","sx","async","file","error","Error","variant"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/organisms/ImageUploadWidget/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport Backdrop from '@mui/material/Backdrop';\nimport Box from '@mui/material/Box';\nimport CircularProgress from '@mui/material/CircularProgress/CircularProgress';\nimport Fade from '@mui/material/Fade';\nimport Modal from '@mui/material/Modal';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport Button from '@fd/components/atoms/Button';\nimport { type ImageType } from 'react-images-uploading';\n\nimport FlipdishFonts from './components/FlipdishFonts';\nimport ImageDisplay from './components/ImageDisplay';\nimport ImageDropZone from './components/ImageDropZone';\n\nconst StyledWidgetContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  flexDirection: 'column',\n  width: '95%',\n  padding: '16px',\n  boxSizing: 'border-box',\n  height: '95%',\n  alignItems: 'stretch',\n  justifyContent: 'space-between',\n  gap: theme.spacing(3),\n  borderRadius: theme.radius['radius-8'],\n  border: '1px solid rgba(0, 0, 0, 0.10)',\n  background: '#FFF',\n  boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)',\n  [theme.breakpoints.up('tablet')]: {\n    width: '650px',\n    height: '500px',\n    padding: '32px',\n  },\n}));\n\nconst StyledWidgetTitle = styled(Typography)({\n  color: 'rgba(0, 0, 0, 0.90)',\n  fontFamily: 'Roboto',\n  fontSize: '24px',\n  fontWeight: '600',\n  lineHeight: '32px',\n  letterSpacing: '0px',\n});\n\nexport interface ImageUploadWidgetProps {\n  open: boolean;\n  widgetTitle?: string;\n  imageUrl?: string;\n  isCloudinaryAsset?: boolean;\n  cdnCloudName?: string;\n  onUpload: (file: File) => Promise<void>;\n  onUploadImageLink?: (imageLink: string) => Promise<void>;\n  onRemove: () => void;\n  onClose: () => void;\n}\n\nconst ImageUploadWidget: React.FC<ImageUploadWidgetProps> = (props) => {\n  const { open, onClose, widgetTitle = 'Upload Image', imageUrl = '', isCloudinaryAsset = false, cdnCloudName, onUpload, onUploadImageLink, onRemove } = props;\n  const [selectedImage, setSelectedImage] = useState<ImageType | null>(null);\n  const [uploading, setUploading] = useState(false);\n  const [uploadingError, setUploadingError] = useState<Error | null>(null);\n  const [imageLink, setImageLink] = useState('');\n\n  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('tablet'));\n\n  const handleClose = (): void => {\n    setSelectedImage(null);\n    onClose();\n  };\n\n  const handleUpload = async (): Promise<void> => {\n    setUploading(true);\n    setUploadingError(null);\n\n    try {\n      if (selectedImage?.file) {\n        await onUpload(selectedImage.file);\n      } else if (imageLink && onUploadImageLink) {\n        await onUploadImageLink(imageLink);\n      }\n    } catch (error) {\n      if (error instanceof Error) {\n        setUploadingError(error);\n      }\n    } finally {\n      setUploading(false);\n      setSelectedImage(null);\n      setImageLink('');\n    }\n  };\n\n  const renderActionButtons = (): React.ReactElement => {\n    if (isDesktop) {\n      return (\n        <Stack direction=\"row\" gap='2px' justifyContent=\"space-between\">\n          <Stack direction=\"row\">\n            {!!selectedImage && <Button fdKey='img-change-button' onClick={() => setSelectedImage(null)} size=\"medium\" tone='brand' variant='secondary'>Change</Button>}\n          </Stack>\n          <Stack direction=\"row\" gap=\"16px\" justifyContent=\"space-between\">\n            <Button fdKey='img-close-btn' onClick={handleClose} size=\"medium\" tone='neutral' variant=\"secondary\">Close</Button>\n            {imageUrl ? (\n              <Button fdKey='img-remove-btn' onClick={onRemove} size=\"medium\" tone=\"destructive\" variant=\"secondary\">Remove</Button>\n            ) : (\n              <Button\n                disabled={(!selectedImage && !imageLink) || uploading}\n                endIcon={uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null}\n                fdKey='img-upload-btn'\n                // eslint-disable-next-line @typescript-eslint/no-misused-promises\n                onClick={handleUpload}\n                size=\"medium\"\n                variant=\"primary\"\n              >\n                Upload\n              </Button>\n            )}\n          </Stack>\n        </Stack>\n      )\n    }\n    return (\n      <Stack direction='column' gap={(theme) => theme.spacing(1)}>\n        {imageUrl ? (\n          <Button fullWidth fdKey='img-remove-btn' onClick={onRemove} size=\"medium\" tone=\"destructive\" variant=\"secondary\">Remove</Button>\n        ) : (\n          <Button\n            fullWidth\n            disabled={(!selectedImage && !imageLink) || uploading}\n            endIcon={uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null}\n            fdKey='img-upload-btn'\n            // eslint-disable-next-line @typescript-eslint/no-misused-promises\n            onClick={handleUpload}\n            size=\"medium\"\n            variant=\"primary\"\n          >\n            Upload\n          </Button>\n        )}\n        {!!selectedImage && <Button fullWidth fdKey='img-change-button' onClick={() => setSelectedImage(null)} size=\"medium\" tone='brand' variant='secondary'>Change</Button>}\n        <Button fullWidth fdKey='img-close-btn' onClick={handleClose} size=\"medium\" tone='neutral' variant=\"secondary\">Close</Button>\n      </Stack>\n    )\n  }\n\n  return (\n    <>\n      <FlipdishFonts />\n      <Modal\n        closeAfterTransition\n        data-testid='image-upload-widget'\n        disableEscapeKeyDown={true}\n        open={open}\n        slotProps={{\n          backdrop: {\n            timeout: 500,\n          },\n        }}\n        slots={{ backdrop: Backdrop }}\n      >\n        <Fade in={open}>\n          <StyledWidgetContainer>\n            <StyledWidgetTitle>{widgetTitle}</StyledWidgetTitle>\n            <Stack alignItems=\"center\" direction=\"row\" flex={1} height={'calc(100% - 300px)'} justifyContent=\"center\">\n              {imageUrl ? (\n                <ImageDisplay cdnCloudName={cdnCloudName} isCloudinaryAsset={isCloudinaryAsset} src={imageUrl} />\n              ) : (\n                <ImageDropZone\n                  allowImageLinkUpload={!!onUploadImageLink}\n                  imageLink={imageLink}\n                  onImageLinkChange={(link) => setImageLink(link)}\n                  onImageSelect={(image) => setSelectedImage(image)}\n                  onUploadImageLink={() => void handleUpload()}\n                  selectedImage={selectedImage}\n                  uploadingError={uploadingError}\n                />\n              )}\n            </Stack>\n            {renderActionButtons()}\n          </StyledWidgetContainer>\n        </Fade>\n      </Modal>\n    </>\n  );\n};\n\nexport default ImageUploadWidget;\n"],"names":["StyledWidgetContainer","styled","Box","theme","display","position","top","left","transform","flexDirection","width","padding","boxSizing","height","alignItems","justifyContent","gap","spacing","borderRadius","radius","border","background","boxShadow","breakpoints","up","StyledWidgetTitle","Typography","color","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","props","open","onClose","widgetTitle","imageUrl","isCloudinaryAsset","cdnCloudName","onUpload","onUploadImageLink","onRemove","selectedImage","setSelectedImage","useState","uploading","setUploading","uploadingError","setUploadingError","imageLink","setImageLink","isDesktop","useMediaQuery","handleClose","handleUpload","async","file","error","Error","_jsxs","_jsx","FlipdishFonts","Modal","closeAfterTransition","disableEscapeKeyDown","slotProps","backdrop","timeout","slots","Backdrop","children","Fade","in","Stack","direction","flex","ImageDisplay","src","ImageDropZone","allowImageLinkUpload","onImageLinkChange","link","onImageSelect","image","Button","fdKey","onClick","size","tone","variant","disabled","endIcon","CircularProgress","sx","fullWidth"],"mappings":"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"}

package/dist/components/organisms/ImageUploadWidget/index.d.ts

@@ -1,3 +1,5 @@
+import react__default from 'react';
+
 interface ImageUploadWidgetProps {
     open: boolean;
     widgetTitle?: string;
@@ -5,9 +7,11 @@ interface ImageUploadWidgetProps {
     isCloudinaryAsset?: boolean;
     cdnCloudName?: string;
     onUpload: (file: File) => Promise<void>;
+    onUploadImageLink?: (imageLink: string) => Promise<void>;
     onRemove: () => void;
     onClose: () => void;
 }
-declare const ImageUploadWidget: React.FC<ImageUploadWidgetProps>;
+declare const ImageUploadWidget: react__default.FC<ImageUploadWidgetProps>;
 
 export { ImageUploadWidget as default };
+export type { ImageUploadWidgetProps };

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

@@ -1,2 +1,2 @@
-import{jsxs as o,Fragment as r,jsx as e}from"react/jsx-runtime";import{useState as i}from"react";import t from"@mui/material/Backdrop";import n from"@mui/material/Box";import a from"@mui/material/Button/Button";import l from"@mui/material/CircularProgress/CircularProgress";import p from"@mui/material/Fade";import d from"@mui/material/Modal";import s from"@mui/material/Stack/Stack";import m from"@mui/material/styles/styled";import c from"@mui/material/Typography";import"react-images-uploading";import x from"./components/FlipdishFonts.js";import g from"./components/ImageDisplay.js";import u from"./components/ImageDropZone.js";const b=m(n)({display:"flex",position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",flexDirection:"column",width:"650px",boxSizing:"border-box",height:"500px",padding:"32px",alignItems:"stretch",justifyContent:"space-between",gap:"24px",borderRadius:"16px",border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FFF",boxShadow:"0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)"}),f=m(c)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"24px",fontWeight:"600",lineHeight:"32px",letterSpacing:"0px"}),h=m(a)({textTransform:"none",padding:"12px 24px",fontFamily:"Roboto",fontSize:"16px",fontStyle:"normal",fontWeight:"600",lineHeight:"24px",letterSpacing:"0px",borderRadius:"8px",boxShadow:"0px 1px 2px 0px rgba(0, 0, 0, 0.10), 0px 2px 6px 0px rgba(0, 0, 0, 0.15)"}),C=m(h)((({disabled:o})=>({color:"#FFF",backgroundColor:o?"rgba(0, 0, 0, 0.10)":"#095FB0"}))),y=m(h)((({disabled:o})=>({color:"#B80022",border:"1px solid rgba(184, 0, 34, 0.80)",backgroundColor:o?"rgba(0, 0, 0, 0.10)":"unset"}))),k=m(h)((({disabled:o})=>({color:"rgba(0, 0, 0, 0.90)",border:"1px solid rgba(0, 0, 0, 0.45)",backgroundColor:o?"rgba(0, 0, 0, 0.10)":"unset"}))),w=m(h)((({disabled:o})=>({color:"#095FB0",border:"1px solid #095FB0",backgroundColor:o?"rgba(0, 0, 0, 0.10)":"unset"}))),F=n=>{const{open:a,onClose:m,widgetTitle:c="Upload Image",imageUrl:h="",isCloudinaryAsset:F=!1,cdnCloudName:S,onUpload:j,onRemove:B}=n,[I,R]=i(null),[z,D]=i(!1),[T,U]=i(null);return o(r,{children:[e(x,{}),e(d,{closeAfterTransition:!0,disableEscapeKeyDown:!0,open:a,slotProps:{backdrop:{timeout:500}},slots:{backdrop:t},children:e(p,{in:a,children:o(b,{children:[e(f,{children:c}),e(s,{alignItems:"center",direction:"row",flex:1,justifyContent:"center",maxHeight:"300px",children:h?e(g,{cdnCloudName:S,isCloudinaryAsset:F,src:h}):e(u,{onImageSelect:o=>R(o),selectedImage:I,uploadingError:T})}),o(s,{direction:"row",justifyContent:"space-between",children:[o(s,{direction:"row",gap:"16px",justifyContent:"space-between",children:[h?e(y,{onClick:B,children:"Remove"}):e(C,{disabled:!I||z,endIcon:z?e(l,{color:"inherit",size:"sm",sx:{width:"20px"}}):null,onClick:async()=>{D(!0),U(null);try{I?.file&&await j(I.file)}catch(o){o instanceof Error&&U(o)}finally{D(!1),R(null)}},variant:"contained",children:"Upload"}),e(k,{onClick:()=>{R(null),m()},children:"Close"})]}),e(s,{direction:"row",children:!!I&&e(w,{onClick:()=>R(null),children:"Change"})})]})]})})})]})};export{F as default};
+import{jsxs as e,Fragment as i,jsx as o}from"react/jsx-runtime";import{useState as n}from"react";import t from"@mui/material/Backdrop";import r from"@mui/material/Box";import a from"@mui/material/CircularProgress/CircularProgress";import l from"@mui/material/Fade";import d from"@mui/material/Modal";import m from"@mui/material/Stack/Stack";import s from"@mui/material/styles/styled";import c from"@mui/material/Typography";import p from"@mui/material/useMediaQuery";import{Button as u}from"../../atoms/Button/index.js";import"react-images-uploading";import g from"./components/FlipdishFonts.js";import h from"./components/ImageDisplay.js";import f from"./components/ImageDropZone.js";const b=s(r)((({theme:e})=>({display:"flex",position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",flexDirection:"column",width:"95%",padding:"16px",boxSizing:"border-box",height:"95%",alignItems:"stretch",justifyContent:"space-between",gap:e.spacing(3),borderRadius:e.radius["radius-8"],border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FFF",boxShadow:"0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)",[e.breakpoints.up("tablet")]:{width:"650px",height:"500px",padding:"32px"}}))),y=s(c)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"24px",fontWeight:"600",lineHeight:"32px",letterSpacing:"0px"}),x=r=>{const{open:s,onClose:c,widgetTitle:x="Upload Image",imageUrl:C="",isCloudinaryAsset:k=!1,cdnCloudName:w,onUpload:v,onUploadImageLink:I,onRemove:z}=r,[j,K]=n(null),[U,F]=n(!1),[S,L]=n(null),[R,W]=n(""),D=p((e=>e.breakpoints.up("tablet"))),A=()=>{K(null),c()},B=async()=>{F(!0),L(null);try{j?.file?await v(j.file):R&&I&&await I(R)}catch(e){e instanceof Error&&L(e)}finally{F(!1),K(null),W("")}};return e(i,{children:[o(g,{}),o(d,{closeAfterTransition:!0,"data-testid":"image-upload-widget",disableEscapeKeyDown:!0,open:s,slotProps:{backdrop:{timeout:500}},slots:{backdrop:t},children:o(l,{in:s,children:e(b,{children:[o(y,{children:x}),o(m,{alignItems:"center",direction:"row",flex:1,height:"calc(100% - 300px)",justifyContent:"center",children:C?o(h,{cdnCloudName:w,isCloudinaryAsset:k,src:C}):o(f,{allowImageLinkUpload:!!I,imageLink:R,onImageLinkChange:e=>W(e),onImageSelect:e=>K(e),onUploadImageLink:()=>{B()},selectedImage:j,uploadingError:S})}),e(m,D?{direction:"row",gap:"2px",justifyContent:"space-between",children:[o(m,{direction:"row",children:!!j&&o(u,{fdKey:"img-change-button",onClick:()=>K(null),size:"medium",tone:"brand",variant:"secondary",children:"Change"})}),e(m,{direction:"row",gap:"16px",justifyContent:"space-between",children:[o(u,{fdKey:"img-close-btn",onClick:A,size:"medium",tone:"neutral",variant:"secondary",children:"Close"}),o(u,C?{fdKey:"img-remove-btn",onClick:z,size:"medium",tone:"destructive",variant:"secondary",children:"Remove"}:{disabled:!j&&!R||U,endIcon:U?o(a,{color:"inherit",size:"sm",sx:{width:"20px"}}):null,fdKey:"img-upload-btn",onClick:B,size:"medium",variant:"primary",children:"Upload"})]})]}:{direction:"column",gap:e=>e.spacing(1),children:[o(u,C?{fullWidth:!0,fdKey:"img-remove-btn",onClick:z,size:"medium",tone:"destructive",variant:"secondary",children:"Remove"}:{fullWidth:!0,disabled:!j&&!R||U,endIcon:U?o(a,{color:"inherit",size:"sm",sx:{width:"20px"}}):null,fdKey:"img-upload-btn",onClick:B,size:"medium",variant:"primary",children:"Upload"}),!!j&&o(u,{fullWidth:!0,fdKey:"img-change-button",onClick:()=>K(null),size:"medium",tone:"brand",variant:"secondary",children:"Change"}),o(u,{fullWidth:!0,fdKey:"img-close-btn",onClick:A,size:"medium",tone:"neutral",variant:"secondary",children:"Close"})]})]})})})]})};export{x as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/ImageUploadWidget/index.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport Backdrop from '@mui/material/Backdrop';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button/Button';\nimport CircularProgress from '@mui/material/CircularProgress/CircularProgress';\nimport Fade from '@mui/material/Fade';\nimport Modal from '@mui/material/Modal';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport Typography from '@mui/material/Typography';\n\nimport { type ImageType } from 'react-images-uploading';\n\nimport FlipdishFonts from './components/FlipdishFonts';\nimport ImageDisplay from './components/ImageDisplay';\nimport ImageDropZone from './components/ImageDropZone';\n\nconst StyledWidgetContainer = styled(Box)({\n  display: 'flex',\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  flexDirection: 'column',\n  width: '650px',\n  boxSizing: 'border-box',\n  height: '500px',\n  padding: '32px',\n  alignItems: 'stretch',\n  justifyContent: 'space-between',\n  gap: '24px',\n  borderRadius: '16px',\n  border: '1px solid rgba(0, 0, 0, 0.10)',\n  background: '#FFF',\n  boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)',\n});\n\nconst StyledWidgetTitle = styled(Typography)({\n  color: 'rgba(0, 0, 0, 0.90)',\n  fontFamily: 'Roboto',\n  fontSize: '24px',\n  fontWeight: '600',\n  lineHeight: '32px',\n  letterSpacing: '0px',\n});\n\nconst StyledButton = styled(Button)({\n  textTransform: 'none',\n  padding: '12px 24px',\n  fontFamily: 'Roboto',\n  fontSize: '16px',\n  fontStyle: 'normal',\n  fontWeight: '600',\n  lineHeight: '24px',\n  letterSpacing: '0px',\n  borderRadius: '8px',\n  boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.10), 0px 2px 6px 0px rgba(0, 0, 0, 0.15)',\n});\n\nconst StyledUploadButton = styled(StyledButton)(({ disabled }) => ({\n  color: '#FFF',\n  backgroundColor: disabled ? 'rgba(0, 0, 0, 0.10)' : '#095FB0',\n}));\n\nconst StyledRemoveButton = styled(StyledButton)(({ disabled }) => ({\n  color: '#B80022',\n  border: '1px solid rgba(184, 0, 34, 0.80)',\n  backgroundColor: disabled ? 'rgba(0, 0, 0, 0.10)' : 'unset',\n}));\n\nconst StyledCancelButton = styled(StyledButton)(({ disabled }) => ({\n  color: 'rgba(0, 0, 0, 0.90)',\n  border: '1px solid rgba(0, 0, 0, 0.45)',\n  backgroundColor: disabled ? 'rgba(0, 0, 0, 0.10)' : 'unset',\n}));\n\nconst StyledChangeButton = styled(StyledButton)(({ disabled }) => ({\n  color: '#095FB0',\n  border: '1px solid #095FB0',\n  backgroundColor: disabled ? 'rgba(0, 0, 0, 0.10)' : 'unset',\n}));\n\ninterface ImageUploadWidgetProps {\n  open: boolean;\n  widgetTitle?: string;\n  imageUrl?: string;\n  isCloudinaryAsset?: boolean;\n  cdnCloudName?: string;\n  onUpload: (file: File) => Promise<void>;\n  onRemove: () => void;\n  onClose: () => void;\n}\n\nconst ImageUploadWidget: React.FC<ImageUploadWidgetProps> = (props) => {\n  const { open, onClose, widgetTitle = 'Upload Image', imageUrl = '', isCloudinaryAsset = false, cdnCloudName, onUpload, onRemove } = props;\n  const [selectedImage, setSelectedImage] = useState<ImageType | null>(null);\n  const [uploading, setUploading] = useState(false);\n  const [uploadingError, setUploadingError] = useState<Error | null>(null);\n\n  const handleClose = (): void => {\n    setSelectedImage(null);\n    onClose();\n  };\n\n  const handleUpload = async (): Promise<void> => {\n    setUploading(true);\n    setUploadingError(null);\n\n    try {\n      if (selectedImage?.file) {\n        await onUpload(selectedImage.file);\n      }\n    } catch (error) {\n      if (error instanceof Error) {\n        setUploadingError(error);\n      }\n    } finally {\n      setUploading(false);\n      setSelectedImage(null);\n    }\n  };\n\n  return (\n    <>\n      <FlipdishFonts />\n      <Modal\n        closeAfterTransition\n        disableEscapeKeyDown={true}\n        open={open}\n        slotProps={{\n          backdrop: {\n            timeout: 500,\n          },\n        }}\n        slots={{ backdrop: Backdrop }}\n      >\n        <Fade in={open}>\n          <StyledWidgetContainer>\n            <StyledWidgetTitle>{widgetTitle}</StyledWidgetTitle>\n            <Stack alignItems=\"center\" direction=\"row\" flex={1} justifyContent=\"center\" maxHeight=\"300px\">\n              {imageUrl ? (\n                <ImageDisplay cdnCloudName={cdnCloudName} isCloudinaryAsset={isCloudinaryAsset} src={imageUrl} />\n              ) : (\n                <ImageDropZone onImageSelect={(image) => setSelectedImage(image)} selectedImage={selectedImage} uploadingError={uploadingError} />\n              )}\n            </Stack>\n            <Stack direction=\"row\" justifyContent=\"space-between\">\n              <Stack direction=\"row\" gap=\"16px\" justifyContent=\"space-between\">\n                {imageUrl ? (\n                  <StyledRemoveButton onClick={onRemove}>Remove</StyledRemoveButton>\n                ) : (\n                  <StyledUploadButton\n                    disabled={!selectedImage || uploading}\n                    endIcon={uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null}\n                    // eslint-disable-next-line @typescript-eslint/no-misused-promises\n                    onClick={handleUpload}\n                    variant=\"contained\"\n                  >\n                    Upload\n                  </StyledUploadButton>\n                )}\n                <StyledCancelButton onClick={handleClose}>Close</StyledCancelButton>\n              </Stack>\n              <Stack direction=\"row\">\n                {!!selectedImage && <StyledChangeButton onClick={() => setSelectedImage(null)}>Change</StyledChangeButton>}\n              </Stack>\n            </Stack>\n          </StyledWidgetContainer>\n        </Fade>\n      </Modal>\n    </>\n  );\n};\n\nexport default ImageUploadWidget;\n"],"names":["StyledWidgetContainer","styled","Box","display","position","top","left","transform","flexDirection","width","boxSizing","height","padding","alignItems","justifyContent","gap","borderRadius","border","background","boxShadow","StyledWidgetTitle","Typography","color","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","StyledButton","Button","textTransform","fontStyle","StyledUploadButton","disabled","backgroundColor","StyledRemoveButton","StyledCancelButton","StyledChangeButton","ImageUploadWidget","props","open","onClose","widgetTitle","imageUrl","isCloudinaryAsset","cdnCloudName","onUpload","onRemove","selectedImage","setSelectedImage","useState","uploading","setUploading","uploadingError","setUploadingError","_jsxs","_jsx","FlipdishFonts","Modal","closeAfterTransition","disableEscapeKeyDown","slotProps","backdrop","timeout","slots","Backdrop","children","Fade","in","Stack","direction","flex","maxHeight","ImageDisplay","src","ImageDropZone","onImageSelect","image","onClick","endIcon","CircularProgress","size","sx","async","file","error","Error","variant"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/ImageUploadWidget/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport Backdrop from '@mui/material/Backdrop';\nimport Box from '@mui/material/Box';\nimport CircularProgress from '@mui/material/CircularProgress/CircularProgress';\nimport Fade from '@mui/material/Fade';\nimport Modal from '@mui/material/Modal';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport Button from '@fd/components/atoms/Button';\nimport { type ImageType } from 'react-images-uploading';\n\nimport FlipdishFonts from './components/FlipdishFonts';\nimport ImageDisplay from './components/ImageDisplay';\nimport ImageDropZone from './components/ImageDropZone';\n\nconst StyledWidgetContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  flexDirection: 'column',\n  width: '95%',\n  padding: '16px',\n  boxSizing: 'border-box',\n  height: '95%',\n  alignItems: 'stretch',\n  justifyContent: 'space-between',\n  gap: theme.spacing(3),\n  borderRadius: theme.radius['radius-8'],\n  border: '1px solid rgba(0, 0, 0, 0.10)',\n  background: '#FFF',\n  boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)',\n  [theme.breakpoints.up('tablet')]: {\n    width: '650px',\n    height: '500px',\n    padding: '32px',\n  },\n}));\n\nconst StyledWidgetTitle = styled(Typography)({\n  color: 'rgba(0, 0, 0, 0.90)',\n  fontFamily: 'Roboto',\n  fontSize: '24px',\n  fontWeight: '600',\n  lineHeight: '32px',\n  letterSpacing: '0px',\n});\n\nexport interface ImageUploadWidgetProps {\n  open: boolean;\n  widgetTitle?: string;\n  imageUrl?: string;\n  isCloudinaryAsset?: boolean;\n  cdnCloudName?: string;\n  onUpload: (file: File) => Promise<void>;\n  onUploadImageLink?: (imageLink: string) => Promise<void>;\n  onRemove: () => void;\n  onClose: () => void;\n}\n\nconst ImageUploadWidget: React.FC<ImageUploadWidgetProps> = (props) => {\n  const { open, onClose, widgetTitle = 'Upload Image', imageUrl = '', isCloudinaryAsset = false, cdnCloudName, onUpload, onUploadImageLink, onRemove } = props;\n  const [selectedImage, setSelectedImage] = useState<ImageType | null>(null);\n  const [uploading, setUploading] = useState(false);\n  const [uploadingError, setUploadingError] = useState<Error | null>(null);\n  const [imageLink, setImageLink] = useState('');\n\n  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('tablet'));\n\n  const handleClose = (): void => {\n    setSelectedImage(null);\n    onClose();\n  };\n\n  const handleUpload = async (): Promise<void> => {\n    setUploading(true);\n    setUploadingError(null);\n\n    try {\n      if (selectedImage?.file) {\n        await onUpload(selectedImage.file);\n      } else if (imageLink && onUploadImageLink) {\n        await onUploadImageLink(imageLink);\n      }\n    } catch (error) {\n      if (error instanceof Error) {\n        setUploadingError(error);\n      }\n    } finally {\n      setUploading(false);\n      setSelectedImage(null);\n      setImageLink('');\n    }\n  };\n\n  const renderActionButtons = (): React.ReactElement => {\n    if (isDesktop) {\n      return (\n        <Stack direction=\"row\" gap='2px' justifyContent=\"space-between\">\n          <Stack direction=\"row\">\n            {!!selectedImage && <Button fdKey='img-change-button' onClick={() => setSelectedImage(null)} size=\"medium\" tone='brand' variant='secondary'>Change</Button>}\n          </Stack>\n          <Stack direction=\"row\" gap=\"16px\" justifyContent=\"space-between\">\n            <Button fdKey='img-close-btn' onClick={handleClose} size=\"medium\" tone='neutral' variant=\"secondary\">Close</Button>\n            {imageUrl ? (\n              <Button fdKey='img-remove-btn' onClick={onRemove} size=\"medium\" tone=\"destructive\" variant=\"secondary\">Remove</Button>\n            ) : (\n              <Button\n                disabled={(!selectedImage && !imageLink) || uploading}\n                endIcon={uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null}\n                fdKey='img-upload-btn'\n                // eslint-disable-next-line @typescript-eslint/no-misused-promises\n                onClick={handleUpload}\n                size=\"medium\"\n                variant=\"primary\"\n              >\n                Upload\n              </Button>\n            )}\n          </Stack>\n        </Stack>\n      )\n    }\n    return (\n      <Stack direction='column' gap={(theme) => theme.spacing(1)}>\n        {imageUrl ? (\n          <Button fullWidth fdKey='img-remove-btn' onClick={onRemove} size=\"medium\" tone=\"destructive\" variant=\"secondary\">Remove</Button>\n        ) : (\n          <Button\n            fullWidth\n            disabled={(!selectedImage && !imageLink) || uploading}\n            endIcon={uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null}\n            fdKey='img-upload-btn'\n            // eslint-disable-next-line @typescript-eslint/no-misused-promises\n            onClick={handleUpload}\n            size=\"medium\"\n            variant=\"primary\"\n          >\n            Upload\n          </Button>\n        )}\n        {!!selectedImage && <Button fullWidth fdKey='img-change-button' onClick={() => setSelectedImage(null)} size=\"medium\" tone='brand' variant='secondary'>Change</Button>}\n        <Button fullWidth fdKey='img-close-btn' onClick={handleClose} size=\"medium\" tone='neutral' variant=\"secondary\">Close</Button>\n      </Stack>\n    )\n  }\n\n  return (\n    <>\n      <FlipdishFonts />\n      <Modal\n        closeAfterTransition\n        data-testid='image-upload-widget'\n        disableEscapeKeyDown={true}\n        open={open}\n        slotProps={{\n          backdrop: {\n            timeout: 500,\n          },\n        }}\n        slots={{ backdrop: Backdrop }}\n      >\n        <Fade in={open}>\n          <StyledWidgetContainer>\n            <StyledWidgetTitle>{widgetTitle}</StyledWidgetTitle>\n            <Stack alignItems=\"center\" direction=\"row\" flex={1} height={'calc(100% - 300px)'} justifyContent=\"center\">\n              {imageUrl ? (\n                <ImageDisplay cdnCloudName={cdnCloudName} isCloudinaryAsset={isCloudinaryAsset} src={imageUrl} />\n              ) : (\n                <ImageDropZone\n                  allowImageLinkUpload={!!onUploadImageLink}\n                  imageLink={imageLink}\n                  onImageLinkChange={(link) => setImageLink(link)}\n                  onImageSelect={(image) => setSelectedImage(image)}\n                  onUploadImageLink={() => void handleUpload()}\n                  selectedImage={selectedImage}\n                  uploadingError={uploadingError}\n                />\n              )}\n            </Stack>\n            {renderActionButtons()}\n          </StyledWidgetContainer>\n        </Fade>\n      </Modal>\n    </>\n  );\n};\n\nexport default ImageUploadWidget;\n"],"names":["StyledWidgetContainer","styled","Box","theme","display","position","top","left","transform","flexDirection","width","padding","boxSizing","height","alignItems","justifyContent","gap","spacing","borderRadius","radius","border","background","boxShadow","breakpoints","up","StyledWidgetTitle","Typography","color","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","ImageUploadWidget","props","open","onClose","widgetTitle","imageUrl","isCloudinaryAsset","cdnCloudName","onUpload","onUploadImageLink","onRemove","selectedImage","setSelectedImage","useState","uploading","setUploading","uploadingError","setUploadingError","imageLink","setImageLink","isDesktop","useMediaQuery","handleClose","handleUpload","async","file","error","Error","_jsxs","_jsx","FlipdishFonts","Modal","closeAfterTransition","disableEscapeKeyDown","slotProps","backdrop","timeout","slots","Backdrop","children","Fade","in","Stack","direction","flex","ImageDisplay","src","ImageDropZone","allowImageLinkUpload","onImageLinkChange","link","onImageSelect","image","Button","fdKey","onClick","size","tone","variant","disabled","endIcon","CircularProgress","sx","fullWidth"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/portal-library",
-  "version": "4.2.7",
+  "version": "4.2.9",
   "files": [
     "dist"
   ],
@@ -97,6 +97,7 @@
     "eslint-import-resolver-typescript": "^4.2.5",
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-mycustom-eslint-rules": "file:eslint/custom-rules",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "4.6.2",