@webiny/admin-ui 6.4.12-beta.5 → 6.5.0-beta.0

package/FilePicker/primitives/FilePickerPrimitive.d.ts

@@ -6,7 +6,7 @@ import { FileItem, type FileItemDto, type FileItemFormatted } from "../domains/i
 import type { FilePreviewRendererProps, TriggerRendererProps } from "./components/types.js";
 declare const filePickerVariants: (props?: ({
     type?: "area" | "compact" | null | undefined;
-    variant?: "primary" | "secondary" | "ghost" | null | undefined;
+    variant?: "ghost" | "primary" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface FilePickerPrimitiveProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof filePickerVariants> {
     /**
@@ -63,60 +63,61 @@ interface FilePickerPrimitiveProps extends React.HTMLAttributes<HTMLDivElement>,
      */
     value?: FileItemDto | string | null;
 }
-declare const FilePickerPrimitive: (({ className, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, value, variant }: FilePickerPrimitiveProps) => React.JSX.Element) & {
-    original: ({ className, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, value, variant }: FilePickerPrimitiveProps) => React.JSX.Element;
+declare const BaseFilePickerPrimitive: ({ className, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, value, variant }: FilePickerPrimitiveProps) => React.JSX.Element;
+declare const FilePickerPrimitive: typeof BaseFilePickerPrimitive & {
+    original: typeof BaseFilePickerPrimitive;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, value, variant }: FilePickerPrimitiveProps) => React.JSX.Element) & {
-        original: ({ className, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, value, variant }: FilePickerPrimitiveProps) => React.JSX.Element;
+    original: typeof BaseFilePickerPrimitive & {
+        original: typeof BaseFilePickerPrimitive;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, value, variant }: FilePickerPrimitiveProps) => React.JSX.Element) & {
-        original: ({ className, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, value, variant }: FilePickerPrimitiveProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof BaseFilePickerPrimitive & {
+        original: typeof BaseFilePickerPrimitive;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 } & {
     Preview: {
-        Image: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./index.js").ImagePreviewProps) => React.JSX.Element) & {
-            original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./index.js").ImagePreviewProps) => React.JSX.Element;
+        Image: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("./index.js").ImagePreviewProps) => React.JSX.Element) & {
+            original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("./index.js").ImagePreviewProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./index.js").ImagePreviewProps) => React.JSX.Element) & {
-                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./index.js").ImagePreviewProps) => React.JSX.Element;
+            original: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("./index.js").ImagePreviewProps) => React.JSX.Element) & {
+                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("./index.js").ImagePreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./index.js").ImagePreviewProps) => React.JSX.Element) & {
-                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("./index.js").ImagePreviewProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("./index.js").ImagePreviewProps) => React.JSX.Element) & {
+                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("./index.js").ImagePreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        RichItem: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./index.js").RichItemPreviewProps) => React.JSX.Element) & {
-            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./index.js").RichItemPreviewProps) => React.JSX.Element;
+        RichItem: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("./index.js").RichItemPreviewProps) => React.JSX.Element) & {
+            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("./index.js").RichItemPreviewProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./index.js").RichItemPreviewProps) => React.JSX.Element) & {
-                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./index.js").RichItemPreviewProps) => React.JSX.Element;
+            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("./index.js").RichItemPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("./index.js").RichItemPreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./index.js").RichItemPreviewProps) => React.JSX.Element) & {
-                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("./index.js").RichItemPreviewProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("./index.js").RichItemPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("./index.js").RichItemPreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;

package/FilePicker/primitives/components/Trigger.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from "../../../utils.js";
 import type { TriggerDefaultProps } from "../../../FilePicker/primitives/components/types.js";
 declare const triggerVariants: (props?: ({
     type?: "area" | "compact" | null | undefined;
-    variant?: "primary" | "secondary" | "ghost" | null | undefined;
+    variant?: "ghost" | "primary" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface TriggerProps extends TriggerDefaultProps, VariantProps<typeof triggerVariants> {
     renderTrigger?: (props: any) => React.ReactElement<any>;

package/FilePicker/primitives/components/previews/ImagePreview/ImagePreview.d.ts

@@ -1,21 +1,33 @@
 import React from "react";
 import type { FilePreviewDefaultProps } from "../../types.js";
-type ImagePreviewProps = FilePreviewDefaultProps;
-declare const ImagePreview: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: ImagePreviewProps) => React.JSX.Element) & {
-    original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: ImagePreviewProps) => React.JSX.Element;
+type ImagePreviewProps = FilePreviewDefaultProps & {
+    /**
+     * Optional custom image renderer. Lets a consumer render, e.g., a cropped /
+     * focal-point-aware thumbnail while keeping all of the preview chrome. When
+     * omitted (or it returns a falsy value) a plain `<img>` is rendered.
+     */
+    renderImage?: (args: {
+        url: string;
+        name: string;
+        className: string;
+    }) => React.ReactNode;
+};
+declare const DecoratableImagePreview: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: ImagePreviewProps) => React.JSX.Element;
+declare const ImagePreview: typeof DecoratableImagePreview & {
+    original: typeof DecoratableImagePreview;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: ImagePreviewProps) => React.JSX.Element) & {
-        original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: ImagePreviewProps) => React.JSX.Element;
+    original: typeof DecoratableImagePreview & {
+        original: typeof DecoratableImagePreview;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: ImagePreviewProps) => React.JSX.Element) & {
-        original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: ImagePreviewProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableImagePreview & {
+        original: typeof DecoratableImagePreview;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/FilePicker/primitives/components/previews/ImagePreview/ImagePreview.js

@@ -2,7 +2,19 @@ import react from "react";
 import { cn, makeDecoratable } from "../../../../../utils.js";
 import { previewVariants } from "../variants.js";
 import { ItemActions } from "../ItemActions.js";
-const DecoratableImagePreview = ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem })=>/*#__PURE__*/ react.createElement("div", {
+const IMAGE_CLASS = "object-contain size-full";
+const DecoratableImagePreview = ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage })=>{
+    let image = /*#__PURE__*/ react.createElement("img", {
+        src: value.url,
+        alt: value.name,
+        className: IMAGE_CLASS
+    });
+    if ("function" == typeof renderImage) image = renderImage({
+        url: value.url,
+        name: value.name,
+        className: IMAGE_CLASS
+    });
+    return /*#__PURE__*/ react.createElement("div", {
         className: cn("flex justify-center items-center py-sm rounded-md relative", previewVariants({
             variant
         }), className),
@@ -11,11 +23,7 @@ const DecoratableImagePreview = ({ value, className, variant, disabled, onRemove
         className: "cursor-pointer size-[128px] flex justify-center items-center",
         "data-role": "select-image",
         onClick: onReplaceItem
-    }, /*#__PURE__*/ react.createElement("img", {
-        src: value.url,
-        alt: value.name,
-        className: "object-contain size-full"
-    })), /*#__PURE__*/ react.createElement("div", {
+    }, image), /*#__PURE__*/ react.createElement("div", {
         className: "absolute top-1 right-1.5"
     }, /*#__PURE__*/ react.createElement(ItemActions, {
         onRemoveItem: onRemoveItem,
@@ -23,6 +31,7 @@ const DecoratableImagePreview = ({ value, className, variant, disabled, onRemove
         disabled: disabled,
         className: "flex-col"
     })));
+};
 const ImagePreview = makeDecoratable("FileImagePreview", DecoratableImagePreview);
 export { ImagePreview };
 

package/FilePicker/primitives/components/previews/ImagePreview/ImagePreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/ImagePreview/ImagePreview.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/ImagePreview/ImagePreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { previewVariants } from \"../variants.js\";\nimport type { FilePreviewDefaultProps } from \"../../types.js\";\nimport { ItemActions } from \"~/FilePicker/primitives/components/previews/ItemActions.js\";\n\ntype ImagePreviewProps = FilePreviewDefaultProps;\n\nconst DecoratableImagePreview = ({\n    value,\n    className,\n    variant,\n    disabled,\n    onRemoveItem,\n    onReplaceItem,\n    onEditItem\n}: ImagePreviewProps) => {\n    return (\n        <div\n            className={cn(\n                \"flex justify-center items-center py-sm rounded-md relative\",\n                previewVariants({ variant }),\n                className\n            )}\n            data-testid={\"image-preview\"}\n        >\n            <div\n                className={\"cursor-pointer size-[128px] flex justify-center items-center\"}\n                data-role={\"select-image\"}\n                onClick={onReplaceItem}\n            >\n                <img src={value.url} alt={value.name} className={\"object-contain size-full\"} />\n            </div>\n            <div className={\"absolute top-1 right-1.5\"}>\n                <ItemActions\n                    onRemoveItem={onRemoveItem}\n                    onEditItem={onEditItem}\n                    disabled={disabled}\n                    className={\"flex-col\"}\n                />\n            </div>\n        </div>\n    );\n};\n\nconst ImagePreview = makeDecoratable(\"FileImagePreview\", DecoratableImagePreview);\n\nexport { ImagePreview, type ImagePreviewProps };\n"],"names":["DecoratableImagePreview","value","className","variant","disabled","onRemoveItem","onReplaceItem","onEditItem","cn","previewVariants","ItemActions","ImagePreview","makeDecoratable"],"mappings":";;;;AAQA,MAAMA,0BAA0B,CAAC,EAC7BC,KAAK,EACLC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACM,GACT,WAAP,GACI,oBAAC;QACG,WAAWC,GACP,8DACAC,gBAAgB;YAAEN;QAAQ,IAC1BD;QAEJ,eAAa;qBAEb,oBAAC;QACG,WAAW;QACX,aAAW;QACX,SAASI;qBAET,oBAAC;QAAI,KAAKL,MAAM,GAAG;QAAE,KAAKA,MAAM,IAAI;QAAE,WAAW;uBAErD,oBAAC;QAAI,WAAW;qBACZ,oBAACS,aAAWA;QACR,cAAcL;QACd,YAAYE;QACZ,UAAUH;QACV,WAAW;;AAO/B,MAAMO,eAAeC,gBAAgB,oBAAoBZ"}
+{"version":3,"file":"FilePicker/primitives/components/previews/ImagePreview/ImagePreview.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/ImagePreview/ImagePreview.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { previewVariants } from \"../variants.js\";\nimport type { FilePreviewDefaultProps } from \"../../types.js\";\nimport { ItemActions } from \"~/FilePicker/primitives/components/previews/ItemActions.js\";\n\ntype ImagePreviewProps = FilePreviewDefaultProps & {\n    /**\n     * Optional custom image renderer. Lets a consumer render, e.g., a cropped /\n     * focal-point-aware thumbnail while keeping all of the preview chrome. When\n     * omitted (or it returns a falsy value) a plain `<img>` is rendered.\n     */\n    renderImage?: (args: { url: string; name: string; className: string }) => React.ReactNode;\n};\n\nconst IMAGE_CLASS = \"object-contain size-full\";\n\nconst DecoratableImagePreview = ({\n    value,\n    className,\n    variant,\n    disabled,\n    onRemoveItem,\n    onReplaceItem,\n    onEditItem,\n    renderImage\n}: ImagePreviewProps) => {\n    let image: React.ReactElement | React.ReactNode = (\n        <img src={value.url} alt={value.name} className={IMAGE_CLASS} />\n    );\n\n    if (typeof renderImage === \"function\") {\n        image = renderImage({ url: value.url, name: value.name, className: IMAGE_CLASS });\n    }\n\n    return (\n        <div\n            className={cn(\n                \"flex justify-center items-center py-sm rounded-md relative\",\n                previewVariants({ variant }),\n                className\n            )}\n            data-testid={\"image-preview\"}\n        >\n            <div\n                className={\"cursor-pointer size-[128px] flex justify-center items-center\"}\n                data-role={\"select-image\"}\n                onClick={onReplaceItem}\n            >\n                {image}\n            </div>\n            <div className={\"absolute top-1 right-1.5\"}>\n                <ItemActions\n                    onRemoveItem={onRemoveItem}\n                    onEditItem={onEditItem}\n                    disabled={disabled}\n                    className={\"flex-col\"}\n                />\n            </div>\n        </div>\n    );\n};\n\nconst ImagePreview = makeDecoratable(\"FileImagePreview\", DecoratableImagePreview);\n\nexport { ImagePreview, type ImagePreviewProps };\n"],"names":["IMAGE_CLASS","DecoratableImagePreview","value","className","variant","disabled","onRemoveItem","onReplaceItem","onEditItem","renderImage","image","cn","previewVariants","ItemActions","ImagePreview","makeDecoratable"],"mappings":";;;;AAeA,MAAMA,cAAc;AAEpB,MAAMC,0BAA0B,CAAC,EAC7BC,KAAK,EACLC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,WAAW,EACK;IAChB,IAAIC,QAAAA,WAAAA,GACA,oBAAC;QAAI,KAAKR,MAAM,GAAG;QAAE,KAAKA,MAAM,IAAI;QAAE,WAAWF;;IAGrD,IAAI,AAAuB,cAAvB,OAAOS,aACPC,QAAQD,YAAY;QAAE,KAAKP,MAAM,GAAG;QAAE,MAAMA,MAAM,IAAI;QAAE,WAAWF;IAAY;IAGnF,OAAO,WAAP,GACI,oBAAC;QACG,WAAWW,GACP,8DACAC,gBAAgB;YAAER;QAAQ,IAC1BD;QAEJ,eAAa;qBAEb,oBAAC;QACG,WAAW;QACX,aAAW;QACX,SAASI;OAERG,QAAAA,WAAAA,GAEL,oBAAC;QAAI,WAAW;qBACZ,oBAACG,aAAWA;QACR,cAAcP;QACd,YAAYE;QACZ,UAAUH;QACV,WAAW;;AAK/B;AAEA,MAAMS,eAAeC,gBAAgB,oBAAoBd"}

package/FilePicker/primitives/components/previews/ItemActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/ItemActions.js","sources":["../../../../../src/FilePicker/primitives/components/previews/ItemActions.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ReplaceIcon } from \"@webiny/icons/file_upload.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { cn } from \"~/utils.js\";\n\ninterface ItemActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n    onRemoveItem?: () => void;\n    onEditItem?: () => void;\n    onReplaceItem?: () => void;\n    disabled?: boolean;\n    small?: boolean;\n}\n\nconst ItemActions = ({\n    disabled,\n    onRemoveItem,\n    onEditItem,\n    onReplaceItem,\n    small,\n    className,\n    ...props\n}: ItemActionsProps) => {\n    const iconSize = small ? \"default\" : \"lg\";\n    const buttonSize = small ? \"xs\" : \"sm\";\n\n    return (\n        <div {...props} className={cn(\"flex justify-center items-center gap-xs\", className)}>\n            {/* Replace is the action a populated picker mainly exists for, and it was only ever\n                shown in the `small` layout - elsewhere it hid behind clicking the thumbnail. */}\n            {onReplaceItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<ReplaceIcon />}\n                            label={\"Replace\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onReplaceItem}\n                    disabled={disabled}\n                />\n            )}\n\n            {onEditItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<EditIcon />}\n                            label={\"Edit\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onEditItem}\n                    disabled={disabled}\n                />\n            )}\n\n            {onRemoveItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<TrashIcon />}\n                            label={\"Remove\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onRemoveItem}\n                    disabled={disabled}\n                />\n            )}\n        </div>\n    );\n};\n\nexport { ItemActions, type ItemActionsProps };\n"],"names":["ItemActions","disabled","onRemoveItem","onEditItem","onReplaceItem","small","className","props","iconSize","buttonSize","cn","IconButton","Icon","ReplaceIcon","EditIcon","TrashIcon"],"mappings":";;;;;;;AAgBA,MAAMA,cAAc,CAAC,EACjBC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,aAAa,EACbC,KAAK,EACLC,SAAS,EACT,GAAGC,OACY;IACf,MAAMC,WAAWH,QAAQ,YAAY;IACrC,MAAMI,aAAaJ,QAAQ,OAAO;IAElC,OAAO,WAAP,GACI,oBAAC;QAAK,GAAGE,KAAK;QAAE,WAAWG,GAAG,2CAA2CJ;OAGpEF,iBAAiB,WAAjBA,GACG,oBAACO,YAAUA;QACP,oBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACC,gBAAWA;YAClB,OAAO;YACP,MAAM;YACN,OAAO;;QAGf,SAAS;QACT,MAAMJ;QACN,UAAUD;QACV,SAASJ;QACT,UAAUH;QAIjBE,cAAc,WAAdA,GACG,oBAACQ,YAAUA;QACP,oBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACE,yBAAQA;YACf,OAAO;YACP,MAAM;YACN,OAAO;;QAGf,SAAS;QACT,MAAML;QACN,UAAUD;QACV,SAASL;QACT,UAAUF;QAIjBC,gBAAgB,WAAhBA,GACG,oBAACS,YAAUA;QACP,oBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACG,2BAASA;YAChB,OAAO;YACP,MAAM;YACN,OAAO;;QAGf,SAAS;QACT,MAAMN;QACN,UAAUD;QACV,SAASN;QACT,UAAUD;;AAK9B"}
+{"version":3,"file":"FilePicker/primitives/components/previews/ItemActions.js","sources":["../../../../../src/FilePicker/primitives/components/previews/ItemActions.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ReplaceIcon } from \"@webiny/icons/file_upload.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { cn } from \"~/utils.js\";\n\ninterface ItemActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n    onRemoveItem?: () => void;\n    onEditItem?: () => void;\n    onReplaceItem?: () => void;\n    disabled?: boolean;\n    small?: boolean;\n}\n\nconst ItemActions = ({\n    disabled,\n    onRemoveItem,\n    onEditItem,\n    onReplaceItem,\n    small,\n    className,\n    ...props\n}: ItemActionsProps) => {\n    const iconSize = small ? \"default\" : \"lg\";\n    const buttonSize = small ? \"xs\" : \"sm\";\n\n    return (\n        <div {...props} className={cn(\"flex justify-center items-center gap-xs\", className)}>\n            {onReplaceItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<ReplaceIcon />}\n                            label={\"Replace\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onReplaceItem}\n                    disabled={disabled}\n                />\n            )}\n\n            {onEditItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<EditIcon />}\n                            label={\"Edit\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onEditItem}\n                    disabled={disabled}\n                />\n            )}\n\n            {onRemoveItem && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={<TrashIcon />}\n                            label={\"Remove\"}\n                            size={\"md\"}\n                            color={\"neutral-light\"}\n                        />\n                    }\n                    variant={\"ghost\"}\n                    size={buttonSize}\n                    iconSize={iconSize}\n                    onClick={onRemoveItem}\n                    disabled={disabled}\n                />\n            )}\n        </div>\n    );\n};\n\nexport { ItemActions, type ItemActionsProps };\n"],"names":["ItemActions","disabled","onRemoveItem","onEditItem","onReplaceItem","small","className","props","iconSize","buttonSize","cn","IconButton","Icon","ReplaceIcon","EditIcon","TrashIcon"],"mappings":";;;;;;;AAgBA,MAAMA,cAAc,CAAC,EACjBC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,aAAa,EACbC,KAAK,EACLC,SAAS,EACT,GAAGC,OACY;IACf,MAAMC,WAAWH,QAAQ,YAAY;IACrC,MAAMI,aAAaJ,QAAQ,OAAO;IAElC,OAAO,WAAP,GACI,oBAAC;QAAK,GAAGE,KAAK;QAAE,WAAWG,GAAG,2CAA2CJ;OACpEF,iBAAiB,WAAjBA,GACG,oBAACO,YAAUA;QACP,oBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACC,gBAAWA;YAClB,OAAO;YACP,MAAM;YACN,OAAO;;QAGf,SAAS;QACT,MAAMJ;QACN,UAAUD;QACV,SAASJ;QACT,UAAUH;QAIjBE,cAAc,WAAdA,GACG,oBAACQ,YAAUA;QACP,oBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACE,yBAAQA;YACf,OAAO;YACP,MAAM;YACN,OAAO;;QAGf,SAAS;QACT,MAAML;QACN,UAAUD;QACV,SAASL;QACT,UAAUF;QAIjBC,gBAAgB,WAAhBA,GACG,oBAACS,YAAUA;QACP,oBACI,oBAACC,MAAIA;YACD,oBAAM,oBAACG,2BAASA;YAChB,OAAO;YACP,MAAM;YACN,OAAO;;QAGf,SAAS;QACT,MAAMN;QACN,UAAUD;QACV,SAASN;QACT,UAAUD;;AAK9B"}

package/FilePicker/primitives/components/previews/ItemDescription.js

@@ -7,7 +7,7 @@ const ItemDescription = ({ className, disabled, item, small, ...props })=>{
         unitSeparator: " "
     });
     return /*#__PURE__*/ react.createElement("div", {
-        className: cn("flex flex-col gap-xxs overflow-hidden min-w-0", className),
+        className: cn("flex flex-col gap-xxs overflow-hidden flex-1 min-w-0", className),
         ...props
     }, /*#__PURE__*/ react.createElement(Text, {
         size: "sm",

package/FilePicker/primitives/components/previews/ItemDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/ItemDescription.js","sources":["../../../../../src/FilePicker/primitives/components/previews/ItemDescription.tsx"],"sourcesContent":["import React from \"react\";\nimport bytes from \"bytes\";\nimport { Text } from \"~/Text/index.js\";\nimport { cn } from \"~/utils.js\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\n\ninterface ItemDescriptionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n    item: FileItemFormatted;\n    disabled?: boolean;\n    small?: boolean;\n}\n\nconst ItemDescription = ({ className, disabled, item, small, ...props }: ItemDescriptionProps) => {\n    const formattedSize = item.size && bytes.format(item.size, { unitSeparator: \" \" });\n\n    return (\n        <div className={cn(\"flex flex-col gap-xxs overflow-hidden min-w-0\", className)} {...props}>\n            <Text\n                size=\"sm\"\n                as=\"div\"\n                className={cn(\n                    \"truncate overflow-hidden whitespace-nowrap w-full\",\n                    disabled ? \"text-neutral-disabled\" : \"text-neutral-primary\"\n                )}\n            >\n                {item.name}\n            </Text>\n            {!small && (formattedSize || item.mimeType) && (\n                <Text\n                    size=\"sm\"\n                    className={cn(\n                        \"truncate overflow-hidden whitespace-nowrap w-full\",\n                        disabled ? \"text-neutral-disabled\" : \"text-neutral-muted\"\n                    )}\n                >\n                    {[formattedSize, item.mimeType].filter(Boolean).join(\" - \")}\n                </Text>\n            )}\n        </div>\n    );\n};\n\nexport { ItemDescription, type ItemDescriptionProps };\n"],"names":["ItemDescription","className","disabled","item","small","props","formattedSize","bytes","cn","Text","Boolean"],"mappings":";;;;AAYA,MAAMA,kBAAkB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,OAA6B;IACzF,MAAMC,gBAAgBH,KAAK,IAAI,IAAII,MAAM,MAAM,CAACJ,KAAK,IAAI,EAAE;QAAE,eAAe;IAAI;IAEhF,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWK,GAAG,iDAAiDP;QAAa,GAAGI,KAAK;qBACrF,oBAACI,MAAIA;QACD,MAAK;QACL,IAAG;QACH,WAAWD,GACP,qDACAN,WAAW,0BAA0B;OAGxCC,KAAK,IAAI,GAEb,CAACC,SAAUE,CAAAA,iBAAiBH,KAAK,QAAO,mBACrC,oBAACM,MAAIA;QACD,MAAK;QACL,WAAWD,GACP,qDACAN,WAAW,0BAA0B;OAGxC;QAACI;QAAeH,KAAK,QAAQ;KAAC,CAAC,MAAM,CAACO,SAAS,IAAI,CAAC;AAKzE"}
+{"version":3,"file":"FilePicker/primitives/components/previews/ItemDescription.js","sources":["../../../../../src/FilePicker/primitives/components/previews/ItemDescription.tsx"],"sourcesContent":["import React from \"react\";\nimport bytes from \"bytes\";\nimport { Text } from \"~/Text/index.js\";\nimport { cn } from \"~/utils.js\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\n\ninterface ItemDescriptionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n    item: FileItemFormatted;\n    disabled?: boolean;\n    small?: boolean;\n}\n\nconst ItemDescription = ({ className, disabled, item, small, ...props }: ItemDescriptionProps) => {\n    const formattedSize = item.size && bytes.format(item.size, { unitSeparator: \" \" });\n\n    return (\n        <div\n            className={cn(\"flex flex-col gap-xxs overflow-hidden flex-1 min-w-0\", className)}\n            {...props}\n        >\n            <Text\n                size=\"sm\"\n                as=\"div\"\n                className={cn(\n                    \"truncate overflow-hidden whitespace-nowrap w-full\",\n                    disabled ? \"text-neutral-disabled\" : \"text-neutral-primary\"\n                )}\n            >\n                {item.name}\n            </Text>\n            {!small && (formattedSize || item.mimeType) && (\n                <Text\n                    size=\"sm\"\n                    className={cn(\n                        \"truncate overflow-hidden whitespace-nowrap w-full\",\n                        disabled ? \"text-neutral-disabled\" : \"text-neutral-muted\"\n                    )}\n                >\n                    {[formattedSize, item.mimeType].filter(Boolean).join(\" - \")}\n                </Text>\n            )}\n        </div>\n    );\n};\n\nexport { ItemDescription, type ItemDescriptionProps };\n"],"names":["ItemDescription","className","disabled","item","small","props","formattedSize","bytes","cn","Text","Boolean"],"mappings":";;;;AAYA,MAAMA,kBAAkB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,OAA6B;IACzF,MAAMC,gBAAgBH,KAAK,IAAI,IAAII,MAAM,MAAM,CAACJ,KAAK,IAAI,EAAE;QAAE,eAAe;IAAI;IAEhF,OAAO,WAAP,GACI,oBAAC;QACG,WAAWK,GAAG,wDAAwDP;QACrE,GAAGI,KAAK;qBAET,oBAACI,MAAIA;QACD,MAAK;QACL,IAAG;QACH,WAAWD,GACP,qDACAN,WAAW,0BAA0B;OAGxCC,KAAK,IAAI,GAEb,CAACC,SAAUE,CAAAA,iBAAiBH,KAAK,QAAO,mBACrC,oBAACM,MAAIA;QACD,MAAK;QACL,WAAWD,GACP,qDACAN,WAAW,0BAA0B;OAGxC;QAACI;QAAeH,KAAK,QAAQ;KAAC,CAAC,MAAM,CAACO,SAAS,IAAI,CAAC;AAKzE"}

package/FilePicker/primitives/components/previews/RichItemPreview/FileType.d.ts

@@ -1,9 +1,5 @@
 import React from "react";
 import type { FileItemFormatted } from "../../../../../FilePicker/index.js";
 type FileTypeProps = Pick<FileItemFormatted, "mimeType" | "name">;
-/**
- * The stand-in for a file that cannot be shown as a picture: an icon of its format, falling back
- * to a generic one for anything unrecognised.
- */
 declare const FileType: ({ mimeType, name }: FileTypeProps) => React.JSX.Element;
 export { FileType, type FileTypeProps };

package/FilePicker/primitives/components/previews/RichItemPreview/FileType.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/FileType.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/FileType.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\n\nimport csvThumb from \"../assets/csv.svg\";\nimport docThumb from \"../assets/doc.svg\";\nimport docxThumb from \"../assets/docx.svg\";\nimport fileThumb from \"../assets/file.svg\";\nimport pdfThumb from \"../assets/pdf.svg\";\nimport pptThumb from \"../assets/ppt.svg\";\nimport pptxThumb from \"../assets/pptx.svg\";\nimport txtThumb from \"../assets/txt.svg\";\nimport xlsThumb from \"../assets/xls.svg\";\nimport xlsxThumb from \"../assets/xlsx.svg\";\n\ntype FileTypeProps = Pick<FileItemFormatted, \"mimeType\" | \"name\">;\n\n/**\n * The stand-in for a file that cannot be shown as a picture: an icon of its format, falling back\n * to a generic one for anything unrecognised.\n */\nconst FileType = ({ mimeType = \"\", name }: FileTypeProps) => {\n    const getMimeTypeSrc = (mimeType: string) => {\n        switch (mimeType) {\n            case \"text/csv\": // .csv\n                return csvThumb;\n            case \"application/msword\": // .doc\n                return docThumb;\n            case \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\": // .docx\n                return docxThumb;\n            case \"application/pdf\": // .pdf\n                return pdfThumb;\n            case \"application/vnd.ms-powerpoint\": // .ppt\n                return pptThumb;\n            case \"application/vnd.openxmlformats-officedocument.presentationml.presentation\": // .pptx\n                return pptxThumb;\n            case \"text/plain\": // .txt\n                return txtThumb;\n            case \"application/vnd.ms-excel\": // .xls\n                return xlsThumb;\n            case \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\": // .xlsx\n                return xlsxThumb;\n            default:\n                return fileThumb;\n        }\n    };\n\n    return (\n        <img\n            src={getMimeTypeSrc(mimeType)}\n            alt={name}\n            className=\"size-full object-contain p-sm-extra\"\n        />\n    );\n};\n\nexport { FileType, type FileTypeProps };\n"],"names":["FileType","mimeType","name","getMimeTypeSrc","csvThumb","docThumb","docxThumb","pdfThumb","pptThumb","pptxThumb","txtThumb","xlsThumb","xlsxThumb","fileThumb"],"mappings":";;;;;;;;;;;AAoBA,MAAMA,WAAW,CAAC,EAAEC,WAAW,EAAE,EAAEC,IAAI,EAAiB;IACpD,MAAMC,iBAAiB,CAACF;QACpB,OAAQA;YACJ,KAAK;gBACD,OAAOG;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX;gBACI,OAAOC;QACf;IACJ;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,KAAKV,eAAeF;QACpB,KAAKC;QACL,WAAU;;AAGtB"}
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/FileType.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/FileType.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\n\nimport csvThumb from \"../assets/csv.svg\";\nimport docThumb from \"../assets/doc.svg\";\nimport docxThumb from \"../assets/docx.svg\";\nimport fileThumb from \"../assets/file.svg\";\nimport pdfThumb from \"../assets/pdf.svg\";\nimport pptThumb from \"../assets/ppt.svg\";\nimport pptxThumb from \"../assets/pptx.svg\";\nimport txtThumb from \"../assets/txt.svg\";\nimport xlsThumb from \"../assets/xls.svg\";\nimport xlsxThumb from \"../assets/xlsx.svg\";\n\ntype FileTypeProps = Pick<FileItemFormatted, \"mimeType\" | \"name\">;\n\nconst FileType = ({ mimeType = \"\", name }: FileTypeProps) => {\n    const getMimeTypeSrc = (mimeType: string) => {\n        switch (mimeType) {\n            case \"text/csv\": // .csv\n                return csvThumb;\n            case \"application/msword\": // .doc\n                return docThumb;\n            case \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\": // .docx\n                return docxThumb;\n            case \"application/pdf\": // .pdf\n                return pdfThumb;\n            case \"application/vnd.ms-powerpoint\": // .ppt\n                return pptThumb;\n            case \"application/vnd.openxmlformats-officedocument.presentationml.presentation\": // .pptx\n                return pptxThumb;\n            case \"text/plain\": // .txt\n                return txtThumb;\n            case \"application/vnd.ms-excel\": // .xls\n                return xlsThumb;\n            case \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\": // .xlsx\n                return xlsxThumb;\n            default:\n                return fileThumb;\n        }\n    };\n\n    return (\n        <img\n            src={getMimeTypeSrc(mimeType)}\n            alt={name}\n            className=\"size-full object-contain p-sm-extra\"\n        />\n    );\n};\n\nexport { FileType, type FileTypeProps };\n"],"names":["FileType","mimeType","name","getMimeTypeSrc","csvThumb","docThumb","docxThumb","pdfThumb","pptThumb","pptxThumb","txtThumb","xlsThumb","xlsxThumb","fileThumb"],"mappings":";;;;;;;;;;;AAgBA,MAAMA,WAAW,CAAC,EAAEC,WAAW,EAAE,EAAEC,IAAI,EAAiB;IACpD,MAAMC,iBAAiB,CAACF;QACpB,OAAQA;YACJ,KAAK;gBACD,OAAOG;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX,KAAK;gBACD,OAAOC;YACX;gBACI,OAAOC;QACf;IACJ;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,KAAKV,eAAeF;QACpB,KAAKC;QACL,WAAU;;AAGtB"}

package/FilePicker/primitives/components/previews/RichItemPreview/Placeholder.d.ts

@@ -1,8 +1,5 @@
 import React from "react";
 import type { FileItemFormatted } from "../../../../../FilePicker/index.js";
 type PlaceholderProps = Pick<FileItemFormatted, "name">;
-/**
- * Shown when the caller asks for a placeholder rather than the file's own preview.
- */
 declare const Placeholder: ({ name }: PlaceholderProps) => React.JSX.Element;
 export { Placeholder, type PlaceholderProps };

package/FilePicker/primitives/components/previews/RichItemPreview/Placeholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/Placeholder.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/Placeholder.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as PlaceholderIcon } from \"@webiny/icons/image.svg\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\ntype PlaceholderProps = Pick<FileItemFormatted, \"name\">;\n\n/**\n * Shown when the caller asks for a placeholder rather than the file's own preview.\n */\nconst Placeholder = ({ name }: PlaceholderProps) => {\n    return (\n        <div className={\"size-full flex justify-center items-center bg-transparent\"}>\n            <Icon icon={<PlaceholderIcon />} label={name} size={\"lg\"} color={\"neutral-light\"} />\n        </div>\n    );\n};\n\nexport { Placeholder, type PlaceholderProps };\n"],"names":["Placeholder","name","Icon","PlaceholderIcon"],"mappings":";;;AAUA,MAAMA,cAAc,CAAC,EAAEC,IAAI,EAAoB,GACpC,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,MAAIA;QAAC,oBAAM,oBAACC,gBAAeA;QAAK,OAAOF;QAAM,MAAM;QAAM,OAAO"}
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/Placeholder.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/Placeholder.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as PlaceholderIcon } from \"@webiny/icons/image.svg\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\ntype PlaceholderProps = Pick<FileItemFormatted, \"name\">;\n\nconst Placeholder = ({ name }: PlaceholderProps) => {\n    return (\n        <div className={\"size-full flex justify-center items-center bg-transparent\"}>\n            <Icon icon={<PlaceholderIcon />} label={name} size={\"lg\"} color={\"neutral-light\"} />\n        </div>\n    );\n};\n\nexport { Placeholder, type PlaceholderProps };\n"],"names":["Placeholder","name","Icon","PlaceholderIcon"],"mappings":";;;AAOA,MAAMA,cAAc,CAAC,EAAEC,IAAI,EAAoB,GACpC,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,MAAIA;QAAC,oBAAM,oBAACC,gBAAeA;QAAK,OAAOF;QAAM,MAAM;QAAM,OAAO"}

package/FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.d.ts

@@ -2,22 +2,28 @@ import React from "react";
 import type { FilePreviewDefaultProps } from "../../types.js";
 type RichItemPreviewProps = FilePreviewDefaultProps & {
     preview?: "thumbnail" | "file-type" | "placeholder";
+    /** Optional custom image renderer for the thumbnail (e.g. a cropped preview). */
+    renderImage?: (args: {
+        url: string;
+        name: string;
+    }) => React.ReactNode;
 };
-declare const RichItemPreview: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: RichItemPreviewProps) => React.JSX.Element) & {
-    original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: RichItemPreviewProps) => React.JSX.Element;
+declare const DecoratableRichItemPreview: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: RichItemPreviewProps) => React.JSX.Element;
+declare const RichItemPreview: typeof DecoratableRichItemPreview & {
+    original: typeof DecoratableRichItemPreview;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: RichItemPreviewProps) => React.JSX.Element) & {
-        original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: RichItemPreviewProps) => React.JSX.Element;
+    original: typeof DecoratableRichItemPreview & {
+        original: typeof DecoratableRichItemPreview;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: RichItemPreviewProps) => React.JSX.Element) & {
-        original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: RichItemPreviewProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableRichItemPreview & {
+        original: typeof DecoratableRichItemPreview;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.js

@@ -8,7 +8,7 @@ import { ItemDescription } from "../ItemDescription.js";
 import { ItemActions } from "../ItemActions.js";
 import { TruncatedFileName } from "../TruncatedFileName.js";
 import { previewVariants } from "../variants.js";
-const DecoratableRichItemPreview = ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props })=>{
+const DecoratableRichItemPreview = ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props })=>{
     const actions = {
         onRemoveItem,
         onReplaceItem,
@@ -25,7 +25,7 @@ const DecoratableRichItemPreview = ({ className, disabled, onRemoveItem, onRepla
     ].filter(Boolean).join(" - ");
     return /*#__PURE__*/ react.createElement("div", {
         "data-testid": "image-preview",
-        className: cn("@container w-full rounded-md", previewVariants({
+        className: cn("w-full rounded-md @container", previewVariants({
             variant,
             disabled
         }), className),
@@ -42,7 +42,8 @@ const DecoratableRichItemPreview = ({ className, disabled, onRemoveItem, onRepla
         ...value,
         variant: "banner",
         disabled: disabled,
-        preview: preview
+        preview: preview,
+        renderImage: renderImage
     }), /*#__PURE__*/ react.createElement(ThumbnailActions, actions)), /*#__PURE__*/ react.createElement("div", {
         className: "flex flex-col gap-xxs min-w-0 px-xxs pb-xxs"
     }, /*#__PURE__*/ react.createElement(TruncatedFileName, {
@@ -60,7 +61,8 @@ const DecoratableRichItemPreview = ({ className, disabled, onRemoveItem, onRepla
     }, /*#__PURE__*/ react.createElement(RichItemThumbnail, {
         ...value,
         disabled: disabled,
-        preview: preview
+        preview: preview,
+        renderImage: renderImage
     })), /*#__PURE__*/ react.createElement(ItemDescription, {
         item: value,
         disabled: disabled,

package/FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.tsx"],"sourcesContent":["import React from \"react\";\nimport bytes from \"bytes\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { RichItemThumbnail } from \"./RichItemThumbnail.js\";\nimport { ThumbnailActions } from \"./ThumbnailActions.js\";\nimport { ItemDescription } from \"../ItemDescription.js\";\nimport { ItemActions } from \"~/FilePicker/primitives/components/previews/ItemActions.js\";\nimport { TruncatedFileName } from \"../TruncatedFileName.js\";\nimport { previewVariants } from \"../variants.js\";\nimport type { FilePreviewDefaultProps } from \"../../types.js\";\n\ntype RichItemPreviewProps = FilePreviewDefaultProps & {\n    preview?: \"thumbnail\" | \"file-type\" | \"placeholder\";\n};\n\nconst DecoratableRichItemPreview = ({\n    className,\n    disabled,\n    onRemoveItem,\n    onReplaceItem,\n    onEditItem,\n    value,\n    variant,\n    preview,\n    ...props\n}: RichItemPreviewProps) => {\n    const actions = { onRemoveItem, onReplaceItem, onEditItem, disabled };\n\n    // Type and size share a line of their own beneath the name, so the name gets the full width\n    // and the two secondary facts read as one group rather than crowding it.\n    const formattedSize = value.size\n        ? bytes.format(value.size, { unitSeparator: \" \", decimalPlaces: 0 })\n        : \"\";\n    const details = [value.mimeType, formattedSize].filter(Boolean).join(\" - \");\n\n    return (\n        <div\n            data-testid=\"image-preview\"\n            className={cn(\n                \"@container w-full rounded-md\",\n                previewVariants({ variant, disabled }),\n                className\n            )}\n            {...props}\n        >\n            {/* Two layouts, chosen by the preview's own width rather than the viewport's, because\n                the same component renders in a ~200px sidebar and in a wide form field. Below\n                280px a side-by-side row cannot give the file name a readable share of the width,\n                so the thumbnail goes full width with the name and details beneath it, and the\n                actions move onto the thumbnail rather than costing a row of their own. */}\n            <div data-role=\"select-image\" className={\"@min-[280px]:hidden\"}>\n                <div className={\"flex flex-col gap-xs p-xs\"}>\n                    <div className={\"group relative cursor-pointer\"} onClick={onReplaceItem}>\n                        <RichItemThumbnail\n                            {...value}\n                            variant={\"banner\"}\n                            disabled={disabled}\n                            preview={preview}\n                        />\n                        <ThumbnailActions {...actions} />\n                    </div>\n\n                    <div className={\"flex flex-col gap-xxs min-w-0 px-xxs pb-xxs\"}>\n                        <TruncatedFileName\n                            name={value.name}\n                            className={disabled ? \"text-neutral-disabled\" : \"text-neutral-primary\"}\n                        />\n                        {details ? (\n                            <Text\n                                size=\"sm\"\n                                className={cn(\n                                    \"truncate\",\n                                    disabled ? \"text-neutral-disabled\" : \"text-neutral-muted\"\n                                )}\n                            >\n                                {details}\n                            </Text>\n                        ) : null}\n                    </div>\n                </div>\n            </div>\n\n            <div\n                data-role=\"select-image\"\n                className={\"hidden @min-[280px]:flex items-center gap-sm-extra min-w-0\"}\n            >\n                <div className={\"shrink-0 cursor-pointer\"} onClick={onReplaceItem}>\n                    <RichItemThumbnail {...value} disabled={disabled} preview={preview} />\n                </div>\n\n                <ItemDescription\n                    item={value}\n                    disabled={disabled}\n                    onClick={onReplaceItem}\n                    className={\"grow basis-0 cursor-pointer\"}\n                />\n\n                <ItemActions {...actions} className={\"ml-auto pr-sm-extra\"} />\n            </div>\n        </div>\n    );\n};\n\nconst RichItemPreview = makeDecoratable(\"RichItemPreview\", DecoratableRichItemPreview);\n\nexport { RichItemPreview, type RichItemPreviewProps };\n"],"names":["DecoratableRichItemPreview","className","disabled","onRemoveItem","onReplaceItem","onEditItem","value","variant","preview","props","actions","formattedSize","bytes","details","Boolean","cn","previewVariants","RichItemThumbnail","ThumbnailActions","TruncatedFileName","Text","ItemDescription","ItemActions","RichItemPreview","makeDecoratable"],"mappings":";;;;;;;;;;AAgBA,MAAMA,6BAA6B,CAAC,EAChCC,SAAS,EACTC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,KAAK,EACLC,OAAO,EACPC,OAAO,EACP,GAAGC,OACgB;IACnB,MAAMC,UAAU;QAAEP;QAAcC;QAAeC;QAAYH;IAAS;IAIpE,MAAMS,gBAAgBL,MAAM,IAAI,GAC1BM,MAAM,MAAM,CAACN,MAAM,IAAI,EAAE;QAAE,eAAe;QAAK,eAAe;IAAE,KAChE;IACN,MAAMO,UAAU;QAACP,MAAM,QAAQ;QAAEK;KAAc,CAAC,MAAM,CAACG,SAAS,IAAI,CAAC;IAErE,OAAO,WAAP,GACI,oBAAC;QACG,eAAY;QACZ,WAAWC,GACP,gCACAC,gBAAgB;YAAET;YAASL;QAAS,IACpCD;QAEH,GAAGQ,KAAK;qBAOT,oBAAC;QAAI,aAAU;QAAe,WAAW;qBACrC,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;QAAiC,SAASL;qBACtD,oBAACa,mBAAiBA;QACb,GAAGX,KAAK;QACT,SAAS;QACT,UAAUJ;QACV,SAASM;sBAEb,oBAACU,kBAAqBR,WAAAA,WAAAA,GAG1B,oBAAC;QAAI,WAAW;qBACZ,oBAACS,mBAAiBA;QACd,MAAMb,MAAM,IAAI;QAChB,WAAWJ,WAAW,0BAA0B;QAEnDW,UAAU,WAAVA,GACG,oBAACO,MAAIA;QACD,MAAK;QACL,WAAWL,GACP,YACAb,WAAW,0BAA0B;OAGxCW,WAEL,uBAKhB,oBAAC;QACG,aAAU;QACV,WAAW;qBAEX,oBAAC;QAAI,WAAW;QAA2B,SAAST;qBAChD,oBAACa,mBAAiBA;QAAE,GAAGX,KAAK;QAAE,UAAUJ;QAAU,SAASM;uBAG/D,oBAACa,iBAAeA;QACZ,MAAMf;QACN,UAAUJ;QACV,SAASE;QACT,WAAW;sBAGf,oBAACkB,aAAWA;QAAE,GAAGZ,OAAO;QAAE,WAAW;;AAIrD;AAEA,MAAMa,kBAAkBC,gBAAgB,mBAAmBxB"}
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview.tsx"],"sourcesContent":["import React from \"react\";\nimport bytes from \"bytes\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { RichItemThumbnail } from \"./RichItemThumbnail.js\";\nimport { ThumbnailActions } from \"./ThumbnailActions.js\";\nimport { ItemDescription } from \"../ItemDescription.js\";\nimport { ItemActions } from \"~/FilePicker/primitives/components/previews/ItemActions.js\";\nimport { TruncatedFileName } from \"../TruncatedFileName.js\";\nimport { previewVariants } from \"../variants.js\";\nimport type { FilePreviewDefaultProps } from \"../../types.js\";\n\ntype RichItemPreviewProps = FilePreviewDefaultProps & {\n    preview?: \"thumbnail\" | \"file-type\" | \"placeholder\";\n    /** Optional custom image renderer for the thumbnail (e.g. a cropped preview). */\n    renderImage?: (args: { url: string; name: string }) => React.ReactNode;\n};\n\nconst DecoratableRichItemPreview = ({\n    className,\n    disabled,\n    onRemoveItem,\n    onReplaceItem,\n    onEditItem,\n    value,\n    variant,\n    preview,\n    renderImage,\n    ...props\n}: RichItemPreviewProps) => {\n    const actions = { onRemoveItem, onReplaceItem, onEditItem, disabled };\n\n    const formattedSize = value.size\n        ? bytes.format(value.size, { unitSeparator: \" \", decimalPlaces: 0 })\n        : \"\";\n    const details = [value.mimeType, formattedSize].filter(Boolean).join(\" - \");\n\n    return (\n        <div\n            data-testid=\"image-preview\"\n            className={cn(\n                \"w-full rounded-md @container\",\n                previewVariants({ variant, disabled }),\n                className\n            )}\n            {...props}\n        >\n            {/* Stacked layout for narrow containers (below 280px). */}\n            <div data-role=\"select-image\" className={\"@min-[280px]:hidden\"}>\n                <div className={\"flex flex-col gap-xs p-xs\"}>\n                    <div className={\"group relative cursor-pointer\"} onClick={onReplaceItem}>\n                        <RichItemThumbnail\n                            {...value}\n                            variant={\"banner\"}\n                            disabled={disabled}\n                            preview={preview}\n                            renderImage={renderImage}\n                        />\n                        <ThumbnailActions {...actions} />\n                    </div>\n\n                    <div className={\"flex flex-col gap-xxs min-w-0 px-xxs pb-xxs\"}>\n                        <TruncatedFileName\n                            name={value.name}\n                            className={disabled ? \"text-neutral-disabled\" : \"text-neutral-primary\"}\n                        />\n                        {details ? (\n                            <Text\n                                size=\"sm\"\n                                className={cn(\n                                    \"truncate\",\n                                    disabled ? \"text-neutral-disabled\" : \"text-neutral-muted\"\n                                )}\n                            >\n                                {details}\n                            </Text>\n                        ) : null}\n                    </div>\n                </div>\n            </div>\n\n            {/* Side-by-side layout for wider containers (280px+). */}\n            <div\n                data-role=\"select-image\"\n                className={\"hidden @min-[280px]:flex items-center gap-sm-extra min-w-0\"}\n            >\n                <div className={\"shrink-0 cursor-pointer\"} onClick={onReplaceItem}>\n                    <RichItemThumbnail\n                        {...value}\n                        disabled={disabled}\n                        preview={preview}\n                        renderImage={renderImage}\n                    />\n                </div>\n\n                <ItemDescription\n                    item={value}\n                    disabled={disabled}\n                    onClick={onReplaceItem}\n                    className={\"grow basis-0 cursor-pointer\"}\n                />\n\n                <ItemActions {...actions} className={\"ml-auto pr-sm-extra\"} />\n            </div>\n        </div>\n    );\n};\n\nconst RichItemPreview = makeDecoratable(\"RichItemPreview\", DecoratableRichItemPreview);\n\nexport { RichItemPreview, type RichItemPreviewProps };\n"],"names":["DecoratableRichItemPreview","className","disabled","onRemoveItem","onReplaceItem","onEditItem","value","variant","preview","renderImage","props","actions","formattedSize","bytes","details","Boolean","cn","previewVariants","RichItemThumbnail","ThumbnailActions","TruncatedFileName","Text","ItemDescription","ItemActions","RichItemPreview","makeDecoratable"],"mappings":";;;;;;;;;;AAkBA,MAAMA,6BAA6B,CAAC,EAChCC,SAAS,EACTC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,KAAK,EACLC,OAAO,EACPC,OAAO,EACPC,WAAW,EACX,GAAGC,OACgB;IACnB,MAAMC,UAAU;QAAER;QAAcC;QAAeC;QAAYH;IAAS;IAEpE,MAAMU,gBAAgBN,MAAM,IAAI,GAC1BO,MAAM,MAAM,CAACP,MAAM,IAAI,EAAE;QAAE,eAAe;QAAK,eAAe;IAAE,KAChE;IACN,MAAMQ,UAAU;QAACR,MAAM,QAAQ;QAAEM;KAAc,CAAC,MAAM,CAACG,SAAS,IAAI,CAAC;IAErE,OAAO,WAAP,GACI,oBAAC;QACG,eAAY;QACZ,WAAWC,GACP,gCACAC,gBAAgB;YAAEV;YAASL;QAAS,IACpCD;QAEH,GAAGS,KAAK;qBAGT,oBAAC;QAAI,aAAU;QAAe,WAAW;qBACrC,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;QAAiC,SAASN;qBACtD,oBAACc,mBAAiBA;QACb,GAAGZ,KAAK;QACT,SAAS;QACT,UAAUJ;QACV,SAASM;QACT,aAAaC;sBAEjB,oBAACU,kBAAqBR,WAAAA,WAAAA,GAG1B,oBAAC;QAAI,WAAW;qBACZ,oBAACS,mBAAiBA;QACd,MAAMd,MAAM,IAAI;QAChB,WAAWJ,WAAW,0BAA0B;QAEnDY,UAAU,WAAVA,GACG,oBAACO,MAAIA;QACD,MAAK;QACL,WAAWL,GACP,YACAd,WAAW,0BAA0B;OAGxCY,WAEL,uBAMhB,oBAAC;QACG,aAAU;QACV,WAAW;qBAEX,oBAAC;QAAI,WAAW;QAA2B,SAASV;qBAChD,oBAACc,mBAAiBA;QACb,GAAGZ,KAAK;QACT,UAAUJ;QACV,SAASM;QACT,aAAaC;uBAIrB,oBAACa,iBAAeA;QACZ,MAAMhB;QACN,UAAUJ;QACV,SAASE;QACT,WAAW;sBAGf,oBAACmB,aAAWA;QAAE,GAAGZ,OAAO;QAAE,WAAW;;AAIrD;AAEA,MAAMa,kBAAkBC,gBAAgB,mBAAmBzB"}

package/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.d.ts

@@ -9,6 +9,11 @@ type RichItemThumbnailProps = Omit<React.HTMLAttributes<HTMLDivElement>, "childr
      * width of a stacked layout, where the panel is too narrow to afford a column for it.
      */
     variant?: "tile" | "banner";
+    /** Optional custom image renderer for the thumbnail (e.g. a cropped preview). */
+    renderImage?: (args: {
+        url: string;
+        name: string;
+    }) => React.ReactNode;
 };
-declare const RichItemThumbnail: ({ url, name, className, mimeType, preview, disabled, variant }: RichItemThumbnailProps) => React.JSX.Element;
+declare const RichItemThumbnail: ({ url, name, className, mimeType, preview, disabled, variant, renderImage }: RichItemThumbnailProps) => React.JSX.Element;
 export { RichItemThumbnail, type RichItemThumbnailProps };

package/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.js

@@ -3,14 +3,15 @@ import { cn } from "../../../../../utils.js";
 import { FileType } from "./FileType.js";
 import { Placeholder } from "./Placeholder.js";
 import { Thumbnail } from "./Thumbnail.js";
-const RichItemThumbnail = ({ url, name, className, mimeType, preview, disabled, variant = "tile" })=>{
+const RichItemThumbnail = ({ url, name, className, mimeType, preview, disabled, variant = "tile", renderImage })=>{
     const isImage = mimeType?.startsWith("image/");
     return /*#__PURE__*/ react.createElement("div", {
         className: cn("rounded-sm overflow-hidden relative", "banner" === variant ? "w-full h-[96px]" : "size-[56px] m-xs", disabled && "[&_img]:filter [&_img]:grayscale [&_img]:opacity-50", className)
     }, "thumbnail" === preview || isImage ? /*#__PURE__*/ react.createElement(Thumbnail, {
         url: url,
         name: name,
-        fit: "banner" === variant ? "contain" : "cover"
+        fit: "banner" === variant ? "contain" : "cover",
+        renderImage: renderImage
     }) : "placeholder" === preview ? /*#__PURE__*/ react.createElement(Placeholder, {
         name: name
     }) : /*#__PURE__*/ react.createElement(FileType, {

package/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\nimport { cn } from \"~/utils.js\";\nimport type { RichItemPreviewProps } from \"~/FilePicker/primitives/components/index.js\";\nimport { FileType } from \"./FileType.js\";\nimport { Placeholder } from \"./Placeholder.js\";\nimport { Thumbnail } from \"./Thumbnail.js\";\n\ntype RichItemThumbnailProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> &\n    FileItemFormatted & {\n        preview?: RichItemPreviewProps[\"preview\"];\n        disabled?: boolean;\n        /**\n         * `tile` is the fixed square that sits beside the file details; `banner` spans the full\n         * width of a stacked layout, where the panel is too narrow to afford a column for it.\n         */\n        variant?: \"tile\" | \"banner\";\n    };\n\nconst RichItemThumbnail = ({\n    url,\n    name,\n    className,\n    mimeType,\n    preview,\n    disabled,\n    variant = \"tile\"\n}: RichItemThumbnailProps) => {\n    const isImage = mimeType?.startsWith(\"image/\");\n\n    return (\n        <div\n            className={cn(\n                \"rounded-sm overflow-hidden relative\",\n                variant === \"banner\" ? \"w-full h-[96px]\" : \"size-[56px] m-xs\",\n                disabled && \"[&_img]:filter [&_img]:grayscale [&_img]:opacity-50\",\n                className\n            )}\n        >\n            {preview === \"thumbnail\" || isImage ? (\n                <Thumbnail url={url} name={name} fit={variant === \"banner\" ? \"contain\" : \"cover\"} />\n            ) : preview === \"placeholder\" ? (\n                <Placeholder name={name} />\n            ) : (\n                <FileType mimeType={mimeType} name={name} />\n            )}\n        </div>\n    );\n};\n\nexport { RichItemThumbnail, type RichItemThumbnailProps };\n"],"names":["RichItemThumbnail","url","name","className","mimeType","preview","disabled","variant","isImage","cn","Thumbnail","Placeholder","FileType"],"mappings":";;;;;AAmBA,MAAMA,oBAAoB,CAAC,EACvBC,GAAG,EACHC,IAAI,EACJC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,UAAU,MAAM,EACK;IACrB,MAAMC,UAAUJ,UAAU,WAAW;IAErC,OAAO,WAAP,GACI,oBAAC;QACG,WAAWK,GACP,uCACAF,AAAY,aAAZA,UAAuB,oBAAoB,oBAC3CD,YAAY,uDACZH;OAGHE,AAAY,gBAAZA,WAA2BG,UAAU,WAAVA,GACxB,oBAACE,WAASA;QAAC,KAAKT;QAAK,MAAMC;QAAM,KAAKK,AAAY,aAAZA,UAAuB,YAAY;SACzEF,AAAY,kBAAZA,UAA4B,WAAhB,GACZ,oBAACM,aAAWA;QAAC,MAAMT;uBAEnB,oBAACU,UAAQA;QAAC,UAAUR;QAAU,MAAMF;;AAIpD"}
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/RichItemThumbnail.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\nimport { cn } from \"~/utils.js\";\nimport type { RichItemPreviewProps } from \"~/FilePicker/primitives/components/index.js\";\nimport { FileType } from \"./FileType.js\";\nimport { Placeholder } from \"./Placeholder.js\";\nimport { Thumbnail } from \"./Thumbnail.js\";\n\ntype RichItemThumbnailProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> &\n    FileItemFormatted & {\n        preview?: RichItemPreviewProps[\"preview\"];\n        disabled?: boolean;\n        /**\n         * `tile` is the fixed square that sits beside the file details; `banner` spans the full\n         * width of a stacked layout, where the panel is too narrow to afford a column for it.\n         */\n        variant?: \"tile\" | \"banner\";\n        /** Optional custom image renderer for the thumbnail (e.g. a cropped preview). */\n        renderImage?: (args: { url: string; name: string }) => React.ReactNode;\n    };\n\nconst RichItemThumbnail = ({\n    url,\n    name,\n    className,\n    mimeType,\n    preview,\n    disabled,\n    variant = \"tile\",\n    renderImage\n}: RichItemThumbnailProps) => {\n    const isImage = mimeType?.startsWith(\"image/\");\n\n    return (\n        <div\n            className={cn(\n                \"rounded-sm overflow-hidden relative\",\n                variant === \"banner\" ? \"w-full h-[96px]\" : \"size-[56px] m-xs\",\n                disabled && \"[&_img]:filter [&_img]:grayscale [&_img]:opacity-50\",\n                className\n            )}\n        >\n            {preview === \"thumbnail\" || isImage ? (\n                <Thumbnail\n                    url={url}\n                    name={name}\n                    fit={variant === \"banner\" ? \"contain\" : \"cover\"}\n                    renderImage={renderImage}\n                />\n            ) : preview === \"placeholder\" ? (\n                <Placeholder name={name} />\n            ) : (\n                <FileType mimeType={mimeType} name={name} />\n            )}\n        </div>\n    );\n};\n\nexport { RichItemThumbnail, type RichItemThumbnailProps };\n"],"names":["RichItemThumbnail","url","name","className","mimeType","preview","disabled","variant","renderImage","isImage","cn","Thumbnail","Placeholder","FileType"],"mappings":";;;;;AAqBA,MAAMA,oBAAoB,CAAC,EACvBC,GAAG,EACHC,IAAI,EACJC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,UAAU,MAAM,EAChBC,WAAW,EACU;IACrB,MAAMC,UAAUL,UAAU,WAAW;IAErC,OAAO,WAAP,GACI,oBAAC;QACG,WAAWM,GACP,uCACAH,AAAY,aAAZA,UAAuB,oBAAoB,oBAC3CD,YAAY,uDACZH;OAGHE,AAAY,gBAAZA,WAA2BI,UAAU,WAAVA,GACxB,oBAACE,WAASA;QACN,KAAKV;QACL,MAAMC;QACN,KAAKK,AAAY,aAAZA,UAAuB,YAAY;QACxC,aAAaC;SAEjBH,AAAY,kBAAZA,UAA4B,WAAhB,GACZ,oBAACO,aAAWA;QAAC,MAAMV;uBAEnB,oBAACW,UAAQA;QAAC,UAAUT;QAAU,MAAMF;;AAIpD"}

package/FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.d.ts

@@ -2,10 +2,10 @@ import React from "react";
 import type { FileItemFormatted } from "../../../../../FilePicker/index.js";
 type ThumbnailProps = Pick<FileItemFormatted, "url" | "name"> & {
     fit: "cover" | "contain";
+    renderImage?: (args: {
+        url: string;
+        name: string;
+    }) => React.ReactNode;
 };
-/**
- * The file's own image. `cover` fills its box and crops what does not fit, which suits the small
- * square tile; `contain` shows the whole picture, which suits the banner.
- */
-declare const Thumbnail: ({ url, name, fit }: ThumbnailProps) => React.JSX.Element;
+declare const Thumbnail: ({ url, name, fit, renderImage }: ThumbnailProps) => React.JSX.Element;
 export { Thumbnail, type ThumbnailProps };

package/FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.js

@@ -1,15 +1,19 @@
 import react from "react";
-const Thumbnail = ({ url, name, fit })=>{
+const Thumbnail = ({ url, name, fit, renderImage })=>{
+    const customImage = "function" == typeof renderImage ? renderImage({
+        url,
+        name
+    }) : false;
     if ("contain" === fit) return /*#__PURE__*/ react.createElement("div", {
         className: "size-full p-xs bg-neutral-muted flex items-center justify-center"
-    }, /*#__PURE__*/ react.createElement("img", {
+    }, customImage || /*#__PURE__*/ react.createElement("img", {
         src: url,
         alt: name,
         className: "max-h-full max-w-full rounded-xs"
     }));
     return /*#__PURE__*/ react.createElement("div", {
         className: "size-full bg-neutral-muted"
-    }, /*#__PURE__*/ react.createElement("img", {
+    }, customImage || /*#__PURE__*/ react.createElement("img", {
         src: url,
         alt: name,
         className: "size-full object-cover"

package/FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\n\ntype ThumbnailProps = Pick<FileItemFormatted, \"url\" | \"name\"> & {\n    fit: \"cover\" | \"contain\";\n};\n\n/**\n * The file's own image. `cover` fills its box and crops what does not fit, which suits the small\n * square tile; `contain` shows the whole picture, which suits the banner.\n */\nconst Thumbnail = ({ url, name, fit }: ThumbnailProps) => {\n    if (fit === \"contain\") {\n        return (\n            <div className={\"size-full p-xs bg-neutral-muted flex items-center justify-center\"}>\n                {/*\n                    Capping the element with max-width/max-height, rather than stretching it and\n                    letting `object-contain` letterbox the picture inside it, keeps the element box\n                    and the visible picture the same rectangle. That is what lets the corners round\n                    at all: `border-radius` clips the element, so on a letterboxed image it would\n                    trim empty space and leave the picture square.\n                */}\n                <img src={url} alt={name} className={\"max-h-full max-w-full rounded-xs\"} />\n            </div>\n        );\n    }\n\n    return (\n        <div className={\"size-full bg-neutral-muted\"}>\n            <img src={url} alt={name} className={\"size-full object-cover\"} />\n        </div>\n    );\n};\n\nexport { Thumbnail, type ThumbnailProps };\n"],"names":["Thumbnail","url","name","fit"],"mappings":";AAWA,MAAMA,YAAY,CAAC,EAAEC,GAAG,EAAEC,IAAI,EAAEC,GAAG,EAAkB;IACjD,IAAIA,AAAQ,cAARA,KACA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBAQZ,oBAAC;QAAI,KAAKF;QAAK,KAAKC;QAAM,WAAW;;IAKjD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,KAAKD;QAAK,KAAKC;QAAM,WAAW;;AAGjD"}
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/Thumbnail.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\n\ntype ThumbnailProps = Pick<FileItemFormatted, \"url\" | \"name\"> & {\n    fit: \"cover\" | \"contain\";\n    renderImage?: (args: { url: string; name: string }) => React.ReactNode;\n};\n\nconst Thumbnail = ({ url, name, fit, renderImage }: ThumbnailProps) => {\n    const customImage = typeof renderImage === \"function\" ? renderImage({ url, name }) : false;\n\n    if (fit === \"contain\") {\n        return (\n            <div className={\"size-full p-xs bg-neutral-muted flex items-center justify-center\"}>\n                {customImage || (\n                    <img src={url} alt={name} className={\"max-h-full max-w-full rounded-xs\"} />\n                )}\n            </div>\n        );\n    }\n\n    return (\n        <div className={\"size-full bg-neutral-muted\"}>\n            {customImage || <img src={url} alt={name} className={\"size-full object-cover\"} />}\n        </div>\n    );\n};\n\nexport { Thumbnail, type ThumbnailProps };\n"],"names":["Thumbnail","url","name","fit","renderImage","customImage"],"mappings":";AAQA,MAAMA,YAAY,CAAC,EAAEC,GAAG,EAAEC,IAAI,EAAEC,GAAG,EAAEC,WAAW,EAAkB;IAC9D,MAAMC,cAAc,AAAuB,cAAvB,OAAOD,cAA6BA,YAAY;QAAEH;QAAKC;IAAK,KAAK;IAErF,IAAIC,AAAQ,cAARA,KACA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXE,eAAe,WAAfA,GACG,oBAAC;QAAI,KAAKJ;QAAK,KAAKC;QAAM,WAAW;;IAMrD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXG,eAAe,WAAfA,GAAe,oBAAC;QAAI,KAAKJ;QAAK,KAAKC;QAAM,WAAW;;AAGjE"}

package/FilePicker/primitives/components/previews/RichItemPreview/ThumbnailActions.d.ts

@@ -6,10 +6,5 @@ interface ThumbnailActionsProps {
     disabled?: boolean;
     className?: string;
 }
-/**
- * The file's actions laid over its thumbnail and revealed on hover, mirroring the File Manager's
- * grid so a file offers the same affordances wherever it is shown. Requires `group` and
- * `relative` on the element wrapping the thumbnail.
- */
 declare const ThumbnailActions: ({ className, disabled, onEditItem, onRemoveItem, onReplaceItem }: ThumbnailActionsProps) => React.JSX.Element;
 export { ThumbnailActions, type ThumbnailActionsProps };

package/FilePicker/primitives/components/previews/RichItemPreview/ThumbnailActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/ThumbnailActions.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/ThumbnailActions.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { ReactComponent as ReplaceIcon } from \"@webiny/icons/file_upload.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { cn } from \"~/utils.js\";\n\ninterface ActionProps {\n    icon: React.JSX.Element;\n    label: string;\n    onAction: () => void;\n    disabled?: boolean;\n}\n\nconst Action = ({ icon, label, onAction, disabled }: ActionProps) => {\n    const onClick = useCallback(\n        (event: React.MouseEvent<HTMLButtonElement>) => {\n            // The thumbnail behind these opens the file manager when clicked, so without this a\n            // click on Remove would replace the file as well as remove it.\n            event.stopPropagation();\n            onAction();\n        },\n        [onAction]\n    );\n\n    return (\n        <Tooltip\n            content={label}\n            trigger={\n                <IconButton\n                    variant={\"tertiary\"}\n                    size={\"sm\"}\n                    icon={icon}\n                    onClick={onClick}\n                    disabled={disabled}\n                />\n            }\n        />\n    );\n};\n\ninterface ThumbnailActionsProps {\n    onRemoveItem?: () => void;\n    onEditItem?: () => void;\n    onReplaceItem?: () => void;\n    disabled?: boolean;\n    className?: string;\n}\n\n/**\n * The file's actions laid over its thumbnail and revealed on hover, mirroring the File Manager's\n * grid so a file offers the same affordances wherever it is shown. Requires `group` and\n * `relative` on the element wrapping the thumbnail.\n */\nconst ThumbnailActions = ({\n    className,\n    disabled,\n    onEditItem,\n    onRemoveItem,\n    onReplaceItem\n}: ThumbnailActionsProps) => {\n    return (\n        <div\n            className={cn(\n                \"invisible group-hover:visible\",\n                \"flex items-center gap-xxs\",\n                \"absolute top-xs-plus right-xs-plus\",\n                className\n            )}\n        >\n            {onReplaceItem && (\n                <Action\n                    icon={<ReplaceIcon />}\n                    label={\"Replace\"}\n                    onAction={onReplaceItem}\n                    disabled={disabled}\n                />\n            )}\n            {onEditItem && (\n                <Action\n                    icon={<EditIcon />}\n                    label={\"Edit\"}\n                    onAction={onEditItem}\n                    disabled={disabled}\n                />\n            )}\n            {onRemoveItem && (\n                <Action\n                    icon={<TrashIcon />}\n                    label={\"Remove\"}\n                    onAction={onRemoveItem}\n                    disabled={disabled}\n                />\n            )}\n        </div>\n    );\n};\n\nexport { ThumbnailActions, type ThumbnailActionsProps };\n"],"names":["Action","icon","label","onAction","disabled","onClick","useCallback","event","Tooltip","IconButton","ThumbnailActions","className","onEditItem","onRemoveItem","onReplaceItem","cn","ReplaceIcon","EditIcon","TrashIcon"],"mappings":";;;;;;;AAeA,MAAMA,SAAS,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,EAAe;IAC5D,MAAMC,UAAUC,YACZ,CAACC;QAGGA,MAAM,eAAe;QACrBJ;IACJ,GACA;QAACA;KAAS;IAGd,OAAO,WAAP,GACI,oBAACK,SAAOA;QACJ,SAASN;QACT,uBACI,oBAACO,YAAUA;YACP,SAAS;YACT,MAAM;YACN,MAAMR;YACN,SAASI;YACT,UAAUD;;;AAK9B;AAeA,MAAMM,mBAAmB,CAAC,EACtBC,SAAS,EACTP,QAAQ,EACRQ,UAAU,EACVC,YAAY,EACZC,aAAa,EACO,GACb,WAAP,GACI,oBAAC;QACG,WAAWC,GACP,iCACA,6BACA,sCACAJ;OAGHG,iBAAiB,WAAjBA,GACG,oBAACd,QAAMA;QACH,oBAAM,oBAACgB,gBAAWA;QAClB,OAAO;QACP,UAAUF;QACV,UAAUV;QAGjBQ,cAAc,WAAdA,GACG,oBAACZ,QAAMA;QACH,oBAAM,oBAACiB,yBAAQA;QACf,OAAO;QACP,UAAUL;QACV,UAAUR;QAGjBS,gBAAgB,WAAhBA,GACG,oBAACb,QAAMA;QACH,oBAAM,oBAACkB,2BAASA;QAChB,OAAO;QACP,UAAUL;QACV,UAAUT"}
+{"version":3,"file":"FilePicker/primitives/components/previews/RichItemPreview/ThumbnailActions.js","sources":["../../../../../../src/FilePicker/primitives/components/previews/RichItemPreview/ThumbnailActions.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { ReactComponent as ReplaceIcon } from \"@webiny/icons/file_upload.svg\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as TrashIcon } from \"@webiny/icons/delete.svg\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { cn } from \"~/utils.js\";\n\ninterface ActionProps {\n    icon: React.JSX.Element;\n    label: string;\n    onAction: () => void;\n    disabled?: boolean;\n}\n\nconst Action = ({ icon, label, onAction, disabled }: ActionProps) => {\n    const onClick = useCallback(\n        (event: React.MouseEvent<HTMLButtonElement>) => {\n            event.stopPropagation();\n            onAction();\n        },\n        [onAction]\n    );\n\n    return (\n        <Tooltip\n            content={label}\n            trigger={\n                <IconButton\n                    variant={\"tertiary\"}\n                    size={\"sm\"}\n                    icon={icon}\n                    onClick={onClick}\n                    disabled={disabled}\n                />\n            }\n        />\n    );\n};\n\ninterface ThumbnailActionsProps {\n    onRemoveItem?: () => void;\n    onEditItem?: () => void;\n    onReplaceItem?: () => void;\n    disabled?: boolean;\n    className?: string;\n}\n\nconst ThumbnailActions = ({\n    className,\n    disabled,\n    onEditItem,\n    onRemoveItem,\n    onReplaceItem\n}: ThumbnailActionsProps) => {\n    return (\n        <div\n            className={cn(\n                \"invisible group-hover:visible\",\n                \"flex items-center gap-xxs\",\n                \"absolute top-xs-plus right-xs-plus\",\n                className\n            )}\n        >\n            {onReplaceItem && (\n                <Action\n                    icon={<ReplaceIcon />}\n                    label={\"Replace\"}\n                    onAction={onReplaceItem}\n                    disabled={disabled}\n                />\n            )}\n            {onEditItem && (\n                <Action\n                    icon={<EditIcon />}\n                    label={\"Edit\"}\n                    onAction={onEditItem}\n                    disabled={disabled}\n                />\n            )}\n            {onRemoveItem && (\n                <Action\n                    icon={<TrashIcon />}\n                    label={\"Remove\"}\n                    onAction={onRemoveItem}\n                    disabled={disabled}\n                />\n            )}\n        </div>\n    );\n};\n\nexport { ThumbnailActions, type ThumbnailActionsProps };\n"],"names":["Action","icon","label","onAction","disabled","onClick","useCallback","event","Tooltip","IconButton","ThumbnailActions","className","onEditItem","onRemoveItem","onReplaceItem","cn","ReplaceIcon","EditIcon","TrashIcon"],"mappings":";;;;;;;AAeA,MAAMA,SAAS,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,EAAe;IAC5D,MAAMC,UAAUC,YACZ,CAACC;QACGA,MAAM,eAAe;QACrBJ;IACJ,GACA;QAACA;KAAS;IAGd,OAAO,WAAP,GACI,oBAACK,SAAOA;QACJ,SAASN;QACT,uBACI,oBAACO,YAAUA;YACP,SAAS;YACT,MAAM;YACN,MAAMR;YACN,SAASI;YACT,UAAUD;;;AAK9B;AAUA,MAAMM,mBAAmB,CAAC,EACtBC,SAAS,EACTP,QAAQ,EACRQ,UAAU,EACVC,YAAY,EACZC,aAAa,EACO,GACb,WAAP,GACI,oBAAC;QACG,WAAWC,GACP,iCACA,6BACA,sCACAJ;OAGHG,iBAAiB,WAAjBA,GACG,oBAACd,QAAMA;QACH,oBAAM,oBAACgB,gBAAWA;QAClB,OAAO;QACP,UAAUF;QACV,UAAUV;QAGjBQ,cAAc,WAAdA,GACG,oBAACZ,QAAMA;QACH,oBAAM,oBAACiB,yBAAQA;QACf,OAAO;QACP,UAAUL;QACV,UAAUR;QAGjBS,gBAAgB,WAAhBA,GACG,oBAACb,QAAMA;QACH,oBAAM,oBAACkB,2BAASA;QAChB,OAAO;QACP,UAAUL;QACV,UAAUT"}