@webiny/app-file-manager 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/components/FileDetails/components/Thumbnail.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { useFile } from "../../../hooks/useFile";
+import { useFileManagerViewConfig } from "../../..";
+export const Thumbnail = () => {
+  const {
+    file
+  } = useFile();
+  const {
+    fileDetails,
+    getThumbnailRenderer
+  } = useFileManagerViewConfig();
+  const renderer = getThumbnailRenderer(fileDetails.thumbnails, file);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderer?.element || null);
+};
+
+//# sourceMappingURL=Thumbnail.js.map

package/components/FileDetails/components/Thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useFile","useFileManagerViewConfig","Thumbnail","file","fileDetails","getThumbnailRenderer","renderer","thumbnails","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 { fileDetails, getThumbnailRenderer } = useFileManagerViewConfig();\n\n    const renderer = getThumbnailRenderer(fileDetails.thumbnails, 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,WAAW;IAAEC;EAAqB,CAAC,GAAGJ,wBAAwB,CAAC,CAAC;EAExE,MAAMK,QAAQ,GAAGD,oBAAoB,CAACD,WAAW,CAACG,UAAU,EAAEJ,IAAI,CAAC;EAEnE,oBAAOJ,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAU,QAAA,QAAGH,QAAQ,EAAEI,OAAO,IAAI,IAAO,CAAC;AAC3C,CAAC","ignoreList":[]}

package/components/FileDetails/index.d.ts

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

package/components/FileDetails/index.js

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

package/components/FileDetails/index.js.map

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

package/components/FileDropArea/FileDropArea.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface FileDropAreaProps {
+    empty?: boolean;
+    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
+    title?: string;
+    description?: string;
+    icon?: React.ReactElement;
+}
+export declare const FileDropArea: ({ title, description, empty, onClick }: FileDropAreaProps) => React.JSX.Element;

package/components/FileDropArea/FileDropArea.js

@@ -0,0 +1,69 @@
+import React from "react";
+import { Button, cn, Heading, Text } from "@webiny/admin-ui";
+import { ReactComponent as UploadFileIcon } from "@webiny/icons/file_upload.svg";
+import { ReactComponent as UploadIcon } from "@webiny/icons/cloud_upload.svg";
+const DropAreaContainer = ({
+  empty,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: cn(["wby-w-full wby-h-full wby-p-lg wby-flex wby-items-center wby-justify-center", empty ? "wby-bg-neutral-base" : "wby-pt-xxl wby-bg-neutral-xstrong/20"])
+}, children);
+const DropAreaBox = ({
+  children,
+  empty
+}) => /*#__PURE__*/React.createElement("div", {
+  style: {
+    width: "650px",
+    height: "400px",
+    ...(empty ? {
+      backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='24' ry='24' stroke='%23E7E7E7FF' stroke-width='4' stroke-dasharray='12' stroke-dashoffset='35' stroke-linecap='square'/%3e%3c/svg%3e")`
+    } : {})
+  },
+  className: cn(["-wby-translate-y-xl", "wby-flex wby-flex-col wby-items-center wby-justify-center wby-gap-lg", "wby-p-lg wby-rounded-3xl", "wby-bg-neutral-base", !empty && "wby-shadow-md"])
+}, children);
+const DropAreaContent = ({
+  title,
+  description
+}) => /*#__PURE__*/React.createElement("div", {
+  className: "wby-flex wby-flex-col wby-items-center wby-justify-center wby-gap-sm"
+}, /*#__PURE__*/React.createElement("div", {
+  className: "wby-fill-neutral-strong"
+}, /*#__PURE__*/React.createElement(UploadIcon, {
+  width: 75,
+  height: 75
+})), /*#__PURE__*/React.createElement("div", {
+  className: "wby-text-center"
+}, title && /*#__PURE__*/React.createElement(Heading, {
+  level: 4,
+  className: "wby-text-neutral-strong"
+}, title), description && /*#__PURE__*/React.createElement(Text, {
+  as: "div",
+  style: {
+    width: "300px"
+  },
+  className: "wby-text-neutral-strong"
+}, description)));
+const DropAreaButton = ({
+  onClick
+}) => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+  onClick: onClick,
+  text: "Upload files",
+  icon: /*#__PURE__*/React.createElement(UploadFileIcon, null)
+}));
+export const FileDropArea = ({
+  title,
+  description,
+  empty,
+  onClick
+}) => /*#__PURE__*/React.createElement(DropAreaContainer, {
+  empty: empty
+}, /*#__PURE__*/React.createElement(DropAreaBox, {
+  empty: empty
+}, /*#__PURE__*/React.createElement(DropAreaContent, {
+  title: title,
+  description: description
+}), empty && /*#__PURE__*/React.createElement(DropAreaButton, {
+  onClick: onClick
+})));
+
+//# sourceMappingURL=FileDropArea.js.map

package/components/FileDropArea/FileDropArea.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Button","cn","Heading","Text","ReactComponent","UploadFileIcon","UploadIcon","DropAreaContainer","empty","children","createElement","className","DropAreaBox","style","width","height","backgroundImage","DropAreaContent","title","description","level","as","DropAreaButton","onClick","text","icon","FileDropArea"],"sources":["FileDropArea.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button, cn, Heading, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as UploadFileIcon } from \"@webiny/icons/file_upload.svg\";\nimport { ReactComponent as UploadIcon } from \"@webiny/icons/cloud_upload.svg\";\n\ninterface DropAreaContainerProps {\n    empty?: boolean;\n    children: React.ReactNode;\n}\n\nconst DropAreaContainer = ({ empty, children }: DropAreaContainerProps) => (\n    <div\n        className={cn([\n            \"wby-w-full wby-h-full wby-p-lg wby-flex wby-items-center wby-justify-center\",\n            empty ? \"wby-bg-neutral-base\" : \"wby-pt-xxl wby-bg-neutral-xstrong/20\"\n        ])}\n    >\n        {children}\n    </div>\n);\n\ninterface DropAreaBoxProps {\n    empty?: boolean;\n    children: React.ReactNode;\n}\n\nconst DropAreaBox = ({ children, empty }: DropAreaBoxProps) => (\n    <div\n        style={{\n            width: \"650px\",\n            height: \"400px\",\n            ...(empty\n                ? {\n                      backgroundImage: `url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='24' ry='24' stroke='%23E7E7E7FF' stroke-width='4' stroke-dasharray='12' stroke-dashoffset='35' stroke-linecap='square'/%3e%3c/svg%3e\")`\n                  }\n                : {})\n        }}\n        className={cn([\n            \"-wby-translate-y-xl\",\n            \"wby-flex wby-flex-col wby-items-center wby-justify-center wby-gap-lg\",\n            \"wby-p-lg wby-rounded-3xl\",\n            \"wby-bg-neutral-base\",\n            !empty && \"wby-shadow-md\"\n        ])}\n    >\n        {children}\n    </div>\n);\n\ninterface DropAreaContentProps {\n    empty?: boolean;\n    title?: string;\n    description?: string;\n}\n\nconst DropAreaContent = ({ title, description }: DropAreaContentProps) => (\n    <div className={\"wby-flex wby-flex-col wby-items-center wby-justify-center wby-gap-sm\"}>\n        <div className={\"wby-fill-neutral-strong\"}>\n            <UploadIcon width={75} height={75} />\n        </div>\n        <div className={\"wby-text-center\"}>\n            {title && (\n                <Heading level={4} className={\"wby-text-neutral-strong\"}>\n                    {title}\n                </Heading>\n            )}\n            {description && (\n                <Text as={\"div\"} style={{ width: \"300px\" }} className={\"wby-text-neutral-strong\"}>\n                    {description}\n                </Text>\n            )}\n        </div>\n    </div>\n);\n\ninterface DropAreaButtonProps {\n    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;\n}\n\nconst DropAreaButton = ({ onClick }: DropAreaButtonProps) => (\n    <div>\n        <Button onClick={onClick} text={\"Upload files\"} icon={<UploadFileIcon />} />\n    </div>\n);\n\nexport interface FileDropAreaProps {\n    empty?: boolean;\n    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;\n    title?: string;\n    description?: string;\n    icon?: React.ReactElement;\n}\n\nexport const FileDropArea = ({ title, description, empty, onClick }: FileDropAreaProps) => (\n    <DropAreaContainer empty={empty}>\n        <DropAreaBox empty={empty}>\n            <DropAreaContent title={title} description={description} />\n            {empty && <DropAreaButton onClick={onClick} />}\n        </DropAreaBox>\n    </DropAreaContainer>\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,IAAI,QAAQ,kBAAkB;AAC5D,SAASC,cAAc,IAAIC,cAAc,QAAQ,+BAA+B;AAChF,SAASD,cAAc,IAAIE,UAAU,QAAQ,gCAAgC;AAO7E,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAiC,CAAC,kBAClEV,KAAA,CAAAW,aAAA;EACIC,SAAS,EAAEV,EAAE,CAAC,CACV,6EAA6E,EAC7EO,KAAK,GAAG,qBAAqB,GAAG,sCAAsC,CACzE;AAAE,GAEFC,QACA,CACR;AAOD,MAAMG,WAAW,GAAGA,CAAC;EAAEH,QAAQ;EAAED;AAAwB,CAAC,kBACtDT,KAAA,CAAAW,aAAA;EACIG,KAAK,EAAE;IACHC,KAAK,EAAE,OAAO;IACdC,MAAM,EAAE,OAAO;IACf,IAAIP,KAAK,GACH;MACIQ,eAAe,EAAE;IACrB,CAAC,GACD,CAAC,CAAC;EACZ,CAAE;EACFL,SAAS,EAAEV,EAAE,CAAC,CACV,qBAAqB,EACrB,sEAAsE,EACtE,0BAA0B,EAC1B,qBAAqB,EACrB,CAACO,KAAK,IAAI,eAAe,CAC5B;AAAE,GAEFC,QACA,CACR;AAQD,MAAMQ,eAAe,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAkC,CAAC,kBACjEpB,KAAA,CAAAW,aAAA;EAAKC,SAAS,EAAE;AAAuE,gBACnFZ,KAAA,CAAAW,aAAA;EAAKC,SAAS,EAAE;AAA0B,gBACtCZ,KAAA,CAAAW,aAAA,CAACJ,UAAU;EAACQ,KAAK,EAAE,EAAG;EAACC,MAAM,EAAE;AAAG,CAAE,CACnC,CAAC,eACNhB,KAAA,CAAAW,aAAA;EAAKC,SAAS,EAAE;AAAkB,GAC7BO,KAAK,iBACFnB,KAAA,CAAAW,aAAA,CAACR,OAAO;EAACkB,KAAK,EAAE,CAAE;EAACT,SAAS,EAAE;AAA0B,GACnDO,KACI,CACZ,EACAC,WAAW,iBACRpB,KAAA,CAAAW,aAAA,CAACP,IAAI;EAACkB,EAAE,EAAE,KAAM;EAACR,KAAK,EAAE;IAAEC,KAAK,EAAE;EAAQ,CAAE;EAACH,SAAS,EAAE;AAA0B,GAC5EQ,WACC,CAET,CACJ,CACR;AAMD,MAAMG,cAAc,GAAGA,CAAC;EAAEC;AAA6B,CAAC,kBACpDxB,KAAA,CAAAW,aAAA,2BACIX,KAAA,CAAAW,aAAA,CAACV,MAAM;EAACuB,OAAO,EAAEA,OAAQ;EAACC,IAAI,EAAE,cAAe;EAACC,IAAI,eAAE1B,KAAA,CAAAW,aAAA,CAACL,cAAc,MAAE;AAAE,CAAE,CAC1E,CACR;AAUD,OAAO,MAAMqB,YAAY,GAAGA,CAAC;EAAER,KAAK;EAAEC,WAAW;EAAEX,KAAK;EAAEe;AAA2B,CAAC,kBAClFxB,KAAA,CAAAW,aAAA,CAACH,iBAAiB;EAACC,KAAK,EAAEA;AAAM,gBAC5BT,KAAA,CAAAW,aAAA,CAACE,WAAW;EAACJ,KAAK,EAAEA;AAAM,gBACtBT,KAAA,CAAAW,aAAA,CAACO,eAAe;EAACC,KAAK,EAAEA,KAAM;EAACC,WAAW,EAAEA;AAAY,CAAE,CAAC,EAC1DX,KAAK,iBAAIT,KAAA,CAAAW,aAAA,CAACY,cAAc;EAACC,OAAO,EAAEA;AAAQ,CAAE,CACpC,CACE,CACtB","ignoreList":[]}

package/components/FileDropArea/index.d.ts

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

package/components/FileDropArea/index.js

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

package/components/FileDropArea/index.js.map

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

package/components/FileDropPlaceholder/FileDropPlaceholder.d.ts

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

package/components/FileDropPlaceholder/FileDropPlaceholder.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { FileDropArea } from "../FileDropArea";
+export const FileDropPlaceholder = () => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-absolute wby-top-0 wby-left-0 wby-bottom-0 wby-right-0 wby-animate-in wby-fade-in wby-duration-300"
+  }, /*#__PURE__*/React.createElement(FileDropArea, {
+    title: "Drop files here",
+    description: "Upload files from your computer by dropping them here"
+  }));
+};
+
+//# sourceMappingURL=FileDropPlaceholder.js.map

package/components/FileDropPlaceholder/FileDropPlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FileDropArea","FileDropPlaceholder","createElement","className","title","description"],"sources":["FileDropPlaceholder.tsx"],"sourcesContent":["import React from \"react\";\nimport { FileDropArea } from \"../FileDropArea\";\n\nexport const FileDropPlaceholder = () => {\n    return (\n        <div\n            className={\n                \"wby-absolute wby-top-0 wby-left-0 wby-bottom-0 wby-right-0 wby-animate-in wby-fade-in wby-duration-300\"\n            }\n        >\n            <FileDropArea\n                title={\"Drop files here\"}\n                description={\"Upload files from your computer by dropping them here\"}\n            />\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY;AAErB,OAAO,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;EACrC,oBACIF,KAAA,CAAAG,aAAA;IACIC,SAAS,EACL;EACH,gBAEDJ,KAAA,CAAAG,aAAA,CAACF,YAAY;IACTI,KAAK,EAAE,iBAAkB;IACzBC,WAAW,EAAE;EAAwD,CACxE,CACA,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/FileDropPlaceholder/index.d.ts

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

package/components/FileDropPlaceholder/index.js

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

package/components/FileDropPlaceholder/index.js.map

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

package/components/Filters/Filters.d.ts

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

package/components/Filters/Filters.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { Filters as BaseFilters } from "@webiny/app-admin";
+import { useFileManagerView, useFileManagerViewConfig } from "../..";
+export const Filters = () => {
+  const {
+    showingFilters,
+    setFilters
+  } = useFileManagerView();
+  const {
+    browser
+  } = useFileManagerViewConfig();
+  const applyFilters = data => {
+    if (!Object.keys(data).length) {
+      return;
+    }
+    const convertedFilters = browser.filtersToWhere.reduce((data, converter) => converter(data), data);
+    setFilters(convertedFilters);
+  };
+  return /*#__PURE__*/React.createElement(BaseFilters, {
+    filters: browser.filters,
+    show: showingFilters,
+    onChange: applyFilters
+  });
+};
+
+//# sourceMappingURL=Filters.js.map

package/components/Filters/Filters.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Filters","BaseFilters","useFileManagerView","useFileManagerViewConfig","showingFilters","setFilters","browser","applyFilters","data","Object","keys","length","convertedFilters","filtersToWhere","reduce","converter","createElement","filters","show","onChange"],"sources":["Filters.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FiltersOnSubmit } from \"@webiny/app-admin\";\nimport { Filters as BaseFilters } from \"@webiny/app-admin\";\nimport { useFileManagerView, useFileManagerViewConfig } from \"~/index\";\n\nexport const Filters = () => {\n    const { showingFilters, setFilters } = useFileManagerView();\n    const { browser } = useFileManagerViewConfig();\n\n    const applyFilters: FiltersOnSubmit = data => {\n        if (!Object.keys(data).length) {\n            return;\n        }\n\n        const convertedFilters = browser.filtersToWhere.reduce(\n            (data, converter) => converter(data),\n            data\n        );\n        setFilters(convertedFilters);\n    };\n\n    return <BaseFilters filters={browser.filters} show={showingFilters} onChange={applyFilters} />;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,OAAO,IAAIC,WAAW,QAAQ,mBAAmB;AAC1D,SAASC,kBAAkB,EAAEC,wBAAwB;AAErD,OAAO,MAAMH,OAAO,GAAGA,CAAA,KAAM;EACzB,MAAM;IAAEI,cAAc;IAAEC;EAAW,CAAC,GAAGH,kBAAkB,CAAC,CAAC;EAC3D,MAAM;IAAEI;EAAQ,CAAC,GAAGH,wBAAwB,CAAC,CAAC;EAE9C,MAAMI,YAA6B,GAAGC,IAAI,IAAI;IAC1C,IAAI,CAACC,MAAM,CAACC,IAAI,CAACF,IAAI,CAAC,CAACG,MAAM,EAAE;MAC3B;IACJ;IAEA,MAAMC,gBAAgB,GAAGN,OAAO,CAACO,cAAc,CAACC,MAAM,CAClD,CAACN,IAAI,EAAEO,SAAS,KAAKA,SAAS,CAACP,IAAI,CAAC,EACpCA,IACJ,CAAC;IACDH,UAAU,CAACO,gBAAgB,CAAC;EAChC,CAAC;EAED,oBAAOb,KAAA,CAAAiB,aAAA,CAACf,WAAW;IAACgB,OAAO,EAAEX,OAAO,CAACW,OAAQ;IAACC,IAAI,EAAEd,cAAe;IAACe,QAAQ,EAAEZ;EAAa,CAAE,CAAC;AAClG,CAAC","ignoreList":[]}

package/components/Filters/index.d.ts

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

package/components/Filters/index.js

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

package/components/Filters/index.js.map

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

package/components/Grid/ActionButton.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface ActionButtonProps {
+    icon: JSX.Element;
+    label?: string;
+    onAction: () => void;
+    "data-testid"?: string;
+    disabled?: boolean;
+}
+export declare const ActionButton: ({ icon, label, onAction, disabled, ...props }: ActionButtonProps) => React.JSX.Element;

package/components/Grid/ActionButton.js

@@ -0,0 +1,28 @@
+import React, { useCallback } from "react";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
+export const ActionButton = ({
+  icon,
+  label,
+  onAction,
+  disabled,
+  ...props
+}) => {
+  const onClick = useCallback(event => {
+    // Prevent the click event from propagating to the grid item component.
+    event.stopPropagation();
+    onAction && onAction();
+  }, [onAction]);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: label ?? "Custom action",
+    trigger: /*#__PURE__*/React.createElement(IconButton, {
+      variant: "tertiary",
+      size: "sm",
+      icon: icon,
+      onClick: onClick,
+      disabled: disabled,
+      "data-testid": props["data-testid"]
+    })
+  });
+};
+
+//# sourceMappingURL=ActionButton.js.map

package/components/Grid/ActionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","IconButton","Tooltip","ActionButton","icon","label","onAction","disabled","props","onClick","event","stopPropagation","createElement","content","trigger","variant","size"],"sources":["ActionButton.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { IconButton, Tooltip } from \"@webiny/admin-ui\";\n\nexport interface ActionButtonProps {\n    icon: JSX.Element;\n    label?: string;\n    onAction: () => void;\n    \"data-testid\"?: string;\n    disabled?: boolean;\n}\n\nexport const ActionButton = ({ icon, label, onAction, disabled, ...props }: ActionButtonProps) => {\n    const onClick = useCallback(\n        (event: React.MouseEvent<HTMLButtonElement>) => {\n            // Prevent the click event from propagating to the grid item component.\n            event.stopPropagation();\n            onAction && onAction();\n        },\n        [onAction]\n    );\n\n    return (\n        <Tooltip\n            content={label ?? \"Custom action\"}\n            trigger={\n                <IconButton\n                    variant={\"tertiary\"}\n                    size={\"sm\"}\n                    icon={icon}\n                    onClick={onClick}\n                    disabled={disabled}\n                    data-testid={props[\"data-testid\"]}\n                />\n            }\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,UAAU,EAAEC,OAAO,QAAQ,kBAAkB;AAUtD,OAAO,MAAMC,YAAY,GAAGA,CAAC;EAAEC,IAAI;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;AAAyB,CAAC,KAAK;EAC9F,MAAMC,OAAO,GAAGT,WAAW,CACtBU,KAA0C,IAAK;IAC5C;IACAA,KAAK,CAACC,eAAe,CAAC,CAAC;IACvBL,QAAQ,IAAIA,QAAQ,CAAC,CAAC;EAC1B,CAAC,EACD,CAACA,QAAQ,CACb,CAAC;EAED,oBACIP,KAAA,CAAAa,aAAA,CAACV,OAAO;IACJW,OAAO,EAAER,KAAK,IAAI,eAAgB;IAClCS,OAAO,eACHf,KAAA,CAAAa,aAAA,CAACX,UAAU;MACPc,OAAO,EAAE,UAAW;MACpBC,IAAI,EAAE,IAAK;MACXZ,IAAI,EAAEA,IAAK;MACXK,OAAO,EAAEA,OAAQ;MACjBF,QAAQ,EAAEA,QAAS;MACnB,eAAaC,KAAK,CAAC,aAAa;IAAE,CACrC;EACJ,CACJ,CAAC;AAEV,CAAC","ignoreList":[]}

package/components/Grid/File.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import type { FileItem } from "@webiny/app-admin/types";
+export interface FileProps {
+    file: FileItem;
+    selected: boolean;
+    fileBody?: JSX.Element;
+    onSelect?: (event?: React.MouseEvent) => void;
+    onClick?: (event?: React.MouseEvent) => void;
+    multiple?: boolean;
+    children: React.ReactNode;
+}
+export type DefaultFileControlsProps = Pick<FileProps, "selected" | "onSelect">;
+export type DefaultFileBodyProps = Pick<FileProps, "selected" | "onSelect" | "children">;
+export declare const File: (({ file, fileBody, selected, onSelect, children }: FileProps) => React.JSX.Element) & {
+    original: ({ file, fileBody, selected, onSelect, children }: FileProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ file, fileBody, selected, onSelect, children }: FileProps) => React.JSX.Element) & {
+        original: ({ file, fileBody, selected, onSelect, children }: FileProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<(({ file, fileBody, selected, onSelect, children }: FileProps) => React.JSX.Element) & {
+        original: ({ file, fileBody, selected, onSelect, children }: FileProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};

package/components/Grid/File.js

@@ -0,0 +1,89 @@
+import React, { Fragment } from "react";
+/**
+ * Package react-lazy-load has no types.
+ */
+// @ts-expect-error
+import LazyLoad from "react-lazy-load";
+import { makeDecoratable } from "@webiny/app-admin";
+import { Text, TimeAgo, cn, CheckboxPrimitive } from "@webiny/admin-ui";
+import { useFileManagerViewConfig } from "../../modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig";
+const DefaultFileControls = ({
+  onSelect,
+  selected
+}) => {
+  const {
+    browser
+  } = useFileManagerViewConfig();
+  const {
+    itemActions
+  } = browser.grid;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, onSelect ? /*#__PURE__*/React.createElement("div", {
+    className: cn(["wby-p-xs wby-rounded-md", "wby-bg-neutral-base/30", "wby-absolute wby-top-sm wby-left-sm", selected ? "wby-visible" : "wby-invisible group-hover:wby-visible"])
+  }, /*#__PURE__*/React.createElement(CheckboxPrimitive, {
+    onClick: onSelect,
+    checked: selected,
+    onChange: () => void 0
+  })) : null, /*#__PURE__*/React.createElement("div", {
+    className: cn(["wby-invisible group-hover:wby-visible", "wby-flex wby-items-center wby-gap-xxs", "wby-p-xs", "wby-absolute wby-top-xs-plus wby-right-xs-plus"])
+  }, itemActions.map(action => {
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: action.name
+    }, action.element);
+  })));
+};
+const DefaultFileBody = ({
+  selected,
+  onSelect,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: onSelect,
+    className: cn(["wby-relative", onSelect ? "wby-cursor-pointer" : "wby-cursor-default"])
+  }, /*#__PURE__*/React.createElement(DefaultFileControls, {
+    selected: selected,
+    onSelect: onSelect
+  }), /*#__PURE__*/React.createElement(LazyLoad, {
+    height: 150,
+    offsetVertical: 300,
+    "data-testid": "fm-file-wrapper-file-preview",
+    className: cn(["wby-bg-neutral-muted", "wby-flex wby-items-center wby-justify-center", "wby-text-neutral-strong wby-text-sm"])
+  }, children));
+};
+const DefaultFileLabel = ({
+  file
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-px-md wby-py-sm-extra",
+    "data-testid": "fm-file-wrapper-file-label"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "sm",
+    as: "div",
+    className: "wby-truncate wby-text-neutral-primary"
+  }, file.name), /*#__PURE__*/React.createElement(Text, {
+    size: "sm",
+    as: "div",
+    className: "wby-truncate wby-text-neutral-dimmed"
+  }, file.type, " ", " // ", " ", /*#__PURE__*/React.createElement(TimeAgo, {
+    datetime: file.createdOn
+  })));
+};
+export const File = makeDecoratable("File", ({
+  file,
+  fileBody,
+  selected,
+  onSelect,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn(["wby-group", "wby-bg-neutral-base wby-rounded-lg", "wby-shadow-sm hover:wby-shadow-lg", "wby-border-sm wby-border-solid wby-border-neutral-base hover:wby-border-neutral-dimmed-darker", selected && "wby-ring-md wby-ring-primary-strong", "wby-transition-shadow wby-duration-250 wby-ease-in-out", "wby-overflow-hidden"]),
+    "data-testid": "fm-list-wrapper-file",
+    "data-file-id": file.id
+  }, fileBody ?? /*#__PURE__*/React.createElement(DefaultFileBody, {
+    selected: selected,
+    onSelect: onSelect
+  }, children), /*#__PURE__*/React.createElement(DefaultFileLabel, {
+    file: file
+  }));
+});
+
+//# sourceMappingURL=File.js.map

package/components/Grid/File.js.map

@@ -0,0 +1 @@
+{"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","offsetVertical","DefaultFileLabel","file","size","as","type","datetime","createdOn","File","fileBody","id"],"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 { makeDecoratable } from \"@webiny/app-admin\";\nimport { Text, TimeAgo, cn, CheckboxPrimitive } from \"@webiny/admin-ui\";\nimport { useFileManagerViewConfig } from \"~/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig\";\nimport type { FileItem } from \"@webiny/app-admin/types\";\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                        \"wby-p-xs wby-rounded-md\",\n                        \"wby-bg-neutral-base/30\",\n                        \"wby-absolute wby-top-sm wby-left-sm\",\n                        selected ? \"wby-visible\" : \"wby-invisible group-hover:wby-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                    \"wby-invisible group-hover:wby-visible\",\n                    \"wby-flex wby-items-center wby-gap-xxs\",\n                    \"wby-p-xs\",\n                    \"wby-absolute wby-top-xs-plus wby-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([\"wby-relative\", onSelect ? \"wby-cursor-pointer\" : \"wby-cursor-default\"])}\n        >\n            <DefaultFileControls selected={selected} onSelect={onSelect} />\n            <LazyLoad\n                height={150}\n                offsetVertical={300}\n                data-testid={\"fm-file-wrapper-file-preview\"}\n                className={cn([\n                    \"wby-bg-neutral-muted\",\n                    \"wby-flex wby-items-center wby-justify-center\",\n                    \"wby-text-neutral-strong wby-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={\"wby-px-md wby-py-sm-extra\"} data-testid={\"fm-file-wrapper-file-label\"}>\n            <Text size={\"sm\"} as={\"div\"} className={\"wby-truncate wby-text-neutral-primary\"}>\n                {file.name}\n            </Text>\n            <Text size={\"sm\"} as={\"div\"} className={\"wby-truncate wby-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                    \"wby-group\",\n                    \"wby-bg-neutral-base wby-rounded-lg\",\n                    \"wby-shadow-sm hover:wby-shadow-lg\",\n                    \"wby-border-sm wby-border-solid wby-border-neutral-base hover:wby-border-neutral-dimmed-darker\",\n                    selected && \"wby-ring-md wby-ring-primary-strong\",\n                    \"wby-transition-shadow wby-duration-250 wby-ease-in-out\",\n                    \"wby-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":"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","ignoreList":[]}

package/components/Grid/Grid.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { FolderItem } from "@webiny/app-aco/types";
+import type { FileItem } from "@webiny/app-admin/types";
+interface GridProps {
+    records: FileItem[];
+    folders: FolderItem[];
+    loading?: boolean;
+    onFolderClick: (id: string) => void;
+    selected: FileItem[];
+    multiple?: boolean;
+    toggleSelected: (file: FileItem) => void;
+    deselectAll: () => void;
+    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, displaySubFolders }: GridProps) => React.JSX.Element;
+export {};

package/components/Grid/Grid.js

@@ -0,0 +1,69 @@
+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";
+import { FileProvider } from "../../contexts/FileProvider";
+import { Thumbnail } from "../Thumbnail";
+import { File } from "./File";
+const t = i18n.ns("app-admin/file-manager/components/grid");
+export const Grid = ({
+  folders,
+  records,
+  loading,
+  onFolderClick,
+  selected,
+  onChange,
+  onClose,
+  toggleSelected,
+  deselectAll,
+  multiple,
+  hasOnSelectCallback,
+  displaySubFolders = true
+}) => {
+  if (loading) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "wby-relative wby-size-full"
+    }, /*#__PURE__*/React.createElement(OverlayLoader, {
+      text: t`Loading files...`,
+      size: "lg"
+    }));
+  }
+  const onSelect = useMemo(() => {
+    if (!onChange) {
+      return undefined;
+    }
+    return record => event => {
+      if (event) {
+        event.stopPropagation();
+      }
+      if (!hasOnSelectCallback || multiple) {
+        toggleSelected(record);
+        return;
+      }
+      onChange(record);
+      onClose && onClose();
+    };
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn(["wby-p-lg", "wby-grid wby-gap-md wby-grid"]),
+    style: {
+      gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))"
+    },
+    onClick: deselectAll
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, displaySubFolders && folders.map(folder => /*#__PURE__*/React.createElement(FolderProvider, {
+    folder: folder,
+    key: folder.id
+  }, /*#__PURE__*/React.createElement(FolderGridItem, {
+    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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","cn","OverlayLoader","FolderGridItem","FolderProvider","i18n","FileProvider","Thumbnail","File","t","ns","Grid","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 { FolderGridItem, FolderProvider } from \"@webiny/app-aco\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport type { FolderItem } from \"@webiny/app-aco/types\";\nimport type { FileItem } from \"@webiny/app-admin/types\";\nimport { FileProvider } from \"~/contexts/FileProvider\";\nimport { Thumbnail } from \"../Thumbnail\";\nimport { File } from \"./File\";\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    displaySubFolders?: 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    displaySubFolders = true\n}: GridProps) => {\n    if (loading) {\n        return (\n            <div className={\"wby-relative wby-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([\"wby-p-lg\", \"wby-grid wby-gap-md wby-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 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,SAASC,cAAc,EAAEC,cAAc,QAAQ,iBAAiB;AAChE,SAASC,IAAI,QAAQ,kBAAkB;AAGvC,SAASC,YAAY;AACrB,SAASC,SAAS;AAClB,SAASC,IAAI;AAEb,MAAMC,CAAC,GAAGJ,IAAI,CAACK,EAAE,CAAC,wCAAwC,CAAC;AAiB3D,OAAO,MAAMC,IAAI,GAAGA,CAAC;EACjBC,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,oBACIf,KAAA,CAAAyB,aAAA;MAAKC,SAAS,EAAE;IAA6B,gBACzC1B,KAAA,CAAAyB,aAAA,CAACtB,aAAa;MAACwB,IAAI,EAAEjB,CAAC,kBAAmB;MAACkB,IAAI,EAAE;IAAK,CAAE,CACtD,CAAC;EAEd;EAEA,MAAMC,QAAQ,GAAG5B,OAAO,CAAC,MAAM;IAC3B,IAAI,CAACiB,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,oBACIlB,KAAA,CAAAyB,aAAA;IACIC,SAAS,EAAExB,EAAE,CAAC,CAAC,UAAU,EAAE,8BAA8B,CAAC,CAAE;IAC5DgC,KAAK,EAAE;MACHC,mBAAmB,EAAE;IACzB,CAAE;IACFC,OAAO,EAAEf;EAAY,gBAErBrB,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAAqC,QAAA,QACKb,iBAAiB,IACdX,OAAO,CAACyB,GAAG,CAACC,MAAM,iBACdvC,KAAA,CAAAyB,aAAA,CAACpB,cAAc;IAACkC,MAAM,EAAEA,MAAO;IAACC,GAAG,EAAED,MAAM,CAACE;EAAG,gBAC3CzC,KAAA,CAAAyB,aAAA,CAACrB,cAAc;IAACgC,OAAO,EAAEpB;EAAc,CAAE,CAC7B,CACnB,CAAC,EACLF,OAAO,CAACwB,GAAG,CAACP,MAAM,iBACf/B,KAAA,CAAAyB,aAAA,CAAClB,YAAY;IAACmC,IAAI,EAAEX,MAAO;IAACS,GAAG,EAAET,MAAM,CAACU;EAAG,gBACvCzC,KAAA,CAAAyB,aAAA,CAAChB,IAAI;IACDiC,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,gBAElD9B,KAAA,CAAAyB,aAAA,CAACjB,SAAS,MAAE,CACV,CACI,CACjB,CACH,CACD,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/Grid/Thumbnail.d.ts

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

package/components/Grid/Thumbnail.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { useFile } from "../../hooks/useFile";
+import { useFileManagerViewConfig } from "../..";
+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

@@ -0,0 +1 @@
+{"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\";\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,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

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

package/components/Grid/index.js

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

package/components/Grid/index.js.map

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

package/components/Header/Actions.d.ts

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