acinguiux-ds-react-framework 0.1.24 → 0.1.25

package/build/cjs/components/Menu/components/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sources":["../../../../../src/components/Menu/components/MenuItem.tsx"],"sourcesContent":["import {\n  type ReactElement,\n  type ReactNode,\n  forwardRef,\n  useCallback,\n  useContext,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { MenuItem as RCMenuItem } from '@rc-component/menu';\nimport type { MenuItemProps as RCMenuItemProps } from '@rc-component/menu/lib/MenuItem';\nimport { Positions } from 'acinguiux-ds-react-base/consts';\nimport type { MenuTypes } from 'acinguiux-ds-react-base/components/Menu';\nimport type { BadgeTypes } from 'acinguiux-ds-react-base/components/Badge';\nimport { getSmallerSize } from 'acinguiux-ds-react-base/utils/sizesUtils';\n\nimport { getString } from '../../../utils/textUtils';\nimport MenuLabel from './MenuLabel';\nimport Tooltip from '../../Tooltip/Tooltip';\nimport MenuContext from '../MenuContext';\nimport { TooltipContainer, TooltipLabel } from '../styles/menuLabel.styles';\nimport { getTooltipLabelSize } from '../Menu.utils';\nimport Badge from '../../Badge/Badge';\n\nexport interface IMenuItemProps extends RCMenuItemProps {\n  level?: number;\n  path?: string;\n  badge?: Omit<BadgeTypes.IProps, 'size'>;\n  itemRender?: MenuTypes.ItemRender;\n  children?: ReactNode;\n}\n\nconst MenuItem = forwardRef<HTMLElement, IMenuItemProps>(\n  ({ children, itemIcon, level, path, badge, itemRender, ...rest }, ref): ReactElement => {\n    const menuItemRef = useRef<HTMLElement>(null);\n    const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n    const { inlineCollapsed, size } = useContext(MenuContext);\n    useImperativeHandle<HTMLElement | null, HTMLElement | null>(ref, () => menuItemRef.current);\n\n    const onMouseEnter = useCallback(() => setIsTooltipOpen(true), []);\n    const onMouseLeave = useCallback(() => setIsTooltipOpen(false), []);\n    const isTooltipDisabled = useMemo(\n      () => !inlineCollapsed || level === undefined || level > 0,\n      [inlineCollapsed, level],\n    );\n\n    return (\n      <RCMenuItem\n        ref={menuItemRef}\n        aria-label={getString(children)}\n        {...rest}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        <Tooltip\n          targetRef={menuItemRef}\n          isOpen={!isTooltipDisabled && isTooltipOpen}\n          isDisabled={isTooltipDisabled}\n          placement={Positions.Right}\n          trigger={\n            <MenuLabel parentRef={menuItemRef} path={path} itemIcon={itemIcon} itemRender={itemRender} badge={badge}>\n              {children}\n            </MenuLabel>\n          }\n          overlay={\n            <TooltipContainer gap=\"1rem\">\n              <TooltipLabel size={getTooltipLabelSize(size)}>{children}</TooltipLabel>\n              {badge && <Badge size={getSmallerSize(size) as BadgeTypes.Size} {...badge} />}\n            </TooltipContainer>\n          }\n          delay={50}\n          closeDelay={200}\n        />\n      </RCMenuItem>\n    );\n  },\n);\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","children","itemIcon","level","path","badge","itemRender","rest","ref","menuItemRef","useRef","isTooltipOpen","setIsTooltipOpen","useState","inlineCollapsed","size","useContext","MenuContext","useImperativeHandle","onMouseEnter","useCallback","onMouseLeave","isTooltipDisabled","useMemo","jsx","RCMenuItem","getString","Tooltip","Positions","MenuLabel","jsxs","TooltipContainer","TooltipLabel","getTooltipLabelSize","Badge","getSmallerSize"],"mappings":"wcAmCMA,EAAWC,EAAAA,WACf,CAAC,CAAE,SAAAC,EAAU,SAAAC,EAAU,MAAAC,EAAO,KAAAC,EAAM,MAAAC,EAAO,WAAAC,EAAY,GAAGC,CAAA,EAAQC,IAAsB,CACtF,MAAMC,EAAcC,EAAAA,OAAoB,IAAI,EACtC,CAACC,EAAeC,CAAgB,EAAIC,EAAAA,SAAS,EAAK,EAClD,CAAE,gBAAAC,EAAiB,KAAAC,GAASC,EAAAA,WAAWC,CAAW,EACxDC,EAAAA,oBAA4DV,EAAK,IAAMC,EAAY,OAAO,EAE1F,MAAMU,EAAeC,EAAAA,YAAY,IAAMR,EAAiB,EAAI,EAAG,CAAA,CAAE,EAC3DS,EAAeD,EAAAA,YAAY,IAAMR,EAAiB,EAAK,EAAG,CAAA,CAAE,EAC5DU,EAAoBC,EAAAA,QACxB,IAAM,CAACT,GAAmBX,IAAU,QAAaA,EAAQ,EACzD,CAACW,EAAiBX,CAAK,CAAA,EAGzB,OACEqB,EAAAA,IAACC,EAAAA,SAAA,CACC,IAAKhB,EACL,aAAYiB,EAAAA,UAAUzB,CAAQ,EAC7B,GAAGM,EACJ,aAAAY,EACA,aAAAE,EAEA,SAAAG,EAAAA,IAACG,EAAA,CACC,UAAWlB,EACX,OAAQ,CAACa,GAAqBX,EAC9B,WAAYW,EACZ,UAAWM,EAAAA,UAAU,MACrB,cACGC,EAAA,CAAU,UAAWpB,EAAa,KAAAL,EAAY,SAAAF,EAAoB,WAAAI,EAAwB,MAAAD,EACxF,SAAAJ,CAAA,CACH,EAEF,QACE6B,EAAAA,KAACC,EAAAA,iBAAA,CAAiB,IAAI,OACpB,SAAA,CAAAP,EAAAA,IAACQ,EAAAA,aAAA,CAAa,KAAMC,EAAAA,oBAAoBlB,CAAI,EAAI,SAAAd,EAAS,EACxDI,SAAU6B,EAAA,CAAM,KAAMC,EAAAA,eAAepB,CAAI,EAAuB,GAAGV,CAAA,CAAO,CAAA,EAC7E,EAEF,MAAO,GACP,WAAY,GAAA,CAAA,CACd,CAAA,CAGN,CACF"}
+{"version":3,"file":"MenuItem.js","sources":["../../../../../src/components/Menu/components/MenuItem.tsx"],"sourcesContent":["import {\n  type ReactElement,\n  forwardRef,\n  useCallback,\n  useContext,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { MenuItem as RCMenuItem } from '@rc-component/menu';\nimport type { MenuItemProps as RCMenuItemProps } from '@rc-component/menu/lib/MenuItem';\nimport { Positions } from 'acinguiux-ds-react-base/consts';\nimport type { MenuTypes } from 'acinguiux-ds-react-base/components/Menu';\nimport type { BadgeTypes } from 'acinguiux-ds-react-base/components/Badge';\nimport { getSmallerSize } from 'acinguiux-ds-react-base/utils/sizesUtils';\n\nimport { getString } from '../../../utils/textUtils';\nimport MenuLabel from './MenuLabel';\nimport Tooltip from '../../Tooltip/Tooltip';\nimport MenuContext from '../MenuContext';\nimport { TooltipContainer, TooltipLabel } from '../styles/menuLabel.styles';\nimport { getTooltipLabelSize } from '../Menu.utils';\nimport Badge from '../../Badge/Badge';\n\nexport interface IMenuItemProps extends RCMenuItemProps {\n  level?: number;\n  path?: string;\n  badge?: Omit<BadgeTypes.IProps, 'size'>;\n  itemRender?: MenuTypes.ItemRender;\n}\n\nconst MenuItem = forwardRef<HTMLElement, IMenuItemProps>(\n  ({ children, itemIcon, level, path, badge, itemRender, ...rest }, ref): ReactElement => {\n    const menuItemRef = useRef<HTMLElement>(null);\n    const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n    const { inlineCollapsed, size } = useContext(MenuContext);\n    useImperativeHandle<HTMLElement | null, HTMLElement | null>(ref, () => menuItemRef.current);\n\n    const onMouseEnter = useCallback(() => setIsTooltipOpen(true), []);\n    const onMouseLeave = useCallback(() => setIsTooltipOpen(false), []);\n    const isTooltipDisabled = useMemo(\n      () => !inlineCollapsed || level === undefined || level > 0,\n      [inlineCollapsed, level],\n    );\n\n    return (\n      <RCMenuItem\n        ref={menuItemRef}\n        aria-label={getString(children)}\n        {...rest}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        <Tooltip\n          targetRef={menuItemRef}\n          isOpen={!isTooltipDisabled && isTooltipOpen}\n          isDisabled={isTooltipDisabled}\n          placement={Positions.Right}\n          trigger={\n            <MenuLabel parentRef={menuItemRef} path={path} itemIcon={itemIcon} itemRender={itemRender} badge={badge}>\n              {children}\n            </MenuLabel>\n          }\n          overlay={\n            <TooltipContainer gap=\"1rem\">\n              <TooltipLabel size={getTooltipLabelSize(size)}>{children}</TooltipLabel>\n              {badge && <Badge size={getSmallerSize(size) as BadgeTypes.Size} {...badge} />}\n            </TooltipContainer>\n          }\n          delay={50}\n          closeDelay={200}\n        />\n      </RCMenuItem>\n    );\n  },\n);\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","children","itemIcon","level","path","badge","itemRender","rest","ref","menuItemRef","useRef","isTooltipOpen","setIsTooltipOpen","useState","inlineCollapsed","size","useContext","MenuContext","useImperativeHandle","onMouseEnter","useCallback","onMouseLeave","isTooltipDisabled","useMemo","jsx","RCMenuItem","getString","Tooltip","Positions","MenuLabel","jsxs","TooltipContainer","TooltipLabel","getTooltipLabelSize","Badge","getSmallerSize"],"mappings":"wcAiCMA,EAAWC,EAAAA,WACf,CAAC,CAAE,SAAAC,EAAU,SAAAC,EAAU,MAAAC,EAAO,KAAAC,EAAM,MAAAC,EAAO,WAAAC,EAAY,GAAGC,CAAA,EAAQC,IAAsB,CACtF,MAAMC,EAAcC,EAAAA,OAAoB,IAAI,EACtC,CAACC,EAAeC,CAAgB,EAAIC,EAAAA,SAAS,EAAK,EAClD,CAAE,gBAAAC,EAAiB,KAAAC,GAASC,EAAAA,WAAWC,CAAW,EACxDC,EAAAA,oBAA4DV,EAAK,IAAMC,EAAY,OAAO,EAE1F,MAAMU,EAAeC,EAAAA,YAAY,IAAMR,EAAiB,EAAI,EAAG,CAAA,CAAE,EAC3DS,EAAeD,EAAAA,YAAY,IAAMR,EAAiB,EAAK,EAAG,CAAA,CAAE,EAC5DU,EAAoBC,EAAAA,QACxB,IAAM,CAACT,GAAmBX,IAAU,QAAaA,EAAQ,EACzD,CAACW,EAAiBX,CAAK,CAAA,EAGzB,OACEqB,EAAAA,IAACC,EAAAA,SAAA,CACC,IAAKhB,EACL,aAAYiB,EAAAA,UAAUzB,CAAQ,EAC7B,GAAGM,EACJ,aAAAY,EACA,aAAAE,EAEA,SAAAG,EAAAA,IAACG,EAAA,CACC,UAAWlB,EACX,OAAQ,CAACa,GAAqBX,EAC9B,WAAYW,EACZ,UAAWM,EAAAA,UAAU,MACrB,cACGC,EAAA,CAAU,UAAWpB,EAAa,KAAAL,EAAY,SAAAF,EAAoB,WAAAI,EAAwB,MAAAD,EACxF,SAAAJ,CAAA,CACH,EAEF,QACE6B,EAAAA,KAACC,EAAAA,iBAAA,CAAiB,IAAI,OACpB,SAAA,CAAAP,EAAAA,IAACQ,EAAAA,aAAA,CAAa,KAAMC,EAAAA,oBAAoBlB,CAAI,EAAI,SAAAd,EAAS,EACxDI,SAAU6B,EAAA,CAAM,KAAMC,EAAAA,eAAepB,CAAI,EAAuB,GAAGV,CAAA,CAAO,CAAA,EAC7E,EAEF,MAAO,GACP,WAAY,GAAA,CAAA,CACd,CAAA,CAGN,CACF"}

package/build/cjs/components/Menu/components/MenuLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuLabel.js","sources":["../../../../../src/components/Menu/components/MenuLabel.tsx"],"sourcesContent":["/* Focus and key events are disabled since menu handles them internally.\n   onClick added to circumvent event propagation being blocked by tooltip. */\n\nimport {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type ReactElement,\n  type RefObject,\n  useContext,\n  type HTMLAttributes,\n  useMemo,\n} from 'react';\n\nimport classNames from 'classnames';\nimport { MENU_CLASS } from 'acinguiux-ds-react-base/consts';\nimport type { MenuTypes } from 'acinguiux-ds-react-base/components/Menu';\nimport type { BadgeTypes } from 'acinguiux-ds-react-base/components/Badge';\nimport { getSmallerSize } from 'acinguiux-ds-react-base/utils/sizesUtils';\n\nimport type { IMenuProps } from '../Menu.types';\nimport MenuContext from '../MenuContext';\nimport Badge from '../../Badge/Badge';\n\nexport type MenuLabelRequiredTypes = 'itemIcon' | 'className' | 'children' | 'size';\n\nexport interface IMenuLabelProps\n  extends Pick<IMenuProps, MenuLabelRequiredTypes>,\n    Omit<HTMLAttributes<HTMLElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onSelect'> {\n  parentRef?: RefObject<HTMLElement>;\n  path?: string;\n  badge?: Omit<BadgeTypes.IProps, 'size'>;\n  itemRender?: MenuTypes.ItemRender;\n}\n\nconst MenuLabel = forwardRef<HTMLElement, IMenuLabelProps>(\n  ({ children, itemIcon, path, className, parentRef: _parentRef, badge, itemRender, ...rest }, ref): ReactElement => {\n    const { itemRender: menuItemRender, size, inlineCollapsed } = useContext(MenuContext);\n    const currentItemRender = useMemo(() => itemRender ?? menuItemRender, [itemRender, menuItemRender]);\n\n    const elementProps = {\n      ref,\n      className: classNames(`${MENU_CLASS}-label`, className),\n      ...rest,\n    };\n\n    const content = (\n      <>\n        {isValidElement(itemIcon) && <span className={`${MENU_CLASS}-label-icon`}>{itemIcon}</span>}\n        {!!children && <span className={`${MENU_CLASS}-label-text`}>{children}</span>}\n        {badge && !inlineCollapsed && <Badge size={getSmallerSize(size) as BadgeTypes.Size} {...badge} />}\n      </>\n    );\n\n    return path && children && currentItemRender ? (\n      cloneElement(currentItemRender({ path, children: content }), { ...elementProps, tabIndex: -1 })\n    ) : (\n      <span {...elementProps}>{content}</span>\n    );\n  },\n);\n\nexport default MenuLabel;\n"],"names":["MenuLabel","forwardRef","children","itemIcon","path","className","_parentRef","badge","itemRender","rest","ref","menuItemRender","size","inlineCollapsed","useContext","MenuContext","currentItemRender","useMemo","elementProps","classNames","MENU_CLASS","content","jsxs","Fragment","isValidElement","jsx","Badge","getSmallerSize","cloneElement"],"mappings":"8QAmCMA,EAAYC,EAAAA,WAChB,CAAC,CAAE,SAAAC,EAAU,SAAAC,EAAU,KAAAC,EAAM,UAAAC,EAAW,UAAWC,EAAY,MAAAC,EAAO,WAAAC,EAAY,GAAGC,CAAA,EAAQC,IAAsB,CACjH,KAAM,CAAE,WAAYC,EAAgB,KAAAC,EAAM,gBAAAC,CAAA,EAAoBC,EAAAA,WAAWC,CAAW,EAC9EC,EAAoBC,EAAAA,QAAQ,IAAMT,GAAcG,EAAgB,CAACH,EAAYG,CAAc,CAAC,EAE5FO,EAAe,CACnB,IAAAR,EACA,UAAWS,EAAW,GAAGC,EAAAA,UAAU,SAAUf,CAAS,EACtD,GAAGI,CAAA,EAGCY,EACJC,EAAAA,KAAAC,EAAAA,SAAA,CACG,SAAA,CAAAC,EAAAA,eAAerB,CAAQ,GAAKsB,EAAAA,IAAC,OAAA,CAAK,UAAW,GAAGL,EAAAA,UAAU,cAAgB,SAAAjB,CAAA,CAAS,EACnF,CAAC,CAACD,GAAYuB,MAAC,QAAK,UAAW,GAAGL,YAAU,cAAgB,SAAAlB,EAAS,EACrEK,GAAS,CAACM,GAAmBY,EAAAA,IAACC,EAAA,CAAM,KAAMC,iBAAef,CAAI,EAAuB,GAAGL,CAAA,CAAO,CAAA,EACjG,EAGF,OAAOH,GAAQF,GAAYc,EACzBY,EAAAA,aAAaZ,EAAkB,CAAE,KAAAZ,EAAM,SAAUiB,CAAA,CAAS,EAAG,CAAE,GAAGH,EAAc,SAAU,EAAA,CAAI,EAE9FO,EAAAA,IAAC,OAAA,CAAM,GAAGP,EAAe,SAAAG,EAAQ,CAErC,CACF"}
+{"version":3,"file":"MenuLabel.js","sources":["../../../../../src/components/Menu/components/MenuLabel.tsx"],"sourcesContent":["/* Focus and key events are disabled since menu handles them internally.\n   onClick added to circumvent event propagation being blocked by tooltip. */\n\nimport {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type ReactElement,\n  type RefObject,\n  useContext,\n  type HTMLAttributes,\n  useMemo,\n} from 'react';\n\nimport classNames from 'classnames';\nimport { MENU_CLASS } from 'acinguiux-ds-react-base/consts';\nimport type { MenuTypes } from 'acinguiux-ds-react-base/components/Menu';\nimport type { BadgeTypes } from 'acinguiux-ds-react-base/components/Badge';\nimport { getSmallerSize } from 'acinguiux-ds-react-base/utils/sizesUtils';\n\nimport type { IMenuProps } from '../Menu.types';\nimport MenuContext from '../MenuContext';\nimport Badge from '../../Badge/Badge';\n\nexport type MenuLabelRequiredTypes = 'itemIcon' | 'className' | 'children' | 'size';\n\nexport interface IMenuLabelProps\n  extends\n    Pick<IMenuProps, MenuLabelRequiredTypes>,\n    Omit<HTMLAttributes<HTMLElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onSelect'> {\n  parentRef?: RefObject<HTMLElement>;\n  path?: string;\n  badge?: Omit<BadgeTypes.IProps, 'size'>;\n  itemRender?: MenuTypes.ItemRender;\n}\n\nconst MenuLabel = forwardRef<HTMLElement, IMenuLabelProps>(\n  ({ children, itemIcon, path, className, parentRef: _parentRef, badge, itemRender, ...rest }, ref): ReactElement => {\n    const { itemRender: menuItemRender, size, inlineCollapsed } = useContext(MenuContext);\n    const currentItemRender = useMemo(() => itemRender ?? menuItemRender, [itemRender, menuItemRender]);\n\n    const elementProps = {\n      ref,\n      className: classNames(`${MENU_CLASS}-label`, className),\n      ...rest,\n    };\n\n    const content = (\n      <>\n        {isValidElement(itemIcon) && <span className={`${MENU_CLASS}-label-icon`}>{itemIcon}</span>}\n        {!!children && <span className={`${MENU_CLASS}-label-text`}>{children}</span>}\n        {badge && !inlineCollapsed && <Badge size={getSmallerSize(size) as BadgeTypes.Size} {...badge} />}\n      </>\n    );\n\n    return path && children && currentItemRender ? (\n      cloneElement(currentItemRender({ path, children: content }), { ...elementProps, tabIndex: -1 })\n    ) : (\n      <span {...elementProps}>{content}</span>\n    );\n  },\n);\n\nexport default MenuLabel;\n"],"names":["MenuLabel","forwardRef","children","itemIcon","path","className","_parentRef","badge","itemRender","rest","ref","menuItemRender","size","inlineCollapsed","useContext","MenuContext","currentItemRender","useMemo","elementProps","classNames","MENU_CLASS","content","jsxs","Fragment","isValidElement","jsx","Badge","getSmallerSize","cloneElement"],"mappings":"8QAoCMA,EAAYC,EAAAA,WAChB,CAAC,CAAE,SAAAC,EAAU,SAAAC,EAAU,KAAAC,EAAM,UAAAC,EAAW,UAAWC,EAAY,MAAAC,EAAO,WAAAC,EAAY,GAAGC,CAAA,EAAQC,IAAsB,CACjH,KAAM,CAAE,WAAYC,EAAgB,KAAAC,EAAM,gBAAAC,CAAA,EAAoBC,EAAAA,WAAWC,CAAW,EAC9EC,EAAoBC,EAAAA,QAAQ,IAAMT,GAAcG,EAAgB,CAACH,EAAYG,CAAc,CAAC,EAE5FO,EAAe,CACnB,IAAAR,EACA,UAAWS,EAAW,GAAGC,EAAAA,UAAU,SAAUf,CAAS,EACtD,GAAGI,CAAA,EAGCY,EACJC,EAAAA,KAAAC,EAAAA,SAAA,CACG,SAAA,CAAAC,EAAAA,eAAerB,CAAQ,GAAKsB,EAAAA,IAAC,OAAA,CAAK,UAAW,GAAGL,EAAAA,UAAU,cAAgB,SAAAjB,CAAA,CAAS,EACnF,CAAC,CAACD,GAAYuB,MAAC,QAAK,UAAW,GAAGL,YAAU,cAAgB,SAAAlB,EAAS,EACrEK,GAAS,CAACM,GAAmBY,EAAAA,IAACC,EAAA,CAAM,KAAMC,iBAAef,CAAI,EAAuB,GAAGL,CAAA,CAAO,CAAA,EACjG,EAGF,OAAOH,GAAQF,GAAYc,EACzBY,EAAAA,aAAaZ,EAAkB,CAAE,KAAAZ,EAAM,SAAUiB,CAAA,CAAS,EAAG,CAAE,GAAGH,EAAc,SAAU,EAAA,CAAI,EAE9FO,EAAAA,IAAC,OAAA,CAAM,GAAGP,EAAe,SAAAG,EAAQ,CAErC,CACF"}

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

@@ -1,15 +1,11 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("styled-components"),e=require("../../../react-base/src/consts/index.js"),f=require("../../../react-base/src/components/Menu/Menu.consts.js"),m=require("../../../react-base/src/theme/types/layer.js"),x=(t,s=!1)=>i.keyframes`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("styled-components"),e=require("../../../react-base/src/consts/index.js"),d=require("../../../react-base/src/components/Menu/Menu.consts.js"),x=require("../../../react-base/src/theme/types/layer.js"),m=t=>a.keyframes`
   from {
     width: 0;
-    left: 50%;
-    transform: translateX(100%);
   }
   to {
     width: ${t};
-    left: ${s?"20%":"5%"};
-    transform: translateX(100%);
   }
-`,u=t=>i.keyframes`
+`,u=t=>a.keyframes`
   from {
     height: 0;
     top: 50%;
@@ -20,39 +16,39 @@
     top: 50%;
     transform: translateY(-50%);
   }
-`,S=({width:t,height:s,position:o,size:a})=>i.css`
+`,S=({width:t,height:o,position:s,size:i})=>a.css`
   content: '';
   position: absolute;
   display: block;
   transition: all 0.2s;
 
-  ${o}: 0;
-  ${o===e.Positions.Left||o===e.Positions.Right?`
+  ${s}: 0;
+  ${s===e.Positions.Left||s===e.Positions.Right?`
       width: ${t};
-      height: ${s};
+      height: ${o};
       top: 50%;
       transform: translateY(-50%);
-      margin-left: ${f.consts[a].indicatorLeftMargin}px;
+      margin-left: ${d.consts[i].indicatorLeftMargin}px;
 
-      ${o===e.Positions.Right&&i.css`
+      ${s===e.Positions.Right&&a.css`
           left: unset;
         `}
     `:`
       height: ${t};
-      width: max(${f.consts[a].iconSize}px, ${s});
+      width: max(${d.consts[i].iconSize}px, ${o});
       left: 50%;
       transform: translateX(-50%);
     `}
-`,h=t=>({borderTopLeftRadius:t===e.Positions.Bottom||t===e.Positions.Right?"4px":"0",borderTopRightRadius:t===e.Positions.Bottom||t===e.Positions.Left?"4px":"0",borderBottomLeftRadius:t===e.Positions.Top||t===e.Positions.Right?"4px":"0",borderBottomRightRadius:t===e.Positions.Top||t===e.Positions.Left?"4px":"0"}),p=({position:t,width:s,height:o,state:a,defaultStatus:r=!1,isIconTop:n=!1,size:l=e.Sizes.Medium,muted:c=!1})=>i.css`
-  ${({theme:d})=>i.css`
-    ${S({width:s,height:o,position:t,size:l})};
-    background-color: ${d.layer({disabled:a==="disabled",muted:c})[m.Variables.BackgroundBrand]};
+`,h=t=>({borderTopLeftRadius:t===e.Positions.Bottom||t===e.Positions.Right?"4px":"0",borderTopRightRadius:t===e.Positions.Bottom||t===e.Positions.Left?"4px":"0",borderBottomLeftRadius:t===e.Positions.Top||t===e.Positions.Right?"4px":"0",borderBottomRightRadius:t===e.Positions.Top||t===e.Positions.Left?"4px":"0"}),f=({position:t,width:o,height:s,state:i,defaultStatus:r=!1,size:n=e.Sizes.Medium,muted:c=!1})=>a.css`
+  ${({theme:l})=>a.css`
+    ${S({width:o,height:s,position:t,size:n})};
+    background-color: ${l.layer({disabled:i==="disabled",muted:c})[x.Variables.BackgroundBrand]};
     ${h(t)};
 
-    ${a==="press"&&r&&i.css`
-      animation: ${t===e.Positions.Left||t===e.Positions.Right?u(o):x(o,n)}
+    ${i==="press"&&r&&a.css`
+      animation: ${t===e.Positions.Left||t===e.Positions.Right?u(s):m(s)}
         0.2s alternate;
     `}
   `}
-`,$={[e.Sizes.XSmall]:{x:"20px",y:"calc(100% - 8px - 16px)"},[e.Sizes.Small]:{x:"20px",y:"calc(100% - 8px - 24px)"},[e.Sizes.Medium]:{x:"20px",y:"calc(100% - 12px - 32px)"},[e.Sizes.Large]:{x:"24px",y:"calc(100% - 12px - 48px)"}};e.Sizes.XSmall+"",e.Sizes.Small+"",e.Sizes.Medium+"",e.Sizes.Large+"";const P=({size:t,indicatorPosition:s,state:o,disabled:a,active:r,iconPosition:n,muted:l})=>{const c=s==="bottom"||s==="top"?"y":"x",g=$[t][c];return p({position:s,width:"3px",height:r?g:"30%",state:r?a?"disabled":o:"press",defaultStatus:!r,isIconTop:n===e.Positions.Top,size:t,muted:l})};exports.getIndicatorPositionStyle=P;
+`,p={[e.Sizes.XSmall]:{x:"20px",y:"calc(100% - 8px - 16px)"},[e.Sizes.Small]:{x:"20px",y:"calc(100% - 8px - 24px)"},[e.Sizes.Medium]:{x:"20px",y:"calc(100% - 12px - 32px)"},[e.Sizes.Large]:{x:"24px",y:"calc(100% - 12px - 48px)"}};e.Sizes.XSmall+"",e.Sizes.Small+"",e.Sizes.Medium+"",e.Sizes.Large+"";const $=({size:t,indicatorPosition:o,state:s,disabled:i,active:r,muted:n})=>{const c=o==="bottom"||o==="top"?"y":"x",g=p[t][c];return f({position:o,width:"3px",height:r?g:"30%",state:r?i?"disabled":s:"press",defaultStatus:!r,size:t,muted:n})};exports.getIndicatorPositionStyle=$;
 //# sourceMappingURL=indicator.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"indicator.styles.js","sources":["../../../../../src/components/Menu/styles/indicator.styles.ts"],"sourcesContent":["import { css, keyframes, CSSObject } from 'styled-components';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { Positions, Sizes } from 'acinguiux-ds-react-base/consts';\nimport { type MenuTypes, MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\n\nimport type { StyledMenuProps } from '../Menu.types';\n\nconst growHorizontal = (width: string, isIconTop = false) => keyframes`\n  from {\n    width: 0;\n    left: 50%;\n    transform: translateX(100%);\n  }\n  to {\n    width: ${width};\n    left: ${isIconTop ? '20%' : '5%'};\n    transform: translateX(100%);\n  }\n`;\n\nconst growVertical = (height: string) => keyframes`\n  from {\n    height: 0;\n    top: 50%;\n    transform: translateY(0%);\n  }\n  to {\n    height: ${height};\n    top: 50%;\n    transform: translateY(-50%);\n  }\n`;\n\nconst getIndicatorStyle = ({\n  width,\n  height,\n  position,\n  size,\n}: {\n  width: string;\n  height: string;\n  position: MenuTypes.IndicatorPosition;\n  size: MenuTypes.Size;\n}) => css`\n  content: '';\n  position: absolute;\n  display: block;\n  transition: all 0.2s;\n\n  ${position}: 0;\n  ${position === Positions.Left || position === Positions.Right\n    ? `\n      width: ${width};\n      height: ${height};\n      top: 50%;\n      transform: translateY(-50%);\n      margin-left: ${MenuConsts.consts[size].indicatorLeftMargin}px;\n\n      ${\n        position === Positions.Right &&\n        css`\n          left: unset;\n        `\n      }\n    `\n    : `\n      height: ${width};\n      width: max(${MenuConsts.consts[size].iconSize}px, ${height});\n      left: 50%;\n      transform: translateX(-50%);\n    `}\n`;\n\nconst getBorderRadiusFromPosition = (position: MenuTypes.IndicatorPosition): CSSObject => ({\n  borderTopLeftRadius: position === Positions.Bottom || position === Positions.Right ? '4px' : '0',\n  borderTopRightRadius: position === Positions.Bottom || position === Positions.Left ? '4px' : '0',\n  borderBottomLeftRadius: position === Positions.Top || position === Positions.Right ? '4px' : '0',\n  borderBottomRightRadius: position === Positions.Top || position === Positions.Left ? '4px' : '0',\n});\n\nconst createIndicatorStyle = ({\n  position,\n  width,\n  height,\n  state,\n  defaultStatus = false,\n  isIconTop = false,\n  size = Sizes.Medium,\n  muted = false,\n}: {\n  position: MenuTypes.IndicatorPosition;\n  width: string;\n  height: string;\n  state: FabricsVariables.StateType | 'disabled';\n  defaultStatus?: boolean;\n  isIconTop?: boolean;\n  size?: MenuTypes.Size;\n  muted?: boolean;\n}) => css<StyledMenuProps>`\n  ${({ theme }) => css`\n    ${getIndicatorStyle({ width, height, position, size })};\n    background-color: ${theme.layer({\n      disabled: state === 'disabled',\n      muted,\n    })[Variables.BackgroundBrand]};\n    ${getBorderRadiusFromPosition(position)};\n\n    ${state === 'press' &&\n    defaultStatus &&\n    css`\n      animation: ${position === Positions.Left || position === Positions.Right\n          ? growVertical(height)\n          : growHorizontal(height, isIconTop)}\n        0.2s alternate;\n    `}\n  `}\n`;\n\nconst IndicatorSizes = {\n  [Sizes.XSmall]: {\n    x: '20px',\n    y: 'calc(100% - 8px - 16px)',\n  },\n  [Sizes.Small]: {\n    x: '20px',\n    y: 'calc(100% - 8px - 24px)',\n  },\n  [Sizes.Medium]: {\n    x: '20px',\n    y: 'calc(100% - 12px - 32px)',\n  },\n  [Sizes.Large]: {\n    x: '24px',\n    y: 'calc(100% - 12px - 48px)',\n  },\n};\n\nconst HoverIndicatorSizes = {\n  [Sizes.XSmall]: {\n    x: '24px',\n    y: 'calc(100% - 16px)',\n  },\n  [Sizes.Small]: {\n    x: '24px',\n    y: 'calc(100% - 24px)',\n  },\n  [Sizes.Medium]: {\n    x: '24px',\n    y: 'calc(100% - 32px)',\n  },\n  [Sizes.Large]: {\n    x: '28px',\n    y: 'calc(100% - 48px)',\n  },\n};\n\ntype IndicatorPositionStyleProps = {\n  size: MenuTypes.Size;\n  indicatorPosition: MenuTypes.IndicatorPosition;\n  state: FabricsVariables.StateType;\n  muted?: boolean;\n  disabled?: boolean;\n  active?: boolean;\n  iconPosition?: MenuTypes.IconPosition;\n};\n\n// TRIGGER WARNING: incredibly complex function\n// this is wayyyy more complex than it needs to be, but I tried replicating the logic from the original object array, adding the muted prop\n// and it is a bit of a mess, but it works\n// I would suggest refactoring this when reworking the Menu component, starting from scratch! Do NOT keep this in :)\nexport const getIndicatorPositionStyle = ({\n  size,\n  indicatorPosition,\n  state,\n  disabled,\n  active,\n  iconPosition,\n  muted,\n}: IndicatorPositionStyleProps) => {\n  const xOrYPosition = indicatorPosition === 'bottom' || indicatorPosition === 'top' ? 'y' : 'x';\n  const indicatorHeight = IndicatorSizes[size][xOrYPosition];\n  const hoverIndicatorHeight =\n    state === 'hover' && !disabled ? HoverIndicatorSizes[size][xOrYPosition] : indicatorHeight;\n  const indicatorInactiveheight = !active ? '30%' : hoverIndicatorHeight;\n  const disabledOrState = disabled ? 'disabled' : state;\n  const realState = !active ? 'press' : disabledOrState;\n\n  return createIndicatorStyle({\n    position: indicatorPosition,\n    width: '3px',\n    height: indicatorInactiveheight,\n    state: realState,\n    defaultStatus: !active,\n    isIconTop: iconPosition === Positions.Top,\n    size,\n    muted,\n  });\n};\n"],"names":["growHorizontal","width","isIconTop","keyframes","growVertical","height","getIndicatorStyle","position","size","css","Positions","MenuConsts.consts","getBorderRadiusFromPosition","createIndicatorStyle","state","defaultStatus","Sizes","muted","theme","Variables","IndicatorSizes","getIndicatorPositionStyle","indicatorPosition","disabled","active","iconPosition","xOrYPosition","hoverIndicatorHeight"],"mappings":"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"}
+{"version":3,"file":"indicator.styles.js","sources":["../../../../../src/components/Menu/styles/indicator.styles.ts"],"sourcesContent":["import { css, keyframes, CSSObject } from 'styled-components';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { Positions, Sizes } from 'acinguiux-ds-react-base/consts';\nimport { type MenuTypes, MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\n\nimport type { StyledMenuProps } from '../Menu.types';\n\nconst growHorizontal = (width: string) => keyframes`\n  from {\n    width: 0;\n  }\n  to {\n    width: ${width};\n  }\n`;\n\nconst growVertical = (height: string) => keyframes`\n  from {\n    height: 0;\n    top: 50%;\n    transform: translateY(0%);\n  }\n  to {\n    height: ${height};\n    top: 50%;\n    transform: translateY(-50%);\n  }\n`;\n\nconst getIndicatorStyle = ({\n  width,\n  height,\n  position,\n  size,\n}: {\n  width: string;\n  height: string;\n  position: MenuTypes.IndicatorPosition;\n  size: MenuTypes.Size;\n}) => css`\n  content: '';\n  position: absolute;\n  display: block;\n  transition: all 0.2s;\n\n  ${position}: 0;\n  ${position === Positions.Left || position === Positions.Right\n    ? `\n      width: ${width};\n      height: ${height};\n      top: 50%;\n      transform: translateY(-50%);\n      margin-left: ${MenuConsts.consts[size].indicatorLeftMargin}px;\n\n      ${\n        position === Positions.Right &&\n        css`\n          left: unset;\n        `\n      }\n    `\n    : `\n      height: ${width};\n      width: max(${MenuConsts.consts[size].iconSize}px, ${height});\n      left: 50%;\n      transform: translateX(-50%);\n    `}\n`;\n\nconst getBorderRadiusFromPosition = (position: MenuTypes.IndicatorPosition): CSSObject => ({\n  borderTopLeftRadius: position === Positions.Bottom || position === Positions.Right ? '4px' : '0',\n  borderTopRightRadius: position === Positions.Bottom || position === Positions.Left ? '4px' : '0',\n  borderBottomLeftRadius: position === Positions.Top || position === Positions.Right ? '4px' : '0',\n  borderBottomRightRadius: position === Positions.Top || position === Positions.Left ? '4px' : '0',\n});\n\nconst createIndicatorStyle = ({\n  position,\n  width,\n  height,\n  state,\n  defaultStatus = false,\n  size = Sizes.Medium,\n  muted = false,\n}: {\n  position: MenuTypes.IndicatorPosition;\n  width: string;\n  height: string;\n  state: FabricsVariables.StateType | 'disabled';\n  defaultStatus?: boolean;\n  size?: MenuTypes.Size;\n  muted?: boolean;\n}) => css<StyledMenuProps>`\n  ${({ theme }) => css`\n    ${getIndicatorStyle({ width, height, position, size })};\n    background-color: ${theme.layer({\n      disabled: state === 'disabled',\n      muted,\n    })[Variables.BackgroundBrand]};\n    ${getBorderRadiusFromPosition(position)};\n\n    ${state === 'press' &&\n    defaultStatus &&\n    css`\n      animation: ${position === Positions.Left || position === Positions.Right\n          ? growVertical(height)\n          : growHorizontal(height)}\n        0.2s alternate;\n    `}\n  `}\n`;\n\nconst IndicatorSizes = {\n  [Sizes.XSmall]: {\n    x: '20px',\n    y: 'calc(100% - 8px - 16px)',\n  },\n  [Sizes.Small]: {\n    x: '20px',\n    y: 'calc(100% - 8px - 24px)',\n  },\n  [Sizes.Medium]: {\n    x: '20px',\n    y: 'calc(100% - 12px - 32px)',\n  },\n  [Sizes.Large]: {\n    x: '24px',\n    y: 'calc(100% - 12px - 48px)',\n  },\n};\n\nconst HoverIndicatorSizes = {\n  [Sizes.XSmall]: {\n    x: '24px',\n    y: 'calc(100% - 16px)',\n  },\n  [Sizes.Small]: {\n    x: '24px',\n    y: 'calc(100% - 24px)',\n  },\n  [Sizes.Medium]: {\n    x: '24px',\n    y: 'calc(100% - 32px)',\n  },\n  [Sizes.Large]: {\n    x: '28px',\n    y: 'calc(100% - 48px)',\n  },\n};\n\ntype IndicatorPositionStyleProps = {\n  size: MenuTypes.Size;\n  indicatorPosition: MenuTypes.IndicatorPosition;\n  state: FabricsVariables.StateType;\n  muted?: boolean;\n  disabled?: boolean;\n  active?: boolean;\n};\n\n// TRIGGER WARNING: incredibly complex function\n// this is wayyyy more complex than it needs to be, but I tried replicating the logic from the original object array, adding the muted prop\n// and it is a bit of a mess, but it works\n// I would suggest refactoring this when reworking the Menu component, starting from scratch! Do NOT keep this in :)\nexport const getIndicatorPositionStyle = ({\n  size,\n  indicatorPosition,\n  state,\n  disabled,\n  active,\n  muted,\n}: IndicatorPositionStyleProps) => {\n  const xOrYPosition = indicatorPosition === 'bottom' || indicatorPosition === 'top' ? 'y' : 'x';\n  const indicatorHeight = IndicatorSizes[size][xOrYPosition];\n  const hoverIndicatorHeight =\n    state === 'hover' && !disabled ? HoverIndicatorSizes[size][xOrYPosition] : indicatorHeight;\n  const indicatorInactiveheight = !active ? '30%' : hoverIndicatorHeight;\n  const disabledOrState = disabled ? 'disabled' : state;\n  const realState = !active ? 'press' : disabledOrState;\n\n  return createIndicatorStyle({\n    position: indicatorPosition,\n    width: '3px',\n    height: indicatorInactiveheight,\n    state: realState,\n    defaultStatus: !active,\n    size,\n    muted,\n  });\n};\n"],"names":["growHorizontal","width","keyframes","growVertical","height","getIndicatorStyle","position","size","css","Positions","MenuConsts.consts","getBorderRadiusFromPosition","createIndicatorStyle","state","defaultStatus","Sizes","muted","theme","Variables","IndicatorSizes","getIndicatorPositionStyle","indicatorPosition","disabled","active","xOrYPosition","hoverIndicatorHeight"],"mappings":"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"}

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

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("styled-components"),u=require("../../../react-base/src/consts/index.js"),o=require("../../../react-base/src/theme/types/layer.js"),C=require("../../../react-base/src/components/Menu/Menu.consts.js"),s=require("acinguiux-ds-fabrics"),L=require("../../../react-base/src/utils/stylesUtils.js"),a=require("../Menu.utils.js"),A=require("./indicator.styles.js"),e=require("../../../react-base/src/consts/classes.js"),E=b.css`
-  ${({theme:t,$size:i,$muted:l,disabled:M,$indicatorPosition:r,$noAnimate:d,$iconPosition:S,mode:c})=>{const n=t.layer({foundation:s.FabricsVariables.Foundations.Surface}),_=t.layer({foundation:s.FabricsVariables.Foundations.Surface,muted:l,disabled:!0});return b.css`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("styled-components"),b=require("../../../react-base/src/consts/index.js"),o=require("../../../react-base/src/theme/types/layer.js"),C=require("../../../react-base/src/components/Menu/Menu.consts.js"),s=require("acinguiux-ds-fabrics"),$=require("../../../react-base/src/utils/stylesUtils.js"),l=require("../Menu.utils.js"),_=require("./indicator.styles.js"),e=require("../../../react-base/src/consts/classes.js"),L=c.css`
+  ${({theme:t,$size:a,$muted:i,disabled:u,$indicatorPosition:S,$noAnimate:M,$iconPosition:A,mode:r})=>{const n=t.layer({foundation:s.FabricsVariables.Foundations.Surface}),d=t.layer({foundation:s.FabricsVariables.Foundations.Surface,muted:i,disabled:!0});return c.css`
       .${e.MENU_CLASS}-item {
         position: relative;
         display: flex;
-        justify-content: ${c===u.Directions.Horizontal?"center":"space-between"};
-        align-items: ${c===u.Directions.Horizontal?"center":"stretch"};
+        justify-content: ${r===b.Directions.Horizontal?"center":"space-between"};
+        align-items: ${r===b.Directions.Horizontal?"center":"stretch"};
         flex-direction: column;
-        padding: ${C.consts[i].itemPadding[c===u.Directions.Horizontal?u.Directions.Horizontal:u.Directions.Vertical][S]};
+        padding: ${C.consts[a].itemPadding[r===b.Directions.Horizontal?b.Directions.Horizontal:b.Directions.Vertical][A]};
         cursor: pointer;
 
         & .${e.MENU_CLASS}-label {
@@ -41,26 +41,26 @@
         &.${e.MENU_CLASS}-item-disabled {
           &,
           .${e.MENU_CLASS}-label {
-            color: ${_[o.Variables.TextOnFoundationSubtle]};
+            color: ${d[o.Variables.TextOnFoundationSubtle]};
             cursor: not-allowed;
 
             *:not(.${e.BADGE_CLASS}) svg {
-              fill: ${_[o.Variables.TextOnFoundationSubtle]};
+              fill: ${d[o.Variables.TextOnFoundationSubtle]};
             }
           }
         }
 
         &.${e.MENU_CLASS}-item-active:not(.${e.MENU_CLASS}-item-selected):not(.${e.MENU_CLASS}-item-disabled) {
           .${e.MENU_CLASS}-label {
-            background-color: ${a.getBackgroundColor(t,s.FabricsVariables.States.Hover,s.FabricsVariables.Foundations.Section,l)};
+            background-color: ${l.getBackgroundColor(t,s.FabricsVariables.States.Hover,s.FabricsVariables.Foundations.Section,i)};
           }
 
           &:active .${e.MENU_CLASS}-label {
-            background-color: ${a.getBackgroundColor(t,s.FabricsVariables.States.Press,s.FabricsVariables.Foundations.Section,l)};
+            background-color: ${l.getBackgroundColor(t,s.FabricsVariables.States.Press,s.FabricsVariables.Foundations.Section,i)};
 
-            ${d!==!0&&b.css`
+            ${M!==!0&&c.css`
               &::after {
-                ${A.getIndicatorPositionStyle({indicatorPosition:a.getModeIndicatorPosition(r,c),size:i,state:"resting",active:!1,disabled:M,muted:l,iconPosition:S})};
+                ${_.getIndicatorPositionStyle({indicatorPosition:l.getModeIndicatorPosition(S,r),size:a,state:"resting",active:!1,disabled:u,muted:i})};
               }
             `};
           }
@@ -85,7 +85,7 @@
 
         /* set focus visible for label & custom render items */
         &:focus-visible .${e.MENU_CLASS}-label, .${e.MENU_CLASS}-label:focus-visible {
-          ${L.getFocusStyles(t)};
+          ${$.getFocusStyles(t)};
         }
       }
 
@@ -93,24 +93,24 @@
 
       .${e.MENU_CLASS}-vertical {
         .${e.MENU_CLASS}-label {
-          ${c==="horizontal"&&b.css`
+          ${r==="horizontal"&&c.css`
             margin: -4px 2px;
           `}
         }
       }
 
-      ${d!==!0&&b.css`
+      ${M!==!0&&c.css`
         .${e.MENU_CLASS}-vertical .${e.MENU_CLASS}-item-active.${e.MENU_CLASS}-item:not(.${e.MENU_CLASS}-item-selected) {
           &:active .${e.MENU_CLASS}-label {
             &::after {
-              ${A.getIndicatorPositionStyle({indicatorPosition:a.getModeIndicatorPosition(r),size:i,state:"resting",disabled:M,muted:l,iconPosition:S})};
+              ${_.getIndicatorPositionStyle({indicatorPosition:l.getModeIndicatorPosition(S),size:a,state:"resting",disabled:u,muted:i})};
             }
           }
         }
       `};
 
       .${e.MENU_CLASS}-vertical .${e.MENU_CLASS}-item.${e.MENU_CLASS}-item-selected .${e.MENU_CLASS}-label {
-        ${a.getMenuItemSelectedStyle(t,r,"vertical",S,i,l)};
+        ${l.getMenuItemSelectedStyle(t,S,"vertical",a,i)};
       }
 
       /* Inline and vertical top level */
@@ -118,13 +118,13 @@
       /* Disabled */
       &.${e.MENU_CLASS}-inline, &.${e.MENU_CLASS}-vertical {
         .${e.MENU_CLASS}-item.${e.MENU_CLASS}-item-selected.${e.MENU_CLASS}-item-disabled .${e.MENU_CLASS}-label {
-          ${a.getMenuItemDisabledStyle(t,r,"vertical",S,i,l)};
+          ${l.getMenuItemDisabledStyle(t,S,"vertical",a,i)};
         }
       }
 
       &.${e.MENU_CLASS}-inline, &.${e.MENU_CLASS}-vertical {
         .${e.MENU_CLASS}-item.${e.MENU_CLASS}-item-selected:not(.${e.MENU_CLASS}-item-disabled) .${e.MENU_CLASS}-label {
-          ${a.getMenuItemSelectedStyle(t,r,"vertical",S,i,l)};
+          ${l.getMenuItemSelectedStyle(t,S,"vertical",a,i)};
         }
       }
 
@@ -134,14 +134,14 @@
       &.${e.MENU_CLASS}-horizontal
         .${e.MENU_CLASS}-item.${e.MENU_CLASS}-item-selected.${e.MENU_CLASS}-item-disabled
         .${e.MENU_CLASS}-label {
-        ${a.getMenuItemDisabledStyle(t,r,"horizontal",S,i,l)};
+        ${l.getMenuItemDisabledStyle(t,S,"horizontal",a,i)};
       }
 
       &.${e.MENU_CLASS}-horizontal
         .${e.MENU_CLASS}-item.${e.MENU_CLASS}-item-selected:not(.${e.MENU_CLASS}-item-disabled)
         .${e.MENU_CLASS}-label {
-        ${a.getMenuItemSelectedStyle(t,r,"horizontal",S,i,l)};
+        ${l.getMenuItemSelectedStyle(t,S,"horizontal",a,i)};
       }
     `}}
-`;exports.menuItemStyle=E;
+`;exports.menuItemStyle=L;
 //# sourceMappingURL=menuItem.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"menuItem.styles.js","sources":["../../../../../src/components/Menu/styles/menuItem.styles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { MENU_CLASS, Directions, BADGE_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\n\nimport {\n  getMenuItemSelectedStyle,\n  getModeIndicatorPosition,\n  getMenuItemDisabledStyle,\n  getBackgroundColor,\n} from '../Menu.utils';\nimport type { StyledMenuProps } from '../Menu.types';\nimport { getIndicatorPositionStyle } from './indicator.styles';\n\nexport const menuItemStyle = css<StyledMenuProps>`\n  ${({ theme, $size, $muted, disabled, $indicatorPosition, $noAnimate, $iconPosition, mode }) => {\n    const layer = theme.layer({ foundation: FabricsVariables.Foundations.Surface });\n    const disabledLayer = theme.layer({\n      foundation: FabricsVariables.Foundations.Surface,\n      muted: $muted,\n      disabled: true,\n    });\n\n    return css<StyledMenuProps>`\n      .${MENU_CLASS}-item {\n        position: relative;\n        display: flex;\n        justify-content: ${mode === Directions.Horizontal ? 'center' : 'space-between'};\n        align-items: ${mode === Directions.Horizontal ? 'center' : 'stretch'};\n        flex-direction: column;\n        padding: ${MenuConsts.consts[$size].itemPadding[\n          mode === Directions.Horizontal ? Directions.Horizontal : Directions.Vertical\n        ][$iconPosition]};\n        cursor: pointer;\n\n        & .${MENU_CLASS}-label {\n          color: ${layer[Variables.TextOnFoundationSubtle]};\n\n          *:not(.${BADGE_CLASS}) svg {\n            fill: ${layer[Variables.TextOnFoundationSubtle]};\n          }\n        }\n\n        &.${MENU_CLASS}-item-selected:not(.${MENU_CLASS}-item-active):not(.${MENU_CLASS}-item-disabled) {\n          .${MENU_CLASS}-label {\n            color: ${layer[Variables.TextOnFoundationStrong]};\n\n            *:not(.${BADGE_CLASS}) svg {\n              fill: ${layer[Variables.TextOnFoundationStrong]};\n            }\n          }\n        }\n\n        &.${MENU_CLASS}-item-active:not(.${MENU_CLASS}-item-disabled) {\n          .${MENU_CLASS}-label {\n            color: ${layer[Variables.TextOnFoundationStrong]};\n\n            *:not(.${BADGE_CLASS}) svg {\n              fill: ${layer[Variables.TextOnFoundationStrong]};\n            }\n          }\n        }\n\n        /* Disabled */\n        &.${MENU_CLASS}-item-disabled {\n          &,\n          .${MENU_CLASS}-label {\n            color: ${disabledLayer[Variables.TextOnFoundationSubtle]};\n            cursor: not-allowed;\n\n            *:not(.${BADGE_CLASS}) svg {\n              fill: ${disabledLayer[Variables.TextOnFoundationSubtle]};\n            }\n          }\n        }\n\n        &.${MENU_CLASS}-item-active:not(.${MENU_CLASS}-item-selected):not(.${MENU_CLASS}-item-disabled) {\n          .${MENU_CLASS}-label {\n            background-color: ${getBackgroundColor(\n              theme,\n              FabricsVariables.States.Hover,\n              FabricsVariables.Foundations.Section,\n              $muted,\n            )};\n          }\n\n          &:active .${MENU_CLASS}-label {\n            background-color: ${getBackgroundColor(\n              theme,\n              FabricsVariables.States.Press,\n              FabricsVariables.Foundations.Section,\n              $muted,\n            )};\n\n            ${$noAnimate !== true &&\n            css<StyledMenuProps>`\n              &::after {\n                ${getIndicatorPositionStyle({\n                  indicatorPosition: getModeIndicatorPosition($indicatorPosition, mode),\n                  size: $size,\n                  state: 'resting',\n                  active: false,\n                  disabled,\n                  muted: $muted,\n                  iconPosition: $iconPosition,\n                })};\n              }\n            `};\n          }\n\n          /* Span focus */\n          &:focus-visible {\n            .${MENU_CLASS}-label {\n              background-color: transparent;\n            }\n          }\n\n          /* Anchor focus */\n          .${MENU_CLASS}-label:focus-visible {\n            background-color: transparent;\n          }\n        }\n\n        /* remove default focus */\n        &:focus-visible {\n          outline: none;\n        }\n\n        /* set focus visible for label & custom render items */\n        &:focus-visible .${MENU_CLASS}-label, .${MENU_CLASS}-label:focus-visible {\n          ${getFocusStyles(theme)};\n        }\n      }\n\n      /* Vertical and horizontal popup  */\n\n      .${MENU_CLASS}-vertical {\n        .${MENU_CLASS}-label {\n          ${mode === 'horizontal' &&\n          css`\n            margin: -4px 2px;\n          `}\n        }\n      }\n\n      ${$noAnimate !== true &&\n      css<StyledMenuProps>`\n        .${MENU_CLASS}-vertical .${MENU_CLASS}-item-active.${MENU_CLASS}-item:not(.${MENU_CLASS}-item-selected) {\n          &:active .${MENU_CLASS}-label {\n            &::after {\n              ${getIndicatorPositionStyle({\n                indicatorPosition: getModeIndicatorPosition($indicatorPosition),\n                size: $size,\n                state: 'resting',\n                disabled,\n                muted: $muted,\n                iconPosition: $iconPosition,\n              })};\n            }\n          }\n        }\n      `};\n\n      .${MENU_CLASS}-vertical .${MENU_CLASS}-item.${MENU_CLASS}-item-selected .${MENU_CLASS}-label {\n        ${getMenuItemSelectedStyle(theme, $indicatorPosition, 'vertical', $iconPosition, $size, $muted)};\n      }\n\n      /* Inline and vertical top level */\n\n      /* Disabled */\n      &.${MENU_CLASS}-inline, &.${MENU_CLASS}-vertical {\n        .${MENU_CLASS}-item.${MENU_CLASS}-item-selected.${MENU_CLASS}-item-disabled .${MENU_CLASS}-label {\n          ${getMenuItemDisabledStyle(theme, $indicatorPosition, 'vertical', $iconPosition, $size, $muted)};\n        }\n      }\n\n      &.${MENU_CLASS}-inline, &.${MENU_CLASS}-vertical {\n        .${MENU_CLASS}-item.${MENU_CLASS}-item-selected:not(.${MENU_CLASS}-item-disabled) .${MENU_CLASS}-label {\n          ${getMenuItemSelectedStyle(theme, $indicatorPosition, 'vertical', $iconPosition, $size, $muted)};\n        }\n      }\n\n      /* Horizontal */\n\n      /* Disabled */\n      &.${MENU_CLASS}-horizontal\n        .${MENU_CLASS}-item.${MENU_CLASS}-item-selected.${MENU_CLASS}-item-disabled\n        .${MENU_CLASS}-label {\n        ${getMenuItemDisabledStyle(theme, $indicatorPosition, 'horizontal', $iconPosition, $size, $muted)};\n      }\n\n      &.${MENU_CLASS}-horizontal\n        .${MENU_CLASS}-item.${MENU_CLASS}-item-selected:not(.${MENU_CLASS}-item-disabled)\n        .${MENU_CLASS}-label {\n        ${getMenuItemSelectedStyle(theme, $indicatorPosition, 'horizontal', $iconPosition, $size, $muted)};\n      }\n    `;\n  }}\n`;\n"],"names":["menuItemStyle","css","theme","$size","$muted","disabled","$indicatorPosition","$noAnimate","$iconPosition","mode","layer","FabricsVariables","disabledLayer","MENU_CLASS","Directions","MenuConsts.consts","Variables","BADGE_CLASS","getBackgroundColor","getIndicatorPositionStyle","getModeIndicatorPosition","getFocusStyles","getMenuItemSelectedStyle","getMenuItemDisabledStyle"],"mappings":"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"}
+{"version":3,"file":"menuItem.styles.js","sources":["../../../../../src/components/Menu/styles/menuItem.styles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { MENU_CLASS, Directions, BADGE_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\n\nimport {\n  getMenuItemSelectedStyle,\n  getModeIndicatorPosition,\n  getMenuItemDisabledStyle,\n  getBackgroundColor,\n} from '../Menu.utils';\nimport type { StyledMenuProps } from '../Menu.types';\nimport { getIndicatorPositionStyle } from './indicator.styles';\n\nexport const menuItemStyle = css<StyledMenuProps>`\n  ${({ theme, $size, $muted, disabled, $indicatorPosition, $noAnimate, $iconPosition, mode }) => {\n    const layer = theme.layer({ foundation: FabricsVariables.Foundations.Surface });\n    const disabledLayer = theme.layer({\n      foundation: FabricsVariables.Foundations.Surface,\n      muted: $muted,\n      disabled: true,\n    });\n\n    return css<StyledMenuProps>`\n      .${MENU_CLASS}-item {\n        position: relative;\n        display: flex;\n        justify-content: ${mode === Directions.Horizontal ? 'center' : 'space-between'};\n        align-items: ${mode === Directions.Horizontal ? 'center' : 'stretch'};\n        flex-direction: column;\n        padding: ${MenuConsts.consts[$size].itemPadding[\n          mode === Directions.Horizontal ? Directions.Horizontal : Directions.Vertical\n        ][$iconPosition]};\n        cursor: pointer;\n\n        & .${MENU_CLASS}-label {\n          color: ${layer[Variables.TextOnFoundationSubtle]};\n\n          *:not(.${BADGE_CLASS}) svg {\n            fill: ${layer[Variables.TextOnFoundationSubtle]};\n          }\n        }\n\n        &.${MENU_CLASS}-item-selected:not(.${MENU_CLASS}-item-active):not(.${MENU_CLASS}-item-disabled) {\n          .${MENU_CLASS}-label {\n            color: ${layer[Variables.TextOnFoundationStrong]};\n\n            *:not(.${BADGE_CLASS}) svg {\n              fill: ${layer[Variables.TextOnFoundationStrong]};\n            }\n          }\n        }\n\n        &.${MENU_CLASS}-item-active:not(.${MENU_CLASS}-item-disabled) {\n          .${MENU_CLASS}-label {\n            color: ${layer[Variables.TextOnFoundationStrong]};\n\n            *:not(.${BADGE_CLASS}) svg {\n              fill: ${layer[Variables.TextOnFoundationStrong]};\n            }\n          }\n        }\n\n        /* Disabled */\n        &.${MENU_CLASS}-item-disabled {\n          &,\n          .${MENU_CLASS}-label {\n            color: ${disabledLayer[Variables.TextOnFoundationSubtle]};\n            cursor: not-allowed;\n\n            *:not(.${BADGE_CLASS}) svg {\n              fill: ${disabledLayer[Variables.TextOnFoundationSubtle]};\n            }\n          }\n        }\n\n        &.${MENU_CLASS}-item-active:not(.${MENU_CLASS}-item-selected):not(.${MENU_CLASS}-item-disabled) {\n          .${MENU_CLASS}-label {\n            background-color: ${getBackgroundColor(\n              theme,\n              FabricsVariables.States.Hover,\n              FabricsVariables.Foundations.Section,\n              $muted,\n            )};\n          }\n\n          &:active .${MENU_CLASS}-label {\n            background-color: ${getBackgroundColor(\n              theme,\n              FabricsVariables.States.Press,\n              FabricsVariables.Foundations.Section,\n              $muted,\n            )};\n\n            ${$noAnimate !== true &&\n            css<StyledMenuProps>`\n              &::after {\n                ${getIndicatorPositionStyle({\n                  indicatorPosition: getModeIndicatorPosition($indicatorPosition, mode),\n                  size: $size,\n                  state: 'resting',\n                  active: false,\n                  disabled,\n                  muted: $muted,\n                })};\n              }\n            `};\n          }\n\n          /* Span focus */\n          &:focus-visible {\n            .${MENU_CLASS}-label {\n              background-color: transparent;\n            }\n          }\n\n          /* Anchor focus */\n          .${MENU_CLASS}-label:focus-visible {\n            background-color: transparent;\n          }\n        }\n\n        /* remove default focus */\n        &:focus-visible {\n          outline: none;\n        }\n\n        /* set focus visible for label & custom render items */\n        &:focus-visible .${MENU_CLASS}-label, .${MENU_CLASS}-label:focus-visible {\n          ${getFocusStyles(theme)};\n        }\n      }\n\n      /* Vertical and horizontal popup  */\n\n      .${MENU_CLASS}-vertical {\n        .${MENU_CLASS}-label {\n          ${mode === 'horizontal' &&\n          css`\n            margin: -4px 2px;\n          `}\n        }\n      }\n\n      ${$noAnimate !== true &&\n      css<StyledMenuProps>`\n        .${MENU_CLASS}-vertical .${MENU_CLASS}-item-active.${MENU_CLASS}-item:not(.${MENU_CLASS}-item-selected) {\n          &:active .${MENU_CLASS}-label {\n            &::after {\n              ${getIndicatorPositionStyle({\n                indicatorPosition: getModeIndicatorPosition($indicatorPosition),\n                size: $size,\n                state: 'resting',\n                disabled,\n                muted: $muted,\n              })};\n            }\n          }\n        }\n      `};\n\n      .${MENU_CLASS}-vertical .${MENU_CLASS}-item.${MENU_CLASS}-item-selected .${MENU_CLASS}-label {\n        ${getMenuItemSelectedStyle(theme, $indicatorPosition, 'vertical', $size, $muted)};\n      }\n\n      /* Inline and vertical top level */\n\n      /* Disabled */\n      &.${MENU_CLASS}-inline, &.${MENU_CLASS}-vertical {\n        .${MENU_CLASS}-item.${MENU_CLASS}-item-selected.${MENU_CLASS}-item-disabled .${MENU_CLASS}-label {\n          ${getMenuItemDisabledStyle(theme, $indicatorPosition, 'vertical', $size, $muted)};\n        }\n      }\n\n      &.${MENU_CLASS}-inline, &.${MENU_CLASS}-vertical {\n        .${MENU_CLASS}-item.${MENU_CLASS}-item-selected:not(.${MENU_CLASS}-item-disabled) .${MENU_CLASS}-label {\n          ${getMenuItemSelectedStyle(theme, $indicatorPosition, 'vertical', $size, $muted)};\n        }\n      }\n\n      /* Horizontal */\n\n      /* Disabled */\n      &.${MENU_CLASS}-horizontal\n        .${MENU_CLASS}-item.${MENU_CLASS}-item-selected.${MENU_CLASS}-item-disabled\n        .${MENU_CLASS}-label {\n        ${getMenuItemDisabledStyle(theme, $indicatorPosition, 'horizontal', $size, $muted)};\n      }\n\n      &.${MENU_CLASS}-horizontal\n        .${MENU_CLASS}-item.${MENU_CLASS}-item-selected:not(.${MENU_CLASS}-item-disabled)\n        .${MENU_CLASS}-label {\n        ${getMenuItemSelectedStyle(theme, $indicatorPosition, 'horizontal', $size, $muted)};\n      }\n    `;\n  }}\n`;\n"],"names":["menuItemStyle","css","theme","$size","$muted","disabled","$indicatorPosition","$noAnimate","$iconPosition","mode","layer","FabricsVariables","disabledLayer","MENU_CLASS","Directions","MenuConsts.consts","Variables","BADGE_CLASS","getBackgroundColor","getIndicatorPositionStyle","getModeIndicatorPosition","getFocusStyles","getMenuItemSelectedStyle","getMenuItemDisabledStyle"],"mappings":"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"}