@semcore/dropdown-menu 4.35.5 → 4.38.0

package/lib/es6/DropdownMenuOld.js

@@ -0,0 +1,683 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { sstyled as _sstyled } from "@semcore/utils/lib/core/index";
+import { assignProps as _assignProps10 } from "@semcore/core";
+import { assignProps as _assignProps9 } from "@semcore/core";
+import { assignProps as _assignProps8 } from "@semcore/core";
+import { assignProps as _assignProps7 } from "@semcore/core";
+import { assignProps as _assignProps6 } from "@semcore/core";
+import { assignProps as _assignProps5 } from "@semcore/core";
+import { assignProps as _assignProps4 } from "@semcore/core";
+import { assignProps as _assignProps3 } from "@semcore/core";
+import { assignProps as _assignProps2 } from "@semcore/core";
+import { assignProps as _assignProps } from "@semcore/core";
+var _excluded = ["className"];
+import React from 'react';
+import cn from 'classnames';
+import createComponent, { Component, sstyled, Root } from '@semcore/core';
+import Dropdown from '@semcore/dropdown';
+import { Flex, useBox } from '@semcore/flex-box';
+import ScrollAreaComponent, { hideScrollBarsFromScreenReadersContext } from '@semcore/scroll-area';
+import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
+import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
+import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
+import { useFocusLock } from '@semcore/utils/lib/use/useFocusLock';
+import { hasParent } from '@semcore/utils/lib/hasParent';
+/*__reshadow-styles__:"./style/dropdown-menu-old.shadow.css"*/
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SDropdownMenuItem_b0ddj_gg_,.___SDropdownMenuList_b0ddj_gg_{position:relative;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_b0ddj_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0}.___SDropdownMenuList_b0ddj_gg_ .___SShadowHorizontal_b0ddj_gg_:after,.___SDropdownMenuList_b0ddj_gg_ .___SShadowHorizontal_b0ddj_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_b0ddj_gg_ .___SShadowHorizontal_b0ddj_gg_._position_median_b0ddj_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-left,\n        linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_b0ddj_gg_ .___SShadowHorizontal_b0ddj_gg_._position_median_b0ddj_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-right,\n        linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_b0ddj_gg_ .___SShadowHorizontal_b0ddj_gg_._position_start_b0ddj_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-left,\n        linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_b0ddj_gg_ .___SShadowHorizontal_b0ddj_gg_._position_end_b0ddj_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-right,\n        linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_b0ddj_gg_ .___SShadowVertical_b0ddj_gg_:after,.___SDropdownMenuList_b0ddj_gg_ .___SShadowVertical_b0ddj_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuList_b0ddj_gg_ .___SShadowVertical_b0ddj_gg_._position_median_b0ddj_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-top,\n        linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_b0ddj_gg_ .___SShadowVertical_b0ddj_gg_._position_median_b0ddj_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-bottom,\n        linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_b0ddj_gg_ .___SShadowVertical_b0ddj_gg_._position_start_b0ddj_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-top,\n        linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuList_b0ddj_gg_ .___SShadowVertical_b0ddj_gg_._position_end_b0ddj_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-bottom,\n        linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n      )}.___SDropdownMenuItem_b0ddj_gg_{display:flex;align-items:center;-webkit-text-decoration:none;text-decoration:none;box-sizing:border-box;cursor:pointer;width:100%;text-align:left;line-height:normal}@media (hover:hover){.___SDropdownMenuItem_b0ddj_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}}.___SDropdownMenuItem_b0ddj_gg_:focus{outline:0}.___SDropdownMenuItem_b0ddj_gg_.__selected_b0ddj_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7));box-shadow:2px 0 0 0 var(--intergalactic-control-primary-info, #008ff8) inset}@media (hover:hover){.___SDropdownMenuItem_b0ddj_gg_.__selected_b0ddj_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SDropdownMenuItem_b0ddj_gg_.__highlighted_b0ddj_gg_:not(:focus-within){z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownMenuItem_b0ddj_gg_.__disabled_b0ddj_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SDropdownMenuItem_b0ddj_gg_._size_l_b0ddj_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);padding:var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px);min-height:40px}.___SDropdownMenuItem_b0ddj_gg_._size_m_b0ddj_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);padding:calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) var(--intergalactic-spacing-2x, 8px);min-height:32px}.___SDropdownMenuItem_b0ddj_gg_.__notInteractive_b0ddj_gg_{cursor:default}@media (hover:hover){.___SDropdownMenuItem_b0ddj_gg_.__notInteractive_b0ddj_gg_:hover{background:0 0}}.___SDropdownMenuItem_b0ddj_gg_._variant_hint_b0ddj_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}@media (hover:hover){.___SDropdownMenuItem_b0ddj_gg_._variant_hint_b0ddj_gg_:hover{background:0 0}}.___SDropdownMenuItem_b0ddj_gg_._variant_title_b0ddj_gg_{font-weight:var(--intergalactic-bold, 700);cursor:default}@media (hover:hover){.___SDropdownMenuItem_b0ddj_gg_._variant_title_b0ddj_gg_:hover{background:0 0}}.___SDropdownMenuItem_b0ddj_gg_.__visible_b0ddj_gg_{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}.___SDropdownMenuItem_b0ddj_gg_.__nesting-trigger_b0ddj_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_b0ddj_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SDropdownMenuItemAddon_b0ddj_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_b0ddj_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_b0ddj_gg_,.___SDropdownMenuNesting_b0ddj_gg_._size_l_b0ddj_gg_,.___SDropdownMenuNesting_b0ddj_gg_._size_m_b0ddj_gg_{padding:0}.___SDropdownMenuNesting_b0ddj_gg_.__highlighted_b0ddj_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownNestingItem_b0ddj_gg_._size_l_b0ddj_gg_,.___SDropdownNestingItem_b0ddj_gg_._size_m_b0ddj_gg_{padding-right:0}.___SDropdownNestingItem_b0ddj_gg_ .___SDropdownMenuItem_b0ddj_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}" /*__inner_css_end__*/, "b0ddj_gg_") /*__reshadow_css_end__*/, {
+  "__SDropdownMenuItem": "___SDropdownMenuItem_b0ddj_gg_",
+  "_highlighted": "__highlighted_b0ddj_gg_",
+  "_disabled": "__disabled_b0ddj_gg_",
+  "_size_l": "_size_l_b0ddj_gg_",
+  "_size_m": "_size_m_b0ddj_gg_",
+  "_visible": "__visible_b0ddj_gg_",
+  "_nesting-trigger": "__nesting-trigger_b0ddj_gg_",
+  "__SDropdownMenuNesting": "___SDropdownMenuNesting_b0ddj_gg_",
+  "__SDropdownNestingItem": "___SDropdownNestingItem_b0ddj_gg_",
+  "__SDropdownMenuList": "___SDropdownMenuList_b0ddj_gg_",
+  "__SShadowHorizontal": "___SShadowHorizontal_b0ddj_gg_",
+  "_position_median": "_position_median_b0ddj_gg_",
+  "_position_start": "_position_start_b0ddj_gg_",
+  "_position_end": "_position_end_b0ddj_gg_",
+  "__SShadowVertical": "___SShadowVertical_b0ddj_gg_",
+  "_selected": "__selected_b0ddj_gg_",
+  "_notInteractive": "__notInteractive_b0ddj_gg_",
+  "_variant_hint": "_variant_hint_b0ddj_gg_",
+  "_variant_title": "_variant_title_b0ddj_gg_",
+  "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_b0ddj_gg_"
+});
+import { setFocus } from '@semcore/utils/lib/focus-lock/setFocus';
+import { isFocusInside } from '@semcore/utils/lib/focus-lock/isFocusInside';
+import { getFocusableIn } from '@semcore/utils/lib/focus-lock/getFocusableIn';
+import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+var ListBoxContextProvider = function ListBoxContextProvider(_ref18) {
+  var children = _ref18.children;
+  return /*#__PURE__*/React.createElement(hideScrollBarsFromScreenReadersContext.Provider, {
+    value: true
+  }, children);
+};
+var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
+  _inherits(DropdownMenuRoot, _Component);
+  var _super = _createSuper(DropdownMenuRoot);
+  function DropdownMenuRoot() {
+    var _this;
+    _classCallCheck(this, DropdownMenuRoot);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      focusLockItemIndex: null,
+      keyboardFocused: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "popperRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "triggerRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "itemProps", []);
+    _defineProperty(_assertThisInitialized(_this), "itemRefs", []);
+    _defineProperty(_assertThisInitialized(_this), "highlightedItemRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "ignoreTriggerKeyboardFocusUntil", 0);
+    _defineProperty(_assertThisInitialized(_this), "prevHighlightedIndex", null);
+    _defineProperty(_assertThisInitialized(_this), "focusTrigger", function () {
+      var trigger = _this.triggerRef.current;
+      if (!trigger) return;
+      if (isFocusInside(trigger)) return;
+      setFocus(trigger);
+    });
+    _defineProperty(_assertThisInitialized(_this), "bindHandlerKeyDown", function (place) {
+      return function (e) {
+        var amount = e.shiftKey ? 5 : 1;
+        var targetTagName = e.target.tagName;
+        var _this$asProps = _this.asProps,
+          visible = _this$asProps.visible,
+          highlightedIndex = _this$asProps.highlightedIndex,
+          placement = _this$asProps.placement;
+        if (e.key === ' ' && ['INPUT', 'TEXTAREA'].includes(targetTagName)) return;
+        if (e.key === 'Enter' && targetTagName === 'TEXTAREA') return;
+        if (place === 'popper' && (e.key === ' ' || e.key === 'Enter') && (targetTagName === 'BUTTON' || targetTagName === 'A')) return;
+        if (visible && e.key === 'Tab') {
+          var item = highlightedIndex !== null && _this.itemRefs[highlightedIndex];
+          if (item && getFocusableIn(item).length !== 0) {
+            _this.setState({
+              focusLockItemIndex: highlightedIndex
+            });
+          } else {
+            _this.handlers.highlightedIndex(null);
+          }
+          return;
+        }
+        if (e.key === 'Escape' && _this.state.focusLockItemIndex !== null) {
+          _this.setState({
+            focusLockItemIndex: null
+          });
+          return false;
+        }
+        var verticalPlacement = !placement || placement.startsWith('top') || placement.startsWith('bottom');
+        if (['ArrowDown', 'ArrowUp'].includes(e.key) && verticalPlacement) {
+          e.preventDefault();
+          _this.handlers.visible(true);
+        }
+        if (['ArrowLeft', 'ArrowRight'].includes(e.key) && !verticalPlacement) {
+          var show = e.key === 'ArrowRight' && placement.startsWith('right') || e.key === 'ArrowLeft' && placement.startsWith('left');
+          var hide = e.key === 'ArrowLeft' && placement.startsWith('right') || e.key === 'ArrowRight' && placement.startsWith('left');
+          var visibleChanged = visible && hide || !visible && show;
+          if (show) {
+            _this.handlers.visible(true);
+          } else if (hide) {
+            _this.handlers.visible(false);
+          }
+          if (visibleChanged) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+          }
+        }
+        if (e.key.startsWith('Arrow') && !_this.state.keyboardFocused) {
+          _this.setState({
+            keyboardFocused: true
+          });
+        }
+        if (['ArrowLeft', 'ArrowRight'].includes(e.key)) {
+          var _item = highlightedIndex !== null && _this.itemRefs[highlightedIndex];
+          var focusable = getFocusableIn(_item);
+          if (focusable.length > 0 && _item) {
+            var focusedIndex = focusable.indexOf(document.activeElement);
+            if (e.key === 'ArrowRight') {
+              if (focusedIndex === -1) {
+                _this.setState({
+                  focusLockItemIndex: highlightedIndex
+                });
+              }
+              var nextFocused = focusable[focusedIndex + 1];
+              if (nextFocused) {
+                e.preventDefault();
+                e.stopPropagation();
+                nextFocused.focus();
+              }
+            } else if (e.key === 'ArrowLeft') {
+              if (focusedIndex === 0) {
+                _this.setState({
+                  focusLockItemIndex: null
+                });
+              }
+              var prevFocused = focusable[focusedIndex - 1];
+              if (prevFocused) {
+                e.preventDefault();
+                e.stopPropagation();
+                prevFocused.focus();
+              }
+            }
+          }
+        }
+        switch (e.key) {
+          case 'ArrowDown':
+            {
+              if (visible) {
+                _this.moveHighlightedIndex(amount, e);
+                if (isFocusInside(_this.popperRef.current)) {
+                  _this.focusTrigger();
+                }
+                e.preventDefault();
+                e.stopPropagation();
+              }
+              break;
+            }
+          case 'ArrowUp':
+            {
+              if (visible) {
+                _this.moveHighlightedIndex(-amount, e);
+                if (isFocusInside(_this.popperRef.current)) {
+                  _this.focusTrigger();
+                }
+                e.preventDefault();
+                e.stopPropagation();
+              }
+              break;
+            }
+          case ' ':
+          case 'Enter':
+            if (_this.highlightedItemRef.current && highlightedIndex !== null) {
+              e.stopPropagation();
+              e.preventDefault();
+              _this.highlightedItemRef.current.click();
+            } else {
+              if (place === 'trigger') {
+                _this.handlers.visible(false);
+                e.preventDefault();
+              }
+            }
+            break;
+        }
+      };
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleTriggerKeyboardFocus", function () {
+      if (_this.ignoreTriggerKeyboardFocusUntil > Date.now()) return false;
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleTriggerKeyboardFocusedStateChange", function (keyboardFocused) {
+      _this.setState({
+        keyboardFocused: keyboardFocused
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleItemFocusOut", function (event) {
+      if (event.relatedTarget === _this.popperRef.current) return;
+      var focused = event.relatedTarget;
+      if (hasParent(focused, _this.popperRef.current)) {
+        _this.handlers.highlightedIndex(null);
+        _this.setState({
+          focusLockItemIndex: null
+        });
+        focused.focus();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleNestingClick", function (event) {
+      var _focusable$;
+      var itemIndex = _this.itemRefs.indexOf(event.currentTarget);
+      if (itemIndex === -1) return;
+      var focusable = getFocusableIn(event.currentTarget);
+      (_focusable$ = focusable[0]) === null || _focusable$ === void 0 ? void 0 : _focusable$.focus();
+      if (focusable[0] && _this.state.focusLockItemIndex === null) {
+        _this.setState({
+          focusLockItemIndex: null
+        });
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleNestingKeyDown", function (event) {
+      if (event.key === ' ') {
+        _this.handleNestingClick(event);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "getNestingProps", function () {
+      var size = _this.asProps.size;
+      return {
+        size: size,
+        onClick: _this.handleNestingClick,
+        onKeyDown: _this.handleNestingKeyDown
+      };
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleNestedVisibleChange", function (lastUserInteraction) {
+      if (_this.asProps.visible && _this.asProps.highlightedIndex === null && lastUserInteraction === 'keyboard') {
+        _this.handlers.highlightedIndex(0);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "getNestingTriggerProps", function () {
+      var _this$asProps2 = _this.asProps,
+        size = _this$asProps2.size,
+        visible = _this$asProps2.visible;
+      return {
+        size: size,
+        visible: visible,
+        onNestedVisibleChange: _this.handleNestedVisibleChange
+      };
+    });
+    _defineProperty(_assertThisInitialized(_this), "getNestingItemProps", function () {
+      return _this.getNestingTriggerProps();
+    });
+    _defineProperty(_assertThisInitialized(_this), "scrollToNode", function (node) {
+      if (node) {
+        _this.highlightedItemRef.current = node;
+      }
+      setTimeout(function () {
+        if (node !== null && node !== void 0 && node.scrollIntoView) {
+          if (_this.asProps.highlightedIndex !== _this.prevHighlightedIndex) {
+            _this.prevHighlightedIndex = _this.asProps.highlightedIndex;
+            node.scrollIntoView({
+              block: 'nearest',
+              inline: 'nearest'
+            });
+          }
+        }
+      }, 0);
+    });
+    return _this;
+  }
+  _createClass(DropdownMenuRoot, [{
+    key: "uncontrolledProps",
+    value: function uncontrolledProps() {
+      return {
+        highlightedIndex: null,
+        visible: null
+      };
+    }
+  }, {
+    key: "getTriggerProps",
+    value: function getTriggerProps() {
+      var _this$asProps3 = this.asProps,
+        size = _this$asProps3.size,
+        uid = _this$asProps3.uid,
+        disablePortal = _this$asProps3.disablePortal,
+        visible = _this$asProps3.visible,
+        getI18nText = _this$asProps3.getI18nText,
+        highlightedIndex = _this$asProps3.highlightedIndex;
+      return {
+        size: size,
+        id: "igc-".concat(uid, "-trigger"),
+        'aria-controls': "igc-".concat(uid, "-popper"),
+        focusHint: visible && !disablePortal ? getI18nText('triggerHint') : undefined,
+        'aria-expanded': visible ? 'true' : 'false',
+        'aria-activedescendant': visible && highlightedIndex !== null ? "igc-".concat(uid, "-option-").concat(highlightedIndex) : undefined,
+        onKeyDown: this.bindHandlerKeyDown('trigger'),
+        ref: this.triggerRef,
+        onKeyboardFocus: this.handleTriggerKeyboardFocus,
+        onKeyboardFocusedStateChange: this.handleTriggerKeyboardFocusedStateChange
+      };
+    }
+  }, {
+    key: "getListProps",
+    value: function getListProps() {
+      var _this$asProps4 = this.asProps,
+        size = _this$asProps4.size,
+        uid = _this$asProps4.uid;
+      return {
+        size: size,
+        uid: uid,
+        index: this.asProps.highlightedIndex
+      };
+    }
+  }, {
+    key: "getPopperProps",
+    value: function getPopperProps() {
+      var _this$asProps5 = this.asProps,
+        uid = _this$asProps5.uid,
+        disablePortal = _this$asProps5.disablePortal,
+        ignorePortalsStacking = _this$asProps5.ignorePortalsStacking,
+        interaction = _this$asProps5.interaction,
+        highlightedIndex = _this$asProps5.highlightedIndex;
+      return {
+        ref: this.popperRef,
+        tabIndex: 0,
+        onKeyDown: this.bindHandlerKeyDown('popper'),
+        id: "igc-".concat(uid, "-popper"),
+        disablePortal: disablePortal,
+        ignorePortalsStacking: ignorePortalsStacking,
+        focusMaster: interaction === 'click',
+        hideFocus: highlightedIndex !== null,
+        'use:role': null,
+        'use:autoFocus': false
+      };
+    }
+  }, {
+    key: "getItemProps",
+    value: function getItemProps(props, index) {
+      var _this2 = this;
+      var _this$asProps6 = this.asProps,
+        size = _this$asProps6.size,
+        highlightedIndex = _this$asProps6.highlightedIndex,
+        uid = _this$asProps6.uid;
+      var highlighted = index === highlightedIndex;
+      var ref = function ref(node) {
+        _this2.itemRefs[index] = node;
+      };
+      this.itemProps[index] = props;
+      if (highlighted) {
+        ref = function ref(node) {
+          _this2.itemRefs[index] = node;
+          _this2.scrollToNode(node);
+        };
+      }
+      return {
+        id: "igc-".concat(uid, "-option-").concat(index),
+        size: size,
+        highlighted: highlighted,
+        focusLock: this.state.focusLockItemIndex === index,
+        triggerRef: this.triggerRef,
+        ref: ref,
+        index: index,
+        handleFocusOut: this.handleItemFocusOut,
+        triggerKeyboardFocused: this.state.keyboardFocused
+      };
+    }
+  }, {
+    key: "getItemHintProps",
+    value: function getItemHintProps() {
+      var size = this.asProps.size;
+      return {
+        size: size
+      };
+    }
+  }, {
+    key: "getItemTitleProps",
+    value: function getItemTitleProps() {
+      var size = this.asProps.size;
+      return {
+        size: size
+      };
+    }
+  }, {
+    key: "moveHighlightedIndex",
+    value: function moveHighlightedIndex(amount, e) {
+      var _this$itemProps$newIn;
+      var highlightedIndex = this.asProps.highlightedIndex;
+      var itemsLastIndex = this.itemProps.length - 1;
+      var selectedIndex = this.itemProps.findIndex(function (item) {
+        return item.selected;
+      });
+      if (itemsLastIndex < 0) return;
+      if (highlightedIndex == null) {
+        if (selectedIndex !== -1) {
+          highlightedIndex = selectedIndex;
+        } else if (this.highlightedItemRef.current) {
+          highlightedIndex = this.prevHighlightedIndex;
+        } else {
+          highlightedIndex = amount < 0 ? 0 : itemsLastIndex;
+        }
+      }
+      var newIndex = highlightedIndex + amount;
+      if (newIndex < 0) {
+        newIndex = amount + itemsLastIndex + 1;
+      } else if (newIndex > itemsLastIndex) {
+        newIndex = newIndex - itemsLastIndex - 1;
+      }
+      if ((_this$itemProps$newIn = this.itemProps[newIndex]) !== null && _this$itemProps$newIn !== void 0 && _this$itemProps$newIn.disabled) {
+        this.moveHighlightedIndex(amount < 0 ? amount - 1 : amount + 1, e);
+      } else if (!this.itemProps[newIndex]) {
+        this.handlers.highlightedIndex(0, e);
+      } else {
+        this.handlers.highlightedIndex(newIndex, e);
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this3 = this;
+      var visibilityChanged = this.asProps.visible !== prevProps.visible;
+      if (visibilityChanged && prevProps.visible !== undefined) {
+        if (!this.asProps.visible) {
+          this.handlers.highlightedIndex(null);
+          this.highlightedItemRef.current = null;
+          this.ignoreTriggerKeyboardFocusUntil = Date.now() + 100;
+          if (document.activeElement === document.body || isFocusInside(this.popperRef.current)) {
+            setFocus(this.triggerRef.current);
+          }
+        }
+      }
+      if (visibilityChanged && this.asProps.visible) {
+        setTimeout(function () {
+          var selectedItemIndex = _this3.itemProps.findIndex(function (item) {
+            return item.selected;
+          });
+          if (selectedItemIndex === -1 || _this3.asProps.highlightedIndex !== null) return;
+          _this3.handlers.highlightedIndex(selectedItemIndex);
+        }, 0);
+      }
+      if ((this.state.focusLockItemIndex !== this.asProps.highlightedIndex || !this.asProps.visible) && this.state.focusLockItemIndex !== null) {
+        setTimeout(function () {
+          _this3.setState({
+            focusLockItemIndex: null
+          });
+        }, 0);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps;
+      var Children = this.asProps.Children;
+      this.itemProps = [];
+      return /*#__PURE__*/React.createElement(Dropdown, _assignProps({}, _ref), /*#__PURE__*/React.createElement(Children, null));
+    }
+  }]);
+  return DropdownMenuRoot;
+}(Component);
+_defineProperty(DropdownMenuRoot, "displayName", 'DropdownMenu');
+_defineProperty(DropdownMenuRoot, "style", style);
+_defineProperty(DropdownMenuRoot, "enhance", [uniqueIDEnhancement(), i18nEnhance(localizedMessages)]);
+_defineProperty(DropdownMenuRoot, "defaultProps", {
+  size: 'm',
+  defaultVisible: false,
+  defaultHighlightedIndex: null,
+  i18n: localizedMessages,
+  locale: 'en',
+  interaction: 'click'
+});
+function List(props) {
+  var _ref2 = arguments[0],
+    _ref11;
+  var SDropdownMenuList = ScrollAreaComponent;
+  var uid = props.uid;
+  return _ref11 = sstyled(props.styles), /*#__PURE__*/React.createElement(ListBoxContextProvider, _ref11.cn("ListBoxContextProvider", {}), /*#__PURE__*/React.createElement(SDropdownMenuList, _ref11.cn("SDropdownMenuList", _objectSpread({}, _assignProps2({
+    "tabIndex": null,
+    "role": 'menu',
+    "aria-labelledby": "igc-".concat(uid, "-trigger"),
+    "shadow": true
+  }, _ref2)))));
+}
+function Menu(props) {
+  var _ref3 = arguments[0];
+  var visible = props.visible,
+    disablePortal = props.disablePortal,
+    ignorePortalsStacking = props.ignorePortalsStacking,
+    disableEnforceFocus = props.disableEnforceFocus,
+    interaction = props.interaction,
+    autoFocus = props.autoFocus,
+    animationsDisabled = props.animationsDisabled;
+  var popperProps = {
+    visible: visible,
+    disablePortal: disablePortal,
+    ignorePortalsStacking: ignorePortalsStacking,
+    disableEnforceFocus: disableEnforceFocus,
+    interaction: interaction,
+    autoFocus: autoFocus,
+    animationsDisabled: animationsDisabled
+  };
+  return /*#__PURE__*/React.createElement(ListBoxContextProvider, null, /*#__PURE__*/React.createElement(DropdownMenu.Popper, popperProps, /*#__PURE__*/React.createElement(DropdownMenu.List, _assignProps3({}, _ref3))));
+}
+function Item(_ref19) {
+  var _ref4 = arguments[0],
+    _ref12;
+  var styles = _ref19.styles,
+    label = _ref19.label,
+    triggerRef = _ref19.triggerRef,
+    focusLock = _ref19.focusLock,
+    disabled = _ref19.disabled,
+    highlighted = _ref19.highlighted,
+    handleFocusOut = _ref19.handleFocusOut,
+    triggerKeyboardFocused = _ref19.triggerKeyboardFocused;
+  var SDropdownMenuItem = Flex;
+  var ref = React.useRef();
+  useFocusLock(ref, false, triggerRef, !focusLock || disabled, true, handleFocusOut);
+  return _ref12 = sstyled(styles), /*#__PURE__*/React.createElement(SDropdownMenuItem, _ref12.cn("SDropdownMenuItem", _objectSpread({}, _assignProps4({
+    "ref": ref,
+    "role": 'menuitem',
+    "tabIndex": -1,
+    "id": label,
+    "use:highlighted": !disabled && highlighted && triggerKeyboardFocused
+  }, _ref4))));
+}
+var NestingContext = /*#__PURE__*/React.createContext(null);
+function Nesting(_ref20) {
+  var _ref5 = arguments[0],
+    _ref13;
+  var styles = _ref20.styles,
+    disabled = _ref20.disabled;
+  var SDropdownMenuNesting = DropdownMenu.Item;
+  var contextValue = React.useMemo(function () {
+    return {
+      disabled: disabled
+    };
+  }, [disabled]);
+  return /*#__PURE__*/React.createElement(NestingContext.Provider, {
+    value: contextValue
+  }, (_ref13 = sstyled(styles), /*#__PURE__*/React.createElement(SDropdownMenuNesting, _ref13.cn("SDropdownMenuNesting", _objectSpread({}, _assignProps5({
+    "aria-haspopup": 'true'
+  }, _ref5))))));
+}
+function NestingTrigger(props) {
+  var _ref6 = arguments[0],
+    _ref14;
+  var styles = props.styles,
+    visible = props.visible,
+    onNestedVisibleChange = props.onNestedVisibleChange;
+  var SDropdownMenuItem = Flex;
+  var nestingContext = React.useContext(NestingContext);
+  var disabled = props.disabled || (nestingContext === null || nestingContext === void 0 ? void 0 : nestingContext.disabled);
+  var lastUserInteractionRef = React.useRef(undefined);
+  React.useEffect(function () {
+    onNestedVisibleChange(lastUserInteractionRef.current);
+  }, [visible]);
+  var handleMouseEvent = React.useCallback(function () {
+    lastUserInteractionRef.current = 'mouse';
+  }, []);
+  var handleKeyboardEvent = React.useCallback(function () {
+    lastUserInteractionRef.current = 'keyboard';
+  }, []);
+  React.useEffect(function () {
+    document.addEventListener('mouseover', handleMouseEvent, {
+      capture: true
+    });
+    document.addEventListener('keydown', handleKeyboardEvent, {
+      capture: true
+    });
+    return function () {
+      document.removeEventListener('mouseover', handleMouseEvent, {
+        capture: true
+      });
+      document.removeEventListener('keydown', handleKeyboardEvent, {
+        capture: true
+      });
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(NestingContext.Provider, {
+    value: null
+  }, (_ref14 = sstyled(styles), /*#__PURE__*/React.createElement(SDropdownMenuItem, _ref14.cn("SDropdownMenuItem", _objectSpread({}, _assignProps6({
+    "nesting-trigger": true,
+    "use:tabIndex": !disabled ? 0 : undefined
+  }, _ref6))))));
+}
+function NestingItem(props) {
+  var _ref7 = arguments[0],
+    _ref15;
+  var styles = props.styles;
+  var SDropdownNestingItem = NestingTrigger;
+  return _ref15 = sstyled(styles), /*#__PURE__*/React.createElement(SDropdownNestingItem, _ref15.cn("SDropdownNestingItem", _objectSpread({}, _assignProps7({
+    "use:tabIndex": -1
+  }, _ref7))));
+}
+function Addon(props) {
+  var _useBox = useBox(props, props.forwardRef),
+    _useBox2 = _slicedToArray(_useBox, 2),
+    SDropdownMenuItemAddon = _useBox2[0],
+    _useBox2$ = _useBox2[1],
+    className = _useBox2$.className,
+    other = _objectWithoutProperties(_useBox2$, _excluded);
+  var styles = sstyled(props.styles);
+  return /*#__PURE__*/React.createElement(SDropdownMenuItemAddon, _extends({
+    className: cn(styles.cn('SDropdownMenuItemAddon', props).className, className) || undefined
+  }, other));
+}
+function Hint(props) {
+  var _ref8 = arguments[0],
+    _ref16;
+  var SDropdownMenuItem = Flex;
+  return _ref16 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownMenuItem, _ref16.cn("SDropdownMenuItem", _objectSpread({}, _assignProps8({
+    "variant": 'hint'
+  }, _ref8))));
+}
+function Title(props) {
+  var _ref9 = arguments[0],
+    _ref17;
+  var SDropdownMenuItem = Flex;
+  return _ref17 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownMenuItem, _ref17.cn("SDropdownMenuItem", _objectSpread({}, _assignProps9({
+    "variant": 'title'
+  }, _ref9))));
+}
+function Trigger(_ref21) {
+  var _ref10 = arguments[0];
+  var keyboardFocused = _ref21.keyboardFocused,
+    onKeyboardFocusedStateChange = _ref21.onKeyboardFocusedStateChange;
+  React.useEffect(function () {
+    onKeyboardFocusedStateChange(keyboardFocused);
+  }, [keyboardFocused, onKeyboardFocusedStateChange]);
+  return /*#__PURE__*/React.createElement(Dropdown.Trigger, _assignProps10({
+    "aria-haspopup": 'true'
+  }, _ref10));
+}
+Trigger.enhance = [keyboardFocusEnhance(false)];
+var DropdownMenu = createComponent(DropdownMenuRoot, {
+  Trigger: Trigger,
+  Popper: Dropdown.Popper,
+  List: List,
+  Menu: Menu,
+  Item: [Item, {
+    Addon: Addon
+  }],
+  Nesting: [Nesting, {
+    Trigger: NestingTrigger,
+    Addon: Addon,
+    Item: NestingItem
+  }],
+  ItemTitle: Title,
+  ItemHint: Hint
+}, {
+  parent: [Dropdown]
+});
+export default DropdownMenu;
+//# sourceMappingURL=DropdownMenuOld.js.map