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

package/components/Grid/File.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactLazyLoad","_interopRequireDefault","_TimeAgo","_Typography","_check_circle","_styled","_FileManagerViewConfig","FileThumbnail","exports","_ref","file","selected","onSelect","children","_useFileManagerViewCo","useFileManagerViewConfig","browser","itemActions","grid","default","createElement","FileWrapper","FileBody","FileControls","FileInfoIcon","map","action","Fragment","key","name","element","FileSelectedMarker","className","onClick","ReactComponent","height","offsetVertical","FilePreview","FileClickable","FileLabel","Typography","use","type","TimeAgo","datetime","createdOn"],"sources":["File.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\n/**\n * Package react-lazy-load has no types.\n */\n// @ts-expect-error\nimport LazyLoad from \"react-lazy-load\";\nimport { TimeAgo } from \"@webiny/ui/TimeAgo\";\nimport { Typography } from \"@webiny/ui/Typography\";\n\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 { useFileManagerViewConfig } from \"~/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig\";\n\nexport interface FileOptions {\n    label: string;\n    // TODO fix the type!\n    onClick: (file: boolean) => void;\n}\nexport interface FileProps {\n    file: FileItem;\n    selected: boolean;\n    onSelect?: (event?: React.MouseEvent) => void;\n    onClick?: (event?: React.MouseEvent) => void;\n    options?: FileOptions[];\n    multiple?: boolean;\n    children: React.ReactNode;\n}\n\nexport const FileThumbnail = ({ file, selected, onSelect, children }: FileProps) => {\n    const { browser } = useFileManagerViewConfig();\n\n    const { itemActions } = browser.grid;\n\n    return (\n        <FileWrapper data-testid={\"fm-list-wrapper-file\"}>\n            <FileBody>\n                <FileControls>\n                    <FileInfoIcon>\n                        {itemActions.map(action => {\n                            return <Fragment key={action.name}>{action.element}</Fragment>;\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":"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","ignoreList":[]}
+{"version":3,"names":["React","Fragment","LazyLoad","makeDecoratable","Text","TimeAgo","cn","CheckboxPrimitive","useFileManagerViewConfig","DefaultFileControls","onSelect","selected","browser","itemActions","grid","createElement","className","onClick","checked","onChange","map","action","key","name","element","DefaultFileBody","children","height","offset","DefaultFileLabel","file","size","as","type","datetime","createdOn","File","fileBody","id"],"sources":["File.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport LazyLoad from \"react-lazy-load\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport { Text, TimeAgo, cn, CheckboxPrimitive } from \"@webiny/admin-ui\";\nimport { useFileManagerViewConfig } from \"~/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig.js\";\nimport type { FileItem } from \"~/types.js\";\n\nexport interface FileProps {\n    file: FileItem;\n    selected: boolean;\n    fileBody?: JSX.Element;\n    onSelect?: (event?: React.MouseEvent) => void;\n    onClick?: (event?: React.MouseEvent) => void;\n    multiple?: boolean;\n    children: React.ReactNode;\n}\n\nexport type DefaultFileControlsProps = Pick<FileProps, \"selected\" | \"onSelect\">;\n\nconst DefaultFileControls = ({ onSelect, selected }: DefaultFileControlsProps) => {\n    const { browser } = useFileManagerViewConfig();\n    const { itemActions } = browser.grid;\n\n    return (\n        <>\n            {onSelect ? (\n                <div\n                    className={cn([\n                        \"p-xs rounded-md\",\n                        \"bg-neutral-base/30\",\n                        \"absolute top-sm left-sm\",\n                        selected ? \"visible\" : \"invisible group-hover:visible\"\n                    ])}\n                >\n                    <CheckboxPrimitive\n                        onClick={onSelect}\n                        checked={selected}\n                        onChange={() => void 0}\n                    />\n                </div>\n            ) : null}\n            <div\n                className={cn([\n                    \"invisible group-hover:visible\",\n                    \"flex items-center gap-xxs\",\n                    \"p-xs\",\n                    \"absolute top-xs-plus right-xs-plus\"\n                ])}\n            >\n                {itemActions.map(action => {\n                    return <Fragment key={action.name}>{action.element}</Fragment>;\n                })}\n            </div>\n        </>\n    );\n};\n\nexport type DefaultFileBodyProps = Pick<FileProps, \"selected\" | \"onSelect\" | \"children\">;\n\nconst DefaultFileBody = ({ selected, onSelect, children }: DefaultFileBodyProps) => {\n    return (\n        <div\n            onClick={onSelect}\n            className={cn([\"relative\", onSelect ? \"cursor-pointer\" : \"cursor-default\"])}\n        >\n            <DefaultFileControls selected={selected} onSelect={onSelect} />\n            <LazyLoad\n                height={150}\n                offset={\"300px\"}\n                data-testid={\"fm-file-wrapper-file-preview\"}\n                className={cn([\n                    \"bg-neutral-muted\",\n                    \"flex items-center justify-center\",\n                    \"text-neutral-strong text-sm\"\n                ])}\n            >\n                {children}\n            </LazyLoad>\n        </div>\n    );\n};\n\ntype DefaultFileLabelProps = Pick<FileProps, \"file\">;\n\nconst DefaultFileLabel = ({ file }: DefaultFileLabelProps) => {\n    return (\n        <div className={\"px-md py-sm-extra\"} data-testid={\"fm-file-wrapper-file-label\"}>\n            <Text size={\"sm\"} as={\"div\"} className={\"truncate text-neutral-primary\"}>\n                {file.name}\n            </Text>\n            <Text size={\"sm\"} as={\"div\"} className={\"truncate text-neutral-dimmed\"}>\n                {file.type} {\" // \"} <TimeAgo datetime={file.createdOn} />\n            </Text>\n        </div>\n    );\n};\n\nexport const File = makeDecoratable(\n    \"File\",\n    ({ file, fileBody, selected, onSelect, children }: FileProps) => {\n        return (\n            <div\n                className={cn([\n                    \"group\",\n                    \"bg-neutral-base rounded-lg\",\n                    \"shadow-sm hover:shadow-lg\",\n                    \"border-sm border-solid border-neutral-base hover:border-neutral-dimmed-darker\",\n                    selected && \"ring-md ring-primary-strong\",\n                    \"transition-shadow duration-250 ease-in-out\",\n                    \"overflow-hidden\"\n                ])}\n                data-testid={\"fm-list-wrapper-file\"}\n                data-file-id={file.id}\n            >\n                {fileBody ?? (\n                    <DefaultFileBody selected={selected} onSelect={onSelect}>\n                        {children}\n                    </DefaultFileBody>\n                )}\n                <DefaultFileLabel file={file} />\n            </div>\n        );\n    }\n);\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,OAAOC,QAAQ,MAAM,iBAAiB;AACtC,SAASC,eAAe,QAAQ,mBAAmB;AACnD,SAASC,IAAI,EAAEC,OAAO,EAAEC,EAAE,EAAEC,iBAAiB,QAAQ,kBAAkB;AACvE,SAASC,wBAAwB;AAejC,MAAMC,mBAAmB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAmC,CAAC,KAAK;EAC9E,MAAM;IAAEC;EAAQ,CAAC,GAAGJ,wBAAwB,CAAC,CAAC;EAC9C,MAAM;IAAEK;EAAY,CAAC,GAAGD,OAAO,CAACE,IAAI;EAEpC,oBACId,KAAA,CAAAe,aAAA,CAAAf,KAAA,CAAAC,QAAA,QACKS,QAAQ,gBACLV,KAAA,CAAAe,aAAA;IACIC,SAAS,EAAEV,EAAE,CAAC,CACV,iBAAiB,EACjB,oBAAoB,EACpB,yBAAyB,EACzBK,QAAQ,GAAG,SAAS,GAAG,+BAA+B,CACzD;EAAE,gBAEHX,KAAA,CAAAe,aAAA,CAACR,iBAAiB;IACdU,OAAO,EAAEP,QAAS;IAClBQ,OAAO,EAAEP,QAAS;IAClBQ,QAAQ,EAAEA,CAAA,KAAM,KAAK;EAAE,CAC1B,CACA,CAAC,GACN,IAAI,eACRnB,KAAA,CAAAe,aAAA;IACIC,SAAS,EAAEV,EAAE,CAAC,CACV,+BAA+B,EAC/B,2BAA2B,EAC3B,MAAM,EACN,oCAAoC,CACvC;EAAE,GAEFO,WAAW,CAACO,GAAG,CAACC,MAAM,IAAI;IACvB,oBAAOrB,KAAA,CAAAe,aAAA,CAACd,QAAQ;MAACqB,GAAG,EAAED,MAAM,CAACE;IAAK,GAAEF,MAAM,CAACG,OAAkB,CAAC;EAClE,CAAC,CACA,CACP,CAAC;AAEX,CAAC;AAID,MAAMC,eAAe,GAAGA,CAAC;EAAEd,QAAQ;EAAED,QAAQ;EAAEgB;AAA+B,CAAC,KAAK;EAChF,oBACI1B,KAAA,CAAAe,aAAA;IACIE,OAAO,EAAEP,QAAS;IAClBM,SAAS,EAAEV,EAAE,CAAC,CAAC,UAAU,EAAEI,QAAQ,GAAG,gBAAgB,GAAG,gBAAgB,CAAC;EAAE,gBAE5EV,KAAA,CAAAe,aAAA,CAACN,mBAAmB;IAACE,QAAQ,EAAEA,QAAS;IAACD,QAAQ,EAAEA;EAAS,CAAE,CAAC,eAC/DV,KAAA,CAAAe,aAAA,CAACb,QAAQ;IACLyB,MAAM,EAAE,GAAI;IACZC,MAAM,EAAE,OAAQ;IAChB,eAAa,8BAA+B;IAC5CZ,SAAS,EAAEV,EAAE,CAAC,CACV,kBAAkB,EAClB,kCAAkC,EAClC,6BAA6B,CAChC;EAAE,GAEFoB,QACK,CACT,CAAC;AAEd,CAAC;AAID,MAAMG,gBAAgB,GAAGA,CAAC;EAAEC;AAA4B,CAAC,KAAK;EAC1D,oBACI9B,KAAA,CAAAe,aAAA;IAAKC,SAAS,EAAE,mBAAoB;IAAC,eAAa;EAA6B,gBAC3EhB,KAAA,CAAAe,aAAA,CAACX,IAAI;IAAC2B,IAAI,EAAE,IAAK;IAACC,EAAE,EAAE,KAAM;IAAChB,SAAS,EAAE;EAAgC,GACnEc,IAAI,CAACP,IACJ,CAAC,eACPvB,KAAA,CAAAe,aAAA,CAACX,IAAI;IAAC2B,IAAI,EAAE,IAAK;IAACC,EAAE,EAAE,KAAM;IAAChB,SAAS,EAAE;EAA+B,GAClEc,IAAI,CAACG,IAAI,EAAC,GAAC,EAAC,MAAM,EAAC,GAAC,eAAAjC,KAAA,CAAAe,aAAA,CAACV,OAAO;IAAC6B,QAAQ,EAAEJ,IAAI,CAACK;EAAU,CAAE,CACvD,CACL,CAAC;AAEd,CAAC;AAED,OAAO,MAAMC,IAAI,GAAGjC,eAAe,CAC/B,MAAM,EACN,CAAC;EAAE2B,IAAI;EAAEO,QAAQ;EAAE1B,QAAQ;EAAED,QAAQ;EAAEgB;AAAoB,CAAC,KAAK;EAC7D,oBACI1B,KAAA,CAAAe,aAAA;IACIC,SAAS,EAAEV,EAAE,CAAC,CACV,OAAO,EACP,4BAA4B,EAC5B,2BAA2B,EAC3B,+EAA+E,EAC/EK,QAAQ,IAAI,6BAA6B,EACzC,4CAA4C,EAC5C,iBAAiB,CACpB,CAAE;IACH,eAAa,sBAAuB;IACpC,gBAAcmB,IAAI,CAACQ;EAAG,GAErBD,QAAQ,iBACLrC,KAAA,CAAAe,aAAA,CAACU,eAAe;IAACd,QAAQ,EAAEA,QAAS;IAACD,QAAQ,EAAEA;EAAS,GACnDgB,QACY,CACpB,eACD1B,KAAA,CAAAe,aAAA,CAACc,gBAAgB;IAACC,IAAI,EAAEA;EAAK,CAAE,CAC9B,CAAC;AAEd,CACJ,CAAC","ignoreList":[]}

package/components/Grid/Grid.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
-import { FolderItem } from "@webiny/app-aco/types";
-import { FileItem } from "@webiny/app-admin/types";
+import { FolderActionConfig } from "@webiny/app-aco";
+import type { FolderDto } from "@webiny/app-aco";
+import type { FileItem } from "../../types.js";
 interface GridProps {
     records: FileItem[];
-    folders: FolderItem[];
+    folders: FolderDto[];
+    folderActions: FolderActionConfig[];
     loading?: boolean;
     onFolderClick: (id: string) => void;
     selected: FileItem[];
@@ -13,6 +15,7 @@ interface GridProps {
     onChange?: (file: FileItem) => void;
     onClose?: () => void;
     hasOnSelectCallback: boolean;
+    displaySubFolders?: boolean;
 }
-export declare const Grid: ({ folders, records, loading, onFolderClick, selected, onChange, onClose, toggleSelected, deselectAll, multiple, hasOnSelectCallback }: GridProps) => React.JSX.Element;
+export declare const Grid: ({ folderActions, folders, records, loading, onFolderClick, selected, onChange, onClose, toggleSelected, deselectAll, multiple, hasOnSelectCallback, displaySubFolders }: GridProps) => React.JSX.Element;
 export {};

package/components/Grid/Grid.js

@@ -1,78 +1,71 @@
-"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("./Thumbnail");
-var _FileProvider = require("../../contexts/FileProvider");
-var _templateObject;
-var t = _i18n.i18n.ns("app-admin/file-manager/components/grid");
-var Grid = exports.Grid = function Grid(_ref) {
-  var folders = _ref.folders,
-    records = _ref.records,
-    loading = _ref.loading,
-    onFolderClick = _ref.onFolderClick,
-    selected = _ref.selected,
-    onChange = _ref.onChange,
-    onClose = _ref.onClose,
-    toggleSelected = _ref.toggleSelected,
-    deselectAll = _ref.deselectAll,
-    multiple = _ref.multiple,
-    hasOnSelectCallback = _ref.hasOnSelectCallback;
+import React, { useMemo } from "react";
+import { cn, OverlayLoader } from "@webiny/admin-ui";
+import { FolderGridItem, FolderProvider } from "@webiny/app-aco";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { FileProvider } from "../../contexts/FileProvider.js";
+import { Thumbnail } from "../Thumbnail/index.js";
+import { File } from "./File.js";
+const t = i18n.ns("app-admin/file-manager/components/grid");
+export const Grid = ({
+  folderActions,
+  folders,
+  records,
+  loading,
+  onFolderClick,
+  selected,
+  onChange,
+  onClose,
+  toggleSelected,
+  deselectAll,
+  multiple,
+  hasOnSelectCallback,
+  displaySubFolders = true
+}) => {
   if (loading) {
-    return /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, {
-      label: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Loading Files..."]))),
-      style: {
-        opacity: 1
-      }
-    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: "relative size-full"
+    }, /*#__PURE__*/React.createElement(OverlayLoader, {
+      text: t`Loading files...`,
+      size: "lg"
+    }));
   }
-  var onSelect = (0, _react.useMemo)(function () {
+  const onSelect = useMemo(() => {
     if (!onChange) {
       return undefined;
     }
-    return function (record) {
-      return function (event) {
-        if (event) {
-          event.stopPropagation();
-        }
-        if (!hasOnSelectCallback || multiple) {
-          toggleSelected(record);
-          return;
-        }
-        onChange(record);
-        onClose && onClose();
-      };
+    return record => event => {
+      if (event) {
+        event.stopPropagation();
+      }
+      if (!hasOnSelectCallback || 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, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn(["p-lg", "grid gap-md grid"]),
+    style: {
+      gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))"
+    },
     onClick: deselectAll
-  }, 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),
-      selected: selected.some(function (current) {
-        return current.id === record.id;
-      }),
-      onSelect: onSelect ? onSelect(record) : undefined
-    }, /*#__PURE__*/_react.default.createElement(_Thumbnail.Thumbnail, null)));
-  })));
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, displaySubFolders && folders.map(folder => /*#__PURE__*/React.createElement(FolderProvider, {
+    folder: folder,
+    key: folder.id
+  }, /*#__PURE__*/React.createElement(FolderGridItem, {
+    folderActions: folderActions,
+    onClick: onFolderClick
+  }))), records.map(record => /*#__PURE__*/React.createElement(FileProvider, {
+    file: record,
+    key: record.id
+  }, /*#__PURE__*/React.createElement(File, {
+    file: record,
+    multiple: Boolean(multiple),
+    selected: selected.some(current => current.id === record.id),
+    onSelect: onSelect ? onSelect(record) : undefined
+  }, /*#__PURE__*/React.createElement(Thumbnail, null))))));
 };
 
 //# sourceMappingURL=Grid.js.map

package/components/Grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_appAco","_i18n","_Progress","_File","_styled","_Thumbnail","_FileProvider","_templateObject","t","i18n","ns","Grid","exports","_ref","folders","records","loading","onFolderClick","selected","onChange","onClose","toggleSelected","deselectAll","multiple","hasOnSelectCallback","default","createElement","CircularProgress","label","_taggedTemplateLiteral2","style","opacity","onSelect","useMemo","undefined","record","event","stopPropagation","Fragment","FolderList","FolderGrid","FileList","onClick","map","FileProvider","file","key","id","FileThumbnail","Boolean","some","current","Thumbnail"],"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 \"./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    onFolderClick: (id: string) => void;\n    selected: FileItem[];\n    multiple?: boolean;\n    toggleSelected: (file: FileItem) => void;\n    deselectAll: () => void;\n    onChange?: (file: FileItem) => void;\n    onClose?: () => void;\n    hasOnSelectCallback: boolean;\n}\n\nexport const Grid = ({\n    folders,\n    records,\n    loading,\n    onFolderClick,\n    selected,\n    onChange,\n    onClose,\n    toggleSelected,\n    deselectAll,\n    multiple,\n    hasOnSelectCallback\n}: GridProps) => {\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) => (event?: React.MouseEvent) => {\n            if (event) {\n                event.stopPropagation();\n            }\n\n            if (!hasOnSelectCallback || 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 onClick={deselectAll}>\n                {records.map(record => (\n                    <FileProvider file={record} key={record.id}>\n                        <FileThumbnail\n                            file={record}\n                            multiple={Boolean(multiple)}\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":"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","ignoreList":[]}
+{"version":3,"names":["React","useMemo","cn","OverlayLoader","FolderGridItem","FolderProvider","i18n","FileProvider","Thumbnail","File","t","ns","Grid","folderActions","folders","records","loading","onFolderClick","selected","onChange","onClose","toggleSelected","deselectAll","multiple","hasOnSelectCallback","displaySubFolders","createElement","className","text","size","onSelect","undefined","record","event","stopPropagation","style","gridTemplateColumns","onClick","Fragment","map","folder","key","id","file","Boolean","some","current"],"sources":["Grid.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { cn, OverlayLoader } from \"@webiny/admin-ui\";\nimport { FolderActionConfig, FolderGridItem, FolderProvider } from \"@webiny/app-aco\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport type { FolderDto } from \"@webiny/app-aco\";\nimport type { FileItem } from \"~/types.js\";\nimport { FileProvider } from \"~/contexts/FileProvider.js\";\nimport { Thumbnail } from \"../Thumbnail/index.js\";\nimport { File } from \"./File.js\";\n\nconst t = i18n.ns(\"app-admin/file-manager/components/grid\");\n\ninterface GridProps {\n    records: FileItem[];\n    folders: FolderDto[];\n    folderActions: FolderActionConfig[];\n    loading?: boolean;\n    onFolderClick: (id: string) => void;\n    selected: FileItem[];\n    multiple?: boolean;\n    toggleSelected: (file: FileItem) => void;\n    deselectAll: () => void;\n    onChange?: (file: FileItem) => void;\n    onClose?: () => void;\n    hasOnSelectCallback: boolean;\n    displaySubFolders?: boolean;\n}\n\nexport const Grid = ({\n    folderActions,\n    folders,\n    records,\n    loading,\n    onFolderClick,\n    selected,\n    onChange,\n    onClose,\n    toggleSelected,\n    deselectAll,\n    multiple,\n    hasOnSelectCallback,\n    displaySubFolders = true\n}: GridProps) => {\n    if (loading) {\n        return (\n            <div className={\"relative size-full\"}>\n                <OverlayLoader text={t`Loading files...`} size={\"lg\"} />\n            </div>\n        );\n    }\n\n    const onSelect = useMemo(() => {\n        if (!onChange) {\n            return undefined;\n        }\n\n        return (record: FileItem) => (event?: React.MouseEvent) => {\n            if (event) {\n                event.stopPropagation();\n            }\n\n            if (!hasOnSelectCallback || multiple) {\n                toggleSelected(record);\n                return;\n            }\n\n            onChange(record);\n            onClose && onClose();\n        };\n    }, [onChange]);\n\n    return (\n        <div\n            className={cn([\"p-lg\", \"grid gap-md grid\"])}\n            style={{\n                gridTemplateColumns: \"repeat(auto-fill, minmax(200px, 1fr))\"\n            }}\n            onClick={deselectAll}\n        >\n            <>\n                {displaySubFolders &&\n                    folders.map(folder => (\n                        <FolderProvider folder={folder} key={folder.id}>\n                            <FolderGridItem folderActions={folderActions} onClick={onFolderClick} />\n                        </FolderProvider>\n                    ))}\n                {records.map(record => (\n                    <FileProvider file={record} key={record.id}>\n                        <File\n                            file={record}\n                            multiple={Boolean(multiple)}\n                            selected={selected.some(current => current.id === record.id)}\n                            onSelect={onSelect ? onSelect(record) : undefined}\n                        >\n                            <Thumbnail />\n                        </File>\n                    </FileProvider>\n                ))}\n            </>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,EAAE,EAAEC,aAAa,QAAQ,kBAAkB;AACpD,SAA6BC,cAAc,EAAEC,cAAc,QAAQ,iBAAiB;AACpF,SAASC,IAAI,QAAQ,2BAA2B;AAGhD,SAASC,YAAY;AACrB,SAASC,SAAS;AAClB,SAASC,IAAI;AAEb,MAAMC,CAAC,GAAGJ,IAAI,CAACK,EAAE,CAAC,wCAAwC,CAAC;AAkB3D,OAAO,MAAMC,IAAI,GAAGA,CAAC;EACjBC,aAAa;EACbC,OAAO;EACPC,OAAO;EACPC,OAAO;EACPC,aAAa;EACbC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,cAAc;EACdC,WAAW;EACXC,QAAQ;EACRC,mBAAmB;EACnBC,iBAAiB,GAAG;AACb,CAAC,KAAK;EACb,IAAIT,OAAO,EAAE;IACT,oBACIhB,KAAA,CAAA0B,aAAA;MAAKC,SAAS,EAAE;IAAqB,gBACjC3B,KAAA,CAAA0B,aAAA,CAACvB,aAAa;MAACyB,IAAI,EAAElB,CAAC,kBAAmB;MAACmB,IAAI,EAAE;IAAK,CAAE,CACtD,CAAC;EAEd;EAEA,MAAMC,QAAQ,GAAG7B,OAAO,CAAC,MAAM;IAC3B,IAAI,CAACkB,QAAQ,EAAE;MACX,OAAOY,SAAS;IACpB;IAEA,OAAQC,MAAgB,IAAMC,KAAwB,IAAK;MACvD,IAAIA,KAAK,EAAE;QACPA,KAAK,CAACC,eAAe,CAAC,CAAC;MAC3B;MAEA,IAAI,CAACV,mBAAmB,IAAID,QAAQ,EAAE;QAClCF,cAAc,CAACW,MAAM,CAAC;QACtB;MACJ;MAEAb,QAAQ,CAACa,MAAM,CAAC;MAChBZ,OAAO,IAAIA,OAAO,CAAC,CAAC;IACxB,CAAC;EACL,CAAC,EAAE,CAACD,QAAQ,CAAC,CAAC;EAEd,oBACInB,KAAA,CAAA0B,aAAA;IACIC,SAAS,EAAEzB,EAAE,CAAC,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAE;IAC5CiC,KAAK,EAAE;MACHC,mBAAmB,EAAE;IACzB,CAAE;IACFC,OAAO,EAAEf;EAAY,gBAErBtB,KAAA,CAAA0B,aAAA,CAAA1B,KAAA,CAAAsC,QAAA,QACKb,iBAAiB,IACdX,OAAO,CAACyB,GAAG,CAACC,MAAM,iBACdxC,KAAA,CAAA0B,aAAA,CAACrB,cAAc;IAACmC,MAAM,EAAEA,MAAO;IAACC,GAAG,EAAED,MAAM,CAACE;EAAG,gBAC3C1C,KAAA,CAAA0B,aAAA,CAACtB,cAAc;IAACS,aAAa,EAAEA,aAAc;IAACwB,OAAO,EAAEpB;EAAc,CAAE,CAC3D,CACnB,CAAC,EACLF,OAAO,CAACwB,GAAG,CAACP,MAAM,iBACfhC,KAAA,CAAA0B,aAAA,CAACnB,YAAY;IAACoC,IAAI,EAAEX,MAAO;IAACS,GAAG,EAAET,MAAM,CAACU;EAAG,gBACvC1C,KAAA,CAAA0B,aAAA,CAACjB,IAAI;IACDkC,IAAI,EAAEX,MAAO;IACbT,QAAQ,EAAEqB,OAAO,CAACrB,QAAQ,CAAE;IAC5BL,QAAQ,EAAEA,QAAQ,CAAC2B,IAAI,CAACC,OAAO,IAAIA,OAAO,CAACJ,EAAE,KAAKV,MAAM,CAACU,EAAE,CAAE;IAC7DZ,QAAQ,EAAEA,QAAQ,GAAGA,QAAQ,CAACE,MAAM,CAAC,GAAGD;EAAU,gBAElD/B,KAAA,CAAA0B,aAAA,CAAClB,SAAS,MAAE,CACV,CACI,CACjB,CACH,CACD,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/Grid/Thumbnail.js

@@ -1,21 +1,16 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Thumbnail = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _useFile2 = require("../../hooks/useFile");
-var _ = require("../..");
-var Thumbnail = exports.Thumbnail = function Thumbnail() {
-  var _useFile = (0, _useFile2.useFile)(),
-    file = _useFile.file;
-  var _useFileManagerViewCo = (0, _.useFileManagerViewConfig)(),
-    browser = _useFileManagerViewCo.browser,
-    getThumbnailRenderer = _useFileManagerViewCo.getThumbnailRenderer;
-  var renderer = getThumbnailRenderer(browser.grid.itemThumbnails, file);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderer?.element || null);
+import React from "react";
+import { useFile } from "../../hooks/useFile.js";
+import { useFileManagerViewConfig } from "../../index.js";
+export const Thumbnail = () => {
+  const {
+    file
+  } = useFile();
+  const {
+    browser,
+    getThumbnailRenderer
+  } = useFileManagerViewConfig();
+  const renderer = getThumbnailRenderer(browser.grid.itemThumbnails, file);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderer?.element || null);
 };
 
 //# sourceMappingURL=Thumbnail.js.map

package/components/Grid/Thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_useFile2","_","Thumbnail","exports","_useFile","useFile","file","_useFileManagerViewCo","useFileManagerViewConfig","browser","getThumbnailRenderer","renderer","grid","itemThumbnails","default","createElement","Fragment","element"],"sources":["Thumbnail.tsx"],"sourcesContent":["import React from \"react\";\nimport { useFile } from \"~/hooks/useFile\";\nimport { useFileManagerViewConfig } from \"~/index\";\n\nexport const Thumbnail = () => {\n    const { file } = useFile();\n    const { browser, getThumbnailRenderer } = useFileManagerViewConfig();\n\n    const renderer = getThumbnailRenderer(browser.grid.itemThumbnails, file);\n\n    return <>{renderer?.element || null}</>;\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,CAAA,GAAAF,OAAA;AAEO,IAAMG,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,SAAZA,SAASA,CAAA,EAAS;EAC3B,IAAAE,QAAA,GAAiB,IAAAC,iBAAO,EAAC,CAAC;IAAlBC,IAAI,GAAAF,QAAA,CAAJE,IAAI;EACZ,IAAAC,qBAAA,GAA0C,IAAAC,0BAAwB,EAAC,CAAC;IAA5DC,OAAO,GAAAF,qBAAA,CAAPE,OAAO;IAAEC,oBAAoB,GAAAH,qBAAA,CAApBG,oBAAoB;EAErC,IAAMC,QAAQ,GAAGD,oBAAoB,CAACD,OAAO,CAACG,IAAI,CAACC,cAAc,EAAEP,IAAI,CAAC;EAExE,oBAAOT,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAAAlB,MAAA,CAAAiB,OAAA,CAAAE,QAAA,QAAGL,QAAQ,EAAEM,OAAO,IAAI,IAAO,CAAC;AAC3C,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useFile","useFileManagerViewConfig","Thumbnail","file","browser","getThumbnailRenderer","renderer","grid","itemThumbnails","createElement","Fragment","element"],"sources":["Thumbnail.tsx"],"sourcesContent":["import React from \"react\";\nimport { useFile } from \"~/hooks/useFile.js\";\nimport { useFileManagerViewConfig } from \"~/index.js\";\n\nexport const Thumbnail = () => {\n    const { file } = useFile();\n    const { browser, getThumbnailRenderer } = useFileManagerViewConfig();\n\n    const renderer = getThumbnailRenderer(browser.grid.itemThumbnails, file);\n\n    return <>{renderer?.element || null}</>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO;AAChB,SAASC,wBAAwB;AAEjC,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC3B,MAAM;IAAEC;EAAK,CAAC,GAAGH,OAAO,CAAC,CAAC;EAC1B,MAAM;IAAEI,OAAO;IAAEC;EAAqB,CAAC,GAAGJ,wBAAwB,CAAC,CAAC;EAEpE,MAAMK,QAAQ,GAAGD,oBAAoB,CAACD,OAAO,CAACG,IAAI,CAACC,cAAc,EAAEL,IAAI,CAAC;EAExE,oBAAOJ,KAAA,CAAAU,aAAA,CAAAV,KAAA,CAAAW,QAAA,QAAGJ,QAAQ,EAAEK,OAAO,IAAI,IAAO,CAAC;AAC3C,CAAC","ignoreList":[]}

package/components/Grid/index.d.ts

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

package/components/Grid/index.js

@@ -1,18 +1,3 @@
-"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];
-    }
-  });
-});
+export * from "./Grid.js";
 
 //# sourceMappingURL=index.js.map

package/components/Grid/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Grid","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["index.tsx"],"sourcesContent":["export * from \"./Grid\";\n"],"mappings":";;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,KAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,KAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,KAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./Grid.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/components/Header/Actions.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { HeaderProps } from "../../components/Header/Header.js";
+type ActionsProps = Pick<HeaderProps, "browseFiles">;
+export declare const Actions: (props: ActionsProps) => React.JSX.Element;
+export {};

package/components/Header/Actions.js

@@ -0,0 +1,99 @@
+import React, { useCallback } from "react";
+import { Button, IconButton, Tooltip } from "@webiny/admin-ui";
+import { useCreateDialog } from "@webiny/app-aco";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as FileUploadIcon } from "@webiny/icons/file_upload.svg";
+import { ReactComponent as GridIcon } from "@webiny/icons/grid_on.svg";
+import { ReactComponent as TableIcon } from "@webiny/icons/format_list_bulleted.svg";
+import { useFileManagerView } from "../../modules/FileManagerRenderer/FileManagerViewProvider/index.js";
+import { useFileManagerApi } from "../../modules/FileManagerApiProvider/FileManagerApiContext/index.js";
+import { FiltersToggle } from "@webiny/app-admin";
+const FileAction = ({
+  browseFiles
+}) => {
+  const view = useFileManagerView();
+  const fileManager = useFileManagerApi();
+  const renderUploadFileAction = useCallback(({
+    browseFiles
+  }) => {
+    if (!fileManager.canCreate) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(Button, {
+      onClick: browseFiles,
+      size: "md",
+      text: "Upload",
+      icon: /*#__PURE__*/React.createElement(FileUploadIcon, null)
+    });
+  }, [fileManager.canCreate]);
+  if (view.hasOnSelectCallback && view.selected.length > 0) {
+    return /*#__PURE__*/React.createElement(Button, {
+      onClick: () => view.onChange(view.selected),
+      size: "md",
+      text: `Select ${view.multiple && `(${view.selected.length})`}`
+    });
+  }
+  return renderUploadFileAction({
+    browseFiles
+  });
+};
+const FolderAction = () => {
+  const view = useFileManagerView();
+  const {
+    showDialog: showCreateFolderDialog
+  } = useCreateDialog();
+  const onCreateFolder = useCallback(() => {
+    showCreateFolderDialog({
+      currentParentId: view.folderId
+    });
+  }, [view.folderId]);
+  return /*#__PURE__*/React.createElement(Button, {
+    variant: "secondary",
+    size: "md",
+    onClick: onCreateFolder,
+    text: "New Folder",
+    icon: /*#__PURE__*/React.createElement(AddIcon, null),
+    "data-testid": "file-manager.create-folder-button"
+  });
+};
+const LayoutSwitchAction = () => {
+  const view = useFileManagerView();
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    side: "bottom",
+    content: view.listTable ? "Switch to Grid" : "Switch to Table",
+    trigger: /*#__PURE__*/React.createElement(IconButton, {
+      variant: "ghost",
+      size: "md",
+      icon: view.listTable ? /*#__PURE__*/React.createElement(GridIcon, null) : /*#__PURE__*/React.createElement(TableIcon, null),
+      onClick: () => view.setListTable(!view.listTable)
+    })
+  });
+};
+const ToggleFiltersAction = () => {
+  const view = useFileManagerView();
+  const toggleFilters = () => {
+    if (view.showingFilters) {
+      view.hideFilters();
+    } else {
+      view.showFilters();
+    }
+  };
+  return /*#__PURE__*/React.createElement(FiltersToggle, {
+    onFiltersToggle: toggleFilters,
+    showingFilters: view.showingFilters,
+    "data-testid": "fm.list-entries.toggle-filters"
+  });
+};
+export const Actions = props => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "h-full flex gap-sm items-center justify-end"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-xs"
+  }, /*#__PURE__*/React.createElement(ToggleFiltersAction, null), /*#__PURE__*/React.createElement(LayoutSwitchAction, null)), /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-xs"
+  }, /*#__PURE__*/React.createElement(FileAction, {
+    browseFiles: props.browseFiles
+  }), /*#__PURE__*/React.createElement(FolderAction, null)));
+};
+
+//# sourceMappingURL=Actions.js.map

package/components/Header/Actions.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","Button","IconButton","Tooltip","useCreateDialog","ReactComponent","AddIcon","FileUploadIcon","GridIcon","TableIcon","useFileManagerView","useFileManagerApi","FiltersToggle","FileAction","browseFiles","view","fileManager","renderUploadFileAction","canCreate","createElement","onClick","size","text","icon","hasOnSelectCallback","selected","length","onChange","multiple","FolderAction","showDialog","showCreateFolderDialog","onCreateFolder","currentParentId","folderId","variant","LayoutSwitchAction","side","content","listTable","trigger","setListTable","ToggleFiltersAction","toggleFilters","showingFilters","hideFilters","showFilters","onFiltersToggle","Actions","props","className"],"sources":["Actions.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { Button, type ButtonProps, IconButton, Tooltip } from \"@webiny/admin-ui\";\nimport { useCreateDialog } from \"@webiny/app-aco\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as FileUploadIcon } from \"@webiny/icons/file_upload.svg\";\nimport { ReactComponent as GridIcon } from \"@webiny/icons/grid_on.svg\";\nimport { ReactComponent as TableIcon } from \"@webiny/icons/format_list_bulleted.svg\";\nimport { useFileManagerView } from \"~/modules/FileManagerRenderer/FileManagerViewProvider/index.js\";\nimport { useFileManagerApi } from \"~/modules/FileManagerApiProvider/FileManagerApiContext/index.js\";\nimport type { BrowseFilesHandler, HeaderProps } from \"~/components/Header/Header.js\";\nimport { FiltersToggle } from \"@webiny/app-admin\";\n\ntype ActionsProps = Pick<HeaderProps, \"browseFiles\">;\n\nconst FileAction = ({ browseFiles }: ActionsProps) => {\n    const view = useFileManagerView();\n    const fileManager = useFileManagerApi();\n\n    const renderUploadFileAction = useCallback(\n        ({ browseFiles }: BrowseFilesHandler) => {\n            if (!fileManager.canCreate) {\n                return null;\n            }\n            return (\n                <Button\n                    onClick={browseFiles as ButtonProps[\"onClick\"]}\n                    size={\"md\"}\n                    text={\"Upload\"}\n                    icon={<FileUploadIcon />}\n                />\n            );\n        },\n        [fileManager.canCreate]\n    );\n\n    if (view.hasOnSelectCallback && view.selected.length > 0) {\n        return (\n            <Button\n                onClick={() => view.onChange(view.selected)}\n                size={\"md\"}\n                text={`Select ${view.multiple && `(${view.selected.length})`}`}\n            />\n        );\n    }\n\n    return renderUploadFileAction({\n        browseFiles\n    } as BrowseFilesHandler);\n};\n\nconst FolderAction = () => {\n    const view = useFileManagerView();\n    const { showDialog: showCreateFolderDialog } = useCreateDialog();\n\n    const onCreateFolder = useCallback(() => {\n        showCreateFolderDialog({ currentParentId: view.folderId });\n    }, [view.folderId]);\n\n    return (\n        <Button\n            variant={\"secondary\"}\n            size={\"md\"}\n            onClick={onCreateFolder}\n            text={\"New Folder\"}\n            icon={<AddIcon />}\n            data-testid={\"file-manager.create-folder-button\"}\n        />\n    );\n};\n\nconst LayoutSwitchAction = () => {\n    const view = useFileManagerView();\n\n    return (\n        <Tooltip\n            side={\"bottom\"}\n            content={view.listTable ? \"Switch to Grid\" : \"Switch to Table\"}\n            trigger={\n                <IconButton\n                    variant={\"ghost\"}\n                    size={\"md\"}\n                    icon={view.listTable ? <GridIcon /> : <TableIcon />}\n                    onClick={() => view.setListTable(!view.listTable)}\n                />\n            }\n        />\n    );\n};\n\nconst ToggleFiltersAction = () => {\n    const view = useFileManagerView();\n\n    const toggleFilters = () => {\n        if (view.showingFilters) {\n            view.hideFilters();\n        } else {\n            view.showFilters();\n        }\n    };\n\n    return (\n        <FiltersToggle\n            onFiltersToggle={toggleFilters}\n            showingFilters={view.showingFilters}\n            data-testid=\"fm.list-entries.toggle-filters\"\n        />\n    );\n};\n\nexport const Actions = (props: ActionsProps) => {\n    return (\n        <div className={\"h-full flex gap-sm items-center justify-end\"}>\n            <div className={\"flex gap-xs\"}>\n                <ToggleFiltersAction />\n                <LayoutSwitchAction />\n            </div>\n            <div className={\"flex gap-xs\"}>\n                <FileAction browseFiles={props.browseFiles} />\n                <FolderAction />\n            </div>\n        </div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/components/Header/Header.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { FilesRenderChildren } from "react-butterfiles";
+export interface BrowseFilesHandler {
+    browseFiles: FilesRenderChildren["browseFiles"];
+}
+export interface HeaderProps {
+    browseFiles: BrowseFilesHandler["browseFiles"];
+}
+export declare const Header: (props: HeaderProps) => React.JSX.Element;

package/components/Header/Header.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { Actions } from "./Actions.js";
+import { Title } from "./Title.js";
+import { SearchWidget } from "../SearchWidget/index.js";
+export const Header = props => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-md"
+  }, /*#__PURE__*/React.createElement(Title, null), /*#__PURE__*/React.createElement("div", {
+    className: "px-md pb-sm"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-sm w-full"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex-1"
+  }, /*#__PURE__*/React.createElement(SearchWidget, null)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-sm"
+  }, /*#__PURE__*/React.createElement(Actions, {
+    browseFiles: props.browseFiles
+  }))))));
+};
+
+//# sourceMappingURL=Header.js.map

package/components/Header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Actions","Title","SearchWidget","Header","props","createElement","className","browseFiles"],"sources":["Header.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FilesRenderChildren } from \"react-butterfiles\";\n\nimport { Actions } from \"./Actions.js\";\nimport { Title } from \"./Title.js\";\nimport { SearchWidget } from \"~/components/SearchWidget/index.js\";\n\nexport interface BrowseFilesHandler {\n    browseFiles: FilesRenderChildren[\"browseFiles\"];\n}\n\nexport interface HeaderProps {\n    browseFiles: BrowseFilesHandler[\"browseFiles\"];\n}\n\nexport const Header = (props: HeaderProps) => {\n    return (\n        <div className={\"flex flex-col gap-md\"}>\n            <Title />\n            <div className={\"px-md pb-sm\"}>\n                <div className={\"flex items-center gap-sm w-full\"}>\n                    <div className={\"flex-1\"}>\n                        <SearchWidget />\n                    </div>\n                    <div>\n                        <div className={\"flex gap-sm\"}>\n                            <Actions browseFiles={props.browseFiles} />\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,OAAO;AAChB,SAASC,KAAK;AACd,SAASC,YAAY;AAUrB,OAAO,MAAMC,MAAM,GAAIC,KAAkB,IAAK;EAC1C,oBACIL,KAAA,CAAAM,aAAA;IAAKC,SAAS,EAAE;EAAuB,gBACnCP,KAAA,CAAAM,aAAA,CAACJ,KAAK,MAAE,CAAC,eACTF,KAAA,CAAAM,aAAA;IAAKC,SAAS,EAAE;EAAc,gBAC1BP,KAAA,CAAAM,aAAA;IAAKC,SAAS,EAAE;EAAkC,gBAC9CP,KAAA,CAAAM,aAAA;IAAKC,SAAS,EAAE;EAAS,gBACrBP,KAAA,CAAAM,aAAA,CAACH,YAAY,MAAE,CACd,CAAC,eACNH,KAAA,CAAAM,aAAA,2BACIN,KAAA,CAAAM,aAAA;IAAKC,SAAS,EAAE;EAAc,gBAC1BP,KAAA,CAAAM,aAAA,CAACL,OAAO;IAACO,WAAW,EAAEH,KAAK,CAACG;EAAY,CAAE,CACzC,CACJ,CACJ,CACJ,CACJ,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/Header/Title.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const Title: () => React.JSX.Element;

package/components/Header/Title.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { Heading, Icon, IconButton, Skeleton } from "@webiny/admin-ui";
+import { ReactComponent as HomeIcon } from "@webiny/icons/home.svg";
+import { ReactComponent as FolderIcon } from "@webiny/icons/folder.svg";
+import { ReactComponent as MoreVerticalIcon } from "@webiny/icons/more_vert.svg";
+import { useFileManagerView } from "../../modules/FileManagerRenderer/FileManagerViewProvider/index.js";
+import { FolderProvider } from "@webiny/app-aco";
+import { OptionsMenu } from "@webiny/app-admin";
+import { useFileManagerViewConfig } from "../../modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig.js";
+export const Title = () => {
+  const {
+    isRootFolder,
+    listTitle,
+    currentFolder
+  } = useFileManagerView();
+  const {
+    browser
+  } = useFileManagerViewConfig();
+  const icon = isRootFolder ? /*#__PURE__*/React.createElement(HomeIcon, null) : /*#__PURE__*/React.createElement(FolderIcon, null);
+  if (!listTitle) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "flex pt-md px-md items-center"
+    }, /*#__PURE__*/React.createElement(Skeleton, {
+      size: "xl"
+    }));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex pt-md px-lg items-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-sm items-center truncate"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    label: listTitle,
+    size: "md",
+    color: "neutral-strong"
+  }), /*#__PURE__*/React.createElement(Heading, {
+    level: 4,
+    as: "h1",
+    className: "truncate"
+  }, listTitle)), currentFolder && !isRootFolder && /*#__PURE__*/React.createElement(FolderProvider, {
+    folder: currentFolder
+  }, /*#__PURE__*/React.createElement(OptionsMenu, {
+    actions: browser.folder.actions,
+    "data-testid": "folder.title.menu-action",
+    trigger: /*#__PURE__*/React.createElement(IconButton, {
+      icon: /*#__PURE__*/React.createElement(MoreVerticalIcon, null),
+      size: "sm",
+      iconSize: "lg",
+      variant: "ghost",
+      disabled: isRootFolder
+    })
+  })));
+};
+
+//# sourceMappingURL=Title.js.map

package/components/Header/Title.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Heading","Icon","IconButton","Skeleton","ReactComponent","HomeIcon","FolderIcon","MoreVerticalIcon","useFileManagerView","FolderProvider","OptionsMenu","useFileManagerViewConfig","Title","isRootFolder","listTitle","currentFolder","browser","icon","createElement","className","size","label","color","level","as","folder","actions","trigger","iconSize","variant","disabled"],"sources":["Title.tsx"],"sourcesContent":["import React from \"react\";\nimport { Heading, Icon, IconButton, Skeleton } from \"@webiny/admin-ui\";\nimport { ReactComponent as HomeIcon } from \"@webiny/icons/home.svg\";\nimport { ReactComponent as FolderIcon } from \"@webiny/icons/folder.svg\";\nimport { ReactComponent as MoreVerticalIcon } from \"@webiny/icons/more_vert.svg\";\nimport { useFileManagerView } from \"~/modules/FileManagerRenderer/FileManagerViewProvider/index.js\";\nimport { FolderProvider } from \"@webiny/app-aco\";\nimport { OptionsMenu } from \"@webiny/app-admin\";\nimport { useFileManagerViewConfig } from \"~/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig.js\";\n\nexport const Title = () => {\n    const { isRootFolder, listTitle, currentFolder } = useFileManagerView();\n    const { browser } = useFileManagerViewConfig();\n\n    const icon = isRootFolder ? <HomeIcon /> : <FolderIcon />;\n\n    if (!listTitle) {\n        return (\n            <div className={\"flex pt-md px-md items-center\"}>\n                <Skeleton size={\"xl\"} />\n            </div>\n        );\n    }\n\n    return (\n        <div className={\"flex pt-md px-lg items-center\"}>\n            <div className={\"flex gap-sm items-center truncate\"}>\n                <Icon icon={icon} label={listTitle} size={\"md\"} color={\"neutral-strong\"} />\n                <Heading level={4} as={\"h1\"} className={\"truncate\"}>\n                    {listTitle}\n                </Heading>\n            </div>\n            {currentFolder && !isRootFolder && (\n                <FolderProvider folder={currentFolder}>\n                    <OptionsMenu\n                        actions={browser.folder.actions}\n                        data-testid={\"folder.title.menu-action\"}\n                        trigger={\n                            <IconButton\n                                icon={<MoreVerticalIcon />}\n                                size={\"sm\"}\n                                iconSize={\"lg\"}\n                                variant={\"ghost\"}\n                                disabled={isRootFolder}\n                            />\n                        }\n                    />\n                </FolderProvider>\n            )}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO,EAAEC,IAAI,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,kBAAkB;AACtE,SAASC,cAAc,IAAIC,QAAQ,QAAQ,wBAAwB;AACnE,SAASD,cAAc,IAAIE,UAAU,QAAQ,0BAA0B;AACvE,SAASF,cAAc,IAAIG,gBAAgB,QAAQ,6BAA6B;AAChF,SAASC,kBAAkB;AAC3B,SAASC,cAAc,QAAQ,iBAAiB;AAChD,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,wBAAwB;AAEjC,OAAO,MAAMC,KAAK,GAAGA,CAAA,KAAM;EACvB,MAAM;IAAEC,YAAY;IAAEC,SAAS;IAAEC;EAAc,CAAC,GAAGP,kBAAkB,CAAC,CAAC;EACvE,MAAM;IAAEQ;EAAQ,CAAC,GAAGL,wBAAwB,CAAC,CAAC;EAE9C,MAAMM,IAAI,GAAGJ,YAAY,gBAAGd,KAAA,CAAAmB,aAAA,CAACb,QAAQ,MAAE,CAAC,gBAAGN,KAAA,CAAAmB,aAAA,CAACZ,UAAU,MAAE,CAAC;EAEzD,IAAI,CAACQ,SAAS,EAAE;IACZ,oBACIf,KAAA,CAAAmB,aAAA;MAAKC,SAAS,EAAE;IAAgC,gBAC5CpB,KAAA,CAAAmB,aAAA,CAACf,QAAQ;MAACiB,IAAI,EAAE;IAAK,CAAE,CACtB,CAAC;EAEd;EAEA,oBACIrB,KAAA,CAAAmB,aAAA;IAAKC,SAAS,EAAE;EAAgC,gBAC5CpB,KAAA,CAAAmB,aAAA;IAAKC,SAAS,EAAE;EAAoC,gBAChDpB,KAAA,CAAAmB,aAAA,CAACjB,IAAI;IAACgB,IAAI,EAAEA,IAAK;IAACI,KAAK,EAAEP,SAAU;IAACM,IAAI,EAAE,IAAK;IAACE,KAAK,EAAE;EAAiB,CAAE,CAAC,eAC3EvB,KAAA,CAAAmB,aAAA,CAAClB,OAAO;IAACuB,KAAK,EAAE,CAAE;IAACC,EAAE,EAAE,IAAK;IAACL,SAAS,EAAE;EAAW,GAC9CL,SACI,CACR,CAAC,EACLC,aAAa,IAAI,CAACF,YAAY,iBAC3Bd,KAAA,CAAAmB,aAAA,CAACT,cAAc;IAACgB,MAAM,EAAEV;EAAc,gBAClChB,KAAA,CAAAmB,aAAA,CAACR,WAAW;IACRgB,OAAO,EAAEV,OAAO,CAACS,MAAM,CAACC,OAAQ;IAChC,eAAa,0BAA2B;IACxCC,OAAO,eACH5B,KAAA,CAAAmB,aAAA,CAAChB,UAAU;MACPe,IAAI,eAAElB,KAAA,CAAAmB,aAAA,CAACX,gBAAgB,MAAE,CAAE;MAC3Ba,IAAI,EAAE,IAAK;MACXQ,QAAQ,EAAE,IAAK;MACfC,OAAO,EAAE,OAAQ;MACjBC,QAAQ,EAAEjB;IAAa,CAC1B;EACJ,CACJ,CACW,CAEnB,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/Header/index.d.ts

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

package/components/Header/index.js

@@ -0,0 +1,3 @@
+export * from "./Header.js";
+
+//# sourceMappingURL=index.js.map

package/components/Header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Header.js\";\n"],"mappings":"AAAA","ignoreList":[]}