@webiny/app-admin 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.eb81deee7e

package/components/Table/components/Table/Columns/ColumnsRepository.js

@@ -0,0 +1,19 @@
+import { makeAutoObservable } from "mobx";
+class ColumnsRepository {
+    constructor(columns){
+        this.columns = columns;
+        makeAutoObservable(this);
+    }
+    getColumns() {
+        return this.sortColumns(this.columns);
+    }
+    init() {
+        return Promise.resolve();
+    }
+    sortColumns(columns) {
+        return columns.slice().sort((a, b)=>"actions" === a.name ? 1 : "actions" === b.name ? -1 : 0);
+    }
+}
+export { ColumnsRepository };
+
+//# sourceMappingURL=ColumnsRepository.js.map

package/components/Table/components/Table/Columns/ColumnsRepository.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/Table/components/Table/Columns/ColumnsRepository.js","sources":["../../../../../../src/components/Table/components/Table/Columns/ColumnsRepository.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport type { ColumnDTO } from \"./Column.js\";\nimport type { IColumnsRepository } from \"./IColumnsRepository.js\";\n\nexport class ColumnsRepository implements IColumnsRepository {\n    private readonly columns: ColumnDTO[];\n\n    constructor(columns: ColumnDTO[]) {\n        this.columns = columns;\n        makeAutoObservable(this);\n    }\n\n    getColumns(): ColumnDTO[] {\n        return this.sortColumns(this.columns);\n    }\n\n    init(): Promise<void> {\n        return Promise.resolve();\n    }\n\n    private sortColumns(columns: ColumnDTO[]) {\n        return columns\n            .slice()\n            .sort((a, b) => (a.name === \"actions\" ? 1 : b.name === \"actions\" ? -1 : 0));\n    }\n}\n"],"names":["ColumnsRepository","columns","makeAutoObservable","Promise","a","b"],"mappings":";AAIO,MAAMA;IAGT,YAAYC,OAAoB,CAAE;QAC9B,IAAI,CAAC,OAAO,GAAGA;QACfC,mBAAmB,IAAI;IAC3B;IAEA,aAA0B;QACtB,OAAO,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO;IACxC;IAEA,OAAsB;QAClB,OAAOC,QAAQ,OAAO;IAC1B;IAEQ,YAAYF,OAAoB,EAAE;QACtC,OAAOA,QACF,KAAK,GACL,IAAI,CAAC,CAACG,GAAGC,IAAOD,AAAW,cAAXA,EAAE,IAAI,GAAiB,IAAIC,AAAW,cAAXA,EAAE,IAAI,GAAiB,KAAK;IAChF;AACJ"}

package/components/Table/components/Table/Columns/ColumnsRepositoryFactory.d.ts

@@ -0,0 +1,9 @@
+import { ColumnsRepository } from "./ColumnsRepository.js";
+import type { ColumnDTO } from "./Column.js";
+declare class ColumnsRepositoryFactory {
+    private cache;
+    getRepository(namespace: string, columns: ColumnDTO[]): ColumnsRepository;
+    private getCacheKey;
+}
+export declare const columnsRepositoryFactory: ColumnsRepositoryFactory;
+export {};

package/components/Table/components/Table/Columns/ColumnsRepositoryFactory.js

@@ -0,0 +1,21 @@
+import { ColumnsRepository } from "./ColumnsRepository.js";
+class ColumnsRepositoryFactory {
+    getRepository(namespace, columns) {
+        const cacheKey = this.getCacheKey(namespace, columns);
+        if (!this.cache.has(cacheKey)) this.cache.set(cacheKey, new ColumnsRepository(columns));
+        return this.cache.get(cacheKey);
+    }
+    getCacheKey(namespace, columns) {
+        return [
+            namespace,
+            ...columns.map((column)=>column.name)
+        ].join("#");
+    }
+    constructor(){
+        this.cache = new Map();
+    }
+}
+const columnsRepositoryFactory = new ColumnsRepositoryFactory();
+export { columnsRepositoryFactory };
+
+//# sourceMappingURL=ColumnsRepositoryFactory.js.map

package/components/Table/components/Table/Columns/ColumnsRepositoryFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/Table/components/Table/Columns/ColumnsRepositoryFactory.js","sources":["../../../../../../src/components/Table/components/Table/Columns/ColumnsRepositoryFactory.ts"],"sourcesContent":["import { ColumnsRepository } from \"./ColumnsRepository.js\";\nimport type { ColumnDTO } from \"./Column.js\";\n\nclass ColumnsRepositoryFactory {\n    private cache: Map<string, ColumnsRepository> = new Map();\n\n    getRepository(namespace: string, columns: ColumnDTO[]) {\n        const cacheKey = this.getCacheKey(namespace, columns);\n\n        if (!this.cache.has(cacheKey)) {\n            this.cache.set(cacheKey, new ColumnsRepository(columns));\n        }\n\n        return this.cache.get(cacheKey) as ColumnsRepository;\n    }\n\n    private getCacheKey(namespace: string, columns: ColumnDTO[]) {\n        return [namespace, ...columns.map(column => column.name)].join(\"#\");\n    }\n}\n\nexport const columnsRepositoryFactory = new ColumnsRepositoryFactory();\n"],"names":["ColumnsRepositoryFactory","namespace","columns","cacheKey","ColumnsRepository","column","Map","columnsRepositoryFactory"],"mappings":";AAGA,MAAMA;IAGF,cAAcC,SAAiB,EAAEC,OAAoB,EAAE;QACnD,MAAMC,WAAW,IAAI,CAAC,WAAW,CAACF,WAAWC;QAE7C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAACC,WAChB,IAAI,CAAC,KAAK,CAAC,GAAG,CAACA,UAAU,IAAIC,kBAAkBF;QAGnD,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAACC;IAC1B;IAEQ,YAAYF,SAAiB,EAAEC,OAAoB,EAAE;QACzD,OAAO;YAACD;eAAcC,QAAQ,GAAG,CAACG,CAAAA,SAAUA,OAAO,IAAI;SAAE,CAAC,IAAI,CAAC;IACnE;;aAdQ,KAAK,GAAmC,IAAIC;;AAexD;AAEO,MAAMC,2BAA2B,IAAIP"}

package/components/Table/components/Table/Columns/IColumnsRepository.d.ts

@@ -0,0 +1,5 @@
+import type { ColumnDTO } from "./Column.js";
+export interface IColumnsRepository {
+    init(): Promise<void>;
+    getColumns(): ColumnDTO[];
+}

package/components/Table/components/Table/Columns/index.d.ts

@@ -0,0 +1,6 @@
+export type * from "./IColumnsRepository.js";
+export * from "./Column.js";
+export * from "./ColumnMapper.js";
+export * from "./ColumnsPresenter.js";
+export * from "./ColumnsRepository.js";
+export * from "./ColumnsRepositoryFactory.js";

package/components/Table/components/Table/Columns/index.js

@@ -0,0 +1,5 @@
+export * from "./Column.js";
+export * from "./ColumnMapper.js";
+export * from "./ColumnsPresenter.js";
+export * from "./ColumnsRepository.js";
+export * from "./ColumnsRepositoryFactory.js";

package/components/Table/components/Table/Table.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { DataTableSorting, OnDataTableSortingChange } from "@webiny/admin-ui";
+import type { TableRow } from "../../table.types.js";
+import { ColumnConfig } from "../../../../config/table/Column.js";
+export interface TableProps<T> {
+    columns: ColumnConfig[];
+    data: T[];
+    loading?: boolean;
+    nameColumnId?: string;
+    namespace: string;
+    onSelectRow?: (rows: T[] | []) => void;
+    onSortingChange: OnDataTableSortingChange;
+    onToggleRow?: (row: T) => void;
+    selected: TableRow[];
+    sorting: DataTableSorting;
+}
+export declare const Table: <T extends TableRow>({ columns, namespace, ...props }: TableProps<T>) => React.JSX.Element;

package/components/Table/components/Table/Table.js

@@ -0,0 +1,47 @@
+import react, { useEffect, useMemo } from "react";
+import { Column, ColumnsPresenter, columnsRepositoryFactory } from "./Columns/index.js";
+import { ColumnsVisibilityDecorator, ColumnsVisibilityPresenter, ColumnsVisibilityUpdater, columnsVisibilityRepositoryFactory } from "./ColumnVisibility/index.js";
+import { ColumnsVisibilityLocalStorageGateway } from "./gateways/index.js";
+import { TablePresenter } from "./TablePresenter.js";
+import { TableInner } from "./TableInner.js";
+import { useLocalStorage } from "@webiny/app";
+const Table = ({ columns, namespace, ...props })=>{
+    const localStorage = useLocalStorage();
+    const columnsRepo = useMemo(()=>columnsRepositoryFactory.getRepository(namespace, columns.map((column)=>Column.createFromConfig(column))), [
+        namespace,
+        columns
+    ]);
+    const visibilityRepo = useMemo(()=>{
+        const columnsVisibilityLocalStorage = new ColumnsVisibilityLocalStorageGateway(localStorage, namespace);
+        return columnsVisibilityRepositoryFactory.getRepository(namespace, columnsVisibilityLocalStorage);
+    }, [
+        namespace
+    ]);
+    const repo = useMemo(()=>new ColumnsVisibilityDecorator(visibilityRepo, columnsRepo), [
+        visibilityRepo,
+        columnsRepo
+    ]);
+    const columnsVisibilityUpdater = new ColumnsVisibilityUpdater(visibilityRepo);
+    const columnsPresenter = useMemo(()=>new ColumnsPresenter(repo), [
+        repo
+    ]);
+    const columnsVisibilityPresenter = useMemo(()=>new ColumnsVisibilityPresenter(columnsPresenter), [
+        columnsPresenter
+    ]);
+    const tablePresenter = useMemo(()=>new TablePresenter(), []);
+    useEffect(()=>{
+        columnsPresenter.init();
+    }, [
+        columnsPresenter
+    ]);
+    return /*#__PURE__*/ react.createElement(TableInner, {
+        ...props,
+        columnsPresenter: columnsPresenter,
+        columnsVisibilityPresenter: columnsVisibilityPresenter,
+        tablePresenter: tablePresenter,
+        columnsVisibilityUpdater: columnsVisibilityUpdater
+    });
+};
+export { Table };
+
+//# sourceMappingURL=Table.js.map

package/components/Table/components/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/Table/components/Table/Table.js","sources":["../../../../../src/components/Table/components/Table/Table.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport type { DataTableSorting, OnDataTableSortingChange } from \"@webiny/admin-ui\";\nimport { Column, ColumnsPresenter, columnsRepositoryFactory } from \"./Columns/index.js\";\nimport {\n    ColumnsVisibilityDecorator,\n    ColumnsVisibilityPresenter,\n    ColumnsVisibilityUpdater,\n    columnsVisibilityRepositoryFactory\n} from \"./ColumnVisibility/index.js\";\nimport { ColumnsVisibilityLocalStorageGateway } from \"./gateways/index.js\";\nimport { TablePresenter } from \"./TablePresenter.js\";\nimport { TableInner } from \"./TableInner.js\";\nimport type { TableRow } from \"../../table.types.js\";\nimport { ColumnConfig } from \"~/config/table/Column.js\";\nimport { useLocalStorage } from \"@webiny/app\";\n\nexport interface TableProps<T> {\n    columns: ColumnConfig[];\n    data: T[];\n    loading?: boolean;\n    nameColumnId?: string;\n    namespace: string;\n    onSelectRow?: (rows: T[] | []) => void;\n    onSortingChange: OnDataTableSortingChange;\n    onToggleRow?: (row: T) => void;\n    selected: TableRow[];\n    sorting: DataTableSorting;\n}\n\nexport const Table = <T extends TableRow>({ columns, namespace, ...props }: TableProps<T>) => {\n    const localStorage = useLocalStorage();\n\n    const columnsRepo = useMemo(() => {\n        return columnsRepositoryFactory.getRepository(\n            namespace,\n            columns.map(column => Column.createFromConfig(column))\n        );\n    }, [namespace, columns]);\n\n    const visibilityRepo = useMemo(() => {\n        const columnsVisibilityLocalStorage = new ColumnsVisibilityLocalStorageGateway(\n            localStorage,\n            namespace\n        );\n\n        return columnsVisibilityRepositoryFactory.getRepository(\n            namespace,\n            columnsVisibilityLocalStorage\n        );\n    }, [namespace]);\n\n    const repo = useMemo(() => {\n        return new ColumnsVisibilityDecorator(visibilityRepo, columnsRepo);\n    }, [visibilityRepo, columnsRepo]);\n\n    const columnsVisibilityUpdater = new ColumnsVisibilityUpdater(visibilityRepo);\n\n    const columnsPresenter = useMemo(() => new ColumnsPresenter(repo), [repo]);\n\n    const columnsVisibilityPresenter = useMemo(\n        () => new ColumnsVisibilityPresenter(columnsPresenter),\n        [columnsPresenter]\n    );\n\n    const tablePresenter = useMemo<TablePresenter>(() => {\n        return new TablePresenter();\n    }, []);\n\n    useEffect(() => {\n        columnsPresenter.init();\n    }, [columnsPresenter]);\n\n    return (\n        <TableInner\n            {...props}\n            columnsPresenter={columnsPresenter}\n            columnsVisibilityPresenter={columnsVisibilityPresenter}\n            tablePresenter={tablePresenter}\n            columnsVisibilityUpdater={columnsVisibilityUpdater}\n        />\n    );\n};\n"],"names":["Table","columns","namespace","props","localStorage","useLocalStorage","columnsRepo","useMemo","columnsRepositoryFactory","column","Column","visibilityRepo","columnsVisibilityLocalStorage","ColumnsVisibilityLocalStorageGateway","columnsVisibilityRepositoryFactory","repo","ColumnsVisibilityDecorator","columnsVisibilityUpdater","ColumnsVisibilityUpdater","columnsPresenter","ColumnsPresenter","columnsVisibilityPresenter","ColumnsVisibilityPresenter","tablePresenter","TablePresenter","useEffect","TableInner"],"mappings":";;;;;;;AA6BO,MAAMA,QAAQ,CAAqB,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGC,OAAsB;IACrF,MAAMC,eAAeC;IAErB,MAAMC,cAAcC,QAAQ,IACjBC,yBAAyB,aAAa,CACzCN,WACAD,QAAQ,GAAG,CAACQ,CAAAA,SAAUC,OAAO,gBAAgB,CAACD,WAEnD;QAACP;QAAWD;KAAQ;IAEvB,MAAMU,iBAAiBJ,QAAQ;QAC3B,MAAMK,gCAAgC,IAAIC,qCACtCT,cACAF;QAGJ,OAAOY,mCAAmC,aAAa,CACnDZ,WACAU;IAER,GAAG;QAACV;KAAU;IAEd,MAAMa,OAAOR,QAAQ,IACV,IAAIS,2BAA2BL,gBAAgBL,cACvD;QAACK;QAAgBL;KAAY;IAEhC,MAAMW,2BAA2B,IAAIC,yBAAyBP;IAE9D,MAAMQ,mBAAmBZ,QAAQ,IAAM,IAAIa,iBAAiBL,OAAO;QAACA;KAAK;IAEzE,MAAMM,6BAA6Bd,QAC/B,IAAM,IAAIe,2BAA2BH,mBACrC;QAACA;KAAiB;IAGtB,MAAMI,iBAAiBhB,QAAwB,IACpC,IAAIiB,kBACZ,EAAE;IAELC,UAAU;QACNN,iBAAiB,IAAI;IACzB,GAAG;QAACA;KAAiB;IAErB,OAAO,WAAP,GACI,oBAACO,YAAUA;QACN,GAAGvB,KAAK;QACT,kBAAkBgB;QAClB,4BAA4BE;QAC5B,gBAAgBE;QAChB,0BAA0BN;;AAGtC"}

package/components/Table/components/Table/TableInner.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import type { OnDataTableSortingChange } from "@webiny/admin-ui";
+import { type DataTableDefaultData, type DataTableSorting } from "@webiny/admin-ui";
+import type { ColumnsPresenter } from "./Columns/index.js";
+import type { ColumnsVisibilityPresenter, ColumnsVisibilityUpdater } from "./ColumnVisibility/index.js";
+import type { TablePresenter } from "./TablePresenter.js";
+import type { TableRow } from "../../table.types.js";
+export interface TableInnerProps<T extends TableRow> {
+    columnsPresenter: ColumnsPresenter;
+    columnsVisibilityPresenter: ColumnsVisibilityPresenter;
+    columnsVisibilityUpdater: ColumnsVisibilityUpdater;
+    data: T[];
+    loading?: boolean;
+    nameColumnId?: string;
+    onSelectRow?: (rows: T[] | []) => void;
+    onSortingChange: OnDataTableSortingChange;
+    onToggleRow?: (row: T) => void;
+    selected: DataTableDefaultData[];
+    sorting: DataTableSorting;
+    tablePresenter: TablePresenter;
+}
+export declare const TableInner: (<T extends TableRow>(props: TableInnerProps<T>) => React.JSX.Element) & React.NamedExoticComponent<TableInnerProps<TableRow<unknown>>> & {
+    readonly type: <T extends TableRow>(props: TableInnerProps<T>) => React.JSX.Element;
+};

package/components/Table/components/Table/TableInner.js

@@ -0,0 +1,40 @@
+import react, { useCallback, useMemo } from "react";
+import { observer } from "mobx-react-lite";
+import { DataTable } from "@webiny/admin-ui";
+import { ColumnMapper } from "./Columns/index.js";
+import { TableRowProvider } from "../../useTableRow.js";
+const TableInner = observer((props)=>{
+    const cellRenderer = useCallback((row, cell)=>{
+        if ("string" == typeof cell) return cell;
+        return /*#__PURE__*/ react.createElement(TableRowProvider, {
+            row: row
+        }, cell);
+    }, []);
+    const columns = useMemo(()=>props.columnsPresenter.vm.columns.reduce((result, column)=>{
+            const { nameColumnId = "name" } = props;
+            const { name: defaultName } = column;
+            const name = "name" === defaultName ? nameColumnId : defaultName;
+            result[name] = ColumnMapper.toDataTable(column, cellRenderer);
+            return result;
+        }, {}), [
+        props.columnsPresenter.vm.columns
+    ]);
+    return /*#__PURE__*/ react.createElement(DataTable, {
+        columns: columns,
+        columnVisibility: props.columnsVisibilityPresenter.vm.columnsVisibility,
+        onColumnVisibilityChange: props.columnsVisibilityUpdater.update,
+        data: props.data,
+        initialSorting: props.tablePresenter.vm.initialSorting,
+        isRowSelectable: (row)=>row.original.$selectable ?? false,
+        loading: props.loading,
+        onSelectRow: props.onSelectRow,
+        onSortingChange: props.onSortingChange,
+        onToggleRow: props.onToggleRow,
+        selectedRows: props.data.filter((row)=>props.selected.find((item)=>row.id === item.id)),
+        sorting: props.sorting,
+        stickyHeader: true
+    });
+});
+export { TableInner };
+
+//# sourceMappingURL=TableInner.js.map

package/components/Table/components/Table/TableInner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/Table/components/Table/TableInner.js","sources":["../../../../../src/components/Table/components/Table/TableInner.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport type { OnDataTableSortingChange } from \"@webiny/admin-ui\";\nimport {\n    DataTable,\n    type DataTableColumns,\n    type DataTableDefaultData,\n    type DataTableSorting\n} from \"@webiny/admin-ui\";\nimport type { ColumnsPresenter } from \"./Columns/index.js\";\nimport { ColumnMapper } from \"./Columns/index.js\";\nimport type {\n    ColumnsVisibilityPresenter,\n    ColumnsVisibilityUpdater\n} from \"./ColumnVisibility/index.js\";\nimport type { TablePresenter } from \"./TablePresenter.js\";\nimport { TableRowProvider } from \"../../useTableRow.js\";\nimport type { TableRow } from \"../../table.types.js\";\n\nexport interface TableInnerProps<T extends TableRow> {\n    columnsPresenter: ColumnsPresenter;\n    columnsVisibilityPresenter: ColumnsVisibilityPresenter;\n    columnsVisibilityUpdater: ColumnsVisibilityUpdater;\n    data: T[];\n    loading?: boolean;\n    nameColumnId?: string;\n    onSelectRow?: (rows: T[] | []) => void;\n    onSortingChange: OnDataTableSortingChange;\n    onToggleRow?: (row: T) => void;\n    selected: DataTableDefaultData[];\n    sorting: DataTableSorting;\n    tablePresenter: TablePresenter;\n}\n\nexport const TableInner = observer(<T extends TableRow>(props: TableInnerProps<T>) => {\n    const cellRenderer = useCallback(\n        (row: T, cell: string | React.ReactElement): string | number | React.JSX.Element | null => {\n            if (typeof cell === \"string\") {\n                return cell;\n            }\n\n            return <TableRowProvider row={row}>{cell}</TableRowProvider>;\n        },\n        []\n    );\n\n    const columns = useMemo(() => {\n        return props.columnsPresenter.vm.columns.reduce((result, column) => {\n            const { nameColumnId = \"name\" } = props;\n            const { name: defaultName } = column;\n\n            // Determine the column name, using the provided `nameColumnId` if the default is 'name'\n            const name = defaultName === \"name\" ? nameColumnId : defaultName;\n\n            result[name as keyof DataTableColumns<T>] = ColumnMapper.toDataTable(\n                column,\n                cellRenderer\n            );\n\n            return result;\n        }, {} as DataTableColumns<T>);\n    }, [props.columnsPresenter.vm.columns]);\n\n    return (\n        <DataTable\n            columns={columns}\n            columnVisibility={props.columnsVisibilityPresenter.vm.columnsVisibility}\n            onColumnVisibilityChange={props.columnsVisibilityUpdater.update}\n            data={props.data}\n            initialSorting={props.tablePresenter.vm.initialSorting}\n            isRowSelectable={row => row.original.$selectable ?? false}\n            loading={props.loading}\n            onSelectRow={props.onSelectRow}\n            onSortingChange={props.onSortingChange}\n            onToggleRow={props.onToggleRow}\n            selectedRows={props.data.filter(row => props.selected.find(item => row.id === item.id))}\n            sorting={props.sorting}\n            stickyHeader={true}\n        />\n    );\n});\n"],"names":["TableInner","observer","props","cellRenderer","useCallback","row","cell","TableRowProvider","columns","useMemo","result","column","nameColumnId","defaultName","name","ColumnMapper","DataTable","item"],"mappings":";;;;;AAkCO,MAAMA,aAAaC,SAAS,CAAqBC;IACpD,MAAMC,eAAeC,YACjB,CAACC,KAAQC;QACL,IAAI,AAAgB,YAAhB,OAAOA,MACP,OAAOA;QAGX,OAAO,WAAP,GAAO,oBAACC,kBAAgBA;YAAC,KAAKF;WAAMC;IACxC,GACA,EAAE;IAGN,MAAME,UAAUC,QAAQ,IACbP,MAAM,gBAAgB,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAACQ,QAAQC;YACrD,MAAM,EAAEC,eAAe,MAAM,EAAE,GAAGV;YAClC,MAAM,EAAE,MAAMW,WAAW,EAAE,GAAGF;YAG9B,MAAMG,OAAOD,AAAgB,WAAhBA,cAAyBD,eAAeC;YAErDH,MAAM,CAACI,KAAkC,GAAGC,aAAa,WAAW,CAChEJ,QACAR;YAGJ,OAAOO;QACX,GAAG,CAAC,IACL;QAACR,MAAM,gBAAgB,CAAC,EAAE,CAAC,OAAO;KAAC;IAEtC,OAAO,WAAP,GACI,oBAACc,WAASA;QACN,SAASR;QACT,kBAAkBN,MAAM,0BAA0B,CAAC,EAAE,CAAC,iBAAiB;QACvE,0BAA0BA,MAAM,wBAAwB,CAAC,MAAM;QAC/D,MAAMA,MAAM,IAAI;QAChB,gBAAgBA,MAAM,cAAc,CAAC,EAAE,CAAC,cAAc;QACtD,iBAAiBG,CAAAA,MAAOA,IAAI,QAAQ,CAAC,WAAW,IAAI;QACpD,SAASH,MAAM,OAAO;QACtB,aAAaA,MAAM,WAAW;QAC9B,iBAAiBA,MAAM,eAAe;QACtC,aAAaA,MAAM,WAAW;QAC9B,cAAcA,MAAM,IAAI,CAAC,MAAM,CAACG,CAAAA,MAAOH,MAAM,QAAQ,CAAC,IAAI,CAACe,CAAAA,OAAQZ,IAAI,EAAE,KAAKY,KAAK,EAAE;QACrF,SAASf,MAAM,OAAO;QACtB,cAAc;;AAG1B"}

package/components/Table/components/Table/TablePresenter.d.ts

@@ -0,0 +1,15 @@
+import type { DataTableSorting } from "@webiny/admin-ui";
+export interface TablePresenterViewModel {
+    initialSorting: DataTableSorting;
+}
+export interface ITablePresenter {
+    get vm(): TablePresenterViewModel;
+}
+export declare class TablePresenter implements ITablePresenter {
+    get vm(): {
+        initialSorting: {
+            id: string;
+            desc: boolean;
+        }[];
+    };
+}

package/components/Table/components/Table/TablePresenter.js

@@ -0,0 +1,15 @@
+class TablePresenter {
+    get vm() {
+        return {
+            initialSorting: [
+                {
+                    id: "savedOn",
+                    desc: true
+                }
+            ]
+        };
+    }
+}
+export { TablePresenter };
+
+//# sourceMappingURL=TablePresenter.js.map

package/components/Table/components/Table/TablePresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/Table/components/Table/TablePresenter.js","sources":["../../../../../src/components/Table/components/Table/TablePresenter.ts"],"sourcesContent":["import type { DataTableSorting } from \"@webiny/admin-ui\";\n\nexport interface TablePresenterViewModel {\n    initialSorting: DataTableSorting;\n}\n\nexport interface ITablePresenter {\n    get vm(): TablePresenterViewModel;\n}\n\nexport class TablePresenter implements ITablePresenter {\n    get vm() {\n        return {\n            initialSorting: [\n                {\n                    id: \"savedOn\",\n                    desc: true\n                }\n            ]\n        };\n    }\n}\n"],"names":["TablePresenter"],"mappings":"AAUO,MAAMA;IACT,IAAI,KAAK;QACL,OAAO;YACH,gBAAgB;gBACZ;oBACI,IAAI;oBACJ,MAAM;gBACV;aACH;QACL;IACJ;AACJ"}

package/components/Table/components/Table/gateways/ColumnsVisibilityLocalStorageGateway.d.ts

@@ -0,0 +1,9 @@
+import type { IColumnsVisibilityGateway } from "./IColumnsVisibilityGateway.js";
+import { LocalStorage } from "@webiny/app/exports/admin/local-storage.js";
+export declare class ColumnsVisibilityLocalStorageGateway implements IColumnsVisibilityGateway {
+    private localStorage;
+    private readonly key;
+    constructor(localStorage: LocalStorage.Interface, namespace: string);
+    get(): Promise<{}>;
+    set(value: Record<string, boolean>): Promise<void>;
+}

package/components/Table/components/Table/gateways/ColumnsVisibilityLocalStorageGateway.js

@@ -0,0 +1,15 @@
+class ColumnsVisibilityLocalStorageGateway {
+    constructor(localStorage, namespace){
+        this.localStorage = localStorage;
+        this.key = `${namespace}/column-visibility`;
+    }
+    get() {
+        return Promise.resolve(this.localStorage.get(this.key) ?? {});
+    }
+    async set(value) {
+        return this.localStorage.set(this.key, value);
+    }
+}
+export { ColumnsVisibilityLocalStorageGateway };
+
+//# sourceMappingURL=ColumnsVisibilityLocalStorageGateway.js.map

package/components/Table/components/Table/gateways/ColumnsVisibilityLocalStorageGateway.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/Table/components/Table/gateways/ColumnsVisibilityLocalStorageGateway.js","sources":["../../../../../../src/components/Table/components/Table/gateways/ColumnsVisibilityLocalStorageGateway.ts"],"sourcesContent":["import type { IColumnsVisibilityGateway } from \"./IColumnsVisibilityGateway.js\";\nimport { LocalStorage } from \"@webiny/app/exports/admin/local-storage.js\";\n\nexport class ColumnsVisibilityLocalStorageGateway implements IColumnsVisibilityGateway {\n    private readonly key: string;\n\n    constructor(\n        private localStorage: LocalStorage.Interface,\n        namespace: string\n    ) {\n        this.key = `${namespace}/column-visibility`;\n    }\n\n    get() {\n        return Promise.resolve(this.localStorage.get(this.key) ?? {});\n    }\n\n    async set(value: Record<string, boolean>) {\n        return this.localStorage.set(this.key, value);\n    }\n}\n"],"names":["ColumnsVisibilityLocalStorageGateway","localStorage","namespace","Promise","value"],"mappings":"AAGO,MAAMA;IAGT,YACYC,YAAoC,EAC5CC,SAAiB,CACnB;aAFUD,YAAY,GAAZA;QAGR,IAAI,CAAC,GAAG,GAAG,GAAGC,UAAU,kBAAkB,CAAC;IAC/C;IAEA,MAAM;QACF,OAAOC,QAAQ,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;IAC/D;IAEA,MAAM,IAAIC,KAA8B,EAAE;QACtC,OAAO,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAEA;IAC3C;AACJ"}

package/components/Table/components/Table/gateways/IColumnsVisibilityGateway.d.ts

@@ -0,0 +1,4 @@
+export interface IColumnsVisibilityGateway {
+    get(): Promise<Record<string, boolean> | undefined>;
+    set(value: Record<string, boolean>): Promise<void>;
+}

package/components/Table/components/Table/gateways/index.d.ts

@@ -0,0 +1,2 @@
+export type * from "./IColumnsVisibilityGateway.js";
+export * from "./ColumnsVisibilityLocalStorageGateway.js";

package/components/Table/components/Table/gateways/index.js

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

package/components/Table/components/Table/index.d.ts

@@ -0,0 +1 @@
+export { Table } from "./Table.js";

package/components/Table/components/Table/index.js

@@ -0,0 +1 @@
+export { Table } from "./Table.js";

package/components/Table/components/index.d.ts

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

package/components/Table/components/index.js

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

package/components/Table/createTableData.d.ts

@@ -0,0 +1,5 @@
+import type { RecordTableRow } from "./table.types.js";
+export declare const createRecordsData: <T extends {
+    id: string;
+    $selectable?: boolean;
+}>(items: T[]) => RecordTableRow<T>[];

package/components/Table/createTableData.js

@@ -0,0 +1,9 @@
+const createRecordsData = (items)=>items.map((item)=>({
+            id: item.id,
+            $type: "RECORD",
+            $selectable: void 0 !== item.$selectable ? item.$selectable : true,
+            data: item
+        }));
+export { createRecordsData };
+
+//# sourceMappingURL=createTableData.js.map

package/components/Table/createTableData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/Table/createTableData.js","sources":["../../../src/components/Table/createTableData.ts"],"sourcesContent":["import type { RecordTableRow } from \"./table.types.js\";\n\nexport const createRecordsData = <T extends { id: string; $selectable?: boolean }>(\n    items: T[]\n): RecordTableRow<T>[] => {\n    return items.map(item => ({\n        id: item.id,\n        $type: \"RECORD\",\n        $selectable: item.$selectable !== undefined ? item.$selectable : true,\n        data: item\n    }));\n};\n"],"names":["createRecordsData","items","item","undefined"],"mappings":"AAEO,MAAMA,oBAAoB,CAC7BC,QAEOA,MAAM,GAAG,CAACC,CAAAA,OAAS;YACtB,IAAIA,KAAK,EAAE;YACX,OAAO;YACP,aAAaA,AAAqBC,WAArBD,KAAK,WAAW,GAAiBA,KAAK,WAAW,GAAG;YACjE,MAAMA;QACV"}

package/components/Table/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./components/index.js";
+export * from "./createTableData.js";
+export * from "./useTableRow.js";
+export * from "./cells/index.js";
+export * from "./table.types.js";

package/components/Table/index.js

@@ -0,0 +1,5 @@
+export * from "./components/index.js";
+export * from "./createTableData.js";
+export * from "./useTableRow.js";
+export * from "./cells/index.js";
+export * from "./table.types.js";

package/components/Table/table.types.d.ts

@@ -0,0 +1,9 @@
+export interface TableRow<TData = unknown> {
+    id: string;
+    $selectable: boolean;
+    $type: string;
+    data: TData;
+}
+export interface RecordTableRow<TData> extends TableRow<TData> {
+    $type: "RECORD";
+}

package/components/Table/useTableRow.d.ts

@@ -0,0 +1,18 @@
+import type { Context, ReactNode } from "react";
+import React from "react";
+export interface TableRowContextData<T> {
+    row: T;
+}
+export declare const TableRowContext: Context<TableRowContextData<any> | undefined>;
+interface TableRowProviderProps<T> {
+    row: T | undefined;
+    children: ReactNode;
+}
+export declare const TableRowProvider: <T>({ row, children }: TableRowProviderProps<T>) => React.JSX.Element | null;
+export declare const createUseTableRow: <TBaseRow = Record<string, any>>() => {
+    (): TableRowContextData<TBaseRow>;
+    <TUserRow>(): TableRowContextData<TBaseRow & {
+        data: TUserRow;
+    }>;
+};
+export {};

package/components/Table/useTableRow.js

@@ -0,0 +1,22 @@
+import react, { createContext, useContext } from "react";
+const TableRowContext = /*#__PURE__*/ createContext(void 0);
+const TableRowProvider = ({ row, children })=>{
+    if (!row) return null;
+    const value = {
+        row
+    };
+    return /*#__PURE__*/ react.createElement(TableRowContext.Provider, {
+        value: value
+    }, children);
+};
+const createUseTableRow = ()=>{
+    function useTableRow() {
+        const context = useContext(TableRowContext);
+        if (!context) throw new Error('TableRowContext is missing in the component tree. Are you using "useTableRow()" hook in the right place?');
+        return context;
+    }
+    return useTableRow;
+};
+export { TableRowContext, TableRowProvider, createUseTableRow };
+
+//# sourceMappingURL=useTableRow.js.map

package/components/Table/useTableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/Table/useTableRow.js","sources":["../../../src/components/Table/useTableRow.tsx"],"sourcesContent":["import type { Context, ReactNode } from \"react\";\nimport React, { createContext, useContext } from \"react\";\n\nexport interface TableRowContextData<T> {\n    row: T;\n}\n\nexport const TableRowContext = createContext<TableRowContextData<any> | undefined>(undefined);\n\ninterface TableRowProviderProps<T> {\n    row: T | undefined;\n    children: ReactNode;\n}\n\nexport const TableRowProvider = <T,>({ row, children }: TableRowProviderProps<T>) => {\n    if (!row) {\n        return null;\n    }\n\n    const value: TableRowContextData<T> = { row };\n\n    return <TableRowContext.Provider value={value}>{children}</TableRowContext.Provider>;\n};\n\nexport const createUseTableRow = <TBaseRow = Record<string, any>,>() => {\n    function useTableRow(): TableRowContextData<TBaseRow>;\n\n    // \tfunction useTableRow(): TableRowContextData<TBaseRow>;\n    //  ➜ Handles calls with no generic.\n\n    // \tfunction useTableRow<TUserRow>(): TableRowContextData<TBaseRow & { data: TUserRow }>;\n    //  ➜ Handles calls with a generic.\n\n    function useTableRow<TUserRow>(): TableRowContextData<TBaseRow & { data: TUserRow }>;\n\n    function useTableRow<TUserRow = never>(): TableRowContextData<\n        TUserRow extends never ? TBaseRow : TBaseRow & { data: TUserRow }\n    > {\n        type Combined = TUserRow extends never ? TBaseRow : TBaseRow & { data: TUserRow };\n\n        const context = useContext<TableRowContextData<Combined>>(\n            TableRowContext as unknown as Context<TableRowContextData<Combined>>\n        );\n\n        if (!context) {\n            throw new Error(\n                `TableRowContext is missing in the component tree. Are you using \"useTableRow()\" hook in the right place?`\n            );\n        }\n\n        return context;\n    }\n\n    return useTableRow;\n};\n"],"names":["TableRowContext","createContext","undefined","TableRowProvider","row","children","value","createUseTableRow","useTableRow","context","useContext","Error"],"mappings":";AAOO,MAAMA,kBAAkB,WAAHA,GAAGC,cAAoDC;AAO5E,MAAMC,mBAAmB,CAAK,EAAEC,GAAG,EAAEC,QAAQ,EAA4B;IAC5E,IAAI,CAACD,KACD,OAAO;IAGX,MAAME,QAAgC;QAAEF;IAAI;IAE5C,OAAO,WAAP,GAAO,oBAACJ,gBAAgB,QAAQ;QAAC,OAAOM;OAAQD;AACpD;AAEO,MAAME,oBAAoB;IAW7B,SAASC;QAKL,MAAMC,UAAUC,WACZV;QAGJ,IAAI,CAACS,SACD,MAAM,IAAIE,MACN;QAIR,OAAOF;IACX;IAEA,OAAOD;AACX"}

package/components/TeamAutocomplete/index.d.ts

@@ -3,5 +3,9 @@ import { AutoComplete } from "@webiny/admin-ui";
 type TeamAutocompleteProps = Omit<React.ComponentProps<typeof AutoComplete>, "options" | "onValueChange"> & {
     onChange?: (value: string) => void;
 };
-export declare const TeamAutocomplete: ({ onChange, value, ...props }: TeamAutocompleteProps) => React.JSX.Element;
+export declare const TeamAutocomplete: (({ onChange, value, ...props }: TeamAutocompleteProps) => React.JSX.Element) & React.NamedExoticComponent<Omit<import("@webiny/admin-ui").AutoCompletePrimitiveProps & import("@webiny/admin-ui").FormComponentProps<any>, "onValueChange" | "options"> & {
+    onChange?: (value: string) => void;
+}> & {
+    readonly type: ({ onChange, value, ...props }: TeamAutocompleteProps) => React.JSX.Element;
+};
 export {};

package/components/TeamAutocomplete/index.js

@@ -1,27 +1,25 @@
-import React, { useMemo, useCallback } from "react";
+import react, { useCallback, useEffect } from "react";
 import { AutoComplete } from "@webiny/admin-ui";
-import { LIST_TEAMS } from "./graphql.js";
-import { useQuery } from "@apollo/react-hooks";
-export const TeamAutocomplete = ({
-  onChange,
-  value,
-  ...props
-}) => {
-  const {
-    data,
-    loading
-  } = useQuery(LIST_TEAMS);
-  const rawOptions = loading || !data ? [] : data.security.teams.data;
-  const options = useMemo(() => rawOptions.map(team => ({
-    label: team.name,
-    value: team.id
-  })), [rawOptions]);
-  const onValueChange = useCallback(id => onChange?.(id), [onChange]);
-  return /*#__PURE__*/React.createElement(AutoComplete, Object.assign({}, props, {
-    options: options,
-    value: loading ? undefined : value,
-    onValueChange: onValueChange
-  }));
-};
+import { useFeature } from "@webiny/app";
+import { observer } from "mobx-react-lite";
+import { TeamsAutocompletePresenterFeature } from "../../presentation/accessManagement/teams/teamsAutocomplete/feature.js";
+const TeamAutocomplete = observer(({ onChange, value, ...props })=>{
+    const { presenter } = useFeature(TeamsAutocompletePresenterFeature);
+    useEffect(()=>{
+        presenter.init();
+    }, [
+        presenter
+    ]);
+    const onValueChange = useCallback((id)=>onChange?.(id), [
+        onChange
+    ]);
+    return /*#__PURE__*/ react.createElement(AutoComplete, {
+        ...props,
+        options: presenter.vm.options,
+        value: presenter.vm.loading ? void 0 : value,
+        onValueChange: onValueChange
+    });
+});
+export { TeamAutocomplete };
 
 //# sourceMappingURL=index.js.map

package/components/TeamAutocomplete/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","useCallback","AutoComplete","LIST_TEAMS","useQuery","TeamAutocomplete","onChange","value","props","data","loading","rawOptions","security","teams","options","map","team","label","name","id","onValueChange","createElement","Object","assign","undefined"],"sources":["index.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from \"react\";\nimport { AutoComplete } from \"@webiny/admin-ui\";\nimport { LIST_TEAMS } from \"./graphql.js\";\nimport { useQuery } from \"@apollo/react-hooks\";\n\ntype TeamAutocompleteProps = Omit<\n    React.ComponentProps<typeof AutoComplete>,\n    \"options\" | \"onValueChange\"\n> & {\n    onChange?: (value: string) => void;\n};\n\nexport const TeamAutocomplete = ({ onChange, value, ...props }: TeamAutocompleteProps) => {\n    const { data, loading } = useQuery(LIST_TEAMS);\n    const rawOptions = loading || !data ? [] : data.security.teams.data;\n\n    const options = useMemo(\n        () => rawOptions.map((team: any) => ({ label: team.name, value: team.id })),\n        [rawOptions]\n    );\n\n    const onValueChange = useCallback((id: string) => onChange?.(id), [onChange]);\n\n    return (\n        <AutoComplete\n            {...props}\n            options={options}\n            value={loading ? undefined : (value as string | undefined)}\n            onValueChange={onValueChange}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,WAAW,QAAQ,OAAO;AACnD,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,UAAU;AACnB,SAASC,QAAQ,QAAQ,qBAAqB;AAS9C,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAA6B,CAAC,KAAK;EACtF,MAAM;IAAEC,IAAI;IAAEC;EAAQ,CAAC,GAAGN,QAAQ,CAACD,UAAU,CAAC;EAC9C,MAAMQ,UAAU,GAAGD,OAAO,IAAI,CAACD,IAAI,GAAG,EAAE,GAAGA,IAAI,CAACG,QAAQ,CAACC,KAAK,CAACJ,IAAI;EAEnE,MAAMK,OAAO,GAAGd,OAAO,CACnB,MAAMW,UAAU,CAACI,GAAG,CAAEC,IAAS,KAAM;IAAEC,KAAK,EAAED,IAAI,CAACE,IAAI;IAAEX,KAAK,EAAES,IAAI,CAACG;EAAG,CAAC,CAAC,CAAC,EAC3E,CAACR,UAAU,CACf,CAAC;EAED,MAAMS,aAAa,GAAGnB,WAAW,CAAEkB,EAAU,IAAKb,QAAQ,GAAGa,EAAE,CAAC,EAAE,CAACb,QAAQ,CAAC,CAAC;EAE7E,oBACIP,KAAA,CAAAsB,aAAA,CAACnB,YAAY,EAAAoB,MAAA,CAAAC,MAAA,KACLf,KAAK;IACTM,OAAO,EAAEA,OAAQ;IACjBP,KAAK,EAAEG,OAAO,GAAGc,SAAS,GAAIjB,KAA6B;IAC3Da,aAAa,EAAEA;EAAc,EAChC,CAAC;AAEV,CAAC","ignoreList":[]}
+{"version":3,"file":"components/TeamAutocomplete/index.js","sources":["../../../src/components/TeamAutocomplete/index.tsx"],"sourcesContent":["import React, { useCallback, useEffect } from \"react\";\nimport { AutoComplete } from \"@webiny/admin-ui\";\nimport { useFeature } from \"@webiny/app\";\nimport { observer } from \"mobx-react-lite\";\nimport { TeamsAutocompletePresenterFeature } from \"~/presentation/accessManagement/teams/teamsAutocomplete/feature.js\";\n\ntype TeamAutocompleteProps = Omit<\n    React.ComponentProps<typeof AutoComplete>,\n    \"options\" | \"onValueChange\"\n> & {\n    onChange?: (value: string) => void;\n};\n\nexport const TeamAutocomplete = observer(({ onChange, value, ...props }: TeamAutocompleteProps) => {\n    const { presenter } = useFeature(TeamsAutocompletePresenterFeature);\n\n    useEffect(() => {\n        presenter.init();\n    }, [presenter]);\n\n    const onValueChange = useCallback((id: string) => onChange?.(id), [onChange]);\n\n    return (\n        <AutoComplete\n            {...props}\n            options={presenter.vm.options}\n            value={presenter.vm.loading ? undefined : (value as string | undefined)}\n            onValueChange={onValueChange}\n        />\n    );\n});\n"],"names":["TeamAutocomplete","observer","onChange","value","props","presenter","useFeature","TeamsAutocompletePresenterFeature","useEffect","onValueChange","useCallback","id","AutoComplete","undefined"],"mappings":";;;;;AAaO,MAAMA,mBAAmBC,SAAS,CAAC,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGC,OAA8B;IAC1F,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IAEjCC,UAAU;QACNH,UAAU,IAAI;IAClB,GAAG;QAACA;KAAU;IAEd,MAAMI,gBAAgBC,YAAY,CAACC,KAAeT,WAAWS,KAAK;QAACT;KAAS;IAE5E,OAAO,WAAP,GACI,oBAACU,cAAYA;QACR,GAAGR,KAAK;QACT,SAASC,UAAU,EAAE,CAAC,OAAO;QAC7B,OAAOA,UAAU,EAAE,CAAC,OAAO,GAAGQ,SAAaV;QAC3C,eAAeM;;AAG3B"}

package/components/TeamsMultiAutocomplete/index.d.ts

@@ -3,5 +3,9 @@ import { MultiAutoComplete } from "@webiny/admin-ui";
 type TeamsMultiAutocompleteProps = Omit<React.ComponentProps<typeof MultiAutoComplete>, "options" | "onValuesChange"> & {
     onChange?: (values: string[]) => void;
 };
-export declare const TeamsMultiAutocomplete: ({ onChange, values, ...props }: TeamsMultiAutocompleteProps) => React.JSX.Element;
+export declare const TeamsMultiAutocomplete: (({ onChange, ...props }: TeamsMultiAutocompleteProps) => React.JSX.Element) & React.NamedExoticComponent<Omit<import("@webiny/admin-ui/MultiAutoComplete/primitives").MultiAutoCompletePrimitiveProps & import("@webiny/admin-ui").FormComponentProps<any>, "onValuesChange" | "options"> & {
+    onChange?: (values: string[]) => void;
+}> & {
+    readonly type: ({ onChange, ...props }: TeamsMultiAutocompleteProps) => React.JSX.Element;
+};
 export {};

package/components/TeamsMultiAutocomplete/index.js

@@ -1,27 +1,37 @@
-import React, { useMemo, useCallback } from "react";
+import react, { useCallback, useEffect, useMemo } from "react";
 import { MultiAutoComplete } from "@webiny/admin-ui";
-import { LIST_TEAMS } from "./graphql.js";
-import { useQuery } from "@apollo/react-hooks";
-export const TeamsMultiAutocomplete = ({
-  onChange,
-  values,
-  ...props
-}) => {
-  const {
-    data,
-    loading
-  } = useQuery(LIST_TEAMS);
-  const rawOptions = loading || !data?.security?.teams?.data ? [] : data.security.teams.data;
-  const options = useMemo(() => rawOptions.map(team => ({
-    label: team.name,
-    value: team.id
-  })), [rawOptions]);
-  const onValuesChange = useCallback(ids => onChange?.(ids), [onChange]);
-  return /*#__PURE__*/React.createElement(MultiAutoComplete, Object.assign({}, props, {
-    options: options,
-    values: loading ? undefined : values,
-    onValuesChange: onValuesChange
-  }));
-};
+import { useFeature } from "@webiny/app";
+import { observer } from "mobx-react-lite";
+import { TeamsAutocompletePresenterFeature } from "../../presentation/accessManagement/teams/teamsAutocomplete/feature.js";
+const TeamsMultiAutocomplete = observer(({ onChange, ...props })=>{
+    const { presenter } = useFeature(TeamsAutocompletePresenterFeature);
+    useEffect(()=>{
+        presenter.init();
+    }, [
+        presenter
+    ]);
+    const onValuesChange = useCallback((ids)=>onChange?.(ids), [
+        onChange
+    ]);
+    const values = useMemo(()=>{
+        const selected = Array.isArray(props.values) ? props.values : Array.isArray(props.value) ? props.value : [];
+        return selected.reduce((acc, s)=>{
+            if ("string" == typeof s) acc.push(s);
+            else if ("object" == typeof s && s?.id) acc.push(s.id);
+            return acc;
+        }, []);
+    }, [
+        props.values,
+        props.value
+    ]);
+    return /*#__PURE__*/ react.createElement(MultiAutoComplete, {
+        uniqueValues: true,
+        ...props,
+        options: presenter.vm.options,
+        values: presenter.vm.loading ? void 0 : values,
+        onValuesChange: onValuesChange
+    });
+});
+export { TeamsMultiAutocomplete };
 
 //# sourceMappingURL=index.js.map