@webiny/app-file-manager 6.0.0-beta.0 → 6.0.0-rc.0

package/modules/FileManagerRenderer/FileManagerView/FileManagerView.js

@@ -1,70 +1,35 @@
-"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.default = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactButterfiles = _interopRequireDefault(require("react-butterfiles"));
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
-var _omit = _interopRequireDefault(require("lodash/omit"));
-var _reactHotkeyz = require("react-hotkeyz");
-var _mobxReactLite = require("mobx-react-lite");
-var _cloud_upload = require("@material-design-icons/svg/filled/cloud_upload.svg");
-var _add = require("@material-design-icons/svg/filled/add.svg");
-var _i18n = require("@webiny/app/i18n");
-var _appAco = require("@webiny/app-aco");
-var _appAdmin = require("@webiny/app-admin");
-var _Button = require("@webiny/ui/Button");
-var _Scrollbar = require("@webiny/ui/Scrollbar");
-var _FileManagerViewProvider = require("../FileManagerViewProvider");
-var _outputFileSelectionError = require("./outputFileSelectionError");
-var _LeftSidebar = require("./LeftSidebar");
-var _ = require("../../..");
-var _BottomInfoBar = require("../../../components/BottomInfoBar");
-var _BulkActions = require("../../../components/BulkActions");
-var _DropFilesHere = require("../../../components/DropFilesHere");
-var _Empty = require("../../../components/Empty");
-var _FileDetails = require("../../../components/FileDetails");
-var _Grid = require("../../../components/Grid");
-var _LayoutSwitch = require("../../../components/LayoutSwitch");
-var _Table = require("../../../components/Table");
-var _Title = require("../../../components/Title");
-var _UploadStatus = require("../../../components/UploadStatus");
-var _BatchFileUploader = require("../../../BatchFileUploader");
-var _SearchWidget = require("./components/SearchWidget");
-var _Filters = require("./components/Filters");
-var _TagsList = require("./components/TagsList");
-var _excluded = ["id"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-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
-var t = _i18n.i18n.ns("app-admin/file-manager/file-manager-view");
-var FileListWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e46i7190"
-} : {
-  target: "e46i7190",
-  label: "FileListWrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "ttov1z",
-  styles: "float:right;z-index:60;display:inline-block;width:calc(100vw - 286px);height:calc(100vh - 94px);position:relative;.mdc-data-table{display:inline-table;}"
-} : {
-  name: "ttov1z",
-  styles: "float:right;z-index:60;display:inline-block;width:calc(100vw - 286px);height:calc(100vh - 94px);position:relative;.mdc-data-table{display:inline-table;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbGVNYW5hZ2VyVmlldy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUN3QiIsImZpbGUiOiJGaWxlTWFuYWdlclZpZXcudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZUNhbGxiYWNrLCB1c2VFZmZlY3QsIHVzZU1lbW8sIHVzZVN0YXRlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgRmlsZXMsIHsgRmlsZXNSZW5kZXJDaGlsZHJlbiB9IGZyb20gXCJyZWFjdC1idXR0ZXJmaWxlc1wiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgZGVib3VuY2UgZnJvbSBcImxvZGFzaC9kZWJvdW5jZVwiO1xuaW1wb3J0IG9taXQgZnJvbSBcImxvZGFzaC9vbWl0XCI7XG5pbXBvcnQgeyBwb3NpdGlvblZhbHVlcyB9IGZyb20gXCJyZWFjdC1jdXN0b20tc2Nyb2xsYmFyc1wiO1xuLy8gQHRzLWV4cGVjdC1lcnJvclxuaW1wb3J0IHsgdXNlSG90a2V5cyB9IGZyb20gXCJyZWFjdC1ob3RrZXl6XCI7XG5pbXBvcnQgeyBvYnNlcnZlciB9IGZyb20gXCJtb2J4LXJlYWN0LWxpdGVcIjtcbmltcG9ydCB7IFJlYWN0Q29tcG9uZW50IGFzIFVwbG9hZEljb24gfSBmcm9tIFwiQG1hdGVyaWFsLWRlc2lnbi1pY29ucy9zdmcvZmlsbGVkL2Nsb3VkX3VwbG9hZC5zdmdcIjtcbmltcG9ydCB7IFJlYWN0Q29tcG9uZW50IGFzIEFkZEljb24gfSBmcm9tIFwiQG1hdGVyaWFsLWRlc2lnbi1pY29ucy9zdmcvZmlsbGVkL2FkZC5zdmdcIjtcbmltcG9ydCB7IGkxOG4gfSBmcm9tIFwiQHdlYmlueS9hcHAvaTE4blwiO1xuaW1wb3J0IHsgdXNlQ3JlYXRlRGlhbG9nIH0gZnJvbSBcIkB3ZWJpbnkvYXBwLWFjb1wiO1xuaW1wb3J0IHsgT3ZlcmxheUxheW91dCwgdXNlU25hY2tiYXIgfSBmcm9tIFwiQHdlYmlueS9hcHAtYWRtaW5cIjtcbmltcG9ydCB7IEJ1dHRvbkljb24sIEJ1dHRvblByaW1hcnksIEJ1dHRvblByb3BzLCBCdXR0b25TZWNvbmRhcnkgfSBmcm9tIFwiQHdlYmlueS91aS9CdXR0b25cIjtcbmltcG9ydCB7IFNvcnRpbmcgfSBmcm9tIFwiQHdlYmlueS91aS9EYXRhVGFibGVcIjtcbmltcG9ydCB7IFNjcm9sbGJhciB9IGZyb20gXCJAd2ViaW55L3VpL1Njcm9sbGJhclwiO1xuaW1wb3J0IHsgdXNlRmlsZU1hbmFnZXJWaWV3IH0gZnJvbSBcIn4vbW9kdWxlcy9GaWxlTWFuYWdlclJlbmRlcmVyL0ZpbGVNYW5hZ2VyVmlld1Byb3ZpZGVyXCI7XG5pbXBvcnQgeyBvdXRwdXRGaWxlU2VsZWN0aW9uRXJyb3IgfSBmcm9tIFwiLi9vdXRwdXRGaWxlU2VsZWN0aW9uRXJyb3JcIjtcbmltcG9ydCB7IExlZnRTaWRlYmFyIH0gZnJvbSBcIi4vTGVmdFNpZGViYXJcIjtcbmltcG9ydCB7IHVzZUZpbGVNYW5hZ2VyQXBpLCB1c2VGaWxlTWFuYWdlclZpZXdDb25maWcgfSBmcm9tIFwifi9pbmRleFwiO1xuaW1wb3J0IHsgRmlsZUl0ZW0gfSBmcm9tIFwiQHdlYmlueS9hcHAtYWRtaW4vdHlwZXNcIjtcbmltcG9ydCB7IEJvdHRvbUluZm9CYXIgfSBmcm9tIFwifi9jb21wb25lbnRzL0JvdHRvbUluZm9CYXJcIjtcbmltcG9ydCB7IEJ1bGtBY3Rpb25zIH0gZnJvbSBcIn4vY29tcG9uZW50cy9CdWxrQWN0aW9uc1wiO1xuaW1wb3J0IHsgRHJvcEZpbGVzSGVyZSB9IGZyb20gXCJ+L2NvbXBvbmVudHMvRHJvcEZpbGVzSGVyZVwiO1xuaW1wb3J0IHsgRW1wdHkgfSBmcm9tIFwifi9jb21wb25lbnRzL0VtcHR5XCI7XG5pbXBvcnQgeyBGaWxlRGV0YWlscyB9IGZyb20gXCJ+L2NvbXBvbmVudHMvRmlsZURldGFpbHNcIjtcbmltcG9ydCB7IEdyaWQgfSBmcm9tIFwifi9jb21wb25lbnRzL0dyaWRcIjtcbmltcG9ydCB7IExheW91dFN3aXRjaCB9IGZyb20gXCJ+L2NvbXBvbmVudHMvTGF5b3V0U3dpdGNoXCI7XG5pbXBvcnQgeyBUYWJsZSwgVGFibGVQcm9wcyB9IGZyb20gXCJ+L2NvbXBvbmVudHMvVGFibGVcIjtcbmltcG9ydCB7IFRpdGxlIH0gZnJvbSBcIn4vY29tcG9uZW50cy9UaXRsZVwiO1xuaW1wb3J0IHsgVXBsb2FkU3RhdHVzIH0gZnJvbSBcIn4vY29tcG9uZW50cy9VcGxvYWRTdGF0dXNcIjtcbmltcG9ydCB7IEJhdGNoRmlsZVVwbG9hZGVyIH0gZnJvbSBcIn4vQmF0Y2hGaWxlVXBsb2FkZXJcIjtcbmltcG9ydCB7IFNlYXJjaFdpZGdldCB9IGZyb20gXCIuL2NvbXBvbmVudHMvU2VhcmNoV2lkZ2V0XCI7XG5pbXBvcnQgeyBGaWx0ZXJzIH0gZnJvbSBcIi4vY29tcG9uZW50cy9GaWx0ZXJzXCI7XG5pbXBvcnQgeyBUYWdzTGlzdCB9IGZyb20gXCJ+L21vZHVsZXMvRmlsZU1hbmFnZXJSZW5kZXJlci9GaWxlTWFuYWdlclZpZXcvY29tcG9uZW50cy9UYWdzTGlzdFwiO1xuaW1wb3J0IHsgTGlzdEZpbGVzU29ydCwgTGlzdEZpbGVzU29ydEl0ZW0gfSBmcm9tIFwifi9tb2R1bGVzL0ZpbGVNYW5hZ2VyQXBpUHJvdmlkZXIvZ3JhcGhxbFwiO1xuaW1wb3J0IHsgVGFibGVJdGVtIH0gZnJvbSBcIn4vdHlwZXNcIjtcblxuY29uc3QgdCA9IGkxOG4ubnMoXCJhcHAtYWRtaW4vZmlsZS1tYW5hZ2VyL2ZpbGUtbWFuYWdlci12aWV3XCIpO1xuXG5jb25zdCBGaWxlTGlzdFdyYXBwZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICAgIGZsb2F0OiBcInJpZ2h0XCIsXG4gICAgekluZGV4OiA2MCxcbiAgICBkaXNwbGF5OiBcImlubGluZS1ibG9ja1wiLFxuICAgIHdpZHRoOiBcImNhbGMoMTAwdncgLSAyODZweClcIixcbiAgICBoZWlnaHQ6IFwiY2FsYygxMDB2aCAtIDk0cHgpXCIsXG4gICAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbiAgICBcIi5tZGMtZGF0YS10YWJsZVwiOiB7XG4gICAgICAgIGRpc3BsYXk6IFwiaW5saW5lLXRhYmxlXCJcbiAgICB9XG59KTtcblxudHlwZSBCcm93c2VGaWxlc0hhbmRsZXIgPSB7XG4gICAgYnJvd3NlRmlsZXM6IEZpbGVzUmVuZGVyQ2hpbGRyZW5bXCJicm93c2VGaWxlc1wiXTtcbn07XG5cbnR5cGUgR2V0RmlsZVVwbG9hZEVycm9yTWVzc2FnZVByb3BzID1cbiAgICB8IHN0cmluZ1xuICAgIHwge1xuICAgICAgICAgIG1lc3NhZ2U6IHN0cmluZztcbiAgICAgIH07XG5cbmNvbnN0IGNyZWF0ZVNvcnQgPSAoc29ydGluZz86IFNvcnRpbmcpOiBMaXN0RmlsZXNTb3J0IHwgdW5kZWZpbmVkID0+IHtcbiAgICBpZiAoIXNvcnRpbmc/Lmxlbmd0aCkge1xuICAgICAgICByZXR1cm4gdW5kZWZpbmVkO1xuICAgIH1cbiAgICByZXR1cm4gc29ydGluZy5yZWR1Y2U8TGlzdEZpbGVzU29ydD4oKGl0ZW1zLCBpdGVtKSA9PiB7XG4gICAgICAgIGNvbnN0IHNvcnQgPSBgJHtpdGVtLmlkfV8ke2l0ZW0uZGVzYyA/IFwiREVTQ1wiIDogXCJBU0NcIn1gIGFzIExpc3RGaWxlc1NvcnRJdGVtO1xuICAgICAgICBpZiAoaXRlbXMuaW5jbHVkZXMoc29ydCkpIHtcbiAgICAgICAgICAgIHJldHVybiBpdGVtcztcbiAgICAgICAgfVxuICAgICAgICBpdGVtcy5wdXNoKHNvcnQpO1xuICAgICAgICByZXR1cm4gaXRlbXM7XG4gICAgfSwgW10pO1xufTtcblxuY29uc3QgRmlsZU1hbmFnZXJWaWV3ID0gKCkgPT4ge1xuICAgIGNvbnN0IHZpZXcgPSB1c2VGaWxlTWFuYWdlclZpZXcoKTtcbiAgICBjb25zdCBmaWxlTWFuYWdlciA9IHVzZUZpbGVNYW5hZ2VyQXBpKCk7XG4gICAgY29uc3QgeyBicm93c2VyIH0gPSB1c2VGaWxlTWFuYWdlclZpZXdDb25maWcoKTtcbiAgICBjb25zdCB7IHNob3dTbmFja2JhciB9ID0gdXNlU25hY2tiYXIoKTtcbiAgICBjb25zdCB7IHNob3dEaWFsb2c6IHNob3dDcmVhdGVGb2xkZXJEaWFsb2cgfSA9IHVzZUNyZWF0ZURpYWxvZygpO1xuICAgIGNvbnN0IFtkcmF3ZXJMb2FkaW5nLCBzZXREcmF3ZXJMb2FkaW5nXSA9IHVzZVN0YXRlPHN0cmluZyB8IG51bGw+KG51bGwpO1xuXG4gICAgY29uc3QgdXBsb2FkZXIgPSB1c2VNZW1vPEJhdGNoRmlsZVVwbG9hZGVyPihcbiAgICAgICAgKCkgPT4gbmV3IEJhdGNoRmlsZVVwbG9hZGVyKHZpZXcudXBsb2FkRmlsZSksXG4gICAgICAgIFt2aWV3LmZvbGRlcklkXVxuICAgICk7XG5cbiAgICBjb25zdCBbdGFibGVTb3J0aW5nLCBzZXRUYWJsZVNvcnRpbmddID0gdXNlU3RhdGU8U29ydGluZz4oW10pO1xuICAgIGNvbnN0IFtjdXJyZW50RmlsZSwgc2V0Q3VycmVudEZpbGVdID0gdXNlU3RhdGU8RmlsZUl0ZW0+KCk7XG5cbiAgICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgICAgICBjb25zdCBmZXRjaEZpbGVEZXRhaWxzID0gYXN5bmMgKCkgPT4ge1xuICAgICAgICAgICAgaWYgKHZpZXcuc2hvd2luZ0ZpbGVEZXRhaWxzKSB7XG4gICAgICAgICAgICAgICAgc2V0RHJhd2VyTG9hZGluZyhcIkxvYWRpbmcgZmlsZSBkZXRhaWxzLi4uXCIpO1xuICAgICAgICAgICAgICAgIGNvbnN0IGZpbGUgPSBhd2FpdCB2aWV3LmdldEZpbGUodmlldy5zaG93aW5nRmlsZURldGFpbHMpO1xuICAgICAgICAgICAgICAgIHNldEN1cnJlbnRGaWxlKGZpbGUpO1xuICAgICAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgICAgICBzZXRDdXJyZW50RmlsZSh1bmRlZmluZWQpO1xuICAgICAgICAgICAgfVxuICAgICAgICAgICAgc2V0RHJhd2VyTG9hZGluZyhudWxsKTtcbiAgICAgICAgfTtcblxuICAgICAgICAvLyBjYWxsIHRoZSBmdW5jdGlvblxuICAgICAgICBmZXRjaEZpbGVEZXRhaWxzKCk7XG4gICAgfSwgW3ZpZXcuc2hvd2luZ0ZpbGVEZXRhaWxzXSk7XG5cbiAgICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgICAgICBpZiAoIXRhYmxlU29ydGluZz8ubGVuZ3RoKSB7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cbiAgICAgICAgY29uc3Qgc29ydCA9IGNyZWF0ZVNvcnQodGFibGVTb3J0aW5nKTtcbiAgICAgICAgaWYgKCFzb3J0KSB7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cbiAgICAgICAgdmlldy5zZXRMaXN0U29ydChzb3J0KTtcbiAgICB9LCBbdGFibGVTb3J0aW5nXSk7XG5cbiAgICBjb25zdCBnZXRGaWxlVXBsb2FkRXJyb3JNZXNzYWdlID0gdXNlQ2FsbGJhY2soKGU6IEdldEZpbGVVcGxvYWRFcnJvck1lc3NhZ2VQcm9wcykgPT4ge1xuICAgICAgICBpZiAodHlwZW9mIGUgPT09IFwic3RyaW5nXCIpIHtcbiAgICAgICAgICAgIGNvbnN0IG1hdGNoID0gZS5tYXRjaCgvTWVzc2FnZT4oLio/KTxcXC9NZXNzYWdlLyk7XG4gICAgICAgICAgICBpZiAobWF0Y2gpIHtcbiAgICAgICAgICAgICAgICBjb25zdCBbLCBtZXNzYWdlXSA9IG1hdGNoO1xuICAgICAgICAgICAgICAgIHJldHVybiBtZXNzYWdlO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICByZXR1cm4gZTtcbiAgICAgICAgfVxuICAgICAgICByZXR1cm4gZS5tZXNzYWdlO1xuICAgIH0sIFtdKTtcblxuICAgIHVzZUhvdGtleXMoe1xuICAgICAgICB6SW5kZXg6IDUwLFxuICAgICAgICBrZXlzOiB7XG4gICAgICAgICAgICBlc2M6IHZpZXcub25DbG9zZVxuICAgICAgICB9XG4gICAgfSk7XG5cbiAgICBjb25zdCB1cGxvYWRGaWxlcyA9IGFzeW5jIChmaWxlczogRmlsZVtdKSA9PiB7XG4gICAgICAgIHVwbG9hZGVyLmFkZEZpbGVzKGZpbGVzKTtcblxuICAgICAgICB1cGxvYWRlci5vblVwbG9hZEZpbmlzaGVkKCh7IHVwbG9hZGVkLCBlcnJvcnMgfSkgPT4ge1xuICAgICAgICAgICAgdXBsb2FkZXIucmVzZXQoKTtcblxuICAgICAgICAgICAgaWYgKGVycm9ycy5sZW5ndGggPiAwKSB7XG4gICAgICAgICAgICAgICAgc2hvd1NuYWNrYmFyKFxuICAgICAgICAgICAgICAgICAgICA8PlxuICAgICAgICAgICAgICAgICAgICAgICAge3RgT25lIG9yIG1vcmUgZmlsZXMgd2VyZSBub3QgdXBsb2FkZWQgc3VjY2Vzc2Z1bGx5OmB9XG4gICAgICAgICAgICAgICAgICAgICAgICA8b2w+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAge2Vycm9ycy5tYXAoKHsgZmlsZSwgZSB9KSA9PiAoXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxsaSBrZXk9e2ZpbGUubmFtZX0+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8c3Ryb25nPntmaWxlLm5hbWV9PC9zdHJvbmc+OiB7Z2V0RmlsZVVwbG9hZEVycm9yTWVzc2FnZShlKX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9saT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICApKX1cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvb2w+XG4gICAgICAgICAgICAgICAgICAgIDwvPlxuICAgICAgICAgICAgICAgICk7XG4gICAgICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICBzaG93U25hY2tiYXIodGBGaWxlIHVwbG9hZCBjb21wbGV0ZS5gKTtcblxuICAgICAgICAgICAgdmlldy5vblVwbG9hZENvbXBsZXRpb24odXBsb2FkZWQpO1xuICAgICAgICB9KTtcbiAgICB9O1xuXG4gICAgY29uc3QgcmVuZGVyVXBsb2FkRmlsZUFjdGlvbiA9IHVzZUNhbGxiYWNrKFxuICAgICAgICAoeyBicm93c2VGaWxlcyB9OiBCcm93c2VGaWxlc0hhbmRsZXIpID0+IHtcbiAgICAgICAgICAgIGlmICghZmlsZU1hbmFnZXIuY2FuQ3JlYXRlKSB7XG4gICAgICAgICAgICAgICAgcmV0dXJuIG51bGw7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgICAgIDxCdXR0b25QcmltYXJ5XG4gICAgICAgICAgICAgICAgICAgIGZsYXQ9e3RydWV9XG4gICAgICAgICAgICAgICAgICAgIHNtYWxsPXt0cnVlfVxuICAgICAgICAgICAgICAgICAgICBvbkNsaWNrPXticm93c2VGaWxlcyBhcyBCdXR0b25Qcm9wc1tcIm9uQ2xpY2tcIl19XG4gICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICA8QnV0dG9uSWNvbiBpY29uPXs8VXBsb2FkSWNvbiAvPn0gLz5cbiAgICAgICAgICAgICAgICAgICAge3RgVXBsb2FkLi4uYH1cbiAgICAgICAgICAgICAgICA8L0J1dHRvblByaW1hcnk+XG4gICAgICAgICAgICApO1xuICAgICAgICB9LFxuICAgICAgICBbZmlsZU1hbmFnZXIuY2FuQ3JlYXRlXVxuICAgICk7XG5cbiAgICBjb25zdCBmaWxlc0JlaW5nVXBsb2FkZWQgPSB1cGxvYWRlci5nZXRKb2JzKCkubGVuZ3RoO1xuICAgIGNvbnN0IHByb2dyZXNzID0gdXBsb2FkZXIucHJvZ3Jlc3M7XG5cbiAgICBjb25zdCByZW5kZXJMaXN0ID0gKGJyb3dzZUZpbGVzOiBGaWxlc1JlbmRlckNoaWxkcmVuW1wiYnJvd3NlRmlsZXNcIl0pID0+IHtcbiAgICAgICAgaWYgKCF2aWV3LmlzTGlzdExvYWRpbmcgJiYgdmlldy5pc1NlYXJjaCAmJiB2aWV3LmZpbGVzLmxlbmd0aCA9PT0gMCkge1xuICAgICAgICAgICAgcmV0dXJuIDxFbXB0eSBpc1NlYXJjaFJlc3VsdD17dHJ1ZX0gYnJvd3NlRmlsZXM9e2Jyb3dzZUZpbGVzfSAvPjtcbiAgICAgICAgfVxuXG4gICAgICAgIGlmICghdmlldy5pc0xpc3RMb2FkaW5nICYmIHZpZXcuZmlsZXMubGVuZ3RoID09PSAwICYmIHZpZXcuZm9sZGVycy5sZW5ndGggPT09IDApIHtcbiAgICAgICAgICAgIHJldHVybiA8RW1wdHkgaXNTZWFyY2hSZXN1bHQ9e2ZhbHNlfSBicm93c2VGaWxlcz17YnJvd3NlRmlsZXN9IC8+O1xuICAgICAgICB9XG5cbiAgICAgICAgaWYgKHZpZXcubGlzdFRhYmxlKSB7XG4gICAgICAgICAgICBjb25zdCBnZXRTZWxlY3RhYmxlUm93ID0gKHJvd3M6IFRhYmxlSXRlbVtdKSA9PlxuICAgICAgICAgICAgICAgIHJvd3NcbiAgICAgICAgICAgICAgICAgICAgLmZpbHRlcihyb3cgPT4gcm93LiR0eXBlID09PSBcIlJFQ09SRFwiKVxuICAgICAgICAgICAgICAgICAgICAubWFwKHJvdyA9PiBvbWl0KHJvdywgW1wiJHR5cGVcIiwgXCIkc2VsZWN0YWJsZVwiXSkgYXMgRmlsZUl0ZW0pO1xuXG4gICAgICAgICAgICBjb25zdCBvblNlbGVjdFJvdzogVGFibGVQcm9wc1tcIm9uU2VsZWN0Um93XCJdID0gdmlldy5oYXNPblNlbGVjdENhbGxiYWNrXG4gICAgICAgICAgICAgICAgPyByb3dzID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICBjb25zdCBmaWxlcyA9IGdldFNlbGVjdGFibGVSb3cocm93cyk7XG5cbiAgICAgICAgICAgICAgICAgICAgICBpZiAodmlldy5tdWx0aXBsZSkge1xuICAgICAgICAgICAgICAgICAgICAgICAgICB2aWV3LnNldFNlbGVjdGVkKGZpbGVzKTtcbiAgICAgICAgICAgICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICAgICAgICAgICAgICB2aWV3Lm9uQ2hhbmdlKGZpbGVzWzBdKTtcbiAgICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgOiByb3dzID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICBjb25zdCBmaWxlcyA9IGdldFNlbGVjdGFibGVSb3cocm93cyk7XG4gICAgICAgICAgICAgICAgICAgICAgdmlldy5zZXRTZWxlY3RlZChmaWxlcyk7XG4gICAgICAgICAgICAgICAgICB9O1xuXG4gICAgICAgICAgICBjb25zdCBvblRvZ2dsZVJvdzogVGFibGVQcm9wc1tcIm9uVG9nZ2xlUm93XCJdID0gdmlldy5oYXNPblNlbGVjdENhbGxiYWNrXG4gICAgICAgICAgICAgICAgPyByb3cgPT4ge1xuICAgICAgICAgICAgICAgICAgICAgIGNvbnN0IGZpbGVzID0gZ2V0U2VsZWN0YWJsZVJvdyhbcm93XSk7XG5cbiAgICAgICAgICAgICAgICAgICAgICBpZiAodmlldy5tdWx0aXBsZSkge1xuICAgICAgICAgICAgICAgICAgICAgICAgICB2aWV3LnRvZ2dsZVNlbGVjdGVkKGZpbGVzWzBdKTtcbiAgICAgICAgICAgICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICAgICAgICAgICAgICB2aWV3Lm9uQ2hhbmdlKGZpbGVzWzBdKTtcbiAgICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgOiByb3cgPT4ge1xuICAgICAgICAgICAgICAgICAgICAgIGNvbnN0IGZpbGVzID0gZ2V0U2VsZWN0YWJsZVJvdyhbcm93XSk7XG4gICAgICAgICAgICAgICAgICAgICAgdmlldy50b2dnbGVTZWxlY3RlZChmaWxlc1swXSk7XG4gICAgICAgICAgICAgICAgICB9O1xuXG4gICAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgICAgIDxUYWJsZVxuICAgICAgICAgICAgICAgICAgICBvblNlbGVjdFJvdz17b25TZWxlY3RSb3d9XG4gICAgICAgICAgICAgICAgICAgIG9uVG9nZ2xlUm93PXtvblRvZ2dsZVJvd31cbiAgICAgICAgICAgICAgICAgICAgc29ydGluZz17dGFibGVTb3J0aW5nfVxuICAgICAgICAgICAgICAgICAgICBvblNvcnRpbmdDaGFuZ2U9e3NldFRhYmxlU29ydGluZ31cbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgKTtcbiAgICAgICAgfVxuXG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICA8R3JpZFxuICAgICAgICAgICAgICAgIGZvbGRlcnM9e3ZpZXcuZm9sZGVyc31cbiAgICAgICAgICAgICAgICByZWNvcmRzPXt2aWV3LmZpbGVzfVxuICAgICAgICAgICAgICAgIGxvYWRpbmc9e3ZpZXcuaXNMaXN0TG9hZGluZ31cbiAgICAgICAgICAgICAgICBvbkZvbGRlckNsaWNrPXt2aWV3LnNldEZvbGRlcklkfVxuICAgICAgICAgICAgICAgIHNlbGVjdGVkPXt2aWV3LnNlbGVjdGVkfVxuICAgICAgICAgICAgICAgIG11bHRpcGxlPXt2aWV3Lm11bHRpcGxlfVxuICAgICAgICAgICAgICAgIHRvZ2dsZVNlbGVjdGVkPXt2aWV3LnRvZ2dsZVNlbGVjdGVkfVxuICAgICAgICAgICAgICAgIGRlc2VsZWN0QWxsPXt2aWV3LmRlc2VsZWN0QWxsfVxuICAgICAgICAgICAgICAgIG9uQ2hhbmdlPXt2aWV3Lm9uQ2hhbmdlfVxuICAgICAgICAgICAgICAgIG9uQ2xvc2U9e3ZpZXcub25DbG9zZX1cbiAgICAgICAgICAgICAgICBoYXNPblNlbGVjdENhbGxiYWNrPXt2aWV3Lmhhc09uU2VsZWN0Q2FsbGJhY2t9XG4gICAgICAgICAgICAvPlxuICAgICAgICApO1xuICAgIH07XG5cbiAgICBjb25zdCBsb2FkTW9yZU9uU2Nyb2xsID0gdXNlQ2FsbGJhY2soXG4gICAgICAgIGRlYm91bmNlKGFzeW5jICh7IHNjcm9sbEZyYW1lIH06IHsgc2Nyb2xsRnJhbWU6IHBvc2l0aW9uVmFsdWVzIH0pID0+IHtcbiAgICAgICAgICAgIGlmIChzY3JvbGxGcmFtZS50b3AgPiAwLjgpIHtcbiAgICAgICAgICAgICAgICB2aWV3LmxvYWRNb3JlRmlsZXMoKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfSwgMjAwKSxcbiAgICAgICAgW3ZpZXcubWV0YSwgdmlldy5sb2FkTW9yZUZpbGVzXVxuICAgICk7XG5cbiAgICBjb25zdCBvbkNyZWF0ZUZvbGRlciA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICAgICAgc2hvd0NyZWF0ZUZvbGRlckRpYWxvZyh7IGN1cnJlbnRQYXJlbnRJZDogdmlldy5mb2xkZXJJZCB9KTtcbiAgICB9LCBbdmlldy5mb2xkZXJJZF0pO1xuXG4gICAgY29uc3QgdXBkYXRlRmlsZSA9IHVzZUNhbGxiYWNrKFxuICAgICAgICBhc3luYyAoZGF0YTogRmlsZUl0ZW0pID0+IHtcbiAgICAgICAgICAgIGNvbnN0IHsgaWQsIC4uLmZpbGVEYXRhIH0gPSBkYXRhO1xuICAgICAgICAgICAgc2V0RHJhd2VyTG9hZGluZyhcIlNhdmluZyBmaWxlIGNoYW5nZXMuLi5cIik7XG4gICAgICAgICAgICBhd2FpdCB2aWV3LnVwZGF0ZUZpbGUoaWQsIGZpbGVEYXRhKTtcbiAgICAgICAgICAgIHNldERyYXdlckxvYWRpbmcobnVsbCk7XG4gICAgICAgICAgICBzaG93U25hY2tiYXIoXCJGaWxlIHVwZGF0ZWQgc3VjY2Vzc2Z1bGx5IVwiKTtcbiAgICAgICAgICAgIHZpZXcuaGlkZUZpbGVEZXRhaWxzKCk7XG4gICAgICAgIH0sXG4gICAgICAgIFt2aWV3LnVwZGF0ZUZpbGVdXG4gICAgKTtcblxuICAgIHJldHVybiAoXG4gICAgICAgIDw+XG4gICAgICAgICAgICA8RmlsZXNcbiAgICAgICAgICAgICAgICBtdWx0aXBsZVxuICAgICAgICAgICAgICAgIG1heFNpemU9e3ZpZXcuc2V0dGluZ3MgPyB2aWV3LnNldHRpbmdzLnVwbG9hZE1heEZpbGVTaXplICsgXCJiXCIgOiBcIjFUQlwifVxuICAgICAgICAgICAgICAgIG11bHRpcGxlTWF4U2l6ZT17XCIxVEJcIn1cbiAgICAgICAgICAgICAgICBhY2NlcHQ9e3ZpZXcuYWNjZXB0fVxuICAgICAgICAgICAgICAgIG9uU3VjY2Vzcz17ZmlsZXMgPT4ge1xuICAgICAgICAgICAgICAgICAgICBjb25zdCBmaWxlc1RvVXBsb2FkID0gZmlsZXNcbiAgICAgICAgICAgICAgICAgICAgICAgIC5tYXAoZmlsZSA9PiBmaWxlLnNyYy5maWxlKVxuICAgICAgICAgICAgICAgICAgICAgICAgLmZpbHRlcihCb29sZWFuKSBhcyBGaWxlW107XG4gICAgICAgICAgICAgICAgICAgIHVwbG9hZEZpbGVzKGZpbGVzVG9VcGxvYWQpO1xuICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgb25FcnJvcj17ZXJyb3JzID0+IHtcbiAgICAgICAgICAgICAgICAgICAgY29uc3QgbWVzc2FnZSA9IG91dHB1dEZpbGVTZWxlY3Rpb25FcnJvcihlcnJvcnMpO1xuICAgICAgICAgICAgICAgICAgICBzaG93U25hY2tiYXIobWVzc2FnZSk7XG4gICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICB7KHsgZ2V0RHJvcFpvbmVQcm9wcywgYnJvd3NlRmlsZXMgfSkgPT4gKFxuICAgICAgICAgICAgICAgICAgICA8T3ZlcmxheUxheW91dFxuICAgICAgICAgICAgICAgICAgICAgICAgb25FeGl0ZWQ9e3ZpZXcub25DbG9zZX1cbiAgICAgICAgICAgICAgICAgICAgICAgIGJhckxlZnQ9ezxUaXRsZSB0aXRsZT17dmlldy5saXN0VGl0bGV9IC8+fVxuICAgICAgICAgICAgICAgICAgICAgICAgYmFyTWlkZGxlPXs8U2VhcmNoV2lkZ2V0IC8+fVxuICAgICAgICAgICAgICAgICAgICAgICAgYmFyUmlnaHQ9e1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHt2aWV3Lmhhc09uU2VsZWN0Q2FsbGJhY2sgJiYgdmlldy5zZWxlY3RlZC5sZW5ndGggPiAwID8gKFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPEJ1dHRvblByaW1hcnlcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBmbGF0PXt0cnVlfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNtYWxsPXt0cnVlfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHZpZXcub25DaGFuZ2Uodmlldy5zZWxlY3RlZCl9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAge3RgU2VsZWN0YH0ge3ZpZXcubXVsdGlwbGUgJiYgYCgke3ZpZXcuc2VsZWN0ZWQubGVuZ3RofSlgfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9CdXR0b25QcmltYXJ5PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICApIDogKFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcmVuZGVyVXBsb2FkRmlsZUFjdGlvbih7IGJyb3dzZUZpbGVzIH0gYXMgQnJvd3NlRmlsZXNIYW5kbGVyKVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8QnV0dG9uU2Vjb25kYXJ5XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD17XCJmaWxlLW1hbmFnZXIuY3JlYXRlLWZvbGRlci1idXR0b25cIn1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9e29uQ3JlYXRlRm9sZGVyfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgc21hbGw9e3RydWV9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBzdHlsZT17eyBtYXJnaW46IFwiMCA4cHhcIiB9fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8QnV0dG9uSWNvbiBpY29uPXs8QWRkSWNvbiAvPn0gLz5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHt0YE5ldyBGb2xkZXJgfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L0J1dHRvblNlY29uZGFyeT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPExheW91dFN3aXRjaCAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvPlxuICAgICAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICA8PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxGaWxlRGV0YWlsc1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBsb2FkaW5nPXtkcmF3ZXJMb2FkaW5nfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBmaWxlPXtjdXJyZW50RmlsZX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgb3Blbj17Qm9vbGVhbih2aWV3LnNob3dpbmdGaWxlRGV0YWlscyl9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uQ2xvc2U9e3ZpZXcuaGlkZUZpbGVEZXRhaWxzfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBvblNhdmU9e3VwZGF0ZUZpbGV9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8TGVmdFNpZGViYXJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY3VycmVudEZvbGRlcj17dmlldy5mb2xkZXJJZH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgb25Gb2xkZXJDbGljaz17dmlldy5zZXRGb2xkZXJJZH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHticm93c2VyLmZpbHRlckJ5VGFncyA/IChcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxUYWdzTGlzdFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGxvYWRpbmc9e3ZpZXcudGFncy5sb2FkaW5nfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGFjdGl2ZVRhZ3M9e3ZpZXcudGFncy5hY3RpdmVUYWdzfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHRhZ3M9e3ZpZXcudGFncy5hbGxUYWdzfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uQWN0aXZhdGVkVGFnc0NoYW5nZT17dmlldy50YWdzLnNldEFjdGl2ZVRhZ3N9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICApIDogbnVsbH1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L0xlZnRTaWRlYmFyPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxGaWxlTGlzdFdyYXBwZXJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgey4uLmdldERyb3Bab25lUHJvcHMoe1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgb25EcmFnT3ZlcjogKCkgPT4gdmlldy5zZXREcmFnZ2luZyh0cnVlKSxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uRHJhZ0xlYXZlOiAoKSA9PiB2aWV3LnNldERyYWdnaW5nKGZhbHNlKSxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uRHJvcDogKCkgPT4gdmlldy5zZXREcmFnZ2luZyhmYWxzZSlcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfSl9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGRhdGEtdGVzdGlkPXtcImZtLWxpc3Qtd3JhcHBlclwifVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAge3ZpZXcuZHJhZ2dpbmcgJiYgPERyb3BGaWxlc0hlcmUgLz59XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxCdWxrQWN0aW9ucyAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8RmlsdGVycyAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8U2Nyb2xsYmFyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBvblNjcm9sbEZyYW1lPXtzY3JvbGxGcmFtZSA9PiBsb2FkTW9yZU9uU2Nyb2xsKHsgc2Nyb2xsRnJhbWUgfSl9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHtyZW5kZXJMaXN0KGJyb3dzZUZpbGVzKX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9TY3JvbGxiYXI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxCb3R0b21JbmZvQmFyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBhY2NlcHQ9e3ZpZXcuYWNjZXB0fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgbGlzdGluZz17dmlldy5pc0xpc3RMb2FkaW5nTW9yZX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPFVwbG9hZFN0YXR1c1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgbnVtYmVyT2ZGaWxlcz17ZmlsZXNCZWluZ1VwbG9hZGVkfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcHJvZ3Jlc3M9e3Byb2dyZXNzfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvRmlsZUxpc3RXcmFwcGVyPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC8+XG4gICAgICAgICAgICAgICAgICAgIDwvT3ZlcmxheUxheW91dD5cbiAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgPC9GaWxlcz5cbiAgICAgICAgPC8+XG4gICAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IG9ic2VydmVyKEZpbGVNYW5hZ2VyVmlldyk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var createSort = function createSort(sorting) {
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import Files from "react-butterfiles";
+import debounce from "lodash/debounce.js";
+// @ts-expect-error
+import { useHotkeys } from "react-hotkeyz";
+import { observer } from "mobx-react-lite";
+import { Scrollbar } from "@webiny/admin-ui";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { LeftPanel, OverlayLayout, RightPanel, SplitView, useSnackbar } from "@webiny/app-admin";
+import { useFileManagerView } from "../FileManagerViewProvider/index.js";
+import { outputFileSelectionError } from "./outputFileSelectionError.js";
+import { LeftSidebar } from "./LeftSidebar.js";
+import { useFileManagerViewConfig } from "../../../index.js";
+import { BatchFileUploader } from "../../../BatchFileUploader.js";
+import { BottomInfoBar } from "../../../components/BottomInfoBar/index.js";
+import { BulkActions } from "../../../components/BulkActions/index.js";
+import { FileDropPlaceholder } from "../../../components/FileDropPlaceholder/index.js";
+import { Empty } from "../../../components/Empty/index.js";
+import { FileDetails } from "../../../components/FileDetails/index.js";
+import { Filters } from "../../../components/Filters/index.js";
+import { Grid } from "../../../components/Grid/index.js";
+import { Header } from "../../../components/Header/index.js";
+import { Table } from "../../../components/Table/index.js";
+import { TagsList } from "../../../components/TagsList/index.js";
+import { UploadStatus } from "../../../components/UploadStatus/index.js";
+const t = i18n.ns("app-admin/file-manager/file-manager-view");
+const createSort = sorting => {
   if (!sorting?.length) {
     return undefined;
   }
-  return sorting.reduce(function (items, item) {
-    var sort = "".concat(item.id, "_").concat(item.desc ? "DESC" : "ASC");
+  return sorting.reduce((items, item) => {
+    const sort = `${item.id}_${item.desc ? "DESC" : "ASC"}`;
     if (items.includes(sort)) {
       return items;
     }
@@ -72,35 +37,23 @@ var createSort = function createSort(sorting) {
     return items;
   }, []);
 };
-var FileManagerView = function FileManagerView() {
-  var view = (0, _FileManagerViewProvider.useFileManagerView)();
-  var fileManager = (0, _.useFileManagerApi)();
-  var _useFileManagerViewCo = (0, _.useFileManagerViewConfig)(),
-    browser = _useFileManagerViewCo.browser;
-  var _useSnackbar = (0, _appAdmin.useSnackbar)(),
-    showSnackbar = _useSnackbar.showSnackbar;
-  var _useCreateDialog = (0, _appAco.useCreateDialog)(),
-    showCreateFolderDialog = _useCreateDialog.showDialog;
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    drawerLoading = _useState2[0],
-    setDrawerLoading = _useState2[1];
-  var uploader = (0, _react.useMemo)(function () {
-    return new _BatchFileUploader.BatchFileUploader(view.uploadFile);
-  }, [view.folderId]);
-  var _useState3 = (0, _react.useState)([]),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    tableSorting = _useState4[0],
-    setTableSorting = _useState4[1];
-  var _useState5 = (0, _react.useState)(),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    currentFile = _useState6[0],
-    setCurrentFile = _useState6[1];
-  (0, _react.useEffect)(function () {
-    var fetchFileDetails = async function fetchFileDetails() {
+const FileManagerView = () => {
+  const view = useFileManagerView();
+  const {
+    browser
+  } = useFileManagerViewConfig();
+  const {
+    showSnackbar
+  } = useSnackbar();
+  const [drawerLoading, setDrawerLoading] = useState(null);
+  const uploader = useMemo(() => new BatchFileUploader(view.uploadFile), [view.folderId]);
+  const [tableSorting, setTableSorting] = useState([]);
+  const [currentFile, setCurrentFile] = useState();
+  useEffect(() => {
+    const fetchFileDetails = async () => {
       if (view.showingFileDetails) {
         setDrawerLoading("Loading file details...");
-        var file = await view.getFile(view.showingFileDetails);
+        const file = await view.getFile(view.showingFileDetails);
         setCurrentFile(file);
       } else {
         setCurrentFile(undefined);
@@ -111,120 +64,109 @@ var FileManagerView = function FileManagerView() {
     // call the function
     fetchFileDetails();
   }, [view.showingFileDetails]);
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (!tableSorting?.length) {
       return;
     }
-    var sort = createSort(tableSorting);
+    const sort = createSort(tableSorting);
     if (!sort) {
       return;
     }
     view.setListSort(sort);
   }, [tableSorting]);
-  var getFileUploadErrorMessage = (0, _react.useCallback)(function (e) {
+  const getFileUploadErrorMessage = useCallback(e => {
     if (typeof e === "string") {
-      var match = e.match(/Message>(.*?)<\/Message/);
+      const match = e.match(/Message>(.*?)<\/Message/);
       if (match) {
-        var _match = (0, _slicedToArray2.default)(match, 2),
-          message = _match[1];
+        const [, message] = match;
         return message;
       }
       return e;
     }
     return e.message;
   }, []);
-  (0, _reactHotkeyz.useHotkeys)({
-    zIndex: 50,
+  useHotkeys({
+    zIndex: 20,
     keys: {
-      esc: view.onClose
+      esc: () => {
+        if (view.overlay) {
+          view.onClose();
+        }
+      }
     }
   });
-  var uploadFiles = async function uploadFiles(files) {
+  const uploadFiles = async files => {
     uploader.addFiles(files);
-    uploader.onUploadFinished(function (_ref) {
-      var uploaded = _ref.uploaded,
-        errors = _ref.errors;
+    view.setIsUploadProgressIndicatorVisible(true);
+    uploader.onUploadFinished(({
+      uploaded,
+      errors
+    }) => {
       uploader.reset();
+      view.setIsUploadProgressIndicatorVisible(true);
       if (errors.length > 0) {
-        showSnackbar( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["One or more files were not uploaded successfully:"]))), /*#__PURE__*/_react.default.createElement("ol", null, errors.map(function (_ref2) {
-          var file = _ref2.file,
-            e = _ref2.e;
-          return /*#__PURE__*/_react.default.createElement("li", {
-            key: file.name
-          }, /*#__PURE__*/_react.default.createElement("strong", null, file.name), ": ", getFileUploadErrorMessage(e));
-        }))));
+        showSnackbar(/*#__PURE__*/React.createElement(React.Fragment, null, t`One or more files were not uploaded successfully:`, /*#__PURE__*/React.createElement("ol", null, errors.map(({
+          file,
+          e
+        }) => /*#__PURE__*/React.createElement("li", {
+          key: file.name
+        }, /*#__PURE__*/React.createElement("strong", null, file.name), ": ", getFileUploadErrorMessage(e))))));
         return;
       }
-      showSnackbar(t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["File upload complete."]))));
+      showSnackbar(t`File upload complete.`, {
+        timeout: 3000
+      });
       view.onUploadCompletion(uploaded);
     });
   };
-  var renderUploadFileAction = (0, _react.useCallback)(function (_ref3) {
-    var browseFiles = _ref3.browseFiles;
-    if (!fileManager.canCreate) {
-      return null;
-    }
-    return /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
-      flat: true,
-      small: true,
-      onClick: browseFiles
-    }, /*#__PURE__*/_react.default.createElement(_Button.ButtonIcon, {
-      icon: /*#__PURE__*/_react.default.createElement(_cloud_upload.ReactComponent, null)
-    }), t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["Upload..."]))));
-  }, [fileManager.canCreate]);
-  var filesBeingUploaded = uploader.getJobs().length;
-  var progress = uploader.progress;
-  var renderList = function renderList(browseFiles) {
+  const filesBeingUploaded = uploader.getJobs().length;
+  const progress = uploader.progress;
+  const renderList = browseFiles => {
     if (!view.isListLoading && view.isSearch && view.files.length === 0) {
-      return /*#__PURE__*/_react.default.createElement(_Empty.Empty, {
+      return /*#__PURE__*/React.createElement(Empty, {
         isSearchResult: true,
         browseFiles: browseFiles
       });
     }
     if (!view.isListLoading && view.files.length === 0 && view.folders.length === 0) {
-      return /*#__PURE__*/_react.default.createElement(_Empty.Empty, {
+      return /*#__PURE__*/React.createElement(Empty, {
         isSearchResult: false,
         browseFiles: browseFiles
       });
     }
     if (view.listTable) {
-      var getSelectableRow = function getSelectableRow(rows) {
-        return rows.filter(function (row) {
-          return row.$type === "RECORD";
-        }).map(function (row) {
-          return (0, _omit.default)(row, ["$type", "$selectable"]);
-        });
-      };
-      var onSelectRow = view.hasOnSelectCallback ? function (rows) {
-        var files = getSelectableRow(rows);
+      const getSelectableRow = rows => rows.filter(row => row.$type === "RECORD").map(row => row.data);
+      const onSelectRow = view.hasOnSelectCallback ? rows => {
+        const files = getSelectableRow(rows);
         if (view.multiple) {
           view.setSelected(files);
         } else {
           view.onChange(files[0]);
         }
-      } : function (rows) {
-        var files = getSelectableRow(rows);
+      } : rows => {
+        const files = getSelectableRow(rows);
         view.setSelected(files);
       };
-      var onToggleRow = view.hasOnSelectCallback ? function (row) {
-        var files = getSelectableRow([row]);
+      const onToggleRow = view.hasOnSelectCallback ? row => {
+        const files = getSelectableRow([row]);
         if (view.multiple) {
           view.toggleSelected(files[0]);
         } else {
           view.onChange(files[0]);
         }
-      } : function (row) {
-        var files = getSelectableRow([row]);
+      } : row => {
+        const files = getSelectableRow([row]);
         view.toggleSelected(files[0]);
       };
-      return /*#__PURE__*/_react.default.createElement(_Table.Table, {
+      return /*#__PURE__*/React.createElement(Table, {
         onSelectRow: onSelectRow,
         onToggleRow: onToggleRow,
         sorting: tableSorting,
         onSortingChange: setTableSorting
       });
     }
-    return /*#__PURE__*/_react.default.createElement(_Grid.Grid, {
+    return /*#__PURE__*/React.createElement(Grid, {
+      folderActions: browser.folder.actions,
       folders: view.folders,
       records: view.files,
       loading: view.isListLoading,
@@ -235,112 +177,105 @@ var FileManagerView = function FileManagerView() {
       deselectAll: view.deselectAll,
       onChange: view.onChange,
       onClose: view.onClose,
-      hasOnSelectCallback: view.hasOnSelectCallback
+      hasOnSelectCallback: view.hasOnSelectCallback,
+      displaySubFolders: view.displaySubFolders
     });
   };
-  var loadMoreOnScroll = (0, _react.useCallback)((0, _debounce.default)(async function (_ref4) {
-    var scrollFrame = _ref4.scrollFrame;
+  const loadMoreOnScroll = useCallback(debounce(async ({
+    scrollFrame
+  }) => {
     if (scrollFrame.top > 0.8) {
       view.loadMoreFiles();
     }
   }, 200), [view.meta, view.loadMoreFiles]);
-  var onCreateFolder = (0, _react.useCallback)(function () {
-    showCreateFolderDialog({
-      currentParentId: view.folderId
-    });
-  }, [view.folderId]);
-  var updateFile = (0, _react.useCallback)(async function (data) {
-    var id = data.id,
-      fileData = (0, _objectWithoutProperties2.default)(data, _excluded);
+  const updateFile = useCallback(async data => {
+    const {
+      id,
+      ...fileData
+    } = data;
     setDrawerLoading("Saving file changes...");
     await view.updateFile(id, fileData);
     setDrawerLoading(null);
     showSnackbar("File updated successfully!");
     view.hideFileDetails();
   }, [view.updateFile]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactButterfiles.default, {
+  const withOverlay = element => {
+    if (view.overlay) {
+      return /*#__PURE__*/React.createElement(OverlayLayout, {
+        variant: "strong",
+        onExited: view.onClose
+      }, element);
+    }
+    return element;
+  };
+  return /*#__PURE__*/React.createElement(Files, {
     multiple: true,
     maxSize: view.settings ? view.settings.uploadMaxFileSize + "b" : "1TB",
     multipleMaxSize: "1TB",
     accept: view.accept,
-    onSuccess: function onSuccess(files) {
-      var filesToUpload = files.map(function (file) {
-        return file.src.file;
-      }).filter(Boolean);
+    onSuccess: files => {
+      const filesToUpload = files.map(file => file.src.file).filter(Boolean);
       uploadFiles(filesToUpload);
     },
-    onError: function onError(errors) {
-      var message = (0, _outputFileSelectionError.outputFileSelectionError)(errors);
+    onError: errors => {
+      const message = outputFileSelectionError(errors);
       showSnackbar(message);
     }
-  }, function (_ref5) {
-    var getDropZoneProps = _ref5.getDropZoneProps,
-      browseFiles = _ref5.browseFiles;
-    return /*#__PURE__*/_react.default.createElement(_appAdmin.OverlayLayout, {
-      onExited: view.onClose,
-      barLeft: /*#__PURE__*/_react.default.createElement(_Title.Title, {
-        title: view.listTitle
-      }),
-      barMiddle: /*#__PURE__*/_react.default.createElement(_SearchWidget.SearchWidget, null),
-      barRight: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, view.hasOnSelectCallback && view.selected.length > 0 ? /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
-        flat: true,
-        small: true,
-        onClick: function onClick() {
-          return view.onChange(view.selected);
-        }
-      }, t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Select"]))), " ", view.multiple && "(".concat(view.selected.length, ")")) : renderUploadFileAction({
-        browseFiles: browseFiles
-      }), /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
-        "data-testid": "file-manager.create-folder-button",
-        onClick: onCreateFolder,
-        small: true,
-        style: {
-          margin: "0 8px"
-        }
-      }, /*#__PURE__*/_react.default.createElement(_Button.ButtonIcon, {
-        icon: /*#__PURE__*/_react.default.createElement(_add.ReactComponent, null)
-      }), t(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["New Folder"])))), /*#__PURE__*/_react.default.createElement(_LayoutSwitch.LayoutSwitch, null))
-    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_FileDetails.FileDetails, {
-      loading: drawerLoading,
-      file: currentFile,
-      open: Boolean(view.showingFileDetails),
-      onClose: view.hideFileDetails,
-      onSave: updateFile
-    }), /*#__PURE__*/_react.default.createElement(_LeftSidebar.LeftSidebar, {
-      currentFolder: view.folderId,
-      onFolderClick: view.setFolderId
-    }, browser.filterByTags ? /*#__PURE__*/_react.default.createElement(_TagsList.TagsList, {
-      loading: view.tags.loading,
-      activeTags: view.tags.activeTags,
-      tags: view.tags.allTags,
-      onActivatedTagsChange: view.tags.setActiveTags
-    }) : null), /*#__PURE__*/_react.default.createElement(FileListWrapper, Object.assign({}, getDropZoneProps({
-      onDragOver: function onDragOver() {
-        return view.setDragging(true);
-      },
-      onDragLeave: function onDragLeave() {
-        return view.setDragging(false);
-      },
-      onDrop: function onDrop() {
-        return view.setDragging(false);
-      }
-    }), {
-      "data-testid": "fm-list-wrapper"
-    }), view.dragging && /*#__PURE__*/_react.default.createElement(_DropFilesHere.DropFilesHere, null), /*#__PURE__*/_react.default.createElement(_BulkActions.BulkActions, null), /*#__PURE__*/_react.default.createElement(_Filters.Filters, null), /*#__PURE__*/_react.default.createElement(_Scrollbar.Scrollbar, {
-      onScrollFrame: function onScrollFrame(scrollFrame) {
-        return loadMoreOnScroll({
-          scrollFrame: scrollFrame
-        });
-      }
-    }, renderList(browseFiles)), /*#__PURE__*/_react.default.createElement(_BottomInfoBar.BottomInfoBar, {
-      accept: view.accept,
-      listing: view.isListLoadingMore
-    }), /*#__PURE__*/_react.default.createElement(_UploadStatus.UploadStatus, {
-      numberOfFiles: filesBeingUploaded,
-      progress: progress
-    }))));
-  }));
+  }, ({
+    getDropZoneProps,
+    browseFiles
+  }) => withOverlay(/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FileDetails, {
+    loading: drawerLoading,
+    file: currentFile,
+    open: Boolean(view.showingFileDetails),
+    onClose: view.hideFileDetails,
+    onSave: updateFile
+  }), /*#__PURE__*/React.createElement(SplitView, {
+    namespace: "fm/file/list"
+  }, /*#__PURE__*/React.createElement(LeftPanel, {
+    span: 2
+  }, /*#__PURE__*/React.createElement(LeftSidebar, {
+    currentFolder: view.folderId,
+    onFolderClick: view.setFolderId
+  }, browser.filterByTags ? /*#__PURE__*/React.createElement(TagsList, {
+    loading: view.tags.loading,
+    activeTags: view.tags.activeTags,
+    tags: view.tags.allTags,
+    onActivatedTagsChange: view.tags.setActiveTags
+  }) : null)), /*#__PURE__*/React.createElement(RightPanel, {
+    span: 10
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col relative",
+    style: {
+      height: "calc(100vh - 45px"
+    }
+  }, /*#__PURE__*/React.createElement(Header, {
+    browseFiles: browseFiles
+  }), /*#__PURE__*/React.createElement("div", Object.assign({
+    className: "flex-1"
+  }, getDropZoneProps({
+    onDragOver: () => view.setDragging(true),
+    onDragLeave: () => view.setDragging(false),
+    onDrop: () => view.setDragging(false)
+  }), {
+    "data-testid": "fm-list-wrapper"
+  }), /*#__PURE__*/React.createElement(BulkActions, null), /*#__PURE__*/React.createElement(Filters, null), /*#__PURE__*/React.createElement(Scrollbar, {
+    onScrollFrame: scrollFrame => loadMoreOnScroll({
+      scrollFrame
+    })
+  }, renderList(browseFiles)), view.dragging && /*#__PURE__*/React.createElement(FileDropPlaceholder, null), /*#__PURE__*/React.createElement(UploadStatus, {
+    numberOfFiles: filesBeingUploaded,
+    progress: progress,
+    isVisible: view.isUploadProgressIndicatorVisible,
+    setIsVisible: view.setIsUploadProgressIndicatorVisible
+  })), /*#__PURE__*/React.createElement(BottomInfoBar, {
+    accept: view.accept,
+    listing: view.isListLoadingMore,
+    loading: view.isListLoading,
+    totalCount: view.meta?.totalCount ?? 0,
+    currentCount: view.files.length
+  })))))));
 };
-var _default = exports.default = (0, _mobxReactLite.observer)(FileManagerView);
+export default observer(FileManagerView);
 
 //# sourceMappingURL=FileManagerView.js.map