acinguiux-ds-react-framework 0.0.8 → 0.1.0

package/build/cjs/components/Menu/styles/menuLabel.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menuLabel.styles.js","sources":["../../../../../src/components/Menu/styles/menuLabel.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { MENU_CLASS, Directions, NAV_BAR_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\n\nimport type { StyledMenuProps } from '../Menu.types';\nimport Label from '../../Text/components/Label/Label';\n\nconst { consts } = MenuConsts;\n\nexport const TooltipLabel = styled(Label)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 8px;\n  max-width: 240px;\n`;\n\nexport const menuLabelStyle = css<StyledMenuProps>`\n  ${({ size, inlineCollapsed, $itemContentDirection = Directions.Horizontal, mode }) => {\n    const iconSize = `${consts[size].iconSize}px`;\n    const gap = `${consts[size].gap}px`;\n    const iconContainerWidth = `${consts[size].iconContainer.width}px`;\n    const iconContainerHeight = `${consts[size].iconContainer.height}px`;\n\n    return css`\n      .${MENU_CLASS}-label {\n        display: flex;\n        align-items: center;\n        flex-direction: ${$itemContentDirection === Directions.Vertical ? 'column' : 'row'};\n        gap: ${gap};\n        border-radius: ${MenuConsts.consts[size].borderRadius}px;\n        padding: ${MenuConsts.consts[size].labelPadding[\n          mode === Directions.Horizontal ? Directions.Horizontal : Directions.Vertical\n        ][$itemContentDirection]};\n        transition: background-color 0.3s ease-out;\n        min-width: 0;\n        text-decoration: none;\n\n        .${MENU_CLASS}-label-text {\n          transition: opacity 0.3s ease-out;\n          white-space: nowrap;\n          text-overflow: ellipsis;\n          overflow: hidden;\n        }\n\n        .${MENU_CLASS}-label-icon {\n          min-width: ${iconContainerWidth};\n          max-height: ${iconContainerHeight};\n          display: flex;\n          align-items: center;\n          justify-content: center;\n\n          > svg {\n            display: block;\n            width: ${iconSize};\n            height: ${iconSize};\n          }\n        }\n      }\n\n      /* Horizontal */\n      &.${MENU_CLASS}-horizontal .${MENU_CLASS}-label {\n        align-items: center;\n\n        .${MENU_CLASS}-label-icon {\n          margin-left: -2px;\n          min-width: ${iconSize};\n        }\n      }\n\n      /* Top level */\n      &.${MENU_CLASS} {\n        > .${MENU_CLASS}-submenu\n          > .${MENU_CLASS}-submenu-title\n          > .${MENU_CLASS}-submenu-title-content,\n          > .${MENU_CLASS}-item {\n          > .${MENU_CLASS}-label > .${MENU_CLASS}-label-text {\n            white-space: nowrap;\n          }\n        }\n      }\n\n      ${inlineCollapsed &&\n      css`\n        &.${MENU_CLASS}-inline-collapsed {\n          &:focus-visible {\n            ::before {\n              margin-right: ${MenuConsts.consts[size].collapsedItemMarginRight};\n            }\n          }\n          .${MENU_CLASS}-item {\n            margin-right: ${MenuConsts.consts[size].collapsedItemMarginRight};\n          }\n\n          .${MENU_CLASS}-submenu {\n            .${MENU_CLASS}-submenu-title {\n              margin-right: ${MenuConsts.consts[size].collapsedItemMarginRight};\n              .${MENU_CLASS}-submenu-title-content {\n                .${MENU_CLASS}-item {\n                  .${MENU_CLASS}-label .${MENU_CLASS}-label-text {\n                    opacity: 0;\n                    text-overflow: clip;\n                    white-space: nowrap;\n                  }\n                }\n              }\n            }\n          }\n        }\n\n        .${NAV_BAR_CLASS} &.${MENU_CLASS}-inline-collapsed {\n          &:focus-visible {\n            ::before {\n              margin-right: 0;\n            }\n          }\n\n          .${MENU_CLASS}-item {\n            margin-right: 0;\n          }\n\n          .${MENU_CLASS}-submenu {\n            .${MENU_CLASS}-submenu-title {\n              margin-right: 0;\n            }\n          }\n        }\n      `}\n    `;\n  }}\n`;\n"],"names":["consts","MenuConsts","TooltipLabel","styled","Label","menuLabelStyle","css","size","inlineCollapsed","$itemContentDirection","Directions","mode","iconSize","gap","iconContainerWidth","iconContainerHeight","MENU_CLASS","MenuConsts.consts","NAV_BAR_CLASS"],"mappings":"4TAOM,CAAE,OAAAA,CAAW,EAAAC,EAENC,EAAeC,EAAOC,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ3BC,EAAiBC,EAAA;AAAA,IAC1B,CAAC,CAAE,KAAAC,EAAM,gBAAAC,EAAiB,sBAAAC,EAAwBC,aAAW,WAAY,KAAAC,KAAW,CACpF,MAAMC,EAAW,GAAGZ,EAAOO,CAAI,EAAE,QAAQ,KACnCM,EAAM,GAAGb,EAAOO,CAAI,EAAE,GAAG,KACzBO,EAAqB,GAAGd,EAAOO,CAAI,EAAE,cAAc,KAAK,KACxDQ,EAAsB,GAAGf,EAAOO,CAAI,EAAE,cAAc,MAAM,KAEzD,OAAAD,EAAA;AAAA,SACFU,YAAU;AAAA;AAAA;AAAA,0BAGOP,IAA0BC,EAAA,WAAW,SAAW,SAAW,KAAK;AAAA,eAC3EG,CAAG;AAAA,yBACOI,EAAW,OAAOV,CAAI,EAAE,YAAY;AAAA,mBAC1CU,EAAW,OAAOV,CAAI,EAAE,aACjCI,IAASD,EAAA,WAAW,WAAaA,EAAAA,WAAW,WAAaA,EAAAA,WAAW,QACtE,EAAED,CAAqB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,WAKrBO,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOVA,YAAU;AAAA,uBACEF,CAAkB;AAAA,wBACjBC,CAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOtBH,CAAQ;AAAA,sBACPA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMpBI,EAAU,UAAA,gBAAgBA,YAAU;AAAA;AAAA;AAAA,WAGnCA,YAAU;AAAA;AAAA,uBAEEJ,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,UAKrBI,YAAU;AAAA,aACPA,YAAU;AAAA,eACRA,YAAU;AAAA,eACVA,YAAU;AAAA,eACVA,YAAU;AAAA,eACVA,EAAU,UAAA,aAAaA,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMxCR,GACFF,EAAA;AAAA,YACMU,YAAU;AAAA;AAAA;AAAA,8BAGQC,EAAW,OAAOV,CAAI,EAAE,wBAAwB;AAAA;AAAA;AAAA,aAGjES,YAAU;AAAA,4BACKC,EAAW,OAAOV,CAAI,EAAE,wBAAwB;AAAA;AAAA;AAAA,aAG/DS,YAAU;AAAA,eACRA,YAAU;AAAA,8BACKC,EAAW,OAAOV,CAAI,EAAE,wBAAwB;AAAA,iBAC7DS,YAAU;AAAA,mBACRA,YAAU;AAAA,qBACRA,EAAU,UAAA,WAAWA,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAWzCE,EAAa,aAAA,MAAMF,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO3BA,YAAU;AAAA;AAAA;AAAA;AAAA,aAIVA,YAAU;AAAA,eACRA,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA,OAKlB;AAAA,KAEL,CAAC;AAAA"}

package/build/cjs/components/Menu/styles/motion.styles.js

@@ -0,0 +1,129 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("styled-components"),e=require("../../../react-base/src/consts/index.js"),a=n.css`
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+`,i=n.css`
+  .${e.MENU_CLASS} {
+    &-collapse {
+      overflow: hidden;
+      transition:
+        height 0.3s ease-in-out,
+        opacity 0.3s ease-in-out;
+    }
+
+    &-collapse-enter,
+    &-collapse-appear {
+      opacity: 0;
+    }
+
+    &-collapse-leave {
+      opacity: 1;
+    }
+  }
+
+  &.${e.MENU_CLASS} {
+    &-slide-up-enter,
+    &-slide-up-appear {
+      ${a};
+      opacity: 0;
+      transform: scaleY(0);
+      animation-timing-function: ease-in-out;
+      animation-play-state: paused;
+    }
+
+    &-slide-up-leave {
+      ${a};
+      opacity: 1;
+      transform: scaleY(1);
+      animation-timing-function: ease-in-out;
+      animation-play-state: paused;
+    }
+
+    &-slide-up-enter-active,
+    &-slide-up-appear-active {
+      animation-name: slide-up-in;
+      animation-play-state: running;
+    }
+
+    &-slide-up-leave-active {
+      animation-name: slide-up-out;
+      animation-play-state: running;
+    }
+
+    @keyframes slide-up-in {
+      0% {
+        opacity: 0;
+        transform: scaleY(0.8);
+      }
+
+      100% {
+        opacity: 1;
+        transform: scaleY(1);
+      }
+    }
+
+    @keyframes slide-up-out {
+      0% {
+        opacity: 1;
+        transform: scaleY(1);
+      }
+
+      100% {
+        opacity: 0;
+        transform: scaleY(0.8);
+      }
+    }
+
+    &-zoom-enter,
+    &-zoom-appear {
+      ${a};
+      transform-origin: 0% 0%;
+      transform: scale(0);
+      opacity: 0;
+      animation-timing-function: ease-in-out;
+      animation-play-state: paused;
+    }
+
+    &-zoom-leave {
+      ${a};
+      transform-origin: 0% 0%;
+      animation-timing-function: ease-in-out;
+      animation-play-state: paused;
+    }
+
+    &-zoom-enter-active,
+    &-zoom-appear-active {
+      animation-name: open-zoom-in;
+      animation-play-state: running;
+    }
+
+    &-zoom-leave-active {
+      animation-name: open-zoom-out;
+      animation-play-state: running;
+    }
+
+    @keyframes open-zoom-in {
+      0% {
+        opacity: 0;
+        transform: scale(0, 0);
+      }
+
+      100% {
+        opacity: 1;
+        transform: scale(1, 1);
+      }
+    }
+
+    @keyframes open-zoom-out {
+      0% {
+        opacity: 1;
+        transform: scale(1, 1);
+      }
+
+      100% {
+        opacity: 0;
+        transform: scale(0, 0);
+      }
+    }
+  }
+`;exports.motionStyle=i;
+//# sourceMappingURL=motion.styles.js.map

package/build/cjs/components/Menu/styles/motion.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.styles.js","sources":["../../../../../src/components/Menu/styles/motion.styles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { MENU_CLASS } from 'acinguiux-ds-react-base/consts';\n\nconst commonMotion = css`\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n`;\n\nexport const motionStyle = css`\n  .${MENU_CLASS} {\n    &-collapse {\n      overflow: hidden;\n      transition:\n        height 0.3s ease-in-out,\n        opacity 0.3s ease-in-out;\n    }\n\n    &-collapse-enter,\n    &-collapse-appear {\n      opacity: 0;\n    }\n\n    &-collapse-leave {\n      opacity: 1;\n    }\n  }\n\n  &.${MENU_CLASS} {\n    &-slide-up-enter,\n    &-slide-up-appear {\n      ${commonMotion};\n      opacity: 0;\n      transform: scaleY(0);\n      animation-timing-function: ease-in-out;\n      animation-play-state: paused;\n    }\n\n    &-slide-up-leave {\n      ${commonMotion};\n      opacity: 1;\n      transform: scaleY(1);\n      animation-timing-function: ease-in-out;\n      animation-play-state: paused;\n    }\n\n    &-slide-up-enter-active,\n    &-slide-up-appear-active {\n      animation-name: slide-up-in;\n      animation-play-state: running;\n    }\n\n    &-slide-up-leave-active {\n      animation-name: slide-up-out;\n      animation-play-state: running;\n    }\n\n    @keyframes slide-up-in {\n      0% {\n        opacity: 0;\n        transform: scaleY(0.8);\n      }\n\n      100% {\n        opacity: 1;\n        transform: scaleY(1);\n      }\n    }\n\n    @keyframes slide-up-out {\n      0% {\n        opacity: 1;\n        transform: scaleY(1);\n      }\n\n      100% {\n        opacity: 0;\n        transform: scaleY(0.8);\n      }\n    }\n\n    &-zoom-enter,\n    &-zoom-appear {\n      ${commonMotion};\n      transform-origin: 0% 0%;\n      transform: scale(0);\n      opacity: 0;\n      animation-timing-function: ease-in-out;\n      animation-play-state: paused;\n    }\n\n    &-zoom-leave {\n      ${commonMotion};\n      transform-origin: 0% 0%;\n      animation-timing-function: ease-in-out;\n      animation-play-state: paused;\n    }\n\n    &-zoom-enter-active,\n    &-zoom-appear-active {\n      animation-name: open-zoom-in;\n      animation-play-state: running;\n    }\n\n    &-zoom-leave-active {\n      animation-name: open-zoom-out;\n      animation-play-state: running;\n    }\n\n    @keyframes open-zoom-in {\n      0% {\n        opacity: 0;\n        transform: scale(0, 0);\n      }\n\n      100% {\n        opacity: 1;\n        transform: scale(1, 1);\n      }\n    }\n\n    @keyframes open-zoom-out {\n      0% {\n        opacity: 1;\n        transform: scale(1, 1);\n      }\n\n      100% {\n        opacity: 0;\n        transform: scale(0, 0);\n      }\n    }\n  }\n`;\n"],"names":["commonMotion","css","motionStyle","MENU_CLASS"],"mappings":"sMAGMA,EAAeC,EAAA;AAAA;AAAA;AAAA,EAKRC,EAAcD,EAAA;AAAA,KACtBE,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAkBTA,YAAU;AAAA;AAAA;AAAA,QAGRH,CAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQZA,CAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QA4CZA,CAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASZA,CAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

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

@@ -0,0 +1,330 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("styled-components"),e=require("../../../react-base/src/consts/index.js"),a=require("../../../react-base/src/theme/variableTheme.js"),o=require("../../../react-base/src/components/Menu/Menu.consts.js"),n=require("acinguiux-ds-fabrics"),N=require("../../../react-base/src/utils/stylesUtils.js"),s=require("../Menu.utils.js"),M=require("./indicator.styles.js"),{consts:d}=o,E=l.css`
+  ${({theme:u,size:t,inlineCollapsed:m,$indicatorPosition:S,$itemContentDirection:i=`${e.Directions.Horizontal}`,mode:b})=>{const _=`${d[t].subMenuOffestPadding}px`,L=`${d[t].indent}px`,A=`${d[t].indent-(t===e.Sizes.XSmall?6:10)}px`,c=`${d[t].iconSize}px`,U=`${d[t].gap}px`,r=u.getVariablesLayer({foundation:n.FabricsVariables.Foundations.Section}),$=u.getVariablesLayer({foundation:n.FabricsVariables.Foundations.Section,disabled:"true"});return l.css`
+      .${e.MENU_CLASS}-submenu {
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+
+        /* Default */
+        &.${e.MENU_CLASS}-submenu, &.${e.MENU_CLASS}-submenu-active {
+          .${e.MENU_CLASS}-submenu-title .${e.MENU_CLASS}-submenu-title-content .${e.MENU_CLASS}-label {
+            color: ${r[a.VariablesNames.TextOnFoundationSubtle]};
+
+            svg {
+              fill: ${r[a.VariablesNames.TextOnFoundationSubtle]};
+            }
+          }
+        }
+
+        /* Active */
+        &.${e.MENU_CLASS}-submenu-selected {
+          > .${e.MENU_CLASS}-submenu-title .${e.MENU_CLASS}-submenu-title-content .${e.MENU_CLASS}-label {
+            color: ${r[a.VariablesNames.TextOnFoundationStrong]};
+
+            svg {
+              fill: ${r[a.VariablesNames.TextOnFoundationStrong]};
+            }
+          }
+        }
+
+        /* Disabled */
+        &.${e.MENU_CLASS}-submenu-disabled {
+          > .${e.MENU_CLASS}-submenu-title .${e.MENU_CLASS}-submenu-title-content .${e.MENU_CLASS}-label {
+            color: ${$[a.VariablesNames.TextOnFoundationSubtle]};
+            cursor: not-allowed;
+
+            svg {
+              fill: ${$[a.VariablesNames.TextOnFoundationSubtle]};
+            }
+          }
+        }
+
+        &.${e.MENU_CLASS}-submenu-selected:not(.${e.MENU_CLASS}-submenu-open).${e.MENU_CLASS}-submenu-disabled
+          > .${e.MENU_CLASS}-submenu-title {
+          &::after {
+            ${M.indicatorPositionStyle[t][s.getModeIndicatorPosition(S,b)][i].selected.disabled};
+          }
+        }
+
+        .${e.MENU_CLASS}-submenu-title {
+          position: relative;
+          display: flex;
+          align-items: center;
+          flex: 1 1 0;
+          min-width: 0;
+
+          &:focus-visible {
+            outline: none;
+            position: relative;
+
+            .${e.MENU_CLASS}-submenu-title-content {
+              ${N.getFocusStyles(u)};
+            }
+          }
+        }
+
+        .${e.MENU_CLASS}-submenu-title-content {
+          display: flex;
+          flex: 1 1 0;
+          min-width: 0;
+          justify-content: space-between;
+          align-items: center;
+          gap: ${U};
+          border-radius: ${o.consts[t].borderRadius}px;
+          transition: background-color 0.3s ease-out;
+
+          ${b!=="horizontal"&&l.css`
+            margin-right: ${o.consts[t].collapsedItemMarginRight};
+          `}
+        }
+
+        .${e.MENU_CLASS}-submenu-expand-icon {
+          width: ${c};
+          height: ${c};
+          flex-shrink: 0;
+          transition: transform 0.2s ease-in-out;
+          margin: -10px 0;
+
+          ${m&&l.css`
+            display: none;
+          `}
+        }
+
+        &:not(.${e.MENU_CLASS}-submenu-active):not(.${e.MENU_CLASS}-submenu-selected) > .${e.MENU_CLASS}-submenu-title {
+          > .${e.MENU_CLASS}-submenu-title-content {
+            color: ${r[a.VariablesNames.TextOnFoundationSubtle]};
+          }
+        }
+
+        &.${e.MENU_CLASS}-submenu-active:not(.${e.MENU_CLASS}-submenu-selected) > .${e.MENU_CLASS}-submenu-title {
+          &:focus-visible {
+            > .${e.MENU_CLASS}-submenu-title-content {
+              background-color: transparent;
+            }
+          }
+
+          > .${e.MENU_CLASS}-submenu-title-content {
+            background-color: ${s.getBackgroundColor(u,n.States.Hover)};
+          }
+
+          > .${e.MENU_CLASS}-submenu-title-content:active {
+            background-color: ${s.getBackgroundColor(u,n.States.Active)};
+          }
+        }
+
+        &.${e.MENU_CLASS}-submenu-selected.${e.MENU_CLASS}-submenu-disabled > .${e.MENU_CLASS}-submenu-title {
+          &,
+          .${e.MENU_CLASS}-label {
+            color: ${$[a.VariablesNames.TextOnFoundationSubtle]};
+          }
+
+          > .${e.MENU_CLASS}-submenu-title-content {
+            background-color: ${s.getBackgroundColor(u,n.States.Default,n.FabricsVariables.Foundations.Section,!0)};
+
+            svg {
+              fill: ${$[a.VariablesNames.TextOnFoundationSubtle]};
+            }
+          }
+        }
+
+        &.${e.MENU_CLASS}-submenu-selected:not(.${e.MENU_CLASS}-submenu-disabled) > .${e.MENU_CLASS}-submenu-title {
+          > .${e.MENU_CLASS}-submenu-title-content {
+            background-color: ${s.getBackgroundColor(u,n.States.Default,n.FabricsVariables.Foundations.Section)};
+          }
+
+          > .${e.MENU_CLASS}-submenu-title-content:hover {
+            background-color: ${s.getBackgroundColor(u,n.States.Hover,n.FabricsVariables.Foundations.Section)};
+          }
+
+          > .${e.MENU_CLASS}-submenu-title-content:active {
+            background-color: ${s.getBackgroundColor(u,n.States.Active,n.FabricsVariables.Foundations.Section)};
+          }
+        }
+      }
+
+      /* Inline and vertical */
+      &.${e.MENU_CLASS}-inline, &.${e.MENU_CLASS}-vertical .${e.MENU_CLASS}-submenu {
+        .${e.MENU_CLASS}-submenu-title {
+          padding-left: ${L};
+          padding-right: ${L};
+        }
+      }
+
+      /* Inline */
+      &.${e.MENU_CLASS}-inline {
+        .${e.MENU_CLASS}-submenu {
+          &.${e.MENU_CLASS}-submenu-selected:not(.${e.MENU_CLASS}-submenu-open).${e.MENU_CLASS}-submenu-disabled
+            > .${e.MENU_CLASS}-submenu-title {
+            &::after {
+              ${M.indicatorPositionStyle[t][s.getModeIndicatorPosition(S)][i].selected.disabled};
+            }
+          }
+        }
+
+        .${e.MENU_CLASS}-submenu-title {
+          margin: ${t===e.Sizes.Small?"2px":"4px"} 0;
+
+          .${e.MENU_CLASS}-submenu-title-content {
+            padding: ${o.consts[t].labelPadding[e.Directions.Vertical][i]};
+
+            .${e.MENU_CLASS}-label {
+              padding: unset;
+            }
+          }
+        }
+
+        .${e.MENU_CLASS}-submenu.${e.MENU_CLASS}-submenu-open
+          > .${e.MENU_CLASS}-submenu-title
+          > .${e.MENU_CLASS}-submenu-title-content
+          > .${e.MENU_CLASS}-submenu-expand-icon {
+          transform: rotate(180deg);
+        }
+
+        /* Lowest level */
+        .${e.MENU_CLASS}-submenu-selected:not(.${e.MENU_CLASS}-submenu-open):not(.${e.MENU_CLASS}-submenu-disabled)
+          > .${e.MENU_CLASS}-submenu-title {
+          background-color: transparent;
+
+          ${s.getSubMenuSelectedIndicatorStyle(S,"vertical",i,t)};
+        }
+      }
+
+      /* Vertical */
+      &.${e.MENU_CLASS}-vertical .${e.MENU_CLASS}-submenu {
+        .${e.MENU_CLASS}-submenu-title {
+          margin: ${t===e.Sizes.Small?"2px":"4px"} 0;
+
+          &:focus-visible {
+            outline: none;
+            position: relative;
+
+            .${e.MENU_CLASS}-submenu-title-content {
+              ${N.getFocusStyles(u)};
+            }
+          }
+
+          .${e.MENU_CLASS}-submenu-title-content {
+            padding: ${o.consts[t].labelPadding[e.Directions.Vertical][i]};
+
+            .${e.MENU_CLASS}-label {
+              padding: unset;
+            }
+          }
+        }
+
+        .${e.MENU_CLASS}-submenu-expand-icon {
+          transform: rotate(-90deg);
+        }
+
+        &.${e.MENU_CLASS}-submenu-selected:not(.${e.MENU_CLASS}-submenu-disabled) > .${e.MENU_CLASS}-submenu-title {
+          background-color: transparent;
+
+          ${s.getSubMenuSelectedIndicatorStyle(S,"vertical",i,t)};
+        }
+
+        .${e.MENU_CLASS}-item-group .${e.MENU_CLASS}-item-group-list {
+          display: flex;
+          flex-direction: row;
+        }
+      }
+
+      /* Horizontal */
+      &.${e.MENU_CLASS}-horizontal .${e.MENU_CLASS}-submenu {
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+
+        .${e.MENU_CLASS}-submenu-title {
+          padding: ${_} ${A};
+
+          .${e.MENU_CLASS}-submenu-title-content {
+            padding: ${o.consts[t].labelPadding[e.Directions.Horizontal][i]};
+
+            .${e.MENU_CLASS}-label {
+              padding: unset;
+            }
+          }
+        }
+
+        &.${e.MENU_CLASS}-submenu-selected:not(.${e.MENU_CLASS}-submenu-disabled) > .${e.MENU_CLASS}-submenu-title {
+          ${s.getSubMenuSelectedIndicatorStyle(S,"horizontal",i,t)};
+        }
+
+        &.${e.MENU_CLASS}-overflow-item-rest {
+          .${e.MENU_CLASS}-submenu-rest-icon {
+            width: ${c};
+            height: ${c};
+          }
+        }
+      }
+
+      /* Popup */
+      &.${e.MENU_CLASS}-submenu {
+        &.${e.MENU_CLASS}-submenu-popup {
+          z-index: ${e.ZIndexes.MENU};
+          min-width: 300px;
+          position: absolute;
+          transform-origin: 0 0;
+          background-color: transparent;
+          overflow: visible;
+          > .${e.MENU_CLASS}-sub {
+            background-color: ${s.getBackgroundColor(u,n.States.Default,n.FabricsVariables.Foundations.Surface)};
+            filter: ${u.dropShadows.low2};
+            border-radius: 8px;
+
+            .${e.MENU_CLASS}-item-group-title, .${e.MENU_CLASS}-submenu-title, .${e.MENU_CLASS}-item {
+              align-items: stretch;
+            }
+
+            ${b!=="horizontal"&&l.css`
+              .${e.MENU_CLASS}-item-group-title {
+                margin-left: -${o.consts[t].itemListMarginLeft}px;
+              }
+
+              .${e.MENU_CLASS}-submenu-title {
+                margin-left: -${o.consts[t].itemListMarginLeft}px;
+              }
+
+              .${e.MENU_CLASS}-item {
+                margin-left: -${o.consts[t].itemListMarginLeft}px;
+              }
+            `}
+          }
+        }
+
+        &.${e.MENU_CLASS}-submenu-hidden {
+          display: none;
+        }
+
+        /* Vertical and horizontal */
+        .${e.MENU_CLASS}-vertical {
+          width: 100%;
+          max-width: 300px;
+          padding: ${o.consts[t].subMenuLabelPadding} 0;
+
+          .${e.MENU_CLASS}-submenu-title {
+            padding: ${o.consts[t].itemPadding[e.Directions.Horizontal][i]};
+            .${e.MENU_CLASS}-submenu-title-content {
+              margin: -4px 2px;
+
+              ${b==="horizontal"?l.css`
+                    padding: 4px 8px 4px 0;
+                  `:l.css`
+                    margin-left: ${o.consts[t].verticalPopupMarginLeft}px;
+                    padding-right: 8px;
+                  `}
+            }
+          }
+
+          .${e.MENU_CLASS}-submenu-selected > .${e.MENU_CLASS}-submenu-title:after {
+            ${M.indicatorPositionStyle[t][s.getModeIndicatorPosition(S)][i].selected.default};
+          }
+
+          .${e.MENU_CLASS}-submenu-expand-icon {
+            transform: rotate(-90deg);
+          }
+        }
+      }
+    `}}
+`;exports.subMenuStyle=E;
+//# sourceMappingURL=subMenu.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"subMenu.styles.js","sources":["../../../../../src/components/Menu/styles/subMenu.styles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { MENU_CLASS, ZIndexes, Directions, Sizes } from 'acinguiux-ds-react-base/consts';\nimport { VariablesNames } from 'acinguiux-ds-react-base/theme';\nimport { MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\nimport { FabricsVariables, States } from 'acinguiux-ds-fabrics';\nimport { getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\n\nimport type { StyledMenuProps } from '../Menu.types';\nimport { getBackgroundColor, getSubMenuSelectedIndicatorStyle, getModeIndicatorPosition } from '../Menu.utils';\nimport { indicatorPositionStyle } from './indicator.styles';\n\nconst { consts } = MenuConsts;\n\nexport const subMenuStyle = css<StyledMenuProps>`\n  ${({\n    theme,\n    size,\n    inlineCollapsed,\n    $indicatorPosition,\n    $itemContentDirection = `${Directions.Horizontal}`,\n    mode,\n  }) => {\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    const layer = theme.getVariablesLayer({ foundation: FabricsVariables.Foundations.Section });\n    const disabledLayer = theme.getVariablesLayer({\n      foundation: FabricsVariables.Foundations.Section,\n      disabled: 'true',\n    });\n\n    return css<StyledMenuProps>`\n      .${MENU_CLASS}-submenu {\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n\n        /* Default */\n        &.${MENU_CLASS}-submenu, &.${MENU_CLASS}-submenu-active {\n          .${MENU_CLASS}-submenu-title .${MENU_CLASS}-submenu-title-content .${MENU_CLASS}-label {\n            color: ${layer[VariablesNames.TextOnFoundationSubtle]};\n\n            svg {\n              fill: ${layer[VariablesNames.TextOnFoundationSubtle]};\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: ${layer[VariablesNames.TextOnFoundationStrong]};\n\n            svg {\n              fill: ${layer[VariablesNames.TextOnFoundationStrong]};\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: ${disabledLayer[VariablesNames.TextOnFoundationSubtle]};\n            cursor: not-allowed;\n\n            svg {\n              fill: ${disabledLayer[VariablesNames.TextOnFoundationSubtle]};\n            }\n          }\n        }\n\n        &.${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-open).${MENU_CLASS}-submenu-disabled\n          > .${MENU_CLASS}-submenu-title {\n          &::after {\n            ${indicatorPositionStyle[size][getModeIndicatorPosition($indicatorPosition, mode)][$itemContentDirection]\n              .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              ${getFocusStyles(theme)};\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' &&\n          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 &&\n          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: ${layer[VariablesNames.TextOnFoundationSubtle]};\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: ${getBackgroundColor(theme, States.Hover)};\n          }\n\n          > .${MENU_CLASS}-submenu-title-content:active {\n            background-color: ${getBackgroundColor(theme, 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: ${disabledLayer[VariablesNames.TextOnFoundationSubtle]};\n          }\n\n          > .${MENU_CLASS}-submenu-title-content {\n            background-color: ${getBackgroundColor(theme, States.Default, FabricsVariables.Foundations.Section, true)};\n\n            svg {\n              fill: ${disabledLayer[VariablesNames.TextOnFoundationSubtle]};\n            }\n          }\n        }\n\n        &.${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-disabled) > .${MENU_CLASS}-submenu-title {\n          > .${MENU_CLASS}-submenu-title-content {\n            background-color: ${getBackgroundColor(theme, States.Default, FabricsVariables.Foundations.Section)};\n          }\n\n          > .${MENU_CLASS}-submenu-title-content:hover {\n            background-color: ${getBackgroundColor(theme, States.Hover, FabricsVariables.Foundations.Section)};\n          }\n\n          > .${MENU_CLASS}-submenu-title-content:active {\n            background-color: ${getBackgroundColor(theme, States.Active, FabricsVariables.Foundations.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        .${MENU_CLASS}-submenu {\n          &.${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-open).${MENU_CLASS}-submenu-disabled\n            > .${MENU_CLASS}-submenu-title {\n            &::after {\n              ${indicatorPositionStyle[size][getModeIndicatorPosition($indicatorPosition)][$itemContentDirection]\n                .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)\n          > .${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              ${getFocusStyles(theme)};\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: ${getBackgroundColor(theme, States.Default, FabricsVariables.Foundations.Surface)};\n            filter: ${theme.dropShadows.low2};\n            border-radius: 8px;\n\n            .${MENU_CLASS}-item-group-title, .${MENU_CLASS}-submenu-title, .${MENU_CLASS}-item {\n              align-items: stretch;\n            }\n\n            ${mode !== 'horizontal' &&\n            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'\n                ? css`\n                    padding: 4px 8px 4px 0;\n                  `\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\n              .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","layer","FabricsVariables","disabledLayer","MENU_CLASS","VariablesNames","indicatorPositionStyle","getModeIndicatorPosition","getFocusStyles","MenuConsts.consts","getBackgroundColor","States","getSubMenuSelectedIndicatorStyle","ZIndexes"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),u=e=>s=>{s.forEach(t=>{t.attributeName==="class"&&e(t.target.classList)})},c=(e,s)=>{r.useEffect(()=>{if(!(e!=null&&e.current))return()=>{};const t=new MutationObserver(u(s));return s(e.current.classList),t.observe(e.current,{attributes:!0}),()=>{t.disconnect()}},[e])};exports.useClassObserver=c;
+//# sourceMappingURL=classObserverUtils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"classObserverUtils.js","sources":["../../../../../src/components/Menu/utils/classObserverUtils.ts"],"sourcesContent":["import { type 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 * 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>(\n  ref: RefObject<T> | undefined,\n  onChange: OnClassChange,\n): 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":"qIAIMA,EAAyEC,GAAcC,GAAc,CAC/FA,EAAA,QAASC,GAAa,CAC1BA,EAAS,gBAAkB,SACnBF,EAAAE,EAAS,OAAuB,SAAS,CACrD,CACD,CACH,EAiBaC,EAAmB,CAC9BC,EACAJ,IACS,CACTK,EAAAA,UAAU,IAAM,CACV,GAAA,EAACD,GAAA,MAAAA,EAAK,SACR,MAAO,IAAM,CAAC,EAEhB,MAAME,EAAmB,IAAI,iBAAiBP,EAAuBC,CAAQ,CAAC,EAErE,OAAAA,EAAAI,EAAI,QAAQ,SAAS,EAC9BE,EAAiB,QAAQF,EAAI,QAAS,CAAE,WAAY,GAAM,EAEnD,IAAM,CACXE,EAAiB,WAAW,CAC9B,CAAA,EACC,CAACF,CAAG,CAAC,CACV"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("../../../react-base/src/consts/index.js"),i=()=>({height:0,opacity:0}),a=e=>({height:e?e.scrollHeight:0,opacity:1}),r=e=>({height:e?e.offsetHeight:0}),n=(e,t)=>(t==null?void 0:t.deadline)===!0||t.propertyName==="height",l={horizontal:{motionName:`${o.MENU_CLASS}-slide-up`,motionDeadline:150},inline:{motionName:`${o.MENU_CLASS}-collapse`,onAppearStart:i,onEnterStart:i,onAppearActive:a,onEnterActive:a,onLeaveStart:r,onLeaveActive:i,onAppearEnd:n,onEnterEnd:n,onLeaveEnd:n,motionDeadline:500},other:{motionName:`${o.MENU_CLASS}-zoom`,motionDeadline:150}};exports.getDefaultMotions=l;
+//# sourceMappingURL=motionUtils.js.map

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

@@ -0,0 +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/consts';\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"],"names":["getCollapsedHeight","getRealHeight","node","getCurrentHeight","skipOpacityTransition","_","event","getDefaultMotions","MENU_CLASS"],"mappings":"uKAIMA,EAAyC,KAAO,CAAE,OAAQ,EAAG,QAAS,CAAE,GACxEC,EAAqCC,IAAU,CAAE,OAAQA,EAAOA,EAAK,aAAe,EAAG,QAAS,IAChGC,EAAwCD,IAAU,CAAE,OAAQA,EAAOA,EAAK,aAAe,IACvFE,EAA+C,CAACC,EAAGC,KACvDA,GAAA,YAAAA,EAAO,YAAa,IAASA,EAA0B,eAAiB,SAE7DC,EAAoB,CAC/B,WAAY,CAAE,WAAY,GAAGC,EAAU,UAAA,YAAa,eAAgB,GAAI,EACxE,OAAQ,CACN,WAAY,GAAGA,EAAU,UAAA,YACzB,cAAeR,EACf,aAAcA,EACd,eAAgBC,EAChB,cAAeA,EACf,aAAcE,EACd,cAAeH,EACf,YAAaI,EACb,WAAYA,EACZ,WAAYA,EACZ,eAAgB,GAClB,EACA,MAAO,CAAE,WAAY,GAAGI,EAAU,UAAA,QAAS,eAAgB,GAAI,CACjE"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),I=require("react"),g=require("../components/MenuDivider.js"),p=require("../components/MenuItem.js"),y=require("../components/MenuItemGroup.js"),M=require("../components/SubMenu.js"),f=(e,r)=>(e||[]).map((t,c)=>{if(t&&typeof t=="object"){const{label:u,children:n,key:a,type:d,...s}=t,o=a??`tmp-${c}`;return n||d==="group"?d==="group"?i.jsx(y,{...s,title:u,children:f(n,r+1)},o):i.jsx(M,{level:r,...s,title:u,children:f(n,r+1)},o):d==="divider"?i.jsx(g,{...s},o):i.jsx(p,{level:r,...s,children:u},o)}return null}).filter(t=>t),j=e=>I.useMemo(()=>e&&f(e,0),[e]),l=e=>!!e&&"children"in e,h=e=>!!e&&"key"in e&&!("children"in e),q=(e,r)=>{if(r===void 0)return[];const t=c=>c.reduce((u,n)=>n?l(n)&&n.children?[...u,...t(n.children)]:h(n)&&n.path===e?[...u,n.key]:u:u,[]);return t(r)},b=e=>(e==null?void 0:e.flatMap(r=>l(r)?r.children??[]:r).filter(h))??[];exports.getItemsByPath=q;exports.getLeafItems=b;exports.useItems=j;
+//# sourceMappingURL=nodeUtils.js.map

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

@@ -0,0 +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 type { 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 type { 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":"uUAcMA,EAAsB,CAACC,EAAmBC,KAC7CD,GAAS,CAAA,GACP,IAAI,CAACE,EAAKC,IAAU,CACf,GAAAD,GAAO,OAAOA,GAAQ,SAAU,CAClC,KAAM,CAAE,MAAAE,EAAO,SAAAC,EAAU,IAAAC,EAAK,KAAAC,EAAM,GAAGC,GAAcN,EAC/CO,EAAYH,GAAO,OAAOH,CAAK,GAEjC,OAAAE,GAAYE,IAAS,QACnBA,IAAS,QAETG,EAAA,IAACC,EAA+B,CAAA,GAAGH,EAAW,MAAOJ,EAClD,SAAAL,EAAoBM,EAAUJ,EAAQ,CAAC,CAAA,EADtBQ,CAEpB,EAKDC,EAAAA,IAAAE,EAAA,CAAwB,MAAAX,EAAe,GAAGO,EAAW,MAAOJ,EAC1D,SAAAL,EAAoBM,EAAUJ,EAAQ,CAAC,CAAA,EAD5BQ,CAEd,EAIAF,IAAS,UACHG,EAAA,IAAAG,EAAA,CAA6B,GAAGL,CAAA,EAAfC,CAA0B,QAIlDK,EAAyB,CAAA,MAAAb,EAAe,GAAGO,EACzC,YADYC,CAEf,CAAA,CAIG,OAAA,IACT,CAAC,EACA,OAAQP,GAAQA,CAAG,EAEXa,EAAYf,GACvBgB,EAAAA,QAAQ,IACDhB,GAIED,EAAoBC,EAAO,CAAC,EAClC,CAACA,CAAK,CAAC,EAENiB,EAAYC,GAA4D,CAAC,CAACA,GAAQ,aAAcA,EAChGC,EAAcD,GAAyC,CAAC,CAACA,GAAQ,QAASA,GAAQ,EAAE,aAAcA,GAE3FE,EAA4E,CAACC,EAAMrB,IAAU,CACpG,GAAAA,IAAU,OAAW,MAAO,CAAC,EACjC,MAAMsB,EAAiDC,GACrDA,EAAU,OAAiB,CAACC,EAAKN,IAC1BA,EACDD,EAASC,CAAI,GAAKA,EAAK,SAAiB,CAAC,GAAGM,EAAK,GAAGF,EAASJ,EAAK,QAAQ,CAAC,EAC3EC,EAAWD,CAAI,GAAKA,EAAK,OAASG,EAAa,CAAC,GAAGG,EAAKN,EAAK,GAAa,EAEvEM,EAJWA,EAKjB,EAAE,EAEP,OAAOF,EAAStB,CAAK,CACvB,EAEayB,EAAgBzB,IAC3BA,GAAA,YAAAA,EAAO,QAASkB,GAAUD,EAASC,CAAI,EAAKA,EAAK,UAAY,CAAM,EAAAA,GAAO,OAAOC,KAAe,CAAA"}

package/build/cjs/components/Modal/Modal.js

@@ -0,0 +1,2 @@
+"use strict";const r=require("react/jsx-runtime"),f=require("classnames"),e=require("../../react-base/src/consts/index.js"),T=require("./components/Dialog/Dialog.js"),i=require("./Modal.styles.js"),h=require("./components/ModalLoading/ModalLoading.js"),p=require("../_internalComponents/InfoBar/InfoBar.js"),E=require("../Button/Button.js"),x=require("../Icon/components/Cross.js"),H=require("../_internalComponents/ActionBar/ActionBar.js"),R=require("./components/ModalLoading/ModalLoading.styles.js"),g=({children:A,className:M,open:j,borders:u=!0,bgColor:C=!1,padding:L=!0,onClose:l=e.NOOP,header:o,actions:t,actionsDirection:O=e.Directions.Horizontal,actionsAlignment:q=e.Alignments.Right,loading:n=!1,loadingBody:S="Loading...",size:s=e.Sizes.Medium,closeButton:a=!0,contentScrollable:c=!1,showHeader:_=!0,showFooter:N=!0,centered:d=!1,width:m=520,...D})=>{const y=!o&&t&&(t==null?void 0:t.length)>0;return r.jsxs(i.Modal,{as:T,size:s,prefixCls:e.MODAL_CONTAINER_CLASS,className:f(e.MODAL_CLASS,M),visible:j,onClose:l,closable:a,centered:d,contentScrollable:c,width:m,loading:n,...D,children:[_&&o&&!n&&r.jsxs(i.ModalHeader,{size:s,closeButton:a,borders:u,className:e.MODAL_HEADER_CLASS,children:[r.jsx(i.ModalHeaderContent,{children:r.jsx(p,{size:s,...o})}),a&&r.jsx(E,{icon:r.jsx(x,{}),iconOnly:!0,variant:e.Variants.Transparent,size:s,onClick:l,"aria-label":"Close"})]}),r.jsxs(i.ModalContent,{size:s,padding:L,bgColor:C,contentScrollable:c,centered:d,bodyCentered:y||n,onlyBody:n,className:e.MODAL_CONTENT_CLASS,children:[!o&&a&&!n&&r.jsx(R.CloseButton,{icon:r.jsx(x,{}),iconOnly:!0,variant:e.Variants.Transparent,size:s,paddingSize:s,onClick:l}),n?r.jsx(h,{loadingBody:S,closeButton:a,onClose:l}):A]}),N&&t&&!n&&r.jsx(i.ModalFooter,{size:s,borders:u,className:e.MODAL_FOOTER_CLASS,children:r.jsx(H,{size:s,actions:t,alignment:q,direction:O})})]})};module.exports=g;
+//# sourceMappingURL=Modal.js.map

package/build/cjs/components/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\n\nimport classNames from 'classnames';\nimport {\n  NOOP,\n  Alignments,\n  Sizes,\n  MODAL_CONTAINER_CLASS,\n  MODAL_CLASS,\n  MODAL_HEADER_CLASS,\n  MODAL_CONTENT_CLASS,\n  MODAL_FOOTER_CLASS,\n  Variants,\n  Directions,\n} from 'acinguiux-ds-react-base/consts';\n\nimport Dialog from './components/Dialog/Dialog';\nimport * as Styled from './Modal.styles';\nimport type { IModalProps } from './Modal.types';\nimport ModalLoading from './components/ModalLoading/ModalLoading';\nimport InfoBar from '../_internalComponents/InfoBar/InfoBar';\nimport Button from '../Button/Button';\nimport CrossIcon from '../Icon/components/Cross';\nimport ActionBar from '../_internalComponents/ActionBar/ActionBar';\nimport { CloseButton } from './components/ModalLoading/ModalLoading.styles';\n\nconst Modal = ({\n  children,\n  className,\n  open,\n  borders = true,\n  bgColor = false,\n  padding = true,\n  onClose = NOOP,\n  header,\n  actions,\n  actionsDirection = Directions.Horizontal,\n  actionsAlignment = Alignments.Right,\n  loading = false,\n  loadingBody = 'Loading...',\n  size = Sizes.Medium,\n  closeButton = true,\n  contentScrollable = false,\n  showHeader = true,\n  showFooter = true,\n  centered = false,\n  width = 520,\n  ...props\n}: IModalProps): ReactElement => {\n  const isWithoutHeaderAndFooter = !header && actions && actions?.length > 0;\n\n  return (\n    <Styled.Modal\n      as={Dialog}\n      size={size}\n      prefixCls={MODAL_CONTAINER_CLASS}\n      className={classNames(MODAL_CLASS, className)}\n      visible={open}\n      onClose={onClose}\n      closable={closeButton}\n      centered={centered}\n      contentScrollable={contentScrollable}\n      width={width}\n      loading={loading}\n      {...props}\n    >\n      {showHeader && header && !loading && (\n        <Styled.ModalHeader size={size} closeButton={closeButton} borders={borders} className={MODAL_HEADER_CLASS}>\n          <Styled.ModalHeaderContent>\n            <InfoBar size={size} {...header} />\n          </Styled.ModalHeaderContent>\n          {closeButton && (\n            <Button\n              icon={<CrossIcon />}\n              iconOnly\n              variant={Variants.Transparent}\n              size={size}\n              onClick={onClose}\n              aria-label=\"Close\"\n            />\n          )}\n        </Styled.ModalHeader>\n      )}\n      <Styled.ModalContent\n        size={size}\n        padding={padding}\n        bgColor={bgColor}\n        contentScrollable={contentScrollable}\n        centered={centered}\n        bodyCentered={isWithoutHeaderAndFooter || loading}\n        onlyBody={loading}\n        className={MODAL_CONTENT_CLASS}\n      >\n        {!header && closeButton && !loading && (\n          <CloseButton\n            icon={<CrossIcon />}\n            iconOnly\n            variant={Variants.Transparent}\n            size={size}\n            paddingSize={size}\n            onClick={onClose}\n          />\n        )}\n        {loading ? <ModalLoading loadingBody={loadingBody} closeButton={closeButton} onClose={onClose} /> : children}\n      </Styled.ModalContent>\n      {showFooter && actions && !loading && (\n        <Styled.ModalFooter size={size} borders={borders} className={MODAL_FOOTER_CLASS}>\n          <ActionBar size={size} actions={actions} alignment={actionsAlignment} direction={actionsDirection} />\n        </Styled.ModalFooter>\n      )}\n    </Styled.Modal>\n  );\n};\n\nexport default Modal;\n"],"names":["Modal","children","className","open","borders","bgColor","padding","onClose","NOOP","header","actions","actionsDirection","Directions","actionsAlignment","Alignments","loading","loadingBody","size","Sizes","closeButton","contentScrollable","showHeader","showFooter","centered","width","props","isWithoutHeaderAndFooter","jsxs","Styled.Modal","Dialog","MODAL_CONTAINER_CLASS","classNames","MODAL_CLASS","Styled.ModalHeader","MODAL_HEADER_CLASS","jsx","Styled.ModalHeaderContent","InfoBar","Button","CrossIcon","Variants","Styled.ModalContent","MODAL_CONTENT_CLASS","CloseButton","ModalLoading","Styled.ModalFooter","MODAL_FOOTER_CLASS","ActionBar"],"mappings":"ufA0BMA,EAAQ,CAAC,CACb,SAAAC,EACA,UAAAC,EACA,KAAAC,EACA,QAAAC,EAAU,GACV,QAAAC,EAAU,GACV,QAAAC,EAAU,GACV,QAAAC,EAAUC,EAAA,KACV,OAAAC,EACA,QAAAC,EACA,iBAAAC,EAAmBC,EAAW,WAAA,WAC9B,iBAAAC,EAAmBC,EAAW,WAAA,MAC9B,QAAAC,EAAU,GACV,YAAAC,EAAc,aACd,KAAAC,EAAOC,EAAM,MAAA,OACb,YAAAC,EAAc,GACd,kBAAAC,EAAoB,GACpB,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,SAAAC,EAAW,GACX,MAAAC,EAAQ,IACR,GAAGC,CACL,IAAiC,CAC/B,MAAMC,EAA2B,CAACjB,GAAUC,IAAWA,GAAA,YAAAA,EAAS,QAAS,EAGvE,OAAAiB,EAAA,KAACC,EAAO,MAAP,CACC,GAAIC,EACJ,KAAAZ,EACA,UAAWa,EAAA,sBACX,UAAWC,EAAWC,EAAA,YAAa9B,CAAS,EAC5C,QAASC,EACT,QAAAI,EACA,SAAUY,EACV,SAAAI,EACA,kBAAAH,EACA,MAAAI,EACA,QAAAT,EACC,GAAGU,EAEH,SAAA,CAAcJ,GAAAZ,GAAU,CAACM,GACvBY,EAAA,KAAAM,EAAA,YAAA,CAAmB,KAAAhB,EAAY,YAAAE,EAA0B,QAAAf,EAAkB,UAAW8B,EAAAA,mBACrF,SAAA,CAACC,MAAAC,EAAAA,mBAAA,CACC,SAAAD,EAAA,IAACE,GAAQ,KAAApB,EAAa,GAAGR,CAAQ,CAAA,EACnC,EACCU,GACCgB,EAAA,IAACG,EAAA,CACC,WAAOC,EAAU,EAAA,EACjB,SAAQ,GACR,QAASC,EAAS,SAAA,YAClB,KAAAvB,EACA,QAASV,EACT,aAAW,OAAA,CAAA,CACb,EAEJ,EAEFoB,EAAA,KAACc,EAAO,aAAP,CACC,KAAAxB,EACA,QAAAX,EACA,QAAAD,EACA,kBAAAe,EACA,SAAAG,EACA,aAAcG,GAA4BX,EAC1C,SAAUA,EACV,UAAW2B,EAAA,oBAEV,SAAA,CAAC,CAAAjC,GAAUU,GAAe,CAACJ,GAC1BoB,EAAA,IAACQ,EAAA,YAAA,CACC,WAAOJ,EAAU,EAAA,EACjB,SAAQ,GACR,QAASC,EAAS,SAAA,YAClB,KAAAvB,EACA,YAAaA,EACb,QAASV,CAAA,CACX,EAEDQ,EAAWoB,EAAA,IAAAS,EAAA,CAAa,YAAA5B,EAA0B,YAAAG,EAA0B,QAAAZ,EAAkB,EAAKN,CAAA,CAAA,CACtG,EACCqB,GAAcZ,GAAW,CAACK,SACxB8B,EAAO,YAAP,CAAmB,KAAA5B,EAAY,QAAAb,EAAkB,UAAW0C,EAC3D,mBAAA,SAAAX,MAACY,GAAU,KAAA9B,EAAY,QAAAP,EAAkB,UAAWG,EAAkB,UAAWF,EAAkB,CACrG,CAAA,CAAA,CAAA,CAEJ,CAEJ"}