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

package/components/FileDetails/components/actions/Download.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Download = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _download = require("@material-design-icons/svg/outlined/download.svg");
+var _Button = require("@webiny/ui/Button");
+var _Tooltip = require("@webiny/ui/Tooltip");
+var _useFile2 = require("../../../../hooks/useFile");
+var Download = function Download() {
+  var _useFile = (0, _useFile2.useFile)(),
+    file = _useFile.file;
+  return /*#__PURE__*/_react.default.createElement("a", {
+    rel: "noreferrer",
+    target: "_blank",
+    href: "".concat(file.src, "?original")
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    content: /*#__PURE__*/_react.default.createElement("span", null, "Download"),
+    placement: "bottom"
+  }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    icon: /*#__PURE__*/_react.default.createElement(_download.ReactComponent, {
+      style: {
+        margin: "0 8px 0 0"
+      }
+    })
+  })));
+};
+exports.Download = Download;

package/components/FileDetails/components/actions/Download.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Download","useFile","file","src","margin"],"sources":["Download.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as DownloadIcon } from \"@material-design-icons/svg/outlined/download.svg\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Tooltip } from \"@webiny/ui/Tooltip\";\nimport { useFile } from \"~/hooks/useFile\";\n\nexport const Download = () => {\n    const { file } = useFile();\n\n    return (\n        <a rel=\"noreferrer\" target={\"_blank\"} href={`${file.src}?original`}>\n            <Tooltip content={<span>Download</span>} placement={\"bottom\"}>\n                <IconButton icon={<DownloadIcon style={{ margin: \"0 8px 0 0\" }} />} />\n            </Tooltip>\n        </a>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEO,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,GAAS;EAC1B,eAAiB,IAAAC,iBAAO,GAAE;IAAlBC,IAAI,YAAJA,IAAI;EAEZ,oBACI;IAAG,GAAG,EAAC,YAAY;IAAC,MAAM,EAAE,QAAS;IAAC,IAAI,YAAKA,IAAI,CAACC,GAAG;EAAY,gBAC/D,6BAAC,gBAAO;IAAC,OAAO,eAAE,2CAAM,UAAQ,CAAQ;IAAC,SAAS,EAAE;EAAS,gBACzD,6BAAC,kBAAU;IAAC,IAAI,eAAE,6BAAC,wBAAY;MAAC,KAAK,EAAE;QAAEC,MAAM,EAAE;MAAY;IAAE;EAAI,EAAG,CAChE,CACV;AAEZ,CAAC;AAAC"}

package/components/FileDetails/components/actions/MoveTo.d.ts

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

package/components/FileDetails/components/actions/MoveTo.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MoveTo = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _drive_file_move = require("@material-design-icons/svg/outlined/drive_file_move.svg");
+var _Button = require("@webiny/ui/Button");
+var _Tooltip = require("@webiny/ui/Tooltip");
+var _ = require("../../../..");
+var MoveTo = function MoveTo() {
+  var _useFile = (0, _.useFile)(),
+    file = _useFile.file;
+  var moveToFolder = (0, _.useMoveFileToFolder)(file);
+  return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    content: /*#__PURE__*/_react.default.createElement("span", null, "Move To Folder"),
+    placement: "bottom"
+  }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    onClick: moveToFolder,
+    icon: /*#__PURE__*/_react.default.createElement(_drive_file_move.ReactComponent, {
+      style: {
+        margin: "0 8px 0 0"
+      }
+    })
+  }));
+};
+exports.MoveTo = MoveTo;

package/components/FileDetails/components/actions/MoveTo.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MoveTo","useFile","file","moveToFolder","useMoveFileToFolder","margin"],"sources":["MoveTo.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as MoveFileIcon } from \"@material-design-icons/svg/outlined/drive_file_move.svg\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Tooltip } from \"@webiny/ui/Tooltip\";\nimport { useFile, useMoveFileToFolder } from \"~/index\";\n\nexport const MoveTo = () => {\n    const { file } = useFile();\n    const moveToFolder = useMoveFileToFolder(file);\n\n    return (\n        <Tooltip content={<span>Move To Folder</span>} placement={\"bottom\"}>\n            <IconButton\n                onClick={moveToFolder}\n                icon={<MoveFileIcon style={{ margin: \"0 8px 0 0\" }} />}\n            />\n        </Tooltip>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEO,IAAMA,MAAM,GAAG,SAATA,MAAM,GAAS;EACxB,eAAiB,IAAAC,SAAO,GAAE;IAAlBC,IAAI,YAAJA,IAAI;EACZ,IAAMC,YAAY,GAAG,IAAAC,qBAAmB,EAACF,IAAI,CAAC;EAE9C,oBACI,6BAAC,gBAAO;IAAC,OAAO,eAAE,2CAAM,gBAAc,CAAQ;IAAC,SAAS,EAAE;EAAS,gBAC/D,6BAAC,kBAAU;IACP,OAAO,EAAEC,YAAa;IACtB,IAAI,eAAE,6BAAC,+BAAY;MAAC,KAAK,EAAE;QAAEE,MAAM,EAAE;MAAY;IAAE;EAAI,EACzD,CACI;AAElB,CAAC;AAAC"}

package/components/FileDetails/index.d.ts

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

package/components/FileDetails/index.js

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

package/components/FileDetails/index.js.map

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

package/components/Grid/File.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { FileItem } from "@webiny/app-admin/types";
+export interface FileProps {
+    file: FileItem;
+    selected: boolean;
+    onSelect?: (event?: React.MouseEvent) => void;
+    onClick?: (event?: React.MouseEvent) => void;
+    options?: Array<{
+        label: string;
+        onClick: (file: Object) => void;
+    }>;
+    multiple?: boolean;
+    children: React.ReactNode;
+    showFileDetails: (id: string) => void;
+}
+export declare const FileThumbnail: React.FC<FileProps>;

package/components/Grid/File.js

@@ -0,0 +1,79 @@
+"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.FileThumbnail = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactLazyLoad = _interopRequireDefault(require("react-lazy-load"));
+var _timeagoReact = _interopRequireDefault(require("timeago-react"));
+var _Button = require("@webiny/ui/Button");
+var _Typography = require("@webiny/ui/Typography");
+var _settings = require("@material-design-icons/svg/filled/settings.svg");
+var _download = require("@material-design-icons/svg/filled/download.svg");
+var _drive_file_move = require("@material-design-icons/svg/filled/drive_file_move.svg");
+var _check_circle = require("@material-design-icons/svg/filled/check_circle.svg");
+var _styled = require("./styled");
+var _useMoveFileToFolder = require("../../hooks/useMoveFileToFolder");
+/**
+ * Package react-lazy-load has no types.
+ */
+// @ts-ignore
+
+/**
+ * Package timeago-react does not have types.
+ */
+// @ts-ignore
+
+var FileThumbnail = function FileThumbnail(_ref) {
+  var file = _ref.file,
+    selected = _ref.selected,
+    onSelect = _ref.onSelect,
+    children = _ref.children,
+    showFileDetails = _ref.showFileDetails;
+  var showDetails = (0, _react.useCallback)(function () {
+    showFileDetails(file.id);
+  }, [file.id]);
+  var moveToFolder = (0, _useMoveFileToFolder.useMoveFileToFolder)(file);
+  return /*#__PURE__*/_react.default.createElement(_styled.FileWrapper, {
+    "data-testid": "fm-list-wrapper-file"
+  }, /*#__PURE__*/_react.default.createElement(_styled.FileBody, null, /*#__PURE__*/_react.default.createElement(_styled.FileControls, null, /*#__PURE__*/_react.default.createElement(_styled.FileInfoIcon, null, /*#__PURE__*/_react.default.createElement("a", {
+    rel: "noreferrer",
+    target: "_blank",
+    href: "".concat(file.src, "?original")
+  }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    icon: /*#__PURE__*/_react.default.createElement(_download.ReactComponent, null)
+  })), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    icon: /*#__PURE__*/_react.default.createElement(_drive_file_move.ReactComponent, null),
+    onClick: moveToFolder
+  }), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    icon: /*#__PURE__*/_react.default.createElement(_settings.ReactComponent, null),
+    onClick: showDetails,
+    "data-testid": "fm-file-wrapper-file-info-icon"
+  })), onSelect ? /*#__PURE__*/_react.default.createElement(_styled.FileSelectedMarker, {
+    className: selected ? "selected" : "",
+    onClick: onSelect
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_check_circle.ReactComponent, null))) : null), /*#__PURE__*/_react.default.createElement(_reactLazyLoad.default, {
+    height: 200,
+    offsetVertical: 300
+  }, /*#__PURE__*/_react.default.createElement(_styled.FilePreview, {
+    "data-testid": "fm-file-wrapper-file-preview",
+    className: selected ? "selected" : ""
+  }, /*#__PURE__*/_react.default.createElement(_styled.FileClickable, null), children))), /*#__PURE__*/_react.default.createElement(_styled.FileLabel, {
+    "data-testid": "fm-file-wrapper-file-label"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    className: "type",
+    use: "overline"
+  }, file.type), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    className: "name",
+    use: "body2"
+  }, file.name), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    className: "createdOn",
+    use: "caption"
+  }, /*#__PURE__*/_react.default.createElement(_timeagoReact.default, {
+    datetime: file.createdOn
+  }))));
+};
+exports.FileThumbnail = FileThumbnail;

package/components/Grid/File.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FileThumbnail","file","selected","onSelect","children","showFileDetails","showDetails","useCallback","id","moveToFolder","useMoveFileToFolder","src","type","name","createdOn"],"sources":["File.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\n/**\n * Package react-lazy-load has no types.\n */\n// @ts-ignore\nimport LazyLoad from \"react-lazy-load\";\n/**\n * Package timeago-react does not have types.\n */\n// @ts-ignore\nimport TimeAgo from \"timeago-react\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ReactComponent as SettingsIcon } from \"@material-design-icons/svg/filled/settings.svg\";\nimport { ReactComponent as DownloadIcon } from \"@material-design-icons/svg/filled/download.svg\";\nimport { ReactComponent as MoveIcon } from \"@material-design-icons/svg/filled/drive_file_move.svg\";\nimport { ReactComponent as SelectedMarker } from \"@material-design-icons/svg/filled/check_circle.svg\";\n\nimport { FileItem } from \"@webiny/app-admin/types\";\n\nimport {\n    FileBody,\n    FileClickable,\n    FileInfoIcon,\n    FileControls,\n    FileSelectedMarker,\n    FileLabel,\n    FilePreview,\n    FileWrapper\n} from \"./styled\";\nimport { useMoveFileToFolder } from \"~/hooks/useMoveFileToFolder\";\n\nexport interface FileProps {\n    file: FileItem;\n    selected: boolean;\n    onSelect?: (event?: React.MouseEvent) => void;\n    onClick?: (event?: React.MouseEvent) => void;\n    options?: Array<{ label: string; onClick: (file: Object) => void }>;\n    multiple?: boolean;\n    children: React.ReactNode;\n    showFileDetails: (id: string) => void;\n}\n\nexport const FileThumbnail: React.FC<FileProps> = ({\n    file,\n    selected,\n    onSelect,\n    children,\n    showFileDetails\n}) => {\n    const showDetails = useCallback(() => {\n        showFileDetails(file.id);\n    }, [file.id]);\n\n    const moveToFolder = useMoveFileToFolder(file);\n\n    return (\n        <FileWrapper data-testid={\"fm-list-wrapper-file\"}>\n            <FileBody>\n                <FileControls>\n                    <FileInfoIcon>\n                        <a rel=\"noreferrer\" target={\"_blank\"} href={`${file.src}?original`}>\n                            <IconButton icon={<DownloadIcon />} />\n                        </a>\n                        <IconButton icon={<MoveIcon />} onClick={moveToFolder} />\n                        <IconButton\n                            icon={<SettingsIcon />}\n                            onClick={showDetails}\n                            data-testid={\"fm-file-wrapper-file-info-icon\"}\n                        />\n                    </FileInfoIcon>\n                    {onSelect ? (\n                        <FileSelectedMarker\n                            className={selected ? \"selected\" : \"\"}\n                            onClick={onSelect}\n                        >\n                            <div>\n                                <SelectedMarker />\n                            </div>\n                        </FileSelectedMarker>\n                    ) : null}\n                </FileControls>\n                <LazyLoad height={200} offsetVertical={300}>\n                    <FilePreview\n                        data-testid={\"fm-file-wrapper-file-preview\"}\n                        className={selected ? \"selected\" : \"\"}\n                    >\n                        <FileClickable />\n                        {children}\n                    </FilePreview>\n                </LazyLoad>\n            </FileBody>\n            <FileLabel data-testid={\"fm-file-wrapper-file-label\"}>\n                <Typography className=\"type\" use={\"overline\"}>\n                    {file.type}\n                </Typography>\n                <Typography className=\"name\" use={\"body2\"}>\n                    {file.name}\n                </Typography>\n                <Typography className=\"createdOn\" use={\"caption\"}>\n                    <TimeAgo datetime={file.createdOn} />\n                </Typography>\n            </FileLabel>\n        </FileWrapper>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AAKA;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA;AAUA;AA7BA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAkCO,IAAMA,aAAkC,GAAG,SAArCA,aAAkC,OAMzC;EAAA,IALFC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,eAAe,QAAfA,eAAe;EAEf,IAAMC,WAAW,GAAG,IAAAC,kBAAW,EAAC,YAAM;IAClCF,eAAe,CAACJ,IAAI,CAACO,EAAE,CAAC;EAC5B,CAAC,EAAE,CAACP,IAAI,CAACO,EAAE,CAAC,CAAC;EAEb,IAAMC,YAAY,GAAG,IAAAC,wCAAmB,EAACT,IAAI,CAAC;EAE9C,oBACI,6BAAC,mBAAW;IAAC,eAAa;EAAuB,gBAC7C,6BAAC,gBAAQ,qBACL,6BAAC,oBAAY,qBACT,6BAAC,oBAAY,qBACT;IAAG,GAAG,EAAC,YAAY;IAAC,MAAM,EAAE,QAAS;IAAC,IAAI,YAAKA,IAAI,CAACU,GAAG;EAAY,gBAC/D,6BAAC,kBAAU;IAAC,IAAI,eAAE,6BAAC,wBAAY;EAAI,EAAG,CACtC,eACJ,6BAAC,kBAAU;IAAC,IAAI,eAAE,6BAAC,+BAAQ,OAAI;IAAC,OAAO,EAAEF;EAAa,EAAG,eACzD,6BAAC,kBAAU;IACP,IAAI,eAAE,6BAAC,wBAAY,OAAI;IACvB,OAAO,EAAEH,WAAY;IACrB,eAAa;EAAiC,EAChD,CACS,EACdH,QAAQ,gBACL,6BAAC,0BAAkB;IACf,SAAS,EAAED,QAAQ,GAAG,UAAU,GAAG,EAAG;IACtC,OAAO,EAAEC;EAAS,gBAElB,uDACI,6BAAC,4BAAc,OAAG,CAChB,CACW,GACrB,IAAI,CACG,eACf,6BAAC,sBAAQ;IAAC,MAAM,EAAE,GAAI;IAAC,cAAc,EAAE;EAAI,gBACvC,6BAAC,mBAAW;IACR,eAAa,8BAA+B;IAC5C,SAAS,EAAED,QAAQ,GAAG,UAAU,GAAG;EAAG,gBAEtC,6BAAC,qBAAa,OAAG,EAChBE,QAAQ,CACC,CACP,CACJ,eACX,6BAAC,iBAAS;IAAC,eAAa;EAA6B,gBACjD,6BAAC,sBAAU;IAAC,SAAS,EAAC,MAAM;IAAC,GAAG,EAAE;EAAW,GACxCH,IAAI,CAACW,IAAI,CACD,eACb,6BAAC,sBAAU;IAAC,SAAS,EAAC,MAAM;IAAC,GAAG,EAAE;EAAQ,GACrCX,IAAI,CAACY,IAAI,CACD,eACb,6BAAC,sBAAU;IAAC,SAAS,EAAC,WAAW;IAAC,GAAG,EAAE;EAAU,gBAC7C,6BAAC,qBAAO;IAAC,QAAQ,EAAEZ,IAAI,CAACa;EAAU,EAAG,CAC5B,CACL,CACF;AAEtB,CAAC;AAAC"}

package/components/Grid/Grid.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { FolderItem } from "@webiny/app-aco/types";
+import { FileItem } from "@webiny/app-admin/types";
+interface GridProps {
+    records: FileItem[];
+    folders: FolderItem[];
+    loading?: boolean;
+    onRecordClick: (id: string) => void;
+    onFolderClick: (id: string) => void;
+    selected: FileItem[];
+    multiple?: boolean;
+    toggleSelected: (file: FileItem) => void;
+    onChange?: Function;
+    onClose?: Function;
+}
+export declare const Grid: React.FC<GridProps>;
+export {};

package/components/Grid/Grid.js

@@ -0,0 +1,72 @@
+"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.Grid = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _appAco = require("@webiny/app-aco");
+var _i18n = require("@webiny/app/i18n");
+var _Progress = require("@webiny/ui/Progress");
+var _File = require("./File");
+var _styled = require("./styled");
+var _Thumbnail = require("../FileDetails/components/Thumbnail");
+var _FileProvider = require("../../contexts/FileProvider");
+var _templateObject;
+var t = _i18n.i18n.ns("app-admin/file-manager/components/grid");
+var Grid = function Grid(_ref) {
+  var folders = _ref.folders,
+    records = _ref.records,
+    loading = _ref.loading,
+    onRecordClick = _ref.onRecordClick,
+    onFolderClick = _ref.onFolderClick,
+    selected = _ref.selected,
+    onChange = _ref.onChange,
+    onClose = _ref.onClose,
+    toggleSelected = _ref.toggleSelected,
+    multiple = _ref.multiple;
+  if (loading) {
+    return /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, {
+      label: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Loading Files..."]))),
+      style: {
+        opacity: 1
+      }
+    });
+  }
+  var onSelect = (0, _react.useMemo)(function () {
+    if (!onChange) {
+      return undefined;
+    }
+    return function (record) {
+      return function () {
+        if (multiple) {
+          toggleSelected(record);
+          return;
+        }
+        onChange(record);
+        onClose && onClose();
+      };
+    };
+  }, [onChange]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.FolderList, null, /*#__PURE__*/_react.default.createElement(_appAco.FolderGrid, {
+    folders: folders,
+    onFolderClick: onFolderClick
+  })), /*#__PURE__*/_react.default.createElement(_styled.FileList, null, records.map(function (record) {
+    return /*#__PURE__*/_react.default.createElement(_FileProvider.FileProvider, {
+      file: record,
+      key: record.id
+    }, /*#__PURE__*/_react.default.createElement(_File.FileThumbnail, {
+      file: record,
+      multiple: Boolean(multiple),
+      showFileDetails: onRecordClick,
+      selected: selected.some(function (current) {
+        return current.id === record.id;
+      }),
+      onSelect: onSelect ? onSelect(record) : undefined
+    }, /*#__PURE__*/_react.default.createElement(_Thumbnail.Thumbnail, null)));
+  })));
+};
+exports.Grid = Grid;

package/components/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","Grid","folders","records","loading","onRecordClick","onFolderClick","selected","onChange","onClose","toggleSelected","multiple","opacity","onSelect","useMemo","undefined","record","map","id","Boolean","some","current"],"sources":["Grid.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { FolderGrid } from \"@webiny/app-aco\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CircularProgress } from \"@webiny/ui/Progress\";\nimport { FileThumbnail } from \"./File\";\nimport { FileList, FolderList } from \"./styled\";\nimport { FolderItem } from \"@webiny/app-aco/types\";\nimport { FileItem } from \"@webiny/app-admin/types\";\nimport { Thumbnail } from \"~/components/FileDetails/components/Thumbnail\";\nimport { FileProvider } from \"~/contexts/FileProvider\";\n\nconst t = i18n.ns(\"app-admin/file-manager/components/grid\");\n\ninterface GridProps {\n    records: FileItem[];\n    folders: FolderItem[];\n    loading?: boolean;\n    onRecordClick: (id: string) => void;\n    onFolderClick: (id: string) => void;\n    selected: FileItem[];\n    multiple?: boolean;\n    toggleSelected: (file: FileItem) => void;\n    onChange?: Function;\n    onClose?: Function;\n}\n\nexport const Grid: React.FC<GridProps> = ({\n    folders,\n    records,\n    loading,\n    onRecordClick,\n    onFolderClick,\n    selected,\n    onChange,\n    onClose,\n    toggleSelected,\n    multiple\n}) => {\n    if (loading) {\n        return <CircularProgress label={t`Loading Files...`} style={{ opacity: 1 }} />;\n    }\n\n    const onSelect = useMemo(() => {\n        if (!onChange) {\n            return undefined;\n        }\n\n        return (record: FileItem) => () => {\n            if (multiple) {\n                toggleSelected(record);\n                return;\n            }\n\n            onChange(record);\n            onClose && onClose();\n        };\n    }, [onChange]);\n\n    return (\n        <>\n            <FolderList>\n                <FolderGrid folders={folders} onFolderClick={onFolderClick} />\n            </FolderList>\n            <FileList>\n                {records.map(record => (\n                    <FileProvider file={record} key={record.id}>\n                        <FileThumbnail\n                            file={record}\n                            multiple={Boolean(multiple)}\n                            showFileDetails={onRecordClick}\n                            selected={selected.some(current => current.id === record.id)}\n                            onSelect={onSelect ? onSelect(record) : undefined}\n                        >\n                            <Thumbnail />\n                        </FileThumbnail>\n                    </FileProvider>\n                ))}\n            </FileList>\n        </>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AAAuD;AAEvD,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,wCAAwC,CAAC;AAepD,IAAMC,IAAyB,GAAG,SAA5BA,IAAyB,OAWhC;EAAA,IAVFC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,aAAa,QAAbA,aAAa;IACbC,aAAa,QAAbA,aAAa;IACbC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,cAAc,QAAdA,cAAc;IACdC,QAAQ,QAARA,QAAQ;EAER,IAAIP,OAAO,EAAE;IACT,oBAAO,6BAAC,0BAAgB;MAAC,KAAK,EAAEN,CAAC,mGAAmB;MAAC,KAAK,EAAE;QAAEc,OAAO,EAAE;MAAE;IAAE,EAAG;EAClF;EAEA,IAAMC,QAAQ,GAAG,IAAAC,cAAO,EAAC,YAAM;IAC3B,IAAI,CAACN,QAAQ,EAAE;MACX,OAAOO,SAAS;IACpB;IAEA,OAAO,UAACC,MAAgB;MAAA,OAAK,YAAM;QAC/B,IAAIL,QAAQ,EAAE;UACVD,cAAc,CAACM,MAAM,CAAC;UACtB;QACJ;QAEAR,QAAQ,CAACQ,MAAM,CAAC;QAChBP,OAAO,IAAIA,OAAO,EAAE;MACxB,CAAC;IAAA;EACL,CAAC,EAAE,CAACD,QAAQ,CAAC,CAAC;EAEd,oBACI,yEACI,6BAAC,kBAAU,qBACP,6BAAC,kBAAU;IAAC,OAAO,EAAEN,OAAQ;IAAC,aAAa,EAAEI;EAAc,EAAG,CACrD,eACb,6BAAC,gBAAQ,QACJH,OAAO,CAACc,GAAG,CAAC,UAAAD,MAAM;IAAA,oBACf,6BAAC,0BAAY;MAAC,IAAI,EAAEA,MAAO;MAAC,GAAG,EAAEA,MAAM,CAACE;IAAG,gBACvC,6BAAC,mBAAa;MACV,IAAI,EAAEF,MAAO;MACb,QAAQ,EAAEG,OAAO,CAACR,QAAQ,CAAE;MAC5B,eAAe,EAAEN,aAAc;MAC/B,QAAQ,EAAEE,QAAQ,CAACa,IAAI,CAAC,UAAAC,OAAO;QAAA,OAAIA,OAAO,CAACH,EAAE,KAAKF,MAAM,CAACE,EAAE;MAAA,EAAE;MAC7D,QAAQ,EAAEL,QAAQ,GAAGA,QAAQ,CAACG,MAAM,CAAC,GAAGD;IAAU,gBAElD,6BAAC,oBAAS,OAAG,CACD,CACL;EAAA,CAClB,CAAC,CACK,CACZ;AAEX,CAAC;AAAC"}

package/components/Grid/index.d.ts

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

package/components/Grid/index.js

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

package/components/Grid/index.js.map

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

package/components/Grid/styled.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+/// <reference types="react" />
+/// <reference types="web" />
+export declare const FolderList: 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 FileList: 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 FileBody: 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 FileControls: 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 FileSelectedMarker: 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 FileInfoIcon: 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 FilePreview: 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 FileClickable: 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 FileLabel: 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 FileWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/Grid/styled.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FolderList = exports.FileWrapper = exports.FileSelectedMarker = exports.FilePreview = exports.FileList = exports.FileLabel = exports.FileInfoIcon = exports.FileControls = exports.FileClickable = exports.FileBody = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var FolderList = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "FolderList",
+  target: "e1ahl7xf0"
+})("margin:16px;");
+exports.FolderList = FolderList;
+var FileList = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "FileList",
+  target: "e1ahl7xf1"
+})("display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));column-gap:16px;row-gap:16px;margin:16px;");
+exports.FileList = FileList;
+var COMPONENT_WIDTH = 200;
+var COMPONENT_HEIGHT = 200;
+var FileBody = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "FileBody",
+  target: "e1ahl7xf2"
+})("transition:200ms ease-in opacity;width:", COMPONENT_WIDTH, ";height:", COMPONENT_HEIGHT, ";overflow:hidden;");
+exports.FileBody = FileBody;
+var FileControls = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "FileControls",
+  target: "e1ahl7xf3"
+})("opacity:1;position:absolute;top:-25px;right:0;z-index:10;transition:all 150ms ease-out;width:100%;height:200px;display:flex;justify-content:center;align-items:center;");
+exports.FileControls = FileControls;
+var FileSelectedMarker = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "FileSelectedMarker",
+  target: "e1ahl7xf4"
+})("position:absolute;z-index:9;width:100%;height:100%;cursor:pointer;> div{width:32px;height:32px;position:absolute;right:0;top:24px;padding:2px;margin:5px;background-color:var(--mdc-theme-surface);box-shadow:0px 0px 4px var(--mdc-theme-on-background);border-radius:50%;border:1px solid var(--mdc-theme-on-background);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0.95;}svg{transition:all 150ms ease-out;fill:var(--mdc-theme-text-secondary-on-background);width:32px;height:32px;opacity:0.35;scale:0.8;}&:hover{svg{opacity:0.9;scale:0.9;}}&.selected{> div{background-color:var(--mdc-theme-primary);}svg{opacity:1;scale:1;fill:var(--mdc-theme-surface);}}");
+exports.FileSelectedMarker = FileSelectedMarker;
+var FileInfoIcon = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "FileInfoIcon",
+  target: "e1ahl7xf5"
+})("display:flex;& button{transition:all 150ms ease-out;top:50px;opacity:0;padding:0;svg{border:1px solid var(--mdc-theme-on-background);border-radius:50%;background-color:var(--mdc-theme-surface);padding:10px;transition:all 150ms ease-out;color:var(--mdc-theme-text-primary-on-background);scale:0.7;&:hover{scale:1;}}&:nth-of-type(1){transition-delay:0ms;}&:nth-of-type(2){transition-delay:50ms;}&:nth-of-type(3){transition-delay:100ms;}}");
+exports.FileInfoIcon = FileInfoIcon;
+var FilePreview = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "FilePreview",
+  target: "e1ahl7xf6"
+})("text-align:center;position:relative;background:repeating-conic-gradient(var(--mdc-theme-surface) 0% 25%,transparent 0% 50%) 50%/18px 18px;width:100%;height:100%;overflow:hidden;display:flex;object-fit:cover;justify-content:center;align-items:center;display:flex;svg,img{width:100%;height:100%;max-height:210px;max-width:210px;object-fit:contain;box-sizing:border-box;transition:all 150ms ease-out;}svg{fill:var(--mdc-theme-text-secondary-on-background);}&.selected{img,svg{background-color:rgba(255,255,255,0.6);padding:10px;border-radius:2px;scale:0.8;box-shadow:2px 2px 4px var(--mdc-theme-on-background);border:2px solid var(--mdc-theme-primary);}}");
+exports.FilePreview = FilePreview;
+var FileClickable = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "FileClickable",
+  target: "e1ahl7xf7"
+})("position:absolute;top:30px;left:0;width:100%;height:170px;z-index:2;");
+exports.FileClickable = FileClickable;
+var FileLabel = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "FileLabel",
+  target: "e1ahl7xf8"
+})("padding:25px 10px 15px 10px;color:var(--mdc-theme-on-surface);background-color:var(--mdc-theme-on-background);span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5;&.type{font-size:0.7em;}&.name{font-size:0.8em;font-weight:600;}}");
+exports.FileLabel = FileLabel;
+var FileWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "FileWrapper",
+  target: "e1ahl7xf9"
+})("display:inline-block;float:left;position:relative;z-index:1;width:100%;max-width:", COMPONENT_WIDTH, ";border:1px solid var(--mdc-theme-on-background);border-radius:2px;overflow:hidden;box-shadow:0 1px 3px var(--mdc-theme-on-background);&:hover ", FileControls, "{opacity:1;button{opacity:1;top:125px;width:100%;svg{fill:var(--mdc-theme-primary);}span.mdc-button__label > span{display:inline-block;width:75px;}}}");
+exports.FileWrapper = FileWrapper;

package/components/Grid/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FolderList","styled","FileList","COMPONENT_WIDTH","COMPONENT_HEIGHT","FileBody","FileControls","FileSelectedMarker","FileInfoIcon","FilePreview","FileClickable","FileLabel","FileWrapper"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const FolderList = styled(\"div\")`\n    margin: 16px;\n`;\n\nexport const FileList = styled(\"div\")`\n    display: grid;\n    /* define the number of grid columns */\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n    column-gap: 16px;\n    row-gap: 16px;\n    margin: 16px;\n`;\n\nconst COMPONENT_WIDTH = 200;\nconst COMPONENT_HEIGHT = 200;\n\nexport const FileBody = styled(\"div\")`\n    transition: 200ms ease-in opacity;\n    width: ${COMPONENT_WIDTH};\n    height: ${COMPONENT_HEIGHT};\n    overflow: hidden;\n`;\n\nexport const FileControls = styled(\"div\")`\n    opacity: 1;\n    position: absolute;\n    top: -25px;\n    right: 0;\n    z-index: 10;\n    transition: all 150ms ease-out;\n    width: 100%;\n    height: 200px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n`;\n\nexport const FileSelectedMarker = styled(\"div\")`\n    position: absolute;\n    z-index: 9;\n    width: 100%;\n    height: 100%;\n    cursor: pointer;\n    > div {\n        width: 32px;\n        height: 32px;\n        position: absolute;\n        right: 0;\n        top: 24px;\n        padding: 2px;\n        margin: 5px;\n        background-color: var(--mdc-theme-surface);\n        box-shadow: 0px 0px 4px var(--mdc-theme-on-background);\n        border-radius: 50%;\n        border: 1px solid var(--mdc-theme-on-background);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        opacity: 0.95;\n    }\n    svg {\n        transition: all 150ms ease-out;\n        fill: var(--mdc-theme-text-secondary-on-background);\n        width: 32px;\n        height: 32px;\n        opacity: 0.35;\n        scale: 0.8;\n    }\n    &:hover {\n        svg {\n            opacity: 0.9;\n            scale: 0.9;\n        }\n    }\n    &.selected {\n        > div {\n            background-color: var(--mdc-theme-primary);\n        }\n        svg {\n            opacity: 1;\n            scale: 1;\n            fill: var(--mdc-theme-surface);\n        }\n    }\n`;\n\nexport const FileInfoIcon = styled(\"div\")`\n    display: flex;\n    & button {\n        transition: all 150ms ease-out;\n        top: 50px;\n        opacity: 0;\n        padding: 0;\n        svg {\n            border: 1px solid var(--mdc-theme-on-background);\n            border-radius: 50%;\n            background-color: var(--mdc-theme-surface);\n            padding: 10px;\n\n            transition: all 150ms ease-out;\n            color: var(--mdc-theme-text-primary-on-background);\n            scale: 0.7;\n            &:hover {\n                scale: 1;\n            }\n        }\n        &:nth-of-type(1) {\n            transition-delay: 0ms;\n        }\n        &:nth-of-type(2) {\n            transition-delay: 50ms;\n        }\n        &:nth-of-type(3) {\n            transition-delay: 100ms;\n        }\n    }\n`;\n\nexport const FilePreview = styled(\"div\")`\n    text-align: center;\n    position: relative;\n    background: repeating-conic-gradient(var(--mdc-theme-surface) 0% 25%, transparent 0% 50%) 50%/18px\n        18px;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    display: flex;\n    object-fit: cover;\n    justify-content: center;\n    align-items: center;\n    display: flex;\n    svg,\n    img {\n        width: 100%;\n        height: 100%;\n        max-height: 210px;\n        max-width: 210px;\n        object-fit: contain;\n        box-sizing: border-box;\n        transition: all 150ms ease-out;\n    }\n    svg {\n        fill: var(--mdc-theme-text-secondary-on-background);\n    }\n    &.selected {\n        img,\n        svg {\n            background-color: rgba(255, 255, 255, 0.6);\n            padding: 10px;\n            border-radius: 2px;\n            scale: 0.8;\n            box-shadow: 2px 2px 4px var(--mdc-theme-on-background);\n            border: 2px solid var(--mdc-theme-primary);\n        }\n    }\n`;\n\nexport const FileClickable = styled(\"div\")`\n    position: absolute;\n    top: 30px;\n    left: 0;\n    width: 100%;\n    height: 170px;\n    z-index: 2;\n`;\n\nexport const FileLabel = styled(\"div\")`\n    padding: 25px 10px 15px 10px;\n    color: var(--mdc-theme-on-surface);\n    background-color: var(--mdc-theme-on-background);\n    span {\n        display: block;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        line-height: 1.5;\n        &.type {\n            font-size: 0.7em;\n        }\n        &.name {\n            font-size: 0.8em;\n            font-weight: 600;\n        }\n    }\n`;\n\nexport const FileWrapper = styled(\"div\")`\n    display: inline-block;\n    float: left;\n    position: relative;\n    z-index: 1;\n    width: 100%;\n    max-width: ${COMPONENT_WIDTH};\n    border: 1px solid var(--mdc-theme-on-background);\n    border-radius: 2px;\n    overflow: hidden;\n    box-shadow: 0 1px 3px var(--mdc-theme-on-background);\n\n    &:hover ${FileControls} {\n        opacity: 1;\n        button {\n            opacity: 1;\n            top: 125px;\n            width: 100%;\n            svg {\n                fill: var(--mdc-theme-primary);\n            }\n            span.mdc-button__label > span {\n                display: inline-block;\n                width: 75px;\n            }\n        }\n    }\n`;\n"],"mappings":";;;;;;;AAAA;AAEO,IAAMA,UAAU,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,kBAErC;AAAC;AAEK,IAAMC,QAAQ,oBAAGD,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,sHAOnC;AAAC;AAEF,IAAME,eAAe,GAAG,GAAG;AAC3B,IAAMC,gBAAgB,GAAG,GAAG;AAErB,IAAMC,QAAQ,oBAAGJ,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,8CAEvBE,eAAe,cACdC,gBAAgB,sBAE7B;AAAC;AAEK,IAAME,YAAY,oBAAGL,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,4KAYvC;AAAC;AAEK,IAAMM,kBAAkB,oBAAGN,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,+qBAgD7C;AAAC;AAEK,IAAMO,YAAY,oBAAGP,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,ybA8BvC;AAAC;AAEK,IAAMQ,WAAW,oBAAGR,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,ipBAqCtC;AAAC;AAEK,IAAMS,aAAa,oBAAGT,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,0EAOxC;AAAC;AAEK,IAAMU,SAAS,oBAAGV,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,kRAkBpC;AAAC;AAEK,IAAMW,WAAW,oBAAGX,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,wFAMtBE,eAAe,qJAMlBG,YAAY,0JAezB;AAAC"}

package/components/NoPermission/NoPermission.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const NoPermission: React.FC;

package/components/NoPermission/NoPermission.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NoPermission = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _i18n = require("@webiny/app/i18n");
+var _Icon = require("@webiny/ui/Icon");
+var _styled = require("./styled");
+var _templateObject, _templateObject2;
+var t = _i18n.i18n.ns("app-admin/file-manager/components/no-permission");
+var NoPermission = function NoPermission() {
+  return /*#__PURE__*/_react.default.createElement(_styled.NoPermissionWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.NoPermissionOuter, null, /*#__PURE__*/_react.default.createElement(_styled.NoPermissionInner, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_styled.NoPermissionIcon, null)
+  }), /*#__PURE__*/_react.default.createElement(_styled.NoPermissionTitle, {
+    use: "headline6"
+  }, t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Permission needed"])))), /*#__PURE__*/_react.default.createElement(_styled.NoPermissionBody, {
+    use: "body2"
+  }, t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["You're missing required permission to access files. Please contact the administrator."])))))));
+};
+exports.NoPermission = NoPermission;

package/components/NoPermission/NoPermission.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","NoPermission"],"sources":["NoPermission.tsx"],"sourcesContent":["import React from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Icon } from \"@webiny/ui/Icon\";\n\nimport {\n    NoPermissionBody,\n    NoPermissionIcon,\n    NoPermissionInner,\n    NoPermissionOuter,\n    NoPermissionTitle,\n    NoPermissionWrapper\n} from \"./styled\";\n\nconst t = i18n.ns(\"app-admin/file-manager/components/no-permission\");\n\nexport const NoPermission: React.FC = () => {\n    return (\n        <NoPermissionWrapper>\n            <NoPermissionOuter>\n                <NoPermissionInner>\n                    <Icon icon={<NoPermissionIcon />} />\n                    <NoPermissionTitle use={\"headline6\"}>{t`Permission needed`}</NoPermissionTitle>\n                    <NoPermissionBody use={\"body2\"}>\n                        {t`You're missing required permission to access files. Please contact the administrator.`}\n                    </NoPermissionBody>\n                </NoPermissionInner>\n            </NoPermissionOuter>\n        </NoPermissionWrapper>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AAEA;AAOkB;AAElB,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,iDAAiD,CAAC;AAE7D,IAAMC,YAAsB,GAAG,SAAzBA,YAAsB,GAAS;EACxC,oBACI,6BAAC,2BAAmB,qBAChB,6BAAC,yBAAiB,qBACd,6BAAC,yBAAiB,qBACd,6BAAC,UAAI;IAAC,IAAI,eAAE,6BAAC,wBAAgB;EAAI,EAAG,eACpC,6BAAC,yBAAiB;IAAC,GAAG,EAAE;EAAY,GAAEH,CAAC,qGAAwC,eAC/E,6BAAC,wBAAgB;IAAC,GAAG,EAAE;EAAQ,GAC1BA,CAAC,2KACa,CACH,CACJ,CACF;AAE9B,CAAC;AAAC"}

package/components/NoPermission/index.d.ts

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

package/components/NoPermission/index.js

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

package/components/NoPermission/index.js.map

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

package/components/NoPermission/styled.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+/// <reference types="react" />
+/// <reference types="web" />
+export declare const NoPermissionWrapper: 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 NoPermissionOuter: 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 NoPermissionInner: 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 NoPermissionIcon: import("@emotion/styled").StyledComponent<import("react").SVGProps<SVGSVGElement> & {
+    alt?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const NoPermissionTitle: import("@emotion/styled").StyledComponent<import("@webiny/ui/Typography/Typography").TypographyProps & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const NoPermissionBody: import("@emotion/styled").StyledComponent<import("@webiny/ui/Typography/Typography").TypographyProps & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/NoPermission/styled.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NoPermissionWrapper = exports.NoPermissionTitle = exports.NoPermissionOuter = exports.NoPermissionInner = exports.NoPermissionIcon = exports.NoPermissionBody = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _privacy_tip = require("@material-design-icons/svg/outlined/privacy_tip.svg");
+var _Typography = require("@webiny/ui/Typography");
+var NoPermissionWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "NoPermissionWrapper",
+  target: "eemsv160"
+})("margin:0 auto;padding-top:0;height:calc(100vh - 95px);z-index:2;width:100%;position:absolute;background-color:transparent;");
+exports.NoPermissionWrapper = NoPermissionWrapper;
+var NoPermissionOuter = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "NoPermissionOuter",
+  target: "eemsv161"
+})("text-align:center;width:300px;height:300px;background-color:var(--mdc-theme-surface);border-radius:50%;position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);");
+exports.NoPermissionOuter = NoPermissionOuter;
+var NoPermissionInner = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "NoPermissionInner",
+  target: "eemsv162"
+})("display:flex;flex-direction:column;align-items:center;padding-top:35px;width:300px;color:var(--mdc-theme-on-surface);");
+exports.NoPermissionInner = NoPermissionInner;
+var NoPermissionIcon = /*#__PURE__*/(0, _styled.default)(_privacy_tip.ReactComponent, {
+  label: "NoPermissionIcon",
+  target: "eemsv163"
+})("width:100px !important;height:auto;display:inline-block;color:var(--mdc-theme-on-surface);");
+exports.NoPermissionIcon = NoPermissionIcon;
+var NoPermissionTitle = /*#__PURE__*/(0, _styled.default)(_Typography.Typography, {
+  label: "NoPermissionTitle",
+  target: "eemsv164"
+})("margin-top:8px;");
+exports.NoPermissionTitle = NoPermissionTitle;
+var NoPermissionBody = /*#__PURE__*/(0, _styled.default)(_Typography.Typography, {
+  label: "NoPermissionBody",
+  target: "eemsv165"
+})("padding:0 16px;color:var(--mdc-theme-text-secondary-on-background);");
+exports.NoPermissionBody = NoPermissionBody;

package/components/NoPermission/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["NoPermissionWrapper","styled","NoPermissionOuter","NoPermissionInner","NoPermissionIcon","PermissionIcon","NoPermissionTitle","Typography","NoPermissionBody"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { ReactComponent as PermissionIcon } from \"@material-design-icons/svg/outlined/privacy_tip.svg\";\nimport { Typography } from \"@webiny/ui/Typography\";\n\nexport const NoPermissionWrapper = styled(\"div\")`\n    margin: 0 auto;\n    padding-top: 0;\n    height: calc(100vh - 95px);\n    z-index: 2;\n    width: 100%;\n    position: absolute;\n    background-color: transparent;\n`;\n\nexport const NoPermissionOuter = styled(\"div\")`\n    text-align: center;\n    width: 300px;\n    height: 300px;\n    background-color: var(--mdc-theme-surface);\n    border-radius: 50%;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translateX(-50%) translateY(-50%);\n`;\n\nexport const NoPermissionInner = styled(\"div\")`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding-top: 35px;\n    width: 300px;\n    color: var(--mdc-theme-on-surface);\n`;\n\nexport const NoPermissionIcon = styled(PermissionIcon)`\n    width: 100px !important;\n    height: auto;\n    display: inline-block;\n    color: var(--mdc-theme-on-surface);\n`;\n\nexport const NoPermissionTitle = styled(Typography)`\n    margin-top: 8px;\n`;\n\nexport const NoPermissionBody = styled(Typography)`\n    padding: 0 16px;\n    color: var(--mdc-theme-text-secondary-on-background);\n`;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEO,IAAMA,mBAAmB,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,gIAQ9C;AAAC;AAEK,IAAMC,iBAAiB,oBAAGD,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,4LAU5C;AAAC;AAEK,IAAME,iBAAiB,oBAAGF,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,2HAO5C;AAAC;AAEK,IAAMG,gBAAgB,oBAAGH,eAAM,EAACI,2BAAc;EAAA;EAAA;AAAA,gGAKpD;AAAC;AAEK,IAAMC,iBAAiB,oBAAGL,eAAM,EAACM,sBAAU;EAAA;EAAA;AAAA,qBAEjD;AAAC;AAEK,IAAMC,gBAAgB,oBAAGP,eAAM,EAACM,sBAAU;EAAA;EAAA;AAAA,yEAGhD;AAAC"}

package/components/NoResults/NoResults.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const NoResults: React.FC;