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

package/lib/cjs/components/VirtualList.js

@@ -0,0 +1,141 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VirtualList = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _core = require("@semcore/core");
+var _baseComponents = require("@semcore/base-components");
+var _scrollArea = _interopRequireDefault(require("@semcore/scroll-area"));
+var _react = _interopRequireDefault(require("react"));
+var _Context = require("./Context");
+/*!__reshadow-styles__:"../style/dropdown-menu.shadow.css"*/
+var style = (/*__reshadow_css_start__*/_core.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 VirtualListRoot() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, VirtualListRoot);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = (0, _callSuper2["default"])(this, VirtualListRoot, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "containerRef", /*#__PURE__*/_react["default"].createRef());
+    (0, _defineProperty2["default"])(_this, "listRef", /*#__PURE__*/_react["default"].createRef());
+    (0, _defineProperty2["default"])(_this, "state", {
+      scrollTop: 0,
+      scrollDirection: 'down'
+    });
+    (0, _defineProperty2["default"])(_this, "handleScroll", function (e) {
+      if (e.target instanceof HTMLElement) {
+        var scrollDirection = e.target.scrollTop > _this.state.scrollTop ? 'down' : 'up';
+        _this.setState({
+          scrollDirection: scrollDirection,
+          scrollTop: e.target.scrollTop
+        });
+      }
+    });
+    return _this;
+  }
+  (0, _inherits2["default"])(VirtualListRoot, _Component);
+  return (0, _createClass2["default"])(VirtualListRoot, [{
+    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); // 10 for correct work in safari
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps,
+        _ref2;
+      var SDropdownMenuList = _scrollArea["default"];
+      var SBar = _scrollArea["default"].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 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_Context.ListBoxContextProvider, _ref2.cn("ListBoxContextProvider", {}), /*#__PURE__*/_react["default"].createElement(SDropdownMenuList, _ref2.cn("SDropdownMenuList", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+        "shadow": true,
+        "shadowSize": 16,
+        "shadowTheme": 'light',
+        "onScroll": this.handleScroll,
+        "data-is-virtual": 'true',
+        "ref": this.listRef
+      }, _ref))), /*#__PURE__*/_react["default"].createElement(_scrollArea["default"].Container, {
+        ref: this.containerRef,
+        tabIndex: undefined,
+        h: rows.length * rowHeight
+      }, /*#__PURE__*/_react["default"].createElement(_baseComponents.Box, _ref2.cn("Box", {
+        "h": rowMarginTop
+      })), rowsToRender.map(function (item, index) {
+        return /*#__PURE__*/_react["default"].createElement(RenderRow, {
+          key: startIndex + index,
+          row: item,
+          index: startIndex + index,
+          data: customData
+        });
+      }), /*#__PURE__*/_react["default"].createElement(_baseComponents.Box, _ref2.cn("Box", {
+        "h": rowMarginBottom
+      }))), /*#__PURE__*/_react["default"].createElement(SBar, _ref2.cn("SBar", {
+        "orientation": 'horizontal'
+      })), /*#__PURE__*/_react["default"].createElement(SBar, _ref2.cn("SBar", {
+        "orientation": 'vertical'
+      }))));
+    }
+  }]);
+}(_core.Component);
+(0, _defineProperty2["default"])(VirtualListRoot, "displayName", 'VirtualList');
+(0, _defineProperty2["default"])(VirtualListRoot, "style", style);
+(0, _defineProperty2["default"])(VirtualListRoot, "defaultProps", {
+  rowsBuffer: 10
+});
+var VirtualList = exports.VirtualList = (0, _core.createComponent)(VirtualListRoot);
+//# sourceMappingURL=VirtualList.js.map

package/lib/cjs/components/VirtualList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualList.js","names":["_core","require","_baseComponents","_scrollArea","_interopRequireDefault","_react","_Context","style","sstyled","insert","VirtualListRoot","_Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","_callSuper2","concat","_defineProperty2","React","createRef","scrollTop","scrollDirection","e","target","HTMLElement","state","setState","_inherits2","_createClass2","key","value","componentDidMount","_this2","_this$asProps","asProps","index","rowHeight","setTimeout","_this2$listRef$curren","_this2$listRef$curren2","_this2$containerRef$c","listHeight","listRef","current","getBoundingClientRect","height","containerRef","scrollTo","top","render","_ref","_ref2","SDropdownMenuList","ScrollAreaComponent","SBar","Bar","_this$state","_this$asProps2","rows","rowsBuffer","styles","RenderRow","renderRow","customData","offsetHeight","prevPrepared","nextPrepared","startIndex","Math","max","floor","lastIndex","min","ceil","rowsToRender","slice","rowMarginTop","rowMarginBottom","createElement","ListBoxContextProvider","cn","_objectSpread2","assignProps","handleScroll","Container","ref","tabIndex","undefined","h","Box","map","item","row","data","Component","VirtualList","exports","createComponent"],"sources":["../../../src/components/VirtualList.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { Root, Component, createComponent, sstyled } from '@semcore/core';\nimport ScrollAreaComponent from '@semcore/scroll-area';\nimport React from 'react';\n\nimport { ListBoxContextProvider } from './Context';\nimport style from '../style/dropdown-menu.shadow.css';\n\nexport type RenderRowProps<T, D> = {\n  index: number;\n  row: T;\n  data: D;\n};\n\ntype VirtualListProps<T, D extends object> = {\n  /** List of all rows in ddMenu */\n  rows: T[];\n  /** Method for render row, it's better to wrap it via React.memo */\n  renderRow: (props: RenderRowProps<T, D>) => React.ReactNode;\n  /** The height of row. For now, you should calculate it on your side. */\n  rowHeight: number;\n  /** The buffer of rows out of visible rows\n   * @default 10\n   */\n  rowsBuffer?: number;\n  /** Some custom data for each renderRow function */\n  customData: D;\n};\n\ntype State = {\n  scrollTop: number;\n  scrollDirection: 'up' | 'down';\n};\n\nclass VirtualListRoot<T = string, D extends object = {}> extends Component<VirtualListProps<T, D>, {}, State, [], { rowsBuffer: number; index: number }> {\n  static displayName = 'VirtualList';\n  static style = style;\n\n  static defaultProps = {\n    rowsBuffer: 10,\n  };\n\n  containerRef = React.createRef<HTMLDivElement>();\n  listRef = React.createRef<HTMLDivElement>();\n\n  state: State = {\n    scrollTop: 0,\n    scrollDirection: 'down',\n  };\n\n  componentDidMount() {\n    const { index, rowHeight } = this.asProps;\n\n    setTimeout(() => {\n      const listHeight = (this.listRef.current?.getBoundingClientRect().height ?? 0) / 2;\n      this.containerRef.current?.scrollTo({ top: index * rowHeight - listHeight + rowHeight / 2 });\n    }, 10); // 10 for correct work in safari\n  }\n\n  handleScroll = (e: React.SyntheticEvent<HTMLDivElement>) => {\n    if (e.target instanceof HTMLElement) {\n      const scrollDirection = e.target.scrollTop > this.state.scrollTop ? 'down' : 'up';\n\n      this.setState({\n        scrollDirection,\n        scrollTop: e.target.scrollTop,\n      });\n    }\n  };\n\n  render() {\n    const SDropdownMenuList = Root;\n    const SBar = ScrollAreaComponent.Bar;\n\n    const { scrollDirection, scrollTop } = this.state;\n    const { rows, rowHeight, rowsBuffer, styles, renderRow: RenderRow, customData } = this.asProps;\n\n    const offsetHeight = 0;\n    const prevPrepared = scrollDirection === 'up' ? rowsBuffer : 6;\n    const nextPrepared = scrollDirection === 'up' ? 6 : rowsBuffer;\n\n    const startIndex = Math.max(Math.floor(scrollTop / rowHeight) - prevPrepared, 0);\n\n    const lastIndex = scrollDirection === 'up' && scrollTop === 0\n      ? rowsBuffer\n      : Math.min(\n          Math.ceil((scrollTop + offsetHeight) / rowHeight) + nextPrepared,\n          rows.length,\n        );\n\n    const rowsToRender = rows.slice(startIndex, lastIndex);\n    const rowMarginTop = rowHeight * startIndex;\n    const rowMarginBottom = rowHeight * (rows.length - lastIndex);\n\n    return sstyled(styles)(\n      <ListBoxContextProvider>\n        <SDropdownMenuList\n          render={ScrollAreaComponent}\n          shadow={true}\n          shadowSize={16}\n          shadowTheme='light'\n          onScroll={this.handleScroll}\n          data-is-virtual='true'\n          ref={this.listRef}\n        >\n          <ScrollAreaComponent.Container ref={this.containerRef} tabIndex={undefined} h={rows.length * rowHeight}>\n            <Box h={rowMarginTop} />\n            {rowsToRender.map((item, index) => {\n              return <RenderRow key={startIndex + index} row={item} index={startIndex + index} data={customData} />;\n            })}\n            <Box h={rowMarginBottom} />\n          </ScrollAreaComponent.Container>\n          <SBar orientation='horizontal' />\n          <SBar orientation='vertical' />\n        </SDropdownMenuList>\n      </ListBoxContextProvider>,\n    );\n  }\n}\n\nexport type VirtualListComponent = (<\n  T = string,\n  D extends object = {},\n>(\n  props: Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentProps<typeof Box, 'div', VirtualListProps<T, D>>, 'tag' | 'children'>\n) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<typeof Box, 'div', VirtualListProps<any, any>>;\n\nexport const VirtualList = createComponent(VirtualListRoot) as VirtualListComponent;\n"],"mappings":";;;;;;;;;;;;;AAEA,IAAAA,KAAA,GAAAC,OAAA;AAFA,IAAAC,eAAA,GAAAD,OAAA;AAGA,IAAAE,WAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,MAAA,GAAAD,sBAAA,CAAAH,OAAA;AAEA,IAAAK,QAAA,GAAAL,OAAA;AAAmD;AAAA,IAAAM,KAAA,8BAAAP,KAAA,CAAAQ,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,IA6B7CC,eAAe,0BAAAC,UAAA;EAAA,SAAAD,gBAAA;IAAA,IAAAE,KAAA;IAAA,IAAAC,gBAAA,mBAAAH,eAAA;IAAA,SAAAI,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IAAAP,KAAA,OAAAQ,WAAA,mBAAAV,eAAA,KAAAW,MAAA,CAAAJ,IAAA;IAAA,IAAAK,gBAAA,aAAAV,KAAA,+BAQJW,iBAAK,CAACC,SAAS,CAAiB,CAAC;IAAA,IAAAF,gBAAA,aAAAV,KAAA,0BACtCW,iBAAK,CAACC,SAAS,CAAiB,CAAC;IAAA,IAAAF,gBAAA,aAAAV,KAAA,WAE5B;MACba,SAAS,EAAE,CAAC;MACZC,eAAe,EAAE;IACnB,CAAC;IAAA,IAAAJ,gBAAA,aAAAV,KAAA,kBAWc,UAACe,CAAuC,EAAK;MAC1D,IAAIA,CAAC,CAACC,MAAM,YAAYC,WAAW,EAAE;QACnC,IAAMH,eAAe,GAAGC,CAAC,CAACC,MAAM,CAACH,SAAS,GAAGb,KAAA,CAAKkB,KAAK,CAACL,SAAS,GAAG,MAAM,GAAG,IAAI;QAEjFb,KAAA,CAAKmB,QAAQ,CAAC;UACZL,eAAe,EAAfA,eAAe;UACfD,SAAS,EAAEE,CAAC,CAACC,MAAM,CAACH;QACtB,CAAC,CAAC;MACJ;IACF,CAAC;IAAA,OAAAb,KAAA;EAAA;EAAA,IAAAoB,UAAA,aAAAtB,eAAA,EAAAC,UAAA;EAAA,WAAAsB,aAAA,aAAAvB,eAAA;IAAAwB,GAAA;IAAAC,KAAA,EAlBD,SAAAC,iBAAiBA,CAAA,EAAG;MAAA,IAAAC,MAAA;MAClB,IAAAC,aAAA,GAA6B,IAAI,CAACC,OAAO;QAAjCC,KAAK,GAAAF,aAAA,CAALE,KAAK;QAAEC,SAAS,GAAAH,aAAA,CAATG,SAAS;MAExBC,UAAU,CAAC,YAAM;QAAA,IAAAC,qBAAA,EAAAC,sBAAA,EAAAC,qBAAA;QACf,IAAMC,UAAU,GAAG,EAAAH,qBAAA,IAAAC,sBAAA,GAACP,MAAI,CAACU,OAAO,CAACC,OAAO,cAAAJ,sBAAA,uBAApBA,sBAAA,CAAsBK,qBAAqB,CAAC,CAAC,CAACC,MAAM,cAAAP,qBAAA,cAAAA,qBAAA,GAAI,CAAC,IAAI,CAAC;QAClF,CAAAE,qBAAA,GAAAR,MAAI,CAACc,YAAY,CAACH,OAAO,cAAAH,qBAAA,eAAzBA,qBAAA,CAA2BO,QAAQ,CAAC;UAAEC,GAAG,EAAEb,KAAK,GAAGC,SAAS,GAAGK,UAAU,GAAGL,SAAS,GAAG;QAAE,CAAC,CAAC;MAC9F,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;IACV;EAAC;IAAAP,GAAA;IAAAC,KAAA,EAaD,SAAAmB,MAAMA,CAAA,EAAG;MAAA,IAAAC,IAAA,QAAAhB,OAAA;QAAAiB,KAAA;MACP,IAAMC,iBAAiB,GA0BTC,sBAAmB;MAzBjC,IAAMC,IAAI,GAAGD,sBAAmB,CAACE,GAAG;MAEpC,IAAAC,WAAA,GAAuC,IAAI,CAAC/B,KAAK;QAAzCJ,eAAe,GAAAmC,WAAA,CAAfnC,eAAe;QAAED,SAAS,GAAAoC,WAAA,CAATpC,SAAS;MAClC,IAAAqC,cAAA,GAAkF,IAAI,CAACvB,OAAO;QAAtFwB,IAAI,GAAAD,cAAA,CAAJC,IAAI;QAAEtB,SAAS,GAAAqB,cAAA,CAATrB,SAAS;QAAEuB,UAAU,GAAAF,cAAA,CAAVE,UAAU;QAAEC,MAAM,GAAAH,cAAA,CAANG,MAAM;QAAaC,SAAS,GAAAJ,cAAA,CAApBK,SAAS;QAAaC,UAAU,GAAAN,cAAA,CAAVM,UAAU;MAE7E,IAAMC,YAAY,GAAG,CAAC;MACtB,IAAMC,YAAY,GAAG5C,eAAe,KAAK,IAAI,GAAGsC,UAAU,GAAG,CAAC;MAC9D,IAAMO,YAAY,GAAG7C,eAAe,KAAK,IAAI,GAAG,CAAC,GAAGsC,UAAU;MAE9D,IAAMQ,UAAU,GAAGC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,KAAK,CAAClD,SAAS,GAAGgB,SAAS,CAAC,GAAG6B,YAAY,EAAE,CAAC,CAAC;MAEhF,IAAMM,SAAS,GAAGlD,eAAe,KAAK,IAAI,IAAID,SAAS,KAAK,CAAC,GACzDuC,UAAU,GACVS,IAAI,CAACI,GAAG,CACNJ,IAAI,CAACK,IAAI,CAAC,CAACrD,SAAS,GAAG4C,YAAY,IAAI5B,SAAS,CAAC,GAAG8B,YAAY,EAChER,IAAI,CAAC/C,MACP,CAAC;MAEL,IAAM+D,YAAY,GAAGhB,IAAI,CAACiB,KAAK,CAACR,UAAU,EAAEI,SAAS,CAAC;MACtD,IAAMK,YAAY,GAAGxC,SAAS,GAAG+B,UAAU;MAC3C,IAAMU,eAAe,GAAGzC,SAAS,IAAIsB,IAAI,CAAC/C,MAAM,GAAG4D,SAAS,CAAC;MAE7D,OAAApB,KAAA,GAAO,IAAAhD,aAAO,EAACyD,MAAM,CAAC,eACpB5D,MAAA,YAAA8E,aAAA,CAAC7E,QAAA,CAAA8E,sBAAsB,EAAA5B,KAAA,CAAA6B,EAAA,6CACrBhF,MAAA,YAAA8E,aAAA,CAAC1B,iBAAiB,EAAAD,KAAA,CAAA6B,EAAA,0BAAAC,cAAA,qBAAAtF,KAAA,CAAAuF,WAAA;QAAA,UAER,IAAI;QAAA,cACA,EAAE;QAAA,eACF,OAAO;QAAA,YACT,IAAI,CAACC,YAAY;QAAA,mBACX,MAAM;QAAA,OACjB,IAAI,CAACzC;MAAO,GAAAQ,IAAA,kBAEjBlD,MAAA,YAAA8E,aAAA,CAAChF,WAAA,WAAmB,CAACsF,SAAS;QAACC,GAAG,EAAE,IAAI,CAACvC,YAAa;QAACwC,QAAQ,EAAEC,SAAU;QAACC,CAAC,EAAE9B,IAAI,CAAC/C,MAAM,GAAGyB;MAAU,gBACrGpC,MAAA,YAAA8E,aAAA,CAACjF,eAAA,CAAA4F,GAAG,EAAAtC,KAAA,CAAA6B,EAAA;QAAA,KAAIJ;MAAY,EAAG,CAAC,EACvBF,YAAY,CAACgB,GAAG,CAAC,UAACC,IAAI,EAAExD,KAAK,EAAK;QACjC,oBAAOnC,MAAA,YAAA8E,aAAA,CAACjB,SAAS;UAAChC,GAAG,EAAEsC,UAAU,GAAGhC,KAAM;UAACyD,GAAG,EAAED,IAAK;UAACxD,KAAK,EAAEgC,UAAU,GAAGhC,KAAM;UAAC0D,IAAI,EAAE9B;QAAW,CAAE,CAAC;MACvG,CAAC,CAAC,eACF/D,MAAA,YAAA8E,aAAA,CAACjF,eAAA,CAAA4F,GAAG,EAAAtC,KAAA,CAAA6B,EAAA;QAAA,KAAIH;MAAe,EAAG,CACG,CAAC,eAChC7E,MAAA,YAAA8E,aAAA,CAACxB,IAAI,EAAAH,KAAA,CAAA6B,EAAA;QAAA,eAAa;MAAY,EAAE,CAAC,eACjChF,MAAA,YAAA8E,aAAA,CAACxB,IAAI,EAAAH,KAAA,CAAA6B,EAAA;QAAA,eAAa;MAAU,EAAE,CACb,CACG,CAAC;IAE7B;EAAC;AAAA,EAnF8Dc,eAAS;AAAA,IAAA7E,gBAAA,aAApEZ,eAAe,iBACE,aAAa;AAAA,IAAAY,gBAAA,aAD9BZ,eAAe,WAEJH,KAAK;AAAA,IAAAe,gBAAA,aAFhBZ,eAAe,kBAIG;EACpBsD,UAAU,EAAE;AACd,CAAC;AAuFI,IAAMoC,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,IAAAE,qBAAe,EAAC5F,eAAe,CAAyB","ignoreList":[]}

package/lib/cjs/index.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport type {\n  DropdownContext,\n  DropdownProps,\n  DropdownHandlers,\n  DropdownTriggerProps,\n  DropdownPopperAriaProps,\n} from '@semcore/dropdown';\nimport type Dropdown from '@semcore/dropdown';\nimport type { Box, BoxProps, FlexProps, Flex } from '@semcore/flex-box';\nimport type { eventInteraction } from '@semcore/popper';\nimport type { ScrollAreaProps } from '@semcore/scroll-area';\nimport type { Text } from '@semcore/typography';\n\nexport type DropdownMenuSize = 'm' | 'l';\n\n/** @deprecated */\nexport interface IDropdownMenuProps extends DropdownMenuProps, UnknownProperties {}\nexport type DropdownMenuProps = DropdownProps & {\n  /**\n   * Set role `menuitemradio` (or `menuitemcheckbox` if `multiselect`) for Dropdown.Item\n   */\n  selectable?: boolean;\n  /**\n   * Multiple select\n   */\n  multiselect?: boolean;\n  /**\n   * Size of the menu\n   * @default m\n   */\n  size?: DropdownMenuSize;\n  /**\n   * Index of the element selected by default\n   */\n  defaultHighlightedIndex?: number | null;\n  /**\n   * Index of the selected item\n   */\n  highlightedIndex?: number | null;\n  /**\n   * Callback for highlightedIndex change\n   * highlightedIndex -  Index of the selected item\n   */\n  onHighlightedIndexChange?: (highlightedIndex: number | null) => void;\n  /** Specifies the locale for i18n support */\n  locale?: string;\n  /**\n   * Flag for menu that using as actions on DropdownMenu.Item\n   */\n  inlineActions?: boolean;\n\n  /**\n   * Count of menu items (for virtual lists only)\n   */\n  itemsCount?: number;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuListProps extends DropdownMenuListProps, UnknownProperties {}\nexport type DropdownMenuListProps = BoxProps &\n  ScrollAreaProps & {\n    /**\n     * Size of the menu\n     * @default m\n     */\n    size?: DropdownMenuSize;\n  };\n\n/** @deprecated */\nexport interface IDropdownMenuMenuProps extends DropdownMenuMenuProps, UnknownProperties {}\nexport type DropdownMenuMenuProps = DropdownMenuListProps & {};\n\n/** @deprecated */\nexport interface IDropdownMenuItemProps extends DropdownMenuItemProps, UnknownProperties {}\nexport type DropdownMenuItemProps = FlexProps & {\n  /**\n   * Enables selected state. For selectable dropdowns only.\n   */\n  selected?: boolean;\n  /**\n   * Disables item\n   */\n  disabled?: boolean;\n  /**\n   * Adds focus styles around\n   * @deprecated set focus manually by `.focus()` method to the same behaviour\n   */\n  highlighted?: boolean;\n  /**\n   * Disables hover state\n   * @deprecated use `disabled` instead\n   */\n  notInteractive?: boolean;\n  /**\n   * Size of the component\n   * @default m\n   */\n  size?: DropdownMenuSize;\n  /**\n   * Index of item (used in virtualized lists)\n   */\n  index?: number;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuItemHintProps extends DropdownMenuItemHintProps, UnknownProperties {}\nexport type DropdownMenuItemHintProps = FlexProps & {\n  /**\n   * Size of the component\n   * @default m\n   */\n  size?: DropdownMenuSize;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuItemTitleProps\n  extends DropdownMenuItemTitleProps,\n  UnknownProperties {}\nexport type DropdownMenuItemTitleProps = FlexProps & {\n  /**\n   * Size of the component\n   * @default m\n   */\n  size?: DropdownMenuSize;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuContext extends DropdownMenuContext, UnknownProperties {}\nexport type DropdownMenuContext = DropdownContext & {\n  /**\n    * Tracks which menu item is currently highlighted/focused for keyboard navigation\n  **/\n  highlightedIndex?: number;\n  /**\n    * Returns props for the menu list container\n  **/\n  getListProps: PropGetterFn;\n  /**\n    * Returns props for individual menu items\n  **/\n  getItemProps: PropGetterFn;\n  /**\n    * Returns props for item hint/description elements\n  **/\n  getItemHintProps: PropGetterFn;\n  /**\n    *  Returns props for item title elements\n  **/\n  getItemTitleProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuHandlers extends DropdownMenuHandlers, UnknownProperties {}\nexport type DropdownMenuHandlers = DropdownHandlers & {\n  highlightedIndex: (index: number) => void;\n};\n\nexport type DropdownMenuTriggerProps = DropdownTriggerProps;\n\ndeclare const DropdownMenu: Intergalactic.Component<\n  'div',\n  DropdownMenuProps,\n  DropdownMenuContext,\n  [handlers: DropdownMenuHandlers]\n> & {\n  Trigger: typeof Dropdown.Trigger;\n  Popper: Intergalactic.Component<'div', DropdownMenuProps & DropdownPopperAriaProps>;\n  List: Intergalactic.Component<\n    'div',\n    DropdownMenuListProps,\n    DropdownMenuContext,\n    [handlers: DropdownMenuHandlers]\n  >;\n  Actions: Intergalactic.Component<\n    typeof Flex,\n    DropdownMenuListProps,\n    DropdownMenuContext,\n    [handlers: DropdownMenuHandlers]\n  >;\n  Menu: Intergalactic.Component<\n    'div',\n    DropdownMenuMenuProps,\n    DropdownMenuContext,\n    [handlers: DropdownMenuHandlers]\n  >;\n  Item: Intergalactic.Component<\n    typeof Dropdown.Item,\n    DropdownMenuItemProps,\n    DropdownMenuContext,\n    [handlers: DropdownMenuHandlers]\n  > & {\n    Addon: typeof Box;\n    Content: typeof Flex;\n    Text: typeof Text;\n    Hint: typeof Flex;\n  };\n  /**\n   * @deprecated Use Group with title prop\n   */\n  ItemTitle: Intergalactic.Component<'div', DropdownMenuItemTitleProps>;\n  /**\n   * @deprecated Use prop subTitle on Group or Item component\n   */\n  ItemHint: Intergalactic.Component<'div', DropdownMenuItemHintProps>;\n  Group: typeof Dropdown.Group;\n  /**\n   * @deprecated Use Item instead of Nesting\n   */\n  Nesting: Intergalactic.Component<\n    'div',\n    DropdownMenuItemProps,\n    DropdownMenuContext,\n    [handlers: DropdownMenuHandlers]\n  > & {\n    /**\n     * @deprecated Use Item instead of Nesting\n     */\n    Trigger: Intergalactic.Component<'div', DropdownMenuItemProps>;\n    /**\n     * @deprecated Use Item instead of Nesting\n     */\n    Item: Intergalactic.Component<'div', DropdownMenuItemProps>;\n    /**\n     * @deprecated Use Item instead of Nesting\n     */\n    Addon: typeof Box;\n  };\n\n  selectedIndexContext: React.Context<number>;\n  nestedMenuInteraction: eventInteraction;\n};\n\nexport default DropdownMenu;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport type {\n  DropdownContext,\n  DropdownProps,\n  DropdownHandlers,\n  DropdownTriggerProps,\n  DropdownPopperAriaProps,\n} from '@semcore/dropdown';\nimport type Dropdown from '@semcore/dropdown';\nimport type { Box, BoxProps, FlexProps, Flex } from '@semcore/flex-box';\nimport type { eventInteraction } from '@semcore/popper';\nimport type { ScrollAreaProps } from '@semcore/scroll-area';\nimport type { Text } from '@semcore/typography';\n\nimport type { VirtualList, RenderRowProps } from './components/VirtualList';\n\nexport type DropdownMenuSize = 'm' | 'l';\n\n/** @deprecated */\nexport interface IDropdownMenuProps extends DropdownMenuProps, UnknownProperties {}\nexport type DropdownMenuProps = DropdownProps & {\n  /**\n   * Set role `menuitemradio` (or `menuitemcheckbox` if `multiselect`) for Dropdown.Item\n   */\n  selectable?: boolean;\n  /**\n   * Multiple select\n   */\n  multiselect?: boolean;\n  /**\n   * Size of the menu\n   * @default m\n   */\n  size?: DropdownMenuSize;\n  /**\n   * Index of the element selected by default\n   */\n  defaultHighlightedIndex?: number | null;\n  /**\n   * Index of the selected item\n   */\n  highlightedIndex?: number | null;\n  /**\n   * Callback for highlightedIndex change\n   * highlightedIndex -  Index of the selected item\n   */\n  onHighlightedIndexChange?: (highlightedIndex: number | null) => void;\n  /** Specifies the locale for i18n support */\n  locale?: string;\n  /**\n   * Flag for menu that using as actions on DropdownMenu.Item\n   */\n  inlineActions?: boolean;\n\n  /**\n   * Count of menu items (for virtual lists only)\n   */\n  itemsCount?: number;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuListProps extends DropdownMenuListProps, UnknownProperties {}\nexport type DropdownMenuListProps = BoxProps &\n  ScrollAreaProps & {\n    /**\n     * Size of the menu\n     * @default m\n     */\n    size?: DropdownMenuSize;\n  };\n\n/** @deprecated */\nexport interface IDropdownMenuMenuProps extends DropdownMenuMenuProps, UnknownProperties {}\nexport type DropdownMenuMenuProps = DropdownMenuListProps & {};\n\n/** @deprecated */\nexport interface IDropdownMenuItemProps extends DropdownMenuItemProps, UnknownProperties {}\nexport type DropdownMenuItemProps = FlexProps & {\n  /**\n   * Enables selected state. For selectable dropdowns only.\n   */\n  selected?: boolean;\n  /**\n   * Disables item\n   */\n  disabled?: boolean;\n  /**\n   * Adds focus styles around\n   * @deprecated set focus manually by `.focus()` method to the same behaviour\n   */\n  highlighted?: boolean;\n  /**\n   * Disables hover state\n   * @deprecated use `disabled` instead\n   */\n  notInteractive?: boolean;\n  /**\n   * Size of the component\n   * @default m\n   */\n  size?: DropdownMenuSize;\n  /**\n   * Index of item (used in virtualized lists)\n   */\n  index?: number;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuItemHintProps extends DropdownMenuItemHintProps, UnknownProperties {}\nexport type DropdownMenuItemHintProps = FlexProps & {\n  /**\n   * Size of the component\n   * @default m\n   */\n  size?: DropdownMenuSize;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuItemTitleProps\n  extends DropdownMenuItemTitleProps,\n  UnknownProperties {}\nexport type DropdownMenuItemTitleProps = FlexProps & {\n  /**\n   * Size of the component\n   * @default m\n   */\n  size?: DropdownMenuSize;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuContext extends DropdownMenuContext, UnknownProperties {}\nexport type DropdownMenuContext = DropdownContext & {\n  /**\n    * Tracks which menu item is currently highlighted/focused for keyboard navigation\n  **/\n  highlightedIndex?: number;\n  /**\n    * Returns props for the menu list container\n  **/\n  getListProps: PropGetterFn;\n  /**\n    * Returns props for individual menu items\n  **/\n  getItemProps: PropGetterFn;\n  /**\n    * Returns props for item hint/description elements\n  **/\n  getItemHintProps: PropGetterFn;\n  /**\n    *  Returns props for item title elements\n  **/\n  getItemTitleProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuHandlers extends DropdownMenuHandlers, UnknownProperties {}\nexport type DropdownMenuHandlers = DropdownHandlers & {\n  highlightedIndex: (index: number) => void;\n};\n\nexport type DropdownMenuTriggerProps = DropdownTriggerProps;\n\ndeclare const DropdownMenu: Intergalactic.Component<\n  'div',\n  DropdownMenuProps,\n  DropdownMenuContext,\n  [handlers: DropdownMenuHandlers]\n> & {\n  Trigger: typeof Dropdown.Trigger;\n  Popper: Intergalactic.Component<'div', DropdownMenuProps & DropdownPopperAriaProps>;\n  List: Intergalactic.Component<\n    'div',\n    DropdownMenuListProps,\n    DropdownMenuContext,\n    [handlers: DropdownMenuHandlers]\n  >;\n  Actions: Intergalactic.Component<\n    typeof Flex,\n    DropdownMenuListProps,\n    DropdownMenuContext,\n    [handlers: DropdownMenuHandlers]\n  >;\n  Menu: Intergalactic.Component<\n    'div',\n    DropdownMenuMenuProps,\n    DropdownMenuContext,\n    [handlers: DropdownMenuHandlers]\n  >;\n  Item: Intergalactic.Component<\n    typeof Dropdown.Item,\n    DropdownMenuItemProps,\n    DropdownMenuContext,\n    [handlers: DropdownMenuHandlers]\n  > & {\n    Addon: typeof Box;\n    Content: typeof Flex;\n    Text: typeof Text;\n    Hint: typeof Flex;\n  };\n  /**\n   * @deprecated Use Group with title prop\n   */\n  ItemTitle: Intergalactic.Component<'div', DropdownMenuItemTitleProps>;\n  /**\n   * @deprecated Use prop subTitle on Group or Item component\n   */\n  ItemHint: Intergalactic.Component<'div', DropdownMenuItemHintProps>;\n  Group: typeof Dropdown.Group;\n\n  VirtualList: typeof VirtualList;\n\n  /**\n   * @deprecated Use Item instead of Nesting\n   */\n  Nesting: Intergalactic.Component<\n    'div',\n    DropdownMenuItemProps,\n    DropdownMenuContext,\n    [handlers: DropdownMenuHandlers]\n  > & {\n    /**\n     * @deprecated Use Item instead of Nesting\n     */\n    Trigger: Intergalactic.Component<'div', DropdownMenuItemProps>;\n    /**\n     * @deprecated Use Item instead of Nesting\n     */\n    Item: Intergalactic.Component<'div', DropdownMenuItemProps>;\n    /**\n     * @deprecated Use Item instead of Nesting\n     */\n    Addon: typeof Box;\n  };\n\n  selectedIndexContext: React.Context<number>;\n  nestedMenuInteraction: eventInteraction;\n};\n\nexport default DropdownMenu;\n\nexport {\n  RenderRowProps,\n};\n"],"mappings":"","ignoreList":[]}

package/lib/es6/DropdownMenu.js

@@ -33,36 +33,32 @@ import { forkRef } from '@semcore/core/lib/utils/ref';
 import { useUID } from '@semcore/core/lib/utils/uniqueID';
 import Dropdown, { AbstractDropdown, selectedIndexContext, enhance } from '@semcore/dropdown';
 import { Flex, Box } 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';
+import { VirtualList } from './components/VirtualList';
 /*!__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)}", /*__inner_css_end__*/"1tow4_gg_"),
+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_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_"
 });
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
-var ListBoxContextProvider = function ListBoxContextProvider(_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 DropdownMenuRoot() {
@@ -74,6 +70,15 @@ var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
     _this = _callSuper(this, DropdownMenuRoot, [].concat(args));
     _defineProperty(_this, "actionsRef", /*#__PURE__*/React.createRef());
     _defineProperty(_this, "role", 'menu');
+    /**
+     * TODO: It needs to be reconsidered in a future implementation so that component accepts items as a prop instead of JSX.
+     * Tab index recalculation flag.
+     *
+     * When an item becomes disabled while highlighted, we need to transfer focus
+     * to the next available focusable item. This flag ensures the focus lock
+     * remains within proper boundaries during the initial render cycle.
+    */
+    _defineProperty(_this, "shouldRecalculateItemTabIndex", false);
     return _this;
   }
   _inherits(DropdownMenuRoot, _AbstractDropdown);
@@ -88,7 +93,7 @@ var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
               _this2.focusAndScrollToSelected();
               // for some reason, Google Chrome optimizes this timeout with 0 value with previous render (when we set aria-selected)
               // and that's why its skip scrollToNodes. We selected the appropriate timeout manually.
-            }, 30);
+            }, 50);
           }
         }]
       });
@@ -104,7 +109,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: selected,
         options: options
@@ -113,12 +118,13 @@ 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 !== undefined || 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({
@@ -134,12 +140,11 @@ 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;
-
-      // this case is handled slightly differently on line 63.
-      if (selected && options && this.asProps.itemsCount === undefined) return;
+      if (selected && options && !((_this$menuRef$current2 = this.menuRef.current) !== null && _this$menuRef$current2 !== void 0 && _this$menuRef$current2.dataset.isVirtual)) return;
       _superPropGet(DropdownMenuRoot, "afterOpenPopper", this, 3)([]);
     }
   }, {
@@ -172,6 +177,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(DropdownMenuRoot, "getListProps", this, 3)([])), {}, {
+        onKeyDown: callAllEventHandlers(this.handlePreventCommonKeyDown.bind(this), this.handleKeyDownForMenu('list'), this.handleArrowKeyDown.bind(this))
+      });
+    }
   }, {
     key: "getPopperProps",
     value: function getPopperProps() {
@@ -187,18 +199,36 @@ 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(DropdownMenuRoot, "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);
         },
@@ -246,6 +276,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();
@@ -311,11 +348,11 @@ _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({}, _assignProps2({
@@ -330,10 +367,10 @@ 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({}, _assignProps3({}, _ref3))));
 }
@@ -359,18 +396,18 @@ function Menu(props) {
     role: null
   }), /*#__PURE__*/React.createElement(DropdownMenu.List, _assignProps4({}, _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),
@@ -382,7 +419,8 @@ function Item(_ref25) {
     ref: forkRef(forwardRef, itemRef),
     role: role,
     tabIndex: tabIndex,
-    ariaChecked: ariaChecked
+    ariaChecked: ariaChecked,
+    disabled: disabled
   };
   var ariaDescribes = [];
   var hasSubMenu = isAdvanceMode(Children, [DropdownMenu.displayName], true);
@@ -450,10 +488,10 @@ function Trigger() {
   var _ref7 = arguments[0];
   return /*#__PURE__*/React.createElement(Dropdown.Trigger, _assignProps7({}, _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);
@@ -485,20 +523,21 @@ function ItemContent(_ref26) {
     "aria-expanded": subMenu,
     "aria-checked": menuItemCtxValue.ariaChecked,
     "alignItems": 'center',
-    "justifyContent": menuItemCtxValue.hasSubMenu ? 'space-between' : undefined
+    "justifyContent": menuItemCtxValue.hasSubMenu ? 'space-between' : undefined,
+    "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({}, _assignProps9({}, _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;
@@ -534,9 +573,9 @@ function Title(props) {
 /**
  * @deprecated
  */
-function Nesting(_ref29) {
+function Nesting(_ref28) {
   var _ref11 = arguments[0];
-  var forwardRef = _ref29.forwardRef;
+  var forwardRef = _ref28.forwardRef;
   return /*#__PURE__*/React.createElement(DropdownMenu.Item, _assignProps11({
     "ref": forwardRef
   }, _ref11));
@@ -545,9 +584,9 @@ function Nesting(_ref29) {
 /**
  * @deprecated
  */
-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, _assignProps12({
     "tag": DropdownMenu.Trigger,
     "ref": forwardRef,
@@ -558,6 +597,7 @@ var DropdownMenu = createComponent(DropdownMenuRoot, {
   Trigger: Trigger,
   Popper: Dropdown.Popper,
   List: List,
+  VirtualList: VirtualList,
   Actions: Actions,
   Menu: Menu,
   Item: [Item, {