@tachybase/client 0.23.8 → 0.23.14

package/lib/schema-component/antd/menu/Menu.js

@@ -0,0 +1,625 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = function(exports1, definition) {
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = function(obj, prop) {
+        return Object.prototype.hasOwnProperty.call(obj, prop);
+    };
+})();
+(()=>{
+    __webpack_require__.r = function(exports1) {
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    Menu: ()=>Menu
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const schema_namespaceObject = require("@tachybase/schema");
+const client_namespaceObject = require("@tachybase/utils/client");
+const external_antd_namespaceObject = require("antd");
+const external_react_dom_namespaceObject = require("react-dom");
+const external_react_i18next_namespaceObject = require("react-i18next");
+const external_index_js_namespaceObject = require("../../index.js");
+const external_index_js_namespaceObject_1 = require("../../../index.js");
+const useMenuItem_js_namespaceObject = require("../../../hooks/useMenuItem.js");
+const useProps_js_namespaceObject = require("../../hooks/useProps.js");
+const external_locale_js_namespaceObject = require("./locale.js");
+const external_Menu_Designer_js_namespaceObject = require("./Menu.Designer.js");
+const external_Menu_styles_js_namespaceObject = require("./Menu.styles.js");
+const external_util_js_namespaceObject = require("./util.js");
+function _tagged_template_literal(strings, raw) {
+    if (!raw) raw = strings.slice(0);
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    const data = _tagged_template_literal([
+        "\n          .iconButton {\n            border: 0;\n            height: var(--tb-header-height);\n            width: 46px;\n            border-radius: 0;\n            background: none;\n            color: rgba(255, 255, 255, 0.65);\n            &:hover {\n              background: rgba(255, 255, 255, 0.1) !important;\n            }\n          }\n        "
+    ]);
+    _templateObject = function() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    const data = _tagged_template_literal([
+        "\n                  border: none;\n                  max-width: 21rem;\n                "
+    ]);
+    _templateObject1 = function() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    const data = _tagged_template_literal([
+        "\n                                  display: block;\n                                  color: inherit;\n                                  &:hover {\n                                    color: inherit;\n                                  }\n                                "
+    ]);
+    _templateObject2 = function() {
+        return data;
+    };
+    return data;
+}
+const HeaderMenu = (param)=>{
+    let { others, schema, mode, onSelect, setLoading, setDefaultSelectedKeys, defaultSelectedKeys, defaultOpenKeys, selectedKeys, designable, render, children } = param;
+    const { Component, getMenuItems } = (0, useMenuItem_js_namespaceObject.useMenuItem)();
+    const { token } = (0, external_index_js_namespaceObject_1.useToken)();
+    const [items, setItems] = (0, external_react_namespaceObject.useState)([]);
+    const { t } = (0, external_react_i18next_namespaceObject.useTranslation)();
+    const { styles: itemStyle } = (0, external_Menu_styles_js_namespaceObject.useStyles)();
+    const result = getMenuItems(()=>children);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        setItems(getItem());
+    }, [
+        children,
+        designable,
+        getMenuItems
+    ]);
+    const getItem = ()=>{
+        const designerBtn = {
+            key: 'x-designer-button',
+            label: render({
+                'data-testid': 'schema-initializer-Menu-header',
+                style: {
+                    background: 'none',
+                    height: '100%'
+                }
+            }),
+            notdelete: true,
+            disabled: true
+        };
+        if (designable) result.push(designerBtn);
+        return result;
+    };
+    const onClick = (info)=>{
+        var _schema_properties;
+        const s = null === (_schema_properties = schema.properties) || void 0 === _schema_properties ? void 0 : _schema_properties[info.key];
+        if (!s) return;
+        if ('mix' === mode) {
+            if ('Menu.SubMenu' !== s['x-component']) null == onSelect || onSelect({
+                item: {
+                    props: info
+                }
+            });
+            else {
+                const menuItemSchema = (0, external_util_js_namespaceObject.findMenuItem)(s);
+                if (!menuItemSchema) return null == onSelect ? void 0 : onSelect({
+                    item: {
+                        props: info
+                    }
+                });
+                setLoading(true);
+                const keys = (0, external_util_js_namespaceObject.findKeysByUid)(schema, menuItemSchema['x-uid']);
+                setDefaultSelectedKeys(keys);
+                setTimeout(()=>{
+                    setLoading(false);
+                }, 100);
+                null == onSelect || onSelect({
+                    key: menuItemSchema.name,
+                    item: {
+                        props: {
+                            schema: menuItemSchema
+                        }
+                    }
+                });
+            }
+        } else null == onSelect || onSelect({
+            item: {
+                props: info
+            }
+        });
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        style: {
+            display: 'flex'
+        },
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                style: {
+                    flex: 1
+                }
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: (0, external_index_js_namespaceObject_1.css)(_templateObject()),
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Popover, {
+                        placement: "bottomRight",
+                        arrow: false,
+                        content: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Card, {
+                                className: (0, external_index_js_namespaceObject_1.css)(_templateObject1()),
+                                children: null == items ? void 0 : items.map((item)=>{
+                                    const { icon, field, Designer, schema, styles } = (null == item ? void 0 : item.menu) || {};
+                                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Card.Grid, {
+                                        style: {
+                                            display: 'block',
+                                            color: 'inherit',
+                                            padding: token.marginSM,
+                                            boxShadow: 'none',
+                                            width: '7rem',
+                                            height: '5rem'
+                                        },
+                                        className: itemStyle.menuItem,
+                                        onClick: ()=>{
+                                            onClick(item);
+                                        },
+                                        children: item.menu ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(schema_namespaceObject.SchemaContext.Provider, {
+                                            value: schema,
+                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(schema_namespaceObject.FieldContext.Provider, {
+                                                value: field,
+                                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_index_js_namespaceObject.SortableItem, {
+                                                    role: "button",
+                                                    "aria-label": t(field.title),
+                                                    className: styles.designerCss,
+                                                    removeParentsIfNoChildren: false,
+                                                    style: {
+                                                        position: 'revert'
+                                                    },
+                                                    children: [
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("a", {
+                                                            role: "button",
+                                                            "aria-label": t(field.title),
+                                                            title: t(field.title),
+                                                            className: (0, external_index_js_namespaceObject_1.css)(_templateObject2()),
+                                                            children: [
+                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                                    style: {
+                                                                        fontSize: '1.2rem',
+                                                                        textAlign: 'center',
+                                                                        marginBottom: '0.3rem'
+                                                                    },
+                                                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_1.Icon, {
+                                                                        type: icon || 'QuestionCircleOutlined'
+                                                                    })
+                                                                }),
+                                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                                    style: {
+                                                                        textAlign: 'center',
+                                                                        whiteSpace: 'nowrap',
+                                                                        overflow: 'hidden',
+                                                                        textOverflow: 'ellipsis',
+                                                                        fontSize: token.fontSizeSM
+                                                                    },
+                                                                    children: t(field.title)
+                                                                })
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Designer, {})
+                                                    ]
+                                                })
+                                            })
+                                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
+                                            children: item.label
+                                        })
+                                    }, item.key);
+                                })
+                            }),
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Button, {
+                            className: "iconButton",
+                            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_1.Icon, {
+                                type: "apps",
+                                style: {
+                                    color: token.colorTextHeaderMenu
+                                }
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, {})
+                ]
+            })
+        ]
+    });
+};
+const SideMenu = (param)=>{
+    let { loading, mode, sideMenuSchema, sideMenuRef, defaultOpenKeys, defaultSelectedKeys, onSelect, render, t, api, refresh, designable } = param;
+    var _sideMenuRef_current;
+    const { Component, getMenuItems } = (0, useMenuItem_js_namespaceObject.useMenuItem)();
+    const { styles } = (0, external_Menu_styles_js_namespaceObject.useStyles)();
+    const sideMenuSchemaRef = (0, external_react_namespaceObject.useRef)(sideMenuSchema);
+    sideMenuSchemaRef.current = sideMenuSchema;
+    const items = (0, external_react_namespaceObject.useMemo)(()=>{
+        const result = getMenuItems(()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(schema_namespaceObject.RecursionField, {
+                schema: sideMenuSchema,
+                onlyRenderProperties: true
+            }, (0, schema_namespaceObject.uid)()));
+        if (designable) result.push({
+            key: 'x-designer-button',
+            disabled: true,
+            label: render({
+                'data-testid': 'schema-initializer-Menu-side',
+                insert: (s)=>{
+                    const dn = (0, external_index_js_namespaceObject.createDesignable)({
+                        t,
+                        api,
+                        refresh,
+                        current: sideMenuSchemaRef.current
+                    });
+                    dn.loadAPIClientEvents();
+                    dn.insertAdjacent('beforeEnd', s);
+                }
+            }),
+            order: 1,
+            notdelete: true
+        });
+        return result;
+    }, [
+        getMenuItems,
+        designable,
+        sideMenuSchema,
+        render,
+        t,
+        api,
+        refresh
+    ]);
+    if (loading) return null;
+    return 'mix' === mode && (null == sideMenuSchema ? void 0 : sideMenuSchema['x-component']) === 'Menu.SubMenu' && (null == sideMenuRef ? void 0 : null === (_sideMenuRef_current = sideMenuRef.current) || void 0 === _sideMenuRef_current ? void 0 : _sideMenuRef_current.firstChild) && /*#__PURE__*/ (0, external_react_dom_namespaceObject.createPortal)(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(MenuModeContext.Provider, {
+        value: 'inline',
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, {}),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Menu, {
+                mode: 'inline',
+                defaultOpenKeys: defaultOpenKeys,
+                defaultSelectedKeys: defaultSelectedKeys,
+                onSelect: (info)=>{
+                    null == onSelect || onSelect(info);
+                },
+                className: styles.sideMenuClass,
+                items: items
+            })
+        ]
+    }), sideMenuRef.current.firstChild);
+};
+const MenuModeContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)(null);
+MenuModeContext.displayName = 'MenuModeContext';
+const useSideMenuRef = ()=>{
+    var _schema_xcomponentprops;
+    const schema = (0, schema_namespaceObject.useFieldSchema)();
+    const scope = (0, external_react_namespaceObject.useContext)(schema_namespaceObject.SchemaExpressionScopeContext);
+    const scopeKey = null == schema ? void 0 : null === (_schema_xcomponentprops = schema['x-component-props']) || void 0 === _schema_xcomponentprops ? void 0 : _schema_xcomponentprops['sideMenuRefScopeKey'];
+    if (!scopeKey) return;
+    return scope[scopeKey];
+};
+const MenuItemDesignerContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)(null);
+MenuItemDesignerContext.displayName = 'MenuItemDesignerContext';
+const Menu = (0, schema_namespaceObject.observer)((props)=>{
+    const { onSelect, mode, selectedUid, defaultSelectedUid, sideMenuRefScopeKey, defaultSelectedKeys: dSelectedKeys, defaultOpenKeys: dOpenKeys, children, ...others } = (0, useProps_js_namespaceObject.useProps)(props);
+    const { t } = (0, external_react_i18next_namespaceObject.useTranslation)();
+    const Designer = (0, external_index_js_namespaceObject.useDesigner)();
+    const schema = (0, schema_namespaceObject.useFieldSchema)();
+    const { refresh } = (0, external_index_js_namespaceObject.useDesignable)();
+    const api = (0, external_index_js_namespaceObject_1.useAPIClient)();
+    const { render } = (0, external_index_js_namespaceObject_1.useSchemaInitializerRender)(schema['x-initializer'], schema['x-initializer-props']);
+    const sideMenuRef = useSideMenuRef();
+    const [selectedKeys, setSelectedKeys] = (0, external_react_namespaceObject.useState)();
+    const [defaultSelectedKeys, setDefaultSelectedKeys] = (0, external_react_namespaceObject.useState)(()=>{
+        if (dSelectedKeys) return dSelectedKeys;
+        if (defaultSelectedUid) return (0, external_util_js_namespaceObject.findKeysByUid)(schema, defaultSelectedUid);
+        return [];
+    });
+    const [loading, setLoading] = (0, external_react_namespaceObject.useState)(false);
+    const [defaultOpenKeys, setDefaultOpenKeys] = (0, external_react_namespaceObject.useState)(()=>{
+        if ([
+            'inline',
+            'mix'
+        ].includes(mode)) return dOpenKeys || defaultSelectedKeys;
+        return dOpenKeys;
+    });
+    const sideMenuSchema = (0, external_react_namespaceObject.useMemo)(()=>{
+        let key;
+        if (selectedUid) {
+            const keys = (0, external_util_js_namespaceObject.findKeysByUid)(schema, selectedUid);
+            key = (null == keys ? void 0 : keys[0]) || null;
+        } else key = (null == defaultSelectedKeys ? void 0 : defaultSelectedKeys[0]) || null;
+        if ('mix' === mode && key) {
+            var _schema_properties;
+            const s = null === (_schema_properties = schema.properties) || void 0 === _schema_properties ? void 0 : _schema_properties[key];
+            if ((null == s ? void 0 : s['x-component']) === 'Menu.SubMenu') return s;
+        }
+        return null;
+    }, [
+        defaultSelectedKeys,
+        mode,
+        schema,
+        selectedUid
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!selectedUid) {
+            setSelectedKeys(void 0);
+            return;
+        }
+        const keys = (0, external_util_js_namespaceObject.findKeysByUid)(schema, selectedUid);
+        setSelectedKeys(keys);
+        if ([
+            'inline',
+            'mix'
+        ].includes(mode)) setDefaultOpenKeys(dOpenKeys || keys);
+    }, [
+        selectedUid
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if ([
+            'inline',
+            'mix'
+        ].includes(mode)) setDefaultOpenKeys(defaultSelectedKeys);
+    }, [
+        defaultSelectedKeys
+    ]);
+    const { designable } = (0, external_index_js_namespaceObject.useDesignable)();
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject.DndContext, {
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MenuItemDesignerContext.Provider, {
+            value: Designer,
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(MenuModeContext.Provider, {
+                value: mode,
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(HeaderMenu, {
+                        others: others,
+                        schema: schema,
+                        mode: mode,
+                        onSelect: onSelect,
+                        setLoading: setLoading,
+                        setDefaultSelectedKeys: setDefaultSelectedKeys,
+                        defaultSelectedKeys: defaultSelectedKeys,
+                        defaultOpenKeys: defaultOpenKeys,
+                        selectedKeys: selectedKeys,
+                        designable: designable,
+                        render: render,
+                        children: children
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SideMenu, {
+                        loading: loading,
+                        mode: mode,
+                        sideMenuSchema: sideMenuSchema,
+                        sideMenuRef: sideMenuRef,
+                        defaultOpenKeys: defaultOpenKeys,
+                        defaultSelectedKeys: defaultSelectedKeys,
+                        onSelect: onSelect,
+                        render: render,
+                        t: t,
+                        api: api,
+                        refresh: refresh,
+                        designable: designable
+                    })
+                ]
+            })
+        })
+    });
+}, {
+    displayName: 'Menu'
+});
+Menu.Item = (0, schema_namespaceObject.observer)((props)=>{
+    const { t } = (0, external_locale_js_namespaceObject.useMenuTranslation)();
+    const { pushMenuItem } = (0, useMenuItem_js_namespaceObject.useCollectMenuItems)();
+    const { icon, children, ...others } = props;
+    const schema = (0, schema_namespaceObject.useFieldSchema)();
+    const { styles } = (0, external_Menu_styles_js_namespaceObject.useStyles)();
+    const field = (0, schema_namespaceObject.useField)();
+    const Designer = (0, external_react_namespaceObject.useContext)(MenuItemDesignerContext);
+    const item = (0, external_react_namespaceObject.useMemo)(()=>({
+            ...others,
+            className: styles.menuItemClass,
+            key: schema.name,
+            eventKey: schema.name,
+            schema,
+            menu: {
+                icon,
+                field,
+                Designer,
+                schema,
+                styles
+            },
+            label: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(schema_namespaceObject.SchemaContext.Provider, {
+                value: schema,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(schema_namespaceObject.FieldContext.Provider, {
+                    value: field,
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_index_js_namespaceObject.SortableItem, {
+                        role: "button",
+                        "aria-label": t(field.title),
+                        className: styles.designerCss,
+                        removeParentsIfNoChildren: false,
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_1.Icon, {
+                                type: icon
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                style: {
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    display: 'inline-block',
+                                    width: '100%',
+                                    verticalAlign: 'middle'
+                                },
+                                children: t(field.title)
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Designer, {})
+                        ]
+                    })
+                })
+            })
+        }), [
+        field.title,
+        icon,
+        schema,
+        Designer
+    ]);
+    if (!pushMenuItem) {
+        (0, client_namespaceObject.error)('Menu.Item must be wrapped by GetMenuItemsContext.Provider');
+        return null;
+    }
+    pushMenuItem(item);
+    return null;
+}, {
+    displayName: 'Menu.Item'
+});
+Menu.URL = (0, schema_namespaceObject.observer)((props)=>{
+    const { t } = (0, external_locale_js_namespaceObject.useMenuTranslation)();
+    const { pushMenuItem } = (0, useMenuItem_js_namespaceObject.useCollectMenuItems)();
+    const { icon, children, ...others } = props;
+    const schema = (0, schema_namespaceObject.useFieldSchema)();
+    const field = (0, schema_namespaceObject.useField)();
+    const Designer = (0, external_react_namespaceObject.useContext)(MenuItemDesignerContext);
+    const { styles } = (0, external_Menu_styles_js_namespaceObject.useStyles)();
+    if (!pushMenuItem) {
+        (0, client_namespaceObject.error)('Menu.URL must be wrapped by GetMenuItemsContext.Provider');
+        return null;
+    }
+    const item = (0, external_react_namespaceObject.useMemo)(()=>({
+            ...others,
+            className: styles.menuItemClass,
+            key: schema.name,
+            eventKey: schema.name,
+            schema,
+            onClick: ()=>{
+                window.open(props.href, '_blank');
+            },
+            menu: {
+                icon,
+                field,
+                Designer,
+                schema,
+                styles
+            },
+            label: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(schema_namespaceObject.SchemaContext.Provider, {
+                value: schema,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(schema_namespaceObject.FieldContext.Provider, {
+                    value: field,
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_index_js_namespaceObject.SortableItem, {
+                        className: styles.designerCss,
+                        removeParentsIfNoChildren: false,
+                        "aria-label": t(field.title),
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_1.Icon, {
+                                type: icon
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                style: {
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    display: 'inline-block',
+                                    width: '100%',
+                                    verticalAlign: 'middle'
+                                },
+                                children: t(field.title)
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Designer, {})
+                        ]
+                    })
+                })
+            })
+        }), [
+        field.title,
+        icon,
+        props.href,
+        schema,
+        Designer
+    ]);
+    pushMenuItem(item);
+    return null;
+}, {
+    displayName: 'MenuURL'
+});
+Menu.SubMenu = (0, schema_namespaceObject.observer)((props)=>{
+    const { t } = (0, external_locale_js_namespaceObject.useMenuTranslation)();
+    const { Component, getMenuItems } = (0, useMenuItem_js_namespaceObject.useMenuItem)();
+    const { pushMenuItem } = (0, useMenuItem_js_namespaceObject.useCollectMenuItems)();
+    const { icon, children, ...others } = props;
+    const schema = (0, schema_namespaceObject.useFieldSchema)();
+    const field = (0, schema_namespaceObject.useField)();
+    const mode = (0, external_react_namespaceObject.useContext)(MenuModeContext);
+    const Designer = (0, external_react_namespaceObject.useContext)(MenuItemDesignerContext);
+    const { styles } = (0, external_Menu_styles_js_namespaceObject.useStyles)();
+    const submenu = (0, external_react_namespaceObject.useMemo)(()=>({
+            ...others,
+            className: styles.menuItemClass,
+            key: schema.name,
+            eventKey: schema.name,
+            menu: {
+                icon,
+                field,
+                Designer,
+                schema,
+                styles
+            },
+            label: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(schema_namespaceObject.SchemaContext.Provider, {
+                value: schema,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(schema_namespaceObject.FieldContext.Provider, {
+                    value: field,
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_index_js_namespaceObject.SortableItem, {
+                        className: styles.subMenuDesignerCss,
+                        removeParentsIfNoChildren: false,
+                        "aria-label": t(field.title),
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_1.Icon, {
+                                type: icon
+                            }),
+                            t(field.title),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Designer, {})
+                        ]
+                    })
+                })
+            }),
+            children: getMenuItems(()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(schema_namespaceObject.RecursionField, {
+                    schema: schema,
+                    onlyRenderProperties: true
+                }))
+        }), [
+        field.title,
+        icon,
+        schema,
+        children,
+        Designer
+    ]);
+    if (!pushMenuItem) {
+        (0, client_namespaceObject.error)('Menu.SubMenu must be wrapped by GetMenuItemsContext.Provider');
+        return null;
+    }
+    if ('mix' === mode) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Menu.Item, {
+        ...props
+    });
+    pushMenuItem(submenu);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, {});
+}, {
+    displayName: 'Menu.SubMenu'
+});
+Menu.Designer = external_Menu_Designer_js_namespaceObject.MenuDesigner;
+var __webpack_export_target__ = exports;
+for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
+if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+    value: true
+});