@webiny/app-aco 0.0.0-unstable.2af142b57e → 0.0.0-unstable.33e4fd9647

package/README.md

@@ -1,349 +1,11 @@
 # @webiny/app-aco
-[![](https://img.shields.io/npm/dw/@webiny/app-aco.svg)](https://www.npmjs.com/package/@webiny/app-aco) 
-[![](https://img.shields.io/npm/v/@webiny/app-aco.svg)](https://www.npmjs.com/package/@webiny/app-aco)
-[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
-A set of frontend aco-related utilities.
+> [!NOTE]
+> This package is part of the [Webiny](https://www.webiny.com) monorepo.
+> It’s **included in every Webiny project by default** and is not meant to be used as a standalone package.
 
-## Table of Contents
+📘 **Documentation:** [https://www.webiny.com/docs](https://www.webiny.com/docs)
 
-- [Installation](#installation)
-- [Overview](#overview)
-- [Reference](#reference)
-    - [Components](#components)
-        - [`FoldersProvider`](#FoldersProvider)
-        - [`FolderTree`](#FolderTree)
-        - [`FolderDialogCreate`](#FolderDialogCreate)
-        - [`FolderDialogUpdate`](#FolderDialogUpdate)
-        - [`FolderDialogDelete`](#FolderDialogDelete)
-    - [Hooks](#hooks)
-        - [`useFolder`](#useFolders)
-        - [`useLinks`](#useLinks)
+---
 
-## Installation
-```
-npm install --save @webiny/app-aco
-```
-
-Or if you prefer yarn: 
-```
-yarn add @webiny/app-aco
-```
-
-## Overview
-The `@webiny/app-aco` package contains essential aco-related utilities (Advanced Content Organisation), that can be used within a React app. These include the `FoldersProvider` provider component, the `useFolders` and `useLinks` hooks, which can be used to retrieve the current folder and link information and interact with them.
-
-> ℹ️ **INFO**
->
-> Internally, the [`FoldersProvider`](#FoldersProvider) provider retrieves information from the Webiny's default GraphQL API. Because of this, note that this project relies on [`@webiny/api-aco`](./../api-aco) when it comes to retrieving folders and links information (via GraphQL).
-
-## Reference
-
-### Components
-
-#### `FoldersProvider`
-
-<details>
-<summary>Type Declaration</summary>
-<p>
-
-```tsx
-export declare const FoldersProvider: React.FC;
-```
-
-</p>
-</details>
-
-The [`FoldersProvider`](#FoldersProvider) is a provider component, which retrieves the folders and links information. The component also makes it possible to use the [`useFolders`](#useFolders) and [`useLinks`](#useLinks) hook, which can be used to list, create, update or delete folders and links within the React app.
-
-```tsx
-import React from "react";
-import { FoldersProvider } from "@webiny/app-aco";
-
-export const App = () => {
-  return (
-    <FoldersProvider>
-      <MyApp />
-    </FoldersProvider>
-  );
-};
-```
-
-#### `FolderTree`
-<details>
-<summary>Type Declaration</summary>
-<p>
-
-```tsx
-import { NodeModel } from "@minoru/react-dnd-treeview";
-import { DndItemData } from "~/types";
-
-interface Props {
-    type: string;
-    title: string;
-    onFolderClick: (data: NodeModel<DndItemData>["data"]) => void;
-    onTitleClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    focusedFolderId?: string;
-}
-
-declare function FolderTree(props: Props): React.FC;
-```
-</p>
-</details>
-
-`FolderTree` component shows the tree list of folders for a particular `type`.
-
-```tsx
-import React from "react";
-import { FolderTree } from "@webiny/app-aco";
-
-export const MyComponent = () => {
-    return (
-        <FolderTree
-            type={"page"}
-            title={"All pages"}
-            onFolderClick={item => console.log(item)}
-            onTitleClick={() => console.log("Do whatever you like on title click")}
-            focusedFolderId={"anyExistingId"}
-        />
-    );
-};
-```
-> ℹ️ **INFO**
->
-> Internally, the `FolderTree` uses [react-dnd-treeview](https://www.npmjs.com/package/@minoru/react-dnd-treeview) to render and manage the folder list: DO NOT rely on any of this package features, we might change it in the future.
-
-#### `FolderDialogCreate`
-<details>
-<summary>Type Declaration</summary>
-<p>
-
-```tsx
-import { DialogOnClose } from "@webiny/ui/Dialog";
-
-interface Props {
-    type: string;
-    open: boolean;
-    onClose: DialogOnClose;
-    parentId?: string | null;
-}
-
-declare function FolderDialogCreate(props: Props): React.FC;
-```
-</p>
-</details>
-
-`FolderDialogCreate` component shows a dialog to allow users to create a new folder.
-
-```tsx
-import React, { useState } from "react";
-import { FolderDialogCreate } from "@webiny/app-aco";
-
-export const MyComponent = () => {
-    const [dialogOpen, setDialogOpen] = useState(false);
-    
-    return (
-        <>
-            <button onClick={() => setDialogOpen(true)}>Create folder</button>
-            <FolderDialogCreate
-                type={"page"}
-                open={dialogOpen}
-                onClose={() => setDialogOpen(false)}
-                parentId={"anyParentId"}
-            />
-        </>
-    );
-};
-```
-
-#### `FolderDialogUpdate`
-<details>
-<summary>Type Declaration</summary>
-<p>
-
-```tsx
-import { DialogOnClose } from "@webiny/ui/Dialog";
-
-interface Props {
-    folder: FolderItem;
-    open: boolean;
-    onClose: DialogOnClose;
-}
-
-declare function FolderDialogUpdate(props: Props): React.FC;
-```
-</p>
-</details>
-
-`FolderDialogUpdate` component shows a dialog to allow users to update an existing folder.
-
-```tsx
-import React, { useState } from "react";
-import { FolderDialogUpdate } from "@webiny/app-aco";
-
-type Props = {
-    folder: FolderItem;
-}
-
-export const MyComponent = ({ folder }: Props) => {
-    const [dialogOpen, setDialogOpen] = useState(false);
-    
-    return (
-        <>
-            <button onClick={() => setDialogOpen(true)}>Edit folder</button>
-            <FolderDialogUpdate
-                folder={folder}
-                open={dialogOpen}
-                onClose={() => setDialogOpen(false)}
-            />
-        </>
-    );
-};
-```
-
-#### `FolderDialogDelete`
-<details>
-<summary>Type Declaration</summary>
-<p>
-
-```tsx
-import { DialogOnClose } from "@webiny/ui/Dialog";
-
-interface Props {
-    folder: FolderItem;
-    open: boolean;
-    onClose: DialogOnClose;
-}
-
-declare function FolderDialogDelete(props: Props): React.FC;
-```
-</p>
-</details>
-
-`FolderDialogDelete` component shows a dialog to allow users to delete an existing folder.
-
-```tsx
-import React, { useState } from "react";
-import { FolderDialogDelete } from "@webiny/app-aco";
-
-type Props = {
-    folder: FolderItem;
-}
-
-export const MyComponent = ({ folder }: Props) => {
-    const [dialogOpen, setDialogOpen] = useState(false);
-    
-    return (
-        <>
-            <button onClick={() => setDialogOpen(true)}>Delete folder</button>
-            <FolderDialogDelete
-                folder={folder}
-                open={dialogOpen}
-                onClose={() => setDialogOpen(false)}
-            />
-        </>
-    );
-};
-```
-
-### Hooks
-#### `useFolders`
-<details>
-<summary>Type Declaration</summary>
-<p>
-
-```tsx
-import {FolderItem, FoldersActions} from "./types";
-
-interface UseFoldersHook {
-    folders: FolderItem[];
-    loading: Record<FoldersActions, boolean>;
-    getFolder: (id: string) => Promise<FolderItem>;
-    createFolder: (folder: Omit<FolderItem, "id">) => Promise<FolderItem>;
-    updateFolder: (folder: FolderItem) => Promise<FolderItem>;
-    deleteFolder(folder: FolderItem): Promise<true>;
-}
-
-export declare function useFolders(type: string): UseFoldersHook;
-```
-
-</p>
-</details>
-
-`useFolders` hook allows you to interact with folders state and related APIs while building your custom component.
-
-```tsx
-import React from "react";
-import { useFolders } from "@webiny/app-aco";
-
-export const MyComponent = () => {
-    const { folders } = useFolders("page");
-    
-    if (folders) {
-        return folders.map(folder => {
-            return <span key={folder.id}>{folder.name}</span>;
-        });
-    }
-    
-    return <span>No folders to show</span>;
-};
-```
-
-As you might notice, there is not `listFolders` method available from `useFolders()` hook: this is because on first mount, `listFolders` is called internally, which will either issue a network request, or load folders from cache.
-
-You don't need to store the result of it to any local state; that is managed by the context provider.
-
-#### `useLinks`
-<details>
-<summary>Type Declaration</summary>
-<p>
-
-```tsx
-import { LinkItem, LinksActions } from "./types";
-
-interface UseLinksHook {
-    links: LinkItem[];
-    loading: Record<LinksActions, boolean>;
-    getLink: (id: string, folderId: string) => Promise<LinkItem>;
-    createLink: (link: Omit<LinkItem, "linkId">) => Promise<LinkItem>;
-    updateLink: (link: LinkItem, contextFolderId: string) => Promise<LinkItem>;
-    deleteLink(link: LinkItem): Promise<true>;
-}
-
-export declare function useLinks(folderId: string): UseLinksHook;
-```
-</p>
-</details>
-
-
-`useLinks()` hook allows you to interact with folders links state and related APIs while building your custom component.
-
-```tsx
-import React, { useEffect, useState } from "react";
-import { useLinks } from "@webiny/app-aco";
-
-import { getEntryDetails } from "./any-custom-hook"
-
-export const MyComponent = () => {
-    const { links } = useLinks("anyFolderId");
-    const [entries, setEntries] = useState([]);
-    
-    useEffect(() => {
-        const details = getEntryDetails(links);
-        setEntries(details)
-    }, [links])
-    
-    if (entries) {
-        return entries.map(entry => {
-            return <span key={entry.id}>{entry.name}</span>;
-        });
-    }
-    
-    return <span>No entries to show</span>;
-};
-```
-
-As you might notice, there is not `listLinks` method available from `useLinks()` hook: this is because on first mount, `listLinks` is called internally, which will either issue a network request, or load links from cache.
-
-You don't need to store the result of it to any local state; that is managed by the context provider.
+_This README file is automatically generated during the publish process._

package/app.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const AdvancedContentOrganisation: () => React.JSX.Element;

package/app.js

@@ -0,0 +1,10 @@
+import react from "react";
+import { RegisterFeature } from "@webiny/app-admin";
+import { FolderModelProviderModule } from "./features/folders/folderModelProvider/FolderModelContext.js";
+import { FolderEventsFeature } from "./features/folders/folderEvents/index.js";
+const AdvancedContentOrganisation = ()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FolderModelProviderModule, null), /*#__PURE__*/ react.createElement(RegisterFeature, {
+        feature: FolderEventsFeature
+    }));
+export { AdvancedContentOrganisation };
+
+//# sourceMappingURL=app.js.map

package/app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.js","sources":["../src/app.tsx"],"sourcesContent":["import React from \"react\";\nimport { RegisterFeature } from \"@webiny/app-admin\";\nimport { FolderModelProviderModule } from \"~/features/folders/folderModelProvider/FolderModelContext.js\";\nimport { FolderEventsFeature } from \"~/features/folders/folderEvents/index.js\";\n\nexport const AdvancedContentOrganisation = () => {\n    return (\n        <>\n            <FolderModelProviderModule />\n            <RegisterFeature feature={FolderEventsFeature} />\n        </>\n    );\n};\n"],"names":["AdvancedContentOrganisation","FolderModelProviderModule","RegisterFeature","FolderEventsFeature"],"mappings":";;;;AAKO,MAAMA,8BAA8B,IAChC,WAAP,GACI,wDACI,oBAACC,2BAAyBA,OAAAA,WAAAA,GAC1B,oBAACC,iBAAeA;QAAC,SAASC"}

package/components/Actions/DeleteFolder/DeleteFolder.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const DeleteFolder: () => React.JSX.Element | null;

package/components/Actions/DeleteFolder/DeleteFolder.js

@@ -0,0 +1,28 @@
+import react, { useCallback } from "react";
+import { ReactComponent } from "@webiny/icons/delete.svg";
+import { AcoConfig } from "../../../config/index.js";
+import { useDeleteDialog } from "../../../dialogs/index.js";
+import { useFolder } from "../../../hooks/index.js";
+const DeleteFolder = ()=>{
+    const { folder } = useFolder();
+    const { showDialog } = useDeleteDialog();
+    const { OptionsMenuItem } = AcoConfig.Folder.Action;
+    const onAction = useCallback(()=>{
+        showDialog({
+            folder
+        });
+    }, [
+        folder
+    ]);
+    if (!folder) return null;
+    return /*#__PURE__*/ react.createElement(OptionsMenuItem, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        label: "Delete",
+        onAction: onAction,
+        "data-testid": "aco.actions.folder.delete",
+        variant: "destructive"
+    });
+};
+export { DeleteFolder };
+
+//# sourceMappingURL=DeleteFolder.js.map

package/components/Actions/DeleteFolder/DeleteFolder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/Actions/DeleteFolder/DeleteFolder.js","sources":["../../../../src/components/Actions/DeleteFolder/DeleteFolder.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\n\nimport { AcoConfig } from \"~/config/index.js\";\nimport { useDeleteDialog } from \"~/dialogs/index.js\";\nimport { useFolder } from \"~/hooks/index.js\";\n\nexport const DeleteFolder = () => {\n    const { folder } = useFolder();\n    const { showDialog } = useDeleteDialog();\n    const { OptionsMenuItem } = AcoConfig.Folder.Action;\n\n    const onAction = useCallback(() => {\n        showDialog({\n            folder\n        });\n    }, [folder]);\n\n    if (!folder) {\n        return null;\n    }\n\n    return (\n        <OptionsMenuItem\n            icon={<DeleteIcon />}\n            label={\"Delete\"}\n            onAction={onAction}\n            data-testid={\"aco.actions.folder.delete\"}\n            variant={\"destructive\"}\n        />\n    );\n};\n"],"names":["DeleteFolder","folder","useFolder","showDialog","useDeleteDialog","OptionsMenuItem","AcoConfig","onAction","useCallback","DeleteIcon"],"mappings":";;;;;AAOO,MAAMA,eAAe;IACxB,MAAM,EAAEC,MAAM,EAAE,GAAGC;IACnB,MAAM,EAAEC,UAAU,EAAE,GAAGC;IACvB,MAAM,EAAEC,eAAe,EAAE,GAAGC,UAAU,MAAM,CAAC,MAAM;IAEnD,MAAMC,WAAWC,YAAY;QACzBL,WAAW;YACPF;QACJ;IACJ,GAAG;QAACA;KAAO;IAEX,IAAI,CAACA,QACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAACI,iBAAAA;QACG,oBAAM,oBAACI,gBAAUA;QACjB,OAAO;QACP,UAAUF;QACV,eAAa;QACb,SAAS;;AAGrB"}

package/components/Actions/DeleteFolder/index.d.ts

@@ -0,0 +1 @@
+export * from "./DeleteFolder.js";

package/components/Actions/DeleteFolder/index.js

@@ -0,0 +1 @@
+export * from "./DeleteFolder.js";

package/components/Actions/EditFolder/EditFolder.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const EditFolder: () => React.JSX.Element | null;

package/components/Actions/EditFolder/EditFolder.js

@@ -0,0 +1,27 @@
+import react, { useCallback } from "react";
+import { ReactComponent } from "@webiny/icons/edit.svg";
+import { AcoConfig } from "../../../config/index.js";
+import { useEditDialog } from "../../../dialogs/index.js";
+import { useFolder } from "../../../hooks/index.js";
+const EditFolder = ()=>{
+    const { folder } = useFolder();
+    const { showDialog } = useEditDialog();
+    const { OptionsMenuItem } = AcoConfig.Folder.Action;
+    const onAction = useCallback(()=>{
+        showDialog({
+            folder
+        });
+    }, [
+        folder
+    ]);
+    if (!folder) return null;
+    return /*#__PURE__*/ react.createElement(OptionsMenuItem, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        label: "Edit",
+        onAction: onAction,
+        "data-testid": "aco.actions.folder.edit"
+    });
+};
+export { EditFolder };
+
+//# sourceMappingURL=EditFolder.js.map

package/components/Actions/EditFolder/EditFolder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/Actions/EditFolder/EditFolder.js","sources":["../../../../src/components/Actions/EditFolder/EditFolder.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { ReactComponent as Edit } from \"@webiny/icons/edit.svg\";\n\nimport { AcoConfig } from \"~/config/index.js\";\nimport { useEditDialog } from \"~/dialogs/index.js\";\nimport { useFolder } from \"~/hooks/index.js\";\n\nexport const EditFolder = () => {\n    const { folder } = useFolder();\n    const { showDialog } = useEditDialog();\n    const { OptionsMenuItem } = AcoConfig.Folder.Action;\n\n    const onAction = useCallback(() => {\n        showDialog({\n            folder\n        });\n    }, [folder]);\n\n    if (!folder) {\n        return null;\n    }\n\n    return (\n        <OptionsMenuItem\n            icon={<Edit />}\n            label={\"Edit\"}\n            onAction={onAction}\n            data-testid={\"aco.actions.folder.edit\"}\n        />\n    );\n};\n"],"names":["EditFolder","folder","useFolder","showDialog","useEditDialog","OptionsMenuItem","AcoConfig","onAction","useCallback","Edit"],"mappings":";;;;;AAOO,MAAMA,aAAa;IACtB,MAAM,EAAEC,MAAM,EAAE,GAAGC;IACnB,MAAM,EAAEC,UAAU,EAAE,GAAGC;IACvB,MAAM,EAAEC,eAAe,EAAE,GAAGC,UAAU,MAAM,CAAC,MAAM;IAEnD,MAAMC,WAAWC,YAAY;QACzBL,WAAW;YACPF;QACJ;IACJ,GAAG;QAACA;KAAO;IAEX,IAAI,CAACA,QACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAACI,iBAAAA;QACG,oBAAM,oBAACI,gBAAIA;QACX,OAAO;QACP,UAAUF;QACV,eAAa;;AAGzB"}

package/components/Actions/EditFolder/index.d.ts

@@ -0,0 +1 @@
+export * from "./EditFolder.js";

package/components/Actions/EditFolder/index.js

@@ -0,0 +1 @@
+export * from "./EditFolder.js";

package/components/Actions/SetFolderPemissions/SetFolderPermissions.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const SetFolderPermissions: () => React.JSX.Element | null;

package/components/Actions/SetFolderPemissions/SetFolderPermissions.js

@@ -0,0 +1,27 @@
+import react, { useCallback } from "react";
+import { ReactComponent } from "@webiny/icons/add_moderator.svg";
+import { AcoConfig } from "../../../config/index.js";
+import { useSetPermissionsDialog } from "../../../dialogs/index.js";
+import { useFolder } from "../../../hooks/index.js";
+const SetFolderPermissions = ()=>{
+    const { folder } = useFolder();
+    const { showDialog } = useSetPermissionsDialog();
+    const { OptionsMenuItem } = AcoConfig.Folder.Action;
+    const onAction = useCallback(()=>{
+        showDialog({
+            folder
+        });
+    }, [
+        folder
+    ]);
+    if (!folder || !folder.canManagePermissions) return null;
+    return /*#__PURE__*/ react.createElement(OptionsMenuItem, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        label: "Manage Permissions",
+        onAction: onAction,
+        "data-testid": "aco.actions.folder.setPermissions"
+    });
+};
+export { SetFolderPermissions };
+
+//# sourceMappingURL=SetFolderPermissions.js.map

package/components/Actions/SetFolderPemissions/SetFolderPermissions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/Actions/SetFolderPemissions/SetFolderPermissions.js","sources":["../../../../src/components/Actions/SetFolderPemissions/SetFolderPermissions.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { ReactComponent as Security } from \"@webiny/icons/add_moderator.svg\";\n\nimport { AcoConfig } from \"~/config/index.js\";\nimport { useSetPermissionsDialog } from \"~/dialogs/index.js\";\nimport { useFolder } from \"~/hooks/index.js\";\n\nexport const SetFolderPermissions = () => {\n    const { folder } = useFolder();\n    const { showDialog } = useSetPermissionsDialog();\n    const { OptionsMenuItem } = AcoConfig.Folder.Action;\n\n    const onAction = useCallback(() => {\n        showDialog({\n            folder\n        });\n    }, [folder]);\n\n    if (!folder || !folder.canManagePermissions) {\n        return null;\n    }\n\n    return (\n        <OptionsMenuItem\n            icon={<Security />}\n            label={\"Manage Permissions\"}\n            onAction={onAction}\n            data-testid={\"aco.actions.folder.setPermissions\"}\n        />\n    );\n};\n"],"names":["SetFolderPermissions","folder","useFolder","showDialog","useSetPermissionsDialog","OptionsMenuItem","AcoConfig","onAction","useCallback","Security"],"mappings":";;;;;AAOO,MAAMA,uBAAuB;IAChC,MAAM,EAAEC,MAAM,EAAE,GAAGC;IACnB,MAAM,EAAEC,UAAU,EAAE,GAAGC;IACvB,MAAM,EAAEC,eAAe,EAAE,GAAGC,UAAU,MAAM,CAAC,MAAM;IAEnD,MAAMC,WAAWC,YAAY;QACzBL,WAAW;YACPF;QACJ;IACJ,GAAG;QAACA;KAAO;IAEX,IAAI,CAACA,UAAU,CAACA,OAAO,oBAAoB,EACvC,OAAO;IAGX,OAAO,WAAP,GACI,oBAACI,iBAAAA;QACG,oBAAM,oBAACI,gBAAQA;QACf,OAAO;QACP,UAAUF;QACV,eAAa;;AAGzB"}

package/components/Actions/SetFolderPemissions/index.d.ts

@@ -0,0 +1 @@
+export * from "./SetFolderPermissions.js";

package/components/Actions/SetFolderPemissions/index.js

@@ -0,0 +1 @@
+export * from "./SetFolderPermissions.js";

package/components/Actions/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./DeleteFolder/index.js";
+export * from "./EditFolder/index.js";
+export * from "./SetFolderPemissions/index.js";

package/components/Actions/index.js

@@ -0,0 +1,3 @@
+export * from "./DeleteFolder/index.js";
+export * from "./EditFolder/index.js";
+export * from "./SetFolderPemissions/index.js";

package/components/AdvancedSearch/AdvancedSearch.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { FieldDTOWithElement, FilterDTO, FilterRepository } from "./domain/index.js";
+export interface AdvancedSearchProps {
+    fields: FieldDTOWithElement[];
+    repository: FilterRepository;
+    onApplyFilter: (data: FilterDTO | null) => void;
+}
+export declare const AdvancedSearch: (({ fields, repository, onApplyFilter }: AdvancedSearchProps) => React.JSX.Element) & React.NamedExoticComponent<AdvancedSearchProps> & {
+    readonly type: ({ fields, repository, onApplyFilter }: AdvancedSearchProps) => React.JSX.Element;
+};

package/components/AdvancedSearch/AdvancedSearch.js

@@ -0,0 +1,78 @@
+import react, { useEffect, useMemo } from "react";
+import { observer } from "mobx-react-lite";
+import { useToast } from "@webiny/admin-ui";
+import { AdvancedSearchPresenter } from "./AdvancedSearchPresenter.js";
+import { Button } from "./Button/index.js";
+import { QueryManagerDialog } from "./QueryManagerDialog/index.js";
+import { QueryBuilderDrawer } from "./QueryBuilderDrawer/index.js";
+import { QuerySaverDialog } from "./QuerySaverDialog/index.js";
+import { SelectedFilter } from "./SelectedFilter/index.js";
+const AdvancedSearch = observer(({ fields, repository, onApplyFilter })=>{
+    const { showToast } = useToast();
+    const presenter = useMemo(()=>new AdvancedSearchPresenter(repository), [
+        repository
+    ]);
+    useEffect(()=>{
+        presenter.load();
+    }, []);
+    const applyFilter = async (filter)=>{
+        await presenter.applyFilter(filter);
+        if (presenter.vm.appliedFilter) onApplyFilter(presenter.vm.appliedFilter);
+    };
+    const unsetFilter = ()=>{
+        if (presenter.vm.appliedFilter) {
+            presenter.unsetFilter();
+            onApplyFilter(null);
+        }
+    };
+    const deleteFilter = async (filterId)=>{
+        await presenter.deleteFilter(filterId);
+        if (filterId === presenter.vm.appliedFilter?.id) unsetFilter();
+    };
+    const persistAndApplyFilter = async (filter)=>{
+        await presenter.persistFilter(filter);
+        onApplyFilter(filter);
+    };
+    useEffect(()=>{
+        if (presenter.vm.feedbackVm.isOpen) showToast({
+            title: presenter.vm.feedbackVm.message
+        });
+    }, [
+        presenter.vm.feedbackVm.isOpen,
+        presenter.vm.feedbackVm.message
+    ]);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-row-reverse justify-between items-center gap-sm min-w-0"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        onClick: ()=>presenter.openManager()
+    }), presenter.vm.appliedFilter ? /*#__PURE__*/ react.createElement(SelectedFilter, {
+        filter: presenter.vm.appliedFilter,
+        onEdit: ()=>presenter.editAppliedFilter(),
+        onDelete: unsetFilter
+    }) : null), /*#__PURE__*/ react.createElement(QueryManagerDialog, {
+        onClose: ()=>presenter.closeManager(),
+        onCreate: ()=>presenter.createFilter(),
+        onEdit: (filterId)=>presenter.editFilter(filterId),
+        onRename: (filterId)=>presenter.renameFilter(filterId),
+        onClone: (filterId)=>presenter.cloneFilter(filterId),
+        onDelete: deleteFilter,
+        onSelect: applyFilter,
+        vm: presenter.vm.managerVm
+    }), presenter.vm.currentFilter ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(QueryBuilderDrawer, {
+        fields: fields,
+        onClose: ()=>presenter.closeBuilder(),
+        onSave: (filter)=>presenter.saveFilter(filter),
+        onApply: applyFilter,
+        onValidationError: (message)=>presenter.showFeedback(message),
+        filter: presenter.vm.currentFilter,
+        vm: presenter.vm.builderVm
+    }), /*#__PURE__*/ react.createElement(QuerySaverDialog, {
+        onSave: persistAndApplyFilter,
+        onClose: ()=>presenter.closeSaver(),
+        filter: presenter.vm.currentFilter,
+        vm: presenter.vm.saverVm
+    })) : null);
+});
+export { AdvancedSearch };
+
+//# sourceMappingURL=AdvancedSearch.js.map

package/components/AdvancedSearch/AdvancedSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/AdvancedSearch/AdvancedSearch.js","sources":["../../../src/components/AdvancedSearch/AdvancedSearch.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useToast } from \"@webiny/admin-ui\";\n\nimport type { FieldDTOWithElement, FilterDTO, FilterRepository } from \"./domain/index.js\";\n\nimport { AdvancedSearchPresenter } from \"./AdvancedSearchPresenter.js\";\n\nimport { Button } from \"./Button/index.js\";\nimport { QueryManagerDialog } from \"./QueryManagerDialog/index.js\";\nimport { QueryBuilderDrawer } from \"./QueryBuilderDrawer/index.js\";\nimport { QuerySaverDialog } from \"./QuerySaverDialog/index.js\";\nimport { SelectedFilter } from \"./SelectedFilter/index.js\";\n\nexport interface AdvancedSearchProps {\n    fields: FieldDTOWithElement[];\n    repository: FilterRepository;\n    onApplyFilter: (data: FilterDTO | null) => void;\n}\n\nexport const AdvancedSearch = observer(\n    ({ fields, repository, onApplyFilter }: AdvancedSearchProps) => {\n        const { showToast } = useToast();\n\n        const presenter = useMemo<AdvancedSearchPresenter>(() => {\n            return new AdvancedSearchPresenter(repository);\n        }, [repository]);\n\n        useEffect(() => {\n            presenter.load();\n        }, []);\n\n        const applyFilter = async (filter: string | FilterDTO) => {\n            await presenter.applyFilter(filter);\n            if (presenter.vm.appliedFilter) {\n                onApplyFilter(presenter.vm.appliedFilter);\n            }\n        };\n\n        const unsetFilter = () => {\n            if (presenter.vm.appliedFilter) {\n                presenter.unsetFilter();\n                onApplyFilter(null);\n            }\n        };\n\n        const deleteFilter = async (filterId: string) => {\n            await presenter.deleteFilter(filterId);\n            if (filterId === presenter.vm.appliedFilter?.id) {\n                unsetFilter();\n            }\n        };\n\n        const persistAndApplyFilter = async (filter: FilterDTO) => {\n            await presenter.persistFilter(filter);\n            onApplyFilter(filter);\n        };\n\n        useEffect(() => {\n            if (presenter.vm.feedbackVm.isOpen) {\n                showToast({\n                    title: presenter.vm.feedbackVm.message\n                });\n            }\n        }, [presenter.vm.feedbackVm.isOpen, presenter.vm.feedbackVm.message]);\n\n        return (\n            <>\n                <div\n                    className={\"flex flex-row-reverse justify-between items-center gap-sm min-w-0\"}\n                >\n                    <Button onClick={() => presenter.openManager()} />\n                    {presenter.vm.appliedFilter ? (\n                        <SelectedFilter\n                            filter={presenter.vm.appliedFilter}\n                            onEdit={() => presenter.editAppliedFilter()}\n                            onDelete={unsetFilter}\n                        />\n                    ) : null}\n                </div>\n                <QueryManagerDialog\n                    onClose={() => presenter.closeManager()}\n                    onCreate={() => presenter.createFilter()}\n                    onEdit={filterId => presenter.editFilter(filterId)}\n                    onRename={filterId => presenter.renameFilter(filterId)}\n                    onClone={filterId => presenter.cloneFilter(filterId)}\n                    onDelete={deleteFilter}\n                    onSelect={applyFilter}\n                    vm={presenter.vm.managerVm}\n                />\n                {presenter.vm.currentFilter ? (\n                    <>\n                        <QueryBuilderDrawer\n                            fields={fields}\n                            onClose={() => presenter.closeBuilder()}\n                            onSave={filter => presenter.saveFilter(filter)}\n                            onApply={applyFilter}\n                            onValidationError={message => presenter.showFeedback(message)}\n                            filter={presenter.vm.currentFilter}\n                            vm={presenter.vm.builderVm}\n                        />\n                        <QuerySaverDialog\n                            onSave={persistAndApplyFilter}\n                            onClose={() => presenter.closeSaver()}\n                            filter={presenter.vm.currentFilter}\n                            vm={presenter.vm.saverVm}\n                        />\n                    </>\n                ) : null}\n            </>\n        );\n    }\n);\n"],"names":["AdvancedSearch","observer","fields","repository","onApplyFilter","showToast","useToast","presenter","useMemo","AdvancedSearchPresenter","useEffect","applyFilter","filter","unsetFilter","deleteFilter","filterId","persistAndApplyFilter","Button","SelectedFilter","QueryManagerDialog","QueryBuilderDrawer","message","QuerySaverDialog"],"mappings":";;;;;;;;;AAoBO,MAAMA,iBAAiBC,SAC1B,CAAC,EAAEC,MAAM,EAAEC,UAAU,EAAEC,aAAa,EAAuB;IACvD,MAAM,EAAEC,SAAS,EAAE,GAAGC;IAEtB,MAAMC,YAAYC,QAAiC,IACxC,IAAIC,wBAAwBN,aACpC;QAACA;KAAW;IAEfO,UAAU;QACNH,UAAU,IAAI;IAClB,GAAG,EAAE;IAEL,MAAMI,cAAc,OAAOC;QACvB,MAAML,UAAU,WAAW,CAACK;QAC5B,IAAIL,UAAU,EAAE,CAAC,aAAa,EAC1BH,cAAcG,UAAU,EAAE,CAAC,aAAa;IAEhD;IAEA,MAAMM,cAAc;QAChB,IAAIN,UAAU,EAAE,CAAC,aAAa,EAAE;YAC5BA,UAAU,WAAW;YACrBH,cAAc;QAClB;IACJ;IAEA,MAAMU,eAAe,OAAOC;QACxB,MAAMR,UAAU,YAAY,CAACQ;QAC7B,IAAIA,aAAaR,UAAU,EAAE,CAAC,aAAa,EAAE,IACzCM;IAER;IAEA,MAAMG,wBAAwB,OAAOJ;QACjC,MAAML,UAAU,aAAa,CAACK;QAC9BR,cAAcQ;IAClB;IAEAF,UAAU;QACN,IAAIH,UAAU,EAAE,CAAC,UAAU,CAAC,MAAM,EAC9BF,UAAU;YACN,OAAOE,UAAU,EAAE,CAAC,UAAU,CAAC,OAAO;QAC1C;IAER,GAAG;QAACA,UAAU,EAAE,CAAC,UAAU,CAAC,MAAM;QAAEA,UAAU,EAAE,CAAC,UAAU,CAAC,OAAO;KAAC;IAEpE,OAAO,WAAP,GACI,wDACI,oBAAC;QACG,WAAW;qBAEX,oBAACU,QAAMA;QAAC,SAAS,IAAMV,UAAU,WAAW;QAC3CA,UAAU,EAAE,CAAC,aAAa,GAAG,WAAH,GACvB,oBAACW,gBAAcA;QACX,QAAQX,UAAU,EAAE,CAAC,aAAa;QAClC,QAAQ,IAAMA,UAAU,iBAAiB;QACzC,UAAUM;SAEd,qBAER,oBAACM,oBAAkBA;QACf,SAAS,IAAMZ,UAAU,YAAY;QACrC,UAAU,IAAMA,UAAU,YAAY;QACtC,QAAQQ,CAAAA,WAAYR,UAAU,UAAU,CAACQ;QACzC,UAAUA,CAAAA,WAAYR,UAAU,YAAY,CAACQ;QAC7C,SAASA,CAAAA,WAAYR,UAAU,WAAW,CAACQ;QAC3C,UAAUD;QACV,UAAUH;QACV,IAAIJ,UAAU,EAAE,CAAC,SAAS;QAE7BA,UAAU,EAAE,CAAC,aAAa,GAAG,WAAH,GACvB,wDACI,oBAACa,oBAAkBA;QACf,QAAQlB;QACR,SAAS,IAAMK,UAAU,YAAY;QACrC,QAAQK,CAAAA,SAAUL,UAAU,UAAU,CAACK;QACvC,SAASD;QACT,mBAAmBU,CAAAA,UAAWd,UAAU,YAAY,CAACc;QACrD,QAAQd,UAAU,EAAE,CAAC,aAAa;QAClC,IAAIA,UAAU,EAAE,CAAC,SAAS;sBAE9B,oBAACe,kBAAgBA;QACb,QAAQN;QACR,SAAS,IAAMT,UAAU,UAAU;QACnC,QAAQA,UAAU,EAAE,CAAC,aAAa;QAClC,IAAIA,UAAU,EAAE,CAAC,OAAO;UAGhC;AAGhB"}

package/components/AdvancedSearch/AdvancedSearchConfigs.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const AdvancedSearchConfigs: React.MemoExoticComponent<() => React.JSX.Element>;