@webiny/app-file-manager 6.3.0 → 6.4.0-beta.0

package/presentation/FileList/components/Filters/TagsFilter.js

@@ -0,0 +1,86 @@
+import react, { useCallback, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Select, Tag, Text } from "@webiny/admin-ui";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { useFileManagerPresenter } from "../../FileManagerPresenterProvider.js";
+const TagsFilter_t = i18n.ns("app-file-manager/presentation/tags-filter");
+const FILTER_MODE_OPTIONS = [
+    {
+        value: "OR",
+        label: "match any"
+    },
+    {
+        value: "AND",
+        label: "match all"
+    }
+];
+const TagsFilter_TagsFilter = observer(function() {
+    const { vm, actions } = useFileManagerPresenter();
+    const [filterMode, setFilterMode] = useState("OR");
+    const activeTags = vm.list.filters["tags"] ?? [];
+    const toggleTag = useCallback((tag)=>{
+        const updated = activeTags.includes(tag) ? activeTags.filter((t)=>t !== tag) : [
+            ...activeTags,
+            tag
+        ];
+        if (updated.length > 0) {
+            actions.filter.set("tags", updated);
+            actions.filter.set("tags_rule", filterMode);
+        } else {
+            actions.filter.clear("tags");
+            actions.filter.clear("tags_rule");
+        }
+    }, [
+        activeTags,
+        actions.filter,
+        filterMode
+    ]);
+    const handleModeChange = useCallback((mode)=>{
+        const typedMode = mode;
+        setFilterMode(typedMode);
+        if (activeTags.length > 0) actions.filter.set("tags_rule", typedMode);
+    }, [
+        activeTags,
+        actions.filter
+    ]);
+    if (0 === vm.tags.length) return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-dimmed"
+    }, TagsFilter_t`No tags found.`));
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        className: "font-semibold"
+    }, TagsFilter_t`Filter by tag`), vm.tags.length > 1 && /*#__PURE__*/ react.createElement(Select, {
+        disabled: activeTags.length < 2,
+        size: "md",
+        variant: "secondary",
+        value: filterMode,
+        onChange: handleModeChange,
+        options: FILTER_MODE_OPTIONS,
+        displayResetAction: false,
+        "data-testid": "fm-tags-filter-mode"
+    }), activeTags.length > 0 && /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-wrap gap-xs",
+        "data-testid": "fm-tags-filter-active"
+    }, activeTags.map((tag)=>/*#__PURE__*/ react.createElement(Tag, {
+            key: tag,
+            variant: "accent",
+            content: tag,
+            onDismiss: ()=>toggleTag(tag)
+        }))), /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm",
+        "data-testid": "fm-tags-filter-list"
+    }, vm.tags.map((tagItem)=>/*#__PURE__*/ react.createElement(Tag, {
+            key: tagItem.tag,
+            variant: activeTags.includes(tagItem.tag) ? "accent" : "neutral-muted",
+            content: tagItem.tag,
+            onClick: ()=>toggleTag(tagItem.tag),
+            onDismiss: activeTags.includes(tagItem.tag) ? ()=>toggleTag(tagItem.tag) : void 0
+        }))));
+});
+export { TagsFilter_TagsFilter as TagsFilter };
+
+//# sourceMappingURL=TagsFilter.js.map

package/presentation/FileList/components/Filters/TagsFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/FileList/components/Filters/TagsFilter.js","sources":["../../../../../src/presentation/FileList/components/Filters/TagsFilter.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Select, Tag as AdminTag, Text } from \"@webiny/admin-ui\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { useFileManagerPresenter } from \"../../FileManagerPresenterProvider.js\";\n\nconst t = i18n.ns(\"app-file-manager/presentation/tags-filter\");\n\nconst FILTER_MODE_OPTIONS = [\n    { value: \"OR\", label: \"match any\" },\n    { value: \"AND\", label: \"match all\" }\n];\n\n/**\n * Tags filter component wired to the FileListPresenter.\n * Reads available tags from vm.tags, supports AND/OR filter modes,\n * and dispatches changes via presenter.actions.filter.set(\"tags\", ...).\n */\nexport const TagsFilter = observer(function TagsFilter() {\n    const { vm, actions } = useFileManagerPresenter();\n    const [filterMode, setFilterMode] = useState<\"AND\" | \"OR\">(\"OR\");\n\n    // Read the current active tags from the filter state.\n    const activeTags = (vm.list.filters[\"tags\"] as string[] | undefined) ?? [];\n\n    // Toggle a tag in the active tags list.\n    const toggleTag = useCallback(\n        (tag: string) => {\n            const updated = activeTags.includes(tag)\n                ? activeTags.filter(t => t !== tag)\n                : [...activeTags, tag];\n\n            if (updated.length > 0) {\n                actions.filter.set(\"tags\", updated);\n                // Store the filter mode alongside the tags.\n                actions.filter.set(\"tags_rule\", filterMode);\n            } else {\n                actions.filter.clear(\"tags\");\n                actions.filter.clear(\"tags_rule\");\n            }\n        },\n        [activeTags, actions.filter, filterMode]\n    );\n\n    // Handle filter mode change.\n    const handleModeChange = useCallback(\n        (mode: string) => {\n            const typedMode = mode as \"AND\" | \"OR\";\n            setFilterMode(typedMode);\n            // Re-apply the filter with the new mode if tags are active.\n            if (activeTags.length > 0) {\n                actions.filter.set(\"tags_rule\", typedMode);\n            }\n        },\n        [activeTags, actions.filter]\n    );\n\n    if (vm.tags.length === 0) {\n        return (\n            <div className={\"flex flex-col gap-sm\"}>\n                <Text size={\"sm\"} className={\"text-neutral-dimmed\"}>\n                    {t`No tags found.`}\n                </Text>\n            </div>\n        );\n    }\n\n    return (\n        <div className={\"flex flex-col gap-sm\"}>\n            <Text className={\"font-semibold\"}>{t`Filter by tag`}</Text>\n            {vm.tags.length > 1 && (\n                <Select\n                    disabled={activeTags.length < 2}\n                    size={\"md\"}\n                    variant={\"secondary\"}\n                    value={filterMode}\n                    onChange={handleModeChange}\n                    options={FILTER_MODE_OPTIONS}\n                    displayResetAction={false}\n                    data-testid={\"fm-tags-filter-mode\"}\n                />\n            )}\n            {activeTags.length > 0 && (\n                <div className={\"flex flex-wrap gap-xs\"} data-testid={\"fm-tags-filter-active\"}>\n                    {activeTags.map(tag => (\n                        <AdminTag\n                            key={tag}\n                            variant={\"accent\"}\n                            content={tag}\n                            onDismiss={() => toggleTag(tag)}\n                        />\n                    ))}\n                </div>\n            )}\n            <div className={\"flex flex-col gap-sm\"} data-testid={\"fm-tags-filter-list\"}>\n                {vm.tags.map(tagItem => (\n                    <AdminTag\n                        key={tagItem.tag}\n                        variant={activeTags.includes(tagItem.tag) ? \"accent\" : \"neutral-muted\"}\n                        content={tagItem.tag}\n                        onClick={() => toggleTag(tagItem.tag)}\n                        onDismiss={\n                            activeTags.includes(tagItem.tag)\n                                ? () => toggleTag(tagItem.tag)\n                                : undefined\n                        }\n                    />\n                ))}\n            </div>\n        </div>\n    );\n});\n"],"names":["t","i18n","FILTER_MODE_OPTIONS","TagsFilter","observer","vm","actions","useFileManagerPresenter","filterMode","setFilterMode","useState","activeTags","toggleTag","useCallback","tag","updated","handleModeChange","mode","typedMode","Text","Select","AdminTag","tagItem","undefined"],"mappings":";;;;;AAMA,MAAMA,eAAIC,KAAK,EAAE,CAAC;AAElB,MAAMC,sBAAsB;IACxB;QAAE,OAAO;QAAM,OAAO;IAAY;IAClC;QAAE,OAAO;QAAO,OAAO;IAAY;CACtC;AAOM,MAAMC,wBAAaC,SAAS;IAC/B,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAE,GAAGC;IACxB,MAAM,CAACC,YAAYC,cAAc,GAAGC,SAAuB;IAG3D,MAAMC,aAAcN,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,IAA6B,EAAE;IAG1E,MAAMO,YAAYC,YACd,CAACC;QACG,MAAMC,UAAUJ,WAAW,QAAQ,CAACG,OAC9BH,WAAW,MAAM,CAACX,CAAAA,IAAKA,MAAMc,OAC7B;eAAIH;YAAYG;SAAI;QAE1B,IAAIC,QAAQ,MAAM,GAAG,GAAG;YACpBT,QAAQ,MAAM,CAAC,GAAG,CAAC,QAAQS;YAE3BT,QAAQ,MAAM,CAAC,GAAG,CAAC,aAAaE;QACpC,OAAO;YACHF,QAAQ,MAAM,CAAC,KAAK,CAAC;YACrBA,QAAQ,MAAM,CAAC,KAAK,CAAC;QACzB;IACJ,GACA;QAACK;QAAYL,QAAQ,MAAM;QAAEE;KAAW;IAI5C,MAAMQ,mBAAmBH,YACrB,CAACI;QACG,MAAMC,YAAYD;QAClBR,cAAcS;QAEd,IAAIP,WAAW,MAAM,GAAG,GACpBL,QAAQ,MAAM,CAAC,GAAG,CAAC,aAAaY;IAExC,GACA;QAACP;QAAYL,QAAQ,MAAM;KAAC;IAGhC,IAAID,AAAmB,MAAnBA,GAAG,IAAI,CAAC,MAAM,EACd,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACc,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBnB,YAAC,CAAC,cAAc,CAAC;IAMlC,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACmB,MAAIA;QAAC,WAAW;OAAkBnB,YAAC,CAAC,aAAa,CAAC,GAClDK,GAAG,IAAI,CAAC,MAAM,GAAG,KAAK,WAAL,GACd,oBAACe,QAAMA;QACH,UAAUT,WAAW,MAAM,GAAG;QAC9B,MAAM;QACN,SAAS;QACT,OAAOH;QACP,UAAUQ;QACV,SAASd;QACT,oBAAoB;QACpB,eAAa;QAGpBS,WAAW,MAAM,GAAG,KAAK,WAAL,GACjB,oBAAC;QAAI,WAAW;QAAyB,eAAa;OACjDA,WAAW,GAAG,CAACG,CAAAA,MAAAA,WAAAA,GACZ,oBAACO,KAAQA;YACL,KAAKP;YACL,SAAS;YACT,SAASA;YACT,WAAW,IAAMF,UAAUE;4BAK3C,oBAAC;QAAI,WAAW;QAAwB,eAAa;OAChDT,GAAG,IAAI,CAAC,GAAG,CAACiB,CAAAA,UAAAA,WAAAA,GACT,oBAACD,KAAQA;YACL,KAAKC,QAAQ,GAAG;YAChB,SAASX,WAAW,QAAQ,CAACW,QAAQ,GAAG,IAAI,WAAW;YACvD,SAASA,QAAQ,GAAG;YACpB,SAAS,IAAMV,UAAUU,QAAQ,GAAG;YACpC,WACIX,WAAW,QAAQ,CAACW,QAAQ,GAAG,IACzB,IAAMV,UAAUU,QAAQ,GAAG,IAC3BC;;AAOlC"}

package/presentation/FileList/components/Filters/TypeFilter.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+/**
+ * File type filter component wired to the FileListPresenter.
+ * Sets the "type" filter via presenter.actions.filter.set/clear.
+ */
+export declare const TypeFilter: (() => React.JSX.Element) & {
+    displayName: string;
+};

package/presentation/FileList/components/Filters/TypeFilter.js

@@ -0,0 +1,46 @@
+import react, { useCallback } from "react";
+import { observer } from "mobx-react-lite";
+import { Select } from "@webiny/admin-ui";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { useFileManagerPresenter } from "../../FileManagerPresenterProvider.js";
+const t = i18n.ns("app-file-manager/presentation/type-filter");
+const TYPE_OPTIONS = [
+    {
+        label: t`All`,
+        value: ""
+    },
+    {
+        label: t`Images`,
+        value: "image/"
+    },
+    {
+        label: t`Videos`,
+        value: "video/"
+    },
+    {
+        label: t`Documents`,
+        value: "application/"
+    }
+];
+const TypeFilter_TypeFilter = observer(function() {
+    const { vm, actions } = useFileManagerPresenter();
+    const currentValue = vm.list.filters["type"] ?? "";
+    const handleChange = useCallback((value)=>{
+        if (value) actions.filter.set("type", value);
+        else actions.filter.clear("type");
+    }, [
+        actions.filter
+    ]);
+    return /*#__PURE__*/ react.createElement(Select, {
+        value: currentValue,
+        onChange: handleChange,
+        options: TYPE_OPTIONS,
+        placeholder: t`Filter by type`,
+        size: "md",
+        "data-testid": "fm-type-filter",
+        displayResetAction: false
+    });
+});
+export { TypeFilter_TypeFilter as TypeFilter };
+
+//# sourceMappingURL=TypeFilter.js.map

package/presentation/FileList/components/Filters/TypeFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/FileList/components/Filters/TypeFilter.js","sources":["../../../../../src/presentation/FileList/components/Filters/TypeFilter.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Select } from \"@webiny/admin-ui\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { useFileManagerPresenter } from \"../../FileManagerPresenterProvider.js\";\n\nconst t = i18n.ns(\"app-file-manager/presentation/type-filter\");\n\nconst TYPE_OPTIONS = [\n    { label: t`All`, value: \"\" },\n    { label: t`Images`, value: \"image/\" },\n    { label: t`Videos`, value: \"video/\" },\n    { label: t`Documents`, value: \"application/\" }\n];\n\n/**\n * File type filter component wired to the FileListPresenter.\n * Sets the \"type\" filter via presenter.actions.filter.set/clear.\n */\nexport const TypeFilter = observer(function TypeFilter() {\n    const { vm, actions } = useFileManagerPresenter();\n\n    // Read the current type filter value.\n    const currentValue = (vm.list.filters[\"type\"] as string) ?? \"\";\n\n    const handleChange = useCallback(\n        (value: string) => {\n            if (value) {\n                actions.filter.set(\"type\", value);\n            } else {\n                actions.filter.clear(\"type\");\n            }\n        },\n        [actions.filter]\n    );\n\n    return (\n        <Select\n            value={currentValue}\n            onChange={handleChange}\n            options={TYPE_OPTIONS}\n            placeholder={t`Filter by type`}\n            size={\"md\"}\n            data-testid={\"fm-type-filter\"}\n            displayResetAction={false}\n        />\n    );\n});\n"],"names":["t","i18n","TYPE_OPTIONS","TypeFilter","observer","vm","actions","useFileManagerPresenter","currentValue","handleChange","useCallback","value","Select"],"mappings":";;;;;AAMA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAElB,MAAMC,eAAe;IACjB;QAAE,OAAOF,CAAC,CAAC,GAAG,CAAC;QAAE,OAAO;IAAG;IAC3B;QAAE,OAAOA,CAAC,CAAC,MAAM,CAAC;QAAE,OAAO;IAAS;IACpC;QAAE,OAAOA,CAAC,CAAC,MAAM,CAAC;QAAE,OAAO;IAAS;IACpC;QAAE,OAAOA,CAAC,CAAC,SAAS,CAAC;QAAE,OAAO;IAAe;CAChD;AAMM,MAAMG,wBAAaC,SAAS;IAC/B,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAE,GAAGC;IAGxB,MAAMC,eAAgBH,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,IAAe;IAE5D,MAAMI,eAAeC,YACjB,CAACC;QACG,IAAIA,OACAL,QAAQ,MAAM,CAAC,GAAG,CAAC,QAAQK;aAE3BL,QAAQ,MAAM,CAAC,KAAK,CAAC;IAE7B,GACA;QAACA,QAAQ,MAAM;KAAC;IAGpB,OAAO,WAAP,GACI,oBAACM,QAAMA;QACH,OAAOJ;QACP,UAAUC;QACV,SAASP;QACT,aAAaF,CAAC,CAAC,cAAc,CAAC;QAC9B,MAAM;QACN,eAAa;QACb,oBAAoB;;AAGhC"}

package/presentation/FileList/components/Filters/index.d.ts

@@ -0,0 +1,3 @@
+export { TypeFilter } from "./TypeFilter.js";
+export { TagsFilter } from "./TagsFilter.js";
+export { SubFoldersToggle } from "./SubFoldersToggle.js";

package/presentation/FileList/components/Filters/index.js

@@ -0,0 +1,3 @@
+export { TypeFilter } from "./TypeFilter.js";
+export { TagsFilter } from "./TagsFilter.js";
+export { SubFoldersToggle } from "./SubFoldersToggle.js";

package/presentation/FileList/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/presentation/FileList/components/Grid/ActionButton.js

@@ -0,0 +1,24 @@
+import react, { useCallback } from "react";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
+const ActionButton = ({ icon, label, onAction, disabled, ...props })=>{
+    const onClick = useCallback((event)=>{
+        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"]
+        })
+    });
+};
+export { ActionButton };
+
+//# sourceMappingURL=ActionButton.js.map

package/presentation/FileList/components/Grid/ActionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/FileList/components/Grid/ActionButton.js","sources":["../../../../../src/presentation/FileList/components/Grid/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"],"names":["ActionButton","icon","label","onAction","disabled","props","onClick","useCallback","event","Tooltip","IconButton"],"mappings":";;AAWO,MAAMA,eAAe,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGC,OAA0B;IACzF,MAAMC,UAAUC,YACZ,CAACC;QAEGA,MAAM,eAAe;QACrBL,YAAYA;IAChB,GACA;QAACA;KAAS;IAGd,OAAO,WAAP,GACI,oBAACM,SAAOA;QACJ,SAASP,SAAS;QAClB,uBACI,oBAACQ,YAAUA;YACP,SAAS;YACT,MAAM;YACN,MAAMT;YACN,SAASK;YACT,UAAUF;YACV,eAAaC,KAAK,CAAC,cAAc;;;AAKrD"}

package/presentation/FileList/components/Grid/File.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import type { FileItem } from "../../../../domain/types.js";
+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/presentation/FileList/components/Grid/File.js

@@ -0,0 +1,84 @@
+import react, { Fragment } from "react";
+import react_lazy_load from "react-lazy-load";
+import { makeDecoratable } from "@webiny/app-admin";
+import { CheckboxPrimitive, Text, TimeAgo, cn } from "@webiny/admin-ui";
+import { useFileManagerConfig } from "../../../config/FileManagerViewConfig.js";
+const DefaultFileControls = ({ onSelect, selected })=>{
+    const { browser } = useFileManagerConfig();
+    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)=>/*#__PURE__*/ react.createElement(Fragment, {
+            key: action.name
+        }, action.element))));
+};
+const DefaultFileBody = ({ selected, onSelect, children })=>/*#__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(react_lazy_load, {
+        height: 150,
+        offset: 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 })=>/*#__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
+    })));
+const File = makeDecoratable("File", ({ file, fileBody, selected, onSelect, children })=>/*#__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
+    })));
+export { File };
+
+//# sourceMappingURL=File.js.map

package/presentation/FileList/components/Grid/File.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/FileList/components/Grid/File.js","sources":["../../../../../src/presentation/FileList/components/Grid/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 { useFileManagerConfig } from \"~/presentation/config/FileManagerViewConfig.js\";\nimport type { FileItem } from \"~/domain/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 } = useFileManagerConfig();\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                offset={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"],"names":["DefaultFileControls","onSelect","selected","browser","useFileManagerConfig","itemActions","cn","CheckboxPrimitive","action","Fragment","DefaultFileBody","children","LazyLoad","DefaultFileLabel","file","Text","TimeAgo","File","makeDecoratable","fileBody"],"mappings":";;;;;AAmBA,MAAMA,sBAAsB,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAA4B;IACzE,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAM,EAAEC,WAAW,EAAE,GAAGF,QAAQ,IAAI;IAEpC,OAAO,WAAP,GACI,0CACKF,WAAW,WAAXA,GACG,oBAAC;QACG,WAAWK,GAAG;YACV;YACA;YACA;YACAJ,WAAW,gBAAgB;SAC9B;qBAED,oBAACK,mBAAiBA;QACd,SAASN;QACT,SAASC;QACT,UAAU,IAAM,KAAK;UAG7B,oBACJ,oBAAC;QACG,WAAWI,GAAG;YACV;YACA;YACA;YACA;SACH;OAEAD,YAAY,GAAG,CAACG,CAAAA,SACN,WAAP,GAAO,oBAACC,UAAQA;YAAC,KAAKD,OAAO,IAAI;WAAGA,OAAO,OAAO;AAKtE;AAIA,MAAME,kBAAkB,CAAC,EAAER,QAAQ,EAAED,QAAQ,EAAEU,QAAQ,EAAwB,GACpE,WAAP,GACI,oBAAC;QACG,SAASV;QACT,WAAWK,GAAG;YAAC;YAAgBL,WAAW,uBAAuB;SAAqB;qBAEtF,oBAACD,qBAAmBA;QAAC,UAAUE;QAAU,UAAUD;sBACnD,oBAACW,iBAAQA;QACL,QAAQ;QACR,QAAQ;QACR,eAAa;QACb,WAAWN,GAAG;YACV;YACA;YACA;SACH;OAEAK;AAQjB,MAAME,mBAAmB,CAAC,EAAEC,IAAI,EAAyB,GAC9C,WAAP,GACI,oBAAC;QAAI,WAAW;QAA6B,eAAa;qBACtD,oBAACC,MAAIA;QAAC,MAAM;QAAM,IAAI;QAAO,WAAW;OACnCD,KAAK,IAAI,iBAEd,oBAACC,MAAIA;QAAC,MAAM;QAAM,IAAI;QAAO,WAAW;OACnCD,KAAK,IAAI,EAAC,KAAE,QAAO,mBAAC,oBAACE,SAAOA;QAAC,UAAUF,KAAK,SAAS;;AAM/D,MAAMG,OAAOC,gBAChB,QACA,CAAC,EAAEJ,IAAI,EAAEK,QAAQ,EAAEjB,QAAQ,EAAED,QAAQ,EAAEU,QAAQ,EAAa,GACjD,WAAP,GACI,oBAAC;QACG,WAAWL,GAAG;YACV;YACA;YACA;YACA;YACAJ,YAAY;YACZ;YACA;SACH;QACD,eAAa;QACb,gBAAcY,KAAK,EAAE;OAEpBK,YAAY,WAAZA,GACG,oBAACT,iBAAeA;QAAC,UAAUR;QAAU,UAAUD;OAC1CU,WAAAA,WAAAA,GAGT,oBAACE,kBAAgBA;QAAC,MAAMC"}

package/presentation/FileList/components/Grid/FileGrid.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+/**
+ * Grid/Gallery View component driven by FileListPresenter vm.
+ * Renders file thumbnail cards and folder cards in a responsive grid layout.
+ * Wires click-to-select through presenter.actions.selection.
+ */
+export declare const FileGrid: (() => React.JSX.Element) & {
+    displayName: string;
+};

package/presentation/FileList/components/Grid/FileGrid.js

@@ -0,0 +1,168 @@
+import react, { useCallback } from "react";
+import { observer } from "mobx-react-lite";
+import react_lazy_load from "react-lazy-load";
+import { CheckboxPrimitive, OverlayLoader, Text, TimeAgo, cn } from "@webiny/admin-ui";
+import { useOverlay } from "../../../FileManager/OverlayContext.js";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { FolderIcon } from "@webiny/app-aco";
+import { useFileManagerPresenter } from "../../FileManagerPresenterProvider.js";
+import { useFileManagerConfig } from "../../../config/FileManagerViewConfig.js";
+import { FileProvider } from "../../../contexts/FileProvider.js";
+const t = i18n.ns("app-file-manager/presentation/file-grid");
+const FolderCard = ({ folder, onNavigate })=>/*#__PURE__*/ react.createElement("div", {
+        className: cn([
+            "group",
+            "bg-neutral-base rounded-lg",
+            "shadow-sm hover:shadow-lg",
+            "border-sm border-solid border-neutral-base hover:border-neutral-dimmed-darker",
+            "transition-shadow duration-250 ease-in-out",
+            "overflow-hidden",
+            "cursor-pointer"
+        ]),
+        onClick: ()=>onNavigate(folder.id),
+        "data-testid": "fm-grid-folder-card",
+        "data-folder-id": folder.id
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            height: 150
+        },
+        className: "flex items-center justify-center"
+    }, /*#__PURE__*/ react.createElement(FolderIcon, {
+        width: 90,
+        height: 90
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "px-md py-sm-extra"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        as: "div",
+        className: "truncate text-neutral-primary"
+    }, folder.title), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        as: "div",
+        className: "truncate text-neutral-dimmed"
+    }, t`Folder`)));
+const FileGrid_FileCard = observer(function({ file, selected, onToggle }) {
+    const { browser, getThumbnailRenderer } = useFileManagerConfig();
+    const { itemActions } = browser.grid;
+    const renderer = getThumbnailRenderer(browser.grid.itemThumbnails, file);
+    const handleClick = useCallback((e)=>{
+        e.stopPropagation();
+        onToggle(file.id, e.shiftKey);
+    }, [
+        file.id,
+        onToggle
+    ]);
+    return /*#__PURE__*/ react.createElement(FileProvider, {
+        file: file
+    }, /*#__PURE__*/ react.createElement("div", {
+        onClick: handleClick,
+        className: cn([
+            "group",
+            "bg-neutral-base rounded-lg",
+            "shadow-sm hover:shadow-lg",
+            "border-sm border-solid border-neutral-base hover:border-neutral-dimmed-darker",
+            selected && "ring-md ring-primary-strong",
+            "transition-shadow duration-250 ease-in-out",
+            "overflow-hidden",
+            "cursor-pointer"
+        ]),
+        "data-testid": "fm-grid-file-card",
+        "data-file-id": file.id
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "relative"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: cn([
+            "p-xs rounded-md",
+            "bg-neutral-base/30",
+            "absolute top-sm left-sm z-[1]",
+            selected ? "visible" : "invisible group-hover:visible"
+        ])
+    }, /*#__PURE__*/ react.createElement(CheckboxPrimitive, {
+        onClick: handleClick,
+        checked: selected,
+        onChange: ()=>void 0
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: cn([
+            "invisible group-hover:visible",
+            "flex items-center gap-xxs",
+            "p-xs",
+            "absolute top-xs-plus right-xs-plus z-[1]"
+        ])
+    }, itemActions.map((action)=>/*#__PURE__*/ react.createElement(react.Fragment, {
+            key: action.name
+        }, action.element))), /*#__PURE__*/ react.createElement(react_lazy_load, {
+        height: 150,
+        offset: "300px",
+        className: cn([
+            "bg-neutral-muted",
+            "flex items-center justify-center",
+            "text-neutral-strong text-sm"
+        ])
+    }, renderer?.element || null)), /*#__PURE__*/ react.createElement("div", {
+        className: "px-md py-sm-extra"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        as: "div",
+        className: "truncate text-neutral-primary"
+    }, file.name), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        as: "div",
+        className: "truncate text-neutral-dimmed"
+    }, file.type, " ", " // ", " ", /*#__PURE__*/ react.createElement(TimeAgo, {
+        datetime: file.createdOn
+    })))));
+});
+const FileGrid_FileGrid = observer(function() {
+    const presenter = useFileManagerPresenter();
+    const { vm, actions } = presenter;
+    const overlay = useOverlay();
+    const childFolders = vm.folders.childFolders;
+    const handleFolderNavigate = useCallback((folderId)=>{
+        actions.folders.selectFolder(folderId);
+    }, [
+        actions.filter
+    ]);
+    const handleToggle = (id, shiftKey)=>{
+        if (shiftKey) return void actions.selection.selectRangeTo(id);
+        if (overlay) {
+            const file = vm.list.rows.find((f)=>f.id === id);
+            if (file) overlay.onFileClick(file);
+            return;
+        }
+        actions.selection.toggle(id);
+    };
+    const handleBackgroundClick = useCallback(()=>{
+        actions.selection.deselectAll();
+    }, [
+        actions.selection
+    ]);
+    if (vm.list.pagination.loading && 0 === vm.list.rows.length) return /*#__PURE__*/ react.createElement("div", {
+        className: "relative size-full"
+    }, /*#__PURE__*/ react.createElement(OverlayLoader, {
+        text: t`Loading files...`,
+        size: "lg"
+    }));
+    return /*#__PURE__*/ react.createElement("div", {
+        className: cn([
+            "p-lg",
+            "grid gap-md"
+        ]),
+        style: {
+            gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))"
+        },
+        onClick: handleBackgroundClick,
+        "data-testid": "fm-file-grid"
+    }, vm.showFolders && childFolders.map((folder)=>/*#__PURE__*/ react.createElement(FolderCard, {
+            key: folder.id,
+            folder: folder,
+            onNavigate: handleFolderNavigate
+        })), vm.list.rows.map((file)=>/*#__PURE__*/ react.createElement(FileGrid_FileCard, {
+            key: file.id,
+            file: file,
+            selected: vm.list.selection.selectedIds.has(file.id),
+            onToggle: handleToggle
+        })));
+});
+export { FileGrid_FileGrid as FileGrid };
+
+//# sourceMappingURL=FileGrid.js.map

package/presentation/FileList/components/Grid/FileGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/FileList/components/Grid/FileGrid.js","sources":["../../../../../src/presentation/FileList/components/Grid/FileGrid.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport LazyLoad from \"react-lazy-load\";\nimport { cn, CheckboxPrimitive, Text, TimeAgo, OverlayLoader } from \"@webiny/admin-ui\";\nimport { useOverlay } from \"~/presentation/FileManager/OverlayContext.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { FolderIcon } from \"@webiny/app-aco\";\nimport { useFileManagerPresenter } from \"../../FileManagerPresenterProvider.js\";\nimport { useFileManagerConfig } from \"~/presentation/config/FileManagerViewConfig.js\";\nimport { FileProvider } from \"~/presentation/contexts/FileProvider.js\";\nimport type { FolderDto } from \"@webiny/app-aco\";\nimport type { FileItem } from \"~/domain/types.js\";\n\nconst t = i18n.ns(\"app-file-manager/presentation/file-grid\");\n\n// ---------------------------------------------------------------------------\n// FolderCard — renders a single folder in the grid.\n// ---------------------------------------------------------------------------\n\ninterface FolderCardProps {\n    folder: FolderDto;\n    onNavigate: (folderId: string) => void;\n}\n\nconst FolderCard = ({ folder, onNavigate }: FolderCardProps) => {\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                \"transition-shadow duration-250 ease-in-out\",\n                \"overflow-hidden\",\n                \"cursor-pointer\"\n            ])}\n            onClick={() => onNavigate(folder.id)}\n            data-testid={\"fm-grid-folder-card\"}\n            data-folder-id={folder.id}\n        >\n            <div style={{ height: 150 }} className={\"flex items-center justify-center\"}>\n                <FolderIcon width={90} height={90} />\n            </div>\n            <div className={\"px-md py-sm-extra\"}>\n                <Text size={\"sm\"} as={\"div\"} className={\"truncate text-neutral-primary\"}>\n                    {folder.title}\n                </Text>\n                <Text size={\"sm\"} as={\"div\"} className={\"truncate text-neutral-dimmed\"}>\n                    {t`Folder`}\n                </Text>\n            </div>\n        </div>\n    );\n};\n\n// ---------------------------------------------------------------------------\n// FileCard — renders a single file in the grid.\n// ---------------------------------------------------------------------------\n\ninterface FileCardProps {\n    file: FileItem;\n    selected: boolean;\n    onToggle: (id: string, shiftKey: boolean) => void;\n}\n\nconst FileCard = observer(function FileCard({ file, selected, onToggle }: FileCardProps) {\n    const { browser, getThumbnailRenderer } = useFileManagerConfig();\n    const { itemActions } = browser.grid;\n\n    const renderer = getThumbnailRenderer(browser.grid.itemThumbnails, file);\n\n    const handleClick = useCallback(\n        (e: React.MouseEvent) => {\n            e.stopPropagation();\n            onToggle(file.id, e.shiftKey);\n        },\n        [file.id, onToggle]\n    );\n\n    return (\n        <FileProvider file={file}>\n            <div\n                onClick={handleClick}\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                    \"cursor-pointer\"\n                ])}\n                data-testid={\"fm-grid-file-card\"}\n                data-file-id={file.id}\n            >\n                <div className={\"relative\"}>\n                    {/* Selection checkbox. */}\n                    <div\n                        className={cn([\n                            \"p-xs rounded-md\",\n                            \"bg-neutral-base/30\",\n                            \"absolute top-sm left-sm z-[1]\",\n                            selected ? \"visible\" : \"invisible group-hover:visible\"\n                        ])}\n                    >\n                        <CheckboxPrimitive\n                            onClick={handleClick}\n                            checked={selected}\n                            onChange={() => void 0}\n                        />\n                    </div>\n                    {/* Item actions (hover). */}\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 z-[1]\"\n                        ])}\n                    >\n                        {itemActions.map(action => (\n                            <React.Fragment key={action.name}>{action.element}</React.Fragment>\n                        ))}\n                    </div>\n                    {/* Thumbnail. */}\n                    <LazyLoad\n                        height={150}\n                        offset={\"300px\"}\n                        className={cn([\n                            \"bg-neutral-muted\",\n                            \"flex items-center justify-center\",\n                            \"text-neutral-strong text-sm\"\n                        ])}\n                    >\n                        {renderer?.element || null}\n                    </LazyLoad>\n                </div>\n                {/* File label. */}\n                <div className={\"px-md py-sm-extra\"}>\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            </div>\n        </FileProvider>\n    );\n});\n\n// ---------------------------------------------------------------------------\n// FileGrid — the main grid view component.\n// ---------------------------------------------------------------------------\n\n/**\n * Grid/Gallery View component driven by FileListPresenter vm.\n * Renders file thumbnail cards and folder cards in a responsive grid layout.\n * Wires click-to-select through presenter.actions.selection.\n */\nexport const FileGrid = observer(function FileGrid() {\n    const presenter = useFileManagerPresenter();\n    const { vm, actions } = presenter;\n\n    const overlay = useOverlay();\n    const childFolders = vm.folders.childFolders;\n\n    // Handle folder navigation.\n    const handleFolderNavigate = useCallback(\n        (folderId: string) => {\n            actions.folders.selectFolder(folderId);\n        },\n        [actions.filter]\n    );\n\n    const handleToggle = (id: string, shiftKey: boolean) => {\n        // Shift-click always does range selection, regardless of overlay mode.\n        if (shiftKey) {\n            actions.selection.selectRangeTo(id);\n            return;\n        }\n\n        if (overlay) {\n            const file = vm.list.rows.find(f => f.id === id);\n            if (file) {\n                overlay.onFileClick(file);\n            }\n            return;\n        }\n\n        actions.selection.toggle(id);\n    };\n\n    // Deselect all when clicking the grid background.\n    const handleBackgroundClick = useCallback(() => {\n        actions.selection.deselectAll();\n    }, [actions.selection]);\n\n    if (vm.list.pagination.loading && vm.list.rows.length === 0) {\n        return (\n            <div className={\"relative size-full\"}>\n                <OverlayLoader text={t`Loading files...`} size={\"lg\"} />\n            </div>\n        );\n    }\n\n    return (\n        <div\n            className={cn([\"p-lg\", \"grid gap-md\"])}\n            style={{ gridTemplateColumns: \"repeat(auto-fill, minmax(200px, 1fr))\" }}\n            onClick={handleBackgroundClick}\n            data-testid={\"fm-file-grid\"}\n        >\n            {vm.showFolders &&\n                childFolders.map(folder => (\n                    <FolderCard key={folder.id} folder={folder} onNavigate={handleFolderNavigate} />\n                ))}\n            {vm.list.rows.map(file => (\n                <FileCard\n                    key={file.id}\n                    file={file}\n                    selected={vm.list.selection.selectedIds.has(file.id)}\n                    onToggle={handleToggle}\n                />\n            ))}\n        </div>\n    );\n});\n"],"names":["t","i18n","FolderCard","folder","onNavigate","cn","FolderIcon","Text","FileCard","observer","file","selected","onToggle","browser","getThumbnailRenderer","useFileManagerConfig","itemActions","renderer","handleClick","useCallback","e","FileProvider","CheckboxPrimitive","action","React","LazyLoad","TimeAgo","FileGrid","presenter","useFileManagerPresenter","vm","actions","overlay","useOverlay","childFolders","handleFolderNavigate","folderId","handleToggle","id","shiftKey","f","handleBackgroundClick","OverlayLoader"],"mappings":"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"}

package/presentation/FileList/components/Grid/FileGrid.test.d.ts

@@ -0,0 +1 @@
+export {};