@blaze-cms/plugin-media-ui 0.146.0-node18.1 → 0.146.0-rc-eagle-3.0

package/CHANGELOG.md

@@ -3,33 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [0.146.0-node18.1](https://github.com/thebyte9/blaze/compare/v0.146.0-node18.0...v0.146.0-node18.1) (2025-03-25)
-
-
-### Bug Fixes
-
-* toaster version updates ([2ccc815](https://github.com/thebyte9/blaze/commit/2ccc8151b332f225afe609c2fa8585073c7753fa))
-
-
-
-
-
-# [0.146.0-node18.0](https://github.com/thebyte9/blaze/compare/v0.145.0...v0.146.0-node18.0) (2025-03-12)
+# [0.146.0-rc-eagle-3.0](https://github.com/thebyte9/blaze/compare/v0.145.0...v0.146.0-rc-eagle-3.0) (2026-07-13)
 
 
 ### Bug Fixes
 
 * add simple layout toast message ([#4567](https://github.com/thebyte9/blaze/issues/4567)) ([473b722](https://github.com/thebyte9/blaze/commit/473b7226bbc74337462973150910a58e5289b2fb))
 * fix issue media listing add button not working after simple layout updates ([#4546](https://github.com/thebyte9/blaze/issues/4546)) ([848bab7](https://github.com/thebyte9/blaze/commit/848bab7b10cf12fd4a926c56f41f98d7b61ded7d))
+* fix lint and tests errors across repository ([#5047](https://github.com/thebyte9/blaze/issues/5047)) ([c2b86dd](https://github.com/thebyte9/blaze/commit/c2b86dd7aebb12198a49097692a549a9f9378d6e))
 * fixed breaking tests, updated next to 14 ([fecb0e1](https://github.com/thebyte9/blaze/commit/fecb0e1d822bd69ebbaa084072a219f0fddd23f1))
 * fixed more tests ([46a2fb9](https://github.com/thebyte9/blaze/commit/46a2fb9467f9f3c9cf320c9caf36c66503cc1f49))
 * fixed remaining failing tests ([8a5963f](https://github.com/thebyte9/blaze/commit/8a5963ff8a0bf615a2ced9fb77b8986a9b05d80c))
+* fixes pagination issues in fileuploadadapter ([fb31a56](https://github.com/thebyte9/blaze/commit/fb31a563c6bf7560fe6e83d3ff567193ed0259cb))
+* fixes pagination issues in fileuploadadapter ([4f8b786](https://github.com/thebyte9/blaze/commit/4f8b786b3e8e015a8775f9a9147efa4016147cdf))
+* fixes pagination issues in fileuploadadapter ([b1d7740](https://github.com/thebyte9/blaze/commit/b1d7740b841bd151e96b4c8046c6b9c736b5d109))
 * linting fixed automatically ([73135b9](https://github.com/thebyte9/blaze/commit/73135b9b8b0d5407e2e1dfba42ab2381f290607f))
 * more test fixes ([a2a2f7a](https://github.com/thebyte9/blaze/commit/a2a2f7a650bb2c995660ba8e88e2d8f1c54586d7))
 * removed unused  var in test ([0143cb8](https://github.com/thebyte9/blaze/commit/0143cb80a591d7cdf894e7d74f5087dad5ff4a18))
 * save files on simple layout and handle PDF readonly preview ([#4530](https://github.com/thebyte9/blaze/issues/4530)) ([26331de](https://github.com/thebyte9/blaze/commit/26331de61d0f0d0f5a0b7eba965d126897d3c487))
 * udpated yarn lock ([0cd4fa4](https://github.com/thebyte9/blaze/commit/0cd4fa4a185fca4b80b57e472badb771dd649ec2))
 * updated jest dependences/setup ([6d6cba8](https://github.com/thebyte9/blaze/commit/6d6cba84b3c4ce4d4da7463098de19815a9fb7a6))
+* updated toaster version ([39f3dbd](https://github.com/thebyte9/blaze/commit/39f3dbd15833d45dd0d407b401eb825553135e01))
 * updated with dev ([90f545f](https://github.com/thebyte9/blaze/commit/90f545f1beabb35e26ba6fb2b45a7a0dfd072927))
 * updated with dev ([729bb6e](https://github.com/thebyte9/blaze/commit/729bb6ee7e87946081d51564a4ab45538f7be1e7))
 * updated with latest ([21cde6f](https://github.com/thebyte9/blaze/commit/21cde6f157c9279ed1eccb326870547821bc3dde))
@@ -37,8 +31,15 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### Features
 
+* add custom fields to media upload ([#5149](https://github.com/thebyte9/blaze/issues/5149)) ([04adf5c](https://github.com/thebyte9/blaze/commit/04adf5c741541984f10d1c08a3af46830f47b68c))
 * add read only file viewer component ([#4527](https://github.com/thebyte9/blaze/issues/4527)) ([0bc416f](https://github.com/thebyte9/blaze/commit/0bc416f4cbdccaaa24e2e780b17636e84e4f8ffe))
+* add superscript and subscript formatting options to DraftJS texteditor ([#5057](https://github.com/thebyte9/blaze/issues/5057)) ([1e898c7](https://github.com/thebyte9/blaze/commit/1e898c72a350b925d98d7ef0be0d11648dc2718d))
+* allow customising entity admin listing default sort ([#5156](https://github.com/thebyte9/blaze/issues/5156)) ([af379c4](https://github.com/thebyte9/blaze/commit/af379c49002dab210e714c9c7fb9eed2a778bd15))
+* limit store type on using schema properties ([#4855](https://github.com/thebyte9/blaze/issues/4855)) ([d0ca5af](https://github.com/thebyte9/blaze/commit/d0ca5afd11b8b1803d5feed6656dfb3ba3a151a2))
+* preserving filename on file update ([9a3a415](https://github.com/thebyte9/blaze/commit/9a3a4157db99820dae08130da47f6fe8f5f3f9e9))
+* show change file button  modal  using React context ([#4816](https://github.com/thebyte9/blaze/issues/4816)) ([040089a](https://github.com/thebyte9/blaze/commit/040089a55a74f522e2bfd66870c3a1e703a081fa))
 * simplify modal layout ([#4504](https://github.com/thebyte9/blaze/issues/4504)) ([fb513ff](https://github.com/thebyte9/blaze/commit/fb513ffd898d7b2b039469c0f76b7b21f54bf833))
+* update media listing to use schema based search filters ([#4873](https://github.com/thebyte9/blaze/issues/4873)) ([c3f3d03](https://github.com/thebyte9/blaze/commit/c3f3d032062e76a5496e5c7b2c22bcb8af63a3ae))
 * updated react to 18 ([9335f84](https://github.com/thebyte9/blaze/commit/9335f8432b376494501abb9c3deef1ddaa9b35a8))
 
 

package/lib/components/CardMedia/CardMedia.js

@@ -1,294 +1,285 @@
 "use strict";
 
-require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.object.define-property.js");
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.string.iterator.js");
-require("core-js/modules/es.weak-map.js");
-require("core-js/modules/web.dom-collections.iterator.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-require("core-js/modules/es.function.name.js");
+exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _more = _interopRequireDefault(require("@blaze-react/more"));
-var _button = _interopRequireDefault(require("@blaze-react/button"));
 var _admin = require("@blaze-cms/admin");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _adminUiUtils = require("@blaze-cms/admin-ui-utils");
 var _client = require("@apollo/client");
-var _classnames2 = _interopRequireDefault(require("classnames"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _toaster = require("@blaze-react/toaster");
 var _modal = _interopRequireDefault(require("@blaze-react/modal"));
 var _reactDom = require("react-dom");
 var _reactRouterDom = require("react-router-dom");
+var _pluginPageBuilderUi = require("@blaze-cms/plugin-page-builder-ui");
 var _EditMediaFile = _interopRequireDefault(require("../EditMediaFile"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var CardMedia = function CardMedia(_ref) {
-  var onSelected = _ref.onSelected,
-    name = _ref.name,
-    url = _ref.url,
-    mimetype = _ref.mimetype,
-    id = _ref.id,
-    selected = _ref.selected,
-    displayLayout = _ref.displayLayout,
-    data = _ref.data,
-    modalTargetRef = _ref.modalTargetRef,
-    updateFile = _ref.updateFile,
-    removeFile = _ref.removeFile,
-    index = _ref.index;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    displayDeleteModal = _useState2[0],
-    setDisplayDeleteModal = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    displayEditModal = _useState4[0],
-    setDisplayEditModal = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    enableSaveButton = _useState6[0],
-    setEnableSaveButton = _useState6[1];
-  var _useState7 = (0, _react.useState)(null),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    fileData = _useState8[0],
-    setFileData = _useState8[1];
-  var _useToasts = (0, _toaster.useToasts)(),
-    addToast = _useToasts.addToast;
-  var _useMutation = (0, _client.useMutation)((0, _adminUiUtils.getMutation)('DELETE_FILE_BY_ID')),
-    _useMutation2 = (0, _slicedToArray2["default"])(_useMutation, 1),
-    deleteFile = _useMutation2[0];
-  var _mimetype$split = mimetype.split('/'),
-    _mimetype$split2 = (0, _slicedToArray2["default"])(_mimetype$split, 2),
-    type = _mimetype$split2[0],
-    extension = _mimetype$split2[1];
-  var client = (0, _client.useApolloClient)();
-  var deleteFileById = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            setDisplayDeleteModal(false);
-            _context.prev = 1;
-            _context.next = 4;
-            return deleteFile({
-              variables: {
-                input: {
-                  id: id
-                }
-              }
-            });
-          case 4:
-            removeFile({
-              index: index
-            });
-            addToast("File: ".concat(name, " has been deleted"), {
-              appearance: 'success',
-              autoDismiss: true
-            });
-            _context.next = 11;
-            break;
-          case 8:
-            _context.prev = 8;
-            _context.t0 = _context["catch"](1);
-            addToast(_context.t0.message, {
-              appearance: 'error',
-              autoDismiss: true
-            });
-          case 11:
-          case "end":
-            return _context.stop();
+var _bustUrl = _interopRequireDefault(require("../../utils/bustUrl"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const CardMedia = ({
+  onSelected,
+  name,
+  url,
+  mimetype,
+  id,
+  selected,
+  displayLayout,
+  data,
+  updated,
+  modalTargetRef,
+  updateFile,
+  removeFile,
+  index,
+  openEditInModal
+}) => {
+  const [displayDeleteModal, setDisplayDeleteModal] = (0, _react.useState)(false);
+  const [displayEditModal, setDisplayEditModal] = (0, _react.useState)(false);
+  const [enableSaveButton, setEnableSaveButton] = (0, _react.useState)(false);
+  const [fileData, setFileData] = (0, _react.useState)(null);
+  const {
+    addToast
+  } = (0, _toaster.useToasts)();
+  const [deleteFile] = (0, _client.useMutation)((0, _adminUiUtils.getMutation)('DELETE_FILE_BY_ID'));
+  const [type, extension] = mimetype.split('/');
+  const client = (0, _client.useApolloClient)();
+  const {
+    data: {
+      getEntitySchemas: [schemaData] = []
+    } = {},
+    loading: schemaLoading
+  } = (0, _client.useQuery)((0, _adminUiUtils.getQuery)('GET_ENTITY_SCHEMA'), {
+    variables: {
+      identifier: 'file'
+    }
+  });
+  const deleteFileById = async () => {
+    setDisplayDeleteModal(false);
+    try {
+      await deleteFile({
+        variables: {
+          input: {
+            id
+          }
         }
-      }, _callee, null, [[1, 8]]);
-    }));
-    return function deleteFileById() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  var handleClick = function handleClick() {
+      });
+      removeFile({
+        index
+      });
+      addToast(`File: ${name} has been deleted`, {
+        appearance: 'success',
+        autoDismiss: true
+      });
+    } catch (error) {
+      addToast(error.message, {
+        appearance: 'error',
+        autoDismiss: true
+      });
+    }
+  };
+  const handleRowClick = () => onSelected({
+    id,
+    url,
+    name,
+    data
+  });
+  const handleCheckboxToggle = (0, _react.useCallback)(e => {
+    e.preventDefault();
+    e.stopPropagation();
     onSelected({
-      id: id,
-      url: url,
-      name: name,
-      data: data
+      id,
+      url,
+      name,
+      data
     });
+  }, [id, url, name, data, onSelected]);
+  const handleKeyDown = e => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      handleRowClick();
+    }
   };
-  var cardMediaClassNames = (0, _classnames2["default"])('card card--media-list', (0, _defineProperty2["default"])({
+  const cardMediaClassNames = (0, _classnames.default)('card card--media-list card--media-list-row', `card--media-${displayLayout}`, {
     'card--media-list--selected': selected
-  }, "card--media-".concat(displayLayout), displayLayout));
-  var handleCloseModal = function handleCloseModal() {
-    setDisplayEditModal(false);
-  };
-  var handleSaveButtonStatus = function handleSaveButtonStatus(state) {
-    setEnableSaveButton(state);
-  };
-  var modalActions = [{
+  });
+  const handleCloseModal = () => setDisplayEditModal(false);
+  const handleSaveButtonStatus = state => setEnableSaveButton(state);
+  const modalActions = [{
     textButton: 'Cancel',
     callback: handleCloseModal,
     modifiers: ['cancel']
   }, {
-    textButton: 'Save',
-    callback: function callback() {
-      return handleFormSave();
-    },
+    textButton: 'Apply',
+    callback: () => handleFormSave(),
     modifiers: enableSaveButton ? [] : ['disabled']
   }];
-  var handleFileChange = function handleFileChange(file) {
-    setFileData(file);
-  };
-  var handleFormSave = /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-      var _yield$client$mutate, updatedFile;
-      return _regenerator["default"].wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            _context2.prev = 0;
-            _context2.next = 3;
-            return client.mutate({
-              mutation: (0, _adminUiUtils.getMutation)('UPDATE_FILE'),
-              variables: {
-                input: fileData
-              },
-              update: function update(cache, _ref4) {
-                var fileUpdated = _ref4.data.updateFile;
-                cache.writeQuery({
-                  query: (0, _adminUiUtils.getQuery)('GET_FILE_BY_ID'),
-                  variables: {
-                    id: id
-                  },
-                  data: {
-                    file: fileUpdated.result
-                  }
-                });
-              }
-            });
-          case 3:
-            _yield$client$mutate = _context2.sent;
-            updatedFile = _yield$client$mutate.data.updateFile;
-            updateFile({
-              file: updatedFile.result,
-              index: index
-            });
-            addToast("File: ".concat(fileData.name, " has been updated"), {
-              appearance: 'success',
-              autoDismiss: true
-            });
-            _context2.next = 13;
-            break;
-          case 9:
-            _context2.prev = 9;
-            _context2.t0 = _context2["catch"](0);
-            addToast("File: ".concat(fileData.name, " has not been updated"), {
-              appearance: 'error',
-              autoDismiss: true
-            });
-            console.error(_context2.t0); //eslint-disable-line
-          case 13:
-            handleCloseModal();
-            setEnableSaveButton(false);
-          case 15:
-          case "end":
-            return _context2.stop();
+  const handleFileChange = file => setFileData(file);
+  const handleStopPropagation = e => e.stopPropagation();
+  const handleFormSave = async () => {
+    try {
+      const {
+        data: {
+          updateFile: updatedFile
+        }
+      } = await client.mutate({
+        mutation: (0, _adminUiUtils.getMutation)('UPDATE_FILE'),
+        variables: {
+          input: fileData.formData
+        },
+        update(cache, {
+          data: {
+            updateFile: fileUpdated
+          }
+        }) {
+          cache.writeQuery({
+            query: (0, _adminUiUtils.getQuery)('GET_FILE_BY_ID'),
+            variables: {
+              id
+            },
+            data: {
+              file: fileUpdated.result
+            }
+          });
         }
-      }, _callee2, null, [[0, 9]]);
-    }));
-    return function handleFormSave() {
-      return _ref3.apply(this, arguments);
-    };
-  }();
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, displayEditModal && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react["default"].createElement(_modal["default"], {
+      });
+      updateFile({
+        file: updatedFile.result,
+        index
+      });
+      addToast(`File: ${fileData.name} has been updated`, {
+        appearance: 'success',
+        autoDismiss: true
+      });
+    } catch (e) {
+      addToast(`File: ${fileData.name} has not been updated`, {
+        appearance: 'error',
+        autoDismiss: true
+      });
+      console.error(e); //eslint-disable-line
+    }
+    handleCloseModal();
+    setEnableSaveButton(false);
+  };
+  if (schemaLoading) return null;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayEditModal && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_modal.default, {
     title: "Edit",
     actions: modalActions,
     onClose: handleCloseModal
-  }, /*#__PURE__*/_react["default"].createElement(_EditMediaFile["default"], {
+  }, /*#__PURE__*/_react.default.createElement(_EditMediaFile.default, {
     onChange: handleFileChange,
     fileId: id,
     handleSaveButtonStatus: handleSaveButtonStatus,
     handleFormSave: handleFormSave,
-    enableSaveButton: enableSaveButton
-  })), modalTargetRef.current), /*#__PURE__*/_react["default"].createElement("div", {
-    className: cardMediaClassNames,
-    role: "button",
-    onClick: handleClick
-  }, displayDeleteModal && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react["default"].createElement(_admin.DeleteAction, {
-    onClose: function onClose() {
-      return setDisplayDeleteModal(false);
-    },
-    deleteAction: function deleteAction() {
-      return deleteFileById();
-    },
+    enableSaveButton: enableSaveButton,
+    schemaData: schemaData
+  })), modalTargetRef.current), displayDeleteModal && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_admin.DeleteAction, {
+    onClose: () => setDisplayDeleteModal(false),
+    deleteAction: () => deleteFileById(),
     itemName: name
-  }), modalTargetRef.current), type === 'image' ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: "card__image card__image--media-".concat(displayLayout)
-  }, /*#__PURE__*/_react["default"].createElement("img", {
-    src: url,
+  }), modalTargetRef.current), /*#__PURE__*/_react.default.createElement("div", {
+    className: cardMediaClassNames,
+    role: "option",
+    "aria-selected": selected,
+    tabIndex: 0,
+    onClick: handleRowClick,
+    onKeyDown: handleKeyDown
+  }, openEditInModal && /*#__PURE__*/_react.default.createElement("div", {
+    className: "card__select"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "checkbox",
+    "aria-label": `Select ${name}`,
+    checked: !!selected,
+    onChange: handleCheckboxToggle,
+    onClick: handleStopPropagation
+  })), type === 'image' ? /*#__PURE__*/_react.default.createElement("div", {
+    className: `card__image card__image--media-${displayLayout}`
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: (0, _bustUrl.default)(url, updated),
     alt: name
-  })) : /*#__PURE__*/_react["default"].createElement("div", {
+  })) : /*#__PURE__*/_react.default.createElement("div", {
     className: "card__image card__image--media-list-document"
-  }, /*#__PURE__*/_react["default"].createElement("svg", {
+  }, /*#__PURE__*/_react.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "100",
     height: "100",
-    viewBox: "0 0 8 8"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
+    viewBox: "0 0 8 8",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M0 0v8h7v-4h-4v-4h-3zm4 0v3h3l-3-3zm-3 2h1v1h-1v-1zm0 2h1v1h-1v-1zm0 2h4v1h-4v-1z"
-  }))), /*#__PURE__*/_react["default"].createElement("footer", {
-    className: "card__footer card__footer--media-".concat(displayLayout)
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "card__details card__details--media-".concat(displayLayout)
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "card__title card__title--media-".concat(displayLayout)
-  }, /*#__PURE__*/_react["default"].createElement("h2", null, name)), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("span", null, "format: ", extension))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "card__menu card__menu--".concat(displayLayout)
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "more-menu__wrapper more-menu__wrapper--card"
-  }, /*#__PURE__*/_react["default"].createElement(_more["default"], {
-    displayBg: true
-  }, /*#__PURE__*/_react["default"].createElement(_more["default"].Avatar, {
-    isMoreMenu: true
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "material-icons"
-  }, "more_vert")), /*#__PURE__*/_react["default"].createElement(_more["default"].Content, {
-    isMoreMenu: true
-  }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
-    to: "/media/edit/".concat(id),
-    className: "more-menu__link"
-  }, "Edit"), /*#__PURE__*/_react["default"].createElement(_button["default"], {
-    onClick: function onClick(event) {
-      event.preventDefault();
-      event.stopPropagation();
+  }))), /*#__PURE__*/_react.default.createElement("footer", {
+    className: `card__footer card__footer--media-${displayLayout}`
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `card__details card__details--media-${displayLayout}`
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `card__title card__title--media-${displayLayout}`
+  }, /*#__PURE__*/_react.default.createElement("h2", {
+    className: "card__file-name"
+  }, name)), /*#__PURE__*/_react.default.createElement("p", {
+    className: "card__meta"
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Format: ", extension))), /*#__PURE__*/_react.default.createElement("div", {
+    className: `card__menu card__menu--icons card__menu--${displayLayout}`
+  }, openEditInModal ? /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "card__icon-btn",
+    title: "Edit",
+    "aria-label": "Edit",
+    onClick: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDisplayEditModal(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_pluginPageBuilderUi.EditIcon, {
+    width: "20px",
+    height: "20px"
+  })) : /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
+    to: `/media/edit/${id}`,
+    className: "card__icon-btn",
+    title: "Edit",
+    "aria-label": "Edit",
+    onClick: e => e.stopPropagation()
+  }, /*#__PURE__*/_react.default.createElement(_pluginPageBuilderUi.EditIcon, {
+    width: "20px",
+    height: "20px"
+  })), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "card__icon-btn",
+    title: "Delete",
+    "aria-label": "Delete",
+    onClick: e => {
+      e.preventDefault();
+      e.stopPropagation();
       setDisplayDeleteModal(true);
-    },
-    className: "more-menu__link"
-  }, "Delete"))))))));
+    }
+  }, /*#__PURE__*/_react.default.createElement(_pluginPageBuilderUi.DeleteIcon, {
+    width: "18px",
+    height: "18px"
+  }))))));
 };
 CardMedia.propTypes = {
-  name: _propTypes["default"].string.isRequired,
-  url: _propTypes["default"].string.isRequired,
-  id: _propTypes["default"].string.isRequired,
-  mimetype: _propTypes["default"].string.isRequired,
-  displayLayout: _propTypes["default"].string.isRequired,
-  data: _propTypes["default"].object,
-  onSelected: _propTypes["default"].func,
-  updateFile: _propTypes["default"].func.isRequired,
-  removeFile: _propTypes["default"].func.isRequired,
-  selected: _propTypes["default"].bool,
-  modalTargetRef: _propTypes["default"].object.isRequired,
-  index: _propTypes["default"].number.isRequired
+  name: _propTypes.default.string.isRequired,
+  url: _propTypes.default.string.isRequired,
+  id: _propTypes.default.string.isRequired,
+  mimetype: _propTypes.default.string.isRequired,
+  displayLayout: _propTypes.default.string.isRequired,
+  data: _propTypes.default.object,
+  updated: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  onSelected: _propTypes.default.func,
+  updateFile: _propTypes.default.func.isRequired,
+  removeFile: _propTypes.default.func.isRequired,
+  selected: _propTypes.default.bool,
+  modalTargetRef: _propTypes.default.object.isRequired,
+  index: _propTypes.default.number.isRequired,
+  openEditInModal: _propTypes.default.bool
 };
 CardMedia.defaultProps = {
-  onSelected: function onSelected() {},
+  onSelected: () => {},
   selected: false,
-  data: {}
+  data: {},
+  updated: null,
+  openEditInModal: false
 };
-var _default = exports["default"] = CardMedia;
+var _default = exports.default = CardMedia;
 //# sourceMappingURL=CardMedia.js.map