@webiny/app-admin 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

package/components/IconPicker/IconPicker.d.ts

@@ -1,13 +1,15 @@
 import React from "react";
 import type { IconPickerProps } from "./IconPickerComponent.js";
+import { IconPickerTab } from "./IconPickerTab.js";
 import type { Icon } from "./types.js";
-declare const IconPicker: {
-    (props: IconPickerProps): React.JSX.Element;
-    Icon: ({ icon, ...props }: IconRendererWithProviderProps) => React.JSX.Element | null;
-    IconPickerTab: ({ label, value, actions, onChange, cellDecorator }: import("./IconPickerTab.js").IconPickerTabProps) => React.JSX.Element;
-};
+declare function IconPicker(props: IconPickerProps): React.JSX.Element;
+declare namespace IconPicker {
+    export { IconRendererWithProvider as Icon };
+    export { IconPickerTab };
+}
 interface IconRendererWithProviderProps {
     icon?: Icon;
     size?: number;
 }
+declare const IconRendererWithProvider: ({ icon, ...props }: IconRendererWithProviderProps) => React.JSX.Element | null;
 export { IconPicker };

package/components/IconPicker/IconPickerComponent.d.ts

@@ -12,6 +12,6 @@ export interface IconPickerProps extends FormComponentProps {
 export interface IconPickerComponentProps extends IconPickerProps {
     presenter: IconPickerPresenter;
 }
-export declare const IconPickerComponent: (({ presenter, label, description, removable, required, disabled, ...props }: IconPickerComponentProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const IconPickerComponent: (({ presenter, label, description, removable, required, disabled, ...props }: IconPickerComponentProps) => React.JSX.Element) & React.NamedExoticComponent<IconPickerComponentProps> & {
+    readonly type: ({ presenter, label, description, removable, required, disabled, ...props }: IconPickerComponentProps) => React.JSX.Element;
 };

package/components/IconPicker/components/IconPickerTrigger.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { inputVariants, type VariantProps } from "@webiny/admin-ui";
 import type { Icon } from "../../../components/IconPicker/types.js";
 declare const iconPickerTriggerVariants: (props?: ({
-    size?: "md" | "lg" | "xl" | null | undefined;
+    size?: "lg" | "md" | "xl" | null | undefined;
     disabled?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IconPickerTriggerProps extends VariantProps<typeof inputVariants>, VariantProps<typeof iconPickerTriggerVariants> {

package/components/IconPicker/config/index.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
+import { IconPackProvider as IconPack } from "./IconPackProvider.js";
 import { IconType } from "./IconType.js";
 import type { Icon } from "../types.js";
 export declare const IconPickerConfig: (({ priority, children }: import("@webiny/react-properties").ConfigProps) => React.JSX.Element) & {
-    IconPack: ({ name, provider }: import("./IconPackProvider.js").IconPackProviderProps) => React.JSX.Element;
+    IconPack: typeof IconPack;
     IconType: IconType;
 };
 export declare const IconPickerWithConfig: ({ onProperties, children }: import("@webiny/react-properties").WithConfigProps) => React.JSX.Element;

package/components/IconPicker/plugins/customPlugin.js

@@ -1,13 +1,13 @@
 import react from "react";
-import { useApolloClient } from "@apollo/react-hooks";
 import { observer } from "mobx-react-lite";
 import { Button } from "@webiny/admin-ui";
+import { useFeature } from "@webiny/app";
 import { FileManager } from "../../../base/ui/FileManager.js";
 import { IconPickerTab } from "../IconPickerTab.js";
 import { useIcon } from "../index.js";
 import { useIconPicker } from "../IconPickerPresenterProvider.js";
 import { IconPickerConfig } from "../config/index.js";
-import { LIST_CUSTOM_ICONS } from "./graphql.js";
+import { CustomIconsPresenterFeature } from "../../../presentation/iconPicker/customIcons/feature.js";
 const CustomIcon = ()=>{
     const { icon, size } = useIcon();
     return /*#__PURE__*/ react.createElement("img", {
@@ -72,25 +72,10 @@ const CustomIconTab = observer(()=>{
     });
 });
 const CustomIconPlugin = ()=>{
-    const client = useApolloClient();
+    const { presenter } = useFeature(CustomIconsPresenterFeature);
     return /*#__PURE__*/ react.createElement(IconPickerConfig, null, /*#__PURE__*/ react.createElement(IconPickerConfig.IconPack, {
         name: "custom",
-        provider: async ()=>{
-            const { data: response } = await client.query({
-                query: LIST_CUSTOM_ICONS,
-                variables: {
-                    limit: 10000
-                }
-            });
-            if (!response) throw new Error("Network error while listing custom icons.");
-            const { data, error } = response.fileManager.listFiles;
-            if (!data) throw new Error(error?.message || "Could not fetch custom icons.");
-            return data.map((customIcon)=>({
-                    type: "custom",
-                    name: customIcon.name,
-                    value: customIcon.src
-                }));
-        }
+        provider: ()=>presenter.load()
     }), /*#__PURE__*/ react.createElement(IconPickerConfig.IconType, {
         name: "custom"
     }, /*#__PURE__*/ react.createElement(IconPickerConfig.IconType.Icon, {

package/components/IconPicker/plugins/customPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/IconPicker/plugins/customPlugin.js","sources":["../../../../src/components/IconPicker/plugins/customPlugin.tsx"],"sourcesContent":["import React from \"react\";\nimport { useApolloClient } from \"@apollo/react-hooks\";\nimport { observer } from \"mobx-react-lite\";\nimport { Button } from \"@webiny/admin-ui\";\nimport type { FileManagerFileItem } from \"~/base/ui/FileManager.js\";\nimport { FileManager } from \"~/base/ui/FileManager.js\";\nimport { IconPickerTab } from \"../IconPickerTab.js\";\nimport { useIcon } from \"../index.js\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider.js\";\nimport { IconPickerConfig } from \"../config/index.js\";\nimport type { ListCustomIconsQueryResponse } from \"./graphql.js\";\nimport { LIST_CUSTOM_ICONS } from \"./graphql.js\";\nimport type { Icon } from \"../types.js\";\n\n/**\n * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.\n * This is crucial for serializing component rendering into a string value as plain HTML,\n * which is necessary for usage in the website application. Please use inline styles here\n * to ensure proper serialization.\n */\n\nconst CustomIcon = () => {\n    const { icon, size } = useIcon<Icon>();\n\n    return (\n        <img\n            width={size}\n            height={size}\n            src={icon.value}\n            alt={icon.name}\n            style={{\n                verticalAlign: \"middle\"\n            }}\n        />\n    );\n};\n\ninterface IconFilePickerProps {\n    onUpload: (file: FileManagerFileItem) => void;\n    onChange: (file: FileManagerFileItem) => void;\n}\n\nconst IconFilePicker = ({ onUpload, onChange }: IconFilePickerProps) => {\n    return (\n        <FileManager\n            onUploadCompletion={([file]) => {\n                onUpload(file);\n            }}\n            onChange={onChange}\n            scope=\"scope:iconPicker\"\n            accept={[\"image/svg+xml\"]}\n            render={({ showFileManager }) => (\n                <Button\n                    variant={\"primary\"}\n                    text={\"Browse\"}\n                    onClick={() => {\n                        showFileManager();\n                    }}\n                />\n            )}\n        ></FileManager>\n    );\n};\n\nconst CustomIconTab = observer(() => {\n    const presenter = useIconPicker();\n\n    const onIconSelect = (icon: Icon) => {\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    const onIconFileSelect = (file: FileManagerFileItem) => {\n        presenter.setIcon({\n            type: \"custom\",\n            name: file.name,\n            value: file.src\n        });\n        presenter.closeMenu();\n    };\n\n    const onIconFileUpload = (file: FileManagerFileItem) => {\n        const icon = {\n            type: \"custom\",\n            name: file.name,\n            value: file.src\n        };\n\n        presenter.addIcon(icon);\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    return (\n        <IconPickerTab\n            value={\"custom\"}\n            label={\"Custom\"}\n            onChange={onIconSelect}\n            actions={<IconFilePicker onChange={onIconFileSelect} onUpload={onIconFileUpload} />}\n        />\n    );\n});\n\nexport const CustomIconPlugin = () => {\n    const client = useApolloClient();\n\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconPack\n                name=\"custom\"\n                provider={async () => {\n                    const { data: response } = await client.query<ListCustomIconsQueryResponse>({\n                        query: LIST_CUSTOM_ICONS,\n                        variables: {\n                            limit: 10000\n                        }\n                    });\n\n                    if (!response) {\n                        throw new Error(\"Network error while listing custom icons.\");\n                    }\n\n                    const { data, error } = response.fileManager.listFiles;\n\n                    if (!data) {\n                        throw new Error(error?.message || \"Could not fetch custom icons.\");\n                    }\n\n                    return data.map(customIcon => ({\n                        type: \"custom\",\n                        name: customIcon.name,\n                        value: customIcon.src\n                    }));\n                }}\n            />\n            <IconPickerConfig.IconType name={\"custom\"}>\n                <IconPickerConfig.IconType.Icon element={<CustomIcon />} />\n                <IconPickerConfig.IconType.Tab element={<CustomIconTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"names":["CustomIcon","icon","size","useIcon","IconFilePicker","onUpload","onChange","FileManager","file","showFileManager","Button","CustomIconTab","observer","presenter","useIconPicker","onIconSelect","onIconFileSelect","onIconFileUpload","IconPickerTab","CustomIconPlugin","client","useApolloClient","IconPickerConfig","response","LIST_CUSTOM_ICONS","Error","data","error","customIcon"],"mappings":";;;;;;;;;;AAqBA,MAAMA,aAAa;IACf,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGC;IAEvB,OAAO,WAAP,GACI,oBAAC;QACG,OAAOD;QACP,QAAQA;QACR,KAAKD,KAAK,KAAK;QACf,KAAKA,KAAK,IAAI;QACd,OAAO;YACH,eAAe;QACnB;;AAGZ;AAOA,MAAMG,iBAAiB,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAuB,GACxD,WAAP,GACI,oBAACC,aAAWA;QACR,oBAAoB,CAAC,CAACC,KAAK;YACvBH,SAASG;QACb;QACA,UAAUF;QACV,OAAM;QACN,QAAQ;YAAC;SAAgB;QACzB,QAAQ,CAAC,EAAEG,eAAe,EAAE,iBACxB,oBAACC,QAAMA;gBACH,SAAS;gBACT,MAAM;gBACN,SAAS;oBACLD;gBACJ;;;AAOpB,MAAME,gBAAgBC,SAAS;IAC3B,MAAMC,YAAYC;IAElB,MAAMC,eAAe,CAACd;QAClBY,UAAU,OAAO,CAACZ;QAClBY,UAAU,SAAS;IACvB;IAEA,MAAMG,mBAAmB,CAACR;QACtBK,UAAU,OAAO,CAAC;YACd,MAAM;YACN,MAAML,KAAK,IAAI;YACf,OAAOA,KAAK,GAAG;QACnB;QACAK,UAAU,SAAS;IACvB;IAEA,MAAMI,mBAAmB,CAACT;QACtB,MAAMP,OAAO;YACT,MAAM;YACN,MAAMO,KAAK,IAAI;YACf,OAAOA,KAAK,GAAG;QACnB;QAEAK,UAAU,OAAO,CAACZ;QAClBY,UAAU,OAAO,CAACZ;QAClBY,UAAU,SAAS;IACvB;IAEA,OAAO,WAAP,GACI,oBAACK,eAAaA;QACV,OAAO;QACP,OAAO;QACP,UAAUH;QACV,uBAAS,oBAACX,gBAAcA;YAAC,UAAUY;YAAkB,UAAUC;;;AAG3E;AAEO,MAAME,mBAAmB;IAC5B,MAAMC,SAASC;IAEf,OAAO,WAAP,GACI,oBAACC,kBAAgBA,MAAAA,WAAAA,GACb,oBAACA,iBAAiB,QAAQ;QACtB,MAAK;QACL,UAAU;YACN,MAAM,EAAE,MAAMC,QAAQ,EAAE,GAAG,MAAMH,OAAO,KAAK,CAA+B;gBACxE,OAAOI;gBACP,WAAW;oBACP,OAAO;gBACX;YACJ;YAEA,IAAI,CAACD,UACD,MAAM,IAAIE,MAAM;YAGpB,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGJ,SAAS,WAAW,CAAC,SAAS;YAEtD,IAAI,CAACG,MACD,MAAM,IAAID,MAAME,OAAO,WAAW;YAGtC,OAAOD,KAAK,GAAG,CAACE,CAAAA,aAAe;oBAC3B,MAAM;oBACN,MAAMA,WAAW,IAAI;oBACrB,OAAOA,WAAW,GAAG;gBACzB;QACJ;sBAEJ,oBAACN,iBAAiB,QAAQ;QAAC,MAAM;qBAC7B,oBAACA,iBAAiB,QAAQ,CAAC,IAAI;QAAC,uBAAS,oBAACtB,YAAUA;sBACpD,oBAACsB,iBAAiB,QAAQ,CAAC,GAAG;QAAC,uBAAS,oBAACX,eAAaA;;AAItE"}
+{"version":3,"file":"components/IconPicker/plugins/customPlugin.js","sources":["../../../../src/components/IconPicker/plugins/customPlugin.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { useFeature } from \"@webiny/app\";\nimport type { FileManagerFileItem } from \"~/base/ui/FileManager.js\";\nimport { FileManager } from \"~/base/ui/FileManager.js\";\nimport { IconPickerTab } from \"../IconPickerTab.js\";\nimport { useIcon } from \"../index.js\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider.js\";\nimport { IconPickerConfig } from \"../config/index.js\";\nimport { CustomIconsPresenterFeature } from \"~/presentation/iconPicker/customIcons/feature.js\";\nimport type { Icon } from \"../types.js\";\n\nconst CustomIcon = () => {\n    const { icon, size } = useIcon<Icon>();\n\n    return (\n        <img\n            width={size}\n            height={size}\n            src={icon.value}\n            alt={icon.name}\n            style={{\n                verticalAlign: \"middle\"\n            }}\n        />\n    );\n};\n\ninterface IconFilePickerProps {\n    onUpload: (file: FileManagerFileItem) => void;\n    onChange: (file: FileManagerFileItem) => void;\n}\n\nconst IconFilePicker = ({ onUpload, onChange }: IconFilePickerProps) => {\n    return (\n        <FileManager\n            onUploadCompletion={([file]) => {\n                onUpload(file);\n            }}\n            onChange={onChange}\n            scope=\"scope:iconPicker\"\n            accept={[\"image/svg+xml\"]}\n            render={({ showFileManager }) => (\n                <Button\n                    variant={\"primary\"}\n                    text={\"Browse\"}\n                    onClick={() => {\n                        showFileManager();\n                    }}\n                />\n            )}\n        ></FileManager>\n    );\n};\n\nconst CustomIconTab = observer(() => {\n    const presenter = useIconPicker();\n\n    const onIconSelect = (icon: Icon) => {\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    const onIconFileSelect = (file: FileManagerFileItem) => {\n        presenter.setIcon({\n            type: \"custom\",\n            name: file.name,\n            value: file.src\n        });\n        presenter.closeMenu();\n    };\n\n    const onIconFileUpload = (file: FileManagerFileItem) => {\n        const icon = {\n            type: \"custom\",\n            name: file.name,\n            value: file.src\n        };\n\n        presenter.addIcon(icon);\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    return (\n        <IconPickerTab\n            value={\"custom\"}\n            label={\"Custom\"}\n            onChange={onIconSelect}\n            actions={<IconFilePicker onChange={onIconFileSelect} onUpload={onIconFileUpload} />}\n        />\n    );\n});\n\nexport const CustomIconPlugin = () => {\n    const { presenter } = useFeature(CustomIconsPresenterFeature);\n\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconPack name=\"custom\" provider={() => presenter.load()} />\n            <IconPickerConfig.IconType name={\"custom\"}>\n                <IconPickerConfig.IconType.Icon element={<CustomIcon />} />\n                <IconPickerConfig.IconType.Tab element={<CustomIconTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"names":["CustomIcon","icon","size","useIcon","IconFilePicker","onUpload","onChange","FileManager","file","showFileManager","Button","CustomIconTab","observer","presenter","useIconPicker","onIconSelect","onIconFileSelect","onIconFileUpload","IconPickerTab","CustomIconPlugin","useFeature","CustomIconsPresenterFeature","IconPickerConfig"],"mappings":";;;;;;;;;;AAaA,MAAMA,aAAa;IACf,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGC;IAEvB,OAAO,WAAP,GACI,oBAAC;QACG,OAAOD;QACP,QAAQA;QACR,KAAKD,KAAK,KAAK;QACf,KAAKA,KAAK,IAAI;QACd,OAAO;YACH,eAAe;QACnB;;AAGZ;AAOA,MAAMG,iBAAiB,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAuB,GACxD,WAAP,GACI,oBAACC,aAAWA;QACR,oBAAoB,CAAC,CAACC,KAAK;YACvBH,SAASG;QACb;QACA,UAAUF;QACV,OAAM;QACN,QAAQ;YAAC;SAAgB;QACzB,QAAQ,CAAC,EAAEG,eAAe,EAAE,iBACxB,oBAACC,QAAMA;gBACH,SAAS;gBACT,MAAM;gBACN,SAAS;oBACLD;gBACJ;;;AAOpB,MAAME,gBAAgBC,SAAS;IAC3B,MAAMC,YAAYC;IAElB,MAAMC,eAAe,CAACd;QAClBY,UAAU,OAAO,CAACZ;QAClBY,UAAU,SAAS;IACvB;IAEA,MAAMG,mBAAmB,CAACR;QACtBK,UAAU,OAAO,CAAC;YACd,MAAM;YACN,MAAML,KAAK,IAAI;YACf,OAAOA,KAAK,GAAG;QACnB;QACAK,UAAU,SAAS;IACvB;IAEA,MAAMI,mBAAmB,CAACT;QACtB,MAAMP,OAAO;YACT,MAAM;YACN,MAAMO,KAAK,IAAI;YACf,OAAOA,KAAK,GAAG;QACnB;QAEAK,UAAU,OAAO,CAACZ;QAClBY,UAAU,OAAO,CAACZ;QAClBY,UAAU,SAAS;IACvB;IAEA,OAAO,WAAP,GACI,oBAACK,eAAaA;QACV,OAAO;QACP,OAAO;QACP,UAAUH;QACV,uBAAS,oBAACX,gBAAcA;YAAC,UAAUY;YAAkB,UAAUC;;;AAG3E;AAEO,MAAME,mBAAmB;IAC5B,MAAM,EAAEN,SAAS,EAAE,GAAGO,WAAWC;IAEjC,OAAO,WAAP,GACI,oBAACC,kBAAgBA,MAAAA,WAAAA,GACb,oBAACA,iBAAiB,QAAQ;QAAC,MAAK;QAAS,UAAU,IAAMT,UAAU,IAAI;sBACvE,oBAACS,iBAAiB,QAAQ;QAAC,MAAM;qBAC7B,oBAACA,iBAAiB,QAAQ,CAAC,IAAI;QAAC,uBAAS,oBAACtB,YAAUA;sBACpD,oBAACsB,iBAAiB,QAAQ,CAAC,GAAG;QAAC,uBAAS,oBAACX,eAAaA;;AAItE"}

package/components/LexicalEditor/LexicalLinkForm.js

@@ -24,6 +24,7 @@ const LexicalLinkForm = ({ linkData, onSave, removeLink })=>{
             className: "flex w-full items-center justify-between mt-sm gap-sm"
         }, /*#__PURE__*/ react.createElement(TargetSwitch, null), /*#__PURE__*/ react.createElement(Button, {
             variant: "ghost",
+            size: "sm",
             text: "Remove link",
             className: "text-destructive-primary! [&_svg]:fill-destructive",
             onClick: removeLink,
@@ -33,6 +34,7 @@ const LexicalLinkForm = ({ linkData, onSave, removeLink })=>{
             })
         }), /*#__PURE__*/ react.createElement(Button, {
             variant: "primary",
+            size: "sm",
             text: "Save",
             onClick: form.submit
         }))));
@@ -57,6 +59,7 @@ const UrlInput = ()=>{
             inputRef.current = ref;
         },
         variant: "secondary",
+        size: "md",
         placeholder: "Enter link",
         autoFocus: true,
         startIcon: /*#__PURE__*/ react.createElement(Icon, {

package/components/LexicalEditor/LexicalLinkForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/LexicalEditor/LexicalLinkForm.js","sources":["../../../src/components/LexicalEditor/LexicalLinkForm.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport type { FloatingLinkEditorPlugin } from \"@webiny/lexical-editor\";\nimport { Button, Grid, Icon, IconButton, Input, Switch } from \"@webiny/admin-ui\";\nimport { Form, useBind } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { ReactComponent as GlobeIcon } from \"@webiny/icons/language.svg\";\nimport { ReactComponent as OpenInNew } from \"@webiny/icons/open_in_new.svg\";\nimport { ReactComponent as RemoveLink } from \"@webiny/icons/link_off.svg\";\n\ntype LexicalLinkForm = NonNullable<\n    React.ComponentProps<typeof FloatingLinkEditorPlugin>[\"LinkForm\"]\n>;\ntype LinkFormProps = React.ComponentProps<LexicalLinkForm>;\n\nexport const LexicalLinkForm = ({ linkData, onSave, removeLink }: LinkFormProps) => {\n    const onSubmit = (data: LinkFormProps[\"linkData\"]) => {\n        onSave(data);\n    };\n\n    return (\n        <Form data={linkData} onSubmit={onSubmit} validateOnFirstSubmit submitOnEnter>\n            {form => (\n                <div className={\"p-md\"}>\n                    <Grid gap={\"small\"}>\n                        <Grid.Column span={12}>\n                            <UrlInput />\n                        </Grid.Column>\n                    </Grid>\n                    <div className={\"flex w-full items-center justify-between mt-sm gap-sm\"}>\n                        <TargetSwitch />\n                        <Button\n                            variant={\"ghost\"}\n                            text={`Remove link`}\n                            className={\"text-destructive-primary! [&_svg]:fill-destructive\"}\n                            onClick={removeLink}\n                            icon={<Icon label={\"Remove link\"} icon={<RemoveLink />} />}\n                        />\n                        <Button variant={\"primary\"} text={`Save`} onClick={form.submit} />\n                    </div>\n                </div>\n            )}\n        </Form>\n    );\n};\n\nconst UrlInput = () => {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const urlBind = useBind({\n        name: \"url\",\n        validators: validation.create(\"required,url:allowRelative:allowHref\")\n    });\n\n    useEffect(() => {\n        if (inputRef.current) {\n            setTimeout(() => {\n                inputRef.current?.focus();\n            }, 10);\n        }\n    }, []);\n\n    const openInNewTab = () => {\n        if (urlBind.validation.isValid !== false && urlBind.value) {\n            window.open(urlBind.value, \"_blank\");\n        }\n    };\n\n    return (\n        <Input\n            {...urlBind}\n            inputRef={ref => {\n                inputRef.current = ref;\n            }}\n            variant={\"secondary\"}\n            placeholder={\"Enter link\"}\n            autoFocus={true}\n            startIcon={<Icon label=\"globe\" icon={<GlobeIcon />} />}\n            endIcon={<IconButton variant=\"ghost\" icon={<OpenInNew />} onClick={openInNewTab} />}\n        />\n    );\n};\n\nconst TargetSwitch = () => {\n    const targetBind = useBind({\n        name: \"target\",\n        defaultValue: \"_self\"\n    });\n\n    return (\n        <Switch\n            checked={targetBind.value === \"_blank\"}\n            label={\"Open in new tab\"}\n            onChange={value => {\n                targetBind.onChange(value === true ? \"_blank\" : \"_self\");\n            }}\n        />\n    );\n};\n"],"names":["LexicalLinkForm","linkData","onSave","removeLink","onSubmit","data","Form","form","Grid","UrlInput","TargetSwitch","Button","Icon","RemoveLink","inputRef","useRef","urlBind","useBind","validation","useEffect","setTimeout","openInNewTab","window","Input","ref","GlobeIcon","IconButton","OpenInNew","targetBind","Switch","value"],"mappings":";;;;;;;AAcO,MAAMA,kBAAkB,CAAC,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,UAAU,EAAiB;IAC3E,MAAMC,WAAW,CAACC;QACdH,OAAOG;IACX;IAEA,OAAO,WAAP,GACI,oBAACC,MAAIA;QAAC,MAAML;QAAU,UAAUG;QAAU;QAAsB;OAC3DG,CAAAA,OAAAA,WAAAA,GACG,oBAAC;YAAI,WAAW;yBACZ,oBAACC,MAAIA;YAAC,KAAK;yBACP,oBAACA,KAAK,MAAM;YAAC,MAAM;yBACf,oBAACC,UAAQA,SAAAA,WAAAA,GAGjB,oBAAC;YAAI,WAAW;yBACZ,oBAACC,cAAYA,OAAAA,WAAAA,GACb,oBAACC,QAAMA;YACH,SAAS;YACT,MAAM;YACN,WAAW;YACX,SAASR;YACT,oBAAM,oBAACS,MAAIA;gBAAC,OAAO;gBAAe,oBAAM,oBAACC,6BAAUA;;0BAEvD,oBAACF,QAAMA;YAAC,SAAS;YAAW,MAAM;YAAQ,SAASJ,KAAK,MAAM;;AAMtF;AAEA,MAAME,WAAW;IACb,MAAMK,WAAWC,OAAgC;IAEjD,MAAMC,UAAUC,QAAQ;QACpB,MAAM;QACN,YAAYC,WAAW,MAAM,CAAC;IAClC;IAEAC,UAAU;QACN,IAAIL,SAAS,OAAO,EAChBM,WAAW;YACPN,SAAS,OAAO,EAAE;QACtB,GAAG;IAEX,GAAG,EAAE;IAEL,MAAMO,eAAe;QACjB,IAAIL,AAA+B,UAA/BA,QAAQ,UAAU,CAAC,OAAO,IAAcA,QAAQ,KAAK,EACrDM,OAAO,IAAI,CAACN,QAAQ,KAAK,EAAE;IAEnC;IAEA,OAAO,WAAP,GACI,oBAACO,OAAKA;QACD,GAAGP,OAAO;QACX,UAAUQ,CAAAA;YACNV,SAAS,OAAO,GAAGU;QACvB;QACA,SAAS;QACT,aAAa;QACb,WAAW;QACX,yBAAW,oBAACZ,MAAIA;YAAC,OAAM;YAAQ,oBAAM,oBAACa,gBAASA;;QAC/C,uBAAS,oBAACC,YAAUA;YAAC,SAAQ;YAAQ,oBAAM,oBAACC,gCAASA;YAAK,SAASN;;;AAG/E;AAEA,MAAMX,eAAe;IACjB,MAAMkB,aAAaX,QAAQ;QACvB,MAAM;QACN,cAAc;IAClB;IAEA,OAAO,WAAP,GACI,oBAACY,QAAMA;QACH,SAASD,AAAqB,aAArBA,WAAW,KAAK;QACzB,OAAO;QACP,UAAUE,CAAAA;YACNF,WAAW,QAAQ,CAACE,AAAU,SAAVA,QAAiB,WAAW;QACpD;;AAGZ"}
+{"version":3,"file":"components/LexicalEditor/LexicalLinkForm.js","sources":["../../../src/components/LexicalEditor/LexicalLinkForm.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport type { FloatingLinkEditorPlugin } from \"@webiny/lexical-editor\";\nimport { Button, Grid, Icon, IconButton, Input, Switch } from \"@webiny/admin-ui\";\nimport { Form, useBind } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { ReactComponent as GlobeIcon } from \"@webiny/icons/language.svg\";\nimport { ReactComponent as OpenInNew } from \"@webiny/icons/open_in_new.svg\";\nimport { ReactComponent as RemoveLink } from \"@webiny/icons/link_off.svg\";\n\ntype LexicalLinkForm = NonNullable<\n    React.ComponentProps<typeof FloatingLinkEditorPlugin>[\"LinkForm\"]\n>;\ntype LinkFormProps = React.ComponentProps<LexicalLinkForm>;\n\nexport const LexicalLinkForm = ({ linkData, onSave, removeLink }: LinkFormProps) => {\n    const onSubmit = (data: LinkFormProps[\"linkData\"]) => {\n        onSave(data);\n    };\n\n    return (\n        <Form data={linkData} onSubmit={onSubmit} validateOnFirstSubmit submitOnEnter>\n            {form => (\n                <div className={\"p-md\"}>\n                    <Grid gap={\"small\"}>\n                        <Grid.Column span={12}>\n                            <UrlInput />\n                        </Grid.Column>\n                    </Grid>\n                    <div className={\"flex w-full items-center justify-between mt-sm gap-sm\"}>\n                        <TargetSwitch />\n                        <Button\n                            variant={\"ghost\"}\n                            size={\"sm\"}\n                            text={`Remove link`}\n                            className={\"text-destructive-primary! [&_svg]:fill-destructive\"}\n                            onClick={removeLink}\n                            icon={<Icon label={\"Remove link\"} icon={<RemoveLink />} />}\n                        />\n                        <Button\n                            variant={\"primary\"}\n                            size={\"sm\"}\n                            text={`Save`}\n                            onClick={form.submit}\n                        />\n                    </div>\n                </div>\n            )}\n        </Form>\n    );\n};\n\nconst UrlInput = () => {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const urlBind = useBind({\n        name: \"url\",\n        validators: validation.create(\"required,url:allowRelative:allowHref\")\n    });\n\n    useEffect(() => {\n        if (inputRef.current) {\n            setTimeout(() => {\n                inputRef.current?.focus();\n            }, 10);\n        }\n    }, []);\n\n    const openInNewTab = () => {\n        if (urlBind.validation.isValid !== false && urlBind.value) {\n            window.open(urlBind.value, \"_blank\");\n        }\n    };\n\n    return (\n        <Input\n            {...urlBind}\n            inputRef={ref => {\n                inputRef.current = ref;\n            }}\n            variant={\"secondary\"}\n            size={\"md\"}\n            placeholder={\"Enter link\"}\n            autoFocus={true}\n            startIcon={<Icon label=\"globe\" icon={<GlobeIcon />} />}\n            endIcon={<IconButton variant=\"ghost\" icon={<OpenInNew />} onClick={openInNewTab} />}\n        />\n    );\n};\n\nconst TargetSwitch = () => {\n    const targetBind = useBind({\n        name: \"target\",\n        defaultValue: \"_self\"\n    });\n\n    return (\n        <Switch\n            checked={targetBind.value === \"_blank\"}\n            label={\"Open in new tab\"}\n            onChange={value => {\n                targetBind.onChange(value === true ? \"_blank\" : \"_self\");\n            }}\n        />\n    );\n};\n"],"names":["LexicalLinkForm","linkData","onSave","removeLink","onSubmit","data","Form","form","Grid","UrlInput","TargetSwitch","Button","Icon","RemoveLink","inputRef","useRef","urlBind","useBind","validation","useEffect","setTimeout","openInNewTab","window","Input","ref","GlobeIcon","IconButton","OpenInNew","targetBind","Switch","value"],"mappings":";;;;;;;AAcO,MAAMA,kBAAkB,CAAC,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,UAAU,EAAiB;IAC3E,MAAMC,WAAW,CAACC;QACdH,OAAOG;IACX;IAEA,OAAO,WAAP,GACI,oBAACC,MAAIA;QAAC,MAAML;QAAU,UAAUG;QAAU;QAAsB;OAC3DG,CAAAA,OAAAA,WAAAA,GACG,oBAAC;YAAI,WAAW;yBACZ,oBAACC,MAAIA;YAAC,KAAK;yBACP,oBAACA,KAAK,MAAM;YAAC,MAAM;yBACf,oBAACC,UAAQA,SAAAA,WAAAA,GAGjB,oBAAC;YAAI,WAAW;yBACZ,oBAACC,cAAYA,OAAAA,WAAAA,GACb,oBAACC,QAAMA;YACH,SAAS;YACT,MAAM;YACN,MAAM;YACN,WAAW;YACX,SAASR;YACT,oBAAM,oBAACS,MAAIA;gBAAC,OAAO;gBAAe,oBAAM,oBAACC,6BAAUA;;0BAEvD,oBAACF,QAAMA;YACH,SAAS;YACT,MAAM;YACN,MAAM;YACN,SAASJ,KAAK,MAAM;;AAOhD;AAEA,MAAME,WAAW;IACb,MAAMK,WAAWC,OAAgC;IAEjD,MAAMC,UAAUC,QAAQ;QACpB,MAAM;QACN,YAAYC,WAAW,MAAM,CAAC;IAClC;IAEAC,UAAU;QACN,IAAIL,SAAS,OAAO,EAChBM,WAAW;YACPN,SAAS,OAAO,EAAE;QACtB,GAAG;IAEX,GAAG,EAAE;IAEL,MAAMO,eAAe;QACjB,IAAIL,AAA+B,UAA/BA,QAAQ,UAAU,CAAC,OAAO,IAAcA,QAAQ,KAAK,EACrDM,OAAO,IAAI,CAACN,QAAQ,KAAK,EAAE;IAEnC;IAEA,OAAO,WAAP,GACI,oBAACO,OAAKA;QACD,GAAGP,OAAO;QACX,UAAUQ,CAAAA;YACNV,SAAS,OAAO,GAAGU;QACvB;QACA,SAAS;QACT,MAAM;QACN,aAAa;QACb,WAAW;QACX,yBAAW,oBAACZ,MAAIA;YAAC,OAAM;YAAQ,oBAAM,oBAACa,gBAASA;;QAC/C,uBAAS,oBAACC,YAAUA;YAAC,SAAQ;YAAQ,oBAAM,oBAACC,gCAASA;YAAK,SAASN;;;AAG/E;AAEA,MAAMX,eAAe;IACjB,MAAMkB,aAAaX,QAAQ;QACvB,MAAM;QACN,cAAc;IAClB;IAEA,OAAO,WAAP,GACI,oBAACY,QAAMA;QACH,SAASD,AAAqB,aAArBA,WAAW,KAAK;QACzB,OAAO;QACP,UAAUE,CAAAA;YACNF,WAAW,QAAQ,CAACE,AAAU,SAAVA,QAAiB,WAAW;QACpD;;AAGZ"}

package/components/ListView/ListView.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { IListViewModel, IListActions } from "../../presentation/listPresenter/abstractions.js";
+interface ListViewProps {
+    list: IListViewModel<any>;
+    actions: IListActions;
+    showingFilters?: boolean;
+    onToggleFilters?: () => void;
+    namespace: string;
+    sidebar?: React.ReactNode;
+    header?: React.ReactNode;
+    bulkActions?: React.ReactNode;
+    filters?: React.ReactNode;
+    content: React.ReactNode;
+    bottomBar?: React.ReactNode;
+}
+declare const ListViewBase: ({ list, actions, showingFilters, onToggleFilters, namespace, sidebar, header, bulkActions, filters, content, bottomBar }: ListViewProps) => React.JSX.Element;
+export { ListViewBase, type ListViewProps };

package/components/ListView/ListView.js

@@ -0,0 +1,36 @@
+import react, { useMemo } from "react";
+import { LeftPanel, RightPanel, SplitView } from "../SplitView/SplitView.js";
+import { ListViewProvider } from "./context.js";
+const ListViewBase = ({ list, actions, showingFilters = false, onToggleFilters, namespace, sidebar, header, bulkActions, filters, content, bottomBar })=>{
+    const ctx = useMemo(()=>({
+            list,
+            actions,
+            showingFilters,
+            onToggleFilters
+        }), [
+        list,
+        actions,
+        showingFilters,
+        onToggleFilters
+    ]);
+    const mainContent = /*#__PURE__*/ react.createElement("div", {
+        className: "h-full relative overflow-hidden"
+    }, header, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            top: "105px"
+        },
+        className: "w-full overflow-hidden absolute top-0 bottom-0 left-0"
+    }, bulkActions, filters, content, bottomBar));
+    return /*#__PURE__*/ react.createElement(ListViewProvider, {
+        value: ctx
+    }, sidebar ? /*#__PURE__*/ react.createElement(SplitView, {
+        namespace: namespace
+    }, /*#__PURE__*/ react.createElement(LeftPanel, {
+        span: 2
+    }, sidebar), /*#__PURE__*/ react.createElement(RightPanel, {
+        span: 10
+    }, mainContent)) : mainContent);
+};
+export { ListViewBase };
+
+//# sourceMappingURL=ListView.js.map

package/components/ListView/ListView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ListView/ListView.js","sources":["../../../src/components/ListView/ListView.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { LeftPanel, RightPanel, SplitView } from \"~/components/SplitView/SplitView.js\";\nimport { ListViewProvider } from \"./context.js\";\nimport type { IListViewModel, IListActions } from \"~/presentation/listPresenter/abstractions.js\";\n\ninterface ListViewProps {\n    list: IListViewModel<any>;\n    actions: IListActions;\n    showingFilters?: boolean;\n    onToggleFilters?: () => void;\n    namespace: string;\n    sidebar?: React.ReactNode;\n    header?: React.ReactNode;\n    bulkActions?: React.ReactNode;\n    filters?: React.ReactNode;\n    content: React.ReactNode;\n    bottomBar?: React.ReactNode;\n}\n\nconst ListViewBase = ({\n    list,\n    actions,\n    showingFilters = false,\n    onToggleFilters,\n    namespace,\n    sidebar,\n    header,\n    bulkActions,\n    filters,\n    content,\n    bottomBar\n}: ListViewProps) => {\n    const ctx = useMemo(\n        () => ({ list, actions, showingFilters, onToggleFilters }),\n        [list, actions, showingFilters, onToggleFilters]\n    );\n\n    const mainContent = (\n        <div className={\"h-full relative overflow-hidden\"}>\n            {header}\n            <div\n                style={{ top: \"105px\" }}\n                className={\"w-full overflow-hidden absolute top-0 bottom-0 left-0\"}\n            >\n                {bulkActions}\n                {filters}\n                {content}\n                {bottomBar}\n            </div>\n        </div>\n    );\n\n    return (\n        <ListViewProvider value={ctx}>\n            {sidebar ? (\n                <SplitView namespace={namespace}>\n                    <LeftPanel span={2}>{sidebar}</LeftPanel>\n                    <RightPanel span={10}>{mainContent}</RightPanel>\n                </SplitView>\n            ) : (\n                mainContent\n            )}\n        </ListViewProvider>\n    );\n};\n\nexport { ListViewBase, type ListViewProps };\n"],"names":["ListViewBase","list","actions","showingFilters","onToggleFilters","namespace","sidebar","header","bulkActions","filters","content","bottomBar","ctx","useMemo","mainContent","ListViewProvider","SplitView","LeftPanel","RightPanel"],"mappings":";;;AAmBA,MAAMA,eAAe,CAAC,EAClBC,IAAI,EACJC,OAAO,EACPC,iBAAiB,KAAK,EACtBC,eAAe,EACfC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,WAAW,EACXC,OAAO,EACPC,OAAO,EACPC,SAAS,EACG;IACZ,MAAMC,MAAMC,QACR,IAAO;YAAEZ;YAAMC;YAASC;YAAgBC;QAAgB,IACxD;QAACH;QAAMC;QAASC;QAAgBC;KAAgB;IAGpD,MAAMU,cAAc,WAAdA,GACF,oBAAC;QAAI,WAAW;OACXP,QAAAA,WAAAA,GACD,oBAAC;QACG,OAAO;YAAE,KAAK;QAAQ;QACtB,WAAW;OAEVC,aACAC,SACAC,SACAC;IAKb,OAAO,WAAP,GACI,oBAACI,kBAAgBA;QAAC,OAAOH;OACpBN,UAAU,WAAVA,GACG,oBAACU,WAASA;QAAC,WAAWX;qBAClB,oBAACY,WAASA;QAAC,MAAM;OAAIX,UAAAA,WAAAA,GACrB,oBAACY,YAAUA;QAAC,MAAM;OAAKJ,gBAG3BA;AAIhB"}

package/components/ListView/ListViewBottomBar.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export interface ListViewBottomBarProps {
+    meta?: {
+        itemLabel: string | {
+            singular: string;
+            plural: string;
+        };
+    };
+    status?: {
+        loadingText?: string;
+    } | true;
+}
+declare const ListViewBottomBar: ({ meta, status }: ListViewBottomBarProps) => React.JSX.Element;
+export { ListViewBottomBar };

package/components/ListView/ListViewBottomBar.js

@@ -0,0 +1,45 @@
+import react from "react";
+import { Loader, Separator, Text } from "@webiny/admin-ui";
+import { observer } from "mobx-react-lite";
+import { useListView } from "./context.js";
+const Meta = observer(({ itemLabel })=>{
+    const { list } = useListView();
+    const { loading, totalCount, currentCount } = list.pagination;
+    if (loading) return null;
+    const singular = "string" == typeof itemLabel ? itemLabel : itemLabel.singular;
+    const plural = "string" == typeof itemLabel ? `${itemLabel}s` : itemLabel.plural;
+    const label = 1 === totalCount ? singular : plural;
+    return /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        as: "div",
+        className: "text-neutral-strong"
+    }, `Showing ${currentCount} out of ${totalCount} ${label}.`);
+});
+const Status = observer(({ loadingText })=>{
+    const { list } = useListView();
+    if (!list.pagination.loadingMore) return null;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-sm"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        as: "div",
+        className: "text-neutral-strong"
+    }, loadingText ?? "Loading more items..."), /*#__PURE__*/ react.createElement(Loader, {
+        size: "xs"
+    }));
+});
+const ListViewBottomBar = ({ meta, status })=>{
+    const statusProps = true === status ? {} : status;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "sticky bottom-0 z-5 bg-neutral-base w-full transform translate-z-0 overflow-hidden"
+    }, /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement("div", {
+        className: "h-xl px-md py-sm flex items-center justify-between"
+    }, meta ? /*#__PURE__*/ react.createElement(Meta, {
+        itemLabel: meta.itemLabel
+    }) : null, statusProps ? /*#__PURE__*/ react.createElement(Status, {
+        loadingText: statusProps.loadingText
+    }) : null));
+};
+export { ListViewBottomBar };
+
+//# sourceMappingURL=ListViewBottomBar.js.map

package/components/ListView/ListViewBottomBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ListView/ListViewBottomBar.js","sources":["../../../src/components/ListView/ListViewBottomBar.tsx"],"sourcesContent":["import React from \"react\";\nimport { Loader, Separator, Text } from \"@webiny/admin-ui\";\nimport { observer } from \"mobx-react-lite\";\nimport { useListView } from \"./context.js\";\n\nexport interface ListViewBottomBarProps {\n    meta?: { itemLabel: string | { singular: string; plural: string } };\n    status?: { loadingText?: string } | true;\n}\n\nconst Meta = observer(\n    ({ itemLabel }: { itemLabel: string | { singular: string; plural: string } }) => {\n        const { list } = useListView();\n        const { loading, totalCount, currentCount } = list.pagination;\n\n        if (loading) {\n            return null;\n        }\n\n        const singular = typeof itemLabel === \"string\" ? itemLabel : itemLabel.singular;\n        const plural = typeof itemLabel === \"string\" ? `${itemLabel}s` : itemLabel.plural;\n        const label = totalCount === 1 ? singular : plural;\n\n        return (\n            <Text\n                size={\"sm\"}\n                as={\"div\"}\n                className={\"text-neutral-strong\"}\n            >{`Showing ${currentCount} out of ${totalCount} ${label}.`}</Text>\n        );\n    }\n);\n\nconst Status = observer(({ loadingText }: { loadingText?: string }) => {\n    const { list } = useListView();\n\n    if (!list.pagination.loadingMore) {\n        return null;\n    }\n\n    return (\n        <div className=\"flex items-center gap-sm\">\n            <Text size={\"sm\"} as={\"div\"} className={\"text-neutral-strong\"}>\n                {loadingText ?? \"Loading more items...\"}\n            </Text>\n            <Loader size={\"xs\"} />\n        </div>\n    );\n});\n\nconst ListViewBottomBar = ({ meta, status }: ListViewBottomBarProps) => {\n    const statusProps = status === true ? {} : status;\n\n    return (\n        <div className=\"sticky bottom-0 z-5 bg-neutral-base w-full transform translate-z-0 overflow-hidden\">\n            <Separator />\n            <div className={\"h-xl px-md py-sm flex items-center justify-between\"}>\n                {meta ? <Meta itemLabel={meta.itemLabel} /> : null}\n                {statusProps ? <Status loadingText={statusProps.loadingText} /> : null}\n            </div>\n        </div>\n    );\n};\n\nexport { ListViewBottomBar };\n"],"names":["Meta","observer","itemLabel","list","useListView","loading","totalCount","currentCount","singular","plural","label","Text","Status","loadingText","Loader","ListViewBottomBar","meta","status","statusProps","Separator"],"mappings":";;;;AAUA,MAAMA,OAAOC,SACT,CAAC,EAAEC,SAAS,EAAgE;IACxE,MAAM,EAAEC,IAAI,EAAE,GAAGC;IACjB,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGJ,KAAK,UAAU;IAE7D,IAAIE,SACA,OAAO;IAGX,MAAMG,WAAW,AAAqB,YAArB,OAAON,YAAyBA,YAAYA,UAAU,QAAQ;IAC/E,MAAMO,SAAS,AAAqB,YAArB,OAAOP,YAAyB,GAAGA,UAAU,CAAC,CAAC,GAAGA,UAAU,MAAM;IACjF,MAAMQ,QAAQJ,AAAe,MAAfA,aAAmBE,WAAWC;IAE5C,OAAO,WAAP,GACI,oBAACE,MAAIA;QACD,MAAM;QACN,IAAI;QACJ,WAAW;OACb,CAAC,QAAQ,EAAEJ,aAAa,QAAQ,EAAED,WAAW,CAAC,EAAEI,MAAM,CAAC,CAAC;AAElE;AAGJ,MAAME,SAASX,SAAS,CAAC,EAAEY,WAAW,EAA4B;IAC9D,MAAM,EAAEV,IAAI,EAAE,GAAGC;IAEjB,IAAI,CAACD,KAAK,UAAU,CAAC,WAAW,EAC5B,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACQ,MAAIA;QAAC,MAAM;QAAM,IAAI;QAAO,WAAW;OACnCE,eAAe,wCAEpB,oBAACC,QAAMA;QAAC,MAAM;;AAG1B;AAEA,MAAMC,oBAAoB,CAAC,EAAEC,IAAI,EAAEC,MAAM,EAA0B;IAC/D,MAAMC,cAAcD,AAAW,SAAXA,SAAkB,CAAC,IAAIA;IAE3C,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACE,WAASA,OAAAA,WAAAA,GACV,oBAAC;QAAI,WAAW;OACXH,OAAO,WAAPA,GAAO,oBAAChB,MAAIA;QAAC,WAAWgB,KAAK,SAAS;SAAO,MAC7CE,cAAc,WAAdA,GAAc,oBAACN,QAAMA;QAAC,aAAaM,YAAY,WAAW;SAAO;AAIlF"}

package/components/ListView/ListViewBulkActions.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Buttons } from "../../components/Buttons/index.js";
+export interface ListViewBulkActionsProps {
+    itemLabel: string;
+    itemLabelPlural?: string;
+    actions: React.ComponentProps<typeof Buttons>["actions"];
+}
+declare const ListViewBulkActions: (({ itemLabel, itemLabelPlural, actions: bulkActions }: ListViewBulkActionsProps) => React.JSX.Element) & React.NamedExoticComponent<ListViewBulkActionsProps> & {
+    readonly type: ({ itemLabel, itemLabelPlural, actions: bulkActions }: ListViewBulkActionsProps) => React.JSX.Element;
+};
+export { ListViewBulkActions };

package/components/ListView/ListViewBulkActions.js

@@ -0,0 +1,41 @@
+import react, { useMemo } from "react";
+import { observer } from "mobx-react-lite";
+import { IconButton, Text, cn } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/close.svg";
+import { Buttons } from "../Buttons/index.js";
+import { useListView } from "./context.js";
+const ListViewBulkActions = observer(({ itemLabel, itemLabelPlural, actions: bulkActions })=>{
+    const { list, actions } = useListView();
+    const selectedCount = list.selection.selectedCount;
+    const plural = itemLabelPlural ?? `${itemLabel}s`;
+    const headline = useMemo(()=>{
+        const label = 1 === selectedCount ? itemLabel : plural;
+        return `${selectedCount} ${label} selected`;
+    }, [
+        selectedCount,
+        itemLabel,
+        plural
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: cn("w-full bg-neutral-disabled px-md py-sm", selectedCount > 0 ? "block" : "hidden")
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-between gap-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-sm"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-strong"
+    }, headline)), /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-sm"
+    }, /*#__PURE__*/ react.createElement(Buttons, {
+        actions: bulkActions
+    }), /*#__PURE__*/ react.createElement(IconButton, {
+        variant: "ghost",
+        size: "sm",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        onClick: ()=>actions.selection.deselectAll()
+    }))));
+});
+export { ListViewBulkActions };
+
+//# sourceMappingURL=ListViewBulkActions.js.map

package/components/ListView/ListViewBulkActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ListView/ListViewBulkActions.js","sources":["../../../src/components/ListView/ListViewBulkActions.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Text, IconButton, cn } from \"@webiny/admin-ui\";\nimport { ReactComponent as Close } from \"@webiny/icons/close.svg\";\nimport { Buttons } from \"~/components/Buttons/index.js\";\nimport { useListView } from \"./context.js\";\n\nexport interface ListViewBulkActionsProps {\n    itemLabel: string;\n    itemLabelPlural?: string;\n    actions: React.ComponentProps<typeof Buttons>[\"actions\"];\n}\n\nconst ListViewBulkActions = observer(\n    ({ itemLabel, itemLabelPlural, actions: bulkActions }: ListViewBulkActionsProps) => {\n        const { list, actions } = useListView();\n\n        const selectedCount = list.selection.selectedCount;\n        const plural = itemLabelPlural ?? `${itemLabel}s`;\n\n        const headline = useMemo((): string => {\n            const label = selectedCount === 1 ? itemLabel : plural;\n            return `${selectedCount} ${label} selected`;\n        }, [selectedCount, itemLabel, plural]);\n\n        return (\n            <div\n                className={cn(\n                    \"w-full bg-neutral-disabled px-md py-sm\",\n                    selectedCount > 0 ? \"block\" : \"hidden\"\n                )}\n            >\n                <div className={\"flex items-center justify-between gap-sm\"}>\n                    <div className={\"flex items-center gap-sm\"}>\n                        <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                            {headline}\n                        </Text>\n                    </div>\n                    <div className={\"flex items-center gap-sm\"}>\n                        <Buttons actions={bulkActions} />\n                        <IconButton\n                            variant={\"ghost\"}\n                            size={\"sm\"}\n                            icon={<Close />}\n                            onClick={() => actions.selection.deselectAll()}\n                        />\n                    </div>\n                </div>\n            </div>\n        );\n    }\n);\n\nexport { ListViewBulkActions };\n"],"names":["ListViewBulkActions","observer","itemLabel","itemLabelPlural","bulkActions","list","actions","useListView","selectedCount","plural","headline","useMemo","label","cn","Text","Buttons","IconButton","Close"],"mappings":";;;;;;AAaA,MAAMA,sBAAsBC,SACxB,CAAC,EAAEC,SAAS,EAAEC,eAAe,EAAE,SAASC,WAAW,EAA4B;IAC3E,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAE,GAAGC;IAE1B,MAAMC,gBAAgBH,KAAK,SAAS,CAAC,aAAa;IAClD,MAAMI,SAASN,mBAAmB,GAAGD,UAAU,CAAC,CAAC;IAEjD,MAAMQ,WAAWC,QAAQ;QACrB,MAAMC,QAAQJ,AAAkB,MAAlBA,gBAAsBN,YAAYO;QAChD,OAAO,GAAGD,cAAc,CAAC,EAAEI,MAAM,SAAS,CAAC;IAC/C,GAAG;QAACJ;QAAeN;QAAWO;KAAO;IAErC,OAAO,WAAP,GACI,oBAAC;QACG,WAAWI,GACP,0CACAL,gBAAgB,IAAI,UAAU;qBAGlC,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACM,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBJ,YAAAA,WAAAA,GAGT,oBAAC;QAAI,WAAW;qBACZ,oBAACK,SAAOA;QAAC,SAASX;sBAClB,oBAACY,YAAUA;QACP,SAAS;QACT,MAAM;QACN,oBAAM,oBAACC,gBAAKA;QACZ,SAAS,IAAMX,QAAQ,SAAS,CAAC,WAAW;;AAMpE"}

package/components/ListView/ListViewContent.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface ListViewContentProps {
+    loadMoreThreshold?: number;
+    loadMoreDebounceMs?: number;
+    empty?: React.ReactNode;
+    searchEmpty?: React.ReactNode;
+    children: React.ReactNode;
+}
+declare const ListViewContent: (({ loadMoreThreshold, loadMoreDebounceMs, empty, searchEmpty, children }: ListViewContentProps) => React.JSX.Element) & React.NamedExoticComponent<ListViewContentProps> & {
+    readonly type: ({ loadMoreThreshold, loadMoreDebounceMs, empty, searchEmpty, children }: ListViewContentProps) => React.JSX.Element;
+};
+export { ListViewContent };

package/components/ListView/ListViewContent.js

@@ -0,0 +1,25 @@
+import react, { useMemo } from "react";
+import { Scrollbar } from "@webiny/admin-ui";
+import debounce from "lodash/debounce.js";
+import { observer } from "mobx-react-lite";
+import { useListView } from "./context.js";
+const ListViewContent = observer(({ loadMoreThreshold = 0.8, loadMoreDebounceMs = 200, empty, searchEmpty, children })=>{
+    const { list, actions } = useListView();
+    const onScrollFrame = useMemo(()=>debounce(async (scrollFrame)=>{
+            if (scrollFrame.top > loadMoreThreshold) await actions.loadMore();
+        }, loadMoreDebounceMs), [
+        loadMoreThreshold,
+        loadMoreDebounceMs,
+        actions
+    ]);
+    if (list.empty && empty) return /*#__PURE__*/ react.createElement(Scrollbar, {
+        "data-testid": "default-data-list"
+    }, list.emptyWithFilters && searchEmpty ? searchEmpty : empty);
+    return /*#__PURE__*/ react.createElement(Scrollbar, {
+        "data-testid": "default-data-list",
+        onScrollFrame: (scrollFrame)=>onScrollFrame(scrollFrame)
+    }, children);
+});
+export { ListViewContent };
+
+//# sourceMappingURL=ListViewContent.js.map

package/components/ListView/ListViewContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ListView/ListViewContent.js","sources":["../../../src/components/ListView/ListViewContent.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Scrollbar } from \"@webiny/admin-ui\";\nimport debounce from \"lodash/debounce.js\";\nimport { observer } from \"mobx-react-lite\";\nimport { useListView } from \"./context.js\";\n\nexport interface ListViewContentProps {\n    loadMoreThreshold?: number;\n    loadMoreDebounceMs?: number;\n    empty?: React.ReactNode;\n    searchEmpty?: React.ReactNode;\n    children: React.ReactNode;\n}\n\nconst ListViewContent = observer(\n    ({\n        loadMoreThreshold = 0.8,\n        loadMoreDebounceMs = 200,\n        empty,\n        searchEmpty,\n        children\n    }: ListViewContentProps) => {\n        const { list, actions } = useListView();\n\n        const onScrollFrame = useMemo(\n            () =>\n                debounce(async (scrollFrame: { top: number }) => {\n                    if (scrollFrame.top > loadMoreThreshold) {\n                        await actions.loadMore();\n                    }\n                }, loadMoreDebounceMs),\n            [loadMoreThreshold, loadMoreDebounceMs, actions]\n        );\n\n        if (list.empty && empty) {\n            return (\n                <Scrollbar data-testid=\"default-data-list\">\n                    {list.emptyWithFilters && searchEmpty ? searchEmpty : empty}\n                </Scrollbar>\n            );\n        }\n\n        return (\n            <Scrollbar\n                data-testid=\"default-data-list\"\n                onScrollFrame={scrollFrame => onScrollFrame(scrollFrame)}\n            >\n                {children}\n            </Scrollbar>\n        );\n    }\n);\n\nexport { ListViewContent };\n"],"names":["ListViewContent","observer","loadMoreThreshold","loadMoreDebounceMs","empty","searchEmpty","children","list","actions","useListView","onScrollFrame","useMemo","debounce","scrollFrame","Scrollbar"],"mappings":";;;;;AAcA,MAAMA,kBAAkBC,SACpB,CAAC,EACGC,oBAAoB,GAAG,EACvBC,qBAAqB,GAAG,EACxBC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACW;IACnB,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAE,GAAGC;IAE1B,MAAMC,gBAAgBC,QAClB,IACIC,SAAS,OAAOC;YACZ,IAAIA,YAAY,GAAG,GAAGX,mBAClB,MAAMM,QAAQ,QAAQ;QAE9B,GAAGL,qBACP;QAACD;QAAmBC;QAAoBK;KAAQ;IAGpD,IAAID,KAAK,KAAK,IAAIH,OACd,OAAO,WAAP,GACI,oBAACU,WAASA;QAAC,eAAY;OAClBP,KAAK,gBAAgB,IAAIF,cAAcA,cAAcD;IAKlE,OAAO,WAAP,GACI,oBAACU,WAASA;QACN,eAAY;QACZ,eAAeD,CAAAA,cAAeH,cAAcG;OAE3CP;AAGb"}

package/components/ListView/ListViewFilters.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+type Filter = {
+    name: string;
+    element: React.ReactElement;
+};
+type FiltersToWhereConverter = (data: Record<string, any>) => Record<string, any>;
+export interface ListViewFiltersProps {
+    filters: Filter[];
+    filtersToWhere?: FiltersToWhereConverter[];
+    children?: React.ReactNode;
+}
+declare const ListViewFilters: (({ filters, filtersToWhere, children }: ListViewFiltersProps) => React.JSX.Element) & React.NamedExoticComponent<ListViewFiltersProps> & {
+    readonly type: ({ filters, filtersToWhere, children }: ListViewFiltersProps) => React.JSX.Element;
+};
+export { ListViewFilters };

package/components/ListView/ListViewFilters.js

@@ -0,0 +1,21 @@
+import react from "react";
+import { observer } from "mobx-react-lite";
+import { Filters } from "../Filters/Filters.js";
+import { useListView } from "./context.js";
+const ListViewFilters = observer(({ filters, filtersToWhere, children })=>{
+    const { showingFilters, actions } = useListView();
+    const applyFilters = (data)=>{
+        if (!Object.keys(data).length) return;
+        const convertedFilters = (filtersToWhere ?? []).reduce((acc, converter)=>converter(acc), data);
+        for (const [key, value] of Object.entries(convertedFilters))if (null == value || "" === value) actions.filter.clear(key);
+        else actions.filter.set(key, value);
+    };
+    return /*#__PURE__*/ react.createElement(Filters, {
+        filters: filters,
+        show: showingFilters,
+        onChange: applyFilters
+    }, children);
+});
+export { ListViewFilters };
+
+//# sourceMappingURL=ListViewFilters.js.map

package/components/ListView/ListViewFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ListView/ListViewFilters.js","sources":["../../../src/components/ListView/ListViewFilters.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport type { FiltersOnSubmit } from \"~/components/Filters/Filters.js\";\nimport { Filters } from \"~/components/Filters/Filters.js\";\nimport { useListView } from \"./context.js\";\n\ntype Filter = {\n    name: string;\n    element: React.ReactElement;\n};\n\ntype FiltersToWhereConverter = (data: Record<string, any>) => Record<string, any>;\n\nexport interface ListViewFiltersProps {\n    filters: Filter[];\n    filtersToWhere?: FiltersToWhereConverter[];\n    children?: React.ReactNode;\n}\n\nconst ListViewFilters = observer(({ filters, filtersToWhere, children }: ListViewFiltersProps) => {\n    const { showingFilters, actions } = useListView();\n\n    const applyFilters: FiltersOnSubmit = data => {\n        if (!Object.keys(data).length) {\n            return;\n        }\n\n        const convertedFilters = (filtersToWhere ?? []).reduce(\n            (acc, converter) => converter(acc),\n            data\n        );\n\n        for (const [key, value] of Object.entries(convertedFilters)) {\n            if (value === undefined || value === null || value === \"\") {\n                actions.filter.clear(key);\n            } else {\n                actions.filter.set(key, value);\n            }\n        }\n    };\n\n    return (\n        <Filters filters={filters} show={showingFilters} onChange={applyFilters}>\n            {children}\n        </Filters>\n    );\n});\n\nexport { ListViewFilters };\n"],"names":["ListViewFilters","observer","filters","filtersToWhere","children","showingFilters","actions","useListView","applyFilters","data","Object","convertedFilters","acc","converter","key","value","Filters"],"mappings":";;;;AAmBA,MAAMA,kBAAkBC,SAAS,CAAC,EAAEC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,EAAwB;IACzF,MAAM,EAAEC,cAAc,EAAEC,OAAO,EAAE,GAAGC;IAEpC,MAAMC,eAAgCC,CAAAA;QAClC,IAAI,CAACC,OAAO,IAAI,CAACD,MAAM,MAAM,EACzB;QAGJ,MAAME,mBAAoBR,AAAAA,CAAAA,kBAAkB,EAAC,EAAG,MAAM,CAClD,CAACS,KAAKC,YAAcA,UAAUD,MAC9BH;QAGJ,KAAK,MAAM,CAACK,KAAKC,MAAM,IAAIL,OAAO,OAAO,CAACC,kBACtC,IAAII,QAAAA,SAAyCA,AAAU,OAAVA,OACzCT,QAAQ,MAAM,CAAC,KAAK,CAACQ;aAErBR,QAAQ,MAAM,CAAC,GAAG,CAACQ,KAAKC;IAGpC;IAEA,OAAO,WAAP,GACI,oBAACC,SAAOA;QAAC,SAASd;QAAS,MAAMG;QAAgB,UAAUG;OACtDJ;AAGb"}

package/components/ListView/ListViewHeader.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export interface ListViewHeaderProps {
+    title: {
+        icon: React.ReactElement;
+        text?: string;
+        after?: React.ReactNode;
+    };
+    search?: {
+        placeholder?: string;
+        id?: string;
+        disabled?: boolean;
+    } | true;
+    filtersToggle?: boolean;
+    actions?: React.ReactNode;
+}
+declare const ListViewHeader: ({ title, search, filtersToggle, actions }: ListViewHeaderProps) => React.JSX.Element;
+export { ListViewHeader };

package/components/ListView/ListViewHeader.js

@@ -0,0 +1,72 @@
+import react from "react";
+import { DelayedOnChange, Heading, Icon, Input, Separator, Skeleton } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/search.svg";
+import { FiltersToggle } from "../Filters/FiltersToggle.js";
+import { observer } from "mobx-react-lite";
+import { useListView } from "./context.js";
+const SearchInput = observer((props)=>{
+    const { list, actions } = useListView();
+    return /*#__PURE__*/ react.createElement(DelayedOnChange, {
+        value: list.search,
+        onChange: (value)=>{
+            const searchQuery = value.trim();
+            if (searchQuery === list.search) return;
+            if (!searchQuery) return void actions.search.clear();
+            actions.search.set(searchQuery);
+        }
+    }, ({ value, onChange })=>/*#__PURE__*/ react.createElement(Input, {
+            id: props.id,
+            value: value,
+            onChange: (e)=>onChange(e.target.value),
+            forwardEventOnChange: true,
+            placeholder: props.placeholder ?? "Search...",
+            startIcon: /*#__PURE__*/ react.createElement(Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Search"
+            }),
+            size: "md",
+            variant: "ghost",
+            className: "w-full",
+            disabled: props.disabled
+        }));
+});
+const FiltersToggleObserver = observer(()=>{
+    const { showingFilters, onToggleFilters } = useListView();
+    if (!onToggleFilters) return null;
+    return /*#__PURE__*/ react.createElement(FiltersToggle, {
+        onFiltersToggle: onToggleFilters,
+        showingFilters: showingFilters
+    });
+});
+const ListViewHeader = ({ title, search, filtersToggle, actions })=>{
+    const searchProps = true === search ? {} : search;
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-md"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "w-5/12 pt-md px-lg"
+    }, void 0 !== title.text ? /*#__PURE__*/ react.createElement("div", {
+        className: "flex gap-sm items-center"
+    }, /*#__PURE__*/ react.createElement(Icon, {
+        icon: title.icon,
+        label: title.text,
+        size: "md",
+        color: "neutral-strong"
+    }), /*#__PURE__*/ react.createElement(Heading, {
+        level: 4,
+        as: "h1",
+        className: "truncate"
+    }, title.text), title.after) : /*#__PURE__*/ react.createElement(Skeleton, {
+        size: "xl"
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "px-md pb-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-sm w-full"
+    }, searchProps ? /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1"
+    }, /*#__PURE__*/ react.createElement(SearchInput, searchProps)) : null, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("div", {
+        className: "flex gap-sm"
+    }, filtersToggle ? /*#__PURE__*/ react.createElement(FiltersToggleObserver, null) : null, actions))))), /*#__PURE__*/ react.createElement(Separator, null));
+};
+export { ListViewHeader };
+
+//# sourceMappingURL=ListViewHeader.js.map

package/components/ListView/ListViewHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ListView/ListViewHeader.js","sources":["../../../src/components/ListView/ListViewHeader.tsx"],"sourcesContent":["import React from \"react\";\nimport { Heading, Icon, Separator, Skeleton } from \"@webiny/admin-ui\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { DelayedOnChange, Input } from \"@webiny/admin-ui\";\nimport { FiltersToggle } from \"~/components/Filters/FiltersToggle.js\";\nimport { observer } from \"mobx-react-lite\";\nimport { useListView } from \"./context.js\";\n\nexport interface ListViewHeaderProps {\n    title: {\n        icon: React.ReactElement;\n        text?: string;\n        after?: React.ReactNode;\n    };\n    search?: { placeholder?: string; id?: string; disabled?: boolean } | true;\n    filtersToggle?: boolean;\n    actions?: React.ReactNode;\n}\n\nconst SearchInput = observer((props: { placeholder?: string; id?: string; disabled?: boolean }) => {\n    const { list, actions } = useListView();\n\n    return (\n        <DelayedOnChange\n            value={list.search}\n            onChange={value => {\n                const searchQuery = value.trim();\n\n                if (searchQuery === list.search) {\n                    return;\n                }\n\n                if (!searchQuery) {\n                    actions.search.clear();\n                    return;\n                }\n\n                actions.search.set(searchQuery);\n            }}\n        >\n            {({ value, onChange }) => (\n                <Input\n                    id={props.id}\n                    value={value}\n                    onChange={e => onChange(e.target.value)}\n                    forwardEventOnChange={true}\n                    placeholder={props.placeholder ?? \"Search...\"}\n                    startIcon={<Icon icon={<SearchIcon />} label=\"Search\" />}\n                    size={\"md\"}\n                    variant={\"ghost\"}\n                    className={\"w-full\"}\n                    disabled={props.disabled}\n                />\n            )}\n        </DelayedOnChange>\n    );\n});\n\nconst FiltersToggleObserver = observer(() => {\n    const { showingFilters, onToggleFilters } = useListView();\n\n    if (!onToggleFilters) {\n        return null;\n    }\n\n    return <FiltersToggle onFiltersToggle={onToggleFilters} showingFilters={showingFilters} />;\n});\n\nconst ListViewHeader = ({ title, search, filtersToggle, actions }: ListViewHeaderProps) => {\n    const searchProps = search === true ? {} : search;\n\n    return (\n        <>\n            <div className={\"flex flex-col gap-md\"}>\n                <div className={\"w-5/12 pt-md px-lg\"}>\n                    {title.text !== undefined ? (\n                        <div className={\"flex gap-sm items-center\"}>\n                            <Icon\n                                icon={title.icon}\n                                label={title.text}\n                                size={\"md\"}\n                                color={\"neutral-strong\"}\n                            />\n                            <Heading level={4} as={\"h1\"} className={\"truncate\"}>\n                                {title.text}\n                            </Heading>\n                            {title.after}\n                        </div>\n                    ) : (\n                        <Skeleton size={\"xl\"} />\n                    )}\n                </div>\n                <div className={\"px-md pb-sm\"}>\n                    <div className={\"flex items-center gap-sm w-full\"}>\n                        {searchProps ? (\n                            <div className={\"flex-1\"}>\n                                <SearchInput {...searchProps} />\n                            </div>\n                        ) : null}\n                        <div>\n                            <div className={\"flex gap-sm\"}>\n                                {filtersToggle ? <FiltersToggleObserver /> : null}\n                                {actions}\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <Separator />\n        </>\n    );\n};\n\nexport { ListViewHeader };\n"],"names":["SearchInput","observer","props","list","actions","useListView","DelayedOnChange","value","searchQuery","onChange","Input","e","Icon","SearchIcon","FiltersToggleObserver","showingFilters","onToggleFilters","FiltersToggle","ListViewHeader","title","search","filtersToggle","searchProps","undefined","Heading","Skeleton","Separator"],"mappings":";;;;;;AAmBA,MAAMA,cAAcC,SAAS,CAACC;IAC1B,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAE,GAAGC;IAE1B,OAAO,WAAP,GACI,oBAACC,iBAAeA;QACZ,OAAOH,KAAK,MAAM;QAClB,UAAUI,CAAAA;YACN,MAAMC,cAAcD,MAAM,IAAI;YAE9B,IAAIC,gBAAgBL,KAAK,MAAM,EAC3B;YAGJ,IAAI,CAACK,aAAa,YACdJ,QAAQ,MAAM,CAAC,KAAK;YAIxBA,QAAQ,MAAM,CAAC,GAAG,CAACI;QACvB;OAEC,CAAC,EAAED,KAAK,EAAEE,QAAQ,EAAE,iBACjB,oBAACC,OAAKA;YACF,IAAIR,MAAM,EAAE;YACZ,OAAOK;YACP,UAAUI,CAAAA,IAAKF,SAASE,EAAE,MAAM,CAAC,KAAK;YACtC,sBAAsB;YACtB,aAAaT,MAAM,WAAW,IAAI;YAClC,yBAAW,oBAACU,MAAIA;gBAAC,oBAAM,oBAACC,gBAAUA;gBAAK,OAAM;;YAC7C,MAAM;YACN,SAAS;YACT,WAAW;YACX,UAAUX,MAAM,QAAQ;;AAK5C;AAEA,MAAMY,wBAAwBb,SAAS;IACnC,MAAM,EAAEc,cAAc,EAAEC,eAAe,EAAE,GAAGX;IAE5C,IAAI,CAACW,iBACD,OAAO;IAGX,OAAO,WAAP,GAAO,oBAACC,eAAaA;QAAC,iBAAiBD;QAAiB,gBAAgBD;;AAC5E;AAEA,MAAMG,iBAAiB,CAAC,EAAEC,KAAK,EAAEC,MAAM,EAAEC,aAAa,EAAEjB,OAAO,EAAuB;IAClF,MAAMkB,cAAcF,AAAW,SAAXA,SAAkB,CAAC,IAAIA;IAE3C,OAAO,WAAP,GACI,wDACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;OACXD,AAAeI,WAAfJ,MAAM,IAAI,GAAiB,WAAZI,GACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACX,MAAIA;QACD,MAAMO,MAAM,IAAI;QAChB,OAAOA,MAAM,IAAI;QACjB,MAAM;QACN,OAAO;sBAEX,oBAACK,SAAOA;QAAC,OAAO;QAAG,IAAI;QAAM,WAAW;OACnCL,MAAM,IAAI,GAEdA,MAAM,KAAK,kBAGhB,oBAACM,UAAQA;QAAC,MAAM;uBAGxB,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;OACXH,cAAc,WAAdA,GACG,oBAAC;QAAI,WAAW;qBACZ,oBAACtB,aAAgBsB,gBAErB,oBACJ,oBAAC,2BACG,oBAAC;QAAI,WAAW;OACXD,gBAAgB,WAAhBA,GAAgB,oBAACP,uBAAqBA,QAAM,MAC5CV,cAAAA,WAAAA,GAMrB,oBAACsB,WAASA;AAGtB"}

package/components/ListView/ListViewSidebar.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export interface SidebarSectionProps {
+    grow?: boolean;
+    maxHeight?: string;
+    scrollable?: boolean;
+    children: React.ReactNode;
+}
+declare const SidebarSection: ({ grow, maxHeight, scrollable, children }: SidebarSectionProps) => React.JSX.Element;
+export interface ListViewSidebarProps {
+    title?: string;
+    children: React.ReactNode;
+}
+declare function ListViewSidebar({ title, children }: ListViewSidebarProps): React.JSX.Element;
+declare namespace ListViewSidebar {
+    export { SidebarSection as Section };
+}
+export { ListViewSidebar };