@webiny/app-admin 5.20.0 → 5.22.0-beta.1

package/assets/icons/slack-logo.svg

@@ -1 +1 @@
-<svg id="Bold" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m8.843 12.651c-1.392 0-2.521 1.129-2.521 2.521v6.306c0 1.392 1.129 2.521 2.521 2.521s2.521-1.129 2.521-2.521v-6.306c-.001-1.392-1.13-2.521-2.521-2.521z"/><path d="m.019 15.172c0 1.393 1.13 2.523 2.523 2.523s2.523-1.13 2.523-2.523v-2.523h-2.521c-.001 0-.001 0-.002 0-1.393 0-2.523 1.13-2.523 2.523z"/><path d="m8.846-.001c-.001 0-.002 0-.003 0-1.393 0-2.523 1.13-2.523 2.523s1.13 2.523 2.523 2.523h2.521c0-1.431 0-1.083 0-2.528-.001-1.391-1.128-2.518-2.518-2.518z"/><path d="m2.525 11.37h6.318c1.393 0 2.523-1.13 2.523-2.523s-1.13-2.523-2.523-2.523h-6.318c-1.393 0-2.523 1.13-2.523 2.523s1.13 2.523 2.523 2.523z"/><path d="m21.457 6.323c-1.391 0-2.518 1.127-2.518 2.518v.005 2.523h2.521c1.393 0 2.523-1.13 2.523-2.523s-1.13-2.523-2.523-2.523c-.001 0-.002 0-.003 0z"/><path d="m12.641 2.522v6.325c0 1.392 1.129 2.521 2.521 2.521s2.521-1.129 2.521-2.521v-6.325c0-1.392-1.129-2.521-2.521-2.521-1.392 0-2.521 1.129-2.521 2.521z"/><path d="m17.682 21.476c0-1.392-1.129-2.521-2.521-2.521h-2.521v2.523c.001 1.391 1.129 2.519 2.521 2.519s2.521-1.129 2.521-2.521z"/><path d="m21.479 12.649h-6.318c-1.393 0-2.523 1.13-2.523 2.523s1.13 2.523 2.523 2.523h6.318c1.393 0 2.523-1.13 2.523-2.523s-1.13-2.523-2.523-2.523z"/></svg>
+<svg id="Bold" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m8.843 12.651c-1.392 0-2.521 1.129-2.521 2.521v6.306c0 1.392 1.129 2.521 2.521 2.521s2.521-1.129 2.521-2.521v-6.306c-.001-1.392-1.13-2.521-2.521-2.521z"/><path d="m.019 15.172c0 1.393 1.13 2.523 2.523 2.523s2.523-1.13 2.523-2.523v-2.523h-2.521c-.001 0-.001 0-.002 0-1.393 0-2.523 1.13-2.523 2.523z"/><path d="m8.846-.001c-.001 0-.002 0-.003 0-1.393 0-2.523 1.13-2.523 2.523s1.13 2.523 2.523 2.523h2.521c0-1.431 0-1.083 0-2.528-.001-1.391-1.128-2.518-2.518-2.518z"/><path d="m2.525 11.37h6.318c1.393 0 2.523-1.13 2.523-2.523s-1.13-2.523-2.523-2.523h-6.318c-1.393 0-2.523 1.13-2.523 2.523s1.13 2.523 2.523 2.523z"/><path d="m21.457 6.323c-1.391 0-2.518 1.127-2.518 2.518v.005 2.523h2.521c1.393 0 2.523-1.13 2.523-2.523s-1.13-2.523-2.523-2.523c-.001 0-.002 0-.003 0z"/><path d="m12.641 2.522v6.325c0 1.392 1.129 2.521 2.521 2.521s2.521-1.129 2.521-2.521v-6.325c0-1.392-1.129-2.521-2.521-2.521-1.392 0-2.521 1.129-2.521 2.521z"/><path d="m17.682 21.476c0-1.392-1.129-2.521-2.521-2.521h-2.521v2.523c.001 1.391 1.129 2.519 2.521 2.519s2.521-1.129 2.521-2.521z"/><path d="m21.479 12.649h-6.318c-1.393 0-2.523 1.13-2.523 2.523s1.13 2.523 2.523 2.523h6.318c1.393 0 2.523-1.13 2.523-2.523s-1.13-2.523-2.523-2.523z"/></svg>

package/base/Admin.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import ApolloClient from "apollo-client";
+interface Options {
+    uri: string;
+}
+interface ApolloClientFactory {
+    (options: Options): ApolloClient<any>;
+}
+export interface AdminProps {
+    createApolloClient?: ApolloClientFactory;
+    children?: React.ReactNode;
+}
+export declare const Admin: ({ children, createApolloClient }: AdminProps) => JSX.Element;
+export {};

package/base/Admin.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { Admin as BaseAdmin, Provider } from "@webiny/app-admin-core";
+import { createApolloProvider } from "./providers/ApolloProvider";
+import { Base } from "./Base";
+import { createTelemetryProvider } from "./providers/TelemetryProvider";
+import { createUiStateProvider } from "./providers/UiStateProvider";
+import { SearchProvider } from "./ui/Search";
+import { UserMenuProvider } from "./ui/UserMenu";
+import { NavigationProvider } from "./ui/Navigation";
+export var Admin = function Admin(_ref) {
+  var children = _ref.children,
+      createApolloClient = _ref.createApolloClient;
+  var ApolloProvider = createApolloProvider(createApolloClient);
+  var TelemetryProvider = createTelemetryProvider();
+  var UiStateProvider = createUiStateProvider();
+  return /*#__PURE__*/React.createElement(BaseAdmin, null, /*#__PURE__*/React.createElement(Provider, {
+    hoc: ApolloProvider
+  }), /*#__PURE__*/React.createElement(Provider, {
+    hoc: TelemetryProvider
+  }), /*#__PURE__*/React.createElement(Provider, {
+    hoc: UiStateProvider
+  }), /*#__PURE__*/React.createElement(Provider, {
+    hoc: SearchProvider
+  }), /*#__PURE__*/React.createElement(Provider, {
+    hoc: UserMenuProvider
+  }), /*#__PURE__*/React.createElement(Provider, {
+    hoc: NavigationProvider
+  }), /*#__PURE__*/React.createElement(Base, null), children);
+};

package/base/Base.d.ts

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

package/base/Base.js

@@ -0,0 +1,65 @@
+import React, { memo } from "react";
+import { Plugins } from "@webiny/app-admin-core";
+import { AddMenu, AddRoute, Dashboard, Layout, NotFound } from "./..";
+import { plugins } from "@webiny/plugins";
+import { ReactComponent as DocsIcon } from "../assets/icons/icon-documentation.svg";
+import { ReactComponent as SlackIcon } from "../assets/icons/slack-logo.svg";
+import { ReactComponent as GithubIcon } from "../assets/icons/github-brands.svg";
+import { ReactComponent as FileIcon } from "../assets/icons/insert_drive_file-24px.svg";
+import { ReactComponent as SettingsIcon } from "../assets/icons/round-settings-24px.svg";
+import { FileManager } from "../components";
+import adminPlugins from "../plugins";
+
+var BaseExtension = function BaseExtension() {
+  plugins.register(adminPlugins());
+  return /*#__PURE__*/React.createElement(Plugins, null, /*#__PURE__*/React.createElement(AddMenu, {
+    name: "settings",
+    label: "Settings",
+    icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
+    pin: "last"
+  }), /*#__PURE__*/React.createElement(FileManager, null, function (_ref) {
+    var showFileManager = _ref.showFileManager;
+    return /*#__PURE__*/React.createElement(AddMenu, {
+      name: "fileManager",
+      label: "File Manager",
+      icon: /*#__PURE__*/React.createElement(FileIcon, null),
+      tags: ["footer"],
+      onClick: showFileManager,
+      testId: "admin-drawer-footer-menu-file-manager"
+    });
+  }), /*#__PURE__*/React.createElement(AddMenu, {
+    name: "documentation",
+    label: "Documentation",
+    icon: /*#__PURE__*/React.createElement(DocsIcon, null),
+    path: "https://docs.webiny.com/",
+    rel: "noopener noreferrer",
+    target: "_blank",
+    tags: ["footer"]
+  }), /*#__PURE__*/React.createElement(AddMenu, {
+    name: "slack",
+    label: "Slack",
+    icon: /*#__PURE__*/React.createElement(SlackIcon, null),
+    path: "https://www.webiny.com/slack/",
+    rel: "noopener noreferrer",
+    target: "_blank",
+    tags: ["footer"]
+  }), /*#__PURE__*/React.createElement(AddMenu, {
+    name: "github",
+    label: "Github",
+    icon: /*#__PURE__*/React.createElement(GithubIcon, null),
+    path: "https://github.com/webiny/webiny-js",
+    rel: "noopener noreferrer",
+    target: "_blank",
+    tags: ["footer"]
+  }), /*#__PURE__*/React.createElement(AddRoute, {
+    path: "/"
+  }, /*#__PURE__*/React.createElement(Layout, {
+    title: "Welcome!"
+  }, /*#__PURE__*/React.createElement(Dashboard, null))), /*#__PURE__*/React.createElement(AddRoute, {
+    path: "*"
+  }, /*#__PURE__*/React.createElement(Layout, {
+    title: "Not Accessible"
+  }, /*#__PURE__*/React.createElement(NotFound, null))));
+};
+
+export var Base = /*#__PURE__*/memo(BaseExtension);

package/base/plugins/AddGraphQLQuerySelection.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { DocumentNode } from "graphql";
+interface Props {
+    operationName: string;
+    selectionPath: string;
+    addSelection: DocumentNode;
+}
+export declare const AddGraphQLQuerySelection: FC<Props>;
+export {};

package/base/plugins/AddGraphQLQuerySelection.js

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import { plugins } from "@webiny/plugins";
+import { nanoid } from "nanoid";
+import { AddQuerySelectionPlugin } from "@webiny/app/plugins/AddQuerySelectionPlugin";
+export var AddGraphQLQuerySelection = function AddGraphQLQuerySelection(props) {
+  useEffect(function () {
+    var plugin = new AddQuerySelectionPlugin(props);
+    plugin.name = nanoid();
+    plugins.register(plugin);
+    return function () {
+      plugins.unregister(plugin.name);
+    };
+  }, []);
+  return null;
+};

package/base/providers/ApolloProvider.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const createApolloProvider: (clientFactory: any) => (Component: React.ComponentType<unknown>) => ({ children }: {
+    children: any;
+}) => JSX.Element;

package/base/providers/ApolloProvider.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { ApolloProvider as Apollo } from "@apollo/react-components";
+export var createApolloProvider = function createApolloProvider(clientFactory) {
+  return function (Component) {
+    return function ApolloProvider(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/React.createElement(Apollo, {
+        client: clientFactory({
+          uri: process.env.REACT_APP_GRAPHQL_API_URL
+        })
+      }, /*#__PURE__*/React.createElement(Component, null, children));
+    };
+  };
+};

package/base/providers/TelemetryProvider.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const createTelemetryProvider: () => (Component: any) => ({ children }: {
+    children: any;
+}) => JSX.Element;

package/base/providers/TelemetryProvider.js

@@ -0,0 +1,19 @@
+import React, { useEffect } from "react";
+import { sendEvent } from "@webiny/telemetry/react";
+var eventSent = false;
+export var createTelemetryProvider = function createTelemetryProvider() {
+  return function (Component) {
+    return function TelemetryProvider(_ref) {
+      var children = _ref.children;
+      useEffect(function () {
+        if (eventSent) {
+          return;
+        }
+
+        eventSent = true;
+        sendEvent("app-start");
+      }, []);
+      return /*#__PURE__*/React.createElement(Component, null, children);
+    };
+  };
+};

package/base/providers/UiStateProvider.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const createUiStateProvider: () => (Component: React.ComponentType<unknown>) => ({ children }: {
+    children: any;
+}) => JSX.Element;

package/base/providers/UiStateProvider.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { UiProvider } from "@webiny/app/contexts/Ui";
+export var createUiStateProvider = function createUiStateProvider() {
+  return function (Component) {
+    return function UiStateProvider(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/React.createElement(UiProvider, null, /*#__PURE__*/React.createElement(Component, null, children));
+    };
+  };
+};

package/base/providers/ViewCompositionProvider.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+export interface ViewElement {
+    name: string;
+    elements: JSX.Element[];
+    [key: string]: any;
+}
+interface ElementSetter {
+    (element: ViewElement): ViewElement;
+}
+export interface ViewCompositionContext {
+    getViewElement(view: string, name: string): ViewElement;
+    setViewElement(view: string, name: string, setter: ElementSetter): any;
+}
+export declare function useViewComposition(): ViewCompositionContext;
+export declare const createViewCompositionProvider: () => (Component: React.ComponentType<unknown>) => ({ children }: {
+    children: any;
+}) => JSX.Element;
+export {};

package/base/providers/ViewCompositionProvider.js

@@ -0,0 +1,44 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { createContext, useContext, useMemo, useState } from "react";
+var ViewCompositionContext = /*#__PURE__*/createContext(null);
+ViewCompositionContext.displayName = "ViewCompositionContext";
+
+var ViewCompositionProvider = function ViewCompositionProvider(_ref) {
+  var children = _ref.children;
+
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var context = useMemo(function () {
+    return {
+      getViewElement: function getViewElement(view, name) {
+        return state[view] && state[view][name];
+      },
+      setViewElement: function setViewElement(view, name, setter) {
+        setState(function (state) {
+          var existing = state[view] && state[view][name];
+          return _objectSpread(_objectSpread({}, state), {}, _defineProperty({}, view, _objectSpread(_objectSpread({}, state[view]), {}, _defineProperty({}, name, setter(existing)))));
+        });
+      }
+    };
+  }, [state]);
+  return /*#__PURE__*/React.createElement(ViewCompositionContext.Provider, {
+    value: context
+  }, children);
+};
+
+export function useViewComposition() {
+  return useContext(ViewCompositionContext);
+}
+export var createViewCompositionProvider = function createViewCompositionProvider() {
+  return function (Component) {
+    return function ViewCompositionProviderHOC(_ref2) {
+      var children = _ref2.children;
+      return /*#__PURE__*/React.createElement(ViewCompositionProvider, null, /*#__PURE__*/React.createElement(Component, null, children));
+    };
+  };
+};

package/base/ui/Brand.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export declare const Brand: React.FC<unknown> & {
+    original: React.ComponentType<unknown>;
+    originalName: string;
+};
+export declare const BrandRenderer: React.FC<unknown> & {
+    original: React.ComponentType<unknown>;
+    originalName: string;
+};

package/base/ui/Brand.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { makeComposable } from "@webiny/app-admin-core";
+export var Brand = makeComposable("Brand", function () {
+  return /*#__PURE__*/React.createElement(BrandRenderer, null);
+});
+export var BrandRenderer = makeComposable("BrandRenderer");

package/base/ui/CenteredView.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface CenteredViewProps {
+    maxWidth?: number | string;
+}
+export declare const CenteredView: React.FC<CenteredViewProps> & {
+    original: React.ComponentType<CenteredViewProps>;
+    originalName: string;
+};

package/base/ui/CenteredView.js

@@ -0,0 +1,27 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { makeComposable } from "../..";
+var Container = /*#__PURE__*/styled("div", {
+  target: "e1bmfqk40",
+  label: "Container"
+})({
+  display: "flex",
+  justifyContent: "center"
+});
+var Width = /*#__PURE__*/styled("div", {
+  target: "e1bmfqk41",
+  label: "Width"
+})(function (props) {
+  return {
+    maxWidth: props.maxWidth,
+    width: "100%"
+  };
+});
+export var CenteredView = makeComposable("CenteredView", function (_ref) {
+  var _ref$maxWidth = _ref.maxWidth,
+      maxWidth = _ref$maxWidth === void 0 ? 700 : _ref$maxWidth,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Width, {
+    maxWidth: maxWidth
+  }, children));
+});

package/base/ui/Dashboard.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export declare const Dashboard: React.FC<unknown> & {
+    original: React.ComponentType<unknown>;
+    originalName: string;
+};
+export declare const DashboardRenderer: React.FC<unknown> & {
+    original: React.ComponentType<unknown>;
+    originalName: string;
+};

package/base/ui/Dashboard.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { makeComposable } from "@webiny/app-admin-core";
+export var Dashboard = makeComposable("Dashboard", function () {
+  return /*#__PURE__*/React.createElement(DashboardRenderer, null);
+});
+export var DashboardRenderer = makeComposable("DashboardRenderer");

package/base/ui/Layout.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface LayoutProps {
+    title?: string;
+    children: React.ReactNode;
+}
+export declare const Layout: React.FC<LayoutProps> & {
+    original: React.ComponentType<LayoutProps>;
+    originalName: string;
+};
+export declare const LayoutRenderer: React.FC<LayoutProps> & {
+    original: React.ComponentType<LayoutProps>;
+    originalName: string;
+};

package/base/ui/Layout.js

@@ -0,0 +1,11 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import React from "react";
+import { makeComposable } from "@webiny/app-admin-core";
+export var Layout = makeComposable("Layout", function (_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(LayoutRenderer, props, children);
+});
+export var LayoutRenderer = makeComposable("LayoutRenderer");

package/base/ui/LocaleSelector.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export declare const LocaleSelector: React.FC<unknown> & {
+    original: React.ComponentType<unknown>;
+    originalName: string;
+};
+export declare const LocaleSelectorRenderer: React.FC<unknown> & {
+    original: React.ComponentType<unknown>;
+    originalName: string;
+};

package/base/ui/LocaleSelector.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { makeComposable } from "@webiny/app-admin-core";
+export var LocaleSelector = makeComposable("LocaleSelector", function () {
+  return /*#__PURE__*/React.createElement(LocaleSelectorRenderer, null);
+});
+export var LocaleSelectorRenderer = makeComposable("LocaleSelectorRenderer");

package/base/ui/LoginScreen.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface LoginScreenProps {
+    children: React.ReactNode;
+}
+export declare const LoginScreen: ({ children }: LoginScreenProps) => JSX.Element;
+export declare const LoginScreenRenderer: React.FC<LoginScreenProps> & {
+    original: React.ComponentType<LoginScreenProps>;
+    originalName: string;
+};

package/base/ui/LoginScreen.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { makeComposable } from "@webiny/app-admin-core";
+import { Tags } from "./Tags";
+export var LoginScreen = function LoginScreen(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(Tags, {
+    tags: {
+      location: "loginScreen"
+    }
+  }, /*#__PURE__*/React.createElement(LoginScreenRenderer, null, children));
+};
+export var LoginScreenRenderer = makeComposable("LoginScreenRenderer");

package/base/ui/Logo.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export declare const Logo: React.FC<unknown> & {
+    original: React.ComponentType<unknown>;
+    originalName: string;
+};
+export declare const LogoRenderer: React.FC<unknown> & {
+    original: React.ComponentType<unknown>;
+    originalName: string;
+};
+interface AddLogoProps {
+    logo: JSX.Element;
+}
+export declare const AddLogo: ({ logo }: AddLogoProps) => JSX.Element;
+export {};

package/base/ui/Logo.js

@@ -0,0 +1,20 @@
+import React, { useMemo } from "react";
+import { Compose, makeComposable } from "@webiny/app-admin-core";
+export var Logo = makeComposable("Logo", function () {
+  return /*#__PURE__*/React.createElement(LogoRenderer, null);
+});
+export var LogoRenderer = makeComposable("LogoRenderer");
+export var AddLogo = function AddLogo(_ref) {
+  var logo = _ref.logo;
+  var LogoHOC = useMemo(function () {
+    return function () {
+      return function Logo() {
+        return logo;
+      };
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Compose, {
+    component: LogoRenderer,
+    with: LogoHOC
+  });
+};

package/base/ui/Menu.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+export interface MenuContext {
+    menuItem: MenuData;
+    setMenu(id: string, props: MenuData): void;
+}
+export interface MenuProps {
+    name: string;
+    label?: string;
+    path?: string;
+    icon?: JSX.Element;
+    onClick?: () => void;
+    testId?: string;
+    tags?: string[];
+    target?: string;
+    rel?: string;
+    element?: JSX.Element;
+    children?: React.ReactNode | React.ReactNode[];
+    pin?: "first" | "last";
+}
+export interface MenuData extends MenuProps {
+    children: MenuData[];
+}
+/**
+ * Register a new menu item into the Admin app.
+ *
+ * @param children
+ * @param props
+ * @constructor
+ */
+export declare const AddMenu: {
+    ({ children, ...props }: MenuProps): JSX.Element;
+    defaultProps: {
+        tags: any[];
+    };
+};

package/base/ui/Menu.js

@@ -0,0 +1,80 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import React, { createContext, useState, useContext, useEffect } from "react";
+import { set } from "dot-prop-immutable";
+import { useNavigation } from "../..";
+var MenuContext = /*#__PURE__*/createContext(null);
+MenuContext.displayName = "MenuContext";
+
+var useMenu = function useMenu() {
+  return useContext(MenuContext);
+};
+
+/**
+ * Register a new menu item into the Admin app.
+ *
+ * @param children
+ * @param props
+ * @constructor
+ */
+export var AddMenu = function AddMenu(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(_objectSpread(_objectSpread({}, props), {}, {
+    children: []
+  })),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var menu = useMenu();
+  var navigation = useNavigation();
+  useEffect(function () {
+    if (menu) {
+      menu.setMenu(state.name, state);
+    } else {
+      navigation.setMenu(state.name, state);
+    }
+  }, [state]);
+  useEffect(function () {
+    return function () {
+      return navigation.removeMenu(state.name);
+    };
+  }, []);
+  var context = {
+    setMenu: function setMenu(name, props) {
+      setState(function (menu) {
+        var childIndex = menu.children.findIndex(function (ch) {
+          return ch.name === name;
+        });
+
+        if (childIndex === -1) {
+          return _objectSpread(_objectSpread({}, menu), {}, {
+            children: [].concat(_toConsumableArray(menu.children), [_objectSpread({}, props)])
+          });
+        }
+
+        return _objectSpread(_objectSpread({}, menu), {}, {
+          children: set(menu.children, childIndex, function (curr) {
+            return _objectSpread(_objectSpread({}, curr), props);
+          })
+        });
+      });
+    }
+  };
+
+  if (!children) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(MenuContext.Provider, {
+    value: context
+  }, children);
+};
+AddMenu.defaultProps = {
+  tags: []
+};

package/base/ui/Navigation.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import { MenuData, MenuProps } from "../../index";
+export interface NavigationContext {
+    menuItems: MenuData[];
+    setMenu(id: string, props: MenuProps): void;
+    removeMenu(id: string): void;
+}
+export declare function useNavigation(): NavigationContext;
+export declare const NavigationProvider: (Component: React.ComponentType<unknown>) => ({ children }: {
+    children: any;
+}) => JSX.Element;
+export declare const Navigation: () => JSX.Element;
+export declare const NavigationRenderer: React.FC<unknown> & {
+    original: React.ComponentType<unknown>;
+    originalName: string;
+};
+interface MenuItemContext {
+    menuItem: MenuData;
+    depth: number;
+}
+declare const MenuItemContext: React.Context<MenuItemContext>;
+export declare function useMenuItem(): MenuItemContext;
+export interface MenuItemsProps {
+    menuItems: MenuData[];
+}
+export declare const MenuItems: React.FC<MenuItemsProps> & {
+    original: React.ComponentType<MenuItemsProps>;
+    originalName: string;
+};
+export declare const MenuItem: () => JSX.Element;
+export declare const MenuItemRenderer: React.FC<unknown> & {
+    original: React.ComponentType<unknown>;
+    originalName: string;
+};
+export {};