@webiny/admin-ui 6.6.0-alpha.8 → 6.6.0-alpha.9

package/Command/components/List.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { Command as CommandPrimitive } from "cmdk";
 type ListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>;
-declare const List: ({ className, ...props }: ListProps) => React.JSX.Element;
+declare const List: ({ className, style, onScroll, ...props }: ListProps) => React.JSX.Element;
 export { List, type ListProps };

package/Command/components/List.js

@@ -1,12 +1,16 @@
 import { Command } from "cmdk";
 import { cn } from "../../utils.js";
+import { ScrollArea } from "../../ScrollArea/index.js";
 import * as __rspack_external_react from "react";
-const List = ({ className, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(Command.List, {
-        className: cn([
-            "block max-h-96 w-full py-sm overflow-y-auto overflow-x-hidden bg-neutral-base text-neutral-strong"
-        ], className),
+const List = ({ className, style, onScroll, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(ScrollArea, {
+        className: cn("w-full bg-neutral-base", className),
+        style: style,
+        viewportClassName: "max-h-96 overflow-x-hidden",
+        onViewportScroll: onScroll
+    }, /*#__PURE__*/ __rspack_external_react.createElement(Command.List, {
+        className: "block w-full py-sm text-neutral-strong",
         ...props
-    });
+    }));
 export { List };
 
 //# sourceMappingURL=List.js.map

package/Command/components/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"Command/components/List.js","sources":["../../../src/Command/components/List.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { cn } from \"~/utils.js\";\n\ntype ListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>;\n\nconst List = ({ className, ...props }: ListProps) => {\n    return (\n        <CommandPrimitive.List\n            className={cn(\n                [\n                    \"block max-h-96 w-full py-sm overflow-y-auto overflow-x-hidden bg-neutral-base text-neutral-strong\"\n                ],\n                className\n            )}\n            {...props}\n        />\n    );\n};\n\nexport { List, type ListProps };\n"],"names":["List","className","props","CommandPrimitive","cn"],"mappings":";;;AAMA,MAAMA,OAAO,CAAC,EAAEC,SAAS,EAAE,GAAGC,OAAkB,GACrC,WAAP,GACI,sCAACC,QAAAA,IAAqB;QAClB,WAAWC,GACP;YACI;SACH,EACDH;QAEH,GAAGC,KAAK"}
+{"version":3,"file":"Command/components/List.js","sources":["../../../src/Command/components/List.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { cn } from \"~/utils.js\";\nimport { ScrollArea } from \"~/ScrollArea/index.js\";\n\ntype ListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>;\n\nconst List = ({ className, style, onScroll, ...props }: ListProps) => {\n    /*\n     * The list scrolls inside a `ScrollArea`, whose scrollbar is an element rather than the\n     * operating system's own, so it can keep focus on the input while it is dragged. Layout and\n     * scroll props go to the scroll area, since that is the element that scrolls now.\n     */\n    return (\n        <ScrollArea\n            className={cn(\"w-full bg-neutral-base\", className)}\n            style={style}\n            viewportClassName={\"max-h-96 overflow-x-hidden\"}\n            onViewportScroll={onScroll}\n        >\n            <CommandPrimitive.List\n                className={\"block w-full py-sm text-neutral-strong\"}\n                {...props}\n            />\n        </ScrollArea>\n    );\n};\n\nexport { List, type ListProps };\n"],"names":["List","className","style","onScroll","props","ScrollArea","cn","CommandPrimitive"],"mappings":";;;;AAOA,MAAMA,OAAO,CAAC,EAAEC,SAAS,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,OAAkB,GAMtD,WAAP,GACI,sCAACC,YAAUA;QACP,WAAWC,GAAG,0BAA0BL;QACxC,OAAOC;QACP,mBAAmB;QACnB,kBAAkBC;qBAElB,sCAACI,QAAAA,IAAqB;QAClB,WAAW;QACV,GAAGH,KAAK"}

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

@@ -11,7 +11,7 @@ const ItemActions = ({ disabled, onRemoveItem, onEditItem, onReplaceItem, small,
     return /*#__PURE__*/ react.createElement("div", {
         ...props,
         className: cn("flex justify-center items-center gap-xs", className)
-    }, small && onReplaceItem && /*#__PURE__*/ react.createElement(IconButton, {
+    }, onReplaceItem && /*#__PURE__*/ react.createElement(IconButton, {
         icon: /*#__PURE__*/ react.createElement(Icon, {
             icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
             label: "Replace",

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            {small && 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;OACpED,SAASD,iBAAiB,WAAjBA,GACN,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/RichItemPreview/FileType.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { FileItemFormatted } from "../../../../../FilePicker/index.js";
+type FileTypeProps = Pick<FileItemFormatted, "mimeType" | "name">;
+declare const FileType: ({ mimeType, name }: FileTypeProps) => React.JSX.Element;
+export { FileType, type FileTypeProps };

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

@@ -0,0 +1,45 @@
+import react from "react";
+import csv from "../assets/csv.js";
+import doc from "../assets/doc.js";
+import docx from "../assets/docx.js";
+import file from "../assets/file.js";
+import pdf from "../assets/pdf.js";
+import ppt from "../assets/ppt.js";
+import pptx from "../assets/pptx.js";
+import txt from "../assets/txt.js";
+import xls from "../assets/xls.js";
+import xlsx from "../assets/xlsx.js";
+const FileType = ({ mimeType = "", name })=>{
+    const getMimeTypeSrc = (mimeType)=>{
+        switch(mimeType){
+            case "text/csv":
+                return csv;
+            case "application/msword":
+                return doc;
+            case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+                return docx;
+            case "application/pdf":
+                return pdf;
+            case "application/vnd.ms-powerpoint":
+                return ppt;
+            case "application/vnd.openxmlformats-officedocument.presentationml.presentation":
+                return pptx;
+            case "text/plain":
+                return txt;
+            case "application/vnd.ms-excel":
+                return xls;
+            case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
+                return xlsx;
+            default:
+                return file;
+        }
+    };
+    return /*#__PURE__*/ react.createElement("img", {
+        src: getMimeTypeSrc(mimeType),
+        alt: name,
+        className: "size-full object-contain p-sm-extra"
+    });
+};
+export { FileType };
+
+//# sourceMappingURL=FileType.js.map

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

@@ -0,0 +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\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

@@ -0,0 +1,5 @@
+import React from "react";
+import type { FileItemFormatted } from "../../../../../FilePicker/index.js";
+type PlaceholderProps = Pick<FileItemFormatted, "name">;
+declare const Placeholder: ({ name }: PlaceholderProps) => React.JSX.Element;
+export { Placeholder, type PlaceholderProps };

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

@@ -0,0 +1,14 @@
+import react from "react";
+import { ReactComponent } from "@webiny/icons/image.svg";
+import { Icon } from "../../../../../Icon/index.js";
+const Placeholder = ({ name })=>/*#__PURE__*/ react.createElement("div", {
+        className: "size-full flex justify-center items-center bg-transparent"
+    }, /*#__PURE__*/ react.createElement(Icon, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        label: name,
+        size: "lg",
+        color: "neutral-light"
+    }));
+export { Placeholder };
+
+//# sourceMappingURL=Placeholder.js.map

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

@@ -0,0 +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\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.js

@@ -1,37 +1,78 @@
 import react from "react";
+import bytes from "bytes";
 import { cn, makeDecoratable } from "../../../../../utils.js";
+import { Text } from "../../../../../Text/index.js";
 import { RichItemThumbnail } from "./RichItemThumbnail.js";
+import { ThumbnailActions } from "./ThumbnailActions.js";
 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, renderImage, ...props })=>/*#__PURE__*/ react.createElement("div", {
+const DecoratableRichItemPreview = ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props })=>{
+    const actions = {
+        onRemoveItem,
+        onReplaceItem,
+        onEditItem,
+        disabled
+    };
+    const formattedSize = value.size ? bytes.format(value.size, {
+        unitSeparator: " ",
+        decimalPlaces: 0
+    }) : "";
+    const details = [
+        value.mimeType,
+        formattedSize
+    ].filter(Boolean).join(" - ");
+    return /*#__PURE__*/ react.createElement("div", {
         "data-testid": "image-preview",
-        className: cn("w-full rounded-md", previewVariants({
+        className: cn("w-full rounded-md @container", previewVariants({
             variant,
             disabled
         }), className),
         ...props
     }, /*#__PURE__*/ react.createElement("div", {
         "data-role": "select-image",
-        className: "flex items-center justify-between gap-sm-extra min-w-0"
+        className: "@min-[280px]:hidden"
     }, /*#__PURE__*/ react.createElement("div", {
-        className: "flex items-center justify-between flex-1 cursor-pointer gap-sm-extra self-stretch min-w-0",
+        className: "flex flex-col gap-xs p-xs"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "group relative cursor-pointer",
+        onClick: onReplaceItem
+    }, /*#__PURE__*/ react.createElement(RichItemThumbnail, {
+        ...value,
+        variant: "banner",
+        disabled: disabled,
+        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, {
+        name: value.name,
+        className: disabled ? "text-neutral-disabled" : "text-neutral-primary"
+    }), details ? /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: cn("truncate", disabled ? "text-neutral-disabled" : "text-neutral-muted")
+    }, details) : null))), /*#__PURE__*/ react.createElement("div", {
+        "data-role": "select-image",
+        className: "hidden @min-[280px]:flex items-center gap-sm-extra min-w-0"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "shrink-0 cursor-pointer",
         onClick: onReplaceItem
     }, /*#__PURE__*/ react.createElement(RichItemThumbnail, {
         ...value,
         disabled: disabled,
         preview: preview,
         renderImage: renderImage
-    }), /*#__PURE__*/ react.createElement(ItemDescription, {
+    })), /*#__PURE__*/ react.createElement(ItemDescription, {
         item: value,
-        disabled: disabled
-    })), /*#__PURE__*/ react.createElement(ItemActions, {
-        onRemoveItem: onRemoveItem,
-        onReplaceItem: onReplaceItem,
-        onEditItem: onEditItem,
         disabled: disabled,
-        className: "pr-sm-extra"
+        onClick: onReplaceItem,
+        className: "grow basis-0 cursor-pointer"
+    }), /*#__PURE__*/ react.createElement(ItemActions, {
+        ...actions,
+        className: "ml-auto pr-sm-extra"
     })));
+};
 const RichItemPreview = makeDecoratable("RichItemPreview", DecoratableRichItemPreview);
 export { RichItemPreview };
 

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 { cn, makeDecoratable } from \"~/utils.js\";\nimport { RichItemThumbnail } from \"./RichItemThumbnail.js\";\nimport { ItemDescription } from \"../ItemDescription.js\";\nimport { ItemActions } from \"~/FilePicker/primitives/components/previews/ItemActions.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    return (\n        <div\n            data-testid=\"image-preview\"\n            className={cn(\"w-full rounded-md\", previewVariants({ variant, disabled }), className)}\n            {...props}\n        >\n            <div\n                data-role=\"select-image\"\n                className=\"flex items-center justify-between gap-sm-extra min-w-0\"\n            >\n                <div\n                    className=\"flex items-center justify-between flex-1 cursor-pointer gap-sm-extra self-stretch min-w-0\"\n                    onClick={onReplaceItem}\n                >\n                    <RichItemThumbnail\n                        {...value}\n                        disabled={disabled}\n                        preview={preview}\n                        renderImage={renderImage}\n                    />\n                    <ItemDescription item={value} disabled={disabled} />\n                </div>\n\n                <ItemActions\n                    onRemoveItem={onRemoveItem}\n                    onReplaceItem={onReplaceItem}\n                    onEditItem={onEditItem}\n                    disabled={disabled}\n                    className={\"pr-sm-extra\"}\n                />\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","cn","previewVariants","RichItemThumbnail","ItemDescription","ItemActions","RichItemPreview","makeDecoratable"],"mappings":";;;;;;AAcA,MAAMA,6BAA6B,CAAC,EAChCC,SAAS,EACTC,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,KAAK,EACLC,OAAO,EACPC,OAAO,EACPC,WAAW,EACX,GAAGC,OACgB,GACZ,WAAP,GACI,oBAAC;QACG,eAAY;QACZ,WAAWC,GAAG,qBAAqBC,gBAAgB;YAAEL;YAASL;QAAS,IAAID;QAC1E,GAAGS,KAAK;qBAET,oBAAC;QACG,aAAU;QACV,WAAU;qBAEV,oBAAC;QACG,WAAU;QACV,SAASN;qBAET,oBAACS,mBAAiBA;QACb,GAAGP,KAAK;QACT,UAAUJ;QACV,SAASM;QACT,aAAaC;sBAEjB,oBAACK,iBAAeA;QAAC,MAAMR;QAAO,UAAUJ;uBAG5C,oBAACa,aAAWA;QACR,cAAcZ;QACd,eAAeC;QACf,YAAYC;QACZ,UAAUH;QACV,WAAW;;AAO/B,MAAMc,kBAAkBC,gBAAgB,mBAAmBjB"}
+{"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

@@ -5,14 +5,15 @@ type RichItemThumbnailProps = Omit<React.HTMLAttributes<HTMLDivElement>, "childr
     preview?: RichItemPreviewProps["preview"];
     disabled?: boolean;
     /**
-     * Optional custom image renderer for image thumbnails (e.g. a cropped /
-     * focal-point-aware image). Falls back to the default `<img>` when omitted
-     * or when it returns a falsy value.
+     * `tile` is the fixed square that sits beside the file details; `banner` spans the full
+     * 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, renderImage }: 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

@@ -1,74 +1,17 @@
 import react from "react";
-import { ReactComponent } from "@webiny/icons/image.svg";
-import { Icon } from "../../../../../Icon/index.js";
 import { cn } from "../../../../../utils.js";
-import csv from "../assets/csv.js";
-import doc from "../assets/doc.js";
-import docx from "../assets/docx.js";
-import file from "../assets/file.js";
-import pdf from "../assets/pdf.js";
-import ppt from "../assets/ppt.js";
-import pptx from "../assets/pptx.js";
-import txt from "../assets/txt.js";
-import xls from "../assets/xls.js";
-import xlsx from "../assets/xlsx.js";
-const Thumbnail = ({ url, name })=>/*#__PURE__*/ react.createElement("div", {
-        className: "size-full bg-neutral-muted"
-    }, /*#__PURE__*/ react.createElement("img", {
-        src: url,
-        alt: name,
-        className: "size-full object-cover"
-    }));
-const FileType = ({ mimeType = "", name })=>{
-    const getMimeTypeSrc = (mimeType)=>{
-        switch(mimeType){
-            case "text/csv":
-                return csv;
-            case "application/msword":
-                return doc;
-            case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
-                return docx;
-            case "application/pdf":
-                return pdf;
-            case "application/vnd.ms-powerpoint":
-                return ppt;
-            case "application/vnd.openxmlformats-officedocument.presentationml.presentation":
-                return pptx;
-            case "text/plain":
-                return txt;
-            case "application/vnd.ms-excel":
-                return xls;
-            case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
-                return xlsx;
-            default:
-                return file;
-        }
-    };
-    return /*#__PURE__*/ react.createElement("img", {
-        src: getMimeTypeSrc(mimeType),
-        alt: name,
-        className: "size-full p-sm-extra"
-    });
-};
-const Placeholder = ({ name })=>/*#__PURE__*/ react.createElement("div", {
-        className: "size-full flex justify-center items-center bg-transparent"
-    }, /*#__PURE__*/ react.createElement(Icon, {
-        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
-        label: name,
-        size: "lg",
-        color: "neutral-light"
-    }));
-const RichItemThumbnail = ({ url, name, className, mimeType, preview, disabled, renderImage })=>{
+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", renderImage })=>{
     const isImage = mimeType?.startsWith("image/");
-    const customImage = "function" == typeof renderImage ? renderImage({
-        url,
-        name
-    }) : false;
     return /*#__PURE__*/ react.createElement("div", {
-        className: cn("size-[56px] m-xs rounded-sm overflow-hidden relative", disabled && "[&_img]:filter [&_img]:grayscale [&_img]:opacity-50", className)
-    }, "thumbnail" === preview || isImage ? customImage || /*#__PURE__*/ react.createElement(Thumbnail, {
+        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
+        name: name,
+        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 { ReactComponent as PlaceholderIcon } from \"@webiny/icons/image.svg\";\nimport type { FileItemFormatted } from \"~/FilePicker/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { cn } from \"~/utils.js\";\nimport type { RichItemPreviewProps } from \"~/FilePicker/primitives/components/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 RichItemThumbnailProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> &\n    FileItemFormatted & {\n        preview?: RichItemPreviewProps[\"preview\"];\n        disabled?: boolean;\n        /**\n         * Optional custom image renderer for image thumbnails (e.g. a cropped /\n         * focal-point-aware image). Falls back to the default `<img>` when omitted\n         * or when it returns a falsy value.\n         */\n        renderImage?: (args: { url: string; name: string }) => React.ReactNode;\n    };\n\ntype ThumbnailProps = Pick<FileItemFormatted, \"url\" | \"name\">;\n\nconst Thumbnail = ({ url, name }: ThumbnailProps) => {\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\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 <img src={getMimeTypeSrc(mimeType)} alt={name} className=\"size-full p-sm-extra\" />;\n};\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\nconst RichItemThumbnail = ({\n    url,\n    name,\n    className,\n    mimeType,\n    preview,\n    disabled,\n    renderImage\n}: RichItemThumbnailProps) => {\n    const isImage = mimeType?.startsWith(\"image/\");\n    const customImage = typeof renderImage === \"function\" ? renderImage({ url, name }) : false;\n\n    return (\n        <div\n            className={cn(\n                \"size-[56px] m-xs rounded-sm overflow-hidden relative\",\n                disabled && \"[&_img]:filter [&_img]:grayscale [&_img]:opacity-50\",\n                className\n            )}\n        >\n            {preview === \"thumbnail\" || isImage ? (\n                customImage || <Thumbnail url={url} name={name} />\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":["Thumbnail","url","name","FileType","mimeType","getMimeTypeSrc","csvThumb","docThumb","docxThumb","pdfThumb","pptThumb","pptxThumb","txtThumb","xlsThumb","xlsxThumb","fileThumb","Placeholder","Icon","PlaceholderIcon","RichItemThumbnail","className","preview","disabled","renderImage","isImage","customImage","cn"],"mappings":";;;;;;;;;;;;;;AAgCA,MAAMA,YAAY,CAAC,EAAEC,GAAG,EAAEC,IAAI,EAAkB,GACrC,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,KAAKD;QAAK,KAAKC;QAAM,WAAU;;AAOhD,MAAMC,WAAW,CAAC,EAAEC,WAAW,EAAE,EAAEF,IAAI,EAAiB;IACpD,MAAMG,iBAAiB,CAACD;QACpB,OAAQA;YACJ,KAAK;gBACD,OAAOE;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,GAAO,oBAAC;QAAI,KAAKV,eAAeD;QAAW,KAAKF;QAAM,WAAU;;AACpE;AAIA,MAAMc,cAAc,CAAC,EAAEd,IAAI,EAAoB,GACpC,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACe,MAAIA;QAAC,oBAAM,oBAACC,gBAAeA;QAAK,OAAOhB;QAAM,MAAM;QAAM,OAAO;;AAK7E,MAAMiB,oBAAoB,CAAC,EACvBlB,GAAG,EACHC,IAAI,EACJkB,SAAS,EACThB,QAAQ,EACRiB,OAAO,EACPC,QAAQ,EACRC,WAAW,EACU;IACrB,MAAMC,UAAUpB,UAAU,WAAW;IACrC,MAAMqB,cAAc,AAAuB,cAAvB,OAAOF,cAA6BA,YAAY;QAAEtB;QAAKC;IAAK,KAAK;IAErF,OAAO,WAAP,GACI,oBAAC;QACG,WAAWwB,GACP,wDACAJ,YAAY,uDACZF;OAGHC,AAAY,gBAAZA,WAA2BG,UACxBC,eAAe,WAAfA,GAAe,oBAACzB,WAASA;QAAC,KAAKC;QAAK,MAAMC;SAC1CmB,AAAY,kBAAZA,UAA4B,WAAhB,GACZ,oBAACL,aAAWA;QAAC,MAAMd;uBAEnB,oBAACC,UAAQA;QAAC,UAAUC;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

@@ -0,0 +1,11 @@
+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;
+};
+declare const Thumbnail: ({ url, name, fit, renderImage }: ThumbnailProps) => React.JSX.Element;
+export { Thumbnail, type ThumbnailProps };

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

@@ -0,0 +1,24 @@
+import react from "react";
+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"
+    }, 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"
+    }, customImage || /*#__PURE__*/ react.createElement("img", {
+        src: url,
+        alt: name,
+        className: "size-full object-cover"
+    }));
+};
+export { Thumbnail };
+
+//# sourceMappingURL=Thumbnail.js.map

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

@@ -0,0 +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    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

@@ -0,0 +1,10 @@
+import React from "react";
+interface ThumbnailActionsProps {
+    onRemoveItem?: () => void;
+    onEditItem?: () => void;
+    onReplaceItem?: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+declare const ThumbnailActions: ({ className, disabled, onEditItem, onRemoveItem, onReplaceItem }: ThumbnailActionsProps) => React.JSX.Element;
+export { ThumbnailActions, type ThumbnailActionsProps };

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

@@ -0,0 +1,46 @@
+import react, { useCallback } from "react";
+import { ReactComponent } from "@webiny/icons/file_upload.svg";
+import { ReactComponent as edit_svg_ReactComponent } from "@webiny/icons/edit.svg";
+import { ReactComponent as delete_svg_ReactComponent } from "@webiny/icons/delete.svg";
+import { IconButton } from "../../../../../Button/index.js";
+import { Tooltip } from "../../../../../Tooltip/index.js";
+import { cn } from "../../../../../utils.js";
+const Action = ({ icon, label, onAction, disabled })=>{
+    const onClick = useCallback((event)=>{
+        event.stopPropagation();
+        onAction();
+    }, [
+        onAction
+    ]);
+    return /*#__PURE__*/ react.createElement(Tooltip, {
+        content: label,
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            variant: "tertiary",
+            size: "sm",
+            icon: icon,
+            onClick: onClick,
+            disabled: disabled
+        })
+    });
+};
+const ThumbnailActions = ({ className, disabled, onEditItem, onRemoveItem, onReplaceItem })=>/*#__PURE__*/ react.createElement("div", {
+        className: cn("invisible group-hover:visible", "flex items-center gap-xxs", "absolute top-xs-plus right-xs-plus", className)
+    }, onReplaceItem && /*#__PURE__*/ react.createElement(Action, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        label: "Replace",
+        onAction: onReplaceItem,
+        disabled: disabled
+    }), onEditItem && /*#__PURE__*/ react.createElement(Action, {
+        icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null),
+        label: "Edit",
+        onAction: onEditItem,
+        disabled: disabled
+    }), onRemoveItem && /*#__PURE__*/ react.createElement(Action, {
+        icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null),
+        label: "Remove",
+        onAction: onRemoveItem,
+        disabled: disabled
+    }));
+export { ThumbnailActions };
+
+//# sourceMappingURL=ThumbnailActions.js.map

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

@@ -0,0 +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            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"}

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

@@ -0,0 +1,7 @@
+import React from "react";
+interface TruncatedFileNameProps {
+    name: string;
+    className?: string;
+}
+declare const TruncatedFileName: ({ name, className }: TruncatedFileNameProps) => React.JSX.Element;
+export { TruncatedFileName, type TruncatedFileNameProps };

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

@@ -0,0 +1,20 @@
+import react from "react";
+import { Text } from "../../../../Text/index.js";
+import { cn } from "../../../../utils.js";
+import { splitFileName } from "./fileName.js";
+const TruncatedFileName = ({ name, className })=>{
+    const { head, tail } = splitFileName(name);
+    return /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        as: "div",
+        className: cn("flex min-w-0", className),
+        title: name
+    }, /*#__PURE__*/ react.createElement("span", {
+        className: "truncate"
+    }, head), tail ? /*#__PURE__*/ react.createElement("span", {
+        className: "shrink-0 whitespace-pre"
+    }, tail) : null);
+};
+export { TruncatedFileName };
+
+//# sourceMappingURL=TruncatedFileName.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilePicker/primitives/components/previews/TruncatedFileName.js","sources":["../../../../../src/FilePicker/primitives/components/previews/TruncatedFileName.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text } from \"~/Text/index.js\";\nimport { cn } from \"~/utils.js\";\nimport { splitFileName } from \"./fileName.js\";\n\ninterface TruncatedFileNameProps {\n    name: string;\n    className?: string;\n}\n\nconst TruncatedFileName = ({ name, className }: TruncatedFileNameProps) => {\n    const { head, tail } = splitFileName(name);\n\n    return (\n        <Text size=\"sm\" as=\"div\" className={cn(\"flex min-w-0\", className)} title={name}>\n            <span className={\"truncate\"}>{head}</span>\n            {tail ? <span className={\"shrink-0 whitespace-pre\"}>{tail}</span> : null}\n        </Text>\n    );\n};\n\nexport { TruncatedFileName, type TruncatedFileNameProps };\n"],"names":["TruncatedFileName","name","className","head","tail","splitFileName","Text","cn"],"mappings":";;;;AAUA,MAAMA,oBAAoB,CAAC,EAAEC,IAAI,EAAEC,SAAS,EAA0B;IAClE,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGC,cAAcJ;IAErC,OAAO,WAAP,GACI,oBAACK,MAAIA;QAAC,MAAK;QAAK,IAAG;QAAM,WAAWC,GAAG,gBAAgBL;QAAY,OAAOD;qBACtE,oBAAC;QAAK,WAAW;OAAaE,OAC7BC,OAAO,WAAPA,GAAO,oBAAC;QAAK,WAAW;OAA4BA,QAAe;AAGhF"}

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

@@ -0,0 +1,4 @@
+export declare const splitFileName: (name: string) => {
+    head: string;
+    tail: string;
+};

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

@@ -0,0 +1,26 @@
+const TAIL_STEM_CHARS = 3;
+const splitFileName = (name)=>{
+    const dot = name.lastIndexOf(".");
+    if (dot <= 0) return {
+        head: name,
+        tail: ""
+    };
+    const cut = dot - Math.min(TAIL_STEM_CHARS, dot);
+    if (cut <= 0) return {
+        head: name,
+        tail: ""
+    };
+    const head = name.slice(0, cut);
+    const tail = name.slice(cut);
+    if (head.length <= tail.length) return {
+        head: name,
+        tail: ""
+    };
+    return {
+        head,
+        tail
+    };
+};
+export { splitFileName };
+
+//# sourceMappingURL=fileName.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilePicker/primitives/components/previews/fileName.js","sources":["../../../../../src/FilePicker/primitives/components/previews/fileName.ts"],"sourcesContent":["const TAIL_STEM_CHARS = 3;\n\nexport const splitFileName = (name: string) => {\n    const dot = name.lastIndexOf(\".\");\n\n    if (dot <= 0) {\n        return { head: name, tail: \"\" };\n    }\n\n    const cut = dot - Math.min(TAIL_STEM_CHARS, dot);\n\n    if (cut <= 0) {\n        return { head: name, tail: \"\" };\n    }\n\n    const head = name.slice(0, cut);\n    const tail = name.slice(cut);\n\n    if (head.length <= tail.length) {\n        return { head: name, tail: \"\" };\n    }\n\n    return { head, tail };\n};\n"],"names":["TAIL_STEM_CHARS","splitFileName","name","dot","cut","Math","head","tail"],"mappings":"AAAA,MAAMA,kBAAkB;AAEjB,MAAMC,gBAAgB,CAACC;IAC1B,MAAMC,MAAMD,KAAK,WAAW,CAAC;IAE7B,IAAIC,OAAO,GACP,OAAO;QAAE,MAAMD;QAAM,MAAM;IAAG;IAGlC,MAAME,MAAMD,MAAME,KAAK,GAAG,CAACL,iBAAiBG;IAE5C,IAAIC,OAAO,GACP,OAAO;QAAE,MAAMF;QAAM,MAAM;IAAG;IAGlC,MAAMI,OAAOJ,KAAK,KAAK,CAAC,GAAGE;IAC3B,MAAMG,OAAOL,KAAK,KAAK,CAACE;IAExB,IAAIE,KAAK,MAAM,IAAIC,KAAK,MAAM,EAC1B,OAAO;QAAE,MAAML;QAAM,MAAM;IAAG;IAGlC,OAAO;QAAEI;QAAMC;IAAK;AACxB"}

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

@@ -2,3 +2,4 @@ export * from "./FilePreview.js";
 export * from "./ImagePreview/index.js";
 export * from "./RichItemPreview/index.js";
 export * from "./TextOnlyPreview/index.js";
+export * from "./TruncatedFileName.js";

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

@@ -2,3 +2,4 @@ export * from "./FilePreview.js";
 export * from "./ImagePreview/index.js";
 export * from "./RichItemPreview/index.js";
 export * from "./TextOnlyPreview/index.js";
+export * from "./TruncatedFileName.js";

package/IconPicker/primitives/IconPickerPrimitive.js

@@ -49,8 +49,7 @@ const IconPickerPrimitive = (props)=>{
         size: props.size
     }))), /*#__PURE__*/ react.createElement(PopoverPrimitive.Content, {
         align: "start",
-        className: "min-w-96",
-        onWheel: (e)=>e.stopPropagation()
+        className: "min-w-96"
     }, /*#__PURE__*/ react.createElement(IconPickerInput, {
         value: vm.searchQuery,
         onChange: searchIcon,

package/IconPicker/primitives/IconPickerPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker/primitives/IconPickerPrimitive.js","sources":["../../../src/IconPicker/primitives/IconPickerPrimitive.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { inputVariants } from \"~/Input/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { IconPickerGrid, IconPickerInput, IconPickerTrigger } from \"./components/index.js\";\nimport type { IconPickerIconDto } from \"../domains/index.js\";\nimport { useIconPicker } from \"./useIconPicker.js\";\n\nconst iconPickerVariants = cva(\"cursor-pointer text-neutral-strong\", {\n    variants: {\n        size: {\n            md: \"w-16\",\n            lg: \"w-16\",\n            xl: \"w-20\"\n        },\n        disabled: {\n            true: \"pointer-events-none\"\n        }\n    },\n    defaultVariants: {\n        size: \"lg\"\n    }\n});\n\ninterface IconPickerPrimitiveProps extends VariantProps<typeof iconPickerVariants> {\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Callback triggered when the value changes.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * List of icons to be displayed in the icon picker.\n     */\n    icons: IconPickerIconDto[];\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Optional selected icon.\n     */\n    value?: string;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n}\n\nconst IconPickerPrimitive = (props: IconPickerPrimitiveProps) => {\n    const { vm, setListOpenState, searchIcon, setSelectedIcon } = useIconPicker(props);\n    // TODO figure out a better way to type this ref, without using `as unknown as`\n    const inputRef = useRef<HTMLInputElement>(null as unknown as HTMLInputElement);\n\n    useEffect(() => {\n        setTimeout(() => {\n            if (vm.open && inputRef.current) {\n                inputRef.current.focus();\n            }\n        }, 50);\n    }, [vm.open]);\n\n    return (\n        <PopoverPrimitive open={vm.open} onOpenChange={setListOpenState}>\n            <PopoverPrimitive.Trigger asChild>\n                <button\n                    data-disabled={props.disabled}\n                    className={cn(\n                        inputVariants({\n                            size: props.size,\n                            variant: props.variant,\n                            invalid: props.invalid\n                        }),\n                        iconPickerVariants({ size: props.size, disabled: props.disabled })\n                    )}\n                >\n                    <IconPickerTrigger value={props.value} size={props.size} />\n                </button>\n            </PopoverPrimitive.Trigger>\n            <PopoverPrimitive.Content\n                align={\"start\"}\n                className={\"min-w-96\"}\n                onWheel={e => e.stopPropagation()} // Wheel event should not propagate to the parent: this fixes scrolling issues when the IconPicker is placed inside a Dialog.\n            >\n                <IconPickerInput value={vm.searchQuery} onChange={searchIcon} inputRef={inputRef} />\n                <IconPickerGrid\n                    icons={vm.icons}\n                    iconsLength={vm.iconsLength}\n                    onIconSelect={setSelectedIcon}\n                />\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive>\n    );\n};\n\nexport { IconPickerPrimitive, type IconPickerPrimitiveProps };\n"],"names":["iconPickerVariants","cva","IconPickerPrimitive","props","vm","setListOpenState","searchIcon","setSelectedIcon","useIconPicker","inputRef","useRef","useEffect","setTimeout","PopoverPrimitive","cn","inputVariants","IconPickerTrigger","e","IconPickerInput","IconPickerGrid"],"mappings":";;;;;;AASA,MAAMA,qBAAqBC,IAAI,sCAAsC;IACjE,UAAU;QACN,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,UAAU;YACN,MAAM;QACV;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AA+BA,MAAMC,sBAAsB,CAACC;IACzB,MAAM,EAAEC,EAAE,EAAEC,gBAAgB,EAAEC,UAAU,EAAEC,eAAe,EAAE,GAAGC,cAAcL;IAE5E,MAAMM,WAAWC,OAAyB;IAE1CC,UAAU;QACNC,WAAW;YACP,IAAIR,GAAG,IAAI,IAAIK,SAAS,OAAO,EAC3BA,SAAS,OAAO,CAAC,KAAK;QAE9B,GAAG;IACP,GAAG;QAACL,GAAG,IAAI;KAAC;IAEZ,OAAO,WAAP,GACI,oBAACS,kBAAgBA;QAAC,MAAMT,GAAG,IAAI;QAAE,cAAcC;qBAC3C,oBAACQ,iBAAiB,OAAO;QAAC;qBACtB,oBAAC;QACG,iBAAeV,MAAM,QAAQ;QAC7B,WAAWW,GACPC,cAAc;YACV,MAAMZ,MAAM,IAAI;YAChB,SAASA,MAAM,OAAO;YACtB,SAASA,MAAM,OAAO;QAC1B,IACAH,mBAAmB;YAAE,MAAMG,MAAM,IAAI;YAAE,UAAUA,MAAM,QAAQ;QAAC;qBAGpE,oBAACa,mBAAiBA;QAAC,OAAOb,MAAM,KAAK;QAAE,MAAMA,MAAM,IAAI;wBAG/D,oBAACU,iBAAiB,OAAO;QACrB,OAAO;QACP,WAAW;QACX,SAASI,CAAAA,IAAKA,EAAE,eAAe;qBAE/B,oBAACC,iBAAeA;QAAC,OAAOd,GAAG,WAAW;QAAE,UAAUE;QAAY,UAAUG;sBACxE,oBAACU,gBAAcA;QACX,OAAOf,GAAG,KAAK;QACf,aAAaA,GAAG,WAAW;QAC3B,cAAcG;;AAKlC"}
+{"version":3,"file":"IconPicker/primitives/IconPickerPrimitive.js","sources":["../../../src/IconPicker/primitives/IconPickerPrimitive.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport type { InputPrimitiveProps } from \"~/Input/index.js\";\nimport { inputVariants } from \"~/Input/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { IconPickerGrid, IconPickerInput, IconPickerTrigger } from \"./components/index.js\";\nimport type { IconPickerIconDto } from \"../domains/index.js\";\nimport { useIconPicker } from \"./useIconPicker.js\";\n\nconst iconPickerVariants = cva(\"cursor-pointer text-neutral-strong\", {\n    variants: {\n        size: {\n            md: \"w-16\",\n            lg: \"w-16\",\n            xl: \"w-20\"\n        },\n        disabled: {\n            true: \"pointer-events-none\"\n        }\n    },\n    defaultVariants: {\n        size: \"lg\"\n    }\n});\n\ninterface IconPickerPrimitiveProps extends VariantProps<typeof iconPickerVariants> {\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Callback triggered when the value changes.\n     */\n    onChange?: (value: string) => void;\n    /**\n     * List of icons to be displayed in the icon picker.\n     */\n    icons: IconPickerIconDto[];\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Optional selected icon.\n     */\n    value?: string;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n}\n\nconst IconPickerPrimitive = (props: IconPickerPrimitiveProps) => {\n    const { vm, setListOpenState, searchIcon, setSelectedIcon } = useIconPicker(props);\n    // TODO figure out a better way to type this ref, without using `as unknown as`\n    const inputRef = useRef<HTMLInputElement>(null as unknown as HTMLInputElement);\n\n    useEffect(() => {\n        setTimeout(() => {\n            if (vm.open && inputRef.current) {\n                inputRef.current.focus();\n            }\n        }, 50);\n    }, [vm.open]);\n\n    return (\n        <PopoverPrimitive open={vm.open} onOpenChange={setListOpenState}>\n            <PopoverPrimitive.Trigger asChild>\n                <button\n                    data-disabled={props.disabled}\n                    className={cn(\n                        inputVariants({\n                            size: props.size,\n                            variant: props.variant,\n                            invalid: props.invalid\n                        }),\n                        iconPickerVariants({ size: props.size, disabled: props.disabled })\n                    )}\n                >\n                    <IconPickerTrigger value={props.value} size={props.size} />\n                </button>\n            </PopoverPrimitive.Trigger>\n            <PopoverPrimitive.Content align={\"start\"} className={\"min-w-96\"}>\n                <IconPickerInput value={vm.searchQuery} onChange={searchIcon} inputRef={inputRef} />\n                <IconPickerGrid\n                    icons={vm.icons}\n                    iconsLength={vm.iconsLength}\n                    onIconSelect={setSelectedIcon}\n                />\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive>\n    );\n};\n\nexport { IconPickerPrimitive, type IconPickerPrimitiveProps };\n"],"names":["iconPickerVariants","cva","IconPickerPrimitive","props","vm","setListOpenState","searchIcon","setSelectedIcon","useIconPicker","inputRef","useRef","useEffect","setTimeout","PopoverPrimitive","cn","inputVariants","IconPickerTrigger","IconPickerInput","IconPickerGrid"],"mappings":";;;;;;AASA,MAAMA,qBAAqBC,IAAI,sCAAsC;IACjE,UAAU;QACN,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,UAAU;YACN,MAAM;QACV;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AA+BA,MAAMC,sBAAsB,CAACC;IACzB,MAAM,EAAEC,EAAE,EAAEC,gBAAgB,EAAEC,UAAU,EAAEC,eAAe,EAAE,GAAGC,cAAcL;IAE5E,MAAMM,WAAWC,OAAyB;IAE1CC,UAAU;QACNC,WAAW;YACP,IAAIR,GAAG,IAAI,IAAIK,SAAS,OAAO,EAC3BA,SAAS,OAAO,CAAC,KAAK;QAE9B,GAAG;IACP,GAAG;QAACL,GAAG,IAAI;KAAC;IAEZ,OAAO,WAAP,GACI,oBAACS,kBAAgBA;QAAC,MAAMT,GAAG,IAAI;QAAE,cAAcC;qBAC3C,oBAACQ,iBAAiB,OAAO;QAAC;qBACtB,oBAAC;QACG,iBAAeV,MAAM,QAAQ;QAC7B,WAAWW,GACPC,cAAc;YACV,MAAMZ,MAAM,IAAI;YAChB,SAASA,MAAM,OAAO;YACtB,SAASA,MAAM,OAAO;QAC1B,IACAH,mBAAmB;YAAE,MAAMG,MAAM,IAAI;YAAE,UAAUA,MAAM,QAAQ;QAAC;qBAGpE,oBAACa,mBAAiBA;QAAC,OAAOb,MAAM,KAAK;QAAE,MAAMA,MAAM,IAAI;wBAG/D,oBAACU,iBAAiB,OAAO;QAAC,OAAO;QAAS,WAAW;qBACjD,oBAACI,iBAAeA;QAAC,OAAOb,GAAG,WAAW;QAAE,UAAUE;QAAY,UAAUG;sBACxE,oBAACS,gBAAcA;QACX,OAAOd,GAAG,KAAK;QACf,aAAaA,GAAG,WAAW;QAC3B,cAAcG;;AAKlC"}

package/Link/Link.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { type VariantProps } from "../utils.js";
 import { LinkComponentProps } from "./LinkComponent.js";
-declare const linkVariants: (props?: ({
+export declare const linkVariants: (props?: ({
     size?: "inherit" | "lg" | "md" | "sm" | "xl" | null | undefined;
     variant?: "primary" | "primary-negative" | "secondary" | "secondary-negative" | null | undefined;
     underline?: boolean | null | undefined;

package/Link/Link.js

@@ -51,6 +51,6 @@ function LinkBase({ size, variant, underline, className, children, ...rest }) {
     }, children);
 }
 const Link = makeDecoratable("Link", LinkBase);
-export { Link };
+export { Link, linkVariants };
 
 //# sourceMappingURL=Link.js.map

package/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link/Link.js","sources":["../../src/Link/Link.tsx"],"sourcesContent":["import React from \"react\";\nimport { cva, type VariantProps, makeDecoratable, cn } from \"~/utils.js\";\nimport { useAdminUi } from \"~/index.js\";\nimport { LinkComponentProps } from \"./LinkComponent.js\";\n\nconst linkVariants = cva(\"font-sans rounded-xs\", {\n    variants: {\n        size: {\n            inherit: \"[font-size:inherit]\",\n            sm: \"text-sm\",\n            md: \"text-md\",\n            lg: \"text-lg\",\n            xl: \"text-xl\"\n        },\n        variant: {\n            primary: [\n                \"text-accent-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-dimmed\"\n            ],\n            secondary: [\n                \"text-neutral-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-dimmed\"\n            ],\n            \"primary-negative\": [\n                \"text-accent-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-strong\"\n            ],\n            \"secondary-negative\": [\n                \"text-neutral-light\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-strong\"\n            ]\n        },\n        underline: {\n            true: \"underline hover:no-underline\",\n            false: \"hover:underline\"\n        }\n    },\n    defaultVariants: {\n        size: \"inherit\",\n        variant: \"primary\",\n        underline: false\n    }\n});\n\nexport type LinkProps = LinkComponentProps &\n    VariantProps<typeof linkVariants> & {\n        disabled?: boolean;\n    };\n\nfunction LinkBase({ size, variant, underline, className, children, ...rest }: LinkProps) {\n    const { linkComponent: LinkComponent } = useAdminUi();\n    return (\n        <LinkComponent\n            {...rest}\n            className={cn(linkVariants({ size, variant, underline }), className)}\n        >\n            {children}\n        </LinkComponent>\n    );\n}\n\nexport const Link = makeDecoratable(\"Link\", LinkBase);\n"],"names":["linkVariants","cva","LinkBase","size","variant","underline","className","children","rest","LinkComponent","useAdminUi","cn","Link","makeDecoratable"],"mappings":";;;AAKA,MAAMA,eAAeC,IAAI,wBAAwB;IAC7C,UAAU;QACN,MAAM;YACF,SAAS;YACT,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,SAAS;YACL,SAAS;gBACL;gBACA;aACH;YACD,WAAW;gBACP;gBACA;aACH;YACD,oBAAoB;gBAChB;gBACA;aACH;YACD,sBAAsB;gBAClB;gBACA;aACH;QACL;QACA,WAAW;YACP,MAAM;YACN,OAAO;QACX;IACJ;IACA,iBAAiB;QACb,MAAM;QACN,SAAS;QACT,WAAW;IACf;AACJ;AAOA,SAASC,SAAS,EAAEC,IAAI,EAAEC,OAAO,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,MAAiB;IACnF,MAAM,EAAE,eAAeC,aAAa,EAAE,GAAGC;IACzC,OAAO,WAAP,GACI,oBAACD,eAAAA;QACI,GAAGD,IAAI;QACR,WAAWG,GAAGX,aAAa;YAAEG;YAAMC;YAASC;QAAU,IAAIC;OAEzDC;AAGb;AAEO,MAAMK,OAAOC,gBAAgB,QAAQX"}
+{"version":3,"file":"Link/Link.js","sources":["../../src/Link/Link.tsx"],"sourcesContent":["import React from \"react\";\nimport { cva, type VariantProps, makeDecoratable, cn } from \"~/utils.js\";\nimport { useAdminUi } from \"~/index.js\";\nimport { LinkComponentProps } from \"./LinkComponent.js\";\n\nexport const linkVariants = cva(\"font-sans rounded-xs\", {\n    variants: {\n        size: {\n            inherit: \"[font-size:inherit]\",\n            sm: \"text-sm\",\n            md: \"text-md\",\n            lg: \"text-lg\",\n            xl: \"text-xl\"\n        },\n        variant: {\n            primary: [\n                \"text-accent-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-dimmed\"\n            ],\n            secondary: [\n                \"text-neutral-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-dimmed\"\n            ],\n            \"primary-negative\": [\n                \"text-accent-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-strong\"\n            ],\n            \"secondary-negative\": [\n                \"text-neutral-light\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-strong\"\n            ]\n        },\n        underline: {\n            true: \"underline hover:no-underline\",\n            false: \"hover:underline\"\n        }\n    },\n    defaultVariants: {\n        size: \"inherit\",\n        variant: \"primary\",\n        underline: false\n    }\n});\n\nexport type LinkProps = LinkComponentProps &\n    VariantProps<typeof linkVariants> & {\n        disabled?: boolean;\n    };\n\nfunction LinkBase({ size, variant, underline, className, children, ...rest }: LinkProps) {\n    const { linkComponent: LinkComponent } = useAdminUi();\n    return (\n        <LinkComponent\n            {...rest}\n            className={cn(linkVariants({ size, variant, underline }), className)}\n        >\n            {children}\n        </LinkComponent>\n    );\n}\n\nexport const Link = makeDecoratable(\"Link\", LinkBase);\n"],"names":["linkVariants","cva","LinkBase","size","variant","underline","className","children","rest","LinkComponent","useAdminUi","cn","Link","makeDecoratable"],"mappings":";;;AAKO,MAAMA,eAAeC,IAAI,wBAAwB;IACpD,UAAU;QACN,MAAM;YACF,SAAS;YACT,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,SAAS;YACL,SAAS;gBACL;gBACA;aACH;YACD,WAAW;gBACP;gBACA;aACH;YACD,oBAAoB;gBAChB;gBACA;aACH;YACD,sBAAsB;gBAClB;gBACA;aACH;QACL;QACA,WAAW;YACP,MAAM;YACN,OAAO;QACX;IACJ;IACA,iBAAiB;QACb,MAAM;QACN,SAAS;QACT,WAAW;IACf;AACJ;AAOA,SAASC,SAAS,EAAEC,IAAI,EAAEC,OAAO,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,MAAiB;IACnF,MAAM,EAAE,eAAeC,aAAa,EAAE,GAAGC;IACzC,OAAO,WAAP,GACI,oBAACD,eAAAA;QACI,GAAGD,IAAI;QACR,WAAWG,GAAGX,aAAa;YAAEG;YAAMC;YAASC;QAAU,IAAIC;OAEzDC;AAGb;AAEO,MAAMK,OAAOC,gBAAgB,QAAQX"}

package/MultiSelect/primitives/MultiSelectPrimitive.js

@@ -7,6 +7,7 @@ import { CheckboxPrimitiveRenderer } from "../../Checkbox/index.js";
 import { Icon } from "../../Icon/index.js";
 import { IconButton } from "../../Button/index.js";
 import { selectTriggerVariants } from "../../Select/primitives/components/index.js";
+import { useEscapeScrollLock } from "../../hooks/index.js";
 const MultiSelectTrigger = ({ displayValue, hasValue, placeholder, displayResetAction, disabled, invalid, size, variant, onValueReset })=>{
     const resetButton = useMemo(()=>{
         if (!hasValue || !displayResetAction) return;
@@ -49,7 +50,10 @@ const MultiSelectTrigger = ({ displayValue, hasValue, placeholder, displayResetA
         className: "h-md w-md"
     })));
 };
-const MultiSelectContent = ({ options, value, onToggle })=>/*#__PURE__*/ react.createElement(Popover.Portal, null, /*#__PURE__*/ react.createElement(Popover.Content, {
+const MultiSelectContent = ({ options, value, onToggle })=>{
+    const contentRef = useEscapeScrollLock();
+    return /*#__PURE__*/ react.createElement(Popover.Portal, null, /*#__PURE__*/ react.createElement(Popover.Content, {
+        ref: contentRef,
         className: cn("relative z-popover shadow-lg py-sm overflow-y-auto rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2", "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1"),
         style: {
             width: "var(--radix-popover-trigger-width)",
@@ -73,6 +77,7 @@ const MultiSelectContent = ({ options, value, onToggle })=>/*#__PURE__*/ react.c
             hasLabel: true,
             changeChecked: ()=>{}
         }))))));
+};
 const DecoratableMultiSelectPrimitive = ({ options = [], value = [], onChange, onValueReset, placeholder = "Select options", disabled, invalid, displayResetAction = true, showSelectionCount, size, variant })=>{
     const displayValue = useMemo(()=>{
         if (0 === value.length) return "";

package/MultiSelect/primitives/MultiSelectPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect/primitives/MultiSelectPrimitive.js","sources":["../../../src/MultiSelect/primitives/MultiSelectPrimitive.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { Popover } from \"radix-ui\";\nimport { ReactComponent as ChevronDown } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { ReactComponent as Close } from \"@webiny/icons/close.svg\";\nimport { cn, makeDecoratable, type VariantProps } from \"~/utils.js\";\nimport { CheckboxPrimitiveRenderer } from \"~/Checkbox/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { selectTriggerVariants } from \"~/Select/primitives/components/index.js\";\n\ninterface MultiSelectOptionDto {\n    label: string;\n    value: string;\n    disabled?: boolean;\n}\n\ninterface MultiSelectPrimitiveProps {\n    options?: MultiSelectOptionDto[];\n    value?: string[];\n    onChange?: (values: string[]) => void;\n    onValueReset?: () => void;\n    placeholder?: string;\n    disabled?: boolean;\n    invalid?: boolean;\n    displayResetAction?: boolean;\n    /**\n     * When `true`, shows \"{count} items selected\" in the trigger instead of the full\n     * comma-separated label list.\n     */\n    showSelectionCount?: boolean;\n    size?: VariantProps<typeof selectTriggerVariants>[\"size\"];\n    variant?: VariantProps<typeof selectTriggerVariants>[\"variant\"];\n}\n\n/**\n * MultiSelect Trigger\n */\ninterface MultiSelectTriggerProps {\n    displayValue: string;\n    hasValue: boolean;\n    placeholder: string;\n    displayResetAction: boolean;\n    disabled?: boolean;\n    invalid?: VariantProps<typeof selectTriggerVariants>[\"invalid\"];\n    size?: VariantProps<typeof selectTriggerVariants>[\"size\"];\n    variant?: VariantProps<typeof selectTriggerVariants>[\"variant\"];\n    onValueReset: () => void;\n}\n\nconst MultiSelectTrigger = ({\n    displayValue,\n    hasValue,\n    placeholder,\n    displayResetAction,\n    disabled,\n    invalid,\n    size,\n    variant,\n    onValueReset\n}: MultiSelectTriggerProps) => {\n    const resetButton = useMemo(() => {\n        if (!hasValue || !displayResetAction) {\n            return undefined;\n        }\n        return (\n            <IconButton\n                onPointerDown={event => {\n                    event.stopPropagation();\n                    onValueReset();\n                }}\n                icon={\n                    <span>\n                        <Icon\n                            icon={<Close />}\n                            label={\"Reset\"}\n                            color={variant === \"ghost-negative\" ? \"neutral-negative\" : \"inherit\"}\n                        />\n                    </span>\n                }\n                size={\"xs\"}\n                variant={variant === \"ghost-negative\" ? \"ghost-negative\" : \"secondary\"}\n                disabled={disabled}\n                asChild\n            />\n        );\n    }, [hasValue, displayResetAction, onValueReset, variant, disabled]);\n\n    return (\n        <Popover.Trigger\n            className={cn(selectTriggerVariants({ variant, size, invalid }))}\n            disabled={disabled}\n        >\n            <div className={\"flex-1 text-left truncate\"}>\n                {hasValue ? (\n                    displayValue\n                ) : (\n                    <span className={\"text-neutral-disabled\"}>{placeholder}</span>\n                )}\n            </div>\n            {resetButton}\n            <span className={\"h-md w-md shrink-0 fill-neutral-xstrong\"}>\n                <ChevronDown className={\"h-md w-md\"} />\n            </span>\n        </Popover.Trigger>\n    );\n};\n\n/**\n * MultiSelect Content\n */\ninterface MultiSelectContentProps {\n    options: MultiSelectOptionDto[];\n    value: string[];\n    onToggle: (value: string) => void;\n}\n\nconst MultiSelectContent = ({ options, value, onToggle }: MultiSelectContentProps) => {\n    return (\n        <Popover.Portal>\n            <Popover.Content\n                className={cn(\n                    \"relative z-popover shadow-lg py-sm overflow-y-auto rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong\",\n                    \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n                    \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n                    \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n                    \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n                    \"data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1\"\n                )}\n                style={{\n                    width: \"var(--radix-popover-trigger-width)\",\n                    maxHeight: \"min(250px, var(--radix-popover-content-available-height, 250px))\"\n                }}\n                align={\"start\"}\n                sideOffset={4}\n            >\n                {options.map(option => (\n                    <div\n                        key={option.value}\n                        className={cn(\n                            \"rounded-sm p-sm mx-sm cursor-pointer\",\n                            \"hover:bg-neutral-dimmed\",\n                            option.disabled && \"opacity-50 pointer-events-none\"\n                        )}\n                        onClick={() => onToggle(option.value)}\n                    >\n                        <div className={\"pointer-events-none\"}>\n                            <CheckboxPrimitiveRenderer\n                                id={option.value}\n                                label={option.label}\n                                value={option.value}\n                                checked={value.includes(option.value)}\n                                disabled={option.disabled ?? false}\n                                indeterminate={false}\n                                hasLabel={true}\n                                changeChecked={() => {}}\n                            />\n                        </div>\n                    </div>\n                ))}\n            </Popover.Content>\n        </Popover.Portal>\n    );\n};\n\n/**\n * MultiSelect Primitive\n */\nconst DecoratableMultiSelectPrimitive = ({\n    options = [],\n    value = [],\n    onChange,\n    onValueReset,\n    placeholder = \"Select options\",\n    disabled,\n    invalid,\n    displayResetAction = true,\n    showSelectionCount,\n    size,\n    variant\n}: MultiSelectPrimitiveProps) => {\n    const displayValue = useMemo(() => {\n        if (value.length === 0) {\n            return \"\";\n        }\n        if (showSelectionCount) {\n            return `${value.length} items selected`;\n        }\n        const labelMap = new Map(options.map(o => [o.value, o.label]));\n        return value.map(v => labelMap.get(v) ?? v).join(\", \");\n    }, [value, options, showSelectionCount]);\n\n    const toggle = useCallback(\n        (optionValue: string) => {\n            const next = value.includes(optionValue)\n                ? value.filter(v => v !== optionValue)\n                : [...value, optionValue];\n            onChange?.(next);\n        },\n        [value, onChange]\n    );\n\n    const reset = useCallback(() => {\n        onChange?.([]);\n        onValueReset?.();\n    }, [onChange, onValueReset]);\n\n    return (\n        <Popover.Root>\n            <MultiSelectTrigger\n                displayValue={displayValue}\n                hasValue={value.length > 0}\n                placeholder={placeholder}\n                displayResetAction={displayResetAction}\n                disabled={disabled}\n                invalid={invalid}\n                size={size}\n                variant={variant}\n                onValueReset={reset}\n            />\n            <MultiSelectContent options={options} value={value} onToggle={toggle} />\n        </Popover.Root>\n    );\n};\nconst MultiSelectPrimitive = makeDecoratable(\n    \"MultiSelectPrimitive\",\n    DecoratableMultiSelectPrimitive\n);\n\nexport { MultiSelectPrimitive, type MultiSelectPrimitiveProps, type MultiSelectOptionDto };\n"],"names":["MultiSelectTrigger","displayValue","hasValue","placeholder","displayResetAction","disabled","invalid","size","variant","onValueReset","resetButton","useMemo","IconButton","event","Icon","Close","Popover","cn","selectTriggerVariants","ChevronDown","MultiSelectContent","options","value","onToggle","option","CheckboxPrimitiveRenderer","DecoratableMultiSelectPrimitive","onChange","showSelectionCount","labelMap","Map","o","v","toggle","useCallback","optionValue","next","reset","MultiSelectPrimitive","makeDecoratable"],"mappings":";;;;;;;;;AAiDA,MAAMA,qBAAqB,CAAC,EACxBC,YAAY,EACZC,QAAQ,EACRC,WAAW,EACXC,kBAAkB,EAClBC,QAAQ,EACRC,OAAO,EACPC,IAAI,EACJC,OAAO,EACPC,YAAY,EACU;IACtB,MAAMC,cAAcC,QAAQ;QACxB,IAAI,CAACT,YAAY,CAACE,oBACd;QAEJ,OAAO,WAAP,GACI,oBAACQ,YAAUA;YACP,eAAeC,CAAAA;gBACXA,MAAM,eAAe;gBACrBJ;YACJ;YACA,oBACI,oBAAC,4BACG,oBAACK,MAAIA;gBACD,oBAAM,oBAACC,0BAAKA;gBACZ,OAAO;gBACP,OAAOP,AAAY,qBAAZA,UAA+B,qBAAqB;;YAIvE,MAAM;YACN,SAASA,AAAY,qBAAZA,UAA+B,mBAAmB;YAC3D,UAAUH;YACV;;IAGZ,GAAG;QAACH;QAAUE;QAAoBK;QAAcD;QAASH;KAAS;IAElE,OAAO,WAAP,GACI,oBAACW,QAAQ,OAAO;QACZ,WAAWC,GAAGC,sBAAsB;YAAEV;YAASD;YAAMD;QAAQ;QAC7D,UAAUD;qBAEV,oBAAC;QAAI,WAAW;OACXH,WACGD,eAAAA,WAAAA,GAEA,oBAAC;QAAK,WAAW;OAA0BE,eAGlDO,aAAAA,WAAAA,GACD,oBAAC;QAAK,WAAW;qBACb,oBAACS,gBAAWA;QAAC,WAAW;;AAIxC;AAWA,MAAMC,qBAAqB,CAAC,EAAEC,OAAO,EAAEC,KAAK,EAAEC,QAAQ,EAA2B,GACtE,WAAP,GACI,oBAACP,QAAQ,MAAM,sBACX,oBAACA,QAAQ,OAAO;QACZ,WAAWC,GACP,oIACA,gEACA,8DACA,gEACA,iFACA;QAEJ,OAAO;YACH,OAAO;YACP,WAAW;QACf;QACA,OAAO;QACP,YAAY;OAEXI,QAAQ,GAAG,CAACG,CAAAA,SAAAA,WAAAA,GACT,oBAAC;YACG,KAAKA,OAAO,KAAK;YACjB,WAAWP,GACP,wCACA,2BACAO,OAAO,QAAQ,IAAI;YAEvB,SAAS,IAAMD,SAASC,OAAO,KAAK;yBAEpC,oBAAC;YAAI,WAAW;yBACZ,oBAACC,2BAAyBA;YACtB,IAAID,OAAO,KAAK;YAChB,OAAOA,OAAO,KAAK;YACnB,OAAOA,OAAO,KAAK;YACnB,SAASF,MAAM,QAAQ,CAACE,OAAO,KAAK;YACpC,UAAUA,OAAO,QAAQ,IAAI;YAC7B,eAAe;YACf,UAAU;YACV,eAAe,KAAO;;AAatD,MAAME,kCAAkC,CAAC,EACrCL,UAAU,EAAE,EACZC,QAAQ,EAAE,EACVK,QAAQ,EACRlB,YAAY,EACZN,cAAc,gBAAgB,EAC9BE,QAAQ,EACRC,OAAO,EACPF,qBAAqB,IAAI,EACzBwB,kBAAkB,EAClBrB,IAAI,EACJC,OAAO,EACiB;IACxB,MAAMP,eAAeU,QAAQ;QACzB,IAAIW,AAAiB,MAAjBA,MAAM,MAAM,EACZ,OAAO;QAEX,IAAIM,oBACA,OAAO,GAAGN,MAAM,MAAM,CAAC,eAAe,CAAC;QAE3C,MAAMO,WAAW,IAAIC,IAAIT,QAAQ,GAAG,CAACU,CAAAA,IAAK;gBAACA,EAAE,KAAK;gBAAEA,EAAE,KAAK;aAAC;QAC5D,OAAOT,MAAM,GAAG,CAACU,CAAAA,IAAKH,SAAS,GAAG,CAACG,MAAMA,GAAG,IAAI,CAAC;IACrD,GAAG;QAACV;QAAOD;QAASO;KAAmB;IAEvC,MAAMK,SAASC,YACX,CAACC;QACG,MAAMC,OAAOd,MAAM,QAAQ,CAACa,eACtBb,MAAM,MAAM,CAACU,CAAAA,IAAKA,MAAMG,eACxB;eAAIb;YAAOa;SAAY;QAC7BR,WAAWS;IACf,GACA;QAACd;QAAOK;KAAS;IAGrB,MAAMU,QAAQH,YAAY;QACtBP,WAAW,EAAE;QACblB;IACJ,GAAG;QAACkB;QAAUlB;KAAa;IAE3B,OAAO,WAAP,GACI,oBAACO,QAAQ,IAAI,sBACT,oBAAChB,oBAAkBA;QACf,cAAcC;QACd,UAAUqB,MAAM,MAAM,GAAG;QACzB,aAAanB;QACb,oBAAoBC;QACpB,UAAUC;QACV,SAASC;QACT,MAAMC;QACN,SAASC;QACT,cAAc6B;sBAElB,oBAACjB,oBAAkBA;QAAC,SAASC;QAAS,OAAOC;QAAO,UAAUW;;AAG1E;AACA,MAAMK,uBAAuBC,gBACzB,wBACAb"}
+{"version":3,"file":"MultiSelect/primitives/MultiSelectPrimitive.js","sources":["../../../src/MultiSelect/primitives/MultiSelectPrimitive.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { Popover } from \"radix-ui\";\nimport { ReactComponent as ChevronDown } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { ReactComponent as Close } from \"@webiny/icons/close.svg\";\nimport { cn, makeDecoratable, type VariantProps } from \"~/utils.js\";\nimport { CheckboxPrimitiveRenderer } from \"~/Checkbox/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { selectTriggerVariants } from \"~/Select/primitives/components/index.js\";\nimport { useEscapeScrollLock } from \"~/hooks/index.js\";\n\ninterface MultiSelectOptionDto {\n    label: string;\n    value: string;\n    disabled?: boolean;\n}\n\ninterface MultiSelectPrimitiveProps {\n    options?: MultiSelectOptionDto[];\n    value?: string[];\n    onChange?: (values: string[]) => void;\n    onValueReset?: () => void;\n    placeholder?: string;\n    disabled?: boolean;\n    invalid?: boolean;\n    displayResetAction?: boolean;\n    /**\n     * When `true`, shows \"{count} items selected\" in the trigger instead of the full\n     * comma-separated label list.\n     */\n    showSelectionCount?: boolean;\n    size?: VariantProps<typeof selectTriggerVariants>[\"size\"];\n    variant?: VariantProps<typeof selectTriggerVariants>[\"variant\"];\n}\n\n/**\n * MultiSelect Trigger\n */\ninterface MultiSelectTriggerProps {\n    displayValue: string;\n    hasValue: boolean;\n    placeholder: string;\n    displayResetAction: boolean;\n    disabled?: boolean;\n    invalid?: VariantProps<typeof selectTriggerVariants>[\"invalid\"];\n    size?: VariantProps<typeof selectTriggerVariants>[\"size\"];\n    variant?: VariantProps<typeof selectTriggerVariants>[\"variant\"];\n    onValueReset: () => void;\n}\n\nconst MultiSelectTrigger = ({\n    displayValue,\n    hasValue,\n    placeholder,\n    displayResetAction,\n    disabled,\n    invalid,\n    size,\n    variant,\n    onValueReset\n}: MultiSelectTriggerProps) => {\n    const resetButton = useMemo(() => {\n        if (!hasValue || !displayResetAction) {\n            return undefined;\n        }\n        return (\n            <IconButton\n                onPointerDown={event => {\n                    event.stopPropagation();\n                    onValueReset();\n                }}\n                icon={\n                    <span>\n                        <Icon\n                            icon={<Close />}\n                            label={\"Reset\"}\n                            color={variant === \"ghost-negative\" ? \"neutral-negative\" : \"inherit\"}\n                        />\n                    </span>\n                }\n                size={\"xs\"}\n                variant={variant === \"ghost-negative\" ? \"ghost-negative\" : \"secondary\"}\n                disabled={disabled}\n                asChild\n            />\n        );\n    }, [hasValue, displayResetAction, onValueReset, variant, disabled]);\n\n    return (\n        <Popover.Trigger\n            className={cn(selectTriggerVariants({ variant, size, invalid }))}\n            disabled={disabled}\n        >\n            <div className={\"flex-1 text-left truncate\"}>\n                {hasValue ? (\n                    displayValue\n                ) : (\n                    <span className={\"text-neutral-disabled\"}>{placeholder}</span>\n                )}\n            </div>\n            {resetButton}\n            <span className={\"h-md w-md shrink-0 fill-neutral-xstrong\"}>\n                <ChevronDown className={\"h-md w-md\"} />\n            </span>\n        </Popover.Trigger>\n    );\n};\n\n/**\n * MultiSelect Content\n */\ninterface MultiSelectContentProps {\n    options: MultiSelectOptionDto[];\n    value: string[];\n    onToggle: (value: string) => void;\n}\n\nconst MultiSelectContent = ({ options, value, onToggle }: MultiSelectContentProps) => {\n    /*\n     * This popover is built on the Radix primitive directly, so it needs the same scroll-lock\n     * escape hatch that `PopoverPrimitive.Content` applies.\n     */\n    const contentRef = useEscapeScrollLock<HTMLDivElement>();\n\n    return (\n        <Popover.Portal>\n            <Popover.Content\n                ref={contentRef}\n                className={cn(\n                    \"relative z-popover shadow-lg py-sm overflow-y-auto rounded-sm border-sm border-neutral-muted bg-neutral-base text-neutral-strong\",\n                    \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n                    \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n                    \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n                    \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n                    \"data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1\"\n                )}\n                style={{\n                    width: \"var(--radix-popover-trigger-width)\",\n                    maxHeight: \"min(250px, var(--radix-popover-content-available-height, 250px))\"\n                }}\n                align={\"start\"}\n                sideOffset={4}\n            >\n                {options.map(option => (\n                    <div\n                        key={option.value}\n                        className={cn(\n                            \"rounded-sm p-sm mx-sm cursor-pointer\",\n                            \"hover:bg-neutral-dimmed\",\n                            option.disabled && \"opacity-50 pointer-events-none\"\n                        )}\n                        onClick={() => onToggle(option.value)}\n                    >\n                        <div className={\"pointer-events-none\"}>\n                            <CheckboxPrimitiveRenderer\n                                id={option.value}\n                                label={option.label}\n                                value={option.value}\n                                checked={value.includes(option.value)}\n                                disabled={option.disabled ?? false}\n                                indeterminate={false}\n                                hasLabel={true}\n                                changeChecked={() => {}}\n                            />\n                        </div>\n                    </div>\n                ))}\n            </Popover.Content>\n        </Popover.Portal>\n    );\n};\n\n/**\n * MultiSelect Primitive\n */\nconst DecoratableMultiSelectPrimitive = ({\n    options = [],\n    value = [],\n    onChange,\n    onValueReset,\n    placeholder = \"Select options\",\n    disabled,\n    invalid,\n    displayResetAction = true,\n    showSelectionCount,\n    size,\n    variant\n}: MultiSelectPrimitiveProps) => {\n    const displayValue = useMemo(() => {\n        if (value.length === 0) {\n            return \"\";\n        }\n        if (showSelectionCount) {\n            return `${value.length} items selected`;\n        }\n        const labelMap = new Map(options.map(o => [o.value, o.label]));\n        return value.map(v => labelMap.get(v) ?? v).join(\", \");\n    }, [value, options, showSelectionCount]);\n\n    const toggle = useCallback(\n        (optionValue: string) => {\n            const next = value.includes(optionValue)\n                ? value.filter(v => v !== optionValue)\n                : [...value, optionValue];\n            onChange?.(next);\n        },\n        [value, onChange]\n    );\n\n    const reset = useCallback(() => {\n        onChange?.([]);\n        onValueReset?.();\n    }, [onChange, onValueReset]);\n\n    return (\n        <Popover.Root>\n            <MultiSelectTrigger\n                displayValue={displayValue}\n                hasValue={value.length > 0}\n                placeholder={placeholder}\n                displayResetAction={displayResetAction}\n                disabled={disabled}\n                invalid={invalid}\n                size={size}\n                variant={variant}\n                onValueReset={reset}\n            />\n            <MultiSelectContent options={options} value={value} onToggle={toggle} />\n        </Popover.Root>\n    );\n};\nconst MultiSelectPrimitive = makeDecoratable(\n    \"MultiSelectPrimitive\",\n    DecoratableMultiSelectPrimitive\n);\n\nexport { MultiSelectPrimitive, type MultiSelectPrimitiveProps, type MultiSelectOptionDto };\n"],"names":["MultiSelectTrigger","displayValue","hasValue","placeholder","displayResetAction","disabled","invalid","size","variant","onValueReset","resetButton","useMemo","IconButton","event","Icon","Close","Popover","cn","selectTriggerVariants","ChevronDown","MultiSelectContent","options","value","onToggle","contentRef","useEscapeScrollLock","option","CheckboxPrimitiveRenderer","DecoratableMultiSelectPrimitive","onChange","showSelectionCount","labelMap","Map","o","v","toggle","useCallback","optionValue","next","reset","MultiSelectPrimitive","makeDecoratable"],"mappings":";;;;;;;;;;AAkDA,MAAMA,qBAAqB,CAAC,EACxBC,YAAY,EACZC,QAAQ,EACRC,WAAW,EACXC,kBAAkB,EAClBC,QAAQ,EACRC,OAAO,EACPC,IAAI,EACJC,OAAO,EACPC,YAAY,EACU;IACtB,MAAMC,cAAcC,QAAQ;QACxB,IAAI,CAACT,YAAY,CAACE,oBACd;QAEJ,OAAO,WAAP,GACI,oBAACQ,YAAUA;YACP,eAAeC,CAAAA;gBACXA,MAAM,eAAe;gBACrBJ;YACJ;YACA,oBACI,oBAAC,4BACG,oBAACK,MAAIA;gBACD,oBAAM,oBAACC,0BAAKA;gBACZ,OAAO;gBACP,OAAOP,AAAY,qBAAZA,UAA+B,qBAAqB;;YAIvE,MAAM;YACN,SAASA,AAAY,qBAAZA,UAA+B,mBAAmB;YAC3D,UAAUH;YACV;;IAGZ,GAAG;QAACH;QAAUE;QAAoBK;QAAcD;QAASH;KAAS;IAElE,OAAO,WAAP,GACI,oBAACW,QAAQ,OAAO;QACZ,WAAWC,GAAGC,sBAAsB;YAAEV;YAASD;YAAMD;QAAQ;QAC7D,UAAUD;qBAEV,oBAAC;QAAI,WAAW;OACXH,WACGD,eAAAA,WAAAA,GAEA,oBAAC;QAAK,WAAW;OAA0BE,eAGlDO,aAAAA,WAAAA,GACD,oBAAC;QAAK,WAAW;qBACb,oBAACS,gBAAWA;QAAC,WAAW;;AAIxC;AAWA,MAAMC,qBAAqB,CAAC,EAAEC,OAAO,EAAEC,KAAK,EAAEC,QAAQ,EAA2B;IAK7E,MAAMC,aAAaC;IAEnB,OAAO,WAAP,GACI,oBAACT,QAAQ,MAAM,sBACX,oBAACA,QAAQ,OAAO;QACZ,KAAKQ;QACL,WAAWP,GACP,oIACA,gEACA,8DACA,gEACA,iFACA;QAEJ,OAAO;YACH,OAAO;YACP,WAAW;QACf;QACA,OAAO;QACP,YAAY;OAEXI,QAAQ,GAAG,CAACK,CAAAA,SAAAA,WAAAA,GACT,oBAAC;YACG,KAAKA,OAAO,KAAK;YACjB,WAAWT,GACP,wCACA,2BACAS,OAAO,QAAQ,IAAI;YAEvB,SAAS,IAAMH,SAASG,OAAO,KAAK;yBAEpC,oBAAC;YAAI,WAAW;yBACZ,oBAACC,2BAAyBA;YACtB,IAAID,OAAO,KAAK;YAChB,OAAOA,OAAO,KAAK;YACnB,OAAOA,OAAO,KAAK;YACnB,SAASJ,MAAM,QAAQ,CAACI,OAAO,KAAK;YACpC,UAAUA,OAAO,QAAQ,IAAI;YAC7B,eAAe;YACf,UAAU;YACV,eAAe,KAAO;;AAQtD;AAKA,MAAME,kCAAkC,CAAC,EACrCP,UAAU,EAAE,EACZC,QAAQ,EAAE,EACVO,QAAQ,EACRpB,YAAY,EACZN,cAAc,gBAAgB,EAC9BE,QAAQ,EACRC,OAAO,EACPF,qBAAqB,IAAI,EACzB0B,kBAAkB,EAClBvB,IAAI,EACJC,OAAO,EACiB;IACxB,MAAMP,eAAeU,QAAQ;QACzB,IAAIW,AAAiB,MAAjBA,MAAM,MAAM,EACZ,OAAO;QAEX,IAAIQ,oBACA,OAAO,GAAGR,MAAM,MAAM,CAAC,eAAe,CAAC;QAE3C,MAAMS,WAAW,IAAIC,IAAIX,QAAQ,GAAG,CAACY,CAAAA,IAAK;gBAACA,EAAE,KAAK;gBAAEA,EAAE,KAAK;aAAC;QAC5D,OAAOX,MAAM,GAAG,CAACY,CAAAA,IAAKH,SAAS,GAAG,CAACG,MAAMA,GAAG,IAAI,CAAC;IACrD,GAAG;QAACZ;QAAOD;QAASS;KAAmB;IAEvC,MAAMK,SAASC,YACX,CAACC;QACG,MAAMC,OAAOhB,MAAM,QAAQ,CAACe,eACtBf,MAAM,MAAM,CAACY,CAAAA,IAAKA,MAAMG,eACxB;eAAIf;YAAOe;SAAY;QAC7BR,WAAWS;IACf,GACA;QAAChB;QAAOO;KAAS;IAGrB,MAAMU,QAAQH,YAAY;QACtBP,WAAW,EAAE;QACbpB;IACJ,GAAG;QAACoB;QAAUpB;KAAa;IAE3B,OAAO,WAAP,GACI,oBAACO,QAAQ,IAAI,sBACT,oBAAChB,oBAAkBA;QACf,cAAcC;QACd,UAAUqB,MAAM,MAAM,GAAG;QACzB,aAAanB;QACb,oBAAoBC;QACpB,UAAUC;QACV,SAASC;QACT,MAAMC;QACN,SAASC;QACT,cAAc+B;sBAElB,oBAACnB,oBAAkBA;QAAC,SAASC;QAAS,OAAOC;QAAO,UAAUa;;AAG1E;AACA,MAAMK,uBAAuBC,gBACzB,wBACAb"}

package/Popover/Popover.stories.d.ts

@@ -9,3 +9,10 @@ export declare const WithArrowAccentVariant: Story;
 export declare const SubtleVariant: Story;
 export declare const WithArrowSubtleVariant: Story;
 export declare const Documentation: Story;
+/**
+ * A dialog locks scrolling outside of its own content, and the popover is portaled out of it, so
+ * the lock covers the popover too. What that costs is the wheel and the trackpad: the list below
+ * still moved by its scrollbar and by the arrow keys, but a wheel event over it did nothing at all.
+ * It has to scroll by wheel while the dialog is open.
+ */
+export declare const InsideDialog: Story;

package/Popover/Popover.stories.js

@@ -1,5 +1,7 @@
 import react from "react";
 import { Popover } from "./Popover.js";
+import { Button } from "../Button/index.js";
+import { Dialog } from "../Dialog/index.js";
 const meta = {
     title: "Components/Popover",
     component: Popover,
@@ -130,7 +132,28 @@ const Documentation = {
         }
     }
 };
+const InsideDialog = {
+    render: ()=>/*#__PURE__*/ react.createElement(Dialog, {
+            trigger: /*#__PURE__*/ react.createElement(Button, {
+                variant: "primary",
+                text: "Open dialog"
+            }),
+            title: "Popover inside a dialog"
+        }, /*#__PURE__*/ react.createElement(Popover, {
+            trigger: /*#__PURE__*/ react.createElement("span", null, /*#__PURE__*/ react.createElement(Button, {
+                variant: "secondary",
+                text: "Open popover"
+            })),
+            content: /*#__PURE__*/ react.createElement("ul", {
+                className: "max-h-48 w-[220px] overflow-y-auto"
+            }, Array.from({
+                length: 40
+            }, (_, index)=>/*#__PURE__*/ react.createElement("li", {
+                    key: index
+                }, "Option ", index + 1)))
+        }))
+};
 export default Popover_stories;
-export { AccentVariant, Default, Documentation, SubtleVariant, WithArrowAccentVariant, WithArrowSubtleVariant };
+export { AccentVariant, Default, Documentation, InsideDialog, SubtleVariant, WithArrowAccentVariant, WithArrowSubtleVariant };
 
 //# sourceMappingURL=Popover.stories.js.map

package/Popover/Popover.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover/Popover.stories.js","sources":["../../src/Popover/Popover.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Popover } from \"./Popover.js\";\n\nconst meta: Meta<typeof Popover> = {\n    title: \"Components/Popover\",\n    component: Popover,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        align: {\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        side: {\n            control: \"select\",\n            options: [\"top\", \"bottom\", \"left\", \"right\"]\n        }\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Popover>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <p>Popover trigger</p>,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const WithArrowAccentVariant: Story = {\n    args: {\n        ...AccentVariant.args,\n        arrow: true\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"flex items-center justify-center bg-neutral-dark text-neutral-light w-full h-[300px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithArrowSubtleVariant: Story = {\n    args: {\n        variant: \"subtle\",\n        trigger: <p>Popover trigger</p>,\n        arrow: true,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    },\n    decorators: SubtleVariant.decorators\n};\n\nexport const Documentation: Story = {\n    args: {\n        align: \"center\",\n        side: \"bottom\",\n        variant: \"subtle\",\n        arrow: false,\n        close: false,\n        trigger: <p>Popover trigger</p>,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The element that triggers the popover when clicked. Please refer to the example code for details.\"\n        },\n        content: {\n            description:\n                \"The content to display inside the popover. Please refer to the example code for details.\"\n        },\n        side: {\n            description: \"The side of the trigger where the popover appears.\",\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        align: {\n            description: \"The alignment of the popover relative to the trigger.\",\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        variant: {\n            description: \"The visual style variant of the popover.\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        arrow: {\n            description: \"Whether to show an arrow pointing to the trigger.\",\n            control: \"boolean\"\n        },\n        close: {\n            description: \"Whether to show a close button inside the popover.\",\n            control: \"boolean\"\n        }\n    }\n};\n"],"names":["meta","Popover","Story","Default","AccentVariant","WithArrowAccentVariant","SubtleVariant","WithArrowSubtleVariant","Documentation"],"mappings":";;AAIA,MAAMA,OAA6B;IAC/B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,OAAO;YACH,SAAS;YACT,SAAS;gBAAC;gBAAS;gBAAU;aAAM;QACvC;QACA,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAU;gBAAQ;aAAQ;QAC/C;IACJ;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEA,wBAAeF;AAIR,MAAMG,UAAiB;IAC1B,MAAM;QACF,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAME,yBAAgC;IACzC,MAAM;QACF,GAAGD,cAAc,IAAI;QACrB,OAAO;IACX;AACJ;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,SAAS;IACb;IACA,YAAY;QACRD,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAMK,yBAAgC;IACzC,MAAM;QACF,SAAS;QACT,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,OAAO;QACP,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;IACA,YAAYD,cAAc,UAAU;AACxC;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,OAAO;QACP,MAAM;QACN,SAAS;QACT,OAAO;QACP,OAAO;QACP,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;IACA,UAAU;QACN,SAAS;YACL,aACI;QACR;QACA,SAAS;YACL,aACI;QACR;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAS;gBAAU;aAAO;QAC/C;QACA,OAAO;YACH,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAS;gBAAU;aAAM;QACvC;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;aAAS;QACjC;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;IACJ;AACJ"}
+{"version":3,"file":"Popover/Popover.stories.js","sources":["../../src/Popover/Popover.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Popover } from \"./Popover.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Dialog } from \"~/Dialog/index.js\";\n\nconst meta: Meta<typeof Popover> = {\n    title: \"Components/Popover\",\n    component: Popover,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        align: {\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        side: {\n            control: \"select\",\n            options: [\"top\", \"bottom\", \"left\", \"right\"]\n        }\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f4f4f4] flex items-center justify-center w-full h-[300px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Popover>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <p>Popover trigger</p>,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const WithArrowAccentVariant: Story = {\n    args: {\n        ...AccentVariant.args,\n        arrow: true\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"flex items-center justify-center bg-neutral-dark text-neutral-light w-full h-[300px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithArrowSubtleVariant: Story = {\n    args: {\n        variant: \"subtle\",\n        trigger: <p>Popover trigger</p>,\n        arrow: true,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    },\n    decorators: SubtleVariant.decorators\n};\n\nexport const Documentation: Story = {\n    args: {\n        align: \"center\",\n        side: \"bottom\",\n        variant: \"subtle\",\n        arrow: false,\n        close: false,\n        trigger: <p>Popover trigger</p>,\n        content: (\n            <div className={\"w-[260px]\"}>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Morbi\n                lectus leo, dapibus vitae mollis dictum, vulputate eget lorem. Aliquam rutrum auctor\n                tempus.\n            </div>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The element that triggers the popover when clicked. Please refer to the example code for details.\"\n        },\n        content: {\n            description:\n                \"The content to display inside the popover. Please refer to the example code for details.\"\n        },\n        side: {\n            description: \"The side of the trigger where the popover appears.\",\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        align: {\n            description: \"The alignment of the popover relative to the trigger.\",\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        variant: {\n            description: \"The visual style variant of the popover.\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        arrow: {\n            description: \"Whether to show an arrow pointing to the trigger.\",\n            control: \"boolean\"\n        },\n        close: {\n            description: \"Whether to show a close button inside the popover.\",\n            control: \"boolean\"\n        }\n    }\n};\n\n/**\n * A dialog locks scrolling outside of its own content, and the popover is portaled out of it, so\n * the lock covers the popover too. What that costs is the wheel and the trackpad: the list below\n * still moved by its scrollbar and by the arrow keys, but a wheel event over it did nothing at all.\n * It has to scroll by wheel while the dialog is open.\n */\nexport const InsideDialog: Story = {\n    render: () => (\n        <Dialog\n            trigger={<Button variant={\"primary\"} text={\"Open dialog\"} />}\n            title={\"Popover inside a dialog\"}\n        >\n            <Popover\n                trigger={\n                    <span>\n                        <Button variant={\"secondary\"} text={\"Open popover\"} />\n                    </span>\n                }\n                content={\n                    <ul className={\"max-h-48 w-[220px] overflow-y-auto\"}>\n                        {Array.from({ length: 40 }, (_, index) => (\n                            <li key={index}>Option {index + 1}</li>\n                        ))}\n                    </ul>\n                }\n            />\n        </Dialog>\n    )\n};\n"],"names":["meta","Popover","Story","Default","AccentVariant","WithArrowAccentVariant","SubtleVariant","WithArrowSubtleVariant","Documentation","InsideDialog","Dialog","Button","Array","_","index"],"mappings":";;;;AAMA,MAAMA,OAA6B;IAC/B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,OAAO;YACH,SAAS;YACT,SAAS;gBAAC;gBAAS;gBAAU;aAAM;QACvC;QACA,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAU;gBAAQ;aAAQ;QAC/C;IACJ;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEA,wBAAeF;AAIR,MAAMG,UAAiB;IAC1B,MAAM;QACF,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAME,yBAAgC;IACzC,MAAM;QACF,GAAGD,cAAc,IAAI;QACrB,OAAO;IACX;AACJ;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,SAAS;IACb;IACA,YAAY;QACRD,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEO,MAAMK,yBAAgC;IACzC,MAAM;QACF,SAAS;QACT,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,OAAO;QACP,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;IACA,YAAYD,cAAc,UAAU;AACxC;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,OAAO;QACP,MAAM;QACN,SAAS;QACT,OAAO;QACP,OAAO;QACP,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,SAAS,WAAT,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,gBAAO,+BAAmC;IAKvD;IACA,UAAU;QACN,SAAS;YACL,aACI;QACR;QACA,SAAS;YACL,aACI;QACR;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAS;gBAAU;aAAO;QAC/C;QACA,OAAO;YACH,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAS;gBAAU;aAAM;QACvC;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;aAAS;QACjC;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;IACJ;AACJ;AAQO,MAAMC,eAAsB;IAC/B,QAAQ,kBACJ,oBAACC,QAAMA;YACH,uBAAS,oBAACC,QAAMA;gBAAC,SAAS;gBAAW,MAAM;;YAC3C,OAAO;yBAEP,oBAACV,SAAOA;YACJ,uBACI,oBAAC,4BACG,oBAACU,QAAMA;gBAAC,SAAS;gBAAa,MAAM;;YAG5C,uBACI,oBAAC;gBAAG,WAAW;eACVC,MAAM,IAAI,CAAC;gBAAE,QAAQ;YAAG,GAAG,CAACC,GAAGC,QAAAA,WAAAA,GAC5B,oBAAC;oBAAG,KAAKA;mBAAO,WAAQA,QAAQ;;AAO5D"}

package/Popover/primitives/components/PopoverContent.js

@@ -1,5 +1,6 @@
 import { Popover } from "radix-ui";
 import { cn, cva } from "../../../utils.js";
+import { useEscapeScrollLock } from "../../../hooks/index.js";
 import * as __rspack_external_react from "react";
 const popoverContentVariants = cva([
     "bg-neutral-base rounded-sm shadow-md overflow-hidden outline-none z-popover",
@@ -27,7 +28,10 @@ const popoverContentVariants = cva([
         variant: "subtle"
     }
 });
-const PopoverContent = ({ className, variant, arrow = false, align = "center", sideOffset = 6, collisionPadding = 8, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(Popover.Portal, null, /*#__PURE__*/ __rspack_external_react.createElement(Popover.Content, {
+const PopoverContent = ({ className, variant, arrow = false, align = "center", sideOffset = 6, collisionPadding = 8, ...props })=>{
+    const contentRef = useEscapeScrollLock();
+    return /*#__PURE__*/ __rspack_external_react.createElement(Popover.Portal, null, /*#__PURE__*/ __rspack_external_react.createElement(Popover.Content, {
+        ref: contentRef,
         "data-slot": "popover-content",
         align: align,
         sideOffset: sideOffset,
@@ -38,6 +42,7 @@ const PopoverContent = ({ className, variant, arrow = false, align = "center", s
         }), className),
         ...props
     }));
+};
 export { PopoverContent };
 
 //# sourceMappingURL=PopoverContent.js.map

package/Popover/primitives/components/PopoverContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover/primitives/components/PopoverContent.js","sources":["../../../../src/Popover/primitives/components/PopoverContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst popoverContentVariants = cva(\n    [\n        \"bg-neutral-base rounded-sm shadow-md overflow-hidden outline-none z-popover\",\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 origin-(--radix-popover-content-transform-origin)\",\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n    ],\n    {\n        variants: {\n            variant: {\n                accent: \"bg-neutral-dark text-neutral-light border-neutral-black\",\n                subtle: \"bg-neutral-base text-neutral-primary border-neutral-muted\"\n            },\n            arrow: {\n                true: [\n                    \"data-[side=top]:pb-xs-plus\",\n                    \"data-[side=bottom]:pt-xs-plus\",\n                    \"data-[side=left]:pr-xs-plus\",\n                    \"data-[side=right]:pl-xs-plus\"\n                ],\n                false: [\"border-sm\"]\n            }\n        },\n        defaultVariants: {\n            variant: \"subtle\"\n        }\n    }\n);\n\ntype PopoverContentProps = PopoverPrimitive.PopoverContentProps &\n    VariantProps<typeof popoverContentVariants>;\n\nconst PopoverContent = ({\n    className,\n    variant,\n    arrow = false,\n    align = \"center\",\n    sideOffset = 6,\n    collisionPadding = 8,\n    ...props\n}: PopoverContentProps) => (\n    <PopoverPrimitive.Portal>\n        <PopoverPrimitive.Content\n            data-slot=\"popover-content\"\n            align={align}\n            sideOffset={sideOffset}\n            collisionPadding={collisionPadding}\n            className={cn(popoverContentVariants({ variant, arrow }), className)}\n            {...props}\n        />\n    </PopoverPrimitive.Portal>\n);\n\nexport { PopoverContent, type PopoverContentProps };\n"],"names":["popoverContentVariants","cva","PopoverContent","className","variant","arrow","align","sideOffset","collisionPadding","props","PopoverPrimitive","cn"],"mappings":";;;AAIA,MAAMA,yBAAyBC,IAC3B;IACI;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,QAAQ;YACR,QAAQ;QACZ;QACA,OAAO;YACH,MAAM;gBACF;gBACA;gBACA;gBACA;aACH;YACD,OAAO;gBAAC;aAAY;QACxB;IACJ;IACA,iBAAiB;QACb,SAAS;IACb;AACJ;AAMJ,MAAMC,iBAAiB,CAAC,EACpBC,SAAS,EACTC,OAAO,EACPC,QAAQ,KAAK,EACbC,QAAQ,QAAQ,EAChBC,aAAa,CAAC,EACdC,mBAAmB,CAAC,EACpB,GAAGC,OACe,iBAClB,sCAACC,QAAAA,MAAuB,sBACpB,sCAACA,QAAAA,OAAwB;QACrB,aAAU;QACV,OAAOJ;QACP,YAAYC;QACZ,kBAAkBC;QAClB,WAAWG,GAAGX,uBAAuB;YAAEI;YAASC;QAAM,IAAIF;QACzD,GAAGM,KAAK"}
+{"version":3,"file":"Popover/primitives/components/PopoverContent.js","sources":["../../../../src/Popover/primitives/components/PopoverContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { useEscapeScrollLock } from \"~/hooks/index.js\";\n\nconst popoverContentVariants = cva(\n    [\n        \"bg-neutral-base rounded-sm shadow-md overflow-hidden outline-none z-popover\",\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 origin-(--radix-popover-content-transform-origin)\",\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n    ],\n    {\n        variants: {\n            variant: {\n                accent: \"bg-neutral-dark text-neutral-light border-neutral-black\",\n                subtle: \"bg-neutral-base text-neutral-primary border-neutral-muted\"\n            },\n            arrow: {\n                true: [\n                    \"data-[side=top]:pb-xs-plus\",\n                    \"data-[side=bottom]:pt-xs-plus\",\n                    \"data-[side=left]:pr-xs-plus\",\n                    \"data-[side=right]:pl-xs-plus\"\n                ],\n                false: [\"border-sm\"]\n            }\n        },\n        defaultVariants: {\n            variant: \"subtle\"\n        }\n    }\n);\n\ntype PopoverContentProps = PopoverPrimitive.PopoverContentProps &\n    VariantProps<typeof popoverContentVariants>;\n\nconst PopoverContent = ({\n    className,\n    variant,\n    arrow = false,\n    align = \"center\",\n    sideOffset = 6,\n    collisionPadding = 8,\n    ...props\n}: PopoverContentProps) => {\n    /*\n     * The popover is portaled to `document.body`, which puts it outside of a modal dialog's scroll\n     * lock. Without this, anything scrollable within the popover freezes while a dialog is open.\n     */\n    const contentRef = useEscapeScrollLock<HTMLDivElement>();\n\n    return (\n        <PopoverPrimitive.Portal>\n            <PopoverPrimitive.Content\n                ref={contentRef}\n                data-slot=\"popover-content\"\n                align={align}\n                sideOffset={sideOffset}\n                collisionPadding={collisionPadding}\n                className={cn(popoverContentVariants({ variant, arrow }), className)}\n                {...props}\n            />\n        </PopoverPrimitive.Portal>\n    );\n};\n\nexport { PopoverContent, type PopoverContentProps };\n"],"names":["popoverContentVariants","cva","PopoverContent","className","variant","arrow","align","sideOffset","collisionPadding","props","contentRef","useEscapeScrollLock","PopoverPrimitive","cn"],"mappings":";;;;AAKA,MAAMA,yBAAyBC,IAC3B;IACI;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,QAAQ;YACR,QAAQ;QACZ;QACA,OAAO;YACH,MAAM;gBACF;gBACA;gBACA;gBACA;aACH;YACD,OAAO;gBAAC;aAAY;QACxB;IACJ;IACA,iBAAiB;QACb,SAAS;IACb;AACJ;AAMJ,MAAMC,iBAAiB,CAAC,EACpBC,SAAS,EACTC,OAAO,EACPC,QAAQ,KAAK,EACbC,QAAQ,QAAQ,EAChBC,aAAa,CAAC,EACdC,mBAAmB,CAAC,EACpB,GAAGC,OACe;IAKlB,MAAMC,aAAaC;IAEnB,OAAO,WAAP,GACI,sCAACC,QAAAA,MAAuB,sBACpB,sCAACA,QAAAA,OAAwB;QACrB,KAAKF;QACL,aAAU;QACV,OAAOJ;QACP,YAAYC;QACZ,kBAAkBC;QAClB,WAAWK,GAAGb,uBAAuB;YAAEI;YAASC;QAAM,IAAIF;QACzD,GAAGM,KAAK;;AAIzB"}

package/ScrollArea/ScrollArea.d.ts

@@ -13,7 +13,17 @@ export interface ScrollPosition {
 interface ScrollAreaProps extends Omit<React.ComponentProps<typeof ScrollAreaPrimitive.Root>, "onScroll"> {
     onScrollPositionChange?: (position: ScrollPosition) => void;
     onScroll?: (position: ScrollPosition) => void;
+    /**
+     * Classes for the scrolling element itself. Put the height limit here when the area has to grow
+     * with its content up to a maximum, instead of filling a parent of a known height.
+     */
+    viewportClassName?: string;
+    /**
+     * Native scroll handler for the scrolling element, for callers that need the event itself.
+     * `onScroll` reports positions instead.
+     */
+    onViewportScroll?: React.UIEventHandler<HTMLDivElement>;
 }
-declare function ScrollArea({ className, children, onScrollPositionChange, onScroll, ...props }: ScrollAreaProps): React.JSX.Element;
-declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): React.JSX.Element;
+declare function ScrollArea({ className, children, onScrollPositionChange, onScroll, viewportClassName, onViewportScroll, ...props }: ScrollAreaProps): React.JSX.Element;
+declare function ScrollBar({ className, orientation, onMouseDown, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): React.JSX.Element;
 export { ScrollArea, ScrollBar };

package/ScrollArea/ScrollArea.js

@@ -1,7 +1,7 @@
 import { cn } from "../utils.js";
 import * as __rspack_external_react from "react";
 import * as __rspack_external__radix_ui_react_scroll_area_bdec1136 from "@radix-ui/react-scroll-area";
-function ScrollArea({ className, children, onScrollPositionChange, onScroll, ...props }) {
+function ScrollArea({ className, children, onScrollPositionChange, onScroll, viewportClassName, onViewportScroll, ...props }) {
     const viewportRef = __rspack_external_react.useRef(null);
     __rspack_external_react.useEffect(()=>{
         const viewport = viewportRef.current;
@@ -35,13 +35,19 @@ function ScrollArea({ className, children, onScrollPositionChange, onScroll, ...
     }, /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external__radix_ui_react_scroll_area_bdec1136.Viewport, {
         ref: viewportRef,
         "data-slot": "scroll-area-viewport",
-        className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        onScroll: onViewportScroll,
+        className: cn("focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1", viewportClassName)
     }, children), /*#__PURE__*/ __rspack_external_react.createElement(ScrollBar, null), /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external__radix_ui_react_scroll_area_bdec1136.Corner, null));
 }
-function ScrollBar({ className, orientation = "vertical", ...props }) {
+function ScrollBar({ className, orientation = "vertical", onMouseDown, ...props }) {
+    const handleMouseDown = (event)=>{
+        onMouseDown?.(event);
+        event.preventDefault();
+    };
     return /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external__radix_ui_react_scroll_area_bdec1136.ScrollAreaScrollbar, {
         "data-slot": "scroll-area-scrollbar",
         orientation: orientation,
+        onMouseDown: handleMouseDown,
         className: cn("flex touch-none transition-colors select-none", "vertical" === orientation && "h-full w-[8px] border-l border-l-transparent", "horizontal" === orientation && "h-[8px] flex-col border-t border-t-transparent", className),
         ...props
     }, /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external__radix_ui_react_scroll_area_bdec1136.ScrollAreaThumb, {

package/ScrollArea/ScrollArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea/ScrollArea.js","sources":["../../src/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport { cn } from \"~/utils.js\";\n\nexport interface ScrollPosition {\n    top: number;\n    left: number;\n    scrollTop: number;\n    scrollLeft: number;\n    scrollHeight: number;\n    scrollWidth: number;\n    clientHeight: number;\n    clientWidth: number;\n}\n\ninterface ScrollAreaProps extends Omit<\n    React.ComponentProps<typeof ScrollAreaPrimitive.Root>,\n    \"onScroll\"\n> {\n    onScrollPositionChange?: (position: ScrollPosition) => void;\n    onScroll?: (position: ScrollPosition) => void;\n}\n\nfunction ScrollArea({\n    className,\n    children,\n    onScrollPositionChange,\n    onScroll,\n    ...props\n}: ScrollAreaProps) {\n    const viewportRef = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        const viewport = viewportRef.current;\n        if (!viewport || (!onScrollPositionChange && !onScroll)) {\n            return;\n        }\n\n        // The Viewport component itself is the scrollable element.\n        const handleScroll = () => {\n            const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } =\n                viewport;\n\n            const position: ScrollPosition = {\n                top: scrollHeight > clientHeight ? scrollTop / (scrollHeight - clientHeight) : 0,\n                left: scrollWidth > clientWidth ? scrollLeft / (scrollWidth - clientWidth) : 0,\n                scrollTop,\n                scrollLeft,\n                scrollHeight,\n                scrollWidth,\n                clientHeight,\n                clientWidth\n            };\n\n            onScrollPositionChange?.(position);\n            onScroll?.(position);\n        };\n\n        // Call handleScroll initially to provide initial position.\n        handleScroll();\n\n        viewport.addEventListener(\"scroll\", handleScroll);\n        return () => viewport.removeEventListener(\"scroll\", handleScroll);\n    }, [onScrollPositionChange, onScroll]);\n\n    return (\n        <ScrollAreaPrimitive.Root\n            data-slot=\"scroll-area\"\n            className={cn(\"relative\", className)}\n            {...props}\n        >\n            <ScrollAreaPrimitive.Viewport\n                ref={viewportRef}\n                data-slot=\"scroll-area-viewport\"\n                className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n            >\n                {children}\n            </ScrollAreaPrimitive.Viewport>\n            <ScrollBar />\n            <ScrollAreaPrimitive.Corner />\n        </ScrollAreaPrimitive.Root>\n    );\n}\n\nfunction ScrollBar({\n    className,\n    orientation = \"vertical\",\n    ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n    return (\n        <ScrollAreaPrimitive.ScrollAreaScrollbar\n            data-slot=\"scroll-area-scrollbar\"\n            orientation={orientation}\n            className={cn(\n                \"flex touch-none transition-colors select-none\",\n                orientation === \"vertical\" && \"h-full w-[8px] border-l border-l-transparent\",\n                orientation === \"horizontal\" && \"h-[8px] flex-col border-t border-t-transparent\",\n                className\n            )}\n            {...props}\n        >\n            <ScrollAreaPrimitive.ScrollAreaThumb\n                data-slot=\"scroll-area-thumb\"\n                className=\"bg-neutral-strong/70 relative flex-1 rounded-full\"\n            />\n        </ScrollAreaPrimitive.ScrollAreaScrollbar>\n    );\n}\n\nexport { ScrollArea, ScrollBar };\n"],"names":["ScrollArea","className","children","onScrollPositionChange","onScroll","props","viewportRef","React","viewport","handleScroll","scrollTop","scrollLeft","scrollHeight","scrollWidth","clientHeight","clientWidth","position","ScrollAreaPrimitive","cn","ScrollBar","orientation"],"mappings":";;;AAuBA,SAASA,WAAW,EAChBC,SAAS,EACTC,QAAQ,EACRC,sBAAsB,EACtBC,QAAQ,EACR,GAAGC,OACW;IACd,MAAMC,cAAcC,wBAAAA,MAAY,CAAiB;IAEjDA,wBAAAA,SAAe,CAAC;QACZ,MAAMC,WAAWF,YAAY,OAAO;QACpC,IAAI,CAACE,YAAa,CAACL,0BAA0B,CAACC,UAC1C;QAIJ,MAAMK,eAAe;YACjB,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAEC,YAAY,EAAEC,WAAW,EAAEC,YAAY,EAAEC,WAAW,EAAE,GACjFP;YAEJ,MAAMQ,WAA2B;gBAC7B,KAAKJ,eAAeE,eAAeJ,YAAaE,CAAAA,eAAeE,YAAW,IAAK;gBAC/E,MAAMD,cAAcE,cAAcJ,aAAcE,CAAAA,cAAcE,WAAU,IAAK;gBAC7EL;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;YACJ;YAEAZ,yBAAyBa;YACzBZ,WAAWY;QACf;QAGAP;QAEAD,SAAS,gBAAgB,CAAC,UAAUC;QACpC,OAAO,IAAMD,SAAS,mBAAmB,CAAC,UAAUC;IACxD,GAAG;QAACN;QAAwBC;KAAS;IAErC,OAAO,WAAP,GACI,sCAACa,uDAAAA,IAAwB;QACrB,aAAU;QACV,WAAWC,GAAG,YAAYjB;QACzB,GAAGI,KAAK;qBAET,sCAACY,uDAAAA,QAA4B;QACzB,KAAKX;QACL,aAAU;QACV,WAAU;OAETJ,WAAAA,WAAAA,GAEL,sCAACiB,WAASA,OAAAA,WAAAA,GACV,sCAACF,uDAAAA,MAA0B;AAGvC;AAEA,SAASE,UAAU,EACflB,SAAS,EACTmB,cAAc,UAAU,EACxB,GAAGf,OACgE;IACnE,OAAO,WAAP,GACI,sCAACY,uDAAAA,mBAAuC;QACpC,aAAU;QACV,aAAaG;QACb,WAAWF,GACP,iDACAE,AAAgB,eAAhBA,eAA8B,gDAC9BA,AAAgB,iBAAhBA,eAAgC,kDAChCnB;QAEH,GAAGI,KAAK;qBAET,sCAACY,uDAAAA,eAAmC;QAChC,aAAU;QACV,WAAU;;AAI1B"}
+{"version":3,"file":"ScrollArea/ScrollArea.js","sources":["../../src/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport { cn } from \"~/utils.js\";\n\nexport interface ScrollPosition {\n    top: number;\n    left: number;\n    scrollTop: number;\n    scrollLeft: number;\n    scrollHeight: number;\n    scrollWidth: number;\n    clientHeight: number;\n    clientWidth: number;\n}\n\ninterface ScrollAreaProps extends Omit<\n    React.ComponentProps<typeof ScrollAreaPrimitive.Root>,\n    \"onScroll\"\n> {\n    onScrollPositionChange?: (position: ScrollPosition) => void;\n    onScroll?: (position: ScrollPosition) => void;\n    /**\n     * Classes for the scrolling element itself. Put the height limit here when the area has to grow\n     * with its content up to a maximum, instead of filling a parent of a known height.\n     */\n    viewportClassName?: string;\n    /**\n     * Native scroll handler for the scrolling element, for callers that need the event itself.\n     * `onScroll` reports positions instead.\n     */\n    onViewportScroll?: React.UIEventHandler<HTMLDivElement>;\n}\n\nfunction ScrollArea({\n    className,\n    children,\n    onScrollPositionChange,\n    onScroll,\n    viewportClassName,\n    onViewportScroll,\n    ...props\n}: ScrollAreaProps) {\n    const viewportRef = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        const viewport = viewportRef.current;\n        if (!viewport || (!onScrollPositionChange && !onScroll)) {\n            return;\n        }\n\n        // The Viewport component itself is the scrollable element.\n        const handleScroll = () => {\n            const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } =\n                viewport;\n\n            const position: ScrollPosition = {\n                top: scrollHeight > clientHeight ? scrollTop / (scrollHeight - clientHeight) : 0,\n                left: scrollWidth > clientWidth ? scrollLeft / (scrollWidth - clientWidth) : 0,\n                scrollTop,\n                scrollLeft,\n                scrollHeight,\n                scrollWidth,\n                clientHeight,\n                clientWidth\n            };\n\n            onScrollPositionChange?.(position);\n            onScroll?.(position);\n        };\n\n        // Call handleScroll initially to provide initial position.\n        handleScroll();\n\n        viewport.addEventListener(\"scroll\", handleScroll);\n        return () => viewport.removeEventListener(\"scroll\", handleScroll);\n    }, [onScrollPositionChange, onScroll]);\n\n    return (\n        <ScrollAreaPrimitive.Root\n            data-slot=\"scroll-area\"\n            className={cn(\"relative\", className)}\n            {...props}\n        >\n            <ScrollAreaPrimitive.Viewport\n                ref={viewportRef}\n                data-slot=\"scroll-area-viewport\"\n                onScroll={onViewportScroll}\n                className={cn(\n                    \"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\",\n                    viewportClassName\n                )}\n            >\n                {children}\n            </ScrollAreaPrimitive.Viewport>\n            <ScrollBar />\n            <ScrollAreaPrimitive.Corner />\n        </ScrollAreaPrimitive.Root>\n    );\n}\n\nfunction ScrollBar({\n    className,\n    orientation = \"vertical\",\n    onMouseDown,\n    ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n    const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n        onMouseDown?.(event);\n\n        /*\n         * Grabbing a scrollbar must not move focus. An autocomplete closes its list the moment its\n         * input blurs, so without this, dragging the thumb dismisses the list under the pointer.\n         */\n        event.preventDefault();\n    };\n\n    return (\n        <ScrollAreaPrimitive.ScrollAreaScrollbar\n            data-slot=\"scroll-area-scrollbar\"\n            orientation={orientation}\n            onMouseDown={handleMouseDown}\n            className={cn(\n                \"flex touch-none transition-colors select-none\",\n                orientation === \"vertical\" && \"h-full w-[8px] border-l border-l-transparent\",\n                orientation === \"horizontal\" && \"h-[8px] flex-col border-t border-t-transparent\",\n                className\n            )}\n            {...props}\n        >\n            <ScrollAreaPrimitive.ScrollAreaThumb\n                data-slot=\"scroll-area-thumb\"\n                className=\"bg-neutral-strong/70 relative flex-1 rounded-full\"\n            />\n        </ScrollAreaPrimitive.ScrollAreaScrollbar>\n    );\n}\n\nexport { ScrollArea, ScrollBar };\n"],"names":["ScrollArea","className","children","onScrollPositionChange","onScroll","viewportClassName","onViewportScroll","props","viewportRef","React","viewport","handleScroll","scrollTop","scrollLeft","scrollHeight","scrollWidth","clientHeight","clientWidth","position","ScrollAreaPrimitive","cn","ScrollBar","orientation","onMouseDown","handleMouseDown","event"],"mappings":";;;AAiCA,SAASA,WAAW,EAChBC,SAAS,EACTC,QAAQ,EACRC,sBAAsB,EACtBC,QAAQ,EACRC,iBAAiB,EACjBC,gBAAgB,EAChB,GAAGC,OACW;IACd,MAAMC,cAAcC,wBAAAA,MAAY,CAAiB;IAEjDA,wBAAAA,SAAe,CAAC;QACZ,MAAMC,WAAWF,YAAY,OAAO;QACpC,IAAI,CAACE,YAAa,CAACP,0BAA0B,CAACC,UAC1C;QAIJ,MAAMO,eAAe;YACjB,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAEC,YAAY,EAAEC,WAAW,EAAEC,YAAY,EAAEC,WAAW,EAAE,GACjFP;YAEJ,MAAMQ,WAA2B;gBAC7B,KAAKJ,eAAeE,eAAeJ,YAAaE,CAAAA,eAAeE,YAAW,IAAK;gBAC/E,MAAMD,cAAcE,cAAcJ,aAAcE,CAAAA,cAAcE,WAAU,IAAK;gBAC7EL;gBACAC;gBACAC;gBACAC;gBACAC;gBACAC;YACJ;YAEAd,yBAAyBe;YACzBd,WAAWc;QACf;QAGAP;QAEAD,SAAS,gBAAgB,CAAC,UAAUC;QACpC,OAAO,IAAMD,SAAS,mBAAmB,CAAC,UAAUC;IACxD,GAAG;QAACR;QAAwBC;KAAS;IAErC,OAAO,WAAP,GACI,sCAACe,uDAAAA,IAAwB;QACrB,aAAU;QACV,WAAWC,GAAG,YAAYnB;QACzB,GAAGM,KAAK;qBAET,sCAACY,uDAAAA,QAA4B;QACzB,KAAKX;QACL,aAAU;QACV,UAAUF;QACV,WAAWc,GACP,sJACAf;OAGHH,WAAAA,WAAAA,GAEL,sCAACmB,WAASA,OAAAA,WAAAA,GACV,sCAACF,uDAAAA,MAA0B;AAGvC;AAEA,SAASE,UAAU,EACfpB,SAAS,EACTqB,cAAc,UAAU,EACxBC,WAAW,EACX,GAAGhB,OACgE;IACnE,MAAMiB,kBAAkB,CAACC;QACrBF,cAAcE;QAMdA,MAAM,cAAc;IACxB;IAEA,OAAO,WAAP,GACI,sCAACN,uDAAAA,mBAAuC;QACpC,aAAU;QACV,aAAaG;QACb,aAAaE;QACb,WAAWJ,GACP,iDACAE,AAAgB,eAAhBA,eAA8B,gDAC9BA,AAAgB,iBAAhBA,eAAgC,kDAChCrB;QAEH,GAAGM,KAAK;qBAET,sCAACY,uDAAAA,eAAmC;QAChC,aAAU;QACV,WAAU;;AAI1B"}

package/hooks/index.d.ts

@@ -1 +1,2 @@
 export * from "./useDisclosure.js";
+export * from "./useEscapeScrollLock.js";

package/hooks/index.js

@@ -1 +1,2 @@
 export * from "./useDisclosure.js";
+export * from "./useEscapeScrollLock.js";

package/hooks/useEscapeScrollLock.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A modal `Dialog` locks scrolling by preventing every `wheel` and `touchmove` event that lands
+ * outside of its content. The listener sits on `document`, so layers that are portaled to
+ * `document.body` - popovers and the lists they render - count as "outside" and stop scrolling
+ * while the dialog is open.
+ *
+ * Stopping those events on the layer itself keeps them away from the `document` listener: the
+ * browser scrolls the layer as it normally would, and the lock still holds everywhere else.
+ *
+ * Attach the returned callback ref to the element whose subtree must remain scrollable. It has to
+ * be a callback ref, because layers like the popover mount their element after the first render.
+ */
+export declare const useEscapeScrollLock: <T extends HTMLElement>() => (element: T | null) => void;

package/hooks/useEscapeScrollLock.js

@@ -0,0 +1,21 @@
+import { useCallback, useRef } from "react";
+const useEscapeScrollLock = ()=>{
+    const detach = useRef(null);
+    return useCallback((element)=>{
+        if (detach.current) {
+            detach.current();
+            detach.current = null;
+        }
+        if (!element) return;
+        const stopPropagation = (event)=>event.stopPropagation();
+        element.addEventListener("wheel", stopPropagation);
+        element.addEventListener("touchmove", stopPropagation);
+        detach.current = ()=>{
+            element.removeEventListener("wheel", stopPropagation);
+            element.removeEventListener("touchmove", stopPropagation);
+        };
+    }, []);
+};
+export { useEscapeScrollLock };
+
+//# sourceMappingURL=useEscapeScrollLock.js.map

package/hooks/useEscapeScrollLock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useEscapeScrollLock.js","sources":["../../src/hooks/useEscapeScrollLock.ts"],"sourcesContent":["import { useCallback, useRef } from \"react\";\n\n/**\n * A modal `Dialog` locks scrolling by preventing every `wheel` and `touchmove` event that lands\n * outside of its content. The listener sits on `document`, so layers that are portaled to\n * `document.body` - popovers and the lists they render - count as \"outside\" and stop scrolling\n * while the dialog is open.\n *\n * Stopping those events on the layer itself keeps them away from the `document` listener: the\n * browser scrolls the layer as it normally would, and the lock still holds everywhere else.\n *\n * Attach the returned callback ref to the element whose subtree must remain scrollable. It has to\n * be a callback ref, because layers like the popover mount their element after the first render.\n */\nexport const useEscapeScrollLock = <T extends HTMLElement>() => {\n    const detach = useRef<(() => void) | null>(null);\n\n    return useCallback((element: T | null) => {\n        if (detach.current) {\n            detach.current();\n            detach.current = null;\n        }\n\n        if (!element) {\n            return;\n        }\n\n        const stopPropagation = (event: Event) => event.stopPropagation();\n\n        element.addEventListener(\"wheel\", stopPropagation);\n        element.addEventListener(\"touchmove\", stopPropagation);\n\n        detach.current = () => {\n            element.removeEventListener(\"wheel\", stopPropagation);\n            element.removeEventListener(\"touchmove\", stopPropagation);\n        };\n    }, []);\n};\n"],"names":["useEscapeScrollLock","detach","useRef","useCallback","element","stopPropagation","event"],"mappings":";AAcO,MAAMA,sBAAsB;IAC/B,MAAMC,SAASC,OAA4B;IAE3C,OAAOC,YAAY,CAACC;QAChB,IAAIH,OAAO,OAAO,EAAE;YAChBA,OAAO,OAAO;YACdA,OAAO,OAAO,GAAG;QACrB;QAEA,IAAI,CAACG,SACD;QAGJ,MAAMC,kBAAkB,CAACC,QAAiBA,MAAM,eAAe;QAE/DF,QAAQ,gBAAgB,CAAC,SAASC;QAClCD,QAAQ,gBAAgB,CAAC,aAAaC;QAEtCJ,OAAO,OAAO,GAAG;YACbG,QAAQ,mBAAmB,CAAC,SAASC;YACrCD,QAAQ,mBAAmB,CAAC,aAAaC;QAC7C;IACJ,GAAG,EAAE;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/admin-ui",
-	"version": "6.6.0-alpha.8",
+	"version": "6.6.0-alpha.9",
 	"type": "module",
 	"exports": {
 		".": "./index.js",
@@ -19,9 +19,9 @@
 		"@monaco-editor/react": "4.7.0",
 		"@radix-ui/react-scroll-area": "1.2.18",
 		"@tanstack/react-table": "9.1.2",
-		"@webiny/icons": "6.6.0-alpha.8",
-		"@webiny/react-composition": "6.6.0-alpha.8",
-		"@webiny/utils": "6.6.0-alpha.8",
+		"@webiny/icons": "6.6.0-alpha.9",
+		"@webiny/react-composition": "6.6.0-alpha.9",
+		"@webiny/utils": "6.6.0-alpha.9",
 		"bytes": "3.1.2",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",
@@ -56,8 +56,8 @@
 		"@types/react-color": "3.0.13",
 		"@types/react-custom-scrollbars": "4.0.13",
 		"@types/react-virtualized": "9.22.3",
-		"@webiny/build-tools": "6.6.0-alpha.8",
-		"@webiny/project": "6.6.0-alpha.8",
+		"@webiny/build-tools": "6.6.0-alpha.9",
+		"@webiny/project": "6.6.0-alpha.9",
 		"chalk": "6.0.0",
 		"oxfmt": "0.64.0",
 		"rimraf": "6.1.3",