@semcore/dropdown-menu 16.2.1 → 16.2.2-prerelease.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README.md +4 -4
- package/lib/cjs/DropdownMenu.js +16 -16
- package/lib/cjs/components/VirtualList.js +17 -17
- package/lib/cjs/components/VirtualList.js.map +1 -1
- package/lib/es6/DropdownMenu.js +16 -16
- package/lib/es6/components/VirtualList.js +17 -17
- package/lib/es6/components/VirtualList.js.map +1 -1
- package/lib/esm/DropdownMenu.mjs +17 -17
- package/lib/esm/components/VirtualList.mjs +18 -18
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [16.2.2] - 2026-02-08
|
|
6
|
+
|
|
7
|
+
### Fixed
|
|
8
|
+
|
|
9
|
+
- Amount of prepared items for back scroll when `VirtualList` is used.
|
|
10
|
+
|
|
5
11
|
## [16.2.1] - 2025-12-18
|
|
6
12
|
|
|
7
13
|
### Fixed
|
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/@semcore/dropdown-menu)
|
|
4
4
|
[](https://www.npmjs.com/package/@semcore/dropdown-menu)
|
|
5
|
-
[](https://github.com/semrush/intergalactic/blob/
|
|
5
|
+
[](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE)
|
|
6
6
|
|
|
7
7
|
> This component is part of the Intergalactic Design System
|
|
8
8
|
|
|
@@ -20,13 +20,13 @@ npm install @semcore/dropdown-menu
|
|
|
20
20
|
|
|
21
21
|
## 👤 Author
|
|
22
22
|
|
|
23
|
-
[UI-kit team](https://github.com/semrush/intergalactic/blob/
|
|
23
|
+
[UI-kit team](https://github.com/semrush/intergalactic/blob/HEAD/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
|
|
24
24
|
|
|
25
25
|
## 🤝 Contributing
|
|
26
26
|
|
|
27
27
|
Contributions, issues and feature requests are welcome!
|
|
28
28
|
|
|
29
|
-
Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/
|
|
29
|
+
Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/HEAD/CONTRIBUTING.md).
|
|
30
30
|
|
|
31
31
|
## Show your support
|
|
32
32
|
|
|
@@ -34,4 +34,4 @@ Give a ⭐️ if this project helped you!
|
|
|
34
34
|
|
|
35
35
|
## 📝 License
|
|
36
36
|
|
|
37
|
-
This project is [MIT](https://github.com/semrush/intergalactic/blob/
|
|
37
|
+
This project is [MIT](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE) licensed.
|
package/lib/cjs/DropdownMenu.js
CHANGED
|
@@ -33,24 +33,24 @@ var _Context = require("./components/Context");
|
|
|
33
33
|
var _VirtualList = require("./components/VirtualList");
|
|
34
34
|
var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
|
|
35
35
|
/*!__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
|
|
36
|
-
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".
|
|
36
|
+
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDropdownMenuList_1ulzv_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_1ulzv_gg_ .___SBar_1ulzv_gg_{z-index:3}.___SDropdownMenuList_1ulzv_gg_ .___SShadowHorizontal_1ulzv_gg_:after,.___SDropdownMenuList_1ulzv_gg_ .___SShadowHorizontal_1ulzv_gg_:before,.___SDropdownMenuList_1ulzv_gg_ .___SShadowVertical_1ulzv_gg_:after,.___SDropdownMenuList_1ulzv_gg_ .___SShadowVertical_1ulzv_gg_:before{border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuItemContainer_1ulzv_gg_ .___SItemContent_1ulzv_gg_:focus-visible{outline:0}.___SDropdownMenuItemContainer_1ulzv_gg_.__nesting-trigger_1ulzv_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_1ulzv_gg_,.___SItemContentText_1ulzv_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_1ulzv_gg_:first-child,.___SItemContentText_1ulzv_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1ulzv_gg_:last-child,.___SItemContentText_1ulzv_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_1ulzv_gg_,.___SDropdownMenuNesting_1ulzv_gg_._size_l_1ulzv_gg_,.___SDropdownMenuNesting_1ulzv_gg_._size_m_1ulzv_gg_{padding:0}.___SDropdownMenuNesting_1ulzv_gg_.__highlighted_1ulzv_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_1ulzv_gg_._size_l_1ulzv_gg_,.___SDropdownNestingItem_1ulzv_gg_._size_m_1ulzv_gg_{padding-right:0}.___SDropdownNestingItem_1ulzv_gg_ .___SDropdownMenuItemContainer_1ulzv_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemHint_1ulzv_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}", /*__inner_css_end__*/"1ulzv_gg_"),
|
|
37
37
|
/*__reshadow_css_end__*/
|
|
38
38
|
{
|
|
39
|
-
"__SDropdownMenuItemContainer": "
|
|
40
|
-
"_nesting-trigger": "__nesting-
|
|
41
|
-
"__SDropdownMenuNesting": "
|
|
42
|
-
"_size_l": "
|
|
43
|
-
"_size_m": "
|
|
44
|
-
"_highlighted": "
|
|
45
|
-
"__SDropdownNestingItem": "
|
|
46
|
-
"__SItemHint": "
|
|
47
|
-
"__SDropdownMenuList": "
|
|
48
|
-
"__SBar": "
|
|
49
|
-
"__SShadowHorizontal": "
|
|
50
|
-
"__SShadowVertical": "
|
|
51
|
-
"__SItemContent": "
|
|
52
|
-
"__SDropdownMenuItemAddon": "
|
|
53
|
-
"__SItemContentText": "
|
|
39
|
+
"__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_1ulzv_gg_",
|
|
40
|
+
"_nesting-trigger": "__nesting-trigger_1ulzv_gg_",
|
|
41
|
+
"__SDropdownMenuNesting": "___SDropdownMenuNesting_1ulzv_gg_",
|
|
42
|
+
"_size_l": "_size_l_1ulzv_gg_",
|
|
43
|
+
"_size_m": "_size_m_1ulzv_gg_",
|
|
44
|
+
"_highlighted": "__highlighted_1ulzv_gg_",
|
|
45
|
+
"__SDropdownNestingItem": "___SDropdownNestingItem_1ulzv_gg_",
|
|
46
|
+
"__SItemHint": "___SItemHint_1ulzv_gg_",
|
|
47
|
+
"__SDropdownMenuList": "___SDropdownMenuList_1ulzv_gg_",
|
|
48
|
+
"__SBar": "___SBar_1ulzv_gg_",
|
|
49
|
+
"__SShadowHorizontal": "___SShadowHorizontal_1ulzv_gg_",
|
|
50
|
+
"__SShadowVertical": "___SShadowVertical_1ulzv_gg_",
|
|
51
|
+
"__SItemContent": "___SItemContent_1ulzv_gg_",
|
|
52
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1ulzv_gg_",
|
|
53
|
+
"__SItemContentText": "___SItemContentText_1ulzv_gg_"
|
|
54
54
|
});
|
|
55
55
|
var menuItemContext = /*#__PURE__*/_react["default"].createContext({});
|
|
56
56
|
var DropdownMenuRoot = /*#__PURE__*/function (_AbstractDropdown) {
|
|
@@ -17,24 +17,24 @@ var _scrollArea = _interopRequireDefault(require("@semcore/scroll-area"));
|
|
|
17
17
|
var _react = _interopRequireDefault(require("react"));
|
|
18
18
|
var _Context = require("./Context");
|
|
19
19
|
/*!__reshadow-styles__:"../style/dropdown-menu.shadow.css"*/
|
|
20
|
-
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".
|
|
20
|
+
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDropdownMenuList_1ulzv_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_1ulzv_gg_ .___SBar_1ulzv_gg_{z-index:3}.___SDropdownMenuList_1ulzv_gg_ .___SShadowHorizontal_1ulzv_gg_:after,.___SDropdownMenuList_1ulzv_gg_ .___SShadowHorizontal_1ulzv_gg_:before,.___SDropdownMenuList_1ulzv_gg_ .___SShadowVertical_1ulzv_gg_:after,.___SDropdownMenuList_1ulzv_gg_ .___SShadowVertical_1ulzv_gg_:before{border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuItemContainer_1ulzv_gg_ .___SItemContent_1ulzv_gg_:focus-visible{outline:0}.___SDropdownMenuItemContainer_1ulzv_gg_.__nesting-trigger_1ulzv_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_1ulzv_gg_,.___SItemContentText_1ulzv_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_1ulzv_gg_:first-child,.___SItemContentText_1ulzv_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1ulzv_gg_:last-child,.___SItemContentText_1ulzv_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_1ulzv_gg_,.___SDropdownMenuNesting_1ulzv_gg_._size_l_1ulzv_gg_,.___SDropdownMenuNesting_1ulzv_gg_._size_m_1ulzv_gg_{padding:0}.___SDropdownMenuNesting_1ulzv_gg_.__highlighted_1ulzv_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_1ulzv_gg_._size_l_1ulzv_gg_,.___SDropdownNestingItem_1ulzv_gg_._size_m_1ulzv_gg_{padding-right:0}.___SDropdownNestingItem_1ulzv_gg_ .___SDropdownMenuItemContainer_1ulzv_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemHint_1ulzv_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}", /*__inner_css_end__*/"1ulzv_gg_"),
|
|
21
21
|
/*__reshadow_css_end__*/
|
|
22
22
|
{
|
|
23
|
-
"__SDropdownMenuItemContainer": "
|
|
24
|
-
"_nesting-trigger": "__nesting-
|
|
25
|
-
"__SDropdownMenuNesting": "
|
|
26
|
-
"_size_l": "
|
|
27
|
-
"_size_m": "
|
|
28
|
-
"_highlighted": "
|
|
29
|
-
"__SDropdownNestingItem": "
|
|
30
|
-
"__SItemHint": "
|
|
31
|
-
"__SDropdownMenuList": "
|
|
32
|
-
"__SBar": "
|
|
33
|
-
"__SShadowHorizontal": "
|
|
34
|
-
"__SShadowVertical": "
|
|
35
|
-
"__SItemContent": "
|
|
36
|
-
"__SDropdownMenuItemAddon": "
|
|
37
|
-
"__SItemContentText": "
|
|
23
|
+
"__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_1ulzv_gg_",
|
|
24
|
+
"_nesting-trigger": "__nesting-trigger_1ulzv_gg_",
|
|
25
|
+
"__SDropdownMenuNesting": "___SDropdownMenuNesting_1ulzv_gg_",
|
|
26
|
+
"_size_l": "_size_l_1ulzv_gg_",
|
|
27
|
+
"_size_m": "_size_m_1ulzv_gg_",
|
|
28
|
+
"_highlighted": "__highlighted_1ulzv_gg_",
|
|
29
|
+
"__SDropdownNestingItem": "___SDropdownNestingItem_1ulzv_gg_",
|
|
30
|
+
"__SItemHint": "___SItemHint_1ulzv_gg_",
|
|
31
|
+
"__SDropdownMenuList": "___SDropdownMenuList_1ulzv_gg_",
|
|
32
|
+
"__SBar": "___SBar_1ulzv_gg_",
|
|
33
|
+
"__SShadowHorizontal": "___SShadowHorizontal_1ulzv_gg_",
|
|
34
|
+
"__SShadowVertical": "___SShadowVertical_1ulzv_gg_",
|
|
35
|
+
"__SItemContent": "___SItemContent_1ulzv_gg_",
|
|
36
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1ulzv_gg_",
|
|
37
|
+
"__SItemContentText": "___SItemContentText_1ulzv_gg_"
|
|
38
38
|
});
|
|
39
39
|
var VirtualListRoot = /*#__PURE__*/function (_Component) {
|
|
40
40
|
function VirtualListRoot() {
|
|
@@ -101,7 +101,7 @@ var VirtualListRoot = /*#__PURE__*/function (_Component) {
|
|
|
101
101
|
RenderRow = _this$asProps2.renderRow,
|
|
102
102
|
customData = _this$asProps2.customData;
|
|
103
103
|
var offsetHeight = (_this$listRef$current = (_this$listRef$current2 = this.listRef.current) === null || _this$listRef$current2 === void 0 ? void 0 : _this$listRef$current2.offsetHeight) !== null && _this$listRef$current !== void 0 ? _this$listRef$current : 0;
|
|
104
|
-
var prevPrepared = scrollDirection === '
|
|
104
|
+
var prevPrepared = scrollDirection === 'down' ? rowsBuffer / 2 : rowsBuffer;
|
|
105
105
|
var nextPrepared = scrollDirection === 'up' ? rowsBuffer / 2 : rowsBuffer;
|
|
106
106
|
var startIndex = Math.max(Math.floor(scrollTop / rowHeight) - prevPrepared, 0);
|
|
107
107
|
var lastIndex = Math.min(Math.ceil((scrollTop + offsetHeight) / rowHeight) + nextPrepared, rows.length);
|
|
@@ -1 +1 @@
|
|
|
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","rowsBuffer","setTimeout","_this2$listRef$curren","_this2$listRef$curren2","_this2$containerRef$c","listHeight","listRef","current","getBoundingClientRect","height","containerRef","scrollTo","top","forceUpdate","render","_ref","_ref2","_this$listRef$current","_this$listRef$current2","SDropdownMenuList","ScrollAreaComponent","SBar","Bar","_this$state","_this$asProps2","rows","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 = never> = {\n index: number;\n row: T;\n data: [D] extends [never] ? undefined : D;\n};\n\ntype VirtualListProps<T, D extends object = never> = {\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} & ([D] extends [never] ? { customData?: undefined } : {\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 = never> extends Component<VirtualListProps<T, D>, {}, State, [], { rowsBuffer: number; index: number }> {\n static displayName = 'VirtualList';\n static style = style;\n\n static defaultProps = {\n rowsBuffer: 6,\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, rowsBuffer } = 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\n if (index <= rowsBuffer) {\n this.forceUpdate(); // we need this for correct render all items with calculated container height\n }\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 = this.listRef.current?.offsetHeight ?? 0;\n const prevPrepared = scrollDirection === 'up' ? rowsBuffer / 2 : rowsBuffer;\n const nextPrepared = scrollDirection === 'up' ? rowsBuffer / 2 : rowsBuffer;\n\n const startIndex = Math.max(Math.floor(scrollTop / rowHeight) - prevPrepared, 0);\n\n const lastIndex = 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 // @ts-ignore\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 = never,\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":"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","ignoreList":[]}
|
|
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","rowsBuffer","setTimeout","_this2$listRef$curren","_this2$listRef$curren2","_this2$containerRef$c","listHeight","listRef","current","getBoundingClientRect","height","containerRef","scrollTo","top","forceUpdate","render","_ref","_ref2","_this$listRef$current","_this$listRef$current2","SDropdownMenuList","ScrollAreaComponent","SBar","Bar","_this$state","_this$asProps2","rows","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 = never> = {\n index: number;\n row: T;\n data: [D] extends [never] ? undefined : D;\n};\n\ntype VirtualListProps<T, D extends object = never> = {\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} & ([D] extends [never] ? { customData?: undefined } : {\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 = never> extends Component<VirtualListProps<T, D>, {}, State, [], { rowsBuffer: number; index: number }> {\n static displayName = 'VirtualList';\n static style = style;\n\n static defaultProps = {\n rowsBuffer: 6,\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, rowsBuffer } = 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\n if (index <= rowsBuffer) {\n this.forceUpdate(); // we need this for correct render all items with calculated container height\n }\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 = this.listRef.current?.offsetHeight ?? 0;\n const prevPrepared = scrollDirection === 'down' ? rowsBuffer / 2 : rowsBuffer;\n const nextPrepared = scrollDirection === 'up' ? rowsBuffer / 2 : rowsBuffer;\n\n const startIndex = Math.max(Math.floor(scrollTop / rowHeight) - prevPrepared, 0);\n\n const lastIndex = 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 // @ts-ignore\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 = never,\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":"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","ignoreList":[]}
|
package/lib/es6/DropdownMenu.js
CHANGED
|
@@ -39,24 +39,24 @@ import React from 'react';
|
|
|
39
39
|
import { ListBoxContextProvider } from './components/Context';
|
|
40
40
|
import { VirtualList } from './components/VirtualList';
|
|
41
41
|
/*!__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
|
|
42
|
-
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
42
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SDropdownMenuList_1ulzv_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_1ulzv_gg_ .___SBar_1ulzv_gg_{z-index:3}.___SDropdownMenuList_1ulzv_gg_ .___SShadowHorizontal_1ulzv_gg_:after,.___SDropdownMenuList_1ulzv_gg_ .___SShadowHorizontal_1ulzv_gg_:before,.___SDropdownMenuList_1ulzv_gg_ .___SShadowVertical_1ulzv_gg_:after,.___SDropdownMenuList_1ulzv_gg_ .___SShadowVertical_1ulzv_gg_:before{border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuItemContainer_1ulzv_gg_ .___SItemContent_1ulzv_gg_:focus-visible{outline:0}.___SDropdownMenuItemContainer_1ulzv_gg_.__nesting-trigger_1ulzv_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_1ulzv_gg_,.___SItemContentText_1ulzv_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_1ulzv_gg_:first-child,.___SItemContentText_1ulzv_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1ulzv_gg_:last-child,.___SItemContentText_1ulzv_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_1ulzv_gg_,.___SDropdownMenuNesting_1ulzv_gg_._size_l_1ulzv_gg_,.___SDropdownMenuNesting_1ulzv_gg_._size_m_1ulzv_gg_{padding:0}.___SDropdownMenuNesting_1ulzv_gg_.__highlighted_1ulzv_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_1ulzv_gg_._size_l_1ulzv_gg_,.___SDropdownNestingItem_1ulzv_gg_._size_m_1ulzv_gg_{padding-right:0}.___SDropdownNestingItem_1ulzv_gg_ .___SDropdownMenuItemContainer_1ulzv_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemHint_1ulzv_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}", /*__inner_css_end__*/"1ulzv_gg_"),
|
|
43
43
|
/*__reshadow_css_end__*/
|
|
44
44
|
{
|
|
45
|
-
"__SDropdownMenuItemContainer": "
|
|
46
|
-
"_nesting-trigger": "__nesting-
|
|
47
|
-
"__SDropdownMenuNesting": "
|
|
48
|
-
"_size_l": "
|
|
49
|
-
"_size_m": "
|
|
50
|
-
"_highlighted": "
|
|
51
|
-
"__SDropdownNestingItem": "
|
|
52
|
-
"__SItemHint": "
|
|
53
|
-
"__SDropdownMenuList": "
|
|
54
|
-
"__SBar": "
|
|
55
|
-
"__SShadowHorizontal": "
|
|
56
|
-
"__SShadowVertical": "
|
|
57
|
-
"__SItemContent": "
|
|
58
|
-
"__SDropdownMenuItemAddon": "
|
|
59
|
-
"__SItemContentText": "
|
|
45
|
+
"__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_1ulzv_gg_",
|
|
46
|
+
"_nesting-trigger": "__nesting-trigger_1ulzv_gg_",
|
|
47
|
+
"__SDropdownMenuNesting": "___SDropdownMenuNesting_1ulzv_gg_",
|
|
48
|
+
"_size_l": "_size_l_1ulzv_gg_",
|
|
49
|
+
"_size_m": "_size_m_1ulzv_gg_",
|
|
50
|
+
"_highlighted": "__highlighted_1ulzv_gg_",
|
|
51
|
+
"__SDropdownNestingItem": "___SDropdownNestingItem_1ulzv_gg_",
|
|
52
|
+
"__SItemHint": "___SItemHint_1ulzv_gg_",
|
|
53
|
+
"__SDropdownMenuList": "___SDropdownMenuList_1ulzv_gg_",
|
|
54
|
+
"__SBar": "___SBar_1ulzv_gg_",
|
|
55
|
+
"__SShadowHorizontal": "___SShadowHorizontal_1ulzv_gg_",
|
|
56
|
+
"__SShadowVertical": "___SShadowVertical_1ulzv_gg_",
|
|
57
|
+
"__SItemContent": "___SItemContent_1ulzv_gg_",
|
|
58
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1ulzv_gg_",
|
|
59
|
+
"__SItemContentText": "___SItemContentText_1ulzv_gg_"
|
|
60
60
|
});
|
|
61
61
|
import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
|
|
62
62
|
var menuItemContext = /*#__PURE__*/React.createContext({});
|
|
@@ -12,24 +12,24 @@ import ScrollAreaComponent from '@semcore/scroll-area';
|
|
|
12
12
|
import React from 'react';
|
|
13
13
|
import { ListBoxContextProvider } from './Context';
|
|
14
14
|
/*!__reshadow-styles__:"../style/dropdown-menu.shadow.css"*/
|
|
15
|
-
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
15
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SDropdownMenuList_1ulzv_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_1ulzv_gg_ .___SBar_1ulzv_gg_{z-index:3}.___SDropdownMenuList_1ulzv_gg_ .___SShadowHorizontal_1ulzv_gg_:after,.___SDropdownMenuList_1ulzv_gg_ .___SShadowHorizontal_1ulzv_gg_:before,.___SDropdownMenuList_1ulzv_gg_ .___SShadowVertical_1ulzv_gg_:after,.___SDropdownMenuList_1ulzv_gg_ .___SShadowVertical_1ulzv_gg_:before{border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuItemContainer_1ulzv_gg_ .___SItemContent_1ulzv_gg_:focus-visible{outline:0}.___SDropdownMenuItemContainer_1ulzv_gg_.__nesting-trigger_1ulzv_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_1ulzv_gg_,.___SItemContentText_1ulzv_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_1ulzv_gg_:first-child,.___SItemContentText_1ulzv_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1ulzv_gg_:last-child,.___SItemContentText_1ulzv_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_1ulzv_gg_,.___SDropdownMenuNesting_1ulzv_gg_._size_l_1ulzv_gg_,.___SDropdownMenuNesting_1ulzv_gg_._size_m_1ulzv_gg_{padding:0}.___SDropdownMenuNesting_1ulzv_gg_.__highlighted_1ulzv_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_1ulzv_gg_._size_l_1ulzv_gg_,.___SDropdownNestingItem_1ulzv_gg_._size_m_1ulzv_gg_{padding-right:0}.___SDropdownNestingItem_1ulzv_gg_ .___SDropdownMenuItemContainer_1ulzv_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemHint_1ulzv_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}", /*__inner_css_end__*/"1ulzv_gg_"),
|
|
16
16
|
/*__reshadow_css_end__*/
|
|
17
17
|
{
|
|
18
|
-
"__SDropdownMenuItemContainer": "
|
|
19
|
-
"_nesting-trigger": "__nesting-
|
|
20
|
-
"__SDropdownMenuNesting": "
|
|
21
|
-
"_size_l": "
|
|
22
|
-
"_size_m": "
|
|
23
|
-
"_highlighted": "
|
|
24
|
-
"__SDropdownNestingItem": "
|
|
25
|
-
"__SItemHint": "
|
|
26
|
-
"__SDropdownMenuList": "
|
|
27
|
-
"__SBar": "
|
|
28
|
-
"__SShadowHorizontal": "
|
|
29
|
-
"__SShadowVertical": "
|
|
30
|
-
"__SItemContent": "
|
|
31
|
-
"__SDropdownMenuItemAddon": "
|
|
32
|
-
"__SItemContentText": "
|
|
18
|
+
"__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_1ulzv_gg_",
|
|
19
|
+
"_nesting-trigger": "__nesting-trigger_1ulzv_gg_",
|
|
20
|
+
"__SDropdownMenuNesting": "___SDropdownMenuNesting_1ulzv_gg_",
|
|
21
|
+
"_size_l": "_size_l_1ulzv_gg_",
|
|
22
|
+
"_size_m": "_size_m_1ulzv_gg_",
|
|
23
|
+
"_highlighted": "__highlighted_1ulzv_gg_",
|
|
24
|
+
"__SDropdownNestingItem": "___SDropdownNestingItem_1ulzv_gg_",
|
|
25
|
+
"__SItemHint": "___SItemHint_1ulzv_gg_",
|
|
26
|
+
"__SDropdownMenuList": "___SDropdownMenuList_1ulzv_gg_",
|
|
27
|
+
"__SBar": "___SBar_1ulzv_gg_",
|
|
28
|
+
"__SShadowHorizontal": "___SShadowHorizontal_1ulzv_gg_",
|
|
29
|
+
"__SShadowVertical": "___SShadowVertical_1ulzv_gg_",
|
|
30
|
+
"__SItemContent": "___SItemContent_1ulzv_gg_",
|
|
31
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1ulzv_gg_",
|
|
32
|
+
"__SItemContentText": "___SItemContentText_1ulzv_gg_"
|
|
33
33
|
});
|
|
34
34
|
var VirtualListRoot = /*#__PURE__*/function (_Component) {
|
|
35
35
|
function VirtualListRoot() {
|
|
@@ -96,7 +96,7 @@ var VirtualListRoot = /*#__PURE__*/function (_Component) {
|
|
|
96
96
|
RenderRow = _this$asProps2.renderRow,
|
|
97
97
|
customData = _this$asProps2.customData;
|
|
98
98
|
var offsetHeight = (_this$listRef$current = (_this$listRef$current2 = this.listRef.current) === null || _this$listRef$current2 === void 0 ? void 0 : _this$listRef$current2.offsetHeight) !== null && _this$listRef$current !== void 0 ? _this$listRef$current : 0;
|
|
99
|
-
var prevPrepared = scrollDirection === '
|
|
99
|
+
var prevPrepared = scrollDirection === 'down' ? rowsBuffer / 2 : rowsBuffer;
|
|
100
100
|
var nextPrepared = scrollDirection === 'up' ? rowsBuffer / 2 : rowsBuffer;
|
|
101
101
|
var startIndex = Math.max(Math.floor(scrollTop / rowHeight) - prevPrepared, 0);
|
|
102
102
|
var lastIndex = Math.min(Math.ceil((scrollTop + offsetHeight) / rowHeight) + nextPrepared, rows.length);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualList.js","names":["Box","Root","Component","createComponent","sstyled","ScrollAreaComponent","React","ListBoxContextProvider","style","_sstyled","insert","VirtualListRoot","_Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","_defineProperty","createRef","scrollTop","scrollDirection","e","target","HTMLElement","state","setState","_inherits","_createClass","key","value","componentDidMount","_this2","_this$asProps","asProps","index","rowHeight","rowsBuffer","setTimeout","_this2$listRef$curren","_this2$listRef$curren2","_this2$containerRef$c","listHeight","listRef","current","getBoundingClientRect","height","containerRef","scrollTo","top","forceUpdate","render","_ref","_ref2","_this$listRef$current","_this$listRef$current2","SDropdownMenuList","SBar","Bar","_this$state","_this$asProps2","rows","styles","RenderRow","renderRow","customData","offsetHeight","prevPrepared","nextPrepared","startIndex","Math","max","floor","lastIndex","min","ceil","rowsToRender","slice","rowMarginTop","rowMarginBottom","createElement","cn","_objectSpread","_assignProps","handleScroll","Container","ref","tabIndex","undefined","h","map","item","row","data","VirtualList"],"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 = never> = {\n index: number;\n row: T;\n data: [D] extends [never] ? undefined : D;\n};\n\ntype VirtualListProps<T, D extends object = never> = {\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} & ([D] extends [never] ? { customData?: undefined } : {\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 = never> extends Component<VirtualListProps<T, D>, {}, State, [], { rowsBuffer: number; index: number }> {\n static displayName = 'VirtualList';\n static style = style;\n\n static defaultProps = {\n rowsBuffer: 6,\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, rowsBuffer } = 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\n if (index <= rowsBuffer) {\n this.forceUpdate(); // we need this for correct render all items with calculated container height\n }\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 = this.listRef.current?.offsetHeight ?? 0;\n const prevPrepared = scrollDirection === 'up' ? rowsBuffer / 2 : rowsBuffer;\n const nextPrepared = scrollDirection === 'up' ? rowsBuffer / 2 : rowsBuffer;\n\n const startIndex = Math.max(Math.floor(scrollTop / rowHeight) - prevPrepared, 0);\n\n const lastIndex = 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 // @ts-ignore\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 = never,\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":";;;;;;;;AAAA,SAASA,GAAG,QAAQ,0BAA0B;AAE9C,SAASC,IAAI,EAAEC,SAAS,EAAEC,eAAe,EAAEC,OAAO,QAAQ,eAAe;AACzE,OAAOC,mBAAmB,MAAM,sBAAsB;AACtD,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,sBAAsB,QAAQ,WAAW;AAAC;AAAA,IAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,IA8B7CC,eAAe,0BAAAC,UAAA;EAAA,SAAAD,gBAAA;IAAA,IAAAE,KAAA;IAAAC,eAAA,OAAAH,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,GAAAQ,UAAA,OAAAV,eAAA,KAAAW,MAAA,CAAAJ,IAAA;IAAAK,eAAA,CAAAV,KAAA,+BAQJP,KAAK,CAACkB,SAAS,CAAiB,CAAC;IAAAD,eAAA,CAAAV,KAAA,0BACtCP,KAAK,CAACkB,SAAS,CAAiB,CAAC;IAAAD,eAAA,CAAAV,KAAA,WAE5B;MACbY,SAAS,EAAE,CAAC;MACZC,eAAe,EAAE;IACnB,CAAC;IAAAH,eAAA,CAAAV,KAAA,kBAec,UAACc,CAAuC,EAAK;MAC1D,IAAIA,CAAC,CAACC,MAAM,YAAYC,WAAW,EAAE;QACnC,IAAMH,eAAe,GAAGC,CAAC,CAACC,MAAM,CAACH,SAAS,GAAGZ,KAAA,CAAKiB,KAAK,CAACL,SAAS,GAAG,MAAM,GAAG,IAAI;QAEjFZ,KAAA,CAAKkB,QAAQ,CAAC;UACZL,eAAe,EAAfA,eAAe;UACfD,SAAS,EAAEE,CAAC,CAACC,MAAM,CAACH;QACtB,CAAC,CAAC;MACJ;IACF,CAAC;IAAA,OAAAZ,KAAA;EAAA;EAAAmB,SAAA,CAAArB,eAAA,EAAAC,UAAA;EAAA,OAAAqB,YAAA,CAAAtB,eAAA;IAAAuB,GAAA;IAAAC,KAAA,EAtBD,SAAAC,iBAAiBA,CAAA,EAAG;MAAA,IAAAC,MAAA;MAClB,IAAAC,aAAA,GAAyC,IAAI,CAACC,OAAO;QAA7CC,KAAK,GAAAF,aAAA,CAALE,KAAK;QAAEC,SAAS,GAAAH,aAAA,CAATG,SAAS;QAAEC,UAAU,GAAAJ,aAAA,CAAVI,UAAU;MAEpCC,UAAU,CAAC,YAAM;QAAA,IAAAC,qBAAA,EAAAC,sBAAA,EAAAC,qBAAA;QACf,IAAMC,UAAU,GAAG,EAAAH,qBAAA,IAAAC,sBAAA,GAACR,MAAI,CAACW,OAAO,CAACC,OAAO,cAAAJ,sBAAA,uBAApBA,sBAAA,CAAsBK,qBAAqB,CAAC,CAAC,CAACC,MAAM,cAAAP,qBAAA,cAAAA,qBAAA,GAAI,CAAC,IAAI,CAAC;QAClF,CAAAE,qBAAA,GAAAT,MAAI,CAACe,YAAY,CAACH,OAAO,cAAAH,qBAAA,eAAzBA,qBAAA,CAA2BO,QAAQ,CAAC;UAAEC,GAAG,EAAEd,KAAK,GAAGC,SAAS,GAAGM,UAAU,GAAGN,SAAS,GAAG;QAAE,CAAC,CAAC;QAE5F,IAAID,KAAK,IAAIE,UAAU,EAAE;UACvBL,MAAI,CAACkB,WAAW,CAAC,CAAC,CAAC,CAAC;QACtB;MACF,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;IACV;EAAC;IAAArB,GAAA;IAAAC,KAAA,EAaD,SAAAqB,MAAMA,CAAA,EAAG;MAAA,IAAAC,IAAA,QAAAlB,OAAA;QAAAmB,KAAA;QAAAC,qBAAA;QAAAC,sBAAA;MACP,IAAMC,iBAAiB,GAwBTxD,mBAAmB;MAvBjC,IAAMyD,IAAI,GAAGzD,mBAAmB,CAAC0D,GAAG;MAEpC,IAAAC,WAAA,GAAuC,IAAI,CAAClC,KAAK;QAAzCJ,eAAe,GAAAsC,WAAA,CAAftC,eAAe;QAAED,SAAS,GAAAuC,WAAA,CAATvC,SAAS;MAClC,IAAAwC,cAAA,GAAkF,IAAI,CAAC1B,OAAO;QAAtF2B,IAAI,GAAAD,cAAA,CAAJC,IAAI;QAAEzB,SAAS,GAAAwB,cAAA,CAATxB,SAAS;QAAEC,UAAU,GAAAuB,cAAA,CAAVvB,UAAU;QAAEyB,MAAM,GAAAF,cAAA,CAANE,MAAM;QAAaC,SAAS,GAAAH,cAAA,CAApBI,SAAS;QAAaC,UAAU,GAAAL,cAAA,CAAVK,UAAU;MAE7E,IAAMC,YAAY,IAAAZ,qBAAA,IAAAC,sBAAA,GAAG,IAAI,CAACZ,OAAO,CAACC,OAAO,cAAAW,sBAAA,uBAApBA,sBAAA,CAAsBW,YAAY,cAAAZ,qBAAA,cAAAA,qBAAA,GAAI,CAAC;MAC5D,IAAMa,YAAY,GAAG9C,eAAe,KAAK,IAAI,GAAGgB,UAAU,GAAG,CAAC,GAAGA,UAAU;MAC3E,IAAM+B,YAAY,GAAG/C,eAAe,KAAK,IAAI,GAAGgB,UAAU,GAAG,CAAC,GAAGA,UAAU;MAE3E,IAAMgC,UAAU,GAAGC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,KAAK,CAACpD,SAAS,GAAGgB,SAAS,CAAC,GAAG+B,YAAY,EAAE,CAAC,CAAC;MAEhF,IAAMM,SAAS,GAAGH,IAAI,CAACI,GAAG,CACxBJ,IAAI,CAACK,IAAI,CAAC,CAACvD,SAAS,GAAG8C,YAAY,IAAI9B,SAAS,CAAC,GAAGgC,YAAY,EAChEP,IAAI,CAACjD,MACP,CAAC;MAED,IAAMgE,YAAY,GAAGf,IAAI,CAACgB,KAAK,CAACR,UAAU,EAAEI,SAAS,CAAC;MACtD,IAAMK,YAAY,GAAG1C,SAAS,GAAGiC,UAAU;MAC3C,IAAMU,eAAe,GAAG3C,SAAS,IAAIyB,IAAI,CAACjD,MAAM,GAAG6D,SAAS,CAAC;MAE7D,OAAApB,KAAA,GAAOtD,OAAO,CAAC+D,MAAM,CAAC,eACpB7D,KAAA,CAAA+E,aAAA,CAAC9E,sBAAsB,EAAAmD,KAAA,CAAA4B,EAAA,6CACrBhF,KAAA,CAAA+E,aAAA,CAACxB,iBAAiB,EAAAH,KAAA,CAAA4B,EAAA,sBAAAC,aAAA,KAAAC,YAAA;QAAA,UAER,IAAI;QAAA,cACA,EAAE;QAAA,eACF,OAAO;QAAA,YACT,IAAI,CAACC,YAAY;QAAA,mBACX,MAAM;QAAA,OACjB,IAAI,CAACzC;MAAO,GAAAS,IAAA,kBAEjBnD,KAAA,CAAA+E,aAAA,CAAChF,mBAAmB,CAACqF,SAAS;QAACC,GAAG,EAAE,IAAI,CAACvC,YAAa;QAACwC,QAAQ,EAAEC,SAAU;QAACC,CAAC,EAAE5B,IAAI,CAACjD,MAAM,GAAGwB;MAAU,gBACrGnC,KAAA,CAAA+E,aAAA,CAACrF,GAAG,EAAA0D,KAAA,CAAA4B,EAAA;QAAA,KAAIH;MAAY,EAAG,CAAC,EACvBF,YAAY,CAACc,GAAG,CAAC,UAACC,IAAI,EAAExD,KAAK,EAAK;QACjC;QACA,oBAAOlC,KAAA,CAAA+E,aAAA,CAACjB,SAAS;UAAClC,GAAG,EAAEwC,UAAU,GAAGlC,KAAM;UAACyD,GAAG,EAAED,IAAK;UAACxD,KAAK,EAAEkC,UAAU,GAAGlC,KAAM;UAAC0D,IAAI,EAAE5B;QAAW,CAAE,CAAC;MACvG,CAAC,CAAC,eACFhE,KAAA,CAAA+E,aAAA,CAACrF,GAAG,EAAA0D,KAAA,CAAA4B,EAAA;QAAA,KAAIF;MAAe,EAAG,CACG,CAAC,eAChC9E,KAAA,CAAA+E,aAAA,CAACvB,IAAI,EAAAJ,KAAA,CAAA4B,EAAA;QAAA,eAAa;MAAY,EAAE,CAAC,eACjChF,KAAA,CAAA+E,aAAA,CAACvB,IAAI,EAAAJ,KAAA,CAAA4B,EAAA;QAAA,eAAa;MAAU,EAAE,CACb,CACG,CAAC;IAE7B;EAAC;AAAA,EAtFiEpF,SAAS;AAAAqB,eAAA,CAAvEZ,eAAe,iBACE,aAAa;AAAAY,eAAA,CAD9BZ,eAAe,WAEJH,KAAK;AAAAe,eAAA,CAFhBZ,eAAe,kBAIG;EACpB+B,UAAU,EAAE;AACd,CAAC;AA0FH,OAAO,IAAMyD,WAAW,GAAGhG,eAAe,CAACQ,eAAe,CAAyB","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"VirtualList.js","names":["Box","Root","Component","createComponent","sstyled","ScrollAreaComponent","React","ListBoxContextProvider","style","_sstyled","insert","VirtualListRoot","_Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","_defineProperty","createRef","scrollTop","scrollDirection","e","target","HTMLElement","state","setState","_inherits","_createClass","key","value","componentDidMount","_this2","_this$asProps","asProps","index","rowHeight","rowsBuffer","setTimeout","_this2$listRef$curren","_this2$listRef$curren2","_this2$containerRef$c","listHeight","listRef","current","getBoundingClientRect","height","containerRef","scrollTo","top","forceUpdate","render","_ref","_ref2","_this$listRef$current","_this$listRef$current2","SDropdownMenuList","SBar","Bar","_this$state","_this$asProps2","rows","styles","RenderRow","renderRow","customData","offsetHeight","prevPrepared","nextPrepared","startIndex","Math","max","floor","lastIndex","min","ceil","rowsToRender","slice","rowMarginTop","rowMarginBottom","createElement","cn","_objectSpread","_assignProps","handleScroll","Container","ref","tabIndex","undefined","h","map","item","row","data","VirtualList"],"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 = never> = {\n index: number;\n row: T;\n data: [D] extends [never] ? undefined : D;\n};\n\ntype VirtualListProps<T, D extends object = never> = {\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} & ([D] extends [never] ? { customData?: undefined } : {\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 = never> extends Component<VirtualListProps<T, D>, {}, State, [], { rowsBuffer: number; index: number }> {\n static displayName = 'VirtualList';\n static style = style;\n\n static defaultProps = {\n rowsBuffer: 6,\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, rowsBuffer } = 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\n if (index <= rowsBuffer) {\n this.forceUpdate(); // we need this for correct render all items with calculated container height\n }\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 = this.listRef.current?.offsetHeight ?? 0;\n const prevPrepared = scrollDirection === 'down' ? rowsBuffer / 2 : rowsBuffer;\n const nextPrepared = scrollDirection === 'up' ? rowsBuffer / 2 : rowsBuffer;\n\n const startIndex = Math.max(Math.floor(scrollTop / rowHeight) - prevPrepared, 0);\n\n const lastIndex = 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 // @ts-ignore\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 = never,\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":"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","ignoreList":[]}
|
package/lib/esm/DropdownMenu.mjs
CHANGED
|
@@ -29,26 +29,26 @@ var style = (
|
|
|
29
29
|
/*__reshadow_css_start__*/
|
|
30
30
|
(sstyled.insert(
|
|
31
31
|
/*__inner_css_start__*/
|
|
32
|
-
".
|
|
32
|
+
".___SDropdownMenuList_1ulzv_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_1ulzv_gg_ .___SBar_1ulzv_gg_{z-index:3}.___SDropdownMenuList_1ulzv_gg_ .___SShadowHorizontal_1ulzv_gg_:after,.___SDropdownMenuList_1ulzv_gg_ .___SShadowHorizontal_1ulzv_gg_:before,.___SDropdownMenuList_1ulzv_gg_ .___SShadowVertical_1ulzv_gg_:after,.___SDropdownMenuList_1ulzv_gg_ .___SShadowVertical_1ulzv_gg_:before{border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuItemContainer_1ulzv_gg_ .___SItemContent_1ulzv_gg_:focus-visible{outline:0}.___SDropdownMenuItemContainer_1ulzv_gg_.__nesting-trigger_1ulzv_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_1ulzv_gg_,.___SItemContentText_1ulzv_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_1ulzv_gg_:first-child,.___SItemContentText_1ulzv_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1ulzv_gg_:last-child,.___SItemContentText_1ulzv_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_1ulzv_gg_,.___SDropdownMenuNesting_1ulzv_gg_._size_l_1ulzv_gg_,.___SDropdownMenuNesting_1ulzv_gg_._size_m_1ulzv_gg_{padding:0}.___SDropdownMenuNesting_1ulzv_gg_.__highlighted_1ulzv_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_1ulzv_gg_._size_l_1ulzv_gg_,.___SDropdownNestingItem_1ulzv_gg_._size_m_1ulzv_gg_{padding-right:0}.___SDropdownNestingItem_1ulzv_gg_ .___SDropdownMenuItemContainer_1ulzv_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemHint_1ulzv_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}",
|
|
33
33
|
/*__inner_css_end__*/
|
|
34
|
-
"
|
|
34
|
+
"1ulzv_gg_"
|
|
35
35
|
), /*__reshadow_css_end__*/
|
|
36
36
|
{
|
|
37
|
-
"__SDropdownMenuItemContainer": "
|
|
38
|
-
"_nesting-trigger": "__nesting-
|
|
39
|
-
"__SDropdownMenuNesting": "
|
|
40
|
-
"_size_l": "
|
|
41
|
-
"_size_m": "
|
|
42
|
-
"_highlighted": "
|
|
43
|
-
"__SDropdownNestingItem": "
|
|
44
|
-
"__SItemHint": "
|
|
45
|
-
"__SDropdownMenuList": "
|
|
46
|
-
"__SBar": "
|
|
47
|
-
"__SShadowHorizontal": "
|
|
48
|
-
"__SShadowVertical": "
|
|
49
|
-
"__SItemContent": "
|
|
50
|
-
"__SDropdownMenuItemAddon": "
|
|
51
|
-
"__SItemContentText": "
|
|
37
|
+
"__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_1ulzv_gg_",
|
|
38
|
+
"_nesting-trigger": "__nesting-trigger_1ulzv_gg_",
|
|
39
|
+
"__SDropdownMenuNesting": "___SDropdownMenuNesting_1ulzv_gg_",
|
|
40
|
+
"_size_l": "_size_l_1ulzv_gg_",
|
|
41
|
+
"_size_m": "_size_m_1ulzv_gg_",
|
|
42
|
+
"_highlighted": "__highlighted_1ulzv_gg_",
|
|
43
|
+
"__SDropdownNestingItem": "___SDropdownNestingItem_1ulzv_gg_",
|
|
44
|
+
"__SItemHint": "___SItemHint_1ulzv_gg_",
|
|
45
|
+
"__SDropdownMenuList": "___SDropdownMenuList_1ulzv_gg_",
|
|
46
|
+
"__SBar": "___SBar_1ulzv_gg_",
|
|
47
|
+
"__SShadowHorizontal": "___SShadowHorizontal_1ulzv_gg_",
|
|
48
|
+
"__SShadowVertical": "___SShadowVertical_1ulzv_gg_",
|
|
49
|
+
"__SItemContent": "___SItemContent_1ulzv_gg_",
|
|
50
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1ulzv_gg_",
|
|
51
|
+
"__SItemContentText": "___SItemContentText_1ulzv_gg_"
|
|
52
52
|
})
|
|
53
53
|
);
|
|
54
54
|
var menuItemContext = /* @__PURE__ */ React.createContext({});
|
|
@@ -14,26 +14,26 @@ var style = (
|
|
|
14
14
|
/*__reshadow_css_start__*/
|
|
15
15
|
(sstyled.insert(
|
|
16
16
|
/*__inner_css_start__*/
|
|
17
|
-
".
|
|
17
|
+
".___SDropdownMenuList_1ulzv_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_1ulzv_gg_ .___SBar_1ulzv_gg_{z-index:3}.___SDropdownMenuList_1ulzv_gg_ .___SShadowHorizontal_1ulzv_gg_:after,.___SDropdownMenuList_1ulzv_gg_ .___SShadowHorizontal_1ulzv_gg_:before,.___SDropdownMenuList_1ulzv_gg_ .___SShadowVertical_1ulzv_gg_:after,.___SDropdownMenuList_1ulzv_gg_ .___SShadowVertical_1ulzv_gg_:before{border-radius:var(--intergalactic-control-rounded, 6px)}.___SDropdownMenuItemContainer_1ulzv_gg_ .___SItemContent_1ulzv_gg_:focus-visible{outline:0}.___SDropdownMenuItemContainer_1ulzv_gg_.__nesting-trigger_1ulzv_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_1ulzv_gg_,.___SItemContentText_1ulzv_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-1x, 4px);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SDropdownMenuItemAddon_1ulzv_gg_:first-child,.___SItemContentText_1ulzv_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1ulzv_gg_:last-child,.___SItemContentText_1ulzv_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_1ulzv_gg_,.___SDropdownMenuNesting_1ulzv_gg_._size_l_1ulzv_gg_,.___SDropdownMenuNesting_1ulzv_gg_._size_m_1ulzv_gg_{padding:0}.___SDropdownMenuNesting_1ulzv_gg_.__highlighted_1ulzv_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_1ulzv_gg_._size_l_1ulzv_gg_,.___SDropdownNestingItem_1ulzv_gg_._size_m_1ulzv_gg_{padding-right:0}.___SDropdownNestingItem_1ulzv_gg_ .___SDropdownMenuItemContainer_1ulzv_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}.___SItemHint_1ulzv_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}",
|
|
18
18
|
/*__inner_css_end__*/
|
|
19
|
-
"
|
|
19
|
+
"1ulzv_gg_"
|
|
20
20
|
), /*__reshadow_css_end__*/
|
|
21
21
|
{
|
|
22
|
-
"__SDropdownMenuItemContainer": "
|
|
23
|
-
"_nesting-trigger": "__nesting-
|
|
24
|
-
"__SDropdownMenuNesting": "
|
|
25
|
-
"_size_l": "
|
|
26
|
-
"_size_m": "
|
|
27
|
-
"_highlighted": "
|
|
28
|
-
"__SDropdownNestingItem": "
|
|
29
|
-
"__SItemHint": "
|
|
30
|
-
"__SDropdownMenuList": "
|
|
31
|
-
"__SBar": "
|
|
32
|
-
"__SShadowHorizontal": "
|
|
33
|
-
"__SShadowVertical": "
|
|
34
|
-
"__SItemContent": "
|
|
35
|
-
"__SDropdownMenuItemAddon": "
|
|
36
|
-
"__SItemContentText": "
|
|
22
|
+
"__SDropdownMenuItemContainer": "___SDropdownMenuItemContainer_1ulzv_gg_",
|
|
23
|
+
"_nesting-trigger": "__nesting-trigger_1ulzv_gg_",
|
|
24
|
+
"__SDropdownMenuNesting": "___SDropdownMenuNesting_1ulzv_gg_",
|
|
25
|
+
"_size_l": "_size_l_1ulzv_gg_",
|
|
26
|
+
"_size_m": "_size_m_1ulzv_gg_",
|
|
27
|
+
"_highlighted": "__highlighted_1ulzv_gg_",
|
|
28
|
+
"__SDropdownNestingItem": "___SDropdownNestingItem_1ulzv_gg_",
|
|
29
|
+
"__SItemHint": "___SItemHint_1ulzv_gg_",
|
|
30
|
+
"__SDropdownMenuList": "___SDropdownMenuList_1ulzv_gg_",
|
|
31
|
+
"__SBar": "___SBar_1ulzv_gg_",
|
|
32
|
+
"__SShadowHorizontal": "___SShadowHorizontal_1ulzv_gg_",
|
|
33
|
+
"__SShadowVertical": "___SShadowVertical_1ulzv_gg_",
|
|
34
|
+
"__SItemContent": "___SItemContent_1ulzv_gg_",
|
|
35
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1ulzv_gg_",
|
|
36
|
+
"__SItemContentText": "___SItemContentText_1ulzv_gg_"
|
|
37
37
|
})
|
|
38
38
|
);
|
|
39
39
|
var VirtualListRoot = /* @__PURE__ */ (function(_Component) {
|
|
@@ -87,7 +87,7 @@ var VirtualListRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
87
87
|
var _this$state = this.state, scrollDirection = _this$state.scrollDirection, scrollTop = _this$state.scrollTop;
|
|
88
88
|
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;
|
|
89
89
|
var offsetHeight = (_this$listRef$current = (_this$listRef$current2 = this.listRef.current) === null || _this$listRef$current2 === void 0 ? void 0 : _this$listRef$current2.offsetHeight) !== null && _this$listRef$current !== void 0 ? _this$listRef$current : 0;
|
|
90
|
-
var prevPrepared = scrollDirection === "
|
|
90
|
+
var prevPrepared = scrollDirection === "down" ? rowsBuffer / 2 : rowsBuffer;
|
|
91
91
|
var nextPrepared = scrollDirection === "up" ? rowsBuffer / 2 : rowsBuffer;
|
|
92
92
|
var startIndex = Math.max(Math.floor(scrollTop / rowHeight) - prevPrepared, 0);
|
|
93
93
|
var lastIndex = Math.min(Math.ceil((scrollTop + offsetHeight) / rowHeight) + nextPrepared, rows.length);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/dropdown-menu",
|
|
3
3
|
"description": "Semrush DropdownMenu Component",
|
|
4
|
-
"version": "16.2.1",
|
|
4
|
+
"version": "16.2.2-prerelease.1",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@semcore/button": "16.0.12",
|
|
18
18
|
"@semcore/dropdown": "16.1.3",
|
|
19
|
-
"@semcore/icon": "16.7.
|
|
19
|
+
"@semcore/icon": "16.7.4-prerelease.1",
|
|
20
20
|
"@semcore/typography": "16.3.2",
|
|
21
21
|
"@semcore/popper": "16.0.11",
|
|
22
22
|
"@semcore/flex-box": "16.0.11",
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@types/classnames": "2.2.6",
|
|
36
|
-
"@semcore/base-trigger": "16.4.5",
|
|
37
36
|
"@semcore/core": "16.5.1",
|
|
37
|
+
"@semcore/base-trigger": "16.4.5",
|
|
38
38
|
"@semcore/button": "16.0.12",
|
|
39
39
|
"@semcore/testing-utils": "1.0.0",
|
|
40
40
|
"@semcore/icon": "16.7.3"
|