xmlui 0.10.13 → 0.10.15

package/dist/scripts/src/components/NavGroup/NavGroupNative.js

@@ -37,7 +37,7 @@ exports.defaultProps = {
     iconVerticalCollapsed: "chevronright",
 };
 exports.NavGroup = (0, react_1.forwardRef)(function NavGroup(_a, ref) {
-    var { node, style, label, icon, renderChild, to, disabled = false, initiallyExpanded, iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded } = _a, rest = __rest(_a, ["node", "style", "label", "icon", "renderChild", "to", "disabled", "initiallyExpanded", "iconHorizontalCollapsed", "iconHorizontalExpanded", "iconVerticalCollapsed", "iconVerticalExpanded"]);
+    var { node, style, label, icon, renderChild, to, disabled = false, initiallyExpanded = false, iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded } = _a, rest = __rest(_a, ["node", "style", "label", "icon", "renderChild", "to", "disabled", "initiallyExpanded", "iconHorizontalCollapsed", "iconHorizontalExpanded", "iconVerticalCollapsed", "iconVerticalExpanded"]);
     const { level } = (0, react_1.useContext)(NavGroupContext_1.NavGroupContext);
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const navPanelContext = (0, react_1.useContext)(NavPanelNative_1.NavPanelContext);
@@ -54,7 +54,9 @@ exports.NavGroup = (0, react_1.forwardRef)(function NavGroup(_a, ref) {
             layoutIsVertical,
             iconHorizontalCollapsed: iconHorizontalCollapsed !== null && iconHorizontalCollapsed !== void 0 ? iconHorizontalCollapsed : exports.defaultProps.iconHorizontalCollapsed,
             iconHorizontalExpanded: iconHorizontalExpanded !== null && iconHorizontalExpanded !== void 0 ? iconHorizontalExpanded : exports.defaultProps.iconHorizontalExpanded,
-            iconVerticalCollapsed: iconVerticalCollapsed !== null && iconVerticalCollapsed !== void 0 ? iconVerticalCollapsed : exports.defaultProps.iconVerticalCollapsed,
+            iconVerticalCollapsed: iconVerticalCollapsed !== null && iconVerticalCollapsed !== void 0 ? iconVerticalCollapsed : (level < 0 && !inline
+                ? exports.defaultProps.iconVerticalExpanded
+                : exports.defaultProps.iconVerticalCollapsed),
             iconVerticalExpanded: iconVerticalExpanded !== null && iconVerticalExpanded !== void 0 ? iconVerticalExpanded : exports.defaultProps.iconVerticalExpanded,
         };
     }, [
@@ -64,8 +66,9 @@ exports.NavGroup = (0, react_1.forwardRef)(function NavGroup(_a, ref) {
         iconVerticalExpanded,
         level,
         layoutIsVertical,
+        inline,
     ]);
-    return ((0, jsx_runtime_1.jsx)(NavGroupContext_1.NavGroupContext.Provider, { value: navGroupContextValue, children: inline ? ((0, jsx_runtime_1.jsx)(ExpandableNavGroup, Object.assign({}, rest, { to: to, style: style, label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, initiallyExpanded: initiallyExpanded, disabled: disabled }))) : ((0, jsx_runtime_1.jsx)(DropDownNavGroup, Object.assign({}, rest, { label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, to: to, disabled: disabled }))) }));
+    return ((0, jsx_runtime_1.jsx)(NavGroupContext_1.NavGroupContext.Provider, { value: navGroupContextValue, children: inline ? ((0, jsx_runtime_1.jsx)(ExpandableNavGroup, Object.assign({}, rest, { to: to, style: style, label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, initiallyExpanded: initiallyExpanded, disabled: disabled }))) : ((0, jsx_runtime_1.jsx)(DropDownNavGroup, Object.assign({}, rest, { label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, to: to, initiallyExpanded: initiallyExpanded, disabled: disabled }))) }));
 });
 const ExpandableNavGroup = (0, react_1.forwardRef)(function ExpandableNavGroup(_a, ref) {
     var { style = constants_1.EMPTY_OBJECT, label, icon, renderChild, node, to, initiallyExpanded = false, disabled = false } = _a, rest = __rest(_a, ["style", "label", "icon", "renderChild", "node", "to", "initiallyExpanded", "disabled"]);
@@ -80,12 +83,12 @@ const ExpandableNavGroup = (0, react_1.forwardRef)(function ExpandableNavGroup(_
         }
     }, [pathname]);
     const toggleStyle = Object.assign(Object.assign({}, style), { "--nav-link-level": layoutIsVertical ? level : 0 });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, Object.assign({}, rest, { style: toggleStyle, onClick: () => setExpanded((prev) => !prev), icon: icon, to: to, disabled: disabled, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed })] })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavGroup_module_scss_1.default.groupContent, {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, Object.assign({}, rest, { style: toggleStyle, onClick: () => setExpanded((prev) => !prev), icon: icon, to: to, disabled: disabled, "aria-expanded": expanded, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed })] })), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": !expanded, className: (0, classnames_1.default)(NavGroup_module_scss_1.default.groupContent, {
                     [NavGroup_module_scss_1.default.expanded]: expanded,
                 }), children: (0, jsx_runtime_1.jsx)("div", { className: NavGroup_module_scss_1.default.groupContentInner, ref: groupContentInnerRef, children: renderChild(node.children) }) })] }));
 });
 const DropDownNavGroup = (0, react_1.forwardRef)(function DropDownNavGroup(_a, ref) {
-    var { label, icon, renderChild, node, to, disabled = false } = _a, rest = __rest(_a, ["label", "icon", "renderChild", "node", "to", "disabled"]);
+    var { label, icon, renderChild, node, to, disabled = false, initiallyExpanded = false } = _a, rest = __rest(_a, ["label", "icon", "renderChild", "node", "to", "disabled", "initiallyExpanded"]);
     const { level, iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, } = (0, react_1.useContext)(NavGroupContext_1.NavGroupContext);
     const { root } = (0, ThemeContext_1.useTheme)();
     let Wrapper = react_dropdown_menu_1.DropdownMenu;
@@ -96,8 +99,13 @@ const DropDownNavGroup = (0, react_1.forwardRef)(function DropDownNavGroup(_a, r
         Trigger = react_dropdown_menu_1.DropdownMenuSubTrigger;
         Content = react_dropdown_menu_1.DropdownMenuSubContent;
     }
-    const [expanded, setExpanded] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, Object.assign({}, rest, { onOpenChange: (open) => setExpanded(open), children: [(0, jsx_runtime_1.jsx)(Trigger, { asChild: true, disabled: disabled, children: (0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, { icon: icon, style: { flexShrink: 0 }, vertical: level >= 1, to: to, disabled: disabled, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), level === 0 && (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconVerticalExpanded }), level >= 1 && ((0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconHorizontalExpanded : iconHorizontalCollapsed }))] }) }), (0, jsx_runtime_1.jsx)(react_dropdown_menu_1.DropdownMenuPortal, { container: root, children: (0, jsx_runtime_1.jsx)(Content, { className: NavGroup_module_scss_1.default.dropdownList, style: { display: "flex", flexDirection: "column" }, side: "bottom", align: "start", children: renderChild(node.children, {
+    const [expanded, setExpanded] = (0, react_1.useState)(initiallyExpanded);
+    const [renderCount, setRenderCount] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => setRenderCount(true), []);
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, Object.assign({}, rest, { open: expanded, onOpenChange: (open) => {
+            if (renderCount)
+                setExpanded(open);
+        }, children: [(0, jsx_runtime_1.jsx)(Trigger, { asChild: true, disabled: disabled, children: (0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, { icon: icon, style: { flexShrink: 0 }, vertical: level >= 1, to: to, disabled: disabled, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), level === 0 && (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed }), level >= 1 && ((0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconHorizontalExpanded : iconHorizontalCollapsed }))] }) }), (0, jsx_runtime_1.jsx)(react_dropdown_menu_1.DropdownMenuPortal, { container: root, children: (0, jsx_runtime_1.jsx)(Content, { className: NavGroup_module_scss_1.default.dropdownList, style: { display: "flex", flexDirection: "column" }, side: "bottom", align: "start", children: renderChild(node.children, {
                         wrapChild: ({ node }, renderedChild, hints) => {
                             if (hints === null || hints === void 0 ? void 0 : hints.opaque) {
                                 return renderedChild;