@webiny/app-file-manager 6.4.11 → 6.6.0-alpha.1

package/presentation/config/configComponents/Browser/Table/index.d.ts

@@ -5,32 +5,32 @@ export interface TableConfig {
     cellThumbnails: ThumbnailConfig[];
 }
 export declare const Table: {
-    Column: ((props: import("@webiny/app-aco/config/table/Column.js").ColumnProps) => import("react").JSX.Element) & {
-        original: (props: import("@webiny/app-aco/config/table/Column.js").ColumnProps) => import("react").JSX.Element;
+    Column: ((props: import("@webiny/app-admin/config/table/Column.js").ColumnProps) => import("react").JSX.Element) & {
+        original: (props: import("@webiny/app-admin/config/table/Column.js").ColumnProps) => import("react").JSX.Element;
         originalName: string;
         displayName: string;
     } & {
-        original: ((props: import("@webiny/app-aco/config/table/Column.js").ColumnProps) => import("react").JSX.Element) & {
-            original: (props: import("@webiny/app-aco/config/table/Column.js").ColumnProps) => import("react").JSX.Element;
+        original: ((props: import("@webiny/app-admin/config/table/Column.js").ColumnProps) => import("react").JSX.Element) & {
+            original: (props: import("@webiny/app-admin/config/table/Column.js").ColumnProps) => import("react").JSX.Element;
             originalName: string;
             displayName: string;
         };
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("@webiny/app-aco/config/table/Column.js").ColumnProps) => import("react").JSX.Element) & {
-            original: (props: import("@webiny/app-aco/config/table/Column.js").ColumnProps) => import("react").JSX.Element;
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("@webiny/app-admin/config/table/Column.js").ColumnProps) => import("react").JSX.Element) & {
+            original: (props: import("@webiny/app-admin/config/table/Column.js").ColumnProps) => import("react").JSX.Element;
             originalName: string;
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     } & {
         useTableRow: {
-            (): import("@webiny/app-aco/index.js").TableRowContextData<import("../../../../../domain/types.js").TableItem>;
-            <TUserRow>(): import("@webiny/app-aco/index.js").TableRowContextData<import("../../../../../domain/types.js").TableItem & {
+            (): import("@webiny/app-admin/index.js").TableRowContextData<import("../../../../../domain/types.js").TableItem>;
+            <TUserRow>(): import("@webiny/app-admin/index.js").TableRowContextData<import("../../../../../domain/types.js").TableItem & {
                 data: TUserRow;
             }>;
         };
-        isFolderRow: (row: import("@webiny/app-aco/table.types.js").TableRow) => row is import("@webiny/app-aco/table.types.js").FolderTableRow;
+        isFolderRow: (row: import("@webiny/app-admin/index.js").TableRow) => row is import("@webiny/app-aco/table.types.js").FolderTableRow;
     };
     Cell: {
         Thumbnail: (({ type, element }: import("./Thumbnail.js").RendererProps) => import("react").JSX.Element) & {

package/presentation/config/configComponents/Browser/index.d.ts

@@ -1,9 +1,14 @@
 import type { BulkActionConfig } from "./BulkAction.js";
 import type { FilterConfig } from "./Filter.js";
 import type { FiltersToWhereConverter } from "./FiltersToWhere.js";
+import { FiltersToWhere } from "./FiltersToWhere.js";
+import { FilterByTags } from "./FilterByTags.js";
 import type { TableConfig } from "./Table/index.js";
 import type { BulkEditFieldConfig } from "./BulkEditField.js";
+import { BulkEditField } from "./BulkEditField.js";
 import type { GridConfig } from "./Grid/index.js";
+import { ActionButton } from "../../../../presentation/FileList/components/Grid/ActionButton.js";
+import { FolderDropConfirmation } from "./FolderDropConfirmation.js";
 import { RecordConfig } from "@webiny/app-aco/config/record";
 export interface BrowserConfig {
     bulkActions: BulkActionConfig[];
@@ -74,11 +79,11 @@ export declare const Browser: {
                     displayName: string;
                 }>) => (props: unknown) => React.JSX.Element;
             } & {
-                IconButton: ({ icon, label, onAction, disabled, ...props }: import("~/presentation/FileList/components/Grid/ActionButton.js").ActionButtonProps) => import("react").JSX.Element;
+                IconButton: typeof ActionButton;
             };
         };
     };
-    BulkAction: (({ name, after, before, remove, element }: import("./BulkAction.js").BulkActionProps) => import("react").JSX.Element) & {
+    BulkAction: typeof import("./BulkAction.js").BaseBulkAction & {
         useButtons: () => import("@webiny/app-admin/components/Buttons/useButtons.js").ButtonsProviderContext;
         useWorker: () => {
             items: import("@webiny/sdk/index.js").FmFile[];
@@ -89,7 +94,7 @@ export declare const Browser: {
         };
         useDialog: () => import("@webiny/app-admin/index.js").UseDialogWithReportResponse;
     };
-    BulkEditField: ({ name, element }: import("./BulkEditField.js").BulkEditFieldProps) => import("react").JSX.Element;
+    BulkEditField: typeof BulkEditField;
     Filter: (({ name, element, after, before, remove }: import("./Filter.js").FilterProps) => import("react").JSX.Element) & {
         original: ({ name, element, after, before, remove }: import("./Filter.js").FilterProps) => import("react").JSX.Element;
         originalName: string;
@@ -117,18 +122,13 @@ export declare const Browser: {
             name: string;
         }) => React.JSX.Element;
     };
-    FiltersToWhere: ({ converter }: {
-        converter: FiltersToWhereConverter;
-    }) => import("react").JSX.Element;
-    FilterByTags: ({ remove }: import("./FilterByTags.js").FilterByTagProps) => import("react").JSX.Element;
+    FiltersToWhere: typeof FiltersToWhere;
+    FilterByTags: typeof FilterByTags;
     Folder: {
-        ExtensionField: {
-            createDecorator: (decorator: import("@webiny/react-composition/types.js").Decorator<import("@webiny/react-composition/types.js").GenericComponent<import("@webiny/app-aco").FieldProps>>) => (props: import("@webiny/app-aco").FieldDecoratorProps) => React.JSX.Element;
-        };
         Action: ((props: import("@webiny/app-aco/config/folder/Action.js").ActionProps) => import("react").JSX.Element) & {
             OptionsMenuItem: (props: import("@webiny/app-admin/index.js").OptionsMenuItemProps) => React.JSX.Element;
         };
-        DropConfirmation: (props: import("@webiny/app-aco/config/folder/DropConfirmation.js").DropConfirmationProps) => import("react").JSX.Element;
+        DropConfirmation: typeof FolderDropConfirmation;
     };
     File: {
         Action: ((props: import("@webiny/app-aco/config/record/Action.js").ActionProps) => import("react").JSX.Element) & {
@@ -137,32 +137,32 @@ export declare const Browser: {
         };
     };
     Table: {
-        Column: ((props: import("@webiny/app-aco/config/table/Column.js").ColumnProps) => import("react").JSX.Element) & {
-            original: (props: import("@webiny/app-aco/config/table/Column.js").ColumnProps) => import("react").JSX.Element;
+        Column: ((props: import("@webiny/app-admin/config/table/Column.js").ColumnProps) => import("react").JSX.Element) & {
+            original: (props: import("@webiny/app-admin/config/table/Column.js").ColumnProps) => import("react").JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: ((props: import("@webiny/app-aco/config/table/Column.js").ColumnProps) => import("react").JSX.Element) & {
-                original: (props: import("@webiny/app-aco/config/table/Column.js").ColumnProps) => import("react").JSX.Element;
+            original: ((props: import("@webiny/app-admin/config/table/Column.js").ColumnProps) => import("react").JSX.Element) & {
+                original: (props: import("@webiny/app-admin/config/table/Column.js").ColumnProps) => import("react").JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("@webiny/app-aco/config/table/Column.js").ColumnProps) => import("react").JSX.Element) & {
-                original: (props: import("@webiny/app-aco/config/table/Column.js").ColumnProps) => import("react").JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("@webiny/app-admin/config/table/Column.js").ColumnProps) => import("react").JSX.Element) & {
+                original: (props: import("@webiny/app-admin/config/table/Column.js").ColumnProps) => import("react").JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         } & {
             useTableRow: {
-                (): import("@webiny/app-aco").TableRowContextData<import("../../../../domain/types.js").TableItem>;
-                <TUserRow>(): import("@webiny/app-aco").TableRowContextData<import("../../../../domain/types.js").TableItem & {
+                (): import("@webiny/app-admin/index.js").TableRowContextData<import("../../../../domain/types.js").TableItem>;
+                <TUserRow>(): import("@webiny/app-admin/index.js").TableRowContextData<import("../../../../domain/types.js").TableItem & {
                     data: TUserRow;
                 }>;
             };
-            isFolderRow: (row: import("@webiny/app-aco").TableRow) => row is import("@webiny/app-aco").FolderTableRow;
+            isFolderRow: (row: import("@webiny/app-admin/index.js").TableRow) => row is import("@webiny/app-aco/table.types.js").FolderTableRow;
         };
         Cell: {
             Thumbnail: (({ type, element }: import("./Table/Thumbnail.js").RendererProps) => import("react").JSX.Element) & {

package/presentation/config/configComponents/Browser/index.js

@@ -1,4 +1,3 @@
-import { createFolderFieldDecoratorFactory } from "@webiny/app-aco";
 import { BulkAction } from "./BulkAction.js";
 import { Filter } from "./Filter.js";
 import { FiltersToWhere } from "./FiltersToWhere.js";
@@ -11,7 +10,6 @@ import { Action } from "./Grid/Action.js";
 import { Thumbnail } from "./Grid/Thumbnail.js";
 import { ActionButton } from "../../../FileList/components/Grid/ActionButton.js";
 import { File } from "../../../FileList/components/Grid/File.js";
-import { shouldDecorateFolderField } from "./FolderFieldDecorator.js";
 import { FolderDropConfirmation } from "./FolderDropConfirmation.js";
 const Browser = {
     Grid: {
@@ -28,12 +26,6 @@ const Browser = {
     FiltersToWhere: FiltersToWhere,
     FilterByTags: FilterByTags,
     Folder: {
-        ExtensionField: {
-            createDecorator: createFolderFieldDecoratorFactory({
-                scope: "fm",
-                shouldDecorate: shouldDecorateFolderField
-            })
-        },
         Action: FolderAction,
         DropConfirmation: FolderDropConfirmation
     },

package/presentation/config/configComponents/Browser/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/config/configComponents/Browser/index.js","sources":["../../../../../src/presentation/config/configComponents/Browser/index.ts"],"sourcesContent":["import { createFolderFieldDecoratorFactory } from \"@webiny/app-aco\";\nimport type { BulkActionConfig } from \"./BulkAction.js\";\nimport { BulkAction } from \"./BulkAction.js\";\nimport type { FilterConfig } from \"./Filter.js\";\nimport { Filter } from \"./Filter.js\";\nimport type { FiltersToWhereConverter } from \"./FiltersToWhere.js\";\nimport { FiltersToWhere } from \"./FiltersToWhere.js\";\nimport { FilterByTags } from \"./FilterByTags.js\";\nimport { FolderAction } from \"./FolderAction.js\";\nimport { FileAction } from \"./FileAction.js\";\nimport type { TableConfig } from \"./Table/index.js\";\nimport { Table } from \"./Table/index.js\";\nimport type { BulkEditFieldConfig } from \"./BulkEditField.js\";\nimport { BulkEditField } from \"./BulkEditField.js\";\nimport { Action } from \"./Grid/Action.js\";\nimport { Thumbnail } from \"./Grid/Thumbnail.js\";\nimport type { GridConfig } from \"./Grid/index.js\";\nimport { ActionButton } from \"~/presentation/FileList/components/Grid/ActionButton.js\";\nimport { File } from \"~/presentation/FileList/components/Grid/File.js\";\nimport { shouldDecorateFolderField } from \"./FolderFieldDecorator.js\";\nimport { FolderDropConfirmation } from \"./FolderDropConfirmation.js\";\nimport { RecordConfig } from \"@webiny/app-aco/config/record\";\n\nexport interface BrowserConfig {\n    bulkActions: BulkActionConfig[];\n    bulkEditFields: BulkEditFieldConfig[];\n    filters: FilterConfig[];\n    filtersToWhere: FiltersToWhereConverter[];\n    filterByTags: boolean;\n    table: TableConfig;\n    grid: GridConfig;\n    file: RecordConfig;\n}\n\nexport const Browser = {\n    Grid: {\n        Item: Object.assign(File, {\n            Thumbnail,\n            Action: Object.assign(Action, { IconButton: ActionButton })\n        })\n    },\n    BulkAction,\n    BulkEditField,\n    Filter,\n    FiltersToWhere,\n    FilterByTags,\n    Folder: {\n        ExtensionField: {\n            createDecorator: createFolderFieldDecoratorFactory({\n                scope: \"fm\",\n                shouldDecorate: shouldDecorateFolderField\n            })\n        },\n        Action: FolderAction,\n        DropConfirmation: FolderDropConfirmation\n    },\n    File: {\n        Action: FileAction\n    },\n    Table\n};\n"],"names":["Browser","Object","File","Thumbnail","Action","ActionButton","BulkAction","BulkEditField","Filter","FiltersToWhere","FilterByTags","createFolderFieldDecoratorFactory","shouldDecorateFolderField","FolderAction","FolderDropConfirmation","FileAction","Table"],"mappings":";;;;;;;;;;;;;;;AAkCO,MAAMA,UAAU;IACnB,MAAM;QACF,MAAMC,OAAO,MAAM,CAACC,MAAM;YACtBC,WAASA;YACT,QAAQF,OAAO,MAAM,CAACG,QAAQ;gBAAE,YAAYC;YAAa;QAC7D;IACJ;IACAC,YAAUA;IACVC,eAAaA;IACbC,QAAMA;IACNC,gBAAcA;IACdC,cAAYA;IACZ,QAAQ;QACJ,gBAAgB;YACZ,iBAAiBC,kCAAkC;gBAC/C,OAAO;gBACP,gBAAgBC;YACpB;QACJ;QACA,QAAQC;QACR,kBAAkBC;IACtB;IACA,MAAM;QACF,QAAQC;IACZ;IACAC,OAAKA;AACT"}
+{"version":3,"file":"presentation/config/configComponents/Browser/index.js","sources":["../../../../../src/presentation/config/configComponents/Browser/index.ts"],"sourcesContent":["import type { BulkActionConfig } from \"./BulkAction.js\";\nimport { BulkAction } from \"./BulkAction.js\";\nimport type { FilterConfig } from \"./Filter.js\";\nimport { Filter } from \"./Filter.js\";\nimport type { FiltersToWhereConverter } from \"./FiltersToWhere.js\";\nimport { FiltersToWhere } from \"./FiltersToWhere.js\";\nimport { FilterByTags } from \"./FilterByTags.js\";\nimport { FolderAction } from \"./FolderAction.js\";\nimport { FileAction } from \"./FileAction.js\";\nimport type { TableConfig } from \"./Table/index.js\";\nimport { Table } from \"./Table/index.js\";\nimport type { BulkEditFieldConfig } from \"./BulkEditField.js\";\nimport { BulkEditField } from \"./BulkEditField.js\";\nimport { Action } from \"./Grid/Action.js\";\nimport { Thumbnail } from \"./Grid/Thumbnail.js\";\nimport type { GridConfig } from \"./Grid/index.js\";\nimport { ActionButton } from \"~/presentation/FileList/components/Grid/ActionButton.js\";\nimport { File } from \"~/presentation/FileList/components/Grid/File.js\";\nimport { FolderDropConfirmation } from \"./FolderDropConfirmation.js\";\nimport { RecordConfig } from \"@webiny/app-aco/config/record\";\n\nexport interface BrowserConfig {\n    bulkActions: BulkActionConfig[];\n    bulkEditFields: BulkEditFieldConfig[];\n    filters: FilterConfig[];\n    filtersToWhere: FiltersToWhereConverter[];\n    filterByTags: boolean;\n    table: TableConfig;\n    grid: GridConfig;\n    file: RecordConfig;\n}\n\nexport const Browser = {\n    Grid: {\n        Item: Object.assign(File, {\n            Thumbnail,\n            Action: Object.assign(Action, { IconButton: ActionButton })\n        })\n    },\n    BulkAction,\n    BulkEditField,\n    Filter,\n    FiltersToWhere,\n    FilterByTags,\n    Folder: {\n        Action: FolderAction,\n        DropConfirmation: FolderDropConfirmation\n    },\n    File: {\n        Action: FileAction\n    },\n    Table\n};\n"],"names":["Browser","Object","File","Thumbnail","Action","ActionButton","BulkAction","BulkEditField","Filter","FiltersToWhere","FilterByTags","FolderAction","FolderDropConfirmation","FileAction","Table"],"mappings":";;;;;;;;;;;;;AAgCO,MAAMA,UAAU;IACnB,MAAM;QACF,MAAMC,OAAO,MAAM,CAACC,MAAM;YACtBC,WAASA;YACT,QAAQF,OAAO,MAAM,CAACG,QAAQ;gBAAE,YAAYC;YAAa;QAC7D;IACJ;IACAC,YAAUA;IACVC,eAAaA;IACbC,QAAMA;IACNC,gBAAcA;IACdC,cAAYA;IACZ,QAAQ;QACJ,QAAQC;QACR,kBAAkBC;IACtB;IACA,MAAM;QACF,QAAQC;IACZ;IACAC,OAAKA;AACT"}

package/presentation/config/configComponents/FileDetails/index.d.ts

@@ -1,4 +1,6 @@
+import { Width } from "./Width.js";
 import type { ActionConfig } from "./Action.js";
+import { ActionButton } from "../../../../presentation/FileDetails/components/ActionButton.js";
 import type { ThumbnailConfig } from "./Thumbnail.js";
 export interface FileDetailsConfig {
     actions: ActionConfig[];
@@ -25,7 +27,7 @@ export declare const FileDetails: {
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     } & {
-        Button: ({ label, icon, onAction, disabled, className, ...props }: import("~/presentation/FileDetails/components/ActionButton.js").ActionButtonProps) => import("react").JSX.Element;
+        Button: typeof ActionButton;
     };
     Preview: {
         Thumbnail: (({ type, element }: import("./Thumbnail.js").RendererProps) => import("react").JSX.Element) & {
@@ -48,5 +50,5 @@ export declare const FileDetails: {
             }>) => (props: unknown) => React.JSX.Element;
         };
     };
-    Width: ({ value }: import("./Width.js").WidthProps) => import("react").JSX.Element;
+    Width: typeof Width;
 };

package/presentation/config/thumbnailRenderers/CroppedFileImage.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import type { FileItem } from "../../../domain/types.js";
+interface CroppedFileImageProps {
+    file: FileItem;
+    /** Width passed to the delivery transform (`?width=`). */
+    width: number;
+    /** How the (cropped) image fits its slot. */
+    fit: "cover" | "contain";
+    /** Class applied to the `<Image>` when there is no crop (original behavior). */
+    fallbackClassName?: string;
+}
+/**
+ * Renders a File Manager image thumbnail/preview honoring the saved crop (and, for
+ * `cover`, the hotspot). Falls back to the plain image when the file has no crop,
+ * so un-edited files render exactly as before.
+ */
+export declare const CroppedFileImage: ({ file, width, fit, fallbackClassName }: CroppedFileImageProps) => React.JSX.Element;
+export {};

package/presentation/config/thumbnailRenderers/CroppedFileImage.js

@@ -0,0 +1,66 @@
+import { Image } from "@webiny/app/components/index.js";
+import { cn, getCroppedImageRenderStyles } from "@webiny/admin-ui";
+import * as __rspack_external_react from "react";
+const isFullCrop = (crop)=>!crop || 0 === crop.top && 0 === crop.left && 0 === crop.bottom && 0 === crop.right;
+const CroppedFileImage = ({ file, width, fit, fallbackClassName })=>{
+    const ref = (0, __rspack_external_react.useRef)(null);
+    const [box, setBox] = (0, __rspack_external_react.useState)({
+        w: 0,
+        h: 0
+    });
+    (0, __rspack_external_react.useLayoutEffect)(()=>{
+        const el = ref.current;
+        if (!el) return;
+        const measure = ()=>{
+            const rect = el.getBoundingClientRect();
+            setBox({
+                w: rect.width,
+                h: rect.height
+            });
+        };
+        measure();
+        if ("u" < typeof ResizeObserver) return;
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        return ()=>ro.disconnect();
+    }, []);
+    const img = file.metadata?.image;
+    const imageWidth = img?.width ?? 0;
+    const imageHeight = img?.height ?? 0;
+    if (isFullCrop(img?.crop) || imageWidth <= 0 || imageHeight <= 0) return /*#__PURE__*/ __rspack_external_react.createElement(Image, {
+        src: file.src,
+        alt: file.name,
+        transform: {
+            width
+        },
+        className: fallbackClassName
+    });
+    const focalPoint = img?.focalPoint;
+    const hotspot = focalPoint ? {
+        x: focalPoint.x,
+        y: focalPoint.y,
+        width: 1,
+        height: 1
+    } : void 0;
+    const { wrapper, image } = getCroppedImageRenderStyles(imageWidth, imageHeight, img?.crop, hotspot, {
+        boxWidth: box.w,
+        boxHeight: box.h,
+        fit
+    });
+    return /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        ref: ref,
+        className: cn("flex h-full w-full items-center justify-center overflow-hidden")
+    }, /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        style: wrapper
+    }, /*#__PURE__*/ __rspack_external_react.createElement(Image, {
+        src: file.src,
+        alt: file.name,
+        transform: {
+            width
+        },
+        style: image
+    })));
+};
+export { CroppedFileImage };
+
+//# sourceMappingURL=CroppedFileImage.js.map

package/presentation/config/thumbnailRenderers/CroppedFileImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/config/thumbnailRenderers/CroppedFileImage.js","sources":["../../../../src/presentation/config/thumbnailRenderers/CroppedFileImage.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useLayoutEffect, useRef, useState } from \"react\";\nimport { Image } from \"@webiny/app/components/index.js\";\nimport { cn, getCroppedImageRenderStyles } from \"@webiny/admin-ui\";\nimport type { FileItem } from \"~/domain/types.js\";\n\ninterface CroppedFileImageProps {\n    file: FileItem;\n    /** Width passed to the delivery transform (`?width=`). */\n    width: number;\n    /** How the (cropped) image fits its slot. */\n    fit: \"cover\" | \"contain\";\n    /** Class applied to the `<Image>` when there is no crop (original behavior). */\n    fallbackClassName?: string;\n}\n\nconst isFullCrop = (crop: any): boolean => {\n    return !crop || (crop.top === 0 && crop.left === 0 && crop.bottom === 0 && crop.right === 0);\n};\n\n/**\n * Renders a File Manager image thumbnail/preview honoring the saved crop (and, for\n * `cover`, the hotspot). Falls back to the plain image when the file has no crop,\n * so un-edited files render exactly as before.\n */\nexport const CroppedFileImage = ({\n    file,\n    width,\n    fit,\n    fallbackClassName\n}: CroppedFileImageProps) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const [box, setBox] = useState({ w: 0, h: 0 });\n\n    useLayoutEffect(() => {\n        const el = ref.current;\n        if (!el) {\n            return;\n        }\n        const measure = () => {\n            const rect = el.getBoundingClientRect();\n            setBox({ w: rect.width, h: rect.height });\n        };\n        measure();\n        if (typeof ResizeObserver === \"undefined\") {\n            return;\n        }\n        const ro = new ResizeObserver(measure);\n        ro.observe(el);\n        return () => ro.disconnect();\n    }, []);\n\n    const img = file.metadata?.image;\n    const imageWidth = img?.width ?? 0;\n    const imageHeight = img?.height ?? 0;\n\n    if (isFullCrop(img?.crop) || imageWidth <= 0 || imageHeight <= 0) {\n        return (\n            <Image\n                src={file.src}\n                alt={file.name}\n                transform={{ width }}\n                className={fallbackClassName}\n            />\n        );\n    }\n\n    const focalPoint = img?.focalPoint;\n    const hotspot = focalPoint\n        ? { x: focalPoint.x, y: focalPoint.y, width: 1, height: 1 }\n        : undefined;\n\n    const { wrapper, image } = getCroppedImageRenderStyles(\n        imageWidth,\n        imageHeight,\n        img?.crop,\n        hotspot,\n        {\n            boxWidth: box.w,\n            boxHeight: box.h,\n            fit\n        }\n    );\n\n    return (\n        <div\n            ref={ref}\n            className={cn(\"flex h-full w-full items-center justify-center overflow-hidden\")}\n        >\n            <div style={wrapper}>\n                <Image src={file.src} alt={file.name} transform={{ width }} style={image} />\n            </div>\n        </div>\n    );\n};\n"],"names":["isFullCrop","crop","CroppedFileImage","file","width","fit","fallbackClassName","ref","useRef","box","setBox","useState","useLayoutEffect","el","measure","rect","ResizeObserver","ro","img","imageWidth","imageHeight","Image","focalPoint","hotspot","undefined","wrapper","image","getCroppedImageRenderStyles","cn"],"mappings":";;;AAgBA,MAAMA,aAAa,CAACC,OACT,CAACA,QAASA,AAAa,MAAbA,KAAK,GAAG,IAAUA,AAAc,MAAdA,KAAK,IAAI,IAAUA,AAAgB,MAAhBA,KAAK,MAAM,IAAUA,AAAe,MAAfA,KAAK,KAAK;AAQlF,MAAMC,mBAAmB,CAAC,EAC7BC,IAAI,EACJC,KAAK,EACLC,GAAG,EACHC,iBAAiB,EACG;IACpB,MAAMC,MAAMC,AAAAA,IAAAA,wBAAAA,MAAAA,AAAAA,EAAuB;IACnC,MAAM,CAACC,KAAKC,OAAO,GAAGC,AAAAA,IAAAA,wBAAAA,QAAAA,AAAAA,EAAS;QAAE,GAAG;QAAG,GAAG;IAAE;IAE5CC,IAAAA,wBAAAA,eAAAA,AAAAA,EAAgB;QACZ,MAAMC,KAAKN,IAAI,OAAO;QACtB,IAAI,CAACM,IACD;QAEJ,MAAMC,UAAU;YACZ,MAAMC,OAAOF,GAAG,qBAAqB;YACrCH,OAAO;gBAAE,GAAGK,KAAK,KAAK;gBAAE,GAAGA,KAAK,MAAM;YAAC;QAC3C;QACAD;QACA,IAAI,AAA0B,MAA1B,OAAOE,gBACP;QAEJ,MAAMC,KAAK,IAAID,eAAeF;QAC9BG,GAAG,OAAO,CAACJ;QACX,OAAO,IAAMI,GAAG,UAAU;IAC9B,GAAG,EAAE;IAEL,MAAMC,MAAMf,KAAK,QAAQ,EAAE;IAC3B,MAAMgB,aAAaD,KAAK,SAAS;IACjC,MAAME,cAAcF,KAAK,UAAU;IAEnC,IAAIlB,WAAWkB,KAAK,SAASC,cAAc,KAAKC,eAAe,GAC3D,OAAO,WAAP,GACI,sCAACC,OAAKA;QACF,KAAKlB,KAAK,GAAG;QACb,KAAKA,KAAK,IAAI;QACd,WAAW;YAAEC;QAAM;QACnB,WAAWE;;IAKvB,MAAMgB,aAAaJ,KAAK;IACxB,MAAMK,UAAUD,aACV;QAAE,GAAGA,WAAW,CAAC;QAAE,GAAGA,WAAW,CAAC;QAAE,OAAO;QAAG,QAAQ;IAAE,IACxDE;IAEN,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,4BACvBR,YACAC,aACAF,KAAK,MACLK,SACA;QACI,UAAUd,IAAI,CAAC;QACf,WAAWA,IAAI,CAAC;QAChBJ;IACJ;IAGJ,OAAO,WAAP,GACI,sCAAC;QACG,KAAKE;QACL,WAAWqB,GAAG;qBAEd,sCAAC;QAAI,OAAOH;qBACR,sCAACJ,OAAKA;QAAC,KAAKlB,KAAK,GAAG;QAAE,KAAKA,KAAK,IAAI;QAAE,WAAW;YAAEC;QAAM;QAAG,OAAOsB;;AAInF"}

package/presentation/config/thumbnailRenderers/FilePreviewImageRenderer.js

@@ -1,16 +1,13 @@
-import { Image } from "@webiny/app/components/index.js";
 import { useFile } from "../../hooks/useFile.js";
+import { CroppedFileImage } from "./CroppedFileImage.js";
 import * as __rspack_external_react from "react";
-const width750 = {
-    width: 750
-};
 const FilePreviewImageRenderer = ()=>{
     const { file } = useFile();
-    return /*#__PURE__*/ __rspack_external_react.createElement(Image, {
-        src: file.src,
-        alt: file.name,
-        transform: width750,
-        className: "object-contain max-w-full max-h-full"
+    return /*#__PURE__*/ __rspack_external_react.createElement(CroppedFileImage, {
+        file: file,
+        width: 750,
+        fit: "contain",
+        fallbackClassName: "object-contain max-w-full max-h-full"
     });
 };
 export { FilePreviewImageRenderer };

package/presentation/config/thumbnailRenderers/FilePreviewImageRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/config/thumbnailRenderers/FilePreviewImageRenderer.js","sources":["../../../../src/presentation/config/thumbnailRenderers/FilePreviewImageRenderer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Image } from \"@webiny/app/components/index.js\";\nimport { useFile } from \"~/presentation/hooks/useFile.js\";\n\nconst width750 = { width: 750 };\n\nexport const FilePreviewImageRenderer = () => {\n    const { file } = useFile();\n    return (\n        <Image\n            src={file.src}\n            alt={file.name}\n            transform={width750}\n            className={\"object-contain max-w-full max-h-full\"}\n        />\n    );\n};\n"],"names":["width750","FilePreviewImageRenderer","file","useFile","Image"],"mappings":";;;AAIA,MAAMA,WAAW;IAAE,OAAO;AAAI;AAEvB,MAAMC,2BAA2B;IACpC,MAAM,EAAEC,IAAI,EAAE,GAAGC;IACjB,OAAO,WAAP,GACI,sCAACC,OAAKA;QACF,KAAKF,KAAK,GAAG;QACb,KAAKA,KAAK,IAAI;QACd,WAAWF;QACX,WAAW;;AAGvB"}
+{"version":3,"file":"presentation/config/thumbnailRenderers/FilePreviewImageRenderer.js","sources":["../../../../src/presentation/config/thumbnailRenderers/FilePreviewImageRenderer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useFile } from \"~/presentation/hooks/useFile.js\";\nimport { CroppedFileImage } from \"./CroppedFileImage.js\";\n\nexport const FilePreviewImageRenderer = () => {\n    const { file } = useFile();\n    return (\n        <CroppedFileImage\n            file={file}\n            width={750}\n            fit={\"contain\"}\n            fallbackClassName={\"object-contain max-w-full max-h-full\"}\n        />\n    );\n};\n"],"names":["FilePreviewImageRenderer","file","useFile","CroppedFileImage"],"mappings":";;;AAIO,MAAMA,2BAA2B;IACpC,MAAM,EAAEC,IAAI,EAAE,GAAGC;IACjB,OAAO,WAAP,GACI,sCAACC,kBAAgBA;QACb,MAAMF;QACN,OAAO;QACP,KAAK;QACL,mBAAmB;;AAG/B"}

package/presentation/config/thumbnailRenderers/GridItemImageRenderer.js

@@ -1,16 +1,13 @@
-import { Image } from "@webiny/app/components/index.js";
 import { useFile } from "../../hooks/useFile.js";
+import { CroppedFileImage } from "./CroppedFileImage.js";
 import * as __rspack_external_react from "react";
-const width300 = {
-    width: 300
-};
 const GridItemImageRenderer = ()=>{
     const { file } = useFile();
-    return /*#__PURE__*/ __rspack_external_react.createElement(Image, {
-        src: file.src,
-        alt: file.name,
-        transform: width300,
-        className: "object-contain max-w-full max-h-full"
+    return /*#__PURE__*/ __rspack_external_react.createElement(CroppedFileImage, {
+        file: file,
+        width: 300,
+        fit: "contain",
+        fallbackClassName: "object-contain max-w-full max-h-full"
     });
 };
 export { GridItemImageRenderer };

package/presentation/config/thumbnailRenderers/GridItemImageRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/config/thumbnailRenderers/GridItemImageRenderer.js","sources":["../../../../src/presentation/config/thumbnailRenderers/GridItemImageRenderer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Image } from \"@webiny/app/components/index.js\";\nimport { useFile } from \"~/presentation/hooks/useFile.js\";\n\nconst width300 = { width: 300 };\n\nexport const GridItemImageRenderer = () => {\n    const { file } = useFile();\n    return (\n        <Image\n            src={file.src}\n            alt={file.name}\n            transform={width300}\n            className={\"object-contain max-w-full max-h-full\"}\n        />\n    );\n};\n"],"names":["width300","GridItemImageRenderer","file","useFile","Image"],"mappings":";;;AAIA,MAAMA,WAAW;IAAE,OAAO;AAAI;AAEvB,MAAMC,wBAAwB;IACjC,MAAM,EAAEC,IAAI,EAAE,GAAGC;IACjB,OAAO,WAAP,GACI,sCAACC,OAAKA;QACF,KAAKF,KAAK,GAAG;QACb,KAAKA,KAAK,IAAI;QACd,WAAWF;QACX,WAAW;;AAGvB"}
+{"version":3,"file":"presentation/config/thumbnailRenderers/GridItemImageRenderer.js","sources":["../../../../src/presentation/config/thumbnailRenderers/GridItemImageRenderer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useFile } from \"~/presentation/hooks/useFile.js\";\nimport { CroppedFileImage } from \"./CroppedFileImage.js\";\n\nexport const GridItemImageRenderer = () => {\n    const { file } = useFile();\n    return (\n        <CroppedFileImage\n            file={file}\n            width={300}\n            fit={\"contain\"}\n            fallbackClassName={\"object-contain max-w-full max-h-full\"}\n        />\n    );\n};\n"],"names":["GridItemImageRenderer","file","useFile","CroppedFileImage"],"mappings":";;;AAIO,MAAMA,wBAAwB;IACjC,MAAM,EAAEC,IAAI,EAAE,GAAGC;IACjB,OAAO,WAAP,GACI,sCAACC,kBAAgBA;QACb,MAAMF;QACN,OAAO;QACP,KAAK;QACL,mBAAmB;;AAG/B"}

package/presentation/config/thumbnailRenderers/TableItemImageRenderer.js

@@ -1,16 +1,13 @@
-import { Image } from "@webiny/app/components/index.js";
 import { useFile } from "../../hooks/useFile.js";
+import { CroppedFileImage } from "./CroppedFileImage.js";
 import * as __rspack_external_react from "react";
-const width100 = {
-    width: 100
-};
 const TableItemImageRenderer = ()=>{
     const { file } = useFile();
-    return /*#__PURE__*/ __rspack_external_react.createElement(Image, {
-        src: file.src,
-        alt: file.name,
-        transform: width100,
-        className: "object-cover w-full h-full"
+    return /*#__PURE__*/ __rspack_external_react.createElement(CroppedFileImage, {
+        file: file,
+        width: 100,
+        fit: "cover",
+        fallbackClassName: "object-cover w-full h-full"
     });
 };
 export { TableItemImageRenderer };

package/presentation/config/thumbnailRenderers/TableItemImageRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"presentation/config/thumbnailRenderers/TableItemImageRenderer.js","sources":["../../../../src/presentation/config/thumbnailRenderers/TableItemImageRenderer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Image } from \"@webiny/app/components/index.js\";\nimport { useFile } from \"~/presentation/hooks/useFile.js\";\n\nconst width100 = { width: 100 };\n\nexport const TableItemImageRenderer = () => {\n    const { file } = useFile();\n    return (\n        <Image\n            src={file.src}\n            alt={file.name}\n            transform={width100}\n            className={\"object-cover w-full h-full\"}\n        />\n    );\n};\n"],"names":["width100","TableItemImageRenderer","file","useFile","Image"],"mappings":";;;AAIA,MAAMA,WAAW;IAAE,OAAO;AAAI;AAEvB,MAAMC,yBAAyB;IAClC,MAAM,EAAEC,IAAI,EAAE,GAAGC;IACjB,OAAO,WAAP,GACI,sCAACC,OAAKA;QACF,KAAKF,KAAK,GAAG;QACb,KAAKA,KAAK,IAAI;QACd,WAAWF;QACX,WAAW;;AAGvB"}
+{"version":3,"file":"presentation/config/thumbnailRenderers/TableItemImageRenderer.js","sources":["../../../../src/presentation/config/thumbnailRenderers/TableItemImageRenderer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useFile } from \"~/presentation/hooks/useFile.js\";\nimport { CroppedFileImage } from \"./CroppedFileImage.js\";\n\nexport const TableItemImageRenderer = () => {\n    const { file } = useFile();\n    return (\n        <CroppedFileImage\n            file={file}\n            width={100}\n            fit={\"cover\"}\n            fallbackClassName={\"object-cover w-full h-full\"}\n        />\n    );\n};\n"],"names":["TableItemImageRenderer","file","useFile","CroppedFileImage"],"mappings":";;;AAIO,MAAMA,yBAAyB;IAClC,MAAM,EAAEC,IAAI,EAAE,GAAGC;IACjB,OAAO,WAAP,GACI,sCAACC,kBAAgBA;QACb,MAAMF;QACN,OAAO;QACP,KAAK;QACL,mBAAmB;;AAG/B"}

package/presentation/fieldRenderers/CmsAssetPickerRenderer.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+export interface AssetFieldRendererSettings extends Record<string, unknown> {
+    imagesOnly?: boolean;
+    accept?: string[];
+}
+declare module "@webiny/app-admin/features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        cmsAssetPicker: {
+            fieldType: "asset";
+            settings: AssetFieldRendererSettings;
+        };
+    }
+}
+/**
+ * Single-asset picker for the CMS Asset field. The field value is the typed Asset
+ * object; the picker chrome shows the file's URL, while crop / focal point / alt
+ * are edited per-usage via the shared `ImageEditor` and written back onto
+ * `value.image`.
+ */
+export declare const CmsAssetPickerRenderer: React.ComponentType<{
+    field: import("@webiny/app-admin/index.js").IFieldVM;
+}>;

package/presentation/fieldRenderers/CmsAssetPickerRenderer.js

@@ -0,0 +1,56 @@
+import react, { useState } from "react";
+import { createFieldRenderer } from "@webiny/app-admin/features/formModel/createFieldRenderer.js";
+import { FileManager } from "@webiny/app-admin/base/ui/FileManager.js";
+import { FilePicker, ImageEditor, RichItemPreview } from "@webiny/admin-ui";
+import { applyImageEditToAsset, assetImageToEditorValue, fileItemToAsset, hasAsset, hasImageEdit, isImageAsset } from "./assetValue.js";
+import { CroppedAssetThumb } from "./CroppedAssetThumb.js";
+const CmsAssetPickerRenderer = createFieldRenderer(({ field })=>{
+    const settings = field.rendererSettings;
+    const value = field.value ?? null;
+    const [editing, setEditing] = useState(false);
+    const src = value?.src ?? void 0;
+    const editable = isImageAsset(value) && hasAsset(value);
+    const showCroppedPreview = editable && hasImageEdit(value?.image);
+    return /*#__PURE__*/ react.createElement(FileManager, {
+        images: settings?.imagesOnly,
+        accept: settings?.accept,
+        render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FilePicker, {
+                label: field.label,
+                description: field.description,
+                note: field.note,
+                hint: field.help,
+                type: "compact",
+                value: src,
+                validation: field.validation,
+                renderFilePreview: showCroppedPreview && value?.src && value.image ? (previewProps)=>/*#__PURE__*/ react.createElement(RichItemPreview, {
+                        ...previewProps,
+                        renderImage: ({ name })=>/*#__PURE__*/ react.createElement(CroppedAssetThumb, {
+                                src: value.src,
+                                name: name,
+                                image: value.image
+                            })
+                    }) : void 0,
+                onSelectItem: ()=>showFileManager((file)=>{
+                        field.onChange(fileItemToAsset(file));
+                    }),
+                onRemoveItem: ()=>field.onChange(null),
+                onEditItem: editable ? ()=>setEditing(true) : void 0
+            }), editable && value ? /*#__PURE__*/ react.createElement(ImageEditor, {
+                open: editing,
+                onClose: ()=>setEditing(false),
+                image: {
+                    src: value.src ?? "",
+                    width: value.image?.width ?? 0,
+                    height: value.image?.height ?? 0
+                },
+                value: assetImageToEditorValue(value.image),
+                onSave: (edit)=>{
+                    field.onChange(applyImageEditToAsset(value, edit));
+                    setEditing(false);
+                }
+            }) : null)
+    });
+});
+export { CmsAssetPickerRenderer };
+
+//# sourceMappingURL=CmsAssetPickerRenderer.js.map

package/presentation/fieldRenderers/CmsAssetPickerRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldRenderers/CmsAssetPickerRenderer.js","sources":["../../../src/presentation/fieldRenderers/CmsAssetPickerRenderer.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { createFieldRenderer } from \"@webiny/app-admin/features/formModel/createFieldRenderer.js\";\nimport { FileManager } from \"@webiny/app-admin/base/ui/FileManager.js\";\nimport type { FileManagerFileItem } from \"@webiny/app-admin/base/ui/FileManager.js\";\nimport { FilePicker, RichItemPreview, ImageEditor, type ImageEditorValue } from \"@webiny/admin-ui\";\nimport {\n    applyImageEditToAsset,\n    assetImageToEditorValue,\n    fileItemToAsset,\n    hasAsset,\n    hasImageEdit,\n    isImageAsset,\n    type Asset\n} from \"./assetValue.js\";\nimport { CroppedAssetThumb } from \"./CroppedAssetThumb.js\";\n\nexport interface AssetFieldRendererSettings extends Record<string, unknown> {\n    imagesOnly?: boolean;\n    accept?: string[];\n}\n\ndeclare module \"@webiny/app-admin/features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        cmsAssetPicker: { fieldType: \"asset\"; settings: AssetFieldRendererSettings };\n    }\n}\n\n/**\n * Single-asset picker for the CMS Asset field. The field value is the typed Asset\n * object; the picker chrome shows the file's URL, while crop / focal point / alt\n * are edited per-usage via the shared `ImageEditor` and written back onto\n * `value.image`.\n */\nexport const CmsAssetPickerRenderer = createFieldRenderer<\"cmsAssetPicker\">(({ field }) => {\n    const settings = field.rendererSettings as AssetFieldRendererSettings | undefined;\n    const value = (field.value as Asset | null) ?? null;\n    const [editing, setEditing] = useState(false);\n\n    const src = value?.src ?? undefined;\n    const editable = isImageAsset(value) && hasAsset(value);\n    const showCroppedPreview = editable && hasImageEdit(value?.image);\n\n    return (\n        <FileManager\n            images={settings?.imagesOnly}\n            accept={settings?.accept}\n            render={({ showFileManager }) => (\n                <>\n                    <FilePicker\n                        label={field.label}\n                        description={field.description}\n                        note={field.note}\n                        hint={field.help}\n                        type=\"compact\"\n                        value={src}\n                        validation={field.validation}\n                        // Reflect the per-usage crop + focal point in the thumbnail.\n                        renderFilePreview={\n                            showCroppedPreview && value?.src && value.image\n                                ? previewProps => (\n                                      <RichItemPreview\n                                          {...previewProps}\n                                          renderImage={({ name }) => (\n                                              <CroppedAssetThumb\n                                                  src={value.src as string}\n                                                  name={name}\n                                                  image={value.image!}\n                                              />\n                                          )}\n                                      />\n                                  )\n                                : undefined\n                        }\n                        onSelectItem={() =>\n                            showFileManager((file: FileManagerFileItem) => {\n                                field.onChange(fileItemToAsset(file));\n                            })\n                        }\n                        onRemoveItem={() => field.onChange(null)}\n                        onEditItem={editable ? () => setEditing(true) : undefined}\n                    />\n                    {editable && value ? (\n                        <ImageEditor\n                            open={editing}\n                            onClose={() => setEditing(false)}\n                            image={{\n                                src: value.src ?? \"\",\n                                width: value.image?.width ?? 0,\n                                height: value.image?.height ?? 0\n                            }}\n                            value={assetImageToEditorValue(value.image)}\n                            onSave={(edit: ImageEditorValue) => {\n                                field.onChange(applyImageEditToAsset(value, edit));\n                                setEditing(false);\n                            }}\n                        />\n                    ) : null}\n                </>\n            )}\n        />\n    );\n});\n"],"names":["CmsAssetPickerRenderer","createFieldRenderer","field","settings","value","editing","setEditing","useState","src","undefined","editable","isImageAsset","hasAsset","showCroppedPreview","hasImageEdit","FileManager","showFileManager","FilePicker","previewProps","RichItemPreview","name","CroppedAssetThumb","file","fileItemToAsset","ImageEditor","assetImageToEditorValue","edit","applyImageEditToAsset"],"mappings":";;;;;;AAiCO,MAAMA,yBAAyBC,oBAAsC,CAAC,EAAEC,KAAK,EAAE;IAClF,MAAMC,WAAWD,MAAM,gBAAgB;IACvC,MAAME,QAASF,MAAM,KAAK,IAAqB;IAC/C,MAAM,CAACG,SAASC,WAAW,GAAGC,SAAS;IAEvC,MAAMC,MAAMJ,OAAO,OAAOK;IAC1B,MAAMC,WAAWC,aAAaP,UAAUQ,SAASR;IACjD,MAAMS,qBAAqBH,YAAYI,aAAaV,OAAO;IAE3D,OAAO,WAAP,GACI,oBAACW,aAAWA;QACR,QAAQZ,UAAU;QAClB,QAAQA,UAAU;QAClB,QAAQ,CAAC,EAAEa,eAAe,EAAE,iBACxB,wDACI,oBAACC,YAAUA;gBACP,OAAOf,MAAM,KAAK;gBAClB,aAAaA,MAAM,WAAW;gBAC9B,MAAMA,MAAM,IAAI;gBAChB,MAAMA,MAAM,IAAI;gBAChB,MAAK;gBACL,OAAOM;gBACP,YAAYN,MAAM,UAAU;gBAE5B,mBACIW,sBAAsBT,OAAO,OAAOA,MAAM,KAAK,GACzCc,CAAAA,eAAAA,WAAAA,GACI,oBAACC,iBAAeA;wBACX,GAAGD,YAAY;wBAChB,aAAa,CAAC,EAAEE,IAAI,EAAE,iBAClB,oBAACC,mBAAiBA;gCACd,KAAKjB,MAAM,GAAG;gCACd,MAAMgB;gCACN,OAAOhB,MAAM,KAAK;;yBAKlCK;gBAEV,cAAc,IACVO,gBAAgB,CAACM;wBACbpB,MAAM,QAAQ,CAACqB,gBAAgBD;oBACnC;gBAEJ,cAAc,IAAMpB,MAAM,QAAQ,CAAC;gBACnC,YAAYQ,WAAW,IAAMJ,WAAW,QAAQG;gBAEnDC,YAAYN,QAAQ,WAARA,GACT,oBAACoB,aAAWA;gBACR,MAAMnB;gBACN,SAAS,IAAMC,WAAW;gBAC1B,OAAO;oBACH,KAAKF,MAAM,GAAG,IAAI;oBAClB,OAAOA,MAAM,KAAK,EAAE,SAAS;oBAC7B,QAAQA,MAAM,KAAK,EAAE,UAAU;gBACnC;gBACA,OAAOqB,wBAAwBrB,MAAM,KAAK;gBAC1C,QAAQ,CAACsB;oBACLxB,MAAM,QAAQ,CAACyB,sBAAsBvB,OAAOsB;oBAC5CpB,WAAW;gBACf;iBAEJ;;AAKxB"}

package/presentation/fieldRenderers/CmsFilePickerRenderer.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { FileFieldSettings } from "@webiny/app-admin/features/formModel/fieldTypes/FileFieldType.js";
+declare module "@webiny/app-admin/features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        cmsFilePicker: {
+            fieldType: "file";
+            settings: FileFieldSettings;
+        };
+    }
+}
+export declare const CmsFilePickerRenderer: React.ComponentType<{
+    field: import("@webiny/app-admin/index.js").IFieldVM;
+}>;

package/presentation/fieldRenderers/CmsFilePickerRenderer.js

@@ -0,0 +1,36 @@
+import react from "react";
+import { createFieldRenderer } from "@webiny/app-admin/features/formModel/createFieldRenderer.js";
+import { FileManager } from "@webiny/app-admin/base/ui/FileManager.js";
+import { FilePicker } from "@webiny/admin-ui";
+import { isEditableImageUrl, useCmsImageEditor } from "../hooks/useCmsImageEditor.js";
+import { CmsImageEditorDialog } from "./CmsImageEditorDialog.js";
+const CmsFilePickerRenderer = createFieldRenderer(({ field })=>{
+    const settings = field.rendererSettings;
+    const value = field.value;
+    const editor = useCmsImageEditor();
+    return /*#__PURE__*/ react.createElement(FileManager, {
+        images: settings?.images,
+        accept: settings?.accept,
+        own: settings?.own,
+        scope: settings?.scope,
+        render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FilePicker, {
+                label: field.label,
+                description: field.description,
+                note: field.note,
+                hint: field.help,
+                type: "compact",
+                value: value,
+                validation: field.validation,
+                onSelectItem: ()=>showFileManager((file)=>{
+                        field.onChange(file.src || "");
+                    }),
+                onRemoveItem: ()=>field.onChange(null),
+                onEditItem: isEditableImageUrl(value) ? ()=>editor.openFor(value) : void 0
+            }), /*#__PURE__*/ react.createElement(CmsImageEditorDialog, {
+                editor: editor
+            }))
+    });
+});
+export { CmsFilePickerRenderer };
+
+//# sourceMappingURL=CmsFilePickerRenderer.js.map

package/presentation/fieldRenderers/CmsFilePickerRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/fieldRenderers/CmsFilePickerRenderer.js","sources":["../../../src/presentation/fieldRenderers/CmsFilePickerRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"@webiny/app-admin/features/formModel/createFieldRenderer.js\";\nimport { FileManager } from \"@webiny/app-admin/base/ui/FileManager.js\";\nimport { FilePicker } from \"@webiny/admin-ui\";\nimport type { FileManagerFileItem } from \"@webiny/app-admin/base/ui/FileManager.js\";\nimport type { FileFieldSettings } from \"@webiny/app-admin/features/formModel/fieldTypes/FileFieldType.js\";\nimport { isEditableImageUrl, useCmsImageEditor } from \"~/presentation/hooks/useCmsImageEditor.js\";\nimport { CmsImageEditorDialog } from \"./CmsImageEditorDialog.js\";\n\ndeclare module \"@webiny/app-admin/features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        cmsFilePicker: { fieldType: \"file\"; settings: FileFieldSettings };\n    }\n}\n\nexport const CmsFilePickerRenderer = createFieldRenderer<\"cmsFilePicker\">(({ field }) => {\n    const settings = field.rendererSettings as FileFieldSettings | undefined;\n    const value = field.value as string | undefined;\n    const editor = useCmsImageEditor();\n\n    return (\n        <FileManager\n            images={settings?.images}\n            accept={settings?.accept}\n            own={settings?.own}\n            scope={settings?.scope}\n            render={({ showFileManager }) => (\n                <>\n                    <FilePicker\n                        label={field.label}\n                        description={field.description}\n                        note={field.note}\n                        hint={field.help}\n                        type=\"compact\"\n                        value={value}\n                        validation={field.validation}\n                        onSelectItem={() =>\n                            showFileManager((file: FileManagerFileItem) => {\n                                field.onChange(file.src || \"\");\n                            })\n                        }\n                        onRemoveItem={() => field.onChange(null)}\n                        // The \"Edit\" (pencil) action opens the crop / focal point /\n                        // alt editor for image values (edits the file's asset-level\n                        // settings). Hidden for non-images.\n                        onEditItem={\n                            isEditableImageUrl(value) ? () => editor.openFor(value) : undefined\n                        }\n                    />\n                    <CmsImageEditorDialog editor={editor} />\n                </>\n            )}\n        />\n    );\n});\n"],"names":["CmsFilePickerRenderer","createFieldRenderer","field","settings","value","editor","useCmsImageEditor","FileManager","showFileManager","FilePicker","file","isEditableImageUrl","undefined","CmsImageEditorDialog"],"mappings":";;;;;;AAeO,MAAMA,wBAAwBC,oBAAqC,CAAC,EAAEC,KAAK,EAAE;IAChF,MAAMC,WAAWD,MAAM,gBAAgB;IACvC,MAAME,QAAQF,MAAM,KAAK;IACzB,MAAMG,SAASC;IAEf,OAAO,WAAP,GACI,oBAACC,aAAWA;QACR,QAAQJ,UAAU;QAClB,QAAQA,UAAU;QAClB,KAAKA,UAAU;QACf,OAAOA,UAAU;QACjB,QAAQ,CAAC,EAAEK,eAAe,EAAE,iBACxB,wDACI,oBAACC,YAAUA;gBACP,OAAOP,MAAM,KAAK;gBAClB,aAAaA,MAAM,WAAW;gBAC9B,MAAMA,MAAM,IAAI;gBAChB,MAAMA,MAAM,IAAI;gBAChB,MAAK;gBACL,OAAOE;gBACP,YAAYF,MAAM,UAAU;gBAC5B,cAAc,IACVM,gBAAgB,CAACE;wBACbR,MAAM,QAAQ,CAACQ,KAAK,GAAG,IAAI;oBAC/B;gBAEJ,cAAc,IAAMR,MAAM,QAAQ,CAAC;gBAInC,YACIS,mBAAmBP,SAAS,IAAMC,OAAO,OAAO,CAACD,SAASQ;8BAGlE,oBAACC,sBAAoBA;gBAAC,QAAQR;;;AAKlD"}

package/presentation/fieldRenderers/CmsImageEditorDialog.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { useCmsImageEditor } from "../../presentation/hooks/useCmsImageEditor.js";
+interface CmsImageEditorDialogProps {
+    editor: ReturnType<typeof useCmsImageEditor>;
+}
+export declare const CmsImageEditorDialog: ({ editor }: CmsImageEditorDialogProps) => React.JSX.Element | null;
+export {};

package/presentation/fieldRenderers/CmsImageEditorDialog.js

@@ -0,0 +1,32 @@
+import react from "react";
+import { ImageEditor } from "@webiny/admin-ui";
+const CmsImageEditorDialog = ({ editor })=>{
+    const { open, close, file, save } = editor;
+    if (!file) return null;
+    const img = file.metadata?.image;
+    const value = img?.crop || img?.focalPoint ? {
+        crop: img.crop ?? void 0,
+        hotspot: img.focalPoint ? {
+            x: img.focalPoint.x,
+            y: img.focalPoint.y,
+            width: 1,
+            height: 1
+        } : void 0,
+        alt: img.alt ?? void 0,
+        caption: img.caption ?? void 0
+    } : void 0;
+    return /*#__PURE__*/ react.createElement(ImageEditor, {
+        open: open,
+        onClose: close,
+        image: {
+            src: file.src,
+            width: img?.width ?? 0,
+            height: img?.height ?? 0
+        },
+        value: value,
+        onSave: save
+    });
+};
+export { CmsImageEditorDialog };
+
+//# sourceMappingURL=CmsImageEditorDialog.js.map