amis-ui 2.9.0 → 3.0.0

package/esm/components/condition-builder/Item.js

@@ -1,12 +1,12 @@
 /**
- * amis-ui v2.9.0
+ * amis-ui v3.0.0
  * Copyright 2018-2023 fex
  */
 
 import { __extends, __assign, __decorate, __metadata } from 'tslib';
 import React__default from 'react';
 import { findDOMNode } from 'react-dom';
-import { findTree, noop, autobind, themeable, localeable } from 'amis-core';
+import { findTree, noop, getVariable, autobind, themeable, localeable } from 'amis-core';
 import { Icon } from '../icons.js';
 import Expression from './Expression.js';
 import { OperationMap } from './config.js';
@@ -51,10 +51,10 @@ var ConditionItem = /** @class */ (function (_super) {
         var onChange = this.props.onChange;
         onChange(value, this.props.index);
     };
-    ConditionItem.prototype.handleRightSubChange = function (isCustom, index, rightValue) {
+    ConditionItem.prototype.handleRightSubChange = function (index, rightValue) {
         var _a, _b;
         var origin;
-        if (isCustom) {
+        if (typeof index === 'string') {
             origin = Object.assign({}, (_a = this.props.value) === null || _a === void 0 ? void 0 : _a.right);
             origin[index] = rightValue;
         }
@@ -160,16 +160,16 @@ var ConditionItem = /** @class */ (function (_super) {
         }
         else if (op === 'between' || op === 'not_between') {
             return (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(Expression, { config: config, funcs: funcs, valueField: field, value: (_c = value.right) === null || _c === void 0 ? void 0 : _c[0], data: data, onChange: this.handleRightSubChange.bind(this, false, 0), fields: fields, allowedTypes: (field === null || field === void 0 ? void 0 : field.valueTypes) ||
+                React__default.createElement(Expression, { config: config, funcs: funcs, valueField: field, value: (_c = value.right) === null || _c === void 0 ? void 0 : _c[0], data: data, onChange: this.handleRightSubChange.bind(this, 0), fields: fields, allowedTypes: (field === null || field === void 0 ? void 0 : field.valueTypes) ||
                         config.valueTypes || ['value', 'field', 'func', 'formula'], disabled: disabled, formula: formula, popOverContainer: popOverContainer, renderEtrValue: renderEtrValue }),
                 React__default.createElement("span", { className: cx('CBSeprator') }, "~"),
-                React__default.createElement(Expression, { config: config, funcs: funcs, valueField: field, value: (_d = value.right) === null || _d === void 0 ? void 0 : _d[1], data: data, onChange: this.handleRightSubChange.bind(this, false, 1), fields: fields, allowedTypes: (field === null || field === void 0 ? void 0 : field.valueTypes) ||
+                React__default.createElement(Expression, { config: config, funcs: funcs, valueField: field, value: (_d = value.right) === null || _d === void 0 ? void 0 : _d[1], data: data, onChange: this.handleRightSubChange.bind(this, 1), fields: fields, allowedTypes: (field === null || field === void 0 ? void 0 : field.valueTypes) ||
                         config.valueTypes || ['value', 'field', 'func', 'formula'], disabled: disabled, formula: formula, popOverContainer: popOverContainer, renderEtrValue: renderEtrValue })));
         }
         else if (option && typeof option !== 'string' && option.values) {
             return option.values.map(function (schema, i) {
                 return (React__default.createElement("span", { key: i },
-                    React__default.createElement(Expression, { config: config, op: op, funcs: funcs, valueField: schema, value: value.right, data: data, onChange: _this.handleRightSubChange.bind(_this, true, schema.name), fields: fields, allowedTypes: (field === null || field === void 0 ? void 0 : field.valueTypes) ||
+                    React__default.createElement(Expression, { config: config, op: op, funcs: funcs, valueField: __assign(__assign({}, field), { value: schema }), value: getVariable(value.right, schema.name), data: data, onChange: _this.handleRightSubChange.bind(_this, schema.name), fields: fields, allowedTypes: (field === null || field === void 0 ? void 0 : field.valueTypes) ||
                             config.valueTypes || ['value', 'field', 'func', 'formula'], disabled: disabled, formula: formula, popOverContainer: popOverContainer, renderEtrValue: renderEtrValue })));
             });
         }

package/esm/components/condition-builder/Value.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.9.0
+ * amis-ui v3.0.0
  * Copyright 2018-2023 fex
  */
 
@@ -58,23 +58,14 @@ var Value = /** @class */ (function (_super) {
         }
         else if (field.type === 'custom') {
             input = renderEtrValue
-                ? renderEtrValue(__assign(__assign({}, field.value), { name: field.name }), {
+                ? renderEtrValue(__assign(__assign({}, field.value), { name: 'TMP_WHATEVER_NAME' }), // name 随便输入，应该是 value 传入的为主，目前表单项内部逻辑还有问题先传一个 name
+                {
                     data: data,
                     onChange: onChange,
                     value: value !== null && value !== void 0 ? value : field.defaultValue
                 })
                 : null;
         }
-        else {
-            var res = value !== null && value !== void 0 ? value : field.defaultValue;
-            input = renderEtrValue
-                ? renderEtrValue(field, {
-                    data: data,
-                    onChange: onChange,
-                    value: res ? res[field.name] : res
-                })
-                : null;
-        }
         return React__default.createElement("div", { className: cx('CBValue') }, input);
     };
     return Value;

package/esm/components/condition-builder/config.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.9.0
+ * amis-ui v3.0.0
  * Copyright 2018-2023 fex
  */
 

package/esm/components/condition-builder/index.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.9.0
+ * amis-ui v3.0.0
  * Copyright 2018-2023 fex
  */
 

package/esm/components/condition-builder/types.d.ts

@@ -76,7 +76,7 @@ interface BooleanField extends BaseField {
     type: 'boolean';
     name: string;
 }
-interface CustomField extends BaseField {
+export interface CustomField extends BaseField {
     type: 'custom';
     name: string;
     value: any;

package/esm/components/formula/Editor.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.9.0
+ * amis-ui v3.0.0
  * Copyright 2018-2023 fex
  */
 

package/esm/components/formula/FuncList.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.9.0
+ * amis-ui v3.0.0
  * Copyright 2018-2023 fex
  */
 

package/esm/components/formula/Picker.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.9.0
+ * amis-ui v3.0.0
  * Copyright 2018-2023 fex
  */
 

package/esm/components/formula/VariableList.js

@@ -1,11 +1,11 @@
 /**
- * amis-ui v2.9.0
+ * amis-ui v3.0.0
  * Copyright 2018-2023 fex
  */
 
 import { __read } from 'tslib';
 import React__default from 'react';
-import { themeable, findTree } from 'amis-core';
+import { themeable, findTreeAll } from 'amis-core';
 import GroupedSelection from '../GroupedSelection.js';
 import ThemedTabs, { Tab } from '../Tabs.js';
 import TreeSelection from '../TreeSelection.js';
@@ -33,8 +33,8 @@ function VariableList(props) {
                 (option === null || option === void 0 ? void 0 : option.tag) ? (React__default.createElement("span", { className: cx("".concat(classPrefix, "-item-tag")) }, option.tag)) : null));
         };
     function onSearch(term) {
-        var tree = findTree(list, function (i) { return ~i.label.indexOf(term); });
-        setFilterVars(!term ? list : tree ? [tree] : []);
+        var tree = findTreeAll(list, function (i) { return ~i.label.indexOf(term); });
+        setFilterVars(!term ? list : tree);
     }
     function renderSearchBox() {
         return (React__default.createElement("div", { className: cx('FormulaEditor-VariableList-searchBox') },

package/esm/components/formula/plugin.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.9.0
+ * amis-ui v3.0.0
  * Copyright 2018-2023 fex
  */
 

package/esm/components/icons.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.9.0
+ * amis-ui v3.0.0
  * Copyright 2018-2023 fex
  */
 

package/esm/components/index.d.ts

@@ -62,6 +62,8 @@ import SchemaVariableListPicker from './schema-editor/SchemaVariableListPicker';
 import SchemaVariableList from './schema-editor/SchemaVariableList';
 import VariableList from './formula/VariableList';
 import FormulaPicker from './formula/Picker';
+import { FormulaEditor } from './formula/Editor';
+import type { VariableItem } from './formula/Editor';
 import PickerContainer from './PickerContainer';
 import InputJSONSchema from './json-schema';
 import { Badge, withBadge } from './Badge';
@@ -111,4 +113,6 @@ import ConfirmBox from './ConfirmBox';
 import DndContainer from './DndContainer';
 import Menu from './menu';
 import InputBoxWithSuggestion from './InputBoxWithSuggestion';
-export { NotFound, Alert as AlertComponent, alert, Avatar, confirm, prompt, setRenderSchemaFn, ContextMenu, openContextMenus, Alert2, AsideNav, Button, Breadcrumb, Checkbox, Checkboxes, Collapse, CollapseGroup, DatePicker, DateRangePicker, Drawer, Tabs, Tab, Editor, Html, Icons, Layout, LazyComponent, Modal, Overlay, PopOver, Radios, Range, Rating, Select, SparkLine, Spinner, SpinnerExtraProps, Switch, Textarea, TitleBar, ToastComponent, toast, Tooltip, TooltipWrapper, Tree, Transfer, TabsTransfer, Selection, GroupedSelection, ChainedSelection, TableSelection, TreeSelection, AssociatedSelection, ResultBox, InputBox, InputBoxWithSuggestion, SearchBox, ListGroup, NumberInput, ArrayInput, PullRefresh, Table, SchemaVariableListPicker, SchemaVariableList, VariableList, PickerContainer, ConfirmBox, FormulaPicker, InputJSONSchema, withBadge, BadgeObject, Icon, withRemoteConfig, RemoteOptionsProps, ConditionBuilder, ConditionBuilderFuncs, ConditionBuilderFields, ConditionBuilderConfig, CityArea, PresetColor, ListMenu, Input, JSONSchemaEditor, LocationPicker, PopUp, Cascader, TransferDropDown, TabsTransferPicker, ResultList, TransferPicker, UserSelect, UserTabSelect, getIcon, registerIcon, Badge, HeadCellDropDown, AnchorNav, AnchorNavSection, Card, GridNavDirection, GridNav, GridNavItem, Link, VirtualList, AutoSizer, withStore, PopOverContainer, Pagination, Progress, Steps, StepStatus, Tag, Timeline, ImageGallery, BaiduMapPicker, MultilineText, Form, FormField, Controller, Combo, InputTable, InputTableColumnProps, DndContainer, Menu };
+import { CodeMirrorEditor } from './CodeMirror';
+import type CodeMirror from 'codemirror';
+export { NotFound, Alert as AlertComponent, alert, Avatar, confirm, prompt, setRenderSchemaFn, ContextMenu, openContextMenus, Alert2, AsideNav, Button, Breadcrumb, Checkbox, Checkboxes, Collapse, CollapseGroup, DatePicker, DateRangePicker, Drawer, Tabs, Tab, Editor, Html, Icons, Layout, LazyComponent, Modal, Overlay, PopOver, Radios, Range, Rating, Select, SparkLine, Spinner, SpinnerExtraProps, Switch, Textarea, TitleBar, ToastComponent, toast, Tooltip, TooltipWrapper, Tree, Transfer, TabsTransfer, Selection, GroupedSelection, ChainedSelection, TableSelection, TreeSelection, AssociatedSelection, ResultBox, InputBox, InputBoxWithSuggestion, SearchBox, ListGroup, NumberInput, ArrayInput, PullRefresh, Table, SchemaVariableListPicker, SchemaVariableList, VariableList, PickerContainer, ConfirmBox, FormulaPicker, VariableItem, FormulaEditor, InputJSONSchema, withBadge, BadgeObject, Icon, withRemoteConfig, RemoteOptionsProps, ConditionBuilder, ConditionBuilderFuncs, ConditionBuilderFields, ConditionBuilderConfig, CityArea, PresetColor, ListMenu, Input, JSONSchemaEditor, LocationPicker, PopUp, Cascader, TransferDropDown, TabsTransferPicker, ResultList, TransferPicker, UserSelect, UserTabSelect, getIcon, registerIcon, Badge, HeadCellDropDown, AnchorNav, AnchorNavSection, Card, GridNavDirection, GridNav, GridNavItem, Link, VirtualList, AutoSizer, withStore, PopOverContainer, Pagination, Progress, Steps, StepStatus, Tag, Timeline, ImageGallery, BaiduMapPicker, MultilineText, Form, FormField, Controller, Combo, InputTable, InputTableColumnProps, DndContainer, Menu, CodeMirror, CodeMirrorEditor };

package/esm/components/json-schema/Array.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.9.0
+ * amis-ui v3.0.0
  * Copyright 2018-2023 fex
  */
 

package/esm/components/json-schema/Item.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.9.0
+ * amis-ui v3.0.0
  * Copyright 2018-2023 fex
  */
 

package/esm/components/json-schema/Object.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.9.0
+ * amis-ui v3.0.0
  * Copyright 2018-2023 fex
  */
 

package/esm/components/json-schema/index.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.9.0
+ * amis-ui v3.0.0
  * Copyright 2018-2023 fex
  */
 

package/esm/components/menu/MenuContext.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.9.0
+ * amis-ui v3.0.0
  * Copyright 2018-2023 fex
  */
 

package/esm/components/menu/MenuItem.d.ts

@@ -38,9 +38,6 @@ export declare class MenuItem extends React.Component<MenuItemProps> {
      * @memberof MenuItem
      */
     internalProps: string[];
-    getDynamicStyle(hasIcon: boolean): {
-        maxWidth: string;
-    };
     /** 检查icon参数值是否为文件路径 */
     isImgPath(raw: string): boolean;
     renderMenuItem(): JSX.Element;

package/esm/components/menu/MenuItem.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.9.0
+ * amis-ui v3.0.0
  * Copyright 2018-2023 fex
  */
 
@@ -41,24 +41,6 @@ var MenuItem = /** @class */ (function (_super) {
         ];
         return _this;
     }
-    MenuItem.prototype.getDynamicStyle = function (hasIcon) {
-        var _a = this.context, stacked = _a.stacked, _b = _a.inlineIndent, inlineIndent = _b === void 0 ? 16 : _b;
-        var depth = this.props.depth;
-        var isHorizontal = !stacked;
-        var defaultIndentWidth = typeof inlineIndent === 'number' ? inlineIndent : 16;
-        var indentWidth = "(\n      ".concat(hasIcon ? 'var(--Menu-icon-size) + var(--gap-sm) +' : '', "\n      ").concat(depth === 1
-            ? isHorizontal
-                ? 'var(--Menu-Submenu-title-paddingX) * 2'
-                : '0px'
-            : isHorizontal
-                ? "var(--Menu-Submenu-title-paddingX) + ".concat(defaultIndentWidth, "px")
-                : "".concat(defaultIndentWidth, "px"), "\n    )");
-        return {
-            maxWidth: isHorizontal
-                ? "calc(var(--Menu-width) - ".concat(indentWidth, ")")
-                : "calc(100% - ".concat(indentWidth, ")")
-        };
-    };
     /** 检查icon参数值是否为文件路径 */
     MenuItem.prototype.isImgPath = function (raw) {
         return (typeof raw === 'string' &&
@@ -80,12 +62,11 @@ var MenuItem = /** @class */ (function (_super) {
         })) : null) : null;
         var labelNode = label && (typeof label === 'string' || Array.isArray(label)) ? (React__default.createElement("span", { className: cx("Nav-Menu-item-label", (_c = {},
                 _c['Nav-Menu-item-label-collapsed'] = isCollapsedNode,
-                _c)), title: isCollapsedNode || Array.isArray(label) ? '' : label, style: this.getDynamicStyle(!!iconNode) }, isCollapsedNode ? label.slice(0, 1) : label)) : React__default.isValidElement(label) ? (React__default.cloneElement(label, {
+                _c)), title: isCollapsedNode || Array.isArray(label) ? '' : label }, isCollapsedNode ? label.slice(0, 1) : label)) : React__default.isValidElement(label) ? (React__default.cloneElement(label, {
             className: cx('Nav-Menu-item-label', (_f = label === null || label === void 0 ? void 0 : label.props) === null || _f === void 0 ? void 0 : _f.className, (_d = {},
                 _d['Nav-Menu-item-label-collapsed'] = isCollapsedNode,
                 _d['Nav-Menu-item-label-subTitle'] = !isCollapsedNode,
-                _d)),
-            style: this.getDynamicStyle(!!iconNode)
+                _d))
         })) : null;
         var dragNode = !disabled && stacked && mode === 'inline' && !collapsed && draggable ? (React__default.createElement("span", { className: cx('Nav-Menu-item-dragBar'), draggable: true },
             React__default.createElement(DragIcon, null))) : null;
@@ -104,7 +85,7 @@ var MenuItem = /** @class */ (function (_super) {
     };
     MenuItem.prototype.render = function () {
         var _a;
-        var _b = this.props, className = _b.className, tooltipClassName = _b.tooltipClassName, cx = _b.classnames, label = _b.label, disabled = _b.disabled, disabledTip = _b.disabledTip, tooltipContainer = _b.tooltipContainer, tooltipTrigger = _b.tooltipTrigger, depth = _b.depth, hidden = _b.hidden, order = _b.order, overflowedIndicator = _b.overflowedIndicator, overflowMaxCount = _b.overflowMaxCount;
+        var _b = this.props, tooltipClassName = _b.tooltipClassName, cx = _b.classnames, label = _b.label, disabled = _b.disabled, disabledTip = _b.disabledTip, tooltipContainer = _b.tooltipContainer, tooltipTrigger = _b.tooltipTrigger, depth = _b.depth, hidden = _b.hidden, order = _b.order, overflowedIndicator = _b.overflowedIndicator, overflowMaxCount = _b.overflowMaxCount;
         var _c = this.context, collapsed = _c.collapsed, mode = _c.mode, stacked = _c.stacked, themeColor = _c.themeColor, direction = _c.direction;
         var showToolTip = stacked && mode === 'inline' && collapsed && depth === 1;
         var isMaxOverflow = overflowedIndicator && overflowMaxCount;
@@ -116,7 +97,7 @@ var MenuItem = /** @class */ (function (_super) {
                 _a['Nav-Menu-item-tooltip-dark'] = themeColor === 'dark',
                 _a)), placement: direction === 'rtl' ? 'left' : 'right', tooltip: disabled ? disabledTip : showToolTip ? label : '', container: tooltipContainer, trigger: tooltipTrigger, rootClose: true },
             React__default.createElement("ul", { className: cx('Nav-Menu-item-tooltip-wrap'), style: isMaxOverflow ? {} : { order: order } },
-                React__default.createElement(Item, __assign({}, pick(this.props, this.internalProps), { className: cx(className) }), this.renderMenuItem()))));
+                React__default.createElement(Item, __assign({}, pick(this.props, this.internalProps)), this.renderMenuItem()))));
     };
     MenuItem.defaultProps = {
         disabled: false,

package/esm/components/menu/SubMenu.d.ts

@@ -42,9 +42,6 @@ export declare class SubMenu extends React.Component<SubMenuProps> {
      */
     internalProps: string[];
     handleSubmenuTitleActived({ key, domEvent }: MenuItemTitleInfo): void;
-    getDynamicStyle(hasIcon: boolean): {
-        maxWidth: string;
-    };
     /** 检查icon参数值是否为文件路径 */
     isImgPath(raw: string): boolean;
     renderSubMenuTitle(): JSX.Element;

package/esm/components/menu/SubMenu.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.9.0
+ * amis-ui v3.0.0
  * Copyright 2018-2023 fex
  */
 
@@ -54,21 +54,6 @@ var SubMenu = /** @class */ (function (_super) {
         var _b = this.context, onSubmenuClick = _b.onSubmenuClick, stacked = _b.stacked;
         stacked && (onSubmenuClick === null || onSubmenuClick === void 0 ? void 0 : onSubmenuClick({ key: key, domEvent: domEvent, props: this.props }));
     };
-    SubMenu.prototype.getDynamicStyle = function (hasIcon) {
-        var stacked = this.context.stacked;
-        var depth = this.props.depth;
-        var isHorizontal = !stacked;
-        var indentWidth = "(\n      ".concat(hasIcon ? 'var(--Menu-icon-size) + var(--gap-sm) +' : '', "\n      ").concat(isHorizontal
-            ? 'var(--Menu-Submenu-title-paddingX) * 2'
-            : depth === 1
-                ? '0px'
-                : 'var(--Menu-Submenu-title-paddingX)', "\n    )");
-        return {
-            maxWidth: isHorizontal
-                ? "calc(var(--Menu-width) - ".concat(indentWidth, ")")
-                : "calc(100% - ".concat(indentWidth, ")")
-        };
-    };
     /** 检查icon参数值是否为文件路径 */
     SubMenu.prototype.isImgPath = function (raw) {
         return (typeof raw === 'string' &&
@@ -78,28 +63,27 @@ var SubMenu = /** @class */ (function (_super) {
         var _a, _b, _c, _d;
         var _e, _f;
         var _g = this.context, collapsed = _g.collapsed, stacked = _g.stacked, mode = _g.mode, draggable = _g.draggable, onDragStart = _g.onDragStart;
-        var _h = this.props, cx = _h.classnames, id = _h.id, label = _h.label, icon = _h.icon, path = _h.path, depth = _h.depth, badge = _h.badge, badgeClassName = _h.badgeClassName, disabled = _h.disabled, defaultData = _h.data, extra = _h.extra, renderLink = _h.renderLink;
+        var _h = this.props, cx = _h.classnames, id = _h.id, label = _h.label, labelExtra = _h.labelExtra, icon = _h.icon, path = _h.path, depth = _h.depth, badge = _h.badge, badgeClassName = _h.badgeClassName, disabled = _h.disabled, defaultData = _h.data, extra = _h.extra, renderLink = _h.renderLink;
         var isCollapsedNode = collapsed && depth === 1;
         var link = renderLink && typeof renderLink === 'function'
             ? renderLink(this.props)
             : path || '';
-        var iconNode = icon ? (typeof icon === 'string' ? (this.isImgPath(icon) ? (React__default.createElement("div", { className: cx("Menu-item-icon") },
-            React__default.createElement("img", { width: "14px", src: icon }))) : (React__default.createElement("i", { key: "icon", className: cx("Menu-item-icon", icon, (_a = {},
-                _a['Menu-item-icon-collapsed'] = isCollapsedNode,
+        var iconNode = icon ? (typeof icon === 'string' ? (this.isImgPath(icon) ? (React__default.createElement("div", { className: cx("Nav-Menu-item-icon") },
+            React__default.createElement("img", { width: "14px", src: icon }))) : (React__default.createElement("i", { key: "icon", className: cx("Nav-Menu-item-icon", icon, (_a = {},
+                _a['Nav-Menu-item-icon-collapsed'] = isCollapsedNode,
                 _a)) }))) : React__default.isValidElement(icon) ? (React__default.cloneElement(icon, {
-            className: cx("Menu-item-icon", (_e = icon.props) === null || _e === void 0 ? void 0 : _e.className, (_b = {},
-                _b['Menu-item-icon-svg-collapsed'] = isCollapsedNode,
+            className: cx("Nav-Menu-item-icon", (_e = icon.props) === null || _e === void 0 ? void 0 : _e.className, (_b = {},
+                _b['Nav-Menu-item-icon-svg-collapsed'] = isCollapsedNode,
                 _b))
         })) : null) : null;
         var labelNode = label && (typeof label === 'string' || Array.isArray(label)) ? (React__default.createElement("span", { className: cx('Nav-Menu-item-label', (_c = {},
                 _c['Nav-Menu-item-label-collapsed'] = isCollapsedNode,
                 _c['Nav-Menu-item-label-subTitle'] = !isCollapsedNode,
-                _c)), title: isCollapsedNode || Array.isArray(label) ? '' : label, style: this.getDynamicStyle(!!iconNode) }, isCollapsedNode ? label.slice(0, 1) : label)) : React__default.isValidElement(label) ? (React__default.cloneElement(label, {
+                _c)), title: isCollapsedNode || Array.isArray(label) ? '' : label }, isCollapsedNode ? label.slice(0, 1) : label)) : React__default.isValidElement(label) ? (React__default.cloneElement(label, {
             className: cx('Nav-Menu-item-label', (_f = label === null || label === void 0 ? void 0 : label.props) === null || _f === void 0 ? void 0 : _f.className, (_d = {},
                 _d['Nav-Menu-item-label-collapsed'] = isCollapsedNode,
                 _d['Nav-Menu-item-label-subTitle'] = !isCollapsedNode,
-                _d)),
-            style: this.getDynamicStyle(!!iconNode)
+                _d))
         })) : null;
         var dragNode = !disabled && stacked && mode === 'inline' && !collapsed && draggable ? (React__default.createElement("span", { className: cx('Nav-Menu-item-dragBar'), draggable: true },
             React__default.createElement(DragIcon, null))) : null;
@@ -108,7 +92,8 @@ var SubMenu = /** @class */ (function (_super) {
                 dragNode,
                 iconNode,
                 labelNode,
-                !stacked ? (React__default.createElement("span", { key: "expand-toggle", className: cx('Nav-Menu-submenu-arrow') },
+                labelExtra,
+                !stacked && depth === 1 ? (React__default.createElement("span", { key: "expand-toggle", className: cx('Nav-Menu-submenu-arrow') },
                     React__default.createElement(Icon, { icon: "right-arrow-bold", className: "icon" }))) : null));
         };
         return (React__default.createElement("div", { className: cx('Nav-Menu-item-wrap') },
@@ -119,11 +104,11 @@ var SubMenu = /** @class */ (function (_super) {
     };
     SubMenu.prototype.render = function () {
         var _a, _b;
-        var _c = this.props, className = _c.className, popupClassName = _c.popupClassName, cx = _c.classnames, hidden = _c.hidden;
+        var _c = this.props, popupClassName = _c.popupClassName, cx = _c.classnames, hidden = _c.hidden;
         var isDarkTheme = this.context.themeColor === 'dark';
         return hidden ? null : (React__default.createElement(SubMenu$2, __assign({}, pick(this.props, this.internalProps), { className: cx('Nav-Menu-submenu', (_a = {},
                 _a['Nav-Menu-submenu-dark'] = isDarkTheme,
-                _a), className), popupClassName: cx('Nav-Menu-submenu-popup', (_b = {},
+                _a)), popupClassName: cx('Nav-Menu-submenu-popup', (_b = {},
                 _b['Nav-Menu-submenu-popup-dark'] = isDarkTheme,
                 _b), popupClassName), title: this.renderSubMenuTitle(), onTitleClick: this.handleSubmenuTitleActived })));
     };