@webiny/app-file-manager 0.0.0-mt-2 → 0.0.0-unstable.085ff6572f

package/components/DropFilesHere/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./DropFilesHere\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/components/DropFilesHere/styled.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+/// <reference types="react" />
+/// <reference types="web" />
+declare type DropFilesHereWrapperProps = {
+    empty?: boolean;
+};
+export declare const DropFilesHereWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & DropFilesHereWrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DropFilesHereInner: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & DropFilesHereWrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DropFilesHereIconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DropFilesHereIcon: import("@emotion/styled").StyledComponent<import("react").SVGProps<SVGSVGElement> & {
+    alt?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export {};

package/components/DropFilesHere/styled.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropFilesHereWrapper = exports.DropFilesHereInner = exports.DropFilesHereIconWrapper = exports.DropFilesHereIcon = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _cloud_upload = require("@material-design-icons/svg/filled/cloud_upload.svg");
+var DropFilesHereWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "DropFilesHereWrapper",
+  target: "e1dajg7m0"
+})("margin:0 auto;padding-top:0;height:calc(100vh - 95px);z-index:3;width:100%;position:absolute;background:", function (_ref) {
+  var empty = _ref.empty;
+  return empty ? "transparent" : "var(--mdc-theme-text-hint-on-light)";
+}, ";");
+exports.DropFilesHereWrapper = DropFilesHereWrapper;
+var DropFilesHereInner = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "DropFilesHereInner",
+  target: "e1dajg7m1"
+})("text-align:center;width:300px;height:300px;background-color:", function (_ref2) {
+  var empty = _ref2.empty;
+  return empty ? "var(--mdc-theme-surface)" : "var(--mdc-theme-background)";
+}, ";border-radius:50%;position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);");
+exports.DropFilesHereInner = DropFilesHereInner;
+var DropFilesHereIconWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "DropFilesHereIconWrapper",
+  target: "e1dajg7m2"
+})("position:absolute;top:90px;width:300px;display:flex;flex-direction:column;align-items:center;color:var(--mdc-theme-on-surface);");
+exports.DropFilesHereIconWrapper = DropFilesHereIconWrapper;
+var DropFilesHereIcon = /*#__PURE__*/(0, _styled.default)(_cloud_upload.ReactComponent, {
+  label: "DropFilesHereIcon",
+  target: "e1dajg7m3"
+})("width:100px !important;height:auto;display:inline-block;color:var(--mdc-theme-on-surface);");
+exports.DropFilesHereIcon = DropFilesHereIcon;

package/components/DropFilesHere/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DropFilesHereWrapper","styled","empty","DropFilesHereInner","DropFilesHereIconWrapper","DropFilesHereIcon","UploadIcon"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { ReactComponent as UploadIcon } from \"@material-design-icons/svg/filled/cloud_upload.svg\";\n\ntype DropFilesHereWrapperProps = {\n    empty?: boolean;\n};\n\nexport const DropFilesHereWrapper = styled(\"div\")<DropFilesHereWrapperProps>`\n    margin: 0 auto;\n    padding-top: 0;\n    height: calc(100vh - 95px);\n    z-index: 3;\n    width: 100%;\n    position: absolute;\n    background: ${({ empty }) => (empty ? \"transparent\" : \"var(--mdc-theme-text-hint-on-light)\")};\n`;\n\nexport const DropFilesHereInner = styled(\"div\")<DropFilesHereWrapperProps>`\n    text-align: center;\n    width: 300px;\n    height: 300px;\n    background-color: ${({ empty }) =>\n        empty ? \"var(--mdc-theme-surface)\" : \"var(--mdc-theme-background)\"};\n    border-radius: 50%;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translateX(-50%) translateY(-50%);\n`;\n\nexport const DropFilesHereIconWrapper = styled(\"div\")`\n    position: absolute;\n    top: 90px;\n    width: 300px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    color: var(--mdc-theme-on-surface);\n`;\n\nexport const DropFilesHereIcon = styled(UploadIcon)`\n    width: 100px !important;\n    height: auto;\n    display: inline-block;\n    color: var(--mdc-theme-on-surface);\n`;\n"],"mappings":";;;;;;;AAAA;AACA;AAMO,IAAMA,oBAAoB,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,+GAO9B;EAAA,IAAGC,KAAK,QAALA,KAAK;EAAA,OAAQA,KAAK,GAAG,aAAa,GAAG,qCAAqC;AAAA,CAAC,MAC/F;AAAC;AAEK,IAAMC,kBAAkB,oBAAGF,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,mEAItB;EAAA,IAAGC,KAAK,SAALA,KAAK;EAAA,OACxBA,KAAK,GAAG,0BAA0B,GAAG,6BAA6B;AAAA,wGAMzE;AAAC;AAEK,IAAME,wBAAwB,oBAAGH,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,qIAQnD;AAAC;AAEK,IAAMI,iBAAiB,oBAAGJ,eAAM,EAACK,4BAAU;EAAA;EAAA;AAAA,gGAKjD;AAAC"}

package/components/Empty/Empty.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { FilesRenderChildren } from "react-butterfiles";
+interface EmptyViewProps {
+    browseFiles: FilesRenderChildren["browseFiles"];
+    isSearchResult?: boolean;
+}
+export declare const Empty: React.VFC<EmptyViewProps>;
+export {};

package/components/Empty/Empty.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Empty = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _NoPermission = require("../NoPermission");
+var _NoResults = require("../NoResults");
+var _DropFilesHere = require("../DropFilesHere");
+var Empty = function Empty(_ref) {
+  var browseFiles = _ref.browseFiles,
+    isSearchResult = _ref.isSearchResult;
+  var _useFileManagerApi = (0, _.useFileManagerApi)(),
+    canRead = _useFileManagerApi.canRead;
+  if (!canRead) {
+    return /*#__PURE__*/_react.default.createElement(_NoPermission.NoPermission, null);
+  }
+  if (isSearchResult) {
+    return /*#__PURE__*/_react.default.createElement(_NoResults.NoResults, null);
+  }
+  return /*#__PURE__*/_react.default.createElement(_DropFilesHere.DropFilesHere, {
+    empty: true,
+    onClick: function onClick() {
+      return browseFiles();
+    }
+  });
+};
+exports.Empty = Empty;

package/components/Empty/Empty.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Empty","browseFiles","isSearchResult","useFileManagerApi","canRead"],"sources":["Empty.tsx"],"sourcesContent":["import React from \"react\";\nimport { FilesRenderChildren } from \"react-butterfiles\";\n\nimport { useFileManagerApi } from \"~/index\";\nimport { NoPermission } from \"~/components/NoPermission\";\nimport { NoResults } from \"~/components/NoResults\";\nimport { DropFilesHere } from \"~/components/DropFilesHere\";\n\ninterface EmptyViewProps {\n    browseFiles: FilesRenderChildren[\"browseFiles\"];\n    isSearchResult?: boolean;\n}\n\nexport const Empty: React.VFC<EmptyViewProps> = ({ browseFiles, isSearchResult }) => {\n    const { canRead } = useFileManagerApi();\n\n    if (!canRead) {\n        return <NoPermission />;\n    }\n    if (isSearchResult) {\n        return <NoResults />;\n    }\n    return <DropFilesHere empty onClick={() => browseFiles()} />;\n};\n"],"mappings":";;;;;;;AAAA;AAGA;AACA;AACA;AACA;AAOO,IAAMA,KAAgC,GAAG,SAAnCA,KAAgC,OAAwC;EAAA,IAAlCC,WAAW,QAAXA,WAAW;IAAEC,cAAc,QAAdA,cAAc;EAC1E,yBAAoB,IAAAC,mBAAiB,GAAE;IAA/BC,OAAO,sBAAPA,OAAO;EAEf,IAAI,CAACA,OAAO,EAAE;IACV,oBAAO,6BAAC,0BAAY,OAAG;EAC3B;EACA,IAAIF,cAAc,EAAE;IAChB,oBAAO,6BAAC,oBAAS,OAAG;EACxB;EACA,oBAAO,6BAAC,4BAAa;IAAC,KAAK;IAAC,OAAO,EAAE;MAAA,OAAMD,WAAW,EAAE;IAAA;EAAC,EAAG;AAChE,CAAC;AAAC"}

package/components/Empty/index.d.ts

@@ -0,0 +1 @@
+export * from "./Empty";

package/components/Empty/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Empty = require("./Empty");
+Object.keys(_Empty).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Empty[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Empty[key];
+    }
+  });
+});

package/components/Empty/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./Empty\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/components/FileDetails/FileDetails.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { FileItem } from "@webiny/app-admin/types";
+export interface FileDetailsProps {
+    file?: FileItem;
+    open: boolean;
+    loading: boolean;
+    onClose: () => void;
+}
+export declare const FileDetails: React.FC<FileDetailsProps>;

package/components/FileDetails/FileDetails.js

@@ -0,0 +1,155 @@
+"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 _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactHotkeyz = require("react-hotkeyz");
+var _omit = _interopRequireDefault(require("lodash/omit"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _form = require("@webiny/form");
+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 _Aliases = require("./components/Aliases");
+var _Name = require("./components/Name");
+var _Tags = require("./components/Tags");
+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 _appAdmin = require("@webiny/app-admin");
+var _useFileDetails2 = require("../../hooks/useFileDetails");
+var _FileProvider = require("../../contexts/FileProvider");
+var _excluded = ["id"];
+var FileDetailsDrawer = /*#__PURE__*/(0, _styled.default)(_Drawer.Drawer, {
+  label: "FileDetailsDrawer",
+  target: "ekbey2w0"
+})("&.mdc-drawer{width:", function (props) {
+  return props.width;
+}, ";}");
+var FormContainer = /*#__PURE__*/(0, _styled.default)(_SimpleForm.SimpleForm, {
+  label: "FormContainer",
+  target: "ekbey2w1"
+})("margin:0;.mdc-floating-label{transform-origin:left top !important;left:16px !important;right:initial !important;}");
+var FileDetailsInner = function FileDetailsInner(_ref) {
+  var file = _ref.file;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isLoading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useSnackbar = (0, _appAdmin.useSnackbar)(),
+    showSnackbar = _useSnackbar.showSnackbar;
+  var fileModel = (0, _useFileModel.useFileModel)();
+  var _useFileManagerView = (0, _.useFileManagerView)(),
+    updateFile = _useFileManagerView.updateFile;
+  var _useFileDetails = (0, _useFileDetails2.useFileDetails)(),
+    close = _useFileDetails.close;
+  var hasExtensions = (0, _react.useMemo)(function () {
+    return fileModel.fields.find(function (field) {
+      return field.fieldId === "extensions";
+    });
+  }, [fileModel]);
+  var onSubmit = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_ref2) {
+      var id, data;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            id = _ref2.id, data = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+            setLoading(true);
+            _context.next = 4;
+            return updateFile(id, (0, _omit.default)(data, ["createdBy", "createdOn", "src"]));
+          case 4:
+            setLoading(false);
+            showSnackbar("File updated successfully!");
+            close();
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onSubmit(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/_react.default.createElement(_form.Form, {
+    data: file,
+    onSubmit: onSubmit
+  }, function () {
+    return /*#__PURE__*/_react.default.createElement(_Drawer.DrawerContent, {
+      dir: "ltr"
+    }, isLoading ? /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, {
+      label: "Saving file..."
+    }) : null, /*#__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, null, /*#__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, null, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, null, /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
+      label: "Basic Details"
+    }, /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+      span: 12
+    }, /*#__PURE__*/_react.default.createElement(_Name.Name, null)), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+      span: 12
+    }, /*#__PURE__*/_react.default.createElement(_Tags.Tags, null)), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+      span: 12
+    }, /*#__PURE__*/_react.default.createElement(_Aliases.Aliases, null)))), hasExtensions ? /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
+      label: "Advanced Details"
+    }, /*#__PURE__*/_react.default.createElement(_Extensions.Extensions, {
+      model: fileModel
+    })) : null))), /*#__PURE__*/_react.default.createElement(_Footer.Footer, null)));
+  });
+};
+var FileDetails = function FileDetails(_ref4) {
+  var open = _ref4.open,
+    onClose = _ref4.onClose,
+    loading = _ref4.loading,
+    file = _ref4.file;
+  (0, _reactHotkeyz.useHotkeys)({
+    zIndex: 55,
+    disabled: !open,
+    keys: {
+      esc: onClose
+    }
+  });
+  var _useFileManagerViewCo = (0, _.useFileManagerViewConfig)(),
+    fileDetails = _useFileManagerViewCo.fileDetails;
+  return /*#__PURE__*/_react.default.createElement(FileDetailsDrawer, {
+    width: fileDetails.width,
+    dir: "rtl",
+    modal: true,
+    open: open,
+    onClose: onClose,
+    "data-testid": "fm.file-details.drawer"
+  }, /*#__PURE__*/_react.default.createElement(_Drawer.DrawerContent, {
+    dir: "ltr"
+  }, loading && /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, {
+    label: "Loading file details..."
+  }), file && /*#__PURE__*/_react.default.createElement(_FileProvider.FileProvider, {
+    file: file
+  }, /*#__PURE__*/_react.default.createElement(_FileDetailsProvider.FileDetailsProvider, {
+    hideFileDetails: onClose
+  }, /*#__PURE__*/_react.default.createElement(FileDetailsInner, {
+    file: file,
+    onClose: onClose
+  })))));
+};
+exports.FileDetails = FileDetails;

package/components/FileDetails/FileDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FileDetailsDrawer","styled","Drawer","props","width","FormContainer","SimpleForm","FileDetailsInner","file","useState","isLoading","setLoading","useSnackbar","showSnackbar","fileModel","useFileModel","useFileManagerView","updateFile","useFileDetails","close","hasExtensions","useMemo","fields","find","field","fieldId","onSubmit","id","data","omit","margin","FileDetails","open","onClose","loading","useHotkeys","zIndex","disabled","keys","esc","useFileManagerViewConfig","fileDetails"],"sources":["FileDetails.tsx"],"sourcesContent":["import React, { useState, useMemo } from \"react\";\n// @ts-ignore\nimport { useHotkeys } from \"react-hotkeyz\";\nimport omit from \"lodash/omit\";\nimport styled from \"@emotion/styled\";\nimport { FileItem } from \"@webiny/app-admin/types\";\nimport { Form, FormOnSubmit } from \"@webiny/form\";\nimport { Drawer, 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 { Aliases } from \"./components/Aliases\";\nimport { Name } from \"./components/Name\";\nimport { Tags } from \"./components/Tags\";\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 { useFileManagerView, useFileManagerViewConfig } from \"~/index\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { useFileDetails } from \"~/hooks/useFileDetails\";\nimport { FileProvider } from \"~/contexts/FileProvider\";\n\ntype FileDetailsDrawerProps = React.ComponentProps<typeof Drawer> & { width: string };\n\nconst FileDetailsDrawer = styled(Drawer)<FileDetailsDrawerProps>`\n    &.mdc-drawer {\n        width: ${props => props.width};\n    }\n`;\n\nconst FormContainer = styled(SimpleForm)`\n    margin: 0;\n    /* Fix for the dir=rtl when a form is inside a drawer placed on the right side */\n    .mdc-floating-label {\n        transform-origin: left top !important;\n        left: 16px !important;\n        right: initial !important;\n    }\n`;\n\ninterface FileDetailsInnerProps {\n    file: FileItem;\n    onClose: () => void;\n}\n\nconst FileDetailsInner: React.FC<FileDetailsInnerProps> = ({ file }) => {\n    const [isLoading, setLoading] = useState(false);\n    const { showSnackbar } = useSnackbar();\n    const fileModel = useFileModel();\n    const { updateFile } = useFileManagerView();\n    const { close } = useFileDetails();\n\n    const hasExtensions = useMemo(() => {\n        return fileModel.fields.find(field => field.fieldId === \"extensions\");\n    }, [fileModel]);\n\n    const onSubmit: FormOnSubmit<FileItem> = async ({ id, ...data }) => {\n        setLoading(true);\n        await updateFile(id, omit(data, [\"createdBy\", \"createdOn\", \"src\"]));\n        setLoading(false);\n        showSnackbar(\"File updated successfully!\");\n        close();\n    };\n\n    return (\n        <Form data={file} onSubmit={onSubmit}>\n            {() => (\n                <DrawerContent dir=\"ltr\">\n                    {isLoading ? <CircularProgress label={\"Saving file...\"} /> : null}\n                    <FormContainer>\n                        <Header />\n                        <Content>\n                            <Content.Panel>\n                                <Elevation z={2} style={{ margin: 20 }}>\n                                    <Actions />\n                                    <Preview />\n                                    <PreviewMeta />\n                                </Elevation>\n                            </Content.Panel>\n                            <Content.Panel>\n                                <Tabs>\n                                    <Tab label={\"Basic Details\"}>\n                                        <Grid>\n                                            <Cell span={12}>\n                                                <Name />\n                                            </Cell>\n                                            <Cell span={12}>\n                                                <Tags />\n                                            </Cell>\n                                            <Cell span={12}>\n                                                <Aliases />\n                                            </Cell>\n                                        </Grid>\n                                    </Tab>\n                                    {hasExtensions ? (\n                                        <Tab label={\"Advanced Details\"}>\n                                            <Extensions model={fileModel} />\n                                        </Tab>\n                                    ) : null}\n                                </Tabs>\n                            </Content.Panel>\n                        </Content>\n                        <Footer />\n                    </FormContainer>\n                </DrawerContent>\n            )}\n        </Form>\n    );\n};\n\nexport interface FileDetailsProps {\n    file?: FileItem;\n    open: boolean;\n    loading: boolean;\n    onClose: () => void;\n}\n\nexport const FileDetails: React.FC<FileDetailsProps> = ({ open, onClose, loading, file }) => {\n    useHotkeys({\n        zIndex: 55,\n        disabled: !open,\n        keys: {\n            esc: onClose\n        }\n    });\n\n    const { fileDetails } = useFileManagerViewConfig();\n\n    return (\n        <FileDetailsDrawer\n            width={fileDetails.width}\n            dir=\"rtl\"\n            modal\n            open={open}\n            onClose={onClose}\n            data-testid={\"fm.file-details.drawer\"}\n        >\n            <DrawerContent dir=\"ltr\">\n                {loading && <CircularProgress label={\"Loading file details...\"} />}\n                {file && (\n                    <FileProvider file={file}>\n                        <FileDetailsProvider hideFileDetails={onClose}>\n                            <FileDetailsInner file={file} onClose={onClose} />\n                        </FileDetailsProvider>\n                    </FileProvider>\n                )}\n            </DrawerContent>\n        </FileDetailsDrawer>\n    );\n};\n"],"mappings":"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"}

package/components/FileDetails/FileDetailsProvider.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface FileDetailsContext {
+    close: () => void;
+    own: boolean;
+    scope?: string;
+}
+export declare const FileDetailsContext: React.Context<FileDetailsContext | undefined>;
+interface FileDetailsProviderProps {
+    hideFileDetails: () => void;
+    children: React.ReactNode;
+}
+export declare const FileDetailsProvider: ({ hideFileDetails, children }: FileDetailsProviderProps) => JSX.Element;
+export {};

package/components/FileDetails/FileDetailsProvider.js

@@ -0,0 +1,25 @@
+"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 = /*#__PURE__*/(0, _react.createContext)(undefined);
+exports.FileDetailsContext = FileDetailsContext;
+var FileDetailsProvider = function FileDetailsProvider(_ref) {
+  var hideFileDetails = _ref.hideFileDetails,
+    children = _ref.children;
+  var view = (0, _FileManagerViewProvider.useFileManagerView)();
+  var value = {
+    close: hideFileDetails,
+    scope: view.scope,
+    own: view.own
+  };
+  return /*#__PURE__*/_react.default.createElement(FileDetailsContext.Provider, {
+    value: value
+  }, children);
+};
+exports.FileDetailsProvider = FileDetailsProvider;

package/components/FileDetails/FileDetailsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FileDetailsContext","createContext","undefined","FileDetailsProvider","hideFileDetails","children","view","useFileManagerView","value","close","scope","own"],"sources":["FileDetailsProvider.tsx"],"sourcesContent":["import React, { createContext } from \"react\";\nimport { useFileManagerView } from \"~/modules/FileManagerRenderer/FileManagerViewProvider\";\n\nexport interface FileDetailsContext {\n    close: () => void;\n    own: boolean;\n    scope?: string;\n}\n\nexport const FileDetailsContext = createContext<FileDetailsContext | undefined>(undefined);\n\ninterface FileDetailsProviderProps {\n    hideFileDetails: () => void;\n    children: React.ReactNode;\n}\n\nexport const FileDetailsProvider = ({ hideFileDetails, children }: FileDetailsProviderProps) => {\n    const view = useFileManagerView();\n    const value: FileDetailsContext = { close: hideFileDetails, scope: view.scope, own: view.own };\n\n    return <FileDetailsContext.Provider value={value}>{children}</FileDetailsContext.Provider>;\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAQO,IAAMA,kBAAkB,gBAAG,IAAAC,oBAAa,EAAiCC,SAAS,CAAC;AAAC;AAOpF,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,OAAgE;EAAA,IAA1DC,eAAe,QAAfA,eAAe;IAAEC,QAAQ,QAARA,QAAQ;EAC3D,IAAMC,IAAI,GAAG,IAAAC,2CAAkB,GAAE;EACjC,IAAMC,KAAyB,GAAG;IAAEC,KAAK,EAAEL,eAAe;IAAEM,KAAK,EAAEJ,IAAI,CAACI,KAAK;IAAEC,GAAG,EAAEL,IAAI,CAACK;EAAI,CAAC;EAE9F,oBAAO,6BAAC,kBAAkB,CAAC,QAAQ;IAAC,KAAK,EAAEH;EAAM,GAAEH,QAAQ,CAA+B;AAC9F,CAAC;AAAC"}

package/components/FileDetails/components/Actions.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Actions: () => JSX.Element;

package/components/FileDetails/components/Actions.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Actions = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _get = _interopRequireDefault(require("lodash/get"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _useFile2 = require("../../../hooks/useFile");
+var _getFileTypePlugin = _interopRequireDefault(require("../../../getFileTypePlugin"));
+var _CopyUrl = require("./actions/CopyUrl");
+var _DeleteImage = require("./actions/DeleteImage");
+var _Download = require("./actions/Download");
+var _MoveTo = require("./actions/MoveTo");
+var ActionsContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "ActionsContainer",
+  target: "e151g3xw0"
+})("text-align:center;border-bottom:1px solid var(--mdc-theme-on-background);");
+var Actions = function Actions() {
+  var _useFile = (0, _useFile2.useFile)(),
+    file = _useFile.file;
+  var filePlugin = (0, _getFileTypePlugin.default)(file);
+
+  // TODO: implement actions using component composition
+  var actions = (0, _get.default)(filePlugin, "fileDetails.actions") || (0, _get.default)(filePlugin, "actions") || [];
+  return /*#__PURE__*/_react.default.createElement(ActionsContainer, null, /*#__PURE__*/_react.default.createElement(_Download.Download, null), /*#__PURE__*/_react.default.createElement(_MoveTo.MoveTo, null), /*#__PURE__*/_react.default.createElement(_CopyUrl.CopyUrl, null), actions.map(function (Component, index) {
+    return /*#__PURE__*/_react.default.createElement(Component, {
+      key: index,
+      file: file
+    });
+  }), /*#__PURE__*/_react.default.createElement(_DeleteImage.DeleteImage, null));
+};
+exports.Actions = Actions;

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

@@ -0,0 +1 @@
+{"version":3,"names":["ActionsContainer","styled","Actions","useFile","file","filePlugin","getFileTypePlugin","actions","get","map","Component","index"],"sources":["Actions.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport styled from \"@emotion/styled\";\nimport { FileItem } from \"@webiny/app-admin/types\";\nimport { useFile } from \"~/hooks/useFile\";\nimport getFileTypePlugin from \"~/getFileTypePlugin\";\nimport { CopyUrl } from \"./actions/CopyUrl\";\nimport { DeleteImage } from \"./actions/DeleteImage\";\nimport { Download } from \"./actions/Download\";\nimport { MoveTo } from \"./actions/MoveTo\";\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 { file } = useFile();\n    const filePlugin = getFileTypePlugin(file);\n\n    // TODO: implement actions using component composition\n    const actions: React.FC[] =\n        get(filePlugin, \"fileDetails.actions\") || get(filePlugin, \"actions\") || [];\n\n    return (\n        <ActionsContainer>\n            <Download />\n            <MoveTo />\n            <CopyUrl />\n            {actions.map((Component: React.FC<{ file: FileItem }>, index: number) => (\n                <Component key={index} file={file} />\n            ))}\n            <DeleteImage />\n        </ActionsContainer>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA,IAAMA,gBAAgB,oBAAGC,eAAM;EAAA;EAAA;AAAA,+EAG9B;AAEM,IAAMC,OAAO,GAAG,SAAVA,OAAO,GAAS;EACzB,eAAiB,IAAAC,iBAAO,GAAE;IAAlBC,IAAI,YAAJA,IAAI;EACZ,IAAMC,UAAU,GAAG,IAAAC,0BAAiB,EAACF,IAAI,CAAC;;EAE1C;EACA,IAAMG,OAAmB,GACrB,IAAAC,YAAG,EAACH,UAAU,EAAE,qBAAqB,CAAC,IAAI,IAAAG,YAAG,EAACH,UAAU,EAAE,SAAS,CAAC,IAAI,EAAE;EAE9E,oBACI,6BAAC,gBAAgB,qBACb,6BAAC,kBAAQ,OAAG,eACZ,6BAAC,cAAM,OAAG,eACV,6BAAC,gBAAO,OAAG,EACVE,OAAO,CAACE,GAAG,CAAC,UAACC,SAAuC,EAAEC,KAAa;IAAA,oBAChE,6BAAC,SAAS;MAAC,GAAG,EAAEA,KAAM;MAAC,IAAI,EAAEP;IAAK,EAAG;EAAA,CACxC,CAAC,eACF,6BAAC,wBAAW,OAAG,CACA;AAE3B,CAAC;AAAC"}

package/components/FileDetails/components/Aliases.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Aliases: () => JSX.Element;

package/components/FileDetails/components/Aliases.js

@@ -0,0 +1,107 @@
+"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.Aliases = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _DynamicFieldset = require("@webiny/ui/DynamicFieldset");
+var _Input = require("@webiny/ui/Input");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Typography = require("@webiny/ui/Typography");
+var _Button = require("@webiny/ui/Button");
+var _validation = require("@webiny/validation");
+var _form = require("@webiny/form");
+var _delete = require("@material-design-icons/svg/outlined/delete.svg");
+var Fieldset = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "eff9pp30",
+  label: "Fieldset"
+})({
+  position: "relative",
+  width: "100%",
+  marginBottom: 15,
+  ".webiny-ui-button": {
+    position: "absolute",
+    display: "block",
+    right: 10,
+    top: 13
+  }
+});
+var Header = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "eff9pp31",
+  label: "Header"
+})({
+  display: "flex",
+  justifyContent: "space-between"
+});
+var DeleteAliasButton = /*#__PURE__*/(0, _styled.default)(_Button.IconButton, {
+  label: "DeleteAliasButton",
+  target: "eff9pp32"
+})("position:absolute;top:5px;right:5px;");
+var FileAliasMessage = /*#__PURE__*/(0, _styled.default)("span", {
+  label: "FileAliasMessage",
+  target: "eff9pp33"
+})("color:var(--mdc-theme-text-secondary-on-background);font-size:12px;");
+var PATHNAME_REGEX = /^\/[/.a-zA-Z0-9-]+$/;
+var Aliases = function Aliases() {
+  var _useBind = (0, _form.useBind)({
+      name: "aliases"
+    }),
+    value = _useBind.value,
+    onChange = _useBind.onChange;
+  var addAlias = function addAlias() {
+    var newValue = Array.isArray(value) ? (0, _toConsumableArray2.default)(value) : [];
+    newValue.push("");
+    if (!onChange) {
+      return;
+    }
+    onChange(newValue);
+  };
+  var aliasValidator = (0, _react.useMemo)(function () {
+    return [_validation.validation.create("required"), function (value) {
+      if (!PATHNAME_REGEX.test(value)) {
+        throw new Error("Value must be a valid pathname.");
+      }
+    }];
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_DynamicFieldset.DynamicFieldset, {
+    value: value || [""],
+    onChange: onChange
+  }, function (_ref) {
+    var actions = _ref.actions,
+      header = _ref.header,
+      row = _ref.row,
+      empty = _ref.empty;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, row(function (_ref2) {
+      var index = _ref2.index;
+      return /*#__PURE__*/_react.default.createElement(Fieldset, null, /*#__PURE__*/_react.default.createElement(_form.Bind, {
+        validators: aliasValidator,
+        name: "aliases.".concat(index)
+      }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+        placeholder: "Alias",
+        description: "Enter a file path, e.g., /my/custom/file/path.png"
+      })), /*#__PURE__*/_react.default.createElement(DeleteAliasButton, {
+        icon: /*#__PURE__*/_react.default.createElement(_delete.ReactComponent, null),
+        onClick: actions.remove(index)
+      }));
+    }), empty(function () {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+        use: "overline"
+      }, "File Aliases"), /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
+        onClick: addAlias
+      }, "+ Add Alias")), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+        use: "caption"
+      }, /*#__PURE__*/_react.default.createElement(FileAliasMessage, null, "To make your file accessible via custom paths, add one or more aliases.")));
+    }), header(function () {
+      return /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+        use: "overline"
+      }, "File Aliases"), /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
+        onClick: addAlias
+      }, "+ Add Alias"));
+    }));
+  });
+};
+exports.Aliases = Aliases;

package/components/FileDetails/components/Aliases.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Fieldset","styled","position","width","marginBottom","display","right","top","Header","justifyContent","DeleteAliasButton","IconButton","FileAliasMessage","PATHNAME_REGEX","Aliases","useBind","name","value","onChange","addAlias","newValue","Array","isArray","push","aliasValidator","useMemo","validation","create","test","Error","actions","header","row","empty","index","remove"],"sources":["Aliases.tsx"],"sourcesContent":["import React, { Fragment, useMemo } from \"react\";\nimport { DynamicFieldset } from \"@webiny/ui/DynamicFieldset\";\nimport { Input } from \"@webiny/ui/Input\";\nimport styled from \"@emotion/styled\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ButtonDefault, IconButton } from \"@webiny/ui/Button\";\nimport { validation } from \"@webiny/validation\";\nimport { Bind, useBind } from \"@webiny/form\";\nimport { ReactComponent as DeleteIcon } from \"@material-design-icons/svg/outlined/delete.svg\";\n\nconst Fieldset = styled(\"div\")({\n    position: \"relative\",\n    width: \"100%\",\n    marginBottom: 15,\n    \".webiny-ui-button\": {\n        position: \"absolute\",\n        display: \"block\",\n        right: 10,\n        top: 13\n    }\n});\n\nconst Header = styled(\"div\")({\n    display: \"flex\",\n    justifyContent: \"space-between\"\n});\n\nconst DeleteAliasButton = styled(IconButton)`\n    position: absolute;\n    top: 5px;\n    right: 5px;\n`;\n\nconst FileAliasMessage = styled(\"span\")`\n    color: var(--mdc-theme-text-secondary-on-background);\n    font-size: 12px;\n`;\n\nconst PATHNAME_REGEX = /^\\/[/.a-zA-Z0-9-]+$/;\n\nexport const Aliases = () => {\n    const { value, onChange } = useBind<string[]>({ name: \"aliases\" });\n\n    const addAlias = () => {\n        const newValue = Array.isArray(value) ? [...value] : [];\n        newValue.push(\"\");\n        if (!onChange) {\n            return;\n        }\n        onChange(newValue);\n    };\n\n    const aliasValidator = useMemo(() => {\n        return [\n            validation.create(\"required\"),\n            (value: string) => {\n                if (!PATHNAME_REGEX.test(value)) {\n                    throw new Error(\"Value must be a valid pathname.\");\n                }\n            }\n        ];\n    }, []);\n\n    return (\n        <DynamicFieldset value={value || [\"\"]} onChange={onChange}>\n            {({ actions, header, row, empty }) => (\n                <>\n                    {row(({ index }) => (\n                        <Fieldset>\n                            <Bind validators={aliasValidator} name={`aliases.${index}`}>\n                                <Input\n                                    placeholder={\"Alias\"}\n                                    description={\n                                        \"Enter a file path, e.g., /my/custom/file/path.png\"\n                                    }\n                                />\n                            </Bind>\n                            <DeleteAliasButton\n                                icon={<DeleteIcon />}\n                                onClick={actions.remove(index)}\n                            />\n                        </Fieldset>\n                    ))}\n                    {empty(() => (\n                        <Fragment>\n                            <Header>\n                                <Typography use={\"overline\"}>File Aliases</Typography>\n                                <ButtonDefault onClick={addAlias}>+ Add Alias</ButtonDefault>\n                            </Header>\n                            <Typography use={\"caption\"}>\n                                <FileAliasMessage>\n                                    To make your file accessible via custom paths, add one or more\n                                    aliases.\n                                </FileAliasMessage>\n                            </Typography>\n                        </Fragment>\n                    ))}\n                    {header(() => (\n                        <Header>\n                            <Typography use={\"overline\"}>File Aliases</Typography>\n                            <ButtonDefault onClick={addAlias}>+ Add Alias</ButtonDefault>\n                        </Header>\n                    ))}\n                </>\n            )}\n        </DynamicFieldset>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,IAAMA,QAAQ,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC3BC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE,MAAM;EACbC,YAAY,EAAE,EAAE;EAChB,mBAAmB,EAAE;IACjBF,QAAQ,EAAE,UAAU;IACpBG,OAAO,EAAE,OAAO;IAChBC,KAAK,EAAE,EAAE;IACTC,GAAG,EAAE;EACT;AACJ,CAAC,CAAC;AAEF,IAAMC,MAAM,oBAAGP,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACzBI,OAAO,EAAE,MAAM;EACfI,cAAc,EAAE;AACpB,CAAC,CAAC;AAEF,IAAMC,iBAAiB,oBAAGT,eAAM,EAACU,kBAAU;EAAA;EAAA;AAAA,0CAI1C;AAED,IAAMC,gBAAgB,oBAAGX,eAAM,EAAC,MAAM;EAAA;EAAA;AAAA,yEAGrC;AAED,IAAMY,cAAc,GAAG,qBAAqB;AAErC,IAAMC,OAAO,GAAG,SAAVA,OAAO,GAAS;EACzB,eAA4B,IAAAC,aAAO,EAAW;MAAEC,IAAI,EAAE;IAAU,CAAC,CAAC;IAA1DC,KAAK,YAALA,KAAK;IAAEC,QAAQ,YAARA,QAAQ;EAEvB,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,GAAS;IACnB,IAAMC,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAACL,KAAK,CAAC,oCAAOA,KAAK,IAAI,EAAE;IACvDG,QAAQ,CAACG,IAAI,CAAC,EAAE,CAAC;IACjB,IAAI,CAACL,QAAQ,EAAE;MACX;IACJ;IACAA,QAAQ,CAACE,QAAQ,CAAC;EACtB,CAAC;EAED,IAAMI,cAAc,GAAG,IAAAC,cAAO,EAAC,YAAM;IACjC,OAAO,CACHC,sBAAU,CAACC,MAAM,CAAC,UAAU,CAAC,EAC7B,UAACV,KAAa,EAAK;MACf,IAAI,CAACJ,cAAc,CAACe,IAAI,CAACX,KAAK,CAAC,EAAE;QAC7B,MAAM,IAAIY,KAAK,CAAC,iCAAiC,CAAC;MACtD;IACJ,CAAC,CACJ;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,oBACI,6BAAC,gCAAe;IAAC,KAAK,EAAEZ,KAAK,IAAI,CAAC,EAAE,CAAE;IAAC,QAAQ,EAAEC;EAAS,GACrD;IAAA,IAAGY,OAAO,QAAPA,OAAO;MAAEC,MAAM,QAANA,MAAM;MAAEC,GAAG,QAAHA,GAAG;MAAEC,KAAK,QAALA,KAAK;IAAA,oBAC3B,4DACKD,GAAG,CAAC;MAAA,IAAGE,KAAK,SAALA,KAAK;MAAA,oBACT,6BAAC,QAAQ,qBACL,6BAAC,UAAI;QAAC,UAAU,EAAEV,cAAe;QAAC,IAAI,oBAAaU,KAAK;MAAG,gBACvD,6BAAC,YAAK;QACF,WAAW,EAAE,OAAQ;QACrB,WAAW,EACP;MACH,EACH,CACC,eACP,6BAAC,iBAAiB;QACd,IAAI,eAAE,6BAAC,sBAAU,OAAI;QACrB,OAAO,EAAEJ,OAAO,CAACK,MAAM,CAACD,KAAK;MAAE,EACjC,CACK;IAAA,CACd,CAAC,EACDD,KAAK,CAAC;MAAA,oBACH,6BAAC,eAAQ,qBACL,6BAAC,MAAM,qBACH,6BAAC,sBAAU;QAAC,GAAG,EAAE;MAAW,GAAC,cAAY,CAAa,eACtD,6BAAC,qBAAa;QAAC,OAAO,EAAEd;MAAS,GAAC,aAAW,CAAgB,CACxD,eACT,6BAAC,sBAAU;QAAC,GAAG,EAAE;MAAU,gBACvB,6BAAC,gBAAgB,QAAC,yEAGlB,CAAmB,CACV,CACN;IAAA,CACd,CAAC,EACDY,MAAM,CAAC;MAAA,oBACJ,6BAAC,MAAM,qBACH,6BAAC,sBAAU;QAAC,GAAG,EAAE;MAAW,GAAC,cAAY,CAAa,eACtD,6BAAC,qBAAa;QAAC,OAAO,EAAEZ;MAAS,GAAC,aAAW,CAAgB,CACxD;IAAA,CACZ,CAAC,CACH;EAAA,CACN,CACa;AAE1B,CAAC;AAAC"}

package/components/FileDetails/components/Content.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface ContentProps {
+    children: React.ReactNode;
+}
+export declare const Content: {
+    ({ children }: ContentProps): JSX.Element;
+    Panel: ({ children }: PanelProps) => JSX.Element;
+};
+interface PanelProps {
+    children: React.ReactNode;
+}
+export {};

package/components/FileDetails/components/Content.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Content = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = _interopRequireDefault(require("react"));
+var Horizontal = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "Horizontal",
+  target: "echkhvn0"
+})("display:flex;height:calc(100vh - 160px);");
+var Grow = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "Grow",
+  target: "echkhvn1"
+})("flex:1;:last-of-type{border-left:1px solid var(--mdc-theme-on-background);}");
+var Content = function Content(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(Horizontal, null, children);
+};
+exports.Content = Content;
+var Panel = function Panel(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/_react.default.createElement(Grow, {
+    "data-role": "panel"
+  }, children);
+};
+Content.Panel = Panel;

package/components/FileDetails/components/Content.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Horizontal","styled","Grow","Content","children","Panel"],"sources":["Content.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport React from \"react\";\n\nconst Horizontal = styled.div`\n    display: flex;\n    height: calc(100vh - 160px);\n`;\n\nconst Grow = styled.div`\n    flex: 1;\n    :last-of-type {\n        border-left: 1px solid var(--mdc-theme-on-background);\n    }\n`;\n\ninterface ContentProps {\n    children: React.ReactNode;\n}\n\nexport const Content = ({ children }: ContentProps) => {\n    return <Horizontal>{children}</Horizontal>;\n};\n\ninterface PanelProps {\n    children: React.ReactNode;\n}\n\nconst Panel = ({ children }: PanelProps) => {\n    return <Grow data-role={\"panel\"}>{children}</Grow>;\n};\n\nContent.Panel = Panel;\n"],"mappings":";;;;;;;AAAA;AACA;AAEA,IAAMA,UAAU,oBAAGC,eAAM;EAAA;EAAA;AAAA,8CAGxB;AAED,IAAMC,IAAI,oBAAGD,eAAM;EAAA;EAAA;AAAA,iFAKlB;AAMM,IAAME,OAAO,GAAG,SAAVA,OAAO,OAAmC;EAAA,IAA7BC,QAAQ,QAARA,QAAQ;EAC9B,oBAAO,6BAAC,UAAU,QAAEA,QAAQ,CAAc;AAC9C,CAAC;AAAC;AAMF,IAAMC,KAAK,GAAG,SAARA,KAAK,QAAiC;EAAA,IAA3BD,QAAQ,SAARA,QAAQ;EACrB,oBAAO,6BAAC,IAAI;IAAC,aAAW;EAAQ,GAAEA,QAAQ,CAAQ;AACtD,CAAC;AAEDD,OAAO,CAACE,KAAK,GAAGA,KAAK"}

package/components/FileDetails/components/CreatedOn.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const CreatedOn: () => JSX.Element;