acinguiux-ds-react-framework 0.0.6 → 0.0.7

package/build/esm/components/Menu/styles/subMenu.styles.js

@@ -1,30 +1,75 @@
 import { css as s } from "styled-components";
-import { menuConsts as o } from "../Menu.consts.js";
-import { indicatorPositionStyle as r, indicatorBottomStyle as b } from "./indicator.styles.js";
-import { MENU_CLASS as e, ZIndexes as p } from "../../../react-base/src/consts.js";
-const h = s`
-  ${({ theme: n, size: i, inlineCollapsed: l }) => {
-  const a = `${o[i].padding - 4}px`, d = "4px", t = `${o[i].indent}px`, u = `${o[i].iconSize}px`, c = `${o[i].padding - 4 - 2}px`, $ = `${o[i].gap}px`;
+import { States as o, Surfaces as $ } from "acinguiux-ds-fabrics";
+import { getFabricStyles as u, getModeIndicatorPosition as p, getSubMenuSelectedIndicatorStyle as g } from "../Menu.utils.js";
+import { indicatorPositionStyle as f } from "./indicator.styles.js";
+import { Sizes as x, MENU_CLASS as e, Directions as b, ZIndexes as y } from "../../../react-base/src/consts.js";
+import { LayerColor as l } from "../../../react-base/src/theme/theme.js";
+import * as O from "../../../react-base/src/components/Menu/Menu.consts.js";
+import { consts as a } from "../../../react-base/src/components/Menu/Menu.consts.js";
+const { consts: c } = O, P = s`
+  ${({ theme: n, size: t, inlineCollapsed: v, $indicatorPosition: r, $itemContentDirection: i = b.Horizontal, mode: d }) => {
+  const k = `${c[t].subMenuOffestPadding}px`, S = `${c[t].indent}px`, w = `${c[t].indent - (t === x.XSmall ? 6 : 10)}px`, m = `${c[t].iconSize}px`, M = `${c[t].gap}px`;
   return s`
       .${e}-submenu {
         cursor: pointer;
         display: flex;
         flex-direction: column;
 
+         /* Default */
+        &.${e}-submenu {
+          .${e}-submenu-title .${e}-submenu-title-content .${e}-label {
+            color: ${u(n, l.TextOnSurfaceSubtle, o.Default)};
+
+            svg {
+              fill:${u(n, l.TextOnSurfaceSubtle, o.Default)};
+            }
+          }
+        }
+
+         /* Hover */
+        &.${e}-submenu-active {
+          > .${e}-submenu-title .${e}-submenu-title-content .${e}-label {
+            color: ${u(n, l.TextOnSurfaceStrong, o.Hover)};
+
+            svg {
+              fill:${u(n, l.TextOnSurfaceStrong, o.Hover)};
+            }
+          }
+        }
+
+         /* Active */
+        &.${e}-submenu-selected {
+          > .${e}-submenu-title .${e}-submenu-title-content .${e}-label {
+            color: ${u(n, l.TextOnSurfaceStrong, o.Active)};
+
+            svg {
+              fill:${u(n, l.TextOnSurfaceStrong, o.Active)};
+            }
+          }
+        }
+
         /* Disabled */
         &.${e}-submenu-disabled {
-          &,
-          .${e}-label {
-            color: ${n.text.onSurface.inactive};
+          > .${e}-submenu-title .${e}-submenu-title-content .${e}-label {
+            color: ${u(n, l.TextOnSurfaceSubtle, o.Default, $.Inactive)};
             cursor: not-allowed;
+
+            svg {
+              fill:${u(n, l.TextOnSurfaceSubtle, o.Default, $.Inactive)};
+            }
+          }
+        }
+
+        &.${e}-submenu-selected:not(.${e}-submenu-open).${e}-submenu-disabled > .${e}-submenu-title {
+          &::after {
+            ${f[t][p(r, d)][i].selected.disabled};
           }
         }
 
         .${e}-submenu-title {
           position: relative;
-          padding: ${d};
           display: flex;
-          align-items: stretch;
+          align-items: center;
           flex: 1 1 0;
           min-width: 0;
 
@@ -39,30 +84,38 @@ const h = s`
         }
 
         .${e}-submenu-title-content {
-          padding: ${a};
-          margin: 0 -${a};
           display: flex;
           flex: 1 1 0;
           min-width: 0;
           justify-content: space-between;
           align-items: center;
-          gap: ${$};
-          border-radius: 4px;
+          gap: ${M};
+          border-radius: ${a[t].borderRadius}px;
           transition: background-color 0.3s ease-out;
+          
+          ${d !== "horizontal" && s`
+            margin-right: ${a[t].collapsedItemMarginRight};
+          `}
         }
 
         .${e}-submenu-expand-icon {
-          width: ${u};
-          height: ${u};
+          width: ${m};
+          height: ${m};
           flex-shrink: 0;
           transition: transform 0.2s ease-in-out;
           margin: -10px 0;
 
-          ${l && s`
+          ${v && s`
             display: none;
           `}
         }
 
+        &:not(.${e}-submenu-active):not(.${e}-submenu-selected) > .${e}-submenu-title {
+          > .${e}-submenu-title-content {
+            color: ${u(n, l.TextOnSurfaceSubtle)};
+          }
+        }
+
         &.${e}-submenu-active:not(.${e}-submenu-selected) > .${e}-submenu-title {
           &:focus-visible {
             > .${e}-submenu-title-content {
@@ -71,11 +124,41 @@ const h = s`
           }
 
           > .${e}-submenu-title-content {
-            background-color: ${n.onSurface.surface.hover.background};
+            background-color: ${u(n, l.BackgroundSurface, o.Hover)};
           }
 
           > .${e}-submenu-title-content:active {
-            background-color: ${n.onSurface.surface.active.background};
+            background-color: ${u(n, l.BackgroundSurface, o.Active)};
+          }
+        }
+        
+        &.${e}-submenu-selected.${e}-submenu-disabled > .${e}-submenu-title {
+          &, 
+          .${e}-label { 
+            color: ${u(n, l.TextOnSurfaceSubtle)};
+          }
+
+          > .${e}-submenu-title-content {
+            background-color: ${u(n, l.BackgroundSurface, o.Default, $.Section)};
+            
+            svg {
+              fill: ${u(n, l.TextOnSurfaceSubtle)};
+            }
+          }
+        }
+
+        &.${e}-submenu-selected:not(.${e}-submenu-disabled) > .${e}-submenu-title {
+
+          > .${e}-submenu-title-content {
+            background-color: ${u(n, l.BackgroundSurface, o.Default, $.Section)};
+          }
+          
+          > .${e}-submenu-title-content:hover {
+            background-color: ${u(n, l.BackgroundSurface, o.Hover, $.Section)};
+          }
+
+          > .${e}-submenu-title-content:active {
+            background-color: ${u(n, l.BackgroundSurface, o.Active, $.Section)};
           }
         }
       }
@@ -83,13 +166,34 @@ const h = s`
       /* Inline and vertical */
       &.${e}-inline, &.${e}-vertical .${e}-submenu {
         .${e}-submenu-title {
-          padding-left: ${t};
-          padding-right: ${t};
+          padding-left: ${S};
+          padding-right: ${S};
         }
       }
 
       /* Inline */
       &.${e}-inline {
+
+        .${e}-submenu {
+          &.${e}-submenu-selected:not(.${e}-submenu-open).${e}-submenu-disabled > .${e}-submenu-title {
+            &::after {
+              ${f[t][p(r)][i].selected.disabled};
+            }
+          }
+        }
+        
+        .${e}-submenu-title {
+          margin: ${t === x.Small ? "2px" : "4px"} 0;
+          
+          .${e}-submenu-title-content {
+            padding: ${a[t].labelPadding[b.Vertical][i]};
+            
+            .${e}-label {
+              padding: unset;
+            }
+          }
+        }
+
         .${e}-submenu.${e}-submenu-open
           > .${e}-submenu-title
           > .${e}-submenu-title-content
@@ -98,27 +202,44 @@ const h = s`
         }
 
         /* Lowest level */
-        .${e}-submenu-selected:not(.${e}-submenu-open) .${e}-submenu-title {
+        .${e}-submenu-selected:not(.${e}-submenu-open):not(.${e}-submenu-disabled) > .${e}-submenu-title {
           background-color: transparent;
 
-          &::after {
-            ${r}
-          }
+          ${g(r, "vertical", i, t)};
         }
       }
 
       /* Vertical */
       &.${e}-vertical .${e}-submenu {
+        .${e}-submenu-title {
+          margin: ${t === x.Small ? "2px" : "4px"} 0;
+
+          &:focus-visible {
+            outline: none;
+            position: relative;
+
+            .${e}-submenu-title-content {
+              outline: 3px solid ${n.additional.focus.subtle};
+            }
+          }
+
+          .${e}-submenu-title-content {
+            padding: ${a[t].labelPadding[b.Vertical][i]};
+            
+            .${e}-label {
+              padding: unset;
+            }
+          }
+        }
+
         .${e}-submenu-expand-icon {
           transform: rotate(-90deg);
         }
 
-        &.${e}-submenu-selected > .${e}-submenu-title {
+        &.${e}-submenu-selected:not(.${e}-submenu-disabled) > .${e}-submenu-title {
           background-color: transparent;
-
-          &::after {
-            ${r}
-          }
+          
+          ${g(r, "vertical", i, t)};
         }
 
         .${e}-item-group .${e}-item-group-list {
@@ -134,31 +255,25 @@ const h = s`
         align-items: stretch;
 
         .${e}-submenu-title {
-          padding-left: ${t};
-          padding-right: ${t};
-        }
-
-        &.${e}-submenu-selected > .${e}-submenu-title {
-          background-color: ${n.onSurface.section.default.background};
+          padding: ${k} ${w};
+          
+          .${e}-submenu-title-content {
+            padding: ${a[t].labelPadding[b.Horizontal][i]};
 
-          &::after {
-            ${b}
+            .${e}-label {
+              padding: unset;
+            }
           }
         }
 
-        &.${e}-overflow-item-rest {
-          .${e}-submenu-title {
-            padding-left: 8px;
-            padding-right: 8px;
-          }
-
-          .${e}-submenu-title-content {
-            padding: ${c};
-          }
+        &.${e}-submenu-selected:not(.${e}-submenu-disabled) > .${e}-submenu-title {
+          ${g(r, "horizontal", i, t)};
+        }
 
+        &.${e}-overflow-item-rest {
           .${e}-submenu-rest-icon {
-            width: ${u};
-            height: ${u};
+            width: ${m};
+            height: ${m};
           }
         }
       }
@@ -166,7 +281,7 @@ const h = s`
       /* Popup */
       &.${e}-submenu {
         &.${e}-submenu-popup {
-          z-index: ${p.MENU};
+          z-index: ${y.MENU};
           min-width: 300px;
           position: absolute;
           transform-origin: 0 0;
@@ -175,7 +290,27 @@ const h = s`
           > .${e}-sub {
             background-color: ${n.onSurface.elevated.default.background};
             box-shadow: ${n.elevation.level2};
-            border-radius: 4px;
+            border-radius: 8px;
+
+            .${e}-item-group-title,
+            .${e}-submenu-title,
+            .${e}-item {
+              align-items: stretch;
+            }
+            
+            ${d !== "horizontal" && s`
+              .${e}-item-group-title {
+                margin-left: -${a[t].itemListMarginLeft}px;
+              }
+
+              .${e}-submenu-title {
+                margin-left: -${a[t].itemListMarginLeft}px;
+              }
+
+              .${e}-item {
+                margin-left: -${a[t].itemListMarginLeft}px;
+              }
+            `}
           }
         }
 
@@ -187,14 +322,23 @@ const h = s`
         .${e}-vertical {
           width: 100%;
           max-width: 300px;
+          padding: ${a[t].subMenuLabelPadding} 0;
 
           .${e}-submenu-title {
-            padding-left: ${t};
-            padding-right: ${t};
+            padding: ${a[t].itemPadding[b.Horizontal][i]};
+            .${e}-submenu-title-content {
+              margin: -4px 2px;
+              
+              ${d === "horizontal" ? s`
+                  padding: 4px 8px 4px 0;` : s`
+                  margin-left: ${a[t].verticalPopupMarginLeft}px;
+                  padding-right: 8px;
+              `}
+            }
           }
 
           .${e}-submenu-selected > .${e}-submenu-title:after {
-            ${r}
+            ${f[t][p(r)][i].selected.default};
           }
 
           .${e}-submenu-expand-icon {
@@ -206,6 +350,6 @@ const h = s`
 }}
 `;
 export {
-  h as subMenuStyle
+  P as subMenuStyle
 };
 //# sourceMappingURL=subMenu.styles.js.map

package/build/esm/components/Menu/styles/subMenu.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"subMenu.styles.js","sources":["../../../../../src/components/Menu/styles/subMenu.styles.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { MENU_CLASS, ZIndexes } from 'acinguiux-ds-react-base';\r\n\r\nimport { menuConsts } from '../Menu.consts';\r\nimport { StyledMenuProps } from '../Menu.types';\r\nimport { indicatorBottomStyle, indicatorPositionStyle } from './indicator.styles';\r\n\r\nexport const subMenuStyle = css<StyledMenuProps>`\r\n  ${({ theme, size, inlineCollapsed }) => {\r\n    const offset = 4;\r\n    const padding = `${menuConsts[size].padding - offset}px`;\r\n    const paddingOffset = `${offset}px`;\r\n    const subMenuIndent = `${menuConsts[size].indent}px`;\r\n    const iconSize = `${menuConsts[size].iconSize}px`;\r\n    const iconPadding = `${menuConsts[size].padding - offset - 2}px`;\r\n    const gap = `${menuConsts[size].gap}px`;\r\n\r\n    return css`\r\n      .${MENU_CLASS}-submenu {\r\n        cursor: pointer;\r\n        display: flex;\r\n        flex-direction: column;\r\n\r\n        /* Disabled */\r\n        &.${MENU_CLASS}-submenu-disabled {\r\n          &,\r\n          .${MENU_CLASS}-label {\r\n            color: ${theme.text.onSurface.inactive};\r\n            cursor: not-allowed;\r\n          }\r\n        }\r\n\r\n        .${MENU_CLASS}-submenu-title {\r\n          position: relative;\r\n          padding: ${paddingOffset};\r\n          display: flex;\r\n          align-items: stretch;\r\n          flex: 1 1 0;\r\n          min-width: 0;\r\n\r\n          &:focus-visible {\r\n            outline: none;\r\n            position: relative;\r\n\r\n            .${MENU_CLASS}-submenu-title-content {\r\n              outline: 3px solid ${theme.additional.focus.subtle} !important;\r\n            }\r\n          }\r\n        }\r\n\r\n        .${MENU_CLASS}-submenu-title-content {\r\n          padding: ${padding};\r\n          margin: 0 -${padding};\r\n          display: flex;\r\n          flex: 1 1 0;\r\n          min-width: 0;\r\n          justify-content: space-between;\r\n          align-items: center;\r\n          gap: ${gap};\r\n          border-radius: 4px;\r\n          transition: background-color 0.3s ease-out;\r\n        }\r\n\r\n        .${MENU_CLASS}-submenu-expand-icon {\r\n          width: ${iconSize};\r\n          height: ${iconSize};\r\n          flex-shrink: 0;\r\n          transition: transform 0.2s ease-in-out;\r\n          margin: -10px 0;\r\n\r\n          ${inlineCollapsed &&\r\n      css`\r\n            display: none;\r\n          `}\r\n        }\r\n\r\n        &.${MENU_CLASS}-submenu-active:not(.${MENU_CLASS}-submenu-selected) > .${MENU_CLASS}-submenu-title {\r\n          &:focus-visible {\r\n            > .${MENU_CLASS}-submenu-title-content {\r\n              background-color: transparent;\r\n            }\r\n          }\r\n\r\n          > .${MENU_CLASS}-submenu-title-content {\r\n            background-color: ${theme.onSurface.surface.hover.background};\r\n          }\r\n\r\n          > .${MENU_CLASS}-submenu-title-content:active {\r\n            background-color: ${theme.onSurface.surface.active.background};\r\n          }\r\n        }\r\n      }\r\n\r\n      /* Inline and vertical */\r\n      &.${MENU_CLASS}-inline, &.${MENU_CLASS}-vertical .${MENU_CLASS}-submenu {\r\n        .${MENU_CLASS}-submenu-title {\r\n          padding-left: ${subMenuIndent};\r\n          padding-right: ${subMenuIndent};\r\n        }\r\n      }\r\n\r\n      /* Inline */\r\n      &.${MENU_CLASS}-inline {\r\n        .${MENU_CLASS}-submenu.${MENU_CLASS}-submenu-open\r\n          > .${MENU_CLASS}-submenu-title\r\n          > .${MENU_CLASS}-submenu-title-content\r\n          > .${MENU_CLASS}-submenu-expand-icon {\r\n          transform: rotate(180deg);\r\n        }\r\n\r\n        /* Lowest level */\r\n        .${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-open) .${MENU_CLASS}-submenu-title {\r\n          background-color: transparent;\r\n\r\n          &::after {\r\n            ${indicatorPositionStyle}\r\n          }\r\n        }\r\n      }\r\n\r\n      /* Vertical */\r\n      &.${MENU_CLASS}-vertical .${MENU_CLASS}-submenu {\r\n        .${MENU_CLASS}-submenu-expand-icon {\r\n          transform: rotate(-90deg);\r\n        }\r\n\r\n        &.${MENU_CLASS}-submenu-selected > .${MENU_CLASS}-submenu-title {\r\n          background-color: transparent;\r\n\r\n          &::after {\r\n            ${indicatorPositionStyle}\r\n          }\r\n        }\r\n\r\n        .${MENU_CLASS}-item-group .${MENU_CLASS}-item-group-list {\r\n          display: flex;\r\n          flex-direction: row;\r\n        }\r\n      }\r\n\r\n      /* Horizontal */\r\n      &.${MENU_CLASS}-horizontal .${MENU_CLASS}-submenu {\r\n        display: flex;\r\n        flex-direction: row;\r\n        align-items: stretch;\r\n\r\n        .${MENU_CLASS}-submenu-title {\r\n          padding-left: ${subMenuIndent};\r\n          padding-right: ${subMenuIndent};\r\n        }\r\n\r\n        &.${MENU_CLASS}-submenu-selected > .${MENU_CLASS}-submenu-title {\r\n          background-color: ${theme.onSurface.section.default.background};\r\n\r\n          &::after {\r\n            ${indicatorBottomStyle}\r\n          }\r\n        }\r\n\r\n        &.${MENU_CLASS}-overflow-item-rest {\r\n          .${MENU_CLASS}-submenu-title {\r\n            padding-left: 8px;\r\n            padding-right: 8px;\r\n          }\r\n\r\n          .${MENU_CLASS}-submenu-title-content {\r\n            padding: ${iconPadding};\r\n          }\r\n\r\n          .${MENU_CLASS}-submenu-rest-icon {\r\n            width: ${iconSize};\r\n            height: ${iconSize};\r\n          }\r\n        }\r\n      }\r\n\r\n      /* Popup */\r\n      &.${MENU_CLASS}-submenu {\r\n        &.${MENU_CLASS}-submenu-popup {\r\n          z-index: ${ZIndexes.MENU};\r\n          min-width: 300px;\r\n          position: absolute;\r\n          transform-origin: 0 0;\r\n          background-color: transparent;\r\n          overflow: visible;\r\n          > .${MENU_CLASS}-sub {\r\n            background-color: ${theme.onSurface.elevated.default.background};\r\n            box-shadow: ${theme.elevation.level2};\r\n            border-radius: 4px;\r\n          }\r\n        }\r\n\r\n        &.${MENU_CLASS}-submenu-hidden {\r\n          display: none;\r\n        }\r\n\r\n        /* Vertical and horizontal */\r\n        .${MENU_CLASS}-vertical {\r\n          width: 100%;\r\n          max-width: 300px;\r\n\r\n          .${MENU_CLASS}-submenu-title {\r\n            padding-left: ${subMenuIndent};\r\n            padding-right: ${subMenuIndent};\r\n          }\r\n\r\n          .${MENU_CLASS}-submenu-selected > .${MENU_CLASS}-submenu-title:after {\r\n            ${indicatorPositionStyle}\r\n          }\r\n\r\n          .${MENU_CLASS}-submenu-expand-icon {\r\n            transform: rotate(-90deg);\r\n          }\r\n        }\r\n      }\r\n    `;\r\n  }}\r\n`;\r\n"],"names":["subMenuStyle","css","theme","size","inlineCollapsed","padding","menuConsts","paddingOffset","subMenuIndent","iconSize","iconPadding","gap","MENU_CLASS","indicatorPositionStyle","indicatorBottomStyle","ZIndexes"],"mappings":"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"}
+{"version":3,"file":"subMenu.styles.js","sources":["../../../../../src/components/Menu/styles/subMenu.styles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { MenuConsts, LayerColor, MENU_CLASS, ZIndexes, Directions, Sizes } from 'acinguiux-ds-react-base';\nimport { States, Surfaces } from 'acinguiux-ds-fabrics';\n\nimport { StyledMenuProps } from '../Menu.types';\nimport { getFabricStyles, getSubMenuSelectedIndicatorStyle, getModeIndicatorPosition } from '../Menu.utils';\nimport { indicatorPositionStyle } from './indicator.styles';\n\nconst { consts } = MenuConsts;\n\nexport const subMenuStyle = css<StyledMenuProps>`\n  ${({ theme, size, inlineCollapsed, $indicatorPosition, $itemContentDirection = Directions.Horizontal, mode }) => {\n    const paddingOffset = `${consts[size].subMenuOffestPadding}px`;\n    const subMenuIndentVertical = `${consts[size].indent}px`;\n    const subMenuIndentHorizontal = `${consts[size].indent - (size === Sizes.XSmall ? 6 : 10)}px`;\n    const iconSize = `${consts[size].iconSize}px`;\n    const gap = `${consts[size].gap}px`;\n\n    return css`\n      .${MENU_CLASS}-submenu {\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n\n         /* Default */\n        &.${MENU_CLASS}-submenu {\n          .${MENU_CLASS}-submenu-title .${MENU_CLASS}-submenu-title-content .${MENU_CLASS}-label {\n            color: ${getFabricStyles(theme, LayerColor.TextOnSurfaceSubtle, States.Default)};\n\n            svg {\n              fill:${getFabricStyles(theme, LayerColor.TextOnSurfaceSubtle, States.Default)};\n            }\n          }\n        }\n\n         /* Hover */\n        &.${MENU_CLASS}-submenu-active {\n          > .${MENU_CLASS}-submenu-title .${MENU_CLASS}-submenu-title-content .${MENU_CLASS}-label {\n            color: ${getFabricStyles(theme, LayerColor.TextOnSurfaceStrong, States.Hover)};\n\n            svg {\n              fill:${getFabricStyles(theme, LayerColor.TextOnSurfaceStrong, States.Hover)};\n            }\n          }\n        }\n\n         /* Active */\n        &.${MENU_CLASS}-submenu-selected {\n          > .${MENU_CLASS}-submenu-title .${MENU_CLASS}-submenu-title-content .${MENU_CLASS}-label {\n            color: ${getFabricStyles(theme, LayerColor.TextOnSurfaceStrong, States.Active)};\n\n            svg {\n              fill:${getFabricStyles(theme, LayerColor.TextOnSurfaceStrong, States.Active)};\n            }\n          }\n        }\n\n        /* Disabled */\n        &.${MENU_CLASS}-submenu-disabled {\n          > .${MENU_CLASS}-submenu-title .${MENU_CLASS}-submenu-title-content .${MENU_CLASS}-label {\n            color: ${getFabricStyles(theme, LayerColor.TextOnSurfaceSubtle, States.Default, Surfaces.Inactive)};\n            cursor: not-allowed;\n\n            svg {\n              fill:${getFabricStyles(theme, LayerColor.TextOnSurfaceSubtle, States.Default, Surfaces.Inactive)};\n            }\n          }\n        }\n\n        &.${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-open).${MENU_CLASS}-submenu-disabled > .${MENU_CLASS}-submenu-title {\n          &::after {\n            ${indicatorPositionStyle[size][getModeIndicatorPosition($indicatorPosition, mode)][$itemContentDirection].selected.disabled};\n          }\n        }\n\n        .${MENU_CLASS}-submenu-title {\n          position: relative;\n          display: flex;\n          align-items: center;\n          flex: 1 1 0;\n          min-width: 0;\n\n          &:focus-visible {\n            outline: none;\n            position: relative;\n\n            .${MENU_CLASS}-submenu-title-content {\n              outline: 3px solid ${theme.additional.focus.subtle} !important;\n            }\n          }\n        }\n\n        .${MENU_CLASS}-submenu-title-content {\n          display: flex;\n          flex: 1 1 0;\n          min-width: 0;\n          justify-content: space-between;\n          align-items: center;\n          gap: ${gap};\n          border-radius: ${MenuConsts.consts[size].borderRadius}px;\n          transition: background-color 0.3s ease-out;\n          \n          ${mode !== 'horizontal' && css`\n            margin-right: ${MenuConsts.consts[size].collapsedItemMarginRight};\n          `}\n        }\n\n        .${MENU_CLASS}-submenu-expand-icon {\n          width: ${iconSize};\n          height: ${iconSize};\n          flex-shrink: 0;\n          transition: transform 0.2s ease-in-out;\n          margin: -10px 0;\n\n          ${inlineCollapsed && css`\n            display: none;\n          `}\n        }\n\n        &:not(.${MENU_CLASS}-submenu-active):not(.${MENU_CLASS}-submenu-selected) > .${MENU_CLASS}-submenu-title {\n          > .${MENU_CLASS}-submenu-title-content {\n            color: ${getFabricStyles(theme, LayerColor.TextOnSurfaceSubtle)};\n          }\n        }\n\n        &.${MENU_CLASS}-submenu-active:not(.${MENU_CLASS}-submenu-selected) > .${MENU_CLASS}-submenu-title {\n          &:focus-visible {\n            > .${MENU_CLASS}-submenu-title-content {\n              background-color: transparent;\n            }\n          }\n\n          > .${MENU_CLASS}-submenu-title-content {\n            background-color: ${getFabricStyles(theme, LayerColor.BackgroundSurface, States.Hover)};\n          }\n\n          > .${MENU_CLASS}-submenu-title-content:active {\n            background-color: ${getFabricStyles(theme, LayerColor.BackgroundSurface, States.Active)};\n          }\n        }\n        \n        &.${MENU_CLASS}-submenu-selected.${MENU_CLASS}-submenu-disabled > .${MENU_CLASS}-submenu-title {\n          &, \n          .${MENU_CLASS}-label { \n            color: ${getFabricStyles(theme, LayerColor.TextOnSurfaceSubtle)};\n          }\n\n          > .${MENU_CLASS}-submenu-title-content {\n            background-color: ${getFabricStyles(theme, LayerColor.BackgroundSurface, States.Default, Surfaces.Section)};\n            \n            svg {\n              fill: ${getFabricStyles(theme, LayerColor.TextOnSurfaceSubtle)};\n            }\n          }\n        }\n\n        &.${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-disabled) > .${MENU_CLASS}-submenu-title {\n\n          > .${MENU_CLASS}-submenu-title-content {\n            background-color: ${getFabricStyles(theme, LayerColor.BackgroundSurface, States.Default, Surfaces.Section)};\n          }\n          \n          > .${MENU_CLASS}-submenu-title-content:hover {\n            background-color: ${getFabricStyles(theme, LayerColor.BackgroundSurface, States.Hover, Surfaces.Section)};\n          }\n\n          > .${MENU_CLASS}-submenu-title-content:active {\n            background-color: ${getFabricStyles(theme, LayerColor.BackgroundSurface, States.Active, Surfaces.Section)};\n          }\n        }\n      }\n\n      /* Inline and vertical */\n      &.${MENU_CLASS}-inline, &.${MENU_CLASS}-vertical .${MENU_CLASS}-submenu {\n        .${MENU_CLASS}-submenu-title {\n          padding-left: ${subMenuIndentVertical};\n          padding-right: ${subMenuIndentVertical};\n        }\n      }\n\n      /* Inline */\n      &.${MENU_CLASS}-inline {\n\n        .${MENU_CLASS}-submenu {\n          &.${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-open).${MENU_CLASS}-submenu-disabled > .${MENU_CLASS}-submenu-title {\n            &::after {\n              ${indicatorPositionStyle[size][getModeIndicatorPosition($indicatorPosition)][$itemContentDirection].selected.disabled};\n            }\n          }\n        }\n        \n        .${MENU_CLASS}-submenu-title {\n          margin: ${size === Sizes.Small ? '2px' : '4px'} 0;\n          \n          .${MENU_CLASS}-submenu-title-content {\n            padding: ${MenuConsts.consts[size].labelPadding[Directions.Vertical][$itemContentDirection]};\n            \n            .${MENU_CLASS}-label {\n              padding: unset;\n            }\n          }\n        }\n\n        .${MENU_CLASS}-submenu.${MENU_CLASS}-submenu-open\n          > .${MENU_CLASS}-submenu-title\n          > .${MENU_CLASS}-submenu-title-content\n          > .${MENU_CLASS}-submenu-expand-icon {\n          transform: rotate(180deg);\n        }\n\n        /* Lowest level */\n        .${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-open):not(.${MENU_CLASS}-submenu-disabled) > .${MENU_CLASS}-submenu-title {\n          background-color: transparent;\n\n          ${getSubMenuSelectedIndicatorStyle($indicatorPosition, 'vertical', $itemContentDirection, size)};\n        }\n      }\n\n      /* Vertical */\n      &.${MENU_CLASS}-vertical .${MENU_CLASS}-submenu {\n        .${MENU_CLASS}-submenu-title {\n          margin: ${size === Sizes.Small ? '2px' : '4px'} 0;\n\n          &:focus-visible {\n            outline: none;\n            position: relative;\n\n            .${MENU_CLASS}-submenu-title-content {\n              outline: 3px solid ${theme.additional.focus.subtle};\n            }\n          }\n\n          .${MENU_CLASS}-submenu-title-content {\n            padding: ${MenuConsts.consts[size].labelPadding[Directions.Vertical][$itemContentDirection]};\n            \n            .${MENU_CLASS}-label {\n              padding: unset;\n            }\n          }\n        }\n\n        .${MENU_CLASS}-submenu-expand-icon {\n          transform: rotate(-90deg);\n        }\n\n        &.${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-disabled) > .${MENU_CLASS}-submenu-title {\n          background-color: transparent;\n          \n          ${getSubMenuSelectedIndicatorStyle($indicatorPosition, 'vertical', $itemContentDirection, size)};\n        }\n\n        .${MENU_CLASS}-item-group .${MENU_CLASS}-item-group-list {\n          display: flex;\n          flex-direction: row;\n        }\n      }\n\n      /* Horizontal */\n      &.${MENU_CLASS}-horizontal .${MENU_CLASS}-submenu {\n        display: flex;\n        flex-direction: row;\n        align-items: stretch;\n\n        .${MENU_CLASS}-submenu-title {\n          padding: ${paddingOffset} ${subMenuIndentHorizontal};\n          \n          .${MENU_CLASS}-submenu-title-content {\n            padding: ${MenuConsts.consts[size].labelPadding[Directions.Horizontal][$itemContentDirection]};\n\n            .${MENU_CLASS}-label {\n              padding: unset;\n            }\n          }\n        }\n\n        &.${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-disabled) > .${MENU_CLASS}-submenu-title {\n          ${getSubMenuSelectedIndicatorStyle($indicatorPosition, 'horizontal', $itemContentDirection, size)};\n        }\n\n        &.${MENU_CLASS}-overflow-item-rest {\n          .${MENU_CLASS}-submenu-rest-icon {\n            width: ${iconSize};\n            height: ${iconSize};\n          }\n        }\n      }\n\n      /* Popup */\n      &.${MENU_CLASS}-submenu {\n        &.${MENU_CLASS}-submenu-popup {\n          z-index: ${ZIndexes.MENU};\n          min-width: 300px;\n          position: absolute;\n          transform-origin: 0 0;\n          background-color: transparent;\n          overflow: visible;\n          > .${MENU_CLASS}-sub {\n            background-color: ${theme.onSurface.elevated.default.background};\n            box-shadow: ${theme.elevation.level2};\n            border-radius: 8px;\n\n            .${MENU_CLASS}-item-group-title,\n            .${MENU_CLASS}-submenu-title,\n            .${MENU_CLASS}-item {\n              align-items: stretch;\n            }\n            \n            ${mode !== 'horizontal' && css`\n              .${MENU_CLASS}-item-group-title {\n                margin-left: -${MenuConsts.consts[size].itemListMarginLeft}px;\n              }\n\n              .${MENU_CLASS}-submenu-title {\n                margin-left: -${MenuConsts.consts[size].itemListMarginLeft}px;\n              }\n\n              .${MENU_CLASS}-item {\n                margin-left: -${MenuConsts.consts[size].itemListMarginLeft}px;\n              }\n            `}\n          }\n        }\n\n        &.${MENU_CLASS}-submenu-hidden {\n          display: none;\n        }\n\n        /* Vertical and horizontal */\n        .${MENU_CLASS}-vertical {\n          width: 100%;\n          max-width: 300px;\n          padding: ${MenuConsts.consts[size].subMenuLabelPadding} 0;\n\n          .${MENU_CLASS}-submenu-title {\n            padding: ${MenuConsts.consts[size].itemPadding[Directions.Horizontal][$itemContentDirection]};\n            .${MENU_CLASS}-submenu-title-content {\n              margin: -4px 2px;\n              \n              ${mode === 'horizontal' ? css`\n                  padding: 4px 8px 4px 0;`\n        : css`\n                  margin-left: ${MenuConsts.consts[size].verticalPopupMarginLeft}px;\n                  padding-right: 8px;\n              `}\n            }\n          }\n\n          .${MENU_CLASS}-submenu-selected > .${MENU_CLASS}-submenu-title:after {\n            ${indicatorPositionStyle[size][getModeIndicatorPosition($indicatorPosition)][$itemContentDirection].selected.default};\n          }\n\n          .${MENU_CLASS}-submenu-expand-icon {\n            transform: rotate(-90deg);\n          }\n        }\n      }\n    `;\n  }}\n`;\n"],"names":["consts","MenuConsts","subMenuStyle","css","theme","size","inlineCollapsed","$indicatorPosition","$itemContentDirection","Directions","mode","paddingOffset","subMenuIndentVertical","subMenuIndentHorizontal","Sizes","iconSize","gap","MENU_CLASS","getFabricStyles","LayerColor","States","Surfaces","indicatorPositionStyle","getModeIndicatorPosition","MenuConsts.consts","getSubMenuSelectedIndicatorStyle","ZIndexes"],"mappings":"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"}

package/build/esm/components/Menu/utils/classObserverUtils.d.ts

@@ -0,0 +1,21 @@
+import { RefObject } from 'react';
+type OnClassChange = (classNames: DOMTokenList) => void;
+/**
+ * @private
+ *
+ * Currently only used in SubMenu to listen on submenu being open or not,
+ * due to rc-menu implementation (no other visibility than classes being present),
+ * due to Tooltip implementation (using Portal so CSS selection to hide Tooltip is not possible)
+ *
+ * Could be removed/improved depending on need:
+ * - potentially removed following refactor of Menu
+ * - potentially improved or exposed if consumers have a use of this Hook
+ *
+ * Implemented on 19th Sept. 2024 by "Jean Barriere <jean.barriere@acinguiux.com>"
+ * No external references.
+ * @param ref reference to observe on
+ * @param onChange function called when a class mutation is observed
+*/
+export declare const useClassObserver: <T extends HTMLElement>(ref: RefObject<T> | undefined, onChange: OnClassChange) => void;
+export {};
+//# sourceMappingURL=classObserverUtils.d.ts.map

package/build/esm/components/Menu/utils/classObserverUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"classObserverUtils.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/utils/classObserverUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAE7C,KAAK,aAAa,GAAG,CAAC,UAAU,EAAE,YAAY,KAAK,IAAI,CAAA;AAUvD;;;;;;;;;;;;;;;EAeE;AACF,eAAO,MAAM,gBAAgB,+BAAgC,UAAU,CAAC,CAAC,GAAG,SAAS,YAAY,aAAa,KAAG,IAchH,CAAC"}

package/build/esm/components/Menu/utils/classObserverUtils.js

@@ -0,0 +1,20 @@
+import { useEffect as e } from "react";
+const c = (t) => (r) => {
+  r.forEach((s) => {
+    s.attributeName === "class" && t(s.target.classList);
+  });
+}, u = (t, r) => {
+  e(() => {
+    if (!(t != null && t.current))
+      return () => {
+      };
+    const s = new MutationObserver(c(r));
+    return r(t.current.classList), s.observe(t.current, { attributes: !0 }), () => {
+      s.disconnect();
+    };
+  }, [t]);
+};
+export {
+  u as useClassObserver
+};
+//# sourceMappingURL=classObserverUtils.js.map

package/build/esm/components/Menu/utils/classObserverUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"classObserverUtils.js","sources":["../../../../../src/components/Menu/utils/classObserverUtils.ts"],"sourcesContent":["import { RefObject, useEffect } from 'react';\n\ntype OnClassChange = (classNames: DOMTokenList) => void\n\nconst createMutationCallback: (onChange: OnClassChange) => MutationCallback = (onChange) => (mutations) => {\n  mutations.forEach((mutation) => {\n    if (mutation.attributeName === 'class') {\n      onChange((mutation.target as HTMLElement).classList);\n    }\n  });\n};\n\n/**\n * @private\n * \n * Currently only used in SubMenu to listen on submenu being open or not,\n * due to rc-menu implementation (no other visibility than classes being present),\n * due to Tooltip implementation (using Portal so CSS selection to hide Tooltip is not possible)\n * \n * Could be removed/improved depending on need:\n * - potentially removed following refactor of Menu\n * - potentially improved or exposed if consumers have a use of this Hook\n * \n * Implemented on 19th Sept. 2024 by \"Jean Barriere <jean.barriere@acinguiux.com>\"\n * No external references.\n * @param ref reference to observe on\n * @param onChange function called when a class mutation is observed\n*/\nexport const useClassObserver = <T extends HTMLElement>(ref: RefObject<T> | undefined, onChange: OnClassChange): void => {\n  useEffect(() => {\n    if (!ref?.current) {\n      return () => {};\n    }\n    const mutationObserver = new MutationObserver(createMutationCallback(onChange));\n\n    onChange(ref.current.classList);\n    mutationObserver.observe(ref.current, { attributes: true });\n  \n    return () => {\n      mutationObserver.disconnect();\n    };\n  }, [ref]);\n};\n"],"names":["createMutationCallback","onChange","mutations","mutation","useClassObserver","ref","useEffect","mutationObserver"],"mappings":";AAIA,MAAMA,IAAwE,CAACC,MAAa,CAACC,MAAc;AAC/F,EAAAA,EAAA,QAAQ,CAACC,MAAa;AAC1B,IAAAA,EAAS,kBAAkB,WACnBF,EAAAE,EAAS,OAAuB,SAAS;AAAA,EACrD,CACD;AACH,GAkBaC,IAAmB,CAAwBC,GAA+BJ,MAAkC;AACvH,EAAAK,EAAU,MAAM;AACV,QAAA,EAACD,KAAA,QAAAA,EAAK;AACR,aAAO,MAAM;AAAA,MAAC;AAEhB,UAAME,IAAmB,IAAI,iBAAiBP,EAAuBC,CAAQ,CAAC;AAErE,WAAAA,EAAAI,EAAI,QAAQ,SAAS,GAC9BE,EAAiB,QAAQF,EAAI,SAAS,EAAE,YAAY,IAAM,GAEnD,MAAM;AACX,MAAAE,EAAiB,WAAW;AAAA,IAC9B;AAAA,EAAA,GACC,CAACF,CAAG,CAAC;AACV;"}

package/build/esm/components/Menu/utils/motionUtils.d.ts

@@ -2,6 +2,7 @@ import type { MotionEndEventHandler, MotionEventHandler } from 'rc-motion';
 export declare const getDefaultMotions: {
     horizontal: {
         motionName: string;
+        motionDeadline: number;
     };
     inline: {
         motionName: string;
@@ -18,6 +19,7 @@ export declare const getDefaultMotions: {
     };
     other: {
         motionName: string;
+        motionDeadline: number;
     };
 };
 //# sourceMappingURL=motionUtils.d.ts.map

package/build/esm/components/Menu/utils/motionUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"motionUtils.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/utils/motionUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAU3E,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;CAgB7B,CAAC"}
+{"version":3,"file":"motionUtils.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/utils/motionUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAU3E,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;CAiB7B,CAAC"}

package/build/esm/components/Menu/utils/motionUtils.js

@@ -1,6 +1,6 @@
 import { MENU_CLASS as e } from "../../../react-base/src/consts.js";
 const i = () => ({ height: 0, opacity: 0 }), a = (t) => ({ height: t ? t.scrollHeight : 0, opacity: 1 }), r = (t) => ({ height: t ? t.offsetHeight : 0 }), n = (t, o) => (o == null ? void 0 : o.deadline) === !0 || o.propertyName === "height", h = {
-  horizontal: { motionName: `${e}-slide-up` },
+  horizontal: { motionName: `${e}-slide-up`, motionDeadline: 150 },
   inline: {
     motionName: `${e}-collapse`,
     onAppearStart: i,
@@ -14,7 +14,10 @@ const i = () => ({ height: 0, opacity: 0 }), a = (t) => ({ height: t ? t.scrollH
     onLeaveEnd: n,
     motionDeadline: 500
   },
-  other: { motionName: `${e}-zoom` }
+  other: {
+    motionName: `${e}-zoom`,
+    motionDeadline: 150
+  }
 };
 export {
   h as getDefaultMotions

package/build/esm/components/Menu/utils/motionUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"motionUtils.js","sources":["../../../../../src/components/Menu/utils/motionUtils.ts"],"sourcesContent":["import type { MotionEndEventHandler, MotionEventHandler } from 'rc-motion';\nimport type { MotionEvent } from 'rc-motion/lib/interface';\nimport { MENU_CLASS } from 'acinguiux-ds-react-base';\n\nconst getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });\nconst getRealHeight: MotionEventHandler = (node) => ({ height: node ? node.scrollHeight : 0, opacity: 1 });\nconst getCurrentHeight: MotionEventHandler = (node) => ({ height: node ? node.offsetHeight : 0 });\nconst skipOpacityTransition: MotionEndEventHandler = (_, event: MotionEvent) =>\n  event?.deadline === true || (event as TransitionEvent).propertyName === 'height';\n\nexport const getDefaultMotions = {\n  horizontal: { motionName: `${MENU_CLASS}-slide-up` },\n  inline: {\n    motionName: `${MENU_CLASS}-collapse`,\n    onAppearStart: getCollapsedHeight,\n    onEnterStart: getCollapsedHeight,\n    onAppearActive: getRealHeight,\n    onEnterActive: getRealHeight,\n    onLeaveStart: getCurrentHeight,\n    onLeaveActive: getCollapsedHeight,\n    onAppearEnd: skipOpacityTransition,\n    onEnterEnd: skipOpacityTransition,\n    onLeaveEnd: skipOpacityTransition,\n    motionDeadline: 500,\n  },\n  other: { motionName: `${MENU_CLASS}-zoom` },\n};\n"],"names":["getCollapsedHeight","getRealHeight","node","getCurrentHeight","skipOpacityTransition","_","event","getDefaultMotions","MENU_CLASS"],"mappings":";AAIA,MAAMA,IAAyC,OAAO,EAAE,QAAQ,GAAG,SAAS,EAAE,IACxEC,IAAoC,CAACC,OAAU,EAAE,QAAQA,IAAOA,EAAK,eAAe,GAAG,SAAS,EAAE,IAClGC,IAAuC,CAACD,OAAU,EAAE,QAAQA,IAAOA,EAAK,eAAe,EAAE,IACzFE,IAA+C,CAACC,GAAGC,OACvDA,KAAA,gBAAAA,EAAO,cAAa,MAASA,EAA0B,iBAAiB,UAE7DC,IAAoB;AAAA,EAC/B,YAAY,EAAE,YAAY,GAAGC,CAAU,YAAY;AAAA,EACnD,QAAQ;AAAA,IACN,YAAY,GAAGA,CAAU;AAAA,IACzB,eAAeR;AAAA,IACf,cAAcA;AAAA,IACd,gBAAgBC;AAAA,IAChB,eAAeA;AAAA,IACf,cAAcE;AAAA,IACd,eAAeH;AAAA,IACf,aAAaI;AAAA,IACb,YAAYA;AAAA,IACZ,YAAYA;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,OAAO,EAAE,YAAY,GAAGI,CAAU,QAAQ;AAC5C;"}
+{"version":3,"file":"motionUtils.js","sources":["../../../../../src/components/Menu/utils/motionUtils.ts"],"sourcesContent":["import type { MotionEndEventHandler, MotionEventHandler } from 'rc-motion';\nimport type { MotionEvent } from 'rc-motion/lib/interface';\nimport { MENU_CLASS } from 'acinguiux-ds-react-base';\n\nconst getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });\nconst getRealHeight: MotionEventHandler = (node) => ({ height: node ? node.scrollHeight : 0, opacity: 1 });\nconst getCurrentHeight: MotionEventHandler = (node) => ({ height: node ? node.offsetHeight : 0 });\nconst skipOpacityTransition: MotionEndEventHandler = (_, event: MotionEvent) =>\n  event?.deadline === true || (event as TransitionEvent).propertyName === 'height';\n\nexport const getDefaultMotions = {\n  horizontal: { motionName: `${MENU_CLASS}-slide-up`, motionDeadline: 150 },\n  inline: {\n    motionName: `${MENU_CLASS}-collapse`,\n    onAppearStart: getCollapsedHeight,\n    onEnterStart: getCollapsedHeight,\n    onAppearActive: getRealHeight,\n    onEnterActive: getRealHeight,\n    onLeaveStart: getCurrentHeight,\n    onLeaveActive: getCollapsedHeight,\n    onAppearEnd: skipOpacityTransition,\n    onEnterEnd: skipOpacityTransition,\n    onLeaveEnd: skipOpacityTransition,\n    motionDeadline: 500,\n  },\n  other: { motionName: `${MENU_CLASS}-zoom`, motionDeadline: 150,\n},\n};\n"],"names":["getCollapsedHeight","getRealHeight","node","getCurrentHeight","skipOpacityTransition","_","event","getDefaultMotions","MENU_CLASS"],"mappings":";AAIA,MAAMA,IAAyC,OAAO,EAAE,QAAQ,GAAG,SAAS,EAAE,IACxEC,IAAoC,CAACC,OAAU,EAAE,QAAQA,IAAOA,EAAK,eAAe,GAAG,SAAS,MAChGC,IAAuC,CAACD,OAAU,EAAE,QAAQA,IAAOA,EAAK,eAAe,MACvFE,IAA+C,CAACC,GAAGC,OACvDA,KAAA,gBAAAA,EAAO,cAAa,MAASA,EAA0B,iBAAiB,UAE7DC,IAAoB;AAAA,EAC/B,YAAY,EAAE,YAAY,GAAGC,CAAU,aAAa,gBAAgB,IAAI;AAAA,EACxE,QAAQ;AAAA,IACN,YAAY,GAAGA,CAAU;AAAA,IACzB,eAAeR;AAAA,IACf,cAAcA;AAAA,IACd,gBAAgBC;AAAA,IAChB,eAAeA;AAAA,IACf,cAAcE;AAAA,IACd,eAAeH;AAAA,IACf,aAAaI;AAAA,IACb,YAAYA;AAAA,IACZ,YAAYA;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,OAAO;AAAA,IAAE,YAAY,GAAGI,CAAU;AAAA,IAAS,gBAAgB;AAAA,EAAA;AAE7D;"}

package/build/esm/components/Menu/utils/nodeUtils.d.ts

@@ -1,4 +1,6 @@
 import { ItemType } from 'rc-menu/lib/interface';
+import { MenuItemType } from '../Menu.types';
 export declare const useItems: (items?: ItemType[]) => (import("react/jsx-runtime").JSX.Element | null)[] | undefined;
 export declare const getItemsByPath: (path: string, items: ItemType[] | undefined) => string[];
+export declare const getLeafItems: (items?: ItemType[]) => MenuItemType[];
 //# sourceMappingURL=nodeUtils.d.ts.map

package/build/esm/components/Menu/utils/nodeUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nodeUtils.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/utils/nodeUtils.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AA8CjD,eAAO,MAAM,QAAQ,WAAY,QAAQ,EAAE,mEAO9B,CAAC;AAKd,eAAO,MAAM,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,KAAK,MAAM,EAYnF,CAAC"}
+{"version":3,"file":"nodeUtils.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/utils/nodeUtils.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAMjD,OAAO,EAAqB,YAAY,EAAe,MAAM,eAAe,CAAC;AAwC7E,eAAO,MAAM,QAAQ,WAAY,QAAQ,EAAE,mEAO9B,CAAC;AAKd,eAAO,MAAM,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,KAAK,MAAM,EAYnF,CAAC;AAEF,eAAO,MAAM,YAAY,WAAY,QAAQ,EAAE,KAAG,YAAY,EACoC,CAAC"}

package/build/esm/components/Menu/utils/nodeUtils.js

@@ -1,23 +1,23 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useMemo as h } from "react";
-import m from "../components/MenuDivider.js";
-import l from "../components/MenuItem.js";
-import y from "../components/MenuItemGroup.js";
-import I from "../components/SubMenu.js";
-const p = (r, o) => (r || []).map((e, d) => {
-  if (e && typeof e == "object") {
-    const { label: t, children: n, key: c, type: s, ...u } = e, i = c ?? `tmp-${d}`;
-    return n || s === "group" ? s === "group" ? /* @__PURE__ */ f(y, { ...u, title: t, children: p(n, o + 1) }, i) : /* @__PURE__ */ f(I, { level: o, ...u, title: t, children: p(n, o + 1) }, i) : s === "divider" ? /* @__PURE__ */ f(m, { ...u }, i) : /* @__PURE__ */ f(l, { level: o, ...u, children: t }, i);
+import { jsx as i } from "react/jsx-runtime";
+import { useMemo as I } from "react";
+import y from "../components/MenuDivider.js";
+import M from "../components/MenuItem.js";
+import a from "../components/MenuItemGroup.js";
+import g from "../components/SubMenu.js";
+const p = (r, n) => (r || []).map((t, d) => {
+  if (t && typeof t == "object") {
+    const { label: o, children: e, key: h, type: c, ...u } = t, f = h ?? `tmp-${d}`;
+    return e || c === "group" ? c === "group" ? /* @__PURE__ */ i(a, { ...u, title: o, children: p(e, n + 1) }, f) : /* @__PURE__ */ i(g, { level: n, ...u, title: o, children: p(e, n + 1) }, f) : c === "divider" ? /* @__PURE__ */ i(y, { ...u }, f) : /* @__PURE__ */ i(M, { level: n, ...u, children: o }, f);
   }
   return null;
-}).filter((e) => e), v = (r) => h(() => r && p(r, 0), [r]), M = (r) => !!r && "children" in r, g = (r) => !!r && "key" in r && !("children" in r), B = (r, o) => {
-  if (o === void 0)
-    return [];
-  const e = (d) => d.reduce((t, n) => n ? M(n) && n.children ? [...t, ...e(n.children)] : g(n) && n.path === r ? [...t, n.key] : t : t, []);
-  return e(o);
-};
+}).filter((t) => t), v = (r) => I(() => r && p(r, 0), [r]), s = (r) => !!r && "children" in r, l = (r) => !!r && "key" in r && !("children" in r), B = (r, n) => {
+  if (n === void 0) return [];
+  const t = (d) => d.reduce((o, e) => e ? s(e) && e.children ? [...o, ...t(e.children)] : l(e) && e.path === r ? [...o, e.key] : o : o, []);
+  return t(n);
+}, D = (r) => (r == null ? void 0 : r.flatMap((n) => s(n) ? n.children ?? [] : n).filter(l)) ?? [];
 export {
   B as getItemsByPath,
+  D as getLeafItems,
   v as useItems
 };
 //# sourceMappingURL=nodeUtils.js.map

package/build/esm/components/Menu/utils/nodeUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"nodeUtils.js","sources":["../../../../../src/components/Menu/utils/nodeUtils.tsx"],"sourcesContent":["// This hook is tweaked from Ant Design's menu component\n// https://github.com/ant-design/ant-design/blob/master/components/menu/hooks/useItems.tsx\n// It converts the items array to React nodes using our components\n\nimport { useMemo } from 'react';\n\nimport { ItemType } from 'rc-menu/lib/interface';\n\nimport MenuDivider from '../components/MenuDivider';\nimport MenuItem from '../components/MenuItem';\nimport MenuItemGroup from '../components/MenuItemGroup';\nimport SubMenu from '../components/SubMenu';\nimport { MenuItemGroupType, MenuItemType, SubMenuType } from '../Menu.types';\n\nconst convertItemsToNodes = (items: ItemType[], level: number) =>\n  (items || [])\n    .map((opt, index) => {\n      if (opt && typeof opt === 'object') {\n        const { label, children, key, type, ...restProps } = opt as any;\n        const mergedKey = key ?? `tmp-${index}`;\n\n        if (children || type === 'group') {\n          if (type === 'group') {\n            return (\n              <MenuItemGroup key={mergedKey} {...restProps} title={label}>\n                {convertItemsToNodes(children, level + 1)}\n              </MenuItemGroup>\n            );\n          }\n\n          return (\n            <SubMenu key={mergedKey} level={level} {...restProps} title={label}>\n              {convertItemsToNodes(children, level + 1)}\n            </SubMenu>\n          );\n        }\n\n        if (type === 'divider') {\n          return <MenuDivider key={mergedKey} {...restProps} />;\n        }\n\n        return (\n          <MenuItem key={mergedKey} level={level} {...restProps}>\n            {label}\n          </MenuItem>\n        );\n      }\n\n      return null;\n    })\n    .filter((opt) => opt);\n\nexport const useItems = (items?: ItemType[]) =>\n  useMemo(() => {\n    if (!items) {\n      return items;\n    }\n\n    return convertItemsToNodes(items, 0);\n  }, [items]);\n\nconst isParent = (item: ItemType): item is SubMenuType | MenuItemGroupType => !!item && 'children' in item;\nconst isMenuItem = (item: ItemType): item is MenuItemType => !!item && 'key' in item && !('children' in item);\n\nexport const getItemsByPath: (path: string, items: ItemType[] | undefined) => string[] = (path, items) => {\n  if (items === undefined) return [];\n  const findItem: (menuItems: ItemType[]) => string[] = (menuItems) =>\n    menuItems.reduce<string[]>((acc, item) => {\n      if (!item) return acc;\n      if (isParent(item) && item.children) return [...acc, ...findItem(item.children)];\n      if (isMenuItem(item) && item.path === path) return [...acc, item.key as string];\n\n      return acc;\n    }, []);\n\n  return findItem(items);\n};\n"],"names":["convertItemsToNodes","items","level","opt","index","label","children","key","type","restProps","mergedKey","jsx","MenuItemGroup","SubMenu","MenuDivider","MenuItem","useItems","useMemo","isParent","item","isMenuItem","getItemsByPath","path","findItem","menuItems","acc"],"mappings":";;;;;;AAcA,MAAMA,IAAsB,CAACC,GAAmBC,OAC7CD,KAAS,CAAA,GACP,IAAI,CAACE,GAAKC,MAAU;AACf,MAAAD,KAAO,OAAOA,KAAQ,UAAU;AAClC,UAAM,EAAE,OAAAE,GAAO,UAAAC,GAAU,KAAAC,GAAK,MAAAC,GAAM,GAAGC,EAAc,IAAAN,GAC/CO,IAAYH,KAAO,OAAOH,CAAK;AAEjC,WAAAE,KAAYE,MAAS,UACnBA,MAAS,UAET,gBAAAG,EAACC,GAA+B,EAAA,GAAGH,GAAW,OAAOJ,GAClD,UAAAL,EAAoBM,GAAUJ,IAAQ,CAAC,EAAA,GADtBQ,CAEpB,IAKD,gBAAAC,EAAAE,GAAA,EAAwB,OAAAX,GAAe,GAAGO,GAAW,OAAOJ,GAC1D,UAAAL,EAAoBM,GAAUJ,IAAQ,CAAC,EAAA,GAD5BQ,CAEd,IAIAF,MAAS,YACH,gBAAAG,EAAAG,GAAA,EAA6B,GAAGL,EAAA,GAAfC,CAA0B,sBAIlDK,GAAyB,EAAA,OAAAb,GAAe,GAAGO,GACzC,eADYC,CAEf;AAAA,EAEJ;AAEO,SAAA;AACT,CAAC,EACA,OAAO,CAACP,MAAQA,CAAG,GAEXa,IAAW,CAACf,MACvBgB,EAAQ,MACDhB,KAIED,EAAoBC,GAAO,CAAC,GAClC,CAACA,CAAK,CAAC,GAENiB,IAAW,CAACC,MAA4D,CAAC,CAACA,KAAQ,cAAcA,GAChGC,IAAa,CAACD,MAAyC,CAAC,CAACA,KAAQ,SAASA,KAAQ,EAAE,cAAcA,IAE3FE,IAA4E,CAACC,GAAMrB,MAAU;AACxG,MAAIA,MAAU;AAAW,WAAO;AAChC,QAAMsB,IAAgD,CAACC,MACrDA,EAAU,OAAiB,CAACC,GAAKN,MAC1BA,IACDD,EAASC,CAAI,KAAKA,EAAK,WAAiB,CAAC,GAAGM,GAAK,GAAGF,EAASJ,EAAK,QAAQ,CAAC,IAC3EC,EAAWD,CAAI,KAAKA,EAAK,SAASG,IAAa,CAAC,GAAGG,GAAKN,EAAK,GAAa,IAEvEM,IAJWA,GAKjB,CAAE,CAAA;AAEP,SAAOF,EAAStB,CAAK;AACvB;"}
+{"version":3,"file":"nodeUtils.js","sources":["../../../../../src/components/Menu/utils/nodeUtils.tsx"],"sourcesContent":["// This hook is tweaked from Ant Design's menu component\n// https://github.com/ant-design/ant-design/blob/master/components/menu/hooks/useItems.tsx\n// It converts the items array to React nodes using our components\n\nimport { useMemo } from 'react';\n\nimport { ItemType } from 'rc-menu/lib/interface';\n\nimport MenuDivider from '../components/MenuDivider';\nimport MenuItem from '../components/MenuItem';\nimport MenuItemGroup from '../components/MenuItemGroup';\nimport SubMenu from '../components/SubMenu';\nimport { MenuItemGroupType, MenuItemType, SubMenuType } from '../Menu.types';\n\nconst convertItemsToNodes = (items: ItemType[], level: number) =>\n  (items || [])\n    .map((opt, index) => {\n      if (opt && typeof opt === 'object') {\n        const { label, children, key, type, ...restProps } = opt as any;\n        const mergedKey = key ?? `tmp-${index}`;\n\n        if (children || type === 'group') {\n          if (type === 'group') {\n            return (\n              <MenuItemGroup key={mergedKey} {...restProps} title={label}>\n                {convertItemsToNodes(children, level + 1)}\n              </MenuItemGroup>\n            );\n          }\n\n          return (\n            <SubMenu key={mergedKey} level={level} {...restProps} title={label}>\n              {convertItemsToNodes(children, level + 1)}\n            </SubMenu>\n          );\n        }\n\n        if (type === 'divider') {\n          return <MenuDivider key={mergedKey} {...restProps} />;\n        }\n\n        return (\n          <MenuItem key={mergedKey} level={level} {...restProps}>\n            {label}\n          </MenuItem>\n        );\n      }\n\n      return null;\n    })\n    .filter((opt) => opt);\n\nexport const useItems = (items?: ItemType[]) =>\n  useMemo(() => {\n    if (!items) {\n      return items;\n    }\n\n    return convertItemsToNodes(items, 0);\n  }, [items]);\n\nconst isParent = (item: ItemType): item is SubMenuType | MenuItemGroupType => !!item && 'children' in item;\nconst isMenuItem = (item: ItemType): item is MenuItemType => !!item && 'key' in item && !('children' in item);\n\nexport const getItemsByPath: (path: string, items: ItemType[] | undefined) => string[] = (path, items) => {\n  if (items === undefined) return [];\n  const findItem: (menuItems: ItemType[]) => string[] = (menuItems) =>\n    menuItems.reduce<string[]>((acc, item) => {\n      if (!item) return acc;\n      if (isParent(item) && item.children) return [...acc, ...findItem(item.children)];\n      if (isMenuItem(item) && item.path === path) return [...acc, item.key as string];\n\n      return acc;\n    }, []);\n\n  return findItem(items);\n};\n\nexport const getLeafItems = (items?: ItemType[]): MenuItemType[] =>\n  items?.flatMap((item) => isParent(item) ? (item.children ?? []) : item).filter(isMenuItem) ?? [];\n"],"names":["convertItemsToNodes","items","level","opt","index","label","children","key","type","restProps","mergedKey","jsx","MenuItemGroup","SubMenu","MenuDivider","MenuItem","useItems","useMemo","isParent","item","isMenuItem","getItemsByPath","path","findItem","menuItems","acc","getLeafItems"],"mappings":";;;;;;AAcA,MAAMA,IAAsB,CAACC,GAAmBC,OAC7CD,KAAS,CAAA,GACP,IAAI,CAACE,GAAKC,MAAU;AACf,MAAAD,KAAO,OAAOA,KAAQ,UAAU;AAClC,UAAM,EAAE,OAAAE,GAAO,UAAAC,GAAU,KAAAC,GAAK,MAAAC,GAAM,GAAGC,MAAcN,GAC/CO,IAAYH,KAAO,OAAOH,CAAK;AAEjC,WAAAE,KAAYE,MAAS,UACnBA,MAAS,UAET,gBAAAG,EAACC,GAA+B,EAAA,GAAGH,GAAW,OAAOJ,GAClD,UAAAL,EAAoBM,GAAUJ,IAAQ,CAAC,EAAA,GADtBQ,CAEpB,IAKD,gBAAAC,EAAAE,GAAA,EAAwB,OAAAX,GAAe,GAAGO,GAAW,OAAOJ,GAC1D,UAAAL,EAAoBM,GAAUJ,IAAQ,CAAC,EAAA,GAD5BQ,CAEd,IAIAF,MAAS,YACH,gBAAAG,EAAAG,GAAA,EAA6B,GAAGL,EAAA,GAAfC,CAA0B,sBAIlDK,GAAyB,EAAA,OAAAb,GAAe,GAAGO,GACzC,eADYC,CAEf;AAAA,EAAA;AAIG,SAAA;AACT,CAAC,EACA,OAAO,CAACP,MAAQA,CAAG,GAEXa,IAAW,CAACf,MACvBgB,EAAQ,MACDhB,KAIED,EAAoBC,GAAO,CAAC,GAClC,CAACA,CAAK,CAAC,GAENiB,IAAW,CAACC,MAA4D,CAAC,CAACA,KAAQ,cAAcA,GAChGC,IAAa,CAACD,MAAyC,CAAC,CAACA,KAAQ,SAASA,KAAQ,EAAE,cAAcA,IAE3FE,IAA4E,CAACC,GAAMrB,MAAU;AACpG,MAAAA,MAAU,OAAW,QAAO,CAAC;AACjC,QAAMsB,IAAgD,CAACC,MACrDA,EAAU,OAAiB,CAACC,GAAKN,MAC1BA,IACDD,EAASC,CAAI,KAAKA,EAAK,WAAiB,CAAC,GAAGM,GAAK,GAAGF,EAASJ,EAAK,QAAQ,CAAC,IAC3EC,EAAWD,CAAI,KAAKA,EAAK,SAASG,IAAa,CAAC,GAAGG,GAAKN,EAAK,GAAa,IAEvEM,IAJWA,GAKjB,EAAE;AAEP,SAAOF,EAAStB,CAAK;AACvB,GAEayB,IAAe,CAACzB,OAC3BA,KAAA,gBAAAA,EAAO,QAAQ,CAACkB,MAASD,EAASC,CAAI,IAAKA,EAAK,YAAY,CAAM,IAAAA,GAAM,OAAOC,OAAe,CAAA;"}