@bigbinary/neeto-image-uploader-frontend 2.2.0 → 2.2.1

package/dist/ImageUploader.js

@@ -27,7 +27,6 @@ import '@bigbinary/neeto-commons-frontend/react-utils';
 import '@bigbinary/neeto-commons-frontend/utils';
 import '@bigbinary/neetoui/Input';
 import '@bigbinary/neetoui/Switch';
-import '@bigbinary/neeto-icons/index';
 import '@bigbinary/neeto-molecules/Container';
 import '@bigbinary/neeto-molecules/Header';
 import '@bigbinary/neeto-commons-frontend/constants';
@@ -190,12 +189,13 @@ var ImageUploader = function ImageUploader(_ref) {
         "data-cy": "uploaded-image",
         src: image.url
       }), /*#__PURE__*/jsx(Dropdown, {
-        buttonProps: {
-          className: "absolute right-3 top-3"
-        },
         buttonSize: "small",
-        buttonStyle: "primary",
+        buttonStyle: "tertiary",
         icon: MenuHorizontal,
+        buttonProps: {
+          // eslint-disable-next-line @bigbinary/neeto/use-neetoui-classes
+          className: "absolute right-3 top-3 rounded-full"
+        },
         children: /*#__PURE__*/jsx(Menu, {
           children: options.map(function (_ref2) {
             var key = _ref2.key,

package/dist/ImageUploader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageUploader.js","sources":["../app/javascript/src/components/ImageUploader/index.jsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport classnames from \"classnames\";\nimport { isPresent, noop } from \"neetocist\";\nimport { MenuHorizontal } from \"neetoicons\";\nimport { Dropdown, Toastr } from \"neetoui\";\nimport { mergeRight } from \"ramda\";\nimport { useTranslation } from \"react-i18next\";\n\nimport ImageDirectUpload from \"components/common/ImageDirectUpload\";\nimport ImageWithFallback from \"components/common/ImageWithFallback\";\nimport { IMAGE_WRAPPER_CLASSNAME } from \"components/constants\";\nimport { isNotNilOrEmpty } from \"components/ImageEditor/utils\";\nimport AssetLibrary from \"components/Modal\";\nimport { useCreateBlob } from \"hooks/useDirectUploads\";\nimport useImageUploader from \"hooks/useImageUploader\";\nimport { IS_DEVELOPMENT_OR_HEROKU_ENV } from \"src/constants\";\n\nimport { DEFAULT_UPLOAD_CONFIG, OPTION_KEYS } from \"./constants\";\n\nconst { Menu, MenuItem } = Dropdown;\n\nconst ImageUploader = ({\n  onUploadComplete = noop,\n  className = \"\",\n  src = \"\",\n  uploadConfig = {},\n  fixedAspectRatio = {},\n}) => {\n  const [isAssetLibraryOpen, setIsAssetLibraryOpen] = useState(false);\n  const [image, setImage] = useState({ url: src });\n\n  const { t } = useTranslation();\n\n  const { mutate: createBlob } = useCreateBlob();\n\n  const uploadConfigWithDefaults = mergeRight(\n    DEFAULT_UPLOAD_CONFIG,\n    uploadConfig\n  );\n\n  const handleDelete = () => {\n    setImage({});\n    onChange({\n      url: \"\",\n      signedId: \"\",\n      key: \"\",\n      filename: \"\",\n      size: \"\",\n      type: \"\",\n    });\n  };\n\n  const onChange = file => onUploadComplete(file);\n\n  const handleSuccess = attachedImage => {\n    setImage(mergeRight(image, { url: attachedImage.metadata.url }));\n    onChange({\n      filename: attachedImage.filename,\n      key: attachedImage.key,\n      url: attachedImage.blobUrl,\n      signedId: attachedImage.signedId,\n      size: attachedImage.byteSize,\n      type: attachedImage.contentType,\n    });\n  };\n\n  const handleImageSelectionFromLibrary = image => {\n    setImage(image);\n    onChange(image);\n  };\n\n  const handleUploadComplete = image => {\n    if (IS_DEVELOPMENT_OR_HEROKU_ENV) {\n      handleSuccess(mergeRight(image, { metadata: { url: image.url } }));\n\n      return;\n    }\n\n    const payload = {\n      filename: image.name,\n      byte_size: image.size,\n      content_type: image.fileType,\n      checksum: image.fileId,\n      metadata: image,\n      service_name: \"imagekitio\",\n    };\n\n    createBlob(payload, {\n      onSuccess: handleSuccess,\n      onError: Toastr.error,\n    });\n  };\n\n  const { uploadFile } = useImageUploader({\n    onUploadComplete: handleUploadComplete,\n  });\n\n  const options = [\n    {\n      key: OPTION_KEYS.asset,\n      label: t(\"neetoImageUploader.imageUpload.imageLibrary\"),\n      onClick: () => setIsAssetLibraryOpen(true),\n      \"data-cy\": \"image-uploader-open-image-library-button\",\n    },\n    {\n      key: OPTION_KEYS.remove,\n      label: t(\"neetoImageUploader.imageUpload.remove\"),\n      onClick: handleDelete,\n      \"data-cy\": \"image-uploader-remove-button\",\n    },\n  ];\n\n  return (\n    <div className={classnames(className, { \"cursor-pointer\": true })}>\n      {isNotNilOrEmpty(image.url) ? (\n        <div\n          className={IMAGE_WRAPPER_CLASSNAME}\n          data-cy=\"image-uploader-wrapper\"\n        >\n          <ImageWithFallback\n            className=\"h-full w-full\"\n            data-cy=\"uploaded-image\"\n            src={image.url}\n          />\n          <Dropdown\n            buttonProps={{ className: \"absolute right-3 top-3\" }}\n            buttonSize=\"small\"\n            buttonStyle=\"primary\"\n            icon={MenuHorizontal}\n          >\n            <Menu>\n              {options.map(({ key, label, ...otherProps }) => (\n                <MenuItem.Button {...otherProps} key={key}>\n                  {label}\n                </MenuItem.Button>\n              ))}\n            </Menu>\n          </Dropdown>\n        </div>\n      ) : (\n        <ImageDirectUpload\n          {...{ setIsAssetLibraryOpen }}\n          isDisabled={isPresent(fixedAspectRatio)}\n          uploadConfig={uploadConfigWithDefaults}\n          onDrop={uploadFile}\n        />\n      )}\n      <AssetLibrary\n        {...{ fixedAspectRatio }}\n        isOpen={isAssetLibraryOpen}\n        uploadConfig={uploadConfigWithDefaults}\n        onClose={() => setIsAssetLibraryOpen(false)}\n        onUploadComplete={handleImageSelectionFromLibrary}\n      />\n    </div>\n  );\n};\n\nexport default ImageUploader;\n"],"names":["Menu","Dropdown","MenuItem","ImageUploader","_ref","_ref$onUploadComplete","onUploadComplete","noop","_ref$className","className","_ref$src","src","_ref$uploadConfig","uploadConfig","_ref$fixedAspectRatio","fixedAspectRatio","_useState","useState","_useState2","_slicedToArray","isAssetLibraryOpen","setIsAssetLibraryOpen","_useState3","url","_useState4","image","setImage","_useTranslation","useTranslation","t","_useCreateBlob","useCreateBlob","createBlob","mutate","uploadConfigWithDefaults","mergeRight","DEFAULT_UPLOAD_CONFIG","handleDelete","onChange","signedId","key","filename","size","type","file","handleSuccess","attachedImage","metadata","blobUrl","byteSize","contentType","handleImageSelectionFromLibrary","handleUploadComplete","IS_DEVELOPMENT_OR_HEROKU_ENV","payload","name","byte_size","content_type","fileType","checksum","fileId","service_name","onSuccess","onError","Toastr","error","_useImageUploader","useImageUploader","uploadFile","options","OPTION_KEYS","asset","label","onClick","remove","_jsxs","classnames","children","isNotNilOrEmpty","IMAGE_WRAPPER_CLASSNAME","_jsx","ImageWithFallback","buttonProps","buttonSize","buttonStyle","icon","MenuHorizontal","map","_ref2","otherProps","_objectWithoutProperties","_excluded","_createElement","Button","_objectSpread","ImageDirectUpload","isDisabled","isPresent","onDrop","AssetLibrary","isOpen","onClose"],"mappings":"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"}
+{"version":3,"file":"ImageUploader.js","sources":["../app/javascript/src/components/ImageUploader/index.jsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport classnames from \"classnames\";\nimport { isPresent, noop } from \"neetocist\";\nimport { MenuHorizontal } from \"neetoicons\";\nimport { Dropdown, Toastr } from \"neetoui\";\nimport { mergeRight } from \"ramda\";\nimport { useTranslation } from \"react-i18next\";\n\nimport ImageDirectUpload from \"components/common/ImageDirectUpload\";\nimport ImageWithFallback from \"components/common/ImageWithFallback\";\nimport { IMAGE_WRAPPER_CLASSNAME } from \"components/constants\";\nimport { isNotNilOrEmpty } from \"components/ImageEditor/utils\";\nimport AssetLibrary from \"components/Modal\";\nimport { useCreateBlob } from \"hooks/useDirectUploads\";\nimport useImageUploader from \"hooks/useImageUploader\";\nimport { IS_DEVELOPMENT_OR_HEROKU_ENV } from \"src/constants\";\n\nimport { DEFAULT_UPLOAD_CONFIG, OPTION_KEYS } from \"./constants\";\n\nconst { Menu, MenuItem } = Dropdown;\n\nconst ImageUploader = ({\n  onUploadComplete = noop,\n  className = \"\",\n  src = \"\",\n  uploadConfig = {},\n  fixedAspectRatio = {},\n}) => {\n  const [isAssetLibraryOpen, setIsAssetLibraryOpen] = useState(false);\n  const [image, setImage] = useState({ url: src });\n\n  const { t } = useTranslation();\n\n  const { mutate: createBlob } = useCreateBlob();\n\n  const uploadConfigWithDefaults = mergeRight(\n    DEFAULT_UPLOAD_CONFIG,\n    uploadConfig\n  );\n\n  const handleDelete = () => {\n    setImage({});\n    onChange({\n      url: \"\",\n      signedId: \"\",\n      key: \"\",\n      filename: \"\",\n      size: \"\",\n      type: \"\",\n    });\n  };\n\n  const onChange = file => onUploadComplete(file);\n\n  const handleSuccess = attachedImage => {\n    setImage(mergeRight(image, { url: attachedImage.metadata.url }));\n    onChange({\n      filename: attachedImage.filename,\n      key: attachedImage.key,\n      url: attachedImage.blobUrl,\n      signedId: attachedImage.signedId,\n      size: attachedImage.byteSize,\n      type: attachedImage.contentType,\n    });\n  };\n\n  const handleImageSelectionFromLibrary = image => {\n    setImage(image);\n    onChange(image);\n  };\n\n  const handleUploadComplete = image => {\n    if (IS_DEVELOPMENT_OR_HEROKU_ENV) {\n      handleSuccess(mergeRight(image, { metadata: { url: image.url } }));\n\n      return;\n    }\n\n    const payload = {\n      filename: image.name,\n      byte_size: image.size,\n      content_type: image.fileType,\n      checksum: image.fileId,\n      metadata: image,\n      service_name: \"imagekitio\",\n    };\n\n    createBlob(payload, {\n      onSuccess: handleSuccess,\n      onError: Toastr.error,\n    });\n  };\n\n  const { uploadFile } = useImageUploader({\n    onUploadComplete: handleUploadComplete,\n  });\n\n  const options = [\n    {\n      key: OPTION_KEYS.asset,\n      label: t(\"neetoImageUploader.imageUpload.imageLibrary\"),\n      onClick: () => setIsAssetLibraryOpen(true),\n      \"data-cy\": \"image-uploader-open-image-library-button\",\n    },\n    {\n      key: OPTION_KEYS.remove,\n      label: t(\"neetoImageUploader.imageUpload.remove\"),\n      onClick: handleDelete,\n      \"data-cy\": \"image-uploader-remove-button\",\n    },\n  ];\n\n  return (\n    <div className={classnames(className, { \"cursor-pointer\": true })}>\n      {isNotNilOrEmpty(image.url) ? (\n        <div\n          className={IMAGE_WRAPPER_CLASSNAME}\n          data-cy=\"image-uploader-wrapper\"\n        >\n          <ImageWithFallback\n            className=\"h-full w-full\"\n            data-cy=\"uploaded-image\"\n            src={image.url}\n          />\n          <Dropdown\n            buttonSize=\"small\"\n            buttonStyle=\"tertiary\"\n            icon={MenuHorizontal}\n            buttonProps={{\n              // eslint-disable-next-line @bigbinary/neeto/use-neetoui-classes\n              className: \"absolute right-3 top-3 rounded-full\",\n            }}\n          >\n            <Menu>\n              {options.map(({ key, label, ...otherProps }) => (\n                <MenuItem.Button {...otherProps} key={key}>\n                  {label}\n                </MenuItem.Button>\n              ))}\n            </Menu>\n          </Dropdown>\n        </div>\n      ) : (\n        <ImageDirectUpload\n          {...{ setIsAssetLibraryOpen }}\n          isDisabled={isPresent(fixedAspectRatio)}\n          uploadConfig={uploadConfigWithDefaults}\n          onDrop={uploadFile}\n        />\n      )}\n      <AssetLibrary\n        {...{ fixedAspectRatio }}\n        isOpen={isAssetLibraryOpen}\n        uploadConfig={uploadConfigWithDefaults}\n        onClose={() => setIsAssetLibraryOpen(false)}\n        onUploadComplete={handleImageSelectionFromLibrary}\n      />\n    </div>\n  );\n};\n\nexport default ImageUploader;\n"],"names":["Menu","Dropdown","MenuItem","ImageUploader","_ref","_ref$onUploadComplete","onUploadComplete","noop","_ref$className","className","_ref$src","src","_ref$uploadConfig","uploadConfig","_ref$fixedAspectRatio","fixedAspectRatio","_useState","useState","_useState2","_slicedToArray","isAssetLibraryOpen","setIsAssetLibraryOpen","_useState3","url","_useState4","image","setImage","_useTranslation","useTranslation","t","_useCreateBlob","useCreateBlob","createBlob","mutate","uploadConfigWithDefaults","mergeRight","DEFAULT_UPLOAD_CONFIG","handleDelete","onChange","signedId","key","filename","size","type","file","handleSuccess","attachedImage","metadata","blobUrl","byteSize","contentType","handleImageSelectionFromLibrary","handleUploadComplete","IS_DEVELOPMENT_OR_HEROKU_ENV","payload","name","byte_size","content_type","fileType","checksum","fileId","service_name","onSuccess","onError","Toastr","error","_useImageUploader","useImageUploader","uploadFile","options","OPTION_KEYS","asset","label","onClick","remove","_jsxs","classnames","children","isNotNilOrEmpty","IMAGE_WRAPPER_CLASSNAME","_jsx","ImageWithFallback","buttonSize","buttonStyle","icon","MenuHorizontal","buttonProps","map","_ref2","otherProps","_objectWithoutProperties","_excluded","_createElement","Button","_objectSpread","ImageDirectUpload","isDisabled","isPresent","onDrop","AssetLibrary","isOpen","onClose"],"mappings":"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"}

package/dist/cjs/AssetLibrary.js

@@ -22,7 +22,7 @@ var utils$4 = require('@bigbinary/neeto-commons-frontend/utils');
 var Input = require('@bigbinary/neetoui/Input');
 var Switch = require('@bigbinary/neetoui/Switch');
 var jsxRuntime = require('react/jsx-runtime');
-var index$1 = require('@bigbinary/neeto-icons/index');
+var MenuHorizontal = require('@bigbinary/neeto-icons/MenuHorizontal');
 var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
 var Container = require('@bigbinary/neeto-molecules/Container');
 var NeetoHeader = require('@bigbinary/neeto-molecules/Header');
@@ -108,6 +108,7 @@ var LeftArrow__default = /*#__PURE__*/_interopDefaultLegacy(LeftArrow);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
 var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
+var MenuHorizontal__default = /*#__PURE__*/_interopDefaultLegacy(MenuHorizontal);
 var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
 var NeetoHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoHeader);
 var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
@@ -7583,8 +7584,8 @@ var RolesDropdown = function RolesDropdown(_ref) {
 
 function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Menu = Dropdown__default["default"].Menu,
-  MenuItem = Dropdown__default["default"].MenuItem;
+var Menu$2 = Dropdown__default["default"].Menu,
+  MenuItem$3 = Dropdown__default["default"].MenuItem;
 var Left = function Left(_ref) {
   var _ref2, _selectedRows$keys, _selectedRows$active, _config$hiddenBulkAct, _config$otherBulkActi;
   var config = _ref.config,
@@ -7699,8 +7700,8 @@ var Left = function Left(_ref) {
           "data-cy": "ntm-members-take-action-dropdown-button",
           disabled: !isUpdatePermissionGranted,
           label: t("neetoTeamMembers.common.takeAction"),
-          children: /*#__PURE__*/jsxRuntime.jsxs(Menu, {
-            children: [getDeactivatedButtonVisible(selectedRows, config) && /*#__PURE__*/jsxRuntime.jsx(MenuItem.Button, {
+          children: /*#__PURE__*/jsxRuntime.jsxs(Menu$2, {
+            children: [getDeactivatedButtonVisible(selectedRows, config) && /*#__PURE__*/jsxRuntime.jsx(MenuItem$3.Button, {
               "data-cy": "ntm-deactivate-members-button",
               disabled: !isUpdatePermissionGranted,
               onClick: function onClick() {
@@ -9731,6 +9732,8 @@ _default = lib.default = MasonryInfiniteScroller;
 var css = ".niu-unsplash-container {\n  height: calc(75vh - 220px) !important;\n  max-height: 355px;\n}\n.niu-unsplash-container img {\n  height: 100%;\n  width: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n  animation: fade-in 1.2s 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;\n  border-radius: var(--neeto-ui-rounded);\n  position: relative;\n  cursor: pointer;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX2ltYWdlLWxpYnJhcnkuc2NzcyIsImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2Fic3RyYWN0cy9fdmFyaWFibGVzLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0E7RUFDRSxxQ0FBQTtFQUNBLGlCQ0NrQztBREhwQztBQUlFO0VBQ0UsWUFBQTtFQUNBLFdBQUE7RUFDQSxvQkFBQTtLQUFBLGlCQUFBO0VBQ0EsbUVBQUE7RUFDQSxzQ0FBQTtFQUNBLGtCQUFBO0VBQ0EsZUFBQTtBQUZKIiwic291cmNlc0NvbnRlbnQiOlsiLy9BYnN0cmFjdHNcbkBpbXBvcnQgXCIuLi9hYnN0cmFjdHMvdmFyaWFibGVzXCI7XG5cbi5uaXUtdW5zcGxhc2gtY29udGFpbmVyIHtcbiAgaGVpZ2h0OiBjYWxjKCN7JG5pdS1tb2RhbC1oZWlnaHR9IC0gI3skbml1LW1vZGFsLWhlYWRlci1oZWlnaHR9KSAhaW1wb3J0YW50O1xuICBtYXgtaGVpZ2h0OiAkbml1LXVuc3BsYXNoLWNvbnRhaW5lci1tYXgtaGVpZ2h0O1xuXG4gIGltZyB7XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xuICAgIGFuaW1hdGlvbjogZmFkZS1pbiAxLjJzIDFzIGN1YmljLWJlemllcigwLjM5LCAwLjU3NSwgMC41NjUsIDEpIGJvdGg7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKC0tbmVldG8tdWktcm91bmRlZCk7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgfVxufVxuIiwiJG5pdS1tb2RhbC13aWR0aDogOTV2dztcbiRuaXUtbW9kYWwtaGVpZ2h0OiA3NXZoO1xuJG5pdS1tb2RhbC1tYXgtd2lkdGg6IDExNTJweDtcbiRuaXUtbW9kYWwtbWF4LWhlaWdodDogNTc2cHg7XG4kbml1LW1vZGFsLWhlYWRlci1oZWlnaHQ6IDIyMHB4O1xuXG4kbml1LXVuc3BsYXNoLWNvbnRhaW5lci1tYXgtaGVpZ2h0OiAzNTVweDtcbiJdfQ== */";
 n$1(css,{});
 
+var Menu = Dropdown__default["default"].Menu,
+  MenuItem = Dropdown__default["default"].MenuItem;
 var InfiniteScroller = function InfiniteScroller(_ref) {
   var _ref$hasMore = _ref.hasMore,
     hasMore = _ref$hasMore === void 0 ? false : _ref$hasMore,
@@ -9808,17 +9811,28 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
                   children: [image === null || image === void 0 || (_image$user2 = image.user) === null || _image$user2 === void 0 ? void 0 : _image$user2.name, " | ", " ", t("neetoImageUploader.labels.unsplash")]
                 })]
               }), tab === utils$3.TABS[0].key && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                children: [hasPermissioToDeleteImage && /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
-                  className: "absolute right-2 top-2 z-[1]",
-                  icon: index$1.Delete,
-                  size: "small",
-                  style: "danger",
-                  onClick: function onClick() {
-                    return setDeleteConfirmation({
-                      isOpen: true,
-                      imageIds: [(image === null || image === void 0 ? void 0 : image.fileId) || image.id]
-                    });
-                  }
+                children: [hasPermissioToDeleteImage && /*#__PURE__*/jsxRuntime.jsx(Dropdown__default["default"], {
+                  buttonSize: "small",
+                  buttonStyle: "tertiary",
+                  "data-cy": "image-library-image-options-".concat(index),
+                  icon: MenuHorizontal__default["default"],
+                  buttonProps: {
+                    className:
+                    // eslint-disable-next-line @bigbinary/neeto/use-neetoui-classes
+                    "absolute right-2 top-2 z-[1] rounded-full"
+                  },
+                  children: /*#__PURE__*/jsxRuntime.jsx(Menu, {
+                    children: /*#__PURE__*/jsxRuntime.jsx(MenuItem.Button, {
+                      "data-cy": "image-library-image-delete",
+                      onClick: function onClick() {
+                        return setDeleteConfirmation({
+                          isOpen: true,
+                          imageIds: [(image === null || image === void 0 ? void 0 : image.fileId) || image.id]
+                        });
+                      },
+                      children: t("neetoImageUploader.deleteConfirmation.delete")
+                    })
+                  })
                 }), /*#__PURE__*/jsxRuntime.jsx("img", {
                   "data-cy": "niu-library-image-".concat(index),
                   src: image === null || image === void 0 ? void 0 : image.url,