@skbkontur/react-ui 5.6.1-85c65.0 → 5.6.1-e2bc4.0

package/internal/Menu/Menu.js

@@ -0,0 +1,359 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import React from 'react';
+import { isBrowser } from '../../lib/globalObject.js';
+import { isKeyArrowDown, isKeyArrowUp, isKeyEnter } from '../../lib/events/keyboard/identifiers.js';
+import { MenuSeparator } from '../../components/MenuSeparator/index.js';
+import { ThemeFactory } from '../../lib/theming/ThemeFactory.js';
+import { getDOMRect } from '../../lib/dom/getDOMRect.js';
+import { responsiveLayout } from '../../components/ResponsiveLayout/decorator.js';
+import { isNonNullable } from '../../lib/utils.js';
+import { ScrollContainer } from '../../components/ScrollContainer/index.js';
+import { MenuItemDataTids } from '../../components/MenuItem/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { getRootNode, rootNode } from '../../lib/rootNode/index.js';
+import { createPropsGetter } from '../../lib/createPropsGetter.js';
+import { isInstanceOf } from '../../lib/isInstanceOf.js';
+import { CommonWrapper } from '../CommonWrapper/index.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
+import { getStyles } from './Menu.styles.js';
+import { MenuNavigation } from './MenuNavigation.js';
+import { MenuContext } from './MenuContext.js';
+export var MenuDataTids = {
+    root: 'Menu__root',
+};
+var Menu = /** @class */ (function (_super) {
+    __extends(Menu, _super);
+    function Menu() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.getProps = createPropsGetter(Menu_1.defaultProps);
+        _this.state = {
+            maxHeight: _this.getProps().maxHeight || 'none',
+            scrollState: 'top',
+            enableIconPadding: false,
+        };
+        _this.unmounted = false;
+        _this.contentRef = React.createRef();
+        _this.menuNavigation = new MenuNavigation(_this.contentRef, MenuItemDataTids.content);
+        _this.focusOnRootElement = function () {
+            var rootNode = getRootNode(_this);
+            if (isInstanceOf(rootNode, _this.globalObject.HTMLElement)) {
+                rootNode === null || rootNode === void 0 ? void 0 : rootNode.focus();
+            }
+        };
+        _this.renderHeader = function () {
+            var _a;
+            return (React.createElement("div", { className: _this.cx((_a = {},
+                    _a[_this.styles.wrapper()] = true,
+                    _a[_this.styles.headerWrapper()] = true,
+                    _a)), ref: function (el) {
+                    _this.header = el;
+                } },
+                React.createElement("div", { className: _this.styles.contentWrapper() }, _this.props.header),
+                React.createElement("div", { className: _this.styles.menuSeparatorWrapper(_this.theme) }, _this.state.scrollState !== 'top' && _this.renderMenuSeparatorWithNoMargin())));
+        };
+        _this.renderFooter = function () {
+            var _a;
+            return (React.createElement("div", { className: _this.cx((_a = {},
+                    _a[_this.styles.wrapper()] = true,
+                    _a[_this.styles.footerWrapper()] = true,
+                    _a)), ref: function (el) {
+                    _this.footer = el;
+                } },
+                React.createElement("div", { className: _this.styles.menuSeparatorWrapper(_this.theme) }, _this.state.scrollState !== 'bottom' && _this.renderMenuSeparatorWithNoMargin()),
+                React.createElement("div", { className: _this.styles.contentWrapper() }, _this.props.footer)));
+        };
+        _this.renderMenuSeparatorWithNoMargin = function () {
+            return (React.createElement(ThemeContext.Provider, { value: ThemeFactory.create({ menuSeparatorMarginY: '0' }, _this.theme) },
+                React.createElement(MenuSeparator, null)));
+        };
+        _this.setInitialSelection = function () {
+            for (var i = _this.getProps().initialSelectedItemIndex; i > -1; i--) {
+                _this.down();
+            }
+        };
+        _this.shouldRecalculateMaxHeight = function (prevProps) {
+            var _a = _this.props, header = _a.header, footer = _a.footer, children = _a.children;
+            var maxHeight = _this.getProps().maxHeight;
+            var prevMaxHeight = prevProps.maxHeight;
+            var prevHeader = prevProps.header;
+            var prevFooter = prevProps.footer;
+            var prevChildrenCount = React.Children.count(prevProps.children);
+            return (maxHeight !== prevMaxHeight ||
+                footer !== prevFooter ||
+                header !== prevHeader ||
+                React.Children.count(children) !== prevChildrenCount);
+        };
+        _this.calculateMaxHeight = function () {
+            var _a, _b;
+            var maxHeight = _this.getProps().maxHeight;
+            var parsedMaxHeight = maxHeight;
+            var rootNode = getRootNode(_this);
+            if (typeof maxHeight === 'string' && isBrowser(_this.globalObject) && rootNode) {
+                var rootElementMaxHeight = (_b = (_a = _this.globalObject).getComputedStyle) === null || _b === void 0 ? void 0 : _b.call(_a, rootNode).maxHeight;
+                if (rootElementMaxHeight) {
+                    parsedMaxHeight = parseFloat(rootElementMaxHeight);
+                }
+            }
+            var calculatedMaxHeight = typeof parsedMaxHeight === 'number'
+                ? parsedMaxHeight +
+                    ((_this.header && getDOMRect(_this.header).height) || 0) +
+                    ((_this.footer && getDOMRect(_this.footer).height) || 0)
+                : maxHeight;
+            _this.setState({
+                maxHeight: calculatedMaxHeight || 'none',
+            });
+        };
+        _this.refScrollContainer = function (scrollContainer) {
+            _this.scrollContainer = scrollContainer;
+        };
+        _this.scrollToSelected = function () {
+            var highlightedItem = _this.menuNavigation.highlightedItem;
+            if (_this.scrollContainer && highlightedItem) {
+                var rootNode_1 = getRootNode(highlightedItem);
+                // TODO: Remove this check once IF-647 is resolved
+                if (isInstanceOf(rootNode_1, _this.globalObject.HTMLElement)) {
+                    _this.scrollContainer.scrollTo(rootNode_1);
+                }
+            }
+        };
+        _this.scrollToTop = function () {
+            if (_this.scrollContainer) {
+                _this.scrollContainer.scrollToTop();
+            }
+        };
+        _this.scrollToBottom = function () {
+            if (_this.scrollContainer) {
+                _this.scrollContainer.scrollToBottom();
+            }
+        };
+        _this.scroll = function (nextIndex) {
+            var _a, _b, _c;
+            switch (nextIndex) {
+                case 0:
+                    (_a = _this.scrollToTop) === null || _a === void 0 ? void 0 : _a.call(_this);
+                    break;
+                case _this.menuNavigation.items.length - 1:
+                    (_b = _this.scrollToBottom) === null || _b === void 0 ? void 0 : _b.call(_this);
+                    break;
+                default:
+                    (_c = _this.scrollToSelected) === null || _c === void 0 ? void 0 : _c.call(_this);
+            }
+        };
+        _this.handleKeyDown = function (event) {
+            if (typeof _this.props.onKeyDown === 'function') {
+                _this.props.onKeyDown(event);
+            }
+            if (event.defaultPrevented) {
+                return;
+            }
+            if (isKeyArrowUp(event)) {
+                event.preventDefault();
+                _this.up();
+            }
+            else if (isKeyArrowDown(event)) {
+                event.preventDefault();
+                _this.down();
+            }
+            else if (isKeyEnter(event)) {
+                _this.menuNavigation.select(event);
+            }
+        };
+        _this.getStyle = function (props) {
+            if (props.align === 'right') {
+                return {
+                    maxWidth: props.width,
+                    minWidth: props.width,
+                    maxHeight: _this.state.maxHeight,
+                };
+            }
+            return {
+                width: props.width,
+                maxHeight: _this.state.maxHeight,
+            };
+        };
+        _this.handleScrollStateChange = function (scrollState) {
+            if (_this.state.scrollState !== scrollState) {
+                _this.setState({ scrollState: scrollState });
+            }
+        };
+        _this.setEnableIconPadding = function (isIconPaddingEnabled) {
+            !_this.getProps().preventIconsOffset && _this.setState({ enableIconPadding: isIconPaddingEnabled });
+        };
+        return _this;
+    }
+    Menu_1 = Menu;
+    Menu.prototype.componentWillUnmount = function () {
+        this.unmounted = true;
+    };
+    Menu.prototype.componentDidMount = function () {
+        this.setInitialSelection();
+        this.calculateMaxHeight();
+        this.unmounted = false;
+    };
+    Menu.prototype.componentDidUpdate = function (prevProps) {
+        if (this.shouldRecalculateMaxHeight(prevProps)) {
+            this.calculateMaxHeight();
+        }
+        if (prevProps.maxHeight !== this.getProps().maxHeight) {
+            this.setState({
+                maxHeight: this.props.maxHeight || 'none',
+            });
+        }
+    };
+    Menu.prototype.focus = function () {
+        this.focusOnRootElement();
+    };
+    Menu.prototype.render = function () {
+        var _this = this;
+        this.styles = getStyles(this.emotion);
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
+            return _this.renderMain();
+        }));
+    };
+    /**
+     * @public
+     */
+    Menu.prototype.up = function () {
+        this.move(-1);
+    };
+    /**
+     * @public
+     */
+    Menu.prototype.down = function () {
+        this.move(1);
+    };
+    /**
+     * @public
+     */
+    Menu.prototype.enter = function (event) {
+        var _a;
+        (_a = this.menuNavigation.highlightedItem) === null || _a === void 0 ? void 0 : _a.navigate();
+        return this.menuNavigation.select(event);
+    };
+    /**
+     * @public
+     */
+    Menu.prototype.reset = function () {
+        this.menuNavigation.reset();
+    };
+    /**
+     * @public
+     */
+    Menu.prototype.hasHighlightedItem = function () {
+        return !!this.menuNavigation.highlightedItem;
+    };
+    Menu.prototype.highlightItem = function (index) {
+        this.menuNavigation.highlightByIndex(index);
+    };
+    Menu.prototype.renderMain = function () {
+        var _a, _b;
+        if (this.isEmpty()) {
+            return null;
+        }
+        var _c = this.getProps(), hasMargin = _c.hasMargin, maxHeight = _c.maxHeight, preventWindowScroll = _c.preventWindowScroll;
+        var offsetY = {
+            top: "".concat(this.theme.scrollContainerScrollBarOffsetY),
+            right: 0,
+            bottom: "".concat(this.theme.scrollContainerScrollBarOffsetY),
+        };
+        var isMobile = this.isMobileLayout;
+        return (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, this.props),
+            React.createElement("div", { "data-tid": MenuDataTids.root, className: this.cx(getAlignRightClass(this.props, this.cx, this.styles), (_a = {},
+                    _a[this.styles.root(this.theme)] = true,
+                    _a[this.styles.hasMargin(this.theme)] = hasMargin,
+                    _a[this.styles.mobileRoot(this.theme)] = isMobile,
+                    _a[this.styles.shadow(this.theme)] = !isMobile,
+                    _a)), style: this.getStyle(this.props), id: this.props.id, onKeyDown: this.handleKeyDown, tabIndex: 0 },
+                this.props.header && this.renderHeader(),
+                React.createElement(ScrollContainer, { ref: this.refScrollContainer, maxHeight: maxHeight, preventWindowScroll: preventWindowScroll, onScrollStateChangeY: this.handleScrollStateChange, disabled: this.props.disableScrollContainer, offsetY: offsetY },
+                    React.createElement("div", { className: this.cx((_b = {},
+                            _b[this.styles.scrollContainer(this.theme)] = true,
+                            _b[this.styles.scrollContainerMobile(this.theme)] = isMobile,
+                            _b)), ref: this.contentRef },
+                        React.createElement(MenuContext.Provider, { value: {
+                                navigation: this.menuNavigation,
+                                onItemClick: this.props.onItemClick,
+                                enableIconPadding: this.state.enableIconPadding,
+                                setEnableIconPadding: this.setEnableIconPadding,
+                            } }, this.props.children))),
+                this.props.footer && this.renderFooter())));
+    };
+    Menu.prototype.move = function (step) {
+        if (this.unmounted) {
+            // NOTE workaround, because `ComboBox` call `process.nextTick` in reducer
+            return;
+        }
+        var nextIndex = this.menuNavigation.move(step, this.getProps().cyclicSelection);
+        this.scroll(nextIndex);
+    };
+    Menu.prototype.isEmpty = function () {
+        var children = this.props.children;
+        return !children || !childrenToArray(children).filter(isNonNullable).length;
+    };
+    var Menu_1;
+    Menu.__KONTUR_REACT_UI__ = 'Menu';
+    Menu.displayName = 'Menu';
+    Menu.defaultProps = {
+        align: 'left',
+        width: 'auto',
+        maxHeight: 300,
+        hasMargin: true,
+        preventWindowScroll: true,
+        cyclicSelection: true,
+        initialSelectedItemIndex: -1,
+    };
+    Menu = Menu_1 = __decorate([
+        withRenderEnvironment,
+        responsiveLayout,
+        rootNode
+    ], Menu);
+    return Menu;
+}(React.PureComponent));
+export { Menu };
+function childrenToArray(children) {
+    var ret = [];
+    // Use forEach instead of map to avoid cloning for key unifying.
+    React.Children.forEach(children, function (child) {
+        ret.push(child);
+    });
+    return ret;
+}
+var getAlignRightClass = function (props, cx, styles) {
+    if (props.align === 'right') {
+        return cx(styles.alignRight());
+    }
+    return null;
+};
+//# sourceMappingURL=Menu.js.map

package/internal/Menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../internal/Menu/Menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { CSSProperties, HTMLAttributes } from 'react';\nimport React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { isBrowser } from '../../lib/globalObject.js';\nimport { isKeyArrowDown, isKeyArrowUp, isKeyEnter } from '../../lib/events/keyboard/identifiers.js';\nimport { MenuSeparator } from '../../components/MenuSeparator/index.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport { responsiveLayout } from '../../components/ResponsiveLayout/decorator.js';\nimport { isNonNullable } from '../../lib/utils.js';\nimport type { ScrollContainerScrollStateY } from '../../components/ScrollContainer/index.js';\nimport { ScrollContainer } from '../../components/ScrollContainer/index.js';\nimport type { MenuItem } from '../../components/MenuItem/index.js';\nimport { MenuItemDataTids } from '../../components/MenuItem/index.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isInstanceOf } from '../../lib/isInstanceOf.js';\nimport type { CommonProps } from '../CommonWrapper/index.js';\nimport { CommonWrapper } from '../CommonWrapper/index.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\n\nimport { getStyles } from './Menu.styles.js';\nimport { MenuNavigation } from './MenuNavigation.js';\nimport { MenuContext } from './MenuContext.js';\n\nexport interface MenuProps extends CommonProps, Pick<HTMLAttributes<HTMLDivElement>, 'id'> {\n  children: React.ReactNode;\n  hasMargin?: boolean;\n  /**\n   * Максимальная высота применяется только для скролл контейнера\n   *\n   * Высота `header` и `footer` в нее не включены\n   */\n  maxHeight?: number | string;\n  onItemClick?: (event: React.SyntheticEvent<HTMLElement>) => void;\n  width?: number | string;\n  preventWindowScroll?: boolean;\n  /**\n   * Отключение кастомного скролла контейнера\n   */\n  disableScrollContainer?: boolean;\n  align?: 'left' | 'right';\n  /**\n   * Предотвращает выравнивание текста всех пунктов меню относительно друг друга.\n   * Так, если хотя бы у одного пункта меню есть иконка, текст в  остальных пунктах меню будет выровнен относительно пункта меню с иконкой\n   */\n  preventIconsOffset?: boolean;\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n  /**\n   * Циклический перебор айтемов меню (по-дефолтну включен)\n   */\n  cyclicSelection?: boolean;\n  initialSelectedItemIndex?: number;\n}\n\nexport interface MenuState {\n  maxHeight: number | string;\n  scrollState: ScrollContainerScrollStateY;\n  enableIconPadding: boolean;\n}\n\nexport const MenuDataTids = {\n  root: 'Menu__root',\n} as const;\n\ntype DefaultProps = Required<\n  Pick<\n    MenuProps,\n    | 'align'\n    | 'width'\n    | 'hasMargin'\n    | 'maxHeight'\n    | 'preventWindowScroll'\n    | 'cyclicSelection'\n    | 'initialSelectedItemIndex'\n  >\n>;\n\n@withRenderEnvironment\n@responsiveLayout\n@rootNode\nexport class Menu extends React.PureComponent<MenuProps, MenuState> {\n  public static __KONTUR_REACT_UI__ = 'Menu';\n  public static displayName = 'Menu';\n\n  public static defaultProps: DefaultProps = {\n    align: 'left',\n    width: 'auto',\n    maxHeight: 300,\n    hasMargin: true,\n    preventWindowScroll: true,\n    cyclicSelection: true,\n    initialSelectedItemIndex: -1,\n  };\n\n  private getProps = createPropsGetter(Menu.defaultProps);\n\n  public state: MenuState = {\n    maxHeight: this.getProps().maxHeight || 'none',\n    scrollState: 'top',\n    enableIconPadding: false,\n  };\n\n  private globalObject!: GlobalObject;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private theme!: Theme;\n  private scrollContainer: Nullable<ScrollContainer>;\n  private isMobileLayout!: boolean;\n  private unmounted = false;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private header: Nullable<HTMLDivElement>;\n  private footer: Nullable<HTMLDivElement>;\n  private contentRef = React.createRef<HTMLDivElement>();\n  private menuNavigation: MenuNavigation<MenuItem> = new MenuNavigation(this.contentRef, MenuItemDataTids.content);\n\n  public componentWillUnmount(): void {\n    this.unmounted = true;\n  }\n\n  public componentDidMount(): void {\n    this.setInitialSelection();\n    this.calculateMaxHeight();\n    this.unmounted = false;\n  }\n\n  public componentDidUpdate(prevProps: MenuProps): void {\n    if (this.shouldRecalculateMaxHeight(prevProps)) {\n      this.calculateMaxHeight();\n    }\n\n    if (prevProps.maxHeight !== this.getProps().maxHeight) {\n      this.setState({\n        maxHeight: this.props.maxHeight || 'none',\n      });\n    }\n  }\n\n  public focus(): void {\n    this.focusOnRootElement();\n  }\n\n  private focusOnRootElement = (): void => {\n    const rootNode = getRootNode(this);\n    if (isInstanceOf(rootNode, this.globalObject.HTMLElement)) {\n      rootNode?.focus();\n    }\n  };\n\n  public render() {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  /**\n   * @public\n   */\n  public up() {\n    this.move(-1);\n  }\n\n  /**\n   * @public\n   */\n  public down() {\n    this.move(1);\n  }\n\n  /**\n   * @public\n   */\n  public enter(event: React.SyntheticEvent<HTMLElement>) {\n    this.menuNavigation.highlightedItem?.navigate();\n    return this.menuNavigation.select(event);\n  }\n\n  /**\n   * @public\n   */\n  public reset(): void {\n    this.menuNavigation.reset();\n  }\n\n  /**\n   * @public\n   */\n  public hasHighlightedItem() {\n    return !!this.menuNavigation.highlightedItem;\n  }\n\n  public highlightItem(index: number) {\n    this.menuNavigation.highlightByIndex(index);\n  }\n\n  private renderMain() {\n    if (this.isEmpty()) {\n      return null;\n    }\n    const { hasMargin, maxHeight, preventWindowScroll } = this.getProps();\n\n    const offsetY = {\n      top: `${this.theme.scrollContainerScrollBarOffsetY}`,\n      right: 0,\n      bottom: `${this.theme.scrollContainerScrollBarOffsetY}`,\n    };\n\n    const isMobile = this.isMobileLayout;\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div\n          data-tid={MenuDataTids.root}\n          className={this.cx(getAlignRightClass(this.props, this.cx, this.styles), {\n            [this.styles.root(this.theme)]: true,\n            [this.styles.hasMargin(this.theme)]: hasMargin,\n            [this.styles.mobileRoot(this.theme)]: isMobile,\n            [this.styles.shadow(this.theme)]: !isMobile,\n          })}\n          style={this.getStyle(this.props)}\n          id={this.props.id}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={0}\n        >\n          {this.props.header && this.renderHeader()}\n          <ScrollContainer\n            ref={this.refScrollContainer}\n            maxHeight={maxHeight}\n            preventWindowScroll={preventWindowScroll}\n            onScrollStateChangeY={this.handleScrollStateChange}\n            disabled={this.props.disableScrollContainer}\n            offsetY={offsetY}\n          >\n            <div\n              className={this.cx({\n                [this.styles.scrollContainer(this.theme)]: true,\n                [this.styles.scrollContainerMobile(this.theme)]: isMobile,\n              })}\n              ref={this.contentRef}\n            >\n              <MenuContext.Provider\n                value={{\n                  navigation: this.menuNavigation,\n                  onItemClick: this.props.onItemClick,\n                  enableIconPadding: this.state.enableIconPadding,\n                  setEnableIconPadding: this.setEnableIconPadding,\n                }}\n              >\n                {this.props.children}\n              </MenuContext.Provider>\n            </div>\n          </ScrollContainer>\n          {this.props.footer && this.renderFooter()}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = () => {\n    return (\n      <div\n        className={this.cx({\n          [this.styles.wrapper()]: true,\n          [this.styles.headerWrapper()]: true,\n        })}\n        ref={(el) => {\n          this.header = el;\n        }}\n      >\n        <div className={this.styles.contentWrapper()}>{this.props.header}</div>\n        <div className={this.styles.menuSeparatorWrapper(this.theme)}>\n          {this.state.scrollState !== 'top' && this.renderMenuSeparatorWithNoMargin()}\n        </div>\n      </div>\n    );\n  };\n\n  private renderFooter = () => {\n    return (\n      <div\n        className={this.cx({\n          [this.styles.wrapper()]: true,\n          [this.styles.footerWrapper()]: true,\n        })}\n        ref={(el) => {\n          this.footer = el;\n        }}\n      >\n        <div className={this.styles.menuSeparatorWrapper(this.theme)}>\n          {this.state.scrollState !== 'bottom' && this.renderMenuSeparatorWithNoMargin()}\n        </div>\n        <div className={this.styles.contentWrapper()}>{this.props.footer}</div>\n      </div>\n    );\n  };\n\n  private renderMenuSeparatorWithNoMargin = () => {\n    return (\n      <ThemeContext.Provider value={ThemeFactory.create({ menuSeparatorMarginY: '0' }, this.theme)}>\n        <MenuSeparator />\n      </ThemeContext.Provider>\n    );\n  };\n\n  private setInitialSelection = () => {\n    for (let i = this.getProps().initialSelectedItemIndex; i > -1; i--) {\n      this.down();\n    }\n  };\n\n  private shouldRecalculateMaxHeight = (prevProps: MenuProps): boolean => {\n    const { header, footer, children } = this.props;\n    const maxHeight = this.getProps().maxHeight;\n    const prevMaxHeight = prevProps.maxHeight;\n    const prevHeader = prevProps.header;\n    const prevFooter = prevProps.footer;\n    const prevChildrenCount = React.Children.count(prevProps.children);\n\n    return (\n      maxHeight !== prevMaxHeight ||\n      footer !== prevFooter ||\n      header !== prevHeader ||\n      React.Children.count(children) !== prevChildrenCount\n    );\n  };\n\n  private calculateMaxHeight = () => {\n    const maxHeight = this.getProps().maxHeight;\n    let parsedMaxHeight = maxHeight;\n    const rootNode = getRootNode(this);\n\n    if (typeof maxHeight === 'string' && isBrowser(this.globalObject) && rootNode) {\n      const rootElementMaxHeight = this.globalObject.getComputedStyle?.(rootNode).maxHeight;\n\n      if (rootElementMaxHeight) {\n        parsedMaxHeight = parseFloat(rootElementMaxHeight);\n      }\n    }\n\n    const calculatedMaxHeight =\n      typeof parsedMaxHeight === 'number'\n        ? parsedMaxHeight +\n          ((this.header && getDOMRect(this.header).height) || 0) +\n          ((this.footer && getDOMRect(this.footer).height) || 0)\n        : maxHeight;\n\n    this.setState({\n      maxHeight: calculatedMaxHeight || 'none',\n    });\n  };\n\n  private refScrollContainer = (scrollContainer: Nullable<ScrollContainer>) => {\n    this.scrollContainer = scrollContainer;\n  };\n\n  private scrollToSelected = () => {\n    const highlightedItem = this.menuNavigation.highlightedItem;\n    if (this.scrollContainer && highlightedItem) {\n      const rootNode = getRootNode(highlightedItem);\n      // TODO: Remove this check once IF-647 is resolved\n      if (isInstanceOf(rootNode, this.globalObject.HTMLElement)) {\n        this.scrollContainer.scrollTo(rootNode);\n      }\n    }\n  };\n\n  private scrollToTop = () => {\n    if (this.scrollContainer) {\n      this.scrollContainer.scrollToTop();\n    }\n  };\n\n  private scrollToBottom = () => {\n    if (this.scrollContainer) {\n      this.scrollContainer.scrollToBottom();\n    }\n  };\n\n  private scroll = (nextIndex: number) => {\n    switch (nextIndex) {\n      case 0:\n        this.scrollToTop?.();\n        break;\n      case this.menuNavigation.items.length - 1:\n        this.scrollToBottom?.();\n        break;\n      default:\n        this.scrollToSelected?.();\n    }\n  };\n\n  private move(step: number) {\n    if (this.unmounted) {\n      // NOTE workaround, because `ComboBox` call `process.nextTick` in reducer\n      return;\n    }\n    const nextIndex = this.menuNavigation.move(step, this.getProps().cyclicSelection);\n    this.scroll(nextIndex);\n  }\n\n  private isEmpty() {\n    const { children } = this.props;\n    return !children || !childrenToArray(children).filter(isNonNullable).length;\n  }\n\n  private handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n    if (typeof this.props.onKeyDown === 'function') {\n      this.props.onKeyDown(event);\n    }\n\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (isKeyArrowUp(event)) {\n      event.preventDefault();\n      this.up();\n    } else if (isKeyArrowDown(event)) {\n      event.preventDefault();\n      this.down();\n    } else if (isKeyEnter(event)) {\n      this.menuNavigation.select(event);\n    }\n  };\n\n  private getStyle = (props: MenuProps): CSSProperties => {\n    if (props.align === 'right') {\n      return {\n        maxWidth: props.width,\n        minWidth: props.width,\n        maxHeight: this.state.maxHeight,\n      };\n    }\n\n    return {\n      width: props.width,\n      maxHeight: this.state.maxHeight,\n    };\n  };\n\n  private handleScrollStateChange = (scrollState: ScrollContainerScrollStateY) => {\n    if (this.state.scrollState !== scrollState) {\n      this.setState({ scrollState });\n    }\n  };\n\n  private setEnableIconPadding = (isIconPaddingEnabled: boolean) => {\n    !this.getProps().preventIconsOffset && this.setState({ enableIconPadding: isIconPaddingEnabled });\n  };\n}\n\nfunction childrenToArray(children: React.ReactNode): React.ReactNode[] {\n  const ret: React.ReactNode[] = [];\n  // Use forEach instead of map to avoid cloning for key unifying.\n  React.Children.forEach(children, (child) => {\n    ret.push(child);\n  });\n  return ret;\n}\n\nconst getAlignRightClass = (props: MenuProps, cx: Emotion['cx'], styles: ReturnType<typeof getStyles>) => {\n  if (props.align === 'right') {\n    return cx(styles.alignRight());\n  }\n\n  return null;\n};\n"]}

package/internal/Menu/Menu.styles.d.ts

@@ -1,5 +1,5 @@
-import type { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: import("../../lib/theming/Emotion").StylesGetter<{
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
     root(t: Theme): string;
     hasMargin(t: Theme): string;
     mobileRoot(t: Theme): string;

package/internal/Menu/Menu.styles.js

@@ -0,0 +1,48 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        root: function (t) {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background: ", ";\n      border-radius: ", ";\n      box-sizing: ", ";\n      outline: none;\n      padding: ", " ", ";\n    "], ["\n      background: ", ";\n      border-radius: ", ";\n      box-sizing: ", ";\n      outline: none;\n      padding: ", " ", ";\n    "])), t.menuBgDefault, t.menuBorderRadius, t.menuBoxSizing, t.menuPaddingY, t.menuPaddingX);
+        },
+        hasMargin: function (t) {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      margin: ", " 0;\n    "], ["\n      margin: ", " 0;\n    "])), t.menuOffsetY);
+        },
+        mobileRoot: function (t) {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      border-radius: 0;\n      margin: 0;\n      padding: 0 ", ";\n    "], ["\n      border-radius: 0;\n      margin: 0;\n      padding: 0 ", ";\n    "])), t.mobileMenuPaddingX);
+        },
+        alignRight: function () {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      flex: 1 1 100%;\n    "], ["\n      flex: 1 1 100%;\n    "])));
+        },
+        scrollContainer: function (t) {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding: ", " 0;\n    "], ["\n      padding: ", " 0;\n    "])), t.menuScrollContainerContentWrapperPaddingY);
+        },
+        scrollContainerMobile: function (t) {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding: ", " 0;\n    "], ["\n      padding: ", " 0;\n    "])), t.mobileMenuScrollContainerContentWrapperPaddingY);
+        },
+        shadow: function (t) {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      border: ", ";\n      box-shadow: ", ";\n    "], ["\n      border: ", ";\n      box-shadow: ", ";\n    "])), t.menuBorder, t.menuShadow);
+        },
+        wrapper: function () {
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      overflow: hidden;\n      line-height: 18px;\n      box-sizing: border-box;\n    "], ["\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      overflow: hidden;\n      line-height: 18px;\n      box-sizing: border-box;\n    "])));
+        },
+        headerWrapper: function () {
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      top: -5px;\n    "], ["\n      top: -5px;\n    "])));
+        },
+        footerWrapper: function () {
+            return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      bottom: -5px;\n    "], ["\n      bottom: -5px;\n    "])));
+        },
+        contentWrapper: function () {
+            return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding: 6px 18px 7px 8px;\n    "], ["\n      padding: 6px 18px 7px 8px;\n    "])));
+        },
+        menuSeparatorWrapper: function (t) {
+            return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      height: ", ";\n    "], ["\n      height: ", ";\n    "])), t.menuSeparatorBorderWidth);
+        },
+    });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
+//# sourceMappingURL=Menu.styles.js.map

package/internal/Menu/Menu.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.styles.js","sourceRoot":"","sources":["../../../internal/Menu/Menu.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,0MAAA,sBACM,EAAe,0BACZ,EAAkB,uBACrB,EAAe,0CAElB,EAAc,GAAI,EAAc,SAC5C,KALe,CAAC,CAAC,aAAa,EACZ,CAAC,CAAC,gBAAgB,EACrB,CAAC,CAAC,aAAa,EAElB,CAAC,CAAC,YAAY,EAAI,CAAC,CAAC,YAAY,EAC3C;QACJ,CAAC;QAED,SAAS,YAAC,CAAQ;YAChB,OAAO,GAAG,kGAAA,kBACE,EAAa,WACxB,KADW,CAAC,CAAC,WAAW,EACvB;QACJ,CAAC;QAED,UAAU,YAAC,CAAQ;YACjB,OAAO,GAAG,8IAAA,gEAGK,EAAoB,SAClC,KADc,CAAC,CAAC,kBAAkB,EACjC;QACJ,CAAC;QAED,UAAU;YACR,OAAO,GAAG,kGAAA,+BAET,KAAC;QACJ,CAAC;QAED,eAAe,YAAC,CAAQ;YACtB,OAAO,GAAG,mGAAA,mBACG,EAA2C,WACvD,KADY,CAAC,CAAC,yCAAyC,EACtD;QACJ,CAAC;QAED,qBAAqB,YAAC,CAAQ;YAC5B,OAAO,GAAG,mGAAA,mBACG,EAAiD,WAC7D,KADY,CAAC,CAAC,+CAA+C,EAC5D;QACJ,CAAC;QAED,MAAM,YAAC,CAAQ;YACb,OAAO,GAAG,yHAAA,kBACE,EAAY,uBACR,EAAY,SAC3B,KAFW,CAAC,CAAC,UAAU,EACR,CAAC,CAAC,UAAU,EAC1B;QACJ,CAAC;QAED,OAAO;YACL,OAAO,GAAG,+NAAA,4JAOT,KAAC;QACJ,CAAC;QAED,aAAa;YACX,OAAO,GAAG,6FAAA,0BAET,KAAC;QACJ,CAAC;QAED,aAAa;YACX,OAAO,GAAG,kGAAA,6BAET,KAAC;QACJ,CAAC;QAED,cAAc;YACZ,OAAO,GAAG,+GAAA,0CAET,KAAC;QACJ,CAAC;QAED,oBAAoB,YAAC,CAAQ;YAC3B,OAAO,GAAG,kGAAA,kBACE,EAA0B,SACrC,KADW,CAAC,CAAC,wBAAwB,EACpC;QACJ,CAAC;KACF,CAAC;AApF8D,CAoF9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root(t: Theme) {\n    return css`\n      background: ${t.menuBgDefault};\n      border-radius: ${t.menuBorderRadius};\n      box-sizing: ${t.menuBoxSizing};\n      outline: none;\n      padding: ${t.menuPaddingY} ${t.menuPaddingX};\n    `;\n  },\n\n  hasMargin(t: Theme) {\n    return css`\n      margin: ${t.menuOffsetY} 0;\n    `;\n  },\n\n  mobileRoot(t: Theme) {\n    return css`\n      border-radius: 0;\n      margin: 0;\n      padding: 0 ${t.mobileMenuPaddingX};\n    `;\n  },\n\n  alignRight() {\n    return css`\n      flex: 1 1 100%;\n    `;\n  },\n\n  scrollContainer(t: Theme) {\n    return css`\n      padding: ${t.menuScrollContainerContentWrapperPaddingY} 0;\n    `;\n  },\n\n  scrollContainerMobile(t: Theme) {\n    return css`\n      padding: ${t.mobileMenuScrollContainerContentWrapperPaddingY} 0;\n    `;\n  },\n\n  shadow(t: Theme) {\n    return css`\n      border: ${t.menuBorder};\n      box-shadow: ${t.menuShadow};\n    `;\n  },\n\n  wrapper() {\n    return css`\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      overflow: hidden;\n      line-height: 18px;\n      box-sizing: border-box;\n    `;\n  },\n\n  headerWrapper() {\n    return css`\n      top: -5px;\n    `;\n  },\n\n  footerWrapper() {\n    return css`\n      bottom: -5px;\n    `;\n  },\n\n  contentWrapper() {\n    return css`\n      padding: 6px 18px 7px 8px;\n    `;\n  },\n\n  menuSeparatorWrapper(t: Theme) {\n    return css`\n      height: ${t.menuSeparatorBorderWidth};\n    `;\n  },\n}));\n"]}

package/internal/Menu/MenuContext.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { MenuItem } from '../../components/MenuItem';
-import type { MenuNavigation } from './MenuNavigation';
+import type { MenuItem } from '../../components/MenuItem/index.js';
+import type { MenuNavigation } from './MenuNavigation.js';
 export interface MenuContextType {
     navigation: MenuNavigation<MenuItem> | null;
     enableIconPadding: boolean;

package/internal/Menu/MenuContext.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export var MenuContext = React.createContext({
+    navigation: null,
+    enableIconPadding: false,
+});
+//# sourceMappingURL=MenuContext.js.map

package/internal/Menu/MenuContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuContext.js","sourceRoot":"","sources":["../../../internal/Menu/MenuContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,MAAM,CAAC,IAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAkB;IAC9D,UAAU,EAAE,IAAI;IAChB,iBAAiB,EAAE,KAAK;CACzB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport type { MenuItem } from '../../components/MenuItem/index.js';\n\nimport type { MenuNavigation } from './MenuNavigation.js';\n\nexport interface MenuContextType {\n  navigation: MenuNavigation<MenuItem> | null;\n  enableIconPadding: boolean;\n  setEnableIconPadding?: (isIconPaddingEnabled: boolean) => void;\n  onItemClick?: (event: React.SyntheticEvent<HTMLElement>) => void;\n}\n\nexport const MenuContext = React.createContext<MenuContextType>({\n  navigation: null,\n  enableIconPadding: false,\n});\n"]}

package/internal/Menu/MenuNavigation.js

@@ -0,0 +1,95 @@
+var MenuNavigation = /** @class */ (function () {
+    function MenuNavigation(root, itemsContentDataTid) {
+        var _this = this;
+        this.tagsAndItems = new WeakMap();
+        this.highlightedItem = null;
+        this.items = [];
+        this.getEnabledItems = function () {
+            return _this.items.filter(function (item) { return item.isEnabled(); });
+        };
+        this.root = root;
+        this.itemsContentDataTid = itemsContentDataTid;
+    }
+    MenuNavigation.prototype.update = function () {
+        var _this = this;
+        var _a;
+        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.current) {
+            var menuItems = Array.from(this.root.current.querySelectorAll("span[data-tid=\"".concat(this.itemsContentDataTid, "\"]")));
+            this.items = menuItems.map(function (item) { return _this.tagsAndItems.get(item); }).filter(function (item) { return item !== undefined; });
+        }
+    };
+    MenuNavigation.prototype.add = function (tag, item) {
+        var _a;
+        this.tagsAndItems.set(tag, item);
+        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.current) {
+            this.update();
+        }
+        else {
+            this.items.push(item);
+        }
+    };
+    MenuNavigation.prototype.remove = function (tag) {
+        this.tagsAndItems.delete(tag);
+        this.update();
+    };
+    MenuNavigation.prototype.move = function (step, isCyclic) {
+        var enabledItems = this.getEnabledItems();
+        var currentIndex = this.highlightedItem ? enabledItems.indexOf(this.highlightedItem) : -1;
+        var minIndex = 0;
+        var maxIndex = enabledItems.length - 1;
+        var nextIndex = currentIndex + step;
+        if (nextIndex < minIndex) {
+            nextIndex = isCyclic ? maxIndex : minIndex;
+        }
+        if (nextIndex > maxIndex) {
+            nextIndex = isCyclic ? minIndex : maxIndex;
+        }
+        var nextItem = enabledItems[nextIndex];
+        this.highlight(nextItem);
+        return nextIndex;
+    };
+    MenuNavigation.prototype.highlight = function (item) {
+        var _this = this;
+        var enabledItems = this.getEnabledItems();
+        enabledItems.forEach(function (_item) {
+            if (item === _item) {
+                _item.highlight();
+                _this.highlightedItem = item;
+            }
+            else {
+                _item.unhighlight();
+            }
+        });
+    };
+    MenuNavigation.prototype.highlightByIndex = function (index) {
+        var _this = this;
+        this.items.forEach(function (_item, i) {
+            if (index === i && _item.isEnabled()) {
+                _item.highlight();
+                _this.highlightedItem = _item;
+            }
+            else {
+                _item.unhighlight();
+            }
+        });
+    };
+    MenuNavigation.prototype.unhighlight = function () {
+        var _a;
+        (_a = this.highlightedItem) === null || _a === void 0 ? void 0 : _a.unhighlight();
+        this.highlightedItem = null;
+    };
+    MenuNavigation.prototype.select = function (event) {
+        if (this.highlightedItem) {
+            this.highlightedItem.select(event);
+            return true;
+        }
+        return false;
+    };
+    MenuNavigation.prototype.reset = function () {
+        this.highlight(null);
+        this.highlightedItem = null;
+    };
+    return MenuNavigation;
+}());
+export { MenuNavigation };
+//# sourceMappingURL=MenuNavigation.js.map

package/internal/Menu/MenuNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuNavigation.js","sourceRoot":"","sources":["../../../internal/Menu/MenuNavigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { RefObject } from 'react';\nimport type React from 'react';\n\ninterface Highlightable {\n  highlight(): void;\n  unhighlight(): void;\n  select(...args: unknown[]): void;\n  isEnabled(): boolean;\n}\n\nexport class MenuNavigation<T extends Highlightable> {\n  private readonly root: RefObject<HTMLDivElement | null> | null;\n  private readonly itemsContentDataTid: string;\n  private tagsAndItems: WeakMap<Element, T> = new WeakMap();\n\n  public highlightedItem: T | null = null;\n  public items: T[] = [];\n\n  constructor(root: RefObject<HTMLDivElement | null> | null, itemsContentDataTid: string) {\n    this.root = root;\n    this.itemsContentDataTid = itemsContentDataTid;\n  }\n\n  private update() {\n    if (this.root?.current) {\n      const menuItems = Array.from(this.root.current.querySelectorAll(`span[data-tid=\"${this.itemsContentDataTid}\"]`));\n      this.items = menuItems.map((item) => this.tagsAndItems.get(item)).filter((item): item is T => item !== undefined);\n    }\n  }\n\n  public add(tag: Element, item: T) {\n    this.tagsAndItems.set(tag, item);\n    if (this.root?.current) {\n      this.update();\n    } else {\n      this.items.push(item);\n    }\n  }\n\n  public remove(tag: HTMLElement) {\n    this.tagsAndItems.delete(tag);\n    this.update();\n  }\n\n  public move(step: number, isCyclic: boolean) {\n    const enabledItems = this.getEnabledItems();\n    const currentIndex = this.highlightedItem ? enabledItems.indexOf(this.highlightedItem) : -1;\n    const minIndex = 0;\n    const maxIndex = enabledItems.length - 1;\n    let nextIndex = currentIndex + step;\n    if (nextIndex < minIndex) {\n      nextIndex = isCyclic ? maxIndex : minIndex;\n    }\n    if (nextIndex > maxIndex) {\n      nextIndex = isCyclic ? minIndex : maxIndex;\n    }\n\n    const nextItem = enabledItems[nextIndex];\n\n    this.highlight(nextItem);\n\n    return nextIndex;\n  }\n\n  public highlight(item: T | null) {\n    const enabledItems = this.getEnabledItems();\n    enabledItems.forEach((_item) => {\n      if (item === _item) {\n        _item.highlight();\n        this.highlightedItem = item;\n      } else {\n        _item.unhighlight();\n      }\n    });\n  }\n\n  public highlightByIndex(index: number) {\n    this.items.forEach((_item, i) => {\n      if (index === i && _item.isEnabled()) {\n        _item.highlight();\n        this.highlightedItem = _item;\n      } else {\n        _item.unhighlight();\n      }\n    });\n  }\n\n  public unhighlight() {\n    this.highlightedItem?.unhighlight();\n    this.highlightedItem = null;\n  }\n\n  public select(event: React.SyntheticEvent<HTMLElement>) {\n    if (this.highlightedItem) {\n      this.highlightedItem.select(event);\n      return true;\n    }\n    return false;\n  }\n\n  public reset(): void {\n    this.highlight(null);\n    this.highlightedItem = null;\n  }\n\n  private getEnabledItems = () => {\n    return this.items.filter((item) => item.isEnabled());\n  };\n}\n"]}

package/internal/Menu/index.d.ts

@@ -1 +1 @@
-export * from './Menu';
+export * from './Menu.js';

package/internal/Menu/index.js

@@ -0,0 +1,2 @@
+export * from './Menu.js';
+//# sourceMappingURL=index.js.map

package/internal/Menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../internal/Menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC","sourcesContent":["export * from './Menu.js';\n"]}

package/internal/MenuMessage/MenuMessage.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { CommonProps } from '../CommonWrapper';
-import type { SizeProp } from '../../lib/types/props';
+import type { CommonProps } from '../CommonWrapper/index.js';
+import type { SizeProp } from '../../lib/types/props.js';
 export interface MenuMessageProps extends CommonProps {
     children: React.ReactNode;
     as?: React.ElementType;
@@ -9,4 +9,4 @@ export interface MenuMessageProps extends CommonProps {
 export declare const MenuMessageDataTids: {
     readonly root: "MenuMessage__root";
 };
-export declare const MenuMessage: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<HTMLOrSVGElement, MenuMessageProps> & Record<never, never>;
+export declare const MenuMessage: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<HTMLOrSVGElement, MenuMessageProps> & Record<never, never>;