@semcore/dropdown-menu 16.1.14-prerelease.1 → 16.2.0-prerelease.0

package/lib/esm/DropdownMenu.mjs

@@ -18,43 +18,39 @@ import { forkRef } from "@semcore/core/lib/utils/ref";
 import { useUID } from "@semcore/core/lib/utils/uniqueID";
 import Dropdown, { enhance, selectedIndexContext, AbstractDropdown } from "@semcore/dropdown";
 import { Box, Flex } from "@semcore/flex-box";
-import ScrollAreaComponent, { hideScrollBarsFromScreenReadersContext } from "@semcore/scroll-area";
+import ScrollAreaComponent from "@semcore/scroll-area";
 import { Text } from "@semcore/typography";
 import React from "react";
+import { ListBoxContextProvider } from "./components/Context.mjs";
+import { VirtualList } from "./components/VirtualList.mjs";
 import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
 /*!__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SDropdownMenuList_1tow4_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;position:relative;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_1tow4_gg_ .___SBar_1tow4_gg_{z-index:3}.___SDropdownMenuList_1tow4_gg_ .___SShadowHorizontal_1tow4_gg_:after,.___SDropdownMenuList_1tow4_gg_ .___SShadowHorizontal_1tow4_gg_:before,.___SDropdownMenuList_1tow4_gg_ .___SShadowVertical_1tow4_gg_:after,.___SDropdownMenuList_1tow4_gg_ .___SShadowVertical_1tow4_gg_:before{border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuItemContainer_1tow4_gg_ .___SItemContent_1tow4_gg_:focus-visible{outline:0}.___SDropdownMenuItemContainer_1tow4_gg_.__nesting-trigger_1tow4_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_1tow4_gg_,.___SItemContentText_1tow4_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_1tow4_gg_:first-child,.___SItemContentText_1tow4_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1tow4_gg_:last-child,.___SItemContentText_1tow4_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_1tow4_gg_,.___SDropdownMenuNesting_1tow4_gg_._size_l_1tow4_gg_,.___SDropdownMenuNesting_1tow4_gg_._size_m_1tow4_gg_{padding:0}.___SDropdownMenuNesting_1tow4_gg_.__highlighted_1tow4_gg_{z-index:1;outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:-2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SDropdownNestingItem_1tow4_gg_._size_l_1tow4_gg_,.___SDropdownNestingItem_1tow4_gg_._size_m_1tow4_gg_{padding-right:0}.___SDropdownNestingItem_1tow4_gg_ .___SDropdownMenuItemContainer_1tow4_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemHint_1tow4_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}",
+    ".___SDropdownMenuList_1d1ud_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;position:relative;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_1d1ud_gg_ .___SBar_1d1ud_gg_{z-index:3}.___SDropdownMenuList_1d1ud_gg_ .___SShadowHorizontal_1d1ud_gg_:after,.___SDropdownMenuList_1d1ud_gg_ .___SShadowHorizontal_1d1ud_gg_:before,.___SDropdownMenuList_1d1ud_gg_ .___SShadowVertical_1d1ud_gg_:after,.___SDropdownMenuList_1d1ud_gg_ .___SShadowVertical_1d1ud_gg_:before{border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuItemContainer_1d1ud_gg_ .___SItemContent_1d1ud_gg_:focus-visible{outline:0}.___SDropdownMenuItemContainer_1d1ud_gg_.__nesting-trigger_1d1ud_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_1d1ud_gg_,.___SItemContentText_1d1ud_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_1d1ud_gg_:first-child,.___SItemContentText_1d1ud_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1d1ud_gg_:last-child,.___SItemContentText_1d1ud_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_1d1ud_gg_,.___SDropdownMenuNesting_1d1ud_gg_._size_l_1d1ud_gg_,.___SDropdownMenuNesting_1d1ud_gg_._size_m_1d1ud_gg_{padding:0}.___SDropdownMenuNesting_1d1ud_gg_.__highlighted_1d1ud_gg_{z-index:1;outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:-2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SDropdownNestingItem_1d1ud_gg_._size_l_1d1ud_gg_,.___SDropdownNestingItem_1d1ud_gg_._size_m_1d1ud_gg_{padding-right:0}.___SDropdownNestingItem_1d1ud_gg_ .___SDropdownMenuItemContainer_1d1ud_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemHint_1d1ud_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}",
     /*__inner_css_end__*/
-    "1tow4_gg_"
+    "1d1ud_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_1tow4_gg_",
-    "_nesting-trigger": "__nesting-trigger_1tow4_gg_",
-    "__SDropdownMenuNesting": "___SDropdownMenuNesting_1tow4_gg_",
-    "_size_l": "_size_l_1tow4_gg_",
-    "_size_m": "_size_m_1tow4_gg_",
-    "_highlighted": "__highlighted_1tow4_gg_",
-    "__SDropdownNestingItem": "___SDropdownNestingItem_1tow4_gg_",
-    "__SItemHint": "___SItemHint_1tow4_gg_",
-    "__SDropdownMenuList": "___SDropdownMenuList_1tow4_gg_",
-    "__SBar": "___SBar_1tow4_gg_",
-    "__SShadowHorizontal": "___SShadowHorizontal_1tow4_gg_",
-    "__SShadowVertical": "___SShadowVertical_1tow4_gg_",
-    "__SItemContent": "___SItemContent_1tow4_gg_",
-    "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1tow4_gg_",
-    "__SItemContentText": "___SItemContentText_1tow4_gg_"
+    "__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_1d1ud_gg_",
+    "_nesting-trigger": "__nesting-trigger_1d1ud_gg_",
+    "__SDropdownMenuNesting": "___SDropdownMenuNesting_1d1ud_gg_",
+    "_size_l": "_size_l_1d1ud_gg_",
+    "_size_m": "_size_m_1d1ud_gg_",
+    "_highlighted": "__highlighted_1d1ud_gg_",
+    "__SDropdownNestingItem": "___SDropdownNestingItem_1d1ud_gg_",
+    "__SItemHint": "___SItemHint_1d1ud_gg_",
+    "__SDropdownMenuList": "___SDropdownMenuList_1d1ud_gg_",
+    "__SBar": "___SBar_1d1ud_gg_",
+    "__SShadowHorizontal": "___SShadowHorizontal_1d1ud_gg_",
+    "__SShadowVertical": "___SShadowVertical_1d1ud_gg_",
+    "__SItemContent": "___SItemContent_1d1ud_gg_",
+    "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1d1ud_gg_",
+    "__SItemContentText": "___SItemContentText_1d1ud_gg_"
   })
 );
-var ListBoxContextProvider = function ListBoxContextProvider2(_ref22) {
-  var children = _ref22.children;
-  return /* @__PURE__ */ React.createElement(hideScrollBarsFromScreenReadersContext.Provider, {
-    value: true
-  }, children);
-};
 var menuItemContext = /* @__PURE__ */ React.createContext({});
 var DropdownMenuRoot = /* @__PURE__ */ (function(_AbstractDropdown) {
   function DropdownMenuRoot2() {
@@ -66,6 +62,7 @@ var DropdownMenuRoot = /* @__PURE__ */ (function(_AbstractDropdown) {
     _this = _callSuper(this, DropdownMenuRoot2, [].concat(args));
     _defineProperty(_this, "actionsRef", /* @__PURE__ */ React.createRef());
     _defineProperty(_this, "role", "menu");
+    _defineProperty(_this, "shouldRecalculateItemTabIndex", false);
     return _this;
   }
   _inherits(DropdownMenuRoot2, _AbstractDropdown);
@@ -78,7 +75,7 @@ var DropdownMenuRoot = /* @__PURE__ */ (function(_AbstractDropdown) {
           if (visible === true) {
             setTimeout(function() {
               _this2.focusAndScrollToSelected();
-            }, 30);
+            }, 50);
           }
         }]
       });
@@ -94,7 +91,7 @@ var DropdownMenuRoot = /* @__PURE__ */ (function(_AbstractDropdown) {
         };
       }
       var options = menuElement.querySelectorAll('[role="menuitemcheckbox"], [role="menuitemradio"]');
-      var selected = menuElement.querySelector('[aria-checked="true"]');
+      var selected = menuElement.querySelector('[aria-checked="true"]:not([disabled])');
       return {
         selected,
         options
@@ -103,10 +100,10 @@ var DropdownMenuRoot = /* @__PURE__ */ (function(_AbstractDropdown) {
   }, {
     key: "focusAndScrollToSelected",
     value: function focusAndScrollToSelected() {
-      var _this3 = this;
+      var _this$menuRef$current, _this3 = this;
       var _this$menuElements = this.menuElements, selected = _this$menuElements.selected, options = _this$menuElements.options;
       var isFocusAlreadyInPopper = isFocusInside(this.popperRef.current);
-      if (!selected || !options || this.asProps.itemsCount !== void 0 || isFocusAlreadyInPopper) return;
+      if (!selected || !options || (_this$menuRef$current = this.menuRef.current) !== null && _this$menuRef$current !== void 0 && _this$menuRef$current.dataset.isVirtual || isFocusAlreadyInPopper) return;
       this.scrollToNodeAsync(selected, true).then(function() {
         if (_this3.asProps.visible) {
           selected.focus({
@@ -122,8 +119,9 @@ var DropdownMenuRoot = /* @__PURE__ */ (function(_AbstractDropdown) {
   }, {
     key: "afterOpenPopper",
     value: function afterOpenPopper() {
+      var _this$menuRef$current2;
       var _this$menuElements2 = this.menuElements, selected = _this$menuElements2.selected, options = _this$menuElements2.options;
-      if (selected && options && this.asProps.itemsCount === void 0) return;
+      if (selected && options && !((_this$menuRef$current2 = this.menuRef.current) !== null && _this$menuRef$current2 !== void 0 && _this$menuRef$current2.dataset.isVirtual)) return;
       _superPropGet(DropdownMenuRoot2, "afterOpenPopper", this, 3)([]);
     }
   }, {
@@ -153,6 +151,13 @@ var DropdownMenuRoot = /* @__PURE__ */ (function(_AbstractDropdown) {
         onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu("list"), this.handleArrowKeyDown.bind(this))
       });
     }
+  }, {
+    key: "getVirtualListProps",
+    value: function getVirtualListProps() {
+      return _objectSpread(_objectSpread({}, _superPropGet(DropdownMenuRoot2, "getListProps", this, 3)([])), {}, {
+        onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu("list"), this.handleArrowKeyDown.bind(this))
+      });
+    }
   }, {
     key: "getPopperProps",
     value: function getPopperProps() {
@@ -168,15 +173,32 @@ var DropdownMenuRoot = /* @__PURE__ */ (function(_AbstractDropdown) {
         onKeyDown: callAllEventHandlers(this.handlePreventTabOnActions.bind(this), this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu("list"), this.handleArrowKeyDown.bind(this))
       });
     }
+  }, {
+    key: "getItemTabIndex",
+    value: function getItemTabIndex(props, itemIndex) {
+      var disabled = props.disabled, index = props.index;
+      var _this$asProps2 = this.asProps, highlightedIndex = _this$asProps2.highlightedIndex, visible = _this$asProps2.visible;
+      if (!visible) return -1;
+      var isHighlighted = (index !== null && index !== void 0 ? index : itemIndex) === highlightedIndex;
+      if (isHighlighted && !disabled) {
+        return 0;
+      }
+      if (disabled && isHighlighted) {
+        this.shouldRecalculateItemTabIndex = true;
+      }
+      if (!isHighlighted && !disabled && this.shouldRecalculateItemTabIndex) {
+        this.shouldRecalculateItemTabIndex = false;
+        return 0;
+      }
+      return -1;
+    }
   }, {
     key: "getItemProps",
     value: function getItemProps(props, index) {
       var _props$index, _this4 = this;
-      var _this$asProps2 = this.asProps, highlightedIndex = _this$asProps2.highlightedIndex, visible = _this$asProps2.visible;
       var realIndex = (_props$index = props.index) !== null && _props$index !== void 0 ? _props$index : index;
-      var isHighlighted = realIndex === highlightedIndex;
       var itemProps = _objectSpread(_objectSpread({}, _superPropGet(DropdownMenuRoot2, "getItemProps", this, 3)([props, realIndex])), {}, {
-        tabIndex: isHighlighted && visible ? 0 : -1,
+        tabIndex: this.getItemTabIndex(props, index),
         ref: function ref(node) {
           return _this4.itemRef(props, realIndex, node);
         },
@@ -219,6 +241,13 @@ var DropdownMenuRoot = /* @__PURE__ */ (function(_AbstractDropdown) {
           setTimeout(function() {
             var _this5$itemRefs$highl;
             var highlightedIndex = _this5.asProps.highlightedIndex;
+            var highlightedIndexProps = _this5.itemProps[highlightedIndex];
+            if (highlightedIndexProps !== null && highlightedIndexProps !== void 0 && highlightedIndexProps.disabled) {
+              highlightedIndex = _this5.itemProps.findIndex(function(p) {
+                return !p.disabled;
+              });
+            }
+            if (highlightedIndex === -1) return;
             (_this5$itemRefs$highl = _this5.itemRefs[highlightedIndex]) === null || _this5$itemRefs$highl === void 0 || _this5$itemRefs$highl.focus();
           }, 0);
           e.preventDefault();
@@ -280,9 +309,9 @@ _defineProperty(DropdownMenuRoot, "nestedMenuInteraction", {
   trigger: [["onClick", "onMouseEnter"], ["onClick", "onMouseLeave"]],
   popper: [["onMouseEnter"], ["onMouseLeave"]]
 });
-function List(_ref23) {
+function List(_ref22) {
   var _ref2 = arguments[0], _ref13;
-  var styles = _ref23.styles, Children = _ref23.Children;
+  var styles = _ref22.styles, Children = _ref22.Children;
   var SDropdownMenuList = ScrollAreaComponent;
   var SBar = ScrollAreaComponent.Bar;
   return _ref13 = sstyled(styles), /* @__PURE__ */ React.createElement(ListBoxContextProvider, _ref13.cn("ListBoxContextProvider", {}), /* @__PURE__ */ React.createElement(SDropdownMenuList, _ref13.cn("SDropdownMenuList", _objectSpread({}, assignProps({
@@ -297,9 +326,9 @@ function List(_ref23) {
     "orientation": "vertical"
   }))));
 }
-function Actions(_ref24) {
+function Actions(_ref23) {
   var _ref3 = arguments[0], _ref14;
-  var styles = _ref24.styles;
+  var styles = _ref23.styles;
   var SDropdownMenuActions = Flex;
   return _ref14 = sstyled(styles), /* @__PURE__ */ React.createElement(SDropdownMenuActions, _ref14.cn("SDropdownMenuActions", _objectSpread({}, assignProps({}, _ref3))));
 }
@@ -319,9 +348,9 @@ function Menu(props) {
     role: null
   }), /* @__PURE__ */ React.createElement(DropdownMenu.List, assignProps({}, _ref4))));
 }
-function Item(_ref25) {
+function Item(_ref24) {
   var _ref5 = arguments[0], _ref15;
-  var id = _ref25.id, styles = _ref25.styles, disabled = _ref25.disabled, Children = _ref25.Children, forwardRef = _ref25.forwardRef, role = _ref25.role, tabIndex = _ref25.tabIndex, actionsRef = _ref25.actionsRef, ariaChecked = _ref25["aria-checked"];
+  var id = _ref24.id, styles = _ref24.styles, disabled = _ref24.disabled, Children = _ref24.Children, forwardRef = _ref24.forwardRef, role = _ref24.role, tabIndex = _ref24.tabIndex, actionsRef = _ref24.actionsRef, ariaChecked = _ref24["aria-checked"];
   var SDropdownMenuItemContainer = Dropdown.Item;
   var itemRef = React.useRef();
   var _React$useState = React.useState(false), _React$useState2 = _slicedToArray(_React$useState, 2), highlighted = _React$useState2[0], setHighlighted = _React$useState2[1];
@@ -330,7 +359,8 @@ function Item(_ref25) {
     ref: forkRef(forwardRef, itemRef),
     role,
     tabIndex,
-    ariaChecked
+    ariaChecked,
+    disabled
   };
   var ariaDescribes = [];
   var hasSubMenu = isAdvanceMode(Children, [DropdownMenu.displayName], true);
@@ -397,9 +427,9 @@ function Trigger() {
   var _ref7 = arguments[0];
   return /* @__PURE__ */ React.createElement(Dropdown.Trigger, assignProps({}, _ref7));
 }
-function ItemContent(_ref26) {
+function ItemContent(_ref25) {
   var _ref8 = arguments[0], _ref17;
-  var styles = _ref26.styles;
+  var styles = _ref25.styles;
   var SItemContent = Flex;
   var ref = React.useRef();
   var menuItemCtxValue = React.useContext(menuItemContext);
@@ -428,18 +458,19 @@ function ItemContent(_ref26) {
     "aria-expanded": subMenu,
     "aria-checked": menuItemCtxValue.ariaChecked,
     "alignItems": "center",
-    "justifyContent": menuItemCtxValue.hasSubMenu ? "space-between" : void 0
+    "justifyContent": menuItemCtxValue.hasSubMenu ? "space-between" : void 0,
+    "disabled": menuItemCtxValue.disabled
   }, _ref8))));
 }
-function ItemContentText(_ref27) {
+function ItemContentText(_ref26) {
   var _ref9 = arguments[0], _ref18;
-  var styles = _ref27.styles;
+  var styles = _ref26.styles;
   var SItemContentText = Text;
   return _ref18 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemContentText, _ref18.cn("SItemContentText", _objectSpread({}, assignProps({}, _ref9))));
 }
-function ItemHint(_ref28) {
+function ItemHint(_ref27) {
   var _ref0 = arguments[0], _ref19;
-  var styles = _ref28.styles;
+  var styles = _ref27.styles;
   var SItemHint = Flex;
   var _React$useContext = React.useContext(menuItemContext), hintId = _React$useContext.hintId;
   return _ref19 = sstyled(styles), /* @__PURE__ */ React.createElement(SItemHint, _ref19.cn("SItemHint", _objectSpread({}, assignProps({
@@ -461,16 +492,16 @@ function Title(props) {
     "variant": "title"
   }, _ref10))));
 }
-function Nesting(_ref29) {
+function Nesting(_ref28) {
   var _ref11 = arguments[0];
-  var forwardRef = _ref29.forwardRef;
+  var forwardRef = _ref28.forwardRef;
   return /* @__PURE__ */ React.createElement(DropdownMenu.Item, assignProps({
     "ref": forwardRef
   }, _ref11));
 }
-function NestingTrigger(_ref30) {
+function NestingTrigger(_ref29) {
   var _ref12 = arguments[0];
-  var forwardRef = _ref30.forwardRef;
+  var forwardRef = _ref29.forwardRef;
   return /* @__PURE__ */ React.createElement(DropdownMenu.Item.Content, assignProps({
     "tag": DropdownMenu.Trigger,
     "ref": forwardRef,
@@ -481,6 +512,7 @@ var DropdownMenu = createComponent(DropdownMenuRoot, {
   Trigger,
   Popper: Dropdown.Popper,
   List,
+  VirtualList,
   Actions,
   Menu,
   Item: [Item, {

package/lib/esm/components/Context.mjs

@@ -0,0 +1,11 @@
+import { hideScrollBarsFromScreenReadersContext } from "@semcore/scroll-area";
+import React from "react";
+var ListBoxContextProvider = function ListBoxContextProvider2(_ref) {
+  var children = _ref.children;
+  return /* @__PURE__ */ React.createElement(hideScrollBarsFromScreenReadersContext.Provider, {
+    value: true
+  }, children);
+};
+export {
+  ListBoxContextProvider
+};

package/lib/esm/components/VirtualList.mjs

@@ -0,0 +1,132 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
+import { Box } from "@semcore/base-components";
+import ScrollAreaComponent from "@semcore/scroll-area";
+import React from "react";
+import { ListBoxContextProvider } from "./Context.mjs";
+/*!__reshadow-styles__:"../style/dropdown-menu.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    ".___SDropdownMenuList_1d1ud_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;position:relative;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_1d1ud_gg_ .___SBar_1d1ud_gg_{z-index:3}.___SDropdownMenuList_1d1ud_gg_ .___SShadowHorizontal_1d1ud_gg_:after,.___SDropdownMenuList_1d1ud_gg_ .___SShadowHorizontal_1d1ud_gg_:before,.___SDropdownMenuList_1d1ud_gg_ .___SShadowVertical_1d1ud_gg_:after,.___SDropdownMenuList_1d1ud_gg_ .___SShadowVertical_1d1ud_gg_:before{border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuItemContainer_1d1ud_gg_ .___SItemContent_1d1ud_gg_:focus-visible{outline:0}.___SDropdownMenuItemContainer_1d1ud_gg_.__nesting-trigger_1d1ud_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_1d1ud_gg_,.___SItemContentText_1d1ud_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_1d1ud_gg_:first-child,.___SItemContentText_1d1ud_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1d1ud_gg_:last-child,.___SItemContentText_1d1ud_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_1d1ud_gg_,.___SDropdownMenuNesting_1d1ud_gg_._size_l_1d1ud_gg_,.___SDropdownMenuNesting_1d1ud_gg_._size_m_1d1ud_gg_{padding:0}.___SDropdownMenuNesting_1d1ud_gg_.__highlighted_1d1ud_gg_{z-index:1;outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:-2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SDropdownNestingItem_1d1ud_gg_._size_l_1d1ud_gg_,.___SDropdownNestingItem_1d1ud_gg_._size_m_1d1ud_gg_{padding-right:0}.___SDropdownNestingItem_1d1ud_gg_ .___SDropdownMenuItemContainer_1d1ud_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemHint_1d1ud_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}",
+    /*__inner_css_end__*/
+    "1d1ud_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_1d1ud_gg_",
+    "_nesting-trigger": "__nesting-trigger_1d1ud_gg_",
+    "__SDropdownMenuNesting": "___SDropdownMenuNesting_1d1ud_gg_",
+    "_size_l": "_size_l_1d1ud_gg_",
+    "_size_m": "_size_m_1d1ud_gg_",
+    "_highlighted": "__highlighted_1d1ud_gg_",
+    "__SDropdownNestingItem": "___SDropdownNestingItem_1d1ud_gg_",
+    "__SItemHint": "___SItemHint_1d1ud_gg_",
+    "__SDropdownMenuList": "___SDropdownMenuList_1d1ud_gg_",
+    "__SBar": "___SBar_1d1ud_gg_",
+    "__SShadowHorizontal": "___SShadowHorizontal_1d1ud_gg_",
+    "__SShadowVertical": "___SShadowVertical_1d1ud_gg_",
+    "__SItemContent": "___SItemContent_1d1ud_gg_",
+    "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1d1ud_gg_",
+    "__SItemContentText": "___SItemContentText_1d1ud_gg_"
+  })
+);
+var VirtualListRoot = /* @__PURE__ */ (function(_Component) {
+  function VirtualListRoot2() {
+    var _this;
+    _classCallCheck(this, VirtualListRoot2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, VirtualListRoot2, [].concat(args));
+    _defineProperty(_this, "containerRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "listRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "state", {
+      scrollTop: 0,
+      scrollDirection: "down"
+    });
+    _defineProperty(_this, "handleScroll", function(e) {
+      if (e.target instanceof HTMLElement) {
+        var scrollDirection = e.target.scrollTop > _this.state.scrollTop ? "down" : "up";
+        _this.setState({
+          scrollDirection,
+          scrollTop: e.target.scrollTop
+        });
+      }
+    });
+    return _this;
+  }
+  _inherits(VirtualListRoot2, _Component);
+  return _createClass(VirtualListRoot2, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      var _this$asProps = this.asProps, index = _this$asProps.index, rowHeight = _this$asProps.rowHeight;
+      setTimeout(function() {
+        var _this2$listRef$curren, _this2$listRef$curren2, _this2$containerRef$c;
+        var listHeight = ((_this2$listRef$curren = (_this2$listRef$curren2 = _this2.listRef.current) === null || _this2$listRef$curren2 === void 0 ? void 0 : _this2$listRef$curren2.getBoundingClientRect().height) !== null && _this2$listRef$curren !== void 0 ? _this2$listRef$curren : 0) / 2;
+        (_this2$containerRef$c = _this2.containerRef.current) === null || _this2$containerRef$c === void 0 || _this2$containerRef$c.scrollTo({
+          top: index * rowHeight - listHeight + rowHeight / 2
+        });
+      }, 10);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref2;
+      var SDropdownMenuList = ScrollAreaComponent;
+      var SBar = ScrollAreaComponent.Bar;
+      var _this$state = this.state, scrollDirection = _this$state.scrollDirection, scrollTop = _this$state.scrollTop;
+      var _this$asProps2 = this.asProps, rows = _this$asProps2.rows, rowHeight = _this$asProps2.rowHeight, rowsBuffer = _this$asProps2.rowsBuffer, styles = _this$asProps2.styles, RenderRow = _this$asProps2.renderRow, customData = _this$asProps2.customData;
+      var offsetHeight = 0;
+      var prevPrepared = scrollDirection === "up" ? rowsBuffer : 6;
+      var nextPrepared = scrollDirection === "up" ? 6 : rowsBuffer;
+      var startIndex = Math.max(Math.floor(scrollTop / rowHeight) - prevPrepared, 0);
+      var lastIndex = scrollDirection === "up" && scrollTop === 0 ? rowsBuffer : Math.min(Math.ceil((scrollTop + offsetHeight) / rowHeight) + nextPrepared, rows.length);
+      var rowsToRender = rows.slice(startIndex, lastIndex);
+      var rowMarginTop = rowHeight * startIndex;
+      var rowMarginBottom = rowHeight * (rows.length - lastIndex);
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(ListBoxContextProvider, _ref2.cn("ListBoxContextProvider", {}), /* @__PURE__ */ React.createElement(SDropdownMenuList, _ref2.cn("SDropdownMenuList", _objectSpread({}, assignProps({
+        "shadow": true,
+        "shadowSize": 16,
+        "shadowTheme": "light",
+        "onScroll": this.handleScroll,
+        "data-is-virtual": "true",
+        "ref": this.listRef
+      }, _ref))), /* @__PURE__ */ React.createElement(ScrollAreaComponent.Container, {
+        ref: this.containerRef,
+        tabIndex: void 0,
+        h: rows.length * rowHeight
+      }, /* @__PURE__ */ React.createElement(Box, _ref2.cn("Box", {
+        "h": rowMarginTop
+      })), rowsToRender.map(function(item, index) {
+        return /* @__PURE__ */ React.createElement(RenderRow, {
+          key: startIndex + index,
+          row: item,
+          index: startIndex + index,
+          data: customData
+        });
+      }), /* @__PURE__ */ React.createElement(Box, _ref2.cn("Box", {
+        "h": rowMarginBottom
+      }))), /* @__PURE__ */ React.createElement(SBar, _ref2.cn("SBar", {
+        "orientation": "horizontal"
+      })), /* @__PURE__ */ React.createElement(SBar, _ref2.cn("SBar", {
+        "orientation": "vertical"
+      }))));
+    }
+  }]);
+})(Component);
+_defineProperty(VirtualListRoot, "displayName", "VirtualList");
+_defineProperty(VirtualListRoot, "style", style);
+_defineProperty(VirtualListRoot, "defaultProps", {
+  rowsBuffer: 10
+});
+var VirtualList = createComponent(VirtualListRoot);
+export {
+  VirtualList
+};

package/lib/types/components/Context.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ListBoxContextProvider: ({ children }: React.PropsWithChildren) => React.JSX.Element;

package/lib/types/components/VirtualList.d.ts

@@ -0,0 +1,25 @@
+import { Box } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
+import React from 'react';
+export type RenderRowProps<T, D> = {
+    index: number;
+    row: T;
+    data: D;
+};
+type VirtualListProps<T, D extends object> = {
+    /** List of all rows in ddMenu */
+    rows: T[];
+    /** Method for render row, it's better to wrap it via React.memo */
+    renderRow: (props: RenderRowProps<T, D>) => React.ReactNode;
+    /** The height of row. For now, you should calculate it on your side. */
+    rowHeight: number;
+    /** The buffer of rows out of visible rows
+     * @default 10
+     */
+    rowsBuffer?: number;
+    /** Some custom data for each renderRow function */
+    customData: D;
+};
+export type VirtualListComponent = (<T = string, D extends object = {}>(props: Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentProps<typeof Box, 'div', VirtualListProps<T, D>>, 'tag' | 'children'>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<typeof Box, 'div', VirtualListProps<any, any>>;
+export declare const VirtualList: VirtualListComponent;
+export {};

package/lib/types/index.d.ts

@@ -12,6 +12,8 @@ import type { eventInteraction } from '@semcore/popper';
 import type { ScrollAreaProps } from '@semcore/scroll-area';
 import type { Text } from '@semcore/typography';
 
+import type { VirtualList, RenderRowProps } from './components/VirtualList';
+
 export type DropdownMenuSize = 'm' | 'l';
 
 /** @deprecated */
@@ -204,6 +206,9 @@ declare const DropdownMenu: Intergalactic.Component<
    */
   ItemHint: Intergalactic.Component<'div', DropdownMenuItemHintProps>;
   Group: typeof Dropdown.Group;
+
+  VirtualList: typeof VirtualList;
+
   /**
    * @deprecated Use Item instead of Nesting
    */
@@ -232,3 +237,7 @@ declare const DropdownMenu: Intergalactic.Component<
 };
 
 export default DropdownMenu;
+
+export {
+  RenderRowProps,
+};

package/lib/types/translations/__intergalactic-dynamic-locales.d.ts

@@ -0,0 +1,42 @@
+export declare const localizedMessages: {
+    de: {
+        triggerHint: string;
+    };
+    en: {};
+    es: {
+        triggerHint: string;
+    };
+    fr: {
+        triggerHint: string;
+    };
+    it: {
+        triggerHint: string;
+    };
+    ja: {
+        triggerHint: string;
+    };
+    ko: {
+        triggerHint: string;
+    };
+    nl: {
+        triggerHint: string;
+    };
+    pt: {
+        triggerHint: string;
+    };
+    tr: {
+        triggerHint: string;
+    };
+    vi: {
+        triggerHint: string;
+    };
+    zh: {
+        triggerHint: string;
+    };
+    pl: {
+        triggerHint: string;
+    };
+    sv: {
+        triggerHint: string;
+    };
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/dropdown-menu",
   "description": "Semrush DropdownMenu Component",
-  "version": "16.1.14-prerelease.1",
+  "version": "16.2.0-prerelease.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,17 +14,17 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/button": "16.0.12-prerelease.1",
-    "@semcore/dropdown": "16.1.3-prerelease.1",
-    "@semcore/icon": "16.7.3-prerelease.1",
-    "@semcore/typography": "16.3.2-prerelease.1",
+    "@semcore/button": "16.0.12",
+    "@semcore/dropdown": "16.1.4-prerelease.0",
+    "@semcore/icon": "16.7.3-prerelease.0",
+    "@semcore/typography": "16.3.2",
     "@semcore/popper": "16.0.11",
     "@semcore/flex-box": "16.0.11",
     "@semcore/scroll-area": "16.0.11",
     "classnames": "2.2.6"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0"
+    "@semcore/base-components": "^16.4.2-prerelease.0"
   },
   "repository": {
     "type": "git",
@@ -33,13 +33,13 @@
   },
   "devDependencies": {
     "@types/classnames": "2.2.6",
-    "@semcore/testing-utils": "1.0.0",
+    "@semcore/base-trigger": "16.4.4",
     "@semcore/core": "16.5.1",
-    "@semcore/base-trigger": "16.4.4-prerelease.1",
-    "@semcore/button": "16.0.12-prerelease.1",
-    "@semcore/icon": "16.7.3-prerelease.1"
+    "@semcore/button": "16.0.12",
+    "@semcore/testing-utils": "1.0.0",
+    "@semcore/icon": "16.7.3-prerelease.0"
   },
   "scripts": {
-    "build": "pnpm semcore-builder --source=js && pnpm vite build"
+    "build": "pnpm semcore-builder --source=js,ts && pnpm vite build"
   }
 }