@webiny/app-file-manager 5.43.3 → 6.0.0-alpha.1

package/components/FileDetails/FileDetails.js

@@ -1,118 +1,90 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FileDetails = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _noop = _interopRequireDefault(require("lodash/noop"));
-var _reactHotkeyz = require("react-hotkeyz");
-var _form = require("@webiny/form");
-var _appHeadlessCmsCommon = require("@webiny/app-headless-cms-common");
-var _Drawer = require("@webiny/ui/Drawer");
-var _Progress = require("@webiny/ui/Progress");
-var _Grid = require("@webiny/ui/Grid");
-var _Tabs = require("@webiny/ui/Tabs");
-var _FileDetailsProvider = require("./FileDetailsProvider");
-var _Preview = require("./components/Preview");
-var _PreviewMeta = require("./components/PreviewMeta");
-var _Actions = require("./components/Actions");
-var _Header = require("./components/Header");
-var _Elevation = require("@webiny/ui/Elevation");
-var _Content = require("./components/Content");
-var _SimpleForm = require("@webiny/app-admin/components/SimpleForm");
-var _Footer = require("./components/Footer");
-var _Extensions = require("./components/Extensions");
-var _useFileModel = require("../../hooks/useFileModel");
-var _ = require("../..");
-var _FileProvider = require("../../contexts/FileProvider");
-var _excluded = ["file"];
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } // @ts-expect-error This package has no types.
-var FileDetailsDrawer = /*#__PURE__*/(0, _base.default)(_Drawer.DrawerRight, process.env.NODE_ENV === "production" ? {
-  target: "ekbey2w1"
-} : {
-  target: "ekbey2w1",
-  label: "FileDetailsDrawer"
-})("z-index:70;&.mdc-drawer{width:", function (props) {
-  return props.width;
-}, ";}.mdc-drawer__content{overflow-y:hidden;}&+.mdc-drawer-scrim{z-index:65;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbGVEZXRhaWxzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2QnFFIiwiZmlsZSI6IkZpbGVEZXRhaWxzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VNZW1vLCB1c2VSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBSZWFjdERPTSBmcm9tIFwicmVhY3QtZG9tXCI7XG5pbXBvcnQgbm9vcCBmcm9tIFwibG9kYXNoL25vb3BcIjtcbi8vIEB0cy1leHBlY3QtZXJyb3IgVGhpcyBwYWNrYWdlIGhhcyBubyB0eXBlcy5cbmltcG9ydCB7IHVzZUhvdGtleXMgfSBmcm9tIFwicmVhY3QtaG90a2V5elwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBGaWxlSXRlbSB9IGZyb20gXCJAd2ViaW55L2FwcC1hZG1pbi90eXBlc1wiO1xuaW1wb3J0IHsgRm9ybSwgRm9ybU9uU3VibWl0IH0gZnJvbSBcIkB3ZWJpbnkvZm9ybVwiO1xuaW1wb3J0IHsgcHJlcGFyZUZvcm1EYXRhIH0gZnJvbSBcIkB3ZWJpbnkvYXBwLWhlYWRsZXNzLWNtcy1jb21tb25cIjtcbmltcG9ydCB7IERyYXdlclJpZ2h0LCBEcmF3ZXJDb250ZW50IH0gZnJvbSBcIkB3ZWJpbnkvdWkvRHJhd2VyXCI7XG5pbXBvcnQgeyBDaXJjdWxhclByb2dyZXNzIH0gZnJvbSBcIkB3ZWJpbnkvdWkvUHJvZ3Jlc3NcIjtcbmltcG9ydCB7IENlbGwsIEdyaWQgfSBmcm9tIFwiQHdlYmlueS91aS9HcmlkXCI7XG5pbXBvcnQgeyBUYWIsIFRhYnMgfSBmcm9tIFwiQHdlYmlueS91aS9UYWJzXCI7XG5pbXBvcnQgeyBGaWxlRGV0YWlsc1Byb3ZpZGVyIH0gZnJvbSBcIn4vY29tcG9uZW50cy9GaWxlRGV0YWlscy9GaWxlRGV0YWlsc1Byb3ZpZGVyXCI7XG5pbXBvcnQgeyBQcmV2aWV3IH0gZnJvbSBcIi4vY29tcG9uZW50cy9QcmV2aWV3XCI7XG5pbXBvcnQgeyBQcmV2aWV3TWV0YSB9IGZyb20gXCIuL2NvbXBvbmVudHMvUHJldmlld01ldGFcIjtcbmltcG9ydCB7IEFjdGlvbnMgfSBmcm9tIFwiLi9jb21wb25lbnRzL0FjdGlvbnNcIjtcbmltcG9ydCB7IEhlYWRlciB9IGZyb20gXCIuL2NvbXBvbmVudHMvSGVhZGVyXCI7XG5pbXBvcnQgeyBFbGV2YXRpb24gfSBmcm9tIFwiQHdlYmlueS91aS9FbGV2YXRpb25cIjtcbmltcG9ydCB7IENvbnRlbnQgfSBmcm9tIFwiLi9jb21wb25lbnRzL0NvbnRlbnRcIjtcbmltcG9ydCB7IFNpbXBsZUZvcm0gfSBmcm9tIFwiQHdlYmlueS9hcHAtYWRtaW4vY29tcG9uZW50cy9TaW1wbGVGb3JtXCI7XG5pbXBvcnQgeyBGb290ZXIgfSBmcm9tIFwiLi9jb21wb25lbnRzL0Zvb3RlclwiO1xuaW1wb3J0IHsgRXh0ZW5zaW9ucyB9IGZyb20gXCIuL2NvbXBvbmVudHMvRXh0ZW5zaW9uc1wiO1xuaW1wb3J0IHsgdXNlRmlsZU1vZGVsIH0gZnJvbSBcIn4vaG9va3MvdXNlRmlsZU1vZGVsXCI7XG5pbXBvcnQgeyB1c2VGaWxlTWFuYWdlclZpZXdDb25maWcgfSBmcm9tIFwifi9pbmRleFwiO1xuaW1wb3J0IHsgRmlsZVByb3ZpZGVyIH0gZnJvbSBcIn4vY29udGV4dHMvRmlsZVByb3ZpZGVyXCI7XG5cbnR5cGUgRmlsZURldGFpbHNEcmF3ZXJQcm9wcyA9IFJlYWN0LkNvbXBvbmVudFByb3BzPHR5cGVvZiBEcmF3ZXJSaWdodD4gJiB7IHdpZHRoOiBzdHJpbmcgfTtcblxuY29uc3QgRmlsZURldGFpbHNEcmF3ZXIgPSBzdHlsZWQoRHJhd2VyUmlnaHQpPEZpbGVEZXRhaWxzRHJhd2VyUHJvcHM+YFxuICAgIHotaW5kZXg6IDcwO1xuICAgICYubWRjLWRyYXdlciB7XG4gICAgICAgIHdpZHRoOiAke3Byb3BzID0+IHByb3BzLndpZHRofTtcbiAgICB9XG4gICAgLm1kYy1kcmF3ZXJfX2NvbnRlbnQge1xuICAgICAgICBvdmVyZmxvdy15OiBoaWRkZW47XG4gICAgfVxuICAgICYgKyAubWRjLWRyYXdlci1zY3JpbSB7XG4gICAgICAgIHotaW5kZXg6IDY1O1xuICAgIH1cbmA7XG5cbmNvbnN0IEZvcm1Db250YWluZXIgPSBzdHlsZWQoU2ltcGxlRm9ybSlgXG4gICAgbWFyZ2luOiAwO1xuYDtcblxuaW50ZXJmYWNlIEZpbGVEZXRhaWxzSW5uZXJQcm9wcyB7XG4gICAgZmlsZTogRmlsZUl0ZW07XG4gICAgb25DbG9zZTogKCkgPT4gdm9pZDtcbiAgICBvblN1Ym1pdDogKGZpbGVEYXRhOiBGaWxlSXRlbSkgPT4gdm9pZDtcbn1cblxuY29uc3QgRmlsZURldGFpbHNJbm5lciA9ICh7IGZpbGUsIC4uLnByb3BzIH06IEZpbGVEZXRhaWxzSW5uZXJQcm9wcykgPT4ge1xuICAgIGNvbnN0IGZpbGVNb2RlbCA9IHVzZUZpbGVNb2RlbCgpO1xuICAgIGNvbnN0IHsgZmlsZURldGFpbHMgfSA9IHVzZUZpbGVNYW5hZ2VyVmlld0NvbmZpZygpO1xuXG4gICAgY29uc3QgWywgbGVmdFBhbmVsID0gXCIxXCIsIHJpZ2h0UGFuZWwgPSBcIjFcIl0gPSBmaWxlRGV0YWlscy53aWR0aC5zcGxpdChcIixcIik7XG5cbiAgICBjb25zdCBleHRlbnNpb25GaWVsZHMgPSB1c2VNZW1vKCgpID0+IHtcbiAgICAgICAgY29uc3QgZmllbGRzID0gZmlsZU1vZGVsLmZpZWxkcy5maW5kKGZpZWxkID0+IGZpZWxkLmZpZWxkSWQgPT09IFwiZXh0ZW5zaW9uc1wiKTtcbiAgICAgICAgaWYgKCFmaWVsZHM/LnNldHRpbmdzPy5maWVsZHMpIHtcbiAgICAgICAgICAgIHJldHVybiBbXTtcbiAgICAgICAgfVxuICAgICAgICByZXR1cm4gZmllbGRzPy5zZXR0aW5ncz8uZmllbGRzIHx8IFtdO1xuICAgIH0sIFtmaWxlTW9kZWxdKTtcblxuICAgIGNvbnN0IG9uU3VibWl0OiBGb3JtT25TdWJtaXQ8RmlsZUl0ZW0+ID0gYXN5bmMgZGF0YSA9PiB7XG4gICAgICAgIGNvbnN0IGZpbGVEYXRhID0gcHJlcGFyZUZvcm1EYXRhKGRhdGEsIGZpbGVNb2RlbC5maWVsZHMpO1xuICAgICAgICBwcm9wcy5vblN1Ym1pdCh7IC4uLmZpbGUsIC4uLmZpbGVEYXRhIH0pO1xuICAgIH07XG5cbiAgICBjb25zdCBiYXNpY0ZpZWxkc0VsZW1lbnQgPSAoXG4gICAgICAgIDxHcmlkPlxuICAgICAgICAgICAge2ZpbGVEZXRhaWxzLmZpZWxkcy5tYXAoZmllbGQgPT4gKFxuICAgICAgICAgICAgICAgIDxDZWxsIHNwYW49ezEyfSBrZXk9e2ZpZWxkLm5hbWV9PlxuICAgICAgICAgICAgICAgICAgICB7ZmllbGQuZWxlbWVudH1cbiAgICAgICAgICAgICAgICA8L0NlbGw+XG4gICAgICAgICAgICApKX1cbiAgICAgICAgPC9HcmlkPlxuICAgICk7XG5cbiAgICBjb25zdCBleHRlbnNpb25GaWVsZHNFbGVtZW50ID1cbiAgICAgICAgZXh0ZW5zaW9uRmllbGRzLmxlbmd0aCA+IDAgPyA8RXh0ZW5zaW9ucyBtb2RlbD17ZmlsZU1vZGVsfSAvPiA6IG51bGw7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8Rm9ybSBkYXRhPXtmaWxlfSBvblN1Ym1pdD17b25TdWJtaXR9PlxuICAgICAgICAgICAgeygpID0+IChcbiAgICAgICAgICAgICAgICA8Rm9ybUNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICAgICAgPEhlYWRlciAvPlxuICAgICAgICAgICAgICAgICAgICA8Q29udGVudD5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxDb250ZW50LlBhbmVsIGZsZXg9e3BhcnNlRmxvYXQobGVmdFBhbmVsKX0+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPEVsZXZhdGlvbiB6PXsyfSBzdHlsZT17eyBtYXJnaW46IDIwIH19PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8QWN0aW9ucyAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8UHJldmlldyAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8UHJldmlld01ldGEgLz5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L0VsZXZhdGlvbj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvQ29udGVudC5QYW5lbD5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxDb250ZW50LlBhbmVsIGZsZXg9e3BhcnNlRmxvYXQocmlnaHRQYW5lbCl9PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHtmaWxlRGV0YWlscy5ncm91cEZpZWxkcyA/IChcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPFRhYnM+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8VGFiIGxhYmVsPXtcIkJhc2ljIERldGFpbHNcIn0+e2Jhc2ljRmllbGRzRWxlbWVudH08L1RhYj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxUYWIgbGFiZWw9e1wiQWR2YW5jZWQgRGV0YWlsc1wifT57ZXh0ZW5zaW9uRmllbGRzRWxlbWVudH08L1RhYj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9UYWJzPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB7YmFzaWNGaWVsZHNFbGVtZW50fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAge2V4dGVuc2lvbkZpZWxkc0VsZW1lbnR9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgICAgICAgICAgICA8L0NvbnRlbnQuUGFuZWw+XG4gICAgICAgICAgICAgICAgICAgIDwvQ29udGVudD5cbiAgICAgICAgICAgICAgICAgICAgPEZvb3RlciAvPlxuICAgICAgICAgICAgICAgIDwvRm9ybUNvbnRhaW5lcj5cbiAgICAgICAgICAgICl9XG4gICAgICAgIDwvRm9ybT5cbiAgICApO1xufTtcblxuZnVuY3Rpb24gZ2V0UG9ydGFsVGFyZ2V0KCkge1xuICAgIGxldCB0YXJnZXQgPSB3aW5kb3cuZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoXCJmaWxlLWRldGFpbHMtZHJhd2VyXCIpO1xuICAgIGlmICghdGFyZ2V0KSB7XG4gICAgICAgIHRhcmdldCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoXCJkaXZcIik7XG4gICAgICAgIHRhcmdldC5zZXRBdHRyaWJ1dGUoXCJpZFwiLCBcImZpbGUtZGV0YWlscy1kcmF3ZXJcIik7XG4gICAgICAgIGRvY3VtZW50LmJvZHkgJiYgZG9jdW1lbnQuYm9keS5hcHBlbmRDaGlsZCh0YXJnZXQpO1xuICAgIH1cbiAgICByZXR1cm4gdGFyZ2V0O1xufVxuXG5pbnRlcmZhY2UgRmlsZURldGFpbHNQb3J0YWxQcm9wcyB7XG4gICAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbn1cblxuY29uc3QgRmlsZURldGFpbHNQb3J0YWwgPSAoeyBjaGlsZHJlbiB9OiBGaWxlRGV0YWlsc1BvcnRhbFByb3BzKSA9PiB7XG4gICAgY29uc3QgY29udGFpbmVyUmVmID0gdXNlUmVmPEhUTUxFbGVtZW50PihnZXRQb3J0YWxUYXJnZXQoKSk7XG5cbiAgICByZXR1cm4gUmVhY3RET00uY3JlYXRlUG9ydGFsKGNoaWxkcmVuLCBjb250YWluZXJSZWYuY3VycmVudCk7XG59O1xuXG5leHBvcnQgaW50ZXJmYWNlIEZpbGVEZXRhaWxzUHJvcHMge1xuICAgIGZpbGU/OiBGaWxlSXRlbTtcbiAgICBvcGVuOiBib29sZWFuO1xuICAgIGxvYWRpbmc6IHN0cmluZyB8IG51bGw7XG4gICAgb25DbG9zZTogKCkgPT4gdm9pZDtcbiAgICBvblNhdmU6IChmaWxlOiBGaWxlSXRlbSkgPT4gdm9pZDtcbiAgICBvblNldEZpbGU/OiAoZmlsZTogRmlsZUl0ZW0pID0+IHZvaWQ7XG59XG5cbmV4cG9ydCBjb25zdCBGaWxlRGV0YWlscyA9ICh7XG4gICAgb3BlbixcbiAgICBvbkNsb3NlLFxuICAgIG9uU2F2ZSxcbiAgICBsb2FkaW5nLFxuICAgIGZpbGUsXG4gICAgb25TZXRGaWxlID0gbm9vcFxufTogRmlsZURldGFpbHNQcm9wcykgPT4ge1xuICAgIHVzZUhvdGtleXMoe1xuICAgICAgICB6SW5kZXg6IDU1LFxuICAgICAgICBkaXNhYmxlZDogIW9wZW4sXG4gICAgICAgIGtleXM6IHtcbiAgICAgICAgICAgIGVzYzogb25DbG9zZVxuICAgICAgICB9XG4gICAgfSk7XG5cbiAgICBjb25zdCB7IGZpbGVEZXRhaWxzIH0gPSB1c2VGaWxlTWFuYWdlclZpZXdDb25maWcoKTtcblxuICAgIGNvbnN0IGRyYXdlcldpZHRoID0gZmlsZURldGFpbHMud2lkdGguc3BsaXQoXCIsXCIpWzBdO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPEZpbGVEZXRhaWxzUG9ydGFsPlxuICAgICAgICAgICAgPEZpbGVEZXRhaWxzRHJhd2VyXG4gICAgICAgICAgICAgICAgd2lkdGg9e2RyYXdlcldpZHRofVxuICAgICAgICAgICAgICAgIG1vZGFsXG4gICAgICAgICAgICAgICAgb3Blbj17b3Blbn1cbiAgICAgICAgICAgICAgICBvbkNsb3NlPXtvbkNsb3NlfVxuICAgICAgICAgICAgICAgIGRhdGEtdGVzdGlkPXtcImZtLmZpbGUtZGV0YWlscy5kcmF3ZXJcIn1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICA8RHJhd2VyQ29udGVudD5cbiAgICAgICAgICAgICAgICAgICAge2xvYWRpbmcgJiYgPENpcmN1bGFyUHJvZ3Jlc3MgbGFiZWw9e2xvYWRpbmd9IC8+fVxuICAgICAgICAgICAgICAgICAgICB7ZmlsZSAmJiAoXG4gICAgICAgICAgICAgICAgICAgICAgICA8RmlsZVByb3ZpZGVyIGZpbGU9e2ZpbGV9PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxGaWxlRGV0YWlsc1Byb3ZpZGVyIGhpZGVGaWxlRGV0YWlscz17b25DbG9zZX0gb25TZXRGaWxlPXtvblNldEZpbGV9PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8RmlsZURldGFpbHNJbm5lciBmaWxlPXtmaWxlfSBvbkNsb3NlPXtvbkNsb3NlfSBvblN1Ym1pdD17b25TYXZlfSAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvRmlsZURldGFpbHNQcm92aWRlcj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvRmlsZVByb3ZpZGVyPlxuICAgICAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICAgIDwvRHJhd2VyQ29udGVudD5cbiAgICAgICAgICAgIDwvRmlsZURldGFpbHNEcmF3ZXI+XG4gICAgICAgIDwvRmlsZURldGFpbHNQb3J0YWw+XG4gICAgKTtcbn07XG4iXX0= */"));
-var FormContainer = /*#__PURE__*/(0, _base.default)(_SimpleForm.SimpleForm, process.env.NODE_ENV === "production" ? {
-  target: "ekbey2w0"
-} : {
-  target: "ekbey2w0",
-  label: "FormContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "ti75j2",
-  styles: "margin:0"
-} : {
-  name: "ti75j2",
-  styles: "margin:0",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbGVEZXRhaWxzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQ3dDIiwiZmlsZSI6IkZpbGVEZXRhaWxzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VNZW1vLCB1c2VSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBSZWFjdERPTSBmcm9tIFwicmVhY3QtZG9tXCI7XG5pbXBvcnQgbm9vcCBmcm9tIFwibG9kYXNoL25vb3BcIjtcbi8vIEB0cy1leHBlY3QtZXJyb3IgVGhpcyBwYWNrYWdlIGhhcyBubyB0eXBlcy5cbmltcG9ydCB7IHVzZUhvdGtleXMgfSBmcm9tIFwicmVhY3QtaG90a2V5elwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBGaWxlSXRlbSB9IGZyb20gXCJAd2ViaW55L2FwcC1hZG1pbi90eXBlc1wiO1xuaW1wb3J0IHsgRm9ybSwgRm9ybU9uU3VibWl0IH0gZnJvbSBcIkB3ZWJpbnkvZm9ybVwiO1xuaW1wb3J0IHsgcHJlcGFyZUZvcm1EYXRhIH0gZnJvbSBcIkB3ZWJpbnkvYXBwLWhlYWRsZXNzLWNtcy1jb21tb25cIjtcbmltcG9ydCB7IERyYXdlclJpZ2h0LCBEcmF3ZXJDb250ZW50IH0gZnJvbSBcIkB3ZWJpbnkvdWkvRHJhd2VyXCI7XG5pbXBvcnQgeyBDaXJjdWxhclByb2dyZXNzIH0gZnJvbSBcIkB3ZWJpbnkvdWkvUHJvZ3Jlc3NcIjtcbmltcG9ydCB7IENlbGwsIEdyaWQgfSBmcm9tIFwiQHdlYmlueS91aS9HcmlkXCI7XG5pbXBvcnQgeyBUYWIsIFRhYnMgfSBmcm9tIFwiQHdlYmlueS91aS9UYWJzXCI7XG5pbXBvcnQgeyBGaWxlRGV0YWlsc1Byb3ZpZGVyIH0gZnJvbSBcIn4vY29tcG9uZW50cy9GaWxlRGV0YWlscy9GaWxlRGV0YWlsc1Byb3ZpZGVyXCI7XG5pbXBvcnQgeyBQcmV2aWV3IH0gZnJvbSBcIi4vY29tcG9uZW50cy9QcmV2aWV3XCI7XG5pbXBvcnQgeyBQcmV2aWV3TWV0YSB9IGZyb20gXCIuL2NvbXBvbmVudHMvUHJldmlld01ldGFcIjtcbmltcG9ydCB7IEFjdGlvbnMgfSBmcm9tIFwiLi9jb21wb25lbnRzL0FjdGlvbnNcIjtcbmltcG9ydCB7IEhlYWRlciB9IGZyb20gXCIuL2NvbXBvbmVudHMvSGVhZGVyXCI7XG5pbXBvcnQgeyBFbGV2YXRpb24gfSBmcm9tIFwiQHdlYmlueS91aS9FbGV2YXRpb25cIjtcbmltcG9ydCB7IENvbnRlbnQgfSBmcm9tIFwiLi9jb21wb25lbnRzL0NvbnRlbnRcIjtcbmltcG9ydCB7IFNpbXBsZUZvcm0gfSBmcm9tIFwiQHdlYmlueS9hcHAtYWRtaW4vY29tcG9uZW50cy9TaW1wbGVGb3JtXCI7XG5pbXBvcnQgeyBGb290ZXIgfSBmcm9tIFwiLi9jb21wb25lbnRzL0Zvb3RlclwiO1xuaW1wb3J0IHsgRXh0ZW5zaW9ucyB9IGZyb20gXCIuL2NvbXBvbmVudHMvRXh0ZW5zaW9uc1wiO1xuaW1wb3J0IHsgdXNlRmlsZU1vZGVsIH0gZnJvbSBcIn4vaG9va3MvdXNlRmlsZU1vZGVsXCI7XG5pbXBvcnQgeyB1c2VGaWxlTWFuYWdlclZpZXdDb25maWcgfSBmcm9tIFwifi9pbmRleFwiO1xuaW1wb3J0IHsgRmlsZVByb3ZpZGVyIH0gZnJvbSBcIn4vY29udGV4dHMvRmlsZVByb3ZpZGVyXCI7XG5cbnR5cGUgRmlsZURldGFpbHNEcmF3ZXJQcm9wcyA9IFJlYWN0LkNvbXBvbmVudFByb3BzPHR5cGVvZiBEcmF3ZXJSaWdodD4gJiB7IHdpZHRoOiBzdHJpbmcgfTtcblxuY29uc3QgRmlsZURldGFpbHNEcmF3ZXIgPSBzdHlsZWQoRHJhd2VyUmlnaHQpPEZpbGVEZXRhaWxzRHJhd2VyUHJvcHM+YFxuICAgIHotaW5kZXg6IDcwO1xuICAgICYubWRjLWRyYXdlciB7XG4gICAgICAgIHdpZHRoOiAke3Byb3BzID0+IHByb3BzLndpZHRofTtcbiAgICB9XG4gICAgLm1kYy1kcmF3ZXJfX2NvbnRlbnQge1xuICAgICAgICBvdmVyZmxvdy15OiBoaWRkZW47XG4gICAgfVxuICAgICYgKyAubWRjLWRyYXdlci1zY3JpbSB7XG4gICAgICAgIHotaW5kZXg6IDY1O1xuICAgIH1cbmA7XG5cbmNvbnN0IEZvcm1Db250YWluZXIgPSBzdHlsZWQoU2ltcGxlRm9ybSlgXG4gICAgbWFyZ2luOiAwO1xuYDtcblxuaW50ZXJmYWNlIEZpbGVEZXRhaWxzSW5uZXJQcm9wcyB7XG4gICAgZmlsZTogRmlsZUl0ZW07XG4gICAgb25DbG9zZTogKCkgPT4gdm9pZDtcbiAgICBvblN1Ym1pdDogKGZpbGVEYXRhOiBGaWxlSXRlbSkgPT4gdm9pZDtcbn1cblxuY29uc3QgRmlsZURldGFpbHNJbm5lciA9ICh7IGZpbGUsIC4uLnByb3BzIH06IEZpbGVEZXRhaWxzSW5uZXJQcm9wcykgPT4ge1xuICAgIGNvbnN0IGZpbGVNb2RlbCA9IHVzZUZpbGVNb2RlbCgpO1xuICAgIGNvbnN0IHsgZmlsZURldGFpbHMgfSA9IHVzZUZpbGVNYW5hZ2VyVmlld0NvbmZpZygpO1xuXG4gICAgY29uc3QgWywgbGVmdFBhbmVsID0gXCIxXCIsIHJpZ2h0UGFuZWwgPSBcIjFcIl0gPSBmaWxlRGV0YWlscy53aWR0aC5zcGxpdChcIixcIik7XG5cbiAgICBjb25zdCBleHRlbnNpb25GaWVsZHMgPSB1c2VNZW1vKCgpID0+IHtcbiAgICAgICAgY29uc3QgZmllbGRzID0gZmlsZU1vZGVsLmZpZWxkcy5maW5kKGZpZWxkID0+IGZpZWxkLmZpZWxkSWQgPT09IFwiZXh0ZW5zaW9uc1wiKTtcbiAgICAgICAgaWYgKCFmaWVsZHM/LnNldHRpbmdzPy5maWVsZHMpIHtcbiAgICAgICAgICAgIHJldHVybiBbXTtcbiAgICAgICAgfVxuICAgICAgICByZXR1cm4gZmllbGRzPy5zZXR0aW5ncz8uZmllbGRzIHx8IFtdO1xuICAgIH0sIFtmaWxlTW9kZWxdKTtcblxuICAgIGNvbnN0IG9uU3VibWl0OiBGb3JtT25TdWJtaXQ8RmlsZUl0ZW0+ID0gYXN5bmMgZGF0YSA9PiB7XG4gICAgICAgIGNvbnN0IGZpbGVEYXRhID0gcHJlcGFyZUZvcm1EYXRhKGRhdGEsIGZpbGVNb2RlbC5maWVsZHMpO1xuICAgICAgICBwcm9wcy5vblN1Ym1pdCh7IC4uLmZpbGUsIC4uLmZpbGVEYXRhIH0pO1xuICAgIH07XG5cbiAgICBjb25zdCBiYXNpY0ZpZWxkc0VsZW1lbnQgPSAoXG4gICAgICAgIDxHcmlkPlxuICAgICAgICAgICAge2ZpbGVEZXRhaWxzLmZpZWxkcy5tYXAoZmllbGQgPT4gKFxuICAgICAgICAgICAgICAgIDxDZWxsIHNwYW49ezEyfSBrZXk9e2ZpZWxkLm5hbWV9PlxuICAgICAgICAgICAgICAgICAgICB7ZmllbGQuZWxlbWVudH1cbiAgICAgICAgICAgICAgICA8L0NlbGw+XG4gICAgICAgICAgICApKX1cbiAgICAgICAgPC9HcmlkPlxuICAgICk7XG5cbiAgICBjb25zdCBleHRlbnNpb25GaWVsZHNFbGVtZW50ID1cbiAgICAgICAgZXh0ZW5zaW9uRmllbGRzLmxlbmd0aCA+IDAgPyA8RXh0ZW5zaW9ucyBtb2RlbD17ZmlsZU1vZGVsfSAvPiA6IG51bGw7XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8Rm9ybSBkYXRhPXtmaWxlfSBvblN1Ym1pdD17b25TdWJtaXR9PlxuICAgICAgICAgICAgeygpID0+IChcbiAgICAgICAgICAgICAgICA8Rm9ybUNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICAgICAgPEhlYWRlciAvPlxuICAgICAgICAgICAgICAgICAgICA8Q29udGVudD5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxDb250ZW50LlBhbmVsIGZsZXg9e3BhcnNlRmxvYXQobGVmdFBhbmVsKX0+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPEVsZXZhdGlvbiB6PXsyfSBzdHlsZT17eyBtYXJnaW46IDIwIH19PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8QWN0aW9ucyAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8UHJldmlldyAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8UHJldmlld01ldGEgLz5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L0VsZXZhdGlvbj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvQ29udGVudC5QYW5lbD5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxDb250ZW50LlBhbmVsIGZsZXg9e3BhcnNlRmxvYXQocmlnaHRQYW5lbCl9PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHtmaWxlRGV0YWlscy5ncm91cEZpZWxkcyA/IChcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPFRhYnM+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8VGFiIGxhYmVsPXtcIkJhc2ljIERldGFpbHNcIn0+e2Jhc2ljRmllbGRzRWxlbWVudH08L1RhYj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxUYWIgbGFiZWw9e1wiQWR2YW5jZWQgRGV0YWlsc1wifT57ZXh0ZW5zaW9uRmllbGRzRWxlbWVudH08L1RhYj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9UYWJzPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB7YmFzaWNGaWVsZHNFbGVtZW50fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAge2V4dGVuc2lvbkZpZWxkc0VsZW1lbnR9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgICAgICAgICAgICA8L0NvbnRlbnQuUGFuZWw+XG4gICAgICAgICAgICAgICAgICAgIDwvQ29udGVudD5cbiAgICAgICAgICAgICAgICAgICAgPEZvb3RlciAvPlxuICAgICAgICAgICAgICAgIDwvRm9ybUNvbnRhaW5lcj5cbiAgICAgICAgICAgICl9XG4gICAgICAgIDwvRm9ybT5cbiAgICApO1xufTtcblxuZnVuY3Rpb24gZ2V0UG9ydGFsVGFyZ2V0KCkge1xuICAgIGxldCB0YXJnZXQgPSB3aW5kb3cuZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoXCJmaWxlLWRldGFpbHMtZHJhd2VyXCIpO1xuICAgIGlmICghdGFyZ2V0KSB7XG4gICAgICAgIHRhcmdldCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoXCJkaXZcIik7XG4gICAgICAgIHRhcmdldC5zZXRBdHRyaWJ1dGUoXCJpZFwiLCBcImZpbGUtZGV0YWlscy1kcmF3ZXJcIik7XG4gICAgICAgIGRvY3VtZW50LmJvZHkgJiYgZG9jdW1lbnQuYm9keS5hcHBlbmRDaGlsZCh0YXJnZXQpO1xuICAgIH1cbiAgICByZXR1cm4gdGFyZ2V0O1xufVxuXG5pbnRlcmZhY2UgRmlsZURldGFpbHNQb3J0YWxQcm9wcyB7XG4gICAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbn1cblxuY29uc3QgRmlsZURldGFpbHNQb3J0YWwgPSAoeyBjaGlsZHJlbiB9OiBGaWxlRGV0YWlsc1BvcnRhbFByb3BzKSA9PiB7XG4gICAgY29uc3QgY29udGFpbmVyUmVmID0gdXNlUmVmPEhUTUxFbGVtZW50PihnZXRQb3J0YWxUYXJnZXQoKSk7XG5cbiAgICByZXR1cm4gUmVhY3RET00uY3JlYXRlUG9ydGFsKGNoaWxkcmVuLCBjb250YWluZXJSZWYuY3VycmVudCk7XG59O1xuXG5leHBvcnQgaW50ZXJmYWNlIEZpbGVEZXRhaWxzUHJvcHMge1xuICAgIGZpbGU/OiBGaWxlSXRlbTtcbiAgICBvcGVuOiBib29sZWFuO1xuICAgIGxvYWRpbmc6IHN0cmluZyB8IG51bGw7XG4gICAgb25DbG9zZTogKCkgPT4gdm9pZDtcbiAgICBvblNhdmU6IChmaWxlOiBGaWxlSXRlbSkgPT4gdm9pZDtcbiAgICBvblNldEZpbGU/OiAoZmlsZTogRmlsZUl0ZW0pID0+IHZvaWQ7XG59XG5cbmV4cG9ydCBjb25zdCBGaWxlRGV0YWlscyA9ICh7XG4gICAgb3BlbixcbiAgICBvbkNsb3NlLFxuICAgIG9uU2F2ZSxcbiAgICBsb2FkaW5nLFxuICAgIGZpbGUsXG4gICAgb25TZXRGaWxlID0gbm9vcFxufTogRmlsZURldGFpbHNQcm9wcykgPT4ge1xuICAgIHVzZUhvdGtleXMoe1xuICAgICAgICB6SW5kZXg6IDU1LFxuICAgICAgICBkaXNhYmxlZDogIW9wZW4sXG4gICAgICAgIGtleXM6IHtcbiAgICAgICAgICAgIGVzYzogb25DbG9zZVxuICAgICAgICB9XG4gICAgfSk7XG5cbiAgICBjb25zdCB7IGZpbGVEZXRhaWxzIH0gPSB1c2VGaWxlTWFuYWdlclZpZXdDb25maWcoKTtcblxuICAgIGNvbnN0IGRyYXdlcldpZHRoID0gZmlsZURldGFpbHMud2lkdGguc3BsaXQoXCIsXCIpWzBdO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPEZpbGVEZXRhaWxzUG9ydGFsPlxuICAgICAgICAgICAgPEZpbGVEZXRhaWxzRHJhd2VyXG4gICAgICAgICAgICAgICAgd2lkdGg9e2RyYXdlcldpZHRofVxuICAgICAgICAgICAgICAgIG1vZGFsXG4gICAgICAgICAgICAgICAgb3Blbj17b3Blbn1cbiAgICAgICAgICAgICAgICBvbkNsb3NlPXtvbkNsb3NlfVxuICAgICAgICAgICAgICAgIGRhdGEtdGVzdGlkPXtcImZtLmZpbGUtZGV0YWlscy5kcmF3ZXJcIn1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICA8RHJhd2VyQ29udGVudD5cbiAgICAgICAgICAgICAgICAgICAge2xvYWRpbmcgJiYgPENpcmN1bGFyUHJvZ3Jlc3MgbGFiZWw9e2xvYWRpbmd9IC8+fVxuICAgICAgICAgICAgICAgICAgICB7ZmlsZSAmJiAoXG4gICAgICAgICAgICAgICAgICAgICAgICA8RmlsZVByb3ZpZGVyIGZpbGU9e2ZpbGV9PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxGaWxlRGV0YWlsc1Byb3ZpZGVyIGhpZGVGaWxlRGV0YWlscz17b25DbG9zZX0gb25TZXRGaWxlPXtvblNldEZpbGV9PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8RmlsZURldGFpbHNJbm5lciBmaWxlPXtmaWxlfSBvbkNsb3NlPXtvbkNsb3NlfSBvblN1Ym1pdD17b25TYXZlfSAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvRmlsZURldGFpbHNQcm92aWRlcj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvRmlsZVByb3ZpZGVyPlxuICAgICAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICAgIDwvRHJhd2VyQ29udGVudD5cbiAgICAgICAgICAgIDwvRmlsZURldGFpbHNEcmF3ZXI+XG4gICAgICAgIDwvRmlsZURldGFpbHNQb3J0YWw+XG4gICAgKTtcbn07XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var FileDetailsInner = function FileDetailsInner(_ref) {
-  var file = _ref.file,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var fileModel = (0, _useFileModel.useFileModel)();
-  var _useFileManagerViewCo = (0, _.useFileManagerViewConfig)(),
-    fileDetails = _useFileManagerViewCo.fileDetails;
-  var _fileDetails$width$sp = fileDetails.width.split(","),
-    _fileDetails$width$sp2 = (0, _slicedToArray2.default)(_fileDetails$width$sp, 3),
-    _fileDetails$width$sp3 = _fileDetails$width$sp2[1],
-    leftPanel = _fileDetails$width$sp3 === void 0 ? "1" : _fileDetails$width$sp3,
-    _fileDetails$width$sp4 = _fileDetails$width$sp2[2],
-    rightPanel = _fileDetails$width$sp4 === void 0 ? "1" : _fileDetails$width$sp4;
-  var extensionFields = (0, _react.useMemo)(function () {
-    var fields = fileModel.fields.find(function (field) {
-      return field.fieldId === "extensions";
-    });
+import React, { useEffect, useMemo, useRef } from "react";
+import ReactDOM from "react-dom";
+import noop from "lodash/noop";
+// @ts-expect-error This package has no types.
+import { useHotkeys } from "react-hotkeyz";
+import { Drawer, Grid, OverlayLoader, Tabs } from "@webiny/admin-ui";
+import { Form } from "@webiny/form";
+import { prepareFormData } from "@webiny/app-headless-cms-common";
+import { FileDetailsProvider } from "./FileDetailsProvider";
+import { Preview } from "./components/Preview";
+import { Actions } from "./components/Actions";
+import { Content } from "./components/Content";
+import { Extensions } from "./components/Extensions";
+import { Description } from "./components/Description";
+import { useFileModel } from "../../hooks/useFileModel";
+import { useFileManagerViewConfig } from "../..";
+import { FileProvider } from "../../contexts/FileProvider";
+const FileDetailsInner = ({
+  file,
+  onForm,
+  ...props
+}) => {
+  const formRef = /*#__PURE__*/React.createRef();
+  useEffect(() => {
+    if (formRef.current) {
+      onForm(formRef.current);
+    }
+  }, []);
+  const fileModel = useFileModel();
+  const {
+    fileDetails
+  } = useFileManagerViewConfig();
+  const [, leftPanel = "1", rightPanel = "1"] = fileDetails.width.split(",");
+  const extensionFields = useMemo(() => {
+    const fields = fileModel.fields.find(field => field.fieldId === "extensions");
     if (!fields?.settings?.fields) {
       return [];
     }
     return fields?.settings?.fields || [];
   }, [fileModel]);
-  var onSubmit = async function onSubmit(data) {
-    var fileData = (0, _appHeadlessCmsCommon.prepareFormData)(data, fileModel.fields);
-    props.onSubmit((0, _objectSpread2.default)((0, _objectSpread2.default)({}, file), fileData));
+  const onSubmit = async data => {
+    const fileData = prepareFormData(data, fileModel.fields);
+    props.onSubmit({
+      ...file,
+      ...fileData
+    });
   };
-  var basicFieldsElement = /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, fileDetails.fields.map(function (field) {
-    return /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-      span: 12,
-      key: field.name
-    }, field.element);
-  }));
-  var extensionFieldsElement = extensionFields.length > 0 ? /*#__PURE__*/_react.default.createElement(_Extensions.Extensions, {
+  const basicFieldsElement = /*#__PURE__*/React.createElement(Grid, null, fileDetails.fields.map(field => /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 12,
+    key: field.name
+  }, field.element)));
+  const extensionFieldsElement = extensionFields.length > 0 ? /*#__PURE__*/React.createElement(Extensions, {
     model: fileModel
   }) : null;
-  return /*#__PURE__*/_react.default.createElement(_form.Form, {
+  return /*#__PURE__*/React.createElement(Form, {
     data: file,
-    onSubmit: onSubmit
-  }, function () {
-    return /*#__PURE__*/_react.default.createElement(FormContainer, null, /*#__PURE__*/_react.default.createElement(_Header.Header, null), /*#__PURE__*/_react.default.createElement(_Content.Content, null, /*#__PURE__*/_react.default.createElement(_Content.Content.Panel, {
-      flex: parseFloat(leftPanel)
-    }, /*#__PURE__*/_react.default.createElement(_Elevation.Elevation, {
-      z: 2,
-      style: {
-        margin: 20
-      }
-    }, /*#__PURE__*/_react.default.createElement(_Actions.Actions, null), /*#__PURE__*/_react.default.createElement(_Preview.Preview, null), /*#__PURE__*/_react.default.createElement(_PreviewMeta.PreviewMeta, null))), /*#__PURE__*/_react.default.createElement(_Content.Content.Panel, {
-      flex: parseFloat(rightPanel)
-    }, fileDetails.groupFields ? /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, null, /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
-      label: "Basic Details"
-    }, basicFieldsElement), /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
-      label: "Advanced Details"
-    }, extensionFieldsElement)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, basicFieldsElement, extensionFieldsElement))), /*#__PURE__*/_react.default.createElement(_Footer.Footer, null));
-  });
+    onSubmit: onSubmit,
+    ref: formRef
+  }, () => /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Content.Panel, {
+    flex: parseFloat(leftPanel)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-flex-col wby-justify-between wby-gap-md wby-h-full wby-px-lg wby-py-md"
+  }, /*#__PURE__*/React.createElement(Actions, null), /*#__PURE__*/React.createElement(Preview, null))), /*#__PURE__*/React.createElement(Content.Panel, {
+    flex: parseFloat(rightPanel)
+  }, fileDetails.groupFields ? /*#__PURE__*/React.createElement(Tabs, {
+    size: "md",
+    spacing: "lg",
+    separator: true,
+    tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "basic-details",
+      value: "basic-details",
+      trigger: "Basic details",
+      content: basicFieldsElement
+    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      key: "advanced-details",
+      value: "advanced-details",
+      trigger: "Advanced details",
+      content: extensionFieldsElement
+    })]
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: "wby-p-lg"
+  }, basicFieldsElement, /*#__PURE__*/React.createElement("div", {
+    className: "wby-mt-lg"
+  }, extensionFieldsElement)))));
 };
 function getPortalTarget() {
-  var target = window.document.getElementById("file-details-drawer");
+  let target = window.document.getElementById("file-details-drawer");
   if (!target) {
     target = document.createElement("div");
     target.setAttribute("id", "file-details-drawer");
@@ -120,47 +92,64 @@ function getPortalTarget() {
   }
   return target;
 }
-var FileDetailsPortal = function FileDetailsPortal(_ref2) {
-  var children = _ref2.children;
-  var containerRef = (0, _react.useRef)(getPortalTarget());
-  return /*#__PURE__*/_reactDom.default.createPortal(children, containerRef.current);
+const FileDetailsPortal = ({
+  children
+}) => {
+  const containerRef = useRef(getPortalTarget());
+  return /*#__PURE__*/ReactDOM.createPortal(children, containerRef.current);
 };
-var FileDetails = exports.FileDetails = function FileDetails(_ref3) {
-  var open = _ref3.open,
-    onClose = _ref3.onClose,
-    onSave = _ref3.onSave,
-    loading = _ref3.loading,
-    file = _ref3.file,
-    _ref3$onSetFile = _ref3.onSetFile,
-    onSetFile = _ref3$onSetFile === void 0 ? _noop.default : _ref3$onSetFile;
-  (0, _reactHotkeyz.useHotkeys)({
-    zIndex: 55,
+export const FileDetails = ({
+  open,
+  onClose,
+  onSave,
+  loading,
+  file,
+  onSetFile = noop
+}) => {
+  useHotkeys({
+    zIndex: 50,
     disabled: !open,
     keys: {
       esc: onClose
     }
   });
-  var _useFileManagerViewCo2 = (0, _.useFileManagerViewConfig)(),
-    fileDetails = _useFileManagerViewCo2.fileDetails;
-  var drawerWidth = fileDetails.width.split(",")[0];
-  return /*#__PURE__*/_react.default.createElement(FileDetailsPortal, null, /*#__PURE__*/_react.default.createElement(FileDetailsDrawer, {
+  const {
+    fileDetails
+  } = useFileManagerViewConfig();
+  const drawerWidth = fileDetails.width.split(",")[0];
+  const formRef = useRef(null);
+  return /*#__PURE__*/React.createElement(FileDetailsPortal, null, file && /*#__PURE__*/React.createElement(FileProvider, {
+    file: file
+  }, /*#__PURE__*/React.createElement(Drawer, {
+    title: file.name,
+    description: /*#__PURE__*/React.createElement(Description, null),
     width: drawerWidth,
-    modal: true,
     open: open,
+    modal: true,
+    bodyPadding: false,
+    headerSeparator: true,
+    footerSeparator: true,
     onClose: onClose,
-    "data-testid": "fm.file-details.drawer"
-  }, /*#__PURE__*/_react.default.createElement(_Drawer.DrawerContent, null, loading && /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, {
-    label: loading
-  }), file && /*#__PURE__*/_react.default.createElement(_FileProvider.FileProvider, {
-    file: file
-  }, /*#__PURE__*/_react.default.createElement(_FileDetailsProvider.FileDetailsProvider, {
+    "data-testid": "fm.file-details.drawer",
+    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Drawer.CancelButton, {
+      text: "Cancel"
+    }), /*#__PURE__*/React.createElement(Drawer.ConfirmButton, {
+      text: "Update",
+      onClick: () => formRef.current?.submit()
+    }))
+  }, loading && /*#__PURE__*/React.createElement(OverlayLoader, {
+    text: loading
+  }), /*#__PURE__*/React.createElement(FileDetailsProvider, {
     hideFileDetails: onClose,
     onSetFile: onSetFile
-  }, /*#__PURE__*/_react.default.createElement(FileDetailsInner, {
+  }, /*#__PURE__*/React.createElement(FileDetailsInner, {
+    onForm: form => {
+      formRef.current = form;
+    },
     file: file,
     onClose: onClose,
     onSubmit: onSave
-  }))))));
+  })))));
 };
 
 //# sourceMappingURL=FileDetails.js.map

package/components/FileDetails/FileDetails.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactDom","_interopRequireDefault","_noop","_reactHotkeyz","_form","_appHeadlessCmsCommon","_Drawer","_Progress","_Grid","_Tabs","_FileDetailsProvider","_Preview","_PreviewMeta","_Actions","_Header","_Elevation","_Content","_SimpleForm","_Footer","_Extensions","_useFileModel","_","_FileProvider","_excluded","_EMOTION_STRINGIFIED_CSS_ERROR__","FileDetailsDrawer","_base","default","DrawerRight","process","env","NODE_ENV","target","label","props","width","FormContainer","SimpleForm","name","styles","map","toString","FileDetailsInner","_ref","file","_objectWithoutProperties2","fileModel","useFileModel","_useFileManagerViewCo","useFileManagerViewConfig","fileDetails","_fileDetails$width$sp","split","_fileDetails$width$sp2","_slicedToArray2","_fileDetails$width$sp3","leftPanel","_fileDetails$width$sp4","rightPanel","extensionFields","useMemo","fields","find","field","fieldId","settings","onSubmit","data","fileData","prepareFormData","_objectSpread2","basicFieldsElement","createElement","Grid","Cell","span","key","element","extensionFieldsElement","length","Extensions","model","Form","Header","Content","Panel","flex","parseFloat","Elevation","z","style","margin","Actions","Preview","PreviewMeta","groupFields","Tabs","Tab","Fragment","Footer","getPortalTarget","window","document","getElementById","setAttribute","body","appendChild","FileDetailsPortal","_ref2","children","containerRef","useRef","ReactDOM","createPortal","current","FileDetails","exports","_ref3","open","onClose","onSave","loading","_ref3$onSetFile","onSetFile","noop","useHotkeys","zIndex","disabled","keys","esc","_useFileManagerViewCo2","drawerWidth","modal","DrawerContent","CircularProgress","FileProvider","FileDetailsProvider","hideFileDetails"],"sources":["FileDetails.tsx"],"sourcesContent":["import React, { useMemo, useRef } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport noop from \"lodash/noop\";\n// @ts-expect-error This package has no types.\nimport { useHotkeys } from \"react-hotkeyz\";\nimport styled from \"@emotion/styled\";\nimport { FileItem } from \"@webiny/app-admin/types\";\nimport { Form, FormOnSubmit } from \"@webiny/form\";\nimport { prepareFormData } from \"@webiny/app-headless-cms-common\";\nimport { DrawerRight, DrawerContent } from \"@webiny/ui/Drawer\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { Tab, Tabs } from \"@webiny/ui/Tabs\";\nimport { FileDetailsProvider } from \"~/components/FileDetails/FileDetailsProvider\";\nimport { Preview } from \"./components/Preview\";\nimport { PreviewMeta } from \"./components/PreviewMeta\";\nimport { Actions } from \"./components/Actions\";\nimport { Header } from \"./components/Header\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { Content } from \"./components/Content\";\nimport { SimpleForm } from \"@webiny/app-admin/components/SimpleForm\";\nimport { Footer } from \"./components/Footer\";\nimport { Extensions } from \"./components/Extensions\";\nimport { useFileModel } from \"~/hooks/useFileModel\";\nimport { useFileManagerViewConfig } from \"~/index\";\nimport { FileProvider } from \"~/contexts/FileProvider\";\n\ntype FileDetailsDrawerProps = React.ComponentProps<typeof DrawerRight> & { width: string };\n\nconst FileDetailsDrawer = styled(DrawerRight)<FileDetailsDrawerProps>`\n    z-index: 70;\n    &.mdc-drawer {\n        width: ${props => props.width};\n    }\n    .mdc-drawer__content {\n        overflow-y: hidden;\n    }\n    & + .mdc-drawer-scrim {\n        z-index: 65;\n    }\n`;\n\nconst FormContainer = styled(SimpleForm)`\n    margin: 0;\n`;\n\ninterface FileDetailsInnerProps {\n    file: FileItem;\n    onClose: () => void;\n    onSubmit: (fileData: FileItem) => void;\n}\n\nconst FileDetailsInner = ({ file, ...props }: FileDetailsInnerProps) => {\n    const fileModel = useFileModel();\n    const { fileDetails } = useFileManagerViewConfig();\n\n    const [, leftPanel = \"1\", rightPanel = \"1\"] = fileDetails.width.split(\",\");\n\n    const extensionFields = useMemo(() => {\n        const fields = fileModel.fields.find(field => field.fieldId === \"extensions\");\n        if (!fields?.settings?.fields) {\n            return [];\n        }\n        return fields?.settings?.fields || [];\n    }, [fileModel]);\n\n    const onSubmit: FormOnSubmit<FileItem> = async data => {\n        const fileData = prepareFormData(data, fileModel.fields);\n        props.onSubmit({ ...file, ...fileData });\n    };\n\n    const basicFieldsElement = (\n        <Grid>\n            {fileDetails.fields.map(field => (\n                <Cell span={12} key={field.name}>\n                    {field.element}\n                </Cell>\n            ))}\n        </Grid>\n    );\n\n    const extensionFieldsElement =\n        extensionFields.length > 0 ? <Extensions model={fileModel} /> : null;\n\n    return (\n        <Form data={file} onSubmit={onSubmit}>\n            {() => (\n                <FormContainer>\n                    <Header />\n                    <Content>\n                        <Content.Panel flex={parseFloat(leftPanel)}>\n                            <Elevation z={2} style={{ margin: 20 }}>\n                                <Actions />\n                                <Preview />\n                                <PreviewMeta />\n                            </Elevation>\n                        </Content.Panel>\n                        <Content.Panel flex={parseFloat(rightPanel)}>\n                            {fileDetails.groupFields ? (\n                                <Tabs>\n                                    <Tab label={\"Basic Details\"}>{basicFieldsElement}</Tab>\n                                    <Tab label={\"Advanced Details\"}>{extensionFieldsElement}</Tab>\n                                </Tabs>\n                            ) : (\n                                <>\n                                    {basicFieldsElement}\n                                    {extensionFieldsElement}\n                                </>\n                            )}\n                        </Content.Panel>\n                    </Content>\n                    <Footer />\n                </FormContainer>\n            )}\n        </Form>\n    );\n};\n\nfunction getPortalTarget() {\n    let target = window.document.getElementById(\"file-details-drawer\");\n    if (!target) {\n        target = document.createElement(\"div\");\n        target.setAttribute(\"id\", \"file-details-drawer\");\n        document.body && document.body.appendChild(target);\n    }\n    return target;\n}\n\ninterface FileDetailsPortalProps {\n    children: React.ReactNode;\n}\n\nconst FileDetailsPortal = ({ children }: FileDetailsPortalProps) => {\n    const containerRef = useRef<HTMLElement>(getPortalTarget());\n\n    return ReactDOM.createPortal(children, containerRef.current);\n};\n\nexport interface FileDetailsProps {\n    file?: FileItem;\n    open: boolean;\n    loading: string | null;\n    onClose: () => void;\n    onSave: (file: FileItem) => void;\n    onSetFile?: (file: FileItem) => void;\n}\n\nexport const FileDetails = ({\n    open,\n    onClose,\n    onSave,\n    loading,\n    file,\n    onSetFile = noop\n}: FileDetailsProps) => {\n    useHotkeys({\n        zIndex: 55,\n        disabled: !open,\n        keys: {\n            esc: onClose\n        }\n    });\n\n    const { fileDetails } = useFileManagerViewConfig();\n\n    const drawerWidth = fileDetails.width.split(\",\")[0];\n\n    return (\n        <FileDetailsPortal>\n            <FileDetailsDrawer\n                width={drawerWidth}\n                modal\n                open={open}\n                onClose={onClose}\n                data-testid={\"fm.file-details.drawer\"}\n            >\n                <DrawerContent>\n                    {loading && <CircularProgress label={loading} />}\n                    {file && (\n                        <FileProvider file={file}>\n                            <FileDetailsProvider hideFileDetails={onClose} onSetFile={onSetFile}>\n                                <FileDetailsInner file={file} onClose={onClose} onSubmit={onSave} />\n                            </FileDetailsProvider>\n                        </FileProvider>\n                    )}\n                </DrawerContent>\n            </FileDetailsDrawer>\n        </FileDetailsPortal>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useMemo","useRef","ReactDOM","noop","useHotkeys","Drawer","Grid","OverlayLoader","Tabs","Form","prepareFormData","FileDetailsProvider","Preview","Actions","Content","Extensions","Description","useFileModel","useFileManagerViewConfig","FileProvider","FileDetailsInner","file","onForm","props","formRef","createRef","current","fileModel","fileDetails","leftPanel","rightPanel","width","split","extensionFields","fields","find","field","fieldId","settings","onSubmit","data","fileData","basicFieldsElement","createElement","map","Column","span","key","name","element","extensionFieldsElement","length","model","ref","Panel","flex","parseFloat","className","groupFields","size","spacing","separator","tabs","Tab","value","trigger","content","getPortalTarget","target","window","document","getElementById","setAttribute","body","appendChild","FileDetailsPortal","children","containerRef","createPortal","FileDetails","open","onClose","onSave","loading","onSetFile","zIndex","disabled","keys","esc","drawerWidth","title","description","modal","bodyPadding","headerSeparator","footerSeparator","actions","Fragment","CancelButton","text","ConfirmButton","onClick","submit","hideFileDetails","form"],"sources":["FileDetails.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport noop from \"lodash/noop\";\n// @ts-expect-error This package has no types.\nimport { useHotkeys } from \"react-hotkeyz\";\nimport { Drawer, Grid, OverlayLoader, Tabs } from \"@webiny/admin-ui\";\nimport type { FileItem } from \"@webiny/app-admin/types\";\nimport type { FormAPI, FormOnSubmit } from \"@webiny/form\";\nimport { Form } from \"@webiny/form\";\nimport { prepareFormData } from \"@webiny/app-headless-cms-common\";\nimport { FileDetailsProvider } from \"~/components/FileDetails/FileDetailsProvider\";\nimport { Preview } from \"./components/Preview\";\nimport { Actions } from \"./components/Actions\";\nimport { Content } from \"./components/Content\";\nimport { Extensions } from \"./components/Extensions\";\nimport { Description } from \"./components/Description\";\nimport { useFileModel } from \"~/hooks/useFileModel\";\nimport { useFileManagerViewConfig } from \"~/index\";\nimport { FileProvider } from \"~/contexts/FileProvider\";\n\ninterface FileDetailsInnerProps {\n    file: FileItem;\n    onForm: (form: FormAPI) => void;\n    onClose: () => void;\n    onSubmit: (fileData: FileItem) => void;\n}\n\nconst FileDetailsInner = ({ file, onForm, ...props }: FileDetailsInnerProps) => {\n    const formRef = React.createRef<FormAPI>();\n\n    useEffect(() => {\n        if (formRef.current) {\n            onForm(formRef.current);\n        }\n    }, []);\n\n    const fileModel = useFileModel();\n    const { fileDetails } = useFileManagerViewConfig();\n\n    const [, leftPanel = \"1\", rightPanel = \"1\"] = fileDetails.width.split(\",\");\n\n    const extensionFields = useMemo(() => {\n        const fields = fileModel.fields.find(field => field.fieldId === \"extensions\");\n        if (!fields?.settings?.fields) {\n            return [];\n        }\n        return fields?.settings?.fields || [];\n    }, [fileModel]);\n\n    const onSubmit: FormOnSubmit<FileItem> = async data => {\n        const fileData = prepareFormData(data, fileModel.fields);\n        props.onSubmit({ ...file, ...fileData });\n    };\n\n    const basicFieldsElement = (\n        <Grid>\n            {fileDetails.fields.map(field => (\n                <Grid.Column span={12} key={field.name}>\n                    {field.element}\n                </Grid.Column>\n            ))}\n        </Grid>\n    );\n\n    const extensionFieldsElement =\n        extensionFields.length > 0 ? <Extensions model={fileModel} /> : null;\n\n    return (\n        <Form data={file} onSubmit={onSubmit} ref={formRef}>\n            {() => (\n                <Content>\n                    <Content.Panel flex={parseFloat(leftPanel)}>\n                        <div\n                            className={\n                                \"wby-flex wby-flex-col wby-justify-between wby-gap-md wby-h-full wby-px-lg wby-py-md\"\n                            }\n                        >\n                            <Actions />\n                            <Preview />\n                        </div>\n                    </Content.Panel>\n                    <Content.Panel flex={parseFloat(rightPanel)}>\n                        {fileDetails.groupFields ? (\n                            <Tabs\n                                size={\"md\"}\n                                spacing={\"lg\"}\n                                separator={true}\n                                tabs={[\n                                    <Tabs.Tab\n                                        key={\"basic-details\"}\n                                        value={\"basic-details\"}\n                                        trigger={\"Basic details\"}\n                                        content={basicFieldsElement}\n                                    />,\n                                    <Tabs.Tab\n                                        key={\"advanced-details\"}\n                                        value={\"advanced-details\"}\n                                        trigger={\"Advanced details\"}\n                                        content={extensionFieldsElement}\n                                    />\n                                ]}\n                            />\n                        ) : (\n                            <div className={\"wby-p-lg\"}>\n                                {basicFieldsElement}\n                                <div className={\"wby-mt-lg\"}>{extensionFieldsElement}</div>\n                            </div>\n                        )}\n                    </Content.Panel>\n                </Content>\n            )}\n        </Form>\n    );\n};\n\nfunction getPortalTarget() {\n    let target = window.document.getElementById(\"file-details-drawer\");\n    if (!target) {\n        target = document.createElement(\"div\");\n        target.setAttribute(\"id\", \"file-details-drawer\");\n        document.body && document.body.appendChild(target);\n    }\n    return target;\n}\n\ninterface FileDetailsPortalProps {\n    children: React.ReactNode;\n}\n\nconst FileDetailsPortal = ({ children }: FileDetailsPortalProps) => {\n    const containerRef = useRef<HTMLElement>(getPortalTarget());\n\n    return ReactDOM.createPortal(children, containerRef.current);\n};\n\nexport interface FileDetailsProps {\n    file?: FileItem;\n    open: boolean;\n    loading: string | null;\n    onClose: () => void;\n    onSave: (file: FileItem) => void;\n    onSetFile?: (file: FileItem) => void;\n}\n\nexport const FileDetails = ({\n    open,\n    onClose,\n    onSave,\n    loading,\n    file,\n    onSetFile = noop\n}: FileDetailsProps) => {\n    useHotkeys({\n        zIndex: 50,\n        disabled: !open,\n        keys: {\n            esc: onClose\n        }\n    });\n\n    const { fileDetails } = useFileManagerViewConfig();\n\n    const drawerWidth = fileDetails.width.split(\",\")[0];\n\n    const formRef = useRef<FormAPI | null>(null);\n\n    return (\n        <FileDetailsPortal>\n            {file && (\n                <FileProvider file={file}>\n                    <Drawer\n                        title={file.name}\n                        description={<Description />}\n                        width={drawerWidth}\n                        open={open}\n                        modal={true}\n                        bodyPadding={false}\n                        headerSeparator={true}\n                        footerSeparator={true}\n                        onClose={onClose}\n                        data-testid={\"fm.file-details.drawer\"}\n                        actions={\n                            <>\n                                <Drawer.CancelButton text={\"Cancel\"} />\n                                <Drawer.ConfirmButton\n                                    text={\"Update\"}\n                                    onClick={() => formRef.current?.submit()}\n                                />\n                            </>\n                        }\n                    >\n                        {loading && <OverlayLoader text={loading} />}\n                        <FileDetailsProvider hideFileDetails={onClose} onSetFile={onSetFile}>\n                            <FileDetailsInner\n                                onForm={form => {\n                                    formRef.current = form;\n                                }}\n                                file={file}\n                                onClose={onClose}\n                                onSubmit={onSave}\n                            />\n                        </FileDetailsProvider>\n                    </Drawer>\n                </FileProvider>\n            )}\n        </FileDetailsPortal>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/components/FileDetails/FileDetailsProvider.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { FileItem } from "@webiny/app-admin/types";
+import type { FileItem } from "@webiny/app-admin/types";
 export interface FileDetailsContext {
     close: () => void;
     setFile: (file: FileItem) => void;

package/components/FileDetails/FileDetailsProvider.js

@@ -1,25 +1,19 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FileDetailsProvider = exports.FileDetailsContext = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _FileManagerViewProvider = require("../../modules/FileManagerRenderer/FileManagerViewProvider");
-var FileDetailsContext = exports.FileDetailsContext = /*#__PURE__*/(0, _react.createContext)(undefined);
-var FileDetailsProvider = exports.FileDetailsProvider = function FileDetailsProvider(_ref) {
-  var hideFileDetails = _ref.hideFileDetails,
-    onSetFile = _ref.onSetFile,
-    children = _ref.children;
-  var view = (0, _FileManagerViewProvider.useFileManagerView)();
-  var value = {
+import React, { createContext } from "react";
+import { useFileManagerView } from "../../modules/FileManagerRenderer/FileManagerViewProvider";
+export const FileDetailsContext = /*#__PURE__*/createContext(undefined);
+export const FileDetailsProvider = ({
+  hideFileDetails,
+  onSetFile,
+  children
+}) => {
+  const view = useFileManagerView();
+  const value = {
     close: hideFileDetails,
     scope: view.scope,
     own: view.own,
     setFile: onSetFile
   };
-  return /*#__PURE__*/_react.default.createElement(FileDetailsContext.Provider, {
+  return /*#__PURE__*/React.createElement(FileDetailsContext.Provider, {
     value: value
   }, children);
 };

package/components/FileDetails/FileDetailsProvider.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_FileManagerViewProvider","FileDetailsContext","exports","createContext","undefined","FileDetailsProvider","_ref","hideFileDetails","onSetFile","children","view","useFileManagerView","value","close","scope","own","setFile","default","createElement","Provider"],"sources":["FileDetailsProvider.tsx"],"sourcesContent":["import React, { createContext } from \"react\";\nimport { useFileManagerView } from \"~/modules/FileManagerRenderer/FileManagerViewProvider\";\nimport { FileItem } from \"@webiny/app-admin/types\";\n\nexport interface FileDetailsContext {\n    close: () => void;\n    setFile: (file: FileItem) => void;\n    own: boolean;\n    scope?: string;\n}\n\nexport const FileDetailsContext = createContext<FileDetailsContext | undefined>(undefined);\n\ninterface FileDetailsProviderProps {\n    hideFileDetails: () => void;\n    onSetFile: (file: FileItem) => void;\n    children: React.ReactNode;\n}\n\nexport const FileDetailsProvider = ({\n    hideFileDetails,\n    onSetFile,\n    children\n}: FileDetailsProviderProps) => {\n    const view = useFileManagerView();\n\n    const value: FileDetailsContext = {\n        close: hideFileDetails,\n        scope: view.scope,\n        own: view.own,\n        setFile: onSetFile\n    };\n\n    return <FileDetailsContext.Provider value={value}>{children}</FileDetailsContext.Provider>;\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,wBAAA,GAAAD,OAAA;AAUO,IAAME,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,gBAAG,IAAAE,oBAAa,EAAiCC,SAAS,CAAC;AAQnF,IAAMC,mBAAmB,GAAAH,OAAA,CAAAG,mBAAA,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,EAIA;EAAA,IAH5BC,eAAe,GAAAD,IAAA,CAAfC,eAAe;IACfC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;EAER,IAAMC,IAAI,GAAG,IAAAC,2CAAkB,EAAC,CAAC;EAEjC,IAAMC,KAAyB,GAAG;IAC9BC,KAAK,EAAEN,eAAe;IACtBO,KAAK,EAAEJ,IAAI,CAACI,KAAK;IACjBC,GAAG,EAAEL,IAAI,CAACK,GAAG;IACbC,OAAO,EAAER;EACb,CAAC;EAED,oBAAOX,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACjB,kBAAkB,CAACkB,QAAQ;IAACP,KAAK,EAAEA;EAAM,GAAEH,QAAsC,CAAC;AAC9F,CAAC","ignoreList":[]}
+{"version":3,"names":["React","createContext","useFileManagerView","FileDetailsContext","undefined","FileDetailsProvider","hideFileDetails","onSetFile","children","view","value","close","scope","own","setFile","createElement","Provider"],"sources":["FileDetailsProvider.tsx"],"sourcesContent":["import React, { createContext } from \"react\";\nimport { useFileManagerView } from \"~/modules/FileManagerRenderer/FileManagerViewProvider\";\nimport type { FileItem } from \"@webiny/app-admin/types\";\n\nexport interface FileDetailsContext {\n    close: () => void;\n    setFile: (file: FileItem) => void;\n    own: boolean;\n    scope?: string;\n}\n\nexport const FileDetailsContext = createContext<FileDetailsContext | undefined>(undefined);\n\ninterface FileDetailsProviderProps {\n    hideFileDetails: () => void;\n    onSetFile: (file: FileItem) => void;\n    children: React.ReactNode;\n}\n\nexport const FileDetailsProvider = ({\n    hideFileDetails,\n    onSetFile,\n    children\n}: FileDetailsProviderProps) => {\n    const view = useFileManagerView();\n\n    const value: FileDetailsContext = {\n        close: hideFileDetails,\n        scope: view.scope,\n        own: view.own,\n        setFile: onSetFile\n    };\n\n    return <FileDetailsContext.Provider value={value}>{children}</FileDetailsContext.Provider>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,aAAa,QAAQ,OAAO;AAC5C,SAASC,kBAAkB;AAU3B,OAAO,MAAMC,kBAAkB,gBAAGF,aAAa,CAAiCG,SAAS,CAAC;AAQ1F,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAChCC,eAAe;EACfC,SAAS;EACTC;AACsB,CAAC,KAAK;EAC5B,MAAMC,IAAI,GAAGP,kBAAkB,CAAC,CAAC;EAEjC,MAAMQ,KAAyB,GAAG;IAC9BC,KAAK,EAAEL,eAAe;IACtBM,KAAK,EAAEH,IAAI,CAACG,KAAK;IACjBC,GAAG,EAAEJ,IAAI,CAACI,GAAG;IACbC,OAAO,EAAEP;EACb,CAAC;EAED,oBAAOP,KAAA,CAAAe,aAAA,CAACZ,kBAAkB,CAACa,QAAQ;IAACN,KAAK,EAAEA;EAAM,GAAEF,QAAsC,CAAC;AAC9F,CAAC","ignoreList":[]}

package/components/FileDetails/components/ActionButton.d.ts

@@ -5,5 +5,6 @@ export interface ActionButtonProps {
     onAction: () => void;
     "data-testid"?: string;
     disabled?: boolean;
+    className?: string;
 }
-export declare const ActionButton: ({ label, icon, onAction, disabled, ...props }: ActionButtonProps) => React.JSX.Element;
+export declare const ActionButton: ({ label, icon, onAction, disabled, className, ...props }: ActionButtonProps) => React.JSX.Element;

package/components/FileDetails/components/ActionButton.js

@@ -1,30 +1,23 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ActionButton = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _Tooltip = require("@webiny/ui/Tooltip");
-var _Button = require("@webiny/ui/Button");
-var _excluded = ["label", "icon", "onAction", "disabled"];
-var ActionButton = exports.ActionButton = function ActionButton(_ref) {
-  var label = _ref.label,
-    icon = _ref.icon,
-    onAction = _ref.onAction,
-    disabled = _ref.disabled,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
-    content: /*#__PURE__*/_react.default.createElement("span", null, label),
-    placement: "bottom"
-  }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+import React from "react";
+import { Button } from "@webiny/admin-ui";
+export const ActionButton = ({
+  label,
+  icon,
+  onAction,
+  disabled,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(Button, {
+    text: label,
     icon: icon,
     onClick: onAction,
     disabled: disabled,
-    "data-testid": props["data-testid"]
-  }));
+    "data-testid": props["data-testid"],
+    containerClassName: className,
+    variant: "ghost",
+    size: "sm"
+  });
 };
 
 //# sourceMappingURL=ActionButton.js.map

package/components/FileDetails/components/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Tooltip","_Button","_excluded","ActionButton","exports","_ref","label","icon","onAction","disabled","props","_objectWithoutProperties2","default","createElement","Tooltip","content","placement","IconButton","onClick"],"sources":["ActionButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { Tooltip } from \"@webiny/ui/Tooltip\";\nimport { IconButton } from \"@webiny/ui/Button\";\n\nexport interface ActionButtonProps {\n    label: string;\n    icon: JSX.Element;\n    onAction: () => void;\n    \"data-testid\"?: string;\n    disabled?: boolean;\n}\n\nexport const ActionButton = ({ label, icon, onAction, disabled, ...props }: ActionButtonProps) => {\n    return (\n        <Tooltip content={<span>{label}</span>} placement={\"bottom\"}>\n            <IconButton\n                icon={icon}\n                onClick={onAction}\n                disabled={disabled}\n                data-testid={props[\"data-testid\"]}\n            />\n        </Tooltip>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAA+C,IAAAG,SAAA;AAUxC,IAAMC,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,SAAfA,YAAYA,CAAAE,IAAA,EAAyE;EAAA,IAAnEC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAEC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IAAKC,KAAK,OAAAC,yBAAA,CAAAC,OAAA,EAAAP,IAAA,EAAAH,SAAA;EACpE,oBACIL,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,QAAA,CAAAc,OAAO;IAACC,OAAO,eAAElB,MAAA,CAAAe,OAAA,CAAAC,aAAA,eAAOP,KAAY,CAAE;IAACU,SAAS,EAAE;EAAS,gBACxDnB,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACZ,OAAA,CAAAgB,UAAU;IACPV,IAAI,EAAEA,IAAK;IACXW,OAAO,EAAEV,QAAS;IAClBC,QAAQ,EAAEA,QAAS;IACnB,eAAaC,KAAK,CAAC,aAAa;EAAE,CACrC,CACI,CAAC;AAElB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Button","ActionButton","label","icon","onAction","disabled","className","props","createElement","text","onClick","containerClassName","variant","size"],"sources":["ActionButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@webiny/admin-ui\";\n\nexport interface ActionButtonProps {\n    label: string;\n    icon: JSX.Element;\n    onAction: () => void;\n    \"data-testid\"?: string;\n    disabled?: boolean;\n    className?: string;\n}\n\nexport const ActionButton = ({\n    label,\n    icon,\n    onAction,\n    disabled,\n    className,\n    ...props\n}: ActionButtonProps) => {\n    return (\n        <Button\n            text={label}\n            icon={icon}\n            onClick={onAction}\n            disabled={disabled}\n            data-testid={props[\"data-testid\"]}\n            containerClassName={className}\n            variant={\"ghost\"}\n            size={\"sm\"}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,QAAQ,kBAAkB;AAWzC,OAAO,MAAMC,YAAY,GAAGA,CAAC;EACzBC,KAAK;EACLC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,SAAS;EACT,GAAGC;AACY,CAAC,KAAK;EACrB,oBACIR,KAAA,CAAAS,aAAA,CAACR,MAAM;IACHS,IAAI,EAAEP,KAAM;IACZC,IAAI,EAAEA,IAAK;IACXO,OAAO,EAAEN,QAAS;IAClBC,QAAQ,EAAEA,QAAS;IACnB,eAAaE,KAAK,CAAC,aAAa,CAAE;IAClCI,kBAAkB,EAAEL,SAAU;IAC9BM,OAAO,EAAE,OAAQ;IACjBC,IAAI,EAAE;EAAK,CACd,CAAC;AAEV,CAAC","ignoreList":[]}

package/components/FileDetails/components/Actions.js

@@ -1,37 +1,14 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Actions = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireWildcard(require("react"));
-var _ = require("../../..");
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var ActionsContainer = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e151g3xw0"
-} : {
-  target: "e151g3xw0",
-  label: "ActionsContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "lt3t2",
-  styles: "text-align:center;border-bottom:1px solid var(--mdc-theme-on-background)"
-} : {
-  name: "lt3t2",
-  styles: "text-align:center;border-bottom:1px solid var(--mdc-theme-on-background)",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFjdGlvbnMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUltQyIsImZpbGUiOiJBY3Rpb25zLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBGcmFnbWVudCB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyB1c2VGaWxlTWFuYWdlclZpZXdDb25maWcgfSBmcm9tIFwifi9pbmRleFwiO1xuXG5jb25zdCBBY3Rpb25zQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1vbi1iYWNrZ3JvdW5kKTtcbmA7XG5cbmV4cG9ydCBjb25zdCBBY3Rpb25zID0gKCkgPT4ge1xuICAgIGNvbnN0IHsgZmlsZURldGFpbHMgfSA9IHVzZUZpbGVNYW5hZ2VyVmlld0NvbmZpZygpO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPEFjdGlvbnNDb250YWluZXI+XG4gICAgICAgICAgICB7ZmlsZURldGFpbHMuYWN0aW9ucy5tYXAoYWN0aW9uID0+IChcbiAgICAgICAgICAgICAgICA8RnJhZ21lbnQga2V5PXthY3Rpb24ubmFtZX0+e2FjdGlvbi5lbGVtZW50fTwvRnJhZ21lbnQ+XG4gICAgICAgICAgICApKX1cbiAgICAgICAgPC9BY3Rpb25zQ29udGFpbmVyPlxuICAgICk7XG59O1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var Actions = exports.Actions = function Actions() {
-  var _useFileManagerViewCo = (0, _.useFileManagerViewConfig)(),
-    fileDetails = _useFileManagerViewCo.fileDetails;
-  return /*#__PURE__*/_react.default.createElement(ActionsContainer, null, fileDetails.actions.map(function (action) {
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
-      key: action.name
-    }, action.element);
-  }));
+import React from "react";
+import { useFileManagerViewConfig } from "../../..";
+export const Actions = () => {
+  const {
+    fileDetails
+  } = useFileManagerViewConfig();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-justify-start wby-gap-xs"
+  }, fileDetails.actions.map(action => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: action.name
+  }, action.element)));
 };
 
 //# sourceMappingURL=Actions.js.map

package/components/FileDetails/components/Actions.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_","_EMOTION_STRINGIFIED_CSS_ERROR__","ActionsContainer","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","Actions","exports","_useFileManagerViewCo","useFileManagerViewConfig","fileDetails","createElement","actions","action","Fragment","key","element"],"sources":["Actions.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { useFileManagerViewConfig } from \"~/index\";\n\nconst ActionsContainer = styled.div`\n    text-align: center;\n    border-bottom: 1px solid var(--mdc-theme-on-background);\n`;\n\nexport const Actions = () => {\n    const { fileDetails } = useFileManagerViewConfig();\n\n    return (\n        <ActionsContainer>\n            {fileDetails.actions.map(action => (\n                <Fragment key={action.name}>{action.element}</Fragment>\n            ))}\n        </ActionsContainer>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,CAAA,GAAAD,OAAA;AAAmD,SAAAE,iCAAA;AAEnD,IAAMC,gBAAgB,oBAAAC,KAAA,CAAAC,OAAA,SAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAZ;AAAA,EAGrB;AAEM,IAAMa,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,SAAVA,OAAOA,CAAA,EAAS;EACzB,IAAAE,qBAAA,GAAwB,IAAAC,0BAAwB,EAAC,CAAC;IAA1CC,WAAW,GAAAF,qBAAA,CAAXE,WAAW;EAEnB,oBACIrB,MAAA,CAAAO,OAAA,CAAAe,aAAA,CAACjB,gBAAgB,QACZgB,WAAW,CAACE,OAAO,CAACR,GAAG,CAAC,UAAAS,MAAM;IAAA,oBAC3BxB,MAAA,CAAAO,OAAA,CAAAe,aAAA,CAACtB,MAAA,CAAAyB,QAAQ;MAACC,GAAG,EAAEF,MAAM,CAACX;IAAK,GAAEW,MAAM,CAACG,OAAkB,CAAC;EAAA,CAC1D,CACa,CAAC;AAE3B,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useFileManagerViewConfig","Actions","fileDetails","createElement","className","actions","map","action","Fragment","key","name","element"],"sources":["Actions.tsx"],"sourcesContent":["import React from \"react\";\nimport { useFileManagerViewConfig } from \"~/index\";\n\nexport const Actions = () => {\n    const { fileDetails } = useFileManagerViewConfig();\n\n    return (\n        <div className={\"wby-flex wby-justify-start wby-gap-xs\"}>\n            {fileDetails.actions.map(action => (\n                <React.Fragment key={action.name}>{action.element}</React.Fragment>\n            ))}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,wBAAwB;AAEjC,OAAO,MAAMC,OAAO,GAAGA,CAAA,KAAM;EACzB,MAAM;IAAEC;EAAY,CAAC,GAAGF,wBAAwB,CAAC,CAAC;EAElD,oBACID,KAAA,CAAAI,aAAA;IAAKC,SAAS,EAAE;EAAwC,GACnDF,WAAW,CAACG,OAAO,CAACC,GAAG,CAACC,MAAM,iBAC3BR,KAAA,CAAAI,aAAA,CAACJ,KAAK,CAACS,QAAQ;IAACC,GAAG,EAAEF,MAAM,CAACG;EAAK,GAAEH,MAAM,CAACI,OAAwB,CACrE,CACA,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/FileDetails/components/BaseFields.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CmsModel } from "@webiny/app-headless-cms/types";
+import type { CmsModel } from "@webiny/app-headless-cms/types";
 interface BaseFieldsProps {
     model: CmsModel;
 }