xmlui 0.9.34 → 0.9.36

package/dist/metadata/xmlui-metadata.umd.js

@@ -485,10 +485,10 @@
     };
   }
   const themeVars$L = `'{"size-Icon": "var(--xmlui-size-Icon)", "thickness-stroke-Icon": "var(--xmlui-thickness-stroke-Icon)"}'`;
-  const base$2 = "_base_13qtg_13";
+  const base$1 = "_base_13qtg_13";
   const styles$N = {
     themeVars: themeVars$L,
-    base: base$2
+    base: base$1
   };
   function capitalizeFirstLetter(str) {
     return str[0].toUpperCase() + str.substring(1);
@@ -1203,7 +1203,7 @@
     }
   });
   const themeVars$K = '"[]"';
-  const base$1 = "_base_724s4_13";
+  const base = "_base_724s4_13";
   const hoverContainer = "_hoverContainer_724s4_22";
   const handlesClick = "_handlesClick_724s4_35";
   const vertical$4 = "_vertical_724s4_39";
@@ -1220,7 +1220,7 @@
   const alignItemsBaseline = "_alignItemsBaseline_724s4_88";
   const styles$M = {
     themeVars: themeVars$K,
-    base: base$1,
+    base,
     hoverContainer,
     handlesClick,
     vertical: vertical$4,
@@ -1624,17 +1624,18 @@
     return element.props.ref || element.ref;
   }
   const themeVars$H = `'{"textColor-FormItemLabel": "var(--xmlui-textColor-FormItemLabel)", "fontFamily-FormItemLabel": "var(--xmlui-fontFamily-FormItemLabel)", "fontSize-FormItemLabel": "var(--xmlui-fontSize-FormItemLabel)", "fontWeight-FormItemLabel": "var(--xmlui-fontWeight-FormItemLabel)", "fontStyle-FormItemLabel": "var(--xmlui-fontStyle-FormItemLabel)", "textTransform-FormItemLabel": "var(--xmlui-textTransform-FormItemLabel)", "textColor-FormItemLabel-required": "var(--xmlui-textColor-FormItemLabel-required)", "fontSize-FormItemLabel-required": "var(--xmlui-fontSize-FormItemLabel-required)", "fontWeight-FormItemLabel-required": "var(--xmlui-fontWeight-FormItemLabel-required)", "fontStyle-FormItemLabel-required": "var(--xmlui-fontStyle-FormItemLabel-required)", "textTransform-FormItemLabel-required": "var(--xmlui-textTransform-FormItemLabel-required)", "textColor-FormItemLabel-requiredMark": "var(--xmlui-textColor-FormItemLabel-requiredMark)"}'`;
-  const container$3 = "_container_rshqv_13";
-  const top = "_top_rshqv_20";
-  const end = "_end_rshqv_25";
-  const bottom = "_bottom_rshqv_31";
-  const start = "_start_rshqv_36";
-  const shrinkToLabel = "_shrinkToLabel_rshqv_42";
-  const inputLabel = "_inputLabel_rshqv_45";
-  const disabled$8 = "_disabled_rshqv_58";
-  const labelBreak = "_labelBreak_rshqv_62";
-  const required = "_required_rshqv_66";
-  const requiredMark = "_requiredMark_rshqv_73";
+  const container$3 = "_container_rso68_13";
+  const top = "_top_rso68_20";
+  const end = "_end_rso68_25";
+  const bottom = "_bottom_rso68_31";
+  const start = "_start_rso68_36";
+  const shrinkToLabel = "_shrinkToLabel_rso68_42";
+  const itemWithLabel = "_itemWithLabel_rso68_45";
+  const inputLabel = "_inputLabel_rso68_48";
+  const disabled$8 = "_disabled_rso68_61";
+  const labelBreak = "_labelBreak_rso68_65";
+  const required = "_required_rso68_69";
+  const requiredMark = "_requiredMark_rso68_76";
   const styles$I = {
     themeVars: themeVars$H,
     container: container$3,
@@ -1643,6 +1644,7 @@
     bottom,
     start,
     shrinkToLabel,
+    itemWithLabel,
     inputLabel,
     disabled: disabled$8,
     labelBreak,
@@ -1705,7 +1707,7 @@
     if (label2 === void 0 && !validationResult) {
       return /* @__PURE__ */ jsxRuntime.jsx(Slot, { style, id: inputId, ref, children });
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style, ref, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style, ref, className: styles$I.itemWithLabel, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -3219,23 +3221,19 @@
       }
     );
   });
-  const themeVars$C = `'{"padding-NavLink": "var(--xmlui-padding-NavLink)", "paddingHorizontal-NavLink": "var(--xmlui-paddingHorizontal-NavLink, var(--xmlui-padding-NavLink))", "paddingVertical-NavLink": "var(--xmlui-paddingVertical-NavLink, var(--xmlui-padding-NavLink))", "paddingLeft-NavLink": "var(--xmlui-paddingLeft-NavLink, var(--xmlui-paddingHorizontal-NavLink, var(--xmlui-padding-NavLink)))", "paddingRight-NavLink": "var(--xmlui-paddingRight-NavLink, var(--xmlui-paddingHorizontal-NavLink, var(--xmlui-padding-NavLink)))", "paddingTop-NavLink": "var(--xmlui-paddingTop-NavLink, var(--xmlui-paddingVertical-NavLink, var(--xmlui-padding-NavLink)))", "paddingBottom-NavLink": "var(--xmlui-paddingBottom-NavLink, var(--xmlui-paddingVertical-NavLink, var(--xmlui-padding-NavLink)))", "border-NavLink": "var(--xmlui-border-NavLink)", "borderHorizontal-NavLink": "var(--xmlui-borderHorizontal-NavLink, var(--xmlui-border-NavLink))", "borderVertical-NavLink": "var(--xmlui-borderVertical-NavLink, var(--xmlui-border-NavLink))", "borderLeft-NavLink": "var(--xmlui-borderLeft-NavLink, var(--xmlui-borderHorizontal-NavLink, var(--xmlui-border-NavLink)))", "borderRight-NavLink": "var(--xmlui-borderRight-NavLink, var(--xmlui-borderHorizontal-NavLink, var(--xmlui-border-NavLink)))", "borderTop-NavLink": "var(--xmlui-borderTop-NavLink, var(--xmlui-borderVertical-NavLink, var(--xmlui-border-NavLink)))", "borderBottom-NavLink": "var(--xmlui-borderBottom-NavLink, var(--xmlui-borderVertical-NavLink, var(--xmlui-border-NavLink)))", "borderWidth-NavLink": "var(--xmlui-borderWidth-NavLink)", "borderHorizontalWidth-NavLink": "var(--xmlui-borderHorizontalWidth-NavLink, var(--xmlui-borderWidth-NavLink))", "borderLeftWidth-NavLink": "var(--xmlui-borderLeftWidth-NavLink, var(--xmlui-borderHorizontalWidth-NavLink, var(--xmlui-borderWidth-NavLink)))", "borderRightWidth-NavLink": "var(--xmlui-borderRightWidth-NavLink, var(--xmlui-borderHorizontalWidth-NavLink, var(--xmlui-borderWidth-NavLink)))", "borderVerticalWidth-NavLink": "var(--xmlui-borderVerticalWidth-NavLink, var(--xmlui-borderWidth-NavLink))", "borderTopWidth-NavLink": "var(--xmlui-borderTopWidth-NavLink, var(--xmlui-borderVerticalWidth-NavLink, var(--xmlui-borderWidth-NavLink)))", "borderBottomWidth-NavLink": "var(--xmlui-borderBottomWidth-NavLink, var(--xmlui-borderVerticalWidth-NavLink, var(--xmlui-borderWidth-NavLink)))", "borderStyle-NavLink": "var(--xmlui-borderStyle-NavLink)", "borderHorizontalStyle-NavLink": "var(--xmlui-borderHorizontalStyle-NavLink, var(--xmlui-borderStyle-NavLink))", "borderLeftStyle-NavLink": "var(--xmlui-borderLeftStyle-NavLink, var(--xmlui-borderHorizontalStyle-NavLink, var(--xmlui-borderStyle-NavLink)))", "borderRightStyle-NavLink": "var(--xmlui-borderRightStyle-NavLink, var(--xmlui-borderHorizontalStyle-NavLink, var(--xmlui-borderStyle-NavLink)))", "borderVerticalStyle-NavLink": "var(--xmlui-borderVerticalStyle-NavLink, var(--xmlui-borderStyle-NavLink))", "borderTopStyle-NavLink": "var(--xmlui-borderTopStyle-NavLink, var(--xmlui-borderVerticalStyle-NavLink, var(--xmlui-borderStyle-NavLink)))", "borderBottomStyle-NavLink": "var(--xmlui-borderBottomStyle-NavLink, var(--xmlui-borderVerticalStyle-NavLink, var(--xmlui-borderStyle-NavLink)))", "borderColor-NavLink": "var(--xmlui-borderColor-NavLink)", "borderHorizontalColor-NavLink": "var(--xmlui-borderHorizontalColor-NavLink, var(--xmlui-borderColor-NavLink))", "borderLeftColor-NavLink": "var(--xmlui-borderLeftColor-NavLink, var(--xmlui-borderHorizontalColor-NavLink, var(--xmlui-borderColor-NavLink)))", "borderRightColor-NavLink": "var(--xmlui-borderRightColor-NavLink, var(--xmlui-borderHorizontalColor-NavLink, var(--xmlui-borderColor-NavLink)))", "borderVerticalColor-NavLink": "var(--xmlui-borderVerticalColor-NavLink, var(--xmlui-borderColor-NavLink))", "borderTopColor-NavLink": "var(--xmlui-borderTopColor-NavLink, var(--xmlui-borderVerticalColor-NavLink, var(--xmlui-borderColor-NavLink)))", "borderBottomColor-NavLink": "var(--xmlui-borderBottomColor-NavLink, var(--xmlui-borderVerticalColor-NavLink, var(--xmlui-borderColor-NavLink)))", "borderStartStartRadius-NavLink": "var(--xmlui-borderStartStartRadius-NavLink, var(--xmlui-borderRadius-NavLink))", "borderStartEndRadius-NavLink": "var(--xmlui-borderStartEndRadius-NavLink, var(--xmlui-borderRadius-NavLink))", "borderEndStartRadius-NavLink": "var(--xmlui-borderEndStartRadius-NavLink, var(--xmlui-borderRadius-NavLink))", "borderEndEndRadius-NavLink": "var(--xmlui-borderEndEndRadius-NavLink, var(--xmlui-borderRadius-NavLink))", "backgroundColor-NavLink": "var(--xmlui-backgroundColor-NavLink)", "backgroundColor-NavLink--hover": "var(--xmlui-backgroundColor-NavLink--hover)", "backgroundColor-NavLink--hover--active": "var(--xmlui-backgroundColor-NavLink--hover--active)", "backgroundColor-NavLink--active": "var(--xmlui-backgroundColor-NavLink--active)", "backgroundColor-NavLink--pressed": "var(--xmlui-backgroundColor-NavLink--pressed)", "backgroundColor-NavLink--pressed--active": "var(--xmlui-backgroundColor-NavLink--pressed--active)", "fontSize-NavLink": "var(--xmlui-fontSize-NavLink)", "wordWrap-NavLink": "var(--xmlui-wordWrap-NavLink)", "textColor-NavLink": "var(--xmlui-textColor-NavLink)", "textColor-NavLink--hover": "var(--xmlui-textColor-NavLink--hover)", "textColor-NavLink--active": "var(--xmlui-textColor-NavLink--active)", "textColor-NavLink--hover--active": "var(--xmlui-textColor-NavLink--hover--active)", "textColor-NavLink--pressed": "var(--xmlui-textColor-NavLink--pressed)", "textColor-NavLink--pressed--active": "var(--xmlui-textColor-NavLink--pressed--active)", "color-icon-NavLink": "var(--xmlui-color-icon-NavLink)", "fontFamily-NavLink": "var(--xmlui-fontFamily-NavLink)", "fontWeight-NavLink": "var(--xmlui-fontWeight-NavLink)", "fontWeight-NavLink--pressed": "var(--xmlui-fontWeight-NavLink--pressed)", "fontWeight-NavLink--active": "var(--xmlui-fontWeight-NavLink--active)", "borderRadius-indicator-NavLink": "var(--xmlui-borderRadius-indicator-NavLink)", "thickness-indicator-NavLink": "var(--xmlui-thickness-indicator-NavLink)", "color-indicator-NavLink": "var(--xmlui-color-indicator-NavLink)", "color-indicator-NavLink--hover": "var(--xmlui-color-indicator-NavLink--hover)", "color-indicator-NavLink--active": "var(--xmlui-color-indicator-NavLink--active)", "color-indicator-NavLink--pressed": "var(--xmlui-color-indicator-NavLink--pressed)", "outlineWidth-NavLink--focus": "var(--xmlui-outlineWidth-NavLink--focus)", "outlineColor-NavLink--focus": "var(--xmlui-outlineColor-NavLink--focus)", "outlineStyle-NavLink--focus": "var(--xmlui-outlineStyle-NavLink--focus)", "outlineOffset-NavLink--focus": "var(--xmlui-outlineOffset-NavLink--focus)"}'`;
-  const content$1 = "_content_buj87_13";
-  const base = "_base_buj87_13";
-  const includeHoverIndicator = "_includeHoverIndicator_buj87_62";
-  const displayActive = "_displayActive_buj87_72";
-  const navItemActive = "_navItemActive_buj87_109";
-  const disabled$7 = "_disabled_buj87_144";
-  const vertical$3 = "_vertical_buj87_148";
+  const themeVars$C = `'{"padding-NavLink": "var(--xmlui-padding-NavLink)", "paddingHorizontal-NavLink": "var(--xmlui-paddingHorizontal-NavLink, var(--xmlui-padding-NavLink))", "paddingVertical-NavLink": "var(--xmlui-paddingVertical-NavLink, var(--xmlui-padding-NavLink))", "paddingLeft-NavLink": "var(--xmlui-paddingLeft-NavLink, var(--xmlui-paddingHorizontal-NavLink, var(--xmlui-padding-NavLink)))", "paddingRight-NavLink": "var(--xmlui-paddingRight-NavLink, var(--xmlui-paddingHorizontal-NavLink, var(--xmlui-padding-NavLink)))", "paddingTop-NavLink": "var(--xmlui-paddingTop-NavLink, var(--xmlui-paddingVertical-NavLink, var(--xmlui-padding-NavLink)))", "paddingBottom-NavLink": "var(--xmlui-paddingBottom-NavLink, var(--xmlui-paddingVertical-NavLink, var(--xmlui-padding-NavLink)))", "border-NavLink": "var(--xmlui-border-NavLink)", "borderHorizontal-NavLink": "var(--xmlui-borderHorizontal-NavLink, var(--xmlui-border-NavLink))", "borderVertical-NavLink": "var(--xmlui-borderVertical-NavLink, var(--xmlui-border-NavLink))", "borderLeft-NavLink": "var(--xmlui-borderLeft-NavLink, var(--xmlui-borderHorizontal-NavLink, var(--xmlui-border-NavLink)))", "borderRight-NavLink": "var(--xmlui-borderRight-NavLink, var(--xmlui-borderHorizontal-NavLink, var(--xmlui-border-NavLink)))", "borderTop-NavLink": "var(--xmlui-borderTop-NavLink, var(--xmlui-borderVertical-NavLink, var(--xmlui-border-NavLink)))", "borderBottom-NavLink": "var(--xmlui-borderBottom-NavLink, var(--xmlui-borderVertical-NavLink, var(--xmlui-border-NavLink)))", "borderWidth-NavLink": "var(--xmlui-borderWidth-NavLink)", "borderHorizontalWidth-NavLink": "var(--xmlui-borderHorizontalWidth-NavLink, var(--xmlui-borderWidth-NavLink))", "borderLeftWidth-NavLink": "var(--xmlui-borderLeftWidth-NavLink, var(--xmlui-borderHorizontalWidth-NavLink, var(--xmlui-borderWidth-NavLink)))", "borderRightWidth-NavLink": "var(--xmlui-borderRightWidth-NavLink, var(--xmlui-borderHorizontalWidth-NavLink, var(--xmlui-borderWidth-NavLink)))", "borderVerticalWidth-NavLink": "var(--xmlui-borderVerticalWidth-NavLink, var(--xmlui-borderWidth-NavLink))", "borderTopWidth-NavLink": "var(--xmlui-borderTopWidth-NavLink, var(--xmlui-borderVerticalWidth-NavLink, var(--xmlui-borderWidth-NavLink)))", "borderBottomWidth-NavLink": "var(--xmlui-borderBottomWidth-NavLink, var(--xmlui-borderVerticalWidth-NavLink, var(--xmlui-borderWidth-NavLink)))", "borderStyle-NavLink": "var(--xmlui-borderStyle-NavLink)", "borderHorizontalStyle-NavLink": "var(--xmlui-borderHorizontalStyle-NavLink, var(--xmlui-borderStyle-NavLink))", "borderLeftStyle-NavLink": "var(--xmlui-borderLeftStyle-NavLink, var(--xmlui-borderHorizontalStyle-NavLink, var(--xmlui-borderStyle-NavLink)))", "borderRightStyle-NavLink": "var(--xmlui-borderRightStyle-NavLink, var(--xmlui-borderHorizontalStyle-NavLink, var(--xmlui-borderStyle-NavLink)))", "borderVerticalStyle-NavLink": "var(--xmlui-borderVerticalStyle-NavLink, var(--xmlui-borderStyle-NavLink))", "borderTopStyle-NavLink": "var(--xmlui-borderTopStyle-NavLink, var(--xmlui-borderVerticalStyle-NavLink, var(--xmlui-borderStyle-NavLink)))", "borderBottomStyle-NavLink": "var(--xmlui-borderBottomStyle-NavLink, var(--xmlui-borderVerticalStyle-NavLink, var(--xmlui-borderStyle-NavLink)))", "borderColor-NavLink": "var(--xmlui-borderColor-NavLink)", "borderHorizontalColor-NavLink": "var(--xmlui-borderHorizontalColor-NavLink, var(--xmlui-borderColor-NavLink))", "borderLeftColor-NavLink": "var(--xmlui-borderLeftColor-NavLink, var(--xmlui-borderHorizontalColor-NavLink, var(--xmlui-borderColor-NavLink)))", "borderRightColor-NavLink": "var(--xmlui-borderRightColor-NavLink, var(--xmlui-borderHorizontalColor-NavLink, var(--xmlui-borderColor-NavLink)))", "borderVerticalColor-NavLink": "var(--xmlui-borderVerticalColor-NavLink, var(--xmlui-borderColor-NavLink))", "borderTopColor-NavLink": "var(--xmlui-borderTopColor-NavLink, var(--xmlui-borderVerticalColor-NavLink, var(--xmlui-borderColor-NavLink)))", "borderBottomColor-NavLink": "var(--xmlui-borderBottomColor-NavLink, var(--xmlui-borderVerticalColor-NavLink, var(--xmlui-borderColor-NavLink)))", "borderStartStartRadius-NavLink": "var(--xmlui-borderStartStartRadius-NavLink, var(--xmlui-borderRadius-NavLink))", "borderStartEndRadius-NavLink": "var(--xmlui-borderStartEndRadius-NavLink, var(--xmlui-borderRadius-NavLink))", "borderEndStartRadius-NavLink": "var(--xmlui-borderEndStartRadius-NavLink, var(--xmlui-borderRadius-NavLink))", "borderEndEndRadius-NavLink": "var(--xmlui-borderEndEndRadius-NavLink, var(--xmlui-borderRadius-NavLink))", "outlineWidth-NavLink--focus": "var(--xmlui-outlineWidth-NavLink--focus)", "outlineColor-NavLink--focus": "var(--xmlui-outlineColor-NavLink--focus)", "outlineStyle-NavLink--focus": "var(--xmlui-outlineStyle-NavLink--focus)", "outlineOffset-NavLink--focus": "var(--xmlui-outlineOffset-NavLink--focus)", "fontFamily-NavLink": "var(--xmlui-fontFamily-NavLink)", "fontWeight-NavLink": "var(--xmlui-fontWeight-NavLink)", "fontWeight-NavLink--pressed": "var(--xmlui-fontWeight-NavLink--pressed)", "fontWeight-NavLink--active": "var(--xmlui-fontWeight-NavLink--active)", "fontSize-NavLink": "var(--xmlui-fontSize-NavLink)", "wordWrap-NavLink": "var(--xmlui-wordWrap-NavLink)", "backgroundColor-NavLink": "var(--xmlui-backgroundColor-NavLink)", "backgroundColor-NavLink--hover": "var(--xmlui-backgroundColor-NavLink--hover)", "backgroundColor-NavLink--active": "var(--xmlui-backgroundColor-NavLink--active)", "backgroundColor-NavLink--pressed": "var(--xmlui-backgroundColor-NavLink--pressed)", "textColor-NavLink": "var(--xmlui-textColor-NavLink)", "textColor-NavLink--hover": "var(--xmlui-textColor-NavLink--hover)", "textColor-NavLink--active": "var(--xmlui-textColor-NavLink--active)", "textColor-NavLink--hover--active": "var(--xmlui-textColor-NavLink--hover--active)", "textColor-NavLink--pressed": "var(--xmlui-textColor-NavLink--pressed)", "textColor-NavLink--pressed--active": "var(--xmlui-textColor-NavLink--pressed--active)", "color-icon-NavLink": "var(--xmlui-color-icon-NavLink)", "color-indicator-NavLink": "var(--xmlui-color-indicator-NavLink)", "color-indicator-NavLink--hover": "var(--xmlui-color-indicator-NavLink--hover)", "color-indicator-NavLink--active": "var(--xmlui-color-indicator-NavLink--active)", "backgroundColor-NavLink--hover--active": "var(--xmlui-backgroundColor-NavLink--hover--active)", "color-indicator-NavLink--pressed": "var(--xmlui-color-indicator-NavLink--pressed)", "backgroundColor-NavLink--pressed--active": "var(--xmlui-backgroundColor-NavLink--pressed--active)", "thickness-indicator-NavLink": "var(--xmlui-thickness-indicator-NavLink)", "borderRadius-indicator-NavLink": "var(--xmlui-borderRadius-indicator-NavLink)"}'`;
+  const linkWrapper = "_linkWrapper_9n0c1_13";
+  const disabled$7 = "_disabled_9n0c1_62";
+  const displayIndicator = "_displayIndicator_9n0c1_84";
+  const vertical$3 = "_vertical_9n0c1_94";
+  const active$3 = "_active_9n0c1_112";
   const navLinkStyles = {
     themeVars: themeVars$C,
-    content: content$1,
-    base,
-    includeHoverIndicator,
-    displayActive,
-    navItemActive,
+    linkWrapper,
     disabled: disabled$7,
-    vertical: vertical$3
+    displayIndicator,
+    vertical: vertical$3,
+    active: active$3
   };
   function createUrlWithQueryParams(to) {
     if (!to || typeof to === "string" || typeof to === "number") {
@@ -3326,16 +3324,24 @@
     disabled: disabled2,
     to,
     sx = {},
-    displayActive: displayActive2 = true,
+    displayActive = true,
+    forceActive,
     vertical: vertical2,
     style,
     onClick,
     icon,
-    forceActive,
     ...rest
   }, ref) {
     const appLayoutContext = useAppLayoutContext();
     const navPanelContext = React.useContext(NavPanelContext);
+    const [isClicked, setIsClicked] = React.useState(false);
+    const onClickForButton = React.useCallback(
+      (event) => {
+        setIsClicked((last) => !last);
+        onClick == null ? void 0 : onClick(event);
+      },
+      [onClick]
+    );
     let safeVertical = vertical2;
     if (appLayoutContext && safeVertical === void 0) {
       safeVertical = getAppLayoutOrientation(appLayoutContext.layout) === "vertical" || (navPanelContext == null ? void 0 : navPanelContext.inDrawer);
@@ -3346,21 +3352,23 @@
       }
     }, [to]);
     const styleObj = { ...sx, ...style };
-    const baseClasses = classnames(navLinkStyles.content, navLinkStyles.base, {
+    const sharedClasses = classnames(navLinkStyles.linkWrapper, {
       [navLinkStyles.disabled]: disabled2,
       [navLinkStyles.vertical]: safeVertical,
-      [navLinkStyles.includeHoverIndicator]: displayActive2,
-      [navLinkStyles.navItemActive]: displayActive2 && forceActive
+      [navLinkStyles.displayIndicator]: displayActive
     });
-    let content2;
+    let content2 = null;
     if (disabled2 || !smartTo) {
       content2 = /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
+          id: uid,
           ...rest,
           ref,
-          onClick,
-          className: baseClasses,
+          onClick: onClickForButton,
+          className: classnames(sharedClasses, {
+            [navLinkStyles.active]: displayActive && (isClicked || forceActive)
+          }),
           style: styleObj,
           disabled: disabled2,
           children: [
@@ -3379,9 +3387,8 @@
           to: smartTo,
           style: styleObj,
           onClick,
-          className: ({ isActive }) => classnames(baseClasses, {
-            [navLinkStyles.displayActive]: displayActive2,
-            [navLinkStyles.navItemActive]: displayActive2 && (isActive || forceActive)
+          className: ({ isActive }) => classnames(sharedClasses, {
+            [navLinkStyles.active]: displayActive && (isActive || forceActive)
           }),
           children: [
             icon,
@@ -17423,6 +17430,7 @@
     icon,
     renderChild,
     to,
+    disabled: disabled2 = false,
     initiallyExpanded,
     iconHorizontalCollapsed,
     iconHorizontalExpanded,
@@ -17444,7 +17452,13 @@
         iconVerticalCollapsed: iconVerticalCollapsed ?? defaultProps$3.iconVerticalCollapsed,
         iconVerticalExpanded: iconVerticalExpanded ?? defaultProps$3.iconVerticalExpanded
       };
-    }, [iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, level]);
+    }, [
+      iconHorizontalCollapsed,
+      iconHorizontalExpanded,
+      iconVerticalCollapsed,
+      iconVerticalExpanded,
+      level
+    ]);
     return /* @__PURE__ */ jsxRuntime.jsx(NavGroupContext.Provider, { value: navGroupContextValue, children: inline ? /* @__PURE__ */ jsxRuntime.jsx(
       ExpandableNavGroup,
       {
@@ -17455,7 +17469,8 @@
         node,
         renderChild,
         ref,
-        initiallyExpanded
+        initiallyExpanded,
+        disabled: disabled2
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx(
       DropDownNavGroup,
@@ -17465,7 +17480,8 @@
         node,
         renderChild,
         ref,
-        to
+        to,
+        disabled: disabled2
       }
     ) });
   });
@@ -17476,7 +17492,8 @@
     renderChild,
     node,
     to,
-    initiallyExpanded = false
+    initiallyExpanded = false,
+    disabled: disabled2 = false
   }, ref) {
     const { level, iconVerticalCollapsed, iconVerticalExpanded } = React.useContext(NavGroupContext);
     const [expanded, setExpanded] = React.useState(initiallyExpanded);
@@ -17485,11 +17502,21 @@
       paddingLeft: level >= 1 ? level * 2 + "em" : void 0
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(NavLink, { style: toggleStyle, onClick: () => setExpanded((prev) => !prev), icon, to, children: [
-        label2,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 } }),
-        /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed })
-      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        NavLink,
+        {
+          style: toggleStyle,
+          onClick: () => setExpanded((prev) => !prev),
+          icon,
+          to,
+          disabled: disabled2,
+          children: [
+            label2,
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 } }),
+            /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed })
+          ]
+        }
+      ),
       expanded && renderChild(node.children, {
         wrapChild: ({ node: node2 }, renderedChild) => {
           if (node2.type === "NavLink") {
@@ -17513,7 +17540,8 @@
     icon,
     renderChild,
     node,
-    to
+    to,
+    disabled: disabled2 = false
   }, ref) {
     const {
       level,
@@ -17533,7 +17561,7 @@
     }
     const [expanded, setExpanded] = React.useState(false);
     return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { onOpenChange: (open) => setExpanded(open), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(NavLink, { icon, style: { flexShrink: 0 }, vertical: level >= 1, to, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Trigger, { asChild: true, disabled: disabled2, children: /* @__PURE__ */ jsxRuntime.jsxs(NavLink, { icon, style: { flexShrink: 0 }, vertical: level >= 1, to, disabled: disabled2, children: [
         label2,
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 } }),
         level === 0 && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed }),
@@ -17574,10 +17602,11 @@
   });
   const COMP$m = "NavGroup";
   const NavGroupMd = createMetadata({
-    description: `The \`NavGroup\` component is a container for grouping related navigation targets (\`NavLink\` components). It can be displayed as a submenu in the App's UI.`,
+    description: `The \`${COMP$m}\` component is a container for grouping related navigation targets (\`NavLink\` components). It can be displayed as a submenu in the App's UI.`,
     props: {
       label: dLabel(),
       initiallyExpanded: d("This property defines whether the group is initially expanded or collapsed."),
+      enabled: dEnabled(),
       to: {
         description: `This property defines an optional navigation link.`,
         valueType: "string"

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.34",
+    "version": "0.9.36",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",

package/dist/scripts/src/components/FormItem/ItemWithLabel.js

@@ -25,7 +25,7 @@ exports.ItemWithLabel = (0, react_1.forwardRef)(function ItemWithLabel({ id, lab
         //   }),
         // });
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: style, ref: ref, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(FormItem_module_scss_1.default.container, {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, ref: ref, className: FormItem_module_scss_1.default.itemWithLabel, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(FormItem_module_scss_1.default.container, {
                     [FormItem_module_scss_1.default.top]: labelPosition === "top",
                     [FormItem_module_scss_1.default.bottom]: labelPosition === "bottom",
                     [FormItem_module_scss_1.default.start]: labelPosition === "start",

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

@@ -15,11 +15,12 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const NavGroupNative_1 = require("./NavGroupNative");
 const COMP = "NavGroup";
 exports.NavGroupMd = (0, ComponentDefs_1.createMetadata)({
-    description: `The \`NavGroup\` component is a container for grouping related navigation targets ` +
+    description: `The \`${COMP}\` component is a container for grouping related navigation targets ` +
         `(\`NavLink\` components). It can be displayed as a submenu in the App's UI.`,
     props: {
         label: (0, metadata_helpers_1.dLabel)(),
         initiallyExpanded: (0, ComponentDefs_1.d)('This property defines whether the group is initially expanded or collapsed.'),
+        enabled: (0, metadata_helpers_1.dEnabled)(),
         to: {
             description: `This property defines an optional navigation link.`,
             valueType: "string",
@@ -61,5 +62,6 @@ exports.NavGroupMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.navGroupComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NavGroupMd, ({ node, extractValue, renderChild }) => {
-    return ((0, jsx_runtime_1.jsx)(NavGroupNative_1.NavGroup, { label: extractValue.asDisplayText(node.props.label), to: extractValue.asOptionalString(node.props.to), icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: extractValue.asString(node.props.icon), className: NavLink_module_scss_1.default.icon }), node: node, initiallyExpanded: extractValue.asBoolean(node.props.initiallyExpanded), renderChild: renderChild, iconHorizontalExpanded: extractValue.asOptionalString(node.props.iconHorizontalExpanded), iconVerticalExpanded: extractValue.asOptionalString(node.props.iconVerticalExpanded), iconHorizontalCollapsed: extractValue.asOptionalString(node.props.iconHorizontalCollapsed), iconVerticalCollapsed: extractValue.asOptionalString(node.props.iconVerticalCollapsed) }));
+    var _a;
+    return ((0, jsx_runtime_1.jsx)(NavGroupNative_1.NavGroup, { label: extractValue.asDisplayText(node.props.label), disabled: !extractValue.asOptionalBoolean((_a = node.props.enabled) !== null && _a !== void 0 ? _a : true), to: extractValue.asOptionalString(node.props.to), icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: extractValue.asString(node.props.icon), className: NavLink_module_scss_1.default.icon }), node: node, initiallyExpanded: extractValue.asBoolean(node.props.initiallyExpanded), renderChild: renderChild, iconHorizontalExpanded: extractValue.asOptionalString(node.props.iconHorizontalExpanded), iconVerticalExpanded: extractValue.asOptionalString(node.props.iconVerticalExpanded), iconHorizontalCollapsed: extractValue.asOptionalString(node.props.iconHorizontalCollapsed), iconVerticalCollapsed: extractValue.asOptionalString(node.props.iconVerticalCollapsed) }));
 });

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

@@ -28,7 +28,7 @@ const NavGroupContext = (0, react_1.createContext)({
     iconVerticalCollapsed: exports.defaultProps.iconVerticalCollapsed,
     iconVerticalExpanded: exports.defaultProps.iconVerticalExpanded,
 });
-exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, label, icon, renderChild, to, initiallyExpanded, iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, }, ref) {
+exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, label, icon, renderChild, to, disabled = false, initiallyExpanded, iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, }, ref) {
     const { level } = (0, react_1.useContext)(NavGroupContext);
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const navPanelContext = (0, react_1.useContext)(NavPanelNative_1.NavPanelContext);
@@ -46,14 +46,20 @@ exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, labe
             iconVerticalCollapsed: iconVerticalCollapsed !== null && iconVerticalCollapsed !== void 0 ? iconVerticalCollapsed : exports.defaultProps.iconVerticalCollapsed,
             iconVerticalExpanded: iconVerticalExpanded !== null && iconVerticalExpanded !== void 0 ? iconVerticalExpanded : exports.defaultProps.iconVerticalExpanded,
         };
-    }, [iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, level]);
-    return ((0, jsx_runtime_1.jsx)(NavGroupContext.Provider, { value: navGroupContextValue, children: inline ? ((0, jsx_runtime_1.jsx)(ExpandableNavGroup, { to: to, style: style, label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, initiallyExpanded: initiallyExpanded })) : ((0, jsx_runtime_1.jsx)(DropDownNavGroup, { label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, to: to })) }));
+    }, [
+        iconHorizontalCollapsed,
+        iconHorizontalExpanded,
+        iconVerticalCollapsed,
+        iconVerticalExpanded,
+        level,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(NavGroupContext.Provider, { value: navGroupContextValue, children: inline ? ((0, jsx_runtime_1.jsx)(ExpandableNavGroup, { to: to, style: style, label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, initiallyExpanded: initiallyExpanded, disabled: disabled })) : ((0, jsx_runtime_1.jsx)(DropDownNavGroup, { label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, to: to, disabled: disabled })) }));
 });
-const ExpandableNavGroup = (0, react_1.forwardRef)(function ExpandableNavGroup({ style = constants_1.EMPTY_OBJECT, label, icon, renderChild, node, to, initiallyExpanded = false, }, ref) {
+const ExpandableNavGroup = (0, react_1.forwardRef)(function ExpandableNavGroup({ style = constants_1.EMPTY_OBJECT, label, icon, renderChild, node, to, initiallyExpanded = false, disabled = false, }, ref) {
     const { level, iconVerticalCollapsed, iconVerticalExpanded } = (0, react_1.useContext)(NavGroupContext);
     const [expanded, setExpanded] = (0, react_1.useState)(initiallyExpanded);
     const toggleStyle = Object.assign(Object.assign({}, style), { paddingLeft: level >= 1 ? level * 2 + "em" : undefined });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, { style: toggleStyle, onClick: () => setExpanded((prev) => !prev), icon: icon, to: to, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed })] }), expanded &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, { 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 })] }), expanded &&
                 renderChild(node.children, {
                     wrapChild: ({ node }, renderedChild) => {
                         if (node.type === "NavLink") {
@@ -68,7 +74,7 @@ const ExpandableNavGroup = (0, react_1.forwardRef)(function ExpandableNavGroup({
                     },
                 })] }));
 });
-const DropDownNavGroup = (0, react_1.forwardRef)(function DropDownNavGroup({ style, label, icon, renderChild, node, to, }, ref) {
+const DropDownNavGroup = (0, react_1.forwardRef)(function DropDownNavGroup({ style, label, icon, renderChild, node, to, disabled = false, }, ref) {
     const { level, iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, } = (0, react_1.useContext)(NavGroupContext);
     const { root } = (0, ThemeContext_1.useTheme)();
     let Wrapper = react_dropdown_menu_1.DropdownMenu;
@@ -80,7 +86,7 @@ const DropDownNavGroup = (0, react_1.forwardRef)(function DropDownNavGroup({ sty
         Content = react_dropdown_menu_1.DropdownMenuSubContent;
     }
     const [expanded, setExpanded] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, { onOpenChange: (open) => setExpanded(open), children: [(0, jsx_runtime_1.jsx)(Trigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, { icon: icon, style: { flexShrink: 0 }, vertical: level >= 1, to: to, 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, {
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { 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: 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;

package/dist/scripts/src/components/NavLink/NavLinkNative.js

@@ -27,9 +27,19 @@ const NavPanelNative_1 = require("../NavPanel/NavPanelNative");
 exports.NavLink = (0, react_1.forwardRef)(function NavLink(_a, ref) {
     var { 
     /* eslint-disable react/prop-types */
-    uid, children, disabled, to, sx = {}, displayActive = true, vertical, style, onClick, icon, forceActive } = _a, rest = __rest(_a, ["uid", "children", "disabled", "to", "sx", "displayActive", "vertical", "style", "onClick", "icon", "forceActive"]);
+    uid, children, disabled, to, sx = {}, displayActive = true, forceActive, vertical, style, onClick, icon } = _a, rest = __rest(_a, ["uid", "children", "disabled", "to", "sx", "displayActive", "forceActive", "vertical", "style", "onClick", "icon"]);
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const navPanelContext = (0, react_1.useContext)(NavPanelNative_1.NavPanelContext);
+    // This is for applying the active indicator for the button
+    //
+    // NOTE: there is a bug if you use Actions.navigate in the onClick handler, the indicator is not removed after click
+    // The issue needs to be resolved by either using contextual state (the NavLink knows it is active or not)
+    // or by rethinking the component and removing the <button> -> Discuss!
+    const [isClicked, setIsClicked] = (0, react_1.useState)(false);
+    const onClickForButton = (0, react_1.useCallback)((event) => {
+        setIsClicked((last) => !last);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }, [onClick]);
     let safeVertical = vertical;
     if (appLayoutContext && safeVertical === undefined) {
         safeVertical =
@@ -41,20 +51,20 @@ exports.NavLink = (0, react_1.forwardRef)(function NavLink(_a, ref) {
         }
     }, [to]);
     const styleObj = Object.assign(Object.assign({}, sx), style);
-    const baseClasses = (0, classnames_1.default)(NavLink_module_scss_1.default.content, NavLink_module_scss_1.default.base, {
+    const sharedClasses = (0, classnames_1.default)(NavLink_module_scss_1.default.linkWrapper, {
         [NavLink_module_scss_1.default.disabled]: disabled,
         [NavLink_module_scss_1.default.vertical]: safeVertical,
-        [NavLink_module_scss_1.default.includeHoverIndicator]: displayActive,
-        [NavLink_module_scss_1.default.navItemActive]: displayActive && forceActive,
+        [NavLink_module_scss_1.default.displayIndicator]: displayActive,
     });
-    let content;
+    let content = null;
     if (disabled || !smartTo) {
-        content = ((0, jsx_runtime_1.jsxs)("button", Object.assign({}, rest, { ref: ref, onClick: onClick, className: baseClasses, style: styleObj, disabled: disabled, children: [icon, children] })));
+        content = ((0, jsx_runtime_1.jsxs)("button", Object.assign({ id: uid }, rest, { ref: ref, onClick: onClickForButton, className: (0, classnames_1.default)(sharedClasses, {
+                [NavLink_module_scss_1.default.active]: displayActive && (isClicked || forceActive),
+            }), style: styleObj, disabled: disabled, children: [icon, children] })));
     }
     else {
-        content = ((0, jsx_runtime_1.jsxs)(react_2.NavLink, Object.assign({ id: uid }, rest, { ref: ref, to: smartTo, style: styleObj, onClick: onClick, className: ({ isActive }) => (0, classnames_1.default)(baseClasses, {
-                [NavLink_module_scss_1.default.displayActive]: displayActive,
-                [NavLink_module_scss_1.default.navItemActive]: displayActive && (isActive || forceActive),
+        content = ((0, jsx_runtime_1.jsxs)(react_2.NavLink, Object.assign({ id: uid }, rest, { ref: ref, to: smartTo, style: styleObj, onClick: onClick, className: ({ isActive }) => (0, classnames_1.default)(sharedClasses, {
+                [NavLink_module_scss_1.default.active]: displayActive && (isActive || forceActive),
             }), children: [icon, children] })));
     }
     return content;