@flipdish/portal-library 8.0.2 → 8.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (139) hide show
  1. package/README.md +7 -1
  2. package/dist/components/FlipdishLogoLoader/index.cjs.js +1 -1
  3. package/dist/components/FlipdishLogoLoader/index.cjs.js.map +1 -1
  4. package/dist/components/FlipdishLogoLoader/index.d.ts +2 -2
  5. package/dist/components/FlipdishLogoLoader/index.js +1 -1
  6. package/dist/components/FlipdishLogoLoader/index.js.map +1 -1
  7. package/dist/components/Form/GenericAutocompleteField/index.cjs.js +1 -1
  8. package/dist/components/Form/GenericAutocompleteField/index.cjs.js.map +1 -1
  9. package/dist/components/Form/GenericAutocompleteField/index.js +1 -1
  10. package/dist/components/Form/GenericAutocompleteField/index.js.map +1 -1
  11. package/dist/components/Form/GenericFormContainer/index.cjs.js +1 -1
  12. package/dist/components/Form/GenericFormContainer/index.cjs.js.map +1 -1
  13. package/dist/components/Form/GenericFormContainer/index.js +1 -1
  14. package/dist/components/Form/GenericFormContainer/index.js.map +1 -1
  15. package/dist/components/Form/GenericTextField/index.cjs.js +1 -1
  16. package/dist/components/Form/GenericTextField/index.cjs.js.map +1 -1
  17. package/dist/components/Form/GenericTextField/index.d.ts +2 -2
  18. package/dist/components/Form/GenericTextField/index.js +1 -1
  19. package/dist/components/Form/GenericTextField/index.js.map +1 -1
  20. package/dist/components/PageLayout/index.cjs.js +1 -1
  21. package/dist/components/PageLayout/index.cjs.js.map +1 -1
  22. package/dist/components/PageLayout/index.js +1 -1
  23. package/dist/components/PageLayout/index.js.map +1 -1
  24. package/dist/components/atoms/BadgeCount/index.cjs.js +1 -1
  25. package/dist/components/atoms/BadgeCount/index.cjs.js.map +1 -1
  26. package/dist/components/atoms/BadgeCount/index.d.ts +2 -2
  27. package/dist/components/atoms/BadgeCount/index.js +1 -1
  28. package/dist/components/atoms/BadgeCount/index.js.map +1 -1
  29. package/dist/components/atoms/BadgeDot/index.cjs.js +1 -1
  30. package/dist/components/atoms/BadgeDot/index.cjs.js.map +1 -1
  31. package/dist/components/atoms/BadgeDot/index.d.ts +2 -2
  32. package/dist/components/atoms/BadgeDot/index.js +1 -1
  33. package/dist/components/atoms/BadgeDot/index.js.map +1 -1
  34. package/dist/components/atoms/BreadCrumbs/index.cjs.js +1 -1
  35. package/dist/components/atoms/BreadCrumbs/index.cjs.js.map +1 -1
  36. package/dist/components/atoms/BreadCrumbs/index.d.ts +5 -5
  37. package/dist/components/atoms/BreadCrumbs/index.js +1 -1
  38. package/dist/components/atoms/BreadCrumbs/index.js.map +1 -1
  39. package/dist/components/atoms/IconButton/index.cjs.js +1 -1
  40. package/dist/components/atoms/IconButton/index.cjs.js.map +1 -1
  41. package/dist/components/atoms/IconButton/index.js +1 -1
  42. package/dist/components/atoms/IconButton/index.js.map +1 -1
  43. package/dist/components/atoms/IconContainer/index.cjs.js +1 -1
  44. package/dist/components/atoms/IconContainer/index.cjs.js.map +1 -1
  45. package/dist/components/atoms/IconContainer/index.d.ts +9 -9
  46. package/dist/components/atoms/IconContainer/index.js +1 -1
  47. package/dist/components/atoms/IconContainer/index.js.map +1 -1
  48. package/dist/components/atoms/LinearProgress/index.cjs.js +1 -1
  49. package/dist/components/atoms/LinearProgress/index.cjs.js.map +1 -1
  50. package/dist/components/atoms/LinearProgress/index.d.ts +2 -0
  51. package/dist/components/atoms/LinearProgress/index.js +1 -1
  52. package/dist/components/atoms/LinearProgress/index.js.map +1 -1
  53. package/dist/components/atoms/Switch/index.cjs.js +1 -1
  54. package/dist/components/atoms/Switch/index.cjs.js.map +1 -1
  55. package/dist/components/atoms/Switch/index.d.ts +13 -2
  56. package/dist/components/atoms/Switch/index.js +1 -1
  57. package/dist/components/atoms/Switch/index.js.map +1 -1
  58. package/dist/components/atoms/Tab/index.cjs.js +1 -1
  59. package/dist/components/atoms/Tab/index.cjs.js.map +1 -1
  60. package/dist/components/atoms/Tab/index.d.ts +6 -5
  61. package/dist/components/atoms/Tab/index.js +1 -1
  62. package/dist/components/atoms/Tab/index.js.map +1 -1
  63. package/dist/components/atoms/Tag/index.cjs.js +1 -1
  64. package/dist/components/atoms/Tag/index.cjs.js.map +1 -1
  65. package/dist/components/atoms/Tag/index.js +1 -1
  66. package/dist/components/atoms/Tag/index.js.map +1 -1
  67. package/dist/components/molecules/Alert/index.cjs.js +1 -1
  68. package/dist/components/molecules/Alert/index.cjs.js.map +1 -1
  69. package/dist/components/molecules/Alert/index.d.ts +3 -3
  70. package/dist/components/molecules/Alert/index.js +1 -1
  71. package/dist/components/molecules/Alert/index.js.map +1 -1
  72. package/dist/components/molecules/AlertSnackbar/index.cjs.js +1 -1
  73. package/dist/components/molecules/AlertSnackbar/index.cjs.js.map +1 -1
  74. package/dist/components/molecules/AlertSnackbar/index.d.ts +4 -4
  75. package/dist/components/molecules/AlertSnackbar/index.js +1 -1
  76. package/dist/components/molecules/AlertSnackbar/index.js.map +1 -1
  77. package/dist/components/molecules/Autocomplete/index.cjs.js +1 -1
  78. package/dist/components/molecules/Autocomplete/index.cjs.js.map +1 -1
  79. package/dist/components/molecules/Autocomplete/index.js +1 -1
  80. package/dist/components/molecules/Autocomplete/index.js.map +1 -1
  81. package/dist/components/molecules/EmptyState/index.cjs.js +1 -1
  82. package/dist/components/molecules/EmptyState/index.cjs.js.map +1 -1
  83. package/dist/components/molecules/EmptyState/index.js +1 -1
  84. package/dist/components/molecules/EmptyState/index.js.map +1 -1
  85. package/dist/components/molecules/FlipdishStaffContainer/index.cjs.js +1 -1
  86. package/dist/components/molecules/FlipdishStaffContainer/index.cjs.js.map +1 -1
  87. package/dist/components/molecules/FlipdishStaffContainer/index.js +1 -1
  88. package/dist/components/molecules/FlipdishStaffContainer/index.js.map +1 -1
  89. package/dist/components/molecules/GenericTable/GenericTableBody/index.cjs.js +1 -1
  90. package/dist/components/molecules/GenericTable/GenericTableBody/index.cjs.js.map +1 -1
  91. package/dist/components/molecules/GenericTable/GenericTableBody/index.js +1 -1
  92. package/dist/components/molecules/GenericTable/GenericTableBody/index.js.map +1 -1
  93. package/dist/components/molecules/GenericTable/GenericTableBodyRow/index.cjs.js +1 -1
  94. package/dist/components/molecules/GenericTable/GenericTableBodyRow/index.cjs.js.map +1 -1
  95. package/dist/components/molecules/GenericTable/GenericTableBodyRow/index.js +1 -1
  96. package/dist/components/molecules/GenericTable/GenericTableBodyRow/index.js.map +1 -1
  97. package/dist/components/molecules/GenericTable/index.cjs.js +1 -1
  98. package/dist/components/molecules/GenericTable/index.cjs.js.map +1 -1
  99. package/dist/components/molecules/GenericTable/index.js +3 -3
  100. package/dist/components/molecules/GenericTable/index.js.map +1 -1
  101. package/dist/components/molecules/Modal/index.cjs.js +1 -1
  102. package/dist/components/molecules/Modal/index.cjs.js.map +1 -1
  103. package/dist/components/molecules/Modal/index.d.ts +2 -2
  104. package/dist/components/molecules/Modal/index.js +1 -1
  105. package/dist/components/molecules/Modal/index.js.map +1 -1
  106. package/dist/components/molecules/Pagination/index.cjs.js +1 -1
  107. package/dist/components/molecules/Pagination/index.cjs.js.map +1 -1
  108. package/dist/components/molecules/Pagination/index.js +1 -1
  109. package/dist/components/molecules/Pagination/index.js.map +1 -1
  110. package/dist/components/molecules/ProgressStepper/index.cjs.js +1 -1
  111. package/dist/components/molecules/ProgressStepper/index.cjs.js.map +1 -1
  112. package/dist/components/molecules/ProgressStepper/index.js +1 -1
  113. package/dist/components/molecules/ProgressStepper/index.js.map +1 -1
  114. package/dist/components/molecules/RadioGroup/index.cjs.js +1 -1
  115. package/dist/components/molecules/RadioGroup/index.cjs.js.map +1 -1
  116. package/dist/components/molecules/RadioGroup/index.js +1 -1
  117. package/dist/components/molecules/RadioGroup/index.js.map +1 -1
  118. package/dist/components/molecules/Rating/index.cjs.js +1 -1
  119. package/dist/components/molecules/Rating/index.cjs.js.map +1 -1
  120. package/dist/components/molecules/Rating/index.js +1 -1
  121. package/dist/components/molecules/Rating/index.js.map +1 -1
  122. package/dist/components/molecules/TextBlock/index.cjs.js +1 -1
  123. package/dist/components/molecules/TextBlock/index.cjs.js.map +1 -1
  124. package/dist/components/molecules/TextBlock/index.d.ts +1 -1
  125. package/dist/components/molecules/TextBlock/index.js +1 -1
  126. package/dist/components/molecules/TextBlock/index.js.map +1 -1
  127. package/dist/components/organisms/FileUpload/components/FileDropZone.cjs.js +1 -1
  128. package/dist/components/organisms/FileUpload/components/FileDropZone.cjs.js.map +1 -1
  129. package/dist/components/organisms/FileUpload/components/FileDropZone.js +1 -1
  130. package/dist/components/organisms/FileUpload/components/FileDropZone.js.map +1 -1
  131. package/dist/components/organisms/ImageUploadWidget/components/ImageDropZone.cjs.js +1 -1
  132. package/dist/components/organisms/ImageUploadWidget/components/ImageDropZone.cjs.js.map +1 -1
  133. package/dist/components/organisms/ImageUploadWidget/components/ImageDropZone.js +1 -1
  134. package/dist/components/organisms/ImageUploadWidget/components/ImageDropZone.js.map +1 -1
  135. package/dist/components/organisms/ImageUploadWidget/index.cjs.js +1 -1
  136. package/dist/components/organisms/ImageUploadWidget/index.cjs.js.map +1 -1
  137. package/dist/components/organisms/ImageUploadWidget/index.js +1 -1
  138. package/dist/components/organisms/ImageUploadWidget/index.js.map +1 -1
  139. package/package.json +1 -1
@@ -1,2 +1,2 @@
1
- "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"})]})]})})})]})};
1
+ "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-fd":"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"})]})]})})})]})};
2
2
  //# sourceMappingURL=index.cjs.js.map
@@ -1 +1 @@
1
- {"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 {\n open,\n onClose,\n widgetTitle = 'Upload Image',\n imageUrl = '',\n isCloudinaryAsset = false,\n cdnCloudName,\n onUpload,\n onUploadImageLink,\n onRemove,\n } = 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 && (\n <Button\n fdKey=\"img-change-button\"\n onClick={() => setSelectedImage(null)}\n size=\"medium\"\n tone=\"brand\"\n variant=\"secondary\"\n >\n Change\n </Button>\n )}\n </Stack>\n <Stack direction=\"row\" gap=\"16px\" justifyContent=\"space-between\">\n <Button\n fdKey=\"img-close-btn\"\n onClick={handleClose}\n size=\"medium\"\n tone=\"neutral\"\n variant=\"secondary\"\n >\n Close\n </Button>\n {imageUrl ? (\n <Button\n fdKey=\"img-remove-btn\"\n onClick={onRemove}\n size=\"medium\"\n tone=\"destructive\"\n variant=\"secondary\"\n >\n Remove\n </Button>\n ) : (\n <Button\n disabled={(!selectedImage && !imageLink) || uploading}\n endIcon={\n uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null\n }\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\n fullWidth\n fdKey=\"img-remove-btn\"\n onClick={onRemove}\n size=\"medium\"\n tone=\"destructive\"\n variant=\"secondary\"\n >\n Remove\n </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 && (\n <Button\n fullWidth\n fdKey=\"img-change-button\"\n onClick={() => setSelectedImage(null)}\n size=\"medium\"\n tone=\"brand\"\n variant=\"secondary\"\n >\n Change\n </Button>\n )}\n <Button\n fullWidth\n fdKey=\"img-close-btn\"\n onClick={handleClose}\n size=\"medium\"\n tone=\"neutral\"\n variant=\"secondary\"\n >\n Close\n </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\n alignItems=\"center\"\n direction=\"row\"\n flex={1}\n height={'calc(100% - 300px)'}\n justifyContent=\"center\"\n >\n {imageUrl ? (\n <ImageDisplay\n cdnCloudName={cdnCloudName}\n isCloudinaryAsset={isCloudinaryAsset}\n src={imageUrl}\n />\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":"koBAmBA,MAAMA,EAAwBC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CAClDC,QAAS,OACTC,SAAU,WACVC,IAAK,MACLC,KAAM,MACNC,UAAW,wBACXC,cAAe,SACfC,MAAO,MACPC,QAAS,OACTC,UAAW,aACXC,OAAQ,MACRC,WAAY,UACZC,eAAgB,gBAChBC,IAAKb,EAAMc,QAAQ,GACnBC,aAAcf,EAAMgB,OAAO,YAC3BC,OAAQ,gCACRC,WAAY,OACZC,UAAW,4EACX,CAACnB,EAAMoB,YAAYC,GAAG,WAAY,CAChCd,MAAO,QACPG,OAAQ,QACRF,QAAS,YAIPc,EAAoBxB,EAAOyB,EAAPzB,CAAmB,CAC3C0B,MAAO,sBACPC,WAAY,SACZC,SAAU,OACVC,WAAY,MACZC,WAAY,OACZC,cAAe,uBAe4CC,IAC3D,MAAMC,KACJA,EAAIC,QACJA,EAAOC,YACPA,EAAc,eAAcC,SAC5BA,EAAW,GAAEC,kBACbA,GAAoB,EAAKC,aACzBA,EAAYC,SACZA,EAAQC,kBACRA,EAAiBC,SACjBA,GACET,GACGU,EAAeC,GAAoBC,EAAAA,SAA2B,OAC9DC,EAAWC,GAAgBF,EAAAA,UAAS,IACpCG,EAAgBC,GAAqBJ,EAAAA,SAAuB,OAC5DK,EAAWC,GAAgBN,EAAAA,SAAS,IAErCO,EAAYC,GAAelD,GAAUA,EAAMoB,YAAYC,GAAG,YAE1D8B,EAAc,KAClBV,EAAiB,MACjBT,KAGIoB,EAAeC,UACnBT,GAAa,GACbE,EAAkB,MAElB,IACMN,GAAec,WACXjB,EAASG,EAAcc,MACpBP,GAAaT,SAChBA,EAAkBS,EAE5B,CAAE,MAAOQ,GACHA,aAAiBC,OACnBV,EAAkBS,EAEtB,SACEX,GAAa,GACbH,EAAiB,MACjBO,EAAa,GACf,GAgHF,OACES,EAAAA,2BACEC,EAAAA,IAACC,MACDD,MAACE,EAAK,CACJC,sBAAoB,EAAA,cACR,sBACZC,sBAAsB,EACtB/B,KAAMA,EACNgC,UAAW,CACTC,SAAU,CACRC,QAAS,MAGbC,MAAO,CAAEF,SAAUG,GAAUC,SAE7BV,EAAAA,IAACW,EAAI,CAACC,GAAIvC,EAAIqC,SACZX,EAAAA,KAAC5D,EAAqB,CAAAuE,SAAA,CACpBV,EAAAA,IAACpC,EAAiB,CAAA8C,SAAEnC,IACpByB,EAAAA,IAACa,EAAK,CACJ5D,WAAW,SACX6D,UAAU,MACVC,KAAM,EACN/D,OAAQ,qBACRE,eAAe,SAAQwD,SAEtBlC,EACCwB,EAAAA,IAACgB,EAAY,CACXtC,aAAcA,EACdD,kBAAmBA,EACnBwC,IAAKzC,IAGPwB,MAACkB,EAAa,CACZC,uBAAwBvC,EACxBS,UAAWA,EACX+B,kBAAoBC,GAAS/B,EAAa+B,GAC1CC,cAAgBC,GAAUxC,EAAiBwC,GAC3C3C,kBAAmB,KAAWc,KAC9BZ,cAAeA,EACfK,eAAgBA,MAnJ1BI,EAEAQ,OAACc,GAAMC,UAAU,MAAM3D,IAAI,MAAMD,eAAe,gBAAewD,SAAA,CAC7DV,EAAAA,IAACa,EAAK,CAACC,UAAU,iBACZhC,GACDkB,EAAAA,IAACwB,EAAAA,OAAM,CACLC,MAAM,oBACNC,QAAS,IAAM3C,EAAiB,MAChC4C,KAAK,SACLC,KAAK,QACLC,QAAQ,YAAWnB,SAAA,aAMzBX,EAAAA,KAACc,EAAK,CAACC,UAAU,MAAM3D,IAAI,OAAOD,eAAe,0BAC/C8C,EAAAA,IAACwB,EAAAA,QACCC,MAAM,gBACNC,QAASjC,EACTkC,KAAK,SACLC,KAAK,UACLC,QAAQ,+BAITrD,EACCwB,EAAAA,IAACwB,EAAAA,QACCC,MAAM,iBACNC,QAAS7C,EACT8C,KAAK,SACLC,KAAK,cACLC,QAAQ,gCAKV7B,EAAAA,IAACwB,SAAM,CACLM,UAAYhD,IAAkBO,GAAcJ,EAC5C8C,QACE9C,EAAYe,EAAAA,IAACgC,GAAiBlE,MAAM,UAAU6D,KAAK,KAAKM,GAAI,CAAEpF,MAAO,UAAe,KAEtF4E,MAAM,iBAENC,QAAShC,EACTiC,KAAK,SACLE,QAAQ,UAASnB,SAAA,iBAU3BX,EAAAA,KAACc,EAAK,CAACC,UAAU,SAAS3D,IAAMb,GAAUA,EAAMc,QAAQ,GAAEsD,SAAA,CACvDlC,EACCwB,MAACwB,EAAAA,OAAM,CACLU,WAAS,EACTT,MAAM,iBACNC,QAAS7C,EACT8C,KAAK,SACLC,KAAK,cACLC,QAAQ,YAAWnB,SAAA,WAKrBV,EAAAA,IAACwB,EAAAA,QACCU,WAAS,EACTJ,UAAYhD,IAAkBO,GAAcJ,EAC5C8C,QAAS9C,EAAYe,EAAAA,IAACgC,EAAgB,CAAClE,MAAM,UAAU6D,KAAK,KAAKM,GAAI,CAAEpF,MAAO,UAAe,KAC7F4E,MAAM,iBAENC,QAAShC,EACTiC,KAAK,SACLE,QAAQ,gCAKT/C,GACDkB,MAACwB,EAAAA,QACCU,WAAS,EACTT,MAAM,oBACNC,QAAS,IAAM3C,EAAiB,MAChC4C,KAAK,SACLC,KAAK,QACLC,QAAQ,YAAWnB,SAAA,WAKvBV,EAAAA,IAACwB,SAAM,CACLU,WAAS,EACTT,MAAM,gBACNC,QAASjC,EACTkC,KAAK,SACLC,KAAK,UACLC,QAAQ,YAAWnB,SAAA"}
1
+ {"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 {\n open,\n onClose,\n widgetTitle = 'Upload Image',\n imageUrl = '',\n isCloudinaryAsset = false,\n cdnCloudName,\n onUpload,\n onUploadImageLink,\n onRemove,\n } = 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 && (\n <Button\n fdKey=\"img-change-button\"\n onClick={() => setSelectedImage(null)}\n size=\"medium\"\n tone=\"brand\"\n variant=\"secondary\"\n >\n Change\n </Button>\n )}\n </Stack>\n <Stack direction=\"row\" gap=\"16px\" justifyContent=\"space-between\">\n <Button\n fdKey=\"img-close-btn\"\n onClick={handleClose}\n size=\"medium\"\n tone=\"neutral\"\n variant=\"secondary\"\n >\n Close\n </Button>\n {imageUrl ? (\n <Button\n fdKey=\"img-remove-btn\"\n onClick={onRemove}\n size=\"medium\"\n tone=\"destructive\"\n variant=\"secondary\"\n >\n Remove\n </Button>\n ) : (\n <Button\n disabled={(!selectedImage && !imageLink) || uploading}\n endIcon={\n uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null\n }\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\n fullWidth\n fdKey=\"img-remove-btn\"\n onClick={onRemove}\n size=\"medium\"\n tone=\"destructive\"\n variant=\"secondary\"\n >\n Remove\n </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 && (\n <Button\n fullWidth\n fdKey=\"img-change-button\"\n onClick={() => setSelectedImage(null)}\n size=\"medium\"\n tone=\"brand\"\n variant=\"secondary\"\n >\n Change\n </Button>\n )}\n <Button\n fullWidth\n fdKey=\"img-close-btn\"\n onClick={handleClose}\n size=\"medium\"\n tone=\"neutral\"\n variant=\"secondary\"\n >\n Close\n </Button>\n </Stack>\n );\n };\n\n return (\n <>\n <FlipdishFonts />\n <Modal\n closeAfterTransition\n data-fd=\"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\n alignItems=\"center\"\n direction=\"row\"\n flex={1}\n height={'calc(100% - 300px)'}\n justifyContent=\"center\"\n >\n {imageUrl ? (\n <ImageDisplay\n cdnCloudName={cdnCloudName}\n isCloudinaryAsset={isCloudinaryAsset}\n src={imageUrl}\n />\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":"koBAmBA,MAAMA,EAAwBC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CAClDC,QAAS,OACTC,SAAU,WACVC,IAAK,MACLC,KAAM,MACNC,UAAW,wBACXC,cAAe,SACfC,MAAO,MACPC,QAAS,OACTC,UAAW,aACXC,OAAQ,MACRC,WAAY,UACZC,eAAgB,gBAChBC,IAAKb,EAAMc,QAAQ,GACnBC,aAAcf,EAAMgB,OAAO,YAC3BC,OAAQ,gCACRC,WAAY,OACZC,UAAW,4EACX,CAACnB,EAAMoB,YAAYC,GAAG,WAAY,CAChCd,MAAO,QACPG,OAAQ,QACRF,QAAS,YAIPc,EAAoBxB,EAAOyB,EAAPzB,CAAmB,CAC3C0B,MAAO,sBACPC,WAAY,SACZC,SAAU,OACVC,WAAY,MACZC,WAAY,OACZC,cAAe,uBAe4CC,IAC3D,MAAMC,KACJA,EAAIC,QACJA,EAAOC,YACPA,EAAc,eAAcC,SAC5BA,EAAW,GAAEC,kBACbA,GAAoB,EAAKC,aACzBA,EAAYC,SACZA,EAAQC,kBACRA,EAAiBC,SACjBA,GACET,GACGU,EAAeC,GAAoBC,EAAAA,SAA2B,OAC9DC,EAAWC,GAAgBF,EAAAA,UAAS,IACpCG,EAAgBC,GAAqBJ,EAAAA,SAAuB,OAC5DK,EAAWC,GAAgBN,EAAAA,SAAS,IAErCO,EAAYC,GAAelD,GAAUA,EAAMoB,YAAYC,GAAG,YAE1D8B,EAAc,KAClBV,EAAiB,MACjBT,KAGIoB,EAAeC,UACnBT,GAAa,GACbE,EAAkB,MAElB,IACMN,GAAec,WACXjB,EAASG,EAAcc,MACpBP,GAAaT,SAChBA,EAAkBS,EAE5B,CAAE,MAAOQ,GACHA,aAAiBC,OACnBV,EAAkBS,EAEtB,SACEX,GAAa,GACbH,EAAiB,MACjBO,EAAa,GACf,GAgHF,OACES,EAAAA,2BACEC,EAAAA,IAACC,MACDD,MAACE,EAAK,CACJC,sBAAoB,EAAA,UACZ,sBACRC,sBAAsB,EACtB/B,KAAMA,EACNgC,UAAW,CACTC,SAAU,CACRC,QAAS,MAGbC,MAAO,CAAEF,SAAUG,GAAUC,SAE7BV,EAAAA,IAACW,EAAI,CAACC,GAAIvC,EAAIqC,SACZX,EAAAA,KAAC5D,EAAqB,CAAAuE,SAAA,CACpBV,EAAAA,IAACpC,EAAiB,CAAA8C,SAAEnC,IACpByB,EAAAA,IAACa,EAAK,CACJ5D,WAAW,SACX6D,UAAU,MACVC,KAAM,EACN/D,OAAQ,qBACRE,eAAe,SAAQwD,SAEtBlC,EACCwB,EAAAA,IAACgB,EAAY,CACXtC,aAAcA,EACdD,kBAAmBA,EACnBwC,IAAKzC,IAGPwB,MAACkB,EAAa,CACZC,uBAAwBvC,EACxBS,UAAWA,EACX+B,kBAAoBC,GAAS/B,EAAa+B,GAC1CC,cAAgBC,GAAUxC,EAAiBwC,GAC3C3C,kBAAmB,KAAWc,KAC9BZ,cAAeA,EACfK,eAAgBA,MAnJ1BI,EAEAQ,OAACc,GAAMC,UAAU,MAAM3D,IAAI,MAAMD,eAAe,gBAAewD,SAAA,CAC7DV,EAAAA,IAACa,EAAK,CAACC,UAAU,iBACZhC,GACDkB,EAAAA,IAACwB,EAAAA,OAAM,CACLC,MAAM,oBACNC,QAAS,IAAM3C,EAAiB,MAChC4C,KAAK,SACLC,KAAK,QACLC,QAAQ,YAAWnB,SAAA,aAMzBX,EAAAA,KAACc,EAAK,CAACC,UAAU,MAAM3D,IAAI,OAAOD,eAAe,0BAC/C8C,EAAAA,IAACwB,EAAAA,QACCC,MAAM,gBACNC,QAASjC,EACTkC,KAAK,SACLC,KAAK,UACLC,QAAQ,+BAITrD,EACCwB,EAAAA,IAACwB,EAAAA,QACCC,MAAM,iBACNC,QAAS7C,EACT8C,KAAK,SACLC,KAAK,cACLC,QAAQ,gCAKV7B,EAAAA,IAACwB,SAAM,CACLM,UAAYhD,IAAkBO,GAAcJ,EAC5C8C,QACE9C,EAAYe,EAAAA,IAACgC,GAAiBlE,MAAM,UAAU6D,KAAK,KAAKM,GAAI,CAAEpF,MAAO,UAAe,KAEtF4E,MAAM,iBAENC,QAAShC,EACTiC,KAAK,SACLE,QAAQ,UAASnB,SAAA,iBAU3BX,EAAAA,KAACc,EAAK,CAACC,UAAU,SAAS3D,IAAMb,GAAUA,EAAMc,QAAQ,GAAEsD,SAAA,CACvDlC,EACCwB,MAACwB,EAAAA,OAAM,CACLU,WAAS,EACTT,MAAM,iBACNC,QAAS7C,EACT8C,KAAK,SACLC,KAAK,cACLC,QAAQ,YAAWnB,SAAA,WAKrBV,EAAAA,IAACwB,EAAAA,QACCU,WAAS,EACTJ,UAAYhD,IAAkBO,GAAcJ,EAC5C8C,QAAS9C,EAAYe,EAAAA,IAACgC,EAAgB,CAAClE,MAAM,UAAU6D,KAAK,KAAKM,GAAI,CAAEpF,MAAO,UAAe,KAC7F4E,MAAM,iBAENC,QAAShC,EACTiC,KAAK,SACLE,QAAQ,gCAKT/C,GACDkB,MAACwB,EAAAA,QACCU,WAAS,EACTT,MAAM,oBACNC,QAAS,IAAM3C,EAAiB,MAChC4C,KAAK,SACLC,KAAK,QACLC,QAAQ,YAAWnB,SAAA,WAKvBV,EAAAA,IAACwB,SAAM,CACLU,WAAS,EACTT,MAAM,gBACNC,QAASjC,EACTkC,KAAK,SACLC,KAAK,UACLC,QAAQ,YAAWnB,SAAA"}
@@ -1,2 +1,2 @@
1
- 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};
1
+ import{jsxs as e,Fragment as i,jsx as o}from"react/jsx-runtime";import{useState as n}from"react";import r from"@mui/material/Backdrop";import t 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(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"}}))),y=s(c)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"24px",fontWeight:"600",lineHeight:"32px",letterSpacing:"0px"}),x=t=>{const{open:s,onClose:c,widgetTitle:x="Upload Image",imageUrl:C="",isCloudinaryAsset:k=!1,cdnCloudName:w,onUpload:v,onUploadImageLink:I,onRemove:z}=t,[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-fd":"image-upload-widget",disableEscapeKeyDown:!0,open:s,slotProps:{backdrop:{timeout:500}},slots:{backdrop:r},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};
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"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 {\n open,\n onClose,\n widgetTitle = 'Upload Image',\n imageUrl = '',\n isCloudinaryAsset = false,\n cdnCloudName,\n onUpload,\n onUploadImageLink,\n onRemove,\n } = 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 && (\n <Button\n fdKey=\"img-change-button\"\n onClick={() => setSelectedImage(null)}\n size=\"medium\"\n tone=\"brand\"\n variant=\"secondary\"\n >\n Change\n </Button>\n )}\n </Stack>\n <Stack direction=\"row\" gap=\"16px\" justifyContent=\"space-between\">\n <Button\n fdKey=\"img-close-btn\"\n onClick={handleClose}\n size=\"medium\"\n tone=\"neutral\"\n variant=\"secondary\"\n >\n Close\n </Button>\n {imageUrl ? (\n <Button\n fdKey=\"img-remove-btn\"\n onClick={onRemove}\n size=\"medium\"\n tone=\"destructive\"\n variant=\"secondary\"\n >\n Remove\n </Button>\n ) : (\n <Button\n disabled={(!selectedImage && !imageLink) || uploading}\n endIcon={\n uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null\n }\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\n fullWidth\n fdKey=\"img-remove-btn\"\n onClick={onRemove}\n size=\"medium\"\n tone=\"destructive\"\n variant=\"secondary\"\n >\n Remove\n </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 && (\n <Button\n fullWidth\n fdKey=\"img-change-button\"\n onClick={() => setSelectedImage(null)}\n size=\"medium\"\n tone=\"brand\"\n variant=\"secondary\"\n >\n Change\n </Button>\n )}\n <Button\n fullWidth\n fdKey=\"img-close-btn\"\n onClick={handleClose}\n size=\"medium\"\n tone=\"neutral\"\n variant=\"secondary\"\n >\n Close\n </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\n alignItems=\"center\"\n direction=\"row\"\n flex={1}\n height={'calc(100% - 300px)'}\n justifyContent=\"center\"\n >\n {imageUrl ? (\n <ImageDisplay\n cdnCloudName={cdnCloudName}\n isCloudinaryAsset={isCloudinaryAsset}\n src={imageUrl}\n />\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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"}
1
+ {"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 {\n open,\n onClose,\n widgetTitle = 'Upload Image',\n imageUrl = '',\n isCloudinaryAsset = false,\n cdnCloudName,\n onUpload,\n onUploadImageLink,\n onRemove,\n } = 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 && (\n <Button\n fdKey=\"img-change-button\"\n onClick={() => setSelectedImage(null)}\n size=\"medium\"\n tone=\"brand\"\n variant=\"secondary\"\n >\n Change\n </Button>\n )}\n </Stack>\n <Stack direction=\"row\" gap=\"16px\" justifyContent=\"space-between\">\n <Button\n fdKey=\"img-close-btn\"\n onClick={handleClose}\n size=\"medium\"\n tone=\"neutral\"\n variant=\"secondary\"\n >\n Close\n </Button>\n {imageUrl ? (\n <Button\n fdKey=\"img-remove-btn\"\n onClick={onRemove}\n size=\"medium\"\n tone=\"destructive\"\n variant=\"secondary\"\n >\n Remove\n </Button>\n ) : (\n <Button\n disabled={(!selectedImage && !imageLink) || uploading}\n endIcon={\n uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null\n }\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\n fullWidth\n fdKey=\"img-remove-btn\"\n onClick={onRemove}\n size=\"medium\"\n tone=\"destructive\"\n variant=\"secondary\"\n >\n Remove\n </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 && (\n <Button\n fullWidth\n fdKey=\"img-change-button\"\n onClick={() => setSelectedImage(null)}\n size=\"medium\"\n tone=\"brand\"\n variant=\"secondary\"\n >\n Change\n </Button>\n )}\n <Button\n fullWidth\n fdKey=\"img-close-btn\"\n onClick={handleClose}\n size=\"medium\"\n tone=\"neutral\"\n variant=\"secondary\"\n >\n Close\n </Button>\n </Stack>\n );\n };\n\n return (\n <>\n <FlipdishFonts />\n <Modal\n closeAfterTransition\n data-fd=\"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\n alignItems=\"center\"\n direction=\"row\"\n flex={1}\n height={'calc(100% - 300px)'}\n justifyContent=\"center\"\n >\n {imageUrl ? (\n <ImageDisplay\n cdnCloudName={cdnCloudName}\n isCloudinaryAsset={isCloudinaryAsset}\n src={imageUrl}\n />\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":"6qBAmBA,MAAMA,EAAwBC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CAClDC,QAAS,OACTC,SAAU,WACVC,IAAK,MACLC,KAAM,MACNC,UAAW,wBACXC,cAAe,SACfC,MAAO,MACPC,QAAS,OACTC,UAAW,aACXC,OAAQ,MACRC,WAAY,UACZC,eAAgB,gBAChBC,IAAKb,EAAMc,QAAQ,GACnBC,aAAcf,EAAMgB,OAAO,YAC3BC,OAAQ,gCACRC,WAAY,OACZC,UAAW,4EACX,CAACnB,EAAMoB,YAAYC,GAAG,WAAY,CAChCd,MAAO,QACPG,OAAQ,QACRF,QAAS,YAIPc,EAAoBxB,EAAOyB,EAAPzB,CAAmB,CAC3C0B,MAAO,sBACPC,WAAY,SACZC,SAAU,OACVC,WAAY,MACZC,WAAY,OACZC,cAAe,QAeXC,EAAuDC,IAC3D,MAAMC,KACJA,EAAIC,QACJA,EAAOC,YACPA,EAAc,eAAcC,SAC5BA,EAAW,GAAEC,kBACbA,GAAoB,EAAKC,aACzBA,EAAYC,SACZA,EAAQC,kBACRA,EAAiBC,SACjBA,GACET,GACGU,EAAeC,GAAoBC,EAA2B,OAC9DC,EAAWC,GAAgBF,GAAS,IACpCG,EAAgBC,GAAqBJ,EAAuB,OAC5DK,EAAWC,GAAgBN,EAAS,IAErCO,EAAYC,GAAenD,GAAUA,EAAMoB,YAAYC,GAAG,YAE1D+B,EAAc,KAClBV,EAAiB,MACjBT,KAGIoB,EAAeC,UACnBT,GAAa,GACbE,EAAkB,MAElB,IACMN,GAAec,WACXjB,EAASG,EAAcc,MACpBP,GAAaT,SAChBA,EAAkBS,EAE5B,CAAE,MAAOQ,GACHA,aAAiBC,OACnBV,EAAkBS,EAEtB,SACEX,GAAa,GACbH,EAAiB,MACjBO,EAAa,GACf,GAgHF,OACES,eACEC,EAACC,MACDD,EAACE,EAAK,CACJC,sBAAoB,EAAA,UACZ,sBACRC,sBAAsB,EACtB/B,KAAMA,EACNgC,UAAW,CACTC,SAAU,CACRC,QAAS,MAGbC,MAAO,CAAEF,SAAUG,GAAUC,SAE7BV,EAACW,EAAI,CAACC,GAAIvC,EAAIqC,SACZX,EAAC7D,EAAqB,CAAAwE,SAAA,CACpBV,EAACrC,EAAiB,CAAA+C,SAAEnC,IACpByB,EAACa,EAAK,CACJ7D,WAAW,SACX8D,UAAU,MACVC,KAAM,EACNhE,OAAQ,qBACRE,eAAe,SAAQyD,SAEtBlC,EACCwB,EAACgB,EAAY,CACXtC,aAAcA,EACdD,kBAAmBA,EACnBwC,IAAKzC,IAGPwB,EAACkB,EAAa,CACZC,uBAAwBvC,EACxBS,UAAWA,EACX+B,kBAAoBC,GAAS/B,EAAa+B,GAC1CC,cAAgBC,GAAUxC,EAAiBwC,GAC3C3C,kBAAmB,KAAWc,KAC9BZ,cAAeA,EACfK,eAAgBA,MAjJ1BY,EAACc,EAFDtB,GAEOuB,UAAU,MAAM5D,IAAI,MAAMD,eAAe,gBAAeyD,SAAA,CAC7DV,EAACa,EAAK,CAACC,UAAU,iBACZhC,GACDkB,EAACwB,EAAM,CACLC,MAAM,oBACNC,QAAS,IAAM3C,EAAiB,MAChC4C,KAAK,SACLC,KAAK,QACLC,QAAQ,YAAWnB,SAAA,aAMzBX,EAACc,EAAK,CAACC,UAAU,MAAM5D,IAAI,OAAOD,eAAe,0BAC/C+C,EAACwB,GACCC,MAAM,gBACNC,QAASjC,EACTkC,KAAK,SACLC,KAAK,UACLC,QAAQ,+BAKR7B,EAACwB,EADFhD,GAEGiD,MAAM,iBACNC,QAAS7C,EACT8C,KAAK,SACLC,KAAK,cACLC,QAAQ,+BAKH,CACLC,UAAYhD,IAAkBO,GAAcJ,EAC5C8C,QACE9C,EAAYe,EAACgC,GAAiBnE,MAAM,UAAU8D,KAAK,KAAKM,GAAI,CAAErF,MAAO,UAAe,KAEtF6E,MAAM,iBAENC,QAAShC,EACTiC,KAAK,SACLE,QAAQ,UAASnB,SAAA,gBAUrB,CAACI,UAAU,SAAS5D,IAAMb,GAAUA,EAAMc,QAAQ,GAAEuD,SAAA,CAEtDV,EAACwB,EADFhD,EACQ,CACL0D,WAAS,EACTT,MAAM,iBACNC,QAAS7C,EACT8C,KAAK,SACLC,KAAK,cACLC,QAAQ,YAAWnB,SAAA,WAMnBwB,WAAS,EACTJ,UAAYhD,IAAkBO,GAAcJ,EAC5C8C,QAAS9C,EAAYe,EAACgC,EAAgB,CAACnE,MAAM,UAAU8D,KAAK,KAAKM,GAAI,CAAErF,MAAO,UAAe,KAC7F6E,MAAM,iBAENC,QAAShC,EACTiC,KAAK,SACLE,QAAQ,gCAKT/C,GACDkB,EAACwB,GACCU,WAAS,EACTT,MAAM,oBACNC,QAAS,IAAM3C,EAAiB,MAChC4C,KAAK,SACLC,KAAK,QACLC,QAAQ,YAAWnB,SAAA,WAKvBV,EAACwB,EAAM,CACLU,WAAS,EACTT,MAAM,gBACNC,QAASjC,EACTkC,KAAK,SACLC,KAAK,UACLC,QAAQ,YAAWnB,SAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flipdish/portal-library",
3
- "version": "8.0.2",
3
+ "version": "8.0.3",
4
4
  "files": [
5
5
  "dist"
6
6
  ],