acinguiux-ds-react-framework 0.0.1

package/build/esm/components/Menu/_stories/Story.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Story.styles.js","sourceRoot":"","sources":["../../../../../src/components/Menu/_stories/Story.styles.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,IAAI,MAAM,SAAS,CAAC;AAM3B,MAAM,UAAU,GAAG,OAAO,CAAC;AAE3B,MAAM,kBAAkB,GAAG,GAAG,CAAgB;IAC1C,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,CAAC;CAChH,CAAC;AAEF,MAAM,aAAa,GAAG,GAAG,CAAgB;IACrC,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,CAAC;CAC7G,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEpD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAgB;IACvD,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;aAG1B,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU;wBACtC,KAAK,CAAC,UAAU,CAAC,OAAO;;MAE1C,uBAAuB;iBACZ,aAAa,IAAI,aAAa;;GAE5C;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAgB;;;;CAI5D,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAAgB;;;CAGrF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAgB;IACxD,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;aACnB,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU;GAC3D;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAqB;IAClD,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;iBAEJ,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;;GAEtD;CACF,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAU;IACzC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;aAEf,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,UAAU,GAAG;;;;;;wBAMlD,KAAK,CAAC,UAAU,CAAC,IAAI;GAC1C;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,CACvD,KAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,YACzB,QAAQ,IAAI,CACX,KAAC,IAAI,kPAGE,CACR,GACgB,CACpB,CAAC","sourcesContent":["import { MenuMode } from 'rc-menu/lib/interface';\nimport styled, { css } from 'styled-components';\nimport { Sizes } from 'acinguiux-ds-react-base';\n\nimport Text from '../../Text/components/Text/Text';\nimport Menu from '../Menu';\nimport { IMenuProps } from '../Menu.types';\n\ninterface IContent extends Pick<IMenuProps, 'mode' | 'children'> {}\ninterface IMenuContainer extends Pick<IMenuProps, 'inlineCollapsed' | 'mode' | 'size'> {}\n\nconst MENU_WIDTH = '300px';\n\nconst menuWidthCollapsed = css<IMenuContainer>`\n  ${({ size = Sizes.Medium }) => ({ [Sizes.Small]: '48px', [Sizes.Medium]: '56px', [Sizes.Large]: '64px' }[size])}\n`;\n\nconst buttonPadding = css<IMenuContainer>`\n  ${({ size = Sizes.Medium }) => ({ [Sizes.Small]: '8px', [Sizes.Medium]: '8px', [Sizes.Large]: '8px' }[size])}\n`;\n\nexport const VerticalContainerHeader = styled.div``;\n\nexport const VerticalContainer = styled.div<IMenuContainer>`\n  ${({ inlineCollapsed, theme }) => css`\n    z-index: 1;\n    transition: width 0.3s ease-out;\n    width: ${inlineCollapsed ? menuWidthCollapsed : MENU_WIDTH};\n    background-color: ${theme.background.surface};\n\n    ${VerticalContainerHeader} {\n      padding: ${buttonPadding} ${buttonPadding} 0;\n    }\n  `}\n`;\n\nexport const HorizontalContainer = styled.div<IMenuContainer>`\n  z-index: 1;\n  transition: width 0.3s ease-out;\n  width: auto;\n`;\n\nexport const HorizontalCenteredContainer = styled(HorizontalContainer)<IMenuContainer>`\n  display: flex;\n  justify-content: center;\n`;\n\nexport const StyledInlineMenu = styled(Menu)<IMenuContainer>`\n  ${({ inlineCollapsed }) => css`\n    width: ${inlineCollapsed ? menuWidthCollapsed : MENU_WIDTH};\n  `}\n`;\n\nexport const Wrapper = styled.div<{ mode?: MenuMode }>`\n  ${({ mode }) => css`\n    display: flex;\n    flex-flow: ${mode === 'horizontal' ? 'column' : 'row'};\n    width: 100%;\n  `}\n`;\n\nconst ContentContainer = styled.div<IContent>`\n  ${({ theme, mode }) => css`\n    z-index: 0;\n    width: ${mode === 'horizontal' ? '100%' : `calc(100% - ${MENU_WIDTH})`};\n    justify-content: center;\n    align-items: center;\n    height: auto;\n    min-height: 200px;\n    padding: 20px;\n    background-color: ${theme.background.base};\n  `};\n`;\n\nexport const Content = ({ mode, children }: IContent) => (\n  <ContentContainer mode={mode}>\n    {children || (\n      <Text>\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda, beatae doloremque ex facilis ipsa\n        modi necessitatibus nemo nihil non, nostrum nulla odio pariatur quae repellat temporibus tenetur totam veniam.\n      </Text>\n    )}\n  </ContentContainer>\n);\n"]}

package/build/esm/components/Menu/components/MenuDivider.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { DividerProps } from 'rc-menu/lib/Divider';
+export interface IMenuDividerProps extends DividerProps {
+}
+declare const MenuDivider: ({ ...props }: IMenuDividerProps) => ReactElement;
+export default MenuDivider;
+//# sourceMappingURL=MenuDivider.d.ts.map

package/build/esm/components/Menu/components/MenuDivider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuDivider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/components/MenuDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,MAAM,WAAW,iBAAkB,SAAQ,YAAY;CAAG;AAE1D,QAAA,MAAM,WAAW,iBAAkB,iBAAiB,KAAG,YAAsC,CAAC;AAE9F,eAAe,WAAW,CAAC"}

package/build/esm/components/Menu/components/MenuDivider.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Divider } from 'rc-menu';
+const MenuDivider = ({ ...props }) => _jsx(Divider, { ...props });
+export default MenuDivider;
+//# sourceMappingURL=MenuDivider.js.map

package/build/esm/components/Menu/components/MenuDivider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuDivider.js","sourceRoot":"","sources":["../../../../../src/components/Menu/components/MenuDivider.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAKlC,MAAM,WAAW,GAAG,CAAC,EAAE,GAAG,KAAK,EAAqB,EAAgB,EAAE,CAAC,KAAC,OAAO,OAAK,KAAK,GAAI,CAAC;AAE9F,eAAe,WAAW,CAAC","sourcesContent":["import { ReactElement } from 'react';\n\nimport { Divider } from 'rc-menu';\nimport { DividerProps } from 'rc-menu/lib/Divider';\n\nexport interface IMenuDividerProps extends DividerProps {}\n\nconst MenuDivider = ({ ...props }: IMenuDividerProps): ReactElement => <Divider {...props} />;\n\nexport default MenuDivider;\n"]}

package/build/esm/components/Menu/components/MenuItem.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { MenuItemProps as RCMenuItemProps } from 'rc-menu/lib/MenuItem';
+export interface IMenuItemProps extends RCMenuItemProps {
+    level?: number;
+    path?: string;
+}
+declare const MenuItem: import("react").ForwardRefExoticComponent<IMenuItemProps & import("react").RefAttributes<HTMLElement>>;
+export default MenuItem;
+//# sourceMappingURL=MenuItem.d.ts.map

package/build/esm/components/Menu/components/MenuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/components/MenuItem.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,aAAa,IAAI,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAKxE,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,QAAQ,wGAab,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/build/esm/components/Menu/components/MenuItem.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { MenuItem as RCMenuItem } from 'rc-menu';
+import { getString } from '../../../utils/textUtils';
+import MenuLabel from './MenuLabel';
+const MenuItem = forwardRef(({ children, itemIcon, level, path, ...rest }, ref) => {
+    const menuItemRef = useRef(null);
+    useImperativeHandle(ref, () => menuItemRef.current);
+    return (_jsx(RCMenuItem, { ref: menuItemRef, "aria-label": getString(children), ...rest, children: _jsx(MenuLabel, { parentRef: menuItemRef, level: level, path: path, itemIcon: itemIcon, children: children }) }));
+});
+export default MenuItem;
+//# sourceMappingURL=MenuItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../../../src/components/Menu/components/MenuItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,QAAQ,IAAI,UAAU,EAAE,MAAM,SAAS,CAAC;AAGjD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,SAAS,MAAM,aAAa,CAAC;AAOpC,MAAM,QAAQ,GAAG,UAAU,CACzB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAgB,EAAE;IAClE,MAAM,WAAW,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC9C,mBAAmB,CAAyC,GAAG,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAE5F,OAAO,CACL,KAAC,UAAU,IAAC,GAAG,EAAE,WAAW,gBAAc,SAAS,CAAC,QAAQ,CAAC,KAAM,IAAI,YACrE,KAAC,SAAS,IAAC,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,YAC5E,QAAQ,GACC,GACD,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { ReactElement, forwardRef, useImperativeHandle, useRef } from 'react';\n\nimport { MenuItem as RCMenuItem } from 'rc-menu';\nimport { MenuItemProps as RCMenuItemProps } from 'rc-menu/lib/MenuItem';\n\nimport { getString } from '../../../utils/textUtils';\nimport MenuLabel from './MenuLabel';\n\nexport interface IMenuItemProps extends RCMenuItemProps {\n  level?: number;\n  path?: string;\n}\n\nconst MenuItem = forwardRef<HTMLElement, IMenuItemProps>(\n  ({ children, itemIcon, level, path, ...rest }, ref): ReactElement => {\n    const menuItemRef = useRef<HTMLElement>(null);\n    useImperativeHandle<HTMLElement | null, HTMLElement | null>(ref, () => menuItemRef.current);\n\n    return (\n      <RCMenuItem ref={menuItemRef} aria-label={getString(children)} {...rest}>\n        <MenuLabel parentRef={menuItemRef} level={level} path={path} itemIcon={itemIcon}>\n          {children}\n        </MenuLabel>\n      </RCMenuItem>\n    );\n  },\n);\n\nexport default MenuItem;\n"]}

package/build/esm/components/Menu/components/MenuItemGroup.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { MenuItemGroupProps as RCMenuItemGroupProps } from 'rc-menu/lib/MenuItemGroup';
+export interface IMenuItemGroupProps extends RCMenuItemGroupProps {
+}
+declare const MenuItemGroup: ({ children, title, ...rest }: IMenuItemGroupProps) => ReactElement;
+export default MenuItemGroup;
+//# sourceMappingURL=MenuItemGroup.d.ts.map

package/build/esm/components/Menu/components/MenuItemGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/components/MenuItemGroup.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,kBAAkB,IAAI,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAKvF,MAAM,WAAW,mBAAoB,SAAQ,oBAAoB;CAAG;AAQpE,QAAA,MAAM,aAAa,iCAAkC,mBAAmB,KAAG,YAI1E,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/build/esm/components/Menu/components/MenuItemGroup.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MenuItemGroup as RCMenuItemGroup } from 'rc-menu';
+import { MENU_CLASS } from 'acinguiux-ds-react-base';
+import MenuLabel from './MenuLabel';
+const Title = ({ title }) => (_jsx("div", { className: `${MENU_CLASS}-group-title-content`, children: _jsx(MenuLabel, { children: title }) }));
+const MenuItemGroup = ({ children, title, ...rest }) => (_jsx(RCMenuItemGroup, { title: _jsx(Title, { title: title }), ...rest, children: children }));
+export default MenuItemGroup;
+//# sourceMappingURL=MenuItemGroup.js.map

package/build/esm/components/Menu/components/MenuItemGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemGroup.js","sourceRoot":"","sources":["../../../../../src/components/Menu/components/MenuItemGroup.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,IAAI,eAAe,EAAE,MAAM,SAAS,CAAC;AAE3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,SAAS,MAAM,aAAa,CAAC;AAIpC,MAAM,KAAK,GAAG,CAAC,EAAE,KAAK,EAAuB,EAAgB,EAAE,CAAC,CAC9D,cAAK,SAAS,EAAE,GAAG,UAAU,sBAAsB,YACjD,KAAC,SAAS,cAAE,KAAK,GAAa,GAC1B,CACP,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAuB,EAAgB,EAAE,CAAC,CACzF,KAAC,eAAe,IAAC,KAAK,EAAE,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,GAAI,KAAM,IAAI,YACtD,QAAQ,GACO,CACnB,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import React, { ReactElement } from 'react';\n\nimport { MenuItemGroup as RCMenuItemGroup } from 'rc-menu';\nimport { MenuItemGroupProps as RCMenuItemGroupProps } from 'rc-menu/lib/MenuItemGroup';\nimport { MENU_CLASS } from 'acinguiux-ds-react-base';\n\nimport MenuLabel from './MenuLabel';\n\nexport interface IMenuItemGroupProps extends RCMenuItemGroupProps {}\n\nconst Title = ({ title }: IMenuItemGroupProps): ReactElement => (\n  <div className={`${MENU_CLASS}-group-title-content`}>\n    <MenuLabel>{title}</MenuLabel>\n  </div>\n);\n\nconst MenuItemGroup = ({ children, title, ...rest }: IMenuItemGroupProps): ReactElement => (\n  <RCMenuItemGroup title={<Title title={title} />} {...rest}>\n    {children}\n  </RCMenuItemGroup>\n);\n\nexport default MenuItemGroup;\n"]}

package/build/esm/components/Menu/components/MenuLabel.d.ts

@@ -0,0 +1,11 @@
+import { RefObject, HTMLAttributes } from 'react';
+import { IMenuProps } from '../Menu.types';
+export type MenuLabelRequiredTypes = 'itemIcon' | 'className' | 'children' | 'size';
+export interface IMenuLabelProps extends Pick<IMenuProps, MenuLabelRequiredTypes>, Omit<HTMLAttributes<HTMLElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onSelect'> {
+    parentRef?: RefObject<HTMLElement>;
+    level?: number;
+    path?: string;
+}
+declare const MenuLabel: import("react").ForwardRefExoticComponent<IMenuLabelProps & import("react").RefAttributes<HTMLElement>>;
+export default MenuLabel;
+//# sourceMappingURL=MenuLabel.d.ts.map

package/build/esm/components/Menu/components/MenuLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuLabel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/components/MenuLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAML,SAAS,EAET,cAAc,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAI3C,MAAM,MAAM,sBAAsB,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAEpF,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,UAAU,EAAE,sBAAsB,CAAC,EAC9C,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,SAAS,GAAG,cAAc,GAAG,cAAc,GAAG,UAAU,CAAC;IAC7F,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,SAAS,yGAuCd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/build/esm/components/Menu/components/MenuLabel.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* Focus and key events are disabled since menu handles them internally.
+   onClick added to circumvent event propagation being blocked by tooltip. */
+import { cloneElement, forwardRef, isValidElement, useContext, } from 'react';
+import classNames from 'classnames';
+import { Positions, MENU_CLASS } from 'acinguiux-ds-react-base';
+import Tooltip from '../../Tooltip/Tooltip';
+import MenuContext from '../MenuContext';
+const MenuLabel = forwardRef(({ children, itemIcon, parentRef, level, path, className, ...rest }, ref) => {
+    const { inlineCollapsed, itemRender } = useContext(MenuContext);
+    const handleOnClick = () => {
+        if ((parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) && inlineCollapsed) {
+            parentRef.current.click();
+        }
+    };
+    const elementProps = {
+        ref,
+        className: classNames(`${MENU_CLASS}-label`, className),
+        ...rest,
+    };
+    const content = (_jsxs(_Fragment, { children: [isValidElement(itemIcon) ? _jsx("span", { className: `${MENU_CLASS}-label-icon`, children: itemIcon }) : null, children ? _jsx("span", { className: `${MENU_CLASS}-label-text`, children: children }) : null] }));
+    const element = path && children && itemRender ? (cloneElement(itemRender({ path, children: content }), elementProps)) : (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    _jsx("span", { onClick: handleOnClick, ...elementProps, children: content }));
+    if (inlineCollapsed && level === 0) {
+        return _jsx(Tooltip, { offset: 20, placement: Positions.Right, trigger: element, overlay: children });
+    }
+    return element;
+});
+export default MenuLabel;
+//# sourceMappingURL=MenuLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuLabel.js","sourceRoot":"","sources":["../../../../../src/components/Menu/components/MenuLabel.tsx"],"names":[],"mappings":";AAAA;6EAC6E;AAE7E,OAAO,EACL,YAAY,EACZ,UAAU,EACV,cAAc,EAId,UAAU,GAEX,MAAM,OAAO,CAAC;AAEf,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGhE,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAC5C,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAYzC,MAAM,SAAS,GAAG,UAAU,CAC1B,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAgB,EAAE;IACxF,MAAM,EAAE,eAAe,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAEhE,MAAM,aAAa,GAAsB,GAAG,EAAE;QAC5C,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,KAAI,eAAe,EAAE;YACzC,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG;QACnB,GAAG;QACH,SAAS,EAAE,UAAU,CAAC,GAAG,UAAU,QAAQ,EAAE,SAAS,CAAC;QACvD,GAAG,IAAI;KACR,CAAC;IAEF,MAAM,OAAO,GAAG,CACd,8BACG,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,eAAM,SAAS,EAAE,GAAG,UAAU,aAAa,YAAG,QAAQ,GAAQ,CAAC,CAAC,CAAC,IAAI,EAChG,QAAQ,CAAC,CAAC,CAAC,eAAM,SAAS,EAAE,GAAG,UAAU,aAAa,YAAG,QAAQ,GAAQ,CAAC,CAAC,CAAC,IAAI,IAChF,CACJ,CAAC;IAEF,MAAM,OAAO,GACX,IAAI,IAAI,QAAQ,IAAI,UAAU,CAAC,CAAC,CAAC,CAC/B,YAAY,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,YAAY,CAAC,CACpE,CAAC,CAAC,CAAC;IACF,0GAA0G;IAC1G,eAAM,OAAO,EAAE,aAAa,KAAM,YAAY,YAC3C,OAAO,GACH,CACR,CAAC;IAEJ,IAAI,eAAe,IAAI,KAAK,KAAK,CAAC,EAAE;QAClC,OAAO,KAAC,OAAO,IAAC,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,GAAI,CAAC;KACjG;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC","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  MouseEventHandler,\n  ReactElement,\n  RefObject,\n  useContext,\n  HTMLAttributes,\n} from 'react';\n\nimport classNames from 'classnames';\nimport { Positions, MENU_CLASS } from 'acinguiux-ds-react-base';\n\nimport { IMenuProps } from '../Menu.types';\nimport Tooltip from '../../Tooltip/Tooltip';\nimport MenuContext from '../MenuContext';\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  level?: number;\n  path?: string;\n}\n\nconst MenuLabel = forwardRef<HTMLElement, IMenuLabelProps>(\n  ({ children, itemIcon, parentRef, level, path, className, ...rest }, ref): ReactElement => {\n    const { inlineCollapsed, itemRender } = useContext(MenuContext);\n\n    const handleOnClick: MouseEventHandler = () => {\n      if (parentRef?.current && inlineCollapsed) {\n        parentRef.current.click();\n      }\n    };\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> : null}\n        {children ? <span className={`${MENU_CLASS}-label-text`}>{children}</span> : null}\n      </>\n    );\n\n    const element =\n      path && children && itemRender ? (\n        cloneElement(itemRender({ path, children: content }), elementProps)\n      ) : (\n        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n        <span onClick={handleOnClick} {...elementProps}>\n          {content}\n        </span>\n      );\n\n    if (inlineCollapsed && level === 0) {\n      return <Tooltip offset={20} placement={Positions.Right} trigger={element} overlay={children} />;\n    }\n\n    return element;\n  },\n);\n\nexport default MenuLabel;\n"]}

package/build/esm/components/Menu/components/SubMenu.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { SubMenuProps } from 'rc-menu';
+export interface ISubMenuProps extends SubMenuProps {
+    level?: number;
+}
+declare const SubMenu: ({ title, itemIcon, level, ...rest }: ISubMenuProps) => ReactElement;
+export default SubMenu;
+//# sourceMappingURL=SubMenu.d.ts.map

package/build/esm/components/Menu/components/SubMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/components/SubMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAsB,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAwB,YAAY,EAAE,MAAM,SAAS,CAAC;AAO7D,MAAM,WAAW,aAAc,SAAQ,YAAY;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmBD,QAAA,MAAM,OAAO,wCAAyC,aAAa,KAAG,YAOrE,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/build/esm/components/Menu/components/SubMenu.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+import { useContext, useRef } from 'react';
+import { SubMenu as RCSubMenu } from 'rc-menu';
+import { MENU_CLASS } from 'acinguiux-ds-react-base';
+import { ChevronSmallDown } from '../../Icon/components';
+import MenuContext from '../MenuContext';
+import MenuLabel from './MenuLabel';
+const Title = ({ title, itemIcon, level }) => {
+    const titleRef = useRef(null);
+    // const handleOnClick: MouseEventHandler<HTMLDivElement> = () => {
+    //   console.log('sub-menu press');
+    // };
+    return (_jsxs("div", { ref: titleRef, className: `${MENU_CLASS}-submenu-title-content`, children: [_jsx(MenuLabel, { level: level, parentRef: titleRef, itemIcon: itemIcon, children: title }), _jsx(ChevronSmallDown, { className: `${MENU_CLASS}-submenu-expand-icon` })] }));
+};
+const SubMenu = ({ title, itemIcon, level, ...rest }) => {
+    const { mode } = useContext(MenuContext);
+    const popupOffset = mode === 'horizontal' ? [0, 4] : [8, 0];
+    return (_jsx(RCSubMenu, { popupOffset: popupOffset, title: _jsx(Title, { title: title, level: level, itemIcon: itemIcon }), ...rest }));
+};
+export default SubMenu;
+//# sourceMappingURL=SubMenu.js.map

package/build/esm/components/Menu/components/SubMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenu.js","sourceRoot":"","sources":["../../../../../src/components/Menu/components/SubMenu.tsx"],"names":[],"mappings":";AAAA,mGAAmG;AACnG,OAAO,EAAgB,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAgB,MAAM,SAAS,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,SAAS,MAAM,aAAa,CAAC;AAMpC,MAAM,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAiB,EAAgB,EAAE;IACxE,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE9C,mEAAmE;IACnE,mCAAmC;IACnC,KAAK;IAEL,OAAO,CACL,eAAK,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,UAAU,wBAAwB,aAClE,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,YAC7D,KAAK,GACI,EACZ,KAAC,gBAAgB,IAAC,SAAS,EAAE,GAAG,UAAU,sBAAsB,GAAI,IAChE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAiB,EAAgB,EAAE;IACnF,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,WAAW,GAAG,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAE5D,OAAO,CACL,KAAC,SAAS,IAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,KAAM,IAAI,GAAI,CACpH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\nimport { ReactElement, useContext, useRef } from 'react';\n\nimport { SubMenu as RCSubMenu, SubMenuProps } from 'rc-menu';\nimport { MENU_CLASS } from 'acinguiux-ds-react-base';\n\nimport { ChevronSmallDown } from '../../Icon/components';\nimport MenuContext from '../MenuContext';\nimport MenuLabel from './MenuLabel';\n\nexport interface ISubMenuProps extends SubMenuProps {\n  level?: number;\n}\n\nconst Title = ({ title, itemIcon, level }: ISubMenuProps): ReactElement => {\n  const titleRef = useRef<HTMLDivElement>(null);\n\n  // const handleOnClick: MouseEventHandler<HTMLDivElement> = () => {\n  //   console.log('sub-menu press');\n  // };\n\n  return (\n    <div ref={titleRef} className={`${MENU_CLASS}-submenu-title-content`}>\n      <MenuLabel level={level} parentRef={titleRef} itemIcon={itemIcon}>\n        {title}\n      </MenuLabel>\n      <ChevronSmallDown className={`${MENU_CLASS}-submenu-expand-icon`} />\n    </div>\n  );\n};\n\nconst SubMenu = ({ title, itemIcon, level, ...rest }: ISubMenuProps): ReactElement => {\n  const { mode } = useContext(MenuContext);\n  const popupOffset = mode === 'horizontal' ? [0, 4] : [8, 0];\n\n  return (\n    <RCSubMenu popupOffset={popupOffset} title={<Title title={title} level={level} itemIcon={itemIcon} />} {...rest} />\n  );\n};\n\nexport default SubMenu;\n"]}

package/build/esm/components/Menu/styles/groupMenuItem.styles.d.ts

@@ -0,0 +1,3 @@
+import { StyledMenuProps } from '../Menu.types';
+export declare const groupMenuItemStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<StyledMenuProps, import("styled-components").DefaultTheme>>;
+//# sourceMappingURL=groupMenuItem.styles.d.ts.map

package/build/esm/components/Menu/styles/groupMenuItem.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"groupMenuItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/styles/groupMenuItem.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,eAAO,MAAM,kBAAkB,4JAmE9B,CAAC"}

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

@@ -0,0 +1,71 @@
+import { css } from 'styled-components';
+import { Sizes, MENU_CLASS } from 'acinguiux-ds-react-base';
+import { menuConsts } from '../Menu.consts';
+export const groupMenuItemStyle = css `
+  ${({ theme, size, mode }) => {
+    const padding = `${menuConsts[size].padding}px`;
+    const indent = `${menuConsts[size].indent}px`;
+    const subMenuGroupIndent = `${menuConsts[size].indent * 2}px`;
+    return css `
+      .${MENU_CLASS}-item-group {
+        .${MENU_CLASS}-item-group-title {
+          ${(size === Sizes.Small || size === Sizes.Medium) && theme.label.small.normal};
+          ${size === Sizes.Large && theme.label.medium.normal};
+          padding: ${padding} ${indent};
+          color: ${theme.text.onSurface.subtle};
+          text-transform: uppercase;
+        }
+
+        .${MENU_CLASS}-group-title-content {
+          padding-bottom: 4px;
+          margin-bottom: -5px;
+          border-bottom: 1px solid ${theme.border.medium};
+        }
+
+        /* Horizontal */
+        ${mode === 'horizontal' &&
+        css `
+          .${MENU_CLASS}-item-group-list {
+            display: flex;
+            flex-direction: row;
+            align-items: stretch;
+          }
+        `}
+      }
+
+      /* Inline */
+      ${mode === 'inline' &&
+        css `
+        .${MENU_CLASS}-submenu .${MENU_CLASS}-item-group {
+          .${MENU_CLASS}-item-group-title {
+            padding-left: ${subMenuGroupIndent};
+          }
+
+          &.${MENU_CLASS}-submenu-open
+            > .${MENU_CLASS}-submenu-title
+            > .${MENU_CLASS}-submenu-title-content
+            > .${MENU_CLASS}-submenu-expand-icon {
+            transform: rotate(180deg);
+          }
+        }
+      `}
+
+      /* Popup */
+      &.${MENU_CLASS}-submenu {
+        /* Horizontal */
+        ${mode === 'horizontal' &&
+        css `
+          .${MENU_CLASS}-item-group .${MENU_CLASS}-item-group-list {
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+          }
+          .${MENU_CLASS}-submenu-expand-icon {
+            transform: rotate(-90deg);
+          }
+        `}
+      }
+    `;
+}}
+`;
+//# sourceMappingURL=groupMenuItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"groupMenuItem.styles.js","sourceRoot":"","sources":["../../../../../src/components/Menu/styles/groupMenuItem.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAiB;IAClD,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1B,MAAM,OAAO,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC;IAChD,MAAM,MAAM,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC;IAC9C,MAAM,kBAAkB,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC;IAE9D,OAAO,GAAG,CAAA;SACL,UAAU;WACR,UAAU;YACT,CAAC,IAAI,KAAK,KAAK,CAAC,KAAK,IAAI,IAAI,KAAK,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM;YAC3E,IAAI,KAAK,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;qBACxC,OAAO,IAAI,MAAM;mBACnB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM;;;;WAInC,UAAU;;;qCAGgB,KAAK,CAAC,MAAM,CAAC,MAAM;;;;UAI9C,IAAI,KAAK,YAAY;QACvB,GAAG,CAAA;aACE,UAAU;;;;;SAKd;;;;QAID,IAAI,KAAK,QAAQ;QACnB,GAAG,CAAA;WACE,UAAU,aAAa,UAAU;aAC/B,UAAU;4BACK,kBAAkB;;;cAGhC,UAAU;iBACP,UAAU;iBACV,UAAU;iBACV,UAAU;;;;OAIpB;;;UAGG,UAAU;;UAEV,IAAI,KAAK,YAAY;QACvB,GAAG,CAAA;aACE,UAAU,gBAAgB,UAAU;;;;;aAKpC,UAAU;;;SAGd;;KAEJ,CAAC;AACJ,CAAC;CACF,CAAC","sourcesContent":["import { css } from 'styled-components';\nimport { Sizes, MENU_CLASS } from 'acinguiux-ds-react-base';\n\nimport { menuConsts } from '../Menu.consts';\nimport { StyledMenuProps } from '../Menu.types';\n\nexport const groupMenuItemStyle = css<StyledMenuProps>`\n  ${({ theme, size, mode }) => {\n    const padding = `${menuConsts[size].padding}px`;\n    const indent = `${menuConsts[size].indent}px`;\n    const subMenuGroupIndent = `${menuConsts[size].indent * 2}px`;\n\n    return css`\n      .${MENU_CLASS}-item-group {\n        .${MENU_CLASS}-item-group-title {\n          ${(size === Sizes.Small || size === Sizes.Medium) && theme.label.small.normal};\n          ${size === Sizes.Large && theme.label.medium.normal};\n          padding: ${padding} ${indent};\n          color: ${theme.text.onSurface.subtle};\n          text-transform: uppercase;\n        }\n\n        .${MENU_CLASS}-group-title-content {\n          padding-bottom: 4px;\n          margin-bottom: -5px;\n          border-bottom: 1px solid ${theme.border.medium};\n        }\n\n        /* Horizontal */\n        ${mode === 'horizontal' &&\n        css`\n          .${MENU_CLASS}-item-group-list {\n            display: flex;\n            flex-direction: row;\n            align-items: stretch;\n          }\n        `}\n      }\n\n      /* Inline */\n      ${mode === 'inline' &&\n      css`\n        .${MENU_CLASS}-submenu .${MENU_CLASS}-item-group {\n          .${MENU_CLASS}-item-group-title {\n            padding-left: ${subMenuGroupIndent};\n          }\n\n          &.${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      `}\n\n      /* Popup */\n      &.${MENU_CLASS}-submenu {\n        /* Horizontal */\n        ${mode === 'horizontal' &&\n        css`\n          .${MENU_CLASS}-item-group .${MENU_CLASS}-item-group-list {\n            display: flex;\n            flex-direction: column;\n            align-items: stretch;\n          }\n          .${MENU_CLASS}-submenu-expand-icon {\n            transform: rotate(-90deg);\n          }\n        `}\n      }\n    `;\n  }}\n`;\n"]}

package/build/esm/components/Menu/styles/indicator.styles.d.ts

@@ -0,0 +1,7 @@
+import { StyledMenuProps } from '../Menu.types';
+export declare const indicatorStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<StyledMenuProps, import("styled-components").DefaultTheme>>;
+export declare const indicatorRightStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<StyledMenuProps, import("styled-components").DefaultTheme>>;
+export declare const indicatorLeftStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<StyledMenuProps, import("styled-components").DefaultTheme>>;
+export declare const indicatorBottomStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<StyledMenuProps, import("styled-components").DefaultTheme>>;
+export declare const indicatorPositionStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<StyledMenuProps, import("styled-components").DefaultTheme>>;
+//# sourceMappingURL=indicator.styles.d.ts.map

package/build/esm/components/Menu/styles/indicator.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"indicator.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/styles/indicator.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,eAAO,MAAM,cAAc,4JAO1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,4JAM/B,CAAC;AAEF,eAAO,MAAM,kBAAkB,4JAM9B,CAAC;AAEF,eAAO,MAAM,oBAAoB,4JAMhC,CAAC;AAEF,eAAO,MAAM,sBAAsB,4JAQlC,CAAC"}

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

@@ -0,0 +1,39 @@
+import { css } from 'styled-components';
+export const indicatorStyle = css `
+  ${({ $emphasis, theme }) => css `
+    content: '';
+    position: absolute;
+    display: block;
+    background-color: ${$emphasis ? theme.accent.primary.strong : theme.text.onBase.subtle};
+  `}
+`;
+export const indicatorRightStyle = css `
+  ${indicatorStyle};
+  width: 3px;
+  right: 0;
+  top: 0;
+  bottom: 0;
+`;
+export const indicatorLeftStyle = css `
+  ${indicatorStyle};
+  width: 3px;
+  left: 0;
+  top: 0;
+  bottom: 0;
+`;
+export const indicatorBottomStyle = css `
+  ${indicatorStyle};
+  height: 3px;
+  right: 0;
+  left: 0;
+  bottom: 0;
+`;
+export const indicatorPositionStyle = css `
+  ${indicatorStyle};
+
+  ${({ $indicatorPosition }) => ({
+    right: indicatorRightStyle,
+    left: indicatorLeftStyle,
+}[$indicatorPosition])}
+`;
+//# sourceMappingURL=indicator.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"indicator.styles.js","sourceRoot":"","sources":["../../../../../src/components/Menu/styles/indicator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAIxC,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAiB;IAC9C,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;wBAIT,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;GACvF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAiB;IACnD,cAAc;;;;;CAKjB,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAiB;IAClD,cAAc;;;;;CAKjB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAiB;IACpD,cAAc;;;;;CAKjB,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAiB;IACtD,cAAc;;IAEd,CAAC,EAAE,kBAAkB,EAAE,EAAE,EAAE,CAC3B,CAAC;IACC,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,kBAAkB;CACzB,CAAC,kBAAkB,CAAC,CAAC;CACzB,CAAC","sourcesContent":["import { css } from 'styled-components';\n\nimport { StyledMenuProps } from '../Menu.types';\n\nexport const indicatorStyle = css<StyledMenuProps>`\n  ${({ $emphasis, theme }) => css`\n    content: '';\n    position: absolute;\n    display: block;\n    background-color: ${$emphasis ? theme.accent.primary.strong : theme.text.onBase.subtle};\n  `}\n`;\n\nexport const indicatorRightStyle = css<StyledMenuProps>`\n  ${indicatorStyle};\n  width: 3px;\n  right: 0;\n  top: 0;\n  bottom: 0;\n`;\n\nexport const indicatorLeftStyle = css<StyledMenuProps>`\n  ${indicatorStyle};\n  width: 3px;\n  left: 0;\n  top: 0;\n  bottom: 0;\n`;\n\nexport const indicatorBottomStyle = css<StyledMenuProps>`\n  ${indicatorStyle};\n  height: 3px;\n  right: 0;\n  left: 0;\n  bottom: 0;\n`;\n\nexport const indicatorPositionStyle = css<StyledMenuProps>`\n  ${indicatorStyle};\n\n  ${({ $indicatorPosition }) =>\n    ({\n      right: indicatorRightStyle,\n      left: indicatorLeftStyle,\n    }[$indicatorPosition])}\n`;\n"]}

package/build/esm/components/Menu/styles/menuItem.styles.d.ts

@@ -0,0 +1,3 @@
+import { StyledMenuProps } from '../Menu.types';
+export declare const menuItemStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<StyledMenuProps, import("styled-components").DefaultTheme>>;
+//# sourceMappingURL=menuItem.styles.d.ts.map

package/build/esm/components/Menu/styles/menuItem.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menuItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/styles/menuItem.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGhD,eAAO,MAAM,aAAa,4JAuFzB,CAAC"}

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

@@ -0,0 +1,92 @@
+import { css } from 'styled-components';
+import { MENU_CLASS } from 'acinguiux-ds-react-base';
+import { menuConsts } from '../Menu.consts';
+import { indicatorBottomStyle, indicatorPositionStyle } from './indicator.styles';
+export const menuItemStyle = css `
+  ${({ theme, size }) => {
+    const verticalPadding = `${menuConsts[size].padding}px`;
+    const horizontalPadding = `${menuConsts[size].indent}px`;
+    return css `
+      .${MENU_CLASS}-item {
+        cursor: pointer;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+        align-items: stretch;
+        padding: ${verticalPadding} ${horizontalPadding};
+
+        /* Disabled */
+        &.${MENU_CLASS}-item-disabled {
+          &, .${MENU_CLASS}-label {
+            color: ${theme.text.onSurface.inactive};
+            cursor: not-allowed;
+          }
+        }
+
+        &.${MENU_CLASS}-item-active:not(.${MENU_CLASS}-item-selected):not(.${MENU_CLASS}-item-disabled) {
+          .${MENU_CLASS}-label {
+            background-color: ${theme.focus.extraSubtle};
+          }
+
+          /* Span focus */
+          &:focus-visible {
+            .${MENU_CLASS}-label {
+              background-color: transparent;
+            }
+          }
+
+          /* Anchor focus */
+          .${MENU_CLASS}-label:focus-visible {
+            background-color: transparent;
+          }
+        }
+
+        /* Span focus */
+        &:focus-visible {
+          outline: none;
+
+          .${MENU_CLASS}-label {
+            border-radius: 2px;
+            outline: 3px solid ${theme.focus.medium};
+          }
+        }
+
+        /* Anchor focus */
+        .${MENU_CLASS}-label:focus-visible {
+          border-radius: 2px;
+          outline: 3px solid ${theme.focus.medium};
+        }
+      }
+
+      /* Vertical and horizontal popup  */
+      .${MENU_CLASS}-vertical .${MENU_CLASS}-item.${MENU_CLASS}-item-selected {
+        background-color: ${theme.background.section};
+
+        &::after {
+          ${indicatorPositionStyle}
+        }
+      }
+
+      /* Inline and vertical top level */
+      &.${MENU_CLASS}-inline, &.${MENU_CLASS}-vertical {
+        .${MENU_CLASS}-item.${MENU_CLASS}-item-selected {
+          background-color: ${theme.background.section};
+
+          &::after {
+            ${indicatorPositionStyle}
+          }
+        }
+      }
+
+      /* Horizontal */
+      &.${MENU_CLASS}-horizontal .${MENU_CLASS}-item.${MENU_CLASS}-item-selected {
+        background-color: ${theme.background.section};
+
+        &::after {
+          ${indicatorBottomStyle}
+        }
+      }
+    `;
+}}
+`;
+//# sourceMappingURL=menuItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menuItem.styles.js","sourceRoot":"","sources":["../../../../../src/components/Menu/styles/menuItem.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAElF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAiB;IAC7C,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACpB,MAAM,eAAe,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC;IACxD,MAAM,iBAAiB,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC;IAEzD,OAAO,GAAG,CAAA;SACL,UAAU;;;;;;mBAMA,eAAe,IAAI,iBAAiB;;;YAG3C,UAAU;gBACN,UAAU;qBACL,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ;;;;;YAKtC,UAAU,qBAAqB,UAAU,wBAAwB,UAAU;aAC1E,UAAU;gCACS,KAAK,CAAC,KAAK,CAAC,WAAW;;;;;eAKxC,UAAU;;;;;;aAMZ,UAAU;;;;;;;;;aASV,UAAU;;iCAEU,KAAK,CAAC,KAAK,CAAC,MAAM;;;;;WAKxC,UAAU;;+BAEU,KAAK,CAAC,KAAK,CAAC,MAAM;;;;;SAKxC,UAAU,cAAc,UAAU,SAAS,UAAU;4BAClC,KAAK,CAAC,UAAU,CAAC,OAAO;;;YAGxC,sBAAsB;;;;;UAKxB,UAAU,cAAc,UAAU;WACjC,UAAU,SAAS,UAAU;8BACV,KAAK,CAAC,UAAU,CAAC,OAAO;;;cAGxC,sBAAsB;;;;;;UAM1B,UAAU,gBAAgB,UAAU,SAAS,UAAU;4BACrC,KAAK,CAAC,UAAU,CAAC,OAAO;;;YAGxC,oBAAoB;;;KAG3B,CAAC;AACJ,CAAC;CACF,CAAC","sourcesContent":["import { css } from 'styled-components';\nimport { MENU_CLASS } from 'acinguiux-ds-react-base';\n\nimport { menuConsts } from '../Menu.consts';\nimport { StyledMenuProps } from '../Menu.types';\nimport { indicatorBottomStyle, indicatorPositionStyle } from './indicator.styles';\n\nexport const menuItemStyle = css<StyledMenuProps>`\n  ${({ theme, size }) => {\n    const verticalPadding = `${menuConsts[size].padding}px`;\n    const horizontalPadding = `${menuConsts[size].indent}px`;\n\n    return css`\n      .${MENU_CLASS}-item {\n        cursor: pointer;\n        display: flex;\n        position: relative;\n        justify-content: space-between;\n        align-items: stretch;\n        padding: ${verticalPadding} ${horizontalPadding};\n\n        /* Disabled */\n        &.${MENU_CLASS}-item-disabled {\n          &, .${MENU_CLASS}-label {\n            color: ${theme.text.onSurface.inactive};\n            cursor: not-allowed;\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: ${theme.focus.extraSubtle};\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        /* Span focus */\n        &:focus-visible {\n          outline: none;\n\n          .${MENU_CLASS}-label {\n            border-radius: 2px;\n            outline: 3px solid ${theme.focus.medium};\n          }\n        }\n\n        /* Anchor focus */\n        .${MENU_CLASS}-label:focus-visible {\n          border-radius: 2px;\n          outline: 3px solid ${theme.focus.medium};\n        }\n      }\n\n      /* Vertical and horizontal popup  */\n      .${MENU_CLASS}-vertical .${MENU_CLASS}-item.${MENU_CLASS}-item-selected {\n        background-color: ${theme.background.section};\n\n        &::after {\n          ${indicatorPositionStyle}\n        }\n      }\n\n      /* Inline and vertical top level */\n      &.${MENU_CLASS}-inline, &.${MENU_CLASS}-vertical {\n        .${MENU_CLASS}-item.${MENU_CLASS}-item-selected {\n          background-color: ${theme.background.section};\n\n          &::after {\n            ${indicatorPositionStyle}\n          }\n        }\n      }\n\n      /* Horizontal */\n      &.${MENU_CLASS}-horizontal .${MENU_CLASS}-item.${MENU_CLASS}-item-selected {\n        background-color: ${theme.background.section};\n\n        &::after {\n          ${indicatorBottomStyle}\n        }\n      }\n    `;\n  }}\n`;\n"]}

package/build/esm/components/Menu/styles/menuLabel.styles.d.ts

@@ -0,0 +1,3 @@
+import { StyledMenuProps } from '../Menu.types';
+export declare const menuLabelStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<StyledMenuProps, import("styled-components").DefaultTheme>>;
+//# sourceMappingURL=menuLabel.styles.d.ts.map

package/build/esm/components/Menu/styles/menuLabel.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menuLabel.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/styles/menuLabel.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,eAAO,MAAM,cAAc,4JAmF1B,CAAC"}

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

@@ -0,0 +1,87 @@
+import { css } from 'styled-components';
+import { MENU_CLASS } from 'acinguiux-ds-react-base';
+import { menuConsts } from '../Menu.consts';
+export const menuLabelStyle = css `
+  ${({ theme, size, inlineCollapsed }) => {
+    const iconSize = `${menuConsts[size].iconSize}px`;
+    const gap = `${menuConsts[size].gap}px`;
+    const iconContainerWidth = `${menuConsts[size].iconContainer.width}px`;
+    const iconContainerHeight = `${menuConsts[size].iconContainer.height}px`;
+    const padding = `${menuConsts[size].padding - 4}px`;
+    return css `
+      .${MENU_CLASS}-label {
+        display: flex;
+        align-items: flex-start;
+        gap: ${gap};
+        border-radius: 2px;
+        padding: ${padding};
+        margin: -${padding};
+        transition: background-color 0.3s ease-out;
+        flex-grow: 1;
+        min-width: 0;
+        color: ${theme.text.onSurface.strong};
+        text-decoration: none;
+
+        .${MENU_CLASS}-label-text {
+          transition: opacity 0.3s ease-out;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+
+        .${MENU_CLASS}-label-icon {
+          min-width: ${iconContainerWidth};
+          max-height: ${iconContainerHeight};
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          > svg {
+            display: block;
+            width: ${iconSize};
+            height: ${iconSize};
+          }
+        }
+      }
+
+      /* Horizontal */
+      &.${MENU_CLASS}-horizontal .${MENU_CLASS}-label {
+        align-items: center;
+
+        .${MENU_CLASS}-label-icon {
+          margin-left: -2px;
+          min-width: ${iconSize};
+        }
+      }
+
+      /* Top level */
+      &.${MENU_CLASS} {
+        > .${MENU_CLASS}-submenu
+          > .${MENU_CLASS}-submenu-title
+          > .${MENU_CLASS}-submenu-title-content,
+          > .${MENU_CLASS}-item {
+          > .${MENU_CLASS}-label > .${MENU_CLASS}-label-text {
+            white-space: nowrap;
+          }
+        }
+      }
+
+      ${inlineCollapsed &&
+        css `
+        &.${MENU_CLASS}-inline-collapsed {
+          > .${MENU_CLASS}-submenu
+            > .${MENU_CLASS}-submenu-title
+            > .${MENU_CLASS}-submenu-title-content,
+            > .${MENU_CLASS}-item {
+            > .${MENU_CLASS}-label > .${MENU_CLASS}-label-text {
+              opacity: 0;
+              text-overflow: clip;
+              white-space: nowrap;
+            }
+          }
+        }
+      `}
+    `;
+}}
+`;
+//# sourceMappingURL=menuLabel.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menuLabel.styles.js","sourceRoot":"","sources":["../../../../../src/components/Menu/styles/menuLabel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAiB;IAC9C,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE,EAAE,EAAE;IACrC,MAAM,QAAQ,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC;IAClD,MAAM,GAAG,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC;IACxC,MAAM,kBAAkB,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IACvE,MAAM,mBAAmB,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC,MAAM,IAAI,CAAC;IACzE,MAAM,OAAO,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC;IAEpD,OAAO,GAAG,CAAA;SACL,UAAU;;;eAGJ,GAAG;;mBAEC,OAAO;mBACP,OAAO;;;;iBAIT,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM;;;WAGjC,UAAU;;;;;;;WAOV,UAAU;uBACE,kBAAkB;wBACjB,mBAAmB;;;;;;;qBAOtB,QAAQ;sBACP,QAAQ;;;;;;UAMpB,UAAU,gBAAgB,UAAU;;;WAGnC,UAAU;;uBAEE,QAAQ;;;;;UAKrB,UAAU;aACP,UAAU;eACR,UAAU;eACV,UAAU;eACV,UAAU;eACV,UAAU,aAAa,UAAU;;;;;;QAMxC,eAAe;QACjB,GAAG,CAAA;YACG,UAAU;eACP,UAAU;iBACR,UAAU;iBACV,UAAU;iBACV,UAAU;iBACV,UAAU,aAAa,UAAU;;;;;;;OAO3C;KACF,CAAC;AACJ,CAAC;CACF,CAAC","sourcesContent":["import { css } from 'styled-components';\nimport { MENU_CLASS } from 'acinguiux-ds-react-base';\n\nimport { menuConsts } from '../Menu.consts';\nimport { StyledMenuProps } from '../Menu.types';\n\nexport const menuLabelStyle = css<StyledMenuProps>`\n  ${({ theme, size, inlineCollapsed }) => {\n    const iconSize = `${menuConsts[size].iconSize}px`;\n    const gap = `${menuConsts[size].gap}px`;\n    const iconContainerWidth = `${menuConsts[size].iconContainer.width}px`;\n    const iconContainerHeight = `${menuConsts[size].iconContainer.height}px`;\n    const padding = `${menuConsts[size].padding - 4}px`;\n\n    return css`\n      .${MENU_CLASS}-label {\n        display: flex;\n        align-items: flex-start;\n        gap: ${gap};\n        border-radius: 2px;\n        padding: ${padding};\n        margin: -${padding};\n        transition: background-color 0.3s ease-out;\n        flex-grow: 1;\n        min-width: 0;\n        color: ${theme.text.onSurface.strong};\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          > .${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              opacity: 0;\n              text-overflow: clip;\n              white-space: nowrap;\n            }\n          }\n        }\n      `}\n    `;\n  }}\n`;\n"]}

package/build/esm/components/Menu/styles/motion.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const motionStyle: import("styled-components").FlattenSimpleInterpolation;
+//# sourceMappingURL=motion.styles.d.ts.map

package/build/esm/components/Menu/styles/motion.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/styles/motion.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,WAAW,wDA0HvB,CAAC"}